/* ============================================================
   Native Past — design system
   "The Living Index" · archival paper, lamplight, letterpress
   No frameworks. No dependencies. Hand-set.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --paper: #FBF7EF;
  --paper-deep: #F3ECDD;
  --ink: #2A2118;
  --ink-soft: #51453A;
  --ink-faint: #8A7B6C;
  --saddle: #8B4513;
  --saddle-deep: #6E3208;
  --ember: #C8702A;
  --gold: #B98A2F;
  --night: #181210;
  --night-2: #221A14;
  --on-night: #EFE5D5;
  --on-night-soft: #B7A890;
  --hairline: rgba(42, 33, 24, 0.14);
  --hairline-strong: rgba(42, 33, 24, 0.28);

  --cherokee: #B5482E;
  --choctaw: #2E5A88;
  --chickasaw: #2E7D4F;
  --creek: #C8702A;
  --muscogee: #C8702A;
  --seminole: #6B4A8A;
  --delaware: #7A6230;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* fluid type scale */
  --t-hero: clamp(2.6rem, 7.2vw, 5.6rem);
  --t-1: clamp(2rem, 4.6vw, 3.4rem);
  --t-2: clamp(1.5rem, 2.8vw, 2.1rem);
  --t-3: clamp(1.17rem, 1.8vw, 1.35rem);
  --t-body: clamp(1rem, 1.1vw, 1.0925rem);
  --t-small: 0.875rem;
  --t-micro: 0.76rem;

  --space: clamp(1rem, 2.5vw, 2rem);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-1: 0 1px 2px rgba(42, 33, 24, .07), 0 4px 16px rgba(42, 33, 24, .06);
  --shadow-2: 0 2px 6px rgba(42, 33, 24, .09), 0 18px 48px rgba(42, 33, 24, .12);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);
  --dur: .65s;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--saddle); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--saddle-deep); }
::selection { background: rgba(139, 69, 19, .22); }
.btn::selection { background: rgba(255, 248, 238, .92); color: var(--saddle-deep); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 .5em;
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); font-weight: 600; }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: calc(var(--t-body) * 1.18); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--ink-faint); }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); letter-spacing: .02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* letterpress display text on paper */
.letterpress {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 0 rgba(42, 33, 24, .12);
}

/* ---------- paper grain (whole site) ---------- */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 2147483646;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap { width: min(1120px, calc(100% - 2 * var(--space))); margin-inline: auto; }
.wrap-narrow { width: min(760px, calc(100% - 2 * var(--space))); margin-inline: auto; }
section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .35s var(--ease-out);
}
.site-head.is-scrolled { box-shadow: var(--shadow-1); }
.site-head .bar {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 620; font-size: 1.18rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.brand svg { width: 27px; height: 27px; }
.nav { display: flex; gap: 1.15rem; margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: var(--t-small);
  font-weight: 530; position: relative; padding-block: .4rem;
  white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 2px solid var(--saddle);
  transition: right .32s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--saddle);
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--btn-bg); color: #FFF8EE;
  font: 600 var(--t-small)/1 var(--font-ui);
  letter-spacing: .01em;
  padding: .95rem 1.45rem; border-radius: 999px;
  border: 0; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px rgba(110, 50, 8, .28);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background .25s;
  will-change: transform;
}
.btn::before { /* sheen sweep */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 222, .35) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 34px rgba(110, 50, 8, .36); }
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: scale(.97); }
.btn-ghost {
  --btn-bg: transparent;
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--saddle); color: var(--saddle-deep); }
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--saddle); outline-offset: 2.5px; border-radius: 4px;
}

