/* Layout: the live landing page as a scroll story, white + logo cyan (single light theme by client request).
   One signature moment (plate → diary, pinned), scrubbed reveals elsewhere. */
:root{
  --bg:#ffffff; --surface:#f2fbfd; --ink:#152f3b; --muted:#516672; --on-ink:#ffffff;
  --brand:#32bee9; --brand-text:#087ba8; --blue:#35a3f5; --leaf:#2ae8d4; --mist:#c9f3ff;
  --line:rgba(8,123,168,.16); --shadow:rgba(21,74,95,.14); --shadow-strong:rgba(21,47,59,.32);
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --gl:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px));
  color-scheme:light; interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html.motion{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--brand-text);outline-offset:4px;border-radius:4px}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;text-wrap:balance}
p{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1320px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr);position:relative}
main>section{scroll-margin-top:80px;position:relative}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-text);margin:0 0 20px}
h2{font:700 clamp(40px,5.4vw,82px)/1 var(--display);letter-spacing:-.05em}
h2 em,.it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand-text);letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.3vw,18px);color:var(--muted);max-width:44ch}

/* ---------- generic scroll reveal ---------- */
.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.motion .rv.in{opacity:1;transform:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:transform .5s var(--ease),border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line)}
.motion .site-header.hide{transform:translateY(-100%)}
.header-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:10px;font:700 28px/1 var(--display);letter-spacing:-.05em;min-height:44px}
.wordmark svg{width:30px;height:30px;fill:var(--blue);transition:transform .9s var(--ease)}
.wordmark:hover svg{transform:rotate(90deg)}
.wordmark small{display:block;font:400 7px/1 var(--body);letter-spacing:.35em;margin-top:6px;color:var(--muted)}
.site-header nav{display:flex;align-items:center;gap:28px;font-size:13px}
.nl{position:relative;min-height:44px;display:flex;align-items:center}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nl:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:1px solid var(--line);border-radius:999px;padding:0 18px;min-height:44px;display:flex;align-items:center;gap:14px;white-space:nowrap;transition:background .25s,border-color .25s}
.nav-cta:hover{background:var(--brand);border-color:var(--brand)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--brand),var(--leaf));transform-origin:left;transform:scaleX(var(--sp,0))}


/* ---------- 01 hero ---------- */
.hero{position:relative;padding-block:clamp(36px,5vw,64px) clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-copy{min-width:0;position:relative;z-index:2}
.motion .hero-copy{transform:translateY(calc(var(--p,0) * -40px))}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--brand-text);display:flex;gap:10px;align-items:center;margin:0 0 22px}
.eyebrow b{font-size:22px;font-weight:400;line-height:1}
h1{font:700 clamp(60px,8.4vw,148px)/.94 var(--display);letter-spacing:-.065em}
h1 .line{display:block;overflow:hidden;padding:0 .12em .14em 0;margin-bottom:-.14em}
h1 .it{letter-spacing:-.045em}
.ch{display:inline-block;white-space:pre}
.motion .hero .ch{transform:translateY(108%) rotate(5deg);transition:transform .9s var(--ease) calc(80ms + var(--c) * 26ms)}
.motion .hero .line+.line .ch{transition-delay:calc(200ms + var(--c) * 26ms)}
.motion .hero.play .ch{transform:none}
.intro{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--muted);max-width:400px;margin:26px 0 0}
.motion .hero .hr{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) var(--d),transform .7s var(--ease) var(--d)}
.motion .hero.play .hr{opacity:1;transform:none}
.actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:54px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,background .3s,transform .5s var(--ease)}
.btn .arr{display:inline-block;font-size:18px;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn.fill{background:var(--brand);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--on-ink)}
.btn.fill::before,.btn.dark::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;transform:translateY(102%);transition:transform .5s var(--ease)}
.btn.fill::before{background:var(--ink)}
.btn.dark::before{background:var(--brand-text)}
.btn.fill:hover{color:var(--on-ink)}
.btn.fill:hover::before,.btn.dark:hover::before{transform:none}
.btn.line{padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);min-height:48px;overflow:visible}
.btn.line:hover .arr{transform:translateY(3px)}
.btn.outline{border:1px solid currentColor}
.btn.outline:hover{background:var(--ink);color:var(--on-ink)}
.magnetic{transform:translate(var(--mx,0px),var(--my,0px))}
.founder{display:inline-flex;align-items:center;gap:12px;margin-top:34px;min-height:56px}
.founder img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 23%;border:2px solid var(--line)}
.founder strong{display:block;font-size:13px;font-weight:500}
.founder small{display:block;font-size:11px;color:var(--muted)}
.founder .arr{margin-left:8px;transition:transform .3s var(--ease)}
.founder:hover .arr{transform:translate(3px,-3px)}

