/* tap-room register — SHOWCASE variant.
   Generic-but-believable brewery template. Different from Birdhouse + Hollerhorn
   in: section order (taps before reviews), hero treatment (split tap-board hero, not full-bleed photo),
   amber-forward palette weighting, CSS-only photo treatments so the demo travels well. */
@layer reset, theme, base, primitives, showcase, header, hero, taps, reviews, about, visit, footer, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  html:focus-within { scroll-behavior: smooth; }
}

@layer theme {
  :root {
    --bg:           oklch(15% 0.014 50);
    --bg-elev:      oklch(20% 0.016 50);
    --bg-deep:      oklch(11% 0.012 50);
    --paper:        oklch(96% 0.012 80);
    --ink:          oklch(18% 0.010 50);
    --type:         oklch(95% 0.013 80);
    --type-soft:    oklch(78% 0.014 80);
    --type-muted:   oklch(60% 0.012 80);
    --line:         oklch(28% 0.014 50);
    --line-soft:    oklch(24% 0.012 50);
    --amber:        oklch(74% 0.160 65);
    --amber-deep:   oklch(64% 0.160 60);
    --amber-glow:   oklch(82% 0.165 75);
    --hop:          oklch(78% 0.130 110);
    --rye:          oklch(38% 0.080 40);

    --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;

    --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem;
    --t-md: 1.125rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem;
    --t-3xl: 2.5rem; --t-4xl: 3.5rem; --t-5xl: clamp(2.75rem, 6vw, 5.5rem);

    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
    --s-9: 6rem; --s-10: 8rem;
    --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --d-1: 280ms; --d-2: 480ms; --d-3: 720ms;
    --tap-min: 44px;
  }
}

@layer base {
  html { color-scheme: dark; }
  body {
    font-family: var(--body);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--type);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--type);
    text-wrap: balance;
  }
  p { text-wrap: pretty; max-width: 65ch; color: var(--type-soft); }
  ::selection { background: var(--amber); color: var(--bg); }
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 1rem; top: 1rem; padding: var(--s-3); background: var(--amber); color: var(--bg); border-radius: var(--r-sm); z-index: 100; width: auto; height: auto; }
}

@layer primitives {
  .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--s-5); }
  @media (min-width: 768px) { .container { padding: 0 var(--s-6); } }
  @media (min-width: 1280px) { .container { padding: 0 var(--s-7); } }

  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--body);
    font-size: var(--t-2xs); font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--amber);
  }
  .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--amber); }

  .cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--body); font-size: var(--t-base); font-weight: 600;
    padding: var(--s-3) var(--s-5); min-height: var(--tap-min);
    border-radius: var(--r-sm); border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--d-1), color var(--d-1), border-color var(--d-1), transform var(--d-1);
  }
  .cta--primary { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); }
  .cta--primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); transform: translateY(-1px); }
  .cta--ghost { background: transparent; color: var(--type); border-color: var(--type-muted); }
  .cta--ghost:hover { background: var(--type); color: var(--bg-deep); border-color: var(--type); }
}

/* ────────── Showcase callout — top of page; signals this is a WhiteCap demo ────────── */
@layer showcase {
  .showcase-bar {
    background: linear-gradient(90deg, oklch(28% 0.040 60), oklch(22% 0.020 50));
    border-bottom: 1px solid var(--amber-deep);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
  }
  .showcase-bar__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    color: var(--type-soft);
  }
  .showcase-bar__tag {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--amber);
  }
  .showcase-bar__tag::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber); box-shadow: 0 0 8px var(--amber);
  }
  .showcase-bar__msg strong { color: var(--type); font-weight: 600; }
  .showcase-bar__msg a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
  .showcase-bar__msg a:hover { color: var(--amber-glow); }
}

