/* ============================================================
     ATLAS — a monograph-style portfolio
     The previous direction's tropes (italic-in-color, Fig. labels,
     roman numerals, magazine-volume framing) are removed.
     This one is built around:
       · a left "spine" column running the page (metadata, page nos.)
       · a single-accent palette (signal red) — used as marks, not fills
       · a sans-anchored type system, Newsreader only as a quiet voice
       · horizontal project bands, one image per project
       · tabular figures, decimal page nos. (3.14, 4.02 etc.)
     ============================================================ */
  :root {
    --paper: #f4f2ec;
    --paper-deep: #e9e4d8;
    --ink: #161514;
    --ink-2: #4a4744;
    --ink-3: #807c75;
    --ink-4: #b7b1a4;
    --rule: rgba(22,21,20,0.14);
    --rule-soft: rgba(22,21,20,0.06);
    --signal: #2f7d4f;

    --sans:    'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif;
    --display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
    --serif:   'Newsreader', Georgia, serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;

    --spine: 248px;
    --gutter: 56px;
    --page-pad-x: 0px;

    --pad: 28px;
    --col-gap: 64px;
    --band: 96px;
    --overlay: rgba(10,10,8,0.94);
    --grain: rgba(22,21,20,0.018);
  }
  html[data-theme="ink"] {
    --paper: #14130f;
    --paper-deep: #1d1b15;
    --ink: #ece8db;
    --ink-2: #b8b3a3;
    --ink-3: #969283;
    --ink-4: #8a8276;
    --rule: rgba(236,232,219,0.16);
    --rule-soft: rgba(236,232,219,0.06);
    --signal: #5ec27a;
  }
  html[data-theme="paper-cool"] {
    --paper: #ecedee;
    --paper-deep: #dfe1e3;
    --ink: #0e1114;
    --ink-2: #404448;
    --ink-3: #707479;
    --ink-4: #aaaeb2;
    --rule: rgba(14,17,20,0.14);
    --rule-soft: rgba(14,17,20,0.06);
    --signal: #1f7a5e;
  }
  html[data-accent="forest"]  { --signal: #2f7d4f; }
  html[data-accent="moss"]    { --signal: #4a6b2e; }
  html[data-accent="deep"]    { --signal: #134e36; }
  html[data-accent="ink"]     { --signal: var(--ink); }
  html[data-theme="ink"][data-accent="ink"] { --signal: var(--ink-2); }
  /* dark stock: brighter, accessible signal greens (AA on --paper) */
  html[data-theme="ink"][data-accent="forest"] { --signal: #74d295; } /* 10.1:1 */
  html[data-theme="ink"][data-accent="moss"]   { --signal: #bcd170; } /* 10.4:1 */
  html[data-theme="ink"][data-accent="deep"]   { --signal: #4ccb93; } /*  8.8:1 */

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-feature-settings: "ss01", "ss02", "tnum";
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s ease, color .35s ease;
  }

  ::selection { background: var(--signal); color: var(--paper); }

  .page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
  }

  /* paper grain — extremely faint */
  body::before {
    content: ""; position: fixed; inset: 0;
    background-image:
      radial-gradient(var(--grain) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none; z-index: 1;
  }

  image-slot {
    --is-bg: var(--paper-deep);
    --is-border: var(--rule);
    --is-text: var(--ink-3);
    display: block; width: 100%; height: 100%;
  }
  /* all imagery renders black & white */
  image-slot::part(image) { filter: grayscale(1) contrast(1.02); }

  /* ============================================================
     LAYOUT SHELLS — switched via html[data-layout]
     spine (default) · masthead · minimal
     ============================================================ */
  .masthead, .topbar { display: none; }

  /* shared nav + lockup mark used across all shells */
  .nav a {
    color: var(--ink-2); text-decoration: none;
    font-size: 0.875rem; letter-spacing: 0;
    display: inline-flex; gap: 8px; align-items: baseline;
  }
  .nav a span { color: var(--ink-4); font-family: var(--mono); font-size: 0.75rem; }
  .nav a:hover, .nav a.current { color: var(--ink); }
  .nav a:hover span, .nav a.current span { color: var(--signal); }

  .masthead .lockup, .topbar .lockup {
    display: flex; align-items: baseline; gap: 10px;
    color: var(--ink); font-size: 0.875rem; letter-spacing: 0;
  }
  .masthead .lockup .mark, .topbar .lockup .mark {
    width: 22px; height: 22px;
    border: 1px solid var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 600;
    font-size: 0.75rem; line-height: 1; letter-spacing: -0.02em;
  }
  .masthead .lockup b, .topbar .lockup b { font-family: var(--sans); font-weight: 600; }

  /* ---- MASTHEAD (no sidebar; editorial top header) ---- */
  .masthead { padding: var(--pad) 0 0; position: relative; z-index: 3; }
  .mh-top {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 22px;
  }
  .mh-status {
    font-family: var(--mono); font-size: 0.75rem;
    color: var(--ink-3); letter-spacing: 0.02em;
  }
  .mh-status b { color: var(--signal); font-weight: 500; }
  .mh-grid {
    display: grid; grid-template-columns: 1fr auto; gap: var(--col-gap);
    align-items: end;
    padding: 22px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .mh-nav { display: flex; flex-wrap: wrap; gap: 10px 32px; }
  .mh-nav a { font-size: 1rem; letter-spacing: -0.01em; }
  .mh-nav a span { font-size: 0.75rem; }
  .mh-meta {
    margin: 0; display: flex; gap: 36px;
    text-align: right; font-family: var(--mono); font-size: 0.75rem;
  }
  .mh-meta div {}
  .mh-meta dt { color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }
  .mh-meta dd { margin: 4px 0 0; color: var(--ink); letter-spacing: 0; }
  .mh-meta dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
  .mh-meta dd a:hover { color: var(--signal); border-bottom-color: var(--signal); }

  html[data-layout="masthead"] .spread { grid-template-columns: 1fr; gap: 0; }
  html[data-layout="masthead"] .spine { display: none; }
  html[data-layout="masthead"] .masthead { display: block; }
  html[data-layout="masthead"] .body { padding-top: 0; }

  /* ---- MINIMAL (no sidebar; slim sticky bar, narrow reading column) ---- */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    align-items: center; justify-content: space-between;
    gap: 24px; padding: 13px 0;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
  }
  .tb-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .tb-status {
    font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
    letter-spacing: 0.02em; white-space: nowrap;
  }
  html[data-layout="minimal"] .spread { grid-template-columns: 1fr; gap: 0; }
  html[data-layout="minimal"] .spine { display: none; }
  html[data-layout="minimal"] .topbar { display: flex; }
  html[data-layout="minimal"] .body { padding-top: 36px; max-width: 980px; margin: 0 auto; }

  /* ============================================================
     SPINE — runs full height on the left
     ============================================================ */
  .spread {
    display: grid;
    grid-template-columns: var(--spine) 1fr;
    gap: var(--gutter);
    position: relative;
    z-index: 2;
  }
  .spine {
    position: sticky;
    top: 0;
    align-self: start;
    padding: var(--pad) 0 var(--pad) 0;
    height: 100vh;
    border-right: 1px solid var(--rule);
    padding-right: 24px;
    display: flex; flex-direction: column;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .spine .mono { font-family: var(--mono); }
  .spine .lockup {
    display: flex; align-items: baseline; gap: 10px;
    color: var(--ink); font-size: 0.8125rem;
    letter-spacing: 0;
  }
  .spine .lockup .mark {
    width: 22px; height: 22px;
    border: 1px solid var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 600;
    font-size: 0.75rem; line-height: 1;
    letter-spacing: -0.02em;
  }
  .spine .lockup b { font-family: var(--sans); font-weight: 600; }

  .spine-meta {
    margin-top: 32px;
    display: grid; gap: 14px;
  }
  .spine-meta dt {
    font-size: 0.75rem;
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .spine-meta dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 0.875rem;
    letter-spacing: 0;
  }
  .spine-meta dd a {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
  }
  .spine-meta dd a:hover { color: var(--signal); border-bottom-color: var(--signal); }

  .spine-nav {
    margin-top: auto;
    display: grid; gap: 4px;
    padding-top: var(--pad);
    border-top: 1px solid var(--rule);
  }
  .spine-nav a {
    color: var(--ink-2); text-decoration: none;
    font-size: 0.875rem;
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0;
    letter-spacing: 0;
  }
  .spine-nav a span { color: var(--ink-4); }
  .spine-nav a:hover, .spine-nav a.current { color: var(--ink); }
  .spine-nav a:hover span, .spine-nav a.current span { color: var(--signal); }

  .spine-foot {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.75rem;
    color: var(--ink-4);
    display: flex; justify-content: space-between;
    letter-spacing: 0.04em;
  }
  .signal-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--signal);
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* ============================================================
     BODY — right column
     ============================================================ */
  .body { padding: var(--pad) 0 0; }
  .band { padding-top: var(--band); }
  .band:first-child { padding-top: 0; }

  /* ============================================================
     OPENER
     ============================================================ */
  .opener {
    padding: var(--pad) 0 var(--col-gap);
    position: relative;
  }
  .opener-top {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: var(--pad);
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .opener-top .pp { color: var(--ink); }
  .opener-top .pp b { color: var(--signal); font-weight: 500; }

  .opener-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(64px, 8.6vw, 128px);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variation-settings: "opsz" 96;
    align-self: end;
  }
  /* hero composition: name beside portrait */
  .opener-head {
    margin: 52px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(252px, 31%, 360px);
    gap: var(--gutter);
    align-items: center;
  }
  .opener-portrait {
    margin: 0;
    align-self: stretch;
    justify-self: end;
    width: 100%;
    position: relative;
  }
  .opener-portrait .signal-dot { width: 7px; height: 7px; }
  .opener-portrait .echo { display: none; }
  .opener-portrait .blk { display: none; }

  /* ---- treatment: BLOCK (default) — figure grounded on a baseline, green block behind ---- */
  html[data-hero="block"] .opener-head { align-items: end; }
  html[data-hero="block"] .opener-portrait {
    aspect-ratio: 1400 / 1520;
    overflow: visible;
    padding-bottom: 0;
  }
  html[data-hero="block"] .opener-portrait .blk {
    display: block;
    position: absolute; z-index: 1;
    left: -10px; bottom: 0;
    width: 82%; height: 74%;
    background: var(--signal);
  }
  html[data-hero="block"] .opener-portrait img {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0;           /* stands ON the same floor line */
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom;
    filter: grayscale(1) contrast(1.05);
  }
  html[data-theme="ink"][data-hero="block"] .opener-portrait img {
    filter: grayscale(1) brightness(1.12) contrast(1.05);
  }
  html[data-hero="block"] .opener-portrait figcaption {
    position: relative; z-index: 3;
    margin-top: 14px;
  }
  html[data-hero="block"] .opener-portrait .pin { display: none; }

  /* ---- treatment: ECHO — B&W cutout + off-register green silhouette ---- */
  html[data-hero="echo"] .opener-head { align-items: end; }
  html[data-hero="echo"] .opener-portrait {
    aspect-ratio: 1400 / 1660;
    overflow: visible;
  }
  html[data-hero="echo"] .opener-portrait img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom;
    z-index: 2;
    filter: grayscale(1) contrast(1.05);
  }
  html[data-theme="ink"][data-hero="echo"] .opener-portrait img {
    filter: grayscale(1) brightness(1.12) contrast(1.05);
  }
  html[data-hero="echo"] .opener-portrait .echo {
    display: none;
    position: absolute; inset: 0;
    z-index: 1;
    background: var(--signal);
    -webkit-mask-image: url("/portfolio/images/jeerad.png");
    mask-image: url("/portfolio/images/jeerad.png");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: bottom; mask-position: bottom;
    transform: translate(-14px, 9px);
  }
  @supports ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
    html[data-hero="echo"] .opener-portrait .echo { display: block; }
  }
  html[data-hero="echo"] .opener-portrait figcaption {
    position: relative; z-index: 3;
    margin-top: 18px;
  }
  html[data-hero="echo"] .opener-portrait .pin { display: none; }

  /* ---- treatment: PLATE — contained B&W portrait plate ---- */
  html[data-hero="plate"] .opener-portrait {
    aspect-ratio: 4 / 5;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    overflow: hidden;
  }
  html[data-hero="plate"] .opener-portrait img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
    filter: grayscale(1) contrast(1.05);
  }
  html[data-hero="plate"] .opener-portrait figcaption { display: none; }
  .opener-portrait .pin {
    position: absolute; top: 10px; left: 10px;
    display: none;
    align-items: center; gap: 7px;
    white-space: nowrap;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 6px 10px;
    font-family: var(--mono); font-size: 0.75rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-2);
  }
  .opener-portrait .pin b { color: var(--signal); font-weight: 500; }
  html[data-hero="plate"] .opener-portrait .pin { display: flex; }

  /* ---- treatment: CUTOUT — crisp grounded figure, no fade/glow ---- */
  html[data-hero="cutout"] .opener-head { align-items: end; }
  html[data-hero="cutout"] .opener-portrait {
    border-bottom: 1px solid var(--ink);
  }
  html[data-hero="cutout"] .opener-portrait img {
    display: block;
    width: 100%; height: auto;
    object-fit: contain;
    filter: grayscale(1) contrast(1.04);
  }
  html[data-hero="cutout"] .opener-portrait .pin { display: none; }
  .opener-portrait figcaption {
    margin-top: 12px;
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ---- treatment: OFF — type-only, full-scale name ---- */
  html[data-hero="off"] .opener-head { grid-template-columns: 1fr; }
  html[data-hero="off"] .opener-portrait { display: none; }
  html[data-hero="off"] .opener-name { font-size: clamp(120px, 17vw, 248px); line-height: 0.84; align-self: start; }
  .opener-name .row {
    display: block;
    position: relative;
  }
  .opener-name .row + .row { margin-top: -0.04em; }
  .opener-name .tail {
    color: var(--ink-4);
    font-weight: 400;
    letter-spacing: -0.04em;
  }
  .opener-name .stop {
    color: var(--signal);
  }
  .opener-sub {
    margin: var(--gutter) 0 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    padding-top: var(--pad);
    border-top: 1px solid var(--rule);
  }
  .opener-sub .role {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.28;
    letter-spacing: -0.012em;
    color: var(--ink);
    max-width: 580px;
  }
  .opener-sub .role .u {
    background-image: linear-gradient(to right, var(--signal), var(--signal));
    background-position: 0 92%;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    padding-bottom: 2px;
  }
  .opener-sub .meta {
    display: grid; gap: 20px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    align-content: start;
  }
  .opener-sub .meta dl { margin: 0; display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
  .opener-sub .meta dt { color: var(--ink-4); }
  .opener-sub .meta dd { margin: 0; color: var(--ink); }
  .opener-sub .meta dd b { font-weight: 500; }

  /* ============================================================
     PROJECT BAND
     ============================================================ */
  .project {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 24px;
    padding: var(--pad) 0 32px;
    border-top: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: padding .25s ease;
  }
  .project:last-child { border-bottom: 1px solid var(--rule); }
  .project:hover { padding-left: 8px; padding-right: 8px; }
  .project:hover .pj-num { color: var(--signal); }
  .project:hover .pj-image::after { opacity: 1; }

  .pj-num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    padding-top: 6px;
    transition: color .2s ease;
  }
  .pj-num small { display: block; color: var(--ink-4); margin-top: 4px; font-weight: 400; }

  .pj-main {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr;
    gap: var(--col-gap);
    align-items: start;
  }
  .pj-text { padding-top: 0; }
  .pj-eyebrow {
    display: flex; gap: 14px; align-items: center;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .pj-eyebrow span:first-child { color: var(--ink); }
  .pj-eyebrow .sep { width: 14px; height: 1px; background: var(--rule); }
  .pj-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 3.25rem;
    line-height: 0.94;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .pj-deck {
    margin: 24px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 380px;
    letter-spacing: -0.005em;
  }
  .pj-roles {
    margin-top: var(--pad);
    display: flex; gap: 8px; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .pj-roles span {
    padding: 5px 9px;
    border: 1px solid var(--rule);
    border-radius: 999px;
  }
  .pj-image {
    aspect-ratio: 16 / 10;
    background: var(--paper-deep);
    position: relative;
    overflow: hidden;
  }
  /* subtle green tritone wash over each example's B&W image */
  .pj-image::before {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    background: var(--signal);
    mix-blend-mode: soft-light;
    opacity: 0.35;
  }
  .pj-image::after {
    content: "view case ↗";
    position: absolute;
    right: 12px; bottom: 12px;
    background: var(--signal); color: var(--paper);
    font-family: var(--mono); font-size: 0.75rem;
    padding: 7px 12px;
    letter-spacing: 0.04em; text-transform: uppercase;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 3;
  }

  /* feature project — bigger, image first */
  .project.feature .pj-main { grid-template-columns: 1fr; gap: 36px; }
  .project.feature .pj-image { aspect-ratio: 21 / 9; }
  .project.feature .pj-text {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
    align-items: end;
  }
  .project.feature .pj-title { font-size: 5.25rem; }

  /* ============================================================
     SECTION HEADS
     ============================================================ */
  .head {
    padding: 14px 0 36px;
    border-top: 1px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 24px;
  }
  .head h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 4rem;
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--ink);
  }
  .head h2 .u {
    background-image: linear-gradient(to right, var(--signal), var(--signal));
    background-position: 0 90%;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    padding-bottom: 4px;
  }
  .head .meta {
    text-align: right;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    display: grid; gap: 4px;
  }
  .head .meta b { color: var(--ink); font-weight: 500; }
  .head .sub {
    grid-column: 1 / -1;
    margin: 12px 0 0;
    font-family: var(--serif);
    font-size: 1.25rem; line-height: 1.45;
    color: var(--ink-2);
    max-width: 760px;
  }

  /* ============================================================
     ABOUT
     ============================================================ */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--col-gap);
    padding-top: var(--pad);
  }
  .about-photo {
    aspect-ratio: 3 / 4;
    background: var(--paper-deep);
    overflow: hidden;
    position: relative;
  }
  .about-photo .pin {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-2);
  }
  .about-photo .pin b { color: var(--signal); font-weight: 500; }
  .about-text {}
  .about-text .lede {
    margin: 0 0 32px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--ink);
    max-width: 640px;
  }
  .about-text .lede .u {
    background-image: linear-gradient(to right, var(--signal), var(--signal));
    background-position: 0 95%;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    padding-bottom: 4px;
  }
  .about-text p {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: 580px;
    letter-spacing: -0.003em;
  }
  .about-text p b { font-weight: 500; }

  .stack {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink-2);
    letter-spacing: 0.01em;
  }
  .stack dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding-top: 3px; }
  .stack dd { margin: 0; color: var(--ink); }
  .stack dd span { color: var(--ink-3); }

  /* ============================================================
     CLIENTS — single dense column, year-led
     ============================================================ */
  .clients-list {
    margin-top: 8px;
    border-top: 1px solid var(--rule);
  }
  .client {
    display: grid;
    grid-template-columns: 56px 1fr 1.2fr 80px;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
    transition: padding .2s ease;
  }
  .client:hover { padding-left: 8px; }
  .client:hover .c-year { color: var(--signal); }
  .c-year {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    transition: color .2s ease;
  }
  .c-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--ink);
  }
  .c-sector {
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--ink-2);
    letter-spacing: -0.005em;
  }
  .c-via {
    text-align: right;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }

  /* ============================================================
     CONTACT BAND
     ============================================================ */
  .contact {
    padding: 80px 0 24px;
    border-top: 1px solid var(--ink);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--col-gap);
    align-items: end;
  }
  .contact .big {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 6rem;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ink);
  }
  .contact .big .arrow {
    color: var(--signal);
    font-family: var(--display);
    font-weight: 400;
    margin-left: 12px;
  }
  .contact .links {
    display: grid; gap: 14px;
    font-family: var(--sans);
    font-size: 1.125rem;
    color: var(--ink);
  }
  .contact .links a {
    display: flex; align-items: baseline; justify-content: space-between;
    color: inherit; text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    transition: color .2s ease, border-color .2s ease;
    letter-spacing: -0.005em;
  }
  .contact .links a:hover { color: var(--signal); border-bottom-color: var(--signal); }
  .contact .links a .label {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ============================================================
     FOOT
     ============================================================ */
  .foot {
    margin-top: var(--pad);
    padding: 18px 0 var(--gutter);
    border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .foot .ver b { color: var(--ink); font-weight: 500; }

  /* ============================================================
     SCROLL REVEAL
     ============================================================ */
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .85s ease, transform .85s ease; }
  .js .reveal.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ----- HAMBURGER (mobile only) ----- */
  .spine-menu { display: contents; }
  .spine-toggle {
    display: none;
    align-items: center; gap: 9px;
    background: none; border: 0; cursor: pointer;
    padding: 6px 0; color: var(--ink);
    font-family: var(--mono); font-size: 0.75rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .spine-toggle .lbl { color: var(--ink-2); }
  .spine-toggle .bars {
    position: relative; width: 22px; height: 1.5px; margin: 5px 0;
    background: var(--ink); display: inline-block;
    transition: background .2s ease;
  }
  .spine-toggle .bars::before,
  .spine-toggle .bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--ink); transition: transform .28s ease, top .28s ease;
  }
  .spine-toggle .bars::before { top: -6px; }
  .spine-toggle .bars::after  { top: 6px; }
  .spine.open .spine-toggle .bars { background: transparent; }
  .spine.open .spine-toggle .bars::before { top: 0; transform: rotate(45deg); }
  .spine.open .spine-toggle .bars::after  { top: 0; transform: rotate(-45deg); }
  .spine.open .spine-toggle .lbl { color: var(--signal); }

  /* ============================================================
     RESPONSIVE — tablet & mobile
     The book becomes a single column: the spine unpins and sits as a
     compact header, every multi-column grid stacks, and the display
     type steps down. Desktop layout above is unchanged.
     ============================================================ */
  @media (max-width: 1080px) {
    .page { padding: 0 40px; }
    :root { --gutter: 40px; --spine: 210px; }
    .pj-main { grid-template-columns: 1fr 1.3fr; gap: 36px; }
    .opener-sub { grid-template-columns: 1fr; gap: 32px; }
    .about-grid { gap: 40px; }
  }

  @media (max-width: 860px) {
    .page { padding: 0 28px; }

    /* spine → sticky top bar with hamburger */
    .spread { grid-template-columns: 1fr; gap: 0; }
    .spine {
      position: sticky; top: 0; z-index: 60;
      height: auto;
      flex-direction: row; flex-wrap: wrap; align-items: center;
      gap: 0 16px;
      padding: 14px 0; margin-bottom: 4px;
      border-right: none; border-bottom: 1px solid var(--rule);
      background: var(--paper);
    }
    .spine .lockup { font-size: 0.875rem; position: relative; z-index: 62; }
    .spine-toggle { display: inline-flex; margin-left: auto; position: relative; z-index: 62; }

    /* full-cover overlay menu — covers the page, sits below the bar row */
    .spine-menu {
      display: block;
      position: fixed; inset: 0; z-index: 55;
      margin: 0;
      padding: 78px 28px 32px;
      background: var(--paper);
      overflow-y: auto;
      opacity: 0; visibility: hidden;
      transform: translateY(-8px);
      transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
    }
    .spine.open .spine-menu {
      opacity: 1; visibility: visible; transform: none;
      transition: opacity .26s ease, transform .26s ease, visibility 0s;
    }
    .spine-menu > * { margin: 0 !important; }
    .spine-meta {
      display: grid; gap: 16px;
      padding: 8px 0 0; margin-top: 0 !important;
    }
    .spine-nav {
      display: grid; gap: 2px;
      padding: 22px 0 0; margin-top: 22px !important;
      border-top: 1px solid var(--rule);
    }
    .spine-nav a { padding: 10px 0; font-size: 1.1875rem; }
    .spine-nav a span { display: inline; }
    .spine-foot {
      display: flex; padding: 20px 0 0; margin-top: 22px !important;
      border-top: 1px solid var(--rule);
    }
    .spine.open { background: var(--paper); border-bottom-color: transparent; }
    html:has(.spine.open) body { overflow: hidden; }
    .body { padding-top: 20px; }

    /* masthead / minimal shells */
    .mh-grid { grid-template-columns: 1fr; gap: 22px; }
    .mh-meta { flex-wrap: wrap; gap: 18px 28px; text-align: left; }
    .topbar { gap: 14px; flex-wrap: wrap; }

    /* opener */
    .band { padding-top: 64px; }
    .opener-head { grid-template-columns: 1fr; gap: 28px; }
    .opener-portrait { justify-self: center; margin-inline: auto; max-width: 300px; width: 100%; }
    html[data-hero="off"] .opener-name,
    .opener-name { font-size: clamp(72px, 18vw, 132px); }
    .opener-sub .meta dl { grid-template-columns: 92px 1fr; }

    /* section heads */
    .head { grid-template-columns: 1fr; gap: 10px; }
    .head .meta { text-align: left; }
    .head h2 { font-size: clamp(40px, 9vw, 60px); }

    /* projects */
    .pj-main,
    .project.feature .pj-text { grid-template-columns: 1fr; gap: 24px; }
    .project { grid-template-columns: 1fr; gap: 14px; }
    .project:hover { padding-left: 0; padding-right: 0; }
    .pj-num { padding-top: 0; }
    .project .pj-image { order: 2; }
    .pj-title { font-size: 2.5rem; }
    .project.feature .pj-title { font-size: 3.25rem; }
    .pj-deck { max-width: none; }

    /* about — words lead, portrait stays a modest companion */
    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-photo { justify-self: center; margin-inline: auto; max-width: 248px; width: 100%; }
    .about-text { justify-self: stretch; width: 100%; }
    .about-text .lede { font-size: 1.875rem; }
    .stack { grid-template-columns: 96px 1fr; }

    /* clients → two-line rows */
    .client {
      grid-template-columns: 48px 1fr;
      grid-template-areas: "year name" ". sector";
      gap: 4px 16px;
    }
    .client:hover { padding-left: 0; }
    .c-year { grid-area: year; }
    .c-name { grid-area: name; font-size: 1.375rem; }
    .c-sector { grid-area: sector; }
    .c-via { display: none; }

    /* contact */
    .contact { grid-template-columns: 1fr; gap: 36px; }
    .contact .big { font-size: clamp(52px, 13vw, 84px); }

    .foot { flex-direction: column; gap: 6px; }
  }

  @media (max-width: 480px) {
    .page { padding: 0 18px; }
    .spine-nav { width: 100%; margin-left: 0; }
    .opener-top { flex-direction: column; gap: 4px; align-items: flex-start; }
    .opener-name { font-size: clamp(60px, 19vw, 96px); }
    .opener-portrait { max-width: 300px; }
    .about-photo { max-width: 230px; }
    .opener-sub .role { font-size: 1.375rem; }
    .pj-roles { gap: 6px; }
    .cs-facts { grid-template-columns: 1fr 1fr; }
  }

