/* Tickets for Teens. Third name in three days: Teen Culture Takeover until
   11 Aug 2026, TKTS for Teens for a day, then this on 12 Aug when branding was
   confirmed. The repo directory, the Salesforce field prefixes and the L_TEAM_
   table all still say TeenCultureTakeover, and the hero artwork still reads
   "tkts for teens" - a logotype and a written name are not the same thing.
   Host moved tct.tdf.org -> tft.tdf.org on 12 Aug 2026.
   Palette and type follow the Mayor's Office "Summer in NYC" site: orange as the
   dominant ground, a bright blue for display type and actions, blue-cast darks,
   IBM Plex Serif against Instrument Sans, modest radii with pill buttons.
   Colour values are their published tokens, not eyeballed from a screenshot. */

/* Palette taken from the Summer in NYC build itself (Resources/MayorPageSample),
   weighted by how often each token is actually rendered rather than by what the
   token list offers. blue-500 leads by a distance (39 uses to blue-400's 17),
   the hero ground is yellow-800, and every neutral is blue-cast - no warm greys
   or creams anywhere on their site. */
:root{
  /* ground */
  --orange:#FF8200;        /* yellow-800 - their actual hero orange */
  --orange-deep:#915A13;   /* orange-700 - rules and hovers on orange */
  --orange-pale:#FFEBD4;   /* orange-100 - warm accent callouts */

  /* blues: blue-500 carries the structure, blue-400 is the brighter action colour */
  --blue:#1601AE;          /* blue-500 - dominant */
  --blue-bright:#2439C9;   /* blue-400 - buttons and highlights */
  --blue-deep:#0A016F;     /* blue-600 - hover / depth */
  --blue-ink:#16004C;      /* neutral-900 - body text */
  --blue-night:#04004B;    /* blue-700 - footer, utility bar */

  /* blue-cast neutrals, as theirs are */
  --surface:#F5F8FF;       /* neutral-5  */
  --surface-2:#E8EFFF;     /* neutral-10 */

  /* --blue sits at hue 247deg with 99% saturation, which is past pure blue and
     into violet. At 34% lightness that violet is plainly visible, and on the
     orange - close to blue's complement - the eye exaggerates it further, so it
     reads purple. (--blue-ink is a MORE violet hue at 257deg but only 15%
     lightness, which is why the body paragraphs read as navy and never drew the
     complaint.) --blue-true is the same job rotated 31deg toward true blue and
     darkened, so it still reads as a distinct accent against the body text
     without reading purple. 5.09:1 on the orange. Chosen by TDF Marketing from
     'Hero Text Colour Options.html' in the project root, 10 Aug 2026. */
  --blue-true:#06306F;
  --ember:#F1140C;
  /* --ember is the Mayor's red, kept exactly as they specify it. At 4.33:1 on
     white it clears the 3.0 bar for graphics and large text but not the 4.5
     small text needs, so --ember-ink is the same hue darkened to 6.25:1 for
     anything set small. The token stays faithful where it reads as a shape and
     compliant where it reads as words. */
  --ember-ink:#C20E07;
  --leaf:#036D01;
  --white:#fff;

  --rule:#B3C6F8;          /* neutral-100 - their border colour, 30 uses */
  /* --rule is a decorative hairline at 1.70:1 on white, which is fine for card
     edges but illegal on a form control: WCAG 1.4.11 wants 3.0 for the boundary
     of anything you have to interact with. --field is the same blue cast pushed
     dark enough to clear it (4.24:1 on white, 3.99:1 on the tinted surface). */
  --field:#6B79AC;
  --muted:#3F5BB6;         /* neutral-500 */
  --focus:#16004C;

  --maxw:1160px;

  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"IBM Plex Serif",Georgia,Cambria,"Times New Roman",serif;

  --r-sm:6px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:9999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--orange);color:var(--blue-ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);
}
/* dark navy vanishes on the dark bands; switch the ring to orange there */
.utility a:focus-visible,.masthead a:focus-visible,footer a:focus-visible,.stats a:focus-visible{
  outline-color:var(--orange);
}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--blue-ink);padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---------- utility bar ---------- */
/* HIDDEN AT ALL WIDTHS at TDF's request, 10 Aug 2026. It was previously hidden
   only below 680px. Its tagline and links are repeated in the footer, so nothing
   is lost by dropping it. The markup is left in index.html and register.html and
   the styling below is intact, so restoring it is a matter of deleting the
   display:none on the next line. */
