/* Le Social House - shared foundation
   ---------------------------------------------------------------------------
   Loaded by every page. Holds the design tokens, the reset and the typeface,
   so every page shares one palette and one font.

   Load order is always base.css first, then pages.css. The many references to
   "the machine" below are the design's provenance: the slot machine homepage
   is parked on the slot-machine branch, and this palette and its lit-from-above
   surfaces were derived from that artwork.
   ------------------------------------------------------------------------- */

/* Jost, SIL Open Font Licence 1.1. Self-hosted rather than pulled from Google
   Fonts: no third-party connection ahead of the LCP, and no visitor IPs handed
   to a third party.

   One variable file covers the whole 400-700 range - 26 KB for every weight
   the site uses. The latin subset is enough: French needs nothing outside
   U+0000-00FF beyond the oe ligature at U+0153, which the subset includes.

   Jost is the open Futura, and the button plates were laid out against Futura
   metrics in Phase 1, so this drops in without moving any geometry. What it
   buys is type that renders identically everywhere instead of resolving to
   whatever each phone happens to have installed. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/jost-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* GREYSCALE, and deliberately so (owner's call, 2026-08-15).
     ------------------------------------------------------------------------
     This palette used to be sampled straight off the machine artwork - gold on
     near-black, --ink #eeba8a. It disappeared nicely INTO the artwork on the
     homepage and read as muddy beige-on-brown everywhere else, and it lost a
     straight fight with the team portraits, which are shot on a hard baby-blue
     backdrop. Three colour stories on one site: warm gold, cool blue, and a
     beige UI trying to mediate. That is what "something is off" was.

     So: the SITE is neutral greyscale, and exactly TWO things on it are allowed
     a hue - the machine, and the people. Monochrome frame, two focal points.

     The portraits were briefly desaturated too and that was reverted the same
     day (owner, 2026-08-15): the barbers are the product on a people business,
     skin tone is most of what somebody is judging when they pick who to sit
     with, and greyscale portraits read cold. The blue backdrop is the price and
     it is a real one - css/pages.css scrims it down on the card, and the actual
     fix is a reshoot, which is a client conversation.

     The machine's own plate labels still need warm ink - they sit on warm
     artwork - so css/machine.css re-declares --ink / --ink-dim / --ink-on-gold
     scoped to .machine. That scope is exact on purpose: the language toggle is
     a SIBLING of .machine inside .stage, so it stays neutral like the rest of
     the site chrome rather than going warm on one page out of four.

     Greys are a hair warm (a touch more red than blue) rather than pure
     neutral. Against the machine's gold, a truly cool grey reads as a blue
     cast - the exact problem being fixed. */
  --ink: #ededea;             /* primary text */
  --ink-dim: #9a9a95;         /* secondary text, small caps labels */
  --ink-on-accent: #0e0e0d;   /* text on a lit steel surface */
  --bg: #0b0b0a;              /* page ground */
  --accent: #d4d4cf;          /* lit steel - the old --gold's structural role */
  --accent-hi: #f0f0ec;       /* top of a lit bevel */
  --surface: #151514;         /* cards, sitting above the ground */
  --surface-2: #1f1f1e;       /* raised surface, hover */
  --line: rgba(255, 255, 255, .12);

  --font-ui: "Jost", "Futura", "Century Gothic", "Avenir Next", ui-sans-serif,
             system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout, shared by the subpages and by the footer - which is on every page,
     the homepage included. */
  --pad: clamp(1.15rem, 5vw, 2rem);   /* page gutter */
  --measure: 62rem;                   /* content ceiling */
  --gap: clamp(1rem, 3.5vw, 1.6rem);
}

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

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  /* Kept from Phase 1 now that the homepage scrolls: this does not stop
     scrolling, it stops the overscroll affordances. Without it, dragging down
     on the machine triggers pull-to-refresh, and a stray drag mid-spin
     reloading the page is a genuinely bad outcome on an interactive page. */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every page is a keyboard target somewhere. The machine overrides this with
   its own cqw-sized ring; this is the default for ordinary page content. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- cross-document view transitions -------------------------------------
   Four separate HTML documents with no build step, so every nav used to be a
   hard white-to-black flash. This is the whole fix and it is pure CSS: one
   at-rule, no JavaScript, and browsers without support simply navigate the way
   they always did. Nothing depends on it, which is the point - the same reason
   BOOK is plain markup.

   The pages are meant to read as one place, but the machine and the content
   pages have such different visual density that a direct crossfade turns into
   a muddy double exposure. Fade the old page fully to black, hold that black
   for one short beat, then bring the destination in. The cut reads as a door
   opening instead of two unrelated compositions being stacked together.

   Two elements are NAMED so they are treated as the same object across the
   navigation instead of being composited into the root capture. They still use
   the same staged opacity below so nothing remains visible during the black
   beat. A name must be unique per document; each appears exactly once. */
