/* ==========================================================================
   OFF SCRIPT VENTURES — brand system
   Implements Brand Kit v1.2 (7 Aug 2026). Values here are the Brand Kit's,
   not sampled approximations — if they disagree, the Brand Kit wins.

   No dark scheme. Brand Kit §2 bans olive-on-charcoal (1.89:1) and
   orange-on-charcoal (2.31:1), which is precisely what a dark scheme needs,
   and §2 names cream as "the brand's white — the default background
   everywhere". One ground, deliberately.
   ========================================================================== */

:root {
  /* Core palette — Brand Kit §2, verbatim */
  --cream:        #F7F6F2;   /* default background everywhere */
  --stone:        #D0CBC4;   /* secondary surfaces only. never a text colour */
  --charcoal:     #383838;   /* all body text */
  --olive:        #58654B;   /* primary. headings, dividers, illustration fill */
  --orange:       #AD5628;   /* accent ONLY. never body text (§2) */

  /* Semantic */
  --bg:           var(--cream);
  --surface:      var(--stone);
  --ink:          var(--charcoal);
  --ink-muted:    #5F5F5F;   /* charcoal lightened; 6.02:1 on cream */
  --rule:         #C9C3BB;
  --accent:       var(--olive);    /* headings and structure */
  --marker:       var(--orange);   /* rules and markers only, ~10% of the page */

  /* Type scale.
     Bricolage Grotesque above the 20pt floor (§3); Instrument Sans below it. */
  --display: clamp(2.35rem, 4.4vw, 3.5rem);
  --h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --h2:      clamp(1.6rem, 3vw, 2.3rem);
  --h3:      1.3rem;         /* ~20.8px — sits just above the Bricolage floor */
  --body:    clamp(1rem, 1.2vw, 1.1rem);
  --small:   var(--t-base);  /* eyebrows and uppercase labels */

  /* Type scale. Everything below heading size maps onto these seven steps, so
     a size can be changed in one place instead of in forty-one. */
  --t-2xs:   0.8rem;
  --t-xs:    0.875rem;
  --t-sm:    0.95rem;
  --t-base:  1rem;
  --t-md:    1.1rem;
  --t-lg:    1.2rem;
  --t-xl:    1.35rem;
  --t-hand:  1.3rem;         /* 20.8px — the floor for handwriting on screen */

  /* Fluid steps for copy and quotes that should breathe on wide screens. */
  --t-lede:    clamp(1.1rem, 1.8vw, 1.34rem);
  --t-quote:   clamp(1.5rem, 3.2vw, 2.4rem);
  --t-quote-lg:clamp(1.75rem, 3.6vw, 2.75rem);

  /* Buttons. Burnt orange, darkened so a 16px label clears AA at 6.56:1. */
  --btn-fill:  #8C441F;
  --btn-hover: var(--orange);

  /* Layout */
  --measure:  70ch;          /* §3: 60–75 characters */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --section:  clamp(3.25rem, 6.5vw, 5.75rem);
  --radius:   2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--body);
  line-height: 1.5;          /* §3: body 1.4–1.5 */
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- typography

   Two faces, no more. Per the Brand Assets deck: Bricolage Grotesque takes
   headings, titles, section markers, large figures AND uppercase labels at
   any size. The 20pt floor applies only to sentence-length text, which is
   where Instrument Sans takes over. Never a third face.                     */

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-weight: 700;
  line-height: 1.15;         /* §3: headings 1.1–1.2 */
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); font-weight: 600; }

/* h3 sits at ~20.8px, just above the Bricolage floor. Anything smaller than
   this in the system must be Instrument Sans. */
h3 {
  font-size: var(--h3);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* h4 is used only for small footer labels — below the floor, so it hands
   back to Instrument Sans. */
h4 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

strong { font-weight: 700; }

.display {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;   /* §3: display face */
  font-size: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 54ch;
}

/* Eyebrow labels are Instrument Sans Bold, uppercase and letter-spaced (§3).
   The Brand Kit specifies burnt orange here, but that conflicts with its own
   §2 rule — "Accent only. Never body text" — and orange fails AA below 24px,
   which these are. Olive instead: 5.75:1, and it keeps orange inside the 10%
   budget where it belongs. */
/* Section eyebrows are the annotation voice: the thing scribbled in the margin.
   Handwriting, never uppercase (it destroys the letterforms) and never below
   18px (script strokes are thin). Every other uppercase label stays Bricolage. */
.eyebrow {
  font-family: 'Shantell Sans', 'Bricolage Grotesque', cursive;
  font-size: var(--t-hand);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 1.1rem;
  display: block;
}

.eyebrow--quiet { color: var(--ink-muted); }

.overline-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 2.4rem;
}