.utility{display:none}
.utility{background:var(--blue-night);color:#B9C3E8;font-size:13px}
.utility .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;min-height:40px;flex-wrap:wrap}
.utility a{color:#B9C3E8;text-decoration:none}
.utility a:hover{color:var(--orange)}
.utility nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- masthead ---------- */
/* Bright blue band. The TDF wordmark is white artwork, so it needs a dark ground. */
.masthead{background:var(--blue);border-bottom:1px solid rgba(255,255,255,.18)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:92px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand img{height:46px;width:auto}
.brand .sub{
  font-size:12px;line-height:1.35;color:#C5CCF2;max-width:190px;letter-spacing:.02em;
  padding-left:16px;border-left:1px solid rgba(255,255,255,.3);
}
.mainnav{display:flex;gap:26px;flex-wrap:wrap;font-size:15px;font-weight:600}
.mainnav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;color:#EDF0FF}
.mainnav a:hover{border-bottom-color:var(--orange);color:var(--orange)}
.mainnav a[aria-current]{border-bottom-color:var(--orange);color:var(--white)}

/* ---------- hero ---------- */
.hero{background:var(--orange);color:var(--blue-ink);position:relative;overflow:hidden}
.hero .wrap{position:relative;padding:70px 24px 48px}
/* The ED split the hero: orange behind the marks and the wordmark, white behind
   the pitch and the buttons. Two blocks rather than one, so the colour change
   runs the full width of the viewport rather than stopping at the container. */
.hero-lower{background:var(--white)}
.hero-lower .wrap{padding:44px 24px 56px}
/* Per the Mayor's office (Nella, via Jed): the marks are the all-white monocolour
   lockups sitting straight on the orange, with no panel or bar behind them, and
   noticeably more air between the two. The white variants are the ones City brand
   supplies for exactly this case, so nothing here needs a background any more.
   The divider that used to separate them is gone; the gap does that work now. */
/* No panel behind these, by request of the Mayor's office (Nella via Jed, 10 Aug
   2026): the white monocolour lockups sit straight on the orange with nothing
   boxing them in. White on the orange is 2.49:1, which is fine here because
   WCAG 1.4.11 exempts logotypes from contrast requirements. The blue panel that
   briefly lived here existed only to balance the slab behind 'Takeover'; that
   slab is gone, so the panel has nothing left to balance. */
.partner-marks{
  display:inline-flex;align-items:center;gap:56px;flex-wrap:wrap;
  margin:0 0 34px;
}
/* Slightly larger than they were on the panel. Without a white ground the marks
   lose the contrast the panel gave them, and size buys some of that back. */
.partner-marks img{height:48px;width:auto;display:block}
/* DCLA is a far wider lockup (5.5:1 against the Mayor's 4:1) with denser type,
   so matching heights makes it dominate. Sized down for optical balance. */
.partner-marks .mark-dcla{height:34px}
/* The reverse problem: TDF is a compact mark at 1.6:1, so at a matched height it
   is only about 75px wide against roughly 190px for the other two and reads as
   an afterthought. A little extra height evens out the visual weight. */
.partner-marks .mark-tdf{height:58px}
/* 660px, not 520px. The desktop row needs 195.3 + 188.3 + 90.8 of logo plus two
   56px gaps = 586.4px of content, so it wraps below a 634.4px viewport. Ending
   the one-line treatment at 520px left the 521-634px band still wrapping - a
   dead zone on small tablets and large phones in landscape, which is what TDF
   caught on 11 Aug 2026. 660 clears the arithmetic with room for the odd pixel
   of SVG rounding.

   Recompute this bound if any of the three heights or the 56px gap change: it is
   derived from them, not chosen for a device. */
@media (max-width:660px){
  /* Two 48px marks plus a 56px gap will not fit a phone, so they wrap. Once they
     wrap the horizontal gap stops mattering and the row gap takes over, which is
     why this sets both rather than one shorthand value. */
  /* All three marks on ONE line, per TDF on 11 Aug 2026. This replaces the
     earlier two-row grid, which broke with TDF alone underneath because holding
     one line puts the DCLA lockup around 20px tall. That trade was put to TDF
     and one line was chosen anyway, with permission to tighten the spacing and
     shrink the marks.

     SIZED BY WIDTH IN PERCENT, NOT BY HEIGHT IN PIXELS. Three fixed heights and
     a fixed gap only fit one viewport width; every other phone either overflows
     or leaves a ragged gap. Percentages that sum with the gaps to exactly 100%
     fit every width by construction, from a 320px phone up to this breakpoint,
     and they never overflow because there is nothing left over to overflow with.

     The three numbers are the marks' natural widths at the desktop heights that
     were tuned for optical balance - 822:202 at 48px, 201:36 at 34px, 180:115
     at 58px, so 195 : 188 : 91 px, or 41.2 : 39.7 : 19.1 percent of the artwork.
     Scaled to the 90% left after two 5% gaps, that is the set below. Keeping
     those proportions is what stops this reading as three logos crammed in a
     row: DCLA is still the visually shortest and TDF still the tallest, exactly
     as on desktop.

     height:auto on each one individually, because .partner-marks .mark-dcla is
     more specific than .partner-marks img - overriding only the img rule would
     leave DCLA and TDF pinned to their desktop pixel heights and blow the row
     apart. width:auto is gone for the same reason. */
  .partner-marks{
    display:flex;flex-wrap:nowrap;align-items:center;
    gap:5%;width:100%;
  }
  .partner-marks img{height:auto}
  .partner-marks .mark-mayor{height:auto;width:37.0%}
  .partner-marks .mark-dcla {height:auto;width:35.7%}
  .partner-marks .mark-tdf  {height:auto;width:17.3%}

  /* The wordmark's left-justify correction is no longer here - it applies at
     every width now, next to the .hero h1 img rule it belongs with. */
}
/* Deliberate sticker tilt. Any transform at all costs subpixel antialiasing,
   so a bigger angle is no blurrier than a small one - and a shallow tilt reads
   as a mistake rather than a choice. The shadow sells it as an applied sticker.
   Push to -4 or -5deg if it still reads timid; only the margin needs revisiting,
   because a wider pill swings its ends further as the angle grows. */
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);background:var(--blue);padding:9px 18px;border-radius:var(--r-pill);
  margin-bottom:34px;
  transform:rotate(-3deg);
  box-shadow:0 3px 10px rgba(4,0,75,.22);
}
/* The headline is supplied artwork now (the TKTS for Teens lockup) rather than set
   type, so every type property that used to live here has gone with the text.
   What remains is sizing.

   Sized by WIDTH, not height. The lockup is a fixed 5.49:1 and almost all of that
   is horizontal, so a height based rule would run it off the side of a phone long
   before it looked too small. min() caps it on desktop and lets it shrink to the
   column below that.

   720px is the cap because it reads as the dominant element against the 48px
   partner marks above without crowding the 24px gutter. */