/* ────────── Header ────────── */
@layer header {
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-4) 0; gap: var(--s-5);
  }
  .brand { display: flex; align-items: center; gap: var(--s-3); line-height: 1; }
  .brand__mark {
    width: 44px; height: 44px;
    flex-shrink: 0;
    background: var(--amber);
    border-radius: 8px;
    display: grid; place-items: center;
    color: var(--bg-deep);
    font-family: var(--display);
    font-weight: 800;
    font-size: var(--t-xl);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .brand__text { display: grid; gap: 1px; }
  .brand__name { font-family: var(--display); font-weight: 600; font-size: var(--t-md); color: var(--type); letter-spacing: -0.012em; }
  @media (min-width: 768px) { .brand__name { font-size: var(--t-lg); } }
  .brand__sub { font-size: var(--t-2xs); color: var(--type-muted); letter-spacing: 0.04em; }
  .nav { display: none; }
  @media (min-width: 880px) { .nav { display: flex; gap: var(--s-6); align-items: center; } }
  .nav a { font-size: var(--t-sm); font-weight: 600; transition: color var(--d-1); }
  .nav a:not(.cta) { color: var(--type-soft); }
  .nav a:not(.cta):hover { color: var(--amber); }
}

/* ────────── HERO — split tap-board (left: pitch, right: stylized active-tap card) ────────── */
@layer hero {
  .hero {
    position: relative;
    padding: clamp(var(--s-8), 10vw, 7rem) 0 clamp(var(--s-8), 10vw, 6rem);
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(ellipse 70% 50% at 80% 0%, oklch(28% 0.040 60 / 0.55), transparent 60%),
      radial-gradient(ellipse 50% 60% at 0% 90%, oklch(22% 0.030 50 / 0.6), transparent 60%),
      var(--bg);
  }
  .hero__grid {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 960px) {
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--s-8), 6vw, var(--s-9)); }
  }
  .hero__copy { display: grid; gap: var(--s-5); }
  .hero__title {
    font-family: var(--display);
    font-size: var(--t-5xl);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--type);
  }
  .hero__title em { font-style: normal; color: var(--amber); }
  .hero__sub {
    font-size: var(--t-md);
    color: var(--type-soft);
    line-height: 1.55;
    max-width: 54ch;
  }
  .hero__sub strong { color: var(--type); font-weight: 600; }
  .hero__inline-trust {
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
    align-items: baseline;
    font-size: var(--t-sm);
    color: var(--type-soft);
    margin-top: var(--s-2);
  }
  .hero__inline-trust strong {
    color: var(--amber); font-weight: 700; font-size: var(--t-md);
    font-family: var(--display); letter-spacing: -0.012em;
  }
  .hero__inline-trust .sep { color: var(--type-muted); }
  .hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }

  /* The tap-board card — stylized chalkboard "now pouring" panel */
  .tap-board {
    position: relative;
    background:
      linear-gradient(180deg, oklch(13% 0.012 50), oklch(10% 0.010 50)),
      var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(var(--s-5), 3vw, var(--s-6));
    display: grid;
    gap: var(--s-4);
    box-shadow:
      inset 0 1px 0 oklch(40% 0.020 60 / 0.4),
      0 30px 50px -20px oklch(0% 0 0 / 0.6);
  }
  .tap-board::before {
    content: "";
    position: absolute; inset: -2px;
    border-radius: calc(var(--r-lg) + 2px);
    background: linear-gradient(135deg, var(--amber) 0%, transparent 30%, transparent 70%, var(--rye) 100%);
    z-index: -1;
    opacity: 0.5;
  }
  .tap-board__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: var(--s-3);
    border-bottom: 1px dashed var(--line);
  }
  .tap-board__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-md);
    color: var(--type);
    letter-spacing: -0.012em;
  }
  .tap-board__updated {
    font-size: var(--t-2xs);
    color: var(--type-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .tap-board__list { display: grid; gap: var(--s-3); }
  .tap-board__item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--s-3);
    align-items: baseline;
    padding: var(--s-2) 0;
  }
  .tap-board__num {
    font-family: var(--display);
    font-weight: 800;
    font-size: var(--t-md);
    color: var(--amber);
    letter-spacing: -0.04em;
  }
  .tap-board__beer { display: grid; gap: 2px; min-width: 0; }
  .tap-board__name {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-base);
    color: var(--type);
    letter-spacing: -0.012em;
    line-height: 1.2;
  }
  .tap-board__style {
    font-size: var(--t-xs);
    color: var(--type-muted);
  }
  .tap-board__abv {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--type-soft);
    font-variant-numeric: tabular-nums;
  }
}

