/* ============================================================
   house-foundation.css — the bedrock
   Sacsayhuamán inspired mortarless masonry: design tokens + resilient primitives.
   No framework. Cut to fit, interlocking, flexes under change.
   Relative first: prefer ratios, vectors, live parameters, and inherited rhythm.
   Absolute files/values are fine when they serve the work; they are not the default.

   HOUSE FOUNDATION
   Reusable in-house CSS for pages we make ourselves. This file is for
   reset behavior, design tokens, accessible defaults, and generic layout
   primitives. Keep page-specific art direction, components, and one-off
   fixes in the page/site stylesheet that imports it.

   REQUIRES: <meta name="viewport"
     content="width=device-width, initial-scale=1, viewport-fit=cover">
   Compatible back to Safari 15.6: no color-mix. svh = Safari 15.4+.

   Precision matters: beware, rounding errors accumulate over centuries and
   earthquakes — conquistadores won't stand a chance trying to break this.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100%; }
img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
audio { inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"], summary { cursor: pointer; }

:root {
  --ink:#0a0512; --ink-2:#140a22; --bone:#f0e6cc;
  --marigold:#f4a01c; --marigold-2:#e8631a; --ember:#ffb733;
  --purple:#7b35c1; --pink:#e8327c; --green:#2fae4e; --red:#d81e28;
  --fg:var(--bone); --fg-dim:rgba(240,230,204,0.55); --fg-faint:rgba(240,230,204,0.35); --bg:var(--ink);
  --step--1:clamp(0.78rem,0.72rem + 0.3vw,0.90rem);
  --step-0: clamp(0.95rem,0.88rem + 0.4vw,1.10rem);
  --step-1: clamp(1.20rem,1.00rem + 1.0vw,1.60rem);
  --step-2: clamp(1.60rem,1.20rem + 2.2vw,2.60rem);
  --step-3: clamp(2.20rem,1.40rem + 4.0vw,3.60rem);
  --space-1:0.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
  --measure:62ch; --gutter:clamp(1rem,4vw,2.5rem); --radius:0.75rem; --line:thin;
  --focus-size:0.16em; --focus-gap:0.12em;
  --tap-size:2.75rem;
  --font-display:'Libre Baskerville',Georgia,serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
html { background:var(--bg); }
body {
  min-block-size:100svh;
  color:var(--fg); background:var(--bg);
  font-family:var(--font-ui); font-size:var(--step-0); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:
    max(var(--space-2),env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--space-2),env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}
.stage { min-block-size:100svh; display:grid; place-items:center; gap:var(--space-3); text-align:center; }
.wrap { inline-size:min(100%,var(--measure)); margin-inline:auto; }
.stack > * + * { margin-top:var(--space-2); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--space-1); align-items:center; }
.grid { display:grid; gap:var(--space-2); }
.switcher { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.switcher > * { flex:1 1 calc((var(--measure) - 100%) * 999); }
.frame { aspect-ratio:var(--ratio, 1); overflow:hidden; }
.frame > :where(img, video, canvas, svg) { inline-size:100%; block-size:100%; object-fit:var(--fit, cover); }
.bleed { inline-size:100%; max-inline-size:none; }
.display { font-family:var(--font-display); font-size:var(--step-3); color:var(--marigold); line-height:1.1; }
.lede { font-size:var(--step-1); }
.dim { color:var(--fg-dim); }
.faint { color:var(--fg-faint); }
.mono { font-family:var(--font-mono); letter-spacing:0.08em; }
a { color:inherit; text-decoration-thickness:0.08em; text-underline-offset:0.18em; }
:where(button, input, select, textarea, summary, a):focus-visible {
  outline:var(--focus-size) solid currentColor;
  outline-offset:var(--focus-gap);
}
:where(button, input, select, textarea) { min-block-size:var(--tap-size); }
[hidden] { display:none!important; }
.sr-only {
  position:absolute;
  inline-size:0.0625rem;
  block-size:0.0625rem;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;}
}