/* ============================================================
   Tabletop Theatre — design system
   A "playbill" structure: the page moves through numbered Acts,
   alternating a warm parchment stage with a softly tinted dark
   scene for pacing. Folk-theatrical throughout: hand-torn paper,
   ticket stubs, playbill cards, a rolled die.
   ============================================================ */

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  /* Stage — true black & white, no colour tint */
  --parchment:       hsl(0, 0%, 97%);
  --parchment-deep:  hsl(0, 0%, 92%);
  --ink:             hsl(0, 0%, 8%);
  --stage:           hsl(0, 0%, 5%);
  --scene-tint:      hsl(0, 0%, 16%);
  --scene-tint-2:    hsl(0, 0%, 21%);
  --charcoal:        hsl(0, 0%, 13%);

  /* Accent */
  --coral:           hsl(11, 65%, 58%);
  --coral-deep:      hsl(11, 60%, 46%);
  --coral-soft:      hsl(11, 65%, 58%);
  --accent-second:   #39D5BE; 

  /* Text */
  --text-on-light:   hsl(0, 0%, 8%);
  --text-on-dark:    hsl(0, 0%, 97%);
  --text-muted-light:hsla(0, 0%, 8%, 0.68);
  --text-muted-dark: hsla(0, 0%, 97%, 0.72);

  /* Genre palette — the "coming soon to the repertoire" colours,
     used as the site's secondary accents alongside coral */
  --slate-blue:      #2A4A7A;
  --slate-blue-tag:  #C8E0FA;
  --forest:          #2A6644;
  --forest-tag:      #C0F0D8;
  --ochre:           #8e7821;
  --ochre-tag:       #D4A843;
  --brick:           #7A1E1E;
  --brick-tag:       #FAC0C0;

  /* Type */
  --font-display: 'IM Fell English', serif;
  --font-body:    'EB Garamond', serif;
  --font-script:  'Style Script', cursive;

  --h1-visually-hidden: clamp(2.25rem, 3.4vw, 3rem);
  --h2:   clamp(2.25rem, 3.4vw, 3rem);
  --h2s:  clamp(1.85rem, 3.2vw, 2.75rem);
  --h2s2: clamp(1.3rem, 2.2vw, 1.6rem);
  --h3:   clamp(1.5rem, 2.6vw, 1.9rem);
  --h3-cursive: clamp(1.5rem, 2.1vw, 1.75rem);
  --h4:   clamp(1.15rem, 1.6vw, 1.35rem);
  --h5: clamp(1rem, 1.3vw, 1.12rem);
  --p:    clamp(1.15rem, 1.35vw, 1.35rem);
  --p-sm: 1.12rem;

  /* Small uppercase eyebrow/tag/kicker labels — two-tier system.
    --label: section-level eyebrows (Act I, See & Do, d20 tag...)
    --label-sm: in-card micro-labels (venue eyebrow, wiki tag...) */
  --label:    0.78rem;
  --label-sm: 0.75rem;

  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;
  --scene-pad: clamp(4rem, 7vw, 6.5rem);

  --header-h: 5.5rem;
}
@media (max-width:560px){
  :root{ --h2: clamp(1.7rem, 7vw, 2.25rem); }
}

/* -- Base element resets -- */
html{ scroll-behavior:smooth; }
body{
  background:var(--parchment);
  color:var(--text-on-light);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}

/* ---------- Font ---------- */
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:400; line-height:1.08; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
h4{ font-size:var(--h4); }
h5{ font-size:var(--h5); }
p{ font-size:var(--p); }

.h3-form { font-size:var(--h3); }

.cursive{ font-family:var(--font-script); font-weight:400; }
h3.cursive, h4.cursive{ font-size:var(--h3-cursive); }

.accent { color: var(--coral);}
.accent-2 { color: var(--accent-second);}

/* ---------- Misc ---------- */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
input, textarea{ font-family:inherit; }

/* ---------- Layout ---------- */
.layout{ width:min(78rem, 90%); margin-inline:auto; }

section[id]{ scroll-margin-top:calc(var(--header-h) + 1.5rem); }

.eyebrow{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--font-body); font-weight:600;
  font-size:var(--label); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--coral);
  margin-bottom:0.9rem;
}
.eyebrow::before{ content:""; flex-shrink:0; width:26px; height:1.5px; background:var(--coral); }
.scene-dark .eyebrow{ color:var(--coral); }
.scene-dark .eyebrow::before{ background:var(--coral); }

/* ---------- Scene scaffolding ---------- */
.scene{ position:relative; padding-block:var(--scene-pad); }
.scene-dark{ background:var(--scene-tint); color:var(--text-on-dark); }
.scene-seam{
  height:0; border-top:1.5px dotted var(--ink); width:min(78rem,90%); margin-inline:auto;
}
.scene-dark + .scene-seam{ border-top-color: hsla(0,0%,97%,0.35); }

/* ---------- Buttons ---------- */
button{ font-family:inherit; cursor:pointer; }
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  padding:0.85rem 1.6rem;
  border:2px solid var(--ink);
  border-radius:2px;
  background:var(--accent-second);
  color:var(--stage);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:4px 4px 0 hsla(0,0%,8%,0.35);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 hsla(0,0%,8%,0.35); }
.btn:active{ transform:translate(4px,4px); box-shadow:none; }
.btn-ghost{
  background:transparent; color:var(--text-on-light); box-shadow:none;
}
.btn-ghost:hover{ background:var(--ink); color:var(--parchment); }
.scene-dark .btn-ghost{ color:var(--text-on-dark); border-color:var(--text-on-dark); }
.scene-dark .btn-ghost:hover{ background:var(--parchment); color:var(--ink); }

/* ---------- Skip link / focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:2px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

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

/* ============================================================
   Header / Nav
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:0.55rem clamp(1.2rem, 4vw, 3rem);
  background:hsla(0,0%,8%,0.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid hsla(0,0%,8%,0.08);
  transition:padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
nav.is-scrolled{
  background:hsla(0, 0%, 97%, 0.92);
  box-shadow:0 6px 18px hsla(0,0%,8%,0.06);
  border-bottom-color:var(--coral);
}
.nav-logo{ display:flex; align-items:center; gap:0.6rem; }
.nav-logo a{
  font-family:var(--font-display); color: var(--text-on-dark);
  font-size:1.15rem; transition:font-size 0.25s ease, color 0.2s ease;
}
nav.is-scrolled .nav-logo a{ font-size:1rem; color: var(--text-on-light); }
.nav-links{ display:flex; gap:0.2rem; list-style:none; }
.nav-links a{
  font-size:0.92rem; font-weight:600; letter-spacing:0.01em; color: var(--text-on-dark);
  padding:0.5rem 0.85rem; border-radius:3px;
  transition:background 0.15s ease, color 0.15s ease;
}
nav.is-scrolled .nav-links a{ color: var(--text-on-light); }
.nav-links a:hover{ color: var(--accent-second); background:hsla(0,0%,8%,0.04); }
.nav-links a.active{
  color: var(--coral); position:relative;
}
.nav-links a.active::after{
  content:""; position:absolute; left:0.85rem; right:0.85rem; bottom:0.3rem;
  height:1.5px; background:var(--coral);
}
.nav-reserve{
  font-size:0.9rem; font-weight:600;
  padding:0.5rem 1.05rem;
  background:var(--accent-second); color:var(--ink);
  border-radius:3px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:0 1px 3px hsla(0,0%,8%,0.15);
  white-space:nowrap;
}
.nav-reserve:hover{ transform:translateY(-1px); box-shadow:0 3px 8px hsla(0,0%,8%,0.18); }

.nav-toggle{
  display:none; place-items:center;
  width:2.6rem; height:2.6rem;
  border:none; border-radius:50%;
  background:var(--ink); cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle-bars{ position:relative; display:block; width:1.1rem; height:0.75rem; margin:0 auto; }
.nav-toggle-bars span{
  position:absolute; left:0; right:0; height:2px;
  background:var(--parchment); border-radius:1px;
  transition:transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:50%; margin-top:-1px; }
.nav-toggle-bars span:nth-child(3){ top:100%; margin-top:-2px; }
nav.is-open .nav-toggle-bars span:nth-child(1){ top:50%; margin-top:-1px; transform:rotate(45deg); }
nav.is-open .nav-toggle-bars span:nth-child(2){ opacity:0; }
nav.is-open .nav-toggle-bars span:nth-child(3){ top:50%; margin-top:-1px; transform:rotate(-45deg); }

.nav-panel{
  display:none;
  position:absolute; top:calc(100% + 0.6rem); right:0;
  width:12rem; flex-direction:column; gap:0.5rem;
  padding:0.9rem;
  background:var(--parchment);
  border:4px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--parchment-deep), inset 0 0 0 3px hsla(0,0%,8%,0.35);
  border-radius:2px;
  opacity:0; transform:translateY(-6px) scale(0.97); transform-origin:top right;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:5;
}
nav.is-open .nav-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.nav-panel a{
  text-align:center; font-weight:600; font-size:0.85rem;
  padding:0.6rem 0.9rem; border-radius:2px;
  border:1.5px solid transparent;
}
.nav-panel a.reserve{ background:var(--accent-second); color:var(--ink); }
.nav-panel a.active{ background:var(--coral); color:var(--stage); }
.nav-panel a:not(.reserve):not(.active):hover{ border-color:var(--ink); }

@media (max-width:900px){
  nav{ justify-content:flex-end; gap:0.6rem; position:relative; background:transparent; border:none; backdrop-filter:none; }
  .nav-logo a:not(:first-child){ display:none; }
  .nav-links{ display:none; }
  .nav-reserve{ display:none; }
  .nav-logo{ margin-right:auto; }
  .nav-logo a{
    background:hsla(0, 0%, 97%, 0.9); border:1.5px solid var(--ink);
    padding:0.55rem 1rem; border-radius:999px;
  }
  .nav-toggle{ display:grid; }
  .nav-panel{ display:flex; }
}

/* ============================================================
   Act I — Hero
   ============================================================ */
