/* ============================================================================
   SIN TRIBU - site.css
   A newspaper / technical-document system.
   Palette: black, blue, white. No photographs - line diagrams only.
   ========================================================================= */

/* --- 1. TOKENS ----------------------------------------------------------- */

:root {
  --fg:        #0b0b0c;
  --fg-soft:   #43444a;
  --fg-faint:  #8b8c93;
  --bg:        #f4f3ef;   /* newsprint */
  --masthead:  #e8e6df;   /* the masthead sits on a slightly deeper stock */
  --panel:     #ffffff;
  --accent:    #1b35c7;   /* ink blue - pen, leaders, annotations */
  --accent-2:  #eaecfb;   /* blue wash */
  --red:       #cf2026;   /* the logo red - corrections, strikes, stamps */
  --red-on-fg: #ff6a6d;   /* the same, lifted to read on a solid --fg block */
  --rule:      rgba(11, 11, 12, 0.24);
  --rule-hard: rgba(11, 11, 12, 0.85);
  --on-fg:     #f4f3ef;   /* text sitting on a solid --fg block */
  --accent-on-fg: #8a9cff;/* blue that still reads on a solid --fg block */
  --stain:     rgba(122, 84, 52, 0.16); /* a coffee ring on the paper */
  --eco:       #2e6b45;   /* dark green - the closed-loop mark only */
  --plate:     #fefdfb;
  --lift:      #ffffff;   /* the glow behind the van - as light as paper goes */   /* near-white, so the van linework pops off it */
  --ink:       #1b1b18;   /* solid band - the ethos section sits on this */

  --ff-display: "Anton", "Arial Narrow", sans-serif;
  --ff-body:    "Archivo", system-ui, -apple-system, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, "Courier New", monospace;
  --ff-hand:    "Rock Salt", cursive;

  --gutter: clamp(16px, 4vw, 44px);
  --maxw:   1280px;

  --noise-blend: multiply;
  --noise-alpha: 0.4;
  --crease-blend: multiply;
  --crease-filter: none;
  --crease-alpha: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg:        #f1f0ea;
    --fg-soft:   #b2b2ad;
    --fg-faint:  #74757a;
    --bg:        #0b0b0c;
    --masthead:  #17171a;
    --panel:     #131315;
    --accent:    #8a9cff;
    --accent-2:  #191d3d;
    --red:       #ff6a6d;
    --red-on-fg: #cf2026;
    --rule:      rgba(241, 240, 234, 0.26);
    --rule-hard: rgba(241, 240, 234, 0.8);
    --on-fg:     #0b0b0c;
    --accent-on-fg: #1b35c7;
    --stain:     rgba(214, 180, 146, 0.12);
    --eco:       #79c992;
    --plate:     #1c1c21;
  --lift:      #2d2d34;
    --ink:       #f1f0ea;
    --noise-blend: screen;
    --noise-alpha: 0.22;
    --crease-blend: screen;
    --crease-filter: invert(1);
    --crease-alpha: 0.45;
  }
}

:root[data-theme="dark"] {
  --fg:        #f1f0ea;
  --fg-soft:   #b2b2ad;
  --fg-faint:  #74757a;
  --bg:        #0b0b0c;
  --masthead:  #17171a;
  --panel:     #131315;
  --accent:    #8a9cff;
  --accent-2:  #191d3d;
  --red:       #ff6a6d;
  --red-on-fg: #cf2026;
  --rule:      rgba(241, 240, 234, 0.26);
  --rule-hard: rgba(241, 240, 234, 0.8);
  --on-fg:     #0b0b0c;
  --accent-on-fg: #1b35c7;
  --stain:     rgba(214, 180, 146, 0.12);
  --eco:       #79c992;
  --plate:     #1c1c21;
  --lift:      #2d2d34;
  --ink:       #f1f0ea;
  --noise-blend: screen;
  --noise-alpha: 0.22;
  --crease-blend: screen;
  --crease-filter: invert(1);
  --crease-alpha: 0.45;
}