/* ------------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* One paper tone throughout. Sections are separated by space and a hairline
   rule rather than alternating tonal blocks — the rule sits inside the content
   width so it reads as editorial furniture, not a full-bleed divider.
   Keyed to adjacency rather than a modifier class, so every section boundary
   gets a rule regardless of the order sections are written in.

   The :not([hidden]) guard matters for the Fit Check, where the four steps are
   siblings shown one at a time — without it, whichever step is on screen would
   draw a stray rule above itself. */
main > section:not([hidden]) + section:not([hidden]) > .wrap::before,
main > section:not([hidden]) + section:not([hidden]).wrap::before {
  content: "";
  display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: calc(var(--section) * 0.62);
  /* On a grid wrap (.split) this pseudo is a grid ITEM. Without this it
     takes cell one, pushing the rail into column two and the copy onto a
     second row in the narrow column. Spanning every track keeps it a rule. */
  grid-column: 1 / -1;
}

main > section:not([hidden]) + section:not([hidden]) {
  padding-top: calc(var(--section) * 0.38);
}

/* Retained so existing markup keeps working; it no longer paints a band. */
.section--alt { background: none; }

/* Editorial asymmetry: narrow label column, wide content column */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

/* Grid children default to min-width:auto, so a track refuses to shrink below
   its content's minimum. An 820px illustration in the rail therefore ate the
   row and squeezed the copy beside it into a sliver. min-width:0 lets the
   tracks honour their fr ratio. */
.split > *, .grid > *, .workon > *, .stages > *, .situations > * { min-width: 0; }
.split img, .grid img, .workon img { max-width: 100%; height: auto; }

@media (min-width: 900px) {
  .split { grid-template-columns: 3fr 9fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse { grid-template-columns: 8fr 4fr; }
  /* Hero: give the words slightly more width than the illustration, so the
     headline breaks into three lines rather than five. */
  .split--hero { grid-template-columns: 7fr 5fr; }
}

.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2.6rem; }

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  font: inherit;
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  border: 1.5px solid var(--btn-fill);
  border-radius: var(--radius);
  background: var(--btn-fill);
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  background: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--cream);
  transform: translateY(-1px);
}

.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Secondary buttons were an outline with charcoal text on cream, which read as
   a faint box rather than a control. Solid olive with cream text is 5.75:1 and
   still sits a clear step below the orange primary. */
.btn--ghost {
  background: var(--olive);
  color: var(--cream);
  border-color: var(--olive);
  font-weight: 700;
}

.btn--ghost:hover { background: #46523C; border-color: #46523C; color: var(--cream); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  align-items: center;
  margin-top: 2rem;
}

.btn-aside { font-size: var(--t-sm); color: var(--ink-muted); }

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: var(--t-base);
  line-height: 1.1;
}

.brand:hover { color: inherit; }

/* Pennant logo. Olive on cream is the primary mark (§4), and cream is the only
   ground, so there is no scheme switch. The stone, charcoal and orange
   variants stay in assets/ for use on filled panels.

   §4 sets a hard minimum of 120px wide on screen — below that the
   hand-lettering breaks up. The previous 108px header and 88px mobile were
   both under spec, which is why the wordmark read as marginal. It does not
   shrink on mobile now. */
.logo { display: block; height: auto; width: 128px; }
.site-footer .logo { width: 156px; }

/* Clear space: §4 wants at least the height of the "O" in "Off" on all four
   sides, which is roughly a fifth of the mark's height. */
.brand { padding: 0.45rem 0.6rem 0.45rem 0; }

/* ------------------------------------------------------------ illustrations */

.illo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.illo--inset { max-width: 460px; }

/* The artwork carries its own cream ground, matching --cream exactly, so the
   vignette floats with no visible edge — which is what §5 asks for: no frame,
   no border, no ground plane. */

.illo-figure { margin: 0; }

.illo-figure figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  max-width: 34ch;
}

