/* ═══════════════════════════════════════════════════════════════════════
   PERSONAL — specimen-plate archive
   The credibility anchor. Reads like a bound volume of anatomical plates:
   a fixed left label rail, numbered PLATE sections, an index-table CV,
   one full-bleed statement band, one wide atmospheric image band.
   Asymmetric throughout; the portrait plate overlaps the hero boundary.
   ═══════════════════════════════════════════════════════════════════════ */

/* nav — quiet archival strip */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(5,5,5,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.mark{
  font-family:var(--display);font-weight:640;font-stretch:110%;
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
.nav ul a{
  font:500 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 0;
}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--bone)}
.nav ul a.on{color:var(--bone);border-bottom:1px solid var(--bone)}

/* ── hero — asymmetric: headline left, portrait plate right ───── */
.hero{position:relative;border-bottom:1px solid var(--line);overflow-x:clip}
.hero .wrap{
  position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(28px,5vw,72px);padding-top:clamp(56px,8vh,104px);padding-bottom:0;
  align-items:end; /* plate hugs the hero's bottom rule, then crosses it */
}
.hero h1{
  font-size:clamp(58px,10.5vw,148px);
  margin:22px 0 0;
}
.hero h1 .ln{display:block}
.hero h1 .ln-dim{color:var(--faint)}
.hero .lede{margin:34px 0 0}
.hero-left{padding-bottom:clamp(44px,6vh,72px)}

/* the portrait plate crosses the hero's bottom rule — layered, not boxed */
.hero-plate{position:relative;z-index:3;margin-bottom:calc(-1*clamp(56px,9vw,128px))}
.hero-plate .slot{aspect-ratio:4/5}
.hero-plate .rad-ghost{
  position:absolute;z-index:-1;top:-16%;right:-18%;width:100%;opacity:.30;
  mix-blend-mode:screen;filter:blur(1.5px) contrast(.8);
  -webkit-mask-image:radial-gradient(58% 58% at 52% 48%,#000 26%,transparent 74%);
          mask-image:radial-gradient(58% 58% at 52% 48%,#000 26%,transparent 74%);
  pointer-events:none;user-select:none;
}

/* spec strip under the headline, inside hero-left */
.spec{display:flex;flex-wrap:wrap;margin-top:clamp(36px,5vh,56px);border-top:1px solid var(--line)}
.spec>div{padding:16px 26px 0 0;margin-right:26px;border-right:1px solid var(--line-soft);min-width:92px}
.spec>div:last-child{border-right:0;margin-right:0}
.spec b{
  display:block;font:600 16px/1 var(--mono);letter-spacing:.02em;margin-top:10px;
  font-variant-numeric:tabular-nums;
}

/* ── PLATE sections: label rail left, content right ───────────── */
.plate{border-bottom:1px solid var(--line)}
.plate>.wrap{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);padding-top:clamp(48px,7vh,84px);
  padding-bottom:clamp(48px,7vh,84px);
}
.plate-id{position:relative}
.plate-id .no{
  display:block;font-family:var(--display);font-weight:720;font-stretch:64%;
  font-size:44px;line-height:1;color:var(--bone);
}
.plate-id .of{font:400 var(--t-micro)/1 var(--mono);color:var(--faint);letter-spacing:.14em}
.plate-id .lbl{margin-top:14px;line-height:1.7;letter-spacing:.22em}
.plate-id::after{
  content:"";position:absolute;top:6px;right:-16px;bottom:0;width:1px;
  background:var(--line-soft);
}

/* dense first plate needs room for the overlapping portrait */
.plate-first>.wrap{padding-top:clamp(72px,11vw,150px)}

/* ── index rows — the CV as an archival index table ───────────── */
.rows>div{
  display:grid;grid-template-columns:34px minmax(0,1.45fr) minmax(0,1fr) auto;
  gap:18px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--line-soft);
}
.rows>div:last-child{border-bottom:0}
.rows .n{font:500 var(--t-micro)/1.7 var(--mono);color:var(--faint)}
.rows .t{font:600 14px/1.4 var(--sans);letter-spacing:-.008em}
.rows .o{
  font:400 var(--t-micro)/1.6 var(--mono);color:var(--dim);
  text-transform:uppercase;letter-spacing:.07em;
}
.rows .y{
  font:500 12px/1.4 var(--mono);color:var(--mid);white-space:nowrap;
  text-align:right;font-variant-numeric:tabular-nums;
}
.rows>div:hover .t{color:var(--bone-hi)}

/* two-up compact index (societies / honors) */
.rows-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.rows-2 .rows>div{grid-template-columns:minmax(0,1fr) auto}