/* --- 2. RESET ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.58;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Folded, lightly crumpled stock.
   paper-crease.png is generated, not photographed: fractal noise lit from one
   side by an SVG feDiffuseLighting pass, baked once to a seamless 400px tile.
   Baked rather than run live because a 1200px lighting filter is expensive to
   evaluate on every paint; as a bitmap it costs nothing. The lighting pass comes out with a mean of ~233
   (i.e. it would darken the whole page by 8.5%), so feComponentTransfer
   normalises that mean back to white before it is used. Flat paper is then
   neutral under multiply and only the creases cast a shadow - the cream stays
   cream. Two soft vertical folds sit on top, at the thirds, matching the
   fold-out posters in the client's moodboard. They run vertically so they stay
   put as the page scrolls, which is how a fold in a long sheet behaves. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  mix-blend-mode: var(--crease-blend);
  filter: var(--crease-filter);
  opacity: var(--crease-alpha);
  background-image:
    linear-gradient(90deg,
      transparent 0 32.8%,
      rgba(0, 0, 0, 0.042) 33.2%,
      rgba(0, 0, 0, 0.015) 33.5%,
      transparent 34%,
      transparent 65.9%,
      rgba(0, 0, 0, 0.042) 66.4%,
      rgba(0, 0, 0, 0.015) 66.7%,
      transparent 67.2%),
    url("../../images/paper-crease.png");
  background-size: 100% 100%, 1200px 1200px;
  background-repeat: no-repeat, repeat;
}

/* Paper grain. Pure CSS/SVG - no photographic assets. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--noise-alpha);
  mix-blend-mode: var(--noise-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* --- 3. TYPE ------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Anton sets a very tall cap height with almost no built-in leading, so a
   multi-line heading needs more than the 0.86 that looks right on one line.
   Leading is set per size: the bigger the type, the tighter it can safely go. */
.display {
  font-family: var(--ff-display);
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.d-xl { font-size: clamp(2.9rem, 11.2vw, 9rem);   line-height: 0.9; }
.d-lg { font-size: clamp(2.2rem, 6.6vw, 5rem);    line-height: 0.93; }
.d-md { font-size: clamp(1.7rem, 4.2vw, 3.1rem);  line-height: 0.96; }
.d-sm { font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.08; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.688rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  flex: none;
}

.mono {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mono-xs { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; }

.lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.5; max-width: 62ch; }
.body-copy { max-width: 66ch; color: var(--fg-soft); }
.body-copy p { margin: 0 0 1rem; }
.body-copy p:last-child { margin-bottom: 0; }
.body-copy strong { color: var(--fg); font-weight: 600; }

.sp { color: var(--accent); }
.nowrap { white-space: nowrap; }

/* Hand-circled emphasis */
.circled { position: relative; display: inline-block; padding: 0 0.1em; }
.circled::after {
  content: "";
  position: absolute;
  inset: -0.07em -0.3em -0.02em;
  border: 3px solid var(--accent);
  border-radius: 50%;
  transform: rotate(-1.6deg);
  pointer-events: none;
}
/* Multi-line headings need room for the circle not to strike the line above. */
.display--loose { line-height: 1.1; }

/* Struck through in red, the way TRIBU is struck in the logo and moodboard.
   Red is the correction mark throughout: strikes, stamps and required fields.
   Blue stays the pen - annotations, leaders, circled emphasis. */
.struck { position: relative; white-space: nowrap; }
.struck::after {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em; top: 50%;
  height: 0.1em;
  min-height: 4px;
  background: var(--red);
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.manifesto .struck::after { background: var(--red-on-fg); }

/* Marker annotation */
.annot {
  font-family: var(--ff-hand);
  font-size: clamp(0.78rem, 1.25vw, 1.08rem);
  line-height: 1.8;
  color: var(--accent);
  transform: rotate(-2.6deg);
}
.annot--r { transform: rotate(2.2deg); }
.annot--red { color: var(--red); }
.annot u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* A red rule under a phrase, as the moodboard underlines TRANSGRESSION. */
.u-red {
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

/* --- 4. LAYOUT ----------------------------------------------------------- */

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

.rule    { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-hd { border: 0; border-top: 3px solid var(--rule-hard); margin: 0; }

section { position: relative; }
[id] { scroll-margin-top: calc(var(--masthead-h, 124px) + 16px); }
.band { padding-block: clamp(3rem, 7vw, 5.6rem); }
.band--tight { padding-block: clamp(2.2rem, 4.5vw, 3.2rem); }
.band--line { border-top: 1px solid var(--rule); }

/* A solid band. Rather than restating every colour for its contents, it swaps
   the tokens its descendants already read — so the stamps, the ringed note,
   the column rules and the blue numerals all flip on their own. The background
   uses --ink, which is deliberately NOT --fg: --fg is redefined right below it,
   and a property on the same element would pick up the new value. */
.band--ink {
  background: var(--ink);
  color: var(--on-fg);

  --fg:        var(--on-fg);
  --fg-soft:   color-mix(in srgb, var(--on-fg) 74%, transparent);
  --fg-faint:  color-mix(in srgb, var(--on-fg) 50%, transparent);
  --rule:      color-mix(in srgb, var(--on-fg) 24%, transparent);
  --rule-hard: color-mix(in srgb, var(--on-fg) 70%, transparent);
  --red:       var(--red-on-fg);
  --accent:    var(--accent-on-fg);
}

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.g-side-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

@media (max-width: 980px) {
  .g-3, .g-4, .g-side, .g-side-r { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4, .g-side, .g-side-r { grid-template-columns: minmax(0, 1fr); }
}

/* --- 5. MASTHEAD --------------------------------------------------------- */

/* Sticky, so the nav is always reachable on a long page. The paper overlays
   are fixed at z-index 9998/9999 and deliberately still sit on top of it. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 3px solid var(--rule-hard);
  background: var(--masthead);
}

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.masthead__top span { white-space: nowrap; }
/* At the very bottom of the range the strapline needs to be able to break. */
@media (max-width: 430px) { .masthead__top span { white-space: normal; } }
.masthead__top b { color: var(--fg); font-weight: 700; margin-right: 0.35em; }
/* Two items. Below ~760px they will not both fit, so the territory drops. */
.masthead__top .opt { display: none; }
@media (min-width: 760px) { .masthead__top .opt { display: inline; } }

.masthead__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(0.8rem, 2vw, 1.1rem);
}

.brandmark { display: flex; align-items: center; gap: 0.95rem; text-decoration: none; flex: none; }

/* The wordmark has had its white background lifted off, so it sits straight on
   the stock. Two cuts: dark ink for paper, light ink for the night edition. */
.brandmark__logo { width: clamp(132px, 19vw, 202px); height: auto; }
.brandmark__logo--night { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandmark__logo--day   { display: none; }
  :root:not([data-theme="light"]) .brandmark__logo--night { display: block; }
}
:root[data-theme="dark"] .brandmark__logo--day   { display: none; }
:root[data-theme="dark"] .brandmark__logo--night { display: block; }

.nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.5rem); }
.nav a {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--fg); }

/* Phones collapse the nav behind a toggle, which buries the one link that
   matters. This keeps booking a single tap away. */
.mast-cta {
  display: none;
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1rem;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--on-fg);
}
.mast-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 860px) { .mast-cta { display: inline-flex; } }

