/* ==========================================================================
   site.css — Qué Chilero Café, Smithfield UT.

   band-rhythm archetype (design-rules §7): full-bleed bands, direction
   changes between them, no separator but the colour change itself (brief
   §5.1). One breakpoint only — 48em (brief §5.2). No hex/px/font literal
   below — tokens only (house-tech-spec §3).
   ========================================================================== */

/* --- Layout primitives (house pattern, unchanged from the skeleton) ------- */

.container {
  width: 100%;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--section-gap);
}

.measure {
  max-width: var(--layout-measure);
}

/* Running kicker label (band .k / section eyebrows). Authored in natural
   case, uppercased with text-transform — never typed in caps
   (house-tech-spec §8). */
.k {
  margin: 0;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* --- The pour-line — this site's recurring signature device (brief §6.5) --
   A single hairline, --pourline-width wide, in --color-accent. In the hero
   it draws once on load; reused everywhere else, already fully drawn, as
   the head-rule of each section below. */

.pourline {
  display: block;
  width: min(var(--pourline-width), 100%);
  min-width: min(var(--pourline-floor), 100%);
  height: var(--pourline-thickness);
  margin-block-end: var(--space-sm);
  background-color: var(--color-accent);
  transform: scaleX(1);
}

/* The hero's copy draws left to right on load, --duration-pour, --ease-out —
   a coffee-ring-stain gesture, not a ruled underline. Safe default (and the
   prefers-reduced-motion state, house-tech-spec §8) is fully drawn; the
   animation is opted into only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .pourline--hero {
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: pourline-draw var(--duration-pour) var(--ease-out) forwards;
  }
}

@keyframes pourline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- Header / sticky bar (brief §6 "Sticky bar") --------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--layout-header-height);
  display: flex;
  align-items: center;
  border-block-end: var(--border-hairline) var(--border-style) var(--color-ink);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-header__brand {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.site-header__cta {
  padding-block: var(--space-2xs);
  padding-inline: var(--space-sm);
  white-space: nowrap;
}

/* --- Buttons (design-rules §4: one primary control, no pill token) -------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

/* R-A2 / N3-N4: --color-accent is never a focus colour on --color-band —
   inside the ink band, any focusable element re-points its ring at the
   accent's on-dark sibling. The primary control's own fill is unaffected;
   only the ring changes. */
.band--ink :focus-visible {
  outline-color: var(--color-focus-on-band);
}

/* --- Hero (brief §5.3, §5.4, §6 §I) ---------------------------------------- */

.hero {
  padding-block-start: var(--space-xl);
  padding-block-end: var(--section-gap);
}

.hero__inner {
  max-width: var(--layout-measure);
}

.hero__eyebrow {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-ink-muted);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hero__h1 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hero__h1 em {
  font-family: var(--font-display-italic);
  font-style: italic;
  color: var(--color-accent);
}

.hero__cta {
  margin: 0 0 var(--space-md) 0;
}

.hero__field {
  position: relative;
  z-index: var(--z-field);
  height: var(--field-height);
  margin-block-end: var(--space-md);
  overflow: hidden;
}

/* R-A3: no text, eyebrow, label or control sits on the field or its
   atmosphere layer, at any width — this box carries the illustration alone. */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: var(--z-atmosphere);
  background-image: radial-gradient(
    120% 100% at 30% 20%,
    var(--color-halo-core) 0%,
    var(--color-halo-mid) 42%,
    var(--color-halo-floor) 78%,
    var(--color-halo-edge) 100%
  );
}

.hero__cup {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  z-index: var(--z-content);
  transform: translateX(-50%);
  height: 100%;
  width: auto;
}

.hero__cup img {
  height: 100%;
  width: auto;
  max-width: none;
}

.hero__steam {
  position: absolute;
  z-index: var(--z-content);
  inset-block-start: 8%;
  inset-inline-start: 50%;
  width: 40%;
  height: 42%;
  transform: translateX(-72%);
  color: var(--color-halo-core);
  pointer-events: none;
}

.steam {
  position: absolute;
  inset-block-start: 0;
  width: var(--steam-icon-size);
  height: auto;
  opacity: 0.75;
}

.steam--a { inset-inline-start: 10%; }
.steam--b { inset-inline-start: 42%; }
.steam--c { inset-inline-start: 74%; }

/* Ambient satellite motion (brief §7/§8, ref-001's physics): three
   independent, non-synchronised loops. Rest state (also the
   prefers-reduced-motion state) is "steam caught mid-rise," never a flat
   static cup — the values are the brief's own §3.3 tokens. */
.steam--a { transform: var(--rest-steam-a-transform); opacity: var(--rest-steam-a-opacity); }
.steam--b { transform: var(--rest-steam-b-transform); opacity: var(--rest-steam-b-opacity); }
.steam--c { transform: var(--rest-steam-c-transform); opacity: var(--rest-steam-c-opacity); }

