/* guru.blends · 02 Ragged Edge-led direction
   Type: Bricolage Grotesque (identity, display) + Noto Serif (reading), both SIL OFL 1.1, self-hosted.
   Every ground colour is sampled from the two supplied photos. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/noto-serif-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* sampled from the photos */
  --paper: #FFFFFF;        /* neck strip */
  --ink: #161317;          /* darkest tone in cut 01 */
  --cape: #CF303A;         /* cape red, both photos */
  --cape-black: #1E181B;   /* cape spots */
  --amber: #E8AA68;        /* cut 01, the shop floor */
  --light: #F5E58E;        /* cut 02, the shop lights */
  --lilac: #D9D3F6;        /* cut 02, the back shelves */
  --mirror: #C2DFF3;       /* cut 01, the mirror glass */

  /* live theme, rewritten by the scroll crossfade */
  --ground: var(--paper);
  --fg: var(--ink);
  --fg-2: #57525A;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;

  --m: clamp(20px, 2.4vw, 36px);
  --g: clamp(12px, 1.6vw, 24px);
  --section: clamp(104px, 11vw, 176px);
  --tile: clamp(420px, 44vw, 760px);
  --cut: 3px;               /* the line-up corner */
  --pill-h: 44px;
  --header-h: 64px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-inout: cubic-bezier(.87, 0, .13, 1);

  color-scheme: light;
  accent-color: var(--cape);
}

