/*
  theme.css — The Cookie Cakery by Lexie · custom build (T7-A identity family)
  Extends Foundation + module-system (loaded before this file; these :root
  tokens win). Variant contract: light "white gallery wall" ground, Archivo
  punchy display, Courier Prime price-ticket mono, 4px soft edges.

  Color jobs (each color has exactly one job):
    butter  #FDE85D — brand ground: hero, icing dividers, warm bands
    magenta #F600FA — the ask: primary CTA + Lexie's signature + active states
    deep magenta #C400C7 — magenta's AA-safe text/hover form
    ink     #1A1A1A — type
    white   #FFFFFF — the gallery wall
*/

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --color-bg:          #FFFFFF;
  --color-surface:     #FEF8E2;   /* butter-cream band */
  --color-surface-2:   #FBEFC4;
  --color-surface-3:   #F6E39B;
  --color-primary:     #FDE85D;   /* butter — brand ground, never text */
  --color-secondary:   #FFFFFF;
  --color-accent:      #F600FA;   /* frosting magenta — CTA + signature only */
  --color-accent-deep: #C400C7;   /* AA-safe magenta for text/links/hover */
  --color-accent-ink:  #1A1A1A;   /* text ON magenta (4.5:1+) */
  --color-text:        #1A1A1A;
  --color-text-muted:  #6B6560;   /* AA on white */
  --color-text-dim:    #A39A8C;
  --color-border:      #EBE3CD;
  --color-border-hi:   #D8CB9F;

  /* module-system contract */
  --color-accent-hi:    var(--color-accent-deep);
  --color-accent-dim:   rgba(246, 0, 250, 0.08);
  --color-accent-2:     #8A7500;  /* deep butter — labels, secondary calls */
  --color-accent-2-dim: rgba(253, 232, 93, 0.28);

  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-price:   'Courier Prime', 'Courier New', monospace;

  /* one edge language: 4px soft (T7-A) */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius:    4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-soft: 4px;

  /* butter-tinted shadows — never gray */
  --shadow-sm: 0 2px 10px rgba(138, 117, 0, 0.10);
  --shadow:    0 10px 28px -8px rgba(138, 117, 0, 0.20);
  --shadow-lg: 0 18px 44px -12px rgba(138, 117, 0, 0.28);

  --cc-maxw: var(--container-max, 1200px);
}

/* Stay LIGHT regardless of OS preference (Foundation + module-system flip). */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         #FFFFFF;
    --color-surface:    #FEF8E2;
    --color-surface-2:  #FBEFC4;
    --color-surface-3:  #F6E39B;
    --color-text:       #1A1A1A;
    --color-text-muted: #6B6560;
    --color-text-dim:   #A39A8C;
    --color-border:     #EBE3CD;
    --color-border-hi:  #D8CB9F;
  }
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 400;
}

a { color: var(--color-accent-deep); }

.cc-wrap {
  width: 100%;
  max-width: var(--cc-maxw);
  margin-inline: auto;
  padding-inline: var(--container-padding, 1rem);
}

/* ── Buttons ────────────────────────────────────────────────── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-soft);
  border: 1.5px solid var(--color-text);
  text-decoration: none;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.cc-btn:active { transform: scale(0.98); }
.cc-btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.cc-btn--accent:hover,
.cc-btn--accent:focus-visible {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: #FFFFFF;
}
.cc-btn--ghost {
  background: transparent;
  color: var(--color-text);
}
.cc-btn--ghost:hover,
.cc-btn--ghost:focus-visible {
  background: var(--color-text);
  color: #FFFFFF;
}

/* ── Header ─────────────────────────────────────────────────── */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  max-width: var(--cc-maxw);
  margin-inline: auto;
  padding: 0.5rem var(--container-padding, 1rem);
}
.cc-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc-nav__brand img {
  height: 42px;
  width: 42px;
  border-radius: var(--radius-soft);
}
.cc-nav__links {
  display: none;
  list-style: none;
  gap: 1.6rem;
  margin-inline: auto;
}
.cc-nav__links a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}
.cc-nav__links a:hover { color: var(--color-accent-deep); }
.cc-nav .cc-btn { padding: 0.6rem 1.1rem; min-height: 44px; font-size: 0.8rem; }
@media (min-width: 880px) { .cc-nav__links { display: flex; } }
@media (max-width: 479px) { .cc-nav__brand span { display: none; } }