.hero-new{
  border-bottom:1.5px solid var(--ink);
}
.hero-banner{
  position:relative;
  width:100%;
  height:65vh;
  overflow:hidden;
  background:linear-gradient(160deg, var(--scene-tint-2), var(--stage));
}
.hero-banner-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.hero-banner-placeholder svg{ width:22%; height:22%; opacity:0.25; }
.hero-banner-caption{
  position:absolute; left:1.5rem; bottom:1.5rem;
  background:var(--parchment); border:2px solid var(--ink);
  font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.4rem 0.8rem;
}

.hero-bottom{
  min-height:35vh;
  display:flex; align-items:center;
  padding-block:clamp(1.5rem, 4vw, 2.5rem);
}
/* Match the nav pill's own width formula exactly, so the hero
   row's left/right edges line up with the header at every
   viewport width — not just the site's general content width. */
.hero-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:3rem;
  width:min(74rem, 92%);
  margin-inline:auto;
}
.hero-row-copy{ min-width:0; }
.hero-row-copy h2{ margin-bottom:0.6rem; font-weight: 400; font-style: italic;}
.hero-row-copy h2 .accent{ color:var(--coral); }
.hero-row-copy .lede{ max-width:34rem; opacity:0.88; margin-bottom:0.3rem; }
.hero-row-copy .sub{ max-width:30rem; opacity:0.72; }

/* die (with its tag + reveal) stacked directly above the email
   box, forming one column beside the copy — both columns share
   the row's vertical centering. */
.hero-side{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1.5rem; 
}
.hero-d20-row{ display:flex; flex-direction:row; align-items:center; gap:1.25rem; }
.hero-d20-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem; }
.hero-side .newsletter-row{ max-width:20rem; }

.d20-tag{
  font-size:var(--label); font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  background:var(--parchment); border:clamp(0.08rem, 0.4vw, 0.13rem) solid var(--ink);
  border-radius:999px 999px 999px 4px;
  padding:0.4rem 0.85rem;
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 hsla(11,65%,58%,0.45);
}
.d20{
  position:relative; width:6.5rem; height:6.5rem;
  border:none; background:transparent; padding:0; outline:none;
  filter:drop-shadow(5px 6px 0 var(--ink));
  transition:filter 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.d20:hover{ filter:drop-shadow(7px 8px 0 var(--ink)); }
.d20:active{ filter:drop-shadow(2px 3px 0 var(--ink)); }
.d20-spin{ transform-box:fill-box; transform-origin:center; transition:transform 1.15s cubic-bezier(0.15,0.85,0.2,1); }
.d20-num{ fill:var(--parchment); transition:opacity 0.25s ease; }
.d20.is-rolling .d20-num{ opacity:0; }
.d20:focus-visible{ outline:none; filter:drop-shadow(0 0 0 3px var(--parchment)) drop-shadow(7px 8px 0 var(--ink)); }

.d20-reveal{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width 0.5s ease, opacity 0.4s ease;
  padding-top:0.3rem;
}
.d20-reveal.show{ max-width:20rem; opacity:1; overflow:visible; }
.d20-caption{ font-size:0.95rem; font-style:italic; opacity:0.8; }

.newsletter-row{ position:relative; display:flex; max-width:30rem; }
.newsletter-row input{
  flex:1; min-width:0; font-size:clamp(0.8rem, 3vw, 0.92rem); font-weight:600; width: 100%;
  padding:clamp(0.4rem, 2vw, 0.6rem) clamp(0.6rem, 2.5vw, 1rem);
  border:clamp(0.08rem, 0.4vw, 0.13rem) solid var(--ink); border-right:none;
  background:var(--parchment); outline:none;
  box-shadow:calc(-1 * clamp(0.15rem, 0.8vw, 0.25rem)) calc(1 * clamp(0.15rem, 0.8vw, 0.25rem)) 0 hsla(11,65%,58%,0.4);
}
.newsletter-row input:focus{ background:hsl(0,0%,99%); }
.newsletter-row button{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:clamp(2.1rem, 9vw, 2.76rem);
  font-size:clamp(0.9rem, 3.5vw, 1.1rem); font-weight:700; line-height:1;
  background:var(--coral); color:var(--stage);
  border:clamp(0.08rem, 0.4vw, 0.13rem) solid var(--ink);
  transition:transform 0.15s ease, background 0.15s ease;
}
.newsletter-row button:hover{ background:var(--coral-deep); }

/* Cards live inside .hero-new, after the row, so the section's
   border only appears after them. */
.hero-cards-wrap{
  padding-bottom:clamp(0.6rem, 2vw, 1rem);
  margin-bottom:clamp(2rem, 5vw, 4rem);
}
.hero-cards-wrap .hero-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(0.7rem, 2vw, 1rem);
}
.hero-card{
  background: var(--ink); color:var(--text-on-dark);
  padding:clamp(0.9rem, 3vw, 1.2rem) clamp(0.85rem, 2.5vw, 1rem);
  border-radius:2px; border:3px double var(--parchment);
}
.hero-card h3{
  margin-bottom:0.8rem; font-size: var(--h2s2);
}
.hero-card h3 b{ color:var(--coral); }

