/* <picture> is a format switch only; it must never introduce a box of its own. */
picture{display:contents}
/* Metric-matched fallback for Space Mono.
   Measured in Chrome: Space Mono's advance width is 111.3% of Consolas, so mono text
   reflowed when the webfont swapped in — the article byline went from one line to two
   and pushed the body down 26px (CLS 0.096). Scaling the fallback removes the reflow
   without blocking render. Every mono element here sets an explicit unitless
   line-height, so size-adjust changes width only. Verified on Windows/Consolas;
   platforms without Consolas fall through to the stack below, unchanged. */
@font-face{font-family:'Space Mono Fallback';src:local('Consolas');size-adjust:111.3%}
/* Case-study system. Shared chrome, typography and components; each page varies its own
   section sequence. Everything is scoped to .case-study-page so nothing else is affected. */
.case-study-page{
  --ink:#151713;
  --ink-soft:#62675b;
  --ink-faint:#8a8f80;
  --paper:#f4f4ef;
  --surface:#e9ebe1;
  --line:#d6d9cd;
  --rule:#c9cdbe;
  --accent:#d8ff33;
  --header-height:5.5rem;
  --shell:min(calc(100% - 2.5rem),82rem);
  --measure:46ch;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Outfit','Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono','Space Mono Fallback',Consolas,monospace;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.case-study-page *,.case-study-page *::before,.case-study-page *::after{box-sizing:border-box}
.case-study-page :where(h1,h2,h3,h4,p,figure,figcaption,ul,ol,dl,dd,dt){margin:0}
.case-study-page a{color:inherit;text-underline-offset:.22em}
.case-study-page img{display:block;max-width:min(100%,var(--nat,100%));height:auto}
.case-study-page ::selection{background:var(--accent);color:var(--ink)}
.cs-root{scroll-padding-top:calc(5.5rem + 1.5rem);scroll-behavior:smooth}

/* ---------- Chrome ---------- */
.cs-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.cs-header-inner{width:var(--shell);margin-inline:auto;min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.cs-brand{display:inline-flex;align-items:center;gap:.8rem;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.cs-brand>span{display:grid;place-items:center;width:2.5rem;height:2.5rem;background:var(--ink);color:var(--paper);border-radius:.25rem;font-size:.7rem;transform:rotate(-5deg)}
.cs-nav{display:flex;align-items:center;gap:1.75rem;font-size:.88rem}
.cs-nav a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.cs-nav a:hover{text-decoration:underline}
.cs-nav a[aria-current='page']{font-weight:500;text-decoration:underline;text-underline-offset:.35em}
.cs-nav .cs-nav-cta{padding:.6rem 1rem;min-height:2.6rem;background:var(--accent);border-radius:999px;white-space:nowrap}
.cs-shell{width:var(--shell);margin-inline:auto}
.cs-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-block:1.5rem .25rem;color:var(--ink-soft);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
.cs-breadcrumb a{text-decoration:none}
.cs-breadcrumb a:hover{text-decoration:underline}

/* ---------- Opening: who / what / see it, with real work in the first screen ---------- */
.cs-open{display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;padding-block:clamp(1.5rem,3vw,2.75rem) clamp(2rem,4vw,3.5rem)}
.cs-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.cs-open h1{margin-top:.9rem;font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.25rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.cs-open h1 .cs-h1-sub{display:block;margin-top:.3rem;font-size:.42em;font-family:var(--sans);font-weight:400;letter-spacing:0;color:var(--ink-soft);line-height:1.35}
.cs-summary{max-width:38ch;margin-top:1.1rem;color:var(--ink-soft);font-size:1.0625rem;line-height:1.65}
.cs-role{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;line-height:1.7;letter-spacing:.03em;color:var(--ink-soft)}
.cs-role b{display:block;color:var(--ink);font-weight:400}
.cs-open-links{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:1.35rem}
.cs-link{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)}
.cs-link:hover{border-color:var(--ink)}
.cs-link span{transition:transform 180ms cubic-bezier(.22,1,.36,1)}
.cs-link:hover span{transform:translate(2px,-2px)}
/* A project with no publishable artwork opens on text alone rather than borrowing another clients. */
.cs-open--textonly{grid-template-columns:minmax(0,1fr)}
.cs-open--textonly .cs-summary{max-width:52ch}
.cs-open-figure{min-width:0;display:flex;justify-content:flex-start}
.cs-open-figure img{width:auto;max-height:min(64vh,34rem);border:1px solid var(--line)}

/* ---------- Compact verified facts ---------- */
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.25rem 2rem;padding-block:1.4rem;border-block:1px solid var(--rule);margin:0}
.cs-fact>dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.cs-fact>dd{margin:.4rem 0 0;font-size:.95rem;line-height:1.45}

/* ---------- Sections ---------- */
.cs-section{padding-block:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--rule)}
.cs-section:first-of-type{border-top:0}
.cs-section-head{max-width:var(--measure)}
.cs-section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1.15rem + 1.1vw,2.15rem);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.cs-section-head p{margin-top:.9rem;color:var(--ink-soft);line-height:1.72}
.cs-lede{max-width:52ch;font-size:1.125rem;line-height:1.7;color:var(--ink-soft)}
.cs-lede strong{color:var(--ink);font-weight:500}