.nav__toggle {
  display: none;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--on-fg);
  border: 0;
  padding: 0.8rem 1rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  /* Phones collapse the nav behind a toggle, which buries the one link that
   matters. This keeps booking a single tap away. */
.mast-cta {
  display: none;
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1rem;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--on-fg);
}
.mast-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 860px) { .mast-cta { display: inline-flex; } }

.nav__toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--masthead);
    border-bottom: 3px solid var(--rule-hard);
    padding: 0 var(--gutter) 1rem;
  }
  .nav:not([data-open="true"]) { display: none; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 0.82rem; }
}

/* Live status */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.status[data-live="true"] .status__dot { background: var(--accent); animation: blip 2.4s ease-in-out infinite; }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .status__dot { animation: none !important; } }

/* --- 6. HERO ------------------------------------------------------------- */

.hero { padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3rem); }
/* A closed loop, drawn in the same technical pen as the diagram leaders. */
.ecomark {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 0.18em;
  vertical-align: -0.3em;
}
.ecomark__arc  { fill: none; stroke: var(--eco); stroke-width: 2.2; stroke-linecap: round; }
.ecomark__leaf { fill: var(--eco); stroke: none; }
.ecomark__vein { fill: none; stroke: var(--masthead); stroke-width: 0.9; stroke-linecap: round; }
/* Headline left, van centre, area list right - the fold-out arrangement. */
.hero__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "title van      van"
    "marks supplier supplier";
  column-gap: clamp(1.4rem, 3vw, 2.8rem);
  row-gap: clamp(1.2rem, 2.4vw, 1.8rem);
  align-items: start;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
}
.hero__title-col { grid-area: title; }
/* No plate behind it any more. The drawing's own white is dropped by the blend
   mode, so a panel underneath only boxed it in — on the page paper it reads as
   something drawn onto the sheet rather than pasted onto it. The negative
   inline margin lets it run a little wider than its column so the van fills
   the space the padding used to take. */
.hero__van {
  grid-area: van;
  margin: 0 calc(clamp(0.4rem, 1.6vw, 1.4rem) * -1);
  align-self: start;
  position: relative;
}

/* A lift behind the drawing rather than a panel around it: an ellipse of the
   slightly lighter plate tone that has no edge of its own, falling away to
   nothing well before the figure's bounds. --plate is lighter than --bg in
   both themes, so this reads as a glow on paper and as a lift out of the dark
   without being stated twice.

   The far stop is the same colour at zero alpha, not `transparent` — that
   keyword is transparent *black*, which drags a grey cast through the middle
   of the fade on a warm ground. */