/* ────────── ON TAP — full data table (signature tap-room move) ────────── */
@layer taps {
  .section { padding: clamp(var(--s-8), 8vw, 6rem) 0; scroll-margin-top: 84px; }
  .section--alt { background: var(--bg-elev); }

  .section__head {
    display: grid; gap: var(--s-3);
    margin-bottom: var(--s-7); max-width: 720px;
  }
  .section__title {
    font-family: var(--display);
    font-size: clamp(var(--t-3xl), 4.5vw, var(--t-4xl));
    font-weight: 600; line-height: 1.05; letter-spacing: -0.025em;
    color: var(--type);
  }
  .section__sub { font-size: var(--t-md); color: var(--type-soft); max-width: 60ch; line-height: 1.6; }

  .taps-table {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg);
  }
  .taps-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 100px;
    gap: var(--s-3) var(--s-4);
    padding: var(--s-4) var(--s-5);
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 640px) {
    .taps-row { grid-template-columns: 40px 1fr; }
    .taps-row__abv, .taps-row__price { grid-column: 2; font-size: var(--t-xs); margin-top: -6px; color: var(--type-muted); }
  }
  .taps-row:last-child { border-bottom: 0; }
  .taps-row--header { background: var(--bg-elev); padding-top: var(--s-3); padding-bottom: var(--s-3); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--type-muted); font-weight: 600; }
  .taps-row__num {
    font-family: var(--display);
    font-size: var(--t-2xl);
    font-weight: 800;
    color: var(--amber);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .taps-row--header .taps-row__num { font-family: var(--body); font-size: var(--t-2xs); color: var(--type-muted); font-weight: 600; }
  .taps-row__beer { display: grid; gap: 2px; }
  .taps-row__name { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--type); letter-spacing: -0.012em; line-height: 1.15; }
  .taps-row__style { font-size: var(--t-sm); color: var(--type-muted); }
  .taps-row__abv { font-family: var(--display); font-size: var(--t-md); font-weight: 600; color: var(--type-soft); font-variant-numeric: tabular-nums; }
  .taps-row__price { font-family: var(--display); font-size: var(--t-md); font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; text-align: right; }
  @media (max-width: 640px) {
    .taps-row__price { text-align: left; }
  }

  .taps-note {
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border-left: 3px solid var(--amber);
    font-size: var(--t-sm);
    color: var(--type-soft);
    background: var(--bg-elev);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .taps-note strong { color: var(--type); font-weight: 600; }
}