/* Artwork + the reason for it, side by side */
.cs-figure{margin:0}
.cs-figure img{width:auto;max-height:34rem;border:1px solid var(--line)}
.cs-figure figcaption,.cs-note{max-width:var(--measure);margin-top:1rem;color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.cs-figure figcaption b,.cs-note b{color:var(--ink);font-weight:500}

.cs-split{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,25rem);justify-content:start;gap:clamp(1.75rem,3.5vw,3.5rem);align-items:start}
.cs-split--reverse{grid-template-columns:minmax(0,25rem) minmax(0,26rem)}
.cs-split .cs-figure img{max-height:32rem}
.cs-split--reverse>.cs-figure{order:2}
.cs-split--reverse>.cs-aside{order:1}
.cs-aside h3{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.25;letter-spacing:-.015em}
.cs-aside p{margin-top:.8rem;color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.cs-aside p+p{margin-top:.8rem}
.cs-aside .cs-link{margin-top:1.1rem}

.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,24rem));justify-content:start;gap:clamp(1rem,2vw,1.75rem);align-items:start}
.cs-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,15rem));justify-content:start;gap:clamp(.85rem,1.6vw,1.35rem);align-items:start}
.cs-pair img,.cs-strip img{width:100%;border:1px solid var(--line)}
.cs-caption{max-width:var(--measure);margin-top:1.1rem;color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.cs-caption b{color:var(--ink);font-weight:500}

/* Gallery: aspect ratios preserved, columns so tall and short pieces sit naturally */
.cs-gallery{columns:4;column-gap:clamp(.85rem,1.6vw,1.35rem);margin-top:1.75rem}
.cs-gallery a{display:block;margin-bottom:clamp(.85rem,1.6vw,1.35rem);break-inside:avoid;text-decoration:none}
.cs-gallery img{width:100%;max-width:100%;max-height:none;border:1px solid var(--line);transition:border-color 180ms}
.cs-gallery a:hover img,.cs-gallery a:focus-visible img{border-color:var(--ink)}
.cs-gallery-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cs-gallery-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}

/* Website screens */
.cs-screens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.cs-screens .cs-figure img{width:auto;max-height:32rem}
.cs-screens--wide{grid-template-columns:minmax(0,1fr)}

/* Simulated applications are labelled so they cannot be mistaken for photographs */
.cs-simulated{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.cs-simulated::before{content:'';width:.4rem;height:.4rem;border:1px solid currentColor;border-radius:50%}

/* A short list of what was delivered, as text rather than cards */
.cs-delivered{max-width:var(--measure);margin-top:1.4rem;padding:0;list-style:none}
.cs-delivered li{padding-block:.7rem;border-top:1px solid var(--line);display:flex;gap:1rem;align-items:baseline}
.cs-delivered li:last-child{border-bottom:1px solid var(--line)}
.cs-delivered .cs-d-count{flex:none;min-width:3.5rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}

/* Deeper proof */
.cs-links{display:grid;gap:0;margin-top:1.5rem;padding:0;list-style:none;max-width:52rem}
.cs-links li{border-top:1px solid var(--line)}
.cs-links li:last-child{border-bottom:1px solid var(--line)}
.cs-links a{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;min-height:3.5rem;padding-block:.9rem;text-decoration:none;line-height:1.4}
.cs-links a:hover .cs-link-label{text-decoration:underline;text-underline-offset:.2em}
.cs-links .cs-link-note{flex:none;color:var(--ink-soft);font-size:.85rem}

/* ---------- Invitation ---------- */
.cs-invite{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.cs-invite h2{max-width:24ch;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.35rem);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.cs-invite p{max-width:50ch;margin-top:.9rem;color:var(--ink-soft)}
.cs-invite-links{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;margin-top:1.4rem}
.cs-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,19rem));justify-content:start;gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.cs-next-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.cs-next a{display:block;min-width:0;text-decoration:none}
.cs-next img{width:100%;max-width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line)}
.cs-next h3{margin-top:.85rem;font-size:1.05rem;font-weight:500;line-height:1.3}
.cs-next p{margin-top:.25rem;color:var(--ink-soft);font-size:.88rem;line-height:1.5}
.cs-next a:hover h3{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Responsive ---------- */
@media(min-width:1440px){.case-study-page{--shell:min(calc(100% - 8rem),82rem)}}
@media(max-width:1000px){
  .cs-open{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .cs-open-figure{order:-1}
  .cs-split,.cs-split--reverse{grid-template-columns:minmax(0,1fr)}
  .cs-split .cs-figure img,.cs-figure img{max-height:none;width:100%}
  .cs-open-figure img{max-height:none;width:100%}
  .cs-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-strip{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
  .cs-split--reverse>.cs-figure,.cs-split--reverse>.cs-aside{order:0}
  .cs-gallery{columns:3}
  .cs-screens{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .case-study-page{--header-height:4.5rem}
  .cs-root{scroll-padding-top:calc(4.5rem + 1rem)}
  .cs-header-inner{flex-wrap:wrap;gap:.5rem 1rem;padding-block:.75rem}
  .cs-nav{gap:1rem;font-size:.82rem}
  .cs-gallery{columns:2}
  .cs-next{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .case-study-page{--shell:calc(100% - 2.5rem)}
  .cs-nav{width:100%;justify-content:space-between;gap:.5rem}
  .cs-pair{grid-template-columns:minmax(0,1fr)}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
}
@media(prefers-reduced-motion:reduce){
  .cs-root{scroll-behavior:auto}
  .case-study-page *,.case-study-page *::before,.case-study-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .cs-header,.cs-invite{display:none}
  .cs-gallery{columns:3}
}