/* css/shell.css: the SHARED SHELL for every modern CountryPlans page.

   Extracted from rebuild/template-reference.html (the authoritative locked
   template, SHELL-DECISION.md 2026-07-28) -- the shell half only: the clamped
   viewport-scaling root, the reset, the header, the gold nav, the three-column
   footer, and the mobile shell. The content half of the reference lives in
   css/story.css. When the reference and this file disagree, the reference wins:
   re-extract, do not hand-edit here.

   Loaded BEFORE css/story.css (builder-story pages) and BEFORE css/plans.css
   (the 13 modern plan/guide pages), so either sheet can override it.

   SHELL-DECISION item 2: this clamped root replaces the old unclamped
   `--u` system that css/plans.css used to define. Never reintroduce it.

   One deliberate deviation from the reference: the four `.tagline` rules are
   scoped to `svg.tagline`. Every tagline in the locked template is an inline
   <svg>, so story pages are unaffected; the scoping keeps the SVG geometry
   (aspect-ratio, 130% width) off the plain <p class="tagline"> that the modern
   header still carries (Shell A: modern header/nav markup unchanged, CSS
   polish only). css/plans.css styles that paragraph.
*/

/* ---------- shell base (1rem = 1 design px of the shell) ----------
   The shell is drawn on a 320 grid for phones and a 960 grid from tablet
   up. That scale used to run with no floor and no ceiling: at 430 wide the
   footer type reached 20px and at 767 it reached 36px, while the article
   below it stayed on fixed px, and at 768 the whole shell dropped to 80%
   of its drawn size. The scale is now clamped at both ends so the shell
   and the article keep the same proportions at every width. Desktop
   (960 and up) is untouched: 1rem = 10px, exactly as before. */
