/* bookSHelf — SHARED site chrome (bake-off canonical, 2026-07-24).
   ONE source of truth for nav, skip link, eyebrow, hero, content shell,
   panel/card, footer, focus, and motion — so every prototype reads as one
   family. Tokens come from style-bookshelf.css (link it FIRST); this file only
   consumes them. Per-page files should style their BODY only and never
   redefine any .house-* chrome. */

:root { color-scheme: light dark; }
body.house-body {
  margin: 0; font-family: var(--font-sans);
  background: var(--parchment); color: var(--ink-near-black);
}

/* ---- skip link ---------------------------------------------------------- */
.house-skip {
  position: absolute; top: -60px; left: var(--lg); z-index: 1100;
  padding: 10px 18px; background: var(--wedgwood); color: var(--ink-on-accent);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  text-decoration: none; border-radius: var(--radius-md); transition: top .15s ease;
}
.house-skip:focus { top: var(--lg); }

/* ---- nav ---------------------------------------------------------------- */
.house-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: var(--lg); flex-wrap: wrap;
  padding: 13px var(--lg);
  background: color-mix(in srgb, var(--parchment) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-cream);
}
.house-nav-brand {
  font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--ink-near-black); text-decoration: none; white-space: nowrap;
}
.house-nav-right { display: flex; align-items: center; gap: var(--lg); margin-left: auto; flex-wrap: wrap; }
.house-nav-link {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-stone); text-decoration: none;
  white-space: nowrap; transition: color .15s ease;
}
.house-nav-link:hover { color: var(--wedgwood); }
.house-nav-toggle {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-charcoal); background: var(--warm-sand);
  border: none; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer;
  box-shadow: 0 0 0 1px var(--ring-warm); transition: box-shadow .2s ease, transform .1s ease;
}
.house-nav-toggle:hover { box-shadow: 0 0 0 1px var(--ring-deep); }
.house-nav-toggle:active { transform: translateY(1px); }
[data-theme="dark"] .house-nav { background: color-mix(in srgb, var(--deep-dark) 92%, transparent); border-bottom-color: var(--border-warm); }
[data-theme="dark"] .house-nav-toggle { background: var(--dark-surface); color: var(--ink-near-black); }
[data-theme="dark"] .house-nav-link:hover, [data-theme="dark"] .house-nav-brand:hover { color: var(--wedgwood-light); }

/* ---- hero (centered editorial — the canonical pattern) ------------------ */
.house-hero { max-width: 820px; margin: 0 auto; padding: 72px var(--lg) 40px; text-align: center; }
.house-eyebrow {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-stone); margin: 0 0 var(--lg);
}
.house-eyebrow .sep { color: var(--wedgwood); }
.house-hero h1 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.5px; line-height: 1.08;
  font-size: clamp(40px, 6vw, 64px); margin: 0 0 var(--md); color: var(--ink-near-black);
  text-wrap: balance;
}
.house-hero-tagline {
  font-family: var(--font-serif); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5;
  color: var(--ink-olive); margin: 0 auto; max-width: 60ch; text-wrap: pretty;
}
.house-hero-byline { font-family: var(--font-sans); font-size: 13px; letter-spacing: .4px; color: var(--ink-stone); margin: var(--md) 0 0; }

/* ---- content shell ------------------------------------------------------ */
.house-main { max-width: 820px; margin: 0 auto; padding: 0 var(--lg) var(--section); }
.house-main--wide { max-width: 1080px; }

/* ---- panel / card (one radius + shadow scale) --------------------------- */
.house-panel {
  background: var(--pure-white); border: 1px solid var(--border-warm);
  border-radius: var(--radius-xl); box-shadow: var(--whisper-shadow); padding: var(--xl);
}
.house-panel--soft { background: var(--ivory); box-shadow: none; }

/* ---- footer ------------------------------------------------------------- */
.house-footer {
  border-top: 1px solid var(--border-cream); margin-top: var(--section);
  padding: var(--xl) var(--lg); text-align: center;
}
.house-footer-kicker { font-family: var(--font-serif); font-size: 18px; color: var(--ink-near-black); margin: 0 0 var(--sm); text-wrap: balance; }
.house-footer-line { font-family: var(--font-sans); font-size: 13px; color: var(--ink-stone); margin: 0; }
.house-footer-line a { color: var(--wedgwood); text-decoration: none; }
.house-footer-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .house-footer-line a { color: var(--wedgwood-light); }

/* ---- focus (chrome; body inherits the site-wide rule) ------------------- */
.house-nav a:focus-visible, .house-nav button:focus-visible,
.house-footer a:focus-visible, .house-skip:focus-visible {
  outline: 2px solid var(--focus-blue); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ---- motion — reduced-motion-first -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero children stagger in on load */
  .house-hero > * { opacity: 0; transform: translateY(6px); animation: house-in 200ms ease-out forwards; }
  .house-hero > *:nth-child(2) { animation-delay: 60ms; }
  .house-hero > *:nth-child(3) { animation-delay: 120ms; }
  .house-hero > *:nth-child(4) { animation-delay: 180ms; }
  @keyframes house-in { to { opacity: 1; transform: none; } }
  /* scroll-revealed sections (JS adds .is-in once) */
  .reveal { opacity: 0; transform: translateY(6px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity 180ms ease-out, transform 180ms ease-out; }
}

@media (max-width: 640px) {
  .house-hero { padding: 44px var(--md) 28px; }
  .house-nav { gap: var(--sm) var(--md); padding: 10px var(--md); }
}