@media (max-width:900px){
  .hero-row{ gap:1.5rem; }
  .hero-banner{ height:42vh; border-radius:0 0 1.5rem 1.5rem; }
  .hero-side{ gap:1rem; }
  .hero-cards-wrap .hero-cards{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .hero-banner{ height:36vh; }
  .hero-row{ grid-template-columns:1fr; gap:1rem; }
  .hero-side{ gap:0.85rem; }
  .hero-side .newsletter-row{ max-width:none; width:100%; }
}

/* ============================================================
   Act II — Invite (envelope + letter)
   ============================================================ */
.invite{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  overflow:visible;
}
.invite h2{ color:var(--coral); text-transform:uppercase; margin-bottom:0.6rem; }
.invite h3{
  font-family:var(--font-script); font-weight:400;
  max-width:22ch; line-height:1.15; margin-bottom:clamp(2rem, 6vw, 3.5rem);
}

.invite-envelope{
  --env-sheet:   var(--parchment);
  --env-left:    #232019;
  --env-right:   #0D0C0B;
  --env-fold:    #171512;
  --env-back:    #0A0A09;
  --env-lid:     #2C2926;
  --env-patch:   #38342F;
  --env-deckle:  #4A453D;
  --env-deckle-op: 0.9;
  --env-deckle-sheet: #FFFFFC;
  --env-ink:     #2A2723;

  --env-width: min(46rem, 96%);
  --env-tilt:  -2deg;

  position:relative;
  container-type:inline-size;
  width:var(--env-width);
  aspect-ratio:760/750;
  transform:rotate(var(--env-tilt));
  filter:drop-shadow(0 14px 24px hsla(0,0%,0%,0));
  transition:filter 0.25s ease;
}
.envelope-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.envelope-layer{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.envelope-layer:first-of-type{ z-index:1; }
.envelope-layer:last-of-type{ z-index:3; }
.env-paper{ stroke:var(--env-deckle); stroke-width:1.6; stroke-opacity:var(--env-deckle-op); }
.env-back{ fill:var(--env-back); }
.env-lid{ fill:var(--env-lid); }
.env-sheet{ fill:var(--env-sheet); stroke:var(--env-deckle-sheet); stroke-opacity:0.75; }
.env-left{ fill:var(--env-left); }
.env-right{ fill:var(--env-right); }
.env-fold{ fill:var(--env-fold); }
.env-patch{ fill:var(--env-patch); }

.envelope-letter{
  position:absolute; z-index:2; left:9%; right:9%; top:11%; bottom:10.3%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:4.8% 5% 0; color:var(--env-ink);
}
.envelope-letter h4{
  font-family:var(--font-display); font-weight:400;
  font-size:4.3cqw; line-height:1.15;
}
.envelope-letter h4::after{
  content:""; display:block; width:12.1cqw; height:1px;
  margin:1.6cqw auto 1.9cqw; background:var(--env-ink); opacity:0.45;
}
.envelope-letter p{ font-size:3.2cqw; line-height:1.42; }

@media (max-width:560px){
  .invite-envelope{ --env-width: min(46rem, 100%); }
  .envelope-letter{ top:8%; bottom:6%; padding-top:9%; }
  .envelope-letter h4{ font-size:5.6cqw; }
  .envelope-letter p{ font-size:3.5cqw; }
}
@media (max-width:400px){
  .envelope-letter{ top:6%; bottom:4%; padding-top:8%; }
  .envelope-letter h4{ font-size:5.3cqw; }
  .envelope-letter h4::after{ margin:1.2cqw auto 1.4cqw; }
  .envelope-letter p{ font-size:3.6cqw; line-height:1.32; }
}

.envelope-logo{
  position:absolute; z-index:4; left:43.2%; top:77.1%; width:13.7%; height:13.3%;
  display:grid; place-items:center; overflow:hidden;
}
.envelope-logo span{
  font-family:var(--font-body); font-weight:600; font-size:1.7cqw;
  letter-spacing:0.2em; text-transform:uppercase; color:#8E877B;
}

.envelope-open{
  position:absolute; z-index:5; top:1%; left:4%; right:4%; bottom:3%;
  padding:0; border:none; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.envelope-open:focus-visible{ outline:3px solid var(--coral); outline-offset:5px; }
@media (hover:hover){
  .invite-envelope:hover{ filter:drop-shadow(0 14px 24px hsla(0,0%,0%,0.24)); }
}
.invite-envelope:has(.envelope-open:focus-visible){ filter:drop-shadow(0 14px 24px hsla(0,0%,0%,0.24)); }
@media (prefers-reduced-motion: reduce){ .invite-envelope{ transition:none; } }

/* Ripple field */
.invite-pond{ position:relative; overflow:visible; display:flex; flex-direction:column; align-items:center; }
.invite-ripple-field{
  position:absolute; z-index:-5; left:50%; top:50%; width:150%; height:120%;
  overflow:visible; transform:translate(-50%,-50%); pointer-events:none;
}

/* Opened letter dialog */
.invite-dialog{
  --letter-paper: var(--parchment);
  position:fixed; inset:0; margin:auto;
  width:min(36rem, 92vw); max-height:min(85vh, 52rem);
  padding:0; border:none; border-radius:2px;
  background:var(--letter-paper); color:var(--ink);
  box-shadow:0 12px 32px hsla(0,0%,0%,0.18);
  overflow:hidden;
}
.invite-dialog[open]{ display:flex; flex-direction:column; }
.invite-dialog::backdrop{
  background-color:hsla(0,0%,0%,0);
  transition:background-color 0.3s ease, overlay 0.3s ease allow-discrete, display 0.3s ease allow-discrete;
}
.invite-dialog[open]::backdrop{ background-color:hsla(0,0%,0%,0.6); }
@starting-style{ .invite-dialog[open]::backdrop{ background-color:hsla(0,0%,0%,0); } }

.invite-close{
  position:absolute; z-index:2; top:0.8rem; right:0.8rem;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  font-family:var(--font-body); font-size:1.4rem; line-height:1; cursor:pointer;
  color:var(--ink); background:var(--letter-paper);
  border:1.5px solid var(--ink); border-radius:2px;
  transition:background-color 0.2s ease;
}
.invite-close:hover{ background:hsl(0,0%,90%); }

.invite-letter-body{
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(2.5rem,7vw,3.5rem) clamp(1.5rem,5vw,3.2rem) clamp(2rem,5vw,2.8rem);
  text-align:left;
}
.invite-letter-body h4{ font-size:clamp(1.5rem, 3vw + 0.6rem, 2.2rem); margin-bottom:0.3rem; }
.invite-letter-body .lede{
  font-size:clamp(1.02rem, 1vw + 0.7rem, 1.25rem); font-style:italic;
  margin:0.3rem 0 1.4rem; opacity:0.85;
}
.invite-letter-body p span{ display:block; margin-bottom:1rem; }
.invite-letter-body .sign{ margin-top:1.7rem; }
.invite-letter-body .signature{
  font-family:var(--font-script); font-weight:400;
  margin-top:0.15rem; font-size:clamp(1.8rem, 4vw + 0.4rem, 2.6rem); line-height:1.1;
}
body.has-letter-open{ overflow:hidden; }

/* ============================================================
   Showcase strip (Founded by Artists & Nerds / etc.)
   ============================================================ */
.showcase-scene{
  position:relative;
  padding-block:clamp(1rem, 4vw, 2.5rem); margin-top:clamp(0.25rem, 3vw, 2rem);
}
.showcase{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.5fr 1fr; align-items:center;
  width:90%; max-width:64rem; margin-inline:auto;
}
.showcase-media{
  aspect-ratio:4/3; border-radius:2px;
  background:linear-gradient(150deg, var(--scene-tint-2), var(--stage));
  border:4px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--stage), inset 0 0 0 3px hsla(0,0%,97%,0.5);
}
.showcase-box{
  display:flex; flex-direction:column; gap:clamp(0.5rem, 2vw, 1rem);
  padding:clamp(1.5rem,4vw,2.2rem);
  background:var(--parchment);
  position:relative; z-index:1; margin-left:clamp(-0.6rem, -1.5vw, -1rem);
  border:3px double var(--ink); border-radius:2px;
  box-shadow:6px 6px 0 hsla(0,0%,8%,0.22);
}
.showcase-box p{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(2rem, 6vw, 4.6rem); border-radius:2px;
  background:var(--parchment); color:var(--ink);
  border:1px solid hsla(0,0%,8%,0.16);
  box-shadow:inset 0 0 0 3px hsla(0,0%,8%,0.05);
  padding:0.4rem clamp(0.75rem, 3vw, 1.4rem);
}
@media (max-width:860px){
  .showcase{ grid-template-columns:1fr; width:95%; }
  .showcase-box{ width:96%; margin-inline:auto; margin-top:-2.2rem; }
}

/* ============================================================
   Act III — Repertoire
   ============================================================ */
.repertoire-scene{
  padding-top:clamp(3rem, 7vw, 5.5rem);
  --scene-tint: var(--stage);
  --scene-tint-2: var(--charcoal);
  border-top:2px solid var(--coral);
  border-bottom:2px solid var(--coral);
}

/* -- Intro row: "Choose what comes next" / "Play Right Now" -- */
.rep-head{ text-align:center; margin-bottom:clamp(1rem, 3vw, 1.5rem); }
.rep-head .eyebrow{ justify-content:center; }

.rep-title-outline{
  color: var(--coral);
  white-space:nowrap;
}
.session-title-nowrap{ white-space:nowrap; }

.rep-slogan{ display:flex; justify-content:center; margin-bottom:clamp(1.5rem, 4vw, 2.5rem); }
.rep-slogan span{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:clamp(0.72rem, 3vw, 0.95rem); font-weight:600; letter-spacing:0.1em;
  padding:clamp(0.5rem, 2vw, 0.7rem) clamp(0.9rem, 3.5vw, 1.4rem);
  border:2px solid var(--text-on-dark); border-radius:2px;
  background:var(--scene-tint); color:var(--text-on-dark);
  transform:rotate(-2deg);
  box-shadow:4px 4px 0 hsla(11,65%,58%,0.4);
  text-align:center;
}

.rep-intro{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem);
  padding-bottom:clamp(1.5rem, 4vw, 2.5rem);
  border-bottom:2px dotted hsla(0,0%,97%,0.3);
}
.rep-intro h3{ margin-bottom:0.6rem; line-height:1.4; }
.rep-intro h3 .accent{ color:var(--coral); }
.rep-intro p{ font-style:normal; opacity:0.90 }
.rep-intro p .accent{ opacity:1; color:var(--coral); display: block; }

.session-preview-card{
  position:relative; margin-top:1rem;
  padding:1.1rem 1.3rem 1.2rem;
  background:hsla(0,0%,97%,0.05);
  border:1.5px solid hsla(0,0%,97%,0.25);
  border-left:3px solid var(--accent-second);
  border-radius:2px;
}
.session-preview-genre{
  display:inline-block;
  font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-second); opacity:0.9;
  margin-bottom:0.5rem;
}
.session-preview-card h4{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem, 2.2vw, 1.5rem); line-height:1.15;
  margin-bottom:0.5rem;
}
.session-preview-hook{
  font-style:italic; opacity:0.85; margin-bottom:1rem;
}
.session-preview-link{
  display:block; text-align:right;
  font-family:var(--font-body); font-weight:600; font-size:0.92rem;
  color:var(--coral);
}
.session-preview-link span{ display:inline-block; transition:transform 0.15s ease; }
.session-preview-link:hover{ color:var(--coral-deep); }
.session-preview-link:hover span{ transform:translateX(3px); }

