/* ==========================================================================
   Life Shop Foundation — site styles
   One file. No build step. Edit directly.

   Colours and fonts are taken from the old Squarespace site.
   To change a colour site-wide, edit the variables in :root below.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     BRAND COLOURS — sampled directly from the Life Shop logo.
     These four are the logo, exactly. Don't change them unless the logo
     changes too.
     --------------------------------------------------------------------- */
  --coral:       #F96647;  /* logo — inner swirl */
  --orange:      #FF9D52;  /* logo — mid swirl   */
  --sun:         #F0C259;  /* logo — outer swirl */
  --teal:        #00A08F;  /* logo — ring        */

  /* ---------------------------------------------------------------------
     UI COLOURS — derived from the four above so the site matches the logo.
     --------------------------------------------------------------------- */
  --gold:        #F0C259;  /* buttons — the logo's gold. 10.4:1 with --ink */
  --rust:        #AD2306;  /* links, eyebrows — the logo's coral, darkened
                              to reach 5.8:1 on --bone (WCAG AA) */
  --teal-deep:   #007064;  /* teal dark enough to use as text (5.0:1) */

  /* The old beige page background dated the site — it was the Squarespace
     default. The page is now white, with --paper as the only tint, used for
     alternating sections and for cards that need to separate from white. */
  --bone:        #FFFFFF;  /* page background */
  --paper:       #FAFAFB;  /* barely-there tint — inset cards, FAQ boxes only */
  --ink:         #111111;  /* body text and the primary button */
  --ink-soft:    #52525B;  /* secondary text — neutral, not warm grey */
  --white:       #FFFFFF;
  --black:       #000000;

  --highlight:   #F5C518;  /* the marker-pen yellow behind key words */

  --line:        #E7E7EA;  /* hairline borders on white — neutral */

  /* --- Type --- */
  /* Archivo Black carries the big headlines — it only ships one weight (400),
     so never set font-weight on anything using --font-display or the browser
     will fake a bolder version and it will look smeared.
     Space Grotesk handles smaller headings, where Archivo Black is too dense
     to read. Outfit is the body face. All three are free on Google Fonts. */
  --font-display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:   "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Layout --- */
  --wrap: 1180px;
  --pad: 5vw;
  --radius: 4px;
  --radius-photo: 8px;    /* squarer than before — blocks, not stickers */
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.09rem;
  line-height: 1.68;   /* sans needs less leading than the old serif did */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;    /* Space Grotesk needs weight to land; 500 read timid */
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* h1 and h2 are the display sizes and use Archivo Black. No font-weight here —
   see the note in :root. h1 is uppercase for impact; h2 is not, because
   section headings on this site are full sentences and uppercase sentences
   are genuinely harder to read, especially for older visitors. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h1 { text-transform: uppercase; letter-spacing: -0.025em; }

h1 { font-size: clamp(2rem, 6.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--coral); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }

/* Screen-reader-only text */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: .75rem 1.25rem; font-family: var(--font-ui);
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow { max-width: 760px; }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section.tight { padding-block: clamp(2rem, 5vw, 3rem); }

/* Full-width bands are pure white. They used to carry a tint, which is what
   read as "cream" across large areas. Separation now comes from a hairline
   rule instead of a fill. */