/* ---------- tribe chips ---------- */
.chip {
  --chip: var(--ink-faint);
  display: inline-flex; align-items: center; gap: .45rem;
  font: 560 var(--t-micro)/1 var(--font-ui); letter-spacing: .035em; text-transform: uppercase;
  color: var(--chip);
  border: 1.5px solid color-mix(in srgb, var(--chip) 42%, transparent);
  background: color-mix(in srgb, var(--chip) 7%, transparent);
  padding: .5rem .8rem; border-radius: 999px;
  cursor: pointer; user-select: none;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease-spring);
}
.chip::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: var(--chip); }
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  background: var(--chip); color: var(--paper);
  border-color: var(--chip);
}
.chip[aria-pressed="true"]::before { background: var(--paper); }
.chip[data-tribe="cherokee"]  { --chip: var(--cherokee); }
.chip[data-tribe="choctaw"]   { --chip: var(--choctaw); }
.chip[data-tribe="chickasaw"] { --chip: var(--chickasaw); }
.chip[data-tribe="creek"]     { --chip: var(--creek); }
.chip[data-tribe="seminole"]  { --chip: var(--seminole); }
.chip[data-tribe="delaware"]  { --chip: var(--delaware); }

.badge {
  display: inline-block; font: 600 var(--t-micro)/1 var(--font-ui);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .32rem .55rem; border-radius: 6px;
  background: color-mix(in srgb, var(--tone, var(--ink-faint)) 12%, transparent);
  color: var(--tone, var(--ink-soft));
}
.badge[data-tribe="cherokee"]  { --tone: var(--cherokee); }
.badge[data-tribe="choctaw"]   { --tone: var(--choctaw); }
.badge[data-tribe="chickasaw"] { --tone: var(--chickasaw); }
.badge[data-tribe="creek"]     { --tone: var(--creek); }
.badge[data-tribe="seminole"]  { --tone: var(--seminole); }
.badge[data-tribe="delaware"]  { --tone: var(--delaware); }

/* ---------- reveal-on-scroll motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform, filter;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* scroll-driven drift for big numerals (progressive) */
@supports (animation-timeline: view()) {
  .drift { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { transform: translateY(7vh); } to { transform: translateY(-7vh); } }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(78svh, 760px);
  display: grid; place-items: center;
  overflow: clip;
  background:
    radial-gradient(1100px 520px at 70% -10%, rgba(200, 144, 42, .16), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(139, 69, 19, .11), transparent 65%),
    linear-gradient(var(--paper), var(--paper-deep) 130%);
  padding-block: 0;
  border-bottom: 1px solid var(--hairline);
}
.hero-mark {
  position: absolute; z-index: 1;
  width: min(58vw, 640px); height: auto;
  right: -9%; top: 50%; transform: translateY(-52%) rotate(8deg);
  opacity: .055;
  pointer-events: none;
}
.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0; margin: 3rem 0 0; padding: 0;
}
.hero-stats div {
  padding: .2rem 1.6rem;
  border-left: 1px solid var(--hairline-strong);
}
.hero-stats div:first-child { border-left: 0; }
.hero-stats dt {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 560; color: var(--saddle-deep);
  letter-spacing: -0.01em;
}
.hero-stats dd {
  margin: .1rem 0 0;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .hero { min-height: auto; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 0; }
  .hero-stats div:nth-child(odd) { border-left: 0; }
  .hero-mark { width: 90vw; right: -34%; opacity: .04; }
}
/* Phone-width header: everything on one line, no internal wrapping */
@media (max-width: 480px) {
  .site-head .bar { gap: .7rem; }
  .brand { font-size: 1.02rem; gap: .45rem; }
  .brand svg { width: 23px; height: 23px; }
  .nav { gap: .7rem; }
  .nav a { font-size: .8rem; }
  .nav .btn { padding: .45rem .75rem !important; font-size: .76rem; }
}
.hero-inner {
  position: relative; z-index: 3; text-align: center;
  padding: clamp(1.4rem, 3.5vh, 2.4rem) 0 clamp(1.8rem, 4.5vh, 2.8rem);
  pointer-events: none;
}
.hero-inner > * { pointer-events: auto; }
.hero-kicker {
  font: 600 var(--t-micro)/1 var(--font-ui);
  letter-spacing: .22em; text-transform: uppercase; color: var(--saddle);
  /* it's a <p>: the global 68ch cap would otherwise pin its box left */
  margin-inline: auto;
}
.hero h1 {
  font-size: var(--t-hero);
  font-weight: 480;
  margin: .35em 0 .22em;
}
.hero h1 em { font-style: italic; font-weight: 540; color: var(--saddle-deep); }
.hero .lede { margin-inline: auto; max-width: 44ch; }
.hero-cta { display: flex; gap: .9rem; justify-content: center; margin-top: 2.1rem; flex-wrap: wrap; }


