/* Shared portfolio chrome, case-study openings and approved Night palette.

   DESIGN SYSTEM: the rules in DESIGN-SYSTEM.md live here, in the one stylesheet
   every page loads (the minimal home included). Change a value here, never on a
   page; a page that needs something new adds a token here first. */
:root {
  --site-bar-height:48px;

  /* Page max: the widest the site gets, about a 16-inch laptop. Past it the
     page stops growing and the rest of the screen is empty margin. */
  --page-max:1600px; --demo-max:1280px;
  /* Edge: the one left/right edge for the bar, every section and the ending.
     About 55px at 1440, 24px on phones, 72px at most; centred past --page-max. */
  --edge:max(clamp(24px,3.8vw,72px),calc((100% - var(--page-max))/2));
  --case-edge:var(--edge); --site-pad:var(--edge); --pad-x:var(--edge);
  /* Edge-bleed: the minimal home only. Content runs to a hairline margin of
     the screen, after offmute.basedesign.com (user, 2026-10-30); past
     --page-max the whole page is locked to that width and centred (2026-10-31). */
  --edge-bleed:clamp(12px,1.5vw,24px);

  /* Space: the only spacing steps (4/8 grid). */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  /* Rhythm: space above a page title, and the two section sizes. */
  --page-top:var(--space-8); --section-y:var(--space-9); --section-y-tight:var(--space-7);

  /* Type tiers. Page title: one size on every page. Banner title: one size in
     every banner. Section title and card title: one size each, everywhere. */
  --type-page-title:clamp(2.25rem,3.9vw,3.5rem);
  --type-banner-title:clamp(1.5rem,2.6vw,2.25rem);
  --type-section-title:clamp(1.75rem,3.4vw,2.75rem);
  --type-card-title:clamp(1.25rem,1.9vw,1.5rem);
  /* Display: the playful home's now-building sentence (now-building.css),
     capped by the window's height so it and its picture fit one screen. */
  --type-display:clamp(3rem,min(6.6vw,9.5svh),6.5rem);

  /* Corners: three steps only. */
  --radius-sm:4px; --radius-tag:8px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;

  /* Text tiers for anything shared across pages. Same values as styles.css's
     --t-*, but Fleet's own sheet redefines --t-* and --font-* for its product
     screens, so shared parts (the case-study frame) use these. */
  --type-lead:clamp(1.0625rem,1.5vw,1.3125rem); --type-body:1rem;
  --type-small:.875rem; --type-label:.6875rem;
  /* Stat: the big numbers in a case study's top and its bottom line. */
  --type-stat:clamp(1.75rem,2.6vw,2.5rem);
  /* Faces by name, so a page's own --font-* can't swap them out. */
  --face-display:"Funnel Display","Funnel Sans",sans-serif;
  --face-sans:"Funnel Sans",sans-serif; --face-mono:"Fragment Mono",monospace;

  /* Case bar: the sticky project bar under the site bar (64 on phones). */
  --case-bar-height:72px;
  /* Reading progress: the line that fills along the top of the bottom bar. */
  --progress-height:var(--space-1);

  /* Board: the split-flap board that opens the Playground. A dark
     object in both themes, in the night palette's own values. */
  /* Clario's home card: its blue at full strength, as bright as Fleet's red. */
  --clario-card-glow:#1f7fe6; --clario-card-light:#7cc4ff; --clario-card-deep:#123a6b; --clario-card-base:#0a2140;
  --board-bg:#08090B; --board-flap:#191C22; --board-ink:#F5F5F7; --board-rim:rgba(245,245,247,.10);

  --case-banner-height:clamp(200px,17vw,300px);
  --case-banner-type:var(--type-banner-title);
}
@media(max-width:760px){:root{--page-top:var(--space-6);--section-y:var(--space-7);--section-y-tight:var(--space-6);--case-bar-height:64px}}
@media(min-width:1600px){:root{--site-bar-height:56px}}
@media(max-width:900px){:root{--site-bar-height:44px}}
:root.theme-dark {
  --paper:#08090B; --paper-2:#121419; --ink:#F5F5F7;
  --ink-70:#C1C5CE; --ink-40:#9299A6; --rule:#262B33;
  --nx-obj-light:#191C22; --nx-obj-line:rgba(245,245,247,.10);
  --nx-dots:rgba(245,245,247,.055); --dot:rgba(245,245,247,.05);
  --muted:#C1C5CE;
  color-scheme:dark;
}
:root[data-theme="dark"] {
  --bg:#08090B; --ink:#F5F5F7;
  --muted:#C1C5CE; --rule:#262B33;
}
/* One header on every portfolio page, including the reading view and Fleet. */
header.topbar {
  position:fixed!important;top:0;left:0;right:0;z-index:100;
  box-sizing:border-box;height:var(--site-bar-height)!important;
  display:flex;align-items:center;gap:24px;padding:0 var(--site-pad)!important;
  background:color-mix(in srgb,var(--paper,#fff) 82%,transparent)!important;
  backdrop-filter:saturate(1.2) blur(14px);border:0!important;
  color:var(--ink,#141414);font:400 11px/1 'Fragment Mono',monospace!important;
  letter-spacing:.08em;text-transform:uppercase;
}
header.topbar .brand {
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  color:inherit;text-decoration:none;font:inherit!important;
}
header.topbar .brand strong {font:500 11px/1 'Fragment Mono',monospace!important;letter-spacing:.02em!important}
header.topbar .ts-mark {width:20px!important;height:20px!important;flex:0 0 20px;transform:translateY(-.5px)}
header.topbar .nav {display:flex;align-items:center;gap:24px;margin:0 0 0 auto!important;font:inherit!important}
header.topbar .nav a {font:inherit!important;letter-spacing:inherit!important;white-space:nowrap;color:var(--ink,#141414)!important;text-decoration:none}
header.topbar .nav a[aria-current] {color:var(--accent-text,#D2470E)!important}
header.topbar .nav a:hover {color:var(--accent-text,#D2470E)!important}
@media(min-width:761px) and (max-width:1180px){header.topbar .nav{gap:16px}}
@media(max-width:760px){
  header.topbar{gap:12px}
  header.topbar .brand{display:none}
  header.topbar .nav{margin:0 auto 0 0!important;gap:16px;font-size:10px!important}
  header.topbar .nav a{display:flex;align-items:center;min-height:44px}
}
@media(max-width:360px){header.topbar .nav{gap:10px;font-size:9px!important}}
/* The brand remains project-specific; geometry and button treatment are shared. */
.portfolio-case{--case-accent:#a73c24;--case-accent-readable:#a73c24}
.asset-clearance-case{--case-accent:#5a8fc0;--case-accent-readable:#315f87}
body:has(.case-nav){--case-accent:#e23744;--case-accent-readable:#b51d2c}
:root.theme-dark .portfolio-case{--case-accent-readable:#ed987a}
:root.theme-dark .asset-clearance-case{--case-accent-readable:#9bc5ed}
:root.theme-dark body:has(.case-nav){--case-accent-readable:#e23744}
.an-bar,.clario-sticky-nav-shell .clario-product-nav,.case-nav {
  box-sizing:border-box;height:var(--case-bar-height)!important;min-height:var(--case-bar-height)!important;
  padding:0 var(--case-edge)!important;gap:24px!important;
  display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;
  background:color-mix(in srgb,var(--paper) 90%,transparent)!important;color:var(--ink)!important;
  border-bottom:1px solid var(--rule)!important;
}
.an-bar,.clario-sticky-nav-shell,.case-nav-shell{top:var(--site-bar-height)!important}
.an-bar-links,.clario-product-links,.case-links{display:flex!important;justify-content:center;justify-self:center;gap:clamp(12px,1.5vw,24px)!important;min-width:0}
.an-bar-links a,.clario-product-links a,.case-links a{font:500 14px/1 'Funnel Sans',sans-serif!important;color:var(--ink-70,var(--muted))!important;white-space:nowrap}
.an-bar-links a:hover,.clario-product-links a:hover,.case-links a:hover{color:var(--case-accent-readable)!important}
.an-bar-cta,.clario-nav-actions,.fl-actions{display:flex;gap:8px;justify-self:end;align-items:center}
.an-bar .tbtn,.clario-nav-actions .tbtn,.fl-actions .fl-btn{
  display:inline-flex!important;align-items:center;gap:10px;height:40px!important;
  box-sizing:border-box;padding:0 7px 0 16px!important;border:0;border-radius:999px;
  font:500 14px/1 'Funnel Sans',sans-serif!important;white-space:nowrap;text-decoration:none;
  background:transparent!important;color:var(--ink)!important;
  box-shadow:inset 0 0 0 1px var(--rule)!important;
  --chip-bg:var(--paper-2);--chip-ink:var(--case-accent-readable);--chip-line:transparent;
}
.an-bar .tbtn.is-solid,.clario-nav-actions .tbtn.is-solid,.fl-actions .fl-btn.is-solid{
  background:var(--ink)!important;color:var(--paper)!important;box-shadow:none!important;
  --chip-bg:var(--case-accent);--chip-ink:#fff;
}
.an-bar .tbtn .tbtn-chip,.clario-nav-actions .tbtn .tbtn-chip,.fl-chip{width:26px;height:26px;border-radius:8px}
.an-bar .tbtn::after,.clario-nav-actions .tbtn::after,.fl-actions .fl-btn::after{border-color:var(--case-accent-readable)!important}
/* Equal banners, headline sizes/weights, inset and eyebrow rhythm. */
.an-banner,.clario-banner,.hero#overview{height:var(--case-banner-height)!important;min-height:0!important}
.an-banner-copy{left:var(--case-edge)!important;right:var(--case-edge)!important;bottom:clamp(24px,3.4vw,44px)!important}
.clario-banner-inner{padding:0 var(--case-edge) clamp(24px,3.4vw,44px)!important}
.hero#overview .hero-copy{left:var(--case-edge)!important;right:var(--case-edge)!important;bottom:clamp(24px,3.4vw,44px)!important;max-width:none!important}
.an-banner-line,.clario-banner h1,.hero#overview h1{
  font:600 var(--case-banner-type)/1.12 'Funnel Display','Funnel Sans',sans-serif!important;
  letter-spacing:-.02em!important;max-width:36ch!important;margin:0!important;text-wrap:balance;
}
.an-banner-line span,.clario-banner h1 span{color:rgba(255,255,255,.72)}
.an-banner .an-eyebrow,.clario-banner-eyebrow,.hero#overview .site-banner-eyebrow{
  display:block!important;margin:0 0 10px!important;color:rgba(255,255,255,.78)!important;
  font:400 11px/1.5 'Fragment Mono',monospace!important;letter-spacing:.06em!important;text-transform:uppercase;
}
.hero#overview .hero-sub{display:none!important}
.an-intro-lead,.cs-ritam .clario-intro-grid>.lead,.case-credits p,
.section-title p,.section-head+p,.project-brief>div>p:not(.label){font-size:18px!important;line-height:1.55!important}
.an-intro-grid h1,.clario-intro-title,.proj-title{font-weight:600!important}
:root.theme-dark .an-bar{background:color-mix(in srgb,var(--paper) 90%,transparent)!important}
:root.theme-dark .section--dark{background:var(--paper-2)!important}
/* Noise sits over the orange backdrop, below the assistant window artwork. */
.tooling-art--chata{position:relative;isolation:isolate}
.tooling-art--chata .case-card-grain{z-index:1;opacity:.48;mix-blend-mode:overlay}
.tooling-art--chata img{position:relative;z-index:0}
@media(max-width:1200px){
 .an-bar,.clario-sticky-nav-shell .clario-product-nav,.case-nav{grid-template-columns:1fr auto!important}
 .an-bar-links,.clario-product-links,.case-links{display:none!important}
}
@media(max-width:760px){
 .an-bar,.clario-sticky-nav-shell .clario-product-nav,.case-nav{height:var(--case-bar-height)!important;min-height:var(--case-bar-height)!important;gap:12px!important}
 .an-bar .tbtn:not(.is-solid),.clario-nav-actions .tbtn:not(.is-solid),.fl-actions .fl-btn:not(.is-solid){display:none!important}
 .an-bar-brand img{height:32px!important}
 .an-intro-lead,.cs-ritam .clario-intro-grid>.lead,.case-credits p,.section-title p,.section-head+p,.project-brief>div>p:not(.label){font-size:17px!important}
}
/* Archive case-study opening snippets follow the same reading size. */
.proj-hero>.lead{font-size:18px;line-height:1.55}
@media(max-width:760px){.proj-hero>.lead{font-size:17px}}
/* Only the background gets additional grain; the assistant window stays clear. */
.tooling-art--chata .case-card-grain{clip-path:polygon(0 0,100% 0,100% 19.6%,19.2% 19.6%,19.2% 100%,0 100%)}
/* Spatial keeps its orbit controls below the common site navigation. */
@font-face{font-family:'Fragment Mono';src:url('/fonts/fragment-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
:root[data-theme="light"]{--paper:#fff;--accent-text:#D2470E}
:root[data-theme="dark"]{--paper:#08090B;--paper-2:#121419;--ink-70:#c1c5ce;--accent-text:#FB6632}
body:has(.sp-top) .sp-top{top:calc(var(--site-bar-height) + 24px)}
.spatial-primary~.sp-top .sp-brand{display:none}
.spatial-primary~.sp-top .sp-views{margin-inline:auto}
header.topbar .nav a::before{display:none!important}
.spatial-primary~.sp-top .sp-nav{margin-left:auto}
body:has(.spatial-primary) .sp-index{top:calc(var(--site-bar-height) + 132px)}
/* Fleet's standalone shell uses the same clipped horizontal canvas as the site. */
body:has(.case-nav){overflow-x:clip}
header.topbar .nav{width:auto!important;min-width:0}
@media(max-width:760px){header.topbar .nav{flex:1;justify-content:space-between;gap:8px}}
.section-title,.section-title>*{min-width:0}
.section-title h2{overflow-wrap:break-word}
/* Token architecture stacks before its three long code columns become cramped. */
@media(max-width:1000px){.portfolio-case .rb-tiers-grid{grid-template-columns:minmax(0,1fr);gap:24px}.portfolio-case .rb-tiers-note{grid-template-columns:minmax(0,1fr)}}
.portfolio-case .an-intro h1 span{color:var(--case-accent-readable)}
.asset-clearance-case .accent-text{color:var(--case-accent-readable)}
/* The standalone Fleet header was in normal flow; reserve its shared fixed row. */
body:has(.case-nav){padding-top:var(--site-bar-height)}
.case-nav-shell,.clario-sticky-nav-shell{height:var(--case-bar-height)!important;box-sizing:border-box;border:0!important}
/* Fleet's active Work link must remain readable independently of product tokens. */
header.site-header.topbar .nav a[aria-current]{color:var(--accent-text,#D2470E)!important}
/* Product colour appears only after the banner passes the sticky menu. */
.portfolio-case{--case-bar-colour:#2a1d15}
.asset-clearance-case{--case-bar-colour:#315f87}
body:has(.case-nav){--case-bar-colour:#b51f30}
.an-bar,.clario-product-nav,.case-nav{transition:background-color var(--dur-fast,180ms) var(--ease,ease-out),color var(--dur-fast,180ms) var(--ease,ease-out)}
:root :is(.an-bar,.clario-product-nav,.case-nav).case-nav--branded{
 background:var(--case-bar-colour)!important;color:#fff!important;border-bottom-color:rgba(255,255,255,.18)!important;
 --ink:#fff;--ink-70:rgba(255,255,255,.88);--muted:rgba(255,255,255,.88);--paper:var(--case-bar-colour);--rule:rgba(255,255,255,.32);
}
:root .case-nav--branded :is(.an-bar-links,.clario-product-links,.case-links) a{color:rgba(255,255,255,.88)!important}
:root .case-nav--branded :is(.an-bar-links,.clario-product-links,.case-links) a:hover{color:#fff!important}
:root .case-nav--branded :is(.clario-product-brand,.case-brand){color:#fff!important}
:root .case-nav--branded :is(.clario-product-brand,.case-brand) span{color:rgba(255,255,255,.7)!important}
:root .an-bar.case-nav--branded .an-bar-brand img{filter:brightness(0) invert(1)}
:root .case-nav--branded :is(.tbtn,.fl-btn){color:#fff!important;--chip-bg:rgba(255,255,255,.12);--chip-ink:#fff;--chip-line:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)!important}
:root .case-nav--branded :is(.tbtn,.fl-btn).is-solid{background:#fff!important;color:var(--case-bar-colour)!important;--chip-bg:var(--case-accent);--chip-ink:#fff;box-shadow:none!important}
:root .case-nav--branded :is(.tbtn,.fl-btn)::after{border-color:#fff!important}
@media(prefers-reduced-motion:reduce){.an-bar,.clario-product-nav,.case-nav{transition:none}}

/* Match the case-study content edge while keeping the shared chrome wide. */
:is(body:has(#home-playground),.about-page,.archive-page,body:has(.craft-accordion),body:has(.lab-body)) main#main > .wrap:not(.shared-contact) {
  padding-inline:var(--case-edge);
}
.recruiter-main.wrap{padding-inline:var(--case-edge)}

/* Minimal / Playful switch (shared-shell.js puts it before Work, or in a page's
   own [data-view-switch-slot] where there is no bar). Mono labels
   are the same width, so the thumb is simply half the track. Phones keep the
   play hero's own Minimal view button; the minimal home, which has no other
   way to the playful site, keeps the switch at every width. */
:is(header.topbar,[data-view-switch-slot]) .view-switch{position:relative;flex:none;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink,#141414) 20%,transparent)}
:is(header.topbar,[data-view-switch-slot]) .view-switch::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:99px;background:var(--ink,#141414);transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
:is(header.topbar,[data-view-switch-slot]) .view-switch[data-on="playful"]::before{transform:translateX(100%)}
:is(header.topbar,[data-view-switch-slot]) .view-switch a{position:relative;display:block;padding:6px 10px;text-align:center;text-indent:.16em;text-decoration:none;color:var(--ink,#141414)!important;transition:color 240ms}
:is(header.topbar,[data-view-switch-slot]) .view-switch a:not([aria-current]):hover{color:var(--accent-text,#D2470E)!important}
:is(header.topbar,[data-view-switch-slot]) .view-switch[data-on="minimal"] a[data-view="minimal"],:is(header.topbar,[data-view-switch-slot]) .view-switch[data-on="playful"] a[data-view="playful"]{color:var(--paper,#fff)!important}
header.topbar > .view-switch{margin-left:auto}
[data-view-switch-slot] .view-switch{font:400 11px/1 'Fragment Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){body:not(.minimal-page) :is(header.topbar,[data-view-switch-slot]) .view-switch{display:none}}
@media(prefers-reduced-motion:reduce){:is(header.topbar,[data-view-switch-slot]) .view-switch::before,:is(header.topbar,[data-view-switch-slot]) .view-switch a{transition:none}}

/* ===== Design system: page titles and rhythm (DESIGN-SYSTEM.md §3-4) =====
   Every page title is the same size, the same weight and sits the same
   distance below the bar. Pages that had drifted are pinned to the tokens here
   rather than edited one by one. Signature displays (the minimal home's
   Tatha-Gata and the playful hero's Hello!) are exempt. */
:is(.about-statement,.archive-title,.proj-hero .proj-title,.recruiter-intro h1,h1.display.mb-6,.rps-title,.lib-title){
  font-family:var(--font-display,"Funnel Display",sans-serif)!important;font-size:var(--type-page-title)!important;
  font-weight:600!important;line-height:1.05!important;letter-spacing:-.025em!important}
.page-about .about-intro{padding-block:var(--page-top) var(--section-y-tight)!important}
.page-about .section-tight,.about-intro + .section-tight{padding-block:var(--section-y-tight)!important}
.archive-page .cascade{margin-top:var(--page-top)}
/* Archive lives in the bottom bar, beside Dark mode. */
.botbar .bar-link{text-decoration:none;text-transform:none;letter-spacing:0;transition:color var(--dur-fast,180ms) var(--ease,ease)}
.botbar .bar-link:hover,.botbar .bar-link[aria-current]{color:var(--accent-text)}
.archive-page main#main > .wrap:first-of-type{padding-top:var(--page-top)!important;padding-bottom:var(--section-y-tight)!important}
.archive-page main#main > .wrap:not(:first-of-type):not(.shared-contact):not(#projects):not(:has(>.craft-accordion)){padding-bottom:var(--section-y)!important}
.proj-hero{padding-top:var(--page-top)!important;padding-bottom:var(--section-y-tight)!important}
.recruiter-main{padding-top:var(--page-top)!important}
main#main > .wrap:has(> .grid > div > h1.display.mb-6),main#main > .wrap:has(h1.display.mb-6){padding-top:var(--page-top)!important;padding-bottom:var(--section-y)!important}
/* About centred its copy against the photo grid, so its title started ~46px
   lower than every other page's; it starts at the top like the rest. */
@media(min-width:981px){.about-page .about-open{align-items:start!important}}
main.rps{padding-top:var(--page-top)!important}

/* ===== Case-study template (DESIGN-SYSTEM.md §7; preview: case-study-template.html) =====
   One set of rules for Anubhuti (.portfolio-case), Clario (.asset-clearance-case)
   and Fleet (body:has(.case-nav)), on top of each page's own sheet. Diagrams,
   mockups and specimens (.system-board, .client-panel, .failure-visual,
   .product-window) keep their own type. */

/* Headings: one section-title style for every H2 (and Anubhuti's intro H1);
   one card-title style for every H3. */
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) main :is(h2,.an-intro h1):not(#evidence-key-title):not(:is(.system-board,.client-panel,.failure-visual,.product-window) *){
  font-family:var(--font-display,"Funnel Display",sans-serif)!important;font-size:var(--type-section-title)!important;
  font-weight:600!important;line-height:1.08!important;letter-spacing:-.025em!important;text-transform:none!important}
/* A numbered head (number · title · meta) gives the title its own line on phones. */
@media(max-width:760px){:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .sec-head{flex-wrap:wrap;row-gap:var(--space-2)}
  :is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .sec-head .sec-title{order:3;flex:1 0 100%}}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) main h3:not(:is(.system-board,.client-panel,.failure-visual,.product-window,.operator-live-copy) *){
  font-family:var(--font-display,"Funnel Display",sans-serif)!important;font-size:var(--type-card-title)!important;
  font-weight:600!important;line-height:1.2!important;letter-spacing:-.015em!important}
body:has(.case-nav) .operator-live-copy h3{font-size:var(--type-section-title)!important;line-height:1.08!important;letter-spacing:-.025em!important}
/* Fleet's 9px "How to read the evidence" was a heading pretending to be a label. */
body:has(.case-nav) #evidence-key-title{font:400 11px/1.4 var(--font-mono,"Fragment Mono",monospace)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--ink-70)!important}

/* Short version: the same four-part list on all three. */
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .case-short :is(dl,.case-credits){
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--space-6) var(--space-9)!important;margin:var(--space-7) 0 0!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .case-short :is(dl,.case-credits)>div{border-top:1px solid var(--rule)!important;padding:var(--space-3) 0 0!important;margin:0!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .case-short :is(dt,.case-credits small){
  display:block!important;margin:0 0 var(--space-2)!important;font:400 11px/1.4 var(--font-mono,"Fragment Mono",monospace)!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--ink-70)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .case-short :is(dd,.case-credits p){
  margin:0!important;max-width:52ch!important;font:400 1rem/1.55 var(--font-sans,"Funnel Sans",sans-serif)!important;color:var(--ink)!important}
@media(max-width:760px){:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .case-short :is(dl,.case-credits){grid-template-columns:1fr!important;gap:var(--space-5)!important}}

/* Go deeper: one quiet fold on all three: rule lines, card-title heading, pill cue.
   No dark band, no serif heading. */
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper{border-top:1px solid var(--rule)!important;background:none!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper:last-of-type{border-bottom:1px solid var(--rule)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper > summary{
  min-height:0!important;padding:var(--space-8) var(--edge)!important;background:none!important;color:var(--ink)!important;border:0!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper-h{
  margin:var(--space-3) 0 0!important;max-width:none!important;font:600 var(--type-card-title)/1.2 var(--font-display,"Funnel Display",sans-serif)!important;
  letter-spacing:-.015em!important;color:var(--ink)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper-p{
  margin:var(--space-2) 0 0!important;max-width:56ch!important;font:400 1rem/1.55 var(--font-sans,"Funnel Sans",sans-serif)!important;color:var(--ink-70)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper-cue{margin-top:var(--space-5)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper-cue > span{
  border-radius:var(--radius-pill)!important;padding:var(--space-3) var(--space-4)!important;border:1px solid currentColor!important;
  font:500 11px/1 var(--font-mono,"Fragment Mono",monospace)!important;letter-spacing:.08em!important;color:var(--ink)!important;background:none!important}
@media(hover:hover){:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) .go-deeper > summary:hover .go-deeper-cue > span{background:var(--ink)!important;color:var(--paper,#fff)!important}}

/* Rhythm: the first block sits --page-top under the banner; every chapter
   opens with --section-y above it, so chapters are one step apart. Bands with
   their own colour keep space inside too. */
.portfolio-case .an-intro,.asset-clearance-case #short,body:has(.case-nav) #short{padding-top:var(--page-top)!important;padding-bottom:0!important}
.portfolio-case .project-brief{padding-top:var(--section-y-tight)!important;padding-bottom:0!important}
.portfolio-case :is(.chapter,.case-evidence),.asset-clearance-case main > section.section-tight,body:has(.case-nav) main .section:not(.section--rose):not(.section--dark),body:has(.case-nav) .fl-impact{
  padding-top:var(--section-y)!important;padding-bottom:0!important}
body:has(.case-nav) main :is(.section--rose,.section--dark){padding-block:var(--section-y)!important;margin-top:var(--section-y)!important}
:is(.portfolio-case,.asset-clearance-case,body:has(.case-nav)) main > :is(details.go-deeper):first-of-type,
.portfolio-case details.go-deeper:first-of-type,.asset-clearance-case details.go-deeper:first-of-type,body:has(.case-nav) details.go-deeper:first-of-type{margin-top:var(--section-y)!important}
body:has(.case-nav) .evidence-key{padding-top:var(--section-y-tight)!important}

/* Next project on the craft pages: --section-y-tight above and below,
   page-title size. The three case studies use .cs-next (case-story.css). */
.next-proj{padding-block:var(--section-y-tight)!important}
.next-proj .np-title{
  font-family:var(--font-display,"Funnel Display",sans-serif)!important;font-size:var(--type-page-title)!important;font-weight:600!important;line-height:1.05!important;letter-spacing:-.025em!important}

/* Back link at the top of a product case study (2026-11-09), set like the campaign
   pages' "← Back to Craft": small mono capitals in the quiet grey, orange on hover. */
.cs-back { margin: 0 0 var(--space-5); font: 400 var(--type-label)/1.4 var(--face-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); }
.cs-back a { color: inherit; text-decoration: none; }
.cs-back a:hover, .cs-back a:focus-visible { color: var(--accent-text); }

/* ---- Campaign case studies, set like the product ones (audit, 2026-11-09) -------
   Same back link, same space down to the title, the disciplines as the same chips,
   and the Client / My role / Tools row set like the product and AI pages' details
   (grey mono label over plain text), without its old rules above and below. */
.campaign-page .proj-hero .proj-title { margin: 0 0 var(--space-6); }
.campaign-page .proj-hero .cs-roles { margin: 0 0 var(--space-6); }
.campaign-page #top + section .credits {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-7); padding: 0; border: 0;
}
/* Client, My role, Tools, Collaborators on one line (user, 2026-11-09); the
   Behance source link was taken out of this row. */
@media (max-width: 860px) { .campaign-page #top + section .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campaign-page #top + section .credit-key { margin: 0; color: var(--ink-70); }
.campaign-page #top + section .credit-val { margin: var(--space-1) 0 0; font: 400 var(--type-small)/1.45 var(--face-sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
/* Campaign pages use the whole content area (user, 2026-11-09): the image stacks run
   edge to edge instead of the centred 8 columns chosen on 2026-10-25, and the brief,
   approach and impact text runs to the right edge beside its label. */
@media (min-width: 1024px) {
  .campaign-page main .bh-stack { max-width: none; margin-inline: 0; }
}
@media (min-width: 861px) {
  .campaign-page .proj-text .pt-body { grid-column: span 9; }
}

/* Every case-study picture has Purr's corner (--radius-sm, 4px), campaign pages
   included: their stacks were square-cornered (user, 2026-11-09). */
.campaign-page main :is(.bh-img, .media-pair > *, .mk-tile) { border-radius: var(--radius-sm); overflow: hidden; }
.campaign-page main .bh-img :is(img, video) { border-radius: inherit; }