/* -- "Coming soon to the repertoire" cards -- */
.repertoire-frame{
  position:relative;
  padding:clamp(1.2rem, 3.5vw, 2rem);
  border-radius:2px;
}
.repertoire-frame > *{ position:relative; z-index:1; }
.rep-heading-row{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem;
}
.rep-heading{ margin-bottom:0; }
.rep-toggle{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:0.35rem;
  background:transparent; border:none; border-bottom:1.5px solid currentColor;
  color:var(--coral); font-family:var(--font-body); font-weight:600;
  font-size:var(--label); letter-spacing:0.06em; text-transform:uppercase;
  padding:0.15rem 0.05rem 0.3rem; cursor:pointer;
  transition:color 0.15s ease, opacity 0.15s ease;
}
.rep-toggle:hover{ color:var(--coral-deep); }
.rep-toggle-chevron{ display:inline-block; font-size:0.7rem; transition:transform 0.25s ease; }
.rep-toggle[aria-expanded="false"] .rep-toggle-chevron{ transform:rotate(-90deg); }

.rep-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.75rem, 2vw, 1rem); margin-bottom:clamp(1.2rem, 3.5vw, 2rem); overflow:hidden; transition:max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease; }
.rep-grid.is-collapsed{ max-height:0 !important; opacity:0; margin-bottom:0; pointer-events:none; }
.rep-grid-divider{
  width:auto;
  margin-left:calc(-1 * clamp(1.2rem, 3.5vw, 2rem));
  margin-right:calc(-1 * clamp(1.2rem, 3.5vw, 2rem));
  border-bottom:2px dotted hsla(0,0%,97%,0.3);
}
.rep-card-v2{ display:flex; flex-direction:column; }
.rep-card-v2-media{
  aspect-ratio:9/16; position:relative; overflow:hidden; isolation:isolate;
  border-radius:2px;
  box-shadow:6px 14px 24px hsla(0,0%,0%,0.45), 2px 4px 8px hsla(0,0%,0%,0.3);
}
.rep-card-v2-media::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255,246,224,0.20), transparent 44%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.28) 100%);
}
.rep-card-v2.blue .rep-card-v2-media{ background-color:var(--slate-blue); }
.rep-card-v2.green .rep-card-v2-media{ background-color:var(--forest); }
.rep-card-v2.gold .rep-card-v2-media{ background-color:var(--ochre); }
.rep-card-v2.red .rep-card-v2-media{ background-color:var(--brick); }

.rep-card-v2-info{
  display:flex; align-items:flex-start; gap:0.85rem;
  margin-top:clamp(0.75rem, 2vw, 1.1rem);
  padding-left:0.1rem;
}
.rep-card-v2-letter{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(2.4rem, 5vw, 3.2rem); line-height:0.8;
  flex-shrink:0;
}
.rep-card-v2.blue .rep-card-v2-letter{ color:#7AB0F0; }
.rep-card-v2.green .rep-card-v2-letter{ color:#4DC98A; }
.rep-card-v2.gold .rep-card-v2-letter{ color:var(--ochre-tag); }
.rep-card-v2.red .rep-card-v2-letter{ color:#E84040; }

.rep-card-v2-cats{
  display:flex; flex-direction:column; gap:0.15rem;
  padding-top:0.35rem;
}
.rep-card-v2-cats span{
  font-family:var(--font-body); font-size:var(--p-sm); font-weight:600;
  letter-spacing:0.02em; color:var(--text-on-dark); opacity:0.92;
  line-height:1.3;
}

/* -- "For Those Who Want..." genre boxes -- */
.genre-frame{
  position:relative; padding:clamp(0.75rem, 3vw, 2rem); margin-bottom:clamp(1.75rem, 5vw, 3rem);
  border:3px double hsla(0,0%,97%,0.3); border-radius:2px;
  background:transparent;
  text-align:center;
}
.genre-frame-heading{ margin-bottom:1rem; }
.genre-list{
  display:flex; flex-direction:column; align-items:center; gap: 0.5rem;
  background:transparent; border-radius:2px;
  padding:clamp(1.25rem, 5vw, 2.75rem) clamp(0.3rem, 4vw, 2.25rem) clamp(0.9rem, 3vw, 2rem);
}
.genre-list-row{
  display:flex; flex-direction:column;
  gap:1rem; width:100%;
}
.genre-list h4{ font-family:var(--font-body); font-weight:400; font-size:var(--p); white-space:nowrap; }

.genre-item{
  display:flex; flex-direction:row; align-items:stretch;
  width:100%; gap:clamp(0.4rem, 2vw, 0.75rem);
}
.genre-item-heading{
  display:flex; align-items:center; justify-content:flex-start;
  flex:0 0 auto; width:clamp(9rem, 22vw, 16rem);
  background:transparent;
  border:1px solid var(--accent); border-radius:2px;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  padding:clamp(0.4rem, 2vw, 0.75rem) clamp(0.5rem, 2.5vw, 1.25rem);
  text-align:left; 
}
.genre-item-heading h4{ white-space:normal; margin:0; text-align:left; }
.genre-item-desc{
  display:flex; align-items:center;
  flex:1 1 auto;
  background:hsla(0,0%,97%,0.05);
  border:1px solid hsla(0,0%,97%,0.3); border-radius:2px;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent, hsla(0,0%,97%,0.3)) 12%, transparent);
  padding:clamp(0.5rem, 2.2vw, 0.9rem) clamp(0.5rem, 2.5vw, 1.25rem);
  text-align:left;
}
.genre-item-desc p{
  font-family:var(--font-body); text-align:left; margin:0; }
.genre-item-desc span { display: block;}

/* ---------- Pilot Experiences ---------- */
.pilot-cont{
  position:relative;
  max-width:100%; margin:0 auto clamp(1.5rem, 4vw, 2.5rem); padding:clamp(1.3rem, 4vw, 2.2rem) clamp(1.3rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem);
  background:
    repeating-linear-gradient(0deg, hsla(0,0%,8%,0.05) 0 2px, transparent 2px 26px),
    var(--parchment);
  color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:8px 10px 0 -2px hsla(0,0%,5%,0.5);
}
/* Full-bleed variant — add/remove this class on the element to toggle
   between the contained width (matching the rest of the Values section)
   and a true full-viewport-width newspaper section. Nothing else here
   changes: revert by simply removing "pilot-cont--full" from the div. */
.pilot-cont--full{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-left:none; border-right:none;
}
.pilot-cont::before{
  content:""; position:absolute; top:-20px; left:50%; transform:translateX(-50%) rotate(-1.5deg);
  width:180px; height:40px; background:var(--charcoal); border-radius:2px;
}

/* ---------- Masthead ---------- */
.paper-masthead{
  text-align:center;
  padding-bottom:1.1rem; margin-bottom:1.8rem;
  border-bottom: 3px double var(--ink);
}
.paper-kicker{
  display:flex; align-items:center; justify-content:center; gap:0.7rem;
  font-family:var(--font-body); font-weight:700; font-size:var(--label);
  letter-spacing:0.32em; text-transform:uppercase; color:var(--coral);
  margin-bottom:0.6rem;
}
.paper-kicker::before, .paper-kicker::after{
  content:""; height:1px; width:clamp(1.5rem, 4vw, 3.5rem); background:var(--ink); opacity:0.5;
}
.paper-masthead h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.15; text-transform:uppercase;
  letter-spacing:0.01em;
}
.paper-masthead h2 .accent{ color:var(--coral); }
.paper-subheading{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  margin-top:1.1rem;
  font-style:italic; font-size:var(--p); opacity:0.75;
}
/* ---------- Body grid: lede column + session sidebar ---------- */
.paper-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.75rem, 4vw, 3rem);
  padding-top:0.3rem;
}

