/* ============================================================================
   Bolt & Batten Repair Co. — Swiss / poster direction.

   The organising idea: one strict twelve-column grid, and everything on the
   page hangs off it. Type is flush left with a hard edge; nothing is centred
   anywhere, including the things a template would centre by reflex. Hierarchy
   comes from scale and from rules — hairlines and 3px bars — not from boxes,
   shadows or rounded corners. There is exactly one radius value in this file
   and it is 0.

   One typeface, Archivo, across the whole page. The variable weight axis does
   all the work a second family would have done: 800 for the poster headline,
   500 for text, 600 for the numerals. Restricting to one family is the point of
   the direction — Swiss practice treats a second typeface as an admission that
   the first one was chosen badly.

   Colour is three flat fields — red, blue, ochre — used as areas rather than as
   accents, plus ink on paper. No gradient appears anywhere in this file.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  color-scheme: light dark;

  --paper: #f2efe7;
  --paper-2: #e4e0d3;
  --paper-3: #d6d1c1;
  --ink: #15120e;
  --ink-2: #4d473c;

  /* Darkened from #d1301c, which measured 4.31:1 on paper — under the 4.5
     floor for the 13-14px numerals in the index and the zone keys. It reads
     the same as a poster field at this value and now clears the bar as text. */
  --red: #c2281a;
  --blue: #16408c;
  --ochre: #e0a331;

  --on-red: #fbf7ef;
  --on-blue: #f4f6fb;

  /* The score panel is inverted — ink background, paper text — so anything set
     on it has to contrast against --ink, not against --paper. That flips with
     the scheme, which is why the stars get their own token instead of reusing
     --ochre: the field colour and the on-ink colour are not the same colour. */
  --star: #e0a331;

  --face: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --page: 82rem;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --col-gap: clamp(1rem, 2.2vw, 2rem);
  --rule: 1px solid var(--ink);
  --rule-bold: 3px solid var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131210;
    --paper-2: #1c1a16;
    --paper-3: #262319;
    --ink: #f1eee6;
    --ink-2: #aaa396;

    /* The three fields are re-mixed rather than reused: the light-mode red and
       blue are chosen to hold their own against paper, and on ink they go muddy
       and drop under 4.5:1 for anything set on top of them. */
    --red: #ef6146;
    --blue: #7ba1ec;
    --ochre: #eab857;

    --on-red: #1a0d09;
    --on-blue: #0b142b;
    /* --ink is now the light value, so the score panel is a light panel and the
       stars have to go dark to stay legible on it. */
    --star: #85560a;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-end: 6.5rem;
  scroll-padding-block-start: 4.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The grid. Twelve columns everywhere above 64rem, four below it — the whole
   page places itself against this and nothing invents its own container. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(1.6rem, 3vw, 2.6rem);
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 { font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.02em; }

p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.16em; }

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

svg { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus { top: 0.5rem; }

.eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-block-end: var(--rule);
}
.masthead__grid {
  row-gap: 0;
  align-items: center;
  padding-block: 0.55rem;
  grid-template-columns: 1fr auto;
}
@media (min-width: 64rem) {
  .masthead__grid { grid-template-columns: auto 1fr auto; }
}

.wordmark {
  grid-column: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  padding-block: 0.3rem;
}
.wordmark__mark { width: 30px; height: 30px; color: var(--ink); flex: none; }
.wordmark__mark svg { width: 100%; height: 100%; }
.wordmark__text {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.wordmark__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.masthead__nav { display: none; grid-column: auto; justify-content: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
.masthead__nav a {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: 0.8rem;
  border-block-end: 3px solid transparent;
}
.masthead__nav a:hover { border-block-end-color: var(--red); }

.masthead__cta { grid-column: auto; justify-self: end; }
@media (min-width: 64rem) { .masthead__nav { display: flex; } }

/* ── Buttons. Square, hard, no radius. ───────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.3rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--lg { min-height: 52px; padding: 0.85rem 1.7rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* ── Section rhythm ──────────────────────────────────────────────────────── */

section { padding-block: clamp(3rem, 7vw, 6rem); }
section + section { border-block-start: var(--rule); }

.sec-head__title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-block: 0.7rem 1.1rem;
}
.sec-head__note { color: var(--ink-2); font-size: 0.95rem; max-width: 34ch; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block-start: clamp(2rem, 5vw, 3.5rem); }

.hero__title {
  font-size: clamp(2.9rem, 9.2vw, 6.4rem);
  letter-spacing: -0.045em;
  line-height: 0.88;
}

.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 1.5rem; }

