/* ==========================================================================
   WWW WASHME TV — shared responsive layer
   --------------------------------------------------------------------------
   Loaded after each page's own <style> block so it can adapt the existing
   design for phones, tablets and large desktops without duplicating it.
   Rules are grouped by concern; page-specific selectors are named in
   comments so it stays obvious which page a block belongs to.

   The chatbot widget ships its own responsive rules, so sizing rules here
   skip anything matching [class*="washme-chat"].

   Breakpoints
     <= 400px   small phones (Galaxy Fold, older SE)
     <= 640px   phones
     <= 860px   large phones / small tablets in portrait
     <= 1023px  tablets — phone layouts for the bar and panels end here
                (the menu button itself is now used at every width)
     >= 1600px  large desktops
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

html {
  /* Stop iOS/Android from inflating text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Long emails, URLs and EINs must not push the layout sideways */
  overflow-wrap: break-word;
}

/* Consistent, comfortable focus ring for keyboard and switch-control users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f0d080;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Media and embeds — never wider than their column
   -------------------------------------------------------------------------- */

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
svg,
video {
  height: auto; /* honours the width/height attributes without distorting */
}

iframe {
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Touch targets and typing
   -------------------------------------------------------------------------- */

a,
button,
[role="button"],
input,
select,
textarea,
label {
  /* Removes the 300ms tap delay without disabling pinch-zoom */
  touch-action: manipulation;
}

button,
[type="button"],
[type="submit"],
[role="button"] {
  -webkit-tap-highlight-color: rgba(201, 168, 76, 0.22);
}

@media (max-width: 1023px) {
  /* Anything under 16px makes iOS Safari zoom in when the field is focused,
     which then leaves the page scrolled sideways. Force the safe minimum. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Fingers need roughly 44px; several controls ship 0.4–0.7rem padding */
  input:not([type="checkbox"]):not([type="radio"]):not([class*="washme-chat"]),
  select:not([class*="washme-chat"]),
  button:not([class*="washme-chat"]),
  [type="submit"],
  .btn,
  .read-btn,
  .module-btn,
  .btn-gold {
    min-height: 44px;
  }

  .btn,
  .read-btn,
  .module-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  textarea:not([class*="washme-chat"]):not(.answer-box) {
    min-height: 96px;
  }
}

/* --------------------------------------------------------------------------
   4. Grid safety
   Every card grid on the site uses `minmax(<fixed>, 1fr)`. Below roughly
   360px the fixed floor is wider than the available column and the page
   scrolls sideways. `min(100%, …)` keeps the intent and removes the overflow.
   -------------------------------------------------------------------------- */

/* index.html */
.pg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); }
.rs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.sg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

/* about.html */
.team-grid   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.values-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* donate.html */
.is-grid  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.amt-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

/* comic.html */
.issue-grid   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lessons-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* classroom.html */
.class-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* food-truck-workbook.html, promise-to-prosper.html */
.module-grid    { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.resources-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Two-column prose blocks on the course pages */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 860px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Worksheet tables have up to six columns — let them scroll horizontally
   instead of forcing the whole page to (food-truck-workbook.html) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 1rem 0;
}

.table-scroll .wb-table {
  margin: 0;
  min-width: 34rem;
}

/* --------------------------------------------------------------------------
   5. Navigation — gold theme (index, about, donate, partners)
   -------------------------------------------------------------------------- */

/* Comfortable, obviously-tappable menu button. The page ships a 24x2px bar
   stack with 5px margins inside 4px of padding — roughly 32x44 of hit area.
   Laying the bars out with flex + gap makes the box a predictable 46px. */
.hbg {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border-radius: 8px;
}

