/* ==========================================================================
   PERAND — Terminal Editorial
   Built to PERAND Brand Kit v2.0 (July 2026).
   Three colours, three families, six layout parts. Nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core three */
  --paper:      #F7F7F5;   /* default surface — ~70% of every design      */
  --ink:        #0E0E0F;   /* type on Paper + full-bleed counter — ~25%   */
  --signal:     #E8121E;   /* max 5%, measured by area, never a bg field  */

  /* Support */
  --concrete:   #EFEEEA;   /* stat blocks, alt bands                      */
  --rule:       #DCDBD6;   /* hairlines on Paper                          */
  --rule-dark:  #2A2A2E;   /* hairlines on Ink                            */
  --muted:      #8C8A85;   /* labels, captions on Paper                   */
  --ember:      #7A0A11;   /* pressed states only                         */

  /* Derived text tones (from the kit's own specimens) */
  --body-paper: #5A5850;   /* secondary body on Paper                     */
  --body-ink:   #A0A0A8;   /* secondary body on Ink                       */
  --label-ink:  #6E6E78;   /* mono labels on Ink                          */
  --faint:      #B5B3AD;   /* page index, ghosts                          */
  --hairline-i: #4A4A52;   /* ghost-button border on Ink                  */
  --signal-hi:  #FF3A2E;   /* link hover only                             */

  /* Type */
  --display: 'Anton', 'Archivo Black', Impact, sans-serif;
  --text:    'Archivo', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout — the print margin is 7% of the shorter edge; on screen it is fluid
     so it lands on the spec's own values: 22px at 390, 88px at 1600. */
  --gutter: clamp(22px, 5.5vw, 88px);
  --max:    1120px;        /* max content width, left-aligned, never centred */
  --fold:   clamp(44px, 8vw, 104px);  /* vertical rhythm between folds       */
}

/* --------------------------------------------------------------------------
   01 · 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(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Flush left, ragged right. No centred type anywhere except inside a button. */
h1, h2, h3, h4, p, li { text-align: left; text-wrap: pretty; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-hi); }
::selection { background: var(--signal); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.band--ink :focus-visible { outline-color: var(--paper); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 14px 18px;
}
.skip:focus { left: 0; color: var(--paper); }

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

/* --------------------------------------------------------------------------
   02 · TYPE — Anton shouts, Archivo speaks, Plex Mono files
   -------------------------------------------------------------------------- */

/* Display · Anton 400 · uppercase · LH .86 · LS -1% */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .86;
  font-variant-numeric: tabular-nums;
}
.d1 { font-size: clamp(58px, 16.4vw, 118px); }

/* Controlled break: three lines on a phone, two from tablet up. */
.brk { display: block; }
@media (min-width: 620px) { .brk { display: none; } }
.d2 { font-size: clamp(34px, 6.4vw, 62px);  line-height: .9; }
.d3 { font-size: clamp(24px, 3.4vw, 34px);  line-height: 1;  letter-spacing: 0; }
.d4 { font-size: clamp(17px, 2vw, 21px);    line-height: 1;  letter-spacing: 0; }

/* Slovak stacks carons and acutes above the cap line. At the manual's 0.86 the
   accents on ZNAČKA and NÁMAHY collide with the line above, so SK display gets
   just enough leading to clear them — and nothing more. */
html[lang="sk"] .d1 { line-height: .98; }
html[lang="sk"] .d2 { line-height: 1; }
html[lang="sk"] .d3 { line-height: 1.06; }

/* The period is the brand's smallest and loudest asset — it ends every headline. */
.hot { color: var(--signal); }

