/* ===========================================================================
   Wamsley Electrical Services
   Page styles. The engine (scrollcraft.css) is the mechanism and is never
   edited; this file themes it and adds this page's own classes.

   Grammar: chaptered editorial. Consequences that show up all over this file:
     - Grounds change by HARD CUT, per chapter. Never an interpolated gradient,
       which is why no chapter carries data-sc-drift.
     - Media lives in its own column with a caption and never bleeds under type.
     - No fixed bar. The chrome is a folio in the right margin.
   =========================================================================== */

:root {
  /* --- the six engine tokens, plus two faces --- */
  --sc-canvas:     #F4F2ED;   /* paper */
  --sc-surface:    #E8E4DB;
  --sc-ink:        #14161A;
  --sc-ink-soft:   #5C6169;
  --sc-accent:     #E8A34A;   /* lamp. The colour of the light they install */
  --sc-accent-ink: #14161A;

  /* Newsreader because the client's own wordmark is a classical serif and this
     firm is 25 years old doing heritage-adjacent work. Not "serif = premium".
     IBM Plex Sans for text: Inter is the AI-default face and reads as a
     non-decision. */
  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* --- this page's own --- */
  --w-paper:   #F4F2ED;
  --w-harbour: #1E3A4C;
  --w-night:   #0B0E12;
  --w-steel:   #B9BEC4;       /* straight off the logo */
  --w-rule:    #14161A1F;
  --w-folio-w: 9rem;
  --w-col:     min(27rem, 34vw);
}

/* The grain overlay's ::before sits at inset:-50%, which extends about 39px past
   the viewport and gives the document horizontal scroll on a phone. Clip it at
   the root rather than restyling .sc-grain, which is the engine's.
   overflow-x: clip, NOT hidden: hidden would make this a scroll container and
   silently break every position:sticky pinned act on the page. */
html { overflow-x: clip; }

/* Hard cuts. Each chapter paints its own ground and holds it. */
body { background: var(--w-paper); color: var(--sc-ink); }

.ch                 { background: var(--w-paper); color: var(--sc-ink); }
.ch--harbour        { background: var(--w-harbour); color: #EAF0F3; }
.ch--stock          { background: var(--sc-surface); }   /* a tinted paper stock: a printed sidebar */
.ch--night          { background: var(--w-night);   color: #E9E6E0; }

/* Light type on dark needs compensation: more leading, more tracking, one
   step more weight. */
.ch--harbour .ch__body,
.ch--night   .ch__body { line-height: 1.72; letter-spacing: .006em; font-weight: 380; }
.ch--harbour .ch__label,
.ch--night   .ch__label { color: #B7C6CE; }
.ch--night   .ch__label { color: #8C929B; }

/* ---------------------------------------------------------------- chapters */

.ch {
  position: relative;
  padding: var(--sc-section) var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--w-folio-w));
}

.ch__wrap {
  max-width: var(--sc-maxw);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) var(--w-col);
  align-items: start;
}
.ch__wrap--single { grid-template-columns: minmax(0, 1fr); }
.ch__wrap--flip   { grid-template-columns: var(--w-col) minmax(0, 1fr); }
.ch__wrap--flip .ch__text { order: 2; }
.ch__wrap--flip .ch__media { order: 1; }

/* More space above a heading than below it: the gap belongs to the boundary. */
.ch__label {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-5);
  display: flex; align-items: baseline; gap: var(--sc-3);
}
.ch__label::after {
  content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: .28;
}

.ch__h {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--sc-t-2xl);
  line-height: 1.05;
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0 0 var(--sc-5);
}
@media (min-width: 1200px) { .ch__h { font-size: var(--sc-t-3xl); } }

.ch__body {
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  max-width: 58ch;
  text-wrap: pretty;
  margin: 0 0 var(--sc-5);
  color: inherit;
}
.ch__body--lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 44ch; }

/* ------------------------------------------------------------ the set list */
/* Density is the argument in an editorial chapter. A plain list, wide measure,
   hairlines. Not cards. */