/* grounds: each section knows its own pair, so the page reads without JS */
[data-ground="paper"]  { --sg: var(--paper);  --sf: var(--ink);  --sf2: #57525A; }
[data-ground="amber"]  { --sg: var(--amber);  --sf: var(--ink);  --sf2: #4A3322; }
[data-ground="light"]  { --sg: var(--light);  --sf: var(--ink);  --sf2: #4C4526; }
[data-ground="lilac"]  { --sg: var(--lilac);  --sf: var(--ink);  --sf2: #433D63; }
[data-ground="mirror"] { --sg: var(--mirror); --sf: var(--ink);  --sf2: #2F4A5E; }
[data-ground="cape"]   { --sg: var(--cape);   --sf: #FFFFFF;     --sf2: #FFFFFF; }
[data-ground="ink"]    { --sg: var(--ink);    --sf: #FFFFFF;     --sf2: #D6D0D8; }

[data-ground] {
  background-color: var(--sg);
  color: var(--sf);
}

/* with motion allowed, the whole page takes one ground at a time */
.crossfade body {
  background-color: var(--ground);
  color: var(--fg);
  transition: background-color .4s linear, color 0s linear var(--flip, 0ms);
}

.crossfade [data-ground] {
  background-color: transparent;
  color: inherit;
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--fg) var(--ground);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--sf, var(--fg));
  outline-offset: 3px;
}

[tabindex="-1"]:focus { outline: none; }

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

[data-ground="ink"] ::selection,
[data-ground="cape"] ::selection {
  background: var(--paper);
  color: var(--ink);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 12px;
  left: var(--m);
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  border-top-left-radius: var(--cut);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus { transform: none; }

.wrap { padding-inline: var(--m); }

/* ---------- type ---------- */

.statement {
  max-width: 17ch;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.5rem, 1.3rem + 4.3vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.statement--md { font-size: clamp(2.25rem, 1.3rem + 3.1vw, 4.5rem); }
.statement--case { max-width: 21ch; }

.lead {
  max-width: 23em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.02rem + 1.95vw, 3.125rem);
  line-height: 1.32;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.lead--sm {
  max-width: 26em;
  font-size: clamp(1.25rem, 1.02rem + .8vw, 1.875rem);
  line-height: 1.36;
}

.intake {
  color: var(--sf2, var(--fg-2));
  font-size: .9375rem;
  line-height: 1.45;
}

.crossfade .intake {
  color: var(--fg-2);
  transition: color 0s linear var(--flip, 0ms);
}

/* the marker for facts guru.blends has not supplied */
.cms {
  display: inline-flex;
  align-items: center;
  margin-right: .3em;
  padding: .2em .7em .24em;
  border: 1px dashed currentColor;
  border-radius: 999px;
  border-top-left-radius: var(--cut);
  font-family: var(--display);
  font-weight: 650;
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: nowrap;
  vertical-align: .1em;
}

/* ---------- controls ---------- */

.pill {
  --pill-bg: color-mix(in srgb, currentColor 9%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: var(--pill-h);
  padding: .55em 1.05em .6em;
  border: 0;
  border-radius: 999px;
  border-top-left-radius: var(--cut);
  background: var(--pill-bg);
  color: inherit;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}

.pill:hover { --pill-bg: color-mix(in srgb, currentColor 17%, transparent); }

.pill--solid,
.pill.is-on {
  background: var(--sf, var(--fg));
  color: var(--sg, var(--ground));
}

.pill--solid:hover,
.pill.is-on:hover {
  background: color-mix(in srgb, var(--sf, var(--fg)) 84%, var(--sg, var(--ground)));
}

.pill--paper {
  background: var(--paper);
  color: var(--ink);
}

.pill--paper:hover { background: color-mix(in srgb, var(--paper) 86%, var(--ink)); }

.pill--small {
  min-height: 40px;
  padding: .45em .95em .5em;
  font-size: .9375rem;
}

.pill .count {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---------- masthead ---------- */

.masthead {
  --sg: var(--ground);
  --sf: var(--fg);
  position: relative;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g);
  padding: 0 var(--m) 12px;
  background: var(--paper);
  color: var(--ink);
}

.masthead__home {
  display: block;
  overflow: hidden;
  height: calc(var(--mw) * .84);
  color: inherit;
  text-decoration: none;
  --mw: clamp(34px, 5.6vw, 88px);
}

/* the line-up: the top edge of the screen shaves the wordmark flat */
.masthead__word {
  display: block;
  margin-top: calc(var(--mw) * -.2);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--mw);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.masthead__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--g);
  padding-left: clamp(8px, 2vw, 32px);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.masthead__menu,
.masthead__fallback { display: none; }

.js .masthead {
  position: fixed;
  inset: 0 0 auto 0;
  background: var(--ground);
  color: var(--fg);
  transition: transform .45s var(--ease-out), background-color .4s linear, color 0s linear var(--flip, 0ms);
}

.js .masthead.is-hidden { transform: translateY(-105%); }

/* over the opening the nav drops to the bottom edge, as on raggededge.com */
.js .masthead.is-over-hero {
  inset: auto 0 0 0;
  padding-bottom: clamp(20px, 3vh, 32px);
  background: transparent;
  color: var(--paper);
  transform: none;
  transition: none;
}

.js .masthead.is-over-hero .masthead__home { display: none; }
.js .masthead.is-over-hero .masthead__nav { padding-left: 0; }

.js .masthead.is-over-hero .pill {
  background: var(--paper);
  color: var(--ink);
}

.js .masthead.is-over-hero .pill:hover { background: color-mix(in srgb, var(--paper) 86%, var(--ink)); }

.js .masthead.is-over-hero .pill--solid {
  background: var(--ink);
  color: var(--paper);
}

.js .masthead.is-over-hero .pill--solid:hover { background: var(--cape-black); }

.js .masthead.is-over-hero :focus-visible { outline-color: var(--paper); }

/* ---------- opening ---------- */

.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--paper);
}

.opening__cape {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cape) url("media/cape-print.webp") 0 0 / var(--tile) repeat;
}

.opening__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s linear;
}

.has-gl .opening__canvas { opacity: 1; }

.opening__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(72px, 11vh, 132px) var(--m) calc(var(--pill-h) + clamp(40px, 7vh, 72px));
  row-gap: clamp(16px, 2.6vh, 28px);
}

.opening__word {
  grid-row: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16.5vw;
  line-height: .82;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.opening__fit { display: inline-block; }

.opening__lower {
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--g);
}

/* neck-strip bands carry text over the print */
.opening__meta {
  padding: .4em .85em .45em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.125rem, .9rem + .7vw, 1.625rem);
  line-height: 1.2;
}

.shot { position: relative; }

.shot img {
  width: 240px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.shot figcaption {
  width: 240px;
  padding: 7px 12px 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.3;
}

.opening__shot img,
.opening__shot figcaption { width: min(240px, 28vh); }

.opening__actions {
  grid-row: 4;
  display: none;
  gap: 8px;
}

.opening .pill--solid {
  background: var(--ink);
  color: var(--paper);
}

.opening .pill--solid:hover { background: var(--cape-black); }
.opening :focus-visible { outline-color: var(--paper); }

/* ---------- manifesto ---------- */

.manifesto {
  padding-block: var(--section) clamp(96px, 10vw, 160px);
}

.manifesto .lead { margin-top: clamp(28px, 3.4vw, 52px); }

/* ---------- cut index ---------- */

.cuts { padding-block: clamp(56px, 6vw, 96px) var(--section); }

.cuts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px var(--g);
  margin-bottom: clamp(36px, 4vw, 64px);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.index__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding: 18px 0 clamp(56px, 6vw, 104px);
  border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.index__text {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.index__name {
  font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -.02em;
}

.index__link { text-decoration: none; }

/* the whole row opens the case study */
.index__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.index__link:focus-visible { outline: none; }

.index__row:has(.index__link:focus-visible) {
  outline: 3px solid var(--sf, var(--fg));
  outline-offset: 6px;
}

.index__statement {
  max-width: 21ch;
  margin-top: auto;
  padding-top: clamp(40px, 8vw, 150px);
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.125rem, .98rem + .5vw, 1.4375rem);
  line-height: 1.34;
  letter-spacing: -.01em;
}

.index__tags {
  font-size: 1rem;
  color: var(--sf2);
}

.crossfade .index__tags { color: var(--fg-2); }

.metric {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 1rem;
}

.metric__icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
}

.metric__icon .icon {
  width: 15px;
  height: 15px;
  stroke: var(--sg, var(--ground));
  stroke-width: 1.8;
}

.metric__label {
  font-family: var(--display);
  font-weight: 650;
}

/* every cut sits on the cape it was cut in */
.index__shot {
  grid-column: 5 / -1;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 36vw, 540px);
  padding: clamp(28px, 4vw, 64px);
  background: var(--cape) url("media/cape-print.webp") 0 0 / var(--tile) repeat;
}

