/* custom font — replace "MyFont" with your font name and filename */
@font-face{
  font-family: 'MyFont';
  src: url('MyFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:      #1c3a6e;
  --text:     #22385a;
  --meta:     #5b6a82;
  --accent:   #8a6b3a;
  --paper:    #f8f4e6;
  --rule:     #c3cfe0;
  --red:      rgba(190,70,70,.55);
  --strike:   #b04040;
  --hl:       rgba(255,230,110,.75);
  --lh:       28px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  min-height:100vh;
  padding:2rem .8rem 4rem;
  background:#ddd5c5;
  background-image:
    radial-gradient(circle at 30% 20%,rgba(180,160,130,.25),transparent 60%),
    radial-gradient(circle at 80% 90%,rgba(140,120,90,.2),transparent 55%);
  font-family:'MyFont', 'Caveat', cursive;
  font-size:17px;
  line-height:var(--lh);
  color:var(--ink);
}

/* page */
.paper{
  max-width:700px;
  margin:0 auto;
  padding:2.2rem 2rem 3rem 3.6rem;
  position:relative;
  background:var(--paper);
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(var(--lh) - 1px),
    var(--rule) calc(var(--lh) - 1px), var(--rule) var(--lh)
  );
  background-position:0 22px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    2px 3px 14px rgba(60,40,20,.22),
    0 0 0 1px rgba(120,100,70,.15);
}
.paper::before{
  content:"";position:absolute;
  left:2.9rem;top:0;bottom:0;width:1px;
  background:var(--red);
}
.paper::after{
  content:"";position:absolute;
  left:48%;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,
    transparent 0%, rgba(120,100,70,.15) 20%,
    rgba(120,100,70,.15) 80%, transparent 100%);
}

