/* ═══════════════════════════════════════════════════════════════════
   Office of the Ombudsperson — 2025 Annual Report
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ideal Sans ──────────────────────────────────────────────────── */
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Light-Pro.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Book-Pro.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-BookItalic-Pro.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-BoldItalic-Pro.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Medium-Pro.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Semibold-Pro.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Bold-Pro.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Ideal Sans";src:url("../assets/fonts/IdealSans-Black-Pro.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ── Tokens ──────────────────────────────────────────────────────── */
:root{
  /* brand
     --c-accent is a 1.2:1 yellow against white, so it is never used as text
     on a light surface. On light it appears as a fill with black type on top;
     on black it reads at 15.6:1 and carries the headline numbers. */
  --c-accent:#f2e600;
  --c-ink:#000000;
  --c-blue:#007db7;
  --c-orange:#f57f29;
  --c-gold:#fdb515;

  /* surfaces */
  --c-paper:#ffffff;
  --c-paper-warm:#f4f2ef;
  --c-line-soft:rgba(0,0,0,.16);   /* rules on the warm off-white sections */
  --c-night:#000000;
  --c-on-night:#ffffff;

  /* text */
  --c-text:#0a0a0a;
  --c-text-mute:#5a5a5a;
  --c-text-faint:#8a8a8a;
  --c-line:#e2e0dd;
  --c-line-dark:rgba(255,255,255,.18);

  /* type */
  --f-head:"Ideal Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"Roboto","Helvetica Neue",Arial,sans-serif;

  /* rhythm — density 4/10 */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4rem; --s-7:6rem;  --s-8:8rem;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --max:1560px;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.42s;

  --z-nav:100;
}

*,*::before,*::after{box-sizing:border-box}
/* Site-wide: never hyphenate, and never break a word mid-way to fit a line.
   Words wrap whole or not at all. `hyphens` inherits, so the root covers every
   element; word-break/overflow-wrap are pinned to their initial values so no
   component can reintroduce mid-word breaking later. */
html{
  -webkit-hyphens:none;hyphens:none;
  word-break:normal;overflow-wrap:normal;
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}
/* Yellow disappears on white, so focus rings are black on light surfaces
   and yellow only where the ground is dark. */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--c-ink);
  outline-offset:4px;
  border-radius:2px;
}
.foot a:focus-visible,.nav__menu a:focus-visible,.nav__menu button:focus-visible,
.hero a:focus-visible{outline-color:var(--c-accent)}

::selection{background:var(--c-accent);color:var(--c-ink)}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:1000;
  background:var(--c-ink);color:#fff;padding:.85rem 1.4rem;
  font-family:var(--f-head);font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

/* ── Headline primitives ─────────────────────────────────────────── */
/* Ideal Sans, proportional lining figures throughout the headings. */
.h-hero,.h-display,.hero__title,.stat__num,.nav__org,.rail__num{
  font-family:var(--f-head);
  font-variant-numeric:proportional-nums lining-nums;
  font-feature-settings:"pnum" 1,"lnum" 1;
}