.index__row:nth-child(2n) .index__shot {
  background-position: 37% 58%;
  justify-items: end;
}

.index__row:nth-child(2n + 1) .index__shot { justify-items: start; }

.index__shot img {
  width: 240px;
  box-shadow: 0 18px 40px -18px rgba(30, 24, 27, .7);
}

.cuts__more {
  max-width: 38em;
  font-size: 1.0625rem;
}

.cuts__more .intake { margin-right: .25em; }

/* ---------- case studies ---------- */

.case {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-block: var(--section) clamp(96px, 10vw, 160px);
}

.case__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}

.case__id {
  grid-column: 1 / span 2;
  padding-top: .55em;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.125rem;
  line-height: 1.2;
}

.case__head .statement { grid-column: 3 / -1; }

.case__row {
  grid-column: 3 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--g);
  margin-top: clamp(48px, 5.5vw, 88px);
}

.slot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 240px;
  aspect-ratio: 3 / 4;
  padding: 18px;
  border: 1px dashed currentColor;
}

.slot__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -.015em;
}

.slot .intake { font-size: .875rem; }

.case__row .shot figcaption {
  background: transparent;
  color: inherit;
  padding-inline: 0;
  font-family: var(--display);
  font-weight: 650;
}

.case__facts {
  grid-column: 3 / -1;
  margin-top: clamp(48px, 5vw, 80px);
}

