/* ============================================================
   Magic Party — magicparty.org
   Built 2026-08-11. Plain HTML and CSS. No frameworks, no
   webfonts, nothing loaded from another company's server
   except the Mago booking form.

   DELIBERATELY THE BRIGHTEST OF THE THREE SITES.
   carrollbaker.com sells a corporate evening and looks like a
   theater. schoolmagicassemblies.com is daylight and plainly
   organized, because a principal is deciding about instruction
   time. THIS site sells a children's birthday party, and the
   buyer is a parent who is already stressed about the party.

   So two jobs at once, and they pull against each other:
   the SHOW has to look fun, and BOOKING has to feel safe.
   Fun is carried by color, scale and motion. Safety is carried
   by plain words, obvious buttons and the guarantee. A novelty
   comic typeface would have bought the first and cost the
   second, so the type is a plain system stack used big.

   NO PRICES ANYWHERE ON THIS SITE. Carroll's instruction,
   2026-08-11. Prices live in the Mago letters that answer an
   inquiry, not on the page.
   ============================================================ */

:root{
  /* His two brand colors, kept. Gold pushed warmer and brighter
     than the school site's brass, because this is a balloon and
     not a lectern. */
  --red:#E0121F;
  --red-dark:#B60D18;
  --gold:#F5B915;
  --gold-deep:#C98F09;

  /* Two extra party colors. Red and gold alone at high
     saturation read as Christmas; teal and grape read as
     streamers and stop that happening. */
  --teal:#2BA8C4;
  --teal-deep:#1B7E96;
  --grape:#8B4FBF;
  --grape-deep:#6B3799;

  --ink:#2A2229;              /* warm near-black, never pure #000 */
  --muted:#5F5560;
  --line:#EFE4D8;
  --cream:#FFF9F0;            /* the page ground */
  --paper:#FFFFFF;            /* cards sit above the ground */
  --band:#FDF0DC;             /* soft alternating band */

  --display:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1140px;
  --shadow-sm:0 1px 3px rgba(60,40,30,.08),0 6px 16px -8px rgba(60,40,30,.18);
  --shadow-md:0 2px 6px rgba(60,40,30,.10),0 18px 40px -20px rgba(60,40,30,.30);
  --shadow-lg:0 4px 14px rgba(60,40,30,.12),0 34px 64px -26px rgba(60,40,30,.42);
  --radius:14px;              /* rounder than the school site. Kinder. */
}

/* Dark theme. A parent browsing at 11pm with the lights off is a
   real person, and this site is aimed at exactly the hour when
   party planning actually happens. Warm plum-brown rather than
   a cold grey, so it still feels like a party after dark. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F6EFE7; --muted:#BFB0B8; --line:#40323C;
    --cream:#1A1218; --paper:#241A22; --band:#2E212B;
    --gold:#FFC93A; --teal:#4FC2DC; --grape:#B27BE0; --red:#FF4A54;
    --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 16px -8px rgba(0,0,0,.6);
    --shadow-md:0 2px 6px rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.7);
    --shadow-lg:0 4px 14px rgba(0,0,0,.5),0 34px 64px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ink:#F6EFE7; --muted:#BFB0B8; --line:#40323C;
  --cream:#1A1218; --paper:#241A22; --band:#2E212B;
  --gold:#FFC93A; --teal:#4FC2DC; --grape:#B27BE0; --red:#FF4A54;
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 6px 16px -8px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.5),0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-lg:0 4px 14px rgba(0,0,0,.5),0 34px 64px -26px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17.5px;line-height:1.68;color:var(--ink);
  background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.center{text-align:center}

h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.028em;
  text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.75rem,3.8vw,2.7rem);font-weight:800}
h3{font-size:1.25rem;font-weight:800;letter-spacing:-.012em}
p{margin:0 0 1.15em}
.lede{font-size:1.13rem;color:var(--muted)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;
  padding:12px 18px;z-index:200;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:3px solid var(--gold);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:21px;flex:none;box-shadow:var(--shadow-sm)}
.brand-text{font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.1;
  letter-spacing:-.02em}
.brand-text span{display:block;font-size:.7rem;font-weight:700;color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:9px 13px;border-radius:9px;color:var(--ink);font-weight:600;font-size:.97rem}
.nav a:hover{background:var(--band);text-decoration:none}
.nav a[aria-current="page"]{color:var(--red)}
.nav-cta{background:var(--red);color:#fff !important;font-weight:800}
.nav-cta:hover{background:var(--red-dark) !important}
.nav-toggle{display:none;background:var(--red);color:#fff;border:0;border-radius:9px;
  padding:10px 16px;font-weight:800;font-size:.95rem;cursor:pointer;font-family:var(--body)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:stretch;padding:10px 16px 18px;gap:2px;display:none;box-shadow:var(--shadow-md);
    border-bottom:3px solid var(--gold)}
  .nav.open{display:flex}
  .nav a{padding:13px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 30px;border-radius:999px;font-weight:800;
  font-size:1.03rem;border:3px solid transparent;cursor:pointer;font-family:var(--body);
  transition:transform .14s,box-shadow .14s,background .14s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--red-dark);box-shadow:var(--shadow-lg)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--band)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- confetti and balloons, drawn in CSS ----------
   No image files, so the site looks finished before a single
   photograph arrives. Purely decorative and hidden from screen
   readers. All of it stops dead under reduced-motion. */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.85;
  animation:fall linear infinite}