@view-transition { navigation: auto; }

::view-transition-group(root),
::view-transition-group(sitefoot),
::view-transition-group(langtoggle) { animation-duration: .39s; }

/* 140ms out + 50ms black + 200ms in. The incoming delay is what prevents the
   two pages from ever being visible together. There is deliberately no
   translation: the machine already supplies all the motion this handoff needs. */
::view-transition-old(root),
::view-transition-old(sitefoot),
::view-transition-old(langtoggle) {
  animation: lsh-out .14s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root),
::view-transition-new(sitefoot),
::view-transition-new(langtoggle) {
  animation: lsh-in .20s cubic-bezier(0, 0, .2, 1) .19s both;
}

@keyframes lsh-out { to { opacity: 0; } }
@keyframes lsh-in { from { opacity: 0; } }

.sitefoot     { view-transition-name: sitefoot; }
.lang-toggle  { view-transition-name: langtoggle; }

/* A named element is lifted out of the page and animated on its own layer, so
   the machine - which is the LCP and the whole visible page on first paint -
   is deliberately NOT named. It stays part of the root capture and costs one
   texture rather than two. */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- language toggle -----------------------------------------------------
   Only its *look* is here; pages.css positions it - in the page header on the
   subpages, in the hero bar on the homepage. */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(11, 11, 10, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lang-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: none;
  color: var(--ink-dim);
  font: inherit;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .16s ease-out, color .16s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn.is-on {
  background: var(--accent);
  color: var(--ink-on-accent);
}
@media (hover: hover) {
  .lang-btn:not(.is-on):hover { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-btn { transition: none; }
}

/* --- site footer ---------------------------------------------------------
   The site's entire crawlable local-SEO surface, and the only block that
   appears on all four pages - which is why it is styled here rather than in
   pages.css. The markup is copy-pasted between the four; see the sync comment
   in the HTML before editing one copy. */

.sitefoot {
  margin-top: clamp(3rem, 10vw, 5rem);
  border-top: 1px solid var(--line);
  background: #080807;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.sitefoot__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2rem, 8vw, 3rem) var(--pad) 1.5rem;
  display: grid;
  gap: clamp(1.75rem, 6vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .sitefoot__inner { grid-template-columns: repeat(3, 1fr); }
}

.sitefoot h2 {
  margin: 0 0 0.8rem;
  color: var(--ink-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sitefoot address {
  font-style: normal;
  line-height: 1.6;
  font-size: 0.95rem;
}

.sitefoot a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
}
@media (hover: hover) {
  .sitefoot a:hover { text-decoration-color: currentColor; }
}

.sitefoot__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sitefoot__links a {
  display: inline-block;
  padding-block: 0.5rem;   /* 44px tap target without inflating the type */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  text-decoration: none;
}

.hours {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.hours dt { color: var(--ink-dim); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.sitefoot__legal {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1.25rem var(--pad) 0;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

/* --- placeholder marker --------------------------------------------------
   Wraps copy the client has not supplied yet. Every one also carries a
   data-todo attribute, so the whole set is greppable before launch:
       grep -rn 'data-todo' *.html
   OFF on the live site since the launch build (2026-10-09): visitors were about
   to see a dotted underline under six barbers' roles. The data-todo attributes
   still mark every gap. To see them while working, add class="show-todo" to
   <html> in devtools.

   text-decoration rather than a border: the marker has to sit on block
   elements too (the hours list, a multi-line address), and a border-bottom
   there draws one full-width rule under the whole box, which reads as a stray
   divider rather than as an unfilled blank. An underline follows the text. */
.show-todo .todo {
  text-decoration: underline dotted rgba(255, 255, 255, .42);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}