/* ============================================================================
   RUIZ LOCK & KEY — emergency locksmith, Southwest Detroit
   Built to DESIGN_SYSTEM.md v1.0.

   THE REFUSAL (§9 Q3)
   Emergency locksmith search results are the most scam-dense category on the
   consumer web, and the visual language of the scam IS the category default:
   a stock brass padlock on white, "$19 SERVICE CALL", a red 24/7 starburst, a
   nationwide 800 number, a map pin over no building, five gold stars, and
   nowhere on the page a human name or a street address.
   We refuse all of it. The whole design job is proving a person is real
   BEFORE proving they are fast.

   ONE LINE   the locksmith you can look up before you let him in
   FEELING    verifiable → awake → unhurried competence.  NOT "fast fast fast".

   CONTEXT (§12)  A4 · B5 · C2 · D5 · E5
     Locked out, outdoors, at night, one-handed, on a phone, possibly with a
     child or a dog in the car. B5 is the highest urgency this system has seen.
     C2 says the session is very short. D5 says trust must be earned outright.
     B5+C2 want brevity; D5 wants proof. THAT TENSION IS THE DESIGN PROBLEM.
     The answer: the proof must be SCANNABLE, not readable — every claim on
     this page is a thing you can check in five seconds, not a paragraph.

   WHY THE GROUND IS DARK — this is a functional decision, not a mood.
     The page is read outdoors, at night, on a phone held in one hand. A light
     UI at 2am is a flashbang, and it destroys the night vision of someone
     standing next to a car they cannot get into. Every other choice follows.

   COMPOSITION (§5) — six systems, and deliberately NOT the last build's set
     overlap/collage    hero (Orient + Prove)
     full-bleed         the licensing truth (Assert)
     asymmetric grid    how to check us (Prove)      ← NOT modular cells
     index/tabular      what it costs (Reference)
     split/duotych      what a scam looks like (Instruct)
     canvas/spatial     coverage + who is on call (Orient)
     persistent band    the call (Transact)          ← NOT centered/axial
   The ledger's 2026-09-02 note flagged "cells for Prove, axial for Transact"
   as a hardening reflex. Both are broken here, on purpose.

   DIVISION (§4)  ground · density · scale jump · bleed · depth — five channels,
     none running twice in a row.

   TYPE (§6) — settings profile, distinct from every prior project:
     ratio 1.5 · 6 steps · EXTREME WEIGHT CONTRAST within one family as the
     expressive channel (Big Shoulders 200 against 800) · sentence case, not
     uppercase · measure 58ch · leading 1.6 · tabular figures set large.

   IMAGERY (§9) — two declared classes, each locked, stated in docs/DESIGN.md:
     PHOTOGRAPH  crop 4:5 · night grade · hard edge with a seated shadow block
     EXHIBIT     a document, shown at native aspect, tacked up and off-axis.
                 Declaring a second class is a decision; drifting between two
                 treatments inside one class would be the failure.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* night. Cool, blue-shifted, never pure black. */
  --ground:   #12171C;
  --ground-2: #1A2229;
  --ground-3: #28323B;
  --edge:     #000407;   /* the shadow block the interaction seats into */

  --text:   #EAF0F4;
  --text-2: #A9B6C1;

  /* THREE colors, three named jobs (§7). A reader can tell them apart
     without being told, which is the whole argument for the system. */
  --act:    #C8F04B;   /* high-vis lime — reflective vest. Things you DO.   */
  --act-2:  #A8CE33;
  --know:   #7FC4DE;   /* steel — things you can VERIFY.                     */
  --warn:   #FF7060;   /* used in exactly one section: the scam warning.     */

  --f-display: 'Big Shoulders Display', 'Haettenschweiler', Impact, sans-serif;
  --f-body:    'Karla', system-ui, -apple-system, sans-serif;
  --f-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* scale — ratio 1.5, six steps. Big jumps: a sign, read at a glance. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.5rem;
  --t-lg:   clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --t-xl:   clamp(2.9rem, 1.6rem + 5.6vw, 4.6rem);
  --t-2xl:  clamp(3.3rem, 1.4rem + 5.2vw, 4.6rem);   /* floor set by the 3x mobile display ratio */

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --measure: 58ch;

  --ease:    cubic-bezier(.16, 1, .3, 1);
  --m-seat:  90ms;      /* a bolt throws fast or it is broken */
  --m-state: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
  /* TEXTURE 1 of 3 — a fine machining hatch. Barely visible, always there. */
  background-image: repeating-linear-gradient(
    -52deg, rgba(255,255,255,.016) 0 1px, transparent 1px 7px);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--act); color: var(--ground); }