.hero-visual{position:relative;min-width:0;width:100%;max-width:640px;aspect-ratio:1;justify-self:center;perspective:1200px}
.motion .hero-visual{transform:translateY(calc(var(--p,0) * -70px))}
.lens{position:absolute;inset:7%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .8s var(--ease)}
.lens::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 34px 80px var(--shadow)}
.lens-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;clip-path:circle(50% at 50% 50%)}
.lens-clip img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.motion .hero .lens-clip{clip-path:circle(0% at 50% 50%);transition:clip-path 1.2s var(--ease) .1s}
.motion .hero.play .lens-clip{clip-path:circle(50% at 50% 50%)}
.motion .hero .lens-clip img{transform:scale(1.22);transition:transform 1.9s var(--ease) .1s}
.motion .hero.play .lens-clip img{transform:none}
.motion .hero .lens::before{opacity:0;transition:opacity 1s ease .5s}
.motion .hero.play .lens::before{opacity:1}
.ring{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--brand);stroke-width:.32;stroke-dasharray:1;stroke-dashoffset:0}
.ring circle+circle{stroke:var(--line);stroke-width:.2;stroke-dasharray:.004 .012}
.motion .hero .ring circle:first-child{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease-io) .55s}
.motion .hero.play .ring circle:first-child{stroke-dashoffset:0}
.tags{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .8s var(--ease)}
.tag{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;transform:translate(-6px,-50%)}
.tag[data-side=l]{flex-direction:row-reverse;transform:translate(calc(-100% + 6px),-50%)}
.tag .dot{width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 60%,transparent);flex:none}
.tag .ld{width:clamp(16px,2.6vw,32px);height:1.5px;background:var(--bg);flex:none}
.tag span{background:var(--bg);color:var(--ink);font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px var(--shadow)}
.motion .hero .tag .dot{transform:scale(0);transition:transform .5s var(--ease) calc(1.15s + var(--i) * .09s)}
.motion .hero .tag .ld{transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease) calc(1.25s + var(--i) * .09s)}
.motion .hero .tag[data-side=l] .ld{transform-origin:right}
.motion .hero .tag span{opacity:0;transform:translateX(-10px);transition:opacity .45s ease calc(1.32s + var(--i) * .09s),transform .55s var(--ease) calc(1.32s + var(--i) * .09s)}
.motion .hero .tag[data-side=l] span{transform:translateX(10px)}
.motion .hero.play .tag :is(.dot,.ld,span){transform:none;opacity:1}
.hand{position:absolute;top:-1%;left:-3%;z-index:3;margin:0;font:400 17px/1.15 var(--body);transform:rotate(-8deg);background:var(--bg);padding:8px 12px 10px;border-radius:6px}
.hand .it{display:block;font-size:30px;line-height:1}
.motion .hero .hand{opacity:0;transform:rotate(-14deg) translateY(10px);transition:opacity .6s ease 1.7s,transform .9s var(--ease) 1.7s}
.motion .hero.play .hand{opacity:1;transform:rotate(-8deg)}
.peek{position:absolute;right:-2%;bottom:1%;z-index:3;width:clamp(200px,44%,272px);margin:0;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 14px 0;box-shadow:0 20px 50px var(--shadow);transform:rotate(-4deg);transition:transform .5s var(--ease)}
.peek:hover{transform:rotate(-1.5deg) translateY(-6px)}
.peek-head{display:flex;align-items:center;gap:9px;font:700 16px/1 var(--display);letter-spacing:-.02em}
.peek-head img{width:28px;height:28px}
.peek-head small{display:block;font:400 6.5px/1 var(--body);letter-spacing:.12em;margin-top:4px;color:var(--muted)}
.peek>img{margin-top:12px;width:100%;height:auto;border-radius:6px}
.peek figcaption{font-size:10px;color:var(--muted);min-height:36px;display:flex;align-items:center}
.motion .hero .peek{opacity:0;transform:rotate(2deg) translateY(40px);transition:opacity .7s ease .95s,transform 1s var(--ease) .95s}
.motion .hero.play .peek{opacity:1;transform:rotate(-4deg)}
.motion .hero.play .peek:hover{transform:rotate(-1.5deg) translateY(-6px);transition-delay:0s}