.h-hero{
  font-weight:900;
  font-size:clamp(3.4rem,13vw,12.5rem);
  line-height:.82;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.h-display{
  font-weight:900;
  font-size:clamp(2.4rem,6.2vw,5.6rem);
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
}
/* The accent on a light ground is a fill, not a letterform: a yellow block
   carrying a black slash, which holds up where yellow type would vanish. */
.slash{
  color:var(--c-ink);
  background:var(--c-accent);
  margin-left:.14em;
  padding:0 .07em;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:1.1rem;
  font-family:var(--f-head);font-weight:600;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;
}
.btn--pill{
  border:1.5px solid currentColor;border-radius:999px;
  padding:1.05rem 1.9rem;
  background:transparent;color:var(--c-ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  min-height:52px;
}
.btn__rule{
  display:block;width:30px;height:1.5px;background:currentColor;
  transition:width var(--dur) var(--ease);
}
.btn--pill:hover,.btn--pill:focus-visible{
  background:var(--c-accent);border-color:var(--c-accent);color:var(--c-ink);
}
.btn--pill:hover .btn__rule,.btn--pill:focus-visible .btn__rule{width:46px}
.btn--invert{color:var(--c-on-night);border-color:rgba(255,255,255,.4)}
.btn--invert:hover,.btn--invert:focus-visible{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-ink)}

/* ═══════════════════════════════════════════════════ HEADER ═════ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:1.1rem var(--gutter);
  color:var(--c-ink);
  transition:background .45s var(--ease),color .45s var(--ease),
             box-shadow .45s var(--ease),padding .45s var(--ease);
}
.nav.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  color:var(--c-ink);
  box-shadow:0 1px 0 var(--c-line);
  padding-block:.75rem;
}
.nav.is-hidden{transform:translateY(-102%)}
.nav{transition:transform .45s var(--ease),background .45s var(--ease),
                color .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}

.nav__brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.nav__mark{
  width:38px;height:38px;flex:none;border-radius:3px;
  transition:width .45s var(--ease),height .45s var(--ease);
}
.nav.is-solid .nav__mark{width:34px;height:34px}
.nav__wordmark{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.nav__org{
  font-weight:700;font-size:.9rem;letter-spacing:-.015em;
  white-space:nowrap;
}
.nav__sub{
  font-family:var(--f-body);font-size:.68rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;opacity:.68;
  white-space:nowrap;
}

/* ── Header actions: CTA + hamburger, at every width ─────────────── */
.nav__actions{
  display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.8rem);
  position:relative;z-index:2;
}
.nav__cta{padding:.85rem 1.5rem;min-height:46px}
/* Over the yellow hero the header is black-on-yellow; once the page scrolls
   under it, it flips to the solid light bar. */
.nav:not(.is-solid) .nav__cta{color:var(--c-ink);border-color:var(--c-ink)}
.nav:not(.is-solid) .nav__cta:hover,
.nav:not(.is-solid) .nav__cta:focus-visible{background:var(--c-ink);color:var(--c-accent)}

/* ── Full-screen menu ────────────────────────────────────────────── */
.nav__menu{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--s-4);
  padding:7rem var(--gutter) var(--s-5);
  background:var(--c-ink);color:#fff;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease);
  overflow-y:auto;
}
.nav__menu.is-open{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .nav__menu{clip-path:none;visibility:hidden}
  .nav__menu.is-open{visibility:visible}
}

.nav__list{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  width:100%;max-width:var(--max);margin-inline:auto;
}
.nav__list li{width:100%}
.nav__link{
  position:relative;display:flex;align-items:baseline;gap:1.1rem;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.75rem,6.4vw,4.6rem);
  line-height:1.06;letter-spacing:-.03em;text-transform:uppercase;
  padding:.22em 0;
  color:rgba(255,255,255,.92);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nav__link em{
  font-style:normal;font-weight:400;
  font-size:.26em;letter-spacing:.16em;
  color:rgba(255,255,255,.4);
  transition:color var(--dur) var(--ease);
  font-variant-numeric:proportional-nums lining-nums;
}
.nav__link:hover,.nav__link:focus-visible,.nav__link.is-current{color:var(--c-accent)}
.nav__link:hover em,.nav__link:focus-visible em,.nav__link.is-current em{color:var(--c-accent)}
@media (hover:hover){.nav__link:hover{transform:translateX(.5rem)}}

.nav__dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-accent);
  align-self:center;
}
.nav__menu-foot{
  width:100%;max-width:var(--max);margin:0 auto;
  padding-top:var(--s-3);border-top:1px solid var(--c-line-dark);
  font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.45);
}
.nav__menu-foot span{color:var(--c-accent);padding:0 .3em}

