/* ============================================================================
   THE RHYMERS' CLUB — styles.css
   ----------------------------------------------------------------------------
   Design direction: Royal Green as the dominant field (not the tan/gold the
   old Squarespace site and the example.png mockup use) — gold becomes the
   accent, plaster/silver carry light surfaces and secondary text. See
   BRAND_GUIDE.md for the full palette derivation and rationale.

   Structure of this file:
     1. FONTS
     2. TOKENS — colour, type, spacing, radius
     3. MENU COMPONENT BRANDING  (menus/menu.css reads these)
     4. RESET + PAGE SHELL
     5. TYPOGRAPHY
     6. LAYOUT HELPERS
     7. NAVIGATION (MIGRATION.md §2.1)
     8. BUTTONS
     9. FOOTER
    10. PROMO POPUP (MIGRATION.md §12)
    11. UTILITIES

   Mobile-first throughout: media queries widen up, never shrink down
   (~80% of traffic is phone).
   ========================================================================= */


/* ============================================================================
   1. FONTS — self-hosted, converted from Font Source/ (MIGRATION.md §8)
   ========================================================================= */

@font-face {
  font-family: 'PP Eiko';
  src: url('fonts/PPEiko-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('fonts/PPEiko-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('fonts/PPEiko-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('fonts/PPMori-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('fonts/PPMori-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('fonts/PPMori-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Mori';
  src: url('fonts/PPMori-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fasthand';
  src: url('fonts/Fasthand-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Highlight/accent only, per BRAND_GUIDE.md — never body copy or headings. */


/* ============================================================================
   2. TOKENS
   ========================================================================= */

:root {
  /* — Type families — */
  --trc-font-display: 'PP Eiko', Georgia, 'Times New Roman', serif;
  --trc-font-body:    'PP Mori', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --trc-font-script:  'Fasthand', cursive;  /* highlight/accent only — never body or headings */

  /* — Colour system — from BRAND_GUIDE.md, sampled off the brand deck's
       rendered swatches (its printed hex codes are leftover template values
       and don't match). Royal Green is the PRIMARY FIELD here, flipped from
       the gold-dominant example.png direction per the 2026-08-17 brand call.
       Default to these BASE shades everywhere; the deep/light variants exist
       only for the few spots that specifically need a darker or lighter tint
       (interactive hover states, text-on-colour contrast) — not as a default
       look (2026-08-18 direction call). */
  --trc-green:        #003B3E;  /* BASE — default green everywhere: page bg, nav, footer */
  --trc-green-deep:   #062B2D;  /* darker variant — reserve for specific cases only */
  --trc-green-light:  #0D676B;  /* lighter tint — hover states on dark */

  --trc-gold:         #CDB280;  /* BASE — default gold everywhere: buttons, links, logo, accents */
  --trc-gold-deep:    #C39E59;  /* darker variant — reserve for specific cases only */
  --trc-gold-light:   #EBD09D;  /* lighter tint — hover highlight */

  --trc-plaster:      #FFFFFF;
  --trc-silver:       #E6E7E8;
  --trc-silver-dark:  #C2C5C7;

  /* — Text roles. Kept as their own tokens (not read directly off the colour
       tokens above) so a future palette tweak can't silently drag text
       contrast below AA. — */
  --trc-text:         var(--trc-plaster);      /* headings + body on dark field — 15.1:1 */
  --trc-text-soft:    var(--trc-silver-dark);  /* de-emphasised text on dark field — 8.7:1 */
  --trc-text-on-light: var(--trc-green);       /* copy on any light/plaster surface — 12.4:1 */

  /* — Type scale — clamp() so display sizes stay big on desktop without
       overflowing a 360px phone. — */
  --step--1: 0.85rem;
  --step-0:  1rem;
  --step-1:  1.15rem;
  --step-2:  clamp(1.35rem, 1.1rem + 1vw,   1.75rem);
  --step-3:  clamp(1.8rem,  1.3rem + 2vw,   2.6rem);
  --step-4:  clamp(2.4rem,  1.4rem + 4vw,   3.6rem);
  --step-5:  clamp(3rem,    1.4rem + 7vw,   5.5rem);  /* hero / H1 */

  /* — Spacing — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.85rem;
  --space-m:   1.35rem;
  --space-l:   2.2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;

  /* — Corner language + measure — */
  --radius-s:  4px;
  --radius-m:  10px;
  --radius-lg: 18px;
  --pill:      999px;
  --measure:   62ch;
  --page-max:  1180px;
  --gutter:    clamp(1.1rem, 4vw, 3rem);

  /* — Nav sizing, derived rather than measured by hand — see .topnav-container — */
  --nav-logo-h: 44px;
  --nav-h: calc(2 * var(--space-m) + var(--nav-logo-h));

  /* — Header/mobile-nav brand tokens (MIGRATION.md §2.1) — */
  --brand-nav:    var(--trc-plaster);
  --brand-panel:  var(--trc-green);
}


/* ============================================================================
   3. MENU COMPONENT BRANDING
   ----------------------------------------------------------------------------
   menus/menu.css ships with no :root block of its own — every rule falls
   back to a hardcoded default via var(--menu-*, fallback). This is the only
   place these tokens are set; the component itself stays unmodified.
   ========================================================================= */

:root {
  --menu-text:             var(--trc-text);
  --menu-surface:          var(--trc-green);
  --menu-accent:           var(--trc-gold);
  --menu-font-heading:     var(--trc-font-display);
  --menu-font-body:        var(--trc-font-body);
  --menu-skeleton-base:    var(--trc-green);
  --menu-skeleton-shimmer: var(--trc-green-light);
}


/* ============================================================================
   4. RESET + PAGE SHELL
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--trc-green);
  color: var(--trc-text);
  font-family: var(--trc-font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

main { flex: 1 0 auto; width: 100%; }

img { max-width: 100%; display: block; }

a { color: var(--trc-gold); text-decoration-thickness: from-font; }
a:hover, a:focus-visible { color: var(--trc-gold-light); }

:focus-visible {
  outline: 2px solid var(--trc-gold);
  outline-offset: 3px;
}


/* ============================================================================
   5. TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--trc-font-display);
  font-weight: 500;
  color: var(--trc-text);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 500; }
h4 { font-size: var(--step-1); font-family: var(--trc-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

p { margin: 0 0 1em; max-width: var(--measure); }

blockquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--trc-gold);
  font-family: var(--trc-font-display);
  font-size: var(--step-2);
  font-style: italic;
  max-width: var(--measure);
}
blockquote span { display: inline-block; margin-top: var(--space-2xs); font-size: var(--step--1); font-style: normal; }

.eyebrow {
  display: block;
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trc-gold);
  margin-bottom: var(--space-xs);
}

.text-soft { color: var(--trc-text-soft); }

/* Simple centered title block for subpages that don't carry a full hero
   (menu, about, events) — eyebrow + h1 + one line of supporting copy. The
   header above it is a normal sticky (non-overlay) nav on these pages, so
   it already occupies its own flow space — no extra top offset needed. */
.page-header { text-align: center; padding-bottom: var(--space-l); }
.page-header .wrap { max-width: 62ch; }
.page-header p { margin-inline: auto; }


/* ============================================================================
   6. LAYOUT HELPERS
   ========================================================================= */

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

main section {
  padding-block: var(--space-2xl);
}

.section-light {
  background: var(--trc-silver);
  color: var(--trc-text-on-light);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--trc-text-on-light); }
.section-light a { color: var(--trc-green); }
.section-light a:hover, .section-light a:focus-visible { color: var(--trc-green-light); }


/* ============================================================================
   7. NAVIGATION (MIGRATION.md §2.1)
   ========================================================================= */

.topnav-container {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--gutter);
  background: var(--trc-green);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* Homepage hero nav: floats transparently over the hero image, fades in the
   solid nav background once the page scrolls (JS toggles .is-scrolled). */
.topnav-container.nav--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}
.topnav-container.nav--overlay.is-scrolled {
  background: var(--trc-green);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .18);
}

.nav-logo { height: var(--nav-logo-h); width: auto; transition: opacity .3s ease, filter .3s ease; }

.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  margin-left: auto;
}

.nav-link {
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-nav);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--trc-gold); }

