:root{
      --bg:#101010; --ink:#101010; --ink-soft:rgba(16,16,16,.74);
      --paper:var(--card); --accent:var(--accent-prop, #F2F2F2); --accent-ink:#101010; --gold-deep:#FF3B30; --red:#FF3B30;
      --card:#1E1E1E; --bright:var(--red); --bright-ink:#FFFFFF;
      --dark:#101010; --dark-soft:#1A1A1A; --on-dark:#F2F2F2; --on-dark-soft:rgba(242,242,242,.66);
      --line:rgba(16,16,16,.14); --line-dark:rgba(242,242,242,.14);
      --radius-s:10px; --radius-m:16px; --radius-l:26px;
      --rail-w:222px;
      --ff-display:'Bricolage Grotesque', system-ui, sans-serif;
      --ff-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
      --ff-body:'Archivo', system-ui, sans-serif;
      --e-out:cubic-bezier(.16,1,.3,1);
      --e-inout:cubic-bezier(.87,0,.13,1);
    }
    *{box-sizing:border-box;}
    body{margin:0;background:var(--dark);color:var(--ink);font-family:var(--ff-body);-webkit-font-smoothing:antialiased;}
    a{color:inherit;text-decoration:none;}
    button{font-family:inherit;cursor:pointer;}
    ul{margin:0;padding:0;list-style:none;}
    h1,h2,h3{font-family:var(--ff-display);margin:0;line-height:1.02;letter-spacing:-0.01em;}
    p{margin:0;}
    svg{display:block;}

    /* ======================================================
       SCROLLYTELLING SHELL
       Each .scene is only scroll distance. Its .stage is fixed
       to the screen, so nothing slides: scrolling just plays
       the stage's animation (--q: 0 → 1) and cross-fades stages.
       ====================================================== */
    .page{position:relative;width:100%;--hp:0;}
    .bg-layer{position:fixed;inset:0;z-index:0;background:var(--dark);pointer-events:none;}
    .scenes{position:relative;z-index:1;}
    .scene{position:relative;--scene-bg:var(--dark);}
    .scene.is-bright{--scene-bg:var(--bright);}
    .stage{position:fixed;inset:0;display:flex;align-items:center;padding:40px 64px 40px calc(var(--rail-w) + 84px);
      opacity:var(--o, 0);visibility:hidden;pointer-events:none;
      --q:0;}
    .scene.is-live .stage{visibility:visible;}
    .scene.is-front .stage{pointer-events:auto;}
    .stage-inner{width:100%;max-width:1120px;margin:0 auto;
      transform:translateY(calc((.5 - var(--q)) * 36px - var(--out, 0) * 34px)) scale(calc(1 - var(--out, 0) * .02));}
    .dark{color:var(--on-dark);}
    .dark h2,.dark h3{color:var(--on-dark);}

    /* scroll-scrubbed entrance utility: --d = when it starts, --w = how long it takes */
    .sx{--t:clamp(0, (var(--q) - var(--d, 0)) / var(--w, .3), 1);
      --xo:clamp(0, (var(--out, 0) - max(0, .72 - var(--d, 0)) * .45) / .3, 1);
      --tv:calc(var(--t) * (1 - var(--xo)));
      opacity:var(--tv);transform:translateY(calc((1 - var(--tv)) * 40px));}
    .ln{display:block;overflow:hidden;padding-bottom:.06em;}
    .ln-in.sx{display:block;opacity:1;transform:translateY(calc((1 - var(--tv)) * 112%));}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;padding:6px 14px;background:rgba(255,255,255,.35);}
    .eyebrow.sx{opacity:1;transform:none;clip-path:inset(0 calc((1 - var(--tv)) * 100%) 0 0 round 99px);}
    .dark .eyebrow{color:var(--on-dark-soft);border-color:var(--line-dark);background:rgba(255,255,255,.05);}
    .head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
    .head h2{font-size:clamp(36px,4.2vw,58px);font-weight:700;}
    .lede{font-size:16.5px;line-height:1.55;color:var(--ink-soft);max-width:520px;}
    .dark .lede{color:var(--on-dark-soft);}

    /* loader */
    .loader{position:fixed;inset:0;z-index:600;background:var(--dark);display:flex;align-items:center;justify-content:center;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--e-inout) .15s;}
    .loader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none;}
    .loader-word{font-family:var(--ff-display);font-weight:800;white-space:nowrap;font-size:clamp(56px,12vw,180px);color:var(--accent);letter-spacing:-0.03em;animation:loaderIn 1s var(--e-out) both;}
    .loader-word sup{font-size:.25em;vertical-align:top;}
    @keyframes loaderIn{from{transform:translateY(40%) scale(.9);opacity:0;}to{transform:none;opacity:1;}}

    /* cursor */
    .cursor-dot{position:fixed;top:0;left:0;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;z-index:500;transform:translate3d(-200px,-200px,0) scale(0);will-change:transform;}

    /* ---------- rail (appears through the hero, driven by --hp) ---------- */
    .rail{position:fixed;top:20px;left:20px;bottom:20px;width:var(--rail-w);display:flex;flex-direction:column;gap:12px;z-index:100;pointer-events:none;
      --rp:clamp(0, (var(--hp) - .2) / .3, 1);opacity:var(--rp);transform:translateX(calc((1 - var(--rp)) * -40px));}
    .rail.is-on{pointer-events:auto;}
    .rail-piece{--t:clamp(0, (var(--hp) - .22 - var(--i) * .05) / .25, 1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 16px)) scale(calc(.92 + .08 * var(--t)));}
    .rail-card{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px;color:var(--ink);}
    .rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
    .brand-chip{background:var(--accent);color:var(--accent-ink);font-family:var(--ff-display);font-weight:700;font-size:12.5px;padding:7px 11px;border-radius:99px;white-space:nowrap;}
    .rail-icons{display:flex;gap:5px;flex:none;}
    .rail-icons a{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .3s, transform .3s var(--e-out);}
    .rail-icons a:hover{background:var(--accent);transform:scale(1.08);}
    .rail-icons svg{width:12px;height:12px;}
    .rail-stats{display:flex;gap:10px;}
    .stat-chip{flex:1;background:var(--dark);color:var(--on-dark);border-radius:var(--radius-m);padding:12px 10px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-dark);}
    .stat-chip b{font-family:var(--ff-display);font-size:18px;color:var(--accent);}
    .stat-chip small{font-size:10.5px;color:var(--on-dark-soft);line-height:1.2;}
    .rail-nav{display:flex;flex-direction:column;gap:5px;flex:1;overflow-y:auto;}
    .rail-link{--t:clamp(0, (var(--hp) - .3 - var(--i) * .035) / .2, 1);display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:var(--radius-s);font-size:13px;font-weight:600;color:var(--ink-soft);border:1px solid transparent;opacity:var(--t);transform:translateX(calc((1 - var(--t)) * -28px));transition:background .35s, color .35s;}
    .rail-link:hover{background:rgba(27,27,27,.06);color:var(--ink);}
    .rail-num{width:20px;height:20px;flex:none;border-radius:50%;border:1px solid currentColor;opacity:.5;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
    .rail-link.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
    .rail-link.is-active .rail-num{opacity:.85;}
    .marquee{overflow:hidden;padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
    .marquee-track{display:flex;width:max-content;animation:marquee 25s linear infinite;}
    .marquee-track span{font-size:12px;font-weight:700;color:var(--ink-soft);padding-right:22px;white-space:nowrap;}
    @keyframes marquee{to{transform:translateX(-50%);}}
    .rail-contact{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;padding:10px 12px;transition:background .3s;}
    .rail-contact:hover{background:var(--paper);}
    .rail-contact button{background:none;border:1px solid var(--line);border-radius:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .3s;}
    .rail-contact button:hover{background:var(--accent);}
    .rail-contact button svg{width:12px;height:12px;}
    .rail-cta{display:block;text-align:center;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13.5px;padding:15px;border-radius:var(--radius-m);transition:transform .3s var(--e-out);}
    .rail-cta:hover{transform:scale(1.03);}

    /* ---------- 1 · hero ---------- */
    .stage.hero{padding:0;display:block;}
    .hero-word{position:absolute;top:26px;left:0;right:0;z-index:4;pointer-events:none;display:flex;justify-content:center;user-select:none;
      transform-origin:50% 0;
      transform:translateY(calc(var(--hp) * -40px)) scale(calc(1 - .5 * clamp(0, var(--hp) / .45, 1)));
      opacity:calc(1 - clamp(0, (var(--hp) - .2) / .25, 1));}
    .sig-wrap{display:block;width:min(52vw, 640px);}
    .sig{display:block;width:100%;height:auto;overflow:visible;}
    .sig-pen{--t:clamp(0, (var(--p, 0) - var(--s)) / var(--f), 1);
      stroke-dashoffset:calc(var(--len) * 1px * (1 - var(--t)));}
    .topnav{position:absolute;left:64px;right:64px;top:calc(50px + min(18.3vw, 224px));display:flex;justify-content:space-between;z-index:3;opacity:calc(1 - clamp(0, var(--hp) / .22, 1));}
    .topnav-group{display:flex;align-items:center;gap:14px;}
    .topnav a{--t:clamp(0, (var(--hp) - var(--i) * .02) / .18, 1);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transform:translate(calc(var(--t) * -40px), calc(var(--t) * 30px));position:relative;}
    .topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e-out);}
    .topnav a:hover::after{transform:scaleX(1);transform-origin:left;}
    .topnav .sep{width:1px;height:12px;background:var(--ink);opacity:.5;}
    .hero-stage{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;overflow:hidden;}
    .portrait{position:relative;width:auto;height:min(70vh, calc(100vh - 300px));background:none;border-radius:0;overflow:visible;
      display:flex;align-items:flex-end;justify-content:center;
      filter:blur(calc(clamp(0, var(--hp) / .6, 1) * 26px));
      opacity:calc(1 - .8 * clamp(0, var(--hp) / .6, 1));
      transform:scale(calc(1 + .1 * var(--hp)));transform-origin:50% 100%;}
    .portrait-img{display:block;height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom center;
      pointer-events:none;-webkit-user-drag:none;user-select:none;}
    .hero-scroll{position:absolute;right:64px;bottom:34px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:calc(1 - clamp(0, var(--hp) / .1, 1));}
    .hero-scroll i{display:block;width:1px;height:34px;background:var(--ink);transform-origin:top;animation:scrollHint 1.8s var(--e-inout) infinite;}
    @keyframes scrollHint{0%{transform:scaleY(0);}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

    /* ---------- 2 · intro ---------- */
    .intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start;}
    .intro-title{font-size:clamp(46px,6.2vw,92px);font-weight:700;margin-top:-.14em;}
    .ln-b{display:block;white-space:nowrap;}
    .bit{display:inline-block;white-space:pre;font-variant-numeric:tabular-nums;
      --xo:clamp(0, (var(--out, 0) - (1 - var(--k, 0)) * .32) / .3, 1);
      opacity:calc(1 - var(--xo));transform:translateY(calc(var(--xo) * -16px));filter:blur(calc(var(--xo) * 5px));}
    .bit.one{color:var(--red);}
    .bit.is-on{transition:color .3s ease;}
    .bit:not(.is-on){opacity:calc(.9 * (1 - var(--xo)));}
    .intro-grid .head{position:relative;}
    .sig-mark{position:absolute;left:0;top:calc(100% + clamp(30px, 5vh, 64px));width:96%;
      transform-origin:0 0;rotate:-13deg;pointer-events:none;}
    .sig-mark .sig{display:block;width:100%;height:auto;overflow:visible;}
    .intro-side{display:flex;flex-direction:column;gap:18px;padding-top:.1em;}
    .intro-side .lede{max-width:46ch;}
    .meta{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:34px;margin:20px 0 0;
      border-top:1px solid var(--line-dark);}
    .meta-row{display:flex;flex-direction:column;gap:3px;padding:13px 0 14px;border-bottom:1px solid var(--line-dark);}
    .meta dt{font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:color-mix(in srgb, var(--on-dark) 40%, transparent);}
    .meta dd{margin:0;font-family:var(--ff-display);font-size:14.5px;font-weight:600;line-height:1.25;color:var(--on-dark);}
    .explore{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:16px;
      font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);
      transition:color .3s ease, gap .3s var(--e-out);}
    .explore:hover{color:var(--on-dark);gap:14px;}
    .explore i{display:block;width:1px;height:26px;background:currentColor;position:relative;}
    .explore i::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;
      border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);}
    .hero-stats{display:flex;gap:10px;}
    .hero-chip{background:var(--dark-soft);color:var(--on-dark);border-radius:var(--radius-m);padding:12px 16px;display:flex;flex-direction:column;gap:4px;}
    .hero-chip b{font-family:var(--ff-display);color:var(--accent);font-size:20px;}
    .hero-chip small{font-size:11px;color:var(--on-dark-soft);}
    .traits{display:flex;flex-wrap:wrap;gap:8px;}
    .trait-pill{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:99px;padding:7px 13px;}
    .trait-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);outline:1px solid rgba(27,27,27,.2);}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap;}
    .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:14px 22px;border-radius:99px;border:1px solid transparent;transition:transform .35s var(--e-out), background .3s, color .3s;}
    .btn:hover{transform:translateY(-2px);}
    .btn-solid{background:var(--accent);color:var(--accent-ink);}
    .btn-outline{border-color:var(--ink);color:var(--ink);}
    .btn-outline:hover{background:var(--ink);color:var(--paper);}
    .caption-row{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-soft);padding-top:14px;border-top:1px solid var(--line);}

    /* ---------- 3 · journey: a timeline you scroll sideways ---------- */
    #journey{overflow:hidden;}
    #journey .stage-inner{transform:none;max-width:none;display:flex;flex-direction:column;gap:clamp(10px, 2vh, 26px);}
    .tl-view{position:relative;width:100%;height:clamp(360px, 56vh, 560px);overflow:hidden;}
    .tl-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:stretch;
      transform:translate3d(calc(var(--tx, 0) * -1px), 0, 0);will-change:transform;}
    .tl-head{flex:none;width:auto;max-width:min(560px, 52vw);align-self:flex-end;
      display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px;padding:0 clamp(24px, 4vw, 72px) 0 0;}
    .tl-head h2{font-size:clamp(34px, 3.6vw, 54px);line-height:1.02;}
    .tl-period{font-family:var(--ff-mono, ui-monospace, Menlo, monospace);font-size:13px;letter-spacing:.04em;color:var(--on-dark-soft);}
    .tl-gap{flex:none;height:100%;}
    .tl-gap.is-lead{width:53vw;}
    .tl-gap.is-tail{width:56vw;}
    .tl-rail{position:relative;flex:none;display:flex;align-items:stretch;}
    .tl-line{position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb, var(--on-dark) 15%, transparent);}
    .tl-line i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(var(--lp, 0));}
    .tl-cap{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--red);}
    .tl-cap.is-a{left:-4.5px;} .tl-cap.is-b{right:-4.5px;}
    .tl-item{position:relative;flex:none;width:clamp(250px, 23vw, 360px);height:100%;pointer-events:none;}
    .tl-item.is-on{pointer-events:auto;}
    .tl-dot{position:absolute;left:0;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
      background:var(--red);transform-origin:50% 50%;transform:scale(var(--dp, 0));}
    .tl-stem{position:absolute;left:0;width:1px;height:15%;background:color-mix(in srgb, var(--on-dark) 38%, transparent);}
    .tl-item.is-top .tl-stem{bottom:50%;transform-origin:bottom;transform:scaleY(var(--sp, 0));}
    .tl-item.is-bot .tl-stem{top:50%;transform-origin:top;transform:scaleY(var(--sp, 0));}
    .tl-txt{position:absolute;left:0;width:88%;display:flex;flex-direction:column;gap:9px;}
    .tl-item.is-top .tl-txt{bottom:65%;}
    .tl-item.is-bot .tl-txt{top:65%;}
    .tl-mask{overflow:hidden;display:block;}
    .tl-mask > *{display:block;transform:translateY(calc((1 - var(--m, 0)) * 115%));}
    .tl-year{font-family:var(--ff-display);font-weight:800;font-size:clamp(26px, 2.5vw, 38px);line-height:1;letter-spacing:-.03em;
      font-variant-numeric:tabular-nums;color:var(--on-dark);}
    .tl-name{font-family:var(--ff-display);font-size:clamp(15px, 1.25vw, 19px);font-weight:600;line-height:1.15;color:var(--on-dark);}
    .tl-desc{font-size:13.5px;line-height:1.5;color:var(--on-dark-soft);}
    .tl-more{align-self:flex-start;background:color-mix(in srgb, var(--on-dark) 7%, transparent);border:1px solid var(--line-dark);
      border-radius:99px;padding:8px 15px;font-size:12px;font-weight:600;color:var(--on-dark);min-height:36px;transition:background .3s, border-color .3s;}
    .tl-more:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
    .tl-item:not(.is-on) .tl-more{visibility:hidden;}

    .popup{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;}
    .popup-backdrop{position:absolute;inset:0;border:none;background:rgba(12,12,12,.55);backdrop-filter:blur(8px);animation:fadeIn .4s ease both;}
    .popup-card{position:relative;max-width:560px;width:100%;background:var(--paper);color:var(--ink);border-radius:var(--radius-l);padding:40px;animation:popIn .7s var(--e-out) both;}
    .popup-year{font-family:var(--ff-display);font-weight:800;font-size:72px;line-height:.9;color:var(--accent);-webkit-text-stroke:.6px color-mix(in srgb, var(--dark) 45%, transparent);}
    .popup-card h3{font-size:34px;margin:14px 0 16px;}
    .popup-card p{font-size:16px;line-height:1.65;color:var(--ink-soft);}
    .popup-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;}
    .popup-close::before,.popup-close::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:2px;background:var(--ink);transition:transform .35s var(--e-out);}
    .popup-close::before{transform:rotate(45deg);} .popup-close::after{transform:rotate(-45deg);}
    .popup-close:hover::before{transform:rotate(135deg);} .popup-close:hover::after{transform:rotate(45deg);}
    @keyframes fadeIn{from{opacity:0;}}
    @keyframes popIn{from{opacity:0;transform:translateY(40px) scale(.92);}}

    /* ---------- 4 · skill topology ---------- */
    .skills-grid{display:flex;flex-direction:column;gap:clamp(14px, 2.4vh, 30px);}
    .skills-head{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:clamp(16px, 2vw, 30px);}
    .skills-head h2{flex:0 1 auto;min-width:0;font-size:clamp(28px, 3.1vw, 42px);}
    .skills-head .detail-count{flex:none;white-space:nowrap;}
    .graph{position:relative;width:100%;height:clamp(360px, 62vh, 660px);}
    .graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
    /* right-angle branches, like a tech tree */
    .spoke{fill:none;stroke:color-mix(in srgb, var(--on-dark) 15%, transparent);stroke-width:1.1px;stroke-linecap:round;stroke-linejoin:round;
      --t:clamp(0, (var(--q) - var(--d)) / .25, 1);opacity:var(--t);
      transition:stroke .3s, stroke-width .3s;vector-effect:non-scaling-stroke;}
    .spoke.is-trunk{stroke:color-mix(in srgb, var(--on-dark) 30%, transparent);stroke-width:1.7px;}
    .spoke.is-leaf{stroke:color-mix(in srgb, var(--on-dark) 10%, transparent);stroke-width:.9px;}
    .spoke.is-on{stroke:var(--red);stroke-width:1.9px;}
    .spoke.is-leaf.is-on{stroke:var(--red);stroke-width:1.2px;}
    .g-center{position:absolute;left:50%;top:56%;width:88px;height:88px;translate:-50% -50%;border-radius:22px;
      background:var(--accent);color:var(--accent-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
      font-family:var(--ff-display);font-weight:800;font-size:20px;z-index:4;
      --t:clamp(0, var(--q) / .1, 1);scale:calc(.3 + .7 * var(--t));opacity:var(--t);
      box-shadow:0 10px 30px color-mix(in srgb, var(--on-dark) 16%, transparent);}
    .g-center small{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.72;}
    /* branch + skill nodes: pip on top, label under */
    .g-node{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:7px;
      background:none;border:none;padding:0;z-index:3;cursor:pointer;
      --t:clamp(0, (var(--q) - var(--d) - .04) / .2, 1);scale:calc((.4 + .6 * var(--t)) * var(--hs, 1));opacity:var(--t);
      transition:scale .28s var(--e-out);}
    .g-node:hover{--hs:1.1;}
    .g-pip{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--line-dark);
      display:flex;align-items:center;justify-content:center;transition:background .3s, border-color .3s, box-shadow .3s;}
    .g-pip::before{content:"";width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--on-dark) 26%, transparent);transition:background .3s, transform .3s var(--e-out);}
    .g-label{font-size:11.5px;font-weight:600;color:var(--on-dark-soft);white-space:nowrap;transition:color .3s;}
    .g-node.is-branch .g-pip{width:40px;height:40px;background:var(--dark-soft);}
    .g-node.is-branch .g-pip::before{width:9px;height:9px;background:color-mix(in srgb, var(--on-dark) 42%, transparent);}
    .g-node.is-branch .g-label{font-family:var(--ff-display);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--on-dark);}
    .g-node.is-leaf{gap:5px;z-index:2;--t:clamp(0, (var(--q) - var(--d) - .06) / .2, 1);}
    .g-node.is-leaf .g-pip{width:13px;height:13px;}
    .g-node.is-leaf .g-pip::before{width:4px;height:4px;}
    .g-node.is-leaf .g-label{font-size:10.5px;font-weight:500;color:color-mix(in srgb, var(--on-dark) 46%, transparent);}
    .g-node:hover .g-pip{border-color:color-mix(in srgb, var(--red) 55%, transparent);}
    .g-node:hover .g-label{color:var(--on-dark);}
    .g-node.is-on .g-pip{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);}
    .g-node.is-on .g-pip::before{background:var(--accent-ink);transform:scale(1.15);}
    .g-node.is-on .g-label{color:var(--on-dark);font-weight:700;}
    .g-node.is-lit .g-pip{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px color-mix(in srgb, var(--red) 12%, transparent);}
    .g-node.is-lit .g-pip::before{background:#fff;}
    .g-node.is-lit .g-label{color:var(--on-dark);}
    /* hover card, anchored to whatever node you are on */
    .detail{position:absolute;left:50%;top:86%;width:min(360px, 36%);z-index:6;text-align:center;
      background:var(--card);border:1px solid var(--line-dark);border-radius:var(--radius-l);padding:16px 22px;
      box-shadow:0 20px 48px color-mix(in srgb, var(--on-dark) 20%, transparent);
      transform:translate(-50%, -50%);pointer-events:none;
      opacity:0;transition:opacity .22s ease;}
    .detail.is-show{opacity:1;}
    .detail h3{font-size:19px;margin-bottom:5px;}
    .detail p{color:var(--on-dark-soft);font-size:12.5px;line-height:1.55;margin:0;}
    .detail-count{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--on-dark-soft);}
    .tool-row{display:flex;flex-wrap:wrap;gap:8px;}
    .tool-pill{font-size:12.5px;font-weight:600;background:color-mix(in srgb, var(--on-dark) 7%, transparent);border:1px solid var(--line-dark);border-radius:99px;padding:8px 14px;animation:popIn .5s var(--e-out) both;}
    .tool-pill:nth-child(2){animation-delay:.05s;} .tool-pill:nth-child(3){animation-delay:.1s;}
    .hint{margin-top:16px;font-size:12px;color:var(--on-dark-soft);}

    /* leaving the section: the tree comes apart in reverse: leaves first, core last */
    #skills.stage{opacity:min(1, calc(var(--o, 0) / max(.02, 1 - var(--out, 0))));}
    #skills .stage-inner{transform:translateY(calc((.5 - var(--q)) * 36px));filter:none;}
    #skills .graph .spoke{--x:clamp(0, (var(--out, 0) - (.42 - var(--d, 0))) / .28, 1);
      opacity:calc(var(--t) * (1 - var(--x)));}
    #skills .graph .g-node{--x:clamp(0, (var(--out, 0) - (.42 - var(--d, 0))) / .28, 1);
      opacity:calc(var(--t) * (1 - var(--x)));
      scale:calc((.4 + .6 * var(--t)) * (1 - var(--x) * .55) * var(--hs, 1));}
    #skills .g-center{--x:clamp(0, (var(--out, 0) - .44) / .26, 1);
      opacity:calc(var(--t) * (1 - var(--x)));
      scale:calc((.3 + .7 * var(--t)) * (1 - var(--x) * .6));}
    #skills .detail.is-show{opacity:calc(1 - clamp(0, var(--out, 0) / .18, 1));}
    #skills .skills-head{opacity:calc(1 - clamp(0, (var(--out, 0) - .55) / .3, 1));
      transform:translateY(calc(clamp(0, (var(--out, 0) - .55) / .3, 1) * -26px));}

    /* ---------- 5 · projects: a wheel you turn ---------- */
    .proj-head{display:flex;align-items:center;gap:clamp(22px, 3.4vw, 52px);margin-bottom:6px;}
    .wheel{position:relative;height:clamp(330px, 60vh, 580px);overflow:hidden;cursor:grab;touch-action:pan-x;user-select:none;
      --cw:300px;--ch:207px;}
    .wheel.is-dragging{cursor:grabbing;}
    .wheel-zoom{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;}
    .wheel-3d{position:absolute;top:50%;left:50%;transform-style:preserve-3d;}
    .w-card{position:absolute;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);margin-top:calc(var(--ch) / -2);
      backface-visibility:hidden;will-change:transform;}
    .w-face{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10px;
      background:linear-gradient(155deg, var(--pa, #2B2B2B), var(--pb, #121212));
      box-shadow:0 18px 40px rgba(0,0,0,.34);}
    .w-face img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
    .w-card:not(.has-img) .w-face img{display:none;}
    .w-blank{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);background-size:26px 26px;}
    .w-card.has-img .w-blank{display:none;}
    .w-blank b{font-family:var(--ff-display);font-weight:800;font-size:62px;color:rgba(255,255,255,.16);letter-spacing:-.04em;}
    .w-act{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;
      font-size:10.5px;font-weight:600;padding:5px 9px;border-radius:99px;
      background:color-mix(in srgb, var(--card) 82%, transparent);color:var(--on-dark);backdrop-filter:blur(6px);
      opacity:0;transform:translateY(4px);transition:opacity .3s ease, transform .3s var(--e-out);}
    .w-card:hover .w-act{opacity:1;transform:none;}
    .w-act svg{width:9px;height:9px;}
    .wheel-label,.wheel-title{position:absolute;z-index:150;pointer-events:none;font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;color:var(--on-dark);}
    .wheel-label{inset:0;display:grid;place-items:center;}
    .wheel-title{top:50%;left:7%;transform:translateY(-50%);opacity:0;display:flex;align-items:baseline;gap:.42em;white-space:nowrap;}
    .w-kw{font-family:var(--ff-mono, ui-monospace, Menlo, monospace);font-weight:600;font-size:.82em;letter-spacing:-.01em;color:var(--red);}
    .wheel-index{z-index:200;position:absolute;top:50%;right:1.5%;transform:translateY(-50%);
      margin:0;padding:0;list-style-position:inside;
      text-align:right;line-height:1.85;font-size:12.5px;}
    .proj-dots{margin-left:auto;}
    .wheel-index button{font-family:var(--ff-mono, ui-monospace, Menlo, monospace);background:none;border:none;padding:0;
      color:color-mix(in srgb, var(--on-dark) 42%, transparent);transition:color .35s ease;}
    .wheel-index button:hover{color:var(--on-dark);}
    .wheel-index li.is-on button{color:var(--on-dark);font-weight:600;}
    .proj-dots{display:flex;gap:8px;}
    .proj-dot{height:5px;width:5px;border-radius:99px;background:color-mix(in srgb, var(--on-dark) 25%, transparent);transition:width .4s var(--e-out), background-color .4s;}
    .proj-dot.is-active{width:28px;background:var(--accent);}

    /* ---------- 6 · what I bring ---------- */
    .bring-lede{font-family:var(--ff-display);font-size:clamp(28px,3.5vw,48px);font-weight:600;line-height:1.28;margin:26px 0 44px;max-width:1000px;}
    .ch{display:inline-block;white-space:pre;--t:clamp(0, (var(--q) * 1.8 - var(--k) * .8) / .2, 1);
      --xo:clamp(0, (var(--out, 0) - (1 - var(--k)) * .3) / .3, 1);
      opacity:calc((.12 + .88 * var(--t)) * (1 - var(--xo)));
      filter:blur(calc((1 - var(--t)) * 6px + var(--xo) * 5px));
      transform:translateY(calc((1 - var(--t)) * 10px - var(--xo) * 14px));}
    .ch.chip{background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:0 14px;margin:0 2px;font-weight:700;opacity:var(--t);transform:scale(calc(.5 + .5 * var(--t)));filter:none;}
    .cap-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
    .cap-item{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-m);background:rgba(255,255,255,.4);}
    .cap-ic{width:40px;height:40px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
    .cap-ic svg{width:18px;height:18px;color:var(--accent-ink);}
    .cap-item h3{font-size:16px;}
    .cap-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}

    /* ---------- 7 · path ---------- */
    .path-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(14px, 2.4vh, 30px);}
    .path-stage{display:flex;flex-direction:column;gap:clamp(8px, 1.6vh, 20px);}
    /* the fan: cards pivot about a point just under their bottom edge */
    .path-arc{position:relative;width:100%;height:clamp(310px, 45vh, 420px);--pcw:260px;--pch:390px;}
    .path-card{position:absolute;left:50%;bottom:22%;width:var(--pcw);height:var(--pch);margin-left:calc(var(--pcw) / -2);
      display:flex;flex-direction:column;gap:9px;padding:22px 20px;overflow:hidden;
      border:1px solid var(--line-dark);border-radius:calc(var(--radius-l) + 6px);
      background:linear-gradient(168deg, var(--g1, var(--card)) 0%, var(--card) 62%, var(--g2, var(--card)) 100%);
      box-shadow:0 22px 50px color-mix(in srgb, var(--on-dark) 22%, transparent);
      will-change:transform;transition:border-color .4s ease, box-shadow .4s ease;}
    .path-card.pc-a{--g1:color-mix(in srgb, var(--accent) 46%, var(--card));--g2:color-mix(in srgb, var(--accent) 16%, var(--card));
      --f1:color-mix(in srgb, var(--accent) 42%, transparent);--f2:color-mix(in srgb, var(--on-dark) 16%, transparent);}
    .path-card.pc-b{--g1:color-mix(in srgb, var(--red) 34%, var(--card));--g2:color-mix(in srgb, var(--red) 10%, var(--card));
      --f1:color-mix(in srgb, var(--red) 48%, transparent);--f2:color-mix(in srgb, var(--accent) 24%, transparent);}
    .path-card.pc-c{--g1:color-mix(in srgb, var(--on-dark) 26%, var(--card));--g2:color-mix(in srgb, var(--on-dark) 7%, var(--card));
      --f1:color-mix(in srgb, var(--on-dark) 30%, transparent);--f2:color-mix(in srgb, var(--red) 18%, transparent);}
    /* fog: two soft blooms drifting under the content */
    .path-card::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
      background:radial-gradient(58% 44% at 24% 14%, var(--f1, transparent) 0%, transparent 64%),
                 radial-gradient(54% 42% at 82% 80%, var(--f2, transparent) 0%, transparent 68%);
      filter:blur(34px);}
    /* grain */
    .path-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background-image:url("img/grain.png");background-size:128px 128px;opacity:.44;mix-blend-mode:overlay;}
    .path-card > *{position:relative;z-index:2;}
    .path-card.is-on{border-color:color-mix(in srgb, var(--accent) 55%, transparent);
      box-shadow:0 26px 60px color-mix(in srgb, var(--on-dark) 30%, transparent);}
    .path-card.can-click{cursor:pointer;}
    .path-tag{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);background:var(--accent);border-radius:99px;padding:4px 10px;align-self:flex-start;}
    .path-card h3{font-size:clamp(16px, 1.3vw, 19px);line-height:1.15;}
    .path-when{font-family:var(--ff-display);font-size:clamp(20px, 1.8vw, 26px);font-weight:700;color:var(--accent);line-height:1;}
    .path-card p{font-size:12.5px;color:var(--on-dark-soft);line-height:1.45;}
    .path-card ul{display:flex;flex-direction:column;gap:6px;margin-top:auto;}
    .path-card li{font-size:11.5px;display:flex;gap:7px;align-items:flex-start;color:var(--on-dark);}
    .path-card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none;}
    /* the bent slider */
    .path-slider{position:relative;width:min(700px, 88%);margin:0 auto;touch-action:none;cursor:grab;outline:none;}
    .path-slider:active{cursor:grabbing;}
    .path-slider svg{display:block;width:100%;height:auto;overflow:visible;}
    .ps-line{fill:none;stroke:var(--line-dark);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;}
    .ps-fill{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke;
      stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pf, 0));}
    .ps-stop{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);translate:-50% calc(-50% + 26px);rotate:var(--rot);
      background:none;border:none;padding:6px 8px;white-space:nowrap;cursor:pointer;
      font-size:10.5px;font-weight:700;letter-spacing:.14em;color:color-mix(in srgb, var(--on-dark) 42%, transparent);
      transition:color .3s ease;}
    .ps-stop.is-on{color:var(--on-dark);}
    .ps-stop:hover{color:var(--on-dark);}
    .ps-handle{position:absolute;left:calc(var(--hx, 50) * 1%);top:calc(var(--hy, 45) * 1%);translate:-50% -50%;
      width:34px;height:14px;border-radius:99px;background:var(--accent);pointer-events:none;
      box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);}
    .path-slider:focus-visible .ps-handle{outline:2px solid var(--red);outline-offset:3px;}

    /* ---------- 8 · faq ---------- */
    .faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start;}
    .faq-list{border-top:1px solid var(--line);}
    .faq-item{border-bottom:1px solid var(--line);}
    .faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--ff-display);font-size:19px;font-weight:600;color:var(--ink);}
    .faq-ic{position:relative;width:34px;height:34px;flex:none;border-radius:50%;background:rgba(27,27,27,.07);transition:background-color .3s;}
    .faq-ic::before,.faq-ic::after{content:"";position:absolute;left:10px;right:10px;top:16px;height:2px;background:var(--ink);transition:transform .45s var(--e-out);}
    .faq-ic::after{transform:rotate(90deg);}
    .faq-q:hover .faq-ic{background:rgba(27,27,27,.14);}
    .faq-item.is-open .faq-ic{background:var(--accent);}
    .faq-item.is-open .faq-ic::after{transform:rotate(0deg) scaleX(0);}
    .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e-out);}
    .faq-a > div{overflow:hidden;}
    .faq-item.is-open .faq-a{grid-template-rows:1fr;}
    .faq-a p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;padding:0 4px 22px;max-width:600px;}

    /* ---------- 9 · contact ---------- */
    .contact-title{font-size:clamp(64px,11vw,170px);font-weight:800;letter-spacing:-0.03em;margin:22px 0 26px;}
    .contact-title .accent{color:var(--accent);}
    .footer-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line-dark);}
    .footer-email{font-family:var(--ff-display);font-size:26px;color:var(--accent);}
    .footer-meta{font-size:12.5px;color:var(--on-dark-soft);}


    /* ===== Elegant & High-End: dark-led overrides ===== */
    .rail-card{background:color-mix(in srgb, var(--dark) 74%, transparent);border-color:var(--line-dark);color:var(--on-dark);}
    .rail-icons a{border-color:var(--line-dark);}
    .rail-icons a:hover{color:var(--accent-ink);}
    .rail-link{color:var(--on-dark-soft);}
    .rail-link:hover{background:color-mix(in srgb, var(--on-dark) 8%, transparent);color:var(--on-dark);}
    .rail-link.is-active{color:var(--accent-ink);}
    .marquee-track span{color:var(--on-dark-soft);}
    .rail-contact:hover{background:color-mix(in srgb, var(--on-dark) 8%, transparent);}
    .rail-contact button{border-color:var(--line-dark);color:var(--on-dark);}
    .rail-contact button:hover{color:var(--accent-ink);}
    .stat-chip{background:var(--dark-soft);}
    .dark .topnav a::after,.dark .topnav .sep{background:var(--on-dark);}
    .dark .hero-scroll{color:var(--on-dark-soft);}
    .dark .hero-scroll i{background:var(--on-dark);}
    .dark .hero-chip{background:var(--dark-soft);border:1px solid var(--line-dark);}
    .dark .trait-pill{background:color-mix(in srgb, var(--on-dark) 6%, transparent);border-color:var(--line-dark);}
    .dark .trait-pill .dot{outline-color:color-mix(in srgb, var(--on-dark) 25%, transparent);}
    .dark .btn-outline{border-color:var(--on-dark);color:var(--on-dark);}
    .dark .btn-outline:hover{background:var(--on-dark);color:var(--ink);}
    .dark .caption-row{color:var(--on-dark-soft);border-color:var(--line-dark);}
    .dark .faq-list,.dark .faq-item{border-color:var(--line-dark);}
    .dark .faq-q{color:var(--on-dark);}
    .dark .faq-ic{background:color-mix(in srgb, var(--on-dark) 9%, transparent);}
    .dark .faq-ic::before,.dark .faq-ic::after{background:var(--on-dark);}
    .dark .faq-q:hover .faq-ic{background:color-mix(in srgb, var(--on-dark) 18%, transparent);}
    .dark .faq-item.is-open .faq-ic{background:var(--accent);}
    .dark .faq-item.is-open .faq-ic::before{background:var(--accent-ink);}
    .dark .faq-a p{color:var(--on-dark-soft);}
    .reel-row,.popup-year{color:var(--gold-deep);-webkit-text-stroke:0;}
    .ch.chip{color:var(--accent-ink);}

    /* ===== Bold & Creative: yellow leads, red only as small hints ===== */
    .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
    .hero-scroll i{background:var(--red) !important;}
    .p-thumb::before{background:radial-gradient(circle at 70% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 55%), radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--red) 16%, transparent), transparent 45%);}
    .reel-row > span:first-child{color:var(--red);}
    .contact-title .accent{color:var(--accent);}

    .stop{color:var(--red);}
    .rail-link.is-active .rail-num{border-color:var(--red);color:var(--red);opacity:1;}
    .detail-count{color:var(--red);}
    .p-arrow:hover{background:var(--red);color:var(--dark);}
    .dark .faq-item.is-open .faq-ic::before{background:var(--accent-ink);}
    .hero-chip b::after,.stat-chip b::after{content:".";color:var(--red);}

    /* ----- light mode (the default) ----- */
    .t-light{--dark:#EDEDED;--dark-soft:#F6F6F6;--card:#FCFCFC;--on-dark:#101010;--on-dark-soft:rgba(16,16,16,.7);
      --ink:#101010;--accent:var(--accent-prop-l, #101010);--accent-ink:#F2F2F2;--red:#E01B12;--gold-deep:#E01B12;
      --bright:#E01B12;--bright-ink:#FFFFFF;--line-dark:rgba(16,16,16,.16);--shadow:0 18px 40px rgba(16,16,16,.12);}
    .t-light .p-thumb::after{background:rgba(255,255,255,.4);}
    .is-switching, .is-switching *, .is-switching *::before, .is-switching *::after{
      transition:background-color .55s ease, color .55s ease, border-color .55s ease, box-shadow .55s ease, fill .55s ease, stroke .55s ease, outline-color .55s ease !important;}
    .mode-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      background:color-mix(in srgb, var(--on-dark) 8%, transparent);border:1px solid var(--line-dark);color:var(--on-dark);border-radius:99px;padding:10px 16px;min-height:40px;transition:background .3s, color .3s;}
    .mode-btn:hover{background:var(--red);border-color:var(--red);color:#FFFFFF;}
    .mode-btn .ic{width:16px;height:16px;flex:none;color:var(--red);}
    .mode-btn .ic-moon{display:none;}
    .t-light .mode-btn .ic-sun{display:none;}
    .t-light .mode-btn .ic-moon{display:block;}
    .mode-btn:hover .ic{color:#FFFFFF;}
    .rail-mode{width:100%;}
    .hero-mode{position:absolute;left:64px;bottom:34px;z-index:4;opacity:calc(1 - clamp(0, var(--hp) / .18, 1));}

    /* a little more red */
    .rail-cta{background:var(--red);color:#FFFFFF;}
    .btn-solid:hover{background:var(--red);color:#FFFFFF;}
    .cursor-dot{background:var(--red);color:#FFFFFF;}
    .proj-dot.is-active{background:var(--red);}
    .detail-count{color:var(--red);}
    .tool-pill:first-child{border-color:color-mix(in srgb, var(--red) 70%, transparent);}
    .g-center{box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 22px color-mix(in srgb, var(--red) 10%, transparent);}
    .dark .faq-item.is-open .faq-ic{background:var(--red);}
    .dark .faq-item.is-open .faq-ic::before{background:#FFFFFF;}
    .rail-icons a:hover{background:var(--red);color:#FFFFFF;}
    .rail-contact button:hover{background:var(--red);color:#FFFFFF;}

    /* the bright section */
    .on-yellow{color:var(--bright-ink);}
    .on-yellow .eyebrow{color:var(--ink);border-color:rgba(27,27,27,.3);background:rgba(255,255,255,.25);}
    .on-yellow .ch{color:var(--bright-ink);}
    .on-yellow .ch.chip{background:var(--bright-ink);color:var(--bright);}
    .on-yellow .cap-item{background:color-mix(in srgb, var(--bright) 82%, #FFFFFF);border-color:color-mix(in srgb, var(--bright-ink) 25%, transparent);color:var(--bright-ink);}
    .on-yellow .cap-item p{color:color-mix(in srgb, var(--bright-ink) 82%, transparent);}
    .on-yellow .cap-ic{background:var(--bright-ink);}
    .on-yellow .cap-ic svg{color:var(--bright);}
    .on-yellow .cap-item{border-color:rgba(230,57,70,.35);}

    /* no white sections: journey + path on black */
    .dark .reel-row{color:var(--accent);}

    .popup-card{background:var(--card);color:var(--on-dark);}
    .popup-card p{color:var(--on-dark-soft);}
    .popup-year{color:var(--accent);}
    .popup-close{border-color:var(--line-dark);}
    .popup-close::before,.popup-close::after{background:var(--on-dark);}

    /* ======================================================
       STATIC MODE (phones, or reduced motion): a normal page
       ====================================================== */
    .is-static .scene{height:auto !important;}
    .is-static .stage{position:relative;inset:auto;visibility:visible;opacity:1;pointer-events:auto;min-height:auto;padding:80px 24px;}
    .is-static .stage.hero{min-height:100vh;}
    .is-static .stage-inner{transform:none;filter:none;}
    .is-static .stage.dark{background:var(--dark);}
    .is-static .stage:not(.dark){background:var(--bg);}
    .is-static .stage.on-yellow{background:var(--accent);}
    .is-static .tl-view{height:auto;overflow:visible;}
    .is-static .tl-track{position:relative;transform:none;flex-direction:column;height:auto;gap:30px;}
    .is-static .tl-head{width:auto;max-width:none;align-self:flex-start;align-items:flex-start;text-align:left;padding:0;}
    .is-static .tl-rail{flex-direction:column;align-items:stretch;gap:26px;}
    .is-static .tl-line,.is-static .tl-cap,.is-static .tl-dot,.is-static .tl-stem{display:none;}
    .is-static .sig-pen{stroke-dashoffset:0;}
    .is-static .hero-word{position:relative;top:auto;transform:none;opacity:1;margin-bottom:28px;}
    .is-static .tl-gap{display:none;}
    .is-static .tl-item{width:auto;height:auto;pointer-events:auto;}
    .is-static .tl-txt{position:relative;inset:auto;width:auto;}
    .is-static .tl-mask > *{transform:none;}
    .is-static .tl-item .tl-more{visibility:visible;}
    .is-static .path-arc{height:auto;display:flex;flex-direction:column;gap:18px;}
    .is-static .path-card{position:relative;left:auto;bottom:auto;width:auto;height:auto;margin:0;transform:none!important;opacity:1!important;}
    .is-static .path-slider{display:none;}
    .is-static .wheel{height:auto;cursor:default;}
    .is-static .wheel-zoom{position:relative;transform:none!important;perspective:none!important;}
    .is-static .wheel-3d{position:relative;top:auto;left:auto;transform:none;transform-style:flat;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .is-static .w-card{position:relative;width:auto;height:180px;margin:0;transform:none!important;opacity:1!important;}
    .is-static .wheel-label,.is-static .wheel-title{display:none;}
    .is-static .loader{display:none;}
    @media (max-width:900px){
      .rail,.topnav{display:none;}
      .portrait{height:auto;width:78vw;}
      .portrait-img{width:100%;height:auto;}
      .hero-word{font-size:15vw;}
      .intro-grid,.journey-grid,.skills-grid,.faq-grid{grid-template-columns:1fr;gap:32px;}
      .cap-list{grid-template-columns:1fr 1fr;}
      .proj-head,.path-top{flex-direction:column;align-items:flex-start;}
      .graph{height:clamp(420px, 70vh, 620px);}
    }
    @media (prefers-reduced-motion:reduce){
      .marquee-track,.hero-scroll i{animation:none;}
    }