/* ============================================================
   /case-studies/ zone stylesheet.

   Component styles shared by the case-study pages (the deep-linking
   series and the adrelease study). Every colour, family, spacing and
   motion value comes from assets/brand.css, which each page links
   first. This file adds no brand-level token: the --cs-* values
   below are zone-only layout and size choices composed from brand
   tokens, the same layering rule brand/doc-site-tokens.md sets for
   /how-we-work/.

   Type is the house system stack (--font-sans). Code and terminal
   text take --font-mono. No webfont is loaded (async-digital-site#694
   retired the hosted Canon exception this zone used to run).
   ============================================================ */

/* Follow the visitor's system appearance, as the rest of the apex does
   from styles.css, which these pages do not load. Behind the test brand.css
   uses for its light-dark() tokens; brand/colour.md, Dark palette. */
:root {
  /* A prose link: brick in light, --text in dark so the view's brick is
     left for its fills and paths (brand/colour.md, Dark palette). Same
     token as styles.css, which these pages do not load. */
  --link: var(--primary);
  --cs-link-line: color-mix(in srgb, var(--link) 30%, transparent);
  /* Page titles: navy in light, --text in dark. */
  --cs-title: var(--accent);
  /* The phone frame each page draws in its own <style>: navy in light; in
     dark a warm neutral bezel, a dark island and no shadow. The screenshots
     inside are not changed. */
  --cs-phone-bezel: var(--accent);
  --cs-phone-edge: var(--text);
  --cs-phone-shadow-1: color-mix(in srgb, var(--accent) 55%, transparent);
  --cs-phone-shadow-2: color-mix(in srgb, var(--accent) 35%, transparent);
  --cs-phone-island: var(--text);
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --link: light-dark(var(--primary), var(--text));
    --cs-title: light-dark(var(--accent), var(--text));
    --cs-phone-bezel: light-dark(var(--accent), var(--border));
    --cs-phone-edge: light-dark(var(--text), color-mix(in srgb, var(--muted) 30%, var(--border)));
    --cs-phone-shadow-1: light-dark(color-mix(in srgb, var(--accent) 55%, transparent), transparent);
    --cs-phone-shadow-2: light-dark(color-mix(in srgb, var(--accent) 35%, transparent), transparent);
    --cs-phone-island: light-dark(var(--text), var(--bg));
  }
}

/* Print is always light: browsers drop backgrounds when printing, so dark
   tokens would put cream type on white paper. */
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
}

:root {
  /* Long-form body size. Larger than --size-body for sustained reading,
     matching --docs-body-size on /how-we-work/. */
  --cs-body-size: 17px;
  --cs-body-lh: 1.6;
  /* Section heading. Sits between --size-h1 and --cs-body-size so the
     three-step hierarchy (page title, section, body) stays visible. */
  --cs-h2-size: 26px;
  /* Card and tile titles. */
  --cs-h3-size: 18px;
  /* Reading width for body copy. */
  --cs-measure: 66ch;
  /* Label voice: eyebrows, kickers, card roles. */
  --cs-label-size: 12px;
  --cs-label-track: .12em;
  /* Brand tints used for inline code fills, callouts and link rules. */
  --cs-tint: color-mix(in srgb, var(--primary) 8%, transparent);
  --cs-tint-line: color-mix(in srgb, var(--primary) 30%, transparent);
  /* Page container. */
  --cs-wrap: 880px;
}

@media (max-width: 480px) {
  :root {
    --cs-body-size: 16px;
    --cs-h2-size: 22px;
    --cs-h3-size: 17px;
  }
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--cs-body-size);line-height:var(--cs-body-lh);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:var(--cs-wrap);margin:0 auto;padding:0 clamp(16px,5vw,40px)}

/* ============================ TOPBAR + BRAND ============================ */
header.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--border-hairline)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:15px;color:var(--text)}
.brand .mark{width:24px;height:24px;color:var(--primary);flex:0 0 auto;display:inline-flex}
.brand .mark svg{width:100%;height:100%;display:block}
.brand .sub{color:var(--muted);font-weight:var(--weight-regular);font-size:14px}
/* The wordmark is the go-home affordance. Scoped to .brand-home rather than
   to any anchor under .brand: the homepage wraps a logo image in its own
   anchor of a different shape, and this rule has no business restyling it. */
.brand > a.brand-home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;transition:color var(--dur-2) var(--ease-out)}
.brand > a.brand-home:hover{color:var(--primary)}
.brand > a.brand-home:focus-visible{outline:var(--focus-ring);outline-offset:4px;border-radius:var(--radius-sm)}
.topbar-nav{display:flex;gap:22px;font-size:var(--cs-label-size);font-weight:var(--weight-medium);letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--muted)}
.topbar-nav a{text-decoration:none;transition:color var(--dur-2) var(--ease-out)}
.topbar-nav a:hover{color:var(--text)}