.hbg span {
  width: 26px;
  margin: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Bars fold into an X while the panel is open */
html.nav-open .hbg span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .hbg span:nth-child(2) { opacity: 0; }
html.nav-open .hbg span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The panel sits flush under the bar. --nav-h is measured at runtime, so a
   wrapped brand line or a larger system font can't leave a gap or an
   overlap the way the previous hard-coded 75px offset could. */
.mm {
  top: var(--nav-h, 76px);
  max-height: calc(100vh - var(--nav-h, 76px));
  max-height: calc(100dvh - var(--nav-h, 76px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 20px;
}

.mm a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 2px;
}

.mm a.sub {
  min-height: 44px;
  padding-left: 22px;
}

.mm a.cta {
  display: flex;
  justify-content: center;
  min-height: 50px;
  margin-top: 14px;
}

/* The bar is collapsed at every width, on every page: it carries the brand
   lockup and the menu button, and the panel owns the links.

   The width-dependent split it replaces never had a good answer. Up to nine
   uppercase, letter-spaced links ran out of room well before the old 860px
   hamburger breakpoint and stayed cramped through the iPad-landscape band
   above it (section 17 used to tighten them there). One menu at every width
   is the same navigation, in the same place, on a phone and a desktop.

   These two rules stay unconditional, so the bar is already collapsed in the
   first paint — the home page has worked this way at every width for a while,
   and a bar that swaps layouts once a deferred script runs would be worse
   than the no-JS fallback that would buy. These pages already needed
   JavaScript to open the panel below 861px.

   :not(.nav-links) keeps these off the course-theme bars in section 6, whose
   list must stay visible when JavaScript never runs. */
nav ul:not(.nav-links) { display: none; }
.hbg { display: flex; }

@media (min-width: 1024px) {
  /* The panel is the only route to the links, so it never retires — but a
     full-bleed panel across a desktop viewport reads as a broken layout.
     Anchor it under the button instead, matching the bar's 36px gutter. */
  .mm {
    left: auto;
    right: 36px;
    width: min(330px, calc(100vw - 72px));
    border: 1px solid var(--gd, #8b6914);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.6);
  }
}

/* Keep the brand lockup from crowding the menu button on narrow phones */
@media (max-width: 480px) {
  .ln { gap: 10px; }
  .ln img { width: 42px; height: 42px; }
  .bn { font-size: 0.72rem; letter-spacing: 1px; }
}

@media (max-width: 360px) {
  .bn { display: none; }
}

/* --------------------------------------------------------------------------
   6. Navigation — course theme
   (comic, classroom, classroom-live, food-truck-workbook,
   promise-to-prosper)
   These bars had no mobile treatment at all: eight to eleven links simply
   wrapped into a block of text that filled the screen. mobile-nav.js adds a
   menu button and sets `js-nav` on <html>, so without JavaScript the old
   wrapping list still renders rather than an unreachable menu.

   That gate is why this section reads differently from section 5: the button
   these bars need does not exist in the markup, so the collapse has to wait
   for the script that injects it.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold, #c9a84c);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapsed at every width, like the gold-theme bar in section 5 */
html.js-nav .nav-toggle { display: flex; }

html.js-nav nav .nav-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  padding: 6px 20px 18px;
  /* Both course themes give <nav> an opaque colour, so inheriting it keeps
     the dropdown identical to the bar it hangs from on every page */
  background-color: inherit;
  border-bottom: 2px solid var(--gold, #c9a84c);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  max-height: calc(100vh - var(--nav-h, 64px));
  max-height: calc(100dvh - var(--nav-h, 64px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html.js-nav nav.nav-open .nav-links { display: flex; }

html.js-nav nav .nav-links li { width: 100%; list-style: none; }

html.js-nav nav .nav-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 2px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.14);
}

html.js-nav nav .nav-links a.nav-cta {
  justify-content: center;
  margin-top: 12px;
  border-bottom: 0;
}

/* Anchored under the button on a desktop, for the same reason as .mm above.
   These bars keep their own 2rem gutter at this width. */
@media (min-width: 1024px) {
  html.js-nav nav .nav-links {
    left: auto;
    right: 2rem;
    width: min(330px, calc(100vw - 4rem));
    border-left: 1px solid var(--gold, #c9a84c);
    border-right: 1px solid var(--gold, #c9a84c);
    border-radius: 0 0 10px 10px;
  }
}

@media (max-width: 1023px) {
  /* The course pages stack the whole bar vertically under 600px; with a menu
     button the single row is the right layout at every width. */
  html.js-nav nav {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding-inline: 1.1rem;
  }

  html.js-nav .nav-logo .brand { font-size: 1rem; letter-spacing: 1px; }
}

@media (max-width: 420px) {
  html.js-nav .nav-logo .brand { font-size: 0.82rem; }
  html.js-nav .nav-logo { gap: 0.45rem; }
}

/* --------------------------------------------------------------------------
   6b. Floating widgets versus the open nav panel
   The chatbot launcher ("Ask the Business Guide", bottom-right, z-index
   2147483000) and the music player (bottom-left, 2147482900) both sit far
   above the nav bar (1000) and its panel (999). The panel is the only route
   to the links now, so it is tall — thirteen 48px rows on the home page —
   and it grows until it hits the bottom of the viewport on any window
   shorter than roughly 760px. That put the gold launcher pill directly on
   top of the panel's last links, and on the full-bleed panel below 1024px
   the music pill landed on them from the other side.

   Both widgets are decorations on top of the page rather than part of it,
   so the menu wins: while the panel is open they fade out and stop taking
   pointer events, then come straight back when it closes. mobile-nav.js
   sets .nav-open on <html> for both bar families, so this covers every page
   that ships either one.
   -------------------------------------------------------------------------- */

.washme-chat,
.washme-music {
  transition: opacity 160ms ease, visibility 160ms ease;
}

html.nav-open .washme-chat,
html.nav-open .washme-music {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Section rhythm on small screens
   86px of vertical padding is right on a desktop and wasteful on a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  section { padding: 54px 18px; }

  /* id-level padding on these sections has to be named explicitly */
  #stats,
  #impact-stats { padding: 46px 18px; }
  #why { padding: 58px 18px; }
  #tax { padding: 44px 18px; }
  #donate-strip { padding: 58px 18px; }

  footer { padding: 32px 18px; }
  .fls { gap: 14px 18px; }
  .fls a { display: inline-flex; align-items: center; min-height: 32px; }
}

@media (max-width: 400px) {
  section { padding: 46px 14px; }
  #stats,
  #impact-stats,
  #why,
  #tax,
  #donate-strip { padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   8. index.html
   -------------------------------------------------------------------------- */

/* The application form is cramped as a 1fr/1.2fr split on a tablet */
@media (max-width: 1000px) {
  .aw { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #hero {
    /* svh tracks the visible area, so the hero isn't cropped by the
       collapsing browser toolbar on iOS and Android */
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-h, 76px) + 26px);
    padding-bottom: 54px;
  }

  .hl {
    width: 132px;
    height: 132px;
    margin-bottom: 20px;
  }

  .ht { font-size: 0.74rem; letter-spacing: 2.5px; }
  .hs { font-size: 0.98rem; line-height: 1.8; margin-bottom: 28px; }

  /* Four stacked calls to action read better full width */
  .btns { gap: 12px; width: 100%; max-width: 360px; margin-inline: auto; }
  .btns .bp,
  .btns .bo,
  .btns .bd { flex: 1 1 100%; text-align: center; padding: 15px 18px; }

  .af { padding: 22px 20px; font-size: 1rem; }
  .ai,
  .af2 { padding: 24px 20px; }
  .sn { font-size: 2.5rem; }
  .pi { font-size: 1.9rem; }
  .pc { padding: 24px 20px; }
}

/* Phones in landscape have very little height — don't demand a full screen */
@media (max-height: 520px) and (orientation: landscape) {
  #hero,
  #hero-about,
  #hero-donate,
  #hero-partners {
    min-height: 0;
    padding-top: calc(var(--nav-h, 76px) + 22px);
    padding-bottom: 40px;
  }

  .hl { width: 96px; height: 96px; margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   9. about.html / donate.html / partners.html — interior heroes and cards
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #hero-about,
  #hero-donate,
  #hero-partners {
    min-height: 0;
    padding-top: calc(var(--nav-h, 76px) + 34px);
    padding-bottom: 46px;
  }

  .hero-org { width: 72px; height: 72px; margin-bottom: 16px; }
  .page-label { letter-spacing: 3px; }
  .page-sub { font-size: 0.98rem; line-height: 1.75; }

  /* about.html */
  .founder-grid { gap: 32px; }
  .card-body { padding: 22px 18px 24px; }
  .founder-bio p,
  .founder-bio li { font-size: 0.95rem; line-height: 1.85; }
  .pullquote { padding: 18px; }
  .pullquote p { font-size: 0.98rem; }
  .team-card { padding: 24px 20px; }
  .val-card { padding: 24px 18px; }
  .tl-content { padding: 18px; }

  /* donate.html */
  .give-info,
  .give-card { padding: 24px 20px; }
  .is-num { font-size: 2.4rem; }
  .tax-box { padding: 24px 20px; }

  /* partners.html */
  .partner-card { padding: 26px 22px; }
  .join-box { padding: 30px 20px; }
}

/* Tablet: two partner columns get tight before the page's own 860px switch */
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* The sticky founder card only helps when there's a column beside it */
@media (max-width: 1023px) {
  .founder-card { position: static; }
}

/* --------------------------------------------------------------------------
   10. Course and comic heroes (comic, classroom, workbook, promise pages)
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { padding: 3.3rem 1.2rem 2.6rem; }
  .hero h1 { letter-spacing: 4px; }
  .hero h2 { font-size: 0.9rem; letter-spacing: 2px; }
  .hero .tagline { font-size: 1rem; }
  .hero-promise { padding: 1.1rem 1.2rem; }

  /* comic.html — three buttons in a flex row */
  .hero-btns { gap: 0.7rem; }
  .hero-btns .btn { flex: 1 1 100%; }

  /* workbook pages — two buttons as direct children of .hero */
  .hero > .btn { display: flex; max-width: 20rem; margin: 0.6rem auto; }

  /* promise-to-prosper.html — course banner below the hero buttons */
  .hero-visual { margin-top: 1.8rem; border-radius: 6px; }
}

/* --------------------------------------------------------------------------
   11. comic.html
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .issue-grid { padding: 1rem 1.1rem 2.4rem; gap: 1.4rem; }
  .lessons-section { padding: 2.8rem 1.1rem; }
  .lesson-card { padding: 1.2rem; }
  .mission { padding: 2.8rem 1.2rem; }
}

/* A full comic page is far taller than a phone screen. Let the lightbox
   scroll the artwork instead of shrinking it to an unreadable strip. */
@media (min-width: 861px) {
  /* Room for the title, the full-resolution link and the controls */
  .lightbox.open { padding: 3rem 1rem; overflow-y: auto; }
  .lightbox img { max-height: 72vh; }
}

@media (max-width: 860px) {
  .lightbox.open {
    display: block;
    padding: 3.4rem 0.5rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
  }

  .lightbox img {
    max-width: 100%;
    max-height: none;
  }

  .lb-title { margin: 0 auto 0.7rem; padding: 0 2.6rem; }

  .lb-close {
    top: 0.4rem;
    right: 0.5rem;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
  }

  .lb-nav {
    position: sticky;
    bottom: 0;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 0.3rem;
    margin-top: 0.8rem;
    background: rgba(5, 10, 16, 0.94);
  }

  .lb-nav .btn { padding: 0.7rem 0.9rem; font-size: 0.74rem; }
}

/* The lightbox controls are real <button>s now (they were click-only <div>s
   and hrefless <a>s, so neither keyboard nor screen-reader users could reach
   them). Undo the user-agent button styling the page's .btn rule assumes. */
.lb-close {
  background: none;
  border: 0;
  line-height: 1;
  font-family: inherit;
}

.lb-nav .btn {
  font-family: inherit;
}

/* Link to the original artwork, since the lightbox now loads a lighter copy */
.lb-full {
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--gold, #c9a84c);
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.45);
}

/* --------------------------------------------------------------------------
   12. classroom.html / classroom-live.html
   -------------------------------------------------------------------------- */

/* The Zoom component view renders at its own intrinsic size */
#zoomRoot,
#meetingSDKElement {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 860px) {
  .wrap { padding: 2rem 1.1rem 3rem; }
  .join-card { padding: 1.4rem 1.2rem 1.6rem; }
  .class-card { padding: 1.2rem; }
  .note { padding: 1rem 1.1rem; }
  .btn.join-link { align-self: stretch; }
  .track-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .track-option { padding: 1.1rem 1.2rem; }
  .session-bar { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* --------------------------------------------------------------------------
   13. food-truck-workbook.html / promise-to-prosper.html
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .enroll-form,
  .access-gate { padding: 1.6rem 1.2rem; }

  .module-card { padding: 1.2rem; }
  .lesson-header { padding: 0.9rem 1.1rem; gap: 0.8rem; min-height: 52px; }
  .lesson-body { padding: 1.1rem; }
  .notebooklm-frame { padding: 1.4rem 1.1rem; }
  .cert-preview { padding: 2rem 1.1rem; }
  .cert-preview .cert-name { width: 100%; min-width: 0; font-size: 1.25rem; }
  .declaration-box { padding: 1.4rem 1.2rem; }
  .declaration-box blockquote { font-size: 0.98rem; }

  /* A single column of four numbers is a lot of scrolling; 2x2 reads better */
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 0.8rem;
    padding: 1.6rem 1.1rem;
  }

  .stat-num { font-size: 1.6rem; }
  .stat-label { font-size: 0.72rem; }
}

@media (max-width: 400px) {
  .stats-bar { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. Large desktops — use the extra width instead of a fixed column
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  .pg { max-width: 1360px; }
  .aw { max-width: 1320px; }
  .rs,
  .cg { max-width: 1280px; }
  .founder-grid { max-width: 1320px; grid-template-columns: 400px 1fr; }
  .team-grid,
  .values-grid { max-width: 1320px; }
  .give-grid,
  .partner-grid { max-width: 1300px; }
  .issue-grid,
  .lessons-grid { max-width: 1440px; }
  section:not(.hero) { padding-inline: clamp(32px, 4vw, 72px); }
}

/* --------------------------------------------------------------------------
   15. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The pulsing glow behind the home page logo is purely decorative */
  .hl { animation: none; }

  .pc:hover,
  .team-card:hover,
  .issue-card:hover,
  .module-card:hover,
  .partner-card:hover,
  .give-card:hover,
  .bp:hover,
  .bo:hover,
  .bd:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Tablet rhythm (portrait tablets, large phones in landscape)
   The 86px/32px desktop section padding was only relaxed below 640px, so the
   whole 641–1023px band — every iPad in portrait — still paid desktop-sized
   whitespace on a much shorter screen.

   The two tiers below are split on purpose. Sections and the footer have no
   other rule in this range, so they start at 641px. The heroes and .wrap do
   (sections 9, 10 and 12 run to 700px and 860px), and since this section comes
   later in the file a single 641px tier would silently overrule the smaller
   padding those rules chose for phones.
   -------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 1023px) {
  section { padding: 68px 26px; }

  #stats,
  #impact-stats,
  #why,
  #tax,
  #donate-strip { padding: 60px 26px; }

  footer { padding: 34px 24px; }
}

@media (min-width: 861px) and (max-width: 1023px) {
  /* Interior heroes: the offset has to clear the measured bar, not a guess */
  #hero-about,
  #hero-donate,
  #hero-partners {
    padding-top: calc(var(--nav-h, 76px) + 40px);
    padding-bottom: 60px;
  }

  .hero { padding: 3.8rem 1.6rem 3rem; }
  .wrap { padding: 2.2rem 1.5rem 3.4rem; }
}

