/* Iron Horse Antiques — "double-rail" preset (2026-09-25, reworked to Wren's site-plan.md).
   Identity: a plain length of railroad track, from the business's own name ("iron horse" is the
   old name for a steam locomotive): two thin rails crossed by short, evenly spaced ties. Lines
   only, nothing figurative. The only dark-surface demo in the set: warm iron-oxide charcoal
   across the whole page, ash text, rust ties and actions, steel-grey rails.

   Type (two families, both SIL OFL 1.1, vendored in assets/fonts with their licences):
   - Bodoni Moda for display only, never below 28px: the h1, the tagline (both appearances, in
     the italic), section headings and the hours lead line. Optical size pinned at 28 so the
     hairlines hold together on a dark surface instead of breaking up (the archived Artist's
     Choice build found the default opsz 96 reads as broken letters at display sizes).
     Copied from golden-path/archive/artists-choice-framing-gallery-20260925T114727/.
   - JetBrains Mono for everything else, and so for every figure: phone, street number, zip and
     hours. A monospace built for unambiguous digits means a Bodoni "4" can never read as a "1".
   No CDN, no JavaScript, no third-party request.

   Contrast (WCAG 2.x relative luminance, computed from the hex values; unchanged from the
   measured earlier build because the colours are unchanged — the new faces are only ever set at
   16px+ for mono and 28px+ for Bodoni, weight 500+):
     ash #efeae1 on iron #1c1a18 ......... 14.5:1   rust #d97b3f on iron ........ 5.7:1
     iron on rust (button labels) ........ 5.7:1    rail #9a948a on iron ........ 5.8:1
     iron on ash (hover, skip link) ...... 14.5:1 */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/bodoni-moda-latin.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("fonts/bodoni-moda-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2"); }

:root {
  --iron: #1c1a18;
  --ash: #efeae1;
  --rust: #d97b3f;
  --rail: #9a948a;
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 72rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; background: var(--iron); }
body { margin: 0; background: var(--iron); color: var(--ash); font: 400 1.0625rem/1.6 var(--mono); font-variant-numeric: slashed-zero; }
p, h1, h2, dl, dd, address { margin: 0; }
address { font-style: normal; }
::selection { background: var(--rust); color: var(--iron); }
a { color: var(--rust); text-underline-offset: .22em; text-decoration-thickness: .08em; transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
a:hover { color: var(--ash); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: .5rem; z-index: 60; background: var(--ash); color: var(--iron); padding: .75rem 1rem; font-weight: 700; }
.skip:focus { left: .5rem; }
.fig { white-space: nowrap; }

/* Display type. One family, pinned optical size, never under 28px. */
.hero__h1, .sec-h, .hours__lead, .quote {
  font-family: var(--display);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 28;
  text-wrap: balance;
}

/* ---------------------------------------------------------- the double rail
   Two steel-grey rails laid over rust ties at an even pitch. The rails are the top layers, as on
   real track. Drawn once on load, left to right, with transform only; not under reduced motion. */
@keyframes lay { from { transform: scaleX(0); } }
.rail {
  height: 16px;
  background:
    linear-gradient(var(--rail), var(--rail)) 0 4px / 100% 2px no-repeat,
    linear-gradient(var(--rail), var(--rail)) 0 10px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--rust) 0 2px, transparent 2px 22px);
  transform-origin: left center;
  animation: lay 1.2s var(--ease) both;
}

/* ------------------------------------------------------------------ header */
.head { position: sticky; top: 0; z-index: 40; background: var(--iron); }
.head__in { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding-block: .5rem; }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; color: var(--ash); text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.brand:hover { color: var(--ash); }
.rail--head { height: 12px; background-position: 0 3px, 0 7px, 0 0; animation-duration: 1s; }

.call { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .6em; background: var(--rust); color: var(--iron); text-decoration: none; font-weight: 700; border-radius: 2px; transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); }
.call:hover { background: var(--ash); color: var(--iron); }
.call:active, .btn-line:active { transform: scale(.98); }
.call--head { flex: none; flex-direction: column; min-height: 48px; padding: .3rem .75rem; line-height: 1.2; }
.call--head .call__verb { font-size: .8125rem; }
.call--head .call__num { font-size: .875rem; }
.call--big { min-height: 56px; padding: .8rem 1.25rem; font-size: 1.0625rem; line-height: 1.3; }

.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: .8rem 1.25rem; border: 2px solid var(--ash); border-radius: 2px; color: var(--ash); font-weight: 700; font-size: 1.0625rem; text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease); }
.btn-line:hover { background: var(--ash); color: var(--iron); }

/* -------------------------------------------------------------------- hero
   The name, large and in two lines, then their own sentence in the italic, hung a step in from
   the name like a line written under a sign. */