.section--white {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--ink   { background: var(--ink); color: var(--bone); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink a { color: var(--gold); }

/* ===================================================== black / gold system ==
   The campaign page set the direction: pages open on black, run white through
   the middle, and close on gold. Three rules make that work everywhere.

   IMPORTANT — gold is a BACKGROUND colour, never a text colour on white.
   #F5C518 on white is about 1.7:1 contrast, which is unreadable. On black it
   is 11:1, and black on gold is 12:1. So gold text only ever appears on ink,
   and gold fills only ever carry ink text.
   ========================================================================= */

/* 1. PAGE HERO — the black band every page opens with. */
.page-hero {
  background: var(--ink);
  color: rgba(255, 255, 255, .88);
  padding-block: clamp(2.25rem, 6vw, 3.75rem);
}
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--white); }
.page-hero .eyebrow { color: var(--sun); }
.page-hero .lede { color: rgba(255, 255, 255, .86); }
.page-hero a { color: var(--gold); }
.page-hero a:hover { color: var(--sun); }
.page-hero strong { color: var(--white); }
.page-hero .btn--primary { background: var(--highlight); color: var(--ink); }
.page-hero .btn--primary:hover { background: #E0B412; color: var(--ink); }
.page-hero .btn--ghost { color: var(--bone); border-color: var(--bone); }
.page-hero .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.page-hero .btn--dark { background: var(--white); color: var(--ink); }
.page-hero .small-note { color: rgba(255, 255, 255, .62); }
/* Cards and notices sitting on the black band lift one step, not to white. */
.page-hero .card,
.page-hero .notice {
  background: #1D1D1D;
  border-color: #333333;
  color: rgba(255, 255, 255, .88);
}
.page-hero .card h3 { color: var(--white); }
.page-hero .notice { border-left-color: var(--highlight); }
.page-hero .topic-grid li { background: #1D1D1D; border-color: #333333; color: var(--white); }
.page-hero .tick-list li::before { background: var(--highlight); }
/* The food callout is already black, so on a black hero it needs an outline
   to stay a distinct object rather than dissolving into the background. */
.page-hero .food-flag { background: #1D1D1D; border: 1px solid #3A3A3A; }
/* The "buy in person" panel is built for white — invert it on the black hero. */
.page-hero .pickup { background: #1D1D1D; border-color: #333333; }
.page-hero .pickup__body { color: rgba(255, 255, 255, .88); }
.page-hero .pickup h2 { color: var(--white); }
.page-hero .pickup__address { color: var(--highlight); border-left-color: var(--highlight); }

/* 2. GOLD BAND — the closing call to action. */
.section--gold { background: var(--highlight); color: var(--ink); }
.section--gold h1, .section--gold h2, .section--gold h3 { color: var(--ink); }
.section--gold .eyebrow { color: #7A5E00; }
.section--gold .lede { color: #3A2E00; }
.section--gold a { color: var(--ink); text-decoration-thickness: 2px; }
.section--gold .btn--primary { background: var(--ink); color: var(--white); }
.section--gold .btn--primary:hover { background: #333; color: var(--white); }
.section--gold .btn--ghost { color: var(--ink); border-color: var(--ink); }
.section--gold .btn--ghost:hover { background: var(--ink); color: var(--highlight); }

/* 3. CHIPS — the pill row from the campaign page, reusable anywhere. */
.chip-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

.lede {
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 .9rem;
}

/* -------------------------------------------------------------- header -- */
.site-header {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
/* A 3px strip of the logo's four colours, in logo order, under the header. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg,
    var(--teal)   0%,   var(--teal)   25%,
    var(--sun)    25%,  var(--sun)    50%,
    var(--orange) 50%,  var(--orange) 75%,
    var(--coral)  75%,  var(--coral)  100%);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  min-height: 74px;
  padding-block: .5rem;
}
/* Register button + menu button share the right-hand end of the header, so
   the register link stays visible on phones instead of hiding inside the
   collapsed menu. */
.site-header__actions {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; flex: 0 0 auto;
}
@media (min-width: 860px) { .site-header__actions { margin-left: 0; } }

.btn--register {
  display: inline-flex; align-items: center;
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .02em;
  padding: .6rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
/* Members-only app link. Deliberately quieter than the gold Register button:
   Register is a one-time action for newcomers, this is the repeat visit for
   teens who are already in. Label shortens to "App" on narrow phones so both
   buttons and the menu toggle still fit on one line. */
.btn--app {
  display: inline-flex; align-items: center;
  background: var(--white); color: var(--ink);
  font-family: var(--font-ui); font-size: .88rem; font-weight: 600;
  letter-spacing: .02em; padding: .48rem .85rem;
  border: 2px solid var(--ink); border-radius: 999px;
  text-decoration: none; white-space: nowrap;
}
.btn--app:hover, .btn--app:focus-visible { background: var(--ink); color: var(--white); }
.btn--app__short { display: none; }
@media (max-width: 900px) {
  .btn--app__long { display: none; }
  .btn--app__short { display: inline; }
}
/* Narrow phones: shed every non-essential pixel so the lockup keeps its full
   width instead of being squashed. The menu button drops to bars only. */
@media (max-width: 560px) {
  .site-header__logo img { height: 38px; }
  .site-header__actions { gap: .4rem; }
  .btn--app, .btn--register { font-size: .78rem; padding: .44rem .72rem; border-width: 2px; }
  .nav-toggle { padding: .5rem .6rem; gap: 0; }
  .nav-toggle__label { display: none; }
}
@media (max-width: 400px) {
  .site-header__logo img { height: 34px; }
  .btn--app, .btn--register { font-size: .74rem; padding: .4rem .62rem; }
}

.btn--register:hover, .btn--register:focus-visible {
  background: var(--ink); color: var(--highlight);
}
/* Logo size. This one value controls it — the width follows automatically.
   Bumped up slightly at wider screens further down this file. */
/* The logo is a flex item next to the buttons. Without flex-shrink:0 the
   browser compresses it horizontally when the bar gets tight, which distorts
   the lockup. Keep the shrink off and let width follow height. */
.site-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.site-header__logo img { height: 46px; width: auto; max-width: none; object-fit: contain; }

/* Nav — hidden behind a button on phones, inline from 860px up */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.site-nav ul {
  list-style: none; margin: 0; padding: .5rem var(--pad) 1.25rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.site-nav a {
  display: block;
  font-family: var(--font-ui); font-size: 1.05rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--line);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--rust); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; position: static; box-shadow: none; border: 0; background: none; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 1.15rem; padding: 0; }
  .site-nav a { border: 0; padding: .35rem 0; font-size: .94rem; white-space: nowrap; }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--rust); }
  .site-header__logo img { height: 54px; }
}
@media (min-width: 1040px) {
  .site-nav ul { gap: 1.7rem; }
  .site-nav a { font-size: .98rem; }
  .site-header__logo img { height: 60px; }
}

/* Anchor targets must clear the sticky header when jumped to */
[id] { scroll-margin-top: 92px; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1.02rem; font-weight: 600; line-height: 1.2;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: #333; color: var(--white); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #333; color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-width: 2px; border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.section--ink .btn--primary,
.graffiti-band .btn--primary { background: var(--highlight); color: var(--ink); }
.section--ink .btn--primary:hover,
.graffiti-band .btn--primary:hover { background: #E0B412; color: var(--ink); }
.section--ink .btn--ghost { color: var(--bone); border-color: var(--bone); }
.section--ink .btn--ghost:hover { background: var(--bone); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ----------------------------------------------------------------- hero -- */
/* Media and text are stacked in the same grid cell, so whichever is taller
   sets the height. Long headlines can never overflow the image on a phone. */
/* Shorter than it was, so the hero and the start of the next section both sit
   in the first screen on a laptop. */
.hero {
  display: grid;
  background: var(--ink);
  min-height: clamp(360px, 54vh, 540px);
}
.hero__media,
.hero__body { grid-area: 1 / 1; }
.hero__media { overflow: hidden; position: relative; }
/* USE A LANDSCAPE PHOTO HERE. A portrait one gets scaled to fill the width of
   a wide screen, which crops away everything except a narrow horizontal band
   through the middle — usually the ceiling. object-position biases the crop
   slightly below centre, where people in a room photo normally are. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 54%;
  opacity: .78;
}
/* A scrim behind the text instead of dimming the whole photo. The image stays
   bright enough to see faces; the headline still gets its contrast. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(17,17,17,.62) 0%, rgba(17,17,17,.42) 45%, rgba(17,17,17,.72) 100%);
}
.hero__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  color: var(--white);
  padding: clamp(2rem, 6vw, 3.5rem) 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero__body h1 { color: var(--white); max-width: 16ch; margin-inline: auto; }
.hero__body p {
  color: rgba(255,255,255,.92);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  max-width: 46ch; margin-inline: auto;
}
.hero__body .btn-row { justify-content: center; }

/* Retro banner strip (uses the original site artwork) */
.retro-strip {
  height: clamp(70px, 12vw, 130px);
  background-image: url("../img/retro-wave.jpg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  background-color: var(--teal);
}

/* ----------------------------------------------------------------- grid -- */
.grid { display: grid; gap: clamp(1.5rem, 4vw, 2.6rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 940px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Text beside an image */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Top-aligned variant: use when the media column has something stacked under
   the image, so the photo starts level with the headline instead of floating
   to the vertical middle. */
.split--top { align-items: start; }
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}
/* Photos sit like pinned prints — rounded, slightly tilted, lightly shadowed.
   The tilt alternates direction so a page of them doesn't lean one way.
   Keep the angle under ~1.5deg; more than that and text alongside looks wonky. */
.split__media img {
  border-radius: var(--radius-photo);
  width: 100%;
}

.split__body { min-width: 0; }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: 0 10px 10px 0;
  padding: 1.2rem 1.35rem;
}
/* Cards in a row cycle through the logo colours, the same way the campaign
   page does. Purely decorative — nothing is encoded in the colour. */
.grid > .card:nth-child(3n+2) { border-left-color: var(--teal); }
.grid > .card:nth-child(3n+3) { border-left-color: var(--highlight); }
.grid--4 > .card:nth-child(4n+4) { border-left-color: var(--orange); }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--highlight); color: var(--ink);
  padding: .3rem .65rem;
  border-radius: 999px;
  margin-bottom: .7rem;
}

.section--ink .card,
.graffiti-band .card { background: #1D1D1D; border-color: #333333; color: rgba(255,255,255,.88); }
.section--ink .card h3, .graffiti-band .card h3 { color: var(--white); }

/* Simple list of activities with a coloured marker */
.tick-list { list-style: none; padding: 0; }
.tick-list li {
  position: relative; padding-left: 1.6rem; margin-bottom: .55rem;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--coral);
}
.tick-list--gold li::before { background: var(--gold); }
.tick-list--teal li::before { background: var(--teal); }
/* Two columns on wider screens, so a long list reads as a block not a ladder */
@media (min-width: 700px) {
  .tick-list--cols { columns: 2; column-gap: 2.2rem; }
  .tick-list--cols li { break-inside: avoid; }
}

/* --------------------------------------------------------------- photos -- */
/* Padding keeps the tilted corners and their shadows inside the viewport —
   without it the outer two photos cause a horizontal scrollbar. */
.photo-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  padding: 1rem clamp(10px, 2vw, 24px);
}
@media (min-width: 820px) { .photo-band { grid-template-columns: repeat(4, 1fr); } }
.photo-band img {
  width: 100%; height: clamp(150px, 22vw, 260px); object-fit: cover;
  border-radius: var(--radius-photo);
  box-shadow: 0 8px 20px rgba(17,17,17,.10);
}
/* Alternating tilt across the strip. The gap above is widened to 1rem so the
   corners never collide once rotated. */


figure { margin: 0; }
figcaption {
  font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft);
  margin-top: .6rem;
}

/* -------------------------------------------------------------- products -- */
.product { text-align: left; }
.product img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.product h3 { font-size: 1.05rem; margin: .75rem 0 .15rem; }
.product .price { font-family: var(--font-ui); font-weight: 600; color: var(--ink-soft); }

/* --------------------------------------------------------- small print -- */
/* There are no forms or input fields anywhere on this site.
   Everything routes to email. */
.small-note { font-family: var(--font-ui); font-size: .88rem; color: var(--ink-soft); margin-top: 1rem; }

/* ---------------------------------------------------------------- notice -- */
.notice {
  background: var(--paper);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-family: var(--font-ui); font-size: .95rem;
}
.notice strong { font-weight: 600; }

/* -------------------------------------------------------- calendar embed -- */
/* Google Calendar's iframe has a fixed aspect ratio that breaks on phones,
   so it's wrapped and forced to a responsive box. */
/* Near-full-screen calendar. Breaks out of the usual 1180px column and runs
   almost the height of the viewport, since the calendar is the whole point of
   the page. 78vh leaves the month grid readable without pushing the footer
   miles down; 560px stops it collapsing on short laptop screens. */
.calendar-full {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(10px, 2vw, 28px);
}
.calendar-embed {
  position: relative;
  border-radius: var(--radius-photo);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  height: clamp(560px, 78vh, 1000px);
  box-shadow: 0 10px 24px rgba(17,17,17,.09);
}
/* Phones can't usefully show a month grid at 78vh — give it more room and let
   the page scroll. */
@media (max-width: 640px) {
  .calendar-embed { height: 620px; }
}
.calendar-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ------------------------------------------------------- graffiti accents -- */
/* Texture pulled from the mural photos already in img/. Used sparingly —
   as a torn top edge on a section and behind a heading — not as wallpaper. */
.graffiti-band {
  position: relative;
  background-image: linear-gradient(rgba(17,17,17,.80), rgba(17,17,17,.88)),
                    url("../img/mural-go-do-it.jpg");
  background-size: cover;
  background-position: center;
  color: var(--bone);
}
.graffiti-band h2, .graffiti-band h3 { color: var(--white); }
.graffiti-band a { color: var(--gold); }

/* A hand-drawn-looking marker highlight behind a few words. */
.marker {
  background: var(--highlight);
  color: var(--ink);
  padding: 0 .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sticker: a small rotated tag that sits on the corner of a card or photo. */
.sticker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--coral); color: var(--white);
  padding: .3rem .6rem;
  border-radius: 4px;
  transform: rotate(-3deg);
}

/* ------------------------------------------------------------- quotes -- */
.quote-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo);
  padding: 1.6rem 1.5rem 1.3rem;
  margin: 0;
  box-shadow: 0 8px 20px rgba(17,17,17,.06);
}

.quote p {
  font-size: 1.12rem; line-height: 1.5; font-weight: 500;
  margin: 0 0 .9rem;
}
.quote footer {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--teal-deep);
}

/* --------------------------------------------------------- instagram -- */
.ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 720px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }
.ig-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-photo);
}