/* TEXT hero headings - the offers page still has one ("Free Museum & Library
   Admissions"). These properties were removed in cd61367 when the landing page
   hero became artwork, but .hero h1 is shared, so the offers heading silently
   dropped to the browser's default h1: body font, 2em, inherited colour, instead
   of the display serif at clamp(40px,7vw,86px). It looked plausible enough that
   nobody caught it for a day. Restored here and scoped below so the artwork hero
   is unaffected. */
.hero h1{
  font-family:var(--display);
  margin:0 0 4px;font-size:clamp(40px,7vw,86px);line-height:.96;
  letter-spacing:-.02em;font-weight:700;max-width:14ch;color:var(--blue);
}
/* The landing page hero is an image inside the h1. The type properties above are
   inert on it, but max-width:14ch is not - it would clamp the image's containing
   block - so that one is reset. */
.hero h1.hero-wordmark{max-width:none}
/* 800px, not the old 720px. The replacement lockup is 6.074:1 where the previous
   one was 5.494:1, and it carries proportionally less internal padding (its type
   fills 64% of the box height against the old 73%), so the same box width would
   have rendered visibly smaller type. 800 keeps the wordmark's presence roughly
   where it was and still leaves the 24px gutter alone inside the 1160px wrap. */
.hero h1 img{display:block;width:min(100%,800px);height:auto}
/* Flush left at EVERY width, not just on a phone.
   The lockup carries transparent clear space baked in, so its visible left edge
   sits inside the gutter that the partner marks start at. The correction is a
   proportion OF THE IMAGE - but percentage margins resolve against the container,
   and those two are only the same thing while the image is at 100%. Past the cap
   the image stops growing and the container does not, so a percentage keeps
   growing and overshoots. Hence two rules and a breakpoint at exactly the width
   where the cap engages: 800 + 48px of gutters = 848px.

   MEASURED FROM THE ARTWORK, NOT GUESSED. Current file's opaque bounding box
   starts at x=55 of 1883, so 55/1883 = 2.9209%, and 800 x 2.9209% = 23.37px.
   The previous lockup was 152/3000 = 5.0667% and 36.48px - replacing the file
   changed both numbers, and leaving the old ones in place pulled the new wordmark
   out past the gutter. Recompute both if the artwork is ever swapped again. */
