/* ============================================================================
   PREVIOUSLY — PAGE SHELL · shell.css · Tier 1 foundation
   The page frame every rebuilt page sits in. Consumed by all pages.
   Depends on: tokens.css (design-language-2026-09-28/tokens/) — never
   hardcode a value that exists as a --pv-* token.
   Maps to PROGRAM.md "Page shell spec — LOCKED" items 1,2,3,4,8,9.
   ============================================================================ */

/* ---- Base: dark-first, honest document defaults (spec item 9 a11y) ---- */
:root{ color-scheme: dark; }*, *::before, *::after{ box-sizing: border-box; }html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* scroll reset is explicit in shell.js (spec item 4) */
}body{
  margin: 0;
  background: var(--pv-noir);
  color: var(--pv-ivory);
  font-family: var(--pv-sans);
  font-size: var(--pv-body);
  line-height: var(--pv-leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}/* Media never overflows the measure (no sideways scroll — spec item 9) */
img, video, iframe, svg{ max-width: 100%; height: auto; }/* ------------------------------------------------------------------
   Shell frame — spec item 3.
   .pv-shell   outer cap 1440px, centered (ultrawide stays composed)
   .pv-content inner content measure 1280px
   .pv-full-bleed  exemption hook — full-bleed heroes run edge to edge
   ------------------------------------------------------------------ */
.pv-shell{
  width: 100%;
  max-width: var(--pv-shell-max);  /* 1440px */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}.pv-content{
  width: 100%;
  max-width: var(--pv-content-max); /* 1280px */
  margin-inline: auto;
  padding-inline: var(--pv-gutter);
}@media (max-width: 767px){.pv-content{ padding-inline: var(--pv-gutter-sm); }
}/* Full-bleed exemption: hero sections inside .pv-shell that must run
   edge to edge. Inner content still capped via .pv-content. */
.pv-full-bleed{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}/* ------------------------------------------------------------------
   Landmarks — spec item 9.
   header: sticky nav frame. main: grows to fill. footer: bottom.
   ------------------------------------------------------------------ */
.pv-site-header{
  position: sticky;
  top: 0;
  z-index: var(--pv-z-nav);
  background: var(--pv-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pv-rule);
}/* Header is pinned to the top on scroll, phone and desktop (spec item 1). */

.pv-main{
  flex: 1 0 auto;
  outline: none; /* focus ring is applied on :focus-visible only */
}.pv-main:focus-visible{
  outline: var(--pv-focus-outline);
  outline-offset: 2px;
}.pv-site-footer{
  flex: 0 0 auto;
  border-top: 1px solid var(--pv-rule);
}/* ------------------------------------------------------------------
   Focus — spec item 9: 2px solid var(--pv-red) + 2px offset everywhere.
   On red fills: 2px solid var(--pv-ivory).
   ------------------------------------------------------------------ */
:focus-visible{
  outline: var(--pv-focus-outline);
  outline-offset: 2px;
}.pv-on-red:focus-visible,
a[style*="--pv-red"]:focus-visible{
  outline: 2px solid var(--pv-ivory);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Page transitions — spec item 2: fast subtle fade (~150–200ms).
   - NO transition on initial load (JS adds .pv-transitions-on after
     first paint;before that the page renders fully visible).
   - Same fade on back/forward (bfcache restores get .pv-enter).
   - Disabled entirely under prefers-reduced-motion.
   ------------------------------------------------------------------ */
.pv-transitions-on .pv-shell{
  transition: opacity var(--pv-t-fast) var(--pv-ease); /* 0.18s */
}.pv-leaving .pv-shell{ opacity: 0; }/* fade-out before nav */
.pv-enter .pv-shell{
  opacity: 0;
  animation: pv-fade-in var(--pv-t-fast) var(--pv-ease) forwards;
}@keyframes pv-fade-in{to{ opacity: 1; } }/* ------------------------------------------------------------------
   Loading skeletons — spec item 5: content-shaped skeletons only.
   Never a splash, never a never-ending spinner (no-splash rule).
   aria-busy="true" + aria-hidden shimmer per spec item 9.
   ------------------------------------------------------------------ */
.pv-skeleton{
  border-radius: var(--pv-r-card-sm);
  background:
    linear-gradient(100deg, var(--pv-noir-2) 40%, var(--pv-noir-3) 50%, var(--pv-noir-2) 60%);
  background-size: 200% 100%;
  animation: pv-shimmer 1.4s linear infinite;
  min-height: 48px;
}.pv-skeleton[aria-hidden="true"]{ pointer-events: none; }@keyframes pv-shimmer{to{ background-position: -200% 0; } }/* Honest static click-to-load embed placeholder (spec item 8, no-JS
   baseline). Never a spinner: a real <button>, real artwork, real label. */
.pv-embed-placeholder{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--pv-r-card);
  overflow: hidden;
  cursor: pointer;
  background: var(--pv-noir-2) center / cover no-repeat;
  min-height: var(--pv-target-min);
}.pv-embed-placeholder__label{
  position: absolute;
  inset: auto 0 var(--pv-s4) 0;
  display: flex;
  justify-content: center;
}.pv-embed-placeholder__cta{
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s2);
  min-height: var(--pv-target-min);
  padding: var(--pv-s2) var(--pv-s6);
  border-radius: var(--pv-r-pill);
  background: var(--pv-red);
  color: var(--pv-on-red);
  font-weight: 700;
  font-size: var(--pv-body-sm);
}/* ------------------------------------------------------------------
   Reduced motion — spec item 2 + 9: transitions fully disabled.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .pv-transitions-on .pv-shell { transition: none; }
  .pv-skeleton, .pv-enter .pv-shell { animation: none; }
  .pv-enter .pv-shell, .pv-leaving .pv-shell { opacity: 1; }
}/* ------------------------------------------------------------------
   Print — dark-first on screen, ink-honest on paper (honors tokens).
   Content full width, chrome hidden, links readable.
   ------------------------------------------------------------------ */
@media print{
  .pv-site-header,
  .pv-site-footer { display: none !important; }
  .pv-shell, .pv-content { max-width: 100%; }
  .pv-content { padding-inline: 0; }
  .pv-skeleton { display: none; }
}

/* Browse-family width pass 2026-10-13: use the laptop screen (was shell 1440 / content 1280) */
@media (min-width: 1200px){
  .pv-shell{ max-width: 1760px; }
  .pv-content{ max-width: 1600px; }
}