/* ---------- 02 ticker ---------- */
.ticker{position:relative;border-block:1px solid var(--line);padding-block:26px 30px;overflow:hidden;display:grid;gap:4px}
.row{overflow:hidden;white-space:nowrap}
.track{display:inline-flex;will-change:transform}
.set{display:inline-flex;align-items:center;flex:none}
.r1 .set{font:700 clamp(40px,6vw,88px)/1.08 var(--display);letter-spacing:-.05em}
.r1 i{font-style:normal;font-weight:400;color:var(--brand);margin-inline:.4em;font-size:.55em}
.r2 .set{font:italic 400 clamp(24px,3.2vw,44px)/1.25 var(--serif);color:var(--brand-text)}
.r2 i{font-style:normal;margin-inline:.7em;color:var(--brand)}
.pause{position:absolute;right:var(--gr);bottom:8px;font-size:11px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--muted)}
.pause:hover{color:var(--ink);border-color:var(--ink)}
html:not(.motion) .pause{display:none}

/* ---------- 03 diary (signature, pinned) ---------- */
.diary{position:relative;background:var(--surface);padding-top:clamp(64px,8vw,112px)}
.diary-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:24px 48px;align-items:end}
.diary-head .lead{margin:0}
.stage{padding-block:48px 88px}
.copycol{min-width:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:40px 32px}
.step .num{font-size:11px;letter-spacing:.18em;color:var(--brand-text);text-transform:uppercase}
.step h3{font:700 clamp(26px,2.8vw,42px)/1.05 var(--display);letter-spacing:-.04em;margin:12px 0 14px}
.step p{color:var(--muted);max-width:42ch;margin:0 0 12px}
.step small{font-size:11px;color:var(--muted);letter-spacing:.02em}
.step-fig{margin:0 0 20px}
.step-fig img{width:100%;height:auto;max-width:340px;margin-inline:auto}
.mini-plate{position:relative;width:min(100%,300px);aspect-ratio:1;margin:12px auto 24px;border-radius:50%;overflow:hidden;box-shadow:0 20px 50px var(--shadow)}
.mini-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.motion .mini-plate.in .scan-track{animation:scanOnce 1.8s var(--ease-io) .3s both}
@keyframes scanOnce{0%{transform:none;opacity:1}90%{opacity:1}100%{transform:translateY(100%);opacity:0}}
.diary-cta{margin-top:36px}
.device,.rail{display:none}
.pinned .pin{height:340vh}
.pinned .stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center;padding-block:0}
.pinned .device{display:block}
.pinned .rail{display:flex}
.pinned .step-fig,.pinned .mini-plate{display:none}
.pinned .steps{display:grid;grid-template-columns:minmax(0,1fr)}
.pinned .step{grid-area:1/1;visibility:hidden;transition:visibility 0s linear .6s}
.pinned .step.on{visibility:visible;transition-delay:0s}
.pinned .step>*{opacity:0;transform:translateY(26px);transition:opacity .45s ease,transform .75s var(--ease)}
.pinned .step.past>*{transform:translateY(-26px)}
.pinned .step.on>*{opacity:1;transform:none}
.pinned .step.on h3{transition-delay:.06s}.pinned .step.on p{transition-delay:.12s}.pinned .step.on small{transition-delay:.18s}
.rail{gap:8px;margin-top:44px;max-width:440px}
.rail button{flex:1;min-height:44px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;text-align:left;font-size:11px;letter-spacing:.06em;color:var(--muted);transition:color .3s}
.rail button i{display:block;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail button i::after{content:"";display:block;height:100%;background:var(--brand-text);transform:scaleX(var(--f,0));transform-origin:left}
.rail button.on,.rail button:hover{color:var(--ink)}
.device{--devh:min(84svh,760px,62vw);position:relative;height:var(--devh);min-width:0}
.halo{position:absolute;left:50%;top:50%;width:calc(var(--devh) * .86);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(calc(.72 + var(--ph,1) * .28)) rotate(calc(var(--p,0) * 220deg));background:conic-gradient(var(--brand),var(--leaf),var(--blue),var(--mist),var(--brand));filter:blur(64px);opacity:calc(.2 + var(--ph,1) * .2)}
.phones{position:absolute;top:0;left:calc(50% - var(--devh) * .4);width:calc(var(--devh) * .8);height:100%;opacity:var(--ph,1);transform:translateY(calc((1 - var(--ph,1)) * 90px)) scale(calc(.93 + var(--ph,1) * .07))}
.phones img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.phones .s3{opacity:calc(1 - var(--w1,0));transform:scale(calc(1 - var(--w1,0) * .04))}
.wipe{position:absolute;inset:0;overflow:hidden;transform:translateY(calc((1 - var(--w)) * 100%))}
.wipe img{transform:translateY(calc((var(--w) - 1) * 100%))}
.w4{--w:var(--w1,0);opacity:calc(1 - var(--w2,0))}
.w5{--w:var(--w2,0)}
.pinned :is(.plate-wrap,.phones,.wipe,.wipe img,.s3,.halo,.scan-track){will-change:transform}
.plate-wrap{--D:calc(var(--devh) * .62);position:absolute;left:calc(50% - var(--D) / 2);top:calc(50% - var(--D) / 2);width:var(--D);height:var(--D);z-index:3;opacity:var(--po,1);transform:translate(calc(var(--dx,0px) * var(--a,0)),calc(var(--dy,0px) * var(--a,0))) scale(calc(1 - (1 - var(--s,1)) * var(--a,0)))}
.plate{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 30px 70px var(--shadow)}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scan-track{position:absolute;inset:0;pointer-events:none;transform:translateY(calc(var(--sc,0) * 100%));opacity:var(--so,0)}
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand);box-shadow:0 0 18px 4px color-mix(in srgb,var(--brand) 55%,transparent)}
.scan::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:90px;background:linear-gradient(to top,color-mix(in srgb,var(--brand) 32%,transparent),transparent)}
.brackets{position:absolute;inset:-7%;width:114%;height:114%;fill:none;stroke:var(--brand-text);stroke-width:1.2;stroke-linecap:round;opacity:var(--so,0);transform:scale(calc(1.06 - var(--so,0) * .06))}
.scan-label{position:absolute;left:50%;bottom:calc(50% - var(--devh) * .31 - 64px);transform:translateX(-50%);z-index:4;margin:0;white-space:nowrap;background:var(--ink);color:var(--on-ink);font-size:12px;padding:8px 14px;border-radius:999px;opacity:var(--so,0)}