/* ============================================================== FLYER =====
   Campaign landing page (/open) only. Louder than the rest of the site on
   purpose — it has one job, which is to be read off a phone in about six
   seconds after someone scans a printed QR code.
   Scoped under body.flyer so none of it leaks into the main pages.
   ========================================================================= */
.flyer { background: var(--ink); color: var(--bone); }
/* The shared white header sits above the black hero. Give it a hard bottom
   edge so the two surfaces meet cleanly instead of looking like a gap. */
.flyer .site-header { border-bottom: 0; }

.flyer__hero {
  background: var(--ink);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.flyer__kicker {
  font-family: var(--font-ui);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sun);
  margin: .6rem 0 1.2rem;
}
/* The date is the single biggest thing on the page. */
.flyer__date {
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 13rem);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--highlight);
  margin: 0 0 .3em;
}
.flyer__date span {
  display: block;
  font-size: .26em;
  letter-spacing: .04em;
  color: var(--white);
  margin-bottom: .1em;
}
.flyer__title {
  font-size: clamp(2rem, 8vw, 4.5rem);
  color: var(--white);
  margin: 0 0 .4em;
}
.flyer__sub {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.5;
  max-width: 40ch;
  color: rgba(255,255,255,.86);
}
.flyer__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.chip {
  font-family: var(--font-ui);
  font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .5rem .9rem;
  border-radius: 999px;
  color: var(--ink);
}
.chip--yellow { background: var(--highlight); }
.chip--coral  { background: var(--coral); color: var(--white); }
.chip--teal   { background: var(--teal); color: var(--white); }

