/* ============================================================
     A WARM EDITORIAL MONOGRAPH — Sungmin Jung
     Color tokens (warm gallery light)
     ============================================================ */
  :root{
    --paper:        #F9F8F6;     /* primary background — warm paper */
    --paper-2:      #F1EFEA;     /* secondary panel — very subtle warmth */
    --paper-3:      #E8E5DD;     /* tertiary, image bg */
    --ink:          #1A1A1C;     /* near-black, slightly warm */
    --charcoal:     #2C2C2E;
    --slate:        #6B6B6E;     /* muted captions, metadata */
    --slate-2:      #A8A8AB;     /* lightest readable text */
    --rule:         rgba(26,26,28,0.10);
    --rule-strong:  rgba(26,26,28,0.22);
    --accent:       #C44A2C;     /* a single warm rust accent for emphasis */
  }

  /* ============================================================
     DARK THEME — "Screen / Night" mode
     A warm, charcoal-based dark palette (never pure #000) that keeps
     the editorial warmth of the paper edition after dusk.
     ============================================================ */
  html.dark{
    --paper:        #1A1A1A;     /* warm near-black ground */
    --paper-2:      #222222;
    --paper-3:      #2A2A2A;     /* image / panel ground */
    --ink:          #F9F8F6;     /* warm paper-white text */
    --charcoal:     #E8E5DD;
    --slate:        #A8A8AB;     /* muted captions, metadata */
    --slate-2:      #6B6B6E;     /* dimmest readable text */
    --rule:         rgba(249,248,246,0.12);
    --rule-strong:  rgba(249,248,246,0.24);
    --accent:       #E2583E;     /* brighter rust for dark contrast */
  }
  /* invert the subtle paper grain so it reads as a faint light tooth on dark */
  html.dark body{
    background-image:
      radial-gradient(rgba(249,248,246,0.022) 1px, transparent 1px);
  }
  /* the sticky modal header fades to a literal light tint by default; rebase it on dark */
  html.dark .proj-modal-header{
    background: linear-gradient(to bottom, var(--paper) 70%, rgba(26,26,26,0.7));
  }

  /* base */
  html,body{
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.4s ease, color 0.4s ease;
    scroll-behavior: smooth;
  }
  body{
    /* very subtle warm paper grain */
    background-image:
      radial-gradient(rgba(26,26,28,0.018) 1px, transparent 1px);
    background-size: 3px 3px;
  }

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

  .font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
  .font-display{ font-family:'Inter', sans-serif; }
  .tracking-tightest{ letter-spacing: -0.04em; }
  .tracking-display{ letter-spacing: -0.045em; }

  /* hairline rules */
  .hairline      { border-color: var(--rule);        border-width: 0.5px; }
  .hairline-2    { border-color: var(--rule-strong); border-width: 0.5px; }
  .rule-top      { border-top:    0.5px solid var(--rule); }
  .rule-bottom   { border-bottom: 0.5px solid var(--rule); }

  /* ============================================================
     LOADER — quick, refined
     ============================================================ */
  #loader{
    position: fixed; inset: 0; z-index: 200;
    background: var(--paper);
    /* cinematic "title card" — text centred both axes */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 48px;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  #loader.done{ opacity:0; pointer-events:none; transform: translateY(-2%); }

  /* centred title-card block */
  #loader .loader-card{
    display: flex; flex-direction: column; align-items: center;
    gap: 20px;
    animation: loaderCardIn 1.2s cubic-bezier(.2,.7,.2,1) both;
  }
  #loader .loader-eyebrow{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.30em; text-transform: uppercase;
    color: var(--slate);
  }
  #loader .loader-title{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    color: var(--ink);
  }
  #loader .loader-sub{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--slate);
  }
  @keyframes loaderCardIn{
    from{ opacity: 0; transform: translateY(12px); filter: blur(6px); }
    to  { opacity: 1; transform: none;            filter: blur(0); }
  }

  #loader .bar{
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 0.5px; background: var(--rule);
  }
  #loader .bar-fill{
    height: 100%; width: 0; background: var(--ink);
    /* fill across the dwell so the meter resolves as the card settles */
    animation: loadBar 1s cubic-bezier(.7,0,.3,1) forwards;
  }
  @keyframes loadBar{ to{ width: 100%; } }

  /* ============================================================
     SCROLL-SPY — fixed left rail
     ============================================================ */
  #scrollspy{
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    pointer-events: auto;
  }
  .spy-item{
    display: flex; align-items: center; gap: 12px;
    flex-direction: row-reverse;
    padding: 9px 0;
    cursor: pointer;
    color: var(--slate-2);
    transition: color 0.4s ease;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .spy-item .num{ width: 22px; }
  .spy-item .tick{
    display: block;
    width: 10px; height: 0.5px;
    background: currentColor;
    transition: width 0.4s ease;
  }
  .spy-item .label{
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.4s ease, max-width 0.5s ease;
    text-transform: uppercase;
    text-align: right;
  }
  .spy-item:hover{ color: var(--charcoal); }
  .spy-item.active{ color: var(--ink); }
  .spy-item.active .tick{ width: 36px; }
  .spy-item.active .label{ opacity: 1; max-width: 220px; }

  /* --- chapter grouping: rail reads as a two-part table of contents --- */
  .spy-item.spy-chapter{
    padding-top: 18px;            /* extra air above each chapter heading */
    color: var(--slate);
  }
  .spy-item.spy-chapter .num{
    font-weight: 600;
    letter-spacing: 0.10em;
    color: var(--ink);
  }
  .spy-item.spy-chapter .tick{
    width: 22px;                  /* heavier mark than a project tick */
    background: var(--ink);
  }
  /* chapter label stays faintly visible so the structure is always legible */
  .spy-item.spy-chapter .label{
    opacity: 0.55;
    max-width: 220px;
    font-weight: 600;
  }
  .spy-item.spy-chapter.active{ color: var(--ink); }
  .spy-item.spy-chapter.active .label{ opacity: 1; }

  /* child projects indent inward from the rail edge */
  .spy-item.spy-child{ margin-right: 16px; }
  .spy-item.spy-child .tick{ width: 7px; }
  .spy-item.spy-child.active .tick{ width: 28px; }

  /* ============================================================
     TOP BAR
     ============================================================ */
  .topbar{
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, var(--paper) 60%, rgba(249,248,246,0));
    backdrop-filter: blur(8px);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .topbar .ident{ color: var(--ink); font-weight: 500; }
  .topbar .dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: #4ADE80; margin: 0 8px 1px;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
    vertical-align: middle;
  }

  /* mode toggle — reads as another instrument on the masthead status line */
  .mode-toggle{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    background: transparent;
    border: 0.5px solid var(--rule-strong);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .mode-toggle:hover{ color: var(--ink); border-color: var(--ink); }
  .mode-toggle .mode-key{ color: var(--slate-2); }
  .mode-toggle .mode-label{ color: var(--ink); }
  .mode-toggle .mode-glyph{
    font-size: 12px; line-height: 1;
    transform: translateY(0.5px);
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  }
  .mode-toggle:hover .mode-glyph{ transform: translateY(0.5px) rotate(40deg); }
  .mode-toggle:focus-visible{ outline: 0.5px solid var(--accent); outline-offset: 3px; }

  /* ============================================================
     VERTICAL MARGIN ANNOTATIONS
     ============================================================ */
  .annotate-v{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--slate);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.8;
  }

  /* ============================================================
     PROJECT IMAGE — "lens focus" hover treatment
     ============================================================ */
  .lens{
    position: relative;
    overflow: hidden;
    background: var(--paper-3);
  }
  .lens::after{
    /* a restrained DARK vignette + base shadow — never washes the image white.
       It honours raw wood models & dark renders, and lifts only slightly on hover
       so captions / view-tabs stay legible without bleaching the plate. */
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(26,26,28,0.30) 0%, rgba(26,26,28,0) 40%),
      radial-gradient(125% 125% at 50% 48%, rgba(26,26,28,0) 60%, rgba(26,26,28,0.18) 100%);
    pointer-events: none;
    transition: opacity 0.9s cubic-bezier(.2,.7,.2,1);
    opacity: 1;
  }
  .lens img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    /* DEFAULT: a sophisticated near-grayscale at full luminosity (no whitening),
       with a touch of extra contrast to keep physical textures crisp. */
    filter: grayscale(0.62) contrast(1.04) brightness(0.97) saturate(0.9);
    transform: scale(1.045);
    transition: filter 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
    will-change: transform, filter;
  }
  /* HOVER: bloom into full, vibrant colour with a gentle contrast pop + settle. */
  .lens:hover::after{ opacity: 0.4; }
  .lens:hover img{
    filter: grayscale(0) contrast(1.05) brightness(1) saturate(1.04);
    transform: scale(1.0);
  }

  /* placeholder svg art when no image is present */
  .lens .placeholder{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--slate);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* "view project" tab that lifts in on hover */
  .view-tab{
    position: absolute;
    bottom: 16px; right: 16px;
    padding: 8px 14px;
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
  }
  .lens:hover .view-tab{ opacity: 1; transform: translateY(0); }

  /* ============================================================
     IDENTITY PILLAR HOVER
     ============================================================ */
  .pillar{
    position: relative;
    padding-top: 24px;
    cursor: default;
  }
  .pillar::before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 24px; height: 0.5px;
    background: var(--ink);
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
  }
  .pillar:hover::before{ width: 100%; }

  /* ============================================================
     REVEAL ON SCROLL
     ============================================================ */
  .reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in{ opacity: 1; transform: none; }
  .reveal-delay-1{ transition-delay: 0.08s; }
  .reveal-delay-2{ transition-delay: 0.16s; }
  .reveal-delay-3{ transition-delay: 0.24s; }
  .reveal-delay-4{ transition-delay: 0.32s; }

  /* ============================================================
     PARALLAX
     ============================================================ */
  .parallax{ will-change: transform; }

  /* ============================================================
     LINKS
     ============================================================ */
  a.under{
    position: relative; color: var(--ink);
    padding-bottom: 1px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 0.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: color 0.3s ease;
  }
  a.under:hover{ color: var(--accent); }

  /* ============================================================
     SYSTEM LOG TICKER (refined)
     ============================================================ */
  #ticker{
    height: 22px;
    overflow: hidden;
    color: var(--slate);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  #ticker .line{
    height: 22px;
    line-height: 22px;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
  }
  .meter-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: var(--ink); opacity: 0.7;
    margin: 0 6px 1px;
    vertical-align: middle;
  }
  .meter-dot.warn{ background: var(--accent); opacity: 1; }

  /* numbers that count up live */
  .live{ font-feature-settings: "tnum" 1, "lnum" 1; }

  /* drop cap for editorial */
  .dropcap::first-letter{
    float: left;
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: 92px;
    line-height: 0.85;
    margin: 6px 12px 0 0;
    color: var(--ink);
  }

  /* small caps utility */
  .smallcaps{
    font-variant: all-small-caps;
    letter-spacing: 0.18em;
    color: var(--slate);
  }

  /* ============================================================
     HERO TRAJECTORY — typographic timeline (monograph appendix)
     Strictly 4-column tabular type: Dates | Institution | Role | Location.
     No graphical timeline (no connector lines, no dots) — alignment only.
     ============================================================ */
  .trajectory{ display: block; }
  .trajectory-row{
    display: grid;
    grid-template-columns: 1.45fr 1.75fr 1.4fr 1.55fr;
    gap: 18px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--rule);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--slate);
  }
  .trajectory-head{
    padding: 0 0 10px;
    border-bottom: 0.5px solid var(--rule-strong);
  }
  .trajectory-row .t-date{ color: var(--slate); white-space: nowrap; }
  .trajectory-row .t-inst{ color: var(--ink); }

  /* ============================================================
     CHAPTER DIVIDER — editorial half-title page between chapters
     Full-bleed sibling of the project sections (breaks all column
     constraints). Left-axis aligned to echo the monograph margin.
     ============================================================ */
  .chapter-divider{
    width: 100%;
    box-sizing: border-box;
    padding: 15vh 180px;            /* massive vertical air = a felt pause */
    border-top: 0.5px solid var(--rule);
  }
  .chapter-divider .chapter-eyebrow{
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 30px;
  }
  .chapter-divider .chapter-title{
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: clamp(72px, 11vw, 168px);
    line-height: 0.90;
    letter-spacing: -0.05em;
    color: var(--ink);
  }
  .chapter-divider .chapter-note{
    margin-top: 34px;
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.65;
    color: var(--charcoal);
  }

  /* edge bleed image */
  .bleed-right{ margin-right: -48px; }
  .bleed-left { margin-left: -48px; }

  /* ============================================================
     CURSOR — subtle dot
     ============================================================ */
  body{ cursor: default; }
  .lens, .lens *{ cursor: pointer; }

  /* ============================================================
     PROJECT CTA — sophisticated bordered button, fill-on-hover
     ============================================================ */
  .proj-cta{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 340px;
    padding: 16px 22px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 0.5px solid var(--ink);
    background: transparent;
    overflow: hidden;
    transition: color 0.55s cubic-bezier(.2,.7,.2,1);
  }
  .proj-cta::before{
    content: '';
    position: absolute; inset: 0;
    background: var(--ink);
    transform: translateX(-101%);
    transition: transform 0.55s cubic-bezier(.7,0,.3,1);
    z-index: 0;
  }
  .proj-cta > *{ position: relative; z-index: 1; }
  .proj-cta .label{ display: inline-flex; align-items: center; gap: 10px; }
  .proj-cta .arrow{
    display: inline-block;
    transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
  }
  .proj-cta .meta{
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0.6;
  }
  .proj-cta:hover{ color: var(--paper); }
  .proj-cta:hover::before{ transform: translateX(0); }
  .proj-cta:hover .arrow{ transform: translateX(4px); }

  /* ============================================================
     PROJECT DETAIL MODAL — "Drawing Gallery" sliding panel
     ============================================================ */
  body.modal-open{ overflow: hidden; }

  .proj-modal{
    position: fixed; inset: 0; z-index: 100;
    visibility: hidden;
    pointer-events: none;
  }
  .proj-modal.open{ visibility: visible; pointer-events: auto; }

  .proj-modal-backdrop{
    position: absolute; inset: 0;
    background: rgba(26,26,28,0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(.2,.7,.2,1);
    cursor: pointer;
  }
  .proj-modal.open .proj-modal-backdrop{ opacity: 1; }

  .proj-modal-panel{
    position: absolute; right: 0; top: 0; bottom: 0;
    /* ~69% on every wide screen (≈1320px @ 1080p, ≈1766px @ 1440p),
       capped at 1800px so true ultrawide keeps a strong left matte. */
    width: min(69vw, 1800px);
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.75s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
    box-shadow: -24px 0 60px rgba(26,26,28,0.10);
  }
  .proj-modal.open .proj-modal-panel{ transform: translateX(0); }

  .proj-modal-header{
    position: sticky; top: 0; z-index: 5;
    padding: 22px 56px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, var(--paper) 70%, rgba(249,248,246,0.7));
    backdrop-filter: blur(6px);
    border-bottom: 0.5px solid var(--rule);
  }
  .proj-modal-eyebrow{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .proj-modal-title{
    display: block;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .proj-modal-close{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 0.5px solid var(--ink);
    cursor: pointer;
    transition: background 0.4s ease, color 0.4s ease;
  }
  .proj-modal-close .x{ font-size: 13px; line-height: 1; }
  .proj-modal-close:hover{ background: var(--ink); color: var(--paper); }

  .proj-modal-body{ padding: 80px 56px 80px; }

  .proj-modal-lede{
    max-width: 58ch;
    margin: 0 auto 120px;
    text-align: center;
  }
  .proj-modal-lede .smallcaps{ display: block; margin-bottom: 14px; }
  .proj-modal-lede p{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: var(--charcoal);
    letter-spacing: -0.005em;
  }

  /* plate sections */
  .plate-section{ margin-bottom: 110px; }
  .plate-section-header{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    align-items: end;
    gap: 32px;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--rule);
    margin-bottom: 36px;
  }
  .plate-section-index{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .plate-section-title{
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 36px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
  }
  .plate-section-count{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
    text-align: right;
  }

  /* plate grid */
  .plate-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
  .plate-wide{ grid-column: span 2; }

  .plate{ margin: 0; }
  .plate-frame{
    position: relative;
    background: var(--paper-3);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 0.5px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    transition: filter 0.5s ease;
  }
  .plate-wide .plate-frame{ aspect-ratio: 16 / 9; }
  .plate:hover .plate-frame{ filter: brightness(0.96); }

  .plate-frame img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .plate-frame-dark{
    background: var(--charcoal);
    background-image: radial-gradient(rgba(249,248,246,0.05) 1px, transparent 1px);
    background-size: 4px 4px;
  }
  .plate-frame-dark .plate-id-watermark{ color: rgba(249,248,246,0.32); }
  .plate-frame-grid{
    background-image:
      linear-gradient(rgba(26,26,28,0.06) 0.5px, transparent 0.5px),
      linear-gradient(90deg, rgba(26,26,28,0.06) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
  }
  .plate-id-watermark{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(26,26,28,0.32);
    text-transform: uppercase;
  }

  .plate figcaption{
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    margin-top: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .plate-id{ color: var(--ink); white-space: nowrap; }
  .plate-caption{ text-align: right; }

  /* modal footer / colophon */
  .proj-modal-footer{
    margin-top: 60px;
    padding-top: 28px;
    border-top: 0.5px solid var(--rule);
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
  }
  .proj-modal-close-secondary{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  .proj-modal-close-secondary:hover{ color: var(--accent); }

  /* ============================================================
     LIGHTBOX — full-screen "detail inspector" for gallery plates
     Sits above the project modal (z 100) and loader (z 200).
     ============================================================ */
  /* any real image dropped into a gallery plate becomes zoomable */
  .proj-modal-panel .plate-frame img,
  .proj-modal-panel img{ cursor: zoom-in; }

  .lightbox{
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    background: #000;                       /* pure black, per spec */
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: zoom-out;                        /* click the matte to dismiss */
  }
  .lightbox.open{ opacity: 1; visibility: visible; }

  .lightbox img{
    max-width: 96vw; max-height: 92vh;
    width: auto; height: auto;
    object-fit: contain;
    transform: scale(0.985);
    transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 30px 90px rgba(0,0,0,0.6);
    cursor: default;                         /* image area itself is inert */
  }
  .lightbox.open img{ transform: scale(1); }

  .lightbox-close{
    position: fixed; top: 24px; right: 28px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #F9F8F6; background: transparent;
    border: 0.5px solid rgba(249,248,246,0.40);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  .lightbox-close:hover{ border-color: #F9F8F6; }
  .lightbox-close .x{ font-size: 13px; line-height: 1; }

  .lightbox-caption{
    position: fixed; bottom: 22px; left: 0; right: 0;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(249,248,246,0.6);
    pointer-events: none;
  }

  /* ============================================================
     GALLERY IMAGE PIPELINE — lazy-load + blur-up progressive reveal
     A real <img.plate-img> overlays the watermark; while it decodes a
     skeleton shimmer shows; on load it resolves from blurred → sharp.
     Invalid/placeholder paths fail gracefully back to the watermark.
     ============================================================ */
  .plate-frame img.plate-img{
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0;
    filter: blur(14px);
    transform: scale(1.06);
    transition: opacity 0.7s ease,
                filter 0.9s cubic-bezier(.2,.7,.2,1),
                transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .plate-frame img.plate-img.is-loaded{
    opacity: 1; filter: blur(0); transform: scale(1);
  }
  /* skeleton placeholder while the plate image is in flight */
  .plate-frame.is-loading::before{
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg,
      var(--paper-3) 0%, var(--paper-2) 45%, var(--paper-3) 80%);
    background-size: 220% 100%;
  }
  /* only animate the shimmer while a modal is actually open (saves CPU) */
  .proj-modal.open .plate-frame.is-loading::before{
    animation: plateShimmer 1.4s ease-in-out infinite;
  }
  @keyframes plateShimmer{
    from{ background-position: 160% 0; }
    to  { background-position: -60% 0; }
  }

  /* ============================================================
     MOBILE / TABLET LAYER — single additive override pass.
     Desktop styles above are untouched; everything here is scoped
     to <= 820px. Goal: nothing breaks, everything stays readable.
     ============================================================ */
  @media (max-width: 820px){

    /* --- global rhythm: kill the huge fixed side padding --- */
    .section{
      padding-left: 20px !important;
      padding-right: 20px !important;
      padding-top: 76px !important;
      padding-bottom: 76px !important;
    }
    #hero{ padding-top: 116px !important; padding-bottom: 56px !important; }

    /* collapse EVERY 12-col grid to a single stacked column */
    .grid.grid-cols-12{ grid-template-columns: 1fr !important; gap: 28px !important; }
    [class*="col-span-"], [class*="col-start-"]{ grid-column: auto !important; }
    .grid-cols-4{ grid-template-columns: 1fr 1fr !important; }

    /* hide desktop-only furniture that clutters a phone */
    #scrollspy{ display: none !important; }
    .annotate-v{ display: none !important; }
    .bleed-left{ margin-left: 0 !important; }
    .bleed-right{ margin-right: 0 !important; }

    /* --- top bar: keep only identity + mode toggle + index --- */
    .topbar{ padding: 13px 16px !important; }
    .topbar .gap-10{ gap: 14px !important; }
    #clock{ display: none !important; }
    .topbar span:has(> .dot){ display: none !important; }
    .mode-toggle .mode-key{ display: none !important; }

    /* --- tame the oversized display type (inline styles → need !important) --- */
    #hero h1{ font-size: clamp(56px, 16vw, 92px) !important; line-height: 0.95 !important; }
    .section h2[style]{ font-size: clamp(38px, 10vw, 58px) !important; }
    .chapter-divider .chapter-title{ font-size: clamp(48px, 13vw, 72px) !important; }
    .chapter-divider{ padding: 9vh 20px !important; }
    footer .whitespace-nowrap{ font-size: 46px !important; }

    /* --- hero typographic timeline: 2-up wrap instead of 4 columns --- */
    .trajectory-row{ grid-template-columns: 1fr 1fr !important; gap: 4px 14px !important; }

    /* --- index / appendix: keep the dense table, make it swipeable --- */
    #index-archive .col-span-10{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #index-archive .idx-head,
    #index-archive .idx-row{ min-width: 560px; }

    /* --- project gallery modal: full-width sheet, tighter padding --- */
    .proj-modal-panel{ width: 100% !important; }
    .proj-modal-header{ padding: 16px 20px !important; }
    .proj-modal-body{ padding: 40px 20px 56px !important; }
    .proj-modal-lede{ margin-bottom: 56px !important; }
    .proj-modal-lede p{ font-size: 15px !important; }
    .plate-section{ margin-bottom: 56px !important; }
    .plate-section-header{ grid-template-columns: 1fr !important; gap: 8px !important; }
    .plate-section-count{ text-align: left !important; }
    .plate-grid{ grid-template-columns: 1fr !important; gap: 20px !important; }
    .plate-wide{ grid-column: auto !important; }
    .plate-section-title{ font-size: 26px !important; }

    /* full-bleed Margin Studies section uses its own inner padding utilities */
    #proj-4 > div{ padding-left: 20px !important; padding-right: 20px !important; }
  }