/* case.css — reskins the legacy case-study pages to match the landing page. Linked LAST so it overrides the old Syne / DM-Mono / wine system. Custom per-page components inherit the retuned tokens automatically. */ :root{ --paper:#f3eee4; --paper2:#faf7f0; --white:#faf7f0; --ink:#15120d; --muted:#726b5f; --pop:#e2402a; --pop2:#e2402a; --sage:#2a7d64; --border:rgba(21,18,13,0.12); --border-soft:rgba(21,18,13,0.07); --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --eo:cubic-bezier(.16,.84,.44,1); } html,body{cursor:auto!important} body{background:var(--paper)!important;color:var(--ink)!important;font-family:var(--sans)!important} #cursor,#fun-cursor,.fun-cursor,.cursor-dot,.cursor-ring{display:none!important} a,button,[role=button]{cursor:pointer!important} img:not(.nav-avatar):not(.brand-av){cursor:zoom-in!important} .cs-banner{display:none!important} /* drop the awkward banner everywhere */ ::selection{background:rgba(226,64,42,.18)} /* ── nav ── */ nav{background:rgba(243,238,228,.82)!important;-webkit-backdrop-filter:saturate(1.1) blur(8px)!important;backdrop-filter:saturate(1.1) blur(8px)!important;border-bottom:1px solid var(--border-soft)!important} .nav-logo{font-family:var(--serif)!important;font-weight:600!important;font-size:18px!important;letter-spacing:-.01em!important;color:var(--ink)!important;text-transform:none!important} .nav-logo em{color:var(--pop)!important;font-style:normal!important} .nav-avatar{border-radius:50%!important} .nav-links a{font-family:var(--sans)!important;text-transform:none!important;letter-spacing:.02em!important;font-size:12.5px!important;font-weight:500!important;color:var(--muted)!important} .nav-links a:hover,.nav-links a.active{color:var(--ink)!important} .nav-pill{font-family:var(--sans)!important;background:transparent!important;color:var(--ink)!important;border:1px solid var(--ink)!important;text-transform:none!important;letter-spacing:.01em!important;font-size:12.5px!important;font-weight:500!important;border-radius:100px!important;padding:.5rem 1rem!important} .nav-pill:hover{background:var(--ink)!important;color:var(--paper)!important} /* ── hero ── */ .cs-eyebrow,.cs-section-tag,.kara-col-label,.price-eyebrow{color:var(--pop)!important;font-family:var(--sans)!important;font-weight:600!important} .cs-title,.kara-heading{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.03em!important;line-height:.98!important} .cs-title em{font-family:var(--serif)!important;font-style:italic!important;color:var(--pop)!important} .cs-subtitle,.kara-sub,.breadcrumb,.cs-location{font-family:var(--sans)!important} .cs-subtitle{color:var(--muted)!important;font-size:16px!important;line-height:1.7!important} .breadcrumb a:hover,.cs-live-link:hover{color:var(--pop)!important} /* meta grid */ .cs-meta .meta-row,.meta-row{background:var(--border)!important;border-radius:16px!important} .meta-cell{background:var(--paper2)!important} .meta-label{font-family:var(--sans)!important;color:var(--muted)!important} .meta-value{font-family:var(--serif)!important;font-weight:600!important;color:var(--ink)!important} /* tags → landing pills */ .cs-tag{background:transparent!important;color:var(--muted)!important;border:1px solid var(--border)!important;font-family:var(--sans)!important;font-weight:600!important;border-radius:100px!important;letter-spacing:.06em!important} .cs-tag.red{color:var(--pop)!important;border-color:rgba(226,64,42,.35)!important} .cs-tag.green{color:var(--sage)!important;border-color:rgba(42,125,100,.35)!important} /* ── results bar → cream cells, accent numbers ── */ .results-bar{background:var(--border)!important} .result-cell{background:var(--paper2)!important;color:var(--ink)!important} .result-num{font-family:var(--serif)!important;font-weight:500!important;color:var(--pop)!important} .result-label{color:var(--muted)!important;font-family:var(--sans)!important} /* ── body sections ── */ .cs-section h2,.section-divider-label{font-family:var(--serif)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.08!important} .cs-section p,.cs-img-caption,footer,footer p,.milestone-desc,.finding{font-family:var(--sans)!important} .cs-section p{color:var(--muted)!important;font-size:16px!important;line-height:1.75!important} .cs-section p strong{color:var(--ink)!important;font-weight:600!important} .cs-divider{background:var(--border-soft)!important} /* images: rounded + soft shadow, clickable lightbox (case-anim.js) */ .cs-img{border-radius:16px!important;border:1px solid var(--border)!important;background:var(--paper2)!important;box-shadow:0 18px 44px -28px rgba(21,18,13,.32)!important} /* buttons / ctas */ .btn-sage,.btn-primary,.price-badge{font-family:var(--sans)!important} .btn-sage{background:var(--ink)!important;color:var(--paper)!important;border-radius:100px!important} .badge-avail{background:var(--sage)!important} .badge-sold{background:var(--pop)!important} /* accent-coloured bits from the old palette */ footer p em,.next-arrow:hover,.milestone-pct,.price-amount{color:var(--pop)!important} .next-title{font-family:var(--serif)!important;font-weight:600!important} .footer-links a,footer p{font-family:var(--sans)!important} /* pull custom cards onto the cream/panel look */ .price-card,.finding,.kara-section,.cta-strip{background:var(--paper2)!important;border-color:var(--border)!important} /* ── UNIFORM TYPE — every case page uses the landing type system ── Kills any stray 'Syne' / 'DM Mono' left in page-specific components: everything falls to Inter; headings are restored to Fraunces below. */ body *{font-family:var(--sans)!important} h1,h2,h3,h4,.cs-title,.cs-title em,.cs-section h2,.result-num,.next-title,.meta-value, .section-divider-label,.kara-heading,.cs-banner-headline,.milestone-name,.price-amount, .decision-num,.finding-num,[class*="-headline"],[class*="-heading"],blockquote,.pull-quote{ font-family:var(--serif)!important} code,pre,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important} /* ── motion polish ── */ .cs-img{transition:transform .25s var(--eo),box-shadow .25s var(--eo),clip-path .9s var(--eo)!important} .cs-img:hover{transform:translateY(-4px)!important;box-shadow:0 26px 56px -26px rgba(21,18,13,.42)!important} .nav-links a:not(.nav-pill){position:relative} .nav-links a:not(.nav-pill)::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%; background:var(--pop);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--eo)} .nav-links a:not(.nav-pill):hover::after{transform:scaleX(1);transform-origin:left} @media(prefers-reduced-motion:reduce){ .cs-img,.cs-img:hover{transform:none!important;transition:none!important} .nav-links a::after{transition:none} } /* ── SPACE OUT — generous editorial rhythm on the legacy case pages, matching the landing page's breathing room. !important because these override each page's inline