.nav__toggle{
  display:inline-flex;align-items:center;gap:.65rem;
  background:none;border:0;color:inherit;padding:.6rem 0;cursor:pointer;
  font-family:var(--f-head);font-weight:600;font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;
  min-height:44px;
}
.nav__toggle-bars{display:flex;flex-direction:column;gap:5px;width:24px}
.nav__toggle-bars i{
  display:block;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════ HERO ═══════ */
/* No scrim. The video's own field samples at rgb(242,213,15) on every frame —
   effectively the brand yellow — so black type sits on it at ~14:1 and the
   footage stays fully visible. */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-content:end;
  padding:clamp(7rem,14vh,10rem) var(--gutter) clamp(3rem,7vh,4.5rem);
  background:var(--c-accent);
  color:var(--c-ink);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__video{width:100%;height:100%;object-fit:cover}

/* The lockup is justified to one measure: each line is given the font-size
   that makes its own string fill the block exactly. The multipliers are the
   rendered em-widths of these three strings in Ideal Sans at their weights
   (7.162 / 8.342 / 10.228, tracking included), so the three edges align.
   Change a word and the multipliers have to be re-measured.
   The measure is the year line's own width, so the name grows up to meet it
   rather than the whole lockup getting larger. */
.hero__title{
  --hero-step:clamp(1.7rem,5vw,4.2rem);
  margin:0;
  /* Block sits flush to the right gutter; the scroll cue takes the left. */
  justify-self:end;
  width:min(100%,calc(var(--hero-step) * 10.23));
  container-type:inline-size;
  font-size:var(--hero-step);
  line-height:1;
  letter-spacing:-.022em;
  text-transform:uppercase;
}
/* Each line is sized to fill the measure exactly, so sub-pixel rounding can
   tip it into a wrap. nowrap keeps the three-line lockup intact. */
.hero__line{display:block;overflow:hidden;padding-bottom:.055em;white-space:nowrap}
.hero__line--a,.hero__line--b{font-weight:700}
.hero__line--c{font-weight:300;color:rgba(0,0,0,.72)}

@supports (container-type:inline-size){
  .hero__line--a{font-size:13.96cqw}
  .hero__line--b{font-size:11.99cqw}
  .hero__line--c{font-size:9.78cqw}
}

.reveal-word{display:inline-block;will-change:transform}
.js .hero__line .reveal-word{transform:translateY(105%)}
.js .hero.is-in .hero__line .reveal-word{
  transform:translateY(0);
  transition:transform 1.05s var(--ease);
}
.js .hero.is-in .hero__line--b .reveal-word{transition-delay:.09s}
.js .hero.is-in .hero__line--c .reveal-word{transition-delay:.18s}

.hero__badge{
  position:absolute;right:var(--gutter);top:clamp(6.5rem,16vh,9.5rem);
  width:clamp(96px,10vw,132px);aspect-ratio:1;
  display:grid;place-items:center;color:var(--c-ink);
}
.hero__badge-ring{
  position:absolute;inset:0;width:100%;height:100%;
  animation:spin 22s linear infinite;
  fill:currentColor;
}
/* The string is set to fill the 232.5-unit arc exactly, so the ring closes
   without a gap or an overlap. Re-measure if the wording changes. */
.hero__badge-ring text{
  font-family:var(--f-head);font-weight:600;
  font-size:6.86px;letter-spacing:.12em;
}
.hero__badge-arrow{width:26%;height:26%;transition:transform var(--dur) var(--ease)}
.hero__badge:hover .hero__badge-arrow{transform:translate(3px,-3px)}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__scroll{
  position:absolute;left:var(--gutter);bottom:clamp(3rem,7vh,4.5rem);
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.5);color:var(--c-ink);
  display:grid;place-items:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.hero__scroll svg{width:20px;height:20px;animation:nudge 2.2s var(--ease) infinite}
.hero__scroll:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-accent)}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ═══════════════════════════════════════════════ SECTIONS ═══════ */
.section{
  position:relative;
  padding:clamp(4.5rem,11vw,9rem) var(--gutter);
}
/* Warm paper stock with a fine grain, in place of the former black panel.
   The grain is an inlined feTurbulence SVG — no network request, and it tiles
   at 180px so the pattern never reads as a repeat. */
/* The warm off-white used by the "Talk to us" panel. Both greys are rebound a
   step darker than their on-white values — these sections carry the long-form
   reading and the data breakdowns. */
.section--warm{
  --c-text-faint:#616161;
  --c-text-mute:#4f4f4f;
  background-color:var(--c-paper-warm);
  color:var(--c-text);
}