.ledger__row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--g);
  padding: 16px 0 18px;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.ledger dt {
  grid-column: 1 / span 3;
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.ledger dd {
  grid-column: 4 / -1;
  max-width: 38em;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.chapters-grid {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g);
  margin-top: clamp(56px, 6vw, 96px);
}

.chapters-grid li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 16px;
  border-top: 2px solid currentColor;
}

.chapters-grid h3 {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  font-weight: 750;
  letter-spacing: -.02em;
}

.chapters-grid p {
  max-width: 32ch;
  font-size: 1.0625rem;
}

.quote {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
  margin-top: clamp(56px, 6vw, 96px);
}

.quote::before {
  content: "\201C";
  grid-row: span 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(5rem, 3rem + 6vw, 9rem);
  line-height: .72;
}

.quote blockquote { padding-top: .6em; }

.quote figcaption { margin-top: 10px; max-width: 34em; }

/* ---------- learn the lingo ---------- */

.lingo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-block: var(--section);
}

.lingo__head { grid-column: 1 / -1; }
.lingo__head .lead { margin-top: clamp(24px, 3vw, 44px); }

.builder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  align-items: start;
  margin-top: clamp(56px, 6vw, 96px);
}

.builder__dials { grid-column: 1 / span 7; }

.dial {
  min-width: 0;
  margin: 0;
  padding: 18px 0 clamp(32px, 3.4vw, 52px);
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.dial__name {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4.25rem);
  line-height: 1;
  letter-spacing: -.03em;
}

.dial__ask {
  display: block;
  margin-top: .55em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--sf2);
}

.crossfade .dial__ask { color: var(--fg-2); }

.dial__options {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
}

.option {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  min-height: 52px;
  padding: 11px 18px 12px;
  border-radius: 22px;
  border-top-left-radius: var(--cut);
  background: color-mix(in srgb, currentColor 8%, transparent);
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}

.option:hover { background: color-mix(in srgb, currentColor 15%, transparent); }

.option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option__name { font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1.1; }
.option__desc { font-family: var(--serif); font-weight: 400; font-size: .875rem; line-height: 1.35; }

.option:has(input:checked),
.option.is-checked {
  background: var(--sf, var(--fg));
  color: var(--sg, var(--ground));
}

.option:has(input:focus-visible) {
  outline: 3px solid var(--sf, var(--fg));
  outline-offset: 3px;
}

.formula {
  grid-column: 9 / -1;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--sf, var(--fg));
  color: var(--sg, var(--ground));
}

.formula__title { font-family: var(--display); font-weight: 650; font-size: 1.0625rem; line-height: 1.2; }

.formula__out {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.formula__says { font-size: 1.0625rem; line-height: 1.45; }

.formula__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formula .pill { color: var(--sg, var(--ground)); }

.formula .pill--solid {
  background: var(--sg, var(--ground));
  color: var(--sf, var(--fg));
}

.formula :focus-visible { outline-color: var(--sg, var(--ground)); }

.formula__status:empty { display: none; }
.formula__status { font-size: .9375rem; }

.lingo__notes {
  grid-column: 1 / span 7;
  max-width: 38em;
  display: grid;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 1.0625rem;
}

/* ---------- menu, policies ---------- */

.prices,
.policies,
.faq { padding-block: var(--section) clamp(96px, 9vw, 150px); }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 20px;
  align-items: end;
}

.split .statement { grid-column: 1 / span 7; }
.split .lead { grid-column: 8 / -1; }

.ledger--wide { margin-top: clamp(48px, 5vw, 80px); }

.ledger--wide .ledger__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ledger--wide dt { grid-column: 1 / span 4; font-size: clamp(1.125rem, 1rem + .45vw, 1.5rem); }
.ledger--wide dd { grid-column: 5 / -1; }