.setlist { list-style: none; margin: var(--sc-6) 0 0; padding: 0; columns: 2; column-gap: var(--sc-7); }
.setlist--one { columns: 1; }
.setlist li {
  break-inside: avoid;
  padding: var(--sc-3) 0;
  border-top: 1px solid var(--w-rule);
  font-size: var(--sc-t-sm);
  line-height: 1.45;
}
.ch--harbour .setlist li { border-top-color: #FFFFFF2E; }
.ch--night   .setlist li { border-top-color: #FFFFFF1F; }

/* --------------------------------------------------------- the media column */
/* Media never bleeds under type in this grammar. It sits here, with a caption
   that says something the picture does not. */

.plate { margin: 0; }
.plate img {
  display: block; width: 100%; height: auto;
  background: var(--sc-surface);
}
.plate figcaption {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  margin-top: var(--sc-3);
  padding-top: var(--sc-3);
  border-top: 1px solid var(--w-rule);
  max-width: 38ch;
}
.ch--harbour .plate figcaption { color: #A9BEC8; border-top-color: #FFFFFF2E; }
.ch--night   .plate figcaption { color: #7E858E; border-top-color: #FFFFFF1F; }

/* ------------------------------------------------------------- title page */
/* Grammar: type on the paper ground, no media above the fold. Four text
   elements at most, and it must not overflow the viewport. */

.title-page {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: var(--sc-section) var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--w-folio-w));
}
.title-page__inner { max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }

.title-page__rule { height: 1px; background: var(--sc-ink); opacity: .82; margin-bottom: var(--sc-5); }
.title-page__rule--thick { height: 3px; margin: var(--sc-5) 0 0; }

.wordmark {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(2.9rem, 9vw, 7.5rem);
  line-height: .94;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}
.wordmark em { font-style: italic; font-weight: 300; }

.title-page__meta {
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: var(--sc-4) 0 0;
}
.title-page__line {
  font-family: var(--sc-font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  line-height: 1.45;
  max-width: 34ch;
  margin: var(--sc-6) 0 0;
  color: var(--sc-ink);
}

/* ------------------------------------------------------------------ folio */
/* The chrome. Right margin, no bar. Chapter numeral, chapter title, and the
   compass, which is the signature move. */

.folio {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--w-folio-w);
  z-index: 40;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sc-4);
  padding: var(--sc-6) var(--sc-4);
  pointer-events: none;
  color: var(--sc-ink);
  transition: color .45s var(--sc-ease-out);
}
.folio.is-dark { color: #E9E6E0; }

.folio__num {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .9;
}
.folio__title {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  min-height: 2.6em;
  opacity: .72;
}

/* the compass */
.compass { width: 84px; height: 84px; display: block; }
.compass__rose  { fill: none; stroke: currentColor; opacity: .32; }
.compass__ring  { fill: none; stroke: currentColor; opacity: .22; stroke-width: 1; }
.compass__arc   {
  fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linecap: round;
  /* circumference of r=38 is ~238.76 */
  stroke-dasharray: 238.76;
  stroke-dashoffset: calc(238.76 - (238.76 * var(--w-read, 0)));
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .12s linear;
}
.compass__star  { fill: currentColor; opacity: .5; }
.compass__needle {
  transform-origin: 50% 50%;
  transform: rotate(var(--w-bearing, 0deg));
  transition: transform 1.05s cubic-bezier(.22,1.4,.36,1);  /* inertia + overshoot */
}
.compass__needle .n { fill: var(--sc-accent); }
.compass__needle .s { fill: currentColor; opacity: .45; }
.compass__hub { fill: currentColor; opacity: .7; }

/* At the peak the compass is the only lit object on the page. */
.folio.is-lit .compass__rose { opacity: .5; stroke: var(--sc-accent); }
.folio.is-lit .compass__star { fill: var(--sc-accent); opacity: .34; }
.folio.is-lit .compass__hub  { fill: var(--sc-accent); opacity: 1; }
.folio.is-lit .folio__num,
.folio.is-lit .folio__title  { color: var(--sc-accent); opacity: 1; }

.folio__nav { display: grid; gap: 2px; pointer-events: auto; margin-top: var(--sc-3); }
.folio__dot {
  display: block; width: 100%; min-height: 22px;
  display: grid; place-items: center;
  color: inherit; text-decoration: none;
  font-family: var(--sc-font-text); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .38; transition: opacity .3s var(--sc-ease-out);
}
.folio__dot:hover, .folio__dot:focus-visible { opacity: 1; }
.folio__dot[aria-current="true"] { opacity: 1; color: var(--sc-accent); }

/* --------------------------------------------------------------- the peak */
/* Chapter VI. Hard cut to night. The lights come up one at a time under the
   reader's own scroll. */

.dark-stage {
  /* NO position here. The engine sets position:sticky on [data-sc-stage] and
     declaring anything else silently unpins the act (scrollcraft.js:540 warns
     about it). A sticky box still establishes a containing block, so the warm
     ::before below positions against it correctly anyway. */
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 4vh, 3.5rem) var(--sc-gutter);
  padding-right: calc(var(--sc-gutter) + var(--w-folio-w));
}
.dark-stage .ch__h { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-4); }
.dark-stage .ch__body { margin-bottom: 0; }
.dark-stage__wrap { max-width: var(--sc-maxw); margin-inline: auto; width: 100%; position: relative; z-index: 1; }