.hero__van::before {
  content: "";
  position: absolute;
  /* No horizontal overhang: on a phone the figure already eats into the
     gutter, and 8% past its edges put 14px of scroll on the page. The ellipse
     fades to nothing inside the box anyway, so it loses nothing. */
  inset: -12% 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 84% 78% at 52% 46%,
              var(--lift) 0%,
              var(--lift) 44%,
              rgb(from var(--lift) r g b / 0.62) 62%,
              rgb(from var(--lift) r g b / 0) 86%);
}
.hero__van > * { position: relative; z-index: 1; }
.supplier        { grid-area: supplier; }
.hero__marks-col {
  grid-area: marks;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.3rem;
}

@media (max-width: 1080px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    grid-template-areas:
      "title    title"
      "van      van"
      "marks    marks"
      "supplier supplier";
  }
}
@media (max-width: 640px) {
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "van" "marks" "supplier";
  }
}

/* --- headline column ----------------------------------------------------- */

/* The lower end of the ramp is ~13% down on what it was, which is what a phone
   gets; the desktop cap is untouched. Same weight and width, still wraps to fit. */
.hero__title {
  font-size: clamp(2.5rem, 6.6vw, 6.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.lockup {
  margin: 1.1rem 0 0;
  font-family: var(--ff-mono);
  font-size: clamp(0.95rem, 1.7vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.lockup i {
  display: block;
  font-style: normal;
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--fg-soft);
}

/* Space Mono is a light-stemmed face at this size, so --fg-soft read as washed
   out even though it is a dark grey. Full ink, and the leading comes in from
   1.85 — generous for two short lines that belong together as one address. */
.hero__note {
  margin: 0.7rem 0 0;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--fg);
}

/* three marks, as on the fold-out */
.marks {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.marks li {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
  border-left: 1px solid var(--rule);
}
.marks li:first-child { border-left: 0; padding-left: 0; }
.marks svg { width: 34px; height: 34px; margin: 0 auto 0.55rem; }
.marks span {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  line-height: 1.5;
}

/* Two equal buttons filling the column, so their edges line up with the marks
   row above instead of ending wherever the label happens to run out. */
.hero__marks-col .cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0;
}
.hero__marks-col .btn {
  justify-content: center;
  padding: 0.85rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
}
@media (max-width: 420px) {
  .hero__marks-col .cta-row { grid-template-columns: 1fr; }
}

.outside-norm {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* --- hand-written slogans and stamps -------------------------------------- */

/* The H1's full stops, in the pen blue. */
.hero__title .dot { color: var(--accent); }

/* A phrase ringed by hand, as in the client's notes. */
.ringnote {
  position: relative;
  display: inline-block;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0.9rem 1.8rem;
  font-family: var(--ff-hand);
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  line-height: 1.85;
  text-align: center;
  color: var(--fg);
  transform: rotate(-1.6deg);
}
.ringnote span { position: relative; z-index: 1; }
.ringnote svg {
  position: absolute;
  inset: -0.35rem -0.6rem;
  width: calc(100% + 1.2rem);
  height: calc(100% + 0.7rem);
  overflow: visible;
}
.ringnote path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }

/* Torn note, taped down. */
.tapednote {
  position: relative;
  margin: 0;
  padding: 1rem 1.3rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.9;
  transform: rotate(-1.4deg);
}
.tapednote b { color: var(--red); font-weight: 700; border-bottom: 2px solid var(--red); padding-bottom: 1px; }
.tapednote::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 66px; height: 19px;
  margin-left: -33px;
  background: var(--stain);
  border: 1px solid var(--rule);
  transform: rotate(-2.5deg);
}

/* The correction-mark line in the manifesto. */
.loudnote {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--ff-hand);
  font-size: clamp(0.82rem, 1.2vw, 1.02rem);
  line-height: 1.85;
  color: var(--on-fg);
  opacity: 1;
}
.loudnote em { font-style: normal; position: relative; white-space: nowrap; margin-right: 0.9em; }
.loudnote em::after {
  content: '';
  position: absolute;
  inset: -0.14em -0.32em -0.06em;
  border: 2.6px solid var(--red-on-fg);
  border-radius: 50%;
  transform: rotate(-2deg);
}
.loudnote b { color: var(--red-on-fg); font-weight: 600; }

/* --- overview: newspaper columns ----------------------------------------- */

.overview__lead {
  margin: 1.1rem 0 0;
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  color: var(--fg-soft);
}
.overview__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.3rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--rule);
}
.overview__cols > div { padding-inline: clamp(1rem, 2.2vw, 1.9rem); }
.overview__cols > div:first-child { padding-left: 0; }
.overview__cols > div:last-child  { padding-right: 0; }
.overview__cols > div + div { border-left: 1px solid var(--rule); }
/* Inked rubber stamps at the head of each column. Sat slightly off-square,
   the way a hand-pressed stamp lands. */
