/* ============================================================
   Fade House — "after hours"
   Signage and chrome at night. Condensed uppercase display type,
   a true near-black ground, hairlines that are meant to be seen,
   zero radii, and near-monochrome photography. The verdigris is
   used the way a neon tube is used: on almost nothing, so it reads.
   Loaded after tokens.css, base.css and demo.css.
   ============================================================ */

:root {
  /* --- Type: condensed grotesque display, quiet sans body ------
     Oswald is tall and narrow; Inter is set small and plain. The gap
     between the two is the whole personality of the page. */
  --font-display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The shared system reaches for a monospace on every micro-label.
     Here those labels are Inter, tracked hard — stencilled, not terminal. */
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Condensed caps want air between letters, not less of it. */
  --tr-tight: 0.045em;
  --tr-snug: 0.02em;
  --tr-normal: 0;
  --tr-wide: 0.22em;

  --lh-tight: 0.92;
  --lh-snug: 1.04;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  /* --- Ground: deeper than the shared default -----------------
     Neutral, not warm: this is chrome and mirror glass, not candlelight. */
  --ink-000: #030304;
  --ink-050: #0b0b0d;
  --ink-100: #101013;
  --ink-200: #17171b;
  --ink-300: #232329;
  --ink-400: #3a3a43;
  --ink-500: #55555f;

  --paper-000: #fafaf9;
  --paper-100: #ececeb;
  --paper-200: #cfcfcc;
  --paper-300: #adaca8;
  --paper-400: #9a9994;

  /* Hairlines are part of the drawing here, so they are brighter than
     the shared 0.09 / 0.16 — visible rules, not hints of one. */
  --line: rgb(255 255 255 / 0.15);
  --line-strong: rgb(255 255 255 / 0.32);
  --rule-soft: rgb(255 255 255 / 0.42);
  --tint: rgb(255 255 255 / 0.08);

  --scrim-rgb: 3 3 4;
  --header-veil: rgb(3 3 4 / 0.9);

  /* --- Accent: verdigris, pulled a touch cooler and brighter --- */
  --accent: #4f9d94;
  --accent-text: #74c9be;
  --accent-contrast: #04100e;
  --danger: #ff9a8a;

  /* --- Shape: no radius anywhere ------------------------------- */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-full: 0;

  --shadow-lift: none;
  --shadow-deep: none;

  /* --- Scale: display huge, body small -------------------------
     Capped below the shared maximum because condensed caps at 8rem run
     the full measure and start to overflow the wrap on long headlines. */
  --t-eyebrow: 0.75rem;
  --t-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-lead: clamp(1rem, 0.95rem + 0.32vw, 1.25rem);
  --t-h3: clamp(1.25rem, 1.06rem + 0.9vw, 1.875rem);
  --t-h2: clamp(2rem, 1.3rem + 3.4vw, 4.5rem);
  --t-h1: clamp(2.5rem, 1.3rem + 6vw, 6.75rem);
}

/* The scroll-linked wash is driven by JS on the root element, so its
   alpha cannot be overridden from here — the layer itself is damped
   instead. Near-monochrome means the ground stays black. */
body::before { opacity: 0.5; }

/* --- Display type ---------------------------------------------
   Every headline is set as signage: caps, tracked, leading pulled in
   until the lines nearly touch. */

.display {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}

/* Oswald ships no italic and a synthesised slant looks like a mistake.
   The accent word is set in the verdigris with a rule under it instead —
   the one place on the page where the colour is allowed to shout. */
.display em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-text);
  /* The rule is held tight to the baseline: at 0.92 leading the cap-top of
     the next line arrives ~0.20em down, so anything lower would strike it. */
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.048em;
  text-underline-offset: 0.045em;
}

/* The line-reveal mask clips at the bottom; the accent rule sits below
   the baseline, so the mask needs more room than the shared 0.16em. */
.line {
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

/* --- Micro-labels ---------------------------------------------
   Eyebrows, field labels, fact keys. Inter at 600 with very wide
   tracking: stencilled onto the page rather than typed into it. */

.eyebrow,
.d-facts dt,
.d-form label,
.d-email__label,
.d-banner {
  font-weight: 600;
  letter-spacing: var(--tr-wide);
}

.eyebrow { color: var(--text-muted); }

.eyebrow::before {
  width: var(--s-8);
  background: var(--text-muted);
}

/* Section heads carry no CSS of their own in the shared system. A poster
   needs the eyebrow, the headline and the standfirst held apart. */
.section__head { margin-bottom: var(--s-8); }
.section__head .eyebrow { margin-bottom: var(--s-5); }
.section__title { margin-bottom: var(--s-5); }

/* --- Header ---------------------------------------------------- */

.d-banner {
  background: var(--ink-000);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  /* Tighter than the other stencilled labels: at 0.22em this wraps to four
     lines on a phone and starts to outweigh the page it sits above. */
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.d-header.is-stuck { border-bottom-color: var(--line-strong); }

.d-brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  letter-spacing: 0.16em;
}

.d-nav {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  gap: var(--s-7);
}

/* --- Buttons: square signage plates ----------------------------- */

.btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  padding: var(--s-4) var(--s-6);
  border-radius: 0;
}

/* .btn--sm carries no rules in the shared system, so the header plate came
   out the same size as the hero's. Here it is a smaller stamp. */
.btn--sm { padding: var(--s-3) var(--s-4); font-size: 0.8125rem; }