/* ── Hero — full-bleed photo under a neutral-dark scrim, white type ──
   The fallback ground is DARK (not butter): the hero text is white, so if the
   photo ever fails to load, the text must still sit on a legible dark ground. */
.cc-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 2px),
    #2A241B;
  background-size: 56px 56px, auto;
}
/* Full-bleed photo (cover-cropped, never stretched) under a uniform scrim so
   the text sits legibly anywhere on the image — no blend zone, no safe zone.
   ⚠ hero.jpg is a temporary internet-sourced placeholder — launch blocker. */
.cc-hero {
  /* Neutral dark scrim (Brandon's correction 2026-08-10): 62% is the lightest
     tested opacity where WHITE text clears 4.5:1 at the worst-case pixel
     (measured 5.32:1; 55% gave only 4.17:1 — short for the tagline). */
  --cc-hero-scrim: rgba(20, 16, 10, 0.62);
}
.cc-hero h1,
.cc-hero__sub { color: #FFFFFF; }
.cc-hero .cc-btn--ghost {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.cc-hero .cc-btn--ghost:hover,
.cc-hero .cc-btn--ghost:focus-visible {
  background: #FFFFFF;
  color: var(--color-text);
}
.cc-hero__media {
  position: absolute;
  inset: 0;
}
.cc-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.cc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cc-hero-scrim);
}
.cc-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--cc-maxw);
  margin-inline: auto;
  padding: clamp(4rem, 11vh, 7rem) var(--container-padding, 1rem) clamp(3rem, 8vh, 5.5rem);
}
.cc-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 10.5vw, 7.25rem); /* original scale — restored: the uniform scrim makes the whole hero a safe text zone */
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 12ch;
  margin: 0;
}
/* Real piped-icing signature (photoreal transparent WebP). The wrap hosts the
   clip-path wipe and the leading highlight that travels the reveal edge. */
.cc-hero__sigwrap {
  position: relative;
  display: block;
  width: clamp(230px, 36vw, 400px);
  /* start under the R of CAKERY: 2.85em of the h1's own font size (the R sits
     at 2.93em; the image carries ~13px of glow padding before the visible 'b').
     The calc ceiling keeps the shifted signature inside the h1 on phones.
     overflow: clip stops the traveling reveal glow from widening the page. */
  margin: -0.18em 0 0 min(2.85em, calc(100% - 235px));
  overflow: clip;
}
.cc-hero__signature {
  display: block;
  width: 100%;
  height: auto;
}
.cc-hero__sigglow {
  position: absolute;
  top: -8%;
  left: 0;
  height: 116%;
  width: 64px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(246, 0, 250, 0.35) 55%, transparent 78%);
  opacity: 0; /* decorative reveal-edge highlight — shown only while the wipe runs */
}
.cc-hero__sub {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 42ch;
  margin-top: 1.6rem;
}
.cc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* Scalloped icing edge: butter drips onto the white gallery wall */
.cc-icing-edge { display: block; width: 100%; height: 30px; }
.cc-icing-edge path { fill: var(--color-primary); }