/* ---------- 04 approach ---------- */
.approach{padding-block:clamp(88px,12vw,184px) clamp(72px,9vw,140px)}
.statement{font:700 clamp(32px,4.5vw,70px)/1.08 var(--display);letter-spacing:-.045em;max-width:1120px;margin:0}
.statement .it{font-size:1.04em}
.motion .w{opacity:calc(.14 + var(--o,1) * .86)}
.principles{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.principles li{position:relative;padding-top:24px}
.principles li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left}
.principles strong{display:block;font:700 clamp(22px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.035em}
.principles li:first-child strong{color:var(--brand-text)}
.principles span{display:block;color:var(--muted);margin-top:8px;font-size:15px}
.motion .principles li::before{transform:scaleX(0);transition:transform 1.1s var(--ease) var(--d,0s)}
.motion .principles.in li::before{transform:none}
.motion .principles li>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease calc(var(--d,0s) + .15s),transform .8s var(--ease) calc(var(--d,0s) + .15s)}
.motion .principles.in li>*{opacity:1;transform:none}
.principles li:nth-child(2){--d:.12s}.principles li:nth-child(3){--d:.24s}

/* ---------- 05 karen ---------- */
.karen{padding-block:clamp(40px,7vw,110px) clamp(80px,10vw,150px)}
.karen-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,6vw,104px);align-items:center}
.arch{margin:0;position:relative;max-width:520px}
.arch-clip{aspect-ratio:1000/1334;border-radius:300px 300px 10px 10px;overflow:hidden;background:var(--surface)}
.motion .arch-clip{clip-path:inset(calc((1 - var(--q,1)) * 34%) calc((1 - var(--q,1)) * 20%) 0 calc((1 - var(--q,1)) * 20%) round 300px 300px 10px 10px)}
.arch-clip img{width:100%;height:100%;object-fit:cover}
.motion .arch-clip img{transform:scale(calc(1.18 - var(--q,1) * .18))}
.arch figcaption{display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.14em;margin-top:14px;color:var(--muted)}
.bio{min-width:0}
.bio h2{margin-bottom:28px}
.uline{position:relative;display:inline-block}
.uline svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.3em;overflow:visible;fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.uline path{stroke-dasharray:1;stroke-dashoffset:0}
.motion .bio .uline path{stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-io) .5s}
.motion .bio.in .uline path{stroke-dashoffset:0}
.roles{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.roles li{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;background:var(--bg)}
.motion .bio .roles li{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s ease,transform .6s var(--ease)}
.motion .bio.in .roles li{opacity:1;transform:none}
.bio .roles li:nth-child(1){transition-delay:.35s}.bio .roles li:nth-child(2){transition-delay:.45s}.bio .roles li:nth-child(3){transition-delay:.55s}
.bio p{color:var(--muted);max-width:52ch;margin:0 0 16px}
.bio .first{font-size:clamp(17px,1.4vw,20px);color:var(--ink)}
.textlink{display:inline-flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);font-size:14px;margin-top:10px}
.textlink .arr{transition:transform .3s var(--ease)}
.textlink:hover .arr{transform:translate(3px,-3px)}