.hero { padding-block: 2.25rem 3rem; }
.hero__h1 { font-weight: 500; font-size: clamp(3.25rem, 1.6rem + 7vw, 7.5rem); line-height: .95; letter-spacing: -.015em; max-width: 8em; }
.quote { color: var(--rust); font-style: italic; font-weight: 400; line-height: 1.12; }
.quote--open { margin-top: 1rem; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); }
.hero__addr { margin-top: 1.5rem; line-height: 1.5; }
.hero__addr > span { white-space: nowrap; }
.hero__acts { display: grid; gap: .7rem; margin-top: 1.75rem; }

/* ------------------------------------------------------------------ hours */
.sec-h { font-weight: 600; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; }
.hours { padding-block: 3rem 3.5rem; }
.hours__in { display: grid; gap: 1.5rem; }
.hours__lead { font-weight: 500; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.4rem); line-height: 1.15; max-width: 16em; }
.hours__act .call { width: 100%; }

/* The track on end: two rails down the sides, every row a tie across them and past them. */
.track { position: relative; margin-top: .5rem; }
.track::before, .track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rail); z-index: 1; }
.track::before { left: .55rem; }
.track::after { right: .55rem; }
.week { width: 100%; border-collapse: collapse; font-size: 1rem; }
.week tr { border-top: 2px solid var(--rust); }
.week tr:last-child { border-bottom: 2px solid var(--rust); }
.week th, .week td { padding: .85rem 1.1rem; vertical-align: baseline; }
.week th[scope="row"] { text-align: left; font-weight: 700; }
.week td { text-align: right; }
.week .t { white-space: nowrap; }
.week .dash { color: var(--rail); }

/* ------------------------------------------------------------------ visit */
.visit { padding-block: 3rem 3.5rem; }
.visit__in { display: grid; gap: 2rem; }
.visit__addr { margin-bottom: 1.25rem; font-size: 1.1875rem; line-height: 1.5; }
.visit__addr > span { display: block; }
.visit__name { font-weight: 700; }
.visit__talk { display: grid; gap: 1.5rem; }
.visit__row { border-left: 2px solid var(--rail); padding-left: 1rem; }
.visit__row dt { font-weight: 700; }
.visit__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.1875rem; overflow-wrap: anywhere; }
.visit__email { font-size: 1.0625rem; }
.visit__note { color: var(--rail); font-size: 1rem; }

/* ----------------------------------------------------------------- footer
   The closing echo: the same sentence as the hero, unchanged, larger, standing on the track. */
.foot { padding-bottom: 2.5rem; }
.foot__close { padding-block: 3.5rem 1.75rem; }
.quote--close { font-size: clamp(2.25rem, 1.1rem + 4.8vw, 5.75rem); line-height: 1.05; max-width: 12em; }
.foot__in { display: grid; gap: 1.5rem; padding-top: 2rem; }
.foot__nap { display: grid; gap: .15rem; }
.foot__name { font-weight: 700; font-size: 1.1875rem; margin-bottom: .25rem; }
.foot__row a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.foot__act .call { width: 100%; }
.foot__disc { display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--rail); color: var(--rail); font-size: 1rem; max-width: 64ch; }

/* ---------------------------------------------------------------- tablets */
@media (min-width: 640px) {
  .call--head { flex-direction: row; padding: .55rem 1rem; }
  .call--head .call__verb, .call--head .call__num { font-size: .9375rem; }
  .brand { font-size: 1rem; }
  .hero__acts { display: flex; flex-wrap: wrap; }
  .hours__act .call, .foot__act .call { width: auto; }
  .track { max-width: 34rem; }
  .week { font-size: 1.0625rem; }
  .week th, .week td { padding-inline: 1.5rem; }
  .track::before { left: .75rem; }
  .track::after { right: .75rem; }
}

/* ---------------------------------------------------------------- desktop
   Still one left-aligned column (plan §5): the space opens up vertically, as chapters, and the
   tagline steps in from the name. */
@media (min-width: 960px) {
  .head__in { min-height: 76px; }
  .brand { font-size: 1.0625rem; }
  .hero { padding-block: 6rem 6.5rem; }
  .quote--open { margin-top: 1.5rem; padding-left: .9em; }
  .hero__addr { margin-top: 2.25rem; font-size: 1.1875rem; }
  .hero__acts { margin-top: 2.5rem; }
  .hours, .visit { padding-block: 6rem 6.5rem; }
  .hours__in { gap: 2rem; }
  .visit__in { gap: 2.5rem; }
  .week { font-size: 1.1875rem; }
  .track { max-width: 40rem; }
  .foot__close { padding-block: 7rem 3rem; }
  .quote--close { padding-left: .6em; }
  .foot__in { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; padding-top: 3rem; }
  .foot__disc { grid-column: 1 / -1; margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { animation: none; }
  a, .call, .btn-line { transition: none; }
  .call:active, .btn-line:active { transform: none; }
}