.nav-link-reserve {
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--trc-gold);
  border-radius: var(--pill);
  color: var(--trc-gold);
}
.nav-link-reserve:hover, .nav-link-reserve:focus-visible {
  background: var(--trc-gold);
  color: var(--trc-green);
}

/* Hamburger button — hidden on desktop */
.icon {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--brand-nav);
}
.icon svg { width: 34px; height: auto; overflow: visible; }
.icon svg path { transition: transform .3s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
/* Wave → X when open */
.icon[aria-expanded="true"] svg path:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.icon[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.icon[aria-expanded="true"] svg path:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }

.no-scroll { overflow: hidden; }

@media (max-width: 760px) {
  .icon { display: inline-flex; z-index: 40; }
  .topnav-container { justify-content: space-between; }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 15;
  }
  body.no-scroll::before { opacity: 1; pointer-events: auto; }

  /* The header sits in its own stacking context above body::before (so the
     hamburger button and slide-in panel stay sharp and clickable while
     open) — which means the backdrop blur never visually reaches the logo.
     Dim/blur it directly instead, so it reads as part of the same backdrop. */
  body.no-scroll .nav-logo { opacity: .35; filter: blur(3px); }

  .topnav {
    position: fixed;
    inset: 0 -100% 0 auto;
    width: min(85vw, 360px);
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-l);
    padding: 6.5rem var(--space-l) var(--space-l);
    margin-left: 0;
    background: var(--brand-panel);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transition: right .3s ease;
    z-index: 30;
  }
  .topnav.show { right: 0; }
  .topnav a.nav-link { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--step-1); }
  .topnav .nav-link-reserve {
    margin-top: auto;
    background: var(--trc-gold);
    color: var(--trc-green);
  }
}


