/* ============================================================
   Kestrel Coffee — "paper"
   The one light site in the set. Warm off-white ground, ink text,
   a grotesk instead of a serif, and near-square corners: it should
   read as a different studio's work, not a recoloured template.
   Loaded after tokens.css, base.css and demo.css.
   ============================================================ */

:root {
  /* --- Type: geometric grotesk, no serif anywhere -------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tr-tight: -0.03em;
  --tr-snug: -0.018em;
  --lh-tight: 1.02;

  /* --- Ground: paper, not ink ---------------------------------- */
  /* The ink-* names are inherited from the shared system; here they carry
     light values so every shared component follows without being touched. */
  --ink-000: #f3f0e9;
  --ink-050: #fffefb;
  --ink-100: #ece8df;
  --ink-200: #e4dfd3;
  --ink-300: #d3ccbc;
  --ink-400: #b3ab99;
  --ink-500: #8d8574;

  --paper-000: #17150f;
  --paper-100: #2b281f;
  --paper-200: #443f34;
  --paper-300: #575145;
  --paper-400: #6a6355;

  --bg: var(--ink-000);
  --bg-raised: var(--ink-050);
  --bg-inset: var(--ink-100);
  --text: var(--paper-000);
  --text-muted: var(--paper-300);
  --text-dim: var(--paper-400);

  --line: rgb(23 21 15 / 0.13);
  --line-strong: rgb(23 21 15 / 0.24);
  --rule-soft: rgb(23 21 15 / 0.28);
  --tint: rgb(23 21 15 / 0.05);

  --scrim-rgb: 243 240 233;
  --header-veil: rgb(243 240 233 / 0.86);

  /* --- Accent: bay leaf, darkened to hold on a light ground ----- */
  --accent: #46603a;
  --accent-text: #3c5331;
  --accent-contrast: #f5f8f2;
  --danger: #a3271d;

  /* --- Shape: squared off, editorial --------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --shadow-lift: 0 1px 2px rgb(23 21 15 / 0.06), 0 10px 28px -12px rgb(23 21 15 / 0.14);
  --shadow-deep: 0 2px 6px rgb(23 21 15 / 0.08), 0 30px 60px -24px rgb(23 21 15 / 0.2);
}

/* Buttons are square here, and the ghost reads as a hairline box. */
.btn { border-radius: var(--r-sm); font-weight: 500; }
.btn--ghost { border-color: var(--line-strong); }

/* Space Grotesk has no true italic, so the accent word is set in weight
   and colour rather than slanted — synthesised obliques look cheap. */
.display em,
.d-hero__title em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-text);
}

/* --- Hero -----------------------------------------------------
   The other three demos put light type on a darkened photograph. This one
   goes the other way: the photo is brightened and veiled with paper, and
   the type stays ink. Same component, opposite reading.

   Note the veil is heaviest on the left, where the words sit, and thins to
   the right so the room is still visible. */

.d-hero {
  min-height: 82svh;
  /* Declared, not just inherited: body sets `color: var(--text)`, so the
     computed colour is already inherited by the time it reaches here.
     Redefining the token alone would move .eyebrow (which declares
     `color: var(--text-dim)`) while leaving the headline untouched. */
  color: var(--text);
  --text-muted: #443f34;
  --text-dim: #4e4839;
  --line-strong: rgb(23 21 15 / 0.4);
}

.d-hero__media img {
  filter: saturate(0.72) contrast(0.98) brightness(1.12);
}

/* The veil stays at 0.80 or heavier across the whole area type occupies.
   Measured against a black photo pixel — the worst case the photograph can
   present — the hero's ink, muted and dim tones all clear 4.5:1 there. */
.d-hero::after {
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.98) 1%, rgb(var(--scrim-rgb) / 0.72) 30%, rgb(var(--scrim-rgb) / 0.8) 100%),
    linear-gradient(to right,
      rgb(var(--scrim-rgb) / 0.94) 0%,
      rgb(var(--scrim-rgb) / 0.88) 45%,
      rgb(var(--scrim-rgb) / 0.8) 66%,
      rgb(var(--scrim-rgb) / 0.5) 100%);
}

.d-hero__title {
  font-weight: 500;
  text-transform: none;
}

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

/* --- Photographs ----------------------------------------------
   On a light page the shared dark grade would look like a fault. */

.d-intro__media img,
.d-shot img {
  filter: saturate(0.95) contrast(1.02) brightness(0.97);
}

.d-shot:hover img { filter: saturate(1.05) contrast(1.02) brightness(1); }

/* --- Structure ------------------------------------------------
   Rules do the work instead of filled cards: lighter, more editorial. */

.d-review {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--text);
  border-radius: 0;
  padding: var(--s-5) 0 0;
}

.d-review blockquote {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

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

.d-form {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--text);
  border-radius: 0;
  padding: var(--s-6) 0 0;
}

.d-form input,
.d-form textarea,
.d-form select {
  background: var(--ink-050);
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
}

.d-form input:focus,
.d-form textarea:focus,
.d-form select:focus { background: #fff; }

/* Group labels sit in the margin rather than above, which reads as a
   printed menu rather than a web section. */
.d-group__label {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: var(--s-2);
  display: inline-block;
}

.d-item__name { font-weight: 500; }
.d-item__price { font-family: var(--font-sans); font-weight: 500; }

.d-banner {
  background: var(--ink-200);
  border-bottom: 1px solid var(--line);
}

.d-brand { font-weight: 700; letter-spacing: var(--tr-tight); }