/* ==========================================================================
   KFLC 2026 — Kids Financial Literacy Conference
   kflc.moneymastersinitiative.com
   Skeuomorphic design system derived from the official event flyer:
   flyer paper, fat didone serif, red plate, royal blue, logo green, coin gold.
   ========================================================================== */

/* Self-hosted fonts (latin subsets) — no third-party requests needed */
@font-face{
  font-family:"Abril Fatface"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/abril-fatface.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito"; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url("../fonts/nunito.woff2") format("woff2");
}
@font-face{
  font-family:"Caveat"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/caveat.woff2") format("woff2");
}

:root{
  /* Palette (flyer-derived) */
  --paper:        #F5F3EC;
  --paper-deep:   #E9E5D8;
  --paper-shadow: #D8D2C0;
  --ink:          #1A1610;
  --ink-soft:     #4A4438;
  --crimson:      #C0161F;
  --crimson-deep: #7E0B10;
  --royal:        #2438E8;
  --royal-deep:   #16249E;
  --leaf:         #1E7B33;
  --leaf-deep:    #0F5220;
  --gold:         #EFAF25;
  --gold-deep:    #B97708;
  --gold-shine:   #FFE18A;
  --piggy:        #F2A9BC;

  /* Type */
  --font-display: "Abril Fatface", "Georgia", serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand:    "Caveat", "Comic Sans MS", cursive;

  /* Materials */
  --emboss-out: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -3px 0 rgba(0,0,0,.12), 0 1px 2px rgba(26,22,16,.25), 0 8px 18px -8px rgba(26,22,16,.35);
  --emboss-in:  inset 0 3px 6px rgba(26,22,16,.22), inset 0 -1px 0 rgba(255,255,255,.7);
  --card-lift:  0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -14px rgba(26,22,16,.45), 0 2px 6px rgba(26,22,16,.14);

  --radius: 18px;
  --measure: 62ch;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:1.0625rem;
  overflow-x:hidden;
}

/* Paper grain over the whole page */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.58 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:var(--royal); }
:focus-visible{ outline:3px solid var(--royal); outline-offset:3px; border-radius:4px; }

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

/* ------------------------------------------------------------------ type */
.display{ font-family:var(--font-display); font-weight:400; line-height:.98; letter-spacing:-.01em; }
.hand{ font-family:var(--font-hand); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:900; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow--center{ justify-content:center; }
.hand--lg{ font-size:1.4rem; }
.eyebrow::before{
  content:""; width:26px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--crimson),var(--gold));
}

