/* ==========================================================================
   Rudy B's Gourmet Popcorn
   Palette and type sampled from the logo: cream stock, navy banner,
   antique gold rules, star red. Fairground signage, not editorial minimalism.
   ========================================================================== */

:root{
  --cream:      #F7F0E1;
  --cream-deep: #EDE2C9;
  --navy:       #1C4E8A;
  --navy-deep:  #143A67;
  --gold:       #C9A24C;
  --gold-pale:  #E3CB90;
  --red:        #BE2A2E;
  --ink:        #14130F;
  --ink-soft:   #4A463C;

  --rule: rgba(20,19,15,.16);
  --rule-cream: rgba(247,240,225,.26);

  --display: "Alfa Slab One", Georgia, serif;
  --label:   "Oswald", "Arial Narrow", sans-serif;
  --body:    "Bitter", Georgia, serif;

  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--navy); }
img{ max-width:100%; height:auto; display:block; }

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--red); color:var(--cream);
  padding:.75rem 1.25rem; font-family:var(--label); z-index:99;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{
  width:min(1120px,100% - (var(--pad) * 2));
  margin-inline:auto;
}

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--red);
  margin:0 0 .6rem;
}
.eyebrow--gold{ color:var(--gold-pale); }

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,1.2rem + 3vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .85rem;
  color:var(--ink);
}
.display--cream{ color:var(--cream); }

.lede{
  max-width:52ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  color:var(--ink-soft);
  margin:0 0 2.25rem;
}
.lede--cream{ color:rgba(247,240,225,.82); }

.fineprint{
  font-size:.9rem;
  color:var(--ink-soft);
  font-style:italic;
}

/* ==========================================================================
   HERO — navy field, gold rays, the logo as the thesis
   ========================================================================== */

.hero{
  position:relative;
  background:var(--navy-deep);
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad) 0;
  text-align:center;
  overflow:hidden;
}

/* Sunburst behind the logo, echoing the rays in the mark itself */
.hero__rays{
  position:absolute;
  top:-28%; left:50%;
  width:min(1500px,190vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(201,162,76,.085) 0deg 4.5deg,
    transparent 4.5deg 9deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 6%, transparent 55%);
          mask-image:radial-gradient(circle at 50% 50%, #000 6%, transparent 55%);
  pointer-events:none;
}

.hero__inner{
  position:relative;
  max-width:760px;
  margin-inline:auto;
  padding-bottom:clamp(2.5rem,5vw,3.75rem);
}

.hero__logo{
  width:clamp(230px,42vw,380px);
  margin:0 auto 1.5rem;
  border-radius:50%;
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}

.hero__tag{
  font-size:clamp(1.05rem,1rem + .45vw,1.32rem);
  color:rgba(247,240,225,.9);
  max-width:34ch;
  margin:0 auto 1.75rem;
  text-wrap:balance;
}

/* Live "next up" chip — the schedule surfacing at the top of the page */
.nextup{
  display:inline-flex;
  align-items:stretch;
  gap:0;
  text-decoration:none;
  border:2px solid var(--gold);
  background:rgba(201,162,76,.09);
  margin-bottom:2rem;
  max-width:100%;
  transition:background .18s ease, transform .18s ease;
}
.nextup:hover{ background:rgba(201,162,76,.2); transform:translateY(-2px); }
/* display:inline-flex would otherwise beat the [hidden] attribute */
.nextup[hidden]{ display:none; }

.nextup__label{
  background:var(--gold);
  color:var(--navy-deep);
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  padding:.7rem .85rem;
  display:flex; align-items:center;
  white-space:nowrap;
}
.nextup__body{
  color:var(--cream);
  font-family:var(--label);
  font-weight:400;
  font-size:.98rem;
  padding:.7rem 1rem;
  text-align:left;
}

.hero__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem clamp(1rem,3vw,2.25rem);
  border-top:1px solid var(--rule-cream);
  padding-top:1.4rem;
}
.hero__nav a{
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  color:rgba(247,240,225,.78);
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.hero__nav a:hover{ color:var(--cream); border-bottom-color:var(--gold); }

/* Scalloped edge, borrowed from the banner ribbon in the logo */
.scallop{
  height:18px;
  background:
    radial-gradient(circle at 12px -2px, var(--cream) 12px, transparent 12.5px)
    0 0 / 24px 18px repeat-x;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.section--cream{ background:var(--cream); }
.section--navy{ background:var(--navy); color:var(--cream); }
.section--gold{
  background:var(--cream-deep);
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
}

/* ==========================================================================
   SCHEDULE — the signature. Ticket stubs.
   ========================================================================== */

.stubs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:var(--gap);
}

.stubs__msg{
  grid-column:1/-1;
  font-style:italic;
  color:var(--ink-soft);
  padding:2rem 0;
  margin:0;
}

.stub{
  position:relative;
  background:#FFFDF7;
  border:2px solid var(--ink);
  display:flex;
  flex-direction:column;
  box-shadow:5px 5px 0 rgba(20,19,15,.14);
}

/* Perforation between the date block and the details */
.stub::before,
.stub::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:50%;
  top:var(--perf,104px);
  transform:translateY(-50%);
}
.stub::before{ left:-10px; }
.stub::after{ right:-10px; }

.stub__date{
  background:var(--navy);
  color:var(--cream);
  text-align:center;
  padding:1rem .75rem 1.15rem;
  border-bottom:2px dashed rgba(247,240,225,.35);
}
.stub__month{
  display:block;
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.78rem;
  color:var(--gold-pale);
}
.stub__day{
  display:block;
  font-family:var(--display);
  font-size:2.9rem;
  line-height:1;
  margin-top:.2rem;
}
.stub__weekday{
  display:block;
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  color:rgba(247,240,225,.72);
  margin-top:.3rem;
}