/* ============================================================================
   8. BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--pill);
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary {
  background: var(--trc-gold);
  color: var(--trc-green); /* 6.0:1 on gold */
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--trc-gold-light);
  color: var(--trc-green);
}

.btn-ghost {
  background: transparent;
  border-color: var(--trc-gold);
  color: var(--trc-gold);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--trc-gold);
  color: var(--trc-green);
}


/* ============================================================================
   9. FOOTER
   ========================================================================= */

.site-footer {
  background: var(--trc-green);
  padding: var(--space-2xl) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.footer-logo { height: 40px; width: auto; margin-bottom: var(--space-s); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-l);
}
.footer-links a {
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--trc-text-soft);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--trc-gold); }

.footer-copyright {
  font-size: var(--step--1);
  color: var(--trc-text-soft);
  margin: 0;
}

.footer-border {
  /* A plain block sibling after the (padded) footer, not a child of it — so
     it's naturally full-width with no bleed hack needed. */
  width: 100%;
  height: 40px;
  background-image: url('images/decorative/footer-border.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  opacity: .2;
}


/* ============================================================================
   10. PROMO POPUP (MIGRATION.md §12) — ships inactive
   ========================================================================= */

.promo-popup[hidden] { display: none; }

.promo-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 43, 45, .7);
  backdrop-filter: blur(3px);
  z-index: 50;
}

.promo-popup__card {
  position: fixed;
  z-index: 51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 420px);
  padding: var(--space-xl) var(--space-l) var(--space-l);
  background: var(--trc-green);
  border: 1px solid var(--trc-gold);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: promo-in 0.3s ease;
}

.promo-popup__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--trc-text-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.promo-popup__close:hover, .promo-popup__close:focus-visible { color: var(--trc-gold); }

.promo-popup__title { font-size: var(--step-2); }
.promo-popup__body { margin-inline: auto; color: var(--trc-text-soft); }
.promo-popup__cta { margin-top: var(--space-m); }

@keyframes promo-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}


/* ============================================================================
   11. HOMEPAGE SECTIONS
   ========================================================================= */

.hero {
  position: relative;
  /* The nav floats transparently on top of the hero (position: fixed, see
     .nav--overlay), so the hero itself fills the full screen — svh, not vh,
     so mobile browser chrome showing/hiding doesn't resize this on scroll. */
  height: 100svh;
  padding-block: 0; /* override the generic `main section` padding (§6) — the hero
                        image should run edge-to-edge; .hero__content owns its own */
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,45,.15) 0%, rgba(6,43,45,.55) 65%, rgba(6,43,45,.92) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl);
}

@media (max-width: 760px) {
  .hero__content { padding-block: var(--space-l); text-align: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__actions { flex-direction: column; align-items: center; }
}

.hero__subtitle {
  font-size: var(--step-1);
  max-width: 48ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.hero__dots {
  position: absolute;
  z-index: 2;
  bottom: var(--space-m);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, .7); }
.hero__dot.is-active { width: 26px; background: var(--trc-gold); }
.hero__dot:focus-visible { outline: 2px solid var(--trc-gold); outline-offset: 3px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gallery-grid li:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 8 / 5; }
.gallery-grid li:nth-child(3n+1) img { aspect-ratio: 8 / 5; }
.gallery-grid { list-style: none; padding: 0; }

@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid li:nth-child(3n+1) { grid-column: span 1; aspect-ratio: 4 / 5; }
  .gallery-grid li:nth-child(3n+1) img { aspect-ratio: 4 / 5; }
}

.sister-logos {
  list-style: none;
  margin: var(--space-xl) auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-l) var(--space-xl);
}
.sister-logos img { height: 28px; width: auto; }

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

.secret__text { max-width: 56ch; margin-inline: auto; }
.secret__text h2 { font-size: var(--step-4); }
.secret__text p {
  font-size: var(--step-1);
  color: var(--trc-text-soft);
  margin-inline: auto;
  max-width: none;
}

.secret__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

.secret__illustration {
  width: 60%;
  max-width: 190px;
  margin-inline: auto;
}