/* ---------------------------------------------------------- 3D buttons */
.btn{
  --btn-top:#3D53FF; --btn-bottom:var(--royal); --btn-edge:var(--royal-deep);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:900; font-size:1rem; letter-spacing:.02em;
  color:#fff; text-decoration:none; cursor:pointer; border:0;
  padding:.85em 1.7em; border-radius:14px;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 6px 0 var(--btn-edge),
    0 12px 20px -6px rgba(26,22,16,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{
  transform:translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 1px 0 var(--btn-edge),
    0 4px 10px -4px rgba(26,22,16,.5);
}
.btn--crimson{ --btn-top:#E23A43; --btn-bottom:var(--crimson); --btn-edge:var(--crimson-deep); }
.btn--gold{ --btn-top:#FFCB4E; --btn-bottom:var(--gold); --btn-edge:var(--gold-deep); color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.45); }
.btn--ghost{
  --btn-edge:var(--paper-shadow);
  color:var(--ink); text-shadow:none;
  background:linear-gradient(180deg,#FFFFFF,var(--paper-deep));
}
.btn[disabled]{ opacity:.6; cursor:wait; transform:none; }

/* --------------------------------------------------------------- header */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  background:linear-gradient(180deg,rgba(245,243,236,.96),rgba(245,243,236,.88));
  border-bottom:1px solid rgba(26,22,16,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -18px rgba(26,22,16,.5);
  backdrop-filter:blur(8px);
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); min-width:0; }
.brand__logo{ width:40px; height:40px; flex:none; filter:drop-shadow(0 2px 2px rgba(26,22,16,.3)); }
.brand__text{ line-height:1.12; min-width:0; }
.brand__text strong{ display:block; font-size:.95rem; font-weight:900; letter-spacing:.01em; white-space:nowrap; }
.brand__text span{ display:block; font-size:.7rem; font-weight:700; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-head .btn{ font-size:.9rem; padding:.65em 1.3em; }

/* ------------------------------------------------------------ film hero */
.film{ position:relative; height:520vh; background:#0E0B14; z-index:1; }
.film__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.film__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.film__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(14,11,20,.55) 100%),
    linear-gradient(180deg, rgba(14,11,20,.35), transparent 22%, transparent 72%, rgba(14,11,20,.55));
}
/* sprocket holes — the "film strip" seam, left & right */
.film__sprockets{
  position:absolute; top:0; bottom:0; width:26px; pointer-events:none; opacity:.8;
  background-image:radial-gradient(circle at 50% 50%, rgba(245,243,236,.85) 0 5px, transparent 6px);
  background-size:26px 34px; background-repeat:repeat-y; background-position:center top;
}
.film__sprockets--l{ left:6px; } .film__sprockets--r{ right:6px; }

.film__overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:clamp(1rem,4vw,3rem); pointer-events:none;
}
.scene{
  grid-area:1/1; max-width:min(92vw,880px);
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .45s ease, transform .45s ease;
  will-change:opacity,transform;
}
.scene.is-on{ opacity:1; transform:none; pointer-events:auto; }

.scene .eyebrow{ color:#EDE8DA; }
.scene .eyebrow::before{ background:linear-gradient(90deg,var(--gold),var(--crimson)); }

/* Flyer lockup: Finance [For] Kids */
.lockup{ margin:.35em 0 .2em; color:#F7F4EA; text-shadow:0 3px 14px rgba(0,0,0,.55); }
.lockup .display{ font-size:clamp(3rem,11vw,7.5rem); }
.lockup__row{ display:flex; align-items:baseline; justify-content:center; gap:.18em; flex-wrap:wrap; }
.lockup__for{
  font-family:var(--font-display); font-size:.42em; line-height:1;
  color:#fff; padding:.18em .5em .22em; transform:translateY(-.28em);
  background:linear-gradient(160deg,#E02A33,var(--crimson) 45%,var(--crimson-deep));
  border-radius:6px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.28), 0 6px 14px -4px rgba(0,0,0,.6);
}
.lockup__kids{
  color:#5B6BFF;
  background:linear-gradient(180deg,#7C89FF,#2E42F2 60%,#1D2FC4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.scene__tag{
  font-family:var(--font-hand); font-size:clamp(1.4rem,3.4vw,2rem);
  color:var(--gold-shine); text-shadow:0 2px 6px rgba(0,0,0,.6);
  letter-spacing:.04em;
}
.scene__sub{ color:#D8D2C2; font-weight:700; max-width:46ch; margin:0.9em auto 0; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.scene h2.display{ font-size:clamp(2.2rem,6.5vw,4.4rem); color:#F7F4EA; text-shadow:0 3px 16px rgba(0,0,0,.6); }
.scene h2 .u-gold{ color:var(--gold); } .scene h2 .u-pig{ color:var(--piggy); }

.scene__chips{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.3rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:900; font-size:.92rem; color:var(--ink);
  padding:.55em 1em; border-radius:999px;
  background:linear-gradient(180deg,#FFFDF6,var(--paper-deep));
  box-shadow:var(--emboss-out);
  border:1px solid rgba(26,22,16,.2);
}
.chip svg{ width:1.05em; height:1.05em; flex:none; color:var(--gold-deep); }

.scene__cta{ margin-top:1.5rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

.scroll-hint{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:#EDE8DA; font-weight:800; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.9; pointer-events:none; transition:opacity .4s ease;
}
.scroll-hint__coin{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-shine), var(--gold) 55%, var(--gold-deep));
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.3), inset 0 2px 2px rgba(255,255,255,.7), 0 4px 8px rgba(0,0,0,.5);
  display:grid; place-items:center; font-weight:900; color:#7A4E03; font-size:.9rem;
  animation:coin-drop 1.6s ease-in-out infinite;
}
@keyframes coin-drop{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(9px);} }
.film.is-scrolled .scroll-hint{ opacity:0; }

/* frame loader */
.film-loader{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:radial-gradient(90% 90% at 50% 45%, #1B1526, #0E0B14);
  transition:opacity .5s ease; color:#EDE8DA; text-align:center;
}
.film-loader.is-done{ opacity:0; pointer-events:none; }
.film-loader__coin{
  width:64px; height:64px; margin:0 auto .8rem; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-shine), var(--gold) 55%, var(--gold-deep));
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.7), 0 8px 18px rgba(0,0,0,.6);
  display:grid; place-items:center; font-family:var(--font-display); font-size:1.7rem; color:#7A4E03;
  animation:coin-spin 1.1s linear infinite;
}
@keyframes coin-spin{ 0%{ transform:rotateY(0);} 100%{ transform:rotateY(360deg);} }
.film-loader__bar{
  width:min(240px,60vw); height:12px; margin-top:.7rem; border-radius:999px;
  background:rgba(255,255,255,.12); box-shadow:var(--emboss-in); overflow:hidden;
}
.film-loader__fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-shine),var(--gold) 60%,var(--gold-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:width .2s ease;
}

/* ------------------------------------------------------------- sections */
.wrap{ width:min(1080px, 92vw); margin-inline:auto; }
section[id]{ scroll-margin-top:84px; }

.torn{ position:relative; z-index:3; }
.torn::before{
  content:""; position:absolute; left:0; right:0; top:-26px; height:28px;
  background:var(--paper);
  clip-path:polygon(0 100%,0 62%,3% 38%,6% 66%,10% 30%,14% 62%,18% 36%,22% 70%,27% 34%,31% 60%,35% 30%,40% 66%,45% 38%,50% 62%,55% 32%,60% 64%,65% 36%,70% 68%,75% 34%,80% 60%,85% 30%,90% 64%,94% 38%,97% 62%,100% 34%,100% 100%);
  filter:drop-shadow(0 -3px 4px rgba(0,0,0,.35));
}
.section{ padding:clamp(3.2rem,8vw,5.5rem) 0; position:relative; z-index:3; background:var(--paper); }
.section--deep{ background:linear-gradient(180deg,var(--paper),var(--paper-deep)); }
.section__head{ max-width:var(--measure); margin-bottom:2.2rem; }
.section__head h2{ font-size:clamp(2rem,5vw,3.1rem); margin:.3em 0 .35em; }
.section__head p{ color:var(--ink-soft); font-weight:600; }

/* coins: Earn / Save / Grow */
.coins{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; }
.coin-card{
  position:relative; text-align:center; padding:2.6rem 1.4rem 1.6rem;
  background:linear-gradient(180deg,#FFFDF6,var(--paper-deep));
  border-radius:var(--radius); border:1px solid rgba(26,22,16,.16);
  box-shadow:var(--card-lift);
}
.coin-card::after{ /* stitched seam */
  content:""; position:absolute; inset:9px; border-radius:12px;
  border:2px dashed rgba(26,22,16,.22); pointer-events:none;
}
.coin{
  width:86px; height:86px; margin:-3.6rem auto 1rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:2rem; color:#7A4E03;
  background:radial-gradient(circle at 32% 26%, var(--gold-shine), var(--gold) 52%, var(--gold-deep));
  box-shadow:
    inset 0 -6px 10px rgba(0,0,0,.32),
    inset 0 4px 5px rgba(255,255,255,.75),
    0 3px 0 var(--gold-deep),
    0 12px 22px -8px rgba(26,22,16,.55);
  border:3px solid rgba(122,78,3,.5);
}
.coin-card h3{ font-size:1.35rem; font-weight:900; letter-spacing:.01em; }
.coin-card p{ font-size:.98rem; color:var(--ink-soft); margin-top:.4rem; }
.coin-card .hand{ display:block; margin-top:.75rem; font-size:1.25rem; color:var(--leaf-deep); transform:rotate(-2deg); }

/* -------------------------------------------------------- event ticket */
.ticket{
  position:relative; display:grid; grid-template-columns:1fr auto;
  border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,#FFFDF6,#F2EEDF);
  border:1px solid rgba(26,22,16,.25);
  box-shadow:var(--card-lift);
  filter:drop-shadow(0 18px 30px rgba(26,22,16,.25));
}
.ticket::before{ /* top color band like flyer border shapes */
  content:""; position:absolute; top:0; left:0; right:0; height:10px;
  background:repeating-linear-gradient(90deg,
    var(--crimson) 0 25%, var(--royal) 25% 50%, var(--gold) 50% 75%, var(--leaf) 75% 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.ticket__main{ padding:2.2rem clamp(1.3rem,4vw,2.6rem) 2rem; }
.ticket__main .hand{ font-size:1.5rem; color:var(--crimson-deep); }
.ticket__main h2{ font-size:clamp(1.9rem,4.5vw,2.9rem); margin:.15em 0 .8em; }
.ticket__rows{ display:grid; gap:1rem; }
.ticket__row{ display:flex; align-items:flex-start; gap:.9rem; font-weight:700; }
.ticket__row svg{ width:40px; height:40px; flex:none; padding:8px; border-radius:12px; color:#fff;
  background:linear-gradient(180deg,#FFC64B,var(--gold) 55%,var(--gold-deep));
  box-shadow:var(--emboss-out); }
.ticket__row strong{ display:block; font-size:1.15rem; }
.ticket__row span{ color:var(--ink-soft); font-size:.95rem; font-weight:600; }
.ticket__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }

.ticket__stub{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  padding:2rem 1.6rem; min-width:200px; text-align:center;
  background:
    radial-gradient(circle at 0 22px, transparent 11px, rgba(0,0,0,0) 11px),
    linear-gradient(180deg,#FFF7E2,#F6E8BE);
  border-left:2px dashed rgba(26,22,16,.35);
}
.ticket__stub::before,.ticket__stub::after{ /* punch holes at the perforation */
  content:""; position:absolute; left:-12px; width:22px; height:22px; border-radius:50%;
  background:var(--paper); box-shadow:inset 0 2px 3px rgba(26,22,16,.3);
}
.ticket__stub::before{ top:-11px; } .ticket__stub::after{ bottom:-11px; }
.stub__admit{ font-weight:900; letter-spacing:.28em; font-size:.72rem; color:var(--crimson-deep); text-transform:uppercase; }
.stub__free{
  font-family:var(--font-display); font-size:2.4rem; color:var(--leaf-deep);
  transform:rotate(-6deg);
  border:3px solid var(--leaf-deep); border-radius:10px; padding:.05em .35em; line-height:1.05;
  box-shadow:0 2px 0 rgba(15,82,32,.4); opacity:.92;
}
.stub__note{ font-size:.85rem; font-weight:700; color:var(--ink-soft); max-width:18ch; }
.stub__barcode{ width:120px; height:38px; margin-top:.3rem;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 14px);
  border-radius:3px; opacity:.85; }

/* map link */
.maplink{ font-weight:800; }

/* ------------------------------------------------------- register form */
.register{ background:
  radial-gradient(120% 120% at 100% 0%, rgba(36,56,232,.08), transparent 55%),
  radial-gradient(120% 120% at 0% 100%, rgba(192,22,31,.07), transparent 55%),
  linear-gradient(180deg,var(--paper-deep),var(--paper)); }
.register__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }

.notebook{
  position:relative; border-radius:14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(36,56,232,.16) 30px 31px),
    linear-gradient(180deg,#FFFEFA,#FBF8EE);
  border:1px solid rgba(26,22,16,.22);
  box-shadow:var(--card-lift);
  padding:2rem clamp(1.2rem,3.5vw,2.2rem) 2rem clamp(2.6rem,5vw,3.2rem);
}
.notebook::before{ /* red margin rule */
  content:""; position:absolute; top:0; bottom:0; left:clamp(1.7rem,4vw,2.3rem); width:2px;
  background:rgba(192,22,31,.4);
}
.notebook::after{ /* spiral binding */
  content:""; position:absolute; top:16px; bottom:16px; left:-13px; width:26px;
  background-image:radial-gradient(circle at 50% 50%, #9BA0AB 0 4px, #6C7280 5px, transparent 7px);
  background-size:26px 34px; background-repeat:repeat-y;
  filter:drop-shadow(1px 2px 1px rgba(26,22,16,.4));
}
.notebook h2{ font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:.2em; }
.notebook > p{ color:var(--ink-soft); font-weight:600; margin-bottom:1.4rem; }

.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:900; font-size:.92rem; margin-bottom:.35rem; letter-spacing:.02em; }
.field label small{ font-weight:700; color:var(--ink-soft); }
.field input, .field select{
  width:100%; font:inherit; font-weight:700; color:var(--ink);
  padding:.7em .9em; border-radius:10px;
  border:1px solid rgba(26,22,16,.3);
  background:linear-gradient(180deg,#F4F1E6,#FFFFFF 30%);
  box-shadow:var(--emboss-in);
}
.field input:focus, .field select:focus{ outline:3px solid rgba(36,56,232,.55); outline-offset:1px; }
.field .hint{ font-size:.82rem; color:var(--ink-soft); font-weight:600; margin-top:.25rem; }
.field.is-error input, .field.is-error select{ border-color:var(--crimson); outline:3px solid rgba(192,22,31,.35); }
.field .error{ display:none; font-size:.85rem; font-weight:800; color:var(--crimson-deep); margin-top:.3rem; }
.field.is-error .error{ display:block; }

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form__consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; font-weight:600; color:var(--ink-soft); margin:1.1rem 0 1.3rem; }
.form__consent input{ width:1.15rem; height:1.15rem; margin-top:.2rem; accent-color:var(--leaf); flex:none; }
.form__status{ margin-top:1rem; font-weight:800; }
.form__status[data-tone="bad"]{ color:var(--crimson-deep); }
.form__status[data-tone="good"]{ color:var(--leaf-deep); }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; } /* honeypot */

/* participant pass (confirmation) */
.pass-wrap{ position:sticky; top:96px; }
.pass-intro{ font-weight:700; color:var(--ink-soft); margin-bottom:1rem; max-width:38ch; }
.pass{
  position:relative; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#FFFDF6,#F4EFDD);
  border:1px solid rgba(26,22,16,.28);
  box-shadow:var(--card-lift);
  transform:rotate(-1.2deg);
}
.pass::before{ /* lanyard hole */
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:56px; height:14px; border-radius:999px;
  background:var(--paper-deep); box-shadow:var(--emboss-in), 0 1px 0 rgba(255,255,255,.8);
}
.pass__band{
  padding:2rem 1.2rem .9rem; text-align:center; color:#fff;
  background:linear-gradient(160deg,#3D53FF,var(--royal) 50%,var(--royal-deep));
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.25);
}
.pass__band .hand{ font-size:1.35rem; color:var(--gold-shine); }
.pass__band h3{ font-family:var(--font-display); font-weight:400; font-size:1.6rem; letter-spacing:.01em; }
.pass__body{ padding:1.4rem 1.4rem 1.6rem; text-align:center; }
.pass__label{ font-size:.72rem; font-weight:900; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); }
.pass__number{
  font-family:var(--font-display); font-size:clamp(1.9rem,5vw,2.6rem); letter-spacing:.04em;
  color:var(--crimson-deep); margin:.15em 0 .4em;
  text-shadow:0 1px 0 #fff, 0 2px 2px rgba(126,11,16,.35);
}
.pass__name{ font-weight:900; font-size:1.15rem; }
.pass__meta{ font-weight:700; color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; }
.pass__barcode{ height:44px; margin:1rem auto .4rem; width:82%;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 8px, var(--ink) 8px 12px, transparent 12px 15px);
  border-radius:3px; }
.pass__stamp{
  position:absolute; right:14px; bottom:64px; transform:rotate(9deg);
  font-family:var(--font-hand); font-size:1.3rem; color:var(--leaf-deep);
  border:2.5px solid var(--leaf-deep); border-radius:8px; padding:.05em .45em;
  opacity:0; mix-blend-mode:multiply;
}
.pass.is-issued .pass__stamp{ opacity:.9; transition:opacity .3s ease .35s; }
.pass__actions{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }
.pass__actions .btn{ font-size:.88rem; padding:.6em 1.1em; }
.pass.is-waiting .pass__number{ color:rgba(26,22,16,.35); text-shadow:none; }

/* --------------------------------------------------------- sponsorship */
.sponsor{ text-align:center; }
.sponsor .section__head{ margin-inline:auto; }
.phone-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin-top:1.6rem; }
.phone-card{
  display:flex; align-items:center; gap:.8rem; justify-content:center;
  padding:1rem 1.1rem; border-radius:14px; text-decoration:none; color:var(--ink);
  font-weight:900; font-size:1.02rem;
  background:linear-gradient(180deg,#FFFDF6,var(--paper-deep));
  border:1px solid rgba(26,22,16,.18); box-shadow:var(--emboss-out);
  transition:transform .12s ease;
}
.phone-card:hover{ transform:translateY(-2px); }
.phone-card:active{ transform:translateY(2px); box-shadow:var(--emboss-in); }
.phone-card svg{ width:34px; height:34px; padding:7px; border-radius:10px; color:#fff; flex:none;
  background:linear-gradient(180deg,#2FA34C,var(--leaf) 60%,var(--leaf-deep)); box-shadow:var(--emboss-out); }

/* --------------------------------------------------------------- footer */
.site-foot{
  position:relative; z-index:3; padding:2.6rem 0 5rem; color:#EDE8DA;
  background:linear-gradient(180deg,#221C2E,#141020);
}
.site-foot::before{ /* flyer's playful primary shapes */
  content:""; position:absolute; left:0; right:0; top:-1px; height:14px;
  background:repeating-linear-gradient(90deg,
    var(--crimson) 0 90px, var(--gold) 90px 180px, var(--royal) 180px 270px, var(--leaf) 270px 360px);
}
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; }
.site-foot a{ color:var(--gold-shine); font-weight:800; }
.site-foot small{ display:block; opacity:.75; margin-top:.3rem; }

/* ---------------------------------------------------------------- print */
@media print{
  body::before, .site-head, .film, .section:not(.register), .site-foot, .notebook, .pass-intro, .pass__actions{ display:none !important; }
  .register{ background:none; padding:0; }
  .register__grid{ display:block; }
  .pass{ transform:none; box-shadow:none; page-break-inside:avoid; margin:2cm auto; max-width:9cm; border:1.5px solid #000; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px){
  .register__grid{ grid-template-columns:1fr; }
  .pass-wrap{ position:static; }
  .ticket{ grid-template-columns:1fr; }
  .ticket__stub{ border-left:0; border-top:2px dashed rgba(26,22,16,.35); flex-direction:row; flex-wrap:wrap; }
  .ticket__stub::before{ top:auto; bottom:auto; left:-11px; top:-11px; }
  .ticket__stub::after{ left:auto; right:-11px; top:-11px; bottom:auto; }
}
@media (max-width: 560px){
  .form__row{ grid-template-columns:1fr; }
  .brand__text span{ display:none; }
  .film__sprockets{ display:none; }
}