/* ---------- 06 support ---------- */
.support{background:var(--surface);padding-block:clamp(72px,9vw,136px)}
.support-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 48px;align-items:end;margin-bottom:56px}
.support-head p{margin:0 0 20px}
.support-head .fine{font-size:12px;color:var(--muted);margin:16px 0 0;max-width:46ch}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--bg);border-radius:20px;padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 34px var(--shadow);position:relative}
.card svg{width:40px;height:40px;fill:none;stroke:var(--brand-text);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:28px}
.card h3{font:700 24px/1.15 var(--display);letter-spacing:-.03em}
.card p{margin:0;color:var(--muted);font-size:15px}
@media(min-width:900px){
  .motion .cards .card:nth-child(1){transform:translateX(calc((1 - var(--f,1)) * (100% + 24px))) rotate(calc((1 - var(--f,1)) * -8deg))}
  .motion .cards .card:nth-child(2){transform:translateY(calc((1 - var(--f,1)) * -16px));z-index:2}
  .motion .cards .card:nth-child(3){transform:translateX(calc((1 - var(--f,1)) * (-100% - 24px))) rotate(calc((1 - var(--f,1)) * 8deg))}
}

/* ---------- 07 faq ---------- */
.faq{padding-block:clamp(80px,10vw,150px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px}
.faq-grid .lead{margin-top:24px}
.qs{min-width:0;border-bottom:1px solid var(--line)}
.q{border-top:1px solid var(--line)}
.q summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:76px;font:500 clamp(17px,1.5vw,21px)/1.3 var(--display);letter-spacing:-.01em;cursor:pointer;padding-inline:4px;transition:color .25s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--brand-text)}
.q .ic{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-size:16px;transition:transform .45s var(--ease),background .3s,border-color .3s}
.q[open] .ic{transform:rotate(90deg);background:var(--brand);border-color:var(--brand)}
.q p{margin:0;padding:0 4px 26px;color:var(--muted);max-width:62ch}
.q a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.motion .q::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.motion .q[open]::details-content{block-size:auto}

/* ---------- 08 closing ---------- */
.closing{padding-block:0;position:relative}
.panel{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:var(--ink);padding-block:clamp(80px,12vw,180px)}
.motion .panel{clip-path:inset(0 calc((1 - var(--q,1)) * max(16px,5vw)) round calc((1 - var(--q,1)) * 36px))}
.blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;opacity:.8}
.b1{width:60vw;aspect-ratio:1;background:var(--leaf);left:-18vw;top:-30vw;animation:d1 18s ease-in-out infinite alternate}
.b2{width:55vw;aspect-ratio:1;background:var(--blue);right:-22vw;bottom:-32vw;animation:d2 22s ease-in-out infinite alternate}
.b3{width:32vw;aspect-ratio:1;background:var(--mist);left:38vw;top:18%;opacity:.55;animation:d3 15s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(20vw,12vw) scale(1.15)}}
@keyframes d2{to{transform:translate(-16vw,-8vw) scale(1.1)}}
@keyframes d3{to{transform:translate(-14vw,10vw) scale(.85)}}
.panel:not(.live) .blob{animation-play-state:paused}
html:not(.motion) .blob{animation:none}
.closing h2{font-size:clamp(48px,8vw,128px);line-height:.95;max-width:12ch}
.closing h2 .it{color:var(--ink)}
.closing h2 .wl{display:block;overflow:hidden;padding:0 .1em .1em 0;margin-bottom:-.1em}
.closing h2 .wl>span{display:block}
.motion .closing h2 .wl>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.motion .closing h2.in .wl>span{transform:none}
.closing h2 .wl:nth-child(2)>span{transition-delay:.1s}.closing h2 .wl:nth-child(3)>span{transition-delay:.2s}
.closing-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:end;margin-top:40px}
.closing-row p{margin:0;max-width:46ch;font-size:clamp(16px,1.3vw,18px)}
.closing-row .fine{font-size:12px;margin-top:14px;opacity:.85}
.closing .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- mobile menu ---------- */
.mmenu{display:none;position:relative}
.mmenu summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:9px;font-size:13px;padding:0 2px}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu summary i{display:grid;gap:4px;width:18px}
.mmenu summary i::before,.mmenu summary i::after{content:"";height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.mmenu[open] summary i::before{transform:translateY(2.75px) rotate(45deg)}
.mmenu[open] summary i::after{transform:translateY(-2.75px) rotate(-45deg)}
.mmenu>div{position:absolute;right:0;top:calc(100% + 14px);width:min(270px,calc(100vw - 32px));background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px var(--shadow);padding:6px 18px;display:grid}
.mmenu>div a{min-height:50px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:15px}
.mmenu>div a:last-child{border:0}
.motion .mmenu[open]>div{animation:menuIn .4s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}}