.paper-drop-cap{ display:flow-root; }
.paper-drop-cap::first-letter{
  font-family:var(--font-display); font-weight:400;
  font-size:3.2rem; line-height:1; float:left;
  padding-right:0.5rem; margin-top:-0.7rem; color:var(--coral);
}
.callout { display:block; border-left:3px solid var(--coral); padding-left:0.9rem; margin:0.9rem 0; }
.paper-drop-cap .callout{ font-weight:700; font-style:italic; }
@media (min-width:901px){
  .paper-lede .callout-break{ display:block; }
}

.paper-headline{
  font-family:var(--font-body); font-weight:900; text-transform:uppercase; 
  font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.05;
  margin:1.6rem 0 0.9rem; padding-bottom:0.7rem; 
}
.paper-session-title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem, 2.4vw, 1.75rem);
  margin-bottom:0.7rem;
  border-bottom:1.5px solid var(--ink); 
}
.paper-session-meta{
  display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem;
  margin-bottom:1rem;
}
.paper-session-meta p{
  font-family:var(--font-body); font-weight:600; font-style:italic;
  font-size:var(--p); text-transform:none; margin:0;
}
.paper-session-meta b{ color:var(--coral); font-style:normal; }

.paper-premise-box{
  background:#fdfcf9; border:1.5px solid var(--ink);
  padding:1rem 1.1rem; margin-bottom:1.3rem;
}
.paper-premise-box .tag{
  display:block; font-size:var(--label-sm); font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--coral); margin-bottom:0.35rem;
}
.paper-premise-box p{ font-style:italic; margin:0; }

.pilot-img{
  position:relative; aspect-ratio:16/9; width:100%;
  border:1.5px solid var(--ink); box-shadow:5px 6px 0 -1px hsla(0,0%,8%,0.35);
  overflow:hidden; margin-top:0.4rem;
  background:linear-gradient(150deg, var(--scene-tint-2), var(--stage));
  display:flex; align-items:center; justify-content:center;
}
.pilot-img img{ width:100%; height:100%; object-fit:cover; }
.pilot-img .placeholder-label{
  font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-on-dark); opacity:0.6;
}

/* ---------- Sidebar: venue box + Ticker ---------- */
.paper-sidebar{ display:flex; flex-direction:column; gap:1.1rem; }

.paper-sidebar .ticket { background: var(--accent-second); }
.paper-sidebar .ticket .tear-line{ border-color: #f6f4ee; }
.paper-sidebar .ticket-price{
  position:absolute; inset:0; right:calc(100% - var(--tear-position));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0.3rem; padding:0 clamp(0.6rem, 3vw, 1rem);
  color:var(--text-on-light);
}
.paper-sidebar .ticket-price .price{ font-size:clamp(2rem, 4vw, 2.7rem); line-height:1; }
.paper-sidebar .ticket-price .price span{
  font-weight:600; font-size:0.9rem; 
  text-transform:uppercase; letter-spacing:0.03em; color:var(--text-on-light);
}
.paper-sidebar .ticket-price .price-note{
  font-size:clamp(0.9rem, 3.6vw, 1.2rem); font-style:italic; opacity:0.85;
  line-height:1.3;
}
.paper-sidebar .ticket-brand{
  position:absolute; top:0; bottom:0; left:var(--tear-position); right:0;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:var(--font-body); font-weight:400; letter-spacing:0.1em;
  text-transform:uppercase; font-size:clamp(0.60rem, 2.8vw, 0.9rem); color:var(--text-on-light); opacity:0.75;
}

.ticket-brand--values{
  position:absolute; top:0; bottom:0; left:var(--tear-position); right:0;
  display:flex; align-items:stretch; justify-content:space-evenly;
}
.ticket-brand--values span{
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:var(--font-body); font-weight:400; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-on-light); opacity:0.75;
  font-size:clamp(0.5rem, 2.2vw, 0.78rem);
  white-space:nowrap;
}

.venue-card{
  border-bottom:1.5px solid var(--ink); border-top:1.5px solid var(--ink); 
  padding:1.2rem 1.2rem 1.4rem;
}
.venue-card .venue-eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:var(--label-sm);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--coral);
  margin-bottom:0.4rem;
}
.venue-card h4{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.1;
  margin-bottom:0.8rem; padding-bottom:0.6rem; border-bottom:2px dotted var(--ink);
}
.venue-card .pilot-img{ box-shadow:none; margin-top:0; margin-bottom:0.8rem; border-width:4px; border-style:ridge; border-color:hsla(0,0%,8%,0.5); }
.venue-card p{ font-size:var(--p-sm); opacity:0.85; margin:0; }

.headline-callout{
  text-align:center; padding:0.2rem 0 0.4rem;
}
.headline-callout h3{
  font-family:var(--font-body); font-weight:700; font-style:italic;
  font-size:clamp(1.1rem, 2vw, 1.35rem); line-height:1.25;
}
.headline-callout h3 span{ display:block; color:var(--coral); font-weight:900; font-style:normal; text-transform:uppercase; }

/* -- Reserve-seats / matchmaking choice block -- */
.reserve-howto{
  align-self:flex-start; text-align:left;
  display:flex; flex-direction:column;
  width:100%;
}
.reserve-howto-eyebrow{
  font-family:var(--font-body); font-weight:700; font-size:var(--label-sm);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--coral);
  margin-bottom:0.6rem;
}
.reserve-howto-row{
  display:flex; flex-direction:row; align-items:stretch;
  width:100%; gap:clamp(0.4rem, 1.5vw, 0.6rem);
}
.reserve-howto-row p{
  display:flex; align-items:center;
  flex:1 1 auto; min-width:0;
  background: var(--ink); color: var(--text-on-dark);
  border:3px double var(--accent-second); border-radius:2px;
  padding:clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.5rem, 1.8vw, 0.9rem);
  margin:0; text-align:left; font-weight: 700;
}
.reserve-howto-btn{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; min-width:11.5rem;
  background:var(--accent-second); color:var(--text-on-light);
  border:2px solid var(--ink); border-radius:2px;
  padding:clamp(0.4rem, 1.4vw, 0.65rem) clamp(0.6rem, 2vw, 1rem);
  box-shadow:none;
  text-align:center; white-space:nowrap;
}
.reserve-howto-btn:hover{ transform:none; box-shadow:none; filter:brightness(0.94); }
.reserve-howto-or{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin:0.55rem 0;
}
.reserve-howto-or::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px dashed hsla(0,0%,8%,0.25);
}
.reserve-howto-or span{
  position:relative; z-index:1;
  background:var(--parchment);
  font-family:var(--font-body); font-weight:700; font-size:var(--label-sm);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted-light, hsla(0,0%,8%,0.55));
  padding:0 0.75rem;
}
@media (max-width:900px){
  .reserve-howto-row{ flex-direction:column; align-items:stretch; }
  .reserve-howto-row p{ width:100%; text-align:center; justify-content:center; white-space:normal; }
  .reserve-howto-btn{ width:100%; }
}

/* ---------- Footer: numbered process strip ---------- */
.pilot-footer{
  margin-top:clamp(2rem, 5vw, 2.75rem); padding-top:clamp(1.5rem, 3vw, 2rem);
  border-top:3px double var(--ink);
}
.paper-footer-head{
  text-align:center;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom:1.6rem;
}
.paper-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem;
  width:100%; max-width:70%; margin-inline:auto;
  margin-bottom:1.5rem;
}
.paper-step{ text-align:center; position:relative; padding-top:0.2rem; }
.paper-step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; margin-bottom:0.6rem;
  border-radius:50%; border:2px solid var(--ink);
  background:var(--coral); color:var(--stage);
  font-family:var(--font-body); font-weight:700; font-size:1.05rem;
}
.paper-step h4{
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; font-size:0.92rem;
}
.paper-step:not(:last-child)::after{
  content:""; position:absolute; top:1.25rem; left:calc(50% + 1.9rem); right:calc(-50% + 1.9rem);
  border-top:1px dashed var(--ink); opacity:0.4;
}
.paper-footer-note{
  text-align:center; font-size:var(--p); font-style:italic; opacity:0.85;
  max-width:60ch; margin:0 auto;
}

.custom-experience{
  margin-top:1.75rem; padding-top:1.5rem;
  border-top:2px dotted hsla(0,0%,8%,0.3);
  text-align:center;
}
.custom-experience h3{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom:0.5rem;
}
.custom-experience p{ opacity:0.75; }
.custom-experience-cta{ margin-top:0.3rem; font-style:italic; }
.custom-experience-cta a{
  color:var(--coral); font-weight:700; font-style:normal;
  text-decoration:underline; text-underline-offset:3px;
}
.custom-experience-cta a:hover{ color:var(--coral-deep); }