/* ============================ TYPE ROLES ============================ */
.od-display{font-weight:var(--weight-bold);font-size:var(--size-h1);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--cs-title);margin:0;text-wrap:balance}
.od-lead,p.lede{font-weight:var(--weight-regular);font-size:var(--size-intro);line-height:var(--lh-relaxed);color:var(--text);max-width:var(--measure-intro);text-wrap:pretty}
.od-lead b,p.lede b{font-weight:var(--weight-bold);color:var(--text)}
.od-h1{font-weight:var(--weight-bold);font-size:var(--cs-h2-size);line-height:var(--lh-snug);letter-spacing:-.01em;color:var(--text);margin:0}
.od-body{font-weight:var(--weight-regular);font-size:var(--cs-body-size);line-height:var(--cs-body-lh);color:var(--text);max-width:var(--cs-measure)}
.od-body b{font-weight:var(--weight-bold);color:var(--text)}
.od-eyebrow,.kicker{display:block;font-weight:var(--weight-medium);font-size:var(--cs-label-size);letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--muted)}
.pill{display:inline-block;font-weight:var(--weight-medium);font-size:var(--cs-label-size);letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--primary);border:var(--border-hairline);background:var(--card);padding:6px 12px;border-radius:var(--radius-pill)}

/* ============================ RULES + SECTIONS ============================ */
.rule{border:0;border-top:var(--border-hairline);margin:clamp(28px,3.5vw,44px) 0}

.hero{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,32px)}
.hero .eyebrow{margin-bottom:var(--space-lg)}
.hero h1{font-weight:var(--weight-bold);font-size:var(--size-h1);line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--cs-title);margin:0 0 var(--space-lg);text-wrap:balance}
.hero p.lede{margin:0}
.eyebrow{display:inline-block;font-weight:var(--weight-medium);font-size:var(--cs-label-size);letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--primary);border:var(--border-hairline);background:var(--card);padding:6px 12px;border-radius:var(--radius-pill)}
.block{padding:clamp(4px,1vw,8px) 0}
.block .kicker{margin-bottom:10px}
.block h2{font-weight:var(--weight-bold);font-size:var(--cs-h2-size);line-height:var(--lh-snug);letter-spacing:-.01em;color:var(--text);margin:0 0 var(--space-md);text-wrap:balance}
.block p{font-weight:var(--weight-regular);font-size:var(--cs-body-size);line-height:var(--cs-body-lh);color:var(--text);margin:0 0 14px;max-width:var(--cs-measure);text-wrap:pretty}
.block p b{font-weight:var(--weight-bold);color:var(--text)}

/* ============================ CARD GRIDS ============================ */
.model{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:var(--space-lg) 0}
.node{background:var(--card);border:var(--border-hairline);border-radius:var(--radius-lg);padding:18px 20px}
.node .role{font-weight:var(--weight-medium);font-size:11px;letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--primary)}
.node h3{font-weight:var(--weight-medium);font-size:var(--cs-h3-size);line-height:var(--lh-snug);margin:8px 0 6px;color:var(--text)}
.node p{font-weight:var(--weight-regular);font-size:var(--size-small);line-height:1.5;color:var(--muted);margin:0;max-width:none}
.node.personal .role{color:var(--accent)}

.more{font-size:13px;color:var(--primary);margin-top:var(--space-md)}
.more a{color:inherit;text-decoration:none;border-bottom:1px solid var(--cs-tint-line)}
.more a:hover{border-bottom-color:var(--primary)}

.onward{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:var(--space-lg) 0}
.onward a{display:block;background:var(--card);border:var(--border-hairline);border-radius:var(--radius-lg);padding:18px 20px;text-decoration:none;color:inherit;transition:border-color var(--dur-2) var(--ease-out)}
.onward a:hover{border-color:var(--muted)}
.onward .role{font-weight:var(--weight-medium);font-size:11px;letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--primary)}
.onward h3{font-weight:var(--weight-medium);font-size:var(--cs-h3-size);line-height:var(--lh-snug);margin:6px 0 5px;color:var(--text)}
.onward p{font-weight:var(--weight-regular);font-size:var(--size-small);line-height:1.5;color:var(--muted);margin:0}

/* ============================ FOOTER ============================ */
footer.foot,footer{border-top:var(--border-hairline);margin-top:clamp(40px,6vw,72px);padding:28px 0 48px;color:var(--muted);font-size:13px}
.foot-inner,.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer .brand{font-size:14px}
footer .brand .mark{width:20px;height:20px}
footer .meta{font-size:12px;color:var(--muted)}

@media (max-width:560px){.model,.onward{grid-template-columns:1fr}}

/* Doubled with .block so the label voice also wins over `.block p`, which
   would otherwise turn a <p class="notes-grid-label"> into body text while the
   same label as a <span> stays small (en and cy pages use both). */
.notes-grid-label,.block .notes-grid-label{display:block;font-weight:var(--weight-medium);font-size:11px;line-height:1.4;letter-spacing:var(--cs-label-track);text-transform:uppercase;color:var(--muted);margin:var(--space-lg) 0 var(--space-sm);max-width:none}
.onward--lead{grid-template-columns:1fr}
/* Show only the other language, in words (bilingual toolkit 4.8 and 4.9).
   Mirrors the rule in /styles.css, which these pages do not load. */
.lang-switch strong,.lang-switch>span[aria-hidden="true"]{display:none}
/* Code blocks scroll inside their own box, so a long line never widens the
   page: unboxed, they pushed it to 536px at a 390px viewport (#696). */
pre{max-width:100%;overflow-x:auto}
:not(pre)>code{overflow-wrap:anywhere}