/* ==========================================================================
   site.css — Chaambis, Logan UT.
   family: quiet-premium · archetype: editorial-stack
   Source: runs/chaambis-logan-ut/brief.md (APPROVED, C3 2026-09-19). Tokens
   only — no raw hex, px/rem literal or font name below except inside a
   media-query condition (house-tech-spec §3).
   ========================================================================== */

/* base.css's skip-link defaults to --color-accent/--color-accent-ink, and
   the brief bars --color-accent from carrying text on the light ground
   entirely (brief §2) — 2.59:1, fails both AA floors. Swapped to
   --color-cta-fill/--color-cta-text, the brief's own primary-button pairing
   at 12.28:1 — not a new colour decision, the same reuse pattern the sibling
   brief in this family used. */
.skip-link {
  background-color: var(--color-cta-fill);
  color: var(--color-cta-text);
}

/* --- Layout primitives (house shell, unchanged from 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);
}

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

h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* --- Header & navigation ---------------------------------------------------
   Brand + a persistent "Order Online" CTA, one line to 360px (brief §5):
   the header's own target is <=64px total including its border. With the
   CTA's own 44px WCAG tap-target floor (--layout-tap-min) fixed, the only
   free variable is the header's own padding-block, tightened here from the
   skeleton's default --space-sm to --space-2xs to land inside that target:
   8 + 44 + 8 + 1(border) = 61px, measured and confirmed on the render.

   "Our Bakes"/"Contact" hide below 48em rather than collapsing behind a
   hamburger — the same house pattern `auto-evolution-north-logan-ut` uses
   for its own header tel: link — so the CTA is never a tap behind a toggle.
   Progressive enhancement needs nothing from JS here: the links are simply
   absent from layout (and from the tab order) below 48em, always, on every
   page load, not gated by [data-nav-ready]. No nav-toggle button ships. */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-2xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  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-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  display: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

@media (min-width: 48em) {
  .site-nav__item {
    display: list-item;
  }
}

/* --- Buttons (house shell, unchanged from skeleton) ------------------------
   Two roles, no more. The brief's primary CTA everywhere is "Order Online" —
   the ink/bg pairing carries every .btn--primary on the page. */

.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-sm);
  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-cta-fill);
  color: var(--color-cta-text);
}