/* index.html's hero asks for a full screen at every width, but only the ≤700px
   rule opted into svh. Without it the collapsing browser toolbar on a tablet
   crops the buttons below the fold. The min-height guard is the complement of
   the short-landscape exception in section 8, which comes earlier in the file
   and would otherwise be overridden by this. */
@media (min-height: 521px) {
  #hero { min-height: 100svh; }
}

/* --------------------------------------------------------------------------
   17. Dense navigation bars between the menu button and a real desktop
   Obsolete, and kept as a marker so the numbering below stays put. Both bars
   used to show their full link list from 1024px up, and comic.html (11 links)
   and food-truck-workbook.html (9) had to fit a full uppercase, letter-spaced
   row into an iPad-landscape or small-laptop width — so this band tightened
   gaps, type size and letter-spacing to keep them on one line.

   Sections 5 and 6 now collapse both bars into the menu at every width, so
   there is no inline list left to tighten. The panels set their own type size
   and spacing, and the brand lockup has the bar to itself.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. Display cutouts and home indicators
   Every page now sets `viewport-fit=cover`, which lets the dark background
   reach the physical edge of the screen instead of leaving letterboxed bars.
   In exchange, anything anchored to an edge has to keep itself clear of the
   cutout — most visibly the bar in landscape, where the notch eats into one
   side, and the footer, which sits under the home indicator.

   Every rule here is width-scoped and wraps the tier's own padding in max(),
   so a desktop (where every inset resolves to 0) keeps the gutters its page
   asked for instead of inheriting a phone's.
   -------------------------------------------------------------------------- */

