/* ==========================================================================
   MAIN — layout + components
   Ranch Americana x Oktoberfest. Consumes tokens.css + base.css.
   Every color/size resolves to a token; nothing raw below.
   ========================================================================== */

/* --- Subtle paper grain on light grounds (the "kraft" tactility) --------- */
.ground-day {
  background-image:
    radial-gradient(rgba(30,28,29,0.035) 1px, transparent 1px);
  background-size: 4px 4px;
}


/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Swiss: always a solid ground and a hairline baseline — no transparency,
     and static: the bar and logo never resize or animate on scroll */
  background: var(--night);
  border-bottom: 1px solid var(--hairline-n);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-4);
}
.nav__brand { display: block; flex: 0 0 auto; }
.nav__brand img {
  height: clamp(30px, 4.5vw, 42px);
  width: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
}
/* Swiss: clean neutral sans, tight even tracking, precise — not the mono */
.nav__links a {
  font-family: var(--font-body);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kraft);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--gold); }
.nav__cta {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__links a.nav__cta:hover { background: var(--gold); color: var(--ink); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-2);
}
.nav__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--kraft);
  transition: transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}


/* ==========================================================================
   HERO — the poster
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--night);
  color: var(--kraft);
}
/* --- background: image faded far back ---------------------------------- */
.hero__bg {
  position: absolute;
  inset: -8% 0;
  height: 116%;
  z-index: 0;
  overflow: hidden;
  will-change: transform;     /* subtle scroll parallax set by JS */
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;               /* faded to the back — type leads */
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(23,18,15,0.55) 0%,
      rgba(23,18,15,0.45) 45%,
      rgba(23,18,15,0.75) 100%);
}

/* --- content: Swiss grid, flush-left, type unconstrained --------------- */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--s-10) + var(--s-4)) var(--s-9);
}
.hero__kicker { color: var(--gold); margin-bottom: var(--s-6); }

.hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-5);
}
.hero__line { display: block; }
.hero__ordline {
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: 0.16em;
  color: var(--kraft);
  margin-bottom: 0.2em;
}
.hero__ordline span { color: var(--gold); }

/* OKTOBERFEST — unconstrained, one line, sized to the viewport width */
.hero__bigmask { overflow: hidden; padding-top: 0.08em; }
.hero__big {
  display: block;
  font-size: clamp(2.5rem, 11.5vw, 11rem);
  line-height: 1.0;
  white-space: nowrap;
  color: var(--kraft);
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  transform: translateY(110%);
  animation: riseWord 1.15s ease-in-out 0.15s forwards;
}
@keyframes riseWord { to { transform: translateY(0); } }

.hero__at {
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--gold);
  margin-top: 0.12em;
}

.hero__promise {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  color: var(--kraft);
  margin-top: var(--s-5);
  margin-bottom: var(--s-8);
  max-width: 42ch;
}

/* --- foot: meta grid + CTA on a hairline ------------------------------- */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6) var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-n);
}
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-4) clamp(var(--s-6), 5vw, var(--s-9));
}
.hero__meta dt { color: var(--gold); margin-bottom: var(--s-2); }
.hero__meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.3;
  color: var(--kraft);
  max-width: 22ch;
}

/* --- minimal load-in: one clean staggered rise ------------------------- */
.hero__kicker, .hero__ordline, .hero__at, .hero__promise, .hero__foot {
  animation: riseIn 0.8s var(--ease) both;
}
.hero__kicker  { animation-delay: 0.05s; }
.hero__ordline { animation-delay: 0.14s; }
.hero__at      { animation-delay: 0.40s; }
.hero__promise { animation-delay: 0.52s; }
.hero__foot    { animation-delay: 0.62s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-6);
  z-index: 3;
  color: var(--kraft-70);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.hero__scroll span { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* --- respect reduced motion: no animation, everything legible ----------- */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll span,
  .hero__kicker, .hero__ordline, .hero__at, .hero__promise, .hero__foot,
  .hero__big {
    animation: none !important;
  }
  .hero__big { transform: none; }
}


/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
/* anchored jumps from the nav land below the fixed header, not under it */
main section[id] { scroll-margin-top: 76px; }

.section__head {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-4);
  border-bottom: 2px solid currentColor;
}
.section__head--center { text-align: center; border-bottom: 0; }
.section__eyebrow { color: var(--accent); display: block; margin-bottom: var(--s-3); }
.section__title { font-size: var(--t-d1); }