.btn--quiet {
  /* Outline button: the border is the whole control, so it takes the 3:1
     control-boundary token, not the decorative hairline (WCAG 1.4.11). */
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

/* --- Form (house shell, unchanged from skeleton) --------------------------- */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* --- Footer (house shell, unchanged from skeleton) -------------------------- */

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

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

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

/* --- Eyebrow (place/kicker text, reused across the page) ------------------- */

.eyebrow {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* --- The recurring gold head-rule (brief §3, §7) ---------------------------
   "The gold line settles": draws once beneath the hero H1 on load, then
   recurs, static (no draw-in), as the head-mark atop every section below it.
   72%-width, 2px, centred (equivalent to the brief's stated left:14%/
   right:14% inset on its own container) — ornament only, never carries text,
   exempt from the contrast-pairing rule (brief §2). Height never scales. */

.hero__gold-rule {
  inline-size: var(--gold-rule-width);
  block-size: var(--gold-rule-height);
  margin-inline: auto;
  margin-block: var(--space-sm) var(--space-md);
  background-color: var(--color-gold-line);
  transform: scaleX(0);
  transform-origin: left center;
  animation: gold-draw var(--duration-gold-draw) var(--ease-gold-draw) forwards;
}

@keyframes gold-draw {
  to { transform: scaleX(1); }
}

.section-head-rule {
  inline-size: var(--gold-rule-width);
  block-size: var(--gold-rule-height);
  margin-inline: auto;
  margin-block-end: var(--space-lg);
  background-color: var(--color-gold-line);
}

.section-head-rule--band {
  /* Same device, on the one reversed-ground panel — the ornament rule is
     exempt from the text/bg pairing (brief §2), so no new colour is needed. */
  background-color: var(--color-gold-line);
}

@media (prefers-reduced-motion: reduce) {
  .hero__gold-rule {
    animation: none;
    transform: scaleX(1);
  }
}

/* --- Hero — "the gold line settles" (brief §5, §7). House order: eyebrow →
   h1 → gold rule → primary CTA → field → lead. The field is the LCP
   element: fetchpriority high in the HTML, no lazy loading, no
   [data-reveal]. Nothing here is reveal-gated. -------------------------- */

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

.hero__title {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* The single accent-word emphasis device (brief §3): a gold underline, never
   italic — Marcellus has no italic cut and this repo does not ship
   synthetic-oblique serif type. Brief §2's own contrast table measures
   --color-accent at 2.59:1 on --color-bg and states it in terms: "Never used
   for text of any size on the light ground. Ornament, borders and icon
   fills only" — so the word's colour stays --color-ink (12.28:1) and the
   accent-coloured shift is carried entirely by the underline, which is
   ornament and exempt from the text/bg pairing rule, same as every other
   gold-line use on this page. */
.hero__emphasis {
  font-style: normal;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-gold-line);
  text-decoration-thickness: var(--gold-rule-height);
  text-underline-offset: var(--space-3xs);
}

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

.hero__lead {
  margin: var(--space-lg) 0 0;
  max-width: var(--layout-measure);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* --- The hero field — the anchor image plus its CSS atmosphere (brief §6,
   §7). The picture is the LCP element. The sweep/motes are aria-hidden, pure
   CSS, ambient on load, and touch no scroll/zoom/keyboard behaviour (spec
   §8).

   QA round 1 FIX (clarity/dissonance, r1 report): ratio now shorter than the
   asset's own 4:5 (tokens.css), so `object-fit: cover` has overflow to crop
   and `object-position: bottom` spends it on the frame's negative-space top
   rather than the plate — the anchor reads above the fold at 375 and 1440
   (measured; see the round-2 fix note). A shorter ratio at >=72em (the
   field's own `sizes` breakpoint) covers the larger correction 1440 needed;
   design-rules §7.2 rule 4's arithmetic is 375-only (Critic's standards
   note), so rule 4 does not bind the wide-viewport value. Absolute
   positioning on the image (not `width/height: 100%` alone) because a
   percentage height on a static-position replaced element does not reliably
   resolve against an aspect-ratio-derived parent height. ------------------ */

.hero__field {
  position: relative;
  aspect-ratio: var(--hero-field-ratio);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

@media (min-width: 72em) {
  .hero__field {
    aspect-ratio: var(--hero-field-ratio-wide);
  }
}

.hero__field-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__field-sweep {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 35%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-bg) 45%,
    transparent 100%
  );
  opacity: 0;
  animation: hero-sweep var(--duration-sweep) var(--ease-in-out) infinite;
  pointer-events: none;
}

/* transform-only, never `top` — the element is absolutely positioned and its
   parent clips overflow, so a transform-driven travel reflows nothing
   (perf/cls). Travels the full field height, expressed as a percentage of
   the sweep's own 35%-height box: -100% to 385.7% covers -35% to 135% of
   the field. */
@keyframes hero-sweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 0.55; }
  50%  { opacity: 0.55; }
  85%  { opacity: 0; }
  100% { transform: translateY(385.7%); opacity: 0; }
}

.hero__mote {
  position: absolute;
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-gold-line) 0%, transparent 75%);
  opacity: 0.85;
  pointer-events: none;
  animation: hero-mote-drift var(--duration-mote-1) var(--ease-in-out) infinite;
}

.hero__mote--1 {
  inset-inline-start: 62%;
  inset-block-start: 28%;
}

.hero__mote--2 {
  inset-inline-start: 30%;
  inset-block-start: 58%;
  animation-duration: var(--duration-mote-2);
  animation-delay: calc(var(--mote-2-delay) * -1);
}

