/* =====================================================================
   SITE CHROME — the shared furniture every page uses (built on the
   Terracotta DS). Single source of truth, @imported by design-system/
   styles.css so it loads on EVERY page (incl. the home page). Nothing
   page-specific lives here. Extracted 2026-07-05 from the previously
   duplicated copies in case.css + the home shell (which drifted).
   ===================================================================== */

/* ---------- container + label ---------- */

.wrap{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }

.eyebrow{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); margin:0; }
/* ---------- top bar / nav ---------- */


/* ---------- top bar ---------- */
/* identical to the main page's nav (fixed, transparent → blur on scroll, brand + links) */
#nav{ position:fixed; inset:0 0 auto 0; z-index:50; padding:1.15rem 0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease); }
   /* constant height — the on-scroll shrink jumped the header (esp. with reduced motion) */
#nav.scrolled{ background:rgba(250,248,246,.82); backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px); box-shadow:0 1px 0 var(--rule); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand{ font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:.2px; text-decoration:none; }

.nav-links{ display:flex; align-items:center; gap:1.6rem; }

.nav-links a{ font-size:.86rem; text-decoration:none; color:var(--ink); opacity:.8; transition:opacity .25s var(--ease); }

.nav-links a:hover{ opacity:1; }

.nav-cta{ border:1px solid var(--rule); border-radius:999px; padding:.42rem .9rem !important; opacity:1 !important;
  transition:border-color .25s var(--ease), background .25s var(--ease); }

.nav-cta:hover{ border-color:var(--ink); }

.nav-links a.active{ opacity:1; color:var(--accent); }

.nav-links a.nav-cta.active{ color:var(--accent); border-color:var(--accent); }

@media(max-width:680px){ .nav-links a:not(.nav-cta){ display:none; } }
/* ---------- footer (terracotta) ---------- */


/* ---------- footer (terracotta) ---------- */
footer{ background:var(--terracotta-500); padding:3rem 0; margin-top:0; }   /* flush — the terracotta footer butts against the last section (no paper stripe). desktop padding a touch taller; mobile keeps 2.2rem in the media query below (content already stacks tall). */

.foot-inner{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:baseline; }

.foot-inner .fname{ font-family:var(--serif); font-size:1.05rem; color:var(--text-on-accent); }

.foot-note{ font-size:.78rem; color:var(--text-on-accent);
  display:flex; align-items:center; justify-content:flex-end; gap:16px 26px; flex-wrap:wrap; min-width:0; }
.foot-txt{ min-width:0; }   /* the two-line credits block — min-width:0 lets it wrap, not overflow */
.foot-note a{ color:var(--text-on-accent); text-decoration:underline; text-underline-offset:2px; font-size:.82rem; }
.foot-link{ color:var(--text-on-accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; font-size:.82rem; }
/* Footer CTA — small cream outline button on the terracotta band (→ system.html).
   Scoped ".foot-note a.foot-cta" so it beats the ".foot-note a" underline rule above. */
.foot-note a.foot-cta{ display:inline-flex; align-items:center; vertical-align:middle; flex:none; height:30px; padding:0 15px;
  border-radius:10px; font-size:.8rem; font-weight:500; line-height:1; white-space:nowrap; text-decoration:none;
  color:var(--text-on-accent); border:1px solid var(--text-on-accent); background:transparent;
  transition:background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.foot-note a.foot-cta:hover{ background:var(--text-on-accent); color:var(--terracotta-600); border-color:var(--text-on-accent); }
.foot-note a.foot-cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(250,248,246,.45); }
/* Mobile: stack the footer as blocks — the credits wrap naturally to the viewport
   (no flex max-content overflow) and the button drops below them. */
@media(max-width:680px){
  footer{ padding:2.2rem 0; }   /* keep the mobile footer at its previous height (only desktop grew) */
  .foot-inner{ display:block; }
  .foot-inner .fname{ display:block; margin-bottom:.7rem; }
  .foot-note{ display:block; }
  .foot-txt{ display:block; }
  .foot-note a.foot-cta{ margin-top:12px; }
}

/* ---------- home: principle + timeline titles are h3 (fixes heading-order — they
   were h4/h5 under a section h2). Mirrors the index shell's former .principle h4 /
   .tl-card h5 rules so the look is unchanged. ---------- */
.principle h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.2; margin:0 0 .45rem; }
.tl-card h3{ font-family:var(--serif); font-weight:500; font-size:1.02rem; line-height:1.2; margin:0 0 .34rem; color:var(--ink); }
.tl-node.now .tl-card h3{ color:var(--accent); }
/* ---------- skip link + focus ring ---------- */

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--text-on-dark);
  border-radius:0 0 8px 0; padding:.6rem 1rem; text-decoration:none; font-family:var(--font-sans); font-size:.85rem; }