/* Both themes use an ~18px gutter at this width */
@media (max-width: 860px) {
  nav {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* iPhones in landscape run from roughly 844px to 932px wide, so the larger
   handsets need the same treatment at a width the desktop bar still uses. The
   course bars set 2rem here and end up with the gold theme's 36px, which is a
   4px change nobody will notice. */
@media (min-width: 861px) and (max-width: 1023px) {
  nav {
    padding-left: max(36px, env(safe-area-inset-left));
    padding-right: max(36px, env(safe-area-inset-right));
  }
}

/* Both panels exist at every width now (sections 5 and 6), so their gutters
   are unscoped. Every inset resolves to 0 without a cutout, which leaves a
   desktop with the plain 20px the rules below floor at. */
.mm {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
}

html.js-nav nav .nav-links {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 16px));
}

/* Landscape is the only orientation with a side cutout worth reserving space
   for, and only on handsets and tablets — hence both bounds on each tier. The
   floor in each is the horizontal padding that band already uses, so a device
   without a cutout is left exactly as it was. */
@media (orientation: landscape) and (min-width: 861px) and (max-width: 1023px) {
  section,
  .wrap,
  .hero {
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
  }
}

@media (orientation: landscape) and (min-width: 641px) and (max-width: 860px) {
  section {
    padding-left: max(26px, env(safe-area-inset-left));
    padding-right: max(26px, env(safe-area-inset-right));
  }

  /* Sections 10 and 12 keep these near 1.1rem below 861px */
  .wrap,
  .hero {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

@media (orientation: landscape) and (max-width: 640px) {
  section,
  .wrap,
  .hero,
  .issue-grid,
  .lessons-section,
  .mission {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* The last thing on the page has to clear the home indicator. One rule per
   tier, because a single unscoped rule would flatten the others. */
@media (min-width: 1024px) {
  footer { padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 20px)); }
}

@media (min-width: 641px) and (max-width: 1023px) {
  footer { padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); }
}

@media (max-width: 640px) {
  footer { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 18px)); }
}