/* ===== production additions (real images, a11y, lightbox) ===== */
.reader-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:999;background:var(--signal);color:var(--paper);padding:8px 14px;font-family:var(--mono);font-size:0.875rem}
[hidden]{display:none!important}
a{color:inherit}
a:hover{color:var(--signal)}

.pj-image img,.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.02);display:block}
.about-photo img{z-index:1}
.about-photo .pin{z-index:2}
.opener-id{align-self:end;display:grid;gap:22px;justify-items:start}
.ai-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--signal);border-radius:999px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.opener-sub .role .ai{color:var(--signal);font-weight:inherit}
.ai-callout{margin-top:var(--pad);padding:22px 24px;border:1px solid var(--signal);background:color-mix(in srgb,var(--signal) 7%,transparent)}
.ai-callout .lbl{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.about-text .ai-callout p{margin:0;font-size:1.0625rem;max-width:none}
.client{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact-side{display:grid;gap:22px}
.cform{display:grid;gap:14px}
.cform label{display:grid;gap:6px;font-family:var(--mono);font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cform input,.cform textarea{font:inherit;font-family:var(--sans);font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--paper-deep);border:1px solid var(--rule);padding:12px 14px;border-radius:0}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--signal)}
.cform button{justify-self:start;font-family:var(--mono);font-size:0.875rem;letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:var(--paper);border:0;padding:13px 22px;cursor:pointer}
.cform button:hover{filter:brightness(1.08)}
.socials{display:flex;gap:18px}
.socials a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.875rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)}
.socials a:hover{color:var(--signal)}
.socials svg{width:20px;height:20px;fill:currentColor}
@media (max-width:860px){
  .client{grid-template-columns:1fr;grid-template-areas:none;gap:4px}
  .c-name,.c-sector{grid-area:auto}
  .opener-id{gap:16px}
}

.opener-sub .meta dl > div,.stack > div{display:contents}