/* Homepage-only corrections that are not about any theme.

   These used to live in home-theme.css alongside the Noir palette. Deleting
   that file with the theme took them out too and brought back both faults
   it had fixed: the masthead overflowed and the muted grey failed contrast.
   They belong in their own file precisely so a theme change cannot carry
   them off again. */

/* The muted grey #8d857d measured 3.63:1 on white and 3.37:1 on the cream
   band, under the 4.5 floor for small print. #656a70 clears both. */
:root { --ink-3: #656a70; }

/* Eight keyword labels did not fit a 1240px bar -- the masthead measured
   1704px and gave the whole page a sideways scroll. The labels stay, so the
   bar gets wider and tighter, and below 1320px the menu button takes over. */
.nav-in { width: min(1480px, 96vw); gap: 18px; }
.nav-links { gap: 14px; }
.nav-links a { font-size: 10px; letter-spacing: .06em; }

@media (max-width: 1320px) {
  .nav-links { display: none; }
  .nav-links[data-open] {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: #0d0c0c; border-bottom: 1px solid rgba(255,255,255,.14);
    padding: 16px 4vw; gap: 2px;
  }
  .nav-links[data-open] a { padding: 11px 0; font-size: 13px; letter-spacing: .1em; }
  .burger { display: flex; }
  .nav .btn { margin-left: 12px; }
}

/* ---- black masthead ----------------------------------------------------
   Every other page carries a black masthead; the home page's was a pale
   translucent cream, which since the page itself went white read as no bar
   at all. Same black, same rules, so the chrome is one thing across the
   site. */
.nav {
  background: #0d0c0c; backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav.stuck { border-bottom-color: rgba(255,255,255,.16); box-shadow: 0 6px 24px -18px rgba(0,0,0,.8); }
.nav .brand-name { color: #fff; }
.nav .brand-sub { color: rgba(255,255,255,.52); }
.nav-links a { color: rgba(255,255,255,.78); }
.nav-links a:hover, .nav-links a.on { color: #fff; }
.nav-links a::after { background: #ff6a5e; }
.burger { border-color: rgba(255,255,255,.28); }
.burger span, .burger span::before, .burger span::after { background: #fff; }

/* ---- the order request shortcut is now two links ---------------------- */
.book-acts { display: grid; gap: 10px; position: relative; }
.book-acts .btn { width: 100%; }
/* On this near-black card the red outline measured 3.4:1, so the second
   button takes a white outline instead. */
.book .btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.book .btn-ghost:hover { background: #fff; border-color: #fff; color: #17161a; }

/* The footer is black on every page, so the homepage matches the rest. The
   value is the masthead's black, not the warmer --char, so the bar at the
   top and the bar at the foot are the same colour. */
.foot {
  background: #0d0c0c; border-top: 0; color: #fff;
  --ink: #ffffff; --ink-2: rgba(255,255,255,.76); --ink-3: rgba(255,255,255,.58);
  --line: rgba(255,255,255,.14); --paper: rgba(255,255,255,.07); --cream-2: #0d0c0c;
}
.foot a { color: rgba(255,255,255,.76); }
.foot a:hover { color: #fa3030; }
.foot h4, .foot .brand-name { color: #fff; }
.foot .brand-sub { color: rgba(255,255,255,.5); }
.foot .signup input { color: #fff; }
.foot .signup input::placeholder { color: rgba(255,255,255,.5); }
.foot-art { opacity: .16; filter: invert(1); }