/* ─────────────────────────────────────────────────────────────────────
   Soulard Content Studio — locomotiondigital.com

   The identity is kept from the previous site: Cinzel over Crimson Text,
   warm paper, brass. Three things are changed on purpose.

   1. A second accent. The old site was gold on brown on gold, and with no
      photography to break it up every section read at the same volume.
      Oxide red (the livery colour on the streamliners the name refers to)
      carries anything the visitor must not skim.
   2. A drafting register. There is no room to photograph yet, so the site
      does not pretend there is. It presents itself as an engineering plate
      for something under construction — which is exactly what this is.
   3. Real vertical rhythm. Everything below is on one spacing scale.

   Committed to a single light "paper" look rather than shipping a dark
   variant. This is a print-plate aesthetic; inverting it would be a
   different design, not the same one at night. Every colour is painted
   explicitly so nothing is inherited from the browser.

   HARD RULE, learned the expensive way on three of these sites: never set
   the `padding` shorthand on anything that shares an element with .wrap.
   A trailing 0 in the shorthand kills .wrap's padding-inline at equal
   specificity and every page renders flush to the screen edge on phones.
   Use padding-block. check.js fails the build if this reappears.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ink:      #17130E;
  --ink-2:    #514738;
  --ink-3:    #7A6E5C;
  --paper:    #F4EFE6;
  --paper-2:  #EAE1D1;
  --rule:     #D6C9B1;
  /* Brass is deep enough to carry small text on paper and to sit under
     near-white on a filled button. The obvious lighter gold measured 3.79:1
     behind the 11px eyebrows and 4.15:1 under the button label — both under
     the 4.5:1 floor for text this size. browser-check.js measures this now
     rather than leaving it to the eye. */
  --brass:    #815711;
  --brass-lt: #E9C07A;
  --oxide:    #8C3A20;
  --dark:     #191410;
  --dark-2:   #241C15;

  --f-display: Cinzel, "Trajan Pro", Georgia, serif;
  --f-body:    "Crimson Text", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  --measure: 62ch;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-synthesis-weight: none;
}

img, svg { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.sec { padding-block: clamp(var(--s-5), 9vw, var(--s-6)); }
.sec--tight { padding-block: clamp(var(--s-4), 6vw, var(--s-5)); }

.sec--dark { background: var(--dark); color: var(--paper-2); }
.sec--dark h2, .sec--dark h3 { color: var(--paper); }
.sec--tone { background: var(--paper-2); }

.rule-top { border-top: 1px solid var(--rule); }

/* ── type ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 var(--s-2); max-width: var(--measure); }

/* Anything on a dark ground takes the dark-ground colours. .hero is listed
   everywhere .sec--dark is: it has the same near-black background, and when
   it was missing from these selectors the hero lede inherited --ink-2, which
   is dark brown text on a dark brown field. */
.sec--dark p, .hero p { color: #D9CFBD; }

a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 0.18em; }
a:hover { color: var(--oxide); }
.sec--dark a:hover, .hero a:hover, .ftr a:hover { color: var(--brass-lt); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--s-2);
}
.sec--dark .eyebrow, .hero .eyebrow { color: var(--brass-lt); }

.lede { font-size: clamp(1.2rem, 2.2vw, 1.42rem); color: var(--ink-2); }
.sec--dark .lede, .hero .lede { color: #CFC4B0; }

.small { font-size: 0.95rem; color: var(--ink-3); }

/* ── contact bar ──────────────────────────────────────────────────────
   Sits directly under the header. For a local service business the phone
   number and the neighbourhood are the two things a visitor hunts for
   first, and putting them above the fold saves a trip to the footer.
   The nav collapses below 720px; this bar does not, which is deliberate —
   on a phone, the phone number is the point. */

.status {
  background: var(--dark-2);
  color: #C6B99F;
  border-top: 1px solid #33291F;
}
.status__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-block: 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.status b {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-lt);
}
.status a { color: #C6B99F; text-decoration: none; }
.status a:hover { color: var(--brass-lt); text-decoration: underline; }

/* ── header ───────────────────────────────────────────────────────── */

.hdr { background: var(--dark); color: var(--paper); }
.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-2);
}