@media (prefers-reduced-motion: no-preference) {
  .steam--a { animation: steam-drift-a var(--loop-steam-a) ease-in-out infinite; }
  .steam--b { animation: steam-drift-b var(--loop-steam-b) ease-in-out infinite; }
  .steam--c { animation: steam-drift-c var(--loop-steam-c) ease-in-out infinite; }
}

@keyframes steam-drift-a {
  0%   { transform: translateY(0) scaleY(1);       opacity: 0.55; }
  50%  { transform: var(--rest-steam-a-transform);  opacity: var(--rest-steam-a-opacity); }
  100% { transform: translateY(0) scaleY(1);       opacity: 0.55; }
}

@keyframes steam-drift-b {
  0%   { transform: translateY(0) translateX(0);   opacity: 0.50; }
  50%  { transform: var(--rest-steam-b-transform);  opacity: var(--rest-steam-b-opacity); }
  100% { transform: translateY(0) translateX(0);   opacity: 0.50; }
}

@keyframes steam-drift-c {
  0%   { transform: translateY(0) scaleY(1);       opacity: 0.55; }
  50%  { transform: var(--rest-steam-c-transform);  opacity: var(--rest-steam-c-opacity); }
  100% { transform: translateY(0) scaleY(1);       opacity: 0.55; }
}

.hero__lead {
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.hero__facts {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

@media (min-width: 48em) {
  .hero__field {
    height: var(--field-height-md);
  }
}

/* --- Story (brief §5.1, §5.6, §6 §II) --------------------------------------
   Three full-bleed bands, zero gap between them — the colour change IS the
   boundary. The .story section itself carries --section-gap above and below
   (via the .section class on its own <section>), which is what makes the
   128px inter-block boundary against the hero and the menu section. */

.story {
  padding-block: var(--section-gap);
}

.band {
  padding-block: var(--space-lg);
}

.band__inner {
  display: grid;
  gap: var(--space-md);
}

.band__rail {
  display: flex;
  flex-direction: column;
}

.band__quote-wrap {
  max-width: var(--layout-measure);
}

.band__quote {
  margin: 0;
}

.band__quote p {
  margin: 0;
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.band__quote--small p {
  font-size: var(--text-body);
}

.band__attribution {
  margin: var(--space-2xs) 0 0 0;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-small);
}

.band__address {
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.band__jade-rule {
  width: min(var(--pourline-floor), 100%);
  margin: var(--space-md) 0;
  border: 0;
  border-block-start: var(--pourline-thickness) var(--border-style) var(--color-accent-2);
}

.band--rust {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.band--rust .pourline {
  background-color: var(--color-accent-ink);
}

.band--rust .k {
  color: var(--color-accent-ink);
}

.band--cream {
  background-color: var(--color-bg);
  color: var(--color-ink);
}

.band--cream .k {
  color: var(--color-ink-muted);
}

.band--ink {
  background-color: var(--color-band);
  color: var(--color-band-ink);
}

.band--ink .pourline {
  background-color: var(--color-focus-on-band);
}

.band--ink .k {
  color: var(--color-band-ink);
}

@media (min-width: 48em) {
  .band__inner {
    grid-template-columns: 1fr var(--space-xl);
    align-items: start;
  }

  .band__rail {
    grid-column: 2;
    grid-row: 1;
  }

  .band__quote-wrap {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --- Menu [LOAD-BEARING] (brief §6 §III) ------------------------------------
   Ruled list on --color-surface — the one place this token carries body
   text (R-A1: --color-accent is never body-sized text there). */

.menu {
  background-color: var(--color-surface);
}

.menu .k {
  color: var(--color-ink-muted);
}

.menu__heading {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  max-width: var(--layout-measure);
}

.menu__body {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.menu__image {
  max-width: var(--media-rail-width);
}

.menu__list {
  margin: 0;
  display: grid;
}

.menu__item {
  padding-block: var(--space-sm);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--text-lead);
}

.menu__item:first-child {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
}

@media (min-width: 48em) {
  .menu__body {
    grid-template-columns: var(--media-rail-width) 1fr;
  }
}

/* --- Find-us (brief §6 §IV) -------------------------------------------------- */

.find-us .k {
  color: var(--color-ink-muted);
}

.find-us__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.find-us__grid h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
}

.find-us__specimen {
  max-width: var(--media-rail-width);
}

.find-us__socials {
  margin: var(--space-lg) 0 0 0;
  display: grid;
  gap: var(--space-2xs);
}

.find-us__socials a {
  color: var(--color-ink);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

@media (min-width: 48em) {
  .find-us__grid {
    grid-template-columns: 1fr var(--media-rail-width);
  }

  .find-us__socials {
    grid-column: 1;
  }
}

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

.site-footer {
  padding-block: var(--space-xl);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-rule);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.site-footer__nap {
  margin: 0 0 var(--space-sm) 0;
  font-style: normal;
  color: var(--color-ink);
}

.site-footer__socials {
  margin: 0 0 var(--space-sm) 0;
  padding: 0;
  display: flex;
  gap: var(--space-md);
}

.site-footer a {
  color: inherit;
  text-underline-offset: var(--space-3xs);
}