:root{
  --paper:#f4efe3;
  --paper-2:#fbf7ec;
  --ink:#23201a;
  --ink-soft:#433d30;
  --olive:#6e6753;
  --red:#bf4126;
  --green:#23413e;
  --line:#ddd3b8;
  --line-soft:#e7dfc8;
  --shadow:0 10px 24px rgba(35,32,26,.13);
  --sans:'Instrument Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--paper)}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--mono);font-size:.78em;letter-spacing:.02em}
.hand,.note,.hand-inline{font-family:var(--hand)}

.wrap{
  max-width:1380px;
  margin:0 auto;
  padding:56px 40px 40px;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:84px;
  align-items:start;
}

/* ---------- sidebar ---------- */
.side{position:sticky;top:44px}
.side-inner{display:flex;flex-direction:column;gap:0}

.portrait{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:10px 10px 14px;
  box-shadow:var(--shadow);
  transform:rotate(-1.4deg);
  position:relative;
  width:fit-content;
  margin-bottom:26px;
}
.portrait::before{
  content:"";
  position:absolute;top:-14px;left:50%;
  width:15px;height:30px;
  transform:translateX(-50%);
  background:#b3906a;
  border:1px solid #8f6f4d;
  border-radius:3px;
  box-shadow:inset 0 -12px 0 rgba(0,0,0,.08);
  z-index:2;
}
.portrait img{display:block;width:218px;height:245px;object-fit:cover}

.name{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.name .paren{font-weight:400;color:var(--olive)}
.seal{
  display:inline-block;
  font-family:'Songti SC','SimSun',serif;
  font-size:15px;line-height:1;
  color:var(--paper-2);
  background:var(--red);
  border-radius:4px;
  padding:4px 4px 3px;
  transform:rotate(6deg) translateY(-6px);
}
.role{margin-top:6px;font-weight:500;color:var(--ink-soft)}
.loc{margin-top:4px;color:var(--olive)}
.loc .mono{font-size:.72rem}
.hand-inline{color:var(--red);font-size:19px}

.nav{display:flex;flex-direction:column;gap:2px;margin:28px 0;border-top:1px dashed var(--line);padding-top:18px}
.nav a{
  text-decoration:none;
  font-weight:500;
  font-size:15px;
  color:var(--ink-soft);
  padding:4px 0 4px 18px;
  position:relative;
  transition:color .15s;
}
.nav a::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:10px;height:2px;
  background:var(--red);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left;
  transition:transform .18s;
}
.nav a:hover,.nav a.active{color:var(--red)}
.nav a:hover::before,.nav a.active::before{transform:translateY(-50%) scaleX(1)}

.contact{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:18px}
.contact a{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-soft);
}
.contact a:hover{color:var(--red)}
.contact svg{width:17px;height:17px;flex:none;color:var(--olive)}
.contact a:hover svg{color:var(--red)}

.cv-btn{
  display:inline-block;
  margin-top:22px;
  padding:10px 18px;
  border:1.5px solid var(--ink);
  border-radius:6px;
  background:var(--paper-2);
  font-weight:600;
  font-size:14.5px;
  text-decoration:none;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
  width:fit-content;
}
.cv-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);color:var(--ink)}
.cv-btn .mono{color:var(--olive)}

.side-note{margin-top:22px;color:var(--red);font-size:19px;line-height:1.25;transform:rotate(-2deg)}

/* ---------- main ---------- */
main{min-width:0}
section,footer{margin-bottom:84px;position:relative}
footer{margin-bottom:0}

.kicker{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:10px;
}
h2{
  font-size:30px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:6px;
  width:fit-content;
}
h2::after{
  content:"";
  display:block;
  height:7px;
  margin-top:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7' viewBox='0 0 120 7'%3E%3Cpath d='M2 5 Q 20 1 40 4 T 78 3.5 T 118 4' fill='none' stroke='%23bf4126' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
}
h2 + p, .section-sub{margin-top:14px}
section > p, .para-note > p{max-width:60ch;margin-top:14px;color:var(--ink-soft)}
section > p:first-of-type{margin-top:18px}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.section-sub{color:var(--olive)}

/* handwritten margin notes */
.note{
  float:right;
  width:180px;
  margin:4px 0 12px 26px;
  color:var(--red);
  font-size:19.5px;
  line-height:1.22;
  transform:rotate(-2.5deg);
  text-align:left;
}
.note-low{
  float:none;
  display:inline-block;
  width:auto;
  margin:18px 0 0;
  transform:rotate(-1.5deg);
}
.para-note::after{content:"";display:table;clear:both}
@media (max-width:560px){
  .note{float:none;display:inline-block;width:auto;margin:10px 0 0}
}

/* research entries + rows */
.interests{margin-top:14px;color:var(--ink-soft)}
.interests .mono{color:var(--olive)}
.entry{border-top:1px dashed var(--line);padding:20px 0 4px;margin-top:20px}
.entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.entry p{max-width:62ch;margin-top:8px;color:var(--ink-soft)}
.entry .meta{color:var(--olive);margin-top:6px}

.stamp{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1.5px solid currentColor;
  border-radius:3px;
  padding:3px 9px;
  transform:rotate(-2deg);
  white-space:nowrap;
  flex:none;
}
.stamp-red{color:var(--red)}
.stamp-green{color:var(--green)}
.stamp-olive{color:var(--olive)}