/* numbered vertical rail, ref-image 3 */
.rail{
  position:absolute;left:var(--gutter);top:clamp(4.5rem,11vw,9rem);
  bottom:clamp(4.5rem,11vw,9rem);
  width:2.6rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  color:var(--c-text-mute);
}
.rail__num{
  font-weight:600;font-size:.8rem;letter-spacing:.06em;
  writing-mode:vertical-rl;
}
.rail__line{flex:1;width:1px;background:currentColor;opacity:.4}
.rail__label{
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
@media (max-width:900px){.rail{display:none}}

/* Content clears the rail from the breakpoint where the rail appears. */
@media (min-width:901px){
  .about__body,.glance__head,.glance__grid,.glance__foot,
  .chapters__head,.work,.chapters__sub{margin-left:5.5rem}
}

/* ── About ───────────────────────────────────────────────────────── */
.about__body{
  max-width:var(--max);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
/* Sized to the half-column it sits in, so "INDEPENDENT" cannot run under
   the body copy alongside it. */
.about__body .h-display{font-size:clamp(2.2rem,5vw,4.6rem)}
.about__text{
  font-size:clamp(1.02rem,1.25vw,1.2rem);
  line-height:1.72;
  color:var(--c-text-mute);
  max-width:60ch;
  padding-top:.6rem;
}
.about__cta{margin-top:var(--s-4);color:var(--c-ink)}
@media (max-width:860px){
  .about__body{grid-template-columns:1fr;gap:var(--s-4)}
}

/* ── At a glance ─────────────────────────────────────────────────── */
.glance__head{
  max-width:var(--max);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:end;
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
/* Same reason as the about heading: keep "AT A GLANCE" on one line inside
   its half-width column. */
.glance__head .h-display{font-size:clamp(2.2rem,5vw,4.8rem)}
.glance__lede{
  margin:0;font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.6;font-weight:400;color:var(--c-text-mute);
  max-width:46ch;
}
@media (max-width:860px){.glance__head{grid-template-columns:1fr;gap:var(--s-3)}}

.glance__grid{
  max-width:var(--max);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,5rem);
}
@media (max-width:900px){.glance__grid{grid-template-columns:1fr;gap:var(--s-6)}}

.stat{border-top:1.5px solid var(--c-line-soft);padding-top:var(--s-3)}
.stat__figure{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.stat__num{
  font-weight:900;
  font-size:clamp(4.2rem,11vw,9.5rem);
  line-height:.86;letter-spacing:-.045em;
  color:var(--c-ink);
  font-variant-numeric:proportional-nums lining-nums tabular-nums;
}
.stat__unit{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.2rem,2.4vw,2rem);
  letter-spacing:-.01em;text-transform:lowercase;
  color:var(--c-text-mute);
}
.stat__note{
  margin:var(--s-3) 0 0;
  font-size:1rem;line-height:1.7;font-weight:400;
  color:var(--c-text-mute);
  max-width:52ch;
}
.stat__breakdown-title{
  margin:var(--s-5) 0 var(--s-2);
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-text-faint);
  display:flex;align-items:center;gap:.6rem;
}
/* A solid mark, the way the reference uses its single small square. Gold to
   match the figures and the bars, unoutlined to match them too. */
.stat__breakdown-title::before{
  content:"";flex:none;
  width:.62em;height:.62em;
  background:var(--c-gold);
}

/* percentage bars */
.bars{display:grid;gap:1.35rem}
/* Accent fill riding on a solid ink channel — 16.1:1 against it, so the
   proportion reads off the track rather than off the page. */
.bar{
  --bar-color:var(--c-accent);
  display:grid;
  grid-template-columns:5.2rem minmax(0,1fr);
  grid-template-areas:"val label" "track track";
  align-items:baseline;gap:.35rem .9rem;
}
.bar__val{
  grid-area:val;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  /* Ink, not --bar-color: at this size an accent fill would need a stroke of
     its own to be legible, and stroked body-scale figures look muddy. */
  line-height:1;letter-spacing:-.02em;
  color:var(--c-ink);
  font-variant-numeric:proportional-nums lining-nums tabular-nums;
}
.bar__label{
  grid-area:label;
  font-size:.94rem;line-height:1.45;font-weight:400;
  color:var(--c-text-mute);
}
.bar__track{
  grid-area:track;
  display:block;height:7px;margin-top:.55rem;
  background:var(--c-ink);
  overflow:hidden;
}
.bar__fill{
  display:block;height:100%;width:var(--pct);
  background:var(--bar-color);
  transform-origin:left center;
}
.js .bar__fill{transform:scaleX(0)}
.js .bar.is-in .bar__fill{transform:scaleX(1);transition:transform 1.1s var(--ease) var(--bar-delay,0s)}

.glance__foot{
  max-width:70ch;margin-top:clamp(2.5rem,5vw,4rem);
  font-size:.86rem;line-height:1.6;color:var(--c-text-faint);
}

/* ── Chapters ────────────────────────────────────────────────────── */
.chapters__head{
  max-width:var(--max);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:start;
  margin-bottom:clamp(3rem,7vw,5.5rem);
}
/* Held below the global .h-hero scale so the word cannot overrun its column
   and collide with the intro copy alongside it. */
.chapters__head .h-hero{font-size:clamp(2.8rem,7.6vw,7.4rem)}
.chapters__intro{
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.7;
  color:var(--c-text-mute);max-width:48ch;padding-top:.4rem;
}
@media (max-width:860px){.chapters__head{grid-template-columns:1fr;gap:var(--s-3)}}

.work{
  max-width:var(--max);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.6rem) clamp(1.5rem,3vw,2.8rem);
}
.work__item--wide{grid-column:1 / -1}
@media (max-width:860px){
  .work{grid-template-columns:1fr}
  .work__item--wide{grid-column:auto}
}