.stub__body{
  padding:1.15rem 1.25rem 1.35rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  flex:1;
}
.stub__name{
  font-family:var(--display);
  font-size:1.22rem;
  line-height:1.22;
  margin:0;
}
.stub__where,
.stub__when{
  margin:0;
  font-size:.94rem;
  color:var(--ink-soft);
}
.stub__when{
  font-family:var(--label);
  letter-spacing:.05em;
  color:var(--red);
}
.stub__note{
  margin:.15rem 0 0;
  font-size:.9rem;
  color:var(--ink-soft);
}
.stub__map{
  margin-top:auto;
  padding-top:.7rem;
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:var(--navy);
}

/* On a phone, six full-height stubs make an endless scroll. Turn the ticket
   90° so it tears down the side instead of across the middle. */
@media (max-width:620px){
  .stub{ flex-direction:row; }

  .stub__date{
    flex:0 0 94px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:.9rem .5rem;
    border-bottom:none;
    border-right:2px dashed rgba(247,240,225,.35);
  }
  .stub__day{ font-size:2.1rem; }
  .stub__weekday{ font-size:.62rem; letter-spacing:.12em; }
  .stub__month{ font-size:.68rem; letter-spacing:.22em; }

  /* Notches move to the ends of the vertical perforation. */
  .stub::before,
  .stub::after{
    left:86px; right:auto;
    top:auto;
    transform:translateX(-50%);
  }
  .stub::before{ top:-10px; }
  .stub::after{ bottom:-10px; }
}

/* Scroll-in reveal. The hidden state is applied by JS (.is-pending) rather
   than being the default, so a stub is never invisible if the observer
   never fires. */
.stub.is-pending{ opacity:0; transform:translateY(14px); }
.stub.is-in{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s ease;
}
@media (prefers-reduced-motion:reduce){
  .stub.is-pending{ opacity:1; transform:none; }
  .stub.is-in{ transition:none; }
}

/* ==========================================================================
   FLAVORS
   ========================================================================== */

/* Three across on desktop so the six flavors fall into two even rows —
   auto-fit would give four and leave a ragged, half-ruled second row. */
.flavors{
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0 clamp(1.5rem,4vw,3rem);
  border-top:1px solid var(--rule-cream);
}
@media (min-width:620px){ .flavors{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .flavors{ grid-template-columns:repeat(3,1fr); } }
.flavor{
  padding:1.4rem 0;
  border-bottom:1px solid var(--rule-cream);
}
.flavor__name{
  font-family:var(--display);
  font-size:1.13rem;
  margin:0 0 .3rem;
  color:var(--gold-pale);
}
.flavor__note{
  margin:0;
  font-size:.94rem;
  color:rgba(247,240,225,.74);
}

.section--navy .fineprint{ color:rgba(247,240,225,.6); }

/* ==========================================================================
   BOOKING
   ========================================================================== */

.wrap--split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.25rem,5vw,4rem);
}
@media (min-width:860px){
  .wrap--split{ grid-template-columns:1fr minmax(370px,.85fr); align-items:start; }
}

/* Tighter than the default section lede — the checklist follows immediately. */
.booking__pitch .lede{ margin-bottom:1.5rem; }

.checks{
  list-style:none;
  padding:0;
  margin:0 0 1.75rem;
}
.checks li{
  position:relative;
  padding-left:1.9rem;
  margin-bottom:.65rem;
}
.checks li::before{
  content:"★";
  position:absolute; left:0; top:-.05em;
  color:var(--red);
  font-size:1.05rem;
}

.form{
  background:#FFFDF7;
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--gold);
  padding:clamp(1.4rem,3vw,2rem);
}
.form__title{
  font-family:var(--display);
  font-size:1.35rem;
  margin:0 0 1.25rem;
}

.field{ display:block; margin-bottom:1rem; }
.field__label{
  display:block;
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}
.field__label em{ font-style:normal; opacity:.6; }

.field input,
.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--rule);
  padding:.6rem .7rem;
  border-radius:0;
}
.field input:focus,
.field textarea:focus{ border-color:var(--navy); }
.field textarea{ resize:vertical; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.btn{
  width:100%;
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.86rem;
  color:var(--cream);
  background:var(--red);
  border:2px solid var(--ink);
  padding:.85rem 1rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.form__status{
  margin:.9rem 0 .35rem;
  font-size:.94rem;
  min-height:1.2em;
}
.form__status.is-ok{ color:#1E6B3A; }
.form__status.is-bad{ color:var(--red); }

/* ==========================================================================
   ORGANIZERS
   ========================================================================== */

.specs{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:0 clamp(1.5rem,4vw,3rem);
}
.spec{
  padding:1.1rem 0;
  border-bottom:1px solid var(--rule);
}
.spec dt{
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.74rem;
  color:var(--red);
  margin-bottom:.3rem;
}
.spec dd{ margin:0; font-size:.98rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  background:var(--navy-deep);
  color:rgba(247,240,225,.8);
  padding:clamp(2.5rem,5vw,3.5rem) 0 1.75rem;
  border-top:5px solid var(--gold);
}
.foot__inner{
  display:flex;
  flex-wrap:wrap;
  gap:2rem clamp(2rem,8vw,6rem);
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--rule-cream);
}
.foot__name{
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--cream);
  margin:0 0 .4rem;
}
.foot__line{ margin:.15rem 0; font-size:.95rem; }
.foot__line--label{
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.74rem;
  color:var(--gold);
  margin-bottom:.5rem;
}
.foot a{ color:var(--gold-pale); }
.foot__legal{
  margin:1.5rem 0 0;
  text-align:center;
  font-size:.82rem;
  color:rgba(247,240,225,.45);
}