.plate { margin: 0; }
.plate__svg { width: 100%; height: auto; }

.hero__facts { margin: 0; padding: 0; display: grid; gap: 0; }
.hero__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.8rem;
  border-block-start: var(--rule);
  font-size: 0.9rem;
}
.hero__facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block-start: 0.25em;
}
.hero__facts dd { margin: 0; font-weight: 500; }

@media (min-width: 64rem) {
  .hero__title { grid-column: 1 / 8; }
  .plate { grid-column: 8 / 13; grid-row: 2 / 4; align-self: start; }
  .hero__side { grid-column: 1 / 7; }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .hero__facts > div { grid-template-columns: 1fr; gap: 0.3rem; border-block-start: var(--rule-bold); }
}

/* ── Pillars — the oversized numerals this direction is built on ─────────── */

.pillar { display: flex; flex-direction: column; border-block-start: var(--rule-bold); padding-block-start: 1rem; }
.pillar__n {
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--red);
  margin: 0 0 0.7rem;
  font-variant-numeric: tabular-nums;
}
.pillar h2 { font-size: 1.35rem; margin-block-end: 0.7rem; }
.pillar p { color: var(--ink-2); font-size: 0.94rem; }

@media (min-width: 64rem) {
  .pillar { grid-column: span 4; }
}

/* ── Index of work — a catalogue, not cards ──────────────────────────────── */

.idx { list-style: none; margin: 0; padding: 0; }
.idx__row {
  display: grid;
  grid-template-columns: minmax(0, 2.6rem) minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: 0.35rem;
  padding-block: 1.1rem;
  border-block-start: var(--rule);
  align-items: start;
}
.idx__row:last-child { border-block-end: var(--rule); }
.idx__n {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.2em;
}
.idx__name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.idx__detail { grid-column: 2; color: var(--ink-2); font-size: 0.92rem; }
.idx__rate {
  grid-column: 2;
  font-weight: 700;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .sec-head { grid-column: 1 / 5; }
  .idx { grid-column: 5 / 13; }
  .idx__row {
    grid-template-columns: minmax(0, 2.4rem) minmax(0, 11rem) minmax(0, 1fr) minmax(0, 7rem);
    row-gap: 0;
    align-items: baseline;
  }
  .idx__detail { grid-column: 3; }
  .idx__rate { grid-column: 4; text-align: end; }
}

/* ── Coverage ────────────────────────────────────────────────────────────── */

.map { margin: 0; }
.map__svg { width: 100%; height: auto; border: var(--rule); }
.map__cap { margin-block-start: 0.6rem; font-size: 0.78rem; color: var(--ink-2); }

.map__zones path {
  fill: var(--paper-3);
  stroke: var(--ink);
  stroke-width: 1;
  transition: fill 130ms ease;
}
.map__zones path:nth-child(even) { fill: var(--paper-2); }
/* Selection is never colour alone — the selected zone also takes a heavy rule. */
.map__zones path[data-on] { fill: var(--red); stroke-width: 5; }

.map__ref path { stroke: var(--ink); stroke-width: 1.5; opacity: 0.32; stroke-dasharray: 7 5; }

.map__labels text {
  font-family: var(--face);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: var(--ink);
}
.map__labels text[data-on] { fill: var(--on-red); }

.zonelist { list-style: none; margin: 0; padding: 0; }
.zone { border-block-start: var(--rule); }
.zone:last-child { border-block-end: var(--rule); }