/* ---------- dark narrative chapters ---------- */
.night {
  background:
    radial-gradient(900px 480px at 80% 0%, rgba(200, 112, 42, .12), transparent 60%),
    linear-gradient(var(--night), var(--night-2));
  color: var(--on-night);
}
.night h2, .night h3 { color: #F6EBD7; }
.night .muted { color: #A8967F; }
.night .rule { border-color: rgba(239, 229, 213, .14); }
.chapter { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.chapter + .chapter { margin-top: clamp(3.5rem, 9vw, 7rem); }
.chapter:nth-child(even) .chapter-num { order: 2; }
.chapter-num {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 9.5vw, 7.6rem);
  font-weight: 320; line-height: .95;
  letter-spacing: -0.03em;
  color: transparent;
  background: linear-gradient(160deg, #F1DDBA, #C8902A 55%, #8B5A13);
  -webkit-background-clip: text; background-clip: text;
  font-variant-numeric: tabular-nums;
}
.chapter-num .unit { display: block; font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #A8967F; margin-top: .9rem; -webkit-text-fill-color: #A8967F; }

/* ---------- ledger-paper record cards ---------- */
.record {
  background:
    repeating-linear-gradient(transparent, transparent 27px, rgba(42, 33, 24, .055) 28px),
    linear-gradient(#FFFDF8, var(--paper-deep));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.1rem 1.25rem;
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out), border-color .3s;
}
.record:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--hairline-strong); }

/* ---------- search page ---------- */
.search-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 1.2rem; }
.searchbox {
  display: flex; align-items: center; gap: .8rem;
  background: #FFFDF8;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 999px;
  padding: .45rem .6rem .45rem 1.4rem;
  box-shadow: var(--shadow-1);
  transition: border-color .3s, box-shadow .3s;
}
.searchbox:focus-within { border-color: var(--saddle); box-shadow: 0 0 0 4px rgba(139, 69, 19, .12), var(--shadow-2); }
.searchbox input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: 480 clamp(1.05rem, 1.7vw, 1.25rem)/1.3 var(--font-display);
  color: var(--ink); min-width: 0;
}
.searchbox input::placeholder { color: var(--ink-faint); font-style: italic; }
.filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-top: 1.1rem; }
.filters select {
  font: 530 var(--t-small)/1 var(--font-ui); color: var(--ink-soft);
  background: transparent; border: 1.5px solid var(--hairline-strong);
  border-radius: 999px; padding: .55rem .8rem;
}
[hidden] { display: none !important; } /* keep the hidden attribute authoritative over display rules */

/* the About-this-record-set band (night treatment, readable body type) */
.about-band #context-card p {
  font-size: 1.04rem; line-height: 1.7; color: #C9B89F; margin: 0 0 .9em;
}
.about-band #context-card p:last-child { margin-bottom: 0; }
.about-band #context-card strong { color: #F6EBD7; }
.about-band #context-card a { color: #E8C98A; }
.about-band #context-card em { color: #D9C7A8; }
.filters .numwrap {
  display: inline-flex; align-items: center; gap: .15rem; cursor: text;
  background: #FFFDF8; border: 1.5px solid var(--saddle);
  border-radius: 999px; padding: .12rem .3rem .12rem .9rem;
  transition: box-shadow .25s, border-color .25s;
}
.filters .numwrap:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(139,69,19,.14); }
.filters .numlabel {
  font: 700 .72rem/1 var(--font-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--saddle); white-space: nowrap;
}
.filters .numbox {
  font: 530 var(--t-small)/1 var(--font-ui); color: var(--ink);
  background: transparent; border: none;
  padding: .5rem .4rem; width: 4.6rem; font-variant-numeric: tabular-nums;
}
.filters .numbox:focus { outline: none; }
.filters .numbox::placeholder { color: var(--ink-faint); opacity: .55; }
.filters-sep {
  width: 1px; align-self: stretch; background: var(--hairline);
  margin-inline: .35rem;
}
.result-meta { color: var(--ink-faint); font-size: var(--t-small); margin-block: 1.2rem .4rem; min-height: 1.4em; }