/* Text & UI · Archivo */
.lede    { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.55; color: var(--body-paper); }
.band--ink .lede { color: var(--body-ink); }
.body    { font-size: clamp(15.5px, 1.35vw, 17px); line-height: 1.6; color: var(--body-paper); }
.band--ink .body { color: var(--body-ink); }
.caption { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Labels & data · IBM Plex Mono 500 · +20% tracking · caps */
.eyebrow, .mono {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .22em;
  color: var(--signal);
}
.eyebrow--muted { color: var(--muted); }
.band--ink .eyebrow--muted { color: var(--label-ink); }
.mono {
  font-size: 10.5px; letter-spacing: .16em; line-height: 1.7;
  color: var(--muted);
}
.band--ink .mono { color: var(--label-ink); }

/* Numerals are the photography. Tabular figures, always. */
.num { font-family: var(--display); font-variant-numeric: tabular-nums; line-height: 1; }

/* --------------------------------------------------------------------------
   03 · SHELL
   -------------------------------------------------------------------------- */
/* The content column is 1120px and flush left. The page frame is capped so an
   ultrawide monitor does not strand it — but the column itself is never centred. */
.wrap {
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap > * { max-width: var(--max); }

.band { padding-block: var(--fold); border-bottom: 1px solid var(--rule); }
.band--concrete { background: var(--concrete); }
.band--ink {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: var(--ink);
}
.band--flush { padding-block: 0; border-bottom: 0; }

/* THE RED EDGE — 10px Signal bar on the left of a cover. One per piece.
   It is the brand's signature, so it stays rare: hero and final close only. */
.band--edge { position: relative; }
.band--edge::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--signal);
}
/* Drawn, not bordered — a real border would inset the band's content box and
   pull the hero 5px out of line with the header and footer lockups. */
@media (min-width: 900px) { .band--edge::before { width: 10px; } }

.stack   { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.stack--tight { gap: 14px; }
.stack--wide  { gap: 28px; }

/* --------------------------------------------------------------------------
   04 · HEADER
   -------------------------------------------------------------------------- */
.hdr {
  background: var(--ink);
  color: var(--paper);
  position: sticky; top: 0; z-index: 60;
}
/* Same frame as .wrap, so the header column lines up with the page column
   on every monitor width. */
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
  max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
}

/* 01 · Primary horizontal lockup. Clear space = one square's width. */
.lockup { display: flex; align-items: center; gap: 10px; color: inherit; }
.lockup:hover { color: inherit; }
.lockup .mark { flex: 0 0 auto; }
.lockup__txt { display: flex; flex-direction: column; gap: 4px; }
.wordmark {
  font-family: var(--text); font-weight: 900;
  font-size: 15px; letter-spacing: .10em; line-height: 1;
  color: currentColor;
}
.descriptor {
  font-family: var(--mono); font-weight: 500;
  font-size: 7.5px; letter-spacing: .22em; color: var(--signal);
  text-transform: uppercase; line-height: 1;
}

.hdr__nav { display: none; align-items: center; gap: 22px; }
.hdr__link {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--body-ink);
}
.hdr__link:hover, .hdr__link[aria-current="page"] { color: var(--paper); }
.hdr__right { display: flex; align-items: center; gap: 12px; }

