:root{--bg:#fafafa;--ink:#121316;--dim:#6f737a;--dimmer:#a0a4aa;--rule:#e4e5e8;--paper:#fff;--accent:#646b7a;--accent-rgb:100,107,122;--display:"SF Pro Display","SF Pro Text","SF Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--gutter:clamp(22px,4.8vw,72px);--maxw:1460px;--rail:164px;--seam:clamp(40px,5.6vw,88px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit}:focus-visible{outline:1px solid var(--ink);outline-offset:4px}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
body.clova{--accent:#7465bd;--accent-rgb:116,101,189}body.daily{--accent:#bd665f;--accent-rgb:189,102,95}body.dashboard{--accent:#59679d;--accent-rgb:89,103,157}body.captcha{--accent:#5c50ba;--accent-rgb:92,80,186}body.compscience{--accent:#60776a;--accent-rgb:96,119,106}body.kiswe{--accent:#8f5aac;--accent-rgb:143,90,172}
.mast{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.84);backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid transparent}.mast.is-stuck{border-color:var(--rule)}.mast .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}.mark{text-decoration:none;font-size:16px;letter-spacing:-.014em}.mast nav{display:flex;gap:32px}.mast nav a{text-decoration:none;font-size:15px;color:var(--dim)}.mast nav a:hover{color:var(--ink)}
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--seam);align-items:start}.rail{position:sticky;top:96px;min-height:calc(100vh - 118px);padding:2px 0 36px}.back{text-decoration:none;color:var(--dim);font-size:13px;display:inline-block;margin-bottom:36px}.project{font-size:15px;font-weight:400;letter-spacing:-.012em;margin:0 0 25px;line-height:1.25}.railnav{display:flex;flex-direction:column}.railnav a{position:relative;text-decoration:none;color:var(--dimmer);font-size:12.5px;line-height:1.3;padding:7px 0;transition:color .2s,transform .2s}.railnav a:before{content:"";position:absolute;left:-13px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0;transform:translateY(-50%)}.railnav a:hover,.railnav a.active{color:var(--ink)}.railnav a.active{transform:translateX(2px)}.railnav a.active:before{opacity:1}
.main{min-width:0}.hero{padding:clamp(54px,6.5vw,92px) 0 clamp(68px,7.5vw,108px);border-bottom:1px solid var(--rule);scroll-margin-top:88px}.category{font-size:13px;letter-spacing:-.005em;color:var(--accent);margin:0 0 7px}.projectline{font-size:12.5px;letter-spacing:-.003em;color:var(--dimmer);margin:0 0 24px}.title{font-size:clamp(40px,4.6vw,66px);font-weight:300;line-height:1.02;letter-spacing:-.041em;max-width:17ch;margin:0}.lede{font-size:clamp(18px,1.6vw,22px);font-weight:300;line-height:1.52;letter-spacing:-.016em;color:var(--dim);max-width:72ch;margin:26px 0 0}.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px;padding-top:17px;border-top:1px solid var(--rule)}.meta b{display:block;font-size:11.5px;font-weight:400;color:var(--dimmer);margin-bottom:6px}.meta span{font-size:13.5px;line-height:1.45}.hero-media{margin-top:clamp(42px,5vw,68px)}
.chapter{padding:clamp(74px,8vw,124px) 0;border-bottom:1px solid var(--rule);scroll-margin-top:88px}.chapter-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}.kicker{font-size:12px;color:var(--dimmer);padding-top:7px}.chapter h2{font-size:clamp(30px,3.25vw,47px);font-weight:300;letter-spacing:-.031em;line-height:1.08;margin:0;max-width:20ch}.copy{margin:27px 0 0 178px;max-width:72ch}.copy p{font-size:16px;line-height:1.72;color:var(--dim);letter-spacing:-.006em;margin:0 0 17px}.copy p strong{font-weight:400;color:var(--ink)}.copy ul{margin:18px 0 0;padding-left:19px;color:var(--dim)}.copy li{font-size:15px;line-height:1.65;margin:5px 0}.pull{margin:45px 0 0 178px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:clamp(21px,2.25vw,32px);line-height:1.28;font-weight:300;letter-spacing:-.024em;max-width:25ch}.pull em{font-style:normal;color:var(--accent)}
.evidence-title{margin:50px 0 15px;font-size:12px;color:var(--dimmer)}.evidence-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:16px}.evidence-strip>div{background:#fff;padding:22px;min-height:135px}.evidence-strip small{font-size:11px;color:var(--dimmer)}.evidence-strip b{display:block;font-size:15px;font-weight:400;margin:24px 0 7px}.evidence-strip p{font-size:13px;line-height:1.55;color:var(--dim);margin:0}
.visual{margin-top:48px;border:1px solid var(--rule);background:var(--paper);overflow:hidden}.visual img{display:block;width:100%;height:auto}.caption{font-size:11.5px;color:var(--dimmer);line-height:1.55;margin-top:10px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}.tile{border:1px solid var(--rule);background:#fff;padding:22px;min-height:176px}.tile small{font-size:11px;color:var(--dimmer)}.tile h3{font-size:19px;font-weight:400;letter-spacing:-.016em;margin:28px 0 8px}.tile p{font-size:13.5px;line-height:1.58;color:var(--dim);margin:0}
.media-slot{position:relative;margin-top:48px;border:1px dashed #cfd1d6;background:#fdfdfd;min-height:390px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;overflow:hidden}.media-slot.wide{min-height:500px}.media-slot.short{min-height:285px}.media-slot:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.8%,rgba(20,20,24,.035) 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,rgba(20,20,24,.025) 50%,transparent 50.2%);pointer-events:none}.slot-top,.slot-bottom{position:relative;z-index:1}.slot-top{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.slot-type{font-size:11.5px;color:var(--accent)}.slot-no{font-size:11px;color:var(--dimmer)}.slot-bottom{max-width:570px}.slot-bottom b{display:block;font-size:18px;font-weight:400;letter-spacing:-.012em;margin-bottom:6px}.slot-bottom p{font-size:13px;line-height:1.55;color:var(--dimmer);margin:0}.slot-bottom em{font-style:normal;color:var(--dim)}.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.slot-grid .media-slot{margin-top:18px}.slot-grid + .caption{margin-top:10px}
.image-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:48px}.imgcard{background:#fff;border:1px solid var(--rule);overflow:hidden}.imgcard img{width:100%;height:100%;object-fit:cover;display:block}.image-grid .imgcard:first-child{aspect-ratio:1.55}.image-grid .imgcard:last-child{aspect-ratio:1.12}
.callout{margin-top:48px;padding:24px 26px;border-left:2px solid var(--accent);background:rgba(var(--accent-rgb),.035);max-width:76ch}.callout b{font-size:14px;font-weight:400}.callout p{font-size:14px;line-height:1.65;color:var(--dim);margin:8px 0 0}.detail-list{margin-top:42px;border-top:1px solid var(--rule)}.detail{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}.detail b{font-size:13px;font-weight:400}.detail p{font-size:14px;line-height:1.6;color:var(--dim);margin:0}
.next{padding:58px 0 72px}.next a{text-decoration:none;display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.next span,.next i{font-size:13px;font-style:normal;color:var(--dimmer)}.next strong{font-size:clamp(27px,2.8vw,38px);font-weight:300;letter-spacing:-.028em;line-height:1.1}.next a:hover strong{color:var(--accent)}
.cta{padding:90px 0 54px;text-align:center}.cta small{font-size:12px;color:var(--dimmer)}.cta p{font-size:clamp(24px,3.2vw,40px);font-weight:300;letter-spacing:-.026em;margin:18px 0 24px}.cta a{text-decoration:none;font-size:15px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:11px 22px}.foot{padding:0 0 38px}.foot .wrap{display:flex;justify-content:space-between;font-size:12px;color:var(--dimmer)}
.js [data-rise]{opacity:0;transform:translateY(10px);transition:opacity .58s ease,transform .58s cubic-bezier(.22,1,.36,1)}.js [data-rise].in{opacity:1;transform:none}
@media(max-width:940px){.shell{grid-template-columns:1fr}.rail{position:static;min-height:auto;padding:22px 0 0;border-bottom:1px solid var(--rule)}.back{margin-bottom:20px}.project{margin-bottom:13px}.railnav{flex-direction:row;flex-wrap:wrap;gap:12px 15px;overflow:visible;padding-bottom:16px}.railnav a{white-space:nowrap}.railnav a:before{display:none}.chapter-head{grid-template-columns:1fr;gap:10px}.copy,.pull{margin-left:0}.meta{grid-template-columns:repeat(2,1fr)}.next a{grid-template-columns:1fr auto}.next span{grid-column:1/-1}.evidence-strip{grid-template-columns:1fr}.slot-grid,.image-grid{grid-template-columns:1fr}}
@media(max-width:620px){.mast nav{gap:18px}.mast nav a{font-size:13px}.title{font-size:40px}.meta{grid-template-columns:1fr}.two,.three{grid-template-columns:1fr}.media-slot.wide{min-height:390px}.detail{grid-template-columns:1fr;gap:7px}.next strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.js [data-rise]{opacity:1;transform:none}}

/* V4: editorial scale + project-specific character */
.title{font-size:clamp(38px,3.75vw,58px);line-height:1.06;max-width:27ch;letter-spacing:-.035em}
.chapter h2{font-size:clamp(28px,2.75vw,42px);max-width:27ch;line-height:1.12}
.next{padding:46px 0 60px}.next a{grid-template-columns:112px minmax(0,1fr) auto;padding:19px 0}.next strong{font-size:clamp(21px,1.9vw,28px);letter-spacing:-.022em}.next span,.next i{font-size:12.5px}
.mast{background:color-mix(in srgb,var(--bg) 86%,transparent)}
.media-slot{margin-top:48px;border:0;background:transparent;min-height:0;display:block;padding:0;overflow:visible}.media-slot:before{display:none}.media-frame{height:380px;border:1px solid var(--rule);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 2.5%,var(--paper)),var(--paper));position:relative;overflow:hidden}.media-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 47%,color-mix(in srgb,var(--accent) 4%,transparent) 50%,transparent 53%);opacity:.35}.media-slot.wide .media-frame{height:500px}.media-slot.short .media-frame{height:285px}.slot-top{margin-top:12px;padding-top:0;display:flex;justify-content:space-between;align-items:baseline}.slot-type{font-size:12px;color:var(--accent)}.slot-no{font-size:11px;color:var(--dimmer)}.slot-bottom{max-width:650px;margin-top:8px}.slot-bottom b{font-size:16.5px;margin:0 0 5px}.slot-bottom p{font-size:13.5px;line-height:1.58;color:var(--dim)}
body.clova{--bg:#f8f7fb}body.daily{--bg:#f8f7f3}body.dashboard{--bg:#f6f8fb}body.captcha{--bg:#f7f6fa}body.compscience{--bg:#f6f8f6}body.kiswe{--bg:#faf7fa}
body.clova #multiturn,body.daily #decisions,body.dashboard #visualization,body.compscience #risk{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px;border-radius:18px}
body.clova #multiturn{background:rgba(116,101,189,.045)}body.daily #decisions{background:rgba(189,102,95,.045)}body.dashboard #visualization{background:rgba(89,103,157,.045)}body.compscience #risk{background:rgba(96,119,106,.05)}
body.captcha #choreography{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px;border-radius:18px;background:#17161d;color:#f3f1f6;border-bottom:0}body.captcha #choreography .copy p{color:#bdb8c7}body.captcha #choreography .kicker{color:#8f86ad}body.captcha #choreography .media-frame{border-color:#32303a;background:#1c1b23}body.captcha #choreography .slot-bottom p,body.captcha #choreography .caption{color:#9f99aa}
body.kiswe .hero{position:relative}body.kiswe .hero:before{content:"";position:absolute;inset:5% -2% 0;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(143,90,172,.12),transparent 34%),radial-gradient(circle at 18% 72%,rgba(68,201,189,.08),transparent 32%);filter:blur(10px)}
.evidence-strip>div,.tile,.detail{transition:transform .28s cubic-bezier(.22,1,.36,1),background-color .28s ease,border-color .28s ease}.evidence-strip>div:hover,.tile:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--accent) 3%,#fff)}.detail:hover{transform:translateX(5px)}.visual img,.imgcard img{transition:transform .55s cubic-bezier(.22,1,.36,1)}body.captcha .visual:hover img,body.kiswe .imgcard:hover img{transform:scale(1.018)}
@media(max-width:940px){body.clova #multiturn,body.daily #decisions,body.dashboard #visualization,body.compscience #risk,body.captcha #choreography{margin-left:0;margin-right:0;padding-left:20px;padding-right:20px;border-radius:12px}.media-frame{height:330px}.media-slot.wide .media-frame{height:420px}}
@media(max-width:620px){.title{font-size:38px;max-width:none}.chapter h2{font-size:29px;max-width:none}.next strong{font-size:22px}.media-frame,.media-slot.wide .media-frame{height:300px}}

/* V5: share the homepage masthead + closing system exactly */
:root{--maxw:1420px;--gutter:clamp(20px,5vw,72px)}
.label{font-family:var(--display);font-size:13px;font-weight:400;letter-spacing:-.004em;text-transform:none;color:var(--dim);margin:0}
.micro{font-family:var(--display);font-size:12.5px;letter-spacing:-.002em;text-transform:none;color:var(--dimmer)}
.mast{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s ease}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mast{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}}
.mast.is-stuck{border-bottom-color:var(--rule)}
.mast .wrap{height:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.mast .mark{font-size:16px;color:var(--ink);letter-spacing:-.012em}
.mast nav{display:flex;align-items:center;gap:42px}
.mast nav .label{font-size:16px;line-height:1}
.nav-icons{display:flex;align-items:center;gap:16px}
.nav-icon{display:inline-flex;align-items:center;color:var(--dim);padding:7px;margin:-7px}
.nav-icon svg{display:block;pointer-events:none}
.nav-icon:hover{color:var(--ink)}
.mast a{text-decoration:none;transition:color .2s ease}.mast a:hover{color:var(--ink)}
@media(max-width:520px){.mast nav{gap:26px}.nav-icons{gap:13px}.mast nav .label{font-size:14px}}

/* the same open-paper CTA rhythm as home, tinted by the project accent */
.cta{position:relative;padding:clamp(90px,13vw,180px) 0 clamp(56px,7vw,84px);text-align:center;overflow:hidden}
.cta::before,.cta::after{content:"";position:absolute;inset:0;pointer-events:none}
.cta::before{background:radial-gradient(132% 110% at 50% -14%,color-mix(in srgb,var(--accent) 9%,transparent) 0%,color-mix(in srgb,var(--accent) 5%,transparent) 30%,color-mix(in srgb,var(--accent) 2%,transparent) 55%,transparent 86%)}
.cta::after{background-image:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--ink) 5%,transparent) .55px,transparent .7px);background-size:4px 4px;opacity:.18;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.cta .wrap{position:relative;z-index:1}
.cta-line{font-weight:300;font-size:clamp(20px,4vw,44px);line-height:1.16;letter-spacing:-.022em;margin:0 auto;max-width:none;white-space:nowrap}
.cta-note{margin:0 auto 20px;max-width:44ch;font-size:14px;line-height:1.5;letter-spacing:-.004em;color:var(--dimmer)}
.cta-actions{margin-top:32px;display:flex;justify-content:center}
.cta-go{font-family:var(--display);font-size:16px;letter-spacing:-.01em;text-decoration:none;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:13px 28px;transition:background-color .25s ease,color .25s ease}
.cta-go:hover{background:var(--accent);color:var(--bg)}
.foot{padding:0 0 44px}.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:inherit;color:inherit}
.foot-right{display:flex;align-items:baseline;gap:26px}.foot-link{text-decoration:none;transition:color .2s ease}.foot-link:hover{color:var(--ink)}
.palette{position:relative}.palette-toggle{appearance:none;background:none;border:0;padding:0;font:inherit;font-family:var(--display);font-size:14px;letter-spacing:-.004em;color:var(--dimmer);cursor:pointer;transition:color .2s ease}.palette-toggle:hover,.palette-toggle[aria-expanded="true"]{color:var(--ink)}
.themebar{position:absolute;right:0;bottom:calc(100% + 14px);z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:132px;padding:10px 4px;background:var(--bg);border:1px solid var(--rule);box-shadow:0 16px 38px -22px rgba(0,0,0,.4)}.themebar[hidden]{display:none}.themebar button{appearance:none;background:none;border:0;padding:6px 14px;font:inherit;width:100%;text-align:right;font-family:var(--display);font-size:13px;letter-spacing:-.002em;color:var(--dim);cursor:pointer;transition:color .2s ease}.themebar button:hover,.themebar button[aria-pressed="true"]{color:var(--ink)}.themebar button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}

