/* PASS-A (D4 #4 · D2 #19): metric-matched local fallbacks — first paint wraps like the web fonts, so the swap does not reflow the hero. size-adjust = web-font advance / local advance, measured over the dictionaries (Chrome, macOS/iOS fonts). Android: CJK system fonts are Noto (100%) */ @font-face{font-family:"Jost Fb";src:local("Arial"),local("ArialMT");size-adjust:92.9%;unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201E,U+2026,U+202F} @font-face{font-family:"KR Fb";src:local("Apple SD Gothic Neo"),local("AppleSDGothicNeo-Regular");size-adjust:106.4%;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF} @font-face{font-family:"KR Fb";src:local("Arial"),local("ArialMT");size-adjust:101%;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+202F} @font-face{font-family:"Jost Fb N";src:local("Arial"),local("ArialMT");size-adjust:87%;unicode-range:U+0020-007E} /* PASS-A2 (D4 #4): capital-heavy unit names (strip, card titles) run 6.4% narrower in Jost than prose — own fallback, so the strip does not re-wrap on swap */ @font-face{font-family:"Jost Fb";src:local("Arial"),local("ArialMT");size-adjust:92.9%;unicode-range:U+0400-045F,U+2116} /* PASS-C: Cyrillic (ru) before the on-demand glyph file lands */ @font-face{font-family:"Mont Fb";src:local("Arial"),local("ArialMT");size-adjust:110%} /* PASS-D: ru display face (Montserrat) before its glyph file lands */ @font-face{font-family:"KR Fb";src:local("Arial"),local("ArialMT");size-adjust:101%;unicode-range:U+0400-045F,U+2116} @font-face{font-family:"JP Fb";src:local("Arial"),local("ArialMT");size-adjust:95.3%;unicode-range:U+0020-007E} @font-face{font-family:"SC Fb";src:local("Arial"),local("ArialMT");size-adjust:94.4%;unicode-range:U+0020-007E} :root{ color-scheme: dark; --void:#040404; --ink:#0B0A08; --ink-2:#12100C; --panel:#17140F; --panel-2:#1E1A13; --line:rgba(195,176,127,.18); --line-strong:rgba(195,176,127,.42); --edge:rgba(195,176,127,.22); --gold:#C3B07F; --gold-hi:#EAD8A6; --gold-dim:#A0916A; --text:#EFE9DC; --muted:#AAA18E; --faint:#968E7D; --teal:#2F8F86; --live:#7CCBB3; --proto:#D6A25E; --prep:#AAA18E; --display:"Jost","Jost Fb","Noto Sans KR","KR Fb",system-ui,sans-serif; --body:"Noto Sans KR","KR Fb","Jost",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --logo:url("data:image/png;base64,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"); --gutter:clamp(16px,4vw,56px); --sec:clamp(96px,11vw,152px); /* PASS-B2 (D1 token table): one type scale, one rhythm */ --fs-micro:11px; --fs-label:12px; --fs-small:13px; --fs-meta:14px; --fs-body:15px; --fs-lead:16px; --fs-h4:18px; --fs-h3:clamp(21px,1.8vw,24px); --fs-quote:clamp(20px,2vw,27px); --fs-h2:clamp(28px,3.4vw,44px); --fs-h2-lg:clamp(32px,4.2vw,56px); --fs-display:clamp(34px,5.2vw,76px); --fs-mega:clamp(48px,7vw,112px); --lh-tight:1.1; --lh-head:1.25; --lh-snug:1.5; --lh-dense:1.6; --lh-body:1.7; --tr-caps:.28em; --sp-eyebrow:14px; --sp-head:44px; --sp-lead:14px; --sec-sm:calc(var(--sec)*.75); --ease:cubic-bezier(.16,1,.3,1); /* two glass recipes only: cards, and dense data */ --glass-1:linear-gradient(180deg,rgba(28,24,17,.55),rgba(10,9,7,.72)); --glass-2:rgba(10,9,7,.86); --glass-edge:inset 0 1px 0 rgba(255,236,196,.08); /* poster / stage layout (JS keeps these in sync with the WebGL rig) */ --cx:72vw; --cy:50vh; --sz:calc(min(100vh,60vw)*.6); --rise:0; } @media (max-width:600px){:root{--fs-body:16px}} /* PASS-B2 D1 #2: one phone body size */ @media (max-width:899px){:root{--cx:50vw;--cy:33vh;--sz:calc(min(100vw,55vh)*.58)}} @media (max-width:899px) and (orientation:landscape){:root{--cx:74vw;--cy:55vh;--sz:calc(min(100vh,60vw)*.55)}} *{box-sizing:border-box} html{background:var(--void);scroll-behavior:smooth;overflow-x:clip} @keyframes jumpin{from{opacity:.25}to{opacity:1}} main.jumped{animation:jumpin .36s var(--ease)} /* FIX-MENUJUMP-01: menu jump on phones */ section:focus{outline:none} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;word-break:keep-all;overflow-wrap:anywhere;background:var(--void);color:var(--text);font-family:var(--body);font-size:16px;line-height:var(--lh-body);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip} a{color:var(--gold-hi)} :focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px} .wrap{max-width:1240px;margin:0 auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))} .eyebrow{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--gold);font-weight:400;margin:0} .eyebrow .ko{letter-spacing:.08em} h1,h2,h3{font-family:var(--display);font-weight:300;text-wrap:balance;margin:0} h2{font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.015em} .lead{color:var(--muted);max-width:62ch;margin:0} .lead.small{font-size:var(--fs-meta)} .note{font-size:var(--fs-small);color:var(--faint);margin:0} section{position:relative;padding-block:var(--sec);border-top:0;scroll-margin-top:76px} [id^="u-"]{scroll-margin-top:84px} /* soft centred hairline instead of full-width rules */ main>section+section:not(.act)::before{content:"";position:absolute;top:0;left:50%;width:min(280px,40vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(195,176,127,.32),transparent)} .sec-head{display:grid;gap:var(--sp-eyebrow);margin-bottom:var(--sp-head)} #team{padding-bottom:clamp(140px,18vh,220px)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .p-hit,.chip,.strip a,nav a,.btn,.menu-btn{-webkit-tap-highlight-color:transparent} /* ---------- STAGE (fixed decorative layer: CSS poster + WebGL canvas) ---------- */ .stage{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:0;pointer-events:none;overflow:hidden;background: radial-gradient(120% 60% at 70% 0%,#070605 0%,#020202 55%)} .planet{position:absolute;width:260vmax;height:260vmax;left:calc(68vw - 130vmax);top:11vh;border-radius:50%; background:radial-gradient(circle at 50% 0%,#1c130a 0%,#120c07 4%,#0b0806 12%,#070605 26%,#050404 40%); box-shadow:inset 0 1.5px 0 rgba(255,236,196,.42),inset 0 18px 40px -12px rgba(255,200,120,.35),0 -3px 26px rgba(234,196,130,.16),0 -50px 180px rgba(195,150,90,.08)} .planet::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:min(1,var(--rise)); box-shadow:inset 0 1.5px 0 rgba(255,236,196,.4),inset 0 22px 50px -12px rgba(255,200,120,.3),0 -4px 30px rgba(234,196,130,.22),0 -60px 200px rgba(195,150,90,.14)} @media (pointer:coarse){.planet::after{box-shadow:inset 0 1.5px 0 rgba(255,236,196,.4),inset 0 22px 50px -12px rgba(255,200,120,.3),0 -4px 30px rgba(234,196,130,.22)}} /* PASS-A D4 #13 */ .flare{position:absolute;left:91vw;top:calc(11vh + 1.6vw);width:0;height:0} .flare::before{content:"";position:absolute;left:-30vw;top:-4vh;width:60vw;height:8vh;transform:rotate(9deg); background:radial-gradient(closest-side,rgba(255,238,200,.5),rgba(234,196,130,.14) 40%,transparent 100%);opacity:calc(.65 + var(--rise)*.35);scale:calc(1 + max(0,var(--rise) - 1)*.6) 1} /* PASS-A D2 #3: the ending landing widens the horizon flare once */ .flare::after{content:"";position:absolute;left:-7px;top:-3px;width:14px;height:6px;border-radius:50%;background:radial-gradient(closest-side,#fff6e0,rgba(255,236,196,.6) 45%,transparent);transform:scaleX(3);box-shadow:0 0 18px 4px rgba(255,228,170,.28),0 0 40px 10px rgba(234,196,130,.16)} .veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 0,rgba(4,4,4,.9) 26%,rgba(4,4,4,.35) 48%,transparent 64%)} /* UNITS-BG: horizon + flare recede while the unit cards are on stage (--calm is damped by the WebGL loop; static tiers use html.calm) */ .planet,.flare{opacity:calc(1 - var(--calm,0)*.6)} .static .planet,.static .flare,.no-gl .planet,.no-gl .flare{transition:opacity .6s var(--ease)} :is(.static,.no-gl).calm .planet,:is(.static,.no-gl).calm .flare{opacity:.4} @media (max-width:899px){ .planet{width:320vmax;height:320vmax;left:calc(74vw - 160vmax);top:7vh} .flare{left:88vw;top:calc(7vh + 1.2vw)} .veil{background:linear-gradient(180deg,transparent 0 40%,rgba(4,4,4,.55) 70%,rgba(4,4,4,.75))} } .poster{position:absolute;left:var(--cx);top:var(--cy);width:var(--sz);height:var(--sz);transform:translate(-50%,-50%);transition:opacity .6s var(--ease)} .poster .rings{position:absolute;left:50%;top:50%;width:340%;height:340%;transform:translate(-50%,-50%);overflow:visible} .poster .rings circle{fill:none;stroke:rgb(195,176,127);vector-effect:non-scaling-stroke;stroke-width:1} .poster .slit{position:absolute;left:50%;top:50%;width:12%;height:170%;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(255,244,214,.9),rgba(240,206,146,.38) 26%,rgba(195,160,100,.10) 62%,transparent)} .poster .mark{position:absolute;inset:0;filter:drop-shadow(0 0 1px rgba(255,236,196,.5)) drop-shadow(0 18px 40px rgba(0,0,0,.6))} .poster .mark.mask{background:linear-gradient(135deg,#5b4526 0%,#e8cf94 30%,#fff1c8 42%,#b39058 58%,#4e3b21 78%,#caa968 100%);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat} .poster .mark svg{width:100%;height:100%;display:block;overflow:visible} #gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s var(--ease)} .gl-on #gl{opacity:var(--dim,1)} .gl-live #gl{transition:none} /* PASS-A: after the fade-in, --dim (damped every frame) drives opacity directly */ .gl-on .poster{opacity:0;transition:opacity .35s .3s var(--ease)} /* sequential: light comes on, then the flat poster leaves */ .grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml;utf8,")} @media (pointer:coarse){.grain{display:none}} /* static (reduced-motion / no WebGL): poster dims once the hero is left behind */ .static .poster,.no-gl .poster{transition:none} .static.past-hero .poster,.no-gl.past-hero .poster{opacity:.28;transition:opacity .6s var(--ease)} .static.calm .poster,.no-gl.calm .poster{opacity:.16!important} /* beats the phone scroll fade's inline style */ .static .poster :is(.mark,.slit),.no-gl .poster :is(.mark,.slit){transition:opacity .6s var(--ease)} :is(.static,.no-gl).calm .poster :is(.mark,.slit){opacity:0} /* UNITS-BG: static tiers keep only faint rings behind the cards (mark and slit step out) */ :is(.static,.no-gl):is([data-sc="act"],[data-sc="model"],[data-sc="method"],[data-sc="now"],[data-sc="team"]) .poster{opacity:0!important} /* PASS-A D2 #21 */ :is(.static,.no-gl)[data-sc="contact"] .poster{opacity:.9!important} @media (max-width:899px){:is(.static,.no-gl)[data-sc="contact"] .poster{opacity:.42!important}} /* phone: the mark sits under the contact copy */ /* ---------- chrome ---------- */ .draft,header.top,main,footer.foot{position:relative;z-index:2} .draft{background:rgba(30,26,19,.9);border-bottom:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)} .draft .wrap{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;padding-block:8px} .draft b{color:var(--gold);font-weight:500;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em} @media (max-width:720px){.draft .wrap{flex-wrap:wrap;gap:2px 12px;padding-block:6px}.draft span{white-space:normal;line-height:1.5}.draft b{white-space:nowrap;flex:none}} /* PASS-B1 D3 #16: the notice wraps instead of truncating */ header.top{position:sticky;top:0;z-index:20;background:rgba(6,6,5,.62);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:transform .5s var(--ease),background .3s} @media (pointer:coarse){header.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,6,5,.92)}} header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;transition:padding .5s var(--ease)} html.past-hero header.top .wrap{padding-block:9px} html.past-hero header.top .brand .mono-mark{width:26px;height:26px} html.in-act header.top{transform:translateY(-100%)} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px} .mono-mark{display:inline-block;background:linear-gradient(135deg,#8a7040,#ead8a6 45%,#b8975c);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat} .brand .mono-mark{width:32px;height:32px;transition:width .5s var(--ease),height .5s var(--ease)} .brand span{font-family:var(--display);font-weight:400;letter-spacing:.38em;color:var(--gold);font-size:16px} .nav-r{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)} nav.main{display:flex;gap:clamp(12px,2.2vw,28px);flex-wrap:wrap} nav.main a{position:relative;color:var(--text);text-decoration:none;font-family:var(--display);font-size:var(--fs-meta);opacity:.78;letter-spacing:.02em;transition:opacity .18s var(--ease),color .18s var(--ease)} nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold-hi);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} nav.main a:hover,nav.main a.cur{opacity:1;color:var(--gold-hi)} nav.main a.cur::after{transform:scaleX(1)} .dial{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold-dim);letter-spacing:.06em;white-space:nowrap} .dial svg{width:22px;height:22px;transform:rotate(-90deg)} .dial circle{fill:none;stroke-width:1.2} .dial .d0{stroke:var(--line)} .dial .d1{stroke:var(--gold-hi);stroke-dasharray:56.55;stroke-dashoffset:49.8;transition:stroke-dashoffset 1s var(--ease)} .menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--text);font-family:var(--body);font-size:var(--fs-meta);cursor:pointer} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#0B0A08;border-top:1px solid var(--line-strong);border-radius:16px 16px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -30px 60px rgba(0,0,0,.6);max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain} /* PASS-B1 D3 #1: 400% zoom / landscape phones scroll inside the sheet */ @media (max-height:480px){.sheet a{min-height:44px;font-size:16px}.sheet .lang{padding-top:4px}} .sheet[hidden]{display:none} .sheet nav{display:grid} .sheet a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-family:var(--display);font-size:17px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)} .sheet a.cur{color:var(--gold-hi)} .sheet .close{display:flex;justify-content:flex-end} .sheet .close button{min-height:44px;min-width:44px;background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer} .scrim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.55)} .scrim[hidden]{display:none} @media (max-width:720px){ nav.main,.dial{display:none} .menu-btn{display:inline-flex} header.top .wrap{flex-wrap:nowrap;padding-block:4px} html.past-hero header.top .wrap{padding-block:4px} header.top .brand .mono-mark{width:26px;height:26px} .brand span{font-size:var(--fs-meta)} section{scroll-margin-top:56px} } /* ---------- hero ---------- */ .hero{padding-block:clamp(40px,6.5vh,88px) clamp(48px,7vw,96px);min-height:calc(100svh - 104px)} .hero .wrap{display:grid;gap:22px} .hero .copy{display:grid;gap:22px;max-width:min(720px,56vw);text-shadow:0 0 30px rgba(4,4,4,.7)} .hero h1{font-size:clamp(36px,4.5vw,68px);line-height:1.14;letter-spacing:-.025em;font-weight:300} .hero h1 em{font-style:normal;color:var(--gold-hi);background:linear-gradient(100deg,#c9a868 0%,#f6e6bb 38%,#d9bd82 60%,#f2dfae 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none} .hero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--text);opacity:.88;max-width:44ch;line-height:1.7;margin:0} .hero .sub b{font-weight:400;color:var(--gold-hi);display:block;margin-bottom:2px} .m-space{display:none} @media (max-width:899px){ .hero{padding-top:0} .m-space{display:block;height:min(36vh,72vw)} .hero .copy{max-width:none} } @media (max-width:899px) and (max-height:700px){.m-space{height:min(28vh,60vw)}} @media (max-width:899px) and (orientation:landscape){.m-space{display:none}.hero .copy{max-width:56vw}.hero{padding-top:32px}} /* unit strip: 5-second answer */ .strip{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 24px;max-width:min(860px,62vw)} @media (min-width:900px) and (max-width:1279px){.strip{display:flex;flex-wrap:wrap;gap:8px 20px}} .strip a{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--text);font-family:"Jost","Jost Fb N",var(--display);font-size:var(--fs-small);letter-spacing:.02em;opacity:.9;white-space:nowrap} .strip small{font-family:var(--body);font-size:var(--fs-label);color:var(--faint);letter-spacing:0;margin-left:1px} .strip a:hover small{color:var(--muted)} .strip .dot{align-self:center} /* PASS-B2 D1 #15: name and note share a baseline; the dot stays centred */ html:is(:lang(en),:lang(fr),:lang(it),:lang(ru)) .strip small{font-family:var(--display)} .strip a:hover{color:var(--gold-hi);opacity:1} .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;display:inline-block} .dot.live{color:var(--live)} .dot.proto{color:var(--proto)} .dot.prep{color:var(--prep)} .dot.idea{color:var(--faint);background:transparent;border:1px solid currentColor;opacity:.85} @media (max-width:899px){.strip{display:flex;flex-wrap:wrap;max-width:none;gap:8px 16px}.strip a{font-size:var(--fs-meta)}} @media (max-width:899px) and (orientation:landscape){.strip{max-width:56vw}} /* who selector */ .who{display:grid;gap:16px;margin-top:22px;max-width:min(880px,58vw)} @media (max-width:899px){.who{max-width:none}} .who-q{font-family:var(--body);color:var(--gold);font-size:var(--fs-body);letter-spacing:.04em;margin:0;font-weight:400} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{appearance:none;border:1px solid var(--line-strong);background:rgba(8,7,6,.45);color:var(--text);font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-head);font-weight:300;padding:10px 17px;border-radius:999px;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)} .chip:hover{background:rgba(195,176,127,.08);border-color:var(--gold)} .chip:active{transform:scale(.97)} .chip[aria-pressed="true"]{background:rgba(234,216,166,.14);border-color:var(--gold-hi);color:var(--gold-hi);text-shadow:0 0 .5px currentColor,0 0 .5px currentColor;box-shadow:inset 0 0 0 1px rgba(234,216,166,.25),0 0 24px -6px rgba(234,216,166,.35)} .answer{position:relative;margin:0;border:1px solid var(--edge);background:var(--glass-1);box-shadow:var(--glass-edge);border-radius:8px;padding:22px clamp(18px,3vw,30px);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 28px} @media (min-width:900px){.answer{grid-template-columns:1fr 1.15fr auto 1.35fr}} @media (max-width:600px){.answer{grid-template-columns:1fr auto}.answer>div:nth-child(2),.answer>div:nth-child(4){grid-column:1/-1}.answer>div:nth-child(3){grid-row:1;grid-column:2}} .answer dt,.board th,.p-meta b,.entry dt,.person .role-en{font-family:var(--body);font-size:var(--fs-label);letter-spacing:.04em;font-weight:400;color:var(--gold-dim);text-transform:none} .answer dt{margin-bottom:4px} .answer dd{margin:0;font-size:var(--fs-body);line-height:1.6} .answer .unit-link{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--line-strong)} /* stage badge (one grammar: 6px dot; idea = ring) */ .stage-b{display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:var(--fs-label);letter-spacing:.02em;padding:3px 10px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;font-weight:400} .stage-b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .stage-b.live{color:var(--live)} .stage-b.proto{color:var(--proto)} .stage-b.prep{color:var(--prep)} .stage-b.idea{color:var(--faint);opacity:.85} .stage-b.idea::before{background:transparent;border:1px solid currentColor;box-sizing:border-box} /* ---------- aperture act: the opening gets its own stage ---------- */ .act{min-height:130vh;padding:0} .act-inner{position:sticky;top:0;height:100vh;display:grid;align-content:end;justify-items:center;padding-bottom:12vh;text-align:center} .act h2{font-size:var(--fs-display);font-weight:200;letter-spacing:-.02em;text-shadow:0 0 40px rgba(2,2,2,.9)} .act .eyebrow{margin-bottom:var(--sp-eyebrow)} .act .lead{margin:var(--sp-lead) auto 0;max-width:40ch;text-wrap:balance;text-align:center;text-shadow:0 0 24px rgba(2,2,2,.9)} @media (max-width:899px){.act{min-height:115svh}.act-inner{height:100svh;padding-bottom:14svh}} /* PASS-C (FINAL-V1 #6): the shrinking monogram passes behind the act text — a tight dark halo keeps every letter on black */ .act .eyebrow,.act .lead{text-shadow:0 0 18px #040404,0 0 3px #040404}.act h2{text-shadow:0 0 40px rgba(2,2,2,.9),0 0 3px #040404} /* PASS-C (FINAL-V1 #4): phones — the title takes its two lines from the start, so the tracking animation (-.04em -> .02em) never re-wraps it */ @media (max-width:599px){#act-h{max-width:10.5em;margin-inline:auto;text-wrap:balance}} :is(.static,.no-gl):not(.paused) .act{min-height:0}:is(.static,.no-gl):not(.paused) .act-inner{position:static;height:auto;padding-block:96px} /* PASS-B1: a paused page keeps the scroll layout (no jump when toggling) */ #universe{padding-top:clamp(104px,calc(var(--sec)*.84),128px)} /* ---------- universe: glass card accordion (founder mockup) ---------- */ .panels{position:relative;display:flex;gap:12px;height:560px;margin-bottom:56px;overflow-anchor:none} .panels::after{content:"";position:absolute;left:6%;right:6%;bottom:-26px;height:26px;background:radial-gradient(50% 100% at 50% 0,rgba(234,216,166,.16),transparent 70%);filter:blur(8px);pointer-events:none} .panel{position:relative;flex:1 1 0;min-width:0;border:1px solid var(--edge);border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(28,24,17,.56),rgba(10,9,7,.68));box-shadow:var(--glass-edge),0 30px 60px -30px rgba(0,0,0,.8);transition:flex-grow .95s var(--ease),border-color .18s var(--ease);color:inherit} @media (pointer:fine){.panel{-webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05)}} /* UNITS-BG: frosted, still glass: dust behind reads as soft light, not specks */ .panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,240,205,.06),transparent 22%);z-index:1} .panel[data-open="true"]::after{content:"";position:absolute;inset:auto 0 0;height:64%;background:linear-gradient(180deg,transparent,rgba(9,8,6,.84) 42%);border-radius:0 0 8px 8px;z-index:3;pointer-events:none} .panel:not([data-open="true"]):hover{border-color:rgba(234,216,166,.45);flex-grow:1.18} .panel:not([data-open="true"]):hover .art{opacity:.75} .panel[data-open="true"]{flex-grow:4.2;border-color:rgba(234,216,166,.5)} .panel .art{position:absolute;inset:0;opacity:.5;transition:opacity .6s var(--ease)} .panel[data-open="true"] .art{opacity:.95;background:radial-gradient(60% 45% at 60% 55%,rgba(255,214,150,.16),transparent 70%)} .panel .art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 4px rgba(233,201,139,.45))} .panel[data-open="true"] .art svg{filter:drop-shadow(0 0 6px rgba(233,201,139,.55)) drop-shadow(0 0 18px rgba(233,201,139,.25))} .panel:has(.p-hit:focus-visible){outline:2px solid var(--gold-hi);outline-offset:3px} .panel .p-hit:focus-visible{outline-offset:-4px} .panel .p-top{position:absolute;left:22px;right:22px;top:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;pointer-events:none;z-index:2} .panel .p-hit{position:absolute;inset:0;z-index:3;appearance:none;background:transparent;border:0;border-radius:8px;cursor:pointer;color:transparent;font-size:0} .panel .p-hit:active~.p-top .p-name{color:var(--gold-hi)} .panel .p-name{font-family:"Jost","Jost Fb N",var(--display);font-size:24px;letter-spacing:.06em;font-weight:300;white-space:nowrap} .panel .p-tag{font-family:var(--display);font-size:var(--fs-micro);letter-spacing:var(--tr-caps);color:var(--gold);text-transform:uppercase;white-space:nowrap;order:-1} .panel .p-foot{position:absolute;left:22px;bottom:20px;right:22px;z-index:2;transition:opacity .18s var(--ease)} .panel .p-body{position:absolute;left:clamp(22px,2.4vw,36px);right:clamp(22px,2.4vw,36px);bottom:clamp(22px,2.4vw,32px);display:grid;gap:12px;max-width:540px;opacity:0;transform:translateY(12px);transition:opacity .6s .2s var(--ease),transform .95s .2s var(--ease);pointer-events:none;z-index:4} .panel[data-open="true"] .p-body{opacity:1;transform:none;pointer-events:auto} .panel[data-open="true"] .p-top{text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.75)} /* UNITS-BG: title over photo art */ .panel .p-body::before{content:"";position:absolute;z-index:-1;left:-64px;right:-1200px;top:-56px;bottom:-48px;pointer-events:none;background:linear-gradient(180deg,rgba(9,8,6,0),rgba(9,8,6,.74) 56px,rgba(9,8,6,.86))} /* UNITS-BG: scrim follows the copy (any language length), fades with the body */ @media (max-width:767px),(orientation:landscape) and (max-height:500px){.panel .p-body::before{top:-32px;background:linear-gradient(180deg,rgba(9,8,6,0),rgba(9,8,6,.72) 48px,rgba(9,8,6,.86))}} /* phone: keep the art face above the badge */ .panel[data-open="true"] .p-foot{opacity:0} .panel .p-line{font-size:var(--fs-quote);font-weight:400;line-height:var(--lh-snug);font-family:var(--body);margin:0} .panel .p-body:focus{outline:none} .panel:has(.p-body:focus-visible){outline:2px solid var(--gold-hi);outline-offset:3px} /* PASS-B1 D3 #9: the card that received focus shows it */ .panel .p-desc{color:var(--text);opacity:.86;font-size:var(--fs-body);line-height:var(--lh-body);margin:0} .panel .p-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:var(--fs-meta);color:#C4BBA7} /* UNITS-BG: a step brighter than --muted so meta holds 7:1 on the glass */ .panel .p-meta b{padding-top:1px;color:var(--gold)} /* UNITS-BG: labels gold (was gold-dim) -> >=7:1 */ .panel .p-meta .sw-link.sw-off,.panel .p-meta .sw-url{color:#C4BBA7}.panel .p-meta .sw-link .soon{color:#B8AF9B} .panel[data-open="false"] .p-tag{display:none} @media (min-width:768px) and (min-height:501px){ .panel[data-open="false"] .p-name{writing-mode:vertical-rl;text-orientation:sideways;font-size:20px;letter-spacing:.14em} .panel[data-open="false"] .p-name .ko{letter-spacing:.04em} .panel[data-open="false"] .p-foot .stage-b{font-size:0;gap:0;padding:0;border:0} } @media (min-width:768px) and (max-width:1023px) and (min-height:501px){.panels{height:520px}} .panels-note{margin:0;font-size:var(--fs-small);color:var(--faint)} @media (max-width:767px),(orientation:landscape) and (max-height:500px){ .panels{flex-direction:column;height:auto;margin-bottom:18px} .panels::after{display:none} .panel{min-height:88px;flex:none;transition:min-height .6s var(--ease),border-color .18s var(--ease)} .panel:not([data-open="true"]):hover{flex-grow:0} .panel .art{opacity:.3} .panel[data-open="true"]{min-height:480px} .panel .p-foot{top:24px;bottom:auto;left:auto;right:20px;width:auto} } @media (prefers-reduced-motion:reduce){.panel,.panel .p-body,.panel .art{transition:none}} @media (pointer:coarse){ .panel .art svg,.panel[data-open="true"] .art svg{filter:none} .panel[data-open="true"] .art{background:radial-gradient(60% 45% at 60% 55%,rgba(255,214,150,.2),transparent 70%),radial-gradient(closest-side at 60% 55%,rgba(233,201,139,.12),transparent)} .panel{contain:layout paint} } /* ---------- shared glass ---------- */ .card{position:relative;border:1px solid var(--edge);border-radius:8px;background:var(--glass-1);box-shadow:var(--glass-edge)} .card::before,.board::before,.ledger::before,.answer::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,240,205,.06),transparent 22%)} /* ---------- platform x agency ---------- */ .pxa{display:grid;grid-template-columns:1fr minmax(120px,auto) 1fr;gap:clamp(16px,3vw,36px);align-items:stretch} .pxa .col{padding:28px clamp(18px,2.6vw,32px);display:grid;gap:16px;grid-template-rows:auto auto 1fr auto;align-content:start} .pxa .col h3{font-size:var(--fs-h3);letter-spacing:.01em;line-height:var(--lh-head)} .pxa .col ul{align-self:start} .pxa .col .en{font-family:var(--display);color:var(--gold);font-size:var(--fs-label);letter-spacing:var(--tr-caps);text-transform:uppercase;margin:0} .pxa ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pxa li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:var(--fs-body)} .pxa li span:last-child{color:var(--muted);font-size:var(--fs-meta);text-align:right} .pxa .x{display:grid;place-items:center;align-content:center;gap:10px;text-align:center;color:var(--gold);font-family:var(--display)} .pxa .x .big{font-size:60px;font-weight:300;line-height:1;color:var(--gold-hi)} .pxa .x small{font-family:var(--body);font-size:var(--fs-small);color:var(--muted);max-width:14ch;line-height:var(--lh-snug);background:rgba(11,10,8,.8);padding:4px 12px;border-radius:12px} .pxa-rule{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:14px;background:linear-gradient(90deg,rgba(5,5,4,.72),rgba(5,5,4,.6) 70%,rgba(5,5,4,.35));border-radius:8px} .pxa-rule div{padding:4px clamp(16px,2.4vw,32px);font-size:var(--fs-meta);color:var(--muted);line-height:var(--lh-dense)} .pxa-rule div:first-child{padding-left:clamp(12px,1.4vw,18px)} .pxa-rule div+div{border-left:1px solid var(--line)} .pxa-rule b{display:flex;align-items:center;gap:10px;color:var(--gold-hi);font-weight:400;font-size:var(--fs-body);margin-bottom:6px} .pxa-rule b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px 1px rgba(234,216,166,.55);flex:none} @media (max-width:820px){.pxa-rule{grid-template-columns:1fr;gap:18px}.pxa-rule div{padding:0}.pxa-rule div+div{border-left:0;border-top:1px solid var(--line);padding-top:16px}} @media (max-width:820px){.pxa{grid-template-columns:1fr}.pxa .x{grid-auto-flow:column;justify-content:center}} /* ---------- method ---------- */ .method{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start} .principles{list-style:none;margin:0;padding:0;display:grid} .principles li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding-block:22px;border-bottom:1px solid var(--line);transition:border-color .6s var(--ease)} .principles li:first-child{border-top:1px solid var(--line)} .principles .k{font-family:var(--mono);font-size:var(--fs-label);color:var(--gold-dim);padding-top:5px;letter-spacing:.06em;transition:color .6s var(--ease)} .principles h3{font-family:var(--body);font-weight:400;font-size:var(--fs-h4);line-height:var(--lh-snug)} .principles p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-body)} .principles li.on .k{color:var(--gold-hi)} .principles li.on{border-bottom-color:var(--line-strong)} .ledger{position:sticky;top:96px;border:1px solid var(--edge);border-radius:8px;background:var(--glass-2);box-shadow:var(--glass-edge);overflow:hidden} .ledger header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-label);color:var(--gold);letter-spacing:.08em} .entries{display:grid} .entry{position:relative;padding:16px 18px 16px 20px;border-bottom:1px solid var(--line);display:grid;gap:6px;font-size:var(--fs-meta);transition:background .6s var(--ease)} .entry::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--gold-hi);opacity:0;transition:opacity .6s var(--ease);box-shadow:0 0 12px rgba(234,216,166,.6)} .entry.lit{background:rgba(195,176,127,.06)} .entry.lit::before{opacity:1} .entry:last-child{border-bottom:0} .entry .id{font-family:var(--mono);color:var(--gold-hi);font-size:var(--fs-label)} .entry .t{color:var(--text);font-weight:400;font-size:var(--fs-body)} .entry dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;color:var(--muted);align-items:baseline} /* PASS-B2 D1 #16: one value column for every card (the widest label sets it) */ @supports (grid-template-columns:subgrid){.entries{grid-template-columns:max-content minmax(0,1fr)}.entry{grid-column:1/-1;grid-template-columns:subgrid;column-gap:12px}.entry>.id,.entry>.t{grid-column:1/-1}.entry dl{grid-column:1/-1;grid-template-columns:subgrid}} .entry dt{color:var(--faint);padding-top:1px} .entry dd{margin:0} .ledger-note{margin:0;padding:12px 18px;font-size:var(--fs-label);color:var(--faint);border-top:1px solid var(--line)} @media (max-width:900px){.method{grid-template-columns:1fr}.ledger{position:static}} /* ---------- now board ---------- */ .board{position:relative;overflow-x:auto;border:1px solid var(--edge);border-radius:8px;background:var(--glass-2);box-shadow:var(--glass-edge)} .board table{width:100%;border-collapse:collapse;min-width:720px;font-size:var(--fs-body)} .board th,.board td{text-align:left;padding:20px 22px;border-bottom:1px solid rgba(195,176,127,.10);vertical-align:baseline} /* PASS-B2 D1 #13: unit name, badge and text share the first baseline */ .board th{padding-block:14px;background:none;border-bottom-color:var(--line)} .board td{min-height:64px} .board tr:last-child :is(td,th){border-bottom:0} .board tbody th{padding:20px 22px;border-bottom:1px solid rgba(195,176,127,.10);font-family:var(--display);font-weight:300;font-size:var(--fs-h4);letter-spacing:.01em;color:var(--text);white-space:nowrap} /* PASS-B1 D3 #4: unit name is the row header */ .board tr.is-live :is(td,th){background:rgba(124,203,179,.05)} .board tr.is-live th{box-shadow:inset 2px 0 0 var(--live)} .row-link{display:block;margin-top:6px;font-family:var(--body);font-size:var(--fs-label);white-space:normal} .board td.muted{color:var(--muted)} @media (min-width:601px) and (max-width:899px){.board table{min-width:0}.board :is(th,td),.board tbody th{padding-inline:14px}.board tbody th{white-space:normal;width:19%}} /* PASS-C: tablets fit the table (was 15–169px of sideways scroll after the copy-edit) */ @media (max-width:600px){ .board table{min-width:0}.board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* PASS-B1 D3 #4: headers stay for assistive tech */ .board tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 18px;border-bottom:1px solid var(--line)} .board tr:last-child{border-bottom:0} .board td,.board tbody th{padding:0;border:0}.board td:nth-child(3),.board td:nth-child(4){grid-column:1/-1} .board td[data-l]::before{content:attr(data-l);display:block;font-family:var(--body);font-size:var(--fs-label);letter-spacing:.04em;color:var(--gold-dim);margin-bottom:2px} .board td:nth-child(2)[data-l]::before{content:none} } .gate{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--fs-meta);color:var(--muted)} .gate b{color:var(--gold);font-weight:400} /* ---------- team ---------- */ .team{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:stretch} .orgcard{display:flex;flex-direction:column;justify-content:center;padding:18px 18px 20px} .orgwrap svg.org-tall{display:none} .people{align-content:center} .team>*{min-width:0} .people{list-style:none;margin:0;padding:6px clamp(18px,2.4vw,28px);display:grid} .person{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-bottom:1px solid var(--line)} .person:last-child{border-bottom:0} .person b{display:flex;align-items:center;gap:10px;font-weight:400;font-size:var(--fs-lead)} .person span{color:var(--muted);font-size:var(--fs-body)} .person .ai{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--teal);border:1px solid currentColor;border-radius:4px;padding:1px 5px;font-weight:400;font-style:normal} .person .num{color:var(--gold-hi);font-family:var(--display);font-weight:400} .person b>span{font-size:inherit;color:inherit} .orgwrap{padding:0} .orgwrap svg{display:block;width:100%;height:auto} .org-cap{font-size:var(--fs-small);color:var(--faint);margin:16px 4px 0;padding-top:14px;border-top:1px solid var(--line)} @media (max-width:600px){.orgwrap svg.org-wide{display:none}.orgwrap svg.org-tall{display:block;max-width:420px;margin:0 auto}} @media (max-width:820px){.team{grid-template-columns:minmax(0,1fr)}} /* ---------- signal ---------- */ .signal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .sig{padding:22px 20px;display:grid;gap:8px;align-content:start} .sig .k{font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold);letter-spacing:.1em} .sig p{margin:0;color:var(--muted);font-size:var(--fs-body)} .sig b{font-weight:400;color:var(--text);font-size:var(--fs-lead)} /* ---------- contact ---------- */ #contact{min-height:88vh;display:grid;align-content:center} #contact>.wrap{width:100%} .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--sp-head) clamp(20px,4vw,48px);align-items:start} .contact .sec-head{margin:0} .contact h2{font-size:var(--fs-h2-lg)} .contact h2 em{font-style:normal;color:var(--gold-hi)} @media (max-width:899px){#contact h2,#contact .lead{text-shadow:0 0 24px #0B0A08,0 0 2px #0B0A08}#contact .sec-head{background:radial-gradient(80% 70% at 30% 50%,rgba(4,4,4,.7),transparent)}} .addr{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px} .addr code{font-family:var(--mono);font-size:var(--fs-h4);color:var(--gold-hi);user-select:all;background:var(--glass-2);border:1px solid var(--line-strong);padding:9px 15px;border-radius:8px} .btn{appearance:none;border:1px solid var(--line-strong);background:rgba(8,7,6,.5);color:var(--text);padding:9px 17px;border-radius:999px;font-family:var(--body);font-size:var(--fs-meta);line-height:var(--lh-head);cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease)} .btn:hover{border-color:var(--gold);color:var(--gold-hi)} .btn:active{transform:scale(.97)} #copy{min-width:9em;text-align:center;background:linear-gradient(180deg,#e2cc95,#b99c62);color:#14110b;border-color:#e2cc95;font-weight:500} #copy:hover{background:linear-gradient(180deg,#ecd8a3,#c4a76d);color:#14110b} #copy.ok{background:rgba(124,203,179,.1);border-color:var(--live);color:var(--live)} .topics{list-style:none;margin:0;padding:22px clamp(18px,2.4vw,28px);display:grid;gap:10px} .topics li{display:flex;gap:14px;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px;font-size:var(--fs-body)} .topics li:last-child{border-bottom:0;padding-bottom:0} .topics li span:last-child{color:var(--muted);font-size:var(--fs-meta);text-align:right} @media (min-width:900px){.contact{grid-template-columns:minmax(0,640px)}} @media (max-width:899px){#contact{min-height:0}.contact{grid-template-columns:1fr;row-gap:var(--sp-head)}.topics.card{background:var(--glass-2)}} footer.foot{padding-block:120px 72px;color:var(--faint);font-size:var(--fs-small);background:linear-gradient(180deg,rgba(4,4,4,0) 0,rgba(4,4,4,.7) 38%,rgba(4,4,4,.96) 70%)} .foot-line{text-shadow:0 0 24px #040404,0 0 3px #040404;font-family:var(--display);font-weight:200;font-size:clamp(24px,3vw,40px);line-height:var(--lh-head);letter-spacing:-.01em;color:var(--text);margin:0 0 18px!important} .foot-line em{font-style:normal;color:var(--gold-hi)} .foot-en{font-family:var(--display);font-size:var(--fs-small);line-height:var(--lh-body);color:var(--muted);letter-spacing:.01em} footer.foot::before{content:"";position:absolute;top:0;left:50%;width:min(280px,40vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(195,176,127,.32),transparent)} footer.foot .wrap{display:grid;gap:22px} .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center} .foot-nav{display:flex;flex-wrap:wrap;gap:6px 22px} .foot-nav a{color:var(--text);opacity:.7;font-family:var(--display);font-size:var(--fs-small);text-decoration:none} .foot-nav a:hover{opacity:1;color:var(--gold-hi)} .foot .brand span{font-size:var(--fs-meta)} .foot .brand .mono-mark{width:24px;height:24px} .ai-note{position:relative;padding:0;color:var(--faint);font-size:var(--fs-small);max-width:90ch;line-height:var(--lh-dense);margin:0} .ai-note b{color:var(--gold-dim);font-weight:400} .foot p{margin:0} .foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px} .foot-end .mono{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--gold-dim)} /* section text over the stage stays readable */ section .sec-head,.pxa-rule,.gate,.road,.sig-line{text-shadow:0 0 24px rgba(4,4,4,.85)} /* ---------- touch / phone comfort ---------- */ @media (pointer:coarse){ .strip a{min-height:44px;padding-block:10px}.strip{gap:0 18px} .chip{min-height:44px}.btn{min-height:44px;padding-inline:20px} .answer .unit-link{display:inline-block;padding:10px 0;margin:-10px 0} .foot-nav a{display:inline-flex;align-items:center;min-height:44px} } @media (max-width:600px){ .p-desc,.principles p,.sig p,.pxa-rule div,.entry,.entry .t,.board table,.answer dd,.person span,.topics li{font-size:var(--fs-body)} .panel .p-desc{font-size:var(--fs-body)} .p-meta,.panel .p-meta,.pxa li span:last-child,.topics li span:last-child,.gate,.panels-note,.org-cap,.ledger-note,.note,.lead.small{font-size:var(--fs-meta)} .answer dt,.board td[data-l]::before,.entry dt,.stage-b,.p-meta b{font-size:var(--fs-label)} } /* ---------- why (C1#3 · K1) + founder note (K2) ---------- */ #why{padding-top:var(--sec-sm)} .why-col{max-width:min(820px,56vw)} .cap-table{border-top:1px solid var(--line-strong)} .cap-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,2vw,28px);padding:15px 0;border-bottom:1px solid rgba(195,176,127,.12);font-size:var(--fs-body);line-height:1.6;align-items:baseline} .cap-row>:nth-child(1){color:var(--gold-hi);font-weight:400} .cap-row>:nth-child(2){color:var(--faint)} .cap-row>:nth-child(3){color:var(--text);position:relative;padding-left:22px} .cap-row>:nth-child(3)::before{content:"→";position:absolute;left:0;color:var(--gold);font-family:var(--display)} .cap-row.cap-h{padding-block:10px;font-size:var(--fs-label);letter-spacing:.04em} .cap-row.cap-h>*{color:var(--gold-dim)!important;font-weight:400} .cap-row.cap-h>:nth-child(3)::before{content:none} .founder{margin:clamp(64px,8vw,104px) 0 0;padding:0} .founder .eyebrow{margin-bottom:var(--sp-eyebrow)} .founder blockquote{margin:0;display:grid;gap:10px;text-shadow:0 0 24px rgba(4,4,4,.85);border-left:1px solid var(--line-strong);padding-left:clamp(18px,2.4vw,32px)} .founder blockquote p{max-width:23em;text-wrap:pretty;margin:0;font-family:var(--display);font-weight:200;font-size:var(--fs-quote);line-height:var(--lh-snug);letter-spacing:-.005em;color:var(--text)} .founder blockquote em{font-style:normal;color:var(--gold-hi);font-weight:inherit} .founder figcaption{margin-top:20px;padding-left:clamp(18px,2.4vw,32px);font-size:var(--fs-small);color:var(--muted);letter-spacing:.04em} @media (max-width:899px){.why-col{max-width:none}} @media (max-width:600px){ .cap-table{border-top:0}.cap-row.cap-h{display:none} .cap-row{grid-template-columns:1fr;gap:2px;padding:14px 0;font-size:var(--fs-body)} .cap-row>:nth-child(1){font-size:var(--fs-small);letter-spacing:.02em} .cap-row>:nth-child(2)::before{content:attr(data-l) " · ";color:var(--gold-dim);font-size:var(--fs-label)} } /* ---------- now: the one large-type moment, centred (C2#2A · C2#3 · K12) ---------- */ .now-head{min-height:62vh;align-content:center;justify-items:center;text-align:center;margin-bottom:var(--sp-head);row-gap:clamp(14px,1.6vw,26px)} .now-head .lead{margin-inline:auto;max-width:46ch} .now-h{font-size:var(--fs-mega)!important;font-weight:200!important;letter-spacing:-.03em!important;line-height:var(--lh-tight)!important} .now-body{max-width:1040px;margin:0 auto} .gate{justify-content:center} .road{margin-top:clamp(56px,7vw,88px)} .road-h{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:var(--sp-eyebrow);text-align:center} .road-h .ko{letter-spacing:.08em} .road-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative} .road-list::before{content:"";position:absolute;left:10%;right:10%;top:5px;height:1px;background:linear-gradient(90deg,var(--gold-hi),rgba(195,176,127,.4) 30%,rgba(195,176,127,.14))} .road-list li{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding-top:24px} .road-list li::before{content:"";position:absolute;top:0;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;border:1px solid var(--gold);background:var(--void)} .road-list li:first-child::before{background:var(--gold-hi);box-shadow:0 0 12px 2px rgba(234,216,166,.45)} .road-list .rk{font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold-dim);letter-spacing:.08em} .road-list b{font-weight:400;font-size:var(--fs-body);color:var(--text)} .road-list li{padding-inline:8px}.road-list b{text-wrap:balance;line-height:var(--lh-snug)} /* PASS-C: longer phase names (copy-edit, ru) wrap in balanced lines with a gutter instead of touching the neighbour */ .road-list .ry{font-size:var(--fs-small);color:var(--muted)} .sig-line{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:auto 1fr;gap:10px 22px;align-items:baseline;padding:18px 0 0;border-top:1px solid var(--line)} .sig-line p{margin:0} .sig-name{font-family:var(--display);font-size:var(--fs-body);letter-spacing:.04em;display:flex;align-items:center;gap:10px;white-space:nowrap} .sig-t{font-size:var(--fs-meta);color:var(--muted)} .sig-t b{color:var(--text);font-weight:400;margin-right:6px} @media (max-width:720px){ .road-list{grid-template-columns:1fr;gap:0} .road-list::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold-hi),rgba(195,176,127,.14))} .road-list li{grid-template-columns:34px auto 1fr;justify-items:start;text-align:left;padding:0 0 16px 26px;gap:10px;align-items:baseline} .road-list li::before{left:0;margin-left:0;top:4px} .road-list .ry{justify-self:end} .sig-line{grid-template-columns:1fr} .now-head{min-height:52svh} } @media (max-width:600px){ .board tr{padding:14px 16px;gap:4px 12px} .board td.nx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)} .board tr.is-live{background:rgba(124,203,179,.05);box-shadow:inset 2px 0 0 var(--live)} .board tr.is-live :is(td,th){background:none;box-shadow:none} .board tbody th{font-size:var(--fs-h4)} } /* ---------- K15: title light sweep (once) + ledger stamp; reduced motion keeps plain text ---------- */ html.sweep h2.sw{background:linear-gradient(100deg,var(--text) 40%,#f6e6bb 50%,var(--text) 60%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 16px rgba(4,4,4,.8))} html.sweep h2.sw.swept{background-position:0 0;transition:background-position 1.4s var(--ease) .35s} html.sweep h2.sw em{-webkit-text-fill-color:var(--gold-hi)} .entry .id{position:relative;display:inline-block;width:max-content} .entry .id::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid var(--gold-hi);opacity:0;transform:scale(.6);pointer-events:none} .entry.lit .id::after{animation:stamp .6s cubic-bezier(.16,1,.3,1) both} @keyframes stamp{0%{opacity:0;transform:scale(.6)}35%{opacity:.8}100%{opacity:0;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.entry.lit .id::after{animation:none}} .entry dl dd{color:var(--muted)} /* ---------- Soulwave: real artwork in the open card (K14 · C2#7) + honest outbound link (C3) ---------- */ .sw-art{position:absolute;left:0;right:0;top:0;height:58%;margin:0;z-index:1;opacity:0;transition:opacity .95s .15s var(--ease);pointer-events:none; background:none 50% 34%/cover no-repeat;mix-blend-mode:luminosity;filter:sepia(.35) saturate(.8); -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)} .panel[data-open="true"] .sw-art{opacity:.62} .sw-cap{position:absolute;right:12px;top:22px;writing-mode:vertical-rl;z-index:5;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--muted);text-shadow:0 0 6px #000,0 0 2px #000;opacity:0;transition:opacity .6s .3s var(--ease);pointer-events:none} .panel[data-open="true"] .sw-cap{opacity:1} .panel[data-open="false"] .sw-cap{display:none} .p-meta .m-only{display:none} @media (max-width:767px),(orientation:landscape) and (max-height:500px){.sw-cap{display:none}.p-meta .m-only{display:block}} .panel[data-open="false"] .sw-art{display:none} .sw-link{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px} .sw-link a{color:var(--gold-hi);border-bottom:0;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;font-family:var(--display);letter-spacing:.02em} .sw-off{gap:4px 6px;color:var(--faint)} .sw-link.sw-off .soon{white-space:nowrap}.sw-link.sw-off .soon::before{content:"· ";content:"· "/""} /* PASS-B2 D1 #17: the dot never hangs at a line end */ .sw-off .sw-url{font-family:var(--display);letter-spacing:.02em;color:var(--muted)} .sw-link.sw-off .soon{border:0;padding:0;font-size:inherit;line-height:inherit;color:var(--faint)} .sw-link a:hover{text-decoration-color:var(--gold-hi)} .sw-link .soon{font-size:var(--fs-label);color:var(--faint);border:1px solid rgba(150,142,125,.4);border-radius:999px;padding:0 8px;line-height:1.6} .st-text{color:var(--muted);font-size:var(--fs-meta)} @media (pointer:coarse){.sw-link a{display:inline-block;padding:12px 0;margin:-12px 0}} /* ---------- i18n: language switcher + per-language typography (ko is the reference; others adapt) ---------- */ /* PASS-C: language menu — WAI-ARIA menu button (closed: globe + current code; open: every language in its own name) */ .lang{position:relative;display:flex;align-items:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;white-space:nowrap} .lang-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 10px 0 9px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s var(--ease),border-color .18s var(--ease)} .lang-btn svg{flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round} .lang-globe{width:14px;height:14px;stroke-width:1;color:var(--gold-dim);transition:color .18s var(--ease)} .lang-chev{width:8px;height:5px;stroke-width:1.3;opacity:.75;transition:transform .2s var(--ease)} .lang-code{min-width:2.1ch;text-align:center;color:var(--gold-hi)} .lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--text);border-color:var(--line-strong)} .lang-btn:hover .lang-globe,.lang-btn[aria-expanded="true"] .lang-globe{color:var(--gold-hi)} .lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)} .lang-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:45;display:grid;min-width:196px;margin:0;padding:6px;background:rgba(11,10,8,.97);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);animation:lang-in .18s var(--ease)} .lang-menu[hidden]{display:none} @keyframes lang-in{from{opacity:0;transform:translateY(-4px)}} .lang-menu button{appearance:none;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:38px;margin:0;padding:0 12px 0 30px;border:0;border-radius:8px;background:none;color:var(--text);font-family:var(--body);font-size:var(--fs-meta);font-weight:300;line-height:1.2;letter-spacing:0;text-align:left;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent} .lang-menu .c{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--faint)} .lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(195,176,127,.1)} .lang-menu button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-2px;border-radius:8px} .lang-menu [aria-checked="true"],.lang-menu [aria-checked="true"] .c{color:var(--gold-hi)} .lang-menu [aria-checked="true"]::before{content:"";position:absolute;left:13px;top:50%;width:4px;height:8px;margin-top:-6px;border:solid var(--gold-hi);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} @media (pointer:coarse){.lang-btn{height:44px;padding-inline:12px}.lang-menu button{min-height:44px}} @media (prefers-reduced-motion:reduce){.lang-menu{animation:none}.lang-chev{transition:none}} /* phone menu sheet: the same control, full width; the list opens in place (two columns) */ .sheet .lang{display:block;padding:12px 0 2px;font-size:var(--fs-small)} .sheet .lang-btn{width:100%;height:auto;min-height:48px;padding:0 14px;gap:10px;border-radius:12px} .sheet .lang-l{position:static;width:auto;height:auto;overflow:visible;clip-path:none;flex:1;text-align:left;font-family:var(--body);font-size:var(--fs-meta);letter-spacing:0;color:var(--muted)} .sheet .lang-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-family:var(--body);font-size:var(--fs-meta);letter-spacing:0;color:var(--text)} .sheet .lang-code{display:none} .sheet .lang-menu{position:static;grid-template-columns:1fr 1fr;gap:2px;min-width:0;margin-top:8px;padding:0;background:none;border:0;box-shadow:none;animation:none} .sheet .lang-menu button{min-height:44px;font-size:var(--fs-body)} @media (max-width:720px){header.top .lang{display:none}} /* header that does not fit (long labels / tablet): drop the dial first, then fall back to the menu sheet */ html.hdr-tight .dial{display:none} html.hdr-compact nav.main,html.hdr-compact .dial{display:none} html.hdr-compact .menu-btn{display:inline-flex} /* line breaking: ko keeps words whole; ja/zh break normally with strict kinsoku; Latin languages may hyphenate */ html:not(:lang(ko)) body{word-break:normal} [lang|="ko"]{word-break:keep-all} /* i18n QA: Japanese headlines break at phrase (bunsetsu) boundaries where supported (Chrome 119+); others keep strict kinsoku */ html:lang(ja) :is(h1,h2,h3,.p-line,.founder blockquote p){word-break:auto-phrase} html:lang(ja) body,html:lang(zh) body{line-break:strict} html:is(:lang(en),:lang(fr),:lang(it),:lang(ru)) :is(.p-desc,.answer dd,.cap-row,.principles p,.entry dd,.board td,.pxa-rule div,.person span,.sig-t,.org-cap,.ai-note){hyphens:auto;-webkit-hyphens:auto} @media (max-width:899px){html:is(:lang(en),:lang(fr),:lang(it),:lang(ru)) .lead{hyphens:auto;-webkit-hyphens:auto}} /* PASS-B2 D1 #28: lists never, centred/desktop leads never */ /* CJK fonts (loaded on demand) + no tracking on CJK text */ html:lang(ja){--display:"Jost","Jost Fb","Noto Sans JP","Noto Sans KR","KR Fb",system-ui,sans-serif;--body:"Noto Sans JP","JP Fb","Jost","Noto Sans KR","KR Fb",system-ui,sans-serif} html:lang(zh){--display:"Jost","Jost Fb","Noto Sans SC","Noto Sans KR","KR Fb",system-ui,sans-serif;--body:"Noto Sans SC","SC Fb","Jost","Noto Sans KR","KR Fb",system-ui,sans-serif} html:is(:lang(ja),:lang(zh)) :is(.eyebrow .ko,.road-h .ko,.who-q,h1,h2,h3,.panel .p-name .ko,.cap-row,.answer dt,.board th,.p-meta b,.entry dt,.stage-b,.founder figcaption,.founder blockquote p,.sig-name,.foot-line,.strip small,.person b,.sheet a){letter-spacing:0!important} html:is(:lang(ja),:lang(zh)) .board td[data-l]::before{letter-spacing:0} /* PASS-C ru: Cyrillic capitals are wider and denser than Latin — uppercase labels keep less tracking; guillemets and dashes need no change */ html:lang(ru){--tr-caps:.2em} /* PASS-D (FINAL-V3 #2): ru display face = Montserrat (Jost draws Cyrillic д/л as small caps: «иДея», «сДелано»). ru only; the wordmark and the Latin unit names keep Jost. Montserrat runs ~8% wider, so the two largest headings step down to keep their line count. */ html:lang(ru){--display:"Montserrat","Mont Fb","Jost","Jost Fb","Noto Sans KR","KR Fb",system-ui,sans-serif} html:lang(ru) .brand span{font-family:"Jost","Jost Fb N",sans-serif} html:lang(ru) .hero h1{font-size:clamp(28px,3.4vw,48px)} html:lang(ru) .now-h{font-size:clamp(36px,6vw,88px)!important} /* longer strings (fr/it ≈ +40%): let fixed-width labels wrap instead of overflowing (ko keeps its tuned layout) */ html:not(:lang(ko)) .panel[data-open="true"] .p-name,html:not(:lang(ko)) .panel .p-tag,html:not(:lang(ko)) .strip a{white-space:normal} html:not(:lang(ko)) .sig-name{white-space:normal;flex-wrap:wrap} @media (min-width:900px){html:not(:lang(ko)) .strip{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:min(920px,64vw)}html:not(:lang(ko)) .strip a{white-space:nowrap}} /* PASS-C (FINAL-V1 #10): rows of whole items (4+3), no lone 7th unit, a unit name never splits ("Kyus Acade/my") */ /* i18n QA: the answer card's stage column is `auto`; a long stage sentence (invest chip: "Varies by unit — see the status table") took max-content and squeezed the 'problem' column to one character. Cap it. */ @media (min-width:900px){.answer{grid-template-columns:1fr 1.15fr fit-content(24%) 1.35fr}} @media (min-width:900px) and (max-width:1279px){html:not(:lang(ko)) .answer{grid-template-columns:repeat(2,minmax(0,1fr))}} /* PASS-C: longer languages at tablet/laptop widths read in two columns (four ~130px columns ran to 13 lines) */ @media (max-width:600px){.answer{grid-template-columns:minmax(0,1fr) fit-content(46%)}} html:lang(zh-Hans) h1,html:lang(zh) h1{word-break:keep-all} html:lang(ja) .hero h1{font-size:clamp(30px,3.4vw,54px)} /* PASS-C (FINAL-V1 #2): two lines at 1440 so the chips stay in the first view */ html:lang(en) [data-i18n="foot.en"]{display:none} @media (min-width:900px) and (max-width:1279px){html:not(:lang(ko)) .strip{display:grid;grid-template-columns:repeat(4,auto);gap:10px 18px}html:not(:lang(ko)) .strip a{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:baseline}html:not(:lang(ko)) .strip small{grid-column:2;margin:0}} /* PASS-C: laptops — note under the name, 4+3 */ @media (max-width:767px),(orientation:landscape) and (max-height:500px){ .panel{min-height:var(--closed-h,88px)} .panel[data-open="true"]{min-height:var(--open-h,480px)} html:not(:lang(ko)) .panel .p-top{right:calc(20px + var(--badge-w,96px))} html:not(:lang(ko)) .panel .p-name{white-space:normal} /* LOOP R2 (N1 N2): card titles wrap only between words ("Kyus / Academy", never "Academ/y"); the open card's badge sits below the title, so the title takes the full width */ html:not(:lang(ko)) .panel .p-name{overflow-wrap:normal;word-break:keep-all} html:not(:lang(ko)) .panel[data-open="true"] .p-top{right:22px} } @media (max-width:400px){html:not(:lang(ko)) .panel .p-name{font-size:21px;letter-spacing:.03em;line-height:1.2}} @media (max-width:600px){html:not(:lang(ko)) .board tr{grid-template-columns:minmax(0,1fr) auto}html:not(:lang(ko)) .board tbody th{white-space:normal} /* i18n QA: it 'next 90 days' needs a 4th line on phones — longer languages get room instead of an ellipsis */ html:not(:lang(ko)) .board td.nx{-webkit-line-clamp:5}} .sw-cap{max-height:52%;overflow:hidden} /* ---------- polish (POLISH #9 #10 #23 #24) ---------- */ #u-soulwave .p-top{text-shadow:0 0 10px #000,0 0 4px #000,0 0 2px #000} #u-soulwave[data-open="true"] .p-tag{color:var(--gold-hi)} /* D18: the quoted '할 수 있다' never splits across lines in Korean (other languages may wrap) */ html:lang(ko) :is(.hero h1,.foot-line) em{white-space:nowrap} .skip{position:absolute;left:-999px;top:8px;z-index:99;padding:10px 16px;border-radius:8px;background:#0B0A08;color:var(--gold-hi);border:1px solid var(--line-strong);font-size:var(--fs-meta);text-decoration:none} .skip:focus{left:16px} @media (max-width:600px){.gate{justify-content:flex-start;text-align:left}} @media (max-width:899px){.foot-line{text-shadow:0 0 18px #040404,0 0 2px #040404}} /* ---------- PASS-B1 (D3 interaction · a11y) ---------- */ /* #6 Soulwave: text over the artwork sits on its own dark backing (≥4.5:1 at every pixel) */ .sw-cap{color:var(--text);background:rgba(4,4,4,.66);padding:6px 3px;border-radius:3px} #u-soulwave .p-tag{justify-self:start;background:rgba(4,4,4,.6);padding:2px 6px;border-radius:3px;text-shadow:none} .panel .stage-b{background:rgba(4,4,4,.72)} /* #7 stage is shape + colour: live ● filled · proto ◆ diamond · prep ◐ half · idea ○ ring */ .dot.proto,.stage-b.proto::before{border-radius:1px;transform:rotate(45deg) scale(.85)} .dot.prep,.stage-b.prep::before{background:linear-gradient(90deg,currentColor 50%,transparent 0);border:1px solid currentColor;box-sizing:border-box} .dot,.stage-b::before{width:7px;height:7px}.dot.prep,.stage-b.prep::before{border-width:1.5px} /* PASS-C (FINAL-V1 #5): ◐ reads as a half disc, not a target */ /* #5 Why table: the arrow is decoration; phones keep the column headers for assistive tech */ .cap-row>:nth-child(3)::before{content:"→";content:"→"/""} @media (max-width:600px){.cap-table .cap-row.cap-h{display:grid;position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}} /* #25 phone quote caption over the planet rim */ @media (max-width:899px){.founder figcaption{text-shadow:0 0 14px #040404,0 0 2px #040404}} /* #17 #7 forced colours (Windows contrast themes): selection and stage survive without backgrounds */ @media (forced-colors:active){ .chip[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:2px} .lang-btn,.lang-menu{border-color:CanvasText}.lang-menu [aria-checked="true"]::before{border-color:CanvasText}.lang-menu [aria-checked="true"] .n{text-decoration:underline 2px;text-underline-offset:4px} .lang-menu button:focus-visible{outline-color:Highlight} nav.main a.cur,.sheet a.cur{text-decoration:underline 1px;text-underline-offset:6px} .dot,.stage-b::before{forced-color-adjust:none;color:CanvasText} .dot:not(.prep):not(.idea),.stage-b:not(.prep):not(.idea)::before{background:CanvasText} .dot.prep,.stage-b.prep::before{background:linear-gradient(90deg,CanvasText 50%,Canvas 0);border-color:CanvasText} .dot.idea,.stage-b.idea::before{background:Canvas;border:1px solid CanvasText} .motion-btn[aria-pressed="true"]{outline:1px solid Highlight} } /* #2 (WCAG 2.2.2) pause control for the animated background: a quiet round button in the header */ .motion-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;margin:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--faint);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s var(--ease),border-color .18s var(--ease)} .motion-btn[hidden]{display:none} .motion-btn svg{width:12px;height:12px;fill:currentColor} .motion-btn .mi-play,.motion-btn[aria-pressed="true"] .mi-pause{display:none} .motion-btn[aria-pressed="true"] .mi-play{display:inline} .motion-btn:hover,.motion-btn[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--line-strong)} @media (pointer:coarse){.motion-btn{position:relative;width:44px;height:44px;border:0}.motion-btn::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);border-radius:50%;transition:border-color .18s var(--ease)}.motion-btn[aria-pressed="true"]::before{border-color:var(--line-strong)}.motion-btn svg{width:14px;height:14px}} /* PASS-C (FINAL-V1 #8): one visible 32px ring in both states, 44px target */ @media (max-width:720px) and (pointer:fine){.motion-btn{position:relative}.motion-btn::after{content:"";position:absolute;inset:-7px;border-radius:50%}} /* MOTION-HIT-01b (2026-10-01): narrow mouse screens keep the 32px button, 12px icon and position; an invisible ring widens the hit area to 44px */ @media (pointer:coarse) and (max-width:720px){.motion-btn:focus-visible{outline-offset:1px}} /* MOTION-HIT-01b: the focus ring of the 44px phone button stays inside the screen top */ /* paused: the static poster stands in for the light (same layout as the WebGL tier; only the pictures change) */ .paused #gl{opacity:0!important} /* #24 more contrast on request */ @media (prefers-contrast:more){:root{--muted:#CFC7B4;--faint:#BDB5A2;--gold-dim:#C9B887;--line:rgba(195,176,127,.4);--line-strong:rgba(234,216,166,.8)}.grain,.flare{display:none}} /* PASS-B2 D1 #22: figures line up (dates, counts, years) */ .gate,.road-list .ry,.board td,.person .num,.entry dd,.ledger-note{font-variant-numeric:tabular-nums lining-nums} /* ---------- PASS-B2 (D1 line breaking) ---------- */ /* #30 #31 #32 paragraphs avoid one-word last lines; headings balance */ :is(p,dd,li,td,.cap-row>*,.p-meta span){text-wrap:pretty} .foot-nav{position:relative;z-index:1}.foot-nav a{text-shadow:0 0 12px #040404,0 0 3px #040404} /* PASS-C (FINAL-V1 #13): links stay readable over the landed monogram */ .foot-line{text-wrap:balance;font-weight:300;font-size:clamp(28px,3.6vw,52px)} /* PASS-C (FINAL-V1 #7): the closing line answers the hero */ .road-list .ry{white-space:nowrap} /* two-column lists: a column never shrinks below its longest word (overflow-wrap:anywhere would let "Kyus Academy" split mid-word) */ :is(.pxa,.topics) li>span{overflow-wrap:break-word} /* #27 comfortable measure for long single paragraphs */ .sig-t,.org-cap,.note{max-width:68ch} .ai-note{max-width:72ch} .principles p{max-width:62ch} html:lang(ko) :is(.sig-t,.org-cap,.note,.ai-note){max-width:40em} /* #28 #29 Latin hyphenation: only long words, never in lists, names or centred leads */ html:is(:lang(en),:lang(fr),:lang(it),:lang(ru)) *{hyphenate-limit-chars:8 4 4} /* #33 the emphasised phrase stays on one line where there is room */ @media (min-width:600px){html:is(:lang(en),:lang(fr),:lang(it),:lang(ru)) :is(.hero h1,.foot-line) em{white-space:nowrap}} /* PASS-D (FINAL-V3 #1 #3): the contact question balances over two lines in every language (was 3 lines + lone "?" in en/fr/it/ru, 3-letter orphan in ko) */ #contact h2{max-width:14em;text-wrap:balance} /* #20 ja/zh: an opening bracket at a line start sits flush (Chrome 123+) */ html:is(:lang(ja),:lang(zh)) :is(h1,h2,.foot-line,.founder blockquote p){text-spacing-trim:trim-start} /* ja: phrase-aware breaks also for the footer line and short leads */ html:lang(ja) :is(.foot-line,.lead){word-break:auto-phrase} /* #21 #26 Korean headings: letters from Jost, punctuation and spaces from Noto Sans KR (injected at build) */ @font-face{font-family:"Jost L";font-style:normal;font-weight:200 500;font-display:swap;src:url(https://fonts.gstatic.com/l/font?kit=92zatBhPNqw77obX5RYkRegzz05IQgBgM6UtsdLmBWVpOo9ECQD4hpZk1wyfqnB-kILaUGvQGiykCWw2BZ6Z84GZGQaneOKcceDH5LLZZjUxlCAKmy2y56lYNZwzQ3Z25BJgwBEirT0vCEq4wcJhS3WOi1TNwkamQXdygB7M4UwMDMVTidlSLYVVnnmcl09M66oqwCCGQvDHaFzbU1Ua7N4j6XtKFg7CxySPxJG8hBy96h1MEJ21vDe-Bh1PUVs1AtjS-Ekr0hQFcBMHpcUHEcqiSCSBwqKJIs3F0uc41WW1_d0zk8rcRFBLIF9E63oioYD9N3feliX3KzXKwlJmL5k3x8HSFm-fjXsgDiI7252PZXL0eUFMnxP5Cn_0Ar6FbW2c7Li6iej6MtSEJRWR-Mtlaj76g2m_wtfsP3xtTccZnduEjL6rajcd9OI8XQjIMwh6J0ZLCXk5j_d1VOJ_xYebgnLQxVcTJOVSeYpGO-UE_spB2kcraU7IkqpYNgPOn6mEVpHw-vQGyJi0cseDeD7uhGdFV39ooXPeECSlNFkwG1CYX9-NmhS4Yw-Rg1sdvyovPG_6926zrI6hwqZGCg4XeUvegVhRI9tKSrsulNwiJZlcFVjWvDi8VWKatU5aRBdMnZfdhy4TSzSB_0pP3I9J6SFRkA8tEabVeSj7rW6ybbI_g944zUKalKFe134viPtEercBUsSw_ARXjpm5n5Yu_JVsiKSiQFN1t-gF-3HGSr0oYFngxHCoMNcrpQsWof4WY8GaJiuksEDKSlbq5yU3GS2gM2hrCa43UoaWqH3Q1fshJ-3PcMz0Be0QnYuFmYt8iYZ6MUmuWM_Xk9VxTOQhle6U3NyLEOUVpbRjL_yJ1ClIYiZDeUWj_V3jIVpv1ZubNhZGJtOAm5l0fTn3xIRXQmzBpVxdw-TX4-eJXsizY8PKWDkF6Pl1Vu6rpPIsy1X4QwZ2KWzPzXR0OzWw1PCJNAPBhP3PxQqwYpgkP3SEFplQCTR8PirLhApquIPpDqA0AurMF2kAqXvQMTePuLKRczXA8iAUWugFnAUOCeD-_pE_vZU2fOS0TALbgNcSrwkbHywqTCp-Zp840SOOsyksBaEWkj0keBUcd0kn1OwXjfFXIL3xwnmi9OuRD64lpdChMTUFeD19VY7wnJ24CPmnuC6u6pzLNZwXYgKya3cz21PJW2kCuZdQ6qlh6pzScuRA8ROUHID5IINsIZAwyH8bVH2YoW4lSzpm5fNt-fwQgF9-dNE_FB0aQI70tfmmg7EMXgomB_g6uHrOuwRd3Py0p90k4z-0uELMEpFj-bSNzS1LILwRsQjUh_AGqwKc_FXBCiqfsDCglFpuYHQbblCn4_ICR0lKKHQQcxuxSm3e40HMnx6izjH3o64kQc-rqIqWD1ZZ47p_PCgZC8nRDUF7_CscbZYfuz21bywOinNX37fvozNyb4ww3f0oGYWeGNx-vVRtRKK8mF0NSclgWDQ1ThLRCIk5VnrAZhcMh61sHU_-bupOtne8WRNN4r03_u4MR3TswwS2zRLx-_HtB1Bcobnyi67s_kSeKBC-I4EloS6_kGyxFjuXXwoo8cKneWT4tD_IAvDFvrBx-Ksio5YUwup38hrrD30IOJ15C4JIDJFWPe9Fuxu2rCvXxANT2jIYw06PDpMRASgGARrCe22ChZjZarCVB5g3s7pNJ9NrHiCf6W58VvLI6Fg&skey=4145fd5d1d5ac665&v=v20) format("woff2");unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0152-0153;size-adjust:106%}@font-face{font-family:"Jost L Fb";src:local("Arial"),local("ArialMT");unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0152-0153;size-adjust:98.5%}html:lang(ko) :is(h1,h2,.pxa h3,.founder blockquote p,.foot-line){font-family:"Jost L","Jost L Fb","Noto Sans KR","KR Fb",system-ui,sans-serif} /* ---------- PASS-D (FINAL-V3 final visual round) ---------- */ /* #6 Signal -> Team: the signal line already ends in its own rule, so Now keeps only a short tail (was 304px of empty space at 1440) */ #now{padding-bottom:clamp(40px,5vw,72px)} /* FINAL-V4 P3-3: the card pin script alone holds the tapped title (browser scroll anchoring could pick the collapsing card above as its anchor) */ #panels,#panels .panel{overflow-anchor:none} /* #7 phones: the contact topic's "who" goes under the question on one line (was a 3-line right column) */ @media (max-width:599px){.topics li{display:grid;gap:2px}.topics li span:last-child{text-align:left}} /* #8 the aperture lead sits on the monogram's light column: full text colour and a tighter dark halo */ #aperture .lead{color:var(--text);text-shadow:0 0 18px #0B0A08,0 0 3px #0B0A08} /* #9 phones: the footer links fit one line in ko; longer languages break into two even rows instead of one lone link */ @media (max-width:599px){.foot-nav{display:block;text-wrap:balance;margin-right:-16px}.foot-nav a{display:inline-flex;margin:0 16px 6px 0}} /* balance: when the links need two rows they split 3+2, never 4+1 */ /* #10 status board: "soulwave.kyus.ai" and "moving soon" stack, so no line starts with a dot */ .board .sw-link.sw-off{flex-direction:column;align-items:flex-start;gap:2px}.board .sw-link.sw-off .soon::before{content:none} /* #12 ja: body text breaks between phrases, not inside words (Chrome 119+; others keep the default) */ html:lang(ja) :is(p,li,dd,td,.lead){word-break:auto-phrase} /* ru 390 found in this pass: the × label never splits a word («Совместна/я») — its longest word sets the minimum width */ .pxa .x small{overflow-wrap:break-word;min-width:min-content} /* #14 language menu: 日本語 / 简体中文 come from a system CJK face (heavier than the Latin names) — one step lighter */ .lang-menu [lang|="ja"] .n{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",var(--body);font-weight:200} .lang-menu [lang|="zh"] .n{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Noto Sans SC",var(--body);font-weight:300} /* LOOP R1 (V17 · F-2): PingFang 200 = Thin, one step up */ /* ---------- very wide screens (C2#1) ---------- */ @media (min-width:1920px){ :root{--sz:min(calc(min(100vh,60vw)*.6),760px);--cx:calc(50vw + 540px)} .wrap{max-width:1440px} .hero{min-height:min(100vh,1100px);display:grid;align-content:center}.hero>.wrap{width:100%} .hero h1{font-size:clamp(36px,4.5vw,80px)} } /* ---------- LOOP R1 (2026-09-29): visual · mobile · i18n review fixes ---------- */ /* V3 heading order: the hero title is the largest heading in every language. Its size is fitted so the two {br} lines fit the copy column (--h1n = the longest line in em + 3%); Now and Aperture follow it (desktop/laptop only; phones keep their sizes) */ :root{--h1n:7.5;--hcw:min(720px,56vw)} html:lang(zh){--h1n:8.3} html:lang(it){--h1n:11.3} html:lang(en){--h1n:12.5} html:lang(ja){--h1n:14.4} html:is(:lang(fr),:lang(ru)){--h1n:14.85} @media (min-width:900px){ :root{--hfs:max(30px,min(clamp(36px,5.4vw,88px),calc(var(--hcw) / var(--h1n))))} .hero .copy{max-width:var(--hcw)} html .hero h1,html:lang(ru) .hero h1,html:lang(ja) .hero h1{font-size:var(--hfs)} html .now-h,html:lang(ru) .now-h{font-size:max(clamp(40px,3.5vw,50px),min(clamp(44px,5vw,80px),var(--hfs)))!important} .act h2{font-size:max(clamp(34px,3.2vw,46px),min(clamp(34px,4.6vw,68px),calc(var(--hfs)*.92)))} /* V4 first view: tighter hero rhythm so the answer card starts inside the first screen */ .hero .copy{gap:0}.hero h1{margin-top:14px}.hero .sub{margin-top:18px}.hero .strip{margin-top:20px;padding-top:16px} } @media (min-width:900px) and (max-height:920px){.hero{padding-top:clamp(32px,6vh,72px)}} /* V1 aperture: at laptop ratios the text block sits lower, clear of the monogram and its dashed ring */ @media (min-width:900px) and (min-aspect-ratio:3/2){#aperture .act-inner{padding-bottom:7svh}} #aperture .eyebrow{position:relative;z-index:2;text-shadow:0 0 10px #040404,0 0 3px #040404} /* V5 body text that crosses the rings keeps a dark halo */ #method li p,.now-head .lead,.org-cap,#model .card p{text-shadow:0 0 14px rgba(4,4,4,.95),0 1px 0 rgba(4,4,4,.9)} /* V6 closed cards (vertical titles): the drawing fades out behind the title */ @media (min-width:768px) and (min-height:501px){.panel[data-open="false"] .art{-webkit-mask-image:linear-gradient(to bottom,transparent 0 42%,#000 58%);mask-image:linear-gradient(to bottom,transparent 0 42%,#000 58%)}} /* V7 model: the × label reads in two balanced lines */ .pxa .x small{max-width:9.5em;text-wrap:balance} /* V8 contact: address and copy button share height and shape */ #mail{display:inline-flex;align-items:center;height:40px;padding:0 16px;font-size:16px;border-radius:999px} #copy{height:40px;display:inline-flex;align-items:center;justify-content:center} @media (pointer:coarse){#mail,#copy{height:44px}} /* V10 the chapter dial appears once the hero is left behind (no "— / 05" placeholder on the first screen) */ header.top .dial{opacity:0;transition:opacity .4s var(--ease)} html.past-hero header.top .dial{opacity:1} /* V11 no floating hairline above contact and footer */ main>section#contact::before,footer.foot::before{display:none} /* V12 the status line never lengthens the page below the footer */ #sr-status{position:fixed;top:0;left:0} /* V13 the status board uses the full grid width like every other section */ .now-body{max-width:none} /* V14 the org caption rule spans the card */ html .orgcard .org-cap{max-width:none;margin-inline:0} /* V16 stage badges share one width in the table */ .board .stage-b{min-width:72px;justify-content:center} /* V9 very wide screens (2200+): wider grid, type tokens ×1.15 */ @media (min-width:2200px){ :root{--fs-micro:12.5px;--fs-label:14px;--fs-small:15px;--fs-meta:16px;--fs-body:17px;--fs-lead:18.5px;--fs-h4:20.5px;--hcw:820px} body{font-size:18px} .wrap{max-width:1560px} .hero .sub{font-size:22px} .panels{height:620px} } /* M2 short landscape screens: the header language menu opens in two columns */ @media (max-height:500px){header .lang-menu{grid-template-columns:1fr 1fr;min-width:340px}} /* M3 touch: header links get a 44px target (the underline stays 7px under the text) */ @media (pointer:coarse){nav.main a{padding-block:10px;margin-block:-10px}nav.main a::after{bottom:3px}} /* M4 phones: stacked status rows take their content height */ @media (max-width:600px){.board td{min-height:0}} /* M5 phones: the three model rules share one inset */ @media (max-width:820px){.pxa-rule{padding:16px}.pxa-rule div:first-child{padding-left:0}} /* M6 phones: a soft dark pool behind the aperture text */ @media (max-width:899px){.act-inner::before{content:"";position:absolute;left:0;right:0;bottom:6svh;height:60svh;background:radial-gradient(70% 50% at 50% 60%,rgba(4,4,4,.55),transparent 75%);pointer-events:none}.act-inner>*{position:relative}} /* M7 phones: the menu button keeps its width when the chapter number appears */ @media (max-width:720px){.menu-btn{min-width:92px;justify-content:center}} /* M9 stacked open game card: the pixel drawing steps back behind the copy */ @media (max-width:767px),(orientation:landscape) and (max-height:500px){#u-game[data-open="true"] .art svg{opacity:.6}} /* M11 touch: footer links get a wider target without moving */ @media (pointer:coarse){.foot-nav a{padding-inline:8px;margin-inline:-8px}} @media (pointer:coarse) and (max-width:599px){.foot-nav a{margin:0 8px 6px -8px}} /* F1 F2 domains and brand names never hyphenate or split (renderer wraps them in .nh) */ .nh{hyphens:manual;-webkit-hyphens:manual;white-space:nowrap} .board th .unit-ln{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .25s,border-color .25s} /* REFINE-01: the unit name links to its card */ .board th .unit-ln:hover{color:var(--gold-hi);border-color:var(--gold-hi)} .board th .unit-ln:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px} /* F8 short last lines in the model rules and ledger titles */ :is(.pxa-rule div,.entry .t){text-wrap:pretty} /* F3 F4 ja: phrase-aware breaks everywhere text wraps (text-wrap:pretty + auto-phrase breaks inside words in Chrome) */ html:lang(ja) :is(p,li,dd,td,.lead,.founder blockquote p,.cap-row>*,.cap-row span,.p-meta span,.answer dt,.pxa-rule div,.pxa .x small,.entry .t,.person span,.org-cap,.sig-t,.ai-note){word-break:auto-phrase;text-wrap:wrap} html:lang(ja) .pxa .x small{max-width:8em} /* F6 zh: balanced lines (no two-character last line) */ html:lang(zh) :is(.lead,.hero .sub,.founder blockquote p,.answer dd,.pxa-rule div,.entry .t,.principles p,.cap-row>*,.org-cap){text-wrap:balance} /* F5 zh phones: the status title keeps 计划 together (two lines) */ @media (max-width:599px){html:lang(zh) .now-h{font-size:clamp(34px,11vw,44px)!important}} /* ---------- LOOP R2 (2026-09-29): round 2 review fixes ---------- */ /* V-N1 short laptop screens (1280×800, 1440×900): the title is capped by the screen height and the hero rhythm tightens so the help card starts inside the first view */ @media (min-width:900px) and (max-height:920px){ :root{--hfs:max(30px,min(clamp(36px,5.4vw,88px),calc(var(--hcw) / var(--h1n)),8.2vh))} .hero{padding-top:clamp(20px,3.5vh,48px)} .hero h1{margin-top:10px}.hero .sub{margin-top:14px;line-height:1.6;max-width:52ch} html .hero .strip{margin-top:14px;padding-top:12px;row-gap:6px} .hero .wrap{gap:14px}.hero .who{margin-top:10px;gap:12px} } /* V-N2 heading order in every language: first screen > Now > Aperture (the Now/Aperture floors no longer pass the fitted hero size in fr·ru·en·ja·it) */ @media (min-width:900px){ html .now-h,html:lang(ru) .now-h{font-size:min(max(clamp(40px,3.5vw,50px),min(clamp(44px,5vw,80px),var(--hfs))),calc(var(--hfs)*.93))!important} .act h2{font-size:min(max(clamp(34px,3.2vw,46px),min(clamp(34px,4.6vw,68px),calc(var(--hfs)*.92))),calc(var(--hfs)*.86))} } /* M-N3 (M7 remainder) phones: the menu button keeps one width in every language when "· 01" appears */ @media (max-width:720px){html:not(:lang(ko)) .menu-btn{min-width:110px}html:lang(ja) .menu-btn{min-width:126px}} /* M-N4 phones ≤400, longer languages: the answer reads in one column (the stage column no longer squeezes the text to ~130px) */ @media (max-width:400px){html:not(:lang(ko)) .answer{grid-template-columns:minmax(0,1fr)}html:not(:lang(ko)) .answer>div:nth-child(3){grid-row:auto;grid-column:auto}} /* I-N4 zh: balanced lines in the status table too */ html:lang(zh) .board td{text-wrap:balance} /* F-1 short screens: the sheet's close row stays in view while the sheet scrolls */ @media (max-height:500px){.sheet .close{position:sticky;top:-10px;z-index:3;margin:-10px -16px 0;padding:10px 16px 0;background:#0B0A08}} /* V-N5 stage badges share the column width in the table (tablet and up) */ @media (min-width:601px){.board td:nth-child(2){width:1%}.board td:nth-child(2) .stage-b{min-width:100%;justify-content:flex-start;box-sizing:border-box}} /* V-N7 model cards: a denser glass so the rings behind do not cross the text */ #model .card{background-color:rgba(10,9,7,.72)} /* V-N8 ru (and fr since Astra 01 "Coproduction avec des créateurs"): the × label reads in two lines */ html:lang(ru) .pxa .x small,html:lang(fr) .pxa .x small{max-width:11em} /* V-N4 very wide screens: less empty band under the cards and above the footer */ @media (min-width:2200px){#universe{padding-bottom:clamp(40px,4vh,80px)}#model{padding-top:clamp(64px,6vh,120px)}#contact{min-height:min(88vh,1040px)}footer.foot{padding-top:clamp(80px,8vh,160px)}} /* I-N3 ru 320: the status row title leaves room for its badge */ @media (max-width:359px){html:lang(ru) .board tbody th{font-size:17px}} /* Astra 01: phones and tablets — "Kyus Game Studio" in the status table may wrap only after "Kyus" (the .th-sp space from the renderer): ru 320 stays clear of the stage badge, and the 601–899 table keeps its 19% name column */ @media (max-width:899px){.board tbody th .th-sp{white-space:normal}} /* Astra 01: proposer / decider cells never hyphenate inside a word and wrap in balanced lines (it 320 "decis-ione") */ .entry dd[data-i18n$=".who"]{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance} /* ---------- LOOP R3 (2026-09-29): round 3 review fixes ---------- */ /* V-N1 (FIX2 N4 regression) 2560: the stage switches to the model scene when #model's top passes 55% of the screen, so the space moves from under the cards to the top of #model: the model title now arrives after the switch (as at 1440) instead of under the universe monogram and its ring; the model and method heads keep a dark halo */ @media (min-width:2200px){#universe{padding-bottom:60px}#model{padding-top:clamp(160px,15vh,240px)}} :is(#model,#method) .sec-head :is(.eyebrow,.lead),html:not(.sweep) :is(#model,#method) .sec-head h2{text-shadow:0 0 14px rgba(4,4,4,.95),0 0 3px #040404} html.sweep :is(#model,#method) .sec-head h2.sw{filter:drop-shadow(0 0 14px rgba(4,4,4,.95)) drop-shadow(0 0 3px #040404)} /* M R3-1 ja 320: the wordmark never breaks ("KYU / S") next to the wider menu button */ .brand span{white-space:nowrap} /* F 중-1 short screens: a focused sheet link is never scrolled under the sticky close row (the sheet itself is the scroller) */ @media (max-height:500px){.sheet{scroll-padding-top:56px}} /* I-N1 ja tablets (side-by-side cards): the open card title also wraps only between words and takes the full width */ @media (min-width:768px){html:not(:lang(ko)) .panel[data-open="true"] .p-name{overflow-wrap:normal;word-break:keep-all}html:not(:lang(ko)) .panel[data-open="true"] .p-top{right:22px}} /* I-N2 ≤359px: the roadmap date moves under the phase name so the name keeps its words whole */ @media (max-width:359px){.road-list li{grid-template-columns:34px minmax(0,1fr);row-gap:2px}.road-list .ry{grid-column:2;justify-self:start}} /* I-N3 zh: the model list names keep 工作室 whole */ /* V-N2 1440: the chips and answer end clear of the 3D logo's arm (the unit strip keeps its width: capping it adds a row in ja·it and pushes the help card out of the 1280×800 first view) */ @media (min-width:900px){.hero .chips{max-width:var(--hcw)}.hero .answer{max-width:calc(var(--hcw) + 80px)}} /* V-N3 2560: the first screen is the hero alone, centred */ @media (min-width:2200px){.hero{min-height:calc(100svh - 116px)}} /* V-N7 short laptop screens (1366×768): the lead steps down to 18px so the help card starts higher */ @media (min-width:900px) and (max-height:780px){.hero .sub{font-size:clamp(17px,1.5vw,18px)}} /* LOOP R4 M R4-2 · I O1: only steps down (900–1199 keeps the 17px base instead of rising to 18px) */ /* V-N6 ja: the × label reads in two lines */ html:lang(ja) .pxa .x small{max-width:11em} /* V-N8 #why has no chapter: the dial stays hidden instead of showing "— / 05" */ html[data-sc="why"] header.top .dial{opacity:0} /* ---------- LOOP R4 (2026-09-29): round 4 review fixes ---------- */ /* V-A1 2560: a principle label (DISCLOSE…) never splits inside the word; the label column widens with the 14px label */ .principles li .k{white-space:nowrap} @media (min-width:2200px){.principles li{grid-template-columns:88px 1fr}} /* V-A2 wide screens: the unit strip ends clear of the 3D logo's arm (three rows for ja·fr·it·en·zh·ru); at 1280 the names keep a dark halo */ @media (min-width:1400px){html:not(:lang(ko)) .hero .strip{max-width:620px}} @media (min-width:900px){.hero .strip a{text-shadow:0 0 8px #040404,0 0 2px #040404}} /* V-A3 team cards match the model cards' density; principle body text keeps a halo over the ring */ #team .card{background-color:rgba(10,9,7,.72)} .principles li p{text-shadow:0 0 6px #040404} /* V-A4 roadmap dates and the next-review line (.gate) keep a tight halo over the ring (the soft 24px halo stays underneath) */ .road-list .ry,.gate{text-shadow:0 0 8px #040404,0 0 24px rgba(4,4,4,.85)} /* I-N1 tablets 768–833 (three narrow cards side by side): an open card's label sits above its value so the value takes the full card width (ru "Предпринимател / и" in a 116px column) */ @media (min-width:768px) and (max-width:833px){.panel .p-meta{grid-template-columns:minmax(0,1fr);row-gap:2px}.panel .p-meta b:not(:first-child){margin-top:10px}} .mail-link{text-decoration:none} .panel[data-open="true"] .sw-art{background-image:url("/a/sw-art.00f1d4b679.webp")}