/* Language toggle */
.lang { display: flex; border: 1px solid var(--rule-dark); }
.lang a {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  padding: 6px 8px; color: var(--label-ink);
}
.lang a[aria-current="true"] { background: var(--paper); color: var(--ink); }
.lang--paper { border-color: var(--rule); }
.lang--paper a { color: var(--muted); }
.lang--paper a[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* Burger — third bar is Signal, 60% width (the mark's accent, repeated) */
.burger {
  width: 34px; height: 30px; padding: 8px 6px; background: none; border: 0;
  display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.burger span { height: 2px; background: var(--paper); transition: transform .18s, opacity .18s; }
.burger span:nth-child(3) { background: var(--signal); width: 60%; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

.drawer {
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--rule-dark);
  padding: 8px var(--gutter) 24px;
}
.drawer[data-open="true"] { display: block; }
.drawer a {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--rule-dark);
  color: var(--paper); font-weight: 700; font-size: 16px;
}
.drawer a:hover { color: var(--signal); }
.drawer .btn { margin-top: 20px; }

/* On a phone the header carries the mark, the language and the menu.
   The call lives in the drawer and the sticky bar — it is never crowded. */
/* Two-class specificity throughout: .btn sets display later in this file and
   would otherwise win the cascade against a single-class rule. */
.hdr .hdr__cta { display: none; }

/* Secondary pages have no sticky bar, so they keep the call in the header —
   and drop the language toggle to the footer to make room. */
.hdr--cta .hdr__cta { display: inline-flex; }
.hdr--cta .lang { display: none; }

/* The descriptor needs room to stay legible. On a phone the header is the mark
   and the wordmark only; the full lockup lives in the footer. */
.hdr .descriptor { display: none; }

@media (min-width: 940px) {
  .hdr__nav { display: flex; }
  .hdr .hdr__cta { display: inline-flex; }
  .hdr--cta .lang { display: flex; }
  .hdr .descriptor { display: block; font-size: 8.5px; letter-spacing: .24em; }
  .burger, .drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   05 · BUTTONS — the only place centred type is allowed
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--text); font-weight: 700; font-size: 15.5px;
  padding: 17px 14px; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; transition: background-color .14s, color .14s, border-color .14s;
}
.btn--signal { background: var(--signal); color: var(--paper); }
/* Darken on hover rather than brighten: Paper on #FF3A2E falls to 3.3:1, which
   would make the primary button hardest to read at the moment it is aimed at. */
.btn--signal:hover { background: var(--ember); color: var(--paper); }
.btn--signal:active { background: var(--ember); }
.btn--ghost { border-color: var(--hairline-i); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); color: var(--paper); }
.btn--ghost-ink { border-color: var(--ink); color: var(--ink); }
.btn--ghost-ink:hover { background: var(--ink); color: var(--paper); }
.btn--sm { font-size: 12.5px; padding: 9px 14px; }
.btn--block { width: 100%; }

.btn-row { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 150px; }
@media (min-width: 640px) {
  .btn { padding-inline: 26px; }
  .btn-row .btn { flex: 0 0 auto; min-width: 190px; }
}

/* --------------------------------------------------------------------------
   06 · LAYOUT PART 01 — EYEBROW + DISPLAY  (already covered by .eyebrow/.d*)
   06 · LAYOUT PART 02 — STAT FOOTER (2px rule)
   -------------------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; gap: 0 24px;
}
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.band--ink .stat { border-top-color: var(--rule-dark); }
.stat__n { font-family: var(--display); font-size: clamp(26px, 4.6vw, 38px); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__k { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.band--ink .stat__k { color: var(--label-ink); }

/* Heavy variant: the 2px Ink rule from the kit */
.stats--rule { border-top: 2px solid var(--ink); padding-top: 16px; gap: 0 26px; }
.stats--rule .stat { border-top: 0; padding-top: 0; }
.band--ink .stats--rule { border-top-color: var(--paper); }

@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   06 · LAYOUT PART 03 — CHIPS · sharp, never rounded
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block;
  font-family: var(--mono); font-weight: 600;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 0;
  background: var(--ink); color: var(--paper);
}
.chip--signal { background: var(--signal); color: var(--paper); }
.chip--ghost  { background: none; border: 1px solid var(--rule); color: var(--muted); }

/* --------------------------------------------------------------------------
   06 · LAYOUT PART 04 — COMPOUND STACK
   -------------------------------------------------------------------------- */