/* --------------------------------------------------------------------------
   19. Anchor landings under the bar
   Every page keeps its bar above the content — the gold theme positions it
   `fixed`, the course theme `sticky`. Either way the browser scrolls an anchor
   to the very top of the viewport, which is behind the bar, so "Programs",
   "Modules" and the rest all landed with their heading hidden and the page
   looking like it had jumped to the wrong place. It applies to the five
   scrollIntoView() calls on the course pages too, which is where it was most
   visible: unlocking a course scrolled the first module up under the bar.

   --nav-h is measured at runtime by mobile-nav.js, so this tracks the real bar
   rather than a guess — including the taller wrapped one on a small phone.
   scroll-margin only affects scrolling an element into view, so applying it to
   every id is inert everywhere else on the page.
   -------------------------------------------------------------------------- */

[id] {
  scroll-margin-top: calc(var(--nav-h, 76px) + 14px);
}

/* --------------------------------------------------------------------------
   20. Large desktops, part two
   Section 14 widens the gold-theme and comic grids and then opens up
   `section:not(.hero)`. That last rule assumed the gold theme's full-bleed
   sections, where the gutter is the page margin. The other two page families
   build their sections differently and both came out worse at >=1600px than
   they had been at 1400px:

     - classroom / classroom-live nest their <section>s inside <main class="wrap">,
       which already supplies the gutter, so the extra padding applied a second
       time and squeezed the column from both sides.
     - the workbook pages cap `section` itself at 1100px, and with border-box
       sizing the wider gutter comes out of the text column rather than the
       margin — the reading width actually shrank as the monitor got bigger.

   Fixing the padding and then granting the width these pages never claimed.
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
  /* classroom.html / classroom-live.html */
  .wrap > section:not(.hero) { padding-inline: 0; }
  .wrap { max-width: 1360px; }

  /* The Zoom stage is the one thing on these pages that genuinely wants the
     whole monitor — it was pinned to the same 1100px as the text above it. */
  #zoomRoot,
  #meetingSDKElement { max-width: 1360px; }

  /* food-truck-workbook.html / promise-to-prosper.html
     Prose keeps a readable measure; only the card grids take the extra width,
     where it buys a fourth column instead of a longer line. */
  #course-video,
  #about,
  #access-gate,
  #study,
  #enroll { padding-inline: 2rem; }

  #modules,
  #resources {
    max-width: 1440px;
    padding-inline: 2rem;
  }
}

/* --------------------------------------------------------------------------
   21. The Programs submenu on a touch screen
   Obsolete, like section 17, and kept for the same reason.

   The gold-theme bar opened its one dropdown with `.dd:hover` and
   `.dd:focus-within` — fine for a mouse and a keyboard, useless on the touch
   screens wider than 1024px (an iPad in landscape is 1024–1366px) that used
   to get the full inline bar. Tapping "Programs" there just followed its
   href, and the four course links under it were unreachable, so mobile-nav.js
   added a tap-to-open step for that band.

   The bar no longer shows its inline list at any width, and the panel lists
   those four links flat, so both the rule and its script are gone.
   -------------------------------------------------------------------------- */