.mark { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; color: var(--paper); }
.mark__name {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mark__rule { display: block; width: 26px; height: 1px; background: var(--brass-lt); }

.nav { display: flex; align-items: center; gap: var(--s-3); }
.nav a {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #CDBFA6;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brass-lt); }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ── buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.78rem;
  padding-inline: 1.35rem;
  border: 1px solid var(--brass);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--brass); color: #FFF9EF; }
.btn--solid { background: var(--brass); color: #FFF9EF; border-color: var(--brass); }
.btn--solid:hover { background: var(--oxide); border-color: var(--oxide); color: #FFF6F1; }
.btn--onDark { color: var(--paper); border-color: var(--brass-lt); }
.btn--onDark:hover { background: var(--brass-lt); color: var(--dark); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* ── hero ─────────────────────────────────────────────────────────── */

.hero { background: var(--dark); color: var(--paper); }
.hero__inner { padding-block: clamp(var(--s-4), 7vw, var(--s-6)); }
.hero h1 { color: var(--paper); max-width: 15ch; }
.hero .lede { max-width: 46ch; margin-top: var(--s-3); }

/* ── the plate ────────────────────────────────────────────────────────
   The studio has never been photographed because it has not been built.
   Rather than borrow a stock photo of somebody else's room, the drawing
   IS the hero: a floor plan, captioned as a plan. Nothing here can be
   mistaken for a photograph of a place that exists. */

.plate {
  border: 1px solid rgba(226,178,105,.35);
  background: linear-gradient(180deg, #1E1811, #171209);
  padding: clamp(1rem, 3vw, 1.75rem);
  margin-top: var(--s-4);
}
.plate svg { display: block; width: 100%; height: auto; }
.plate__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(226,178,105,.25);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A9997E;
}
.plate__cap b { color: var(--brass-lt); font-weight: 500; }

/* Plate label type. Lives here rather than in a <style> inside the SVG,
   because that block would leak to the whole document and be duplicated on
   any page that draws the plate more than once. */
.pl-t, .pl-l, .pl-d { font-family: var(--f-mono); }
.pl-t { font-size: 11px; letter-spacing: .12em; fill: #A9997E; }
.pl-l { font-size: 13px; letter-spacing: .20em; fill: #E3B569; }
.pl-d { font-size: 11px; letter-spacing: .16em; fill: #A9997E; }

/* ── numbered specification list ──────────────────────────────────────
   Numbered because this genuinely is a sequence: the order the room gets
   built in. Not decoration. */

.spec { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sec--dark .spec { background: #322920; border-color: #322920; }
@media (min-width: 760px) { .spec { grid-template-columns: repeat(2, 1fr); } }

.spec li { background: var(--paper); padding: var(--s-3); }
.sec--dark .spec li { background: var(--dark-2); }

.spec__n {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--brass);
  display: block;
  margin-bottom: 0.55rem;
}
.sec--dark .spec__n { color: var(--brass-lt); }
.spec h3 { margin-bottom: 0.45rem; }
.spec p { font-size: 1rem; margin-bottom: 0; color: var(--ink-2); }
.sec--dark .spec p { color: #C6BAA6; }

/* ── plain two-column prose ───────────────────────────────────────── */

.cols { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.cols p:last-child { margin-bottom: 0; }

/* ── form ─────────────────────────────────────────────────────────── */

.form { margin-top: var(--s-3); max-width: 34rem; }
.form__row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.form label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin-bottom: 0.4rem;
}
.form input, .form textarea, .form select {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1.02rem;
  color: var(--paper);
  background: #120E0A;
  border: 1px solid #3B3125;
  padding-block: 0.7rem;
  padding-inline: 0.85rem;
}
.form input::placeholder, .form textarea::placeholder { color: #6E6353; }
.form textarea { min-height: 6.5rem; resize: vertical; }

/* Honeypot. Never name it after a real field — a honeypot called "company"
   gets autofilled by the browser and silently discards genuine people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Skip link: off-screen until focused, then a real visible control.
   Not .hp — that one must never come back, and this one must. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--brass);
  color: #FFF9EF;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.6rem;
  padding-inline: 1rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.form__note { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: #9C907C; margin-top: var(--s-2); }
.form__msg { margin-top: var(--s-2); font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; }
.form__msg[data-state="ok"]   { color: var(--brass-lt); }
.form__msg[data-state="err"]  { color: #E9927A; }

/* ── faq ──────────────────────────────────────────────────────────── */

.faq { margin-top: var(--s-4); border-top: 1px solid var(--rule); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--s-2);
  font-family: var(--f-display);
  font-size: 1.08rem;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--brass); }
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding-bottom: var(--s-2); margin-bottom: 0; color: var(--ink-2); }

/* ── cross-link to Rigboom ────────────────────────────────────────── */

.sibling { border: 1px solid var(--rule); background: var(--paper); padding: var(--s-3); }
.sibling h3 { margin-bottom: 0.5rem; }
.sibling p { margin-bottom: var(--s-2); }

/* ── footer ───────────────────────────────────────────────────────── */

.ftr { background: var(--dark); color: #A9997E; }
.ftr__inner { padding-block: var(--s-5); display: grid; gap: var(--s-4); }
@media (min-width: 820px) { .ftr__inner { grid-template-columns: 1.6fr 1fr 1fr; } }
.ftr h4 {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin: 0 0 var(--s-2);
  font-weight: 500;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ftr a { color: #C6B99F; text-decoration: none; font-size: 0.98rem; }
.ftr a:hover { color: var(--brass-lt); }
.ftr p { color: #9C8F79; font-size: 0.98rem; }
.ftr__legal {
  border-top: 1px solid #2E251C;
  padding-block: var(--s-2);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #7C7160;
}

/* ── 404 ──────────────────────────────────────────────────────────── */

.mid { min-height: 58vh; display: flex; align-items: center; }