/* Hero artwork sits slightly larger and bleeds toward the edge on wide screens */
.hero__art { align-self: center; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.nav a {
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-muted);
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 700; }

.nav .btn { color: var(--bg); }
.nav .btn:hover { color: #fff; }

.nav__links { display: contents; }

/* ------------------------------------------------------------ mobile menu */

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__drawer { display: none; border-top: 1px solid var(--rule); }

.nav__drawer a {
  display: block;
  padding: 0.95rem 0;
  font-size: var(--t-base);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.nav__drawer a:last-child { border-bottom: 0; }
.nav__drawer a[aria-current="page"] { font-weight: 700; color: var(--accent); }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__drawer:not([hidden]) { display: block; padding-block: 0.5rem 1.5rem; }
}

@media (max-width: 520px) {
  /* At this width the CTA label and the logo start fighting for room. The
     label wraps to two lines here, so it needs centring rather than the
     left alignment a flex row gives by default. */
  .nav .btn {
    padding: 0.7rem 0.9rem;
    font-size: var(--t-xs);
    font-weight: 700;
    text-align: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------- hero */

.hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 6rem); }

.hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 7fr 5fr; align-items: end; }
}

.hero__aside {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  font-size: var(--t-base);
  color: var(--ink-muted);
}

/* -------------------------------------------------------------------- cards */

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card h3 { margin-bottom: 0.25rem; }
.card p { margin-bottom: 0; font-size: var(--t-sm); color: var(--ink-muted); }

