:root{
    --parchment:#F2EDE4;
    --ivory:#EDE6D8;
    --studio-blue:#374E72;
    --ghost-blue:#5A6E8A;
    --ink:#1A1A1A;
    --grey:#4D4D4D;
    --rule:#CCCCCC;
    --umber:#8B4A2E;
    --frame: rgba(26,26,26,0.85);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{cursor:none}
  body{
    background:var(--parchment);
    color:var(--ink);
    font-family:'Inter',Helvetica,Arial,sans-serif;
    font-weight:300;
    font-size:16px;
    line-height:1.75;
    letter-spacing:0.005em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{ background:var(--umber); color:var(--parchment); }
  a{color:inherit;text-decoration:none}

  .visually-hidden-heading{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
  }

  /* ---------- primitives ---------- */
  .serif{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:300; letter-spacing:-0.005em; }
  .serif-i{ font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:400; }
  .caps{
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:13px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--grey);
  }
  .caps.tight{ font-size:12px; letter-spacing:0.22em; }
  .body{
    font-weight:300; font-size:17px; line-height:1.75;
    color:var(--ink); max-width:44ch;
  }
  .caption{
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:14px; letter-spacing:0.02em; color:var(--grey); line-height:1.6;
  }
  .lede{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:300; font-size:20px; line-height:1.55; max-width:48ch;
  }
  .pill{
    display:inline-block;
    padding:6px 14px 5px;
    border:1px solid rgba(26,26,26,0.55);
    border-radius:999px;
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--ink);
    white-space:nowrap;
  }
  .pill.soft{ border-color:rgba(26,26,26,0.3); color:var(--grey); }
  .rule-thin{ height:1px; background:rgba(26,26,26,0.4); }

  /* ---------- section scaffolding ---------- */
  main{ position:relative; }

  section.sheet{
    position:relative;
    padding: 42px 48px;
    min-height:100vh;
  }
  @media (max-width: 900px){
    section.sheet{ padding: 20px 16px; }
  }

  /* the thin ink frame around each composition */
  .frame{
    position:relative;
    border:1px solid var(--frame);
    padding: 54px 64px 52px;
    min-height: calc(100vh - 84px);
    background: transparent;
  }
  .frame.tall{ min-height: 118vh; }
  .frame.short{ min-height: 82vh; }
  @media (max-width: 900px){
    .frame{ padding: 28px 22px; min-height: calc(100vh - 40px); }
  }

  /* vertical edge rails on the frame */
  .rail-v{
    position:absolute;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:12px; letter-spacing:0.26em; text-transform:uppercase;
    color:var(--grey);
    white-space:nowrap;
  }
  .rail-v.left{ left: 18px; top: 80px; }
  .rail-v.right{ right: 18px; bottom: 80px; }
  @media (max-width: 900px){ .rail-v{ display:none; } }

  /* frame corner marks */
  .frame-corner{
    position:absolute; width:10px; height:10px;
    border:1px solid var(--frame);
    background:var(--parchment);
  }
  .frame-corner.tl{ top:-5px; left:-5px; }
  .frame-corner.tr{ top:-5px; right:-5px; }
  .frame-corner.bl{ bottom:-5px; left:-5px; }
  .frame-corner.br{ bottom:-5px; right:-5px; }

  /* frame metadata header (top band) */
  .frame-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom: 42px;
    gap:20px;
  }
  .frame-head .left, .frame-head .right{ display:flex; gap:14px; align-items:center; }
  .frame-head .bar{ width:32px; height:1px; background:var(--frame); opacity:0.5; }
  .frame-head .num{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:14px; color:var(--ink);
  }

  /* frame footer (bottom band) */
  .frame-foot{
    position:absolute; left:64px; right:64px; bottom:28px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--grey);
  }
  .frame-foot .sig{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:16px; text-transform:none; letter-spacing:0.02em; color:var(--ink);
  }
  .frame-foot .sig::after{ content:'\2009.'; color:var(--umber); }
  .frame-foot .footer-logo-link,
  .qnav-foot .footer-logo-link{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    line-height:0;
  }
  .frame-foot .footer-logo-img,
  .qnav-foot .footer-logo-img{
    display:block;
    width:min(420px, 46vw);
    height:auto;
    max-height:130px;
    object-fit:contain;
    opacity:0.9;
    transition:opacity 180ms ease, filter 180ms ease;
  }
  .frame-foot .footer-logo-link:hover .footer-logo-img,
  .qnav-foot .footer-logo-link:hover .footer-logo-img{
    opacity:1;
  }
  @media (max-width: 900px){ .frame-foot{ left:22px; right:22px; bottom:14px; font-size:11px; } }

  /* ---------- archive image system ---------- */
  .arc{
    position:relative;
    background: linear-gradient(140deg, #d9c6ae 0%, #c8a581 55%, #8B4A2E 120%);
    background-blend-mode: multiply;
    overflow:hidden; color:var(--parchment);
  }
  .arc::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(242,237,228,0.18), transparent 60%),
      radial-gradient(ellipse at 70% 80%, rgba(26,26,26,0.28), transparent 55%);
    mix-blend-mode: soft-light;
  }
  .arc::after{
    content:''; position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(23deg, rgba(26,26,26,0.03) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(-67deg, rgba(242,237,228,0.04) 0 1px, transparent 1px 2px);
    pointer-events:none;
  }
  .arc .lab{
    position:absolute; top:12px; left:12px; right:58px;
    font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
    color:rgba(242,237,228,0.88);
  }
  .arc .tag{
    position:absolute; bottom:12px; left:12px; right:12px;
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:17px; color:rgba(242,237,228,0.92);
  }
  .arc .hair{ position:absolute; top:12px; right:12px; width:34px; height:1px; background:rgba(242,237,228,0.6); }

  /* when .arc carries a real image */
  .arc.has-img{ background: var(--ink); }
  .arc.has-img > img.src{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    z-index:0;
    /* warm editorial grade: slight desaturation, lifted blacks, umber-leaning */
    filter: saturate(0.78) contrast(0.96) sepia(0.08) brightness(0.98);
  }
  .arc.has-img::before{
    /* soft vignette + parchment warmth for unity across images */
    background:
      radial-gradient(ellipse at 50% 52%, transparent 40%, rgba(26,26,26,0.28) 100%),
      linear-gradient(180deg, rgba(242,237,228,0.10) 0%, transparent 25%, transparent 75%, rgba(139,74,46,0.14) 100%);
    mix-blend-mode: normal;
    z-index:1;
  }
  .arc.has-img::after{
    /* subtle grain for editorial print feel */
    background-image:
      repeating-linear-gradient(90deg, rgba(26,26,26,0.04) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(0deg, rgba(26,26,26,0.03) 0 1px, transparent 1px 3px);
    opacity:0.7;
    z-index:1;
  }
  .arc.has-img .lab, .arc.has-img .tag, .arc.has-img .hair{ z-index:2; }
  .arc.has-img .lab, .arc.has-img .tag{ text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
  .arc.has-img.map-plate > img.src{ object-fit: contain; background:#efe4d0; filter: saturate(0.82) contrast(0.94) sepia(0.05); }
  .arc.has-img.map-plate::before{ background: none; }
  .arc.has-img.archival > img.src{ filter: grayscale(0.65) sepia(0.35) contrast(0.95) brightness(1.02); }

  .arc.figure::before{
    background:
      radial-gradient(ellipse 36% 44% at 48% 58%, rgba(242,237,228,0.22), transparent 70%),
      radial-gradient(ellipse 22% 28% at 52% 30%, rgba(242,237,228,0.18), transparent 70%),
      radial-gradient(circle at 70% 80%, rgba(26,26,26,0.32), transparent 55%);
  }
  .arc.etching::before{
    background: linear-gradient(to bottom, rgba(242,237,228,0.22) 0%, transparent 40%, rgba(26,26,26,0.25) 100%);
  }
  .arc.etching::after{
    background-image:
      repeating-linear-gradient(90deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(26,26,26,0.04) 0 1px, transparent 1px 3px);
  }
  .arc.still::before{
    background:
      radial-gradient(ellipse 40% 30% at 30% 70%, rgba(26,26,26,0.3), transparent 70%),
      radial-gradient(ellipse 28% 22% at 65% 55%, rgba(242,237,228,0.18), transparent 70%),
      radial-gradient(circle 12% at 50% 40%, rgba(139,74,46,0.4), transparent 70%);
  }
  .arc.mapish::before{
    background: radial-gradient(ellipse at 50% 50%, rgba(242,237,228,0.2), transparent 60%);
  }
  .arc.mapish::after{
    background-image:
      repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(-45deg, rgba(26,26,26,0.06) 0 1px, transparent 1px 9px);
  }
  .arc.portrait::before{
    background:
      radial-gradient(ellipse 28% 36% at 50% 42%, rgba(242,237,228,0.26), transparent 70%),
      linear-gradient(180deg, transparent 50%, rgba(26,26,26,0.35) 100%);
  }

  /* ---------- italic-into-uppercase serif display ---------- */
  .mixed{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:400; text-transform:uppercase; letter-spacing:0.01em;
    line-height:1.02;
  }
  .mixed em, .mixed .it{
    font-style:italic; font-weight:400;
    text-transform:none; letter-spacing:-0.005em;
    font-family:'Cormorant Garamond',Georgia,serif;
  }

  /* ---------- reveals ---------- */
  .rv{ opacity:0; transform:translateY(12px); transition: opacity 1300ms cubic-bezier(.22,.61,.36,1), transform 1300ms cubic-bezier(.22,.61,.36,1); }
  .rv.in{ opacity:1; transform:none; }
  .rv.d1{ transition-delay:180ms; }
  .rv.d2{ transition-delay:460ms; }
  .rv.d3{ transition-delay:820ms; }
  .rv.d4{ transition-delay:1240ms; }
  .rv.d5{ transition-delay:1700ms; }

  /* ---------- right-edge progress rail (outside frames) ---------- */
  .prog{
    position:fixed; top:0; right:16px; height:100vh; width:1px;
    background:rgba(26,26,26,0.12); z-index:40; pointer-events:none;
  }
  .prog .fill{
    position:absolute; top:0; left:-0.5px; width:2px; height:0; background:var(--umber);
    transition: height 60ms linear;
  }
  .prog .tick{ position:absolute; left:-4px; width:9px; height:1px; background:rgba(26,26,26,0.22); }
  .prog-num{
    position:fixed; right:6px; top:22px;
    font-family:'Inter',sans-serif; font-weight:300;
    font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--grey); z-index:40; pointer-events:none;
    writing-mode: vertical-rl;
  }

  /* ---------- custom cursor ---------- */
  .cur-dot, .cur-ring{ position:fixed; top:0; left:0; z-index:100; pointer-events:none; transform:translate(-50%,-50%); }
  .cur-dot{ width:7px; height:7px; border-radius:50%; background:var(--studio-blue); transition: transform 220ms, opacity 300ms; }
  .cur-ring{ width:22px; height:22px; border:1px solid rgba(55,78,114,0.35); border-radius:50%; transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity 400ms; }
  body.cur-link .cur-dot{
    background:transparent; width:auto; height:auto;
    color:var(--studio-blue);
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:22px; line-height:1;
  }
  body.cur-link .cur-dot::before{ content:'&'; }
  body.cur-cross .cur-dot{ background:transparent; width:16px; height:16px; }
  body.cur-cross .cur-dot::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--umber); }
  body.cur-cross .cur-dot::after{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--umber); }
  body.cur-cross .cur-ring{ opacity:0; }
  @media (max-width: 900px){ html{cursor:auto;} .cur-dot,.cur-ring{display:none;} }

  /* ==========================================================
     SECTIONS
     ========================================================== */

  /* S01 — opening */
  .s01 .stage{
    display:grid; grid-template-columns: 1fr; place-items:center;
    height: calc(100vh - 240px); position:relative;
    margin-top: 40px;
  }
  .s01 .mono-word{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(140px, 22vw, 320px); line-height:1;
    letter-spacing:-0.02em; color:var(--ink); opacity:0.96;
    white-space:nowrap; pointer-events:none;
    z-index: 3;
    mix-blend-mode: difference;
    color: var(--parchment);
  }
  .s01 .mono-word .it{ font-style:italic; text-transform:none; letter-spacing:-0.01em; color:var(--umber); }
  .s01 .video-frame{
    position:relative; z-index:2;
    width: min(46vw, 620px); aspect-ratio: 3/4;
    box-shadow: 0 0 0 1px rgba(26,26,26,0.3);
    background:var(--parchment);
    padding:8px;
  }
  .s01 .video-frame .inner{ width:100%; height:100%; position:relative; }
  .s01 .corner-labels{
    position:absolute; inset:0; pointer-events:none;
  }
  .s01 .corner-labels .tl, .s01 .corner-labels .tr, .s01 .corner-labels .bl, .s01 .corner-labels .br{
    position:absolute; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; color:var(--ink); font-size:14px;
  }
  .s01 .corner-labels .tl{ top:8px; left:14px; }
  .s01 .corner-labels .tr{ top:8px; right:14px; }
  .s01 .corner-labels .bl{ bottom:8px; left:14px; }
  .s01 .corner-labels .br{ bottom:8px; right:14px; }

  /* S02 — lede */
  .s02 .composition{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; min-height: 70vh; align-items:end;
  }
  .s02 .lede-line{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(36px, 4.4vw, 64px); line-height:1.12;
    max-width: 18ch;
  }
  .s02 .lede-line .it{ font-style:italic; color:var(--umber); }

  /* S03 — the moment */
  .s03 .grid{
    display:grid; grid-template-columns: 280px 1fr 0.9fr; gap: 44px;
    min-height: 72vh; align-items:end;
  }
  .s03 .stack-num{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(120px, 16vw, 240px); line-height:0.85;
    letter-spacing:-0.03em;
  }
  .s03 .stack-num .yr{ font-style:italic; color:var(--umber); font-size:0.5em; display:block; }

  /* S04 — the numbers (one frame, three armatures vertical) */
  .s04 .num-row{
    display:grid; grid-template-columns: 1fr; gap: 40px;
    padding-top: 20px;
  }
  .s04 .num-row .item{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px;
    align-items:center;
    padding: 34px 0; border-top:1px solid rgba(26,26,26,0.4);
  }
  .s04 .num-row .item:last-child{ border-bottom:1px solid rgba(26,26,26,0.4); }
  .s04 .num-huge{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(84px, 11vw, 160px); line-height:0.9; letter-spacing:-0.02em;
  }
  .s04 .num-huge .suf{ font-size:0.48em; letter-spacing:0; font-style:italic; color:var(--umber); }
  .s04 .num-body{ max-width:40ch; }
  .s04 .num-idx{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size: 20px; color:var(--umber);
  }

  /* S05 — diagnosis (duet headline) */
  .s05 .duet{
    text-align:center; padding: 6vh 0;
  }
  .s05 .duet .line{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size: clamp(60px, 7.5vw, 128px);
    line-height:1.03; letter-spacing:-0.005em;
  }
  .s05 .duet .line .it{ font-style:italic; font-weight:400; color:var(--umber); }
  .s05 .duet .line.upper{ font-weight:400; text-transform:uppercase; }
  .s05 .duet .amp{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size: clamp(60px, 8vw, 140px); color: var(--umber); line-height:1;
    display:block; margin: 14px 0;
  }
  .s05 .below{
    max-width: 52ch; margin: 40px auto 0; text-align:center;
  }

  /* S06 — transition video */
  .s06 .video-wide{
    aspect-ratio: 21/9; width:100%;
    box-shadow: 0 0 0 1px rgba(26,26,26,0.3);
    padding:8px; background:var(--parchment);
  }
  .s06 .video-wide .inner{ width:100%; height:100%; }

  /* S07 — concept (gallery armature) */
  .s07 .gallery{
    position:relative; min-height: 70vh;
  }
  .s07 .armature{
    position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(120px, 16vw, 260px); line-height:0.95;
    letter-spacing:-0.02em;
    white-space:nowrap; color:var(--ink);
    z-index:1;
  }
  .s07 .armature .it{ font-style:italic; text-transform:none; letter-spacing:-0.01em; color:var(--umber); }
  .s07 .floats{ position:relative; z-index:2; height: 70vh; }
  .s07 .floats .float{
    position:absolute;
    display:flex; flex-direction:column; gap:8px;
  }
  .s07 .floats .float .meta{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'Inter',sans-serif;
    font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--ink);
  }
  .s07 .floats .float .meta .rail{
    flex:1; height:1px; background:var(--ink);
    margin: 0 10px; transform: translateY(-3px);
  }
  .s07 .floats .float .meta .cap{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:16px; letter-spacing:0; text-transform:none;
    color:var(--grey);
  }
  .s07 .floats .float .img-wrap{
    position:relative; flex:1 1 auto;
    box-shadow:0 0 0 1px rgba(26,26,26,0.3);
    padding:6px; background:var(--parchment);
    min-height:0;
  }
  .s07 .floats .float .img-wrap > .inner{ width:100%; height:100%; }
  /* when label sits above image, suppress in-image label/tag/hair */
  .s07 .floats .float .img-wrap .arc .lab,
  .s07 .floats .float .img-wrap .arc .tag,
  .s07 .floats .float .img-wrap .arc .hair{ display:none; }
  .s07 .date-meta{
    position:absolute; right:0; bottom:0;
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:15px; color:var(--ink);
  }
  .s07 .txt{
    max-width: 38ch; margin-top: 32px;
  }

  /* S08 — six system roles */
  .s08 .head{
    display:grid; grid-template-columns: 1fr 1fr; gap:48px;
    align-items:end; margin-bottom:44px;
  }
  .s08 .big-title{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(44px, 5vw, 84px); line-height:1.04; letter-spacing:-0.008em;
    max-width: 20ch;
  }
  .s08 .big-title .it{ font-style:italic; color:var(--umber); }
  .s08 .roles{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px 28px;
  }
  .s08 .role{
    border:1px solid rgba(26,26,26,0.25);
    padding: 20px 22px 24px;
    display:flex; flex-direction:column; gap:14px;
    min-height: 320px;
  }
  .s08 .role .mark{ width:100%; aspect-ratio: 4/3; }
  .s08 .role .roman{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size: 22px; color: var(--umber);
  }
  .s08 .role .name{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink); font-weight:300;
  }
  .s08 .role .desc{
    font-size:16px; line-height:1.65; color:var(--ink); max-width:32ch;
  }

  /* S09 — visitor types (pinned cross-fade), inside frame */
  .s09-pin{ position:relative; height: 500vh; }
  .s09-stage{
    position:sticky; top:0; height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding: 28px;
  }
  .s09-frame{
    position:relative; width:100%; height:100%;
    border:1px solid var(--frame);
    padding: 48px 60px;
    overflow:hidden;
  }
  .s09-slide{
    position:absolute; inset:48px 60px;
    display:grid; grid-template-columns: 280px 1fr 1fr; gap: 44px;
    align-items:center;
    opacity:0; transition: opacity 900ms ease;
  }
  .s09-slide.active{ opacity:1; }
  .s09-slide .bignum{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(120px, 15vw, 220px); line-height:0.85;
    letter-spacing:-0.02em;
  }
  .s09-slide .bignum .it{ font-style:italic; color:var(--umber); font-size:0.4em; display:block; }
  .s09-slide h2{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(36px, 4.4vw, 66px); line-height:1.04;
    margin:0 0 22px; letter-spacing:-0.008em;
  }
  .s09-slide h2 .it{ font-style:italic; color:var(--umber); }
  .s09-progress{
    position:absolute; left:60px; bottom:20px;
    display:flex; gap:14px;
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.26em; text-transform:uppercase;
    color:var(--grey);
  }
  .s09-progress span{ opacity:0.4; }
  .s09-progress span.active{ opacity:1; color:var(--umber); }
  .s09-count{
    position:absolute; right:60px; bottom:20px;
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:14px; color:var(--ink);
  }

  /* S10 — six-night choreography (score) */
  .s10 .score{
    display:grid; grid-template-columns: repeat(6,1fr);
    border-top:1px solid var(--frame);
    border-bottom:1px solid var(--frame);
    margin-top: 40px;
  }
  .s10 .score > div{
    padding: 30px 18px 36px;
    border-right:1px solid rgba(26,26,26,0.35);
    min-height: 44vh;
    display:flex; flex-direction:column;
  }
  .s10 .score > div:last-child{ border-right:none; }
  .s10 .score .n{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size: 42px; color: var(--umber); line-height:1; margin-bottom:6px;
  }
  .s10 .score .reg{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size: 24px; line-height:1.15; margin: 22px 0 16px;
  }
  .s10 .score .reg .it{ font-style:italic; }
  .s10 .score .desc{
    font-size:12.5px; line-height:1.65; color:var(--grey); margin-top:auto;
  }
  .s10 .score .mark{ width:32px; height:1px; background:var(--ink); margin-top:22px; }

  /* S11 — transition · instruments */
  .s11 .comp{
    position:relative; min-height: 74vh;
    display:grid; place-items:center;
  }
  .s11 .word{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size: clamp(80px, 11vw, 200px); line-height:1; color:var(--ink);
    position:absolute; z-index:2;
    left:50%; top:50%; transform:translate(-50%,-50%);
  }
  .s11 .bg{
    width: min(72vw, 1100px); aspect-ratio: 21/8;
    position:relative; z-index:1;
    padding:8px; box-shadow:0 0 0 1px rgba(26,26,26,0.3); background:var(--parchment);
  }
  .s11 .bg .inner{ width:100%; height:100%; }

  /* S12 — catalyst collage (gallery with monumental word) */
  .s12 .gal{
    position:relative; width:100%; height: 94vh;
  }
  .s12 .gal .word{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(120px, 14vw, 240px); line-height:0.95;
    letter-spacing:-0.02em;
    white-space:nowrap; color:var(--ink);
    z-index:1; pointer-events:none;
  }
  .s12 .gal .word .it{ font-style:italic; color:var(--umber); text-transform:none; }
  .s12 .gal .piece{
    position:absolute; cursor:pointer; z-index:2;
    padding:6px; background:var(--parchment); box-shadow:0 0 0 1px rgba(26,26,26,0.3);
    transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  }
  .s12 .gal .piece .inner{ width:100%; height:100%; }
  .s12 .gal .piece:hover{ transform:translateY(-5px); }
  .s12 .gal .piece .pname{
    position:absolute; left:8px; bottom:-28px;
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:18px; color:var(--ink);
    opacity:0; transform:translateY(-4px);
    transition: opacity 400ms ease, transform 500ms ease;
    white-space:nowrap;
  }
  .s12 .gal .piece:hover .pname{ opacity:1; transform:none; }

  /* S13 — project previews, each framed */
  .proj-frame{
    border:1px solid var(--frame);
    padding: 40px 54px 52px;
    display:grid; grid-template-columns: 0.85fr 1fr; gap: 48px;
    margin-bottom: 40px;
    position:relative;
    min-height: 72vh;
    align-items:center;
  }
  .proj-frame.rev{ grid-template-columns: 1fr 0.85fr; }
  .proj-frame.rev .pl{ order:2; }
  .proj-frame .head{
    display:flex; gap:12px; align-items:center; margin-bottom: 10px;
  }
  .proj-frame .pindex{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:18px; color:var(--umber);
  }
  .proj-frame .ptitle{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(48px, 5.2vw, 84px); line-height:1; margin: 8px 0 28px;
    letter-spacing:-0.01em;
  }
  .proj-frame .ptitle .it{ font-style:italic; color:var(--umber); }
  .proj-frame .pbody{ max-width: 42ch; font-size:17px; line-height:1.75; }
  .proj-frame .enter{
    display:inline-flex; align-items:center; gap:10px;
    margin-top: 40px;
    padding: 13px 26px 12px;
    border:1.5px solid var(--ink); border-radius:999px;
    background: var(--parchment);
    font-family:'Inter',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink);
    transition: border-color 250ms, color 250ms, background 250ms, transform 250ms;
    cursor: pointer;
  }
  .proj-frame .enter:hover{ background:var(--ink); border-color:var(--ink); color:var(--parchment); transform: translateY(-1px); }
  .proj-frame .pl{
    aspect-ratio: 4/5;
    padding:6px; background:var(--parchment); box-shadow:0 0 0 1px rgba(26,26,26,0.3);
  }
  .proj-frame .pl .inner{ width:100%; height:100%; }

  /* S14 — pipeline */
  .s14 .pipeline{ margin-top: 40px; position:relative; }
  .s14 .row{
    display:grid; grid-template-columns: 34ch 1fr 1fr;
    gap: 40px; padding: 30px 0;
    cursor: crosshair;
    transition: opacity 300ms ease;
    border-bottom: 1px solid rgba(26,26,26,0.4);
    align-items:baseline;
  }
  .s14 .row:first-of-type{ border-top:1px solid rgba(26,26,26,0.4); }
  .s14 .row .nm{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(28px, 2.8vw, 42px); line-height:1.04; letter-spacing:-0.005em;
  }
  .s14 .row .nm .it{ font-style:italic; color:var(--umber); }
  .s14 .pipeline:hover .row{ opacity:0.35; }
  .s14 .pipeline .row:hover{ opacity:1; }
  .s14 .row .nm{ transition: transform 400ms cubic-bezier(.22,.61,.36,1), color 300ms; }
  .s14 .row:hover .nm{ transform: translateX(10px); }

  /* floating hover image */
  .s14 .hover-img{
    position: fixed;
    width: min(560px, 38vw); aspect-ratio: 4/5;
    pointer-events:none;
    opacity:0; transform: translate(-50%,-50%) scale(0.94);
    transition: opacity 320ms cubic-bezier(.22,.61,.36,1), transform 520ms cubic-bezier(.22,.61,.36,1);
    z-index: 40;
    padding: 8px; background: var(--parchment);
    box-shadow: 0 0 0 1px rgba(26,26,26,0.4), 0 30px 80px rgba(26,26,26,0.32);
  }
  .s14 .hover-img.on{ opacity:1; transform: translate(-50%,-50%) scale(1); }
  .s14 .hover-img .inner{
    width:100%; height:100%;
    background: linear-gradient(140deg, rgba(139,90,60,0.18), rgba(26,26,26,0.08));
    position:relative; overflow:hidden;
  }
  .s14 .hover-img .inner img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter: saturate(0.78) contrast(0.96) sepia(0.08) brightness(0.98);
  }
  .s14 .hover-img .lab{
    position:absolute; left:14px; top:14px; z-index:2;
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
    color:var(--parchment); text-shadow: 0 1px 10px rgba(0,0,0,0.7);
  }
  .s14 .row .rl{ font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey); }
  .s14 .row .nt{ font-size:16px; color:var(--ink); max-width: 34ch; line-height:1.65; }
  .s14 .row .idx{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:18px; color:var(--umber);
  }

  /* S15 — the map */
  .s15-frame .map-stage{
    position:relative; width:100%; min-height: 78vh;
    display:flex; align-items:center; justify-content:center;
  }
  .map-svg{ width: min(92%, 1100px); height: min(72vh, 780px); }
  .map-svg path, .map-svg line{ stroke:var(--ink); fill:none; }
  .map-marker{ position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); cursor:none; }
  .map-marker .dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--umber); }
  .map-marker .ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); width:22px; height:22px; border-radius:50%; border:1px solid var(--umber); transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
  .map-marker:hover .ring{ transform:translate(-50%,-50%) scale(1); }
  .map-marker .lbl{
    position:absolute; left:24px; top:50%; transform:translateY(-50%);
    white-space:nowrap; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
    font-size:16px; color:var(--ink); opacity:0.7;
    transition: opacity 300ms ease, color 300ms ease;
  }
  .map-marker:hover .lbl{ opacity:1; color:var(--umber); }

  /* S16 — closing (dark, final plate) */
  .s16{
    background:#0b0b0c; color:var(--parchment);
    padding: 42px 48px;
    min-height: 100vh;
    position:relative; overflow:hidden;
  }
  .s16 .frame{
    border:1px solid rgba(242,237,228,0.22);
    padding: 72px 72px 56px;
    min-height: calc(100vh - 84px);
    display:grid;
    grid-template-rows: auto 1fr auto;
    position:relative;
  }
  .s16 .frame-corner{ background:#0b0b0c; border-color:rgba(242,237,228,0.35); }
  .s16 .rail-v{ color: rgba(242,237,228,0.55); }
  .s16 .frame-foot{
    left:72px;
    right:72px;
    bottom:42px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:clamp(28px, 4vw, 72px);
    align-items:end;
    padding-top:18px;
    border-top:1px solid rgba(242,237,228,0.22);
    color: rgba(242,237,228,0.6);
  }
  .s16 .frame-foot > span{
    min-width:0;
    line-height:1.55;
    overflow-wrap:anywhere;
  }
  .s16 .frame-foot .footer-logo-link{
    justify-self:end;
    align-self:end;
  }
  .s16 .frame-foot .sig{ color:#fff; }
  .s16 .frame-foot .sig::after{ color: rgba(242,237,228,0.6); }
  .s16 .frame-foot .footer-logo-img{
    width:clamp(250px, 22vw, 340px);
    max-height:105px;
    filter:invert(1);
    opacity:1;
  }

  .s16 .close-head{
    display:flex; justify-content:space-between; align-items:center;
  }
  .s16 .close-meta{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
    color: rgba(242,237,228,0.85);
  }

  .s16 .close-body{
    display:grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-content: end;
    align-items: end;
    justify-items: start;
    padding: clamp(84px, 12vh, 150px) 0 clamp(132px, 15vh, 180px);
  }
  .s16 .close-body > div{ max-width:min(720px, 100%); }

  .s16 .close-quote{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:300;
    font-size: clamp(40px, 4.6vw, 80px); line-height:1.06; letter-spacing:-0.01em;
    color:#fff; margin: 0 0 28px;
    max-width: 18ch;
  }
  .s16 .close-quote .it{ font-style:italic; color: rgba(242,237,228,0.78); }
  .s16 .close-rule{ width:52px; height:1px; background:rgba(242,237,228,0.45); margin-bottom: 14px; }
  .s16 .close-caps{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.24em; text-transform:uppercase;
    color:rgba(242,237,228,0.85);
    max-width: 38ch;
  }

  @media (max-width: 900px){
    .s16 .frame{ padding: 48px 24px; }
    .s16 .close-body{ grid-template-columns: 1fr; gap: 48px; padding: 48px 0 32px; }
    .s16 .frame-foot{
      left:22px;
      right:22px;
      bottom:14px;
      grid-template-columns:1fr;
      gap:14px;
      align-items:start;
    }
    .s16 .frame-foot .footer-logo-link{ justify-self:start; }
    .s16 .frame-foot .footer-logo-img{
      width:min(260px, 78vw);
      max-height:82px;
    }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 1100px){
    .s04 .num-row .item{ grid-template-columns:1fr; gap:16px; }
    .s08 .roles{ grid-template-columns: 1fr 1fr; }
    .proj-frame, .proj-frame.rev{ grid-template-columns: 1fr; }
    .proj-frame.rev .pl{ order:-1; }
    .s02 .composition, .s03 .grid{ grid-template-columns:1fr; gap:24px; }
    .s10 .score{ grid-template-columns: 1fr 1fr; }
    .s10 .score > div{ border-right:none; border-bottom:1px solid rgba(26,26,26,0.35); min-height:auto; }
    .s09-slide{ grid-template-columns:1fr; gap:18px; }
  }
  @media (max-width: 700px){
    .s01 .mono-word{ font-size: 110px; }
    .s01 .video-frame{ width: 82vw; }
    .s12 .gal{ height:auto; display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
    .s12 .gal .piece{ position:relative !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; width:auto !important; height:40vh !important; transform:none !important; }
    .s12 .gal .word{ position:relative; left:auto; top:auto; transform:none; margin-bottom:20px; font-size: 56px; text-align:center; }
    .s08 .roles{ grid-template-columns: 1fr; }
    .s08 .head{ grid-template-columns: 1fr; gap:16px; }
    .s14 .row{ grid-template-columns:1fr; gap:8px; }
  }