.rep-footer{
  width:90%; margin-inline:auto; padding:1.5rem 0 0;
  display:flex; align-items:flex-end; justify-content:space-between;
  font-size:1rem; opacity:0.85;
}
.rep-footer:hover { text-decoration:underline; text-underline-offset:3px; }

.rep-line{
  width:93%; max-width:70rem; height:12px; margin:0 auto 3.5rem;
  border-bottom:4px solid hsla(0,0%,97%,0.3); border-radius:50%;
  transform:rotate(-0.6deg);
}
@media (max-width:900px){
  .rep-intro{ grid-template-columns:1fr; gap:1.5rem; }
  .rep-grid{ grid-template-columns:repeat(2,1fr); }
  .paper-grid{ grid-template-columns:1fr; }
  .paper-steps{ grid-template-columns:repeat(2,1fr); row-gap:1.5rem; max-width:100%; }
  .paper-step:not(:nth-child(2)):not(:last-child)::after{ display:none; }
  .genre-item{ flex-direction:column; align-items:stretch; }
  .genre-item-heading{ width:100%; justify-content:center; text-align:center; }
  .genre-item-heading h4{ text-align:center; }
}
@media (max-width:560px){
  .paper-steps{ grid-template-columns:1fr; max-width:100%; }
  .paper-step::after{ display:none; }
}
@media (max-width:560px){
  .rep-grid{ grid-template-columns:1fr; }
  .rep-heading-row{ flex-direction:column; gap:0.6rem; }
  .rep-toggle{ position:static; transform:none; }
}

/* ============================================================
   FAQ Accordion
   ============================================================ */
.faq{ margin-top:clamp(2.5rem, 6vw, 5rem); }
.faq h3{
  text-align:center; 
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--coral); margin-bottom:clamp(1rem, 3vw, 1.5rem);
}
.accordion{ width:min(46rem,90%); margin-inline:auto; }
.accordion-item{
  border-bottom:1.5px solid hsla(0,0%,97%,0.25);
  padding-block:0.5rem;
}
.accordion-link{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; list-style:none; padding:0.6rem 0;
}
.accordion-link::-webkit-details-marker{ display:none; }
.accordion-link h4{
  font-family:var(--font-body); font-weight:600; font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  text-transform:uppercase; letter-spacing:0.05em;
}
.accordion-link .chevron{ font-size:1.1rem; transition:transform 0.3s ease; flex-shrink:0; margin-left:1rem; }
.accordion-item[open] .accordion-link .chevron{ transform:rotate(180deg); }
.accordion-answer{ max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.accordion-item[open] .accordion-answer{ max-height:32rem; }
.accordion-answer p{
  opacity:0.90; padding:0.3rem 0 1rem; max-width:64ch;
}
.accordion-answer p + p{ margin-top:0.6rem; }

/* ============================================================
   Our Game & Narrative Guide
   ============================================================ */
.gm-guide{
  margin-top:clamp(2.5rem, 6vw, 5rem);  
  display:flex; flex-direction:column; align-items:center; gap:clamp(1.2rem, 3vw, 2rem);
}
.gm-guide h3{ text-align:center; }
.gm-showcase{
  display:grid; grid-template-columns:1.5fr 1fr; align-items:center;
  width:90%; max-width:52rem;
}
.gm-media{
  aspect-ratio:4/3; border-radius:2px;
  background:linear-gradient(150deg, var(--scene-tint-2), var(--stage));
  border:1.5px solid hsla(0,0%,97%,0.4);
}
.gm-box{
  display:flex; flex-direction:column; gap:0.6rem;
  padding:clamp(0.5rem,2vw,1rem);
  background:var(--forest); color:var(--forest-tag);
  position:relative; z-index:1; margin-left:clamp(-1rem, -2.5vw, -1.5rem);
  border:3px double var(--ink); border-radius:2px;
  box-shadow:6px 6px 0 hsla(0, 0%, 8%, 0.291);
}
.gm-box-inner{
  display:flex; flex-direction:column; gap:0.5rem;
  padding:clamp(1rem, 2.5vw, 2rem);
  border-radius:2px;
}
@media (max-width:860px){
  .gm-showcase{ grid-template-columns:1fr; width:95%; }
  .gm-box{ width:96%; margin-inline:auto; margin-top:-3rem; }
}

/* ============================================================
   Gallery — "a place to put images"
   ============================================================ */
.gallery-block{ margin-top:clamp(2.5rem, 6vw, 4.5rem); padding-bottom:clamp(1.5rem, 4vw, 3rem); border-bottom:1.5px dotted hsla(0,0%,97%,0.3); }
.gallery-block h3{ text-align:center; margin-bottom:clamp(1rem, 3vw, 1.5rem); }
.gallery-wrap{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow:hidden;
}
.gallery-track{
  display:flex; gap:1rem; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-item{
  flex:0 0 auto;
  aspect-ratio:6/5; block-size:clamp(22rem,23vw,30rem);
  border-radius:10px 14px 9px 16px;
  overflow:hidden;
  background:var(--charcoal);
}
.gallery-item:first-child{ margin-left:1rem; }
.gallery-item:last-child{ margin-right:1rem; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-controls{ display:flex; justify-content:center; gap:1rem; margin-top:1rem; }
.gallery-controls button{
  background:transparent; border:1.5px solid hsla(0,0%,97%,0.4); color:var(--text-on-dark);
  padding:0.5rem 1.1rem; border-radius:999px; font-size:0.85rem; font-weight:600;
  transition:background 0.15s ease;
}
.gallery-controls button:hover{ background:hsla(0,0%,97%,0.12); }

/* ============================================================
   Act IV — "Your Role" closing reflection
   ============================================================ */
.role-scene{
  margin-top:clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom:clamp(1.5rem, 4vw, 3rem);
  border-bottom:1.5px dotted hsla(0,0%,97%,0.3);
}
.role-wrap{
  width:min(46rem, 88%); margin-inline:auto; text-align:center;
}
.role-scene .eyebrow{ justify-content:center; color:var(--coral); }

.role-lede{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.28;
  max-width:52rem; margin-inline:auto;
  margin-bottom:clamp(2rem, 5vw, 2.75rem);
}
.role-lede span{ color:var(--coral); display: block; }

.role-list{
  list-style:none; text-align:left;
  width:fit-content; margin:0 auto clamp(2.2rem, 5vw, 3rem);
  display:flex; flex-direction:column; gap:0.85rem;
}
.role-list li{
  position:relative; padding-left:1.6rem;
  font-family:var(--font-body); font-size:var(--p);
  opacity:0.88;
}
.role-list li::before{
  content:"•"; position:absolute; left:0; color:var(--coral);
  font-weight:600;
}

.role-pullquote{
  font-family:var(--font-body); font-weight:600; font-size:clamp(1.05rem, 2.2vw, 1.3rem);
  line-height:1.5; max-width:34rem; margin:0 auto clamp(1.25rem, 3vw, 1.75rem);
}

.role-turn{
  border-top:1.5px dotted hsla(0,0%,97%,0.3);
  padding-top:clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom:clamp(1.75rem, 4vw, 2.5rem);
}
.role-turn p{
  font-family:var(--font-body); font-size:var(--p); opacity:0.75;
  margin-bottom:0.4rem;
}
.role-turn .role-dont{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem, 3vw, 1.8rem); color:var(--coral);
}

.role-headline{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.15;
  margin-bottom:clamp(1.75rem, 4vw, 2.25rem);
}

.role-btn{ font-size:1.02rem; padding:1rem 2.1rem; }

/* ============================================================
   Wiki — Folklore / TTRPG stamp cards
   ============================================================ */
.wiki-block{
  margin-top:clamp(2.5rem, 6vw, 4.5rem);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(1.2rem, 3vw, 2rem);
}
.wiki-title{
  width: 100%; text-align: center; }
.wiki-card{
  width:28rem; max-width:100%; padding:clamp(1.1rem, 3.5vw, 1.8rem);
  border-radius:2px; border:2px dotted hsla(0,0%,97%,0.35);
  background:var(--parchment-deep); color:var(--ink);
  box-shadow:inset 0 0 0 4px #2A4A7A; 
}
.wiki-img{
  aspect-ratio:16/9; overflow:hidden; border-radius:2px;
  border:double var(--ink); box-shadow:3px 3px 0 hsla(206,72%,84%,0.5);
}
.wiki-img img{ width:100%; height:100%; object-fit:fill; display:block; }
.wiki-head{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  margin-top:clamp(0.8rem, 2vw, 1.1rem); margin-bottom:0.4rem;
  flex-wrap:wrap;
}
.wiki-tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:clamp(0.28rem, 1vw, 0.35rem) clamp(0.6rem, 2vw, 0.8rem);
  font-size:var(--label-sm); font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink);
  border:2px solid var(--ink); border-radius:999px 999px 999px 4px;
  background:#2A4A7A; color:#fff;
  box-shadow:3px 3px 0 hsla(206,72%,84%,0.5);
}
.wiki-tag::before{
  content:"ABOUT"; font-size:0.6rem; padding:0.15rem 0.4rem;
  border-radius:999px; background:var(--ink); color:var(--parchment);
}
.wiki-desc{ opacity:0.85; display:none; font-size:var(--p-sm); }
.wiki-card.expanded .wiki-desc{ display:block; }
.wiki-more{
  flex-shrink:0;
  font-size:var(--label-sm); font-weight:600; letter-spacing:0.02em;
  color:var(--coral-deep); background:transparent;
  border:1.5px solid var(--coral-deep); border-radius:999px;
  padding:clamp(0.25rem, 1vw, 0.3rem) clamp(0.65rem, 2vw, 0.8rem);
}
.wiki-more:hover{ background:var(--coral-deep); color:hsl(0,0%,99%); }
.wiki-footer{ display:none; margin-top:0.6rem; text-align:right; font-style:italic; color:var(--coral-deep); font-size:clamp(0.82rem, 2vw, 0.9rem); }
.wiki-card.expanded .wiki-footer{ display:block; }