.hero h1 img{margin-left:-2.9209%}
@media (min-width:848px){
  /* Image pinned at 800px, so the band is a constant 800 x 55/1883. */
  .hero h1 img{margin-left:-23.37px}
}
/* The PNG carries its own clear space - roughly 13% transparent band top and
   bottom, 5% each side - so the visible artwork sits inside a taller box than the
   text did, and the gap under .partner-marks reads about 18px wider than it did
   at the 720px cap. That padding is left in deliberately: it is the lockup's
   clear space, and reproducing it in CSS after cropping it out of the file would
   be the same spacing with more moving parts. Trim the file if the old rhythm is
   wanted back exactly.

   CONTRAST. The white in this lockup - the word 'for' - is white on the orange at
   2.49:1, which would fail WCAG 2.1 AA as text. It does not need to pass: 1.4.11
   exempts logotypes, the same exemption the three partner marks above already
   rely on. What this replaces was NOT exempt - 'Takeover' was live text in white
   on the orange, a real AA failure that TDF accepted for brand reasons (Ty
   Staggs, 10 Aug 2026) and which this file recorded as the site's only remaining
   one. Swapping type for artwork retires that failure rather than hiding it.
   The wording and the blue/white values are in git history if the text headline
   is ever restored. */
.hero p{font-size:clamp(17px,2.1vw,21px);color:var(--blue-ink);max-width:56ch;margin:0 0 34px}
/* The hero now carries five paragraphs rather than one sentence, so tighten
   the spacing between them and widen the measure a little to stop it running
   tall. The block as a whole keeps the original gap above the buttons. */
/* Marketing found running text hard to read directly on the orange, so the long
   passages sit on a white panel. Same white and same radius as the How it works
   cards, so this reads as a pattern the page already uses rather than a new
   device. box-sizing is border-box, so the padding narrows the measure to about
   58ch, which is comfortably inside the 45 to 75 range for body copy. */
.panel{
  background:var(--white);border-radius:var(--r-lg);
  padding:30px 32px;
}
.hero-body{max-width:66ch;margin:0 0 34px}
.hero .hero-body p{font-size:clamp(16px,1.85vw,19px);max-width:none;margin:0 0 15px}
.hero .hero-body p:last-child{margin-bottom:0}
.hero-lower .hero-lead{
  font-family:var(--display);font-size:clamp(22px,2.8vw,30px);line-height:1.25;
  font-weight:700;color:var(--blue-true);margin:0 0 18px;
}
/* Numbered because the ED wrote them as 1. and 2. Counter rather than list-style
   so the marker can take the brand colour and weight. */
.hero-points{list-style:none;counter-reset:pt;margin:0 0 30px;padding:0;max-width:64ch}
.hero-points li{
  counter-increment:pt;position:relative;padding-left:36px;margin-bottom:14px;
  font-size:clamp(16px,1.9vw,19px);color:var(--blue-ink);
}
.hero-points li::before{
  content:counter(pt) ".";position:absolute;left:0;top:0;
  font-weight:700;color:var(--blue-true);
}
.hero-lower .fineprint{margin:24px 0 0;font-size:14px;color:var(--muted)}
.hero .hero-body strong{color:var(--blue-true)}
.hero .hero-body em{font-style:italic}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  padding:15px 30px;border-radius:var(--r-pill);border:2px solid transparent;
  transition:transform .12s ease,background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue-bright);color:var(--white)}
.btn-primary:hover{background:var(--blue-deep)}
/* The ghost button sits on the orange, where --blue-bright is only 3.37:1 -
   fine for the border (3.0) but short of the 4.5 its 16px label needs. The
   deeper --blue clears both at 5.12:1. --blue-bright stays on the solid button,
   where it is a background rather than a foreground and measures 8.39:1. */
.btn-ghost{border-color:var(--blue);color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:var(--white)}
/* Was a warm brown tuned to the old orange; on #FF8200 that fell to 3.2:1.
   The ink blue clears AA at 7.4:1 and keeps the palette cool throughout. */
