/* Mobile adaptations layered on top of the desktop-authored inline styles.
   Selectors intentionally target the inline `style` attribute values so the
   original per-page markup doesn't need to be rewritten per breakpoint. */

/* ---------- Fixes that apply at every width ---------- */
/* The library "shelf" row of book covers doesn't wrap (flex-shrink: 0 on
   each cover), so on any viewport narrower than its content it must
   scroll internally rather than force the whole page wider. */
[style*="align-items: flex-end; gap: 44px"] {
  overflow-x: auto;
}

/* Rows of flex content wrap rather than force the page wider at any
   viewport where they don't have their full desktop-authored width to
   work with — harmless on wide viewports, where there's room to stay
   on one line anyway. */
[style*="display: flex"] {
  flex-wrap: wrap;
}

/* Fixed-size decorative frames (portraits, the circular diagram): scale
   to whatever column they land in rather than forcing a wide desktop
   box at any viewport, narrow or in-between. */
[style*="width: 420px; height: 520px"] {
  width: 100% !important;
  max-width: 420px;
  height: auto !important;
  aspect-ratio: 420 / 520;
}
[style*="width: 560px; height: 760px"] {
  width: 100% !important;
  max-width: 560px;
  height: auto !important;
  aspect-ratio: 560 / 760;
}
[style*="width: 620px; height: 620px"] {
  width: 100% !important;
  max-width: 620px;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/* ---------- Hamburger menu (site-nav) ---------- */
.nav-toggle-checkbox { display: none; }
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle-label svg { display: block; }
.nav-toggle-label .icon-close { display: none; }
.nav-toggle-checkbox:checked ~ .nav-toggle-label .icon-open { display: none; }
.nav-toggle-checkbox:checked ~ .nav-toggle-label .icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle-label { display: flex; }

  .site-nav {
    display: none !important;
    position: fixed !important;
    top: var(--site-header-h, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    /* Not `bottom: 0` — the header's backdrop-filter/transform creates a
       new containing block for fixed descendants, so percentage/bottom
       offsets resolve against the ~76px header box, not the viewport.
       `vh` units always resolve against the real viewport, so use that
       to size the panel instead. */
    height: calc(100vh - var(--site-header-h, 76px)) !important;
    max-height: calc(100vh - var(--site-header-h, 76px)) !important;
    z-index: 90;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    background: #FAF6F0 !important;
    padding: 20px 28px 32px !important;
    overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  }
  .site-nav a {
    width: 100%;
    padding: 14px 0 !important;
    border-bottom: 1px solid #E8E3DC !important;
    font-size: 16px !important;
  }
  .nav-toggle-checkbox:checked ~ .site-nav { display: flex !important; }
}

/* ---------- Typography scale-down ---------- */
@media (max-width: 900px) {
  h1 { font-size: 36px !important; line-height: 1.15 !important; }
  h2 { font-size: 28px !important; line-height: 1.22 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }

  /* Decorative oversized numerals/marks that aren't real headings */
  [style*="font-size: 168px"],
  [style*="font-size: 110px"],
  [style*="font-size: 104px"] { font-size: 56px !important; }
  [style*="font-size: 96px"] { font-size: 48px !important; }
  [style*="font-size: 92px"] { font-size: 44px !important; }
  [style*="font-size: 64px"] { font-size: 36px !important; }

  /* Body copy that was sized for a wide desktop column */
  [style*="font-size: 28px"] { font-size: 19px !important; }
  [style*="font-size: 24px"] { font-size: 17px !important; }
  [style*="font-size: 22px"] { font-size: 16px !important; }
  [style*="font-size: 20px"] { font-size: 16px !important; }
}

/* ---------- Layout: grids collapse to one column ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  [style*="border-right: 1px solid"] {
    border-right: none !important;
  }

  /* Rows of flex content wrap instead of overflowing */
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  section, header > div, footer > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding: 140px 96px"],
  [style*="padding: 96px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  [style*="padding: 160px 48px"],
  [style*="padding: 130px 48px"] {
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }

  img { max-width: 100%; }

  /* Fixed-size portrait/cover frames: allow shrinking below their
     desktop content size (the global aspect-ratio rules above handle
     the actual sizing at every width). */
  [style*="flex-shrink: 0"] {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* The Vision 2030 sub-nav bar: don't let it stay stuck alongside a
     page's own sticky header on a short mobile viewport, and trim it
     down so it doesn't eat the whole first screen. */
  #vision-subnav {
    position: static !important;
    font-size: 11px !important;
    gap: 8px 12px !important;
    padding: 10px 20px !important;
  }
  #vision-subnav .subnav-label {
    display: none;
  }
}