/* Project pages — planetary system (shared by all case-study pages) */
:root{--ink:#f6f8ff;--ink-dim:rgba(220,230,255,.78);--ink-faint:rgba(200,215,250,.5);--line:rgba(200,215,250,.14);--study:#aac6ff;--project:#ffc890;--sf:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sf);color:var(--ink);background:radial-gradient(ellipse 80% 60% at 50% 35%,#102450 0%,#0a1638 26%,#050d24 56%,#03060f 100%) fixed #03060f;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.94  0 0 0 0 0.84  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 50%,rgba(0,0,0,.55) 100%)}
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.halo-outer,.halo,.iridescence{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.halo-outer{width:180vmin;height:180vmin;background:radial-gradient(circle at 50% 50%,rgba(120,150,220,.10) 0%,rgba(90,120,200,.06) 18%,rgba(70,95,170,.03) 38%,rgba(40,60,130,.012) 60%,rgba(20,30,80,.004) 80%,transparent 100%);filter:blur(36px);opacity:.55;transform:translate(-50%,-50%) scale(1.4)}
.halo{width:130vmin;height:130vmin;background:radial-gradient(circle at 50% 50%,rgba(180,200,255,.16) 0%,rgba(180,195,250,.13) 10%,rgba(190,175,220,.10) 22%,rgba(210,170,180,.07) 34%,rgba(140,150,210,.045) 48%,rgba(70,100,180,.022) 64%,rgba(30,50,120,.008) 82%,transparent 100%);filter:blur(30px);opacity:.55;transform:translate(-50%,-50%) scale(1.6)}
.halo-tight{position:absolute;left:50%;top:50%;width:100vmin;height:100vmin;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 40%,rgba(220,215,235,.05) 46%,rgba(225,220,240,.16) 50%,rgba(210,200,230,.10) 54%,rgba(180,195,230,.04) 60%,transparent 72%);filter:blur(5px);mix-blend-mode:screen;opacity:.4;transform:translate(-50%,-50%) scale(2.4)}
.specular{position:absolute;left:50%;top:50%;width:88vmin;height:88vmin;border-radius:50%;background:radial-gradient(ellipse 38% 28% at 30% 26%,rgba(255,248,232,.16) 0%,rgba(255,240,220,.06) 40%,transparent 70%),radial-gradient(ellipse 14% 10% at 70% 78%,rgba(180,210,255,.08) 0%,transparent 70%);filter:blur(10px);mix-blend-mode:screen;opacity:.55;transform:translate(-50%,-50%) scale(1.5)}
.inside-glow{position:absolute;inset:-10%;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(170,200,250,.10) 0%,rgba(120,160,230,.05) 45%,transparent 75%)}
.iridescence{width:110vmin;height:110vmin;background:conic-gradient(from 0deg at 50% 50%,rgba(255,200,180,.07),rgba(200,220,255,.09),rgba(230,200,255,.07),rgba(190,240,220,.05),rgba(255,220,190,.07),rgba(220,200,255,.06),rgba(255,200,180,.07));filter:blur(70px);mix-blend-mode:screen;animation:irid-spin 60s linear infinite;opacity:.55}
@keyframes irid-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--study)}
.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 8vw}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}
.top a{display:inline-flex;align-items:center;gap:10px;color:var(--ink-faint)}.top a:hover{color:var(--ink)}
.top a::before{content:"←"}
.sec{padding:60px 0;border-top:1px solid var(--line)}
.label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:14px;margin-bottom:36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:pretty}
h2{font-size:clamp(28px,3.2vw,44px);max-width:22ch}
h2 em{font-style:normal;color:rgba(220,230,255,.55)}
p{margin:0;text-wrap:pretty}
.lede{font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:var(--ink-dim);max-width:62ch}
.mt{margin-top:24px}.mt2{margin-top:40px}
/* hero */
.hero{padding:40px 0 64px}
.eyebrow{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--study);margin-bottom:28px}
.hero h1{font-size:clamp(44px,7vw,108px);letter-spacing:-.045em;font-weight:800;color:#f7f1e4;text-shadow:0 0 30px rgba(180,210,255,.18),0 0 90px rgba(120,150,230,.12)}
.hero h1 span{display:block;font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--ink-dim);margin-top:18px;text-shadow:none;max-width:34ch}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 32px;margin-top:56px;border-top:1px solid var(--line)}
.facts>div{padding:20px 0;border-bottom:1px solid var(--line)}
.facts .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.facts .v{font-size:15px;color:var(--ink-dim)}
/* frames */
figure{margin:0}
.frame{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(10,20,50,.55);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 30px 80px rgba(2,4,12,.6)}
.frame img,.frame video{display:block;width:100%;height:auto;filter:saturate(.85) brightness(.94)}
.frame.light img{background:#f4f4f6;filter:saturate(.9) brightness(.92)}
.frame.fit img{height:100%;object-fit:cover}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);background:linear-gradient(180deg,transparent,rgba(3,6,15,.9))}
.hero-shot{margin-top:64px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.hero-shot .frame.fit{max-height:460px}.hero-shot .frame.fit img{height:460px;object-fit:cover}
@media (max-width:560px){.shots{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery .frame{aspect-ratio:4/3}.gallery .frame img{height:100%;object-fit:cover}
/* two-col */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:36px}}
.before{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px}
.before>div{padding:22px 0 0;border-top:1px solid var(--line)}
.before b{display:block;font-weight:600;font-size:16px;margin-bottom:8px}
.before p{font-size:14px;color:var(--ink-dim);line-height:1.55}
/* tinted grid cards */
.model{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:8px}
.model.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.model,.model.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.model,.model.c3{grid-template-columns:1fr}}
.model>div{padding:26px 22px;background:rgba(170,198,255,.05);border:1px solid var(--line)}
.model>div:nth-child(2){background:rgba(170,198,255,.08)}.model>div:nth-child(3){background:rgba(170,198,255,.11)}.model>div:nth-child(4){background:rgba(170,198,255,.15)}
.model .n{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--study);margin-bottom:14px}
.model b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.model p{font-size:14px;color:var(--ink-dim);line-height:1.5}
.model p em{font-style:normal;color:var(--ink-faint)}
.rule{margin-top:28px;font-size:15px;color:var(--ink-dim);max-width:60ch}
/* steps */
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:0}
.step:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.step:nth-of-type(even) .txt{order:2}
@media (max-width:820px){.step,.step:nth-of-type(even){grid-template-columns:1fr;gap:28px}.step:nth-of-type(even) .txt{order:0}}
.step .num{font-size:clamp(48px,6vw,88px);font-weight:800;letter-spacing:-.05em;line-height:1;color:rgba(220,230,255,.18);margin-bottom:12px}
.step h3{font-size:clamp(22px,2vw,30px);margin-bottom:18px}
.step ul,.bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.step li,.bul li{font-size:15px;color:var(--ink-dim);line-height:1.55;padding-left:22px;position:relative}
.step li::before,.bul li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:1px;background:var(--study)}
.step li strong,.bul li strong{color:var(--ink);font-weight:600}
.states{display:flex;gap:18px;margin-top:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);flex-wrap:wrap}
.states span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:0 0 10px currentColor}
.states .g::before{background:#7fd6a0;color:#7fd6a0}.states .y::before{background:#ffc890;color:#ffc890}.states .r::before{background:#ff8a7a;color:#ff8a7a}
/* locks / cards */
.locks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.locks.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.locks,.locks.c2{grid-template-columns:1fr}}
.lock{padding:30px 26px 34px;border:1px solid var(--line);background:rgba(10,20,50,.45)}
.lock .n{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--study);margin-bottom:18px}
.lock h3{font-size:20px;margin-bottom:16px}
.lock p{font-size:14px;color:var(--ink-dim);line-height:1.55}
.lock .flow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.06em;color:var(--ink-faint);line-height:1.9}
.lock .flow b{color:var(--ink);font-weight:500}
.lock .flow i{font-style:normal;color:var(--study);padding:0 4px}
/* calculation chain */
.calc{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.calc>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.calc>div:has(.in){grid-template-columns:auto minmax(0,1fr)}
.calc .eq{font-size:15px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.calc .eq b{color:var(--ink);font-weight:600}
.calc .res{font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;color:#f7f1e4;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc .res small{font-size:.6em;font-weight:500;color:var(--ink-faint);margin-left:4px}
.calc .in{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.check{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;margin-top:2px}
.check>div{padding:22px 24px;border:1px solid var(--line);background:rgba(127,214,160,.05);font-size:14px;color:var(--ink-dim);line-height:1.55}
.check b{display:block;font-size:20px;font-weight:700;color:#f7f1e4;letter-spacing:-.02em;margin-bottom:6px;font-variant-numeric:tabular-nums}
.check b::after{content:" ✓";color:#7fd6a0;font-weight:500}
/* gains */
.gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px}
.gains>div{padding:22px 24px;border:1px solid var(--line);background:rgba(10,20,50,.45)}
.gains .n{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--study);margin-bottom:14px}
.gains .g{display:flex;flex-wrap:wrap;gap:12px 18px;font-variant-numeric:tabular-nums}
.gains .g span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.gains .g span b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#f7f1e4;margin-top:4px;text-transform:none;letter-spacing:0}
.gains p{margin-top:12px;font-size:13px;color:var(--ink-dim);line-height:1.5}
/* test log */
.tests{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tests>div{display:grid;grid-template-columns:8rem minmax(0,1fr) 8rem minmax(0,1.3fr);gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-dim)}
@media (max-width:820px){.tests>div{grid-template-columns:7rem minmax(0,1fr) 7rem}.tests>div>:last-child{grid-column:2/-1}}
.tests .d{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.tests .t{color:var(--ink);font-weight:500}
.tests .s{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.tests .s::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:0 0 10px currentColor}
.tests .ok{color:#7fd6a0}.tests .part{color:#ffc890}
/* numbers */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px}
.nums>div{padding:30px 26px;border:1px solid var(--line)}
.nums .big{font-size:clamp(36px,4.4vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1;color:#f7f1e4;text-shadow:0 0 24px rgba(180,210,255,.18);font-variant-numeric:tabular-nums}
.nums .big small{font-size:.45em;font-weight:500;color:var(--ink-faint);letter-spacing:0;margin-left:4px}
.nums p{margin-top:12px;font-size:13px;color:var(--ink-dim);line-height:1.5}
.sec-shift{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:2px}
@media (max-width:560px){.sec-shift{grid-template-columns:1fr}}
.sec-shift>div{padding:24px 26px;border:1px solid var(--line);font-size:14px;line-height:1.9;color:var(--ink-dim)}
.sec-shift .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:8px;line-height:1.4}
.sec-shift .after{background:rgba(170,198,255,.07)}
/* code block */
.code{margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:rgba(3,6,15,.72);color:var(--ink-dim);font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre;tab-size:2}
.code b{color:#f7f1e4;font-weight:600}.code i{font-style:normal;color:var(--study)}.code u{text-decoration:none;color:var(--ink-faint)}
.code-cap{margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
/* quote */
.quote{padding:36px 0 0;max-width:62ch}
.quote p{font-size:clamp(18px,1.6vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}
/* ledger table (quiz etc.) */
.table{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.table>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-dim);font-variant-numeric:tabular-nums;align-items:baseline}
.table .h{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint)}
.table b{color:var(--ink);font-weight:600}
.table .up{color:#7fd6a0}.table .dn{color:#ff8a7a}
/* method + stack */
.method{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:8px}
@media (max-width:820px){.method{grid-template-columns:repeat(2,minmax(0,1fr))}}
.method>div{padding:22px 20px;border:1px solid var(--line);font-size:14px;color:var(--ink-dim);line-height:1.5}
.method b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
.method .n{font-size:10px;letter-spacing:.3em;color:var(--study);display:block;margin-bottom:12px}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.stack span{font-size:12px;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);background:rgba(10,20,50,.45)}
footer{padding:64px 0 80px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint)}
footer a{color:var(--ink-dim)}footer a::after{content:" →"}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.iridescence{animation:none}}
@media (max-width:820px){.halo-outer,.halo,.iridescence{filter:blur(18px)}}