/* ── full-bleed statement band ────────────────────────────────── */
.band{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--near);
}
.band .wrap{padding-top:clamp(72px,12vh,128px);padding-bottom:clamp(72px,12vh,128px)}
.band .pull{
  font-family:var(--display);font-weight:760;font-stretch:64%;
  font-size:clamp(44px,8vw,110px);line-height:.88;text-transform:uppercase;
  max-width:14ch;margin:0;
}
.band .pull em{font-style:normal;color:var(--faint)}
.band .rad-band{
  position:absolute;top:50%;right:-4%;transform:translateY(-50%) rotate(6deg);
  width:min(40vw,420px);opacity:.20;
  mix-blend-mode:screen;filter:blur(1.5px) contrast(.8);
  -webkit-mask-image:radial-gradient(62% 62% at 50% 50%,#000 34%,transparent 78%);
          mask-image:radial-gradient(62% 62% at 50% 50%,#000 34%,transparent 78%);
  pointer-events:none;user-select:none;
}
.band .credo{margin-top:30px;max-width:56ch}

/* ── wide atmospheric image band — full bleed ─────────────────── */
.wideimg{border-bottom:1px solid var(--line)}
.wideimg .slot{aspect-ratio:21/9;border-left:0;border-right:0}
.wideimg .slot-cap{max-width:var(--maxw);margin:0 auto;padding:10px var(--gut) 26px}

/* ── instruction — editorial three-column with hung numerals ──── */
.teach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,52px)}
.teach>div{position:relative;padding-top:18px;border-top:1px solid var(--line)}
.teach .tn{
  position:absolute;top:-13px;left:0;background:var(--black);padding-right:12px;
  font:500 var(--t-micro)/1 var(--mono);letter-spacing:.2em;color:var(--faint);
}
.teach h3{margin:0 0 12px}

/* ── cross-links: two offset door panels, not hairline cards ──── */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.door{
  position:relative;background:var(--panel);border:1px solid var(--line);
  padding:clamp(26px,3.5vw,44px);display:flex;flex-direction:column;gap:14px;
  min-height:240px;text-decoration:none;overflow:hidden;
  transition:border-color .15s ease,background .15s ease;
}
.door:nth-child(2){transform:translateY(clamp(16px,2.5vw,34px))}
.door:hover,.door:focus-visible{border-color:var(--dim);background:var(--panel-2)}
.door h3{
  font-family:var(--display);font-weight:720;font-stretch:70%;font-size:clamp(24px,2.6vw,34px);
  line-height:.95;text-transform:uppercase;
}
.door .body{flex:1}
.door .go{
  font:600 var(--t-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);
}
.door .door-rad{
  position:absolute;right:-16%;bottom:-30%;width:62%;opacity:.16;
  mix-blend-mode:screen;filter:blur(1px) contrast(.82);
  -webkit-mask-image:radial-gradient(66% 66% at 50% 44%,#000 30%,transparent 76%);
          mask-image:radial-gradient(66% 66% at 50% 44%,#000 30%,transparent 76%);
  pointer-events:none;user-select:none;transition:opacity .2s ease;
}
.door:hover .door-rad,.door:focus-within .door-rad{opacity:.26}

/* ── responsive ───────────────────────────────────────────────── */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-plate{max-width:420px;margin-bottom:calc(-1*clamp(40px,8vw,72px))}
  .plate>.wrap{grid-template-columns:1fr;gap:26px}
  .plate-id{display:flex;align-items:baseline;gap:16px}
  .plate-id .no{font-size:32px}
  .plate-id .lbl{margin:0}
  .plate-id::after{display:none}
  .plate-first>.wrap{padding-top:clamp(72px,14vw,120px)}
  .teach{grid-template-columns:1fr}
  .rows-2{grid-template-columns:1fr;gap:34px}
}
@media(max-width:680px){
  .rows>div{grid-template-columns:26px minmax(0,1fr) auto}
  .rows .o{display:none}
  .doors{grid-template-columns:1fr}
  .door:nth-child(2){transform:none}
}

/* ── LIGHT MODE — bone archival paper ─────────────────────────────
   Tokens flip in system.css; this block carries only what tokens
   cannot: the nav scrim, and the radiograph ghost art.
   GHOST ART: on dark, bone-on-black radiographs composite with
   mix-blend-mode:screen. On light, screen is a no-op against paper —
   so the source is INVERTED (bone anatomy → ink anatomy, black field
   → white) and composited with multiply: the white field vanishes
   into the paper and the anatomy prints dark, i.e. the radiograph
   becomes an engraved anatomical PLATE — the idiom the whole personal
   layout is named after. Masks unchanged; opacity retuned for paper. */
[data-theme="light"] .nav{background:rgba(242,240,234,.9)}
[data-theme="light"] .rad-ghost,
[data-theme="light"] .rad-band,
[data-theme="light"] .door-rad{
  mix-blend-mode:multiply;
  filter:invert(1) blur(1.5px) contrast(.78);
}
[data-theme="light"] .rad-ghost{opacity:.38}
[data-theme="light"] .rad-band{opacity:.28}
[data-theme="light"] .door-rad{opacity:.2;filter:invert(1) blur(1px) contrast(.8)}
[data-theme="light"] .door:hover .door-rad,
[data-theme="light"] .door:focus-within .door-rad{opacity:.3}