/* ==========================================================================
   ESSENTIALS — the manifest
   ========================================================================== */
.manifest {
  display: grid;
  gap: 0;
}
.manifest__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.manifest__row:last-child { border-bottom: 1px solid var(--rule); }
.manifest__label { color: var(--type-quiet); padding-top: 0.35em; }
.manifest__lead { font-size: var(--t-lead); max-width: var(--measure); }
.manifest__note { color: var(--type-quiet); font-size: var(--t-small); margin-top: var(--s-2); }
.manifest__note a { color: var(--accent); }

/* the "bring your stein" row gets a small emphasis */
.manifest__row--flag .manifest__lead {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--t-d3);
}

/* cost tiers */
/* minimal: ruled rows, no boxes */
.tiers { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-2); }
.tier {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
}
.tier:last-child { border-bottom: 1px solid var(--rule); }
.tier__price {
  font-family: var(--font-display);
  font-size: var(--t-d2);
  line-height: 1;
  color: var(--accent);
  min-width: 2.6em;
}
.tier__name { font-size: var(--t-body); line-height: 1.3; }


/* ==========================================================================
   ITINERARY — the timeline (golden hour)
   ========================================================================== */
.timeline {
  position: relative;
}
/* the spine */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.7em;
  bottom: 0.7em;
  width: 2px;
  background: var(--rule);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-4) 0 var(--s-4) 34px;   /* left gutter clears the spine + dot */
}
/* dot centered on the spine: dot center 6px = line center 6px */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--ground);
  border-radius: 50%;
}
.timeline__time {
  font-family: var(--font-body);   /* Questrial — numeric copy */
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--type);
  opacity: 0.85;
  padding-top: 0.1em;
}
.timeline__event { font-size: var(--t-lead); }

.itinerary__allday {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 2px solid var(--rule);
  font-size: var(--t-lead);
}
.itinerary__allday .util {
  display: inline-block;
  color: var(--type);
  opacity: 0.7;
  margin-right: var(--s-3);
}


/* ==========================================================================
   FOOD & DRINK — the menus (night)
   ========================================================================== */
.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-8);
}
.menu__heading {
  font-size: var(--t-d2);
  color: var(--accent);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.menu__entry {
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.menu__entry:first-child { border-top: 0; }
.menu__entry dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--t-d3);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-2);
}
.menu__entry dd { margin: 0; color: var(--type-quiet); font-size: var(--t-body); }
.menu__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 2px solid var(--rule);
  color: var(--type-quiet);
}
.menu__foot a { color: var(--accent); }


/* ==========================================================================
   REGISTER & PAY (night)
   ========================================================================== */
.register__deadlines {
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.deadline {
  text-align: center;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.deadline__label { display: block; color: var(--type-quiet); margin-bottom: var(--s-2); }
.deadline__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--t-d3);
  color: var(--accent);
}
.register .btn { display: block; width: fit-content; margin-inline: auto; }
.register__pay { text-align: center; margin-top: var(--s-8); }
.register__pay > .util { color: var(--type-quiet); margin-bottom: var(--s-3); }
.register__venmo { font-size: var(--t-lead); }
.register__venmo a { color: var(--accent); }
.register__pay .manifest__note { margin-top: var(--s-2); }


/* ==========================================================================
   LEND A HAND — volunteer (night)
   ========================================================================== */
.volunteer__grid { max-width: var(--width-text); }
.volunteer__lead { font-size: var(--t-lead); margin-bottom: var(--s-7); }
.help-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 clamp(var(--s-6), 6vw, var(--s-9));
  margin-bottom: var(--s-7);
}
.help-way {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
}
.help-way__when { display: block; color: var(--accent); margin-bottom: var(--s-2); }
.help-way__what { font-size: var(--t-lead); }
.volunteer__ask {
  font-size: var(--t-lead);
  color: var(--type);
  margin-bottom: var(--s-7);
  padding-top: var(--s-5);
  border-top: 2px solid var(--rule);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: var(--s-4) var(--s-7);
  font-size: var(--t-d3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--accent); color: var(--ground); }