.card__tag {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__price {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
}

/* Bricks that exist as intent but not yet as product. Deliberately lighter
   than a .card — dashed, unpriced, no call to action — so nobody mistakes
   them for something they can buy today. */
.wip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.wip-list li {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wip-list strong {
  font-size: var(--t-base);
  letter-spacing: -0.01em;
}

.wip-list span {
  font-size: var(--t-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Numbered editorial steps */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

.steps > li {
  counter-increment: step;
  display: grid;
  gap: 0.35rem 1.6rem;
  grid-template-columns: auto 1fr;
  padding-block: 1.6rem;
  border-top: 1px solid var(--rule);
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.35rem;
}

.steps h3 { margin: 0; }
.steps p { margin: 0; color: var(--ink-muted); font-size: var(--t-base); }

/* Pull quote / belief statement */
.belief {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-quote);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

.belief-list { list-style: none; margin: 0; padding: 0; }

.belief-list li {
  padding-block: 0.85rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-base);
  font-weight: 500;
}

.belief-list li:last-child { border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  text-align: left;
}

th, td {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

td:first-child { font-weight: 700; padding-right: 2rem; }

/* --------------------------------------------------------------------- FAQs */

details {
  border-top: 1px solid var(--rule);
  padding-block: 1.1rem;
}

details:last-of-type { border-bottom: 1px solid var(--rule); }

summary {
  font-family: 'Instrument Sans', sans-serif;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--t-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}

summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--accent); font-size: var(--t-xl); flex: none; }
details[open] summary::after { content: '\2212'; }
details p { margin: 1rem 0 0; color: var(--ink-muted); }

/* -------------------------------------------------------------------- forms */

.field { display: block; margin-bottom: 1.5rem; max-width: 34rem; }

.field > span {
  display: block;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Text-entry controls only. A bare `.field input` also matches the checkboxes
   inside the picker panel, which gave each one width:100%, padding and a
   border — a full-width bar that pushed its own label text out of view. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
}

.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field textarea { min-height: 8rem; resize: vertical; }

.field__hint { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 0.45rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.8rem 1.2rem;
  z-index: 100;
}

.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  font-size: var(--t-sm);
}

.site-footer h4 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a:not(.btn) { text-decoration: none; color: var(--ink-muted); }
.site-footer a:not(.btn):hover { color: var(--accent); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ utility */

.muted { color: var(--ink-muted); }
.center { text-align: center; margin-inline: auto; }
.narrow { max-width: 52rem; }
.tm { font-size: 0.62em; vertical-align: super; font-weight: 500; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   V1 COMPONENTS
   Added for the V1 build. Brand Kit v1.2 values throughout; the V1 brief
   quotes slightly different hexes but the Brand Kit is the source of truth,
   and the brief's orange fails AA on cream at 4.39:1 where the Brand Kit's
   passes at 4.69:1.
   ========================================================================== */

/* ------------------------------------------------- founder voice interrupt */

/* Jarrod's statements, set large. These are the visual punctuation the brief
   asks for in place of decorative imagery. */
.voice {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--olive);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

.voice--wide { max-width: 30ch; }

.voice__attrib {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------ diagnostic question */

/* A full-width interruption. Charcoal ground, so no olive and no orange on it. */
.bigq {
  background: var(--charcoal);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.bigq h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--cream);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.bigq p { color: var(--stone); max-width: 58ch; }

/* ------------------------------------------------------------- situations */

.situations { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; }
@media (min-width: 860px) { .situations { grid-template-columns: repeat(3, 1fr); } }

/* Four situations read better as a square than a row of four: two lines of
   two, so each one gets width for a full sentence. */
@media (min-width: 700px) {
  .situations--quad { grid-template-columns: repeat(2, 1fr); }
}

/* Rounded olive blocks. Cream on olive is 5.75:1, stone on olive is 3.86:1
   which only clears AA as large text, so stone is used for the numeral
   (38px bold) and never for the sentence. */
.situation {
  background: var(--olive);
  color: var(--cream);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
}

/* Heading inside an olive block. Cream on olive is 5.75:1, so it clears AA
   for text of any size and does not need the large-type allowance. */
.situation h3 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 0.7rem;
}

.situation p { font-size: var(--t-lg); line-height: 1.42; margin: 0; color: var(--cream); }

/* ------------------------------------------------ commercial infrastructure */

.ci-parts {
  display: grid;
  gap: 0;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.ci-parts li {
  list-style: none;
  padding: 1rem 1.25rem 1rem 0;
  border-top: 1px solid var(--rule);
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------- the model */

.stages { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: 3rem; }
@media (min-width: 900px) { .stages { grid-template-columns: repeat(4, 1fr); } }

.stage { border-top: 2px solid var(--marker); padding-top: 1.1rem; }

.stage__label {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--olive);
  display: block; margin-bottom: 0.5rem;
}

.stage h3 { font-size: var(--t-md); margin-bottom: 0.4rem; }
.stage p { font-size: var(--t-base); color: var(--ink); margin: 0; }
.stage p strong { color: var(--olive); }

/* Sustain is deliberately not a fifth identical column. */
.sustain {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1rem 2.5rem;
}
@media (min-width: 800px) { .sustain { grid-template-columns: auto 1fr; align-items: start; } }
.sustain .stage__label { margin-bottom: 0; }

/* ------------------------------------------------------------------ stats */

.stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { border-top: 2px solid var(--marker); padding-top: 1rem; }

.stat__fig {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.03em;
  color: var(--marker); display: block; margin-bottom: 0.5rem;
}

.stat p { font-size: var(--t-sm); color: var(--ink-muted); margin: 0; }

/* -------------------------------------------------------------- proof/quotes */

.quote-card {
  border-top: 2px solid var(--olive);
  padding-top: 1.5rem;
}

.quote-card blockquote {
  margin: 0 0 1.25rem;
  font-size: var(--t-lede);
  line-height: 1.45;
}

.quote-card cite {
  font-style: normal;
  font-weight: 700;
  font-size: var(--t-sm);
  display: block;
}

.quote-card .role { font-size: var(--t-sm); color: var(--ink-muted); display: block; margin-top: 0.15rem; }

/* Context chip: makes the distinction between current Off Script clients and
   prior-career colleagues unmissable, which the brief insists on. */
.chip-context {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-muted);
}

/* The client chip is a label, not a control, but the outline-plus-olive-text
   version read as a faint box. Solid olive, cream text, 5.75:1. */
.chip-context--current {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--cream);
}

/* Homepage proof rail. Exactly two cards visible on desktop, one on mobile,
   so a quote is never cut in half and no two cards from the same person can
   sit side by side. */
.rail-wrap { margin-top: 2.5rem; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  scroll-behavior: smooth;
}

@media (min-width: 820px) {
  /* Two across, accounting for the gap between them. */
  .rail { grid-auto-columns: calc((100% - clamp(1.25rem, 2.5vw, 2rem)) / 2); }
}

.rail > * { scroll-snap-align: start; }
.rail blockquote { font-size: var(--t-base); }

/* A visible track, not the hairline the browser defaults to. */
.rail { scrollbar-width: auto; scrollbar-color: var(--olive) var(--stone); }
.rail::-webkit-scrollbar { height: 10px; }
.rail::-webkit-scrollbar-track { background: var(--stone); border-radius: 999px; }
.rail::-webkit-scrollbar-thumb { background: var(--olive); border-radius: 999px; }
.rail::-webkit-scrollbar-thumb:hover { background: #46523C; }

.rail-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.rail-btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--marker);
  color: var(--cream);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
}

.rail-btn svg { width: 26px; height: 26px; }
.rail-btn:hover:not(:disabled) { background: #8C441F; }  /* burnt orange, darkened */
.rail-btn:disabled { opacity: 0.3; cursor: default; }

@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

/* ------------------------------------------------------------ work-on lists */

.workon { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: 2.25rem; }
@media (min-width: 760px) { .workon { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .workon { grid-template-columns: repeat(3, 1fr); } }

.workon h3 {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--olive);
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem; margin-bottom: 0.9rem;
}

.workon ul { list-style: none; margin: 0; padding: 0; }
.workon li { padding: 0.25rem 0; font-size: var(--t-base); color: var(--ink-muted); }

/* ------------------------------------------------------------------- forms */

.field select {
  width: 100%; padding: 0.8rem 0.9rem; font: inherit; font-size: var(--t-base);
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--rule); border-radius: var(--radius);
}

.field--other { display: none; }
.field--other.is-shown { display: block; }

/* ------------------------------------------------------- checkbox group */

/* "Where are you stuck" allows several answers. Checkboxes rather than a
   multi-select list: every option is visible, and it works on a phone. */





/* The whole row lights up when ticked, so the selection is legible at a glance
   rather than depending on a 16px box. */





/* --------------------------------------------------------- feature quote */
/* One voice, given the width of the page instead of a card. Used to break up
   long stretches of our own copy with somebody else's. */

.feature-quote {
  max-width: 46rem;
  text-align: center;
  border-top: 2px solid var(--marker);
  border-bottom: 2px solid var(--marker);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.feature-quote blockquote {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-quote);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

/* AlphaSys gets the loud one. */
.feature-quote--large blockquote {
  font-size: var(--t-quote-lg);
  font-weight: 700;
  color: var(--olive);
}

.feature-quote__who {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

.feature-quote__who strong { color: var(--ink); }
.feature-quote__who .muted { font-size: var(--t-xs); }

.feature-quote .chip-context { margin-bottom: 1.5rem; }

/* Compact stage cards: same structure, less air, for the shortened method. */
.stages--compact { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.25rem; }
.stages--compact .stage p { font-size: var(--t-sm); }

/* A single column of examples, capped so five items don't run the page width. */
.workon--single { grid-template-columns: 1fr; }
.workon--single > div { max-width: 34rem; }

/* Centred illustration above a closing call to action. Smaller than a hero
   illo so it introduces the CTA rather than competing with it. */
.illo--cta {
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 340px;
  width: 100%;
}

/* Charcoal pull quote. Default .voice is olive; this one is asked to sit in
   body ink so it reads as the page talking rather than a brand flourish. */
.voice--ink { color: var(--ink); }
.voice--ink .voice__attrib { color: var(--ink-muted); }

/* Wide explanatory illustration. Runs the full measure of the wrap rather than
   sitting in a column, because the detail is the point. */
.illo--banner {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Consent note under the submit button. Deliberately quiet, but it has to stay
   legible: ink-muted on cream is 4.6:1, so it clears AA at this size. */
.form-consent {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 1rem 0 0;
}

/* Fine print in the footer base row. */
.site-footer__fine {
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.site-footer__fine:hover { color: var(--accent); }

/* Plain bulleted list inside long-form copy such as the privacy policy. */
.prose-list { padding-left: 1.15rem; margin: 0 0 1.2rem; }
.prose-list li { margin-bottom: 0.35rem; }

/* Long-form legal page: headings need air, body needs a comfortable measure. */
.narrow h2 { font-size: var(--t-xl); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.narrow p { max-width: 68ch; }

/* Inline text link with a trailing arrow. */
.link-arrow { font-weight: 600; }
.link-arrow::after { content: ' \2192'; }

/* Small button, for the footer where a full-size one would shout. */
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--t-sm); }

/* The email alternative under a call to action. */
.cta-alt {
  font-size: var(--t-sm);
  color: var(--ink-muted);
  margin: 1rem 0 0;
  max-width: 46ch;
}
.center .cta-alt { margin-inline: auto; }

/* A pull quote that runs the measure of the page rather than sitting in a
   column. Used where the quote is the whole section. */
.voice--full {
  max-width: 22ch;
  margin-top: 1.25rem;
}
@media (min-width: 700px)  { .voice--full { max-width: 34ch; } }
@media (min-width: 1100px) { .voice--full { max-width: 46ch; } }

/* Page title on a utility page: the display face, a step down in size. */
.display--sm { font-size: clamp(2rem, 4vw, 2.8rem); }

/* What we do: nine pieces of work, each with its own mark. The icons are
   decorative — the label carries the meaning — so their alt is empty. */
.workgrid {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem) 1rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.workgrid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.workgrid img { width: 72px; height: 72px; }

.workgrid span {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

/* The numbers, as bordered cards. Olive hairline with an offset shadow so the
   row reads as four objects rather than four columns of text. */
.stats--cards { margin-top: 2.5rem; }

.stats--cards .stat {
  border: 1.5px solid var(--olive);
  border-top: 1.5px solid var(--olive);
  border-radius: 2px;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: left;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--olive) 22%, transparent);
}

.stats--cards .stat__fig { color: var(--olive); }

/* Long-form passage that should use the page rather than a column. The eyebrow
   sits above instead of in a rail, and the measure opens up to the top of the
   comfortable range. */
.prose > div { max-width: 82ch; }
.prose p { max-width: none; }
.prose .eyebrow { margin-bottom: 1.5rem; }

/* Multi-select dropdown. Closed it is one control; open it is a panel of real
   checkboxes, so nothing is lost to a mis-click the way a native multiple
   select loses selections. */
.picker { position: relative; }

.picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: var(--t-base);
  text-align: left;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}

.picker__toggle:hover { border-color: var(--olive); }
.picker__toggle svg { width: 18px; height: 18px; flex: none; transition: transform .18s ease; }
.picker__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.picker__panel {
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--cream);
  max-height: 17rem;
  overflow-y: auto;
}

.picker__panel label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.4;
  cursor: pointer;
}