.work__link{display:block}
.work__frame{
  display:block;overflow:hidden;background:var(--c-paper-warm);
  aspect-ratio:4/3;
}
.work__frame--wide{aspect-ratio:16/7}
@media (max-width:860px){.work__frame--wide{aspect-ratio:4/3}}
.work__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .6s var(--ease);
  filter:saturate(.95);
}
.work__link:hover .work__frame img,
.work__link:focus-visible .work__frame img{transform:scale(1.055);filter:saturate(1.06)}

.work__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.15rem;
}
.work__title{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.7rem);
  letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:proportional-nums lining-nums;
}
/* Chapter number as a yellow chip with black type — the accent reads on a
   white ground here, which yellow text would not. */
.work__title em{
  font-style:normal;font-weight:600;
  background:var(--c-accent);color:var(--c-ink);
  padding:.05em .34em;margin-right:.45em;
  font-variant-numeric:proportional-nums lining-nums;
}
.work__arrow{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid var(--c-line);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.work__arrow svg{width:18px;height:18px}
.work__link:hover .work__arrow,.work__link:focus-visible .work__arrow{
  background:var(--c-accent);border-color:var(--c-ink);color:var(--c-ink);
  transform:translate(2px,-2px);
}

.chapters__sub{
  max-width:var(--max);
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:var(--s-3);border-top:1.5px solid var(--c-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem clamp(1.5rem,3vw,2.8rem);
  font-size:.92rem;line-height:1.5;color:var(--c-text-mute);
}
.chapters__sub em{
  display:block;font-style:normal;
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;
  color:var(--c-text-faint);margin-bottom:.3rem;
}

/* ── CTA ─────────────────────────────────────────────────────────── */
.cta{background:var(--c-paper-warm);text-align:center}
.cta__inner{max-width:56rem;margin-inline:auto}
.cta__kicker{
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-text-faint);margin-bottom:var(--s-3);
}
.cta__kicker span{color:var(--c-text-faint);padding:0 .3em}
.cta__title{font-size:clamp(1.5rem,5vw,4.25rem)}
.cta__text{
  margin:var(--s-3) auto 0;max-width:52ch;
  font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.7;color:var(--c-text-mute);
}
.cta__btn{
  margin-top:var(--s-4);
  color:#fff;background:var(--c-ink);border-color:var(--c-ink);
  font-size:.85rem;letter-spacing:.1em;text-transform:none;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.foot{
  background:var(--c-night);color:var(--c-on-night);
  padding:clamp(3.5rem,8vw,6rem) var(--gutter) clamp(2rem,4vw,3rem);
}
.foot__top{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);
}
@media (max-width:860px){.foot__top{grid-template-columns:1fr}}

.foot__brand{display:flex;align-items:flex-start;gap:1rem}
.foot__brand img{width:56px;height:56px;flex:none;border-radius:3px}
.foot__brand span{
  display:flex;flex-direction:column;gap:.15rem;
  font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.4;
}
.foot__brand strong{
  font-family:var(--f-head);font-weight:700;font-size:1.1rem;
  letter-spacing:-.015em;color:#fff;
}

/* The link list takes the free space; the action column sizes to its pill so
   the button is never squeezed narrower than its own label. */
.foot__nav{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:var(--s-4)}
@media (max-width:560px){.foot__nav{grid-template-columns:1fr}}
.foot__col-title{
  margin:0 0 1rem;
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.foot__col ul{display:grid;gap:.7rem}
/* Scoped to the list: an unscoped `.foot__col a` outranks .btn--pill and
   would strip the pill in the action column of its display and padding. */
.foot__col ul a{
  font-size:.94rem;color:rgba(255,255,255,.78);
  transition:color var(--dur) var(--ease);
  display:inline-block;padding:.15rem 0;
}
.foot__col ul a:hover{color:var(--c-accent)}

/* Action column sits top-aligned with the list beside it; the pill keeps its
   own colour rules rather than inheriting the footer link styles. */
.foot__col--action{justify-self:start}
.foot__btn{font-size:.78rem}
.foot__btn span:first-child{white-space:nowrap}
.foot__btn:hover{color:var(--c-ink)}

.foot__rule{
  max-width:var(--max);margin:clamp(2.5rem,5vw,4rem) auto var(--s-3);
  height:1px;background:var(--c-line-dark);
}
.foot__base{
  max-width:var(--max);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;
  font-size:.8rem;color:rgba(255,255,255,.42);
}
.foot__base p{margin:0}

/* ═══════════════════════════════════════════════ REVEALS ════════ */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js .reveal[data-reveal-delay="1"].is-in{transition-delay:.11s}
.js .reveal[data-reveal-delay="2"].is-in{transition-delay:.22s}

/* ═══════════════════════════════════════════ RESPONSIVE ═════════ */
/* The menu panel is a child of the header, so the brand and the close button
   must be lifted above it or the user loses the way out. */
.nav__brand{position:relative;z-index:2}

/* With the panel open the header sits on black — whichever state it was in. */
body.nav-open .nav,body.nav-open .nav.is-solid{
  background:transparent;box-shadow:none;color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.nav-open .nav__cta,
body.nav-open .nav:not(.is-solid) .nav__cta{color:#fff;border-color:rgba(255,255,255,.5)}
body.nav-open .nav__cta:hover,
body.nav-open .nav:not(.is-solid) .nav__cta:hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-ink)}
body.nav-open{overflow:hidden}

.nav__cta span:first-child{white-space:nowrap}

@media (max-width:820px){
  .nav__sub{display:none}
  .nav__cta{padding:.75rem 1.2rem;font-size:.72rem;letter-spacing:.1em;gap:.75rem}
  .nav__cta .btn__rule{width:18px}
}

/* Below this the wordmark, the CTA, and the toggle cannot share one line
   without wrapping — the ADB mark carries the identity on its own. */
@media (max-width:640px){
  .nav__wordmark{display:none}
  .nav__toggle-label{display:none}
  .nav__toggle{padding-inline:.35rem}
  .nav__cta .btn__rule{display:none}
  .nav__cta{padding:.7rem 1.1rem;font-size:.68rem}
}

@media (max-width:560px){
  .hero{padding-bottom:6.5rem}
  .hero__badge{display:none}
  .hero__scroll{bottom:1.4rem}
  .bar{grid-template-columns:4.2rem minmax(0,1fr)}
  .work__bar{align-items:flex-start}
  .work__arrow{width:40px;height:40px}
}

/* ═══════════════════════════════════ CHAPTER PAGES ══════════════ */
/* Inner pages have no hero for the header to sit over, so it starts solid and
   stays solid; main.js only ever adds .is-solid, never removes it. */
.nav--inner{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  color:var(--c-ink);
  box-shadow:0 1px 0 var(--c-line);
}

.msg{
  --msg-aside:clamp(190px,23vw,310px);
  --msg-gap:clamp(1.5rem,4.5vw,4rem);
  padding-top:calc(clamp(4.5rem,11vw,9rem) + 3.5rem);
}
/* Widened from 64rem to carry the larger body size without the measure
   getting squeezed between the aside and the container edge. */
.msg__head,.msg__body,.pager{max-width:72rem;margin-inline:auto}

/* ── Masthead ─────────────────────────────────────────────────── */
.msg__head{
  display:grid;
  grid-template-columns:var(--msg-aside) minmax(0,1fr);
  gap:var(--msg-gap);
  align-items:start;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}

.msg__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem}
/* Photo runs in its own colours — no duotone, no filter. */
.portrait{
  display:block;
  width:100%;aspect-ratio:1;border-radius:50%;
  overflow:hidden;
}
.portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
}

