/* ============================================================================
   style.css — components. Consumes css/tokens.css (Layer 2 roles only).
   No literal colors, font stacks, type sizes, or section spacing below this
   line; if you need one, add it to tokens.css instead.
   ============================================================================ */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0; background:var(--cm-surface-page); color:var(--cm-text-primary);
    font-family:var(--cm-font-serif); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  .wrap{max-width:var(--cm-wrap-max); margin:0 auto; padding:0 var(--cm-inset-page);}
  .mono{font-family:var(--cm-font-mono); letter-spacing:var(--cm-tracking-mono);}
  .eyebrow{
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-sm);
    letter-spacing:var(--cm-tracking-wide); text-transform:uppercase; color:var(--cm-text-secondary);
  }
  p{font-family:var(--cm-font-serif); font-weight:400;}

  /* pill button, per referenced sites */
  .pill-btn{
    display:inline-flex; align-items:center; gap:var(--cm-space-2);
    font-family:var(--cm-font-serif); font-size:var(--cm-type-body); color:var(--cm-text-primary);
    border:1px solid var(--cm-btn-border); border-radius:var(--cm-radius-pill);
    padding:var(--cm-pad-pill-y) var(--cm-pad-pill-x); text-decoration:none;
    transition:background var(--cm-dur-fast) ease, color var(--cm-dur-fast) ease,
               padding var(--cm-dur-theme) var(--cm-ease);
  }
  .pill-btn:hover{background:var(--cm-btn-fill-hover); color:var(--cm-btn-text-hover);}

  .speedup-btn{
    position:fixed; top:0; left:0; z-index:20;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-md); letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--cm-btn-invert-text); background:var(--cm-btn-invert-fill);
    border-radius:var(--cm-radius-pill); padding:var(--cm-pad-chip-y) var(--cm-pad-chip-x);
    pointer-events:none; opacity:0; user-select:none;
    -webkit-user-drag:none; user-drag:none;
    transform:translate(-82%, -82%) scale(0.9);
    transition:opacity var(--cm-dur-base) ease, transform var(--cm-dur-base) ease, background var(--cm-dur-fast) ease, color var(--cm-dur-fast) ease;
    box-shadow:var(--cm-shadow-lift);
  }
  .speedup-btn.is-visible{opacity:1; transform:translate(-82%, -82%) scale(1); pointer-events:auto; cursor:pointer;}
  .speedup-btn.is-pressed{background:var(--cm-btn-invert-text); color:var(--cm-btn-invert-fill);}

  /* ---------- NAV ---------- */
  nav{position:sticky; top:0; z-index:50; background:var(--cm-surface-raised); border-bottom:1px solid var(--cm-rule);}
  nav .edge{display:flex; align-items:center; justify-content:flex-end; height:64px;}
  .nav-links{display:flex; gap:var(--cm-space-7);}
  .nav-links a{color:var(--cm-text-primary); text-decoration:none; font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-md); opacity:0.75;}
  .nav-links a:hover{opacity:1;}

  /* shared edge margin: ~30% left/right on wide screens, tapering on small */
  .edge{padding-left:30vw; padding-right:30vw;}
  @media (max-width:1100px){ .edge{padding-left:12vw; padding-right:12vw;} }
  @media (max-width:640px){ .edge{padding-left:var(--cm-space-5); padding-right:var(--cm-space-5);} }

  /* ---------- HERO ---------- */
  .hero-sketch{
    position:absolute; z-index:0;
    left:calc(6% - 200px); top:50%; transform:translateY(-50%);
    height:135%; width:auto;
    opacity:0; pointer-events:none;
  }
  .hero-underlay{
    position:absolute; z-index:0;
    left:calc(6% - 200px); top:50%; transform:translateY(-50%);
    height:135%; width:auto;
    opacity:var(--cm-underlay-opacity); pointer-events:none;
    mask-image: linear-gradient(to right, black 60%, transparent 92%);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 92%);
  }
  .hero-sketch .sketch-line{
    fill:none; stroke:var(--cm-sketch-stroke);
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .hero-sketch .edge-line{ stroke-width:var(--cm-sketch-edge-width); }
  .hero-sketch .shade-line{ stroke-width:var(--cm-sketch-shade-width); stroke-opacity:var(--cm-sketch-shade-alpha); }
  .grid-lines{
    position:absolute; inset:0; z-index:1;
    background-image:
      repeating-linear-gradient(to right, var(--cm-gridline) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, var(--cm-gridline) 0 1px, transparent 1px 120px);
    opacity:var(--cm-gridline-opacity);
    /* anchored top-right: strong at the corner, fading out before reaching center */
    mask-image: radial-gradient(circle at 100% 0%, black 0%, black 22%, transparent 48%);
    -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, black 22%, transparent 48%);
  }
  .hero{
    position:relative; overflow:hidden; background:var(--cm-surface-raised);
    /* 100vh on iOS Safari is TALLER than the visible area — it excludes the
       toolbars. That pushed .hero's bottom edge off-screen, so the absolutely
       positioned hero text was clipped and the fixed .scroll-cue rode over the
       headline. dvh tracks the actual visible height; vh stays as a fallback. */
    min-height:100vh;
    min-height:100dvh;
    padding:var(--cm-inset-hero) 0;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-inner{
    position:fixed; top:50%; left:50%; z-index:2; text-align:center;
    display:flex; flex-direction:column; align-items:center;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .hero-eyebrow{
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-sm);
    letter-spacing:var(--cm-tracking-wide); text-transform:uppercase; color:var(--cm-text-secondary);
    text-align:center; margin-bottom:45px;
  }
  .hero-line-1{
    font-family:var(--cm-font-mono); font-weight:500;
    font-size:var(--cm-type-hero-1); line-height:var(--cm-leading-tight);
    letter-spacing:-0.005em; word-spacing:-0.2em; text-transform:uppercase; color:var(--cm-text-primary);
    margin:0; position:relative; z-index:1;
  }
  .hero-line-2{
    font-family:var(--cm-font-serif); font-weight:400; font-style:italic;
    font-size:var(--cm-type-hero-2); line-height:var(--cm-leading-none);
    letter-spacing:var(--cm-tracking-snug); color:var(--cm-text-primary);
    margin:-0.05em 0 0; position:relative; z-index:2;
    white-space:nowrap;
  }
  .scroll-cue{
    position:fixed; bottom:var(--cm-space-8); left:50%; z-index:2;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs); letter-spacing:var(--cm-tracking-wide);
    text-transform:uppercase; color:var(--cm-text-secondary);
    transform:translateX(-50%);
    will-change:transform, opacity;
    pointer-events:none;
  }
  .scroll-cue .arrow{
    display:inline-block;
    animation:cue-bounce 1.6s ease-in-out infinite;
  }
  @keyframes cue-bounce{
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(5px); }
  }

  /* ---------- BIG WORD BREAK ---------- */
  .word-break{padding:var(--cm-space-8) 0 var(--cm-space-5); border-top:1px solid var(--cm-rule);}
  .word-break h2{
    font-family:var(--cm-font-serif); font-weight:500; font-style:italic;
    font-size:var(--cm-type-display); line-height:var(--cm-leading-snug); letter-spacing:var(--cm-tracking-tight);
    margin:0 0 0 0.02em; color:var(--cm-text-primary);
  }
  .word-break .tag{margin-top:var(--cm-space-2); display:block;}

  /* ---------- QUICK HIT LISTS ---------- */
  .section{padding-bottom:var(--cm-gap-section); display:flow-root;}
  .quick-grid{
    display:grid; grid-template-columns: repeat(2, 1fr) 340px;
    gap:var(--cm-gap-item) var(--cm-gap-grid); margin-top:var(--cm-gap-block);
  }
  .hit{position:relative; cursor:default;}
  .hit-thumb{ display:none; } /* shown only on the mobile breakpoint */
  .hit-text{
    position:relative; z-index:2;
  }
  .hit h3{font-family:var(--cm-font-serif); font-weight:500; font-size:var(--cm-type-h3); margin:0 0 var(--cm-space-2);}
  .hit p{color:var(--cm-text-secondary); font-size:var(--cm-type-body-sm); line-height:var(--cm-lead-body); margin:0; max-width:38ch;}
  .hit .tagline{font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-xs); color:var(--cm-text-tertiary); margin-bottom:6px; display:block;}

  /* ---------- IMAGE LABEL VOICE ----------
     Every label that sits ON an image — the work hover preview, the mobile
     work thumbnails, the feature plate, and the Field Notes cursor tag — reads
     as one voice, keyed to .tagline above ("token framework", "creative
     automation"). They had drifted to four different sizes including a raw
     10.5px, which is what made them feel unrelated.

     text-transform rather than rewriting the copy: several of these strings are
     pulled from <h3> titles at runtime by hover-preview.js, so the casing has
     to be enforced in CSS or it only half-applies. */
  .hover-preview .cap,
  .hit-thumb-cap,
  .feature-plate .cap,
  .field-tag{
    font-family:var(--cm-font-mono);
    font-size:var(--cm-type-mono-xs);
    letter-spacing:normal;
    text-transform:lowercase;
  }
  .hover-preview{
    position:fixed; top:0; left:0; z-index:5;
    width:200px; height:260px; border-radius:var(--cm-radius-xs);
    pointer-events:none; opacity:0;
    transform:translate(-50%,-50%) scale(0.96);
    transition:opacity var(--cm-dur-slow) ease, transform var(--cm-dur-slow) ease;
    box-shadow:var(--cm-shadow-strong);
    overflow:hidden;
  }
  .hover-preview.is-visible{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .hover-preview .plate-fill{width:100%; height:100%; position:absolute; inset:0;}
  .hover-preview .icon-layer{
    width:100%; height:100%; position:absolute; inset:0;
    background-repeat:no-repeat; background-position:center; background-size:72px 72px;
    display:none;
  }
  .hover-preview .preview-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; display:none; pointer-events:none;
  }
  .hover-preview .cap{
    position:absolute; left:10px; bottom:10px; color:var(--cm-text-on-plate);
    opacity:0.85;
  }
  .feature-plate{
    grid-row: span 3; border-radius:var(--cm-radius-sm); overflow:hidden;
    background:linear-gradient(150deg, var(--cm-plate-from), var(--cm-plate-to)); position:relative; min-height:340px;
  }
  .feature-plate .cap{
    position:absolute; left:var(--cm-space-4); bottom:var(--cm-space-4); color:var(--cm-text-on-plate);
    opacity:0.85;
  }

  .clients-line{
    margin-top:var(--cm-gap-item); padding-top:var(--cm-space-6); border-top:1px solid var(--cm-rule);
    display:flex; flex-wrap:wrap; gap:10px var(--cm-space-6); align-items:baseline;
  }
  .clients-line span{font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-sm); color:var(--cm-text-secondary);}
  .clients-line .label{color:var(--cm-text-tertiary); margin-right:var(--cm-space-2);}
  .clients-marquee{ display:none; } /* shown only on the mobile breakpoint */

  /* ---------- SHOWCASE MARQUEE (infinite horizontal loop, pxpush-style) ---------- */
  .showcase{
    margin-top:var(--cm-space-15); padding:0 0 var(--cm-space-11);
    overflow:hidden;
    /* full-bleed break-out: escapes the centered .wrap container regardless of
       where this section sits in the page, rather than being confined to it */
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
  }
  .showcase-divider{max-width:var(--cm-wrap-max); margin:0 auto var(--cm-gap-block); padding:0 var(--cm-inset-page); position:relative; z-index:1;}
  .showcase-divider div{border-top:1px solid var(--cm-rule);}
  @media (max-width:900px){ .showcase-divider{padding:0 var(--cm-space-5);} }
  .showcase-scale{width:100%;}
  .showcase-loop{
    display:flex; align-items:center; gap:var(--cm-space-6);
    width:max-content;
    will-change:transform;
  }
  .showcase-item{
    height:460px; flex:0 0 auto; margin:0; overflow:hidden; border-radius:var(--cm-radius-xl);
    box-shadow:var(--cm-shadow-soft);
  }
  .showcase-item img{
    height:100%; width:auto; display:block; user-select:none;
  }
  @media (max-width:860px){
    .showcase-item{height:220px;}
  }


  /* ---------- IMPACT / STATS ---------- */
  .stat-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--cm-gap-grid); margin-top:var(--cm-gap-block);}
  .stat-num{font-family:var(--cm-font-serif); font-weight:500; font-size:var(--cm-type-stat); line-height:1; color:var(--cm-text-primary);}
  .stat-label{font-family:var(--cm-font-serif); font-weight:500; font-size:var(--cm-type-body); margin-top:var(--cm-space-3);}
  .stat-desc{color:var(--cm-text-secondary); font-size:var(--cm-type-body-xs); line-height:var(--cm-lead-body); margin-top:var(--cm-space-2); max-width:32ch;}
  .highlight-list{border-top:1px solid var(--cm-rule);}
  .highlight-frame{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--cm-gap-grid); margin-top:var(--cm-gap-block);}
  .highlight-blank{grid-column:1;}
  .highlight-list{grid-column:2 / 4;}
  @media (max-width:860px){
    .highlight-frame{grid-template-columns:1fr;}
    .highlight-blank{display:none;}
  }
  .highlight-row{
    display:block; padding:var(--cm-space-4) 0; border-bottom:1px solid var(--cm-rule); font-size:var(--cm-type-body);
  }
  .cta-row{margin-top:var(--cm-gap-item);}

  /* ---------- OPEN PHOTO SCATTER ---------- */
  .field{padding:var(--cm-space-12) 0 var(--cm-space-14); display:flow-root;}
  .field-scatter{display:flex; flex-direction:column;}
  .scatter-item{
    display:block; margin:0; border-radius:var(--cm-radius-md); overflow:hidden;
    background:linear-gradient(155deg, var(--cm-photo-from), var(--cm-photo-to));
    will-change:transform;
  }
  .scatter-item img{width:100%; height:auto; display:block;}
  .scatter-item.size-sm{width:260px;}
  .scatter-item.size-md{width:340px;}
  .scatter-item.size-lg{width:460px;}
  .scatter-item.align-left{align-self:flex-start;}
  .scatter-item.align-right{align-self:flex-end;}
  .scatter-item.align-center{align-self:center;}

  .field-note{
    max-width:28ch; font-family:var(--cm-font-serif); font-style:italic;
    font-size:var(--cm-type-note); line-height:var(--cm-lead-body);
    color:var(--cm-text-secondary); align-self:flex-start; text-align:left;
  }

  /* ---------- FIELD NOTES GRID LINES (draws/undraws with scroll, same motif as header) ---------- */
  .field-gridline{
    position:absolute; z-index:0; pointer-events:none;
    opacity:0.55;
  }
  .field-gridline-left{ left:-60px; }
  .field-gridline-right{ right:-60px; }
  .grid-seg{
    stroke:var(--cm-accent); stroke-width:1; fill:none;
    vector-effect:non-scaling-stroke;
  }
  @media (max-width:860px){
    .field-gridline{display:none;}
  }

  /* ---------- FOOTER ---------- */
  footer{padding:var(--cm-space-13) 0 var(--cm-gap-block); border-top:1px solid var(--cm-rule); display:flow-root;}
  .footer-grid{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--cm-space-5);}
  footer h3{font-family:var(--cm-font-serif); font-weight:500; font-size:var(--cm-type-lead); margin:0 0 var(--cm-space-1);}
  .footer-links{display:flex; gap:var(--cm-space-6);}
  .footer-links a{color:var(--cm-text-primary); font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-md); text-decoration:none; opacity:0.75;}
  .footer-links a:hover{opacity:1;}
  .wink{margin-top:var(--cm-space-6); font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs); color:var(--cm-text-secondary); opacity:0.55;}

  @media (max-width:900px){
    .wrap{padding:0 var(--cm-inset-page-sm);}
    .hero-eyebrow{margin-bottom:22px;}
    .hero-sketch{left:-20%;}
    .hero-underlay{left:-20%;}
    .hero-line-2{white-space:normal;}
    .quick-grid{grid-template-columns:1fr;}
    .feature-plate{grid-row:auto; min-height:220px;}
    .stat-grid{grid-template-columns:1fr;}
    .stroke-svg{display:none;}
    .field-scatter{gap:var(--cm-space-8);}
    .scatter-item{width:100% !important; align-self:stretch !important;}
    .field-note{text-align:left;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  /* =====================================================================
     MOBILE BREAKPOINT (<=768px) ONLY -- do not adjust tablet/desktop above
     ===================================================================== */
  @media (max-width:768px){

    /* ---- 1 & 2: Hero -- doubled type, left-justified, bottom-left anchored ---- */
    .hero-inner{
      position:absolute;
      top:auto; left:var(--cm-space-5); right:var(--cm-space-5);
      bottom:var(--cm-hero-bottom-m);
      transform:none;
      align-items:stretch;
      text-align:left;
    }
    .hero-eyebrow{
      position:relative;
      z-index:0;
      display:block;
      width:fit-content;
      text-align:left;
      margin-bottom:20px;
    }
    .hero-eyebrow::before{
      content:'';
      position:absolute;
      z-index:-1;
      inset:-10px -16px;
      /* Radial rather than a flat fill: the centre carries enough of the
         surface colour to keep the eyebrow legible over the portrait line art,
         and it falls to fully transparent at the edges so there is no visible
         box. Colour comes from --cm-scrim, which tracks theme AND tone. */
      background:radial-gradient(ellipse at center,
                 var(--cm-scrim) 0%, var(--cm-scrim) 55%, transparent 100%);
      filter:blur(6px);
      -webkit-backdrop-filter:blur(4px);
      backdrop-filter:blur(4px);
    }
    .hero-eyebrow-highlight{
      display:block;
    }
    .hero-line-1{
      font-size:var(--cm-type-hero-1-m);
      text-align:left;
    }
    .hero-line-2{
      font-size:var(--cm-type-hero-2-m);
      text-align:left;
      white-space:normal;
      overflow-wrap:break-word;
      -webkit-hyphens:auto;
      hyphens:auto;
    }
    /* keep the portrait line-art clear of the new bottom-left text block */
    .hero-sketch, .hero-underlay{
      top:35%; height:85%;
    }

    /* ---- 3: client list as a single-line, left-to-right running ticker ---- */
    .word-break .clients-static{ display:none; }
    .clients-marquee{
      display:block; overflow:hidden; margin-top:var(--cm-space-2);
      /* full-bleed: break out of the .wrap side margins to reach the viewport edge */
      width:100vw; position:relative; left:50%; right:50%;
      margin-left:-50vw; margin-right:-50vw;
    }
    .clients-marquee-track{
      display:inline-flex; width:max-content;
      animation:clients-scroll 18s linear infinite;
    }
    .clients-marquee-track span{ white-space:nowrap; }
    @keyframes clients-scroll{
      from{ transform:translateX(0%); }
      to{ transform:translateX(-50%); }
    }

    /* ---- 4: work items -- always-on full-width thumbnail per entry ---- */
    /* !important needed: the quick-grid has an inline style="grid-template-columns:..."
       on this element that otherwise wins over any external stylesheet rule */
    .quick-grid{ grid-template-columns:1fr !important; }
    #hover-preview{ display:none !important; }
    /* speed-up button: always visible, static, centered below the gallery on touch */
    #speedup-btn{
      position:static;
      display:flex; align-items:center; justify-content:center;
      opacity:1; pointer-events:auto;
      transform:none !important;
      margin:var(--cm-gap-item) auto 0;
      width:fit-content;
    }
    /* showcase's own bottom padding provides both the "below" gap AND
       a big enough buffer to contain the button's box-shadow (needs
       ~34px) before hitting showcase's overflow:hidden clip edge --
       the shared .section padding-bottom (100px) is zeroed out here so
       it doesn't add on top and push the divider line further away */
    .showcase{ padding-bottom:var(--cm-gap-item); }
    #work{ padding-bottom:0; }
    .hit-thumb{
      display:block; position:relative; width:100%;
      aspect-ratio:2.397 / 1; overflow:hidden; border-radius:var(--cm-radius-lg);
      margin-bottom:18px; background:var(--cm-plate-to);
    }
    .hit-thumb img, .hit-thumb video{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .hit-thumb-placeholder .hit-thumb-icon{
      position:absolute; top:50%; left:50%; width:72px; height:72px;
      transform:translate(-50%,-50%); object-fit:contain; opacity:0.2;
    }
    .hit-thumb-placeholder .hit-thumb-contain{
      width:100%; height:100%; object-fit:contain; padding:var(--cm-space-5);
    }
    .hit-thumb-cap{
      position:absolute; left:var(--cm-space-3); bottom:10px; color:var(--cm-text-on-plate);
      opacity:0.85;
    }
    .nda-tag{ display:block; }

    /* ---- 1b: section headlines need real air under the divider ----
       .word-break's shared padding-top (--cm-space-8 = 40/28) reads fine on
       desktop but crowds "work." and "leadership." against the rule above them
       at this width. A larger step keeps it density-driven: 60 comfortable /
       40 compact, so even compact now matches what desktop calls comfortable. */
    .word-break{ padding-top:var(--cm-space-11); }

    /* ---- 2b: the pull-quote sits between two photos and must read as
       centred between them. The inline style="margin-top:100px" in the markup
       is asymmetric against the flex gap below it, so both margins are set
       equal here; the .field-scatter gap then adds the same amount either
       side. !important is required to beat the inline style. */
    .field-note{
      margin-top:var(--cm-space-6) !important;
      margin-bottom:var(--cm-space-6) !important;
    }

    /* ---- 5: work gallery marquee -- taller cards, tighter corners ---- */
    .showcase-item{ height:320px; border-radius:var(--cm-radius-lg); }

    /* ---- 6: leadership highlight list -- full width, no desktop offset ---- */
    .highlight-list{ grid-column:1; }

    /* ---- 7: field notes -- static, uniform, single-column stacked gallery ---- */
    .field-scatter{ gap:30px; }
    .scatter-item{
      transform:none !important;
      margin-top:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
      /* crop every photo to match field-p1's proportions (920x676) for a uniform card height */
      aspect-ratio:920 / 676;
    }
    .scatter-item img{
      width:100%; height:100%; object-fit:cover;
    }
    /* pin these two crops to the top instead of the default center */
    .scatter-item img[src*="moses"],
    .scatter-item img[src*="duomo"]{
      object-position:center top;
    }
  }

  /* =====================================================================
     DISPLAY CONTROLS — fixed corner cluster driving the token layers.
     Markup is generated by js/theme-controls.js. Uses Layer-2 roles only,
     so it re-themes with everything else.
     ===================================================================== */
  .tc{
    position:fixed; right:var(--cm-space-5); z-index:60;
    /* safe-area inset keeps it off the iOS home indicator */
    bottom:calc(var(--cm-space-5) + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; align-items:flex-end; gap:var(--cm-space-2);
    font-family:var(--cm-font-mono);
    /* The container is only a positioning frame. Since the panel now keeps its
       box even when closed, an interactive .tc would leave a ~256x263px dead
       zone over the bottom-right of the page. Children opt back in. */
    pointer-events:none;

  }

  /* Layer promotion, POINTER DEVICES ONLY.
     Without it the browser repaints this fixed element every scroll frame,
     including the trigger's 40px-blur shadow — so when a 1px rule (the
     hero/work divider) scrolls through that shadow the two composite at
     fractional offsets and shimmer.

     But on iOS Safari a transform on a position:fixed element makes it drift
     against the dynamic toolbar: scrolling down it detaches and floats mid
     screen, re-anchoring only when the toolbars return on scroll up. The
     flicker is a desktop-only symptom, so the fix is scoped to devices with a
     real pointer and touch keeps plain fixed positioning. */
  @media (hover: hover) and (pointer: fine) {
    .tc{
      will-change:transform;
      transform:translateZ(0);
    }
  }
  .tc__trigger{
    display:inline-flex; align-items:center; gap:var(--cm-space-2);
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs);
    letter-spacing:var(--cm-tracking-wide); text-transform:uppercase;
    color:var(--cm-text-secondary);
    background:var(--cm-surface-raised);
    border:1px solid var(--cm-rule); border-radius:var(--cm-radius-pill);
    padding:var(--cm-pad-trigger-y) var(--cm-pad-trigger-x); cursor:pointer;
    pointer-events:auto;
    box-shadow:var(--cm-shadow-soft);
    transition:color var(--cm-dur-fast) var(--cm-ease), border-color var(--cm-dur-fast) var(--cm-ease),
               padding var(--cm-dur-theme) var(--cm-ease);
  }
  .tc__trigger:hover{ color:var(--cm-text-primary); }
  .tc__trigger:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:2px; }
  .tc__name--short{ display:none; }
  .tc__dot{
    width:8px; height:8px; border-radius:var(--cm-radius-pill);
    background:var(--cm-accent); flex:0 0 auto;
  }

  /* The panel keeps its box in the layout at ALL times and is hidden with
     opacity/visibility rather than display:none.

     Why: collapsing it used to shrink .tc from 312px to 37px in a single frame.
     Because the auto-collapse fires *during* a scroll, the browser was tearing
     down a 267px shadowed, backdrop-filtered fixed layer while compositing that
     scroll — which read as the panel flickering away below the fold. Holding the
     box constant means the collapse is a pure opacity change with no reflow.

     visibility (not just opacity) so it leaves the a11y tree and cannot be
     tabbed to; the delayed visibility transition lets the fade finish first. */
  .tc__panel{
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(4px) scale(0.985);
    transition:opacity var(--cm-dur-base) var(--cm-ease),
               transform var(--cm-dur-base) var(--cm-ease),
               visibility 0s linear var(--cm-dur-base);
    order:-1; /* opens upward, above the trigger */
    display:flex; flex-direction:column; gap:var(--cm-gap-tight);
    background:var(--cm-surface-raised);
    border:1px solid var(--cm-rule); border-radius:var(--cm-radius-lg);
    padding:var(--cm-pad-panel); min-width:212px;
    box-shadow:var(--cm-shadow-strong);
  }
  .tc[data-open="true"] .tc__panel{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none;
    transition:opacity var(--cm-dur-base) var(--cm-ease),
               transform var(--cm-dur-base) var(--cm-ease),
               visibility 0s linear 0s;
  }
  .tc__label{
    margin:0 0 var(--cm-space-2); font-family:var(--cm-font-mono);
    font-size:var(--cm-type-mono-2xs); letter-spacing:var(--cm-tracking-wide);
    text-transform:uppercase; color:var(--cm-text-secondary); opacity:0.75;
  }
  .tc__seg{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--cm-space-1);
    border:1px solid var(--cm-rule); border-radius:var(--cm-radius-pill);
    padding:3px;
  }
  .tc__opt{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs);
    color:var(--cm-text-secondary); background:transparent;
    border:0; border-radius:var(--cm-radius-pill);
    padding:var(--cm-pad-control-y) var(--cm-pad-control-x); cursor:pointer; white-space:nowrap;
    transition:background var(--cm-dur-fast) var(--cm-ease), color var(--cm-dur-fast) var(--cm-ease),
               padding var(--cm-dur-theme) var(--cm-ease);
  }
  .tc__opt:hover{ color:var(--cm-text-primary); }
  .tc__opt:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:1px; }
  .tc__opt[aria-checked="true"]{
    background:var(--cm-btn-invert-fill); color:var(--cm-btn-invert-text);
  }

  /* Iconography — Lucide geometry inlined by theme-controls.js. Sized and
     weighted to match the Origin prototype (13px at 2.25 stroke). */
  .tc__icon{
    width:var(--cm-icon-size); height:var(--cm-icon-size);
    stroke-width:var(--cm-icon-stroke);
    flex:0 0 auto; pointer-events:none;
  }
  .tc__opt{ gap:4px; }
  /* Temperature glyphs keep their tint in both states so the pair reads at a
     glance; every other icon rides currentColor. */
  .tc__icon--warm{ color:var(--cm-icon-warm); }
  .tc__icon--cold{ color:var(--cm-icon-cold); }
  .tc__opt[aria-checked="true"] .tc__icon--warm,
  .tc__opt[aria-checked="true"] .tc__icon--cold{ color:inherit; }

  .tc__chevron{
    margin-left:2px;
    transition:transform var(--cm-dur-base) var(--cm-ease);
  }
  /* points up when closed (the panel opens upward), flips when open */
  .tc[data-open="true"] .tc__chevron{ transform:rotate(180deg); }

  @media (max-width:768px){
    /* clear of .hero-inner, which is anchored at bottom:100px on mobile */
    .tc{ right:var(--cm-space-4);
         bottom:calc(var(--cm-space-4) + env(safe-area-inset-bottom, 0px)); }
    /* "Token Editor" is a 171px pill at 375px and runs into the fixed SCROLL
       cue, so the short form takes over below this breakpoint. */
    .tc__name--full{ display:none; }
    .tc__name--short{ display:inline; }
    .tc__panel{ min-width:0; width:min(74vw, 260px); }
  }
  @media (prefers-reduced-motion: reduce){
    .tc__trigger, .tc__opt, .tc__chevron{ transition:none; }
    .tc__panel, .tc[data-open="true"] .tc__panel{ transition:none; }
  }

  /* =====================================================================
     FIELD NOTES — cursor-pinned photo tag.
     Same interaction model as the work section's #hover-preview: a single
     element follows the pointer and swaps its text per photo. Copy lives in
     data-note="" on each .scatter-item so it can be edited in the markup.
     ===================================================================== */
  .field-tag{
    position:fixed; top:0; left:0; z-index:6;
    /* above .hover-preview (5), below .speedup-btn (20) */
    pointer-events:none; opacity:0;
    line-height:1.3; white-space:nowrap;
    color:var(--cm-tag-foreground); background:var(--cm-tag-surface);
    padding:6px 10px; border-radius:var(--cm-radius-sm);
    /* -82%/-82% puts the cursor at the tag's lower-right, the same anchoring
       the Lightspeed button uses — it tucks against the pointer instead of
       floating centred above it. */
    transform:translate(-82%, -82%) scale(0.9);
    transition:opacity var(--cm-dur-base) var(--cm-ease),
               transform var(--cm-dur-base) var(--cm-ease);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  }
  .field-tag.is-visible{ opacity:1; transform:translate(-82%, -82%) scale(1); }

  @media (max-width:768px){
    /* no pointer to pin to, and the photos are full-width here anyway */
    .field-tag{ display:none !important; }
  }
  @media (prefers-reduced-motion: reduce){
    .field-tag{ transition:opacity var(--cm-dur-fast) linear; }
  }

  /* ---- custom colour inputs (inside the Temperature group) ---------------- */
  .tc__pick{
    display:none;                       /* only while Custom is the active tone */
    align-items:center; gap:var(--cm-space-2);
    margin-top:var(--cm-space-2);
  }
  .tc[data-tone-custom="true"] .tc__pick{ display:flex; }
  .tc__pick-swatch{
    position:relative; flex:0 0 auto;
    width:26px; height:26px; border-radius:var(--cm-radius-sm);
    border:1px solid var(--cm-rule); overflow:hidden; cursor:pointer;
  }
  /* The native swatch is scaled up and clipped by the label, so the control
     reads as a flat chip instead of the browser's default bevelled button. */
  .tc__pick-swatch input[type="color"]{
    position:absolute; inset:-25%; width:150%; height:150%;
    padding:0; border:0; background:none; cursor:pointer;
  }
  .tc__pick-hex{
    flex:1 1 auto; min-width:0;
    font-family:var(--cm-font-mono); font-size:var(--cm-type-mono-2xs);
    text-transform:uppercase; letter-spacing:0.06em;
    color:var(--cm-text-primary); background:var(--cm-surface-page);
    border:1px solid var(--cm-rule); border-radius:var(--cm-radius-sm);
    padding:6px 8px;
  }
  .tc__pick-hex:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:1px; }
  .tc__pick-hex.is-invalid{ border-color:var(--cm-icon-warm); }