/* ---- background decorations: keep their own fonts ---- */
.stain{
  position:absolute;top:620px;right:50px;
  width:96px;height:96px;border-radius:50%;
  border:5px solid rgba(140,90,40,.10);
  box-shadow:inset 0 0 0 4px rgba(140,90,40,.05);
  transform:rotate(18deg) scaleY(.94);
  pointer-events:none;
}
.date{
  position:absolute;top:1.1rem;right:1.6rem;
  font-family:'Caveat',cursive;font-size:1.05rem;
  color:rgba(28,58,110,.55);
  transform:rotate(-2deg);
}
.eq{
  position:absolute;
  font-family:'Caveat',cursive;font-size:1.1rem;
  color:rgba(28,58,110,.4);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.eq1{top:5.2rem;  right:1rem;   transform:rotate(-4deg)}
.eq2{top:14rem;   right:.6rem;  font-size:1.05rem;transform:rotate(5deg)}
.eq3{top:24.5rem; left:.45rem;  transform:rotate(-3deg)}
.eq4{top:38rem;   right:.5rem;  font-size:1rem;  transform:rotate(6deg)}
.eq5{top:52rem;   left:.5rem;   font-size:1.05rem;transform:rotate(-5deg)}
.eq6{top:66rem;   right:.6rem;  transform:rotate(4deg)}

.scribble{
  position:absolute;top:12.5rem;right:1rem;
  width:120px;text-align:right;
  font-family:'Caveat',cursive;font-size:1.1rem;line-height:1.1;
  color:var(--accent);
  transform:rotate(-3deg);
  pointer-events:none;
}
.scribble svg{
  display:block;width:60px;height:26px;
  margin:.15rem 0 0 auto;
  stroke:var(--accent);stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- typography: all custom ---- */
h1{
  font-family:'MyFont', 'Caveat', cursive;
  font-weight:700;
  font-size:3rem;line-height:1.05;letter-spacing:-.3px;
  transform:rotate(-.6deg);
  margin-bottom:.1rem;
  text-transform:lowercase;
}

.subtitle{
  font-weight:300;font-size:1.05rem;color:#37517a;
}
.currently{
  font-size:.95rem;
  color:var(--meta);
  margin-bottom:1.6rem;
  letter-spacing:.2px;
}
.currently::before{
  content:"currently · ";
  color:var(--accent);
}
h2{
  font-family:'MyFont', 'Caveat', cursive;
  font-weight:700;
  font-size:1.8rem;
  margin:1.9rem 0 .55rem;
  padding-bottom:.35rem;
  display:inline-block;position:relative;
  transform:rotate(-.4deg);
}
h2::after{
  content:"";position:absolute;
  left:-3px;right:-6px;bottom:-2px;height:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q20 1.5 40 3.5 T80 3 T119 2.2' stroke='%231c3a6e' stroke-width='1.7' fill='none' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
h2 .n{
  font-weight:400;font-size:1rem;color:var(--accent);
  margin-right:.55rem;letter-spacing:1px;
}
h3{font-weight:700;font-size:1.02rem}
p{color:var(--text)}
strong{font-weight:700;color:var(--ink)}

/* links */
a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed var(--accent);
}
a:hover{
  background:rgba(138,107,58,.10);
  border-bottom-style:solid;
}

.hl{
  background:linear-gradient(to bottom,
    transparent 8%, var(--hl) 12%,
    rgba(255,230,110,.6) 88%, transparent 92%);
  padding:0 .18rem;
}

.strike{
  position:relative;
  color:var(--meta);
  padding:0 .1rem;
}
.strike::after{
  content:"";
  position:absolute;
  left:-3px;right:-3px;top:54%;
  height:2px;
  background:var(--strike);
  border-radius:2px;
  transform:rotate(-2deg);
  transform-origin:left center;
}

/* skills sets */
.set{margin-top:.2rem}
.set + .set{margin-top:0}
.set .b{color:var(--accent)}
.skills{display:inline}
.skills span{
  display:inline-block;
  font-size:15px;line-height:20px;
  padding:.15rem .55rem .1rem;
  margin:.15rem .1rem;
  border:1.4px solid var(--ink);
  border-radius:13px 14px 11px 13px;
  transform:rotate(-.8deg);
}
.skills span:nth-child(2n){transform:rotate(.9deg)}
.skills span:nth-child(3n){transform:rotate(-1.3deg)}

/* entries */
.entry{margin-bottom:1.1rem}
.entry .row{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;
  gap:.3rem;margin-bottom:.05rem;
}
.entry .when{
  font-weight:300;font-size:.95rem;color:var(--meta);
}
.entry ul{list-style:none;margin-top:.05rem}
.entry li{
  font-size:16.5px;
  padding-left:1.25rem;
  position:relative;
}
.entry li::before{
  content:"–";position:absolute;left:.15rem;color:#8a9bb3;
}

/* projects */
.proj{margin-bottom:1.2rem}
.proj h3{margin-bottom:.05rem}
.proj h3 a{
  color:var(--ink);
  border-bottom:none;
}
.proj h3 a:hover{background:none;color:var(--accent)}
.proj h3 a::after{
  content:" ↗";
  font-family:'MyFont', 'Caveat', cursive;
  font-size:.85em;
  color:var(--meta);
  transition:color .15s;
}
.proj h3 a:hover::after{color:var(--accent)}
.proj p{font-size:16.5px}
.proj .tag{
  font-weight:300;font-size:.9rem;color:var(--meta);
  letter-spacing:.2px;
}
.star{
  display:inline-block;width:16px;height:16px;
  vertical-align:-3px;margin-left:.35rem;
  transform:rotate(6deg);
  stroke:var(--accent);stroke-width:1.4;
  fill:none;stroke-linejoin:round;
}

/* contact list */
.reach{
  list-style:none;
  margin-top:.3rem;
}
.reach li{font-size:16.5px}
.reach .k{
  display:inline-block;
  width:6rem;
  font-weight:300;
  color:var(--meta);
}

/* signature */
.sign{
  display:inline-block;
  margin-top:1.6rem;
  font-family:'MyFont', 'Caveat', cursive;
  font-size:1.9rem;
  transform:rotate(-2deg);
}
.sign small{
  display:block;
  margin-top:-.35rem;
  font-family:'MyFont', 'Caveat', cursive;
  font-weight:300;font-size:.85rem;
  color:var(--meta);letter-spacing:.5px;
  transform:rotate(.4deg);
}

/* mobile */
@media (max-width:560px){
  body{font-size:16px;--lh:26px;padding:1rem .4rem 2.5rem}
  .paper{
    padding:1.6rem 1rem 2rem 2.4rem;
    background-position:0 18px;
  }
  .paper::before{left:1.75rem}
  h1{font-size:2.2rem}
  h2{font-size:1.5rem}
  .eq,.scribble,.stain{display:none}
  .entry li,.proj p,.reach li{font-size:15.5px}
  .sign{font-size:1.6rem}
}

/* print */
@media print{
  body{background:#fff;padding:0;font-size:14px}
  .paper{
    max-width:100%;box-shadow:none;
    background:#fff;background-image:none;
    padding:0;
  }
  .paper::before,.paper::after{display:none}
  .stain,.date,.eq,.scribble{display:none}
  a{color:#000;border-bottom:none}
  a::after{content:""}
  .hl{background:rgba(255,230,110,.5)}
}