.flyer__when { background: var(--ink); padding-block: 0 clamp(2rem,5vw,3rem); }
.when-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .when-grid { grid-template-columns: 1fr 1fr; } }
.when-card { border-radius: 14px; padding: 1.6rem 1.5rem; }
.when-card--main { background: var(--highlight); color: var(--ink); }
.when-card--fri  { background: var(--coral); color: var(--white); }
.when-card__label {
  font-family: var(--font-ui);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  display: block; margin-bottom: .5rem;
}
.when-card__big {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: .95; letter-spacing: -.035em;
  margin: 0 0 .4rem;
}
.when-card__note { font-size: .98rem; line-height: 1.45; margin: 0; }

.flyer__what { background: var(--white); color: var(--ink); padding-block: clamp(2.5rem,6vw,4rem); }
.flyer__what h2 { color: var(--ink); }
.what-grid {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .what-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .what-grid { grid-template-columns: repeat(3,1fr); } }
.what-grid li {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; line-height: 1.3;
  background: var(--paper);
  border-left: 4px solid var(--coral);
  border-radius: 0 10px 10px 0;
  padding: .8rem 1rem;
  margin: 0;
}
.what-grid li:nth-child(3n+2) { border-left-color: var(--teal); }
.what-grid li:nth-child(3n+3) { border-left-color: var(--highlight); }
.flyer__more { margin-top: 1.6rem; font-family: var(--font-head); font-weight: 700; }