.law {
  max-width: 38em;
  margin-top: clamp(32px, 3.4vw, 52px);
  margin-left: calc((100% + var(--g)) / 12 * 4);
  padding-top: 16px;
  border-top: 2px solid currentColor;
  font-size: 1.0625rem;
}

/* ---------- first visit ---------- */

.first { padding-block: var(--section); }

.first__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--g);
  margin-top: clamp(48px, 5vw, 80px);
}

.first__list li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 16px;
  border-top: 2px solid currentColor;
}

.first__list h3 {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  font-weight: 750;
  letter-spacing: -.02em;
}

.first__list p { max-width: 30ch; font-size: 1.0625rem; }

/* ---------- questions ---------- */

.faq__list {
  max-width: 64rem;
  margin-top: clamp(40px, 4.4vw, 72px);
  margin-left: calc((100% + var(--g)) / 12 * 4);
}

.qa { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.qa:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 14px 0;
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary .icon {
  width: 22px;
  height: 22px;
  transition: transform .3s var(--ease-out);
}

.qa[open] summary .icon { transform: rotate(180deg); }

.qa p {
  max-width: 38em;
  padding: 0 0 22px;
  font-size: 1.0625rem;
}

/* ---------- showtime ---------- */

.showtime {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  padding-block: var(--section) clamp(96px, 9vw, 150px);
}

.showtime__head { grid-column: 1 / -1; }
.showtime__head .statement { font-size: clamp(3.5rem, 1.6rem + 6.4vw, 6rem); }
.showtime__head .lead { margin-top: 20px; }

.showtime__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  margin-top: clamp(48px, 5vw, 80px);
}

.ledger--contact { grid-column: 1 / span 7; }

.ledger--contact .ledger__row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ledger--contact dt { grid-column: 1 / span 2; }
.ledger--contact dd { grid-column: 3 / -1; }

.ledger__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.ledger__action a { font-size: 1.1875rem; }

/* the cape at rest, collar and all */
.showtime__cape {
  grid-column: 9 / -1;
  aspect-ratio: 4 / 5;
  border-top: 10px solid var(--paper);
  background: #CFCBCC url("media/cape-print.webp") 18% 40% / var(--tile) repeat;
  background-blend-mode: multiply;   /* the same cape, folded into shade; the collar stays white */
}

.showtime__status {
  grid-column: 1 / -1;
  min-height: 1.5em;
  margin-top: 16px;
  font-size: .9375rem;
}

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

.footer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 40px;
  overflow: hidden;
  padding-top: clamp(64px, 7vw, 112px);
}

.footer__map {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g);
}

.footer__map li + li { margin-top: 8px; }

.footer__map a {
  font-size: 1.0625rem;
  text-decoration: none;
}

.footer__map a:hover { text-decoration: underline; }

.footer__notes {
  max-width: 38em;
  grid-column: 8 / -1;
  display: grid;
  gap: 14px;
  font-size: .9375rem;
}

/* the neckline: the bottom edge of the page shaves the wordmark */
.footer__word {
  grid-column: 1 / -1;
  height: calc(var(--fw) * .66);
  overflow: hidden;
  margin-top: clamp(24px, 4vw, 64px);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fw);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  --fw: 18.2vw;
}

/* ---------- sections pill ---------- */

.chapters {
  position: fixed;
  left: var(--m);
  bottom: 18px;
  z-index: 45;
  display: grid;
  justify-items: start;
  gap: 8px;
  transition: opacity .3s linear, transform .45s var(--ease-out), visibility 0s linear 0s;
}

.chapters.is-away {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .3s linear, transform .45s var(--ease-out), visibility 0s linear .3s;
}

.chapters__list {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.chapters .pill {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(22, 19, 23, .45);
}

.chapters .pill:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }

.chapters.is-open .chapters__toggle {
  background: var(--ink);
  color: var(--paper);
}

.chapters.is-open .chapters__toggle .icon { transform: rotate(45deg); }
.chapters__toggle .icon { transition: transform .3s var(--ease-out); }