.picker__panel label:hover { background: color-mix(in srgb, var(--olive) 8%, transparent); }
.picker__panel input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--olive);
  cursor: pointer;
}

.picker__panel label span { flex: 1; min-width: 0; }
.picker__panel label:has(input:checked) { background: color-mix(in srgb, var(--olive) 12%, transparent); }

/* =====================================================================
   AD-VENTURES
   A journal, not a brochure: heavy masthead rule, a dateline, then tiles.
   ===================================================================== */

.adv-masthead { text-align: center; border-top: 2px solid var(--ink); padding-top: clamp(1rem, 2vw, 1.5rem); }

.adv-masthead__title {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.adv-masthead__sub {
  font-family: 'Shantell Sans', 'Bricolage Grotesque', cursive;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--accent);
  margin: 0.6rem 0 0.9rem;
}

.adv-dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.adv-dateline__note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.adv-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

.adv-filter {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  padding: 0.6rem 1rem;
  color: var(--ink);
  background: transparent;
  /* --rule is 1.62:1 on cream — fine for a decorative card edge, not for the
     only thing that identifies a control. WCAG 1.4.11 wants 3:1. */
  border: 1.5px solid #8A8680;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.adv-filter:hover { border-color: var(--olive); }
.adv-filter.is-on { background: var(--olive); border-color: var(--olive); color: var(--cream); }

.adv-grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The comics are 3:2 with readable panels — a single column wastes them. */
@media (min-width: 620px) { .adv-tile--wide { grid-column: span 2; } }

/* display:flex on the tile would otherwise beat the hidden attribute. */
.adv-tile[hidden] { display: none; }

.adv-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--cream);
  overflow: hidden;
  min-width: 0;
}