.confetti i:nth-child(4n+1){background:var(--red)}
.confetti i:nth-child(4n+2){background:var(--gold)}
.confetti i:nth-child(4n+3){background:var(--teal)}
.confetti i:nth-child(4n+4){background:var(--grape);border-radius:50%}
@keyframes fall{
  0%{transform:translateY(-20px) rotate(0);opacity:0}
  10%{opacity:.85}
  100%{transform:translateY(112vh) rotate(680deg);opacity:.2}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

.balloon{position:absolute;width:54px;height:66px;border-radius:50% 50% 48% 48%;
  opacity:.9;pointer-events:none}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:52px;
  background:rgba(120,90,70,.45)}
@media (prefers-reduced-motion:no-preference){
  .balloon{animation:bob 5.5s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 520px at 82% -12%, rgba(245,185,21,.30), transparent 62%),
  radial-gradient(760px 430px at 6% 108%, rgba(43,168,196,.22), transparent 60%),
  var(--band);
  border-bottom:4px solid var(--gold)}
.hero-in{position:relative;z-index:2;padding:74px 0 82px;display:grid;
  grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media (max-width:920px){.hero-in{grid-template-columns:1fr;padding:56px 0 62px}}
.eyebrow{display:inline-block;background:var(--red);color:#fff;font-weight:800;
  font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;padding:7px 15px;
  border-radius:999px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.hero h1 em{font-style:normal;color:var(--red);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.17em;
  background:var(--gold);border-radius:3px;z-index:-1}
.hero p{font-size:1.2rem;max-width:52ch}
.hero-photo{position:relative}
.hero-photo img{border-radius:var(--radius);box-shadow:var(--shadow-lg);
  border:6px solid var(--paper)}

/* Photo placeholder. Deliberately friendly rather than a grey box,
   because Carroll will see these before the real pictures land. */
.photo-slot{border:3px dashed var(--gold);border-radius:var(--radius);background:var(--paper);
  display:grid;place-items:center;text-align:center;padding:30px 22px;min-height:230px;
  color:var(--muted)}
.photo-slot b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:5px}
.photo-slot span{font-size:.86rem;line-height:1.5}

/* ---------- sections ---------- */
.section{padding:78px 0}
.section-band{background:var(--band)}
.section-head{margin-bottom:38px}
.section-head .lede{max-width:62ch}
.section-head.center .lede{margin-left:auto;margin-right:auto}
.kicker{display:block;font-size:.8rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:10px}

/* A row of bunting between sections, instead of a plain rule. */
.bunting{height:22px;background-image:
  linear-gradient(135deg,var(--red) 25%,transparent 25%),
  linear-gradient(225deg,var(--red) 25%,transparent 25%);
  background-size:26px 22px;background-repeat:repeat-x;opacity:.9}
.bunting.gold{background-image:
  linear-gradient(135deg,var(--gold) 25%,transparent 25%),
  linear-gradient(225deg,var(--gold) 25%,transparent 25%)}
.bunting.teal{background-image:
  linear-gradient(135deg,var(--teal) 25%,transparent 25%),
  linear-gradient(225deg,var(--teal) 25%,transparent 25%)}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:var(--shadow-md)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card .icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-size:27px;margin-bottom:16px;color:#fff}
.card:nth-child(3n+1) .icon{background:var(--red)}
.card:nth-child(3n+2) .icon{background:var(--teal)}
.card:nth-child(3n+3) .icon{background:var(--grape)}
.card p:last-child{margin-bottom:0}

/* ---------- the two shows ---------- */
.show{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.show-top{padding:26px 26px 20px;border-bottom:4px solid var(--gold)}
.show.feature .show-top{border-bottom-color:var(--red)}
.show-top h3{font-size:1.5rem;margin-bottom:4px}
.show-mins{font-weight:800;color:var(--teal-deep);font-size:.92rem;letter-spacing:.05em;
  text-transform:uppercase}
.show ul{list-style:none;margin:0;padding:22px 26px 26px;flex:1}
.show li{position:relative;padding-left:32px;margin:0 0 12px;line-height:1.55}
.show li::before{content:"★";position:absolute;left:0;top:-1px;color:var(--gold);
  font-size:1.15rem}
.show li.star::before{content:"🐰"}
.show .flag{display:inline-block;background:var(--gold);color:#3A2A05;font-weight:800;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;
  border-radius:999px;margin-bottom:12px}

/* ---------- quotes ---------- */
.quote{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--gold);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow-sm);margin:0}
.quote blockquote{margin:0;font-size:1.06rem;line-height:1.62}
.quote figcaption{margin-top:14px;font-weight:800;color:var(--red);font-size:.95rem}
.quote-big{border-left-color:var(--red)}
.quote-big blockquote{font-family:var(--display);font-size:clamp(1.25rem,2.7vw,1.85rem);
  line-height:1.38;font-weight:700;letter-spacing:-.02em}