.shell { width: min(1280px, 100%); margin-inline: auto; padding-inline: clamp(var(--s-5), 4.5vw, var(--s-16)); }
.band  { padding-block: clamp(var(--s-16), 6.5vw, var(--s-32)); }

/* ---------------------------------------------------------------- type */
h1, h2, h3 { margin: 0; font-family: var(--f-display); line-height: .96; font-weight: 800; }

/* Big Shoulders carries a wide variable weight range, and THAT is this
   project's expressive channel — 200 against 800 inside one family, at one
   size, saying two different things. Sentence case throughout: the last build
   set its display uppercase, and a person's voice is not a sign. */
.display   { font-size: var(--t-2xl); letter-spacing: -0.015em; }
.display .thin { display: block; font-size: 0.56em; line-height: 1.04; margin-bottom: .18em; letter-spacing: -0.005em; color: var(--text-2); }
.thin { font-weight: 200; }                 /* structural, not an accent word:
   it marks the QUESTION half of a two-part sentence, and both halves are full
   clauses. Never a single word lifted out of a uniform line (§12). */
.h2 { font-size: var(--t-xl); letter-spacing: -0.012em; margin-bottom: var(--s-5); }
.h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
.h4 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); line-height: 1; margin: 0; }
.lede  { font-size: var(--t-md); line-height: 1.35; max-width: 30ch; margin: 0; font-family: var(--f-body); }
.prose { max-width: var(--measure); color: var(--text-2); }
.prose p { margin: 0 0 var(--s-5); }
.prose strong { color: var(--text); }
.fig { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; }

/* SECTION MARKER — a stamped plate. Not an eyebrow, not a file tab (that was
   the last project). Mono, but sentence-case and set on a filled plate, so it
   is not the tiny tracked-out all-caps mono label of the §12 fingerprint. */
.plate {
  display: inline-block; margin: 0 0 var(--s-6);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.02em;
  color: var(--ground); background: var(--know);
  padding: var(--s-2) var(--s-4);
}
.plate--act  { background: var(--act); }
.plate--warn { background: var(--warn); }

/* ---------------------------------------------------------------- actions
   INTERACTION SIGNATURE — "it seats."
   Everything interactive rests offset from a hard block of shadow. Hover
   deepens the offset; press moves the element THE FULL OFFSET into the block
   and the block vanishes, so it reads as a bolt throwing home. No blur, no
   glow, no lift. One idea, everywhere, and because it resolves on :active it
   exists on touch — where there is no hover at all. */
.act {
  --seat: 6px;
  display: inline-block; position: relative;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-md);
  line-height: 1; letter-spacing: -0.01em; text-decoration: none;
  padding: var(--s-4) var(--s-6);
  background: var(--act); color: var(--ground);
  border: 2px solid var(--edge);
  box-shadow: var(--seat) var(--seat) 0 var(--edge);
  transition: transform var(--m-seat) var(--ease),
              box-shadow var(--m-seat) var(--ease),
              background var(--m-state) var(--ease);
}
.act:hover, .act:focus-visible { --seat: 10px; background: #D6FA62; }
.act:active { transform: translate(var(--seat), var(--seat)); box-shadow: 0 0 0 var(--edge); }

.act--quiet { background: transparent; color: var(--text); border-color: var(--ground-3); box-shadow: var(--seat) var(--seat) 0 var(--ground-3); }
.act--quiet:hover, .act--quiet:focus-visible { background: var(--ground-2); border-color: var(--act); box-shadow: var(--seat) var(--seat) 0 var(--act); }

/* text links get the same idea at hairline scale: a rule that seats */
.tlink { color: var(--know); text-decoration: none; border-bottom: 2px solid var(--ground-3); transition: border-color var(--m-state) var(--ease); }
.tlink:hover, .tlink:focus-visible { border-bottom-color: var(--know); }

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; background: var(--act); color: var(--ground); padding: var(--s-3) var(--s-5); z-index: 60; }
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom: 2px solid var(--ground-3); }
.masthead__in { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; justify-content: space-between; padding-block: var(--s-4); }
.wordmark { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); line-height: 1; letter-spacing: -0.01em; text-decoration: none; display: flex; align-items: baseline; gap: var(--s-3); }
.wordmark small { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.nav { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--t-sm); }
.nav a { font-family: var(--f-body); font-weight: 700; text-decoration: none; color: var(--text-2); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color var(--m-state) var(--ease), border-color var(--m-state) var(--ease); }
.nav a:hover, .nav a:focus-visible { color: var(--text); border-bottom-color: var(--act); }

