/* Shared page shell — header, nav, footer. Every page loads this.
   The header is the Favorites spec, chosen 2026-08-30 as canonical:
   96px above and below, 48px from wordmark to nav, 260px wordmark, no rule.
   Measured height 316px. Do not change it on one page only. */

.shell{min-height:100vh;display:flex;flex-direction:column}
/* width:100% is load-bearing. .shell is a flex column, and an auto cross-axis
   margin on a flex item makes it shrink-to-fit rather than stretch — without
   this the page collapses to its content's min-content width on narrow
   screens. It looked correct on desktop only because the content was wider
   than the fallback. */
/* Horizontal and vertical padding are split on purpose. Header, footer and the
   homepage hero carry .page as well as their own class, and a shorthand
   `padding` on either side would overwrite the other's — measured 2026-09-01:
   the ≤719px .page rule below zeroed the header's vertical padding. */
.page{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}

/* Header ------------------------------------------------------------------ */
.site-head{display:flex;flex-direction:column;align-items:center;gap:var(--s-5);padding-block:var(--s-7)}
.site-head img{width:260px;height:auto;display:block}
.site-nav{display:flex;align-items:baseline;gap:var(--s-3);font:var(--type-label);
          letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--fg-dim)}
.site-nav .sep{color:var(--fg-dimmer)}
/* Separators are kept, settled 2026-08-31. Two of the four Design comps
   dropped them; they render on every page from here. Mark them aria-hidden
   so a screen reader reads three links, not "Images dot About dot Connect". */
.site-nav a[aria-current="page"]{color:var(--fg)}

/* Footer ------------------------------------------------------------------
   --foot-gap is the space above the rule. Collection pages need it to
   separate the footer from the last row of the grid; the homepage sets it
   to zero because there is no grid to separate from.                       */
:root{--foot-gap:var(--s-8)}
.site-foot{margin-top:var(--foot-gap);padding-block:var(--s-6);border-top:var(--border-hairline);
           text-align:center;font:var(--type-caption-year);color:var(--fg-dimmer);
           font-variant-numeric:tabular-nums}

@media (max-width:1131px){
  .site-head{padding-block:var(--s-5);gap:var(--s-4)}
  .site-head img{width:200px}
}
@media (max-width:719px){
  :root{--foot-gap:var(--s-6)}
  .page{padding-inline:var(--page-pad-sm)}
}

/* Build additions, 2026-09-01 ----------------------------------------------
   <picture> is the wrapper the build adds around every webp/jpg pair. It must
   not create a box of its own, or the flex and shrink-to-fit sizing that was
   verified against a bare <img> stops applying.                              */
picture{display:contents}
/* Footer distance on content pages: the About, Connect and Images comps all
   carry 96px above the rule. Collection pages keep the 128px default above. */
.about,.connect,.images{--foot-gap:var(--s-7)}