.cstamp {
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 0.95rem;
}
.cstamp svg { width: 100%; height: 100%; }
.cstamp__ring  { fill: none; stroke: var(--fg); stroke-width: 2.4; }
.cstamp__ring2 { fill: none; stroke: var(--fg); stroke-width: 0.9; opacity: 0.5; }
.cstamp__ico   { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cstamp__solid { fill: var(--fg); stroke: none; }
.cstamp__word {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  fill: var(--fg);
}

.overview__cols > div:nth-child(1) .cstamp { transform: rotate(-4deg); }
.overview__cols > div:nth-child(2) .cstamp { transform: rotate(3deg); }
.overview__cols > div:nth-child(3) .cstamp { transform: rotate(-2.5deg); }

.overview__cols h3 {
  margin-bottom: 0.7rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.overview__cols h3 b { color: var(--accent); }
.overview__cols p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--fg-soft); }

@media (max-width: 760px) {
  .overview__cols { grid-template-columns: minmax(0, 1fr); }
  .overview__cols > div { padding: 1.2rem 0 0; border-left: 0; }
  .overview__cols > div:first-child { padding-top: 0; }
  .overview__cols > div + div { border-top: 1px dotted var(--rule); }
}

/* the cup, at panel scale */
.cup-sm { width: 100%; max-width: 168px; height: auto; margin: 0.4rem auto 1.2rem; }

/* --- the van ------------------------------------------------------------- */

.hero__van svg.van { width: 100%; height: auto; overflow: visible; }

/* Sits at the head of the plate, in normal flow. The stamp that used to live
   here was positioned inside the drawing, which is why it vanished on a phone
   — the narrow viewBox cropped it away. This just stacks. */
.van-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 clamp(0.7rem, 1.6vw, 1.1rem);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-soft);
}
.van-cta b {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
}
.van-cta i { font-style: normal; color: var(--accent); transition: transform 0.15s ease; }
.van-cta:hover b { color: var(--accent); }
.van-cta:hover i { transform: translateX(3px); }
.hero__van figcaption {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--fg-soft);
}
.hero__van figcaption strong { color: var(--red); font-weight: 700; }

/* Below 900px the in-drawing labels are too small to read, so they step aside
   for a key. Drawing, caption and key then read as one object: the figure
   becomes a bordered plate and the key sits inside it, not loose underneath. */
.van-key { display: none; }

@media (max-width: 900px) {
  .hero__van {
    display: flex;
    flex-direction: column;
  }
  /* Padding on top rather than bottom, so the row clears 44px to tap while the
     rule below it stays the same distance from the words. */
  .van-cta              { order: 0; padding-top: 0.9rem; }
  .hero__van svg.van    { order: 1; }
  .hero__van figcaption { order: 2; }
  .van-key              { order: 3; }

  .van-key {
    display: grid;
    gap: 0.57rem;
    margin: 0.9rem 0 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
  }
  .van-key li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg);
  }
  .van-key b { color: var(--accent); font-weight: 700; flex: none; }
  .van-key i {
    display: block;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--fg-soft);
    margin-top: 0.2rem;
  }
}

/* --- who roasts it: a band, not a column ---------------------------------- */

.supplier {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1.5px solid var(--rule-hard);
  background: var(--panel);
  padding: 1rem 1.2rem 1.1rem;
}
.supplier__eyebrow {
  margin: 0 0 0.85rem;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.supplier__row {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}
.supplier__mark { width: 92px; height: 92px; flex: none; border: 1.5px solid var(--rule); }
.supplier__copy {
  flex: 1.25;
  min-width: 0;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg-soft);
}
.supplier__spec { flex: 1; min-width: 0; font-size: 0.65rem; }
.supplier__spec dd { font-weight: 700; }
.supplier__row .stamp { flex: none; font-size: 0.6rem; padding: 0.45rem 0.6rem; line-height: 1.35; }

/* Keep it short on a phone: mark beside the copy, spec beneath, stamp dropped. */
@media (max-width: 760px) {
  .supplier__row { flex-wrap: wrap; gap: 0.9rem; }
  .supplier__mark { width: 64px; height: 64px; }
  .supplier__copy { flex: 1 1 160px; font-size: 0.82rem; }
  .supplier__spec { flex: 1 1 100%; }
  .supplier__row .stamp { display: none; }
}

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