/* The ground itself warms as the scenes come up. This is the page's largest
   visual change, which is what the peak is for. */
.dark-stage::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0;
  background: radial-gradient(58% 46% at 50% 62%, #E8A34A26, #E8A34A00 70%);
  opacity: var(--w-lit, 0);
  transition: opacity .5s var(--sc-ease-out);
}

.lamps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.1rem);
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
}
.lamp { position: relative; margin: 0; overflow: hidden; background: #05070A; }
.lamp img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; max-height: 34vh;
  /* unlit: the photograph is there, but the power is not */
  filter: brightness(.08) saturate(.15) contrast(.85);
  transform: scale(1.06);
  transition: filter .5s var(--sc-ease-out), transform .6s var(--sc-ease-out);
}
.lamp.is-on img { filter: brightness(1.02) saturate(1.04) contrast(1); transform: scale(1); }

/* the tile itself gains an edge as it comes on, so the change reads even in a
   thumbnail */
.lamp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px #FFFFFF00, 0 0 0 0 #E8A34A00;
  transition: box-shadow .5s var(--sc-ease-out);
}
.lamp.is-on::after { box-shadow: inset 0 0 0 1px #E8A34A59, 0 18px 44px -18px #E8A34A66; }
.lamp figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sc-4) var(--sc-3) var(--sc-3);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); line-height: 1.4;
  color: #EDE7DC;
  background: linear-gradient(to top, #05070AE6, #05070A00);
  opacity: 0; transform: translateY(6px);
  transition: opacity .7s var(--sc-ease-out), transform .7s var(--sc-ease-out);
}
.lamp.is-on figcaption { opacity: 1; transform: none; }

.dark-stage__count {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: #6E747D; margin-top: var(--sc-4);
}
.dark-stage__count b { color: var(--sc-accent); font-weight: 500; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- what people say */
/* Pull quotes in a printed feature, not testimonial cards. The rating is a
   real figure from their Google Business Profile and links back to it. */

.score { display: flex; align-items: baseline; gap: var(--sc-4); flex-wrap: wrap; margin: 0 0 var(--sc-6); }
.score__n {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: .9; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.score__stars { color: var(--sc-accent); font-size: var(--sc-t-lg); letter-spacing: .12em; line-height: 1; }
.score__meta {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
}
.score__meta a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }

.quotes { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); margin: 0; }
.quotes blockquote {
  break-inside: avoid; margin: 0 0 var(--sc-6); padding: 0 0 0 var(--sc-4);
  border-left: 1px solid var(--w-rule);
}
.quotes p {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  line-height: 1.42; margin: 0 0 var(--sc-3); text-wrap: pretty;
}
.quotes footer {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: .04em; color: var(--sc-ink-soft);
  display: flex; gap: var(--sc-3); align-items: baseline; flex-wrap: wrap;
}
.quotes cite { font-style: normal; font-weight: 500; color: var(--sc-ink); }
.quotes .s { color: var(--sc-accent); letter-spacing: .1em; }

/* -------------------------------------------------------------- colophon */
/* The close. Small type. The CTA is a line of running text, not a button. */