@media (max-width:900px){
  .wiki-card{ width:32rem; }
}

@media (max-width:700px){
  .accordion{ width:100%; }
}

/* ============================================================
   Act V — About
   ============================================================ */
.about-scene{ padding-top:clamp(2.5rem, 6vw, 5rem); }
.about-head{ text-align:center; margin-bottom:clamp(1.75rem, 5vw, 3rem); }
.about-head .eyebrow{ justify-content:center; }
.about-head h2{ font-family:var(--font-script); }

.about-values{
  display:grid; grid-template-columns:20rem 1fr; gap:clamp(1.2rem, 3vw, 2rem);
  align-items:center; margin-bottom:clamp(2.5rem, 6vw, 4.5rem);
}
.newsletter-card{
  position:relative; padding:1.3rem; background:hsl(0,0%,99%);
  border:3px double var(--ink);
  box-shadow:-0.9rem 0.9rem 0 hsla(0,0%,8%,0.55);
  transform:rotate(-2deg);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  display:flex; flex-direction:column; gap:0.9rem;
  overflow:hidden;
}
.newsletter-card:hover{
  transform:rotate(0deg) scale(1.02);
  box-shadow:-1.25rem 1.25rem 0 hsla(0,0%,8%,0.55);
}
.newsletter-banner{
  position:absolute; top:0.9rem; right:-4.2rem; width:14rem; padding:0.6rem;
  background:var(--coral); transform:rotate(45deg); transform-origin:center;
  overflow:hidden; text-align:center;
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--stage);
}
.newsletter-banner-text{
  position:absolute; display:inline-block; width:100%; left:8%; top:50%;
  transform:translateY(-50%);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.newsletter-banner-text:last-child{ opacity:0; transform:translateY(60%); }
.newsletter-card:hover .newsletter-banner-text:first-child{ opacity:0; transform:translateY(-100%); }
.newsletter-card:hover .newsletter-banner-text:last-child{ opacity:1; transform:translateY(-50%); }
.newsletter-card h4{text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:0.5rem; width:80%; }
.newsletter-card p{ background:hsla(11,65%,58%,0.14); padding:0.4rem 0.5rem; font-size: var(--p-sm); }
.newsletter-card form{ display:flex; flex-direction:column; gap:0.7rem; }
.newsletter-card input{ padding:0.6rem; border:2px solid var(--ink); outline:none; background:#fff; }
.newsletter-card button{
  background:var(--ink); color:var(--parchment); border:2px solid var(--ink);
  padding:0.6rem; font-weight:600;
}

/* ============================================================
   Social Links
   ============================================================ */
.social-links{
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(0.5rem, 2vw, 0.75rem);
  margin-top:0.5rem;
}
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(1.9rem, 5vw, 2.3rem); height:clamp(1.9rem, 5vw, 2.3rem);
  border-radius:50%; border:1.5px solid currentColor;
  color:currentColor; background:transparent;
  transition:background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-links a svg{
  width:55%; height:55%;
}
.social-links a:hover,
.social-links a:focus-visible{
  background:var(--coral); color:var(--stage);
  border-color:var(--coral);
  transform:translateY(-2px);
}

/* ============================================================
   About Ticket
   ============================================================ */
.values-ticket-wrap{ display:flex; flex-direction:column; gap:1.3rem; }
.ticket{
  --cutout-size:clamp(1.9rem, 7vw, 3.4rem); --tear-position:75%;
  position:relative; width:100%; aspect-ratio:2.5/1;
  background:hsla(180, 2%, 76%, 0.14); border-radius:2px; 
  overflow:hidden;
}
.ticket::before, .ticket::after{
  content:""; position:absolute; width:var(--cutout-size); aspect-ratio:1;
  border-radius:50%; background:var(--parchment);
  top:50%; transform:translateY(-50%);
}
.ticket::before{ left:calc(var(--cutout-size) / -2); }
.ticket::after{ right:calc(var(--cutout-size) / -2); }
.tear-line{
  position:absolute; top:1rem; bottom:1rem; left:var(--tear-position);
  border-left:2px dashed hsla(0,0%,8%,0.2);
}
.tear-line::before, .tear-line::after{
  content:""; position:absolute; width:var(--cutout-size); aspect-ratio:1;
  border-radius:50%; background:var(--parchment); left:50%; transform:translateX(-50%);
}
.tear-line::before{ top:calc(var(--cutout-size) / -2 - 1rem); }
.tear-line::after{ bottom:calc(var(--cutout-size) / -2 - 1rem); }

.value-panels{
  position:absolute; inset:0; right:calc(100% - var(--tear-position));
  height:100%; display:flex; align-items:center; justify-content:center;
  padding:0 clamp(0.6rem, 3vw, 1.5rem); text-align:center;
}
.value-panel{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:0 3rem; text-align:center; opacity:0; transition:opacity 0.3s ease;
  pointer-events:none;
}
.value-panel.active{ opacity:1; pointer-events:auto; }
.value-panel-inner{ display:flex; flex-direction:column; gap:0.6rem; max-width:38rem; }
.value-panel-inner h3{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--h3); color:var(--text-on-light);
  margin:0;
}
.value-panel-inner p{
  font-size:var(--p-sm); line-height:1.5; color:var(--text-on-light); opacity:0.85;
  margin:0;
}
.value-panel-inner .value-source{
  font-size:var(--label-sm); letter-spacing:0.04em; opacity:0.85;
  color:var(--text-on-light); font-style:italic;
  margin:0;
}
@media (min-width:901px){
  .value-panel-inner{ gap:0.85rem; }
  .value-panel-inner h3{ font-size:clamp(1.9rem, 2.8vw, 2.4rem); }
  .value-panel-inner p{ font-size:clamp(1.2rem, 1.6vw, 1.4rem); }
  .value-panel-inner .value-source{ font-size:clamp(0.85rem, 1vw, 0.95rem); }
  .ticket-brand--values span{ font-size:clamp(0.85rem, 1vw, 1rem); }
}
.values-nav{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(0.4rem, 1.5vw, 0.7rem);
  width:auto; margin:0; max-width:100%;
  padding:0.6rem;
  background:hsla(0, 0%, 97%, 0.86);
  border: none;
}
.value-btn, .value-arrow{
  border:none; cursor:pointer; text-transform:uppercase; 
  color:var(--parchment); background:var(--ink);
  padding:clamp(0.4rem, 1.2vw, 0.5rem) clamp(0.75rem, 2.5vw, 1.1rem);
  border-radius:2px;
  white-space:nowrap;
}
.value-btn:hover, .value-btn:focus-visible{ background:var(--coral); color:var(--stage); }
.value-btn:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.value-btn.active{ background:var(--coral); color:var(--stage); }
.value-arrow{
  background:transparent; border-radius:0;
  padding:clamp(0.2rem, 0.8vw, 0.35rem) clamp(0.3rem, 1vw, 0.5rem);
  color:var(--ink); font-size:clamp(1.3rem, 3vw, 1.7rem); font-weight:700;
}
.value-arrow:hover{ background:transparent; color:var(--coral); }

@media (max-width:900px){
  .values-nav{
    flex-direction:column; align-items:stretch;
    border-radius:1.5rem;
    padding:0.75rem;
  }
  .value-arrow{ display:none; }
  .value-btn{ width:100%; text-align:center; }
  .values-ticket-wrap .ticket{ aspect-ratio:1.7/1; }
  .values-ticket-wrap .value-panels{ padding:0 clamp(0.3rem, 1.5vw, 0.6rem); }
  .value-panel-inner h3{ display:none; }
  .ticket-brand--values span{ font-size:clamp(0.6rem, 2.6vw, 0.78rem); }
  .value-panel-inner{ gap:0.4rem; }
  .value-panel-inner p{ font-size:clamp(0.7rem, 3.4vw, 1rem); line-height:1.4; }
  .value-panel-inner .value-source{ font-size:clamp(0.65rem, 2.6vw, 0.78rem); }
}

.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem, 3vw, 1.5rem); margin-bottom:clamp(1rem, 3vw, 1.5rem);
}
.about-panel{
  border-radius:2px; border:4px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--charcoal), inset 0 0 0 3px hsla(0,0%,97%,0.5);
  background:var(--stage); color:var(--text-on-dark);
  padding:clamp(1.4rem, 4vw, 2.2rem); display:flex; flex-direction:column; gap:1rem; justify-content:center;
}
.about-panel h3{ font-family:var(--font-script); text-align:center; }
.about-panel h4{ font-family:var(--font-body); line-height:1.4; text-align:center;}