.row{
  display:flex;gap:20px;align-items:flex-start;
  border-top:1px dashed var(--line);
  padding:22px 0 6px;margin-top:20px;
}
.row-body{flex:1;min-width:0}
.row-body p{margin-top:5px;color:var(--ink-soft);max-width:56ch}
.row-body .meta{color:var(--olive);font-size:14.5px}
.dates{color:var(--olive);white-space:nowrap;padding-top:4px;font-size:.74rem}
.inst{
  width:66px;height:66px;flex:none;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px;
  transform:rotate(-3deg);
}

/* project cards */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:22px;
  margin-top:26px;
}
.card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 22px 18px;
  transition:transform .15s,box-shadow .15s;
}
.card:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:var(--shadow)}
.card-stamp{position:absolute;top:14px;right:14px}
.card h3{padding-right:90px}
.card p{margin-top:10px;color:var(--ink-soft);font-size:15px}
.card .tech{color:var(--olive);font-size:.72rem;margin-top:12px}
.card .links{margin-top:10px}
.card .links a{font-weight:600;font-size:14.5px}

/* awards */
.awards{list-style:none;margin-top:10px}
.awards li{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  border-top:1px dashed var(--line);
  padding:15px 0;
}
.awards li:first-child{margin-top:10px}

/* photo wall */
.wire-row{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
  padding-top:30px;
  margin-top:26px;
  flex-wrap:wrap;
}
.wire-row::before{
  content:"";
  position:absolute;top:13px;left:-6px;right:-6px;
  height:2px;
  background:var(--olive);
  opacity:.55;
  border-radius:2px;
}
.hang{
  position:relative;
  background:#fffdf6;
  border:1px solid var(--line-soft);
  padding:9px 9px 11px;
  width:206px;
  box-shadow:var(--shadow);
  transform:rotate(var(--r,0deg));
  transform-origin:top center;
  transition:transform .25s ease;
  margin-top:2px;
}
.hang:hover{transform:rotate(0deg) translateY(3px)}
.hang::before{
  content:"";
  position:absolute;top:-19px;left:50%;
  width:14px;height:32px;
  transform:translateX(-50%);
  background:#b3906a;
  border:1px solid #8f6f4d;
  border-radius:3px;
  z-index:2;
}
.hang::after{
  content:"";
  position:absolute;top:-8px;left:50%;
  width:4px;height:4px;
  transform:translateX(-50%);
  background:#6d6a63;
  border-radius:50%;
  z-index:3;
}
.hang img{display:block;width:100%;height:190px;object-fit:cover}
.hang figcaption,.polaroid figcaption{
  font-family:var(--hand);
  font-size:15.5px;
  line-height:1.2;
  color:var(--ink-soft);
  margin-top:7px;
}

/* polaroids */
.polaroids{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:26px 30px;
  margin-top:30px;
}
.polaroid{
  position:relative;
  background:#fffdf6;
  border:1px solid var(--line-soft);
  padding:9px 9px 8px;
  width:192px;
  box-shadow:var(--shadow);
  transform:rotate(var(--r,0deg));
  transition:transform .25s ease;
}
.polaroid:hover{transform:rotate(0deg) scale(1.04);z-index:2}
.polaroid::before{
  content:"";
  position:absolute;top:-12px;left:50%;
  width:64px;height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(228,196,120,.55);
  border-left:1px dashed rgba(143,111,77,.4);
  border-right:1px dashed rgba(143,111,77,.4);
}
.polaroid img{display:block;width:100%;height:172px;object-fit:cover}
.polaroid.big{width:268px}
.polaroid.big img{height:245px}
.polaroid.big figcaption{font-size:18px}

/* footer */
.footer-links{margin-top:20px}
.copyright{margin-top:44px;color:var(--olive);font-size:.72rem}

/* reveal on scroll (only when JS is running) */
body.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
body.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js .reveal{opacity:1;transform:none;transition:none}
  .hang,.polaroid,.card,.cv-btn{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .wrap{grid-template-columns:1fr;gap:40px;padding:36px 22px}
  .side{position:static}
  .side-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:6px 26px;
    align-items:center;
  }
  .portrait{grid-row:1/6;margin-bottom:0}
  .portrait img{width:150px;height:170px}
  .nav{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0}
  .nav a{padding-left:14px}
  .contact{grid-column:1/-1;padding-top:14px}
  .cv-btn{margin-top:16px}
  .side-note{grid-column:1/-1;margin-top:14px}
  section,footer{margin-bottom:64px}
}
@media (max-width:560px){
  body{font-size:15.5px}
  h2{font-size:25px}
  .side-inner{grid-template-columns:1fr}
  .portrait{grid-row:auto}
  .row{flex-wrap:wrap}
  .dates{order:-1;width:100%;padding-top:0}
  .awards li{flex-direction:column;align-items:flex-start;gap:2px}
  .inst{width:48px;height:48px}
  .hang{width:calc(50% - 16px)}
  .hang img{height:120px}
  .polaroid{width:calc(50% - 15px)}
  .polaroid img{height:130px}
  .polaroid.big{width:100%}
}