.colophon { background: var(--w-night); color: #E9E6E0; padding: var(--sc-section) var(--sc-gutter) var(--sc-8); }
.colophon__wrap {
  max-width: var(--sc-maxw); margin-inline: auto;
  display: grid; gap: var(--sc-7);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.colophon__rule { height: 3px; background: #E9E6E0; opacity: .9; margin-bottom: var(--sc-6); }
.colophon__say {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1.18; letter-spacing: -0.012em;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
.colophon__say a { color: var(--sc-accent); text-decoration: none; border-bottom: 2px solid currentColor; }
.colophon__say a:hover, .colophon__say a:focus-visible { color: #F6C888; }

.colophon h2 {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: #7E858E; margin: 0 0 var(--sc-3); font-weight: 500;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; }
.colophon a  { color: #E9E6E0; }
.colophon li a {
  text-decoration: none; opacity: .82; font-size: var(--sc-t-sm);
  display: flex; align-items: center; min-height: 44px;
}
.colophon li a:hover, .colophon li a:focus-visible { opacity: 1; color: var(--sc-accent); }
.colophon address { font-style: normal; font-size: var(--sc-t-sm); line-height: 1.7; opacity: .82; }
.social { display: flex; gap: var(--sc-4); margin-top: var(--sc-4); flex-wrap: wrap; }
.social a {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  min-height: 44px; font-size: var(--sc-t-sm); text-decoration: none; opacity: .82;
}
.social a:hover, .social a:focus-visible { opacity: 1; color: var(--sc-accent); }
.social svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.colophon address a { display: inline-flex; align-items: center; min-height: 44px; }
.colophon__fine {
  max-width: var(--sc-maxw); margin: var(--sc-8) auto 0;
  padding-top: var(--sc-4); border-top: 1px solid #FFFFFF1F;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sc-6);
  font-size: var(--sc-t-xs); color: #6E747D;
}
.colophon__fine span { display: inline-flex; align-items: center; min-height: 44px; }
.colophon__fine a {
  color: var(--sc-accent); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.colophon__fine a:hover, .colophon__fine a:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------- sub-pages */

.masthead {
  border-bottom: 1px solid var(--w-rule);
  padding: var(--sc-5) var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-5); flex-wrap: wrap;
  background: var(--w-paper);
}
.masthead__mark {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  letter-spacing: -0.01em; color: var(--sc-ink); text-decoration: none;
  display: flex; align-items: center; gap: var(--sc-3);
}
.masthead__mark .compass { width: 30px; height: 30px; }
.masthead nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sc-1); margin: 0; padding: 0; }
.masthead nav a {
  display: block; padding: var(--sc-3) var(--sc-3);
  min-height: 44px; display: grid; place-items: center;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
}
.masthead nav a:hover, .masthead nav a:focus-visible { color: var(--sc-ink); }
.masthead nav a[aria-current="page"] { color: var(--sc-ink); box-shadow: inset 0 -2px 0 var(--sc-accent); }
.masthead__call {
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 500;
  color: var(--sc-ink); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--sc-2);
  padding: 0 var(--sc-4);
  border: 1px solid var(--sc-ink);
}
.masthead__call:hover, .masthead__call:focus-visible { background: var(--sc-ink); color: var(--w-paper); }

.page-head { padding: var(--sc-9) var(--sc-gutter) var(--sc-7); }
.page-head__wrap { max-width: var(--sc-maxw); margin-inline: auto; }
.page-head h1 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-4xl); line-height: 1.0; letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-5); text-wrap: balance;
}
.page-head p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 48ch; color: var(--sc-ink-soft); margin: 0; }

.crumb {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-5);
}
.crumb a { color: inherit; }

.spread { padding: 0 var(--sc-gutter) var(--sc-9); }
.spread__wrap {
  max-width: var(--sc-maxw); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) var(--w-col);
  align-items: start;
}
.spread h2 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.1; letter-spacing: var(--sc-track-tight);
  margin: var(--sc-8) 0 var(--sc-4);
}
.spread h2:first-child { margin-top: 0; }
.spread p { font-size: var(--sc-t-base); line-height: var(--sc-leading-body); max-width: 62ch; text-wrap: pretty; }

/* gallery */
.grid {
  max-width: var(--sc-maxw); margin: 0 auto; padding: 0 var(--sc-gutter) var(--sc-9);
  columns: 3; column-gap: var(--sc-4);
}
.grid figure { break-inside: avoid; margin: 0 0 var(--sc-4); }
.grid img { display: block; width: 100%; height: auto; background: var(--sc-surface); }
.grid figcaption {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); margin-top: var(--sc-2);
}

.ch__body a, .spread p a, .crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--sc-accent);
  padding-bottom: 1px;
}
.ch__body a:hover, .ch__body a:focus-visible,
.spread p a:hover, .spread p a:focus-visible { border-bottom-width: 2px; }

/* The chapter-to-subpage links are navigation, not prose: they need a real
   touch target rather than a 23px line of text. */