.flyer__where { background: var(--ink); padding-block: clamp(2.5rem,6vw,4rem); }
.flyer__where h2 { color: var(--white); }
.where-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .where-grid { grid-template-columns: 1.1fr 1fr; } }
.where-address {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  color: var(--highlight);
  margin: 1rem 0 1.2rem;
}
.where-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.where-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; aspect-ratio: 4/3; }

.flyer__cta { background: var(--highlight); color: var(--ink); padding-block: clamp(2.5rem,6vw,4rem); }
.flyer__cta h2 { color: var(--ink); }
.flyer__cta-date {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: -.03em;
  margin: 0 0 .3em;
  text-transform: uppercase;
}
.flyer__handle { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin-top: 1.2rem; }
.flyer__cta a, .flyer__handle a { color: var(--ink); }

.flyer__foot { background: var(--ink); color: rgba(255,255,255,.7); padding-block: 2.5rem; font-size: .9rem; }
.flyer__foot img { height: 54px; width: auto; margin: 0 auto 1rem; }
.flyer__foot a { color: var(--sun); }

/* --------------------------------------------------------- buy in person -- */
/* Store page. Buying in person is currently the only way to buy, so this is
   deliberately loud — coral edge, tinted panel, photo alongside. */
.pickup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--coral);
  border-radius: var(--radius-photo);
  overflow: hidden;
}
@media (min-width: 820px) {
  .pickup { grid-template-columns: 1.35fr 1fr; }
}
.pickup__body { padding: 1.6rem 1.8rem; }
.pickup__media { display: none; }
@media (min-width: 820px) {
  .pickup__media { display: block; }
  .pickup__media img { width: 100%; height: 100%; object-fit: cover; }
}
.pickup__address {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-style: normal;
  line-height: 1.45;
  margin: 1.1rem 0;
  padding-left: .9rem;
  border-left: 3px solid var(--highlight);
}
.pickup__landmark { font-size: .98rem; }