.chapters :focus-visible { outline-color: var(--ink); }

/* ---------- menu dialog (small screens) ---------- */

.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 14px var(--m) 32px;
  border: 0;
  background: var(--cape) url("media/cape-print.webp") 0 0 / var(--tile) repeat;
  color: var(--paper);
}

.menu::backdrop { background: rgba(22, 19, 23, .6); }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.menu__word {
  padding: .1em .3em .15em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.03em;
}

.menu__close {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.menu__close .icon { width: 22px; height: 22px; }

.menu__list {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: clamp(40px, 9vh, 88px);
}

.menu__list .pill {
  min-height: 56px;
  padding-inline: 1.3em;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
}

.menu__list .pill--solid {
  background: var(--ink);
  color: var(--paper);
}

.menu :focus-visible { outline-color: var(--paper); }

/* ---------- curtain between sections ---------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
  background: var(--cape) url("media/cape-print.webp") 0 0 / var(--tile) repeat;
  transform: translateY(102%);
}

/* the neck strip leads the cape */
.curtain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: var(--paper);
}

.curtain.is-in {
  visibility: visible;
  transform: translateY(0);
  transition: transform .42s var(--ease-in);
}

.curtain.is-out {
  visibility: visible;
  transform: translateY(-104%);
  transition: transform .56s var(--ease-out);
}

/* ---------- cursor label ---------- */

.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: 8px 14px 9px;
  border-radius: 999px;
  border-top-left-radius: var(--cut);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 22px -10px rgba(22, 19, 23, .45);
  transition: opacity .2s linear;
}

.cursor-label.is-on { opacity: 1; }

/* ---------- intro: a razor line opens into the cape ---------- */

.intro { display: none; }

.is-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  pointer-events: none;
}

.intro__bar {
  position: absolute;
  left: -8%;
  right: -8%;
  height: 50.5%;
  background: var(--ink);
}

.intro__bar--top { top: 0; }
.intro__bar--bottom { bottom: 0; }

.intro__line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 2px);
  height: 4px;
  background: var(--paper);
  transform: scaleX(0);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .is-intro .intro__line { animation: intro-line .55s var(--ease-out) .1s forwards, intro-fade .2s linear .72s forwards; }
  .is-intro .intro__bar--top { animation: intro-top .85s var(--ease-inout) .62s forwards; }
  .is-intro .intro__bar--bottom { animation: intro-bottom .85s var(--ease-inout) .62s forwards; }
  .is-intro .opening__cape { animation: intro-cape 1.4s var(--ease-out) .5s both; }
  .is-intro .opening__word { animation: intro-word 1.1s var(--ease-out) .95s both; }
  .is-intro .opening__lower,
  .is-intro .opening__actions { animation: intro-rise .9s var(--ease-out) 1.25s both; }
  .is-intro .masthead { animation: intro-nav .8s var(--ease-out) 1.35s both; }

  /* touch screens get the printed cape, drifting */
  .opening__cape { animation: cape-drift 120s linear infinite; }
  .has-gl .opening__cape { animation: none; }
}