.more {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  min-height: 44px; padding: 0 var(--sc-4) 0 0;
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 500;
  color: inherit; text-decoration: none;
  border-bottom: 0 !important;
}
.more::after { content: "\203A"; font-size: 1.15em; line-height: 1; opacity: .6; }
.more span { border-bottom: 1px solid var(--sc-accent); padding-bottom: 2px; }
.more:hover span, .more:focus-visible span { border-bottom-width: 2px; }
.ch--harbour .more, .ch--night .more { color: #EDE7DC; }

/* the one call to action, same label everywhere */
.callout {
  max-width: var(--sc-maxw); margin: 0 auto var(--sc-9);
  padding: var(--sc-7) var(--sc-gutter);
  background: var(--w-night); color: #E9E6E0;
}
.callout__wrap { max-width: var(--sc-maxw); margin-inline: auto; }
.callout p {
  font-family: var(--sc-font-display);
  font-size: clamp(1.35rem, 2.8vw, 2.2rem); line-height: 1.25;
  margin: 0; max-width: 26ch; text-wrap: balance;
}
.callout a { color: var(--sc-accent); text-decoration: none; border-bottom: 2px solid currentColor; }
.callout a:hover, .callout a:focus-visible { color: #F6C888; }

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

.skip {
  position: absolute; left: var(--sc-4); top: -100px; z-index: 100;
  background: var(--sc-ink); color: var(--w-paper); padding: var(--sc-3) var(--sc-4);
  text-decoration: none;
}
.skip:focus { top: var(--sc-4); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}

.num {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; display: block;
}
.stat { display: grid; gap: var(--sc-2); }
.stat p {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0; max-width: 22ch;
}
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sc-6); margin: var(--sc-7) 0 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  :root { --w-col: min(28rem, 46vw); }
}

@media (max-width: 860px) {
  :root { --w-folio-w: 0rem; }

  /* Everything tappable clears 44px on a phone. */
  .masthead__mark { min-height: 44px; }
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .colophon__say a, .callout a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .colophon address a { min-height: 44px; }

  /* The folio becomes a slim bottom rail. A fixed right gutter on a phone is
     a column of dead space. */
  .folio {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    grid-auto-flow: column; align-items: center; justify-content: center;
    gap: var(--sc-4);
    padding: var(--sc-2) var(--sc-4);
    padding-bottom: max(var(--sc-2), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--w-paper) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--w-rule);
  }
  .folio.is-dark { background: color-mix(in srgb, var(--w-night) 92%, transparent); border-top-color: #FFFFFF1F; }
  .compass { width: 34px; height: 34px; }
  .folio__title { min-height: 0; font-size: 10px; max-width: 12ch; }
  .folio__nav { display: none; }

  .ch, .title-page, .dark-stage { padding-right: var(--sc-gutter); }
  .ch { padding-block: clamp(2.5rem, 6vw, 3.75rem); }
  .ch:last-of-type { padding-bottom: calc(clamp(3rem, 7vw, 4.5rem) + 3.5rem); }
  .lamp img { max-height: 27vh; }
  .setlist li { padding: .55rem 0; }
  .ch__body { margin-bottom: var(--sc-4); }

  .ch__wrap, .ch__wrap--flip, .spread__wrap { grid-template-columns: minmax(0, 1fr); }
  .ch__wrap--flip .ch__text  { order: 1; }
  .ch__wrap--flip .ch__media { order: 2; }
  .ch__media { max-width: 32rem; }

  .setlist { columns: 1; }
  /* Six quotes stacked one-up pushed the phone page to 14.36vh, over the 8-14
     budget. Tighter type and spacing here, not fewer quotes: hiding half of
     them would take real content off the small screen. */
  .quotes  { columns: 1; }
  .quotes blockquote { margin-bottom: var(--sc-4); padding-left: var(--sc-3); }
  .quotes p { font-size: var(--sc-t-base); line-height: 1.38; margin-bottom: var(--sc-2); }
  .score { margin-bottom: var(--sc-4); gap: var(--sc-3); }
  .score__n { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .lamps { grid-template-columns: repeat(2, 1fr); }
  .grid { columns: 2; }
  .colophon__wrap { grid-template-columns: minmax(0, 1fr); }
  .colophon { padding-bottom: calc(var(--sc-8) + 3.5rem); }

  /* Step the hero down a rung. --sc-t-4xl floors at a desktop value and wraps
     a phone headline to six lines. */
  .wordmark  { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .page-head h1 { font-size: var(--sc-t-2xl); }
  .page-head { padding-top: var(--sc-7); }
}

@media (max-width: 520px) {
  /* two up, not one. Four stacked tiles cost a viewport and a half and the
     scene-by-scene reveal reads perfectly well at this size. */
  .lamps { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .lamp img { max-height: 26vh; }
  .lamp figcaption { font-size: 10px; padding: var(--sc-3) var(--sc-2) var(--sc-2); }
  .grid  { columns: 2; column-gap: var(--sc-3); }
  .stats { grid-template-columns: 1fr; gap: var(--sc-4); }
}

@media (prefers-reduced-motion: reduce) {
  .compass__needle { transition: none; }
  .lamp img, .lamp figcaption, .lamp::after, .dark-stage::before { transition: none; }
}