/* Polish system, 13 Nov 2026 (Bryan's site review, workstreams/website-polish-2026-11-13.md in the NAAAICE repo).
   One set of patterns for every page, taken from the landing pages he likes (camp, Teens, trial):
   tight section spacing, class cards with a picture and one job each, media mosaics placed on purpose,
   a fact strip, a path diagram, and a call-to-action that gives the video room. Loaded after chrome.css. */

/* ---- spacing: sections were up to 160px above and below; the landing pages use about half ---- */
main .field{min-height:0;padding-block:clamp(44px,5.5vw,84px)}
main .sec-head{margin-bottom:clamp(20px,2.4vw,32px);align-items:start}
main .sec-head p{max-width:52ch}
main .pband{padding-block:0}
main .faqh .list{margin-top:8px}

/* ---- hero: one short hook under the keyword H1 ---- */
.p-hero .copy p.hook,.h-hero p.hook{font-size:clamp(20px,1.9vw,28px);font-weight:800;line-height:1.25;max-width:30ch}

/* ---- class cards (replace the ticket look): a picture, a tag, the facts, one button ---- */
.pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pcs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc{--c:var(--orange);background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 12px 34px rgba(7,53,57,.10)}
.pc.t{--c:var(--teal3)}.pc.m{--c:var(--maroon)}.pc.i{--c:var(--ink)}
.pc .pm{position:relative;aspect-ratio:16/10;background:var(--ink2);overflow:hidden}
.pc .pm img,.pc .pm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pc .pm .tag{position:absolute;left:16px;bottom:14px;background:var(--c);color:#fff;font-family:"Anton",Impact,sans-serif;font-size:clamp(26px,2.6vw,38px);line-height:1;padding:8px 16px 9px;border-radius:12px;transform:rotate(-3deg);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.pc .pb{padding:22px 24px 26px;display:grid;gap:10px;align-content:start;border-top:8px solid var(--c)}
.pc h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(30px,3vw,46px);line-height:.95}
.pc .when{font-weight:800;font-size:clamp(17px,1.3vw,20px)}
.pc p{font-size:var(--s-body)}
.pc ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;font-size:var(--s-body)}
.pc li{padding-left:26px;position:relative}
.pc li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:3px solid var(--c);border-bottom:3px solid var(--c);transform:rotate(-45deg)}
.pc .btn{justify-self:start;margin-top:8px}
.pc.flat .pb{border-top-width:12px}

/* ---- fact strip: the numbers a parent or dancer needs, once ---- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.facts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{background:var(--ink);color:var(--cream);border-radius:18px;padding:18px 20px 20px;display:grid;gap:4px;align-content:start}
.fact b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:.95;color:var(--orange)}
.fact span{font-weight:700;font-size:16px;line-height:1.35}
.c-ink .fact,.c-maroon .fact{background:var(--cream);color:var(--ink)}
.c-ink .fact b,.c-maroon .fact b{color:var(--orange-ink,#C4561A)}
.after-facts{margin-top:16px;font-size:17px}
.after-facts a{font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ---- split: a big picture or clip beside a short list ---- */
.duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.duo.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.duo .sm{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:var(--ink2);margin:0}
.duo .sm img,.duo .sm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cap{position:absolute;left:12px;bottom:12px;background:var(--paper,#F5EFE3);color:var(--ink);font-weight:800;font-size:14px;line-height:1.2;padding:5px 12px;border-radius:999px;max-width:calc(100% - 24px)}
.nlist{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:n}
.nlist li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;counter-increment:n}
.nlist li::before{content:counter(n);font-family:"Anton",Impact,sans-serif;font-size:40px;line-height:.9;color:var(--orange-ink,#C4561A);grid-row:span 2;min-width:28px}
.nlist b{font-weight:800;font-size:clamp(19px,1.5vw,22px);line-height:1.2}
.nlist span{font-size:var(--s-body);grid-column:2}
.c-ink .nlist li::before,.c-maroon .nlist li::before{color:var(--orange)}

/* ---- mosaic: photos and clips, mixed on purpose, each with a caption ---- */
.mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,250px);gap:10px}
.mos figure{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--ink2);grid-column:span 4}
.mos figure.w{grid-column:span 8}.mos figure.h{grid-column:span 6}.mos figure.q{grid-column:span 3}.mos figure.t{grid-row:span 2}
.mos img,.mos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- path: where a dancer goes next, as one diagram ---- */
.path{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;counter-reset:p}
.path .pn{position:relative;padding:0 18px 0 0;display:grid;gap:8px;align-content:start;counter-increment:p}
.path .pn::before{content:counter(p);width:54px;height:54px;border-radius:50%;background:var(--orange);color:var(--ink);font-family:"Anton",Impact,sans-serif;font-size:28px;display:grid;place-items:center;position:relative;z-index:1}
.path .pn::after{content:"";position:absolute;left:54px;right:0;top:26px;height:4px;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,transparent 10px 18px)}
.path .pn:last-child::after{display:none}
.path .pn b{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1}
.path .pn span{font-size:16px;line-height:1.4;max-width:26ch}
.path .pn a{font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ---- umbrella diagram: one programme that branches out (Noooice Junior) ---- */
.umb{display:grid;gap:0;justify-items:center}
.umb .root{background:var(--orange);color:var(--ink);border-radius:20px;padding:18px 28px 20px;text-align:center;display:grid;gap:4px;min-width:min(100%,420px)}
.umb .root b{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,56px);line-height:.95}
.umb .root span{font-weight:800;font-size:16px}
.umb .stem{width:4px;height:28px;background:var(--orange)}
.umb .bar{height:4px;background:var(--orange);width:calc(100% - (100% / var(--n,2)));}
.umb .brs{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.umb .br{position:relative;padding-top:28px;display:grid}
.umb .br::before{content:"";position:absolute;left:50%;top:0;width:4px;height:28px;margin-left:-2px;background:var(--orange)}
.umb .box{background:#fff;color:var(--ink);border-radius:20px;padding:20px 22px 22px;display:grid;gap:8px;align-content:start;border-top:10px solid var(--c,var(--ink))}
.umb .box h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.8vw,42px);line-height:.95}
.umb .box .agechip{justify-self:start;background:var(--cream);font-weight:800;font-size:15px;padding:5px 12px;border-radius:999px}
.umb .box p{font-size:var(--s-body)}
.umb .twigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.umb .twig{background:var(--cream);border-radius:14px;padding:12px 14px;display:grid;gap:2px;font-size:15px;line-height:1.35}
.umb .twig b{font-weight:800;font-size:17px}
.umb .box a.link{justify-self:start;margin-top:4px}