.results { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
.result {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: .25rem 1rem;
  align-items: center;
  cursor: pointer;
}
.result .r-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 560; }
.result .r-sub { display: flex; flex-wrap: wrap; gap: .45rem .9rem; align-items: center; color: var(--ink-soft); font-size: var(--t-small); }
.result .r-go { color: var(--ink-faint); transition: transform .35s var(--ease-spring), color .25s; font-size: 1.25rem; }
.result:hover .r-go { transform: translateX(4px); color: var(--saddle); }
.result.entering { animation: result-in .6s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes result-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.struck-note { color: var(--ink-faint); font-style: italic; }

/* skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: var(--paper-deep); border-radius: var(--radius); height: 74px; }
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 253, 248, .9) 50%, transparent 70%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- detail drawer ---------- */
.drawer-veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24, 18, 16, .42);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.drawer-veil.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(560px, 94vw);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  box-shadow: -24px 0 80px rgba(24, 18, 16, .3);
  transform: translateX(calc(100% + 40px));
  transition: transform .55s var(--ease-out);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.6rem 1.7rem 2.2rem;
}
.drawer.open { transform: none; }
.drawer .d-close {
  position: sticky; top: 0; float: right;
  background: var(--paper-deep); border: 1px solid var(--hairline);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.05rem; cursor: pointer; color: var(--ink-soft);
  transition: transform .3s var(--ease-spring), color .2s;
}
.drawer .d-close:hover { transform: rotate(90deg); color: var(--ink); }
.persons-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.persons-table th { text-align: left; font: 600 var(--t-micro)/1.3 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: .5rem .55rem .35rem; border-bottom: 1.5px solid var(--hairline-strong); }
.persons-table td { padding: .5rem .55rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.v-badge {
  display: inline-block; font-size: .62em; font-weight: 700;
  color: var(--chickasaw); background: color-mix(in srgb, var(--chickasaw) 14%, transparent);
  border-radius: 99px; padding: .18em .5em; vertical-align: .25em; cursor: help;
}
.rel-list { display: grid; gap: .4rem; }
.rel-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; text-align: left; cursor: pointer;
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: .6rem .8rem; font: inherit; color: inherit;
  transition: border-color .25s, transform .3s var(--ease-spring), box-shadow .3s;
}
.rel-item:hover { border-color: var(--saddle); transform: translateX(3px); box-shadow: var(--shadow-1); }
.rel-item .rel-name { font-family: var(--font-display); font-weight: 560; }
.rel-item .rel-sub { font-size: var(--t-micro); color: var(--ink-faint); }
.transcript {
  font-family: var(--font-display); font-style: italic; font-size: .95rem;
  color: var(--ink-soft); white-space: pre-wrap;
  max-height: 200px; overflow-y: auto;
  background: #FFFDF8; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}

/* ---------- guides / prose ---------- */
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.4em 0; padding: .9em 1.2em;
  border-left: 3px solid var(--gold);
  background: var(--paper-deep); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-style: italic; color: var(--ink-soft);
}
.guide-card { display: block; text-decoration: none; color: inherit; padding: 1.5rem 1.6rem; }
.guide-card h3 { transition: color .25s; }
.guide-card:hover h3 { color: var(--saddle-deep); }
.guide-card .more { color: var(--saddle); font-weight: 600; font-size: var(--t-small); }

