/* theme.css — v2 "serif on paper" skin. Loaded after page styles' tokens; overrides structure where color swaps aren't enough. */
:root{--serif:'Source Serif 4',ui-serif,Georgia,serif;--sans:'Work Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;--ink:#17191c;--slate:#777b86;--ash:#979799;--mist:#f2f2f3;--fog:#fafafb;--peach:#fbe1d1;--sienna:#5d2a1a;--hair:#ececec;--shadow-float:0 0 0 1px rgba(4,23,43,.05),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--shadow-pop:0 0 0 1px rgba(0,0,0,.05),0 4px 24px rgba(0,0,0,.08)}
body{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);background:#fff}
a{color:inherit}a:hover{color:var(--ink)}
::selection{background:var(--peach);color:var(--sienna)}

/* Headlines: serif, regular weight, tight tracking */
h1,h2,.hero-quote,.section-title,.cs-title,.cs-h2,.footer h2,.gate-title,.pw-title,.ab-hero h1,.ab-about h1,.ab-text h2,.cs-next-title,.about-text h3{font-family:var(--serif)!important;font-weight:400!important;font-optical-sizing:auto;color:var(--ink)}
.hero-quote{letter-spacing:-.02em!important;line-height:1.14!important;color:var(--ink)!important}
.section-title,.cs-title,.ab-hero h1,.ab-about h1{letter-spacing:-.025em!important;line-height:1.08!important}
.cs-title{max-width:none!important;width:100%}
.cs-title .em,.cs-title em,.cs-title i,.cs-title span{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;color:inherit!important}
.cs-h2,.footer h2{letter-spacing:-.015em!important;line-height:1.15!important}
h1 .em,h2 .em,.hero-quote .em,.section-title .accent,.cs-title .em,.footer h2 .em,.ab-hero h1 .em,.ab-about h1 .em,.value-card h3 .em,.principle h3 .em{font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;color:var(--ink)!important}
h3,h4{font-family:var(--sans);font-weight:500;letter-spacing:-.009em}

/* Labels: quiet typographic tags, no badge chrome */
.section-eyebrow,.cs-eyebrow,.ab-eyebrow,.work-head .meta,.cs-kicker,.cs-part-label,.cs-phase-label{font-family:var(--sans)!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ash)!important}
.section-eyebrow::before,.cs-eyebrow::before,.ab-eyebrow::before{display:none!important}
.case-tags{gap:6px!important}
.case-tags span{border:1px solid #D9D6D0!important;padding:3px 9px!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--slate)!important;border-radius:4px!important}
.case-num{color:var(--ash)!important;font-size:14px!important}

/* Nav: flat white pill, hairline ring */
.nav{background:rgba(255,255,255,.86)!important;border:0!important;box-shadow:var(--shadow-pop)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
.nav-logo{color:var(--ink)!important}
.nav a.nav-link{font-weight:400!important;color:var(--ink)!important}
.nav a.nav-link::after{display:none}
.nav a.nav-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav-cta{background:var(--ink)!important;color:#fff!important;font-weight:400!important}

/* Buttons: pills */
.cs-back,.cs-jump,.gate-btn,.pw-btn,.hi-btn{border-radius:9999px!important}
.gate-btn,.pw-btn{background:var(--ink)!important;color:#fff!important;font-weight:400!important;letter-spacing:0!important}
.gate-input,.pw-input{border-radius:16px!important;border:1px solid var(--hair)!important;background:#fff!important}
.gate-input:focus,.pw-input:focus{border-color:var(--ink)!important;box-shadow:none!important}
.pw-card,.gate-inner{background:#fff!important;border-radius:24px!important;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 8px 40px rgba(0,0,0,.1)!important}
.pw-lock,.gate-lock{background:var(--mist)!important;border:0!important}
.pw-lock svg,.gate-lock svg{stroke:var(--ink)!important}

/* Home hero */
.hero-name{font-weight:450!important;color:var(--ink)!important}
.hero-name span{color:var(--ash)!important}
.hero-name .hn-desk{color:inherit!important}
.bento{gap:8px!important}
.bento .col1,.bento .col3{gap:8px!important}
.bento .tile{border-radius:16px!important}
.tile-dark{background:#1E1E1E!important;color:#fff!important}
.tile-dark .pattern{display:none}
.tile-dark .deco{opacity:.08!important}
.tile-dark h3{color:#f2f2f3!important;font-weight:450!important}
.tile-rose,.tile-sand,.tile-taupe{background:var(--mist)!important}
.tile-rose .rose-label{color:var(--slate)!important}
.tile-taupe .phone{box-shadow:var(--shadow-float)!important}
.tile-hero{box-shadow:none!important;background:linear-gradient(rgba(110,150,255,.05),rgba(110,150,255,.05)),linear-gradient(180deg,rgba(23,25,28,0) 40%,rgba(23,25,28,.7) 100%),url('assets/kehan-portrait.webp') top center/cover!important;filter:saturate(.95)}
.tile-hero:hover{box-shadow:none!important}
.tile-hero .label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.tile-hero .name{font-family:var(--sans)!important;font-weight:400!important;letter-spacing:-.02em!important}
.tile-hero,.tile-hero:hover,.tile-hero:hover .name{color:#fff!important}
.tile-hero .name .arr{color:var(--ink)!important}
.tile-sayhi{background:var(--mist)!important;color:var(--ink)!important}
.tile-sayhi::before{display:none}
.tile-sayhi .hi-headline,.tile-sayhi .hi-reply{color:var(--ink)!important;font-family:var(--sans)!important;font-size:clamp(16px,calc(1.6vw - 1px),20px)!important;letter-spacing:-.01em}
.tile-sayhi .hi-btn{background:#fff!important;color:var(--ink)!important;font-weight:400!important;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tile-sayhi .hi-btn:hover{background:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tile-mocha{background:#1E1E1E!important}
.tile-mocha:hover{background:#000!important}

/* Cards / frames */
.case .frame{border-radius:16px!important;background:var(--mist)!important}
.case .frame::after{display:none}
.case-meta h3{font-weight:450!important;letter-spacing:-.01em!important}
.case-meta p{color:var(--slate)!important;font-size:16px!important}
.ai-badge{background:#fff!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;box-shadow:var(--shadow-pop)}
.cs-card,.value-card,.outside-tile,.cs-insight,.cs-judgment-card .cj-face{border-radius:24px}
.cs-card,.value-card{background:var(--mist)!important;border:0!important;box-shadow:none!important}
.cs-pullquote{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink)!important}
.cs-hero,.cs-hero img,.cs-hero .cs-figframe{border-radius:0!important}
.cs-figure .cs-figframe,.cs-figure img,.d-media-asset{border-radius:20px}
.cs-meta dt,.cs-stat .lbl,.cs-stats-row .stat-cell .lbl{text-transform:none!important;letter-spacing:0!important;color:var(--ash)!important;font-size:14px!important}
.d-num,.cs-decision .d-row dt,.insight-num,.cs-card .num,.value-card .num,.cj-num,.stage-num,.timeline-year,.tool-col h4,.cs-next-eyebrow,.label{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;color:var(--ash)!important;font-family:var(--sans)!important}
.tile-hero .label,.outside-tile .label{color:#fff!important}
.cs-lede,.ab-hero .lede,.ab-about .lede{font-family:var(--sans)!important;color:var(--slate)!important;font-size:clamp(18px,1.6vw,22px)!important;line-height:1.45!important}
.cs-section p,.ab-text p,.about-text p{color:#3d4048}
.cs-next{border-radius:24px}
.tool-pill{border-radius:9999px}

/* Footer: fog band, ink text */
.footer{background:var(--fog)!important;color:var(--ink)!important;border-top:1px solid var(--hair)}
.footer-glow{filter:none!important;opacity:.06!important}
.footer h2{color:var(--ink)!important}
.footer p{color:var(--slate)!important}
.footer-col h4{color:var(--ash)!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.footer-col a{color:var(--ink)!important}
.footer-col a:hover{color:var(--ink)!important;text-decoration:underline;text-underline-offset:4px}
.footer-base{color:var(--ash)!important;border-top-color:var(--hair)!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.cursor-root[data-state="dark"] .cursor-dot{background:var(--ink)!important}
.cursor-root[data-state="dark"] .cursor-ring{border-color:var(--ink)!important}
.cursor-tip{text-transform:none!important;letter-spacing:0!important;font-size:13px!important}

/* Warm page background (all pages) */
html,body{background:#F4F3F1!important}
.tile-sayhi,.tile-rose,.tile-sand,.tile-taupe,.case .frame,.cs-card,.value-card{background:#EAE8E4!important}
.footer{background:#EFEDEA!important;border-top-color:#E4E1DC!important}
.tile-sayhi{background:linear-gradient(155deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 26%),radial-gradient(120% 85% at 85% 0%,#8a867f 0%,#5f5c57 28%,#33322f 55%,#121212 82%,#0a0a0a 100%)!important;box-shadow:none!important;position:relative;isolation:isolate;overflow:hidden}
.tile-sayhi::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
.tile-sayhi>*{position:relative;z-index:1}
.tile-sayhi .hi-headline,.tile-sayhi .hi-reply{color:#fff!important}

/* Grids: separate cards, no wrapping container */
.cs-grid-2,.cs-grid-3,.cs-grid-4,.values-grid,.cs-stats-row{gap:12px!important;background:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
.cs-grid-2>*,.cs-grid-3>*,.cs-grid-4>*,.values-grid>*,.cs-stats-row>*{border-radius:20px!important;background:#EAE8E4!important}

.nav-logo svg{height:16px!important;width:auto}
@media (max-width:760px){.nav-logo svg{height:12px!important}}
@media (max-width:540px){.nav-logo svg{height:11px!important}}

/* Cursor: solid square only + click burst */
.cursor-ring{display:none!important}
.cursor-root .cursor-dot,.cursor-root[data-state] .cursor-dot{width:8px!important;height:8px!important;border-radius:2px!important;background:var(--ink)!important;opacity:1!important}
.cursor-root[data-state="dark"] .cursor-dot{background:#f2f2f3!important}
.cursor-spark{position:fixed;left:0;top:0;width:4px;height:4px;border-radius:1px;background:var(--ink);pointer-events:none;z-index:10000}
@media (hover:none),(pointer:coarse){.cursor-spark{display:none}}

.bento .tile-rose,.bento .tile-sand,.bento .tile-taupe{background:#E9E9E9!important}

/* Case hero: fixed 400px height, full-width, cover-crop */
.cs-hero{display:block!important}
.cs-hero img{display:block!important;width:100%!important;max-width:none!important;height:400px!important;max-height:none!important;object-fit:cover!important;object-position:center!important}

/* Phone: tighter Projects heading */
@media (max-width:540px){
#work .section-title,#playground .section-title{font-size:34px!important}
#work .work-head{margin-bottom:24px!important}
#work{padding-top:56px!important}
.hero-name .hn-desk{display:none}
.hero .hero-top .hero-name::after{display:none!important}
.hero-name br{display:none}
.hero-name .hn-star{display:inline!important}
.hero .hero-top .hero-name{font-size:15px!important;padding-bottom:24px!important;margin-bottom:0!important;letter-spacing:.02em!important}
.hero .hero-top{gap:20px!important}
#playground .work-head .section-eyebrow,#playground .work-head .meta{display:none!important}
#work .work-head .section-eyebrow,#work .work-head .meta{display:none!important}
}

/* Hero headline: subtle plus-grid texture */
@media (max-width:540px){
.hero-quote{position:relative;isolation:isolate}
.hero-quote::before{content:"";position:absolute;inset:-32px -48px;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2756%27%3E%3Cpath%20d%3D%27M28%200V56M0%2028H56%27%20stroke%3D%27rgba(0%2C0%2C0%2C0.07)%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M28%2023V33M23%2028H33%27%20stroke%3D%27rgba(0%2C0%2C0%2C0.32)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");background-size:28px 28px;background-position:center;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%)}
}