/* Palette identities are inherited from the real projects, not arbitrary template colors. */
body.clova{--bg:#f7f9f8;--paper:#fff;--ink:#101514;--dim:#68726f;--dimmer:#9aa39f;--rule:#dfe5e2;--accent:#168a79;--accent-rgb:22,138,121}
body.daily{--bg:#fafcf9;--paper:#fff;--ink:#111512;--dim:#6d756e;--dimmer:#a2aaa3;--rule:#e1e7e2;--accent:#00c95a;--accent-rgb:0,201,90}
body.dashboard{--bg:#f7f8fb;--paper:#fff;--ink:#11141a;--dim:#6f7480;--dimmer:#a4a8b0;--rule:#e2e4ea;--accent:#536eaa;--accent-rgb:83,110,170}
body.captcha{--bg:#f7fbfa;--paper:#fff;--ink:#101615;--dim:#667470;--dimmer:#9ca9a5;--rule:#dee7e4;--accent:#168da0;--accent-rgb:22,141,160;--human:#ef8a49}
body.compscience{--bg:#f2f7f3;--paper:#fff;--ink:#0c1f17;--dim:#5b6f65;--dimmer:#93a69b;--rule:#d9e7de;--accent:#0a6b47;--accent-rgb:10,107,71;--deep:#062a1e;--mint:#d8f0e2;--bright:#00c37a}
body.kiswe{--bg:#09090b;--paper:#111216;--ink:#f3f0eb;--dim:#aaa5a8;--dimmer:#706b70;--rule:#2a282d;--accent:#ff314f;--accent-rgb:255,49,79;--neon:#00e6ff;--magenta:#ff2fc8;color-scheme:dark}

/* Convert formerly hard-coded white surfaces into project-aware paper. */
.evidence-strip>div,.tile,.imgcard{background:var(--paper)}
.evidence-strip>div:hover,.tile:hover{background:color-mix(in srgb,var(--accent) 3%,var(--paper))}
.media-frame{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 2.5%,var(--paper)),var(--paper))}

/* Small character cues. Shared grammar stays the same; only one behavior changes per project. */
body.clova #multiturn{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
@keyframes clovaPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent)}}
body.clova .railnav a.active:before{animation:clovaPulse 2.4s ease-in-out infinite}
body.daily #decisions{background:color-mix(in srgb,var(--accent) 4%,var(--bg))}
body.daily .detail:hover{border-bottom-color:color-mix(in srgb,var(--accent) 35%,var(--rule))}
body.dashboard #visualization{background:color-mix(in srgb,var(--accent) 4%,var(--bg))}
body.dashboard .evidence-strip>div:hover{transform:translateY(-2px);box-shadow:0 10px 26px -22px color-mix(in srgb,var(--accent) 45%,transparent)}
body.compscience #risk{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}

body.captcha #choreography{background:#10191a;color:#eef8f6}
body.captcha #choreography .copy p{color:#b3c5c1}body.captcha #choreography .kicker{color:#6fc2c7}body.captcha #choreography .media-frame{border-color:#294042;background:radial-gradient(circle at 22% 35%,rgba(22,141,160,.15),transparent 30%),radial-gradient(circle at 78% 68%,rgba(239,138,73,.13),transparent 26%),#111b1c}body.captcha #choreography .slot-bottom p,body.captcha #choreography .caption{color:#93aaa5}body.captcha #choreography .slot-type{color:var(--human)}

body.kiswe .mast{background:var(--bg)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.kiswe .mast{background:color-mix(in srgb,var(--bg) 72%,transparent)}}
body.kiswe .hero:before{background:radial-gradient(circle at 78% 20%,rgba(255,49,79,.20),transparent 30%),radial-gradient(circle at 18% 74%,rgba(0,230,255,.10),transparent 29%),radial-gradient(circle at 58% 88%,rgba(255,47,200,.07),transparent 30%);filter:blur(16px)}
body.kiswe .media-frame{border-color:#2c2930;background:linear-gradient(145deg,#101114,#161117)}
body.kiswe .media-frame:after{background:linear-gradient(110deg,transparent 0 45%,rgba(255,49,79,.10) 49%,rgba(0,230,255,.06) 51%,transparent 56%)}
body.kiswe .imgcard,body.kiswe .visual{border-color:#2f2c31;background:var(--paper)}
body.kiswe .imgcard:hover{box-shadow:0 0 0 1px rgba(255,49,79,.22),0 18px 52px -28px rgba(255,49,79,.45),0 0 42px -28px rgba(0,230,255,.5)}
body.kiswe .callout{background:rgba(255,49,79,.045)}
body.kiswe .cta::before{background:radial-gradient(120% 105% at 50% -12%,rgba(255,49,79,.16) 0%,rgba(255,47,200,.07) 32%,rgba(0,230,255,.04) 52%,transparent 86%)}

@media(max-width:620px){.cta-line{white-space:normal}.mast .wrap{padding-top:18px;padding-bottom:18px}}



/* CompScience visual polish: green palette, matted screenshots, softer geometry */
body.compscience #risk{background:color-mix(in srgb,var(--accent) 4%,var(--bg))}
body.compscience .kicker{color:var(--accent);opacity:.75}
body.compscience .category{color:var(--accent)}
body.compscience .pull{border-color:color-mix(in srgb,var(--accent) 22%,var(--rule))}
body.compscience .railnav a.active{color:var(--accent)}
body.compscience .visual{border:0;border-radius:20px;padding:clamp(10px,1.4vw,18px);background:linear-gradient(158deg,var(--mint),color-mix(in srgb,var(--accent) 4%,var(--paper)) 58%,var(--paper));box-shadow:0 30px 70px -46px rgba(6,42,30,.55)}
body.compscience .visual img{border-radius:12px;box-shadow:0 2px 0 rgba(6,42,30,.04),0 18px 40px -30px rgba(6,42,30,.5)}
body.compscience .hero-media .visual{padding:clamp(14px,2vw,26px)}
body.compscience .caption{margin-top:12px;color:var(--dim);font-size:12.5px}
body.compscience .tile,body.compscience .evidence-strip>div{border-radius:16px}
body.compscience .evidence-strip{gap:14px;background:transparent;border:0}
body.compscience .evidence-strip>div{border:1px solid var(--rule)}
body.compscience .tile:hover,body.compscience .evidence-strip>div:hover{background:color-mix(in srgb,var(--accent) 4%,var(--paper));border-color:color-mix(in srgb,var(--accent) 24%,var(--rule))}
body.compscience .callout{border-left:0;border-radius:16px;padding:24px 26px;background:color-mix(in srgb,var(--accent) 6%,var(--paper));box-shadow:inset 3px 0 0 var(--accent)}
body.compscience .main [style*="border: 1px solid var(--rule)"],body.compscience .main [style*="border: 1px solid var(--accent)"],body.compscience .main [style*="border: 1px dashed var(--accent)"],body.compscience .main [style*="border: 1px solid var(--ink)"]{border-radius:14px}
body.compscience .main [style*="gap:1px"]{overflow:hidden;border-radius:18px}
body.compscience .main [style*="height:16px"]{border-radius:999px}
body.compscience .cta-go:hover{background:var(--accent);color:#fff}
@media(max-width:620px){body.compscience .visual{border-radius:14px;padding:8px}}


/* ============================================================
   Portfolio case-study type system (shared across case studies)
   Must stay LAST so it wins. Only --accent / --accent-rgb differ per page.
   ============================================================ */
:root{--display:"SF Pro Display","SF Pro Text","SF Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body{font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* weights: 400 everywhere, no exceptions */
.title,.chapter h2,.lede,.pull,.tile h3,.slot-bottom b,.project,.detail b,.cta-line,.next strong,.lvl-body h3{font-weight:400}

/* display */
.title{font-size:clamp(38px,3.75vw,58px);line-height:1.06;letter-spacing:-.035em;max-width:27ch}
.chapter h2{font-size:clamp(28px,2.75vw,42px);line-height:1.12;max-width:32ch;white-space:normal;text-wrap:pretty}
.pull{font-size:clamp(21px,2.25vw,32px);line-height:1.28;letter-spacing:-.024em;max-width:none}
.cta p.cta-line{font-size:clamp(20px,4vw,44px);line-height:1.16;letter-spacing:-.022em;white-space:nowrap;margin:0 auto;max-width:none;font-weight:400}
.next strong{font-size:clamp(27px,2.8vw,38px);line-height:1.1;letter-spacing:-.028em}

/* text */
.lede{font-size:19px;line-height:1.52;letter-spacing:-.016em;color:var(--dim);max-width:72ch;margin:26px 0 0}
.copy p{font-size:16px;line-height:1.72;letter-spacing:-.006em;color:var(--dim);margin:0 0 17px}
.slot-bottom b{font-size:18px;letter-spacing:-.012em;display:block;margin-bottom:6px}
.tile h3{font-size:19px;letter-spacing:-.016em}
.tile p{font-size:13.5px;line-height:1.58;color:var(--dim)}
.slot-bottom p{font-size:13px;line-height:1.55;color:var(--dimmer)}
.detail p{font-size:14px;line-height:1.6;color:var(--dim)}
.detail b{font-size:13px}
.lvl-body p{font-size:13.5px;line-height:1.65;color:var(--dim);text-wrap:pretty}

/* micro */
.category{font-size:13px;letter-spacing:-.005em;color:var(--accent)}
.projectline{font-size:12.5px;letter-spacing:-.003em;color:var(--dimmer)}
.kicker{font-size:12px;color:var(--dimmer);display:block;margin:0 0 14px}
.project{font-size:15px;letter-spacing:-.012em;line-height:1.25}
.railnav a{font-size:12.5px;line-height:1.3;color:var(--dimmer)}
.slot-type{font-size:11.5px;color:var(--accent)}
.caption{font-size:11.5px;line-height:1.55;color:var(--dimmer)}
.cta p.cta-note{font-size:14px;line-height:1.5;letter-spacing:-.004em;font-weight:400;color:var(--dimmer);max-width:44ch;margin:0 auto 20px}
.micro{font-family:var(--display);font-size:12.5px;letter-spacing:-.002em;text-transform:none;color:var(--dimmer)}
.foot .wrap{font-size:12px;color:var(--dimmer)}
.lvl-body small{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
@media(max-width:820px){.cta p.cta-line{white-space:normal}}

/* ---- palettes: Light (default) / Dark / Color blind ---- */
body{--bg:#f2f7f3;--paper:#ffffff;--ink:#0c1f17;--dim:#5b6f65;--dimmer:#93a69b;--rule:#d9e7de;--accent:#0a6b47;--accent-rgb:10,107,71;--deep:#062a1e;--mint:#d8f0e2;--bright:#00c37a}

body.pal-dark{--bg:#0a120e;--paper:#111b16;--ink:#e9f1ec;--dim:#9aaba1;--dimmer:#6b7d74;--rule:#22302a;--accent:#3ad493;--accent-rgb:58,212,147;--deep:#04150f;--mint:#16281f;--bright:#5ff0b4;color-scheme:dark}
body.pal-dark .visual{background:linear-gradient(158deg,var(--mint),color-mix(in srgb,var(--accent) 5%,var(--paper)) 58%,var(--paper));box-shadow:0 30px 70px -46px rgba(0,0,0,.8)}
body.pal-dark .cta-go:hover{background:var(--accent);color:#04150f}

body.pal-cb{--bg:#f4f6fa;--paper:#ffffff;--ink:#101419;--dim:#5f6a76;--dimmer:#97a1ad;--rule:#dde3ea;--accent:#0f62b0;--accent-rgb:15,98,176;--deep:#0a2540;--mint:#dfeaf7;--bright:#e08214}
body.pal-cb .cta-go:hover{background:var(--accent);color:#fff}


/* Flush-left rhythm: every block starts at the same left edge */
.chapter-head{grid-template-columns:minmax(0,1fr);gap:0}
.chapter-head .kicker{margin:0 0 12px;padding-top:0}
.copy{margin:27px 0 0}
.pull{margin:45px 0 0}
.detail-list{margin-left:0}


/* wider measure: text blocks use the full column instead of a short ragged line */
.copy{max-width:none}
.copy p{max-width:92ch}
.lede{max-width:none}
.chapter h2{max-width:26ch}
.callout{max-width:none}


/* ============================================================
   Polish pass: softer surfaces, wider air, fewer hairlines.
   Type scale untouched — this is surface + rhythm only.
   ============================================================ */

/* section rhythm: air instead of rules */
.chapter{padding:clamp(96px,10vw,164px) 0;border-bottom:0}
.chapter+.chapter{border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.hero{padding:clamp(64px,7.5vw,110px) 0 clamp(84px,9vw,132px);border-bottom:0}
.chapter-head{margin-bottom:6px}
.kicker{display:inline-block;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);letter-spacing:-.002em}

/* surfaces: rounded, shadowed, unbordered */
.visual{margin-top:52px;border:0;border-radius:18px;background:var(--paper);
  box-shadow:0 1px 2px rgba(6,42,30,.05),0 18px 44px -26px rgba(6,42,30,.28)}
.visual img,.visual video{border-radius:18px}
.tile{border:0;border-radius:16px;background:var(--paper);padding:22px 24px 24px;
  box-shadow:0 1px 2px rgba(6,42,30,.04),0 12px 30px -24px rgba(6,42,30,.22)}
.tile:hover{box-shadow:0 1px 2px rgba(6,42,30,.05),0 22px 46px -26px rgba(6,42,30,.3)}
.detail{border:0;border-left:0;border-radius:16px;background:var(--paper);padding:24px 26px;
  box-shadow:0 1px 2px rgba(6,42,30,.04),0 12px 30px -24px rgba(6,42,30,.2)}
.callout{border-left:0;border-radius:16px;padding:26px 28px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.evidence-strip{border:0;background:transparent;gap:14px}
.evidence-strip>div{border-radius:14px;background:var(--paper);
  box-shadow:0 1px 2px rgba(6,42,30,.04),0 12px 30px -24px rgba(6,42,30,.2)}

/* small labels sit closer to what they label */
.evidence-title{margin:58px 0 4px;font-size:12px;color:var(--dimmer)}
.caption{margin-top:14px}

/* rail reads as a quiet index */
.railnav a{padding:8px 0}
.railnav a.active{transform:none}
.railnav a:before{left:-15px;width:5px;height:5px}

/* diagram frames written inline in the template get the same softening */

.main .ownband .tile{box-shadow:none;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.main .ownband .tile:hover{box-shadow:0 1px 2px rgba(6,42,30,.05),0 16px 36px -26px rgba(6,42,30,.26);background:var(--paper)}
.stakeholders details{border:0!important;border-radius:16px;background:var(--paper);
  box-shadow:0 1px 2px rgba(6,42,30,.04),0 12px 30px -24px rgba(6,42,30,.2)}

body.pal-dark .visual,body.pal-dark .tile,body.pal-dark .detail,body.pal-dark .evidence-strip>div,body.pal-dark .stakeholders details{box-shadow:0 1px 2px rgba(0,0,0,.5),0 20px 46px -28px rgba(0,0,0,.8)}


/* fixes from the polish pass */
.kicker{justify-self:start;align-self:start}
.chapter h2{max-width:34ch;text-wrap:balance}
body.compscience #risk{margin-left:0;margin-right:0;padding-left:0;padding-right:0;border-radius:0;background:transparent}

.tile,.detail,.visual,.evidence-strip>div,.stakeholders details{border-radius:16px}
.visual img,.visual video{border-radius:16px}

.ownkicker{font-size:11px;letter-spacing:.09em}
.next a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:baseline;gap:24px}
.next strong{max-width:none;white-space:nowrap}
.next i{font-style:normal;justify-self:end;color:var(--dimmer)}
@media(max-width:620px){.next a{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}.next span{grid-column:1/-1}.next strong{white-space:normal}}

body.pal-dark .funnel-panel{background:#16281f!important;box-shadow:inset 0 0 0 1px rgba(234,245,238,.12)}
@media(max-width:700px){.funnel-row{grid-template-columns:minmax(0,1fr)!important;gap:7px!important}}

/* badge + list corrections */
.chapter-head .kicker{padding:6px 12px;line-height:1.35}
.detail-list{margin-top:44px;border-top:0;display:grid;gap:14px}
.detail{grid-template-columns:200px minmax(0,1fr);gap:26px;padding:24px 26px;border-bottom:0}
.detail b{align-self:start}
@media(max-width:700px){.detail{grid-template-columns:minmax(0,1fr);gap:10px}}

.pull{border-top:0;border-bottom:0;padding:0;margin:56px 0 0}

.tile{min-height:0}

.chapter h2{max-width:42ch}
.funnel-row{grid-template-columns:minmax(0,1fr)!important}
.funnel-note{font-size:11.5px;color:rgba(234,245,238,.8);white-space:nowrap}

@media(max-width:1080px){.stagegrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){.stagegrid,.loopgrid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:900px){.loopgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

@media(max-width:1080px){.stagecurve{display:none}}

.flowwrap .visual{position:relative;z-index:1}
.flowwrap>div[data-rise]{position:relative;z-index:1}

/* handoff slideshow: the active slide sits in normal flow so the frame follows its height */
.hoframe{display:block}
.hoslide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:top;opacity:0;transition:opacity .45s ease}
.hoslide.on{position:relative;inset:auto;height:auto;object-fit:fill;opacity:1}