.about-panel h4 .accent{ color:var(--coral); }
.about-panel p{ text-align:center; opacity:0.85; }
.about-panel p .accent{ color:var(--coral); opacity:1; }

.substack-callout{
  border-radius:2px; background:var(--ink); color:var(--text-on-dark);
  border:3px double hsla(0,0%,97%,0.5);
  padding:clamp(1.3rem, 3.5vw, 1.8rem) clamp(1.4rem, 4vw, 2.2rem); margin-bottom:clamp(1.75rem, 5vw, 3rem);
}
.substack-callout h4{ font-family:var(--font-body); margin-bottom:0.4rem; color: var(--coral);}
.substack-callout p{ opacity:0.85; }

.collage{
  position:relative; width:clamp(20rem,38vw,30rem); aspect-ratio:4/5;
  margin-inline:auto; display:flex; align-items:center; justify-content:center;
}
.collage-img{ position:relative; overflow:hidden; background:hsl(0,0%,99%); }
.collage-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage-1{ position:relative; width:55%; transform:rotate(9deg); border:0.5rem double var(--ink); box-shadow:0.75rem 0.75rem 0 var(--ink); z-index:2; }
.collage-2{ position:absolute; width:50%; top:8%; left:-8%; transform:rotate(-22deg); border:4px solid var(--ink); box-shadow:0.5rem 0.5rem 0 hsla(0,0%,0%,0.25); z-index:1; }
.collage-3{ position:absolute; width:50%; top:10%; left:65%; transform:rotate(17deg); border:4px solid var(--ink); box-shadow:0.5rem 0.5rem 0 hsla(0,0%,0%,0.25); z-index:1; }
.collage-4{ position:absolute; width:50%; top:50%; left:65%; transform:rotate(5deg); border:4px solid var(--ink); box-shadow:0.5rem 0.5rem 0 hsla(0,0%,0%,0.25); z-index:3; }

@media (max-width:1000px){
  .about-values{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .collage{ width:18rem; }
}

/* ============================================================
   Finale — Contact + Footer
   ============================================================ */
.finale-wrap{
  background:var(--stage);
  border-top-left-radius:4rem; border-top-right-radius:4rem;
  margin-top:1rem;
}
.contact-scene{ padding-top:clamp(2.5rem, 6vw, 5rem); padding-bottom:clamp(1.75rem, 4vw, 3rem); color:var(--text-on-dark); }
.contact-head{ text-align:center; margin-bottom:clamp(1.75rem, 5vw, 3rem); }
.contact-head .eyebrow{ justify-content:center; }
.contact-head p{ opacity:0.7; margin-top:0.4rem; }

.contact-frame{
  width:calc(min(46rem,92%) + 2 * clamp(0.6rem, 2vw, 1rem));
  margin-inline:auto;
  padding:clamp(0.6rem, 2vw, 1rem);
  border-radius:0 2rem 2rem 0;
  border:1.5px solid var(--coral);
}
.contact-card{
  width:100%; margin-inline:auto; padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--charcoal); color:var(--text-on-dark);
  border-radius:0 2rem 2rem 0; border: 4px inset hsla(0,0%,100%,0.06);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem, 3vw, 1.5rem); }
.form-group{ display:flex; flex-direction:column; margin-bottom:clamp(1rem, 3vw, 1.4rem); }
.form-group label{ font-size:var(--p-sm); margin-bottom:0.5rem; opacity:0.8; }
.form-group input, .form-group textarea{
  border:none; border-bottom:1.5px solid hsla(0,0%,97%,0.35);
  background:transparent; color:var(--text-on-dark);
  padding:0.6rem 0; outline:none; font-size:var(--p-sm);
}
.form-group textarea{ min-height:5rem; resize:vertical; }
.form-group input:focus, .form-group textarea:focus{ border-color:var(--coral); }
.form-footer{ display:flex; flex-direction:column; gap:0.8rem; }
.form-footer button{
  align-self:flex-start;
  border:2px solid var(--ink); background:var(--coral); color:var(--stage);
  padding:0.75rem 1.6rem; border-radius:2px; font-weight:600;
  box-shadow:4px 4px 0 hsla(0,0%,8%,0.35);
}
.form-footer button:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 hsla(0,0%,8%,0.35); }
.form-footer p{ opacity:0.7; }

.form-success{ display:none; text-align:center; padding:1.5rem 0; }
.form-success.is-active{ display:block; }
.form-success h4{ font-family:var(--font-script); font-weight:400; font-size:clamp(1.6rem,3vw,2rem); color:var(--accent-second); margin-bottom:0.6rem; text-transform:none; border-bottom:none; padding-bottom:0; width:auto; }
.form-success p{ opacity:0.90; max-width:26rem; margin-inline:auto; line-height:1.5; }
.form-success .form-success-sign{ margin-top:0.9rem; font-style:italic; }

@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
  .contact-frame{ border-radius:0 1.2rem 1.2rem 0; }
  .contact-card{ border-radius:0 1.2rem 1.2rem 0; }
}

.site-footer{
  text-align:left; padding:3rem clamp(1.5rem,4vw,3rem) 2rem; padding-top: 0;
  color:var(--text-on-dark);
}
.site-footer .tagline{ font-weight:600; opacity:0.85;  }
.site-footer .legal{ font-size:0.88rem; opacity:0.6;  }
.site-footer .legal a{ text-decoration:underline; text-underline-offset:2px; }
.site-footer .legal a:hover{ color:var(--coral); }
.site-footer .back-up{ color:var(--coral); font-weight:600; font-size:var(--p-sm) }

.site-footer .social-links a{
  width:clamp(1rem, 5vw, 2rem); height:clamp(1rem, 5vw, 2rem);
}
.site-footer .social-links a svg{
  width:55%; height:55%;
}

/* ---------- Pilot ticket: holographic background ----------
   Scoped to .ticket--holo only (the pilot-cont ticket).
   The values-ticket-wrap ticket is unaffected. */
.ticket--holo{
  background: var(--charcoal);
}
.ticket-holo-filter{
  position:absolute; width:0; height:0;
}
.ticket-holo-bg{
  position:absolute; inset:0; z-index:0;
  border-radius:inherit; overflow:hidden;
  background-color:#fff;
  filter:url(#ticket-holo-bump);
}
.ticket-holo-bg{
  background-image:
    linear-gradient(to bottom, #fe58, 90%, #0002),
    conic-gradient(
      at 60% 50%,
      #ccc, #ff6bfe, #00f9f8, #ddd, #0081fd, #eef0bc,
      #0081fd, #ff6bfe, #0002, #0081fd, #ddd, #01fefb, #ccc
    );
}
.ticket-holo-bg{ opacity:0.4; }
.ticket-holo-bg::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(circle at 70% 20%, #f0f, #0000),
    repeating-radial-gradient(circle at 30% 80%, #fff, #f4a 48px, #eeeeee 150px);
  mix-blend-mode:color-burn;
  opacity:0.5;
}
.ticket-holo-bg::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to bottom, #f205, #f00, #0f0, #f205);
  mix-blend-mode:difference;
  animation:ticket-holo-pos 3s ease-in-out infinite alternate;
  background-position:0 0;
  background-size:100% 300%;
  background-repeat:repeat;
  opacity:0.65;
}
@keyframes ticket-holo-pos{
  to{ background-position:0 500px; }
}
/* Keep ticket content readable above the holographic layer */
.ticket--holo .ticket-price,
.ticket--holo .tear-line,
.ticket--holo .ticket-brand{
  z-index:1;
}
.ticket--holo::before,
.ticket--holo::after{
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .ticket-holo-bg::after{ animation:none; }
}