/* ── Section shell ──────────────────────────────────────────── */
.cc-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cc-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.cc-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.cc-section__note {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cc-section__sub {
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 58ch;
  margin-top: -1rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* ── Icing divider (premium motion moment #2) ───────────────── */
.cc-divider {
  overflow: hidden;
  line-height: 0;
  padding-block: 0.5rem;
}
/* Real piped-rosette strip: repeated image instances at natural scale (never
   stretched), each overlapping the previous slightly so the runs sit flush —
   no visible seam gap between repeats. Extra instances crop at the edge. */
.cc-divider__strip {
  display: flex;
  overflow: hidden;
  height: 64px;
}
.cc-divider__strip img {
  display: block;
  flex: none;
  height: 64px;
  width: auto;
  max-width: none; /* Foundation's img max-width:100% would squish the tile on phones */
}
/* One-swirl overlap (SwirlDivider braid): each copy's FIRST swirl crest sits
   directly on top of the previous copy's LAST crest, burying the rope's
   tapered ends under a solid swirl (crests measured from the artwork: first
   at 112px, last at 979px of 1067 native → (1067−979+112)/2 = 100 CSS px at
   the 64px display height). The seam is absorbed into a repeated swirl —
   never a gap, never pixel-edge tiling. Copies render at fixed CSS size, so
   the overlap is identical at every viewport width. */
.cc-divider__strip img + img { margin-left: -100px; }

/* Last divider only (before the yellow band): nudged down so the rosette run
   straddles the white→yellow boundary instead of floating 8px above it.
   transform keeps layout (and the ScrollTrigger start) unchanged; z-index
   lets the strip paint over the yellow section's top edge. */
.cc-divider--straddle {
  position: relative;
  z-index: 1;
  /* 38px: the swirl underside contour swings 27px (S-curves rise between
     lows), so at 16px its high points sat 22px above the boundary, letting
     white slivers through. 38px puts even the highest underside point on the
     line; the swirl tops still arc ~34px above it, so it reads as straddling. */
  transform: translateY(38px);
}

/* ── Menu — category card grid (draft data; cards link to /menu/ pages) ── */
.cc-menu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 540px) { .cc-menu__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .cc-menu__grid { grid-template-columns: repeat(4, 1fr); } }
.cc-menu__card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.35rem 1.3rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cc-menu__card:hover {
  border-color: var(--color-accent-deep);
  background: var(--color-surface);
  transform: translateY(-2px);
}
.cc-menu__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cc-menu__price {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.cc-menu__desc {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  flex-grow: 1;
}
.cc-menu__go {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.cc-menu__card:hover .cc-menu__go { text-decoration: underline; }

/* ── Menu detail pages (/menu/<slug>/) ─────────────────────── */
.mp-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.mp-hero__inner {
  max-width: var(--cc-maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--container-padding, 1rem) clamp(2rem, 5vw, 3rem);
}
.mp-hero__back {
  display: inline-block;
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 1.2rem;
}
.mp-hero__back:hover { color: var(--color-accent-deep); }
.mp-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.mp-hero__price {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.mp-hero__draft {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-top: 0.5rem;
  max-width: 52ch;
}
.mp-body { padding-block: clamp(2.5rem, 6vw, 4rem); }
.mp-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 860px) { .mp-body__grid { grid-template-columns: 6fr 5fr; } }
.mp-copy p { color: var(--color-text-muted); line-height: 1.7; max-width: 58ch; margin-bottom: 1.1rem; }
.mp-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 0.6rem;
}
.mp-list { list-style: none; display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.mp-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--color-text);
  line-height: 1.5;
}
.mp-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  transform: translateY(-1px);
}
.mp-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow);
}
.mp-photo__note, .mp-nophoto {
  font-family: var(--font-price);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-top: 0.6rem;
}
.mp-nophoto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--color-border-hi);
  border-radius: var(--radius-soft);
  background: var(--color-surface);
  padding: 1.5rem;
  margin-top: 0;
}
.mp-todo {
  border: 2px solid var(--color-accent-deep);
  border-radius: var(--radius-soft);
  background: var(--color-accent-dim);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  max-width: 58ch;
}
.mp-todo strong {
  display: block;
  font-family: var(--font-price);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 0.35rem;
}
.mp-todo p { color: var(--color-text); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.mp-cta { margin-top: 1.8rem; }

/* ── Gallery — C2 restyled: portrait wall, butter shadows ───── */
[data-section="gallery"] .mod-section { padding: 0; }
#sovran-c2 .mod-eyebrow { display: none; }  /* belt-and-suspenders: template also drops it */

/* Foundation paints the skip link with --color-accent (magenta): white text
   fails AA on it — deep magenta carries white at 5:1 */
.skip-link { background: var(--color-accent-deep); }

/* C2 hover expand icon: heavier scrim so the white glyph clears AA over any
   photo. Two classes out-rank the module's injected #sovran-c2 .c2-icon rule,
   which loads after this sheet. */
#sovran-c2 .c2-item .c2-icon { background: rgba(26, 26, 26, 0.78); }
#sovran-c2 .mod-h {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
#sovran-c2 .mod-sub { font-size: 1.02rem; max-width: 58ch; }
#sovran-c2 .c2-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
#sovran-c2 .c2-item {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow);
}
#sovran-c2 .c2-item:hover { box-shadow: var(--shadow-lg); }
#sovran-c2 .c2-cat-pill { display: none; }  /* filters above already carry category */
#sovran-c2 .mod-filter {
  border-radius: var(--radius-soft);
  border-color: var(--color-border-hi);
  font-weight: 700;
}
#sovran-c2 .mod-filter:hover { border-color: var(--color-text); color: var(--color-text); }
#sovran-c2 .mod-filter.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #FFFFFF;
}