.adv-tile__link { display: flex; flex-direction: column; flex: 1; height: 100%; text-decoration: none; color: inherit; }
.adv-tile__link:hover { color: inherit; }
.adv-tile:has(.adv-tile__link:hover) { border-color: var(--olive); }

.adv-tile__media { border-bottom: 1px solid var(--rule); background: var(--cream); }
.adv-tile__media img { display: block; width: 100%; height: auto; }

.adv-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  flex: 1;
}

.adv-tile__body .chip-context { margin-bottom: 0; align-self: flex-start; }

.adv-tile__meta {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.adv-tile h3 {
  font-size: var(--t-md);
  line-height: 1.25;
  margin: 0;
}

/* The blurb only. `.adv-tile p` would be specificity 0,1,1 and quietly beat
   the 0,1,0 rule on .adv-tile__meta above — same trap that broke the form. */
.adv-tile__body > p:not([class]) {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: none;
}

.adv-tile__cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--btn-fill);
}

/* Category chips. Client and crew are filled so the two kinds of entry read
   apart at a glance; the quieter categories stay outlined. */
.chip-context--client { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.chip-context--crew { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--cream); }
.chip-context--musings { border-color: var(--rule); color: var(--ink-muted); }
.chip-context--content { border-color: var(--orange); color: var(--btn-fill); }