.hero .fineprint{margin:26px 0 0;font-size:14px;color:var(--blue-ink);opacity:.85}

/* ---------- stat strip ---------- */
.stats{background:var(--blue);color:var(--white)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0}
.stat{padding:34px 24px;border-left:1px solid rgba(255,255,255,.25)}
.stat:first-child{border-left:0;padding-left:24px}
/* Sized for short phrases, not bare numerals - "7 Broadway Hits" has to fit. */
.stat .n{
  font-family:var(--display);
  font-size:clamp(24px,3.2vw,36px);font-weight:700;line-height:1.1;letter-spacing:-.02em;
  color:var(--orange);text-wrap:balance;
}
.stat .l{font-size:15px;font-weight:600;margin-top:10px;color:#C5CCF2;max-width:30ch}

/* ---------- generic section ---------- */
section{padding:80px 0}
#about{padding:0}
.section-head{max-width:62ch;margin-bottom:44px}
.kicker{
  font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin:0 0 12px;
}
h2{
  font-family:var(--display);
  font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0 0 16px;font-weight:700;
  color:var(--blue);
}
h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em;font-weight:700}
.lede{font-size:19px;color:var(--muted);margin:0}
/* About now runs two lede paragraphs; without this they sit flush together. */
.lede + .lede{margin-top:16px}
p{margin:0 0 16px}

/* ---------- steps (white cards on the orange ground) ---------- */
/* Blue band carries the heading only; the body below it is white. Kicker white,
   heading orange, both per the ED. */
#about{background:var(--white)}
.about-head{background:var(--blue);padding:56px 0 52px}
.about-head .kicker{color:var(--white);margin-bottom:14px}
.about-head h2{color:var(--orange);margin:0;max-width:20ch}
.about-body{background:var(--white);padding:54px 0 78px}
.about-body .lede{max-width:70ch}
.about-body .lede + .lede{margin-top:16px}

.about-body .lede{color:var(--blue-ink)}
.steps-head{
  font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:700;
  /* ED asked for a clear break between the About copy and the steps. */
  color:var(--blue);margin:56px 0 24px;
}
/* Four steps now, each a single sentence with no sub-heading. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step p{font-size:17px;font-weight:600;color:var(--blue-ink)}
/* These were white cards on the orange ground, where the colour change alone
   defined them. The ED made this section white, so they had no visible edge
   left at all - hence "add boxes". A border plus a soft lift restores the card
   reading without going back to a coloured ground. */
.step{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:30px 28px 32px;box-shadow:0 1px 3px rgba(22,0,76,.06);
}
.step .num{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:20px;margin-bottom:18px;
  font-family:var(--display);
  background:var(--blue);color:var(--white);
}
/* rotate the accent so the row is not three identical badges */
/* The numbers used to cycle through orange, navy and red. Varying them made the
   steps read as three unrelated things rather than one sequence, so they all now
   take the base treatment above: white on --blue, 12.73:1. Deleting the per step
   overrides is the whole change - there is no longer anything to keep in sync
   when a step is added or removed. */
.step h3{color:var(--blue)}
.step p{color:var(--muted);font-size:16px;margin:0 0 12px}
.step p:last-of-type{margin-bottom:0}
/* Step 1 carries a Sign Up button; push it to the card foot so the three cards
   keep a common baseline however much copy each one holds. */
.btn-step{margin-top:18px;align-self:flex-start;padding:11px 22px;font-size:15px}
.step{display:flex;flex-direction:column}

/* ---------- shows ---------- */
/* Divider so Lottery Shows reads as a new section rather than a continuation
   of About, now that both are on white. */
.shows{background:var(--white);border-top:2px solid var(--rule)}
.grid-shows{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);display:flex;flex-direction:column;
}
.card .art{aspect-ratio:3/2;background:linear-gradient(135deg,var(--blue),var(--blue-night));position:relative;display:grid;place-items:center}
/* Artwork is supplied at 1200x800, the same 3:2 as this box, so cover crops
   nothing today. It guards against a future image at a different ratio.
   The gradient underneath shows while the image is still loading. */