.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--on-fg);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translate(-2px, -2px); }
.btn--ghost { background: var(--panel); color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.btn__arrow { font-size: 1rem; line-height: 1; }

/* Ticker strip */
.ticker { background: var(--fg); color: var(--on-fg); overflow: hidden; padding-block: 0.6rem; }
.ticker__track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  animation: slide 44s linear infinite;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 2.4rem; }
.ticker__track span::after { content: "\25C6"; font-size: 0.55rem; opacity: 0.6; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --- 7. FIGURES / DIAGRAMS ---------------------------------------------- */

.fig { border: 1.5px solid var(--rule-hard); background: var(--panel); position: relative; }
.fig__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.fig__head strong { color: var(--fg); font-weight: 700; }
.fig__body { padding: clamp(0.8rem, 2.2vw, 1.5rem); }
.fig__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Shared SVG drawing conventions */
.dwg { width: 100%; height: auto; overflow: visible; }
.dwg .ln     { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.dwg .ln-t   { fill: none; stroke: var(--fg); stroke-width: 1; stroke-linecap: round; }
.dwg .ln-d   { fill: none; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.55; }
.dwg .lead   { fill: none; stroke: var(--accent); stroke-width: 1; }
.dwg .dot    { fill: var(--accent); }
.dwg .fillbg { fill: var(--panel); }
.dwg .fillpaper { fill: var(--plate-fill, var(--bg)); }
.dwg .fillfg { fill: var(--fg); }
.dwg .fillac { fill: var(--accent); }
.dwg .fillred { fill: var(--red); }
.dwg .strokered { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.dwg .wash   { fill: var(--accent-2); }
.dwg text    { font-family: var(--ff-mono); fill: var(--fg); }
.dwg .t-lbl  { font-size: 13px; letter-spacing: 0.1em; font-weight: 700; }
.dwg .t-sub  { font-size: 11px; letter-spacing: 0.05em; fill: var(--fg-soft); }
.dwg .t-num  { font-size: 11px; font-weight: 700; fill: var(--panel); letter-spacing: 0.04em; }
.dwg .t-num-blue { fill: var(--accent); font-weight: 700; }
.dwg .t-big  { font-family: var(--ff-display); font-size: 28px; letter-spacing: 0.01em; }
.dwg .t-hand { font-family: var(--ff-hand); font-size: 13px; fill: var(--accent); }
.dwg .t-hand--red { fill: var(--red); }

/* Wide schematics don't survive being squeezed into a phone. Below 900px the
   drawing steps aside and an HTML version of the same chain takes over. */
.fig-stack { display: none; }
@media (max-width: 900px) {
  .fig__wide { display: none; }
  .fig-stack { display: grid; gap: 0; }
  .fig-stack li { list-style: none; }
  .fig-stack__step {
    border: 1.5px solid var(--rule-hard);
    background: var(--panel);
    padding: 0.85rem 1rem;
  }
  .fig-stack__step b {
    display: block;
    font-family: var(--ff-display);
    text-transform: uppercase;
    font-size: 1.35rem;
    line-height: 1.05;
  }
  .fig-stack__step i {
    display: block;
    font-family: var(--ff-mono);
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-soft);
    margin-top: 0.3rem;
  }
  .fig-stack__step em {
    display: block;
    font-style: normal;
    font-size: 0.86rem;
    color: var(--fg-soft);
    margin-top: 0.35rem;
  }
  .fig-stack__no {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--fg);
    color: var(--on-fg);
    padding: 1px 5px;
    margin-bottom: 0.45rem;
  }
  .fig-stack__arrow {
    justify-self: center;
    color: var(--accent);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.4rem 0;
  }
  .fig-stack__note {
    font-family: var(--ff-hand);
    color: var(--accent);
    font-size: 0.76rem;
    line-height: 1.8;
    text-align: center;
    padding-top: 0.9rem;
  }
}

/* Callout labels collapse on small screens; an HTML key takes over. */
.fig-key { display: none; }
@media (max-width: 900px) {
  .dwg .callouts { display: none; }
  .fig-key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1.4rem;
    margin: 1.2rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--rule);
    list-style: none;
  }
  .fig-key li { font-size: 0.82rem; }
  .fig-key b {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    background: var(--fg);
    color: var(--on-fg);
    padding: 1px 5px;
    margin-right: 0.45rem;
    letter-spacing: 0.06em;
  }
  .fig-key span { color: var(--fg-soft); font-size: 0.78rem; display: block; margin-top: 2px; }
}

/* Fold-the-cup: four separate drawings so each stays legible as they stack. */
.fold-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 860px) { .fold-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .fold-steps { grid-template-columns: minmax(0, 1fr); } }

.fold-step { margin: 0; }
.fold-step svg { width: 100%; height: auto; max-height: 190px; }
.fold-step figcaption { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.fold-step b {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fold-step i {
  display: block;
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-top: 0.3rem;
}
.fold-step .no {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--fg);
  color: var(--on-fg);
  padding: 1px 5px;
  margin-right: 0.45rem;
}

/* --- 8. PANELS, CARDS, STAMPS ------------------------------------------- */

.panel {
  border: 1.5px solid var(--rule-hard);
  background: var(--panel);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  position: relative;
}
.panel--plain { border-width: 1px; border-color: var(--rule); }

/* registration crop marks */
.crop::before, .crop::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 1.5px solid var(--fg);
  pointer-events: none;
}
.crop::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.crop::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