@keyframes intro-line { to { transform: scaleX(1); } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-top { to { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; } }
@keyframes intro-bottom { to { transform: translateY(101%); border-radius: 50% 50% 0 0 / 22vh 22vh 0 0; } }
@keyframes intro-cape { from { transform: scale(1.14); } to { transform: none; } }
@keyframes intro-word {
  from { clip-path: inset(100% -4% -30% -4%); transform: translateY(18%); }
  to { clip-path: inset(-30% -4% -30% -4%); transform: none; }
}
@keyframes intro-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes intro-nav { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes cape-drift { to { background-position: var(--tile) calc(var(--tile) * -1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- scroll offsets ---------- */

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
#top { scroll-margin-top: 0; }

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

@media (min-width: 900px) {
  :root { --header-h: 96px; }
}

/* ---------- tablet ---------- */

@media (max-width: 1099px) {
  .index__text { grid-column: 1 / span 5; }
  .index__shot { grid-column: 6 / -1; }
  .case__id { grid-column: 1 / -1; padding: 0 0 12px; }
  .case__head .statement,
  .case__row,
  .case__facts,
  .chapters-grid,
  .quote { grid-column: 1 / -1; }
  .chapters-grid,
  .first__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .builder__dials,
  .lingo__notes { grid-column: 1 / span 7; }
  .formula { grid-column: 8 / -1; }
  .split .statement,
  .split .lead { grid-column: 1 / -1; }
  .law,
  .faq__list { margin-left: 0; }
  .ledger--contact { grid-column: 1 / span 8; }
  .ledger--contact .ledger__row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ledger--contact dt { grid-column: 1 / span 3; }
  .ledger--contact dd { grid-column: 4 / -1; }
  .showtime__cape { grid-column: 10 / -1; }
}

/* ---------- small screens ---------- */

@media (max-width: 899px) {
  .masthead { align-items: center; padding-block: 10px; }
  .masthead__nav { display: none; }
  .masthead__home {
    --mw: 34px;
    height: calc(var(--mw) * .84);
  }
  .masthead__fallback { display: inline-flex; }
  .js .masthead__fallback { display: none; }
  .js .masthead__menu { display: inline-flex; }
  .js .masthead.is-over-hero {
    inset: 0 0 auto 0;
    padding: 12px var(--m);
    justify-content: flex-end;
  }
  .js .masthead.is-over-hero .masthead__menu {
    background: var(--paper);
    color: var(--ink);
  }

  .opening__stage {
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: 84px var(--m) 32px;
    row-gap: 22px;
  }
  .opening__word { grid-row: 1; font-size: 17.4vw; }
  .opening__lower {
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .opening__shot { align-self: center; }
  .opening__shot img,
  .opening__shot figcaption { width: min(240px, 60vw, 32svh); }
  .opening__actions { display: flex; grid-row: 3; justify-content: center; margin-top: 6px; }

  .index__row { row-gap: 22px; }
  .index__text,
  .index__shot { grid-column: 1 / -1; }
  .index__shot { grid-row: 1; min-height: 0; padding: 28px; justify-items: center !important; }
  .index__statement { padding-top: 0; margin-top: 0; }

  .case__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__row .shot { grid-column: 1 / -1; grid-row: 1; }
  .slot { width: auto; aspect-ratio: 3 / 4.2; padding: 12px; }
  .slot__name { font-size: 1.125rem; }
  .slot .cms { font-size: .75rem; padding-inline: .55em; }

  .ledger__row,
  .ledger--wide .ledger__row,
  .ledger--contact .ledger__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .ledger dt,
  .ledger dd,
  .ledger--wide dt,
  .ledger--wide dd,
  .ledger--contact dt,
  .ledger--contact dd { grid-column: 1 / -1; }

  .builder__dials,
  .lingo__notes,
  .formula { grid-column: 1 / -1; }
  .formula { position: static; margin-top: 8px; }

  .ledger--contact,
  .showtime__cape { grid-column: 1 / -1; }
  .showtime__cape { width: min(100%, 320px); margin-top: 40px; }

  .footer__map,
  .footer__notes { grid-column: 1 / -1; }
}

@media (max-width: 379px) {
  /* two slots side by side get too narrow for their marker; stack them */
  .case__row { grid-template-columns: minmax(0, 1fr); }
  .slot { aspect-ratio: auto; min-height: 176px; }
}

@media (max-width: 599px) {
  .chapters-grid,
  .first__list { grid-template-columns: minmax(0, 1fr); }
  .quote { grid-template-columns: minmax(0, 1fr); }
  .quote::before { grid-row: auto; }
  .footer__map { grid-template-columns: minmax(0, 1fr); }
  .chapters { bottom: 12px; }
}