.zone__btn {
  display: grid;
  grid-template-columns: minmax(0, 3.2rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.zone__key {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.zone__name { font-weight: 700; letter-spacing: -0.015em; }
.zone__when {
  grid-column: 2 / -1;
  font-size: 0.84rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.zone__note {
  margin: 0;
  padding: 0 0 1rem 4.1rem;
  font-size: 0.88rem;
  color: var(--ink-2);
  max-width: 44ch;
}

/* Selected row: a red bar in the gutter plus a weight change. Both survive
   greyscale, so the state is never carried by hue on its own. */
.zone[data-on] { box-shadow: inset 4px 0 0 var(--red); }
.zone[data-on] .zone__btn { padding-inline-start: 0.8rem; }
.zone[data-on] .zone__key { color: var(--red); }
.zone[data-on] .zone__name { text-decoration: underline; text-decoration-thickness: 2px; }
.zone[data-on] .zone__note { padding-inline-start: 4.9rem; }
.zone__btn:hover .zone__name { text-decoration: underline; }

.zones__out {
  margin-block-start: 1.1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
}

@media (min-width: 64rem) {
  .coverage__grid .sec-head { grid-column: 1 / 5; }
  .map { grid-column: 5 / 9; }
  .zones { grid-column: 9 / 13; }
}

/* ── Rates ───────────────────────────────────────────────────────────────── */

.rate {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.rate th, .rate td {
  text-align: start;
  padding-block: 0.85rem;
  padding-inline-end: 1rem;
  border-block-start: var(--rule);
  vertical-align: baseline;
}
.rate thead th {
  border-block-start: var(--rule-bold);
  border-block-end: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rate tbody th { font-weight: 700; }
.rate td { color: var(--ink-2); }
.rate tbody tr:last-child td, .rate tbody tr:last-child th { border-block-end: var(--rule); }
.rate__n {
  text-align: end;
  padding-inline-end: 0;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rate__note { border-block-start: var(--rule-bold); padding-block-start: 1rem; }
.rate__note h3 { margin-block-end: 0.8rem; }
.rate__note p { font-size: 0.9rem; color: var(--ink-2); }
.rate__note strong { color: var(--ink); }

@media (min-width: 64rem) {
  .rates__grid .sec-head { grid-column: 1 / 5; }
  .rate { grid-column: 5 / 10; }
  .rate__note { grid-column: 10 / 13; }
}

/* ── Proof ───────────────────────────────────────────────────────────────── */

.score {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.score__n {
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin: 0 0 0.4rem;
  font-variant-numeric: tabular-nums;
}
.score__stars { color: var(--star); letter-spacing: 0.1em; margin-block-end: 0.4rem; }
.score__meta { font-size: 0.8rem; opacity: 0.85; }

.say { margin: 0; border-block-start: var(--rule-bold); padding-block-start: 1rem; }
.say p { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; }
.say footer { font-size: 0.8rem; color: var(--ink-2); font-weight: 600; }
.say cite { font-style: normal; color: var(--ink); }

@media (min-width: 64rem) {
  .score { grid-column: span 3; }
  .say { grid-column: span 3; }
}

/* ── Book ────────────────────────────────────────────────────────────────── */

.book__facts { margin: 2rem 0 0; padding: 0; }
.book__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 0.8rem;
  padding-block: 0.75rem;
  border-block-start: var(--rule);
  font-size: 0.9rem;
}
.book__facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block-start: 0.25em;
}
.book__facts dd { margin: 0; font-weight: 600; }

.form { border: var(--rule-bold); padding: clamp(1.2rem, 2.6vw, 2rem); }
.field { margin-block-end: 1rem; }
.field label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.75rem;
  background: var(--paper);
  border: var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field select { appearance: none; background-image: none; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--red);
}
.form__note { margin-block-start: 0.9rem; font-size: 0.8rem; color: var(--ink-2); }

@media (min-width: 64rem) {
  .book__grid .sec-head { grid-column: 1 / 6; }
  .form { grid-column: 7 / 13; }
}

/* ── Colophon ────────────────────────────────────────────────────────────── */

.colophon {
  border-block-start: var(--rule-bold);
  padding-block: 2.5rem;
  padding-block-end: calc(2.5rem + 5rem + env(safe-area-inset-bottom));
  font-size: 0.86rem;
  color: var(--ink-2);
}
.colophon__grid { row-gap: 1rem; }
.colophon__brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; color: var(--ink); }
/* A phone number sitting alone on its own line is not "inline in a sentence",
   so it does not get WCAG's inline-target exemption — pad it to clear 24px. */
.colophon a, .book__facts dd a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink);
  font-weight: 600;
}
.colophon__fine { font-size: 0.76rem; }

@media (min-width: 64rem) {
  .colophon__grid > p { grid-column: span 3; }
  .colophon__fine { grid-column: 1 / -1; }
  .colophon { padding-block-end: 2.5rem; }
}

/* ── Sticky call bar (small screens only) ────────────────────────────────── */

.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-block-start: var(--rule-bold);
}
.callbar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
}
.callbar__btn--solid { background: var(--ink); color: var(--paper); }

@media (min-width: 64rem) { .callbar { display: none; } }

/* ── Motion ──────────────────────────────────────────────────────────────── */

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

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  .callbar, .masthead__cta, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .zone__note[hidden] { display: block !important; }
}