/* ============================================================================
   One responsive system for every page.

   Three stylesheets currently disagree about where the layout should change:
     site.css                    1000px / 650px
     index.html (inline)         1350px / 600px
     experiences/… (inline)       900px / 560px
   The result is that the same nine-item nav becomes a drawer at 1350px on the
   homepage and at 1000px everywhere else, and between 1001px and 1119px six of
   the nine links wrap onto two lines. This file is loaded last and settles it.

   !important is used deliberately and only here: this layer exists to override
   inline page styles that come later in the cascade and are not ours to edit.
   Nothing structural changes. Sizing, spacing and reflow only.
   ========================================================================== */

/* --- 1. Nothing may ever push the page sideways -------------------------- */
body { overflow-wrap: break-word; }
h1, h2, h3, .brand, .card--post h2, .card h3 { overflow-wrap: anywhere; }
.article a, .crumbs a { word-break: break-word; }
img, video, iframe, table { max-width: 100%; }

/* --- 2. Dynamic viewport height ------------------------------------------
   iOS Safari resizes vh when the address bar hides, so a vh hero jumps as you
   scroll. dvh tracks it; the vh values in site.css remain as the fallback.    */
@supports (height: 100dvh) {
  .hero { min-height: 64dvh; }
  .article-hero { min-height: 52dvh; }
}

/* --- 3. Nav ---------------------------------------------------------------
   REMOVED 17/08/2026. This block tuned a nine to thirteen item bar across three
   disagreeing breakpoints. The bar is now five items generated from one
   component and nav.css owns it end to end, so every rule here was dead weight
   that nav.css had to fight with !important. Touch-target minimums that still
   apply live in nav.css alongside the rules they belong to.                    */
.tags .tag { min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a { padding: .2rem 0; min-height: 24px; display: inline-flex; align-items: center; }

/* --- 5. Short viewports (landscape phones) --------------------------------
   At 844x390 the hero alone was 505px, taller than the whole screen.          */
@media (max-height: 620px) and (orientation: landscape) {
  .hero, .article-hero {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 2.75rem !important;
  }
  .hero h1, .article-hero h1 { font-size: clamp(1.9rem, 5vw, 3rem) !important; }
  .hero .lead { font-size: .96rem; }
  .section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* --- 6. Small phones ------------------------------------------------------
   At 320x568 the hero was 672px, so the first screen held nothing but hero.   */
@media (max-width: 400px) {
  .hero { padding: 6.5rem 5% 3.25rem !important; min-height: 56svh !important; }
  .article-hero { padding-top: 6rem !important; min-height: 46svh !important; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3.3rem) !important; }
  .article-hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem) !important; }
  .section { padding-left: 5%; padding-right: 5%; }
  .eyebrow { font-size: .6rem; letter-spacing: .18em; }
  .crumbs div { font-size: .58rem; letter-spacing: .1em; }
  .footer div { gap: .9rem; }
  .card { padding: 1.25rem; }
  .button { width: 100%; justify-content: center; }
}

/* --- 7. The Journey page's own components -------------------------------- */
@media (max-width: 480px) {
  /* four spines in a 2x2 grid still overran a 320px screen by 19px */
  .book-spines { grid-template-columns: 1fr !important; }
  .book-spine { min-width: 0; }
  .experience-form .form-grid { grid-template-columns: 1fr !important; }
}
.book-spine, .door, .route-card { min-width: 0; }

/* --- 8. Very large screens ------------------------------------------------
   Content is already capped at 1180px, but the hero grows without limit.      */
@media (min-width: 1800px) {
  .hero { min-height: 58vh; }
  .hero h1 { font-size: clamp(3.5rem, 5.5vw, 8rem); }
}

/* --- 9. Print ------------------------------------------------------------- */
@media print {
  .site-header, .menu, .menu-toggle, .crumbs, .footer, .embed, .skip-link,
  .section.alt, body::after { display: none !important; }
  .hero { min-height: auto; padding: 0 0 1.5rem; background: none; color: #000; }
  .hero h1, .article { color: #000; }
  .article { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* The eight supporting pages no longer use .nav__links; their block was removed
   with section 3 above. Only the Journey page keeps that container, styled in nav.css. */