/* Numbered spec column, as on the client's fold-outs */
.spec__no {
  display: inline-block;
  align-self: flex-start;   /* stops it stretching when the panel is a flex column */
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--fg);
  color: var(--on-fg);
  padding: 2px 6px;
  margin-bottom: 0.7rem;
}
.spec__t {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 1.1rem;
}
.spec__fig {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
}
.spec__cap {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0.3rem 0 0;
}
.spec__row { padding-block: 1rem; border-top: 1px solid var(--rule); }
.spec__row:first-of-type { border-top: 0; padding-top: 0; }

/* Data list, technical-drawing style */
.dl { margin: 0; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.05em; }
.dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--rule);
  text-transform: uppercase;
}
.dl dt { color: var(--fg-faint); margin: 0; }
.dl dd { margin: 0; text-align: right; font-weight: 700; }

/* Rubber stamp */
.stamp {
  display: inline-block;
  border: 2.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 0.55rem 0.9rem;
  transform: rotate(-4deg);
}
.stamp--fg  { border-color: var(--fg); color: var(--fg); transform: rotate(3deg); }
.stamp--red { border-color: var(--red); color: var(--red); transform: rotate(-2.5deg); }
.manifesto .stamp--red { border-color: var(--red-on-fg); color: var(--red-on-fg); }
.stamp--round {
  border-radius: 50%;
  width: 138px; height: 138px;
  flex: none;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 0.625rem;
  line-height: 1.7;
  letter-spacing: 0.12em;
  padding: 0;
  transform: rotate(-11deg);
}

/* Checklist of proofs */
.proofs { list-style: none; margin: 0; padding: 0; }
.proofs li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.proofs li:last-child { border-bottom: 1px solid var(--rule); }
.proofs svg { width: 22px; height: 22px; margin-top: 3px; }
.proofs b {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.proofs span { font-size: 0.86rem; color: var(--fg-soft); }

/* --- 9. SERVICE FILES ---------------------------------------------------- */

.file {
  border: 1.5px solid var(--rule-hard);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.file:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--accent); }
.file__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: var(--fg);
  color: var(--on-fg);
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.file__icon { padding: 1.3rem 1.2rem 0; }
.file__icon svg { height: 74px; width: auto; margin-inline: auto; }
.file__body { padding: 1rem 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.file__body h3 { font-family: var(--ff-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.04; margin-bottom: 0.55rem; }
.file__body p { margin: 0 0 1rem; font-size: 0.88rem; color: var(--fg-soft); }
.file__list { list-style: none; margin: auto 0 0; padding: 0.9rem 0 0; border-top: 1px dotted var(--rule); }
.file__list li {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0 0.3rem 1.1rem;
  position: relative;
  color: var(--fg-soft);
}
.file__list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* --- 10. MENU LIST ------------------------------------------------------- */

.menu { list-style: none; margin: 0; padding: 0; }
.menu li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.48rem 0;
  border-bottom: 1px dotted var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.menu li i { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.menu li b { font-weight: 700; color: var(--fg-soft); font-size: 0.66rem; }

/* --- 11. MANIFESTO ------------------------------------------------------- */

.manifesto { background: var(--fg); color: var(--on-fg); padding-block: clamp(3.4rem, 8vw, 6rem); }
.manifesto .display { color: var(--on-fg); }
.manifesto .mono, .manifesto .mono-xs { color: var(--fg-faint); }
.manifesto p { color: var(--on-fg); opacity: 0.8; }
.manifesto p.display { opacity: 1; }
.manifesto .circled::after { border-color: var(--accent-on-fg); }
.manifesto .btn { border-color: var(--on-fg); background: var(--on-fg); color: var(--fg); }
.manifesto .btn:hover { background: var(--accent-on-fg); border-color: var(--accent-on-fg); color: var(--fg); }
.manifesto .stamp { border-color: var(--accent-on-fg); color: var(--accent-on-fg); }

/* --- 12. FOOTER ---------------------------------------------------------- */

.colophon { border-top: 3px solid var(--rule-hard); padding-block: clamp(2rem, 4vw, 2.8rem) 1.4rem; }
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 860px) { .colophon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .colophon__grid { grid-template-columns: minmax(0, 1fr); } }
.colophon h4 {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.7rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { padding: 0.18rem 0; font-size: 0.86rem; }
.colophon a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.colophon a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.colophon__end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding-top: 1.1rem;
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- booking section, now on the home page ------------------------------- */

.book__body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 900px) { .book__body { grid-template-columns: minmax(0, 1fr); } }

.book__aside {
  border: 1.5px solid var(--rule-hard);
  background: var(--panel);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}

/* --- 13. FORM ------------------------------------------------------------ */

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--rule-hard); }
@media (max-width: 680px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }

.field { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.field:nth-child(2n) { border-right: 0; }
@media (max-width: 680px) { .field, .field:nth-child(2n) { border-right: 0; } }
.field--full { grid-column: 1 / -1; border-right: 0; }
.field--last { border-bottom: 0; }

.field > label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--rule);
  background: transparent;
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: 0.98rem;
  padding: 0.3rem 0 0.42rem;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.field select { font-family: var(--ff-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); opacity: 0.8; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-bottom-color: var(--accent); border-bottom-width: 2px; }
.field__err {
  display: none;
  font-family: var(--ff-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.35rem;
}
.field[data-invalid="true"] .field__err { display: block; }

/* The consent row is a label too, but it reads as a sentence, not a field name. */
.field > label.check {
  font-family: var(--ff-body);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-soft);
  margin-bottom: 0;
}
.check { display: flex; gap: 0.65rem; align-items: flex-start; }
.check input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.check span { font-size: 0.84rem; color: var(--fg-soft); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.3rem;
}
.form__note { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); max-width: 46ch; line-height: 1.7; }

.form__status {
  display: none;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--accent);
  background: var(--accent-2);
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
}
.form__status[data-show="true"] { display: block; }
.form__status a { color: var(--accent); }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 14. REVEAL ---------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal[data-seen="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --- 15. UTILITIES ------------------------------------------------------- */

.stack > * + * { margin-top: var(--stack, 1rem); }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrapf { flex-wrap: wrap; }
.gap { gap: 1rem; }
.gap-s { gap: 0.5rem; }
.mt-s { margin-top: 0.6rem; } .mt-m { margin-top: 1.4rem; } .mt-l { margin-top: 2.4rem; }
.tc { text-align: center; }
.tr { text-align: right; }

.skip {
  position: absolute; left: -9999px;
  background: var(--fg); color: var(--on-fg);
  padding: 0.8rem 1.2rem; z-index: 999;
  font-family: var(--ff-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.skip:focus { left: var(--gutter); top: 8px; }

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

/* --- 16. PRINT - it is, after all, a document ---------------------------- */

@media print {
  body::before, body::after, .ticker, .nav, .nav__toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .band { padding-block: 14pt; }
  .fig, .panel, .file { break-inside: avoid; border-color: #000; }
  .manifesto { background: #fff; color: #000; }
  .manifesto .display, .manifesto p, .manifesto .mono, .manifesto .mono-xs { color: #000; }
  .file__tab, .spec__no, .fig-key b { background: #000 !important; color: #fff !important; }
}

/* --- Rock Salt corrections ----------------------------------------------- */

/* Rock Salt ships one weight only, so <b> would be synthesised — a smeared,
   obviously fake bold. The capitals carry the emphasis instead; the tag stays
   for the meaning it gives a screen reader. */
.annot b,
.loudnote b,
.ringnote b { font-weight: inherit; }

/* It is a wide face with long ascenders. These hold the notes clear of the
   copy above and below them, which Caveat's tighter setting did not need. */
.annot { letter-spacing: -0.01em; }
.annot--red .u-red { background-image: linear-gradient(var(--red), var(--red)); }

/* Rock Salt ships a single weight, so there is no bold to switch to and a
   synthesised one just smears a second copy sideways. Stroking the glyph
   outline thickens the letterform itself, which is what a fatter pen would
   actually do. Kept modest — much past this and the counters close up. */
.annot,
.loudnote,
.ringnote,
.fig-stack__note { -webkit-text-stroke: 0.9px currentColor; }

/* SVG text takes a real stroke instead, painted under the fill so the
   letterform keeps its shape. */
.dwg .t-hand {
  stroke: var(--accent);
  stroke-width: 0.7;
  paint-order: stroke;
}
.dwg .t-hand--red { stroke: var(--red); }

/* --- the van plate ------------------------------------------------------- */

/* A drawing, not a photograph, but a bitmap all the same — so it cannot take
   the colour tokens the way the inline linework did. multiply drops its white
   paper into whatever the plate is behind it, which keeps the page texture
   showing through instead of pasting a white rectangle onto it. */
.van-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* Inverted the ink reads white, and screen drops the black ground the same way
   multiply drops the white one. Both themes are handled, as elsewhere. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .van-img {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}
:root[data-theme="dark"] .van-img {
  filter: invert(1);
  mix-blend-mode: screen;
}