.compound { display: flex; flex-direction: column; width: 100%; }
.compound__row {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 5px;
  background: var(--concrete);
}
.compound__row--ink {
  background: var(--ink); color: var(--paper);
  border-right: 7px solid var(--signal);
}
.compound__k { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.compound__n { font-family: var(--display); font-size: clamp(34px, 5.4vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; }
.compound__row--ink .compound__n { color: var(--signal); }

/* --------------------------------------------------------------------------
   06 · LAYOUT PART 05 — NUMBERED STEP LIST
   -------------------------------------------------------------------------- */
.steps { width: 100%; border-top: 1px solid var(--rule); }
.band--ink .steps { border-top-color: var(--rule-dark); }
.steps li {
  display: flex; gap: 15px; padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.band--ink .steps li { border-bottom-color: var(--rule-dark); }
.steps__n { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--signal); flex: 0 0 auto; min-width: 20px; }
.steps__b { display: flex; flex-direction: column; gap: 3px; }
.steps__t { font-family: var(--display); font-size: 17px; line-height: 1; text-transform: uppercase; }
.steps__d { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Timeline variant — mono key instead of a numeral */
.steps--time .steps__n {
  font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); min-width: 56px; padding-top: 4px;
}
/* Signal marks the moment that matters, not simply the last row —
   opt in per list with .steps--time-end. */
.steps--time-end li:last-child .steps__n { color: var(--signal); }

/* --------------------------------------------------------------------------
   06 · LAYOUT PART 06 — GHOST NUMERAL · Concrete only
   -------------------------------------------------------------------------- */
.ghost { position: relative; overflow: hidden; }
.ghost__n {
  position: absolute; right: -12px; bottom: -46px;
  font-family: var(--display); font-size: 190px; line-height: .8;
  color: var(--concrete); pointer-events: none; user-select: none;
}
.ghost > *:not(.ghost__n) { position: relative; }

/* --------------------------------------------------------------------------
   07 · ROW LIST — "LEAKS" / "Don't hire us if…"
   -------------------------------------------------------------------------- */
.rows { width: 100%; border-top: 1px solid var(--rule); }
.rows li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; color: var(--body-paper);
}
.rows__flag {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); flex: 0 0 auto;
}

.nos { display: flex; flex-direction: column; gap: 13px; width: 100%; }
.nos li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--body-paper); }
.nos__x { font-family: var(--mono); font-size: 13px; color: var(--muted); flex: 0 0 auto; }

.pull {
  border-left: 3px solid var(--signal); padding-left: 14px;
  font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--ink);
}
.band--ink .pull { color: var(--paper); }

/* --------------------------------------------------------------------------
   08 · CARDS / GRID
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 12px; width: 100%; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .grid--auto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2 { gap: 20px; }
}

.card {
  border: 1px solid var(--rule); background: #FFFFFF;
  display: flex; flex-direction: column;
}
.card__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card--flat { background: var(--paper); }
.card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--dashed { border-style: dashed; background: none; }
.card--signal { border-color: var(--signal); }

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

/* Price cards */
.price { border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.price--feature { border-color: var(--signal); padding-top: 30px; }
.price--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); border-right: 7px solid var(--signal); }
.price__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.price__t { font-family: var(--display); font-size: 20px; text-transform: uppercase; line-height: 1; }
.price__v { font-family: var(--display); font-size: clamp(24px, 3.4vw, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.price__v small { font-size: .58em; }
.price__d { font-size: 14px; line-height: 1.5; color: var(--body-paper); }
.price--ink .price__d { color: var(--body-ink); }
.price__tag {
  position: absolute; top: 0; right: 0;
  background: var(--signal); color: var(--paper);
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  padding: 4px 9px; text-transform: uppercase;
}

/* Split — YOU vs PERAND */
.split__col { border: 1px solid var(--rule); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.split__col--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.split__list { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--body-paper); }
.split__col--ink .split__list { color: var(--body-ink); }

/* --------------------------------------------------------------------------
   09 · IMAGE SLOTS — real screenshots drop straight in here
   -------------------------------------------------------------------------- */
.slot {
  position: relative; width: 100%; background: var(--concrete);
  border: 1px dashed var(--rule);
  display: flex; align-items: flex-end; padding: 12px;
  min-height: 150px; overflow: hidden;
}
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.slot > img + .slot__k { display: none; }
.slot__k {
  font-family: var(--mono); font-weight: 500; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.slot--tall { min-height: 200px; }
.slot--sq { aspect-ratio: 1; min-height: 0; }

/* A filled slot keeps the artwork's own proportions instead of letterboxing it
   into the empty slot's min-height — the 4:5 case-study cover was losing the
   "$57,000" out of frame. */
.slot--filled { border-style: solid; padding: 0; min-height: 0; display: block; }
.slot--filled > img { position: static; height: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   09b · CAROUSEL STRIP — the published 4:5 frames, scrolled not shrunk
   -------------------------------------------------------------------------- */
.carousel {
  display: flex; gap: 12px; width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
}
.carousel figure { flex: 0 0 auto; width: 230px; scroll-snap-align: start; margin: 0; }
.carousel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--rule); }
.carousel figcaption {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding-top: 8px;
}
@media (min-width: 760px) { .carousel figure { width: 280px; } }

/* --------------------------------------------------------------------------
   10 · FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { width: 100%; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 0; text-align: left;
  font-family: var(--text); font-weight: 700; font-size: 15px;
}
.faq__sign { font-size: 18px; color: var(--muted); flex: 0 0 auto; line-height: 1; }
.faq__q[aria-expanded="true"] .faq__sign { color: var(--signal); }
.faq__a {
  font-size: 14px; line-height: 1.6; color: var(--body-paper);
  padding: 0 0 18px; max-width: 62ch;
}
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   11 · STICKY CALL BAR — appears after fold 02
   -------------------------------------------------------------------------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); border-top: 1px solid var(--rule-dark);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform .22s ease;
  visibility: hidden;
}
.stickybar[data-show="true"] { transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }
.stickybar__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stickybar__k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--label-ink); text-transform: uppercase; }
.stickybar__v {
  font-size: 13px; font-weight: 700; color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stickybar .btn { padding: 13px 18px; font-size: 14px; flex: 0 0 auto; }
body[data-sticky="true"] { padding-bottom: 76px; }

/* --------------------------------------------------------------------------
   12 · BOOKING
   -------------------------------------------------------------------------- */
.days { display: flex; gap: 8px; width: 100%; }
.day {
  flex: 1; border: 1px solid var(--rule-dark); background: none; cursor: pointer;
  padding: 13px 4px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--label-ink); text-transform: uppercase;
}
.day b { display: block; font-family: var(--display); font-size: 19px; font-weight: 400; color: var(--paper); }
.day[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--paper); }