/* ── Areas band ─────────────────────────────────────────────── */
.cc-areas {
  background: var(--color-surface);
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.cc-areas h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.cc-areas__towns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0;
  list-style: none;
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cc-areas__towns li { display: flex; align-items: center; }
.cc-areas__towns li + li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-inline: 0.9rem;
}

/* ── Module zones (TR2 / C5 live here when content exists) ──── */
.cc-modzone .mod-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
[data-section].is-hidden { display: none; }

/* ── Contact — split: details + L1 'full' in a butter room ──── */
.cc-contact { background: var(--color-surface); padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.cc-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 860px) {
  .cc-contact__grid { grid-template-columns: 5fr 6fr; }
}
.cc-contact h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}
.cc-contact__lede {
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 48ch;
  margin-bottom: 1.8rem;
}
.cc-contact__list {
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.cc-contact__label {
  display: block;
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.cc-contact__list a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.cc-contact__list a:hover { color: var(--color-accent-deep); }
.cc-contact__phone {
  font-family: var(--font-price);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.cc-contact__hours { color: var(--color-text-muted); font-size: 0.95rem; }

/* L1 lives inside the band — the section is its card */
.cc-contact .sl-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
}

/* ── Footer ─────────────────────────────────────────────────── */
.cc-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.cc-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: 2.75rem 2rem;
}
@media (min-width: 760px) {
  .cc-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.cc-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.cc-footer__brand img { height: 44px; width: 44px; border-radius: var(--radius-soft); }
.cc-footer__tag {
  font-family: var(--font-price);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.cc-footer h3 {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.7rem;
}
.cc-footer ul { list-style: none; display: grid; gap: 0.45rem; }
.cc-footer a { color: var(--color-text-muted); text-decoration: none; }
.cc-footer a:hover { color: var(--color-accent-deep); }
.cc-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-block: 1.1rem;
  font-size: 0.8rem;
  color: var(--color-text-dim);
}
.cc-footer__legal a {
  color: var(--color-text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cc-footer__legal a:hover {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-hi);
}

/* ── Reveal (standard tier: initial state set from JS only) ─── */
.rv { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.rv-init { opacity: 0; transform: translateY(22px); }
.rv.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rv-init { opacity: 1 !important; transform: none !important; }
}