/* ============================================================ SYSTEM 1
   OVERLAP / COLLAGE — hero (Orient + Prove)
   The claim, the photograph of actual work, and a verification plate that
   OVERLAPS the photograph. The overlap is the argument: the proof is not
   filed away below the fold, it is physically on top of the picture.
   ========================================================================= */
.hero { position: relative; overflow: hidden; }
/* TEXTURE 2 of 3 — a sodium streetlight pool, bleeding from one corner.
   The earliest proof a person made this, and it is in the first viewport. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -30%; height: 150%;
  background: radial-gradient(58% 52% at 22% 30%, rgba(200,240,75,.10), transparent 68%),
              radial-gradient(46% 44% at 76% 8%,  rgba(127,196,222,.07), transparent 70%);
  pointer-events: none;
}
.collage { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-8); padding-block: clamp(var(--s-10), 5vw, var(--s-20)); }
@media (min-width: 980px) {
  .collage { grid-template-columns: 1.15fr .85fr; gap: var(--s-16); align-items: center; }
}
.collage__copy { position: relative; z-index: 2; }
.hero__say { margin: var(--s-6) 0 0; max-width: 40ch; color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-10); }

.hero__num { display: inline-block; margin-top: var(--s-8); text-decoration: none; }
.hero__num .n { display: block; font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; color: var(--act); }
.hero__num .k { display: block; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s-2); }
.hero__num:hover .n, .hero__num:focus-visible .n { color: #DCFF6E; }

/* the photograph, and the plate that overlaps it */
.collage__shot { position: relative; }
.collage__shot .shot { max-width: 460px; margin-left: auto; }
.vplate {
  position: relative; z-index: 3; margin: calc(var(--s-16) * -1) 0 0 0;
  background: var(--ground-2); border: 2px solid var(--edge);
  box-shadow: 10px 10px 0 var(--edge);
  padding: var(--s-6);
  max-width: 400px;
}
@media (min-width: 980px) { .vplate { margin-left: calc(var(--s-12) * -1); } }
.vplate h2 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); margin-bottom: var(--s-4); }
.vplate dl { margin: 0; display: grid; gap: var(--s-3); }
.vplate div { display: grid; grid-template-columns: 11ch 1fr; gap: var(--s-4); align-items: baseline; }
.vplate dt { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); }
.vplate dd { margin: 0; font-size: var(--t-sm); font-weight: 700; }

/* IMAGERY — class PHOTOGRAPH. crop 4:5 · night grade · hard edge, seated. */
.shot { position: relative; background: var(--ground-3); border: 2px solid var(--edge); box-shadow: 10px 10px 0 var(--edge); }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  filter: saturate(.72) contrast(1.16) brightness(.86); }

/* IMAGERY — class EXHIBIT. A document, native aspect, tacked up off-axis. */
.exhibit { position: relative; transform: rotate(-1.4deg); border: 2px solid var(--edge); box-shadow: 10px 10px 0 var(--edge); background: var(--ground-3); }
.exhibit img { filter: saturate(.5) contrast(1.05) brightness(.92); }
.exhibit figcaption { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); background: var(--ground-2); padding: var(--s-3) var(--s-4); border-top: 2px solid var(--edge); }

/* On a phone the persistent bar IS the phone number — full width, thumb-high,
   present from the first pixel and never leaving. So the hero's own number
   block is a duplicate, and letting it eat the fold to repeat what is already
   permanently on screen is the wrong trade at B5. The ACTIONS come up instead;
   the number block follows the paragraph for anyone who scrolls. */