/* ────────── REVIEWS ────────── */
@layer reviews {
  .reviews-distribution {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 900px) {
    .reviews-distribution { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); }
  }
  .stars-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: clamp(var(--s-6), 4vw, var(--s-8));
    display: grid;
    gap: var(--s-4);
  }
  .stars-card__rating {
    font-family: var(--display);
    font-size: clamp(4rem, 9vw, 6.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--amber);
  }
  .stars-card__stars { font-size: var(--t-2xl); color: var(--amber); line-height: 1; letter-spacing: 0.05em; }
  .stars-card__count { font-size: var(--t-md); color: var(--type-soft); }
  .stars-card__count strong { color: var(--type); font-weight: 700; }

  .star-bars { display: grid; gap: var(--s-3); }
  .star-bar {
    display: grid; grid-template-columns: 80px 1fr 60px;
    gap: var(--s-4); align-items: center;
  }
  .star-bar__label {
    font-family: var(--body); font-size: var(--t-sm); color: var(--type-soft);
    display: flex; gap: var(--s-1); align-items: center;
  }
  .star-bar__label strong { color: var(--type); font-weight: 600; }
  .star-bar__track {
    height: 10px; background: var(--bg-deep);
    border-radius: 99px; overflow: hidden;
  }
  .star-bar__fill {
    height: 100%; background: var(--amber); border-radius: 99px;
  }
  .star-bar__pct { font-family: var(--display); font-size: var(--t-sm); color: var(--type-muted); font-variant-numeric: tabular-nums; text-align: right; }

  .review-cards {
    margin-top: var(--s-7);
    display: grid; gap: var(--s-4);
  }
  @media (min-width: 720px) { .review-cards { grid-template-columns: repeat(3, 1fr); } }
  .review-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--s-5);
    display: grid; gap: var(--s-3);
  }
  .review-card__stars { color: var(--amber); font-size: var(--t-md); line-height: 1; }
  .review-card__quote { font-size: var(--t-base); color: var(--type); line-height: 1.5; font-weight: 500; }
  .review-card__attr { font-size: var(--t-2xs); color: var(--type-muted); letter-spacing: 0.04em; padding-top: var(--s-2); border-top: 1px solid var(--line-soft); }
}

/* ────────── ABOUT — photo trio + body ────────── */
@layer about {
  .about-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    margin-bottom: var(--s-7);
  }
  @media (min-width: 720px) {
    .about-photos { grid-template-columns: repeat(3, 1fr); }
  }
  .about-photo {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    display: grid;
    place-items: center;
  }
  .about-photo:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/9; }
  @media (min-width: 720px) {
    .about-photo:nth-child(3) { grid-column: auto; aspect-ratio: 4/5; }
    .about-photo:nth-child(2) { transform: translateY(var(--s-5)); }
  }
  .about-photo--a {
    background:
      radial-gradient(ellipse at 30% 30%, oklch(60% 0.150 65 / 0.5), transparent 55%),
      linear-gradient(135deg, oklch(35% 0.050 50), oklch(18% 0.020 50));
  }
  .about-photo--b {
    background:
      radial-gradient(ellipse at 70% 60%, oklch(45% 0.080 60 / 0.45), transparent 60%),
      linear-gradient(160deg, oklch(28% 0.030 80), oklch(14% 0.015 50));
  }
  .about-photo--c {
    background:
      radial-gradient(ellipse at 50% 40%, oklch(55% 0.130 110 / 0.35), transparent 55%),
      linear-gradient(200deg, oklch(30% 0.040 110), oklch(15% 0.018 80));
  }
  .about-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-photo__caption { z-index: 1; }
  .about-photo__caption {
    position: absolute;
    bottom: var(--s-3); left: var(--s-3); right: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: oklch(0% 0 0 / 0.55);
    backdrop-filter: blur(6px);
    border-radius: var(--r-sm);
    font-size: var(--t-2xs);
    color: var(--type-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
  }
  .about-photo__caption strong { color: var(--amber); font-weight: 700; }

  .about-body {
    max-width: 760px;
  }
  .about-body p {
    font-size: var(--t-md);
    color: var(--type-soft);
    line-height: 1.7;
    margin-bottom: var(--s-4);
    max-width: none;
  }
  .about-body p strong { color: var(--type); font-weight: 600; }
  .about-body p em { font-style: normal; color: var(--amber); font-weight: 600; }
}

