:root {
  --bg: #0d0b09;
  --surface: #17120e;
  --surface-2: #211913;
  --text: #f6efe6;
  --muted: #b9aa98;
  --gold: #d6a84b;
  --gold-2: #f0d28a;
  --cream: #fbf4e8;
  --ink: #1d1712;
  --line: rgba(214,168,75,.24);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 22px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.container { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.eyebrow { letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: var(--gold-2); font-weight: 700; }
.display { font-family: Georgia, "Times New Roman", serif; line-height: .98; letter-spacing: -.035em; margin: 0; }
.muted { color: var(--muted); }
.gold { color: var(--gold-2); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(13,11,9,.82);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .08em; }
.brand-mark {
  width: 42px; height: 42px; border: 1px solid rgba(214,168,75,.45); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-2); font-family: Georgia, serif; font-weight: 700;
  background: radial-gradient(circle at 30% 30%, rgba(240,210,138,.18), transparent 60%);
}
.brand span small { display: block; color: var(--muted); letter-spacing: .12em; font-size: .6rem; font-weight: 600; margin-top: -3px; }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: .94rem; color: #e7ddd1; }
.nav-links a { opacity: .78; }
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--gold-2); }
.menu-toggle { display: none; border: 1px solid rgba(255,255,255,.12); background: transparent; color: white; border-radius: 12px; padding: 9px 11px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; border-radius: 999px; font-weight: 700; transition: .2s ease; border: 1px solid transparent; }
.btn-primary { color: #17120e; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 30px rgba(214,168,75,.2); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn-secondary { border-color: rgba(240,210,138,.28); color: var(--gold-2); background: rgba(255,255,255,.02); }
.btn-secondary:hover { background: rgba(240,210,138,.08); }

.hero { position: relative; overflow: hidden; padding: 96px 0 72px; min-height: 76vh; display: grid; align-items: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(214,168,75,.16), transparent 28%),
    radial-gradient(circle at 16% 22%, rgba(240,210,138,.08), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 58px; }
.hero h1 { font-size: clamp(3.9rem, 9vw, 8rem); max-width: 760px; }
.hero-lead { max-width: 660px; font-size: clamp(1.08rem, 2vw, 1.32rem); color: #d7cbbd; margin: 24px 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-card { border: 1px solid var(--line); border-radius: 30px; min-height: 470px; padding: 30px; background: linear-gradient(155deg, rgba(240,210,138,.11), rgba(23,18,14,.92) 42%, #100d0a); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero-card::after { content: "THE FEW"; position: absolute; right: -34px; bottom: -8px; font: 700 4.4rem/1 Georgia, serif; color: rgba(240,210,138,.05); transform: rotate(-90deg); transform-origin: bottom right; }
.hero-card .season { font-size: 5.5rem; font-family: Georgia, serif; color: var(--gold-2); line-height: .9; margin: 28px 0 12px; }
.hero-card .meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 42px; }
.meta-item { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.meta-item strong { display: block; font-size: 1.08rem; color: #fff5e7; }
.meta-item span { font-size: .83rem; color: var(--muted); }

.section { padding: 86px 0; }
.section-light { background: var(--cream); color: var(--ink); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.section-head h2 { font-size: clamp(2.3rem, 5vw, 4.8rem); max-width: 760px; }
.section-head p { max-width: 540px; color: var(--muted); margin: 0; }
.section-light .section-head p, .section-light .muted { color: #6f6257; }

.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.card { background: var(--surface); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: 24px; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.section-light .card { background: #fffaf2; border-color: rgba(41,31,22,.08); box-shadow: 0 12px 36px rgba(65,44,24,.07); }
.card h3 { margin: 9px 0 7px; font-size: 1.35rem; }
.card p { margin: 0; color: var(--muted); }
.section-light .card p { color: #75695d; }
.category-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(214,168,75,.12); color: var(--gold-2); font-weight: 800; }
.section-light .category-icon { background: #efe0bf; color: #7e5b1b; }

.manifesto { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 52px 0; }
.manifesto-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.manifesto-item span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.manifesto-item strong { display: block; font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--gold-2); margin-top: 4px; }

.timeline { display: grid; gap: 14px; }
.timeline-item { display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.section-light .timeline-item { border-bottom-color: rgba(37,27,18,.1); }
.timeline-date { color: var(--gold-2); font-weight: 800; }
.section-light .timeline-date { color: #8c641f; }
.timeline-item h3 { margin: 0 0 4px; }
.timeline-item p { margin: 0; color: var(--muted); }
.section-light .timeline-item p { color: #6f6257; }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 28px; }
.stat { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.stat strong { display: block; font: 700 2.2rem/1 Georgia, serif; color: var(--gold-2); }
.stat span { display: block; color: var(--muted); font-size: .88rem; margin-top: 8px; }

.quote-block { padding: 36px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, rgba(214,168,75,.1), transparent 50%); }
.quote-block blockquote { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 3.5rem); line-height: 1.15; }
.quote-block p { color: var(--muted); margin: 18px 0 0; }

.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.list-clean li { position: relative; padding-left: 24px; color: var(--muted); }
.list-clean li::before { content: "•"; position: absolute; left: 3px; color: var(--gold-2); }
.section-light .list-clean li { color: #6f6257; }

.page-hero { padding: 80px 0 54px; border-bottom: 1px solid rgba(255,255,255,.07); background: radial-gradient(circle at 80% 10%, rgba(214,168,75,.12), transparent 24%); }
.page-hero h1 { font-size: clamp(3rem, 7vw, 6.4rem); max-width: 900px; }
.page-hero p { max-width: 700px; color: var(--muted); font-size: 1.12rem; }

.person-card { min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.person-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(214,168,75,.18), transparent 30%); }
.person-card > * { position: relative; }
.person-card .role { color: var(--gold-2); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; }

.notice { border: 1px solid rgba(214,168,75,.34); background: rgba(214,168,75,.08); border-radius: 18px; padding: 18px 20px; color: #ead7b6; }
.form-shell { max-width: 820px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1/-1; }
label { font-size: .9rem; color: #d9cabb; }
input, select, textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); background: #14100d; color: white; border-radius: 14px; padding: 13px 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: rgba(240,210,138,.65); box-shadow: 0 0 0 3px rgba(214,168,75,.1); }
textarea { min-height: 130px; resize: vertical; }

.cta { margin: 28px 0 0; padding: 40px; border-radius: 28px; background: linear-gradient(135deg, #f2d58f, #b98125); color: #21170a; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.cta h2 { margin: 0; font: 700 clamp(2rem,4vw,3.5rem)/1 Georgia, serif; }
.cta p { margin: 8px 0 0; color: rgba(33,23,10,.75); }
.cta .btn { background: #17110b; color: #fff5e7; flex-shrink: 0; }

.site-footer { padding: 54px 0 28px; border-top: 1px solid rgba(255,255,255,.07); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3,.7fr); gap: 30px; }
.footer-grid h4 { margin: 0 0 10px; }
.footer-grid a { display: block; color: var(--muted); margin: 7px 0; }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; gap: 20px; color: #887b6d; font-size: .85rem; }

@media (max-width: 960px) {
  .hero-grid, .grid-4, .grid-3, .footer-grid { grid-template-columns: repeat(2,1fr); }
  .hero-grid { gap: 30px; }
  .hero-card { min-height: 400px; }
  .nav-links { position: fixed; left: 18px; right: 18px; top: 84px; padding: 18px; border-radius: 18px; background: #15110e; border: 1px solid rgba(255,255,255,.08); display: none; flex-direction: column; align-items: stretch; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
  .manifesto-row, .stats { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .hero { padding-top: 58px; }
  .hero-grid, .grid-4, .grid-3, .grid-2, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3.4rem, 20vw, 5.4rem); }
  .hero-card { min-height: 360px; }
  .section { padding: 66px 0; }
  .section-head { align-items: start; flex-direction: column; }
  .manifesto-row, .stats { grid-template-columns: 1fr 1fr; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
  .cta { align-items: flex-start; flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}

/* ===== THE FEW v2: official identity, immersive mobile menu & motion ===== */
body.menu-open { overflow: hidden; }

.brand {
  position: relative;
  z-index: 72;
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.brand-logo {
  display: block;
  width: auto;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(214,168,75,.12));
  transition: transform .35s ease, filter .35s ease;
}
.brand:hover .brand-logo {
  transform: translateY(-1px) scale(1.015);
  filter: drop-shadow(0 7px 16px rgba(214,168,75,.22));
}
.footer-brand .brand-logo { height: 92px; }

.menu-toggle {
  width: 50px;
  height: 50px;
  padding: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 76;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.menu-toggle:hover { border-color: rgba(240,210,138,.4); background: rgba(240,210,138,.05); }
.hamburger {
  width: 23px;
  height: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: #f7efe5;
  transform-origin: center;
  transition: transform .3s ease, opacity .22s ease, width .3s ease;
}
.menu-toggle.is-open .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.is-open .hamburger span:nth-child(2) { opacity: 0; width: 0; }
.menu-toggle.is-open .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Pull the opening statement closer to the navigation. */
.hero { padding-top: 70px; }
.hero-card::after {
  content: "";
  width: 230px;
  height: 230px;
  right: -34px;
  bottom: -38px;
  background: url('logo.png') center/contain no-repeat;
  opacity: .045;
  transform: none;
}

/* Subtle interaction and scroll motion. */
.card, .stat, .quote-block, .cta, .person-card, .meta-item {
  transition: transform .35s cubic-bezier(.2,.75,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.card:hover, .person-card:hover {
  transform: translateY(-6px);
  border-color: rgba(214,168,75,.28);
  box-shadow: 0 22px 48px rgba(0,0,0,.18);
}
.stat:hover, .meta-item:hover { transform: translateY(-3px); border-color: rgba(214,168,75,.24); }

.hero::before { animation: ambientGlow 10s ease-in-out infinite alternate; }
.hero-card { animation: cardFloat 6s ease-in-out 1.1s infinite; }
.hero > .container > .hero-grid > div > .eyebrow,
.hero > .container > .hero-grid > div > h1,
.hero > .container > .hero-grid > div > .hero-lead,
.hero > .container > .hero-grid > div > .hero-actions,
.hero > .container > .hero-grid > div > .stats,
.hero > .container > .hero-grid > .hero-card {
  opacity: 0;
  animation: heroRise .78s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero > .container > .hero-grid > div > .eyebrow { animation-delay: .05s; }
.hero > .container > .hero-grid > div > h1 { animation-delay: .14s; }
.hero > .container > .hero-grid > div > .hero-lead { animation-delay: .23s; }
.hero > .container > .hero-grid > div > .hero-actions { animation-delay: .32s; }
.hero > .container > .hero-grid > div > .stats { animation-delay: .41s; }
.hero > .container > .hero-grid > .hero-card { animation-delay: .28s; }

.gold {
  background: linear-gradient(100deg, #c68f2e 0%, #f5d98f 32%, #fff0bd 50%, #d4a34b 68%, #f0d28a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldSheen 8s linear infinite;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2,.75,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ambientGlow {
  0% { transform: scale(1) translate3d(0,0,0); opacity: .82; }
  100% { transform: scale(1.045) translate3d(-1.5%,1%,0); opacity: 1; }
}
@keyframes cardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes goldSheen {
  0% { background-position: 180% 50%; }
  100% { background-position: -40% 50%; }
}

@media (max-width: 960px) {
  .brand-logo { height: 58px; }
  .menu-toggle { display: inline-flex; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 68;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 112px 30px 38px;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 80% 14%, rgba(214,168,75,.14), transparent 30%),
      radial-gradient(circle at 12% 82%, rgba(240,210,138,.07), transparent 28%),
      rgba(13,11,9,.985);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.75,.2,1), visibility .3s ease;
  }
  .nav-links::after {
    content: "";
    position: absolute;
    width: min(66vw, 340px);
    aspect-ratio: 1;
    right: -70px;
    bottom: -95px;
    background: url('logo.png') center/contain no-repeat;
    opacity: .035;
    pointer-events: none;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links a {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px);
    font: 500 clamp(1.45rem, 5vw, 2.25rem)/1.15 Georgia, "Times New Roman", serif;
    padding: 12px 2px;
    color: #eadfd2;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: color .2s ease, opacity .35s ease, transform .35s ease;
  }
  .nav-links.open a { opacity: .82; transform: translateY(0); }
  .nav-links.open a:nth-child(1) { transition-delay: .06s; }
  .nav-links.open a:nth-child(2) { transition-delay: .09s; }
  .nav-links.open a:nth-child(3) { transition-delay: .12s; }
  .nav-links.open a:nth-child(4) { transition-delay: .15s; }
  .nav-links.open a:nth-child(5) { transition-delay: .18s; }
  .nav-links.open a:nth-child(6) { transition-delay: .21s; }
  .nav-links.open a:nth-child(7) { transition-delay: .24s; }
  .nav-links.open a:nth-child(8) { transition-delay: .27s; }
  .nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--gold-2); }
  .nav-links .btn {
    margin-top: 18px;
    padding: 15px 22px;
    font: 700 1rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
    border: 0;
    text-align: center;
  }
}

@media (max-width: 680px) {
  .nav { min-height: 72px; }
  .brand-logo { height: 52px; }
  .menu-toggle { width: 46px; height: 46px; border-radius: 14px; }
  .hero { padding: 26px 0 58px; min-height: auto; }
  .page-hero { padding-top: 46px; }
  .hero-lead { margin-top: 18px; }
  .hero-card { animation-duration: 7s; }
  .nav-links { padding: 102px 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
.site-footer .brand-logo { height: 82px; }
@media (max-width: 680px) { .site-footer .brand-logo { height: 72px; } }
@media (max-width: 960px) {
  .site-header { isolation: isolate; }
  .site-header .brand, .site-header .menu-toggle { position: relative; z-index: 76; }
}

/* ===== THE FEW v3: tighter hero + solid full-screen gold mobile navigation ===== */
/* The desktop hero should begin closer to the navigation instead of vertically centering
   within a tall viewport. */
@media (min-width: 961px) {
  .hero {
    min-height: auto;
    align-items: start;
    padding: 46px 0 72px;
  }
}

@media (max-width: 960px) {
  /* Expanding the header itself to the viewport prevents backdrop-filter/sticky
     containing-block behaviour from making the menu look transparent or clipped. */
  body.menu-open .site-header {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    z-index: 1000;
    overflow: hidden;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(145deg, #f3d78f 0%, #e5bb61 42%, #d4a149 72%, #b98125 100%);
  }

  body.menu-open .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 86% 10%, rgba(255,255,255,.30), transparent 26%),
      radial-gradient(circle at 6% 90%, rgba(75,45,8,.10), transparent 30%);
  }

  body.menu-open .site-header .nav {
    position: relative;
    width: min(calc(100% - 36px), var(--max));
    height: 100%;
    min-height: 100%;
    align-items: flex-start;
    padding-top: 10px;
  }

  body.menu-open .brand {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1010;
  }

  body.menu-open .brand-logo {
    filter: drop-shadow(0 6px 14px rgba(52,31,7,.18));
  }

  body.menu-open .menu-toggle {
    position: absolute;
    top: 13px;
    right: 0;
    z-index: 1012;
    color: var(--ink);
    border-color: rgba(29,23,18,.36);
    background: rgba(255,250,242,.16);
  }

  body.menu-open .hamburger span { background: #1d1712; }

  .nav-links {
    position: absolute;
    inset: 0;
    z-index: 1005;
    min-height: 100%;
    height: 100%;
    overflow-y: auto;
    justify-content: center;
    padding: 92px 0 30px;
    background: transparent;
    transform: none;
  }

  .nav-links::after {
    width: min(74vw, 390px);
    right: -82px;
    bottom: -96px;
    opacity: .07;
    filter: saturate(.7) contrast(1.1);
  }

  .nav-links.open { transform: none; }

  .nav-links a {
    color: #2a1d0e;
    border-bottom-color: rgba(42,29,14,.14);
    text-shadow: none;
    font-weight: 600;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #fff9ec;
    opacity: 1;
  }

  .nav-links .btn {
    color: #fff7e7;
    background: #17110b;
    box-shadow: 0 14px 34px rgba(76,46,10,.22);
  }
}

@media (max-width: 680px) {
  .hero { padding-top: 18px; }
  .nav-links { padding: 86px 0 22px; }
  .nav-links a {
    font-size: clamp(1.35rem, 7vw, 1.85rem);
    padding: 10px 2px;
  }
  .nav-links .btn { margin-top: 14px; }
}

/* ===== THE FEW v4: gold navigation, clean logo instance, aligned hero card ===== */
:root {
  --nav-gold-start: #f3d78f;
  --nav-gold-mid: #e2b857;
  --nav-gold-end: #c78e2d;
}

/* Use the same warm gold family as the “The Few Will.” treatment for the navbar. */
.site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(100deg, var(--nav-gold-start) 0%, #f0d28a 34%, var(--nav-gold-mid) 66%, var(--nav-gold-end) 100%);
  border-bottom: 1px solid rgba(45, 29, 10, .18);
  box-shadow: 0 5px 24px rgba(0, 0, 0, .10);
}

.nav-links { color: #2b1e10; }
.nav-links a { color: #2b1e10; opacity: .82; }
.nav-links a:hover,
.nav-links a.active { color: #fff8e8; opacity: 1; }
.nav-links .btn-primary {
  background: #21170d;
  color: #fff6e3;
  box-shadow: 0 10px 26px rgba(62, 38, 8, .18);
}

.menu-toggle {
  color: #21170d;
  border-color: rgba(33, 23, 13, .32);
  background: rgba(255, 247, 224, .16);
}
.menu-toggle:hover {
  border-color: rgba(33, 23, 13, .48);
  background: rgba(255, 247, 224, .28);
}
.hamburger span { background: #21170d; }

/* Desktop: lift the right-hand Season 01 card so it starts with the headline. */
@media (min-width: 961px) {
  .hero-grid { align-items: start; }
  .hero-card {
    margin-top: 24px;
    min-height: 470px;
  }
}

/* Mobile menu inherits the same gold language as the closed navbar. */
@media (max-width: 960px) {
  body.menu-open .site-header {
    background: linear-gradient(145deg, #f5dc9a 0%, #edca76 34%, #dfa947 68%, #c48624 100%);
  }

  body.menu-open .site-header::before {
    background:
      radial-gradient(circle at 86% 10%, rgba(255,255,255,.30), transparent 26%),
      radial-gradient(circle at 6% 90%, rgba(86,49,7,.10), transparent 30%);
  }

  /* One deliberate logo only; the decorative menu watermark is removed. */
  .nav-links::after { content: none !important; display: none !important; }

  .nav-links a { color: #2b1e10; }
  .nav-links a:hover,
  .nav-links a.active { color: #fff9ed; }
  .nav-links .btn {
    background: #21170d;
    color: #fff7e8;
  }
}


/* ===== THE FEW v5: iOS-safe full-screen menu ===== */
@media (max-width: 960px) {
  /* Safari's bottom toolbar can reveal the document behind a 100dvh overlay.
     Paint the document gold too, and overscan the fixed header below the visual viewport. */
  html.menu-open,
  html.menu-open body,
  body.menu-open {
    background: #d7a13a !important;
    overscroll-behavior: none;
  }

  body.menu-open .site-header {
    top: 0;
    left: 0;
    right: 0;
    bottom: -220px;
    inset: 0 0 -220px 0;
    width: 100%;
    height: auto;
    min-height: calc(100dvh + 220px);
    background: linear-gradient(145deg, #f5dc9a 0%, #edca76 34%, #dfa947 68%, #c48624 100%);
  }

  /* Keep the interactive menu in the actual visual viewport while the gold
     backdrop overscans underneath Safari's translucent bottom controls. */
  body.menu-open .site-header .nav {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .nav-links {
    height: 100dvh;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: clamp(170px, 22dvh, 230px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  /* Remove the shadow that made the small wordmark look like a second logo. */
  .brand-logo,
  body.menu-open .brand-logo {
    filter: none !important;
  }
}

@media (max-width: 680px) {
  .nav-links {
    padding-top: clamp(164px, 20dvh, 208px);
  }
}