html{ font-size:10px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (min-width:768px) and (max-width:959.9px){ html{ font-size:clamp(9.2px,1.0417vw,10px); } }
@media (max-width:767.9px){ html{ font-size:clamp(10px,3.125vw,12px); } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
*{ margin:0; padding:0; box-sizing:border-box; }
img,picture{ display:block; }   /* block, so a logo never sits in a line box */
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

body{
  background:#F8F3E9;
  color:#1a1a1a;
  font-family:Verdana,Geneva,sans-serif;
  font-size:1.5rem;
  line-height:2.5rem;
  -webkit-font-smoothing:antialiased;
}
/* Ink, not gold: the ring has to read on the gold nav bar and on the
   gold menu button as well as on the paper. */
:focus-visible{ outline:3px solid #22261f; outline-offset:3px; }

/* ---------- header ---------- */
/* The bottom padding is explicit now that the tagline is a tight box rather
   than a line box: it holds the header at the 14.25rem it was drawn at. */
.site-header{ --wm:22.9rem; padding:2.2rem 0 0.6359rem; }
.site-header img{ mix-blend-mode:multiply; }
.logo-desktop{ display:block; }
.logo-desktop img{ width:var(--wm); height:10rem; }
.logo-mobile{ display:none; }
.menu-btn{ display:none; }

/* ---------- wordmark and tagline, in the header and in the footer ----------
   The wordmark and its tagline are one column, --wm wide, set by whichever
   logo is on show. The tagline is SVG text with textLength set to the width
   of its viewBox, so it fills that box exactly and scales with it the way an
   image would, at every width and in any serif the reader happens to have.
   The three numbers in the markup are the sentence measured in Georgia
   italic at font-size 100: 2084.5 advance, 2078.3 inked width, 75.6 ascent.
   Georgia therefore draws at its natural proportions and any other serif is
   fitted to the same box. */
.brand{ width:var(--wm); }
.site-header .brand{ margin-inline:auto; }
/* Desktop sun-logo header only: the tagline reads better ~30% larger than the
   narrow sun wordmark; negative margin keeps it centered on the logo. */
@media (min-width:768px){
  .site-header svg.tagline{ width:130%; margin-left:-15%; }
}
svg.tagline{
  display:block; width:100%; height:auto; overflow:visible;
  aspect-ratio:2078.3/97.3;     /* the viewBox, stated again so no browser has to infer it */
  margin-top:1.5%;              /* of the wordmark width, so the gap scales too */
  color:#5a5244;
}
svg.tagline text{
  font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:100px;              /* user units: the size the numbers above were measured at */
  fill:currentColor;
}

/* ---------- gold nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:60; margin-top:0.1rem;
  background:#FFC300; border-top:1px solid #677A85; border-bottom:1px solid #677A85;
}
/* 94.27vw reproduces the old fluid bar width in the 768 to 959 band now
   that the root size no longer tracks the viewport there; at 960 and up
   both terms resolve to the same 905px bar as before. */
.site-nav ul{ list-style:none; width:min(90.5rem,94.27vw); margin:0 auto; display:flex; }
.site-nav li{ width:18.1rem; }
.site-nav a{
  display:block; padding:0.35rem 0;
  font-family:Verdana,Geneva,sans-serif; font-size:clamp(16px,2.0833vw,20px); font-weight:700;
  line-height:1.2; text-align:center; color:#1a1a1a;
}
.site-nav a:focus-visible{ outline-offset:-3px; }   /* the ring stays inside the bar */
@media (min-width:768px){
  .site-nav{ border-top:1px solid #e2ad00; border-bottom:1px solid #cf9d00; box-shadow:0 0.2rem 0.8rem rgba(60,45,0,0.10); }
  .site-nav a{ padding:0.85rem 0; transition:background-color .15s ease; }
  .site-nav a:hover{ background:#eeb501; }
}

/* ---------- footer ---------- */
.site-footer{ margin-top:5rem; }
.bounce{ width:5.6rem; height:8.3rem; margin:0 auto 1rem; }
.footer-grid{
  max-width:96rem; margin:0 auto; padding:2rem 1.6rem 3.6rem;
  border-top:0.2rem solid #22261f; display:flex; gap:4rem;
}
.f-brand{ --wm:28rem; flex:1.6; }
.f-brand .footer-logo{ display:block; margin-top:0.2rem; }
.f-brand .footer-logo img{ width:var(--wm); }
.f-brand svg.tagline{ color:#6b6353; }
.f-col{ flex:1; }
.f-col h3{
  margin:0.4rem 0 0.8rem; font-family:Verdana,Geneva,sans-serif;
  font-size:1.2rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:#8a8471;
}
.f-col a{
  display:block; font-family:Verdana,Geneva,sans-serif;
  font-size:1.4rem; line-height:2.6rem; color:#3a3f33;
}
.f-col a:hover{ text-decoration:underline; text-underline-offset:0.3rem; }

/* ---------- mobile shell ----------
   The header swaps the sun logo for the text wordmark and moves it off the
   left margin; the tagline follows it, still spanning it exactly. */
@media (max-width:767.9px){
  .site-header{ --wm:22.8rem; padding-top:2rem; }
  .site-header .brand{ margin-inline:1.9rem 0; }
  .logo-desktop{ display:none; }
  .logo-mobile{ display:block; }
  .logo-mobile img{ width:var(--wm); height:2.7rem; }
  .menu-btn{
    display:block; position:fixed; z-index:70; top:1.5rem; right:1.5rem;
    width:4rem; height:3.8rem; background:#FFC300; border:none;
    border-radius:0.8rem; cursor:pointer;
    box-shadow:0 0.2rem 0.9rem rgba(45,36,18,.28);
  }
  .menu-btn span{ display:block; width:2.4rem; height:0.4rem; margin:0.4rem auto; border-radius:0.2rem; background:#000; }
  .site-nav{
    display:none; position:fixed; top:5.6rem; right:1.5rem; z-index:65; margin:0;
    background:#fff; border-radius:0.8rem; box-shadow:0 0.2rem 1.2rem rgba(0,0,0,0.35); overflow:hidden;
  }
  .site-nav.open{ display:block; }
  .site-nav ul{ display:block; width:20rem; }
  .site-nav li{ width:auto; border-bottom:0.1rem solid #eee; }
  .site-nav li:last-child{ border-bottom:none; }
  .site-nav a{ padding:1rem 1.6rem; font-size:1.6rem; line-height:2rem; text-align:left; background:#fff; }
  .site-nav a:active{ background:#FFC300; }
  .bounce{ width:5.1rem; height:7.6rem; }
  .footer-grid{ flex-direction:column; gap:2.6rem; padding:2rem 1.9rem 3.6rem; }
  .f-brand{ --wm:22.8rem; }
  .f-col h3{ margin:0 0 0.9rem; font-size:11.5px; }
  .f-col a{ font-size:15px; line-height:2.15; }
}