/* ────────── VISIT — hours-table-first contact ────────── */
@layer visit {
  .contact-grid {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); } }

  .hours-table {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .hours-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .hours-row:last-child { border-bottom: 0; }
  .hours-row--today { background: oklch(74% 0.160 65 / 0.10); border-left: 3px solid var(--amber); }
  .hours-row__day { font-family: var(--display); font-weight: 600; font-size: var(--t-md); color: var(--type); }
  .hours-row__time { font-size: var(--t-md); color: var(--type-soft); font-variant-numeric: tabular-nums; }
  .hours-row__live { font-size: var(--t-2xs); color: var(--amber); letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; display: flex; gap: var(--s-2); align-items: center; }
  .hours-row__live .dot { width: 8px; height: 8px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 10px var(--amber); animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.55; } }

  .visit-info {
    display: grid; gap: var(--s-5);
    align-content: start;
  }
  .visit-info__item { display: grid; gap: 4px; }
  .visit-info__key {
    font-size: var(--t-2xs); color: var(--amber); font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
  }
  .visit-info__val {
    font-family: var(--display); font-weight: 500; font-size: var(--t-md);
    color: var(--type); line-height: 1.4;
  }
  .visit-info__val a:hover { color: var(--amber); }
  .visit-info__val--big { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.012em; }

  /* Reusable action link in visit-info (e.g. "Open in Google Maps") */
  .visit-info__action {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--s-2);
    font-family: var(--body);
    font-size: var(--t-sm);
    color: var(--amber);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--d-1);
  }
  .visit-info__action:hover { color: var(--amber-glow); }
}

/* ────────── Footer — strong WhiteCap sign-off ────────── */
@layer footer {
  .site-footer {
    border-top: 1px solid var(--line);
    padding: var(--s-8) 0 var(--s-6);
    background: var(--bg-deep);
  }
  .site-footer__grid {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: 1fr;
    align-items: end;
    margin-bottom: var(--s-7);
  }
  @media (min-width: 720px) {
    .site-footer__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-9); }
  }
  .site-footer__sample {
    font-family: var(--display);
    font-size: clamp(var(--t-xl), 3vw, var(--t-3xl));
    font-weight: 600;
    color: var(--type);
    letter-spacing: -0.025em;
    line-height: 1.15;
    max-width: 22ch;
  }
  .site-footer__sample em { font-style: normal; color: var(--amber); }
  .site-footer__cta {
    display: grid; gap: var(--s-3);
  }
  .site-footer__cta-label {
    font-size: var(--t-2xs); color: var(--amber); font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .site-footer__cta-body { font-size: var(--t-md); color: var(--type-soft); line-height: 1.55; }
  .site-footer__cta-body a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-weight: 600; }
  .site-footer__cta-body a:hover { color: var(--amber-glow); }
  .site-footer__socials {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-3) var(--s-5);
    margin-bottom: var(--s-6);
  }
  .site-footer__socials-label {
    font-size: var(--t-2xs); color: var(--amber); font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .social-list {
    display: flex; gap: var(--s-3); align-items: center;
    flex-wrap: wrap;
  }
  .social-list a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    color: var(--type-soft);
    transition: color var(--d-1), border-color var(--d-1), background var(--d-1), transform var(--d-1);
  }
  .social-list a:hover, .social-list a:focus-visible {
    color: var(--bg-deep);
    background: var(--amber);
    border-color: var(--amber);
    transform: translateY(-1px);
  }
  .social-list svg {
    width: 18px; height: 18px;
    fill: currentColor;
  }
  .site-footer__rule {
    height: 1px; background: var(--line); margin-bottom: var(--s-5);
  }
  .site-footer__base {
    display: grid; gap: var(--s-3);
    grid-template-columns: 1fr;
    font-size: var(--t-xs);
    color: var(--type-muted);
  }
  @media (min-width: 720px) {
    .site-footer__base { grid-template-columns: 1fr auto; align-items: center; }
    .site-footer__base-right { text-align: right; }
  }
  .site-footer__base a { color: var(--type-soft); }
  .site-footer__base a:hover { color: var(--amber); }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(8px); animation: rise var(--d-3) var(--ease) forwards; }
    .reveal--1 { animation-delay: 80ms; }
    .reveal--2 { animation-delay: 220ms; }
    .reveal--3 { animation-delay: 380ms; }
    .reveal--4 { animation-delay: 540ms; }
  }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }
}