/* ------------------------------------------------------------ topic grid -- */
/* A sample of class names, three across. Compact on purpose — this is a
   teaser for the Classes page, not the catalog itself. */
.topic-grid {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
.topic-grid li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
}

/* ------------------------------------------------------------- the wall -- */
/* Collage gallery. CSS columns rather than grid, so photos of different
   heights pack together with no gaps and no JavaScript.
   Hovering lifts a photo above its neighbours and scales it up. */
.wall {
  columns: 2;
  column-gap: 10px;
  margin-top: 1.8rem;
}
@media (min-width: 700px)  { .wall { columns: 3; } }
@media (min-width: 1000px) { .wall { columns: 4; } }

.wall__item {
  display: block;
  break-inside: avoid;
  margin-bottom: 10px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  transform-origin: center center;
}
.wall__item img { width: 100%; display: block; }

/* Scale up on hover or keyboard focus. z-index has to be raised at the same
   time or neighbouring photos overlap the enlarged one. */
.wall__item:hover,
.wall__item:focus-visible {
  transform: scale(1.35);
  z-index: 20;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  outline: 3px solid var(--highlight);
  outline-offset: 0;
}
/* Photos at the outer edges scale inward so they don't run off the screen. */
.wall__item:nth-child(4n+1):hover { transform-origin: left center; }
.wall__item:nth-child(4n):hover   { transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  .wall__item { transition: none; }
  .wall__item:hover, .wall__item:focus-visible { transform: none; }
}

/* Phone-shot clips are portrait, so cap their height or they dominate the
   page. preload="none" in the markup keeps them off the initial page weight. */
.clip-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-top: 1.6rem;
}
@media (min-width: 700px) { .clip-grid { grid-template-columns: repeat(2, 1fr); } }
.clip { margin: 0; }
.clip video {
  width: 100%;
  max-height: 70vh;
  display: block;
  border-radius: var(--radius-photo);
  background: var(--ink);
}
.clip figcaption {
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--ink-soft);
  margin-top: .6rem;
}