.btn--big { padding: var(--s-4) var(--s-8); }
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn--gold:hover { background: transparent; color: var(--gold); }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-block: var(--s-8); border-top: 1px solid var(--rule); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); text-align: center; }
.footer__logo { height: 52px; width: auto; opacity: 0.9; }
.footer__line { color: var(--type-quiet); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 820px) {
  .nav__links {
    position: fixed;
    inset: 0;                       /* full-viewport overlay */
    width: 100vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-6);
    padding: var(--s-8);
    background: var(--night);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-soft);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size: var(--t-d3); letter-spacing: 0.04em; }
  .nav__cta { padding: var(--s-3) var(--s-7); }
  .nav__toggle { display: flex; z-index: 60; }
  .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2) { opacity: 0; }
  .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* lock scroll behind the open overlay */
  body.menu-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .manifest__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .manifest__label { padding-top: 0; }
  .timeline__item { grid-template-columns: 76px 1fr; gap: var(--s-4); }
  .register__deadlines { flex-direction: row; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
  .hero__foot { align-items: stretch; }
}


/* ==========================================================================
   SCROLL REVEAL
   Bidirectional: pieces ease in when they enter the viewport and ease back
   out when they leave — the exit direction follows which edge they cross,
   so it reads naturally scrolling up or down. JS adds .has-reveal only when
   motion is allowed, so no-JS / reduced-motion users see everything.
   ========================================================================== */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);      /* default: sits below, rises into place */
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.has-reveal .reveal.above {
  transform: translateY(-28px);     /* left via the top: drops back down on return */
}
.has-reveal .reveal.in-view {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   REGISTER PAGE
   ========================================================================== */
.page-head { padding-block: calc(var(--s-10) + var(--s-6)) var(--s-8); }
.page-head__kicker { color: var(--gold); display: block; margin-bottom: var(--s-4); }
.page-head__title { font-size: var(--t-d1); margin-bottom: var(--s-5); }
.page-head__lead { font-size: var(--t-lead); color: var(--type-quiet); }
.page-head__lead strong { color: var(--type); font-weight: 400; }

.regform {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.regform__frame {
  display: block;
  width: 100%;
  height: 1759px;
  border: 0;
}
.regform__fallback {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--type-quiet);
}
.regform__fallback a { color: var(--accent); }

.contact__list { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
.contact__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.contact__row:last-child { border-bottom: 1px solid var(--rule); }
.contact__label { color: var(--type-quiet); min-width: 6em; }
.contact__val { font-size: var(--t-lead); }
.contact__val a { color: var(--accent); }


/* ==========================================================================
   CUSTOM REGISTRATION FORM (register page)
   ========================================================================== */
.rform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rform__group { border: 0; padding: 0; margin: 0 0 var(--s-7); }
.rform__legend {
  color: var(--type-quiet);
  display: block;
  width: 100%;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.rfield { margin-bottom: var(--s-4); }
.rfield label { display: block; font-size: var(--t-small); margin-bottom: var(--s-2); }
.req { color: var(--accent); }
.opt { color: var(--type-quiet); }

.rform input[type="text"],
.rform input[type="email"],
.rform input[type="tel"],
.rform textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
}
.rform input:focus, .rform textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.rform__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.rform__radios { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--t-small);
  background: #fff;
}
.pill input { accent-color: var(--ember); margin: 0; }
.pill:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.attendee {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
}
.attendee__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); }
.attendee__remove {
  font-family: var(--font-util);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-util);
  color: var(--type-quiet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  background: transparent;
}
.attendee__remove:hover { color: var(--accent); border-color: var(--accent); }

.rform__add {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--accent);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  background: transparent;
}
.rform__add:hover { border-color: var(--accent); }

.rform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 2px solid var(--rule);
}
.rform__total { font-size: var(--t-lead); }
.rform__total strong { font-family: var(--font-display); color: var(--accent); font-size: var(--t-d3); margin-left: var(--s-2); }
.rform__note { font-size: var(--t-small); color: var(--type-quiet); }
.rform__error { margin-top: var(--s-4); color: #b3261e; font-size: var(--t-small); }

.formdone { padding: var(--s-6); background: var(--surface); border-left: 4px solid var(--accent); border-radius: var(--radius); margin-bottom: var(--s-6); }
.formdone__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d2); color: var(--accent); margin-bottom: var(--s-3); }
.formdone__body { font-size: var(--t-lead); }
.formdone__body a { color: var(--accent); }

@media (max-width: 520px) { .rform__two { grid-template-columns: 1fr; } }