.card .art img{width:100%;height:100%;object-fit:cover;display:block}
.card .art span{color:rgba(255,255,255,.34);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
/* Only ever visible while artwork loads. */
.card .body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
/* UNUSED as of 10 Aug 2026. The Musical / Play chips were overlaid on the show
   artwork to save vertical space, but they covered too much of the image and
   were dropped, which is what the ED originally asked for. Rules kept so that
   restoring them is a matter of putting the <span> back inside .art in
   index.html - nothing here needs rewriting. */
.tag{
  position:absolute;top:12px;left:12px;z-index:1;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--blue);color:var(--white);
  padding:5px 11px;border-radius:var(--r-pill);
  /* The pill carries its own ground, so its contrast is fixed regardless of what
     is behind it. The shadow only separates it from busy artwork. */
  box-shadow:0 2px 6px rgba(4,0,75,.35);
}
/* Marketing: every Musical shares one treatment and every Play another, so these
   key off the show type rather than the card position. The old nth-child rules
   coloured by where a card happened to sit, which meant adding a show silently
   recoloured the ones after it. */
.tag-musical{background:var(--blue);color:var(--white)}        /* 12.73:1 */
.tag-play{background:var(--blue-night);color:var(--orange)}    /*  7.63:1 */
.card h3{font-family:var(--display);font-size:21px;font-weight:700;color:var(--blue)}
.card p{color:var(--muted);font-size:15px;margin:0 0 16px}
.card .meta{margin-top:auto;font-size:14px;font-weight:600;color:var(--blue-ink);padding-top:14px;border-top:1px solid var(--rule)}

/* ---------- cultural partners ---------- */
/* White ground, not the cream used elsewhere. Partner logos arrive with mixed
   backgrounds - some transparent, some baked onto white, MoMA PS1 on a black
   square. On cream the white-backed ones show as visible rectangles; on white
   they sit seamlessly and nobody's logo has to be altered. */
/* No border-top: the ED reads this as a continuation of the shows section. */
.culturals{background:var(--white);padding-top:0}

/* ---------- cultural listings (generated from FreeEventListings.xlsx) ---------- */
/* These reuse .grid-shows and .card so the offers page reads as the same system
   as the Broadway listings on the landing page, which is what TDF asked for.
   Only the differences from a show card live here.

   ART. The Broadway cards get 1200x800 photography and cover-crop it. Partners
   supply LOGOS - the two in the workbook today are a Brooklyn Botanic Garden
   wordmark and Historic Richmond Town with a tagline - and cover-cropping a logo
   cuts the wordmark off. So .art-logo contains rather than covers, on white
   rather than the blue gradient, with padding so nothing touches the edge. This
   is the same reasoning the old logo grid was built on; it has just moved inside
   the card. */
.card .art.art-logo{background:var(--white);padding:22px;place-items:center}
.card .art.art-logo img{width:100%;height:100%;object-fit:contain}

/* The organisation, when the event name is something different. Sits tight under
   the heading rather than reading as body copy. */
.card .card-org{
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}

/* .meta already carries the top rule and pushes itself to the bottom of the
   card. Address, dates and cost stack inside it, so it needs line-height that
   three or four lines can live with. */
.card .meta{line-height:1.5;font-weight:500}
.card .meta a{color:var(--blue);font-weight:700}

/* The partner count keeps changing as approvals land, so auto-fit rather than a
   fixed three columns: the row stays balanced at any number instead of leaving a
   conspicuous hole, and it collapses on its own below the breakpoint without a
   second rule. */
.culturals .grid-shows{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  /* Descriptions are shown in full and run from 38 to about 1,400 characters.
     Grid items stretch to the tallest in their row by default, so one long
     listing would leave every card beside it mostly empty. start lets each card
     end where its own content ends. */
  align-items:start;
}
/* Paragraph spacing inside a card that may now carry five or six of them. The
   last one sits tight against the meta rule rather than double-spacing it. */
.culturals .card p{margin:0 0 12px}
.culturals .card p:last-of-type{margin-bottom:16px}

/* Not every partner's offer is free - five of them answered No - and this page is
   titled "Free Museum & Library Admissions". An unmarked ticketed listing sends a
   student out with no money, so .tag is pressed back into service to say which is
   which. Orange rather than blue: it has to differ from the Free pill at a glance
   and not read as another piece of chrome. Contrast against white text is 2.49:1
   on this orange, which is why the text is blue-night instead. */
.tag-paid{
  background:var(--orange);color:var(--blue-night);
}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.offer{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:28px 26px 30px;display:flex;flex-direction:column;align-items:flex-start;
}
.offer h3{font-family:var(--display);font-size:20px;color:var(--blue);margin:0 0 10px}
.offer p{color:var(--muted);font-size:16px;margin:0 0 20px}
.offer .btn{margin-top:auto}
/* Partners follows Accessing NYC culture and is also on white, so without the
   same hairline the two would read as one long section. It reuses .logo-grid
   and .logo-grid-empty rather than defining its own, so logos dropped in later
   land in exactly the layout the section above already uses. */