/* ------------------------------------------------------------ reel cards -- */
/* Instagram reels shown as poster cards that open on Instagram, rather than
   true inline embeds. This keeps the site free of third-party scripts — see
   the note in gallery.html for the trade-off. */
.reel-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.6rem;
}
@media (min-width: 700px)  { .reel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .reel-grid { grid-template-columns: repeat(4, 1fr); } }

.reel {
  position: relative;
  display: block;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 9 / 16;
  text-decoration: none;
}
.reel img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .18s ease, transform .25s ease; }
.reel:hover img, .reel:focus-visible img { opacity: 1; transform: scale(1.04); }
/* play triangle, drawn in CSS so there's no icon file to load */
.reel::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 22px solid var(--white);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.reel__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .8rem .7rem;
  background: linear-gradient(to top, rgba(17,17,17,.9), rgba(17,17,17,0));
  color: var(--white);
  font-family: var(--font-ui);
  font-size: .82rem; font-weight: 500;
  line-height: 1.3;
}

/* ------------------------------------------------------- gallery extras -- */
/* Jump links under the gallery headline. */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.jump a {
  font-family: var(--font-ui);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .04em;
  padding: .5rem .9rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
}
.jump a:hover, .jump a:focus-visible {
  background: var(--highlight); color: var(--ink); border-color: var(--highlight);
}
/* Sticky header would otherwise hide the heading you just jumped to. */
[id="people"], [id="open-shop"], [id="classes"],
[id="events"], [id="cars"], [id="build"], [id="clips"] { scroll-margin-top: 80px; }

.sec-count {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-left: .5rem;
  vertical-align: middle;
}
.section--white .sec-count {
  background: var(--paper); border-color: var(--line); color: var(--ink-soft);
}

/* Caption that fades in over a photo while it is enlarged. */
.wall__item::after {
  content: attr(data-caption);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .6rem .5rem;
  background: linear-gradient(to top, rgba(17,17,17,.92), rgba(17,17,17,0));
  color: var(--white);
  font-family: var(--font-ui);
  font-size: .64rem; line-height: 1.35;
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
.wall__item:hover::after, .wall__item:focus-visible::after { opacity: 1; }

/* ----------------------------------------------------------- lightbox -- */
.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,10,10,.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 3.5rem 1rem 4.5rem;
}
.lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: 1.1rem;
  text-align: center; color: rgba(255,255,255,.82);
  font-family: var(--font-ui); font-size: .86rem;
  padding-inline: 1.5rem;
}
.lb__btn {
  position: absolute;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb__btn:hover { background: var(--highlight); color: var(--ink); border-color: var(--highlight); }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lb__prev { left: .5rem; } .lb__next { right: .5rem; }
}

.edit-video {
  width: 100%;
  display: block;
  border-radius: var(--radius-photo);
  background: var(--ink);
}

/* --------------------------------------------------------- food callout -- */
/* Sits at the top of the Classes page. Deliberately the loudest thing on the
   page — free food is the single strongest reason a teen turns up. */
.food-flag {
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--radius-photo);
  padding: 1.4rem 1.5rem;
  margin: 1.1rem 0 0;
}
/* Cancel the photo's tilt for the block sitting under it — a tilted panel of
   text is hard to read, and two tilts stacked looks like a mistake. */
.split__media .food-flag { transform: none; }
.food-flag .sticker { background: var(--gold); color: var(--ink); }
.food-flag p {
  margin: .85rem 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.food-flag strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--white);
  margin-bottom: .5rem;
}
.food-flag em {
  font-style: normal;
  color: var(--gold);
}

/* ------------------------------------------------------- curriculum tracks -- */
/* The Classes page: five tracks, each a collapsible <details>. Works with no
   JavaScript. Each track sets --track on itself and everything inside picks
   up that colour. */