@keyframes hero-mote-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(var(--space-sm), calc(var(--space-md) * -1)); }
  66%  { transform: translate(calc(var(--space-sm) * -0.6), var(--space-sm)); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__field-sweep {
    animation: none;
    transform: translateY(107%);
    opacity: 0.35;
  }

  .hero__mote {
    animation: none;
  }
}

/* --- Section intros (shared across Curated Catalogue / Proofing Room) ----- */

.section__intro {
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
  margin: var(--space-md) 0 var(--space-lg);
}

/* --- Curated Catalogue Highlight (brief §4 row 2) — a plain rule-divided
   list, two rows carrying a small supporting thumbnail, never a per-item
   icon set (design-rules §4's ban). ---------------------------------------- */

.catalogue-list {
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.catalogue-list__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.catalogue-list__row:last-child {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.catalogue-list__media {
  flex: 0 0 auto;
  width: var(--catalogue-img-size);
  height: var(--catalogue-img-size);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.catalogue-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalogue-list__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.catalogue-list__price {
  flex: 0 0 auto;
  color: var(--color-ink-muted);
}

.catalogue-list__link {
  margin: 0 0 var(--space-lg);
}

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

/* --- The Proofing Room (brief §4 row 3) — ref-011's numbered-index device,
   the page's only counted sequence (design-rules §5's nested-counters rule).
   Numeral column: 56px at >=48em beside the row heading; below that width
   the row collapses to a single column and the numeral sits above its
   heading. --------------------------------------------------------------- */

.proofing-list {
  margin: 0;
  padding: 0;
}

.proofing-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.proofing-list__row:last-child {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.proofing-list__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-index-num);
  font-weight: var(--font-weight-display);
  /* --color-accent is barred from carrying text on the light ground at any
     size (brief §2, 2.59:1 — fails both AA floors); --color-ink-muted is the
     brief's own validated pairing (6.25:1) and reads as a quieter numeral
     than the full-ink heading beside it, without inventing a new colour. */
  color: var(--color-ink-muted);
  line-height: 1;
}

.proofing-list__heading {
  margin: 0;
  font-size: var(--text-h3);
  color: var(--color-ink);
}

.proofing-list__body {
  margin: 0;
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
  grid-column: 1 / -1;
}

@media (min-width: 48em) {
  .proofing-list__row {
    grid-template-columns: var(--index-num-col) 1fr;
    align-items: baseline;
  }

  .proofing-list__num {
    grid-row: 1 / 3;
  }

  .proofing-list__heading {
    grid-column: 2;
  }

  .proofing-list__body {
    grid-column: 2;
  }
}

/* --- Celebrations & Custom Cakes (brief §4 row 4) — text column beside a
   supporting image; stacks single-column below 64em, the house breakpoint. */

.celebrations__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.celebrations__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-lg);
}

.celebrations__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

@media (min-width: 64em) {
  .celebrations__inner {
    grid-template-columns: 3fr 2fr;
  }
}

/* --- In Their Words (brief §4 row 5, §2a) — the site's ONE reversed-ground
   panel. Body text runs in --color-panel-reversed-text; the attribution runs
   in --color-panel-reversed-accent, the ONLY place --color-accent ever
   carries text on this site, at large-text size (>=1.1rem, 4.74:1). ------- */

.reviews-band {
  background-color: var(--color-panel-reversed-bg);
  color: var(--color-panel-reversed-text);
}

.reviews-band h2 {
  color: var(--color-panel-reversed-text);
}

.reviews-band :focus-visible {
  outline-color: var(--color-focus-on-band);
}

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

.review__quote {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-panel-reversed-text);
}

.review__attrib {
  margin: var(--space-md) 0 0;
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-panel-reversed-accent);
}

/* --- Order Online / Contact / Footer band (brief §4 row 6) ---------------- */

.texture-strip {
  display: block;
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.texture-strip img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

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