/* ---------- footer ---------- */
.site-footer{padding-block:64px 28px;font-size:13px;color:var(--muted)}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px 40px}
.foot .wordmark{color:var(--ink)}
.foot-brand p{margin:16px 0 0;line-height:1.7;max-width:28ch}
.foot h3{font:500 12px/1.3 var(--body);color:var(--ink);letter-spacing:.04em;margin:8px 0 10px}
.foot-col a{display:flex;align-items:center;min-height:40px;width:fit-content;transition:color .2s}
.foot a:hover,.foot-bottom a:hover{color:var(--brand-text)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;border-top:1px solid var(--line);margin-top:48px;padding-top:16px;font-size:12px}
.foot-bottom .links{display:flex;gap:22px}
.foot-bottom .links a{min-height:44px;display:flex;align-items:center}
.foot-bottom .it{font-size:17px}
.credits{font-size:11px;margin:10px 0 0;max-width:80ch}
@media(max-width:899px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
.reset *{transition:none!important}

/* ---------- responsive ---------- */
@media(max-width:1000px){.site-header nav{gap:18px}.nl.opt{display:none}}
@media(max-width:899px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:540px;margin-top:12px}
  .diary-head,.support-head,.karen-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .arch{max-width:440px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card svg{margin-bottom:8px}
  .closing-row{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){.site-header nav{gap:14px}.mmenu{display:block}.ticker{padding-bottom:20px}.pause{position:static;justify-self:end;margin-right:var(--gr)}.nl{display:none}.header-in{height:68px}.wordmark{font-size:25px}.principles{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px}}
@media(max-width:600px){
  .tag[data-minor]{display:none}
  .tag span{font-size:10.5px;padding:5px 9px}
  .tag .ld{width:12px}
  .tag .dot{width:9px;height:9px}
  .hand{font-size:13px;left:-1%}.hand .it{font-size:22px}
  .peek{width:186px;padding:10px 10px 0}.peek-head{font-size:13px}.peek-head img{width:22px;height:22px}
}
@media(max-width:360px){.btn{padding:0 18px;gap:14px}}

/* ---------- language switcher + credit ---------- */
.lang{display:flex;gap:2px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{min-height:36px;min-width:40px;padding:0 10px;display:grid;place-items:center;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
.lang a:hover:not([aria-current]){color:var(--ink)}
.lang a[aria-current]{background:var(--ink);color:var(--on-ink)}
.mmenu .lang{margin:12px 0 10px;justify-content:space-between}
.mmenu .lang a{flex:1;min-height:44px;font-size:14px}
.built{font-size:11px;margin:6px 0 0}
.built a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.built a:hover{color:var(--brand-text)}
@media(max-width:1180px){.site-header nav>.lang{display:none}}

/* ---------- Chinese typography: CJK fallbacks, no faux italics, looser tracking ---------- */
:lang(zh){--display:'Bricolage Grotesque','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--body:'DM Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;--serif:'DM Serif Display','Noto Serif SC','Songti SC',serif}
:lang(zh) :is(h1,h2,h3,.statement,.r1 .set,.principles strong,.step h3,.card h3){letter-spacing:-.015em}
:lang(zh) :is(.it,h2 em,.r2 .set){font-style:normal;letter-spacing:0}
:lang(zh) h1{line-height:1.12}
:lang(zh) h2,:lang(zh) .closing h2{line-height:1.15}
:lang(zh) .statement{line-height:1.35}
:lang(zh) .kicker,:lang(zh) .eyebrow{letter-spacing:.08em}