/* ---- closing call to action: the clip gets the room ---- */
main .field.cta.has-media{grid-template-columns:minmax(0,58%) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:clamp(24px,4vw,56px);row-gap:18px}
main .field.cta.has-media .cta-media{grid-column:1;grid-row:1 / span 2;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:16/9;align-self:center}
main .field.cta.has-media .cta-media video,main .field.cta.has-media .cta-media img{width:100%;height:100%;object-fit:cover;display:block}
main .field.cta.has-media h2{grid-column:2;grid-row:1;align-self:end}
main .field.cta.has-media .base{grid-column:2;grid-row:2;align-self:start;display:grid;grid-template-columns:1fr;gap:16px;justify-items:start}
main .field.cta.has-media .base p{max-width:34ch;font-size:var(--s-lead)}
main .field.cta:not(.has-media) h2{margin-bottom:12px}

/* ---- small things ---- */
.kicker{font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink,#C4561A);margin-bottom:8px}
.c-ink .kicker,.c-maroon .kicker,.p-hero .kicker{color:var(--orange)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pills span{background:var(--cream);color:var(--ink);font-weight:800;font-size:15px;padding:6px 14px;border-radius:999px}
.c-cream .pills span{background:#fff}

/* ---- four ways in (Home): whole card is the link ---- */
.pcs.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
a.pc{text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
a.pc:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(7,53,57,.18)}
.pcs.four .pc .pm{aspect-ratio:4/3}
.pcs.four .pc h3{font-size:clamp(28px,2.5vw,40px)}
.pcs.four .pc .pb{padding:18px 20px 22px}
.pc .go{font-weight:800;color:var(--c);margin-top:4px}
.pc.i .go{color:var(--ink)}
main .stagesec{padding-block:clamp(48px,6vw,90px)}
.hm main .proofs{padding-block:clamp(40px,5vw,64px)}
/* ---- past shows (Recital): the show's poster leads, then a clip and photos from that show ---- */
.shw{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;padding-block:clamp(26px,3.4vw,44px);border-top:1px solid rgba(235,225,206,.22)}
.shw:first-of-type{border-top:0;padding-top:0}
.shw-poster{margin:0;border-radius:14px;overflow:hidden;transform:rotate(-1.5deg);box-shadow:0 18px 44px rgba(0,0,0,.4);background:var(--ink2)}
.shw:nth-of-type(even) .shw-poster{transform:rotate(1.5deg)}
.shw-poster img{display:block;width:100%;height:auto}
.shw h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,4vw,62px);line-height:.95;margin-bottom:10px}
.shw .lead{font-size:var(--s-lead);max-width:46ch;margin-bottom:18px}
.shw-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(84px,9.5vw,150px);gap:8px}
.shw-media figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--ink2)}
.shw-media figure.clip{grid-column:span 2;grid-row:span 2}
.shw-media figure.w2{grid-column:span 2}
.shw-media figure.w4{grid-column:span 4}
.shw-media img,.shw-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ---- round 2: five reasons sit 3 + 2; a diagram can sit inside a dark section ---- */
@media (min-width:821px){.reasons.five{grid-template-columns:repeat(6,minmax(0,1fr))}.reasons.five .reason{grid-column:span 2}.reasons.five .reason:nth-child(n+4){grid-column:span 3}}
.sub-head{margin-top:clamp(36px,4.5vw,64px);margin-bottom:18px;display:grid;gap:6px}
.sub-head h3{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.4vw,52px);line-height:.95}
.sub-head p{font-size:var(--s-lead);max-width:52ch}
.umb .box.here{border-top-color:var(--orange);outline:4px solid var(--orange)}
.umb .here .agechip{background:var(--orange)}
/* ---- round 2 (Adults): who is teaching in a clip; a pick-your-style row in the interest form ---- */
.clipby{font-size:15px;font-weight:700;opacity:.75}
#fform .picks{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;min-width:0}
#fform .picks legend{font-weight:800;font-size:var(--s-small);margin-bottom:10px;padding:0}
#fform .picks label{display:block;position:relative;cursor:pointer}
#fform .picks input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}
#fform .picks span{display:block;background:var(--white);border:2px solid var(--cream2);border-radius:999px;padding:12px 22px;font-weight:800;font-size:17px;transition:background .2s,border-color .2s}
#fform .picks input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
#fform .picks input:focus-visible+span{border-color:var(--orange);box-shadow:0 0 0 4px rgba(227,108,37,.2)}
/* ---- round 2 (Recital): the official show banner; a plain "coming soon" block ---- */
.shw-banner{margin:0 0 10px;border-radius:14px;overflow:hidden;background:var(--ink2)}
.shw-banner img{display:block;width:100%;height:auto}
.soon{display:grid;gap:14px;justify-items:start;max-width:560px}
.soon .fact{width:100%}
/* ---- round 2 (Studio hire): the two studios in motion, each one named ---- */
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.pair2 figure{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--ink2)}
.pair2 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.pair2{grid-template-columns:1fr}}
/* ---- round 2 (sign-up pages): a real clip beside the two cards ---- */
@media (min-width:1001px){.cgrp.with-clip{grid-template-columns:1fr 1fr minmax(0,.8fr);max-width:none}}
.cgrp .cg-clip{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--ink2);min-height:260px}
.cgrp .cg-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1000px){.cgrp .cg-clip{display:none}}
/* ---- class times inside a card: day, time, instructor ---- */
.pc ul.cslots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.pc .cslots li{padding:10px 14px;background:var(--cream);border-radius:12px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;font-size:16px;line-height:1.3}
.pc .cslots li::before{display:none}
.cslots b{font-weight:800;font-size:17px;white-space:nowrap}
.cslots span{font-weight:700}
/* ---- the app block: where everything is booked ---- */
.appb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center}
.appb h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.4vw,84px);line-height:.95;margin-bottom:14px}
.appb .lead{font-size:var(--s-lead);max-width:36ch}
.appb .acts-row{margin-top:20px;flex-wrap:wrap}
.appb .path{grid-auto-flow:row;grid-auto-columns:auto;gap:18px}
.appb .path .pn{grid-template-columns:54px 1fr;column-gap:16px;padding:0}
.appb .path .pn::before{grid-row:span 2}
.appb .path .pn::after{left:25px;right:auto;top:54px;bottom:-18px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--orange) 0 10px,transparent 10px 18px)}
.appb .path .pn span{max-width:none}