.partners{background:var(--white);border-top:2px solid var(--rule)}
/* Logos sit directly on the background - no tiles, per Marketing. auto-fill
   means the row count adapts on its own, so 5 logos or 20 need no change. */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:40px 30px;align-items:center;justify-items:center;
}
.logo-grid img{
  max-width:100%;max-height:56px;width:auto;height:auto;display:block;
}
.logo-grid-empty{
  grid-column:1 / -1;margin:0;padding:26px;text-align:center;
  background:var(--white);border:1px dashed var(--field);border-radius:var(--r-md);
  color:var(--muted);font-size:16px;
}

/* ---------- form ---------- */
.register{background:var(--surface-2)}
.formwrap{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:44px;max-width:860px;margin:0 auto;
}
fieldset{border:0;padding:0;margin:0 0 34px}
legend{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);padding:0;margin-bottom:18px;
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1 / -1}
label{font-size:14px;font-weight:700;margin-bottom:7px}
.hint{font-size:13px;color:var(--muted);font-weight:400;margin-top:6px}
/* The school hints get a callout treatment. Marketing's concern: a student who
   scrolls a long list without finding their school may assume they are not
   eligible. This has to be impossible to skim past. */
#school-hint,
#private-school-hint{
  font-size:15px;line-height:1.5;color:var(--blue-ink);font-weight:500;
  background:var(--orange-pale);border-left:4px solid var(--orange);
  border-radius:var(--r-sm);padding:11px 14px;margin-top:9px;
}
#school-hint strong,
#private-school-hint strong{color:var(--blue);font-weight:700}
/* Native optgroup labels are italic by default; keep them plain and quiet so
   they read as a divider rather than competing with the options. */
select optgroup{font-style:normal;font-weight:700;color:var(--muted)}
select optgroup option{font-weight:400;color:var(--blue-ink)}
/* public / private path chooser */
.path-choice{
  border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--orange-pale);padding:18px 20px 8px;margin:0;
}
.path-legend{
  font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--blue-ink);margin:0;padding:0 0 12px;float:left;width:100%;
}
.radio-row{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:11px 14px;margin-bottom:10px;border-radius:var(--r-sm);
  background:var(--white);border:1px solid var(--rule);
  font-size:16px;font-weight:600;
}
.radio-row:hover{border-color:var(--blue)}
.radio-row input[type="radio"]{
  width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--blue);cursor:pointer;
}
.radio-row:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* The border was #C3BCAC, a warm beige left over from the cream palette. It
   measured 1.89:1 on white - well under the 3.0 an input boundary requires, and
   visibly out of family now that every other neutral is blue cast. */
input,select{
  font-family:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--field);
  border-radius:var(--r-sm);background:var(--white);color:var(--blue-ink);width:100%;
}
input:hover,select:hover{border-color:var(--blue)}
/* Disabled controls are exempt from contrast rules, but these were warm greys
   from the old palette, so they are re-cast to match rather than to comply. */