.msg__caption{text-align:center;display:grid;gap:.45rem}
.msg__name{
  font-family:var(--f-head);font-weight:700;font-size:1rem;
  letter-spacing:-.01em;color:var(--c-ink);
  display:block;padding-bottom:.45rem;
  border-bottom:1.5px solid var(--c-ink);
}
.msg__chev{color:var(--c-ink);margin-right:.15em}
.msg__role{font-size:.86rem;line-height:1.45;color:var(--c-text-mute)}

/* ── Title lockup ─────────────────────────────────────────────── */
.msg__kicker{
  display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
  font-family:var(--f-head);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-text-faint);
}
.msg__kicker em{
  font-style:normal;background:var(--c-accent);color:var(--c-ink);
  padding:.15em .45em;letter-spacing:.1em;
  font-variant-numeric:proportional-nums lining-nums;
}
.msg__title{
  margin:0;font-family:var(--f-head);
  text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  font-variant-numeric:proportional-nums lining-nums;
}
/* Heavy word over light word: the weight and rule treatments are swapped
   relative to the reference, so the accent rule now sits under MESSAGE.
   Both font sizes are unchanged. */
.msg__title-a{
  display:block;font-weight:900;
  font-size:clamp(2.8rem,8vw,5.6rem);
  padding-bottom:.06em;border-bottom:9px solid var(--c-accent);
}
.msg__title-b{
  display:block;font-weight:300;
  font-size:clamp(1.15rem,2.6vw,1.9rem);
  line-height:1.05;letter-spacing:-.02em;
  margin-top:.5rem;padding-bottom:.3rem;
  border-bottom:2px solid var(--c-ink);
}