@media (max-width:820px){
  main .field{padding-block:40px}
  .pcs,.pcs.three,.pcs.four,.facts,.facts.four,.duo,.duo.rev,.appb{grid-template-columns:1fr}
  .duo .sm{aspect-ratio:16/10}
  .mos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:8px}
  .mos figure,.mos figure.w,.mos figure.h,.mos figure.q{grid-column:span 1}
  .mos figure.w{grid-column:span 2}.mos figure.t{grid-row:span 1}
  .path{grid-auto-flow:row;grid-auto-columns:auto;gap:18px}
  .path .pn{grid-template-columns:54px 1fr;column-gap:14px;padding:0}
  .path .pn::before{grid-row:span 2}
  .path .pn::after{left:25px;right:auto;top:54px;bottom:-18px;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--orange) 0 10px,transparent 10px 18px)}
  .path .pn span{max-width:none}
  .shw{grid-template-columns:1fr}
  .shw-poster{max-width:220px}
  .shw-media{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:110px}
  .shw-media figure.w4{grid-column:span 2}
  .umb .brs{grid-template-columns:1fr;gap:0}
  .umb .bar{display:none}
  .umb .twigs{grid-template-columns:1fr}
  main .field.cta.has-media{grid-template-columns:1fr}
  main .field.cta.has-media .cta-media,main .field.cta.has-media h2,main .field.cta.has-media .base{grid-column:1;grid-row:auto}
  main .field.cta.has-media h2{align-self:start}
}