/* ============================================================
     feldstark.com — design directions demo
     One homepage, four skins:
       A · Product OS      (light, bento, refined SaaS)
       B · Kinetic Editorial (bold oversized type + brand marquee)
       C · Warm Editorial  (serif, cream, senior/advisory)
       D · Opus / Neural   (dark, gradient glows, glass, particle field)
     + light/dark toggle (A/B/C). D is dark-native.
     Self-contained: system fonts only, no external assets.
     Content: abstracted from CV 2021 (marquee brands + real projects + awards).
     ============================================================ */

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0}
  a{color:inherit}
  img{max-width:100%}
  .grad{color:var(--accent)}

  /* ---- tooling chrome (theme-neutral) ---- */
  .toolbar{position:fixed;top:0;left:0;right:0;height:46px;z-index:200;display:flex;align-items:center;gap:14px;
    padding:0 16px;background:#141416;color:#e9e9ea;border-bottom:1px solid rgba(255,255,255,.1);
    font:500 13px/1 ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
  .toolbar .brand{font-weight:700;opacity:.9}
  .toolbar .seg{display:inline-flex;border:1px solid rgba(255,255,255,.22);border-radius:7px;overflow:hidden}
  .toolbar .seg button{appearance:none;border:0;background:transparent;color:#cfcfd2;padding:7px 12px;font:inherit;
    cursor:pointer;border-right:1px solid rgba(255,255,255,.14)}
  .toolbar .seg button:last-child{border-right:0}
  .toolbar .seg button[aria-pressed="true"]{background:#f4f4f5;color:#141416}
  .toolbar .label{opacity:.7;font-size:12px}
  .toolbar .spacer{flex:1}
  .toolbar .mode{appearance:none;border:1px solid rgba(255,255,255,.22);background:transparent;color:#e9e9ea;
    border-radius:7px;padding:7px 12px;cursor:pointer;font:inherit}
  @media (max-width:680px){.toolbar .label{display:none}}

  /* ---- stage ---- */
  .stage{position:relative;min-height:100vh;background:var(--paper);color:var(--ink);
    font-family:var(--font-body);transition:background .3s,color .3s}
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px);position:relative;z-index:1}
  .rule{height:1px;background:var(--hair);border:0;margin:0}
  #neural{display:none;position:absolute;inset:0 0 auto 0;width:100%;height:620px;z-index:0;opacity:.6;pointer-events:none}

  /* ---- shared components (restyled per theme) ---- */
  .site-nav{display:flex;align-items:baseline;justify-content:space-between;padding:22px 0}
  .site-nav .logo{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:17px;display:flex;align-items:center;gap:9px}
  .site-nav .logo .d{display:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
  .site-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-size:15px}
  .site-nav a{text-decoration:none;opacity:.82}
  .site-nav a:hover{opacity:1}
  .site-nav a:focus-visible,.btn:focus-visible,a.inline:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 38%,transparent);outline-offset:4px;border-radius:4px}

  .hero{padding:clamp(46px,8vw,104px) 0 clamp(34px,5vw,60px)}
  .eyebrow{font:600 12px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
    margin:0 0 20px;display:flex;align-items:center;gap:10px}
  .eyebrow .dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 12px var(--accent);animation:pulse 2.4s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .hero-title{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(34px,6.6vw,78px);
    line-height:var(--dlh);letter-spacing:var(--dls);margin:0 0 26px;max-width:16ch}
  .hero-line{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.9vw,23px);line-height:1.4;color:var(--ink);max-width:44ch;margin:0 0 14px;letter-spacing:-.01em}
  .hero-sub{font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:58ch;margin:0 0 32px}
  .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .btn{text-decoration:none;font-size:15px;padding:13px 22px;border-radius:var(--radius);border:1px solid var(--ink);display:inline-block;transition:.16s}
  .btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn.ghost{background:transparent;border-color:var(--hair)}
  .btn:hover{transform:translateY(-1px)}
  .btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
  .stat.mid .n{color:var(--accent)}
  .stat{padding:18px 18px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface)}
  .stat .n{font:750 clamp(22px,2.4vw,30px)/1 var(--font-display);letter-spacing:-.02em}
  .stat .l{font-size:12.5px;color:var(--muted);margin-top:7px}

  /* client roster / marquee */
  .clients{padding:clamp(26px,4vw,46px) 0}
  .client-line{margin:0;font-size:clamp(16px,1.7vw,20px);line-height:1.5}
  .client-line strong{font-weight:650}
  .marquee{display:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee .track{display:inline-flex;align-items:center;gap:80px;white-space:nowrap;animation:scroll 42s linear infinite;padding-right:80px}
  .marquee img{height:47px;width:auto;display:block;opacity:.8}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}
  [data-mode="dark"] .m-clients img,[data-theme="d"] .m-clients img{filter:brightness(0) invert(1);opacity:.75}

  /* awards slider (variant, all themes) — badges on light chips, never inverted */
  .marquee.m-awards{display:block;padding:6px 0}
  .m-awards .track{gap:28px;padding-right:28px;animation:scroll 58s linear infinite reverse}
  .m-awards .aw{flex:0 0 auto;display:flex;align-items:center;background:#fff;border:1px solid rgba(12,18,28,.14);border-radius:16px;padding:14px 22px}
  .m-awards img{height:94px;width:auto;display:block;opacity:1}

  .section{padding:clamp(40px,5.5vw,72px) 0}
  .sec-label{font:600 12px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0 0 28px}

  /* pillars */
  .pillars{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2.4vw,26px)}
  .pillar{grid-column:span 2}
  .pillar.w2{grid-column:span 3}
  .pillar{padding:var(--cardpad);border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);transition:.18s}
  .pillar:hover{transform:translateY(-3px)}
  .pillar .ic{display:none;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;margin-bottom:16px;
    background:color-mix(in srgb,var(--pc) 16%,transparent);border:1px solid color-mix(in srgb,var(--pc) 42%,transparent)}
  .pillar .ic svg{width:21px;height:21px;stroke:var(--pc);fill:none;stroke-width:1.7}
  .pillar .idx{display:block;font:600 12px/1 var(--font-mono);color:var(--accent);margin-bottom:12px}
  .pillar h3{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(18px,2vw,23px);margin:0 0 9px;letter-spacing:-.01em}
  .pillar p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

  /* work */
  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px)}
  .work-card{padding:var(--cardpad);border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface);transition:.18s}
  .work-card:hover{transform:translateY(-3px)}
  .work-card .m{font:600 11.5px/1.5 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
  .work-card h4{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(17px,1.8vw,21px);margin:0 0 8px;letter-spacing:-.01em}
  .work-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.58}

  /* awards */
  .awards{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
  .awards span{font-size:14.5px;color:var(--muted)}
  .awards strong{color:var(--ink);font-weight:600}

  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
  .two-col h2{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(24px,3vw,38px);margin:0 0 14px;letter-spacing:-.01em;line-height:1.12}
  .two-col p{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.62}
  p.hiw-lead{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,25px);line-height:1.42;color:var(--ink);letter-spacing:-.01em;margin:0}
  .hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(30px,4vw,52px)}
  .hiw-item{border-top:1px solid var(--hair);padding-top:20px}
  .hiw-item .idx{display:block;font:600 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.12em;margin-bottom:12px}
  .hiw-item h3{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(17px,1.8vw,21px);margin:0 0 8px;letter-spacing:-.01em}
  .hiw-item p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
  a.inline{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}

  .site-foot{display:flex;justify-content:space-between;align-items:center;padding:34px 0 70px;font-size:14px;color:var(--muted);flex-wrap:wrap;gap:12px}
  .site-foot ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
  .site-foot a{text-decoration:none}

  @media (max-width:860px){
    .stats{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr}
    .pillar,.pillar.w2{grid-column:auto}
    .work{grid-template-columns:1fr}
    .two-col{grid-template-columns:1fr}
    .hiw{grid-template-columns:1fr;gap:22px}
  }

  @media (max-width:620px){
    .site-nav{align-items:flex-start;gap:18px}
    .site-nav ul{gap:14px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
    .site-foot{align-items:flex-start;flex-direction:column}
  }

  /* ============================================================
     THEME A — Product OS (light, bento, indigo accent, depth)
     ============================================================ */
  [data-theme="a"]{
    --font-display:"Helvetica Neue",Inter,system-ui,-apple-system,Arial,sans-serif;
    --font-body:"Helvetica Neue",Inter,system-ui,-apple-system,Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
    --paper:#F5F6F8;--surface:#FFFFFF;--ink:#0E1116;--muted:#5A6472;--hair:rgba(12,18,28,.10);
    --accent:#5457FF;--dw:800;--dlh:1.02;--dls:-.025em;--radius:16px;--cardpad:22px 22px 24px;
  }
  [data-theme="a"][data-mode="dark"]{--paper:#0A0C10;--surface:#12151C;--ink:#F2F4F8;--muted:#98A2B2;--hair:rgba(255,255,255,.10);--accent:#8486FF}
  [data-theme="a"] .stage{background:radial-gradient(900px 480px at 82% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--paper)}
  [data-theme="a"] .hero-title .grad{background:linear-gradient(90deg,var(--accent),#9b6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
  [data-theme="a"] .btn{border-radius:999px}
  [data-theme="a"] .pillar .ic{display:flex}
  [data-theme="a"] .stat{box-shadow:0 1px 2px rgba(12,18,28,.04),0 8px 24px rgba(12,18,28,.05)}
  [data-theme="a"] .pillar,[data-theme="a"] .work-card{box-shadow:0 1px 2px rgba(12,18,28,.04)}
  [data-theme="a"] .client-line{display:none}
  [data-theme="a"] .marquee{display:block;padding:14px 0}

  /* ============================================================
     THEME B — Spectrum (vibrant future: animated aurora, gradient type, glass)
     ============================================================ */
  [data-theme="b"]{
    --font-display:"Helvetica Neue",Inter,system-ui,-apple-system,Arial,sans-serif;
    --font-body:"Helvetica Neue",Inter,system-ui,-apple-system,Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
    --paper:#FBFAFF;--surface:rgba(255,255,255,.66);--ink:#141220;--muted:#5B5568;--hair:rgba(20,18,32,.10);
    --glass:rgba(255,255,255,.66);--glassbd:rgba(255,255,255,.78);
    --accent:#7A5CFF;--g1:#7A5CFF;--g2:#12D8E6;--g3:#FF4DCE;--g4:#FFB020;
    --dw:800;--dlh:1.0;--dls:-.03em;--radius:18px;--cardpad:22px 22px 24px;
  }
  [data-theme="b"][data-mode="dark"]{
    --paper:#08060F;--ink:#F3F0FF;--muted:#a99fc0;--hair:rgba(255,255,255,.12);
    --glass:rgba(255,255,255,.055);--glassbd:rgba(255,255,255,.14);
  }
  [data-theme="b"] .stage{overflow:hidden}
  [data-theme="b"] .stage::before{content:"";position:absolute;z-index:0;top:-160px;left:-10%;right:-10%;height:1150px;pointer-events:none;
    background:
      radial-gradient(38% 40% at 18% 26%,color-mix(in srgb,var(--g1) 62%,transparent),transparent 70%),
      radial-gradient(36% 38% at 80% 16%,color-mix(in srgb,var(--g2) 56%,transparent),transparent 70%),
      radial-gradient(46% 46% at 62% 64%,color-mix(in srgb,var(--g3) 52%,transparent),transparent 72%),
      radial-gradient(34% 36% at 28% 82%,color-mix(in srgb,var(--g4) 46%,transparent),transparent 72%);
    filter:blur(74px) saturate(1.3);opacity:.92;
    animation:aurora 20s ease-in-out infinite alternate}
  @keyframes aurora{
    0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
    50%{transform:translate3d(2%,-1.5%,0) scale(1.16) rotate(7deg)}
    100%{transform:translate3d(-2%,1.5%,0) scale(1.06) rotate(-6deg)}}
  @media (prefers-reduced-motion:reduce){[data-theme="b"] .stage::before{animation:none}}
  [data-theme="b"] .eyebrow{color:var(--accent)}
  [data-theme="b"] .hero-title .grad{background:linear-gradient(100deg,var(--g1),var(--g2) 34%,var(--g3) 68%,var(--g4));
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 9s linear infinite}
  @keyframes hue{to{background-position:220% 0}}
  [data-theme="b"] .btn{border-radius:999px}
  [data-theme="b"] .btn.primary{background:linear-gradient(100deg,var(--g1),var(--g3));border:0;color:#fff;box-shadow:0 10px 34px color-mix(in srgb,var(--g1) 45%,transparent)}
  [data-theme="b"] .btn.primary:hover{box-shadow:0 12px 46px color-mix(in srgb,var(--g3) 50%,transparent)}
  [data-theme="b"] .btn.ghost{background:var(--glass);backdrop-filter:blur(10px);border-color:var(--glassbd)}
  [data-theme="b"] .stat{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glassbd);box-shadow:0 10px 34px rgba(20,18,32,.08)}
  [data-theme="b"] .stat.mid{background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 18%,var(--glass)),color-mix(in srgb,var(--g3) 18%,var(--glass)));border-color:color-mix(in srgb,var(--g1) 42%,transparent)}
  [data-theme="b"] .stat.mid .n{background:linear-gradient(100deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
  [data-theme="b"] .client-line{display:none}
  [data-theme="b"] .marquee{display:block;padding:18px 0}
  [data-theme="b"] .sec-label{color:var(--accent)}
  [data-theme="b"] .pillar{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glassbd);box-shadow:0 10px 34px rgba(20,18,32,.07)}
  [data-theme="b"] .pillar .ic{display:flex;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 30%,transparent),transparent);border-color:color-mix(in srgb,var(--pc) 55%,transparent)}
  [data-theme="b"] .pillar .idx{display:none}
  [data-theme="b"] .pillar:hover{transform:translateY(-4px);box-shadow:0 20px 48px color-mix(in srgb,var(--pc) 24%,transparent)}
  [data-theme="b"] .work-card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glassbd);box-shadow:0 10px 34px rgba(20,18,32,.07)}
  [data-theme="b"] .work-card .m{color:var(--accent)}
  [data-theme="b"] .work-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px color-mix(in srgb,var(--g1) 22%,transparent)}

  /* ============================================================
     THEME C — Warm Editorial (serif, cream, centered, senior)
     ============================================================ */
  [data-theme="c"]{
    --font-display:Charter,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --font-body:system-ui,"Helvetica Neue",Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
    --paper:#F6F1E7;--surface:#FBF7EE;--ink:#1E1A16;--muted:#6E655A;--hair:rgba(20,17,14,.14);
    --accent:#9A4A2F;--dw:600;--dlh:1.08;--dls:-.005em;--radius:14px;--cardpad:22px 22px 24px;
  }
  [data-theme="c"][data-mode="dark"]{--paper:#17130E;--surface:#1E1912;--ink:#F0E7D8;--muted:#a89a86;--hair:rgba(255,255,255,.13);--accent:#D98A6A}
  [data-theme="c"] .hero{text-align:center}
  [data-theme="c"] .eyebrow{justify-content:center;font-family:var(--font-body);letter-spacing:.14em}
  [data-theme="c"] .hero-title{margin:0 auto 26px;max-width:19ch}
  [data-theme="c"] .hero-line{margin:0 auto 14px}
  [data-theme="c"] .hero-sub{margin:0 auto 32px}
  [data-theme="c"] .cta{justify-content:center}
  [data-theme="c"] .btn{border-radius:999px}
  [data-theme="c"] .stats{max-width:820px;margin-left:auto;margin-right:auto}
  [data-theme="c"] .stat{text-align:center;border:0;border-left:1px solid var(--hair);background:transparent;border-radius:0}
  [data-theme="c"] .sec-label{text-align:center;font-family:var(--font-display);font-style:italic;text-transform:none;letter-spacing:0;font-size:16px}
  [data-theme="c"] .pillar{text-align:center;border:0;background:transparent}
  [data-theme="c"] .pillar:hover{transform:none}
  [data-theme="c"] .pillar .idx{display:none}
  [data-theme="c"] .clients{text-align:center}
  [data-theme="c"] .client-line{font-family:var(--font-display);font-style:italic}
  [data-theme="c"] .awards{justify-content:center}

  /* ============================================================
     THEME D — Opus / Neural (dark, gradient glow, glass, particles)
     ported from ai_second_brain
     ============================================================ */
  [data-theme="d"]{
    --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-mono:"SF Mono",ui-monospace,Menlo,monospace;
    --paper:#070b12;--surface:rgba(255,255,255,.035);--ink:#e7edf7;--muted:#8a96ab;--hair:rgba(255,255,255,.09);
    --accent:#22d3ee;--dw:750;--dlh:1.04;--dls:-.02em;--radius:15px;--cardpad:16px 17px 18px;
  }
  [data-theme="d"] .stage{background:
      radial-gradient(1200px 700px at 15% -5%,rgba(124,131,255,.16),transparent 55%),
      radial-gradient(1100px 650px at 92% 6%,rgba(34,211,238,.12),transparent 55%),
      radial-gradient(900px 900px at 50% 118%,rgba(244,114,182,.09),transparent 55%),
      var(--paper)}
  [data-theme="d"] #neural{display:block}
  [data-theme="d"] .eyebrow{color:var(--accent)}
  [data-theme="d"] .eyebrow .dot{display:block}
  [data-theme="d"] .hero-title .grad{background:linear-gradient(100deg,var(--accent),#7c83ff 55%,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
  [data-theme="d"] .btn{border-color:var(--hair);backdrop-filter:blur(6px);border-radius:11px}
  [data-theme="d"] .btn.primary{background:linear-gradient(100deg,var(--accent),#7c83ff);border:0;color:#08101f;font-weight:650}
  [data-theme="d"] .stat,[data-theme="d"] .pillar,[data-theme="d"] .work-card{backdrop-filter:blur(3px)}
  [data-theme="d"] .pillar:hover,[data-theme="d"] .work-card:hover{border-color:var(--pc,var(--accent));box-shadow:0 14px 40px rgba(0,0,0,.4)}
  [data-theme="d"] .pillar .ic{display:flex}
  [data-theme="d"] .pillar .idx{display:none}
  [data-theme="d"] .client-line{display:none}
  [data-theme="d"] .marquee{display:block;padding:16px 0}
  [data-theme="d"] .rule{background:var(--hair)}

  /* ============================================================
     shared additions: font candidates, lede, about teaser, subpages
     ============================================================ */
  body[data-font="inter"]{--font-display:"Inter","Helvetica Neue",system-ui,Arial,sans-serif;--font-body:"Inter",system-ui,Arial,sans-serif}
  body[data-font="space"]{--font-display:"Space Grotesk","Helvetica Neue",system-ui,Arial,sans-serif;--font-body:"Inter",system-ui,Arial,sans-serif}

  .lede{padding:clamp(30px,4vw,54px) 0}
  .lede p{margin:0;font-size:clamp(17px,1.9vw,23px);line-height:1.6;max-width:62ch;color:var(--ink)}
  .lede .sec-label{margin-bottom:18px}

  .about-teaser{display:grid;grid-template-columns:150px 1fr;gap:clamp(22px,4vw,48px);align-items:start}
  .about-teaser img{width:100%;border-radius:14px;filter:grayscale(1)}
  .about-teaser h2{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(22px,2.6vw,32px);margin:0 0 12px;letter-spacing:-.01em;line-height:1.12}
  .about-teaser p{margin:0 0 12px;color:var(--muted);font-size:16px;line-height:1.62}

  .page-hero{padding:clamp(40px,6vw,80px) 0 clamp(26px,3.5vw,44px)}
  .page-hero .hero-title{font-size:clamp(30px,5vw,56px)}
  .about-head{display:grid;grid-template-columns:1fr 170px;gap:clamp(22px,4vw,56px);align-items:start}
  .about-head img{width:100%;border-radius:14px;filter:grayscale(1)}

  .work-card .role{font:600 11.5px/1.5 var(--font-mono);color:var(--accent);margin:10px 0 0}
  .foot-note{color:var(--muted);font-size:13.5px;margin:18px 0 0}

  @media (max-width:820px){
    .about-teaser{grid-template-columns:110px 1fr;gap:18px}
    .about-head{grid-template-columns:1fr}
    .about-head img{width:150px}
  }

  /* paragraph divider inside intro/lede blocks */
  .hero-sub p{margin:0}
  .p-div{display:block;margin:14px 0;color:var(--accent);font-size:15px;letter-spacing:.3em;line-height:1}

  /* inline pilcrow paragraph separator (run-on editorial style) */
  .pil{color:var(--accent);font-weight:650;margin:0 .22em;font-family:var(--font-display)}

  /* experience timeline (About) — editorial layout */
  .xp{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(18px,3.5vw,56px);padding:clamp(26px,3.5vw,46px) 0;align-items:start}
  .xp .yr{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(26px,3vw,42px);letter-spacing:-.02em;line-height:1.02}
  .xp .yr .to{color:var(--accent)}
  .xp .co{font:600 11.5px/1.6 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px}
  .xp .idx{font:600 11px/1 var(--font-mono);color:var(--accent);display:block;margin-bottom:12px}
  .xp h3{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(20px,2.4vw,30px);letter-spacing:-.015em;line-height:1.15;margin:0 0 12px;max-width:26ch}
  .xp p{margin:0;color:var(--muted);font-size:16px;line-height:1.65;max-width:60ch}
  .xp .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .xp .tag{font:600 11px/1 var(--font-mono);letter-spacing:.05em;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:6px 11px;white-space:nowrap}
  .xp:hover .idx{letter-spacing:.2em;transition:letter-spacing .25s}
  @media (max-width:820px){.xp{grid-template-columns:1fr;gap:12px}.xp .co{margin-top:4px}}

  /* lede typography: muted base, key phrases in full ink, diamond separators */
  .about-head .hero-sub{font-size:clamp(17px,1.9vw,23px);line-height:1.62}
  .hero-sub .hi{color:var(--ink);font-weight:600}
  .sep-d{display:inline-block;color:var(--accent);font-size:.5em;vertical-align:.24em;margin:0 1.1em}

  /* "now" suffix after open-ended year arrow */
  .xp .yr .now{font-size:.48em;font-weight:600;margin-left:.2em;vertical-align:.34em}

  /* work-card preview image slot */
  .work-card .shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin:0 0 16px;border:1px solid var(--hair);background:rgba(127,127,127,.06)}

  /* further-work chips (Work page) */
  .more-work{margin-top:clamp(28px,4vw,48px)}
  .more-work .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip-w{font-size:13.5px;line-height:1.3;padding:10px 15px;border:1px solid var(--hair);border-radius:999px;color:var(--muted);background:var(--surface)}
  .chip-w strong{color:var(--ink);font-weight:600}
  .chip-w.muted{border-style:dashed;background:transparent}
  /* legal pages */
  .legal-page{min-height:100vh;background:
    radial-gradient(900px 520px at 82% -8%,color-mix(in srgb,#7a5cff 18%,transparent),transparent 62%),var(--paper);
    color:var(--ink);font-family:var(--font-body);display:flex;flex-direction:column}
  .legal-wrap{width:min(880px,100%);margin:0 auto;padding:0 clamp(20px,5vw,64px);flex:1}
  .legal-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1px solid var(--hair)}
  .legal-nav .logo{font-family:var(--font-display);font-weight:700;font-size:17px;text-decoration:none}
  .legal-nav .back{color:var(--muted);font-size:14px;text-decoration:none}
  .legal-nav .back:hover{color:var(--accent)}
  .legal-content{padding:clamp(52px,8vw,90px) 0}
  .legal-content>h1{font-family:var(--font-display);font-size:clamp(38px,7vw,70px);line-height:1.02;letter-spacing:-.03em;margin:0 0 18px}
  .legal-content>h1 .grad{background:linear-gradient(100deg,var(--g1),var(--g2) 34%,var(--g3) 68%,var(--g4));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .legal-content .sec-label{color:var(--accent);margin-bottom:18px}
  .legal-content section{padding:32px 0;margin:0}
  .legal-content h2{font-family:var(--font-display);font-size:clamp(18px,2.2vw,23px);line-height:1.25;letter-spacing:-.01em;margin:0 0 12px}
  .legal-content p,.legal-content address{font:400 15.5px/1.72 var(--font-body);color:var(--muted);margin:0 0 12px}
  .legal-content address{font-style:normal}
  .legal-content a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
  .legal-content a:hover{border-bottom-color:var(--accent)}
  .legal-updated{font-size:13px!important}
  .legal-foot{width:min(880px,100%);margin:0 auto;padding:28px clamp(20px,5vw,64px) 44px;border-top:1px solid var(--hair);
    color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .legal-foot nav{display:flex;gap:20px;flex-wrap:wrap}
  .legal-foot a{color:inherit;text-decoration:none}
  .legal-foot a:hover,.legal-foot a[aria-current="page"]{color:var(--accent)}
  @media (max-width:560px){.legal-nav{align-items:flex-start;flex-direction:column}.legal-foot{flex-direction:column}}