select:disabled{background:var(--surface-2);color:#7C86A8;cursor:not-allowed;border-color:var(--rule)}
select:disabled:hover{border-color:var(--rule)}
/* .field is display:flex, which would beat the default [hidden] rule */
.field[hidden]{display:none}
/* Small bold text, so it needs the darkened red rather than the raw token. */
.req{color:var(--ember-ink);font-weight:700}
.form-foot{border-top:1px solid var(--rule);padding-top:26px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.form-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.form-foot .btn-primary{background:var(--blue-bright);color:var(--white)}
.form-foot .btn-primary:hover{background:var(--blue-deep)}
.form-foot .btn-primary:disabled{background:#8A90AB;cursor:not-allowed}
.form-foot small{color:var(--muted);font-size:14px;max-width:42ch}

/* Error banner. Sits at the TOP of the form, not by the submit button - the
   message belongs next to the fields it describes, not next to the action. */
.form-error{
  background:#FFECE5;border:1px solid #FFC3B2;border-left:4px solid var(--ember);
  color:#7A1C15;padding:14px 16px;border-radius:var(--r-md);margin:0 0 28px;
  font-size:15px;font-weight:600;width:100%;
}
.form-error[hidden]{display:none}
.form-error:focus{outline:3px solid var(--ember);outline-offset:2px}

/* Marks the field the banner is talking about, so an error on a field further
   down the form is still findable once you have scrolled to the message. */
input.has-error,
select.has-error{
  border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(241,20,12,.16);
}

/* confirmation panel */
.confirmation{text-align:center}
.confirmation[hidden]{display:none}
.confirm-badge{
  width:68px;height:68px;border-radius:50%;background:#D1E1CC;color:var(--leaf);
  display:grid;place-items:center;font-size:34px;font-weight:700;margin:0 auto 22px;
}
.confirmation h3{font-family:var(--display);font-size:30px;font-weight:700;margin-bottom:12px;color:var(--blue)}
.confirmation p{color:var(--muted);max-width:52ch;margin:0 auto 18px}
/* 'Don't see your welcome email?' - a second, quieter heading inside the
   confirmation panel, added with the ED's revised copy. */
.confirm-sub{font-size:17px;font-weight:700;color:var(--blue);margin:26px 0 8px}
.ref-box{
  background:var(--surface);border:2px dashed var(--orange);border-radius:var(--r-md);
  padding:24px;margin:26px auto 18px;max-width:420px;
}
.ref-box span{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.ref-box strong{font-family:var(--display);font-size:32px;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:var(--blue-ink)}

/* ---------- faq ---------- */
/* Contact sits between Partners and the FAQ. Orange ground so it reads as a
   deliberate stop rather than another white band. */
.contact{background:var(--orange)}
.contact-inner{max-width:64ch}
.contact h2{color:var(--blue-night);margin:0 0 10px;font-size:clamp(24px,3.4vw,34px)}
.contact p{color:var(--blue-ink);font-size:18px;margin:0 0 22px}
/* Scoped to the paragraph on purpose. This was '.contact a', which is (0,1,1) and
   therefore outranked .btn-primary at (0,1,0) - so it captured the 'Contact us'
   button too and repainted its label blue-night on blue-bright at 2.26:1 - a hard
   AA failure for a 16px label, which needs 4.5 (spotted by Jed Segovia, 11 Aug
   2026). The button was always meant to be white; nothing here needed an
   override, just a narrower selector. White on blue-bright is 8.39:1.
   The email link in the paragraph still wants blue-night: it sits directly on the
   orange, where it measures 7.63:1. */
.contact p a{color:var(--blue-night)}
.faq{background:var(--white);border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule);padding:22px 0}
summary{font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--blue-ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;font-weight:400;color:var(--blue);line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin:14px 0 0;color:var(--muted);max-width:72ch}

/* ---------- footer ---------- */
footer{background:var(--blue-night);color:#A9B3DC;padding:64px 0 40px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer h4{color:var(--orange);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{text-decoration:none}
footer a:hover{color:var(--orange)}
.foot-brand img{height:38px;width:auto;margin-bottom:18px}
.foot-brand p{max-width:38ch;color:#8B95C4;font-size:14px}
.legal{border-top:1px solid rgba(255,255,255,.16);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#7E88B8}

/* ---------- mockup banner ---------- */
/* Currently unused - the banner was removed from the pages - but kept compliant
   so restoring it cannot reintroduce a failure. White 13px bold needs 4.5, and
   the raw --ember only gives 4.33. */
.mockup-flag{
  background:var(--ember-ink);color:#fff;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;
}

@media (max-width:1000px){
  /* four across gets cramped before the general tablet breakpoint */
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .grid-shows{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  /* The utility bar is now hidden at every width, so the rule that used to live
     here is redundant and has been removed rather than left to rot.
     The masthead is the top of the page as a result. .wrap carries no vertical
     padding, and once the brand and nav wrap onto separate lines the min-height
     stops applying - so the logo ended up flush against the top of the
     viewport. Give it real breathing room. */
  .masthead .wrap{padding-top:22px;padding-bottom:18px;gap:18px;min-height:0}
  section{padding:56px 0}
  .hero .wrap{padding:56px 24px 62px}
  .stats .wrap{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.25)}
  .stat:first-child{border-top:0}
  .grid-shows,.steps,.field-grid,.foot-grid{grid-template-columns:1fr}
  .formwrap{padding:28px 22px}
  /* 32px of side padding on a 375px screen leaves too little measure. */
  .panel{padding:22px 20px}
  .mainnav{gap:16px;font-size:14px}
}