/* ---------- video ----------
   A real parent on camera outranks anything written, so this gets
   room to breathe rather than being tucked in a sidebar. The
   aspect-ratio wrapper keeps it from jumping about while it loads. */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0E0A0C;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  border:6px solid var(--paper)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-note{margin-top:16px;text-align:center;color:var(--muted);font-size:.95rem}
.video-pair{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.video-pair .video-frame{border-width:5px}
.video-cap{margin:12px 0 0;text-align:center;font-weight:700;color:var(--red);font-size:.98rem}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;
  text-align:center}
.stat-num{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,3.3rem);font-weight:800;
  color:var(--red);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-lab{font-size:.87rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}

/* ---------- guarantee ---------- */
.guarantee{background:linear-gradient(135deg,var(--red),var(--grape-deep));color:#fff;
  border-radius:var(--radius);padding:42px 38px;text-align:center;box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden}
.guarantee h2{color:#fff;margin-bottom:.35em}
.guarantee p{font-size:1.12rem;max-width:60ch;margin:0 auto;color:rgba(255,255,255,.94)}
.guarantee .seal{font-size:2.6rem;margin-bottom:10px;display:block}

/* ---------- FAQ ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{padding:20px 24px;font-weight:800;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.7rem;font-weight:800;
  line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .answer{padding:20px 24px 6px}

/* ---------- booking ----------
   THE FORM SHELL IS DELIBERATELY NOT THEMED, and this is the one place on the
   site where a token must NOT be used.

   The booking form is injected by Mago from their server. Their stylesheet is
   written for a white page and sets dark text. If this card follows our dark
   theme, that dark text lands on a dark card and the labels become unreadable,
   so a parent cannot tell which box is which. Reported by Carroll 2026-08-11.

   So this block is hard-coded light in BOTH themes. A third-party embed should
   never inherit a theme it has never heard of. The card stays white, the text
   stays dark, and the form looks exactly as its authors intended. */
.form-shell{background:#FFFFFF;color:#26262B;border:1px solid #E4E1DA;
  border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-md);
  max-width:760px;margin:0 auto;

  /* THE LINE THAT ACTUALLY FIXES THE DARK-MODE FORM, added 2026-08-11 after
     Carroll reported the field labels were still unreadable on his phone.

     Mago builds the form inside an IFRAME. Nothing in this stylesheet reaches
     inside it, so every color rule below was landing on nothing. What DOES
     cross that boundary is color-scheme: the browser passes it into the
     embedded document and uses it to decide how to paint form controls and
     which side of any prefers-color-scheme rule to take.

     Our :root says color-scheme:dark in dark mode, so the browser was telling
     Mago's form "you are in the dark" and it painted itself accordingly, on a
     white card. Forcing light here, and on the iframe itself, keeps the form
     in the world it was designed for no matter what theme the phone is in. */
  color-scheme: light;
}
/* Belt and braces: set it on the embed too, in case a browser does not inherit
   color-scheme through to the frame. Harmless where it already worked. */