.btn:hover { transform: none; opacity: 1; background: var(--accent-text); }
.btn--ghost {
  border-color: var(--line-strong);
  border-width: 1px;
}
.btn--ghost:hover { background: var(--tint); border-color: var(--paper-000); }

/* --- Hero: a poster, not a photograph with words on it ----------
   The scrim is pushed almost opaque where the type sits so the picture
   reads as a printed ground. The photo underneath is nearly monochrome. */

.d-hero {
  min-height: 92svh;
  /* Declared, not merely inherited: body sets `color: var(--text)`, so the
     computed colour is already resolved by the time it lands here. Any
     re-scoping of the tokens below would otherwise miss the headline. */
  color: var(--text);
}

.d-hero__media img {
  filter: grayscale(0.92) contrast(1.22) brightness(0.55);
}

.d-hero::after {
  background:
    linear-gradient(to top,
      rgb(var(--scrim-rgb) / 0.98) 0%,
      rgb(var(--scrim-rgb) / 0.88) 36%,
      rgb(var(--scrim-rgb) / 0.62) 66%,
      rgb(var(--scrim-rgb) / 0.76) 100%),
    linear-gradient(to right,
      rgb(var(--scrim-rgb) / 0.9) 0%,
      rgb(var(--scrim-rgb) / 0.6) 55%,
      rgb(var(--scrim-rgb) / 0.34) 100%);
}

.d-hero__title {
  font-size: clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  max-width: 15ch;
  margin-bottom: var(--s-6);
}

.d-hero__lead {
  color: var(--paper-200);
  max-width: 44ch;
}

.d-facts { border-top: 1px solid var(--line-strong); }
.d-facts dd { font-size: var(--t-small); color: var(--paper-100); }

/* --- Photographs: chrome, not colour ---------------------------- */

.d-intro__media img,
.d-shot img {
  filter: grayscale(0.9) contrast(1.18) brightness(0.68);
}

.d-shot:hover img {
  scale: 1.03;
  filter: grayscale(0.55) contrast(1.14) brightness(0.82);
}

.d-intro__media,
.d-shot {
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--ink-000);
}

/* A flush contact sheet rather than a ragged mosaic: fixed row height and
   2px gutters so the four frames lock into one block. The shared grid lets
   the 4/3 frames sit short against the 16/9 ones, which reads as a fault. */
.d-gallery { gap: 2px; }

@media (min-width: 45rem) {
  .d-gallery { grid-auto-rows: clamp(14rem, 24vw, 22rem); }
  .d-shot,
  .d-shot--wide { aspect-ratio: auto; }
}

/* --- The price board -------------------------------------------
   Ruled rows, name and price both in the condensed face, price hard
   right, dotted leader running between them. This is the one component
   that should be recognisable from across the room. */

.d-group > .d-group__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent-text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
}

.d-item {
  padding-block: var(--s-4);
  gap: var(--s-2) var(--s-5);
  border-top: 1px solid var(--line);
}

.d-list .d-item__name {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.0625rem, 0.92rem + 0.7vw, 1.5rem);
  letter-spacing: 0.09em;
  line-height: 1.1;
  color: var(--text);
}

/* Leader dots close the gap to the price the way a printed board does. */
.d-list .d-item__name::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--s-6);
  border-bottom: 1px dotted var(--line-strong);
  transform: translateY(-0.28em);
}

.d-item__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.92rem + 0.7vw, 1.5rem);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.d-item__note {
  font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0;
  max-width: 62ch;
}

/* --- Cards: plates with a hairline, no rounding ------------------ */

.d-reviews { gap: 1px; }

.d-review {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s-6) var(--s-5);
  gap: var(--s-3);
}

/* Set in the condensed face but left in sentence case — a paragraph of
   caps would be unreadable, and the quotes are full sentences. */
.d-review blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: none;
}

.d-review__stars { letter-spacing: 0.28em; }

.d-review figcaption {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* The barbers reuse the review card. Their label stays a small stencil,
   and their name takes the condensed caps instead of the price-board rule. */
.d-review .d-group__label {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  color: var(--text-dim);
  margin-bottom: 0;
}

.d-review .d-item__name {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--text);
}

/* --- Visit ------------------------------------------------------ */

/* This headline sits in a half-width column, so it takes the h2 size.
   At the full h1 the condensed caps broke to three ragged lines. */
.d-visit__inner .t-h1 { font-size: var(--t-h2); }

.d-address {
  letter-spacing: 0;
  color: var(--text-muted);
}

.d-hours div { border-top: 1px solid var(--line); }

.d-hours dt {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--text-dim);
}

.d-hours dd {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.d-email__addr {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  letter-spacing: 0.05em;
}

/* --- Form: readable, square, plain ------------------------------ */

.d-form {
  background: var(--ink-050);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s-7) var(--s-6);
}

.d-form input,
.d-form textarea,
.d-form select {
  background: var(--ink-000);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: var(--t-body);
  letter-spacing: 0;
  padding: var(--s-3) var(--s-4);
}

.d-form input:focus,
.d-form textarea:focus,
.d-form select:focus {
  background: var(--ink-000);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.d-form input::placeholder,
.d-form textarea::placeholder { color: var(--paper-400); }

.d-form .btn { justify-self: start; }

/* --- Footer ------------------------------------------------------ */

.d-footer { border-top: 1px solid var(--line-strong); }

.d-back,
.d-footer__fine {
  letter-spacing: 0;
}

.d-back {
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-wide);
}