/* ── Body ─────────────────────────────────────────────────────── */
/* ~25% up from 1.02rem. max-width is in ch, so the measure widens with the
   type and the line length stays in the same readable range. Leading eases
   off slightly, since larger text needs proportionally less of it. */
.msg__body{
  margin-left:calc(var(--msg-aside) + var(--msg-gap));
  max-width:62ch;
  font-size:clamp(1.2rem,1.35vw,1.28rem);line-height:1.72;
  color:var(--c-text-mute);
  text-align:left;
}
.msg__body p{margin:0 0 1.15em}

/* Drop cap in a solid accent square, as in the reference. */
.msg__lead::first-letter{
  float:left;
  font-family:var(--f-head);font-weight:900;
  font-size:3.05em;line-height:.78;
  background:var(--c-accent);color:var(--c-ink);
  padding:.2em .16em .1em;
  margin:.06em .55rem 0 0;
}

/* Bold passages: an accent band across the lower third of the text. clone on
   box-decoration-break keeps the band on every line of a wrapped run. */
.msg__body strong{
  font-weight:600;color:var(--c-ink);
  background-image:linear-gradient(to top,var(--c-accent) 0,var(--c-accent) .36em,transparent .36em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .04em;
}

/* ── Pull-quote ───────────────────────────────────────────────── */
.msg__quote{
  float:left;width:calc(var(--msg-aside) + 4rem);
  margin:.5rem var(--msg-gap) 1.25rem calc(-1 * (var(--msg-aside) + var(--msg-gap)));
  padding:1.35rem 1.25rem 1.5rem;
  background:rgba(242,230,0,.8);
  border-top:2px solid var(--c-ink);
  text-align:right;
}
/* Ideal Sans Bold Italic, +50%. At this size the words need more room than the
   aside gives, so the panel reaches into the text column and the copy wraps
   around it — which is what a floated pull-quote is for. */
.msg__quote p{
  margin:0;
  font-family:var(--f-head);font-style:italic;font-weight:700;
  font-size:clamp(1.5rem,2.25vw,1.77rem);
  line-height:1.24;letter-spacing:-.02em;
  color:var(--c-ink);
  text-align:right;
}
.msg__quote-mark{
  font-size:1.7em;line-height:0;vertical-align:-.28em;
  margin-right:.12em;color:var(--c-ink);
}

/* Line-with-dot closer, as in the reference. */
.msg__rule{
  display:flex;align-items:center;justify-content:center;
  margin:clamp(2.5rem,6vw,4rem) 0 0;
}
.msg__rule::before,.msg__rule::after{
  content:"";flex:1;height:1px;background:var(--c-line-soft);
}
.msg__rule span{
  width:9px;height:9px;border-radius:50%;
  background:var(--c-ink);margin:0 .9rem;flex:none;
}

/* ── Prev / next pager ────────────────────────────────────────── */
.pager{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:clamp(3rem,7vw,5rem);
  padding-top:var(--s-3);
  border-top:1.5px solid var(--c-line-soft);
}
.pager__link{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.25rem;
  border:1.5px solid var(--c-line-soft);
  min-height:76px;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.pager__link--next{grid-column:2;flex-direction:row;justify-content:flex-end;text-align:right}
.pager__link:hover,.pager__link:focus-visible{
  background:var(--c-accent);border-color:var(--c-ink);
}
.pager__text{display:grid;gap:.2rem;min-width:0}
.pager__dir{
  font-family:var(--f-head);font-weight:600;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-text-faint);
}
.pager__link:hover .pager__dir,.pager__link:focus-visible .pager__dir{color:var(--c-ink)}
.pager__title{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(.95rem,1.6vw,1.2rem);
  letter-spacing:-.015em;color:var(--c-ink);
  font-variant-numeric:proportional-nums lining-nums;
}
.pager__arrow{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid var(--c-ink);color:var(--c-ink);
  transition:transform var(--dur) var(--ease);
}
.pager__arrow svg{width:17px;height:17px}
.pager__link--prev:hover .pager__arrow{transform:translateX(-3px)}
.pager__link--next:hover .pager__arrow{transform:translateX(3px)}

@media (max-width:900px){
  .msg__head{grid-template-columns:1fr;gap:var(--s-4);justify-items:start}
  .msg__figure{width:min(100%,var(--msg-aside))}
  .msg__body{margin-left:0;max-width:none}
  /* Out of the margin and into the flow — there is no margin left to sit in. */
  .msg__quote{float:none;width:auto;margin:2rem 0}
  .msg__quote p,.msg__quote{text-align:left}
}
@media (max-width:560px){
  .pager{grid-template-columns:1fr}
  .pager__link--next{grid-column:1}
}

/* ═══════════════════════════════════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .hero__line .reveal-word{transform:none}
  .js .bar__fill{transform:scaleX(1)}
  .hero__video{display:none}
  .hero__media{background:var(--c-night)}
}

/* ═══════════════════════════════════════════════ PRINT ═════════ */
@media print{
  .nav,.hero__scroll,.hero__badge,.hero__video{display:none !important}
  body{background:#fff;color:#000}
  .section--warm,.foot,.hero{background:#fff !important;color:#000 !important}
  .stat__unit,.stat__note,.bar__label{color:#000 !important}
}