.adv-empty { text-align: center; color: var(--ink-muted); padding: 2rem 0 0; }

/* =====================================================================
   AD-VENTURES STORY PAGE
   Four image slots: hero (content width), inset (floats, desktop only),
   bleed (edge to edge), pair (two up). Text measure stays ~68ch throughout.
   ===================================================================== */

.story { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

.story__back {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-sm); font-weight: 700; color: var(--btn-fill);
  text-decoration: none; margin-bottom: 1.75rem;
}
.story__back:hover { text-decoration: underline; }
/* None of the four brand fonts ship arrow glyphs, so a text arrow renders in
   a fallback face. Inline SVG keeps it on-brand and scales with the label. */
.story__back svg, .story__cta svg { width: 0.85em; height: 0.85em; flex: none; }

.story__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.story__kicker .chip-context { margin-bottom: 0; }
.story__dateline {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}

.story__title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.05; max-width: 20ch; margin: 0 0 1rem; }
.story__lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-muted); max-width: 58ch; margin: 0 0 2.5rem; }

/* --- the text column -------------------------------------------------- */
.story__body { max-width: 68ch; }
.story__body > p { margin: 0 0 1.4rem; line-height: 1.65; }
.story__body > h2 { font-size: var(--h2); line-height: 1.2; margin: 2.75rem 0 1rem; }
.story__body > h2:first-child { margin-top: 0; }

.story__quote {
  font-family: 'Shantell Sans', 'Bricolage Grotesque', cursive;
  font-size: var(--t-quote); line-height: 1.45; color: var(--accent);
  border-left: 3px solid var(--orange);
  padding-left: 1.4rem; margin: 2.5rem 0; max-width: 46ch;
}

/* --- figures ----------------------------------------------------------- */
.story figure { margin: 0 0 2rem; }
.story figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.story figcaption { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 0.6rem; line-height: 1.45; }

.story__hero { margin-bottom: 2.75rem; }

/* Bleed: escape the centred column without a wrapper. */
.story__bleed { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.story__bleed img { border-inline: 0; }
.story__bleed figcaption { max-width: 68ch; margin-inline: auto; padding-inline: var(--gutter); }

.story__pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.story__pair figure { margin-bottom: 0; }
@media (min-width: 620px) { .story__pair { grid-template-columns: 1fr 1fr; } }

/* Inset: floats only where there is room to float. Below 820px a 45% float
   leaves roughly a twelve-character measure, so it goes full width instead. */
.story__inset { margin-bottom: 1.75rem; }
@media (min-width: 820px) {
  .story__inset { width: 45%; margin-bottom: 1.25rem; }
  .story__inset--right { float: right; margin-left: 2rem; }
  .story__inset--left  { float: left;  margin-right: 2rem; }
}
/* Stop the next block riding up into the float's gutter. */
.story__body::after { content: ""; display: block; clear: both; }

.story__foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.5rem; }
.story__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: var(--t-sm);
  color: var(--btn-fill); text-decoration: none;
  border: 2px solid var(--btn-fill); border-radius: var(--radius);
  padding: 0.7rem 1.2rem;
}
.story__cta:hover { background: var(--btn-fill); color: var(--cream); }

.story__nav { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 620px) { .story__nav { grid-template-columns: 1fr 1fr; } }
.story__nav a { text-decoration: none; color: inherit; }
.story__nav a:hover .story__nav-title { color: var(--btn-fill); }
.story__nav--next { text-align: right; }
.story__nav-label {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 0.35rem;
}
.story__nav-title { font-weight: 600; line-height: 1.35; }