/* ---------- footer ---------- */
.site-foot {
  background: var(--night); color: #A8967F;
  padding-block: 3.2rem 2.4rem; font-size: var(--t-small);
}
.site-foot a { color: #D8C5A5; }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
.site-foot .notice { font-size: var(--t-micro); line-height: 1.7; color: #8B7A64; max-width: 64ch; }

/* ---------- helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space); }
.stack > * + * { margin-top: .9rem; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.kicker {
  font: 600 var(--t-micro)/1 var(--font-ui);
  letter-spacing: .22em; text-transform: uppercase; color: var(--saddle);
  display: block; margin-bottom: 1rem;
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter:nth-child(even) .chapter-num { order: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; }
  .nav { gap: .85rem; }
  .nav .nav-sec { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}
  
/* ---------- view transitions (progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- App store badges (official Apple/Google art; not yet linked) ----------
   Both assets are exact-cropped to the visible pill (the Google PNG was
   extracted from Google's padded art), so equal CSS height = equal badges. */
.store-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 1.1rem;
}
.store-badge { display: inline-block; line-height: 0; }
.store-badge img {
  height: 54px; width: auto; display: block; border: 0;
}
.store-badges + .micro { margin-top: .55rem; }
/* Hero placement: centered like .hero-cta (flex rows ignore text-align) */
.hero .store-badges { justify-content: center; margin-top: 1.4rem; }
.hero .store-badges + .micro { text-align: center; margin-inline: auto; }

/* ---------- mobile hero: badges above the fold on first visit ----------
   (Placed at end of file: the earlier 720px block precedes the hero base
   rules and loses the cascade at equal specificity.) */
@media (max-width: 720px) {
  .hero-inner { padding-top: 1.1rem; }
  .hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.5rem); }
  .hero .lede { font-size: .95rem; line-height: 1.55; margin-top: .9rem; }
  .hero-cta { margin-top: 1.2rem; }
  .hero .store-badges { margin-top: 1rem; }
  .store-badge img { height: 46px; }
  .hero .store-badges + .micro { margin-top: .45rem; }
  .hero-stats { margin-top: 2rem; }
}

/* ---------- mobile scroll cue (homepage hero) ---------- */
.hero-scroll-cue { display: none; }
@media (max-width: 720px) {
  .hero-scroll-cue {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px;
    color: var(--saddle); background: rgba(255, 253, 248, .92);
    border: 1.5px solid var(--hairline-strong);
    box-shadow: var(--shadow-1);
    z-index: 40;
    animation: cue-bob 2.4s ease-in-out infinite;
    transition: opacity .45s, visibility .45s;
  }
  .hero-scroll-cue.is-gone { opacity: 0; visibility: hidden; }
}
@keyframes cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* ---------- mobile search form: stacked, uniform touch targets ---------- */
@media (max-width: 720px) {
  .searchbox { padding: .4rem .45rem .4rem 1rem; }
  .searchbox input { font-size: 1rem; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .filters .filters-sep { display: none; }
  .filters select {
    width: 100%; min-height: 46px; background: #FFFDF8;
    grid-column: 1 / -1;
  }
  .filters .numwrap {
    width: 100%; min-height: 46px;
    padding: .12rem .6rem .12rem .9rem;
  }
  .filters .numwrap.coll-only { grid-column: 1 / -1; }
  .filters .numbox { width: 100%; flex: 1; }
}

/* the scroll cue lands the badges just below the sticky bar */
#hero-badges { scroll-margin-top: 78px; }

/* #apps badges: centered like the hero's (incl. their caption + link lines;
   the p rules need margin-inline:auto against the global 68ch cap) */
#apps .store-badges { justify-content: center; }
#apps .store-badges ~ .micro,
#apps .store-badges ~ .small { text-align: center; margin-inline: auto; }