.track {
  --track: var(--coral);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--track);
  border-radius: var(--radius-photo);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.track--core     { --track: #F96647; }
.track--job      { --track: #00A08F; }
.track--college  { --track: #E0A72F; }
.track--business { --track: #1F7A3D; }
.track--electives{ --track: #7B4FC9; }

.track > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 3.2rem 1.4rem 1.5rem;
  position: relative;
  font-family: var(--font-head);
}
.track > summary::-webkit-details-marker { display: none; }
.track > summary:hover { background: #FAFAFB; }
.track > summary:focus-visible { outline: 3px solid var(--track); outline-offset: -3px; }

.track__name {
  display: block;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.track__blurb {
  display: block;
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: .3rem;
  max-width: 60ch;
}
/* The +/– affordance. Rotates to an × when the track is open. */
.track > summary::after {
  content: "+";
  position: absolute; right: 1.4rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 1.9rem; font-weight: 400; line-height: 1;
  color: var(--track);
  transition: transform .15s ease;
}
.track[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.track[open] > summary { border-bottom: 1px solid var(--line); }

.track__body { padding: .4rem 1.5rem 1.8rem; }

.class-group { margin-top: 1.8rem; }
.class-group:first-child { margin-top: 1.2rem; }
.class-group > h3 {
  font-family: var(--font-ui);
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--track);
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

.class-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 760px)  { .class-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .class-list { grid-template-columns: repeat(3, 1fr); } }

.class-list li {
  background: var(--paper);
  border-radius: 12px;
  padding: .95rem 1.1rem;
}
.class-list b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.02rem; font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.class-list span {
  display: block;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Capstones are the payoff at the end of a track — give them the accent. */
.class-list li.capstone {
  background: var(--track);
  color: var(--white);
}
.class-list li.capstone b,
.class-list li.capstone span { color: var(--white); }
.class-list li.capstone b::before {
  content: "\2605\00a0";  /* filled star */
}

/* ------------------------------------------------------------------- FAQ -- */
/* Tighter than before — the gap between boxes was doing nothing but pushing
   the list down the page. The tracks on the Classes page set their own
   spacing, so they're excluded. */
details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  margin-bottom: .35rem;
}
details[open] { border-color: var(--rust); }
summary {
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 600;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-ui); font-size: 1.5rem; color: var(--rust); line-height: 1; }
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { margin-top: .9rem; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.80);
  font-size: .96rem;
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}
.site-footer a { color: var(--bone); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer h3 {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-logo { height: 60px; width: auto; margin-bottom: 1rem; }
.footer-bottom {
  border-top: 1px solid #333;
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .86rem; color: rgba(255,255,255,.58);
}
.footer-bottom p { margin-bottom: .5rem; }

address { font-style: normal; }

/* --------------------------------------------------------------- utility -- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.15rem; }

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

/* Print: keep it legible if someone prints the waiver rules */
@media print {
  .site-header, .site-footer, .hero__media, .btn-row, .retro-strip, .nav-toggle { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff; min-height: 0; }
  .hero__body { color: #000; padding: 0; }
  .hero__body h1, .hero__body p { color: #000; }
  .section--ink { background: #fff; color: #000; }
  .section--ink h2, .section--ink h3 { color: #000; }
  .card, details { border: 1px solid #999; break-inside: avoid; }
  a { color: #000; }
}

/* =========================================================================
   BOYS & GIRLS CLUB CO-BRANDING
   A slim Club-blue bar above the header on every page, and the Club's mark
   beside the Life Shop mark in the footer. The blue is sampled from the
   Boys & Girls Clubs logo (#3C78B4) and darkened to #2F6398 so white text
   on it clears 4.5:1.
   ========================================================================= */
:root { --club-blue: #2F6398; }

.club-bar {
  background: var(--club-blue);
  color: #fff;
}
.club-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  padding-block: .5rem;
  font-size: .92rem;
  line-height: 1.35;
  text-align: center;
}
.club-bar img { height: 24px; width: auto; flex: none; }
.club-bar strong { font-weight: 700; }
.club-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.club-bar a:hover { color: var(--sun); }
.club-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 560px) {
  .club-bar__inner { font-size: .82rem; gap: .3rem .55rem; padding-block: .45rem; }
  .club-bar img { height: 20px; }
}

/* ---- footer: the two marks side by side ---- */
.footer-brands {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.footer-brands .footer-logo { margin-bottom: 0; }
.footer-brands__x {
  width: 1px;
  align-self: stretch;
  min-height: 44px;
  background: rgba(255,255,255,.28);
  flex: none;
}
.footer-logo--club { height: 46px; }

@media print {
  .club-bar { display: none; }
}
.flyer__brands { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
.flyer__brands img { margin: 0 0 1rem; }
.flyer__brands--club { height: 44px !important; }