.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.timeslot {
  border: 1px solid var(--rule-dark); background: none; cursor: pointer;
  padding: 15px; text-align: center; font-size: 15px; font-weight: 600; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.timeslot[aria-pressed="true"] { border-color: var(--paper); }
.timeslot[disabled] { color: var(--hairline-i); text-decoration: line-through; cursor: not-allowed; }

.field {
  width: 100%; border: 1px solid var(--rule-dark); background: none;
  padding: 15px; font-family: var(--text); font-size: 15px; color: var(--paper);
  border-radius: 0;
}
/* The placeholder is the only visible label for these four fields, so it is
   set on the body-on-Ink tone (7.4:1), not the dimmer mono-label tone. */
.field::placeholder { color: var(--body-ink); opacity: 1; }
.field:focus { border-color: var(--paper); outline-offset: 0; }
.fields { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.note {
  border: 1px solid var(--rule-dark); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.note--paper { border-color: var(--rule); }
/* Signal on Ink is display-and-labels only, never body — so an error carries
   its red on a rule, not on the sentence the visitor has to read. */
.formstate { font-size: 14px; line-height: 1.6; color: var(--paper); }
.formstate:empty { display: none; }
.formstate[data-tone="error"] {
  border-left: 3px solid var(--signal);
  padding-left: 12px;
}

/* --------------------------------------------------------------------------
   13 · FOOTER
   -------------------------------------------------------------------------- */
.ftr { padding-block: 36px 40px; }
.ftr__links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.ftr__links a { font-size: 14px; color: var(--body-paper); }
.ftr__links a:hover { color: var(--signal); }
.ftr__hr { height: 1px; background: var(--rule); width: 100%; }
.ftr__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
@media (min-width: 760px) {
  .ftr__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   14 · DESKTOP — the mobile page with more columns, not a different design.
        Max content width 1120px, left-aligned, never centred.
   -------------------------------------------------------------------------- */
.cols { display: grid; gap: 28px; width: 100%; }
@media (min-width: 900px) {
  .cols--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .cols--lede  { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}

.measure { max-width: 62ch; }
.measure--tight { max-width: 46ch; }

/* Marquee-free, motion-free by default. Depth comes from Ink blocks, never shadows. */