.skip:focus{ left:0; }
a:focus-visible, button:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:5px; }
/* ---------- shared diagram language ---------- */


/* ---------- shared diagram language (mirrors index.html) ---------- */
.dg-box{ fill:var(--surface-raised); stroke:var(--warm-400); stroke-width:1.5; }

.dg-box-ac{ fill:var(--terracotta-50); stroke:var(--terracotta-300); stroke-width:1.5; }

.dg-line{ stroke:var(--warm-400); stroke-width:1.5; fill:none; }

.dg-arrow{ fill:var(--warm-400); }

.dg-dot{ fill:var(--terracotta-500); }

.dg-t{ font-family:var(--font-sans); font-size:13px; font-weight:500; fill:var(--ink); }

.dg-tm{ font-family:var(--font-sans); font-size:12px; fill:var(--earth); }

.dg-cap{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.8px; fill:var(--earth); }

.dg-mono{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.8px; fill:var(--terracotta-600); }
/* ---------- buttons (DS spec) ---------- */

/* Buttons — Terracotta DS spec: 04 variants · 03 sizes · states, radius 12, 3px terracotta focus halo */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-sans); font-weight:500; font-size:15px; line-height:1.2; height:40px; padding:0 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.btn .arr{ transition:transform var(--duration-base) var(--ease-standard); }
.btn.sm{ height:32px; font-size:14px; padding:0 14px; gap:8px; border-radius:10px; }
.btn.lg{ height:48px; font-size:16px; padding:0 22px; }
.btn-primary{ background:var(--terracotta-500); color:var(--text-on-accent); border-color:var(--terracotta-500); }
.btn-primary:hover{ background:var(--terracotta-600); border-color:var(--terracotta-600); }
.btn-primary:active{ background:var(--terracotta-700); border-color:var(--terracotta-700); }
.btn-primary:hover .arr{ transform:translateX(3px); }
.btn-secondary{ background:var(--surface-raised); color:var(--ink); border-color:var(--border-subtle); }
.btn-secondary:hover{ background:var(--warm-100); }
.btn-secondary:active{ background:var(--warm-200); }
.btn-ghost{ background:transparent; color:var(--terracotta); border-color:transparent; }
.btn-ghost:hover{ background:var(--terracotta-50); }
.btn-ghost:active{ background:var(--terracotta-100); }
.btn-destructive{ background:var(--surface-raised); color:var(--danger); border-color:var(--danger); }
.btn-destructive:hover{ background:var(--terracotta-50); }
.btn[disabled],.btn.is-disabled{ opacity:.45; pointer-events:none; }
/* ---------- motion / reveal ---------- */


/* ---------- motion ---------- */
@keyframes riseIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }

.reveal.in{ opacity:1; transform:none; }

/* Reduced motion = gentle, not frozen: keep in-place fades/colour/shadow + smooth
   scroll; only drop the slide-up travel on scroll-reveals. (mirrors index.html) */
@media(prefers-reduced-motion:reduce){
  .reveal:not(.in){ transform:none !important; }
}