@media (min-width: 800px) {
  .secret__grid { grid-template-columns: 1.2fr 1fr; text-align: left; }
  .secret__text { margin-inline: 0; }
  .secret__text p { margin-inline: 0; }
  .secret__image { align-items: center; }
  .secret__illustration { width: 60%; max-width: none; margin-inline: 0; }
}

.visit__grid {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 700px) {
  .visit__grid { grid-template-columns: 1fr 1fr; }
}

.contact-icons {
  display: flex;
  gap: var(--space-s);
  margin: var(--space-m) 0 var(--space-l);
}
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--trc-green);
  transition: color .2s ease;
}
.contact-icon svg { width: 24px; height: 24px; }
.section-light .contact-icon:hover, .section-light .contact-icon:focus-visible {
  color: var(--trc-gold);
}

.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--trc-silver-dark);
  font-size: var(--step--1);
}
.hours-list li:last-child { border-bottom: none; }


/* ============================================================================
   12. UTILITIES
   ========================================================================= */

.text-center { text-align: center; }

.img-trim {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
}
.img-trim::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--trc-gold);
  pointer-events: none;
}


/* ============================================================================
   13. LINKS PAGE — mobile-first bio-link card (Instagram bio destination).
   Nearly 100% of traffic here is a phone screen mid-tap, so the layout is
   built for that first: one centered column, no nav chrome, large touch
   targets, minimal scroll on a standard phone viewport.
   ========================================================================= */

body.links-page {
  position: relative;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-2xl) + 6px) var(--gutter);
  overflow-x: hidden;
}

/* Full-bleed atmosphere photo, fixed behind the card, heavily dimmed so the
   card content stays the focal point — this is what separates it from a
   flat-color link list: you're looking into the actual room. */
.linktree-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.linktree-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.linktree-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,43,45,.88) 0%, rgba(6,43,45,.72) 40%, rgba(6,43,45,.92) 100%);
}

.linktree-border {
  position: fixed;
  left: 0;
  width: 100%;
  height: 22px;
  background-image: url('images/decorative/footer-border.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  opacity: .5;
  z-index: 1;
}
.linktree-border--top { top: 0; }
.linktree-border--bottom { bottom: 0; }

.linktree {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.linktree__logo {
  width: 110px;
  height: auto;
  margin: 0 auto var(--space-m);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

.linktree__name {
  font-size: var(--step-3);
  margin-bottom: var(--space-2xs);
}

.linktree__eyebrow {
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trc-text-soft);
  margin: 0 0 var(--space-2xs);
}

.linktree__handle {
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trc-gold);
  margin: 0;
}

.linktree__rule {
  width: 56px;
  height: 1px;
  margin: var(--space-l) auto;
  background: var(--trc-gold);
}

.linktree__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
.linktree__socials a {
  display: inline-flex;
  color: var(--trc-gold);
  transition: color .2s ease;
}
.linktree__socials a:hover, .linktree__socials a:focus-visible { color: var(--trc-gold-light); }
.linktree__socials svg { width: 26px; height: 26px; }

.linktree__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  min-height: 54px;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--pill);
  border: 1px solid var(--trc-gold);
  background: rgba(6,43,45,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--trc-gold-light);
  font-family: var(--trc-font-body);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.link-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.link-btn:hover, .link-btn:focus-visible {
  background: var(--trc-gold);
  color: var(--trc-green);
}
.link-btn:active { transform: scale(.97); }

.link-btn--primary {
  background: var(--trc-gold);
  color: var(--trc-green);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.link-btn--primary:hover, .link-btn--primary:focus-visible {
  background: var(--trc-gold-light);
  color: var(--trc-green);
}

.linktree__footer {
  margin-top: var(--space-xl);
  font-size: var(--step--1);
  color: var(--trc-text-soft);
}
.text-wide p { max-width: none; }

.story-illustration {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 260px;
  margin-left: auto;
  display: block;
}
@media (max-width: 699px) {
  .story-illustration { order: -1; margin-inline: auto; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Menu component override — the shared menus/menu.css file stays unmodified
   (MIGRATION.md §5); per-store tweaks like this one live here instead.
   Extra #menu-container specificity is needed to beat menu.css's own
   same-selector rule, which loads after this file and uses the border-bottom
   shorthand (resetting color) plus a border-radius that curves its ends. */
#menu-container .menu-section h3 {
  border-bottom: 2px solid var(--trc-gold);
  border-radius: 0;
}

#menu-container .menu-item.highlighted { border-width: 2px; }

#category-tabs button { padding: 0.3em 0.7em; }

#menu-container .top-pick {
  background: none;
  color: var(--trc-gold);
  padding: 0;
  font-family: var(--trc-font-script);
  font-weight: 400;
  font-size: 1em;
}