@media (max-width: 760px) {
  .collage__copy { display: flex; flex-direction: column; }
  .collage__copy .display { order: 1; }
  .hero__actions           { order: 2; margin-top: var(--s-8); }
  .hero__say               { order: 3; margin-top: var(--s-8); }
  .hero__num               { order: 4; margin-top: var(--s-8); }
  .hero__num .n { font-size: var(--t-lg); }
  /* wordmark on its own line, nav as one scrolling row — three wrapped rows
     of nav would cost the fold the same way the headline did */
  .masthead__in { flex-wrap: wrap; gap: var(--s-4) 0; }
  .wordmark { flex: 1 0 100%; }
  .nav {
    flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: var(--s-5);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  /* the plate no longer has a photo edge to overlap on one column */
  .vplate { margin-top: var(--s-6); }
  /* the wordmark and its locality stack rather than fighting for one line */
  .wordmark { flex-wrap: wrap; gap: 0; }
  .wordmark small { flex: 1 0 100%; margin-top: 3px; }
  .callbar { gap: var(--s-3); padding: var(--s-2) var(--s-3); }
  .callbar__a { padding: var(--s-3) var(--s-4); }
}

/* ============================================================ SYSTEM 2
   FULL-BLEED IMMERSIVE — the licensing truth (Assert)
   Division from 1: GROUND CHANGE.
   One fact, at the largest type on the page, on its own ground, with nothing
   else in the viewport. It is the most useful sentence in the category and
   almost no competitor will print it, because it sounds like an admission.
   ========================================================================= */
.truth { background: var(--ground-2); border-block: 2px solid var(--edge); position: relative; overflow: hidden; }
.truth::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-52deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px);
}
.truth__in { position: relative; z-index: 1; }
.truth .prose { margin-top: var(--s-8); }

/* ============================================================ SYSTEM 3
   ASYMMETRIC GRID — how to check us (Prove)
   Division from 2: DENSITY.
   NOT modular cells: the items are genuinely unequal in weight, so the grid
   is unequal. Each row is one thing you can verify in five seconds, and the
   verification itself — the number, the link — is the largest element in it.
   ========================================================================= */
.checks { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .checks { grid-template-columns: repeat(12, 1fr); } }
.check {
  background: var(--ground-2); border: 2px solid var(--edge);
  box-shadow: 8px 8px 0 var(--edge);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
}
@media (min-width: 900px) {
  .check--a { grid-column: span 7; }
  .check--b { grid-column: span 5; }
  .check--c { grid-column: span 4; }
  .check--d { grid-column: span 8; }
  .check--e { grid-column: span 6; }
  .check--f { grid-column: span 6; }
}
.check__k { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--know); }
.check__v { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); line-height: 1; letter-spacing: -0.01em; }
.check p { margin: 0; color: var(--text-2); font-size: var(--t-sm); max-width: 46ch; }

/* ============================================================ SYSTEM 4
   INDEX / TABULAR — what it costs (Reference)
   Division from 3: SCALE JUMP.
   Published prices are the single strongest anti-scam signal in this trade,
   because the bait-and-switch depends on the price arriving after the work.
   ========================================================================= */
.rates { border-top: 3px solid var(--act); }
.rate {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5); border-bottom: 1px solid var(--ground-3);
  align-items: baseline;
}
@media (min-width: 800px) { .rate { grid-template-columns: 22ch 1fr auto; } }
.rate__k { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); line-height: 1.05; }
.rate__d { color: var(--text-2); font-size: var(--t-sm); max-width: 52ch; grid-column: 1 / -1; }
@media (min-width: 800px) { .rate__d { grid-column: auto; } }
.rate__p { font-family: var(--f-mono); font-variant-numeric: tabular-nums lining-nums; font-size: var(--t-md); color: var(--act); white-space: nowrap; }
.rates__note { margin-top: var(--s-6); color: var(--text-2); font-size: var(--t-sm); max-width: var(--measure); }

/* ============================================================ SYSTEM 5
   SPLIT / DUOTYCH — what a scam looks like (Instruct)
   Division from 4: BLEED.
   Two things compared is exactly what a duotych is for, and it is the only
   place on the site that --warn appears. The exhibit is a real public-domain
   photograph of a real fake-locksmith sticker, with its number redacted.
   ========================================================================= */
.duo { display: grid; gap: var(--s-10); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; } }
.duo__side h3 { margin-bottom: var(--s-5); }
.tell { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.tell li { display: grid; grid-template-columns: 2.2ch 1fr; gap: var(--s-3); font-size: var(--t-sm); color: var(--text-2); }
.tell li b { color: var(--text); font-weight: 700; }
.tell__x { color: var(--warn); font-family: var(--f-mono); }
.tell__ok { color: var(--act); font-family: var(--f-mono); }

/* ============================================================ SYSTEM 6
   CANVAS / SPATIAL — coverage + who is on call (Orient)
   Division from 5: DEPTH.
   The ONE live element on the site, and it is live because the fact itself
   changes: who is on call, and how long you will actually wait, depend on the
   time you are reading. Motion that carries information is not decoration.
   With script blocked, the markup already states the honest general case.
   ========================================================================= */
.spatial { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 920px) { .spatial { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.map { position: relative; background: var(--ground-2); border: 2px solid var(--edge); box-shadow: 12px 12px 0 var(--edge); }
.map svg { display: block; width: 100%; height: auto; }
.map__key { display: flex; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-4); border-top: 2px solid var(--edge); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); }
.map__key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }

.status { border: 2px solid var(--edge); background: var(--ground-2); box-shadow: 12px 12px 0 var(--edge); padding: var(--s-8); }
.status__row { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-2); }
.status__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--act); flex: none; }
/* The pulse is the only ambient motion on the page and it is 2.4s, low
   amplitude, and attached to a live fact. It stops entirely under
   prefers-reduced-motion, where the dot simply stays lit. */
@media (prefers-reduced-motion: no-preference) {
  .status--open .status__dot { animation: pulse 2.4s var(--ease) infinite; }
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,240,75,.55); } 60% { box-shadow: 0 0 0 9px rgba(200,240,75,0); } }
.status--shut .status__dot { background: var(--text-2); }
.status__now { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); line-height: 1; margin: var(--s-4) 0 0; }
.status__eta { font-family: var(--f-display); font-weight: 200; font-size: var(--t-xl); line-height: 1; margin: var(--s-3) 0 0; color: var(--act); }
.status__note { margin: var(--s-5) 0 0; color: var(--text-2); font-size: var(--t-sm); max-width: 44ch; }
.status__who { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--ground-3); font-size: var(--t-sm); color: var(--text-2); }
.status__who b { color: var(--text); }

/* ---------------------------------------------------------------- persistent band
   THE TRANSACT SYSTEM (§5), not a leftover.
   At B5 the action is present from the first pixel and never leaves. It does
   not appear on scroll, it does not animate in, and it carries exactly one
   action plus the one fact that changes — the current wait. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--act); color: var(--ground);
  border-top: 3px solid var(--edge);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--s-4); padding: var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
}
.callbar__l { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.3; }
.callbar__l b { display: block; font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); line-height: 1; }
.callbar__a {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-md);
  line-height: 1; text-decoration: none; color: var(--act);
  background: var(--ground); border: 2px solid var(--edge);
  padding: var(--s-4) var(--s-5); min-height: 52px;
  display: inline-flex; align-items: center; white-space: nowrap;
  transition: transform var(--m-seat) var(--ease);
}
.callbar__a:active { transform: translate(3px, 3px); }
@media (min-width: 900px) { .callbar { justify-content: end; grid-template-columns: auto auto; } }
body { padding-bottom: 96px; }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 2px solid var(--ground-3); padding-block: var(--s-16) var(--s-10); }
.foot__grid { display: grid; gap: var(--s-10); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-16); } }
.foot h2 { font-family: var(--f-display); font-size: var(--t-md); font-weight: 800; margin-bottom: var(--s-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.foot a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--ground-3); }
.foot a:hover, .foot a:focus-visible { color: var(--text); border-bottom-color: var(--act); }
.legal { margin-top: var(--s-12); padding-top: var(--s-5); border-top: 1px solid var(--ground-3); font-size: var(--t-xs); color: var(--text-2); max-width: 78ch; }
.legal p { margin: 0 0 var(--s-3); }
.legal strong { color: var(--text); }

/* ---------------------------------------------------------------- touch */
@media (pointer: coarse), (max-width: 760px) {
  .nav a, .foot ul a { min-height: 44px; display: inline-flex; align-items: center; }
  .act { min-height: 52px; display: inline-flex; align-items: center; }
  /* .legal a stays inline: it sits in running prose, where WCAG 2.5.8's
     inline exception applies and a 44px box would break the paragraph. */
}

/* ---------------------------------------------------------------- reduced */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  /* the seat still resolves instantly, because a press must acknowledge (§10) */
}

/* IMAGERY — inline photo band, added with the lock photographs.
   .shot img is locked to a 4/5 portrait crop for the hero; these are landscape
   and sit in the flow of a section, so they get their own class. */
.plate-photo { position: relative; max-width: 880px; margin: var(--s-10) 0 var(--s-12);
  border: 2px solid var(--edge); box-shadow: 10px 10px 0 var(--edge);
  background: var(--ground-3); }
.plate-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.72) contrast(1.16) brightness(.86); }
.plate-photo figcaption { font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--text-2); background: var(--ground-2);
  padding: var(--s-3) var(--s-4); border-top: 2px solid var(--edge); }

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero__say,.hero__num .k{color:#d0d1ca}.collage__copy .display{max-width:13ch}.hero__say{font-size:17px;line-height:1.6}