.form-shell iframe{color-scheme:light;background:#FFFFFF;max-width:100%;border:0}

/* :where() keeps this at zero specificity, so if Mago ever sets its own colors
   theirs still wins. This only catches what would otherwise inherit from body. */
.form-shell :where(label,legend,p,span,div,h1,h2,h3,h4,h5,strong,em,li,td,th,a,small){
  color:#26262B}
.form-shell :where(a){color:#B60D18}
.form-shell :where(input,select,textarea){background:#FFFFFF;color:#26262B;
  border:1px solid #C9C4BC;border-radius:8px;font-family:var(--body);font-size:16px;
  padding:10px 12px;max-width:100%}
.form-shell :where(input:focus,select:focus,textarea:focus){outline:3px solid #2BA8C4;
  outline-offset:2px}
/* 16px on inputs above is not a style choice: anything smaller makes iPhones
   zoom the page in when a parent taps a field, and they rarely zoom back out. */
.form-shell :where(input[type="submit"],button){background:#E0121F;color:#FFFFFF;
  border:0;border-radius:999px;padding:14px 30px;font-weight:800;cursor:pointer;
  font-size:16px}
.form-fallback{margin-top:22px;text-align:center;font-size:.97rem;color:var(--muted)}
.phone-big{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;
  color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- footer ----------
   HARD-CODED DARK IN BOTH THEMES, ON PURPOSE, and it must stay that way.

   This block used to read background:var(--ink). That was a real bug, reported
   by Carroll 2026-08-11: --ink is the TEXT color, and it correctly flips to
   near-white in dark mode, so the footer inverted to a pale ground while its
   own text and gold headings stayed pale. Unreadable.

   THE RULE THIS BREAKS AND THAT IS WORTH REMEMBERING: never use a token whose
   job is text as a background. A token that flips between themes flips for the
   role it was named for, not for the role you borrowed it into.

   A dark footer is a deliberate choice here rather than an accident of theme.
   It closes the page, and every color below is fixed so it cannot invert. */
.site-footer{background:#2A2229;color:#EFE6DD;padding:52px 0 34px;margin-top:10px}
.site-footer a{color:#F5B915}
.site-footer a:hover{color:#FFD563}
.site-footer p{color:#EFE6DD}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;
  margin-bottom:30px}
.site-footer h4{font-family:var(--display);font-size:1rem;font-weight:800;margin:0 0 12px;
  letter-spacing:.05em;text-transform:uppercase;color:#F5B915}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  font-size:.86rem;color:rgba(239,230,221,.66);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* ---------- scroll reveal ----------
   Opt-in via data-anim. The .no-js rule below is the safety net:
   if the JavaScript never runs, everything is visible anyway. An
   animation must never be able to hide the page. */
[data-anim]{opacity:0;transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.22,.7,.3,1),transform .62s cubic-bezier(.22,.7,.3,1)}
[data-anim].is-in{opacity:1;transform:none}
[data-anim="left"]{transform:translateX(-30px)}
[data-anim="right"]{transform:translateX(30px)}
[data-anim="zoom"]{transform:scale(.93)}
[data-anim="pop"]{transform:scale(.8) rotate(-4deg)}
[data-anim="left"].is-in,[data-anim="right"].is-in,
[data-anim="zoom"].is-in,[data-anim="pop"].is-in{transform:none}
[data-delay="1"]{transition-delay:.09s}
[data-delay="2"]{transition-delay:.18s}
[data-delay="3"]{transition-delay:.27s}
[data-delay="4"]{transition-delay:.36s}
.no-js [data-anim]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{opacity:1 !important;transform:none !important;transition:none !important}
  .balloon{animation:none}
}