/* ============================================================
   Elizabeth Felton — Nemur & Friends / Liz Felton's Wild World
   Field-notebook + golden-hour savanna design system
   ============================================================ */

:root {
  /* palette */
  --foliage-900: #12281d;
  --foliage-800: #1a3627;
  --foliage-700: #244a34;
  --foliage-600: #316045;
  --foliage-300: #7ea88b;
  --bark-700: #4d3320;
  --bark-600: #6b4a2f;
  --bark-400: #a07a52;
  --ochre-600: #b9721a;
  --ochre-500: #d9902b;
  --ochre-300: #eec481;
  --paper-100: #fdf8ee;
  --paper-200: #f6ecd9;
  --paper-300: #ead9bd;
  --ink-900: #1f1a13;
  --ink-700: #3d342a;
  --ink-500: #6a5c4b;
  --mission: #d94f2b;
  --mission-dark: #a63414;

  --card: #fffcf5;
  --rule: rgba(77, 51, 32, 0.22);
  --rule-strong: rgba(77, 51, 32, 0.4);

  --shadow-sm: 0 1px 2px rgba(31, 26, 19, 0.07), 0 2px 8px rgba(31, 26, 19, 0.05);
  --shadow-md: 0 2px 4px rgba(31, 26, 19, 0.06), 0 12px 28px rgba(31, 26, 19, 0.1);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --wrap: 1180px;
  --gut: clamp(1.1rem, 4vw, 2.6rem);

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --ff-note: "Fraunces", Georgia, serif;

  --dur: 1;
}

/* motion modes ---------------------------------------------- */
html[data-motion="gentle"] { --dur: 1.9; }
html[data-motion="minimal"] { --dur: 0; }
html[data-motion="minimal"] .layer-anim,
html[data-motion="minimal"] .motes,
html[data-motion="minimal"] .lightshift { animation: none !important; }
html[data-motion="minimal"] .motes { opacity: 0 !important; }
html[data-motion="minimal"] [data-parallax] { transform: none !important; }
html[data-motion="minimal"] * { transition-duration: 0.001s !important; }
html[data-motion="gentle"] .motes { opacity: 0.35; }
html[data-motion="gentle"] [data-parallax] { --px-scale: 0.35; }

html[data-quiet="on"] {
  --paper-100: #f7f2e9;
  --paper-200: #efe7d9;
  --card: #f9f5ed;
  --foliage-900: #23342a;
  --foliage-800: #2b3d31;
  --foliage-700: #35513f;
  --mission: #b8613f;
  --ochre-500: #c08f4e;
}
html[data-quiet="on"] .hero-scene { filter: saturate(0.72) brightness(1.02); }
html[data-quiet="on"] .motes { opacity: 0.2; }

/* base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html[data-motion="minimal"] { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-900);
  font-family: var(--ff-body);
  font-size: 1.0125rem;
  line-height: 1.62;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 500px at 8% -8%, rgba(217, 144, 43, 0.10), transparent 70%),
    radial-gradient(700px 460px at 100% 4%, rgba(49, 96, 69, 0.09), transparent 70%);
  background-attachment: fixed;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--foliage-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mission-dark); }
:focus-visible {
  outline: 3px solid var(--mission);
  outline-offset: 2px;
  border-radius: 3px;
}
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  color: var(--foliage-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 3.9rem); font-weight: 600; }
h2 { font-size: clamp(1.65rem, 3.3vw, 2.5rem); font-weight: 600; }
h3 { font-size: clamp(1.16rem, 1.9vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.03rem; font-weight: 600; font-family: var(--ff-body); letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
p, li { overflow-wrap: break-word; }
.lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--ink-700); max-width: 62ch; }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.8rem; }
.muted { color: var(--ink-500); }
.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--bark-600); margin: 0 0 0.7rem;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 78ch; }
section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.6rem; top: -3rem; z-index: 90;
  background: var(--foliage-900); color: var(--paper-100);
  padding: 0.6rem 1rem; border-radius: var(--r-sm); transition: top 0.2s;
}
.skip:focus { top: 0.6rem; color: var(--paper-100); }

/* header ---------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--foliage-900) 96%, black);
  color: var(--paper-200);
  border-bottom: 1px solid rgba(238, 196, 129, 0.28);
}
.topbar-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px; padding: 0.5rem var(--gut);
  max-width: var(--wrap); margin: 0 auto; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.62rem; text-decoration: none; color: var(--paper-100); }
.brand svg { flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -0.01em; color: var(--paper-100);
}
.brand-sub { font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ochre-300); }

.nav { display: flex; gap: 0.15rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a {
  color: var(--paper-200); text-decoration: none; font-size: 0.85rem; font-weight: 500;
  padding: 0.42rem 0.6rem; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.nav a:hover { background: rgba(238, 196, 129, 0.16); color: #fff; }
.nav a[aria-current="page"] {
  background: var(--ochre-500); color: #241a08; font-weight: 700;
}
.navtoggle {
  margin-left: auto; display: none; background: rgba(255,255,255,0.08);
  color: var(--paper-100); border: 1px solid rgba(238,196,129,0.35);
  border-radius: var(--r-sm); padding: 0.42rem 0.7rem; font-size: 0.82rem; font-weight: 600;
}

/* a11y bar -------------------------------------------------- */
.a11ybar {
  background: var(--foliage-800); color: var(--paper-200);
  border-bottom: 1px solid rgba(238, 196, 129, 0.18);
  font-size: 0.8rem;
}
.a11ybar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0.45rem var(--gut);
  display: flex; gap: 0.7rem 1.1rem; align-items: center; flex-wrap: wrap;
}
.a11ybar label { font-weight: 600; letter-spacing: 0.02em; }
.seg { display: inline-flex; background: rgba(0,0,0,0.28); border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.seg button {
  background: transparent; border: 0; color: var(--paper-200);
  padding: 0.24rem 0.66rem; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600;
}
.seg button[aria-pressed="true"] { background: var(--ochre-300); color: #2a1c06; }
.switch {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(238,196,129,0.3);
  color: var(--paper-200); border-radius: var(--r-pill); padding: 0.26rem 0.7rem;
  font-size: 0.78rem; font-weight: 600;
}
.switch .dot {
  width: 26px; height: 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22); position: relative; transition: background 0.2s;
}
.switch .dot::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--paper-100); transition: left 0.2s;
}
.switch[aria-pressed="true"] .dot { background: var(--ochre-500); }
.switch[aria-pressed="true"] .dot::after { left: 14px; }
.a11y-state { color: var(--ochre-300); font-family: var(--ff-note); font-style: italic; }

/* chips ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); background: var(--paper-200); color: var(--ink-700);
  white-space: normal; text-wrap: balance; max-width: 100%;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip-spec { background: #eef1e8; color: #43552f; border-color: #b9c7a4; }
.chip-slice { background: #e6f0e9; color: #1f5236; border-color: #9dc4ac; }
.chip-rights { background: #fbe9dd; color: #8f3a13; border-color: #e3b294; }
.chip-partner { background: #f4e9f7; color: #6b3273; border-color: #d0b0d6; }
.chip-scope { background: #fdf1d6; color: #7a5410; border-color: #e0c184; }
.chiprow { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* cards ----------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: clamp(1rem, 2vw, 1.4rem); box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.35rem; }
.grid { display: grid; gap: clamp(0.9rem, 2vw, 1.3rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }

.notecard {
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(77,51,32,0.10) 27px 28px),
    var(--paper-100);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--ochre-500);
  border-radius: var(--r-sm);
  padding: 1.05rem 1.15rem;
  font-family: var(--ff-note);
  line-height: 28px;
}
.notecard strong { font-family: var(--ff-body); }

/* buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  padding: 0.66rem 1.15rem; border-radius: var(--r-pill);
  border: 1px solid var(--foliage-700); background: var(--foliage-700); color: var(--paper-100);
  text-decoration: none; transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
}
.btn:hover { background: var(--foliage-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-ochre { background: var(--ochre-500); border-color: var(--ochre-600); color: #2b1c05; }
.btn-ochre:hover { background: var(--ochre-300); color: #2b1c05; }
.btn-mission { background: var(--mission); border-color: var(--mission-dark); color: #fff; }
.btn-mission:hover { background: var(--mission-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--foliage-800); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--paper-200); color: var(--foliage-900); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btnrow { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* tabs ------------------------------------------------------ */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; margin-bottom: 1.2rem; }
.tab {
  background: var(--paper-200); border: 1px solid var(--rule); color: var(--ink-700);
  padding: 0.45rem 0.85rem; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600;
}
.tab[aria-selected="true"] { background: var(--foliage-700); border-color: var(--foliage-700); color: var(--paper-100); }
[hidden] { display: none !important; }

/* forms ----------------------------------------------------- */
label.field { display: block; margin-bottom: 0.9rem; }
label.field > span.lbl { display: block; font-weight: 700; font-size: 0.83rem; margin-bottom: 0.3rem; letter-spacing: 0.01em; }
input[type="text"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; padding: 0.58rem 0.7rem; border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: #fff; color: var(--ink-900);
}
textarea { min-height: 92px; resize: vertical; }
input:invalid:not(:placeholder-shown) { border-color: var(--mission); }
.hint { font-size: 0.78rem; color: var(--ink-500); margin-top: 0.25rem; }
.err { font-size: 0.8rem; color: var(--mission-dark); font-weight: 600; margin-top: 0.3rem; }

.check {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper-100); margin-bottom: 0.5rem;
}
.check input { margin-top: 0.28rem; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--foliage-700); }
.check span { font-size: 0.9rem; }

/* tables ---------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--card); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 0.9rem; }
th { background: var(--paper-200); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bark-700); }
tbody tr:last-child td { border-bottom: 0; }

/* banners --------------------------------------------------- */
.banner {
  border-radius: var(--r-md); padding: 1rem 1.15rem; border: 1px solid;
  display: flex; gap: 0.85rem; align-items: flex-start;
}
.banner h4 { margin: 0 0 0.25rem; }
.banner p:last-child { margin-bottom: 0; }
.banner-limit { background: #fdeee6; border-color: #e6b096; color: #56220c; }
.banner-limit h4 { color: #7d2f10; }
.banner-care { background: #eaf2ec; border-color: #a6c8b3; color: #1c3e2b; }
.banner-care h4 { color: #1c3e2b; }
.banner-gate { background: #f6efdd; border-color: #ddc38a; color: #533a09; }
.banner-gate h4 { color: #533a09; }
.banner .ic { flex: 0 0 auto; margin-top: 2px; }

/* footer ---------------------------------------------------- */
.foot {
  background: var(--foliage-900); color: var(--paper-200);
  padding: clamp(2rem, 5vw, 3.2rem) 0 1.6rem; margin-top: clamp(2rem, 6vw, 4rem);
  border-top: 4px solid var(--ochre-500);
}
.foot h4 { color: var(--ochre-300); margin-bottom: 0.6rem; }
.foot a { color: var(--paper-200); }
.foot a:hover { color: var(--ochre-300); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.32rem; font-size: 0.9rem; }
.foot .umbrella {
  margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(238,196,129,0.25);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; justify-content: space-between;
  font-size: 0.84rem;
}
.foot .umbrella strong { font-family: var(--ff-display); font-weight: 600; letter-spacing: 0.01em; color: var(--paper-100); }

/* hero / living scene --------------------------------------- */
.hero { position: relative; overflow: hidden; color: var(--paper-100); isolation: isolate; }
.hero-scene { position: absolute; inset: 0; z-index: 0; }
.hero-scene > * { position: absolute; inset: 0; }
.layer-sky {
  background:
    radial-gradient(120% 80% at 20% 0%, #f5c977 0%, #e0913b 32%, #8a6a2e 60%, #24402c 100%);
}
.lightshift {
  background: radial-gradient(60% 50% at 25% 12%, rgba(255, 236, 190, 0.55), transparent 70%);
  animation: lightdrift calc(26s * var(--dur, 1)) ease-in-out infinite alternate;
}
@keyframes lightdrift {
  from { transform: translate3d(-3%, -1%, 0) scale(1); opacity: 0.75; }
  to { transform: translate3d(6%, 3%, 0) scale(1.12); opacity: 1; }
}
.layer-hills { opacity: 0.95; }
.layer-canopy { will-change: transform; }
.motes { pointer-events: none; opacity: 0.75; transition: opacity 0.3s; }
.hero-vignette {
  background:
    linear-gradient(to bottom, rgba(18,40,29,0.20) 0%, rgba(18,40,29,0.06) 35%, rgba(18,40,29,0.55) 82%, rgba(18,40,29,0.92) 100%);
}
.hero-in { position: relative; z-index: 2; padding: clamp(2.6rem, 7vw, 5.4rem) 0 clamp(2.2rem, 5vw, 3.4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
.hero h1 { color: #fff9ec; text-shadow: 0 2px 18px rgba(18,40,29,0.55); }
.hero .lede { color: #fdf3df; max-width: 54ch; text-shadow: 0 1px 10px rgba(18,40,29,0.5); }
.hero .eyebrow { color: var(--ochre-300); }
.character { position: relative; filter: drop-shadow(0 18px 26px rgba(18,40,29,0.45)); }
.character svg { width: 100%; height: auto; }
.char-sway { animation: sway calc(7s * var(--dur, 1)) ease-in-out infinite alternate; transform-origin: 50% 92%; }
@keyframes sway { from { transform: rotate(-1.4deg) translateY(0); } to { transform: rotate(1.4deg) translateY(-6px); } }
.tail-curl { animation: tailcurl calc(9s * var(--dur, 1)) ease-in-out infinite alternate; transform-origin: 22% 62%; }
@keyframes tailcurl { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.blink { animation: blink calc(6s * var(--dur, 1)) steps(1, end) infinite; }
@keyframes blink { 0%, 92% { opacity: 0; } 94%, 98% { opacity: 1; } 100% { opacity: 0; } }
html[data-motion="minimal"] .char-sway,
html[data-motion="minimal"] .tail-curl,
html[data-motion="minimal"] .blink { animation: none !important; }
html[data-motion="minimal"] .blink { opacity: 0; }

.layercard {
  background: rgba(18, 40, 29, 0.62); border: 1px solid rgba(238,196,129,0.35);
  color: var(--paper-200); border-radius: var(--r-md); padding: 0.85rem 1rem;
  backdrop-filter: blur(3px);
}
.layercard h4 { color: var(--ochre-300); margin-bottom: 0.4rem; }
.layerlist { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.layerlist li { display: flex; gap: 0.5rem; padding: 0.2rem 0; align-items: baseline; }
.layerlist b { color: #fff; font-weight: 700; }
.layerlist .st { margin-left: auto; color: var(--ochre-300); font-variant-numeric: tabular-nums; }

/* compass tiles --------------------------------------------- */
.tile {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.15rem 1.15rem 1.25rem; box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.tile::after {
  content: ""; position: absolute; inset: auto -30% -55% auto; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(217,144,43,0.16), transparent 70%);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ochre-500); color: inherit; }
.tile .bearing {
  font-family: var(--ff-display); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bark-600); font-weight: 700;
}
.tile h3 { margin: 0; }
.tile p { font-size: 0.9rem; margin: 0; color: var(--ink-700); position: relative; z-index: 1; }
.tile .go { margin-top: auto; font-weight: 700; font-size: 0.85rem; color: var(--foliage-700); }
.tile .mark { position: relative; z-index: 1; }

/* doors ----------------------------------------------------- */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.55rem; }
.door {
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0.55rem 0.7rem;
  background: var(--paper-100); font-size: 0.84rem;
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline;
}
.door b { font-weight: 700; }
.door.open { background: #e9f1ea; border-color: #9dc4ac; }
.door.spec { background: var(--paper-200); }
.door .badge { margin-left: auto; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--ink-500); }
.door.open .badge { color: #1f5236; }

/* progress -------------------------------------------------- */
.bar { height: 9px; border-radius: var(--r-pill); background: var(--paper-300); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--foliage-600), var(--ochre-500)); transition: width 0.35s ease; }

/* reader ---------------------------------------------------- */
.reader { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start; }
.spread {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--rule-strong); box-shadow: var(--shadow-md); background: #2a4534;
}
.spread svg { width: 100%; height: auto; display: block; }
.hotspot {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 249, 236, 0.9); border: 2px solid var(--mission);
  color: var(--mission-dark); font-weight: 800; font-size: 0.95rem;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 6px rgba(217, 79, 43, 0.22);
  animation: pulse calc(2.6s * var(--dur, 1)) ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(217,79,43,0.18); } 50% { box-shadow: 0 0 0 12px rgba(217,79,43,0.06); } }
html[data-motion="minimal"] .hotspot { animation: none; }
.hotspot[aria-expanded="true"] { background: var(--mission); color: #fff; }
.pagenum {
  position: absolute; bottom: 0.6rem; right: 0.8rem; font-family: var(--ff-display);
  color: #fff8e8; font-size: 0.8rem; background: rgba(18,40,29,0.6);
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
}
.prose-spread { font-family: var(--ff-note); font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.68; color: var(--ink-900); }
.prose-spread .drop::first-letter {
  font-size: 3.1em; float: left; line-height: 0.82; padding: 0.06em 0.12em 0 0;
  color: var(--foliage-700); font-weight: 600;
}
.transcript {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-sm); background: var(--paper-200);
  padding: 0.8rem 0.9rem; font-size: 0.9rem; max-height: 220px; overflow: auto;
}
.transcript p { margin: 0 0 0.5rem; }
.transcript .cue { font-weight: 700; color: var(--bark-700); font-size: 0.78rem; letter-spacing: 0.04em; }
.voicebar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.vwave { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.vwave i { width: 4px; background: var(--foliage-600); border-radius: 2px; height: 30%; }
.vwave.on i { animation: vw calc(1.1s * var(--dur, 1)) ease-in-out infinite; }
.vwave.on i:nth-child(2) { animation-delay: 0.12s; }
.vwave.on i:nth-child(3) { animation-delay: 0.24s; }
.vwave.on i:nth-child(4) { animation-delay: 0.36s; }
.vwave.on i:nth-child(5) { animation-delay: 0.48s; }
@keyframes vw { 0%, 100% { height: 25%; } 50% { height: 100%; } }
html[data-motion="minimal"] .vwave.on i { animation: none; height: 60%; }

.pips { display: flex; gap: 0.35rem; align-items: center; }
.pip {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--paper-200); font-size: 0.78rem; font-weight: 700; color: var(--ink-700);
  display: grid; place-items: center; padding: 0;
}
.pip[aria-current="true"] { background: var(--foliage-700); color: var(--paper-100); border-color: var(--foliage-700); }
.pip.done { background: var(--ochre-300); border-color: var(--ochre-600); color: #3a2606; }

/* passport -------------------------------------------------- */
.stampgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 0.8rem; }
.stamp {
  aspect-ratio: 1 / 1; border-radius: 50%; border: 2px dashed var(--rule-strong);
  display: grid; place-items: center; text-align: center; padding: 0.5rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500); background: var(--paper-200);
}
.stamp.earned {
  border-style: solid; border-color: var(--foliage-600); color: var(--foliage-800);
  background: radial-gradient(circle at 50% 40%, #eaf2e9, #d7e6d6);
  transform: rotate(-4deg);
}
.stamp small { display: block; font-size: 0.62rem; letter-spacing: 0.04em; font-weight: 600; }

/* misc utility ---------------------------------------------- */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0; }
.sectionhead { display: flex; gap: 0.8rem 1.2rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.4rem; }
.sectionhead h2 { margin-bottom: 0.2rem; }
.panel { background: var(--paper-200); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.05rem, 2.4vw, 1.7rem); }
.panel-dark {
  background: linear-gradient(160deg, var(--foliage-800), var(--foliage-900));
  color: var(--paper-200); border: 1px solid rgba(238,196,129,0.28);
  border-radius: var(--r-lg); padding: clamp(1.1rem, 2.6vw, 1.9rem);
}
.panel-dark h2, .panel-dark h3, .panel-dark h4 { color: #fff8e8; }
.panel-dark .muted { color: #cdbfa5; }
.panel-dark a { color: var(--ochre-300); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: 0.88rem; }
.kv dt { font-weight: 700; color: var(--bark-700); }
.kv dd { margin: 0; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill-list li { background: var(--paper-200); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 0.25rem 0.65rem; font-size: 0.8rem; }
.stack > * + * { margin-top: 0.9rem; }
.out {
  background: #fffdf7; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  padding: 1rem 1.1rem; font-size: 0.92rem;
}
.out h4 { margin-bottom: 0.4rem; }
.center { text-align: center; }
.flag { font-family: var(--ff-note); font-style: italic; color: var(--bark-700); }
mark { background: var(--ochre-300); color: #33220a; padding: 0 0.15em; border-radius: 2px; }

@media print {
  .topbar, .a11ybar, .foot, .btnrow, .tabs { display: none !important; }
  body { background: #fff; }
}

/* responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .character { max-width: 340px; margin: 0 auto; }
  .reader { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0.2rem; padding: 0.5rem 0 0.7rem; margin-left: 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.6rem 0.75rem; border-radius: var(--r-sm); }
  .navtoggle { display: inline-block; }
  .topbar-in { min-height: 60px; }
  body { font-size: 0.99rem; }
  section { padding: 2.2rem 0; }
  .foot .umbrella { flex-direction: column; align-items: flex-start; }
  table { min-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Triple Lens — badges, blocks, query panel
   ============================================================ */
.lensbadge {
  display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: stretch;
  border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--rule);
  background: var(--paper-200); font-family: var(--ff-body); text-align: left;
  max-width: 100%;
}
.lensbadge-btn {
  cursor: pointer; padding: 0; position: relative; display: block;
  background: none; border: 0; width: 100%;
}
.lensbadge-btn > .lseg { border: 1px solid var(--rule); }
.lseg {
  display: inline-flex; align-items: baseline; gap: 0.32rem;
  padding: 0.2rem 0.45rem; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.045em; text-transform: uppercase; line-height: 1.25;
  border-radius: var(--r-sm); background: var(--paper-200); color: var(--ink-700);
  white-space: nowrap;
}
.lseg b {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em;
  color: var(--ink-500); border-right: 1px solid var(--rule); padding-right: 0.32rem;
}
.ls-verified { background: #e6f0e9; color: #1f5236; }
.ls-verified b { color: #3f7a58; }
.ls-contested { background: #fdf1d6; color: #7a5410; }
.ls-contested b { color: #a67a1c; }
.ls-unsupported { background: #fbe9dd; color: #8f3a13; }
.ls-unsupported b { color: #b8632f; }
.ls-null { background: #eceae4; color: #5c5346; }
.ls-null b { color: #85796a; }
.ls-refused { background: #eef1f6; color: #3c4a63; }
.ls-refused b { color: #6b7997; }

.lensbadge-btn .lensblock-holder { display: block; }
.lensblock {
  margin-top: 0.6rem; padding: 0.85rem 0.9rem; border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md); background: var(--paper-100); text-transform: none;
  letter-spacing: normal; font-weight: 400; color: var(--ink-700);
}
.lenshead {
  font-family: var(--ff-body); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--foliage-700);
  margin: 0 0 0.3rem;
}
.lv-null { color: #6a5c4b; background: #eceae4; padding: 0 0.28rem; border-radius: 3px; font-weight: 700; }
.lv-zero { color: #8f3a13; background: #fbe9dd; padding: 0 0.28rem; border-radius: 3px; font-weight: 700; }
.lv-known { color: var(--foliage-700); font-weight: 600; }

.qpanel {
  border: 1px solid var(--foliage-700); border-radius: var(--r-md);
  background: var(--foliage-900); color: #e9f0e6; padding: 0.9rem 1rem; overflow: auto;
}
.qpanel h4 { color: var(--ochre-300); margin-bottom: 0.45rem; font-size: 0.95rem; }
.qpanel pre {
  margin: 0 0 0.5rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: #d9e8d6;
}
.qpanel .prm { font-size: 0.72rem; color: #bcd0b8; margin: 0; word-break: break-word; }
.qpanel .prm code { background: rgba(255,255,255,.09); color: #f2e6cd; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em;
  background: var(--paper-200); padding: 0.05rem 0.28rem; border-radius: 4px; word-break: break-word;
}
.refusal { border-color: var(--mission-dark) !important; background: #fdf0e9; }
.refusal h4 { color: var(--mission-dark); font-family: var(--ff-body); letter-spacing: 0.06em; }
.lensgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; }
.lenspick {
  text-align: left; border: 1px solid var(--rule); background: var(--card);
  border-radius: var(--r-md); padding: 0.6rem 0.7rem; cursor: pointer;
}
.lenspick[aria-pressed="true"] { border-color: var(--ochre-500); box-shadow: 0 0 0 2px rgba(217,144,43,.22); }
.lenspick b { display: block; font-family: var(--ff-display); font-size: 0.98rem; font-weight: 600; }
.lenspick span { font-size: 0.74rem; color: var(--ink-500); }
@media (max-width: 620px) {
  .lseg { font-size: 0.6rem; padding: 0.18rem 0.36rem; }
}

/* footer: link out to Liz's separate investigations practice site */
.foot .umbrella .foot-elsewhere {
  border: 1px solid rgba(238, 196, 129, 0.45); border-radius: var(--r-pill);
  padding: 0.28rem 0.8rem; font-weight: 600; text-decoration: none; color: var(--ochre-300);
}
.foot .umbrella .foot-elsewhere:hover { background: rgba(238, 196, 129, 0.14); }

/* per-page Triple Lens bar */
.lensbar { border-bottom: 1px solid var(--rule); background: var(--paper-200); padding: 0.85rem 0 0.95rem; }
.lensbar-lead { font-size: 0.82rem; color: var(--ink-700); margin: 0 0 0.6rem; max-width: 78ch; }
.lensbar-items { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; }
.lensbar-item { min-width: min(100%, 260px); flex: 1 1 260px; }
.lensbar-label {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 0.25rem;
}

/* ---- mobile QA fixes -------------------------------------------------- */
@media (max-width: 860px) {
  /* inline two-column grids (reader, coach, builder) must collapse */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .lensbar-item { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .stampgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
}
select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .stamp { font-size: 0.63rem; letter-spacing: 0.03em; padding: 0.45rem 0.35rem; }
}

/* ============================================================
   Liz's Exotic Animals — story journey (liz-exotic-animals.html)
   Appended block. Nothing above this line was modified.
   ============================================================ */

/* private-preview banner ------------------------------------- */
.ex-preview { background: #4a1f0c; color: #ffe8d8; border-bottom: 2px solid var(--ochre-500); }
.ex-preview-in { display: flex; gap: 0.75rem 1rem; align-items: baseline; flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.ex-preview-tag {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ochre-300); color: #3a2205; border-radius: var(--r-pill); padding: 0.2rem 0.66rem;
}
.ex-preview p { margin: 0; font-size: 0.86rem; max-width: 88ch; line-height: 1.5; }

/* media labels ----------------------------------------------- */
.ex-medialabel {
  margin: 0; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700;
  color: #f3e6cc; background: rgba(18, 40, 29, 0.78); border: 1px solid rgba(238, 196, 129, 0.34);
  border-radius: var(--r-pill); padding: 0.24rem 0.66rem; display: inline-block;
}
.ex-plate .ex-medialabel { position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 3; max-width: calc(100% - 1.4rem); }
.ex-band-media .ex-medialabel { position: absolute; right: 0.7rem; top: 0.7rem; z-index: 3; }
.ex-medialabel-hero { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 3; }

/* hero ------------------------------------------------------- */
.ex-hero { position: relative; isolation: isolate; color: #fff8e8; background: #12281d; overflow: hidden; }
.ex-hero-media { position: absolute; inset: 0; z-index: 0; }
.ex-hero-media video, .ex-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ex-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12, 26, 18, 0.78) 0%, rgba(12, 26, 18, 0.52) 34%, rgba(12, 26, 18, 0.12) 62%, rgba(12, 26, 18, 0) 100%),
    linear-gradient(to bottom, rgba(12, 26, 18, 0.42) 0%, rgba(12, 26, 18, 0.22) 38%, rgba(12, 26, 18, 0.84) 100%);
}
.ex-hero-in { position: relative; z-index: 2; padding: clamp(4.5rem, 22vh, 11rem) 0 clamp(2rem, 6vh, 3.4rem); }
.ex-hero-in .eyebrow {
  color: #f6d9a4;
  text-shadow: 0 1px 3px rgba(9, 20, 14, 0.95), 0 2px 14px rgba(9, 20, 14, 0.8);
}
.ex-hero h1 { color: #fff9ec; text-shadow: 0 2px 22px rgba(9, 20, 14, 0.7); max-width: 22ch; }
.ex-hero-lede { color: #fdf3df; text-shadow: 0 1px 12px rgba(9, 20, 14, 0.75); max-width: 48ch; }
.ex-btn-onvideo { background: rgba(253, 248, 238, 0.92); color: #23402c; border-color: rgba(255,255,255,0.7); }
.ex-btn-onvideo:hover { background: #fff; color: #12281d; }

/* intro ------------------------------------------------------ */
.ex-intro { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.ex-intro-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.ex-intro-side { display: grid; gap: 0.8rem; }
.ex-howto h3 { margin-bottom: 0.5rem; }
.ex-ticks { list-style: none; margin: 0 0 0.7rem; padding: 0; font-size: 0.88rem; }
.ex-ticks li { position: relative; padding-left: 1.25rem; margin-bottom: 0.4rem; }
.ex-ticks li::before { content: "→"; position: absolute; left: 0; color: var(--ochre-600); font-weight: 700; }
.ex-count { border-left: 3px solid var(--ochre-500); padding-left: 0.7rem; margin: 0; }

/* real vs story ---------------------------------------------- */
.ex-real { background: var(--paper-200); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ex-real-grid { margin: 1.4rem 0 1.8rem; align-items: start; }
.ex-real-card { border-width: 2px; }
.ex-real-story { border-color: #e3b294; background: #fdf4ee; }
.ex-real-record { border-color: #9dc4ac; background: #f1f7f2; }
.ex-pills { margin-top: 0.6rem; }
.ex-pills li { background: #fff; border-color: #ddbfa9; font-size: 0.78rem; }
.ex-pills-on li { border-color: #9dc4ac; }
.ex-real-note { margin: 0.85rem 0 0; padding-top: 0.7rem; border-top: 1px dashed var(--rule-strong); color: var(--ink-700); }
.ex-usda { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1rem, 2.4vw, 1.6rem); }
.ex-usda .sectionhead { margin-bottom: 1rem; }
.ex-usda-table table { min-width: 320px; }
.ex-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.ex-usda-table tfoot th, .ex-usda-table tfoot td { background: var(--paper-200); border-top: 2px solid var(--rule-strong); }
.ex-real-banner { margin-top: 1.2rem; }

/* story start ------------------------------------------------ */
.ex-storystart { padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.2rem, 3vw, 2rem); text-align: left; }
.ex-storystart .eyebrow { color: var(--bark-600); }

/* stops ------------------------------------------------------ */
.ex-stop { padding: 0 0 clamp(1.8rem, 4vw, 3rem); scroll-margin-top: 74px; }
.ex-stop-bleed { position: relative; isolation: isolate; }
.ex-plate { position: relative; margin: 0; overflow: hidden; background: #12281d; }
.ex-plate-frame { position: relative; overflow: hidden; }
.ex-plate-bleed .ex-plate-frame { height: clamp(360px, 74vh, 760px); }
.ex-plate-bleed img { width: 100%; height: 100%; object-fit: cover; }
.ex-plate-small { border-radius: var(--r-lg); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-md); }
.ex-plate-small img { width: 100%; height: auto; }

/* Ken Burns — slow drift, switched off in minimal / reduced motion */
.ex-kb { transform-origin: 52% 48%; will-change: transform; animation: exkb calc(34s * var(--dur, 1)) ease-in-out infinite alternate; }
@keyframes exkb {
  from { transform: scale(1.02) translate3d(-1.1%, 0.6%, 0); }
  to { transform: scale(1.11) translate3d(1.4%, -1%, 0); }
}
.ex-stop:nth-of-type(even) .ex-kb { animation-direction: alternate-reverse; }
html[data-motion="minimal"] .ex-kb { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ex-kb { animation: none !important; transform: none !important; }
}

.ex-stop-overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(3rem, 12vh, 7rem) 0 clamp(1.1rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(10, 24, 17, 0.93) 0%, rgba(10, 24, 17, 0.78) 45%, rgba(10, 24, 17, 0) 100%);
  color: #fdf6e8; pointer-events: none;
}
.ex-stop-overlay .ex-story { pointer-events: auto; }
.ex-stop-overlay h2 { color: #fff9ec; text-shadow: 0 2px 16px rgba(9, 20, 14, 0.6); }
.ex-stop-overlay .ex-prose { color: #f6ecd9; text-shadow: 0 1px 10px rgba(9, 20, 14, 0.75); }
.ex-stop-overlay .ex-stopnum { color: var(--ochre-300); }
.ex-story { max-width: 62ch; }
.ex-story h2 { margin-bottom: 0.45rem; font-size: clamp(1.5rem, 3vw, 2.35rem); }
.ex-story h2:focus-visible { outline: 3px solid var(--ochre-500); outline-offset: 5px; }
.ex-stopnum {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bark-600); margin: 0 0 0.5rem;
}
.ex-stopnum span { color: inherit; }
.ex-prose { font-family: var(--ff-note); font-size: clamp(1.06rem, 1.45vw, 1.24rem); line-height: 1.66; margin: 0; }
.ex-stop-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.1rem, 3vw, 2.2rem); align-items: center; padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.ex-stop-night .ex-plate { background: #0b1226; }

/* field notes ------------------------------------------------ */
.ex-notes { margin-top: clamp(1.2rem, 3vw, 2rem); }
.ex-notes-head { margin-bottom: 1rem; align-items: flex-end; }
.ex-notes-head .eyebrow { margin-bottom: 0.35rem; }
.ex-species-list { display: grid; gap: 0.7rem; }
.ex-species {
  border: 1px solid var(--rule); border-left: 5px solid var(--ochre-500);
  border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-sm);
}
.ex-species[open] { border-left-color: var(--foliage-600); }
.ex-species-sum {
  cursor: pointer; list-style: none; padding: 0.72rem 0.95rem;
  display: flex; gap: 0.4rem 0.75rem; align-items: baseline; flex-wrap: wrap;
}
.ex-species-sum::-webkit-details-marker { display: none; }
.ex-species-sum:hover { background: var(--paper-100); }
.ex-species-name { font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem; color: var(--foliage-900); }
.ex-species-sci { font-style: italic; color: var(--ink-500); font-size: 0.86rem; }
.ex-species-more {
  margin-left: auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bark-600); border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 0.16rem 0.55rem;
  white-space: nowrap;
}
.ex-species-body { padding: 0 0.95rem 1rem; border-top: 1px solid var(--rule); }
.ex-again { font-family: var(--ff-note); font-style: italic; color: var(--bark-700); font-size: 0.88rem; margin: 0.7rem 0 0; }
.ex-chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0.6rem; }
.ex-chip {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.26rem 0.62rem; border-radius: var(--r-pill); border: 1px solid var(--rule-strong);
  background: var(--paper-200); color: var(--ink-700); white-space: normal; max-width: 100%;
  overflow-wrap: break-word; text-wrap: pretty;
}
.ex-tone-ok { background: #e6f0e9; color: #1f5236; border-color: #9dc4ac; }
.ex-tone-mid { background: #fdf1d6; color: #7a5410; border-color: #e0c184; }
.ex-tone-warn { background: #fbe9dd; color: #8f3a13; border-color: #e3b294; }
.ex-tone-no { background: #f7dfd8; color: #7d1f0c; border-color: #d99e8a; }
.ex-status { font-size: 0.9rem; margin: 0 0 0.8rem; }
.ex-status-k { font-weight: 800; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bark-700); margin-right: 0.35rem; }
.ex-nosrc { font-family: var(--ff-note); font-style: italic; color: var(--ink-500); font-size: 0.86rem; }
.ex-sub { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foliage-700); margin: 0 0 0.35rem; }
.ex-facts { margin: 0 0 0.9rem; padding-left: 1.15rem; font-size: 0.92rem; }
.ex-facts li { margin-bottom: 0.5rem; }
.ex-src {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--foliage-700); text-decoration: underline; text-decoration-style: dotted;
  overflow-wrap: anywhere;
}
.ex-src:hover { color: var(--mission-dark); }
.ex-myth, .ex-keeper, .ex-careline {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
  padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; font-size: 0.9rem;
}
.ex-myth { background: #fdf4ee; }
.ex-myth p { margin: 0 0 0.35rem; }
.ex-myth-claim { font-family: var(--ff-note); font-style: italic; color: #8f3a13; text-decoration: line-through; text-decoration-color: rgba(143, 58, 19, 0.45); }
.ex-myth-fix { font-weight: 500; }
.ex-keeper { background: #f1f7f2; }
.ex-keeper p { margin: 0 0 0.35rem; }
.ex-attrib { font-size: 0.8rem; color: var(--ink-500); margin-bottom: 0 !important; }
.ex-careline { background: var(--paper-100); }
.ex-careline p { margin: 0 0 0.5rem; }
.ex-careline p:last-child { margin-bottom: 0; }
.ex-lizslot {
  margin: 0; border: 2px dashed var(--ochre-500); border-radius: var(--r-sm);
  background: repeating-linear-gradient(135deg, #fffaf0 0 10px, #fdf2dd 10px 20px);
  padding: 0.6rem 0.75rem; font-size: 0.85rem;
}
.ex-lizslot-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ochre-500); color: #2b1c05; border-radius: var(--r-pill); padding: 0.16rem 0.55rem;
  margin-right: 0.4rem;
}
.ex-lizslot-body { color: var(--ink-700); }

/* video bands ------------------------------------------------ */
.ex-band { position: relative; padding: 0; margin: clamp(1.4rem, 4vw, 2.6rem) 0; background: #12281d; color: #fdf6e8; }
.ex-band-media { position: relative; height: clamp(300px, 62vh, 620px); overflow: hidden; }
.ex-band-media video, .ex-band-media img { width: 100%; height: 100%; object-fit: cover; }
.ex-band-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(2.4rem, 10vh, 5rem) 0 clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(to top, rgba(10, 24, 17, 0.92), rgba(10, 24, 17, 0));
}
.ex-band-copy h2 { color: #fff9ec; margin-bottom: 0.3rem; }
.ex-band-copy .eyebrow { color: var(--ochre-300); }
.ex-band-copy .lede { color: #f6ecd9; max-width: 56ch; margin-bottom: 0; }

/* after ------------------------------------------------------ */
.ex-after { background: var(--paper-200); border-top: 1px solid var(--rule); }

/* progress bar ----------------------------------------------- */
.ex-prog {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  background: color-mix(in srgb, var(--foliage-900) 96%, black); color: var(--paper-200);
  border-top: 1px solid rgba(238, 196, 129, 0.35); box-shadow: 0 -6px 22px rgba(9, 20, 14, 0.28);
}
.ex-prog-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0.5rem var(--gut);
  display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap;
}
.ex-prog-text { min-width: 0; flex: 1 1 190px; }
.ex-prog-num { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre-300); }
.ex-prog-label { margin: 0; font-family: var(--ff-note); font-size: 0.88rem; color: #f3e8d3; overflow-wrap: anywhere; }
.ex-prog-bar { flex: 1 1 140px; min-width: 90px; background: rgba(255, 255, 255, 0.18); }
.ex-prog-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.ex-dot {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; font-size: 0.62rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.12); color: #f0e4cc; border: 1px solid rgba(238, 196, 129, 0.3);
  display: grid; place-items: center;
}
.ex-dot:hover { background: rgba(238, 196, 129, 0.3); color: #fff; }
.ex-dot[aria-current="true"] { background: var(--ochre-500); color: #241a08; border-color: var(--ochre-300); }
.ex-prog-btns { display: flex; gap: 0.4rem; margin-left: auto; }
.ex-body { padding-bottom: 108px; }

/* responsive ------------------------------------------------- */
@media (max-width: 1040px) {
  .ex-intro-grid { grid-template-columns: 1fr; }
  .ex-prog-dots { display: none; }
}
@media (max-width: 860px) {
  .ex-stop-split { grid-template-columns: 1fr; }
  .ex-plate-bleed .ex-plate-frame { height: clamp(260px, 46vh, 420px); }
  .ex-stop-overlay {
    position: static; inset: auto; background: var(--foliage-900);
    padding: clamp(1.1rem, 4vw, 1.6rem) 0 clamp(1.2rem, 4vw, 1.7rem);
  }
  .ex-band-media { height: clamp(220px, 40vh, 340px); }
  .ex-band-copy { position: static; background: var(--foliage-900); padding: 1.1rem 0 1.3rem; }
  .ex-hero-in { padding-top: clamp(3rem, 16vh, 6rem); }
}
@media (max-width: 620px) {
  .ex-preview p { font-size: 0.8rem; }
  .ex-species-sum { padding: 0.62rem 0.7rem; }
  .ex-species-more { display: none; }
  .ex-species-body { padding: 0 0.7rem 0.85rem; }
  .ex-prog-in { gap: 0.4rem 0.6rem; padding-top: 0.42rem; padding-bottom: 0.42rem; }
  .ex-prog-bar { flex-basis: 100%; order: 3; }
  .ex-prog-btns { order: 2; }
  .ex-body { padding-bottom: 128px; }
  .ex-usda-table table { min-width: 260px; }
  .ex-facts { font-size: 0.88rem; }
}
@media print {
  .ex-prog, .ex-preview { display: none !important; }
}

/* ============================================================
   Nemur's Conspiracy — Edition Two (artwork edition)
   Scope: nemurs-conspiracy-edition-2.html only. All classes e2-*.
   Appended; nothing above this line is modified.
   ============================================================ */

/* private preview banner ------------------------------------ */
.e2-preview {
  background: #52210b;
  color: #ffe9d6;
  border-bottom: 2px solid var(--mission);
}
.e2-preview-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0.6rem var(--gut);
  display: flex; gap: 0.65rem; align-items: flex-start;
}
.e2-preview p { margin: 0; font-size: 0.86rem; line-height: 1.5; }
.e2-preview strong { color: #fff; }
.e2-preview-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mission); margin-top: 0.42rem;
  box-shadow: 0 0 0 4px rgba(217, 79, 43, 0.28);
}

/* generated-animation / provenance labels ------------------- */
.e2-artlabel {
  display: block; font-size: 0.71rem; line-height: 1.45; letter-spacing: 0.01em;
  color: var(--ink-500); font-style: italic; margin: 0.5rem 0 0; max-width: 62ch;
}
.e2-artlabel-hero { color: #f0e2c6; margin-top: 1.1rem; text-shadow: 0 1px 8px rgba(18,40,29,0.7); }

/* hero ------------------------------------------------------ */
.e2-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--paper-100); padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2rem, 5vw, 3.4rem);
  background: var(--foliage-900);
}
.e2-hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.e2-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.e2-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(12, 28, 20, 0.94) 0%, rgba(12, 28, 20, 0.82) 42%, rgba(12, 28, 20, 0.42) 100%),
    linear-gradient(to bottom, rgba(12, 28, 20, 0.5), rgba(12, 28, 20, 0.72));
}
.e2-hero-in { position: relative; z-index: 2; max-width: 760px; }
.e2-hero h1 { color: #fff9ec; margin-bottom: 0.15rem; text-shadow: 0 2px 20px rgba(12,28,20,0.7); }
.e2-hero .eyebrow { color: var(--ochre-300); }
.e2-hero .lede { color: #f3e9d6; margin-bottom: 1.2rem; }
.e2-sub {
  font-family: var(--ff-display); font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--ochre-300); margin: 0 0 0.9rem; text-shadow: 0 1px 12px rgba(12,28,20,0.6);
}
.e2-btn-onart { color: #fff4e0; border-color: rgba(255, 244, 224, 0.55); background: rgba(12,28,20,0.35); }
.e2-btn-onart:hover { background: rgba(255, 244, 224, 0.16); color: #fff; }

/* ken burns ------------------------------------------------- */
.e2-kb {
  animation: e2kb calc(30s * var(--dur, 1)) ease-in-out infinite alternate;
  transform-origin: 50% 42%; will-change: transform;
}
.e2-kb-b { animation-name: e2kb2; transform-origin: 38% 58%; }
@keyframes e2kb { from { transform: scale(1.005); } to { transform: scale(1.075) translate3d(-1.2%, -1%, 0); } }
@keyframes e2kb2 { from { transform: scale(1.06) translate3d(1.4%, 1%, 0); } to { transform: scale(1.005); } }
html[data-motion="minimal"] .e2-kb { animation: none !important; transform: none !important; }

/* "waiting for Liz's words" slot ---------------------------- */
.e2-slot {
  border: 2px dashed var(--rule-strong); border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, rgba(217,144,43,0.05) 0 10px, transparent 10px 20px), var(--paper-100);
  padding: 0.95rem 1.05rem;
}
.e2-slot-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bark-700); margin: 0 0 0.35rem;
}
.e2-slot-label::before { content: "◇ "; color: var(--ochre-600); }
.e2-slot-body { font-size: 0.87rem; color: var(--ink-700); margin: 0; }
.e2-slot-lines { display: block; margin-top: 0.75rem; }
.e2-slot-lines span {
  display: block; height: 9px; border-radius: 3px;
  background: rgba(77, 51, 32, 0.10); margin-bottom: 0.42rem;
}
.e2-slot-lines span:nth-child(2) { width: 88%; }
.e2-slot-lines span:nth-child(3) { width: 62%; margin-bottom: 0; }
.e2-slot-demo { background: var(--paper-200); }
.e2-slot-filled { border-style: solid; border-color: #9dc4ac; background: #eaf2ec; }
.e2-slot-filled .e2-slot-label { color: #1f5236; }
.e2-slot-filled .e2-slot-label::before { content: "✓ "; color: #1f5236; }
.e2-slot-held { border-color: #e3b294; background: #fbe9dd; }
.e2-slot-held .e2-slot-label { color: #8f3a13; }
.e2-slot-held .e2-slot-label::before { content: "■ "; color: #8f3a13; }

/* edition switcher ------------------------------------------ */
.e2-switch {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper-200); padding: clamp(1rem, 2.4vw, 1.5rem);
}
.e2-switch-title {
  font-family: var(--ff-display); font-size: 1.16rem; font-weight: 600;
  color: var(--foliage-900); margin: 0 0 0.85rem;
}
.e2-switch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 0.8rem; }
.e2-switch-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 0.95rem 1.05rem; text-decoration: none; color: inherit;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
a.e2-switch-card:hover { transform: translateY(-2px); border-color: var(--ochre-500); box-shadow: var(--shadow-sm); color: inherit; }
.e2-switch-card b { font-family: var(--ff-display); font-size: 1.06rem; font-weight: 600; color: var(--foliage-900); }
.e2-switch-card .small { color: var(--ink-700); }
.e2-switch-tag {
  align-self: flex-start; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bark-600);
  background: var(--paper-200); border: 1px solid var(--rule);
  border-radius: var(--r-pill); padding: 0.16rem 0.55rem;
}
.e2-switch-tag-now { background: var(--ochre-300); border-color: var(--ochre-600); color: #3a2606; }
.e2-switch-card-here { border-color: var(--ochre-500); box-shadow: inset 4px 0 0 var(--ochre-500); }
.e2-switch-go { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--foliage-700); }
.e2-switch-card-here .e2-switch-go { color: var(--ink-500); }

/* credit + open question ------------------------------------ */
.e2-credit {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2.4vw, 1.6rem); align-items: start;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.05rem, 2.4vw, 1.7rem);
}
.e2-credit-side {
  background: var(--paper-200); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 0.95rem 1.05rem;
}
.e2-open {
  border-left: 5px solid var(--ochre-500); background: var(--paper-100);
  border: 1px solid var(--rule); border-left: 5px solid var(--ochre-500);
  border-radius: var(--r-sm); padding: 0.85rem 0.95rem;
}
.e2-open-label {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bark-700); margin: 0 0 0.35rem;
}

/* the viewer ------------------------------------------------ */
.e2-book {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(1rem, 2.6vw, 1.9rem); align-items: start;
}
.e2-book:focus-visible { outline: 3px solid var(--mission); outline-offset: 6px; border-radius: var(--r-lg); }
.e2-stage-col { min-width: 0; }
.e2-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md); background: #223a2c;
  aspect-ratio: 4 / 5; display: grid; place-items: center;
}
.e2-plate { width: 100%; height: 100%; object-fit: contain; background: #1c3025; }
.e2-stage.turn-f > * { animation: e2turnf calc(0.62s * var(--dur, 1)) cubic-bezier(.22,.72,.28,1) both; }
.e2-stage.turn-b > * { animation: e2turnb calc(0.62s * var(--dur, 1)) cubic-bezier(.22,.72,.28,1) both; }
@keyframes e2turnf {
  from { opacity: 0; transform: perspective(1400px) rotateY(-13deg) translate3d(7%, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes e2turnb {
  from { opacity: 0; transform: perspective(1400px) rotateY(13deg) translate3d(-7%, 0, 0); }
  to { opacity: 1; transform: none; }
}
html[data-motion="minimal"] .e2-stage.turn-f > *,
html[data-motion="minimal"] .e2-stage.turn-b > * { animation: none !important; }
.e2-stage-held {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; height: 100%; text-align: center; padding: 1.4rem;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px), #3a2a22;
  border: 3px dashed rgba(255, 214, 186, 0.42); border-radius: var(--r-md);
  color: #ffe3d1;
}
.e2-stage-held .e2-held-title { color: #ffe3d1; }
.e2-stage-held .e2-held-sub { color: #f0c3aa; }
.e2-held-sub2 {
  margin-top: 0.9rem; font-family: var(--ff-display); font-style: italic;
  font-size: 0.92rem; color: #f5d8c6; line-height: 1.4;
  border-top: 1px solid rgba(255, 214, 186, 0.3); padding-top: 0.7rem;
}
.e2-nav { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.85rem; }
.e2-count {
  font-family: var(--ff-display); font-size: 0.86rem; color: var(--ink-700);
  font-variant-numeric: tabular-nums; margin: 0 auto;
}
.e2-pips { flex-wrap: wrap; margin-top: 0.75rem; gap: 0.3rem; }
.e2-side { min-width: 0; }
.e2-deschead {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 0.35rem;
}
.e2-why { background: var(--paper-200); }

/* endnote --------------------------------------------------- */
.e2-endnote-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1rem, 2.6vw, 1.8rem); align-items: start;
}
.e2-endnote-panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: clamp(1.05rem, 2.4vw, 1.7rem);
}
.e2-endnote-text {
  white-space: pre-wrap; font-family: var(--ff-note); font-style: italic; font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.62; color: var(--ink-900);
  margin: 0 0 1.1rem; overflow-wrap: break-word;
}
.e2-endnote-note {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper-200); padding: 0.8rem 0.9rem;
}
.e2-endnote-fig { margin: 0; }
.e2-endnote-fig img {
  width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--rule-strong);
  /* the supplied file carries blank padding above and below the printed panel;
     this crops the padding for display only — the file itself is untouched */
  aspect-ratio: 648 / 880; object-fit: cover; object-position: 50% 50%;
}
.e2-endnote-fig figcaption { margin-top: 0.5rem; }

/* author ---------------------------------------------------- */
.e2-authorgrid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.6vw, 1.8rem); align-items: start;
}
.e2-authorvid { margin: 0; }
.e2-video, .e2-video-still {
  width: 100%; height: auto; border-radius: var(--r-md);
  border: 1px solid var(--rule-strong); background: var(--paper-200);
}
.e2-video-still { display: none; }
html[data-motion="minimal"] .e2-video { display: none; }
html[data-motion="minimal"] .e2-video-still { display: block; }
html[data-motion="minimal"] .e2-vidctl { display: none; }
.e2-authorplates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.85rem; }
.e2-mini {
  margin: 0; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column;
}
.e2-mini img { width: 100%; height: 200px; object-fit: cover; object-position: 50% 30%; }
.e2-mini figcaption { padding: 0.7rem 0.8rem 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; }
.e2-mini figcaption b { font-size: 0.82rem; font-weight: 700; color: var(--foliage-900); }
.e2-mini figcaption .small { color: var(--ink-700); font-size: 0.82rem; }
.e2-mini-alt img { height: 168px; }
.e2-mini-held { border-style: dashed; border-color: #e3b294; background: #fbe9dd; }
.e2-altgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 0.85rem; }

/* held back cover ------------------------------------------- */
.e2-held {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1rem, 2.6vw, 1.8rem); align-items: center;
  background: #fdf3ee; border: 1px solid #e3b294; border-radius: var(--r-lg);
  padding: clamp(1.05rem, 2.4vw, 1.7rem);
}
.e2-held-slot {
  aspect-ratio: 3 / 4; border: 3px dashed #e0a884; border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, rgba(224,168,132,0.12) 0 12px, transparent 12px 24px), #fff8f4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; text-align: center; padding: 1.2rem;
}
.e2-held-slot-sm { aspect-ratio: 4 / 3; border-width: 2px; margin: 0.8rem 0.8rem 0; }
.e2-held-mark { display: block; margin-bottom: 0.3rem; }
.e2-held-title {
  font-family: var(--ff-display); font-size: 1.06rem; font-weight: 600; color: #8f3a13;
  margin: 0; display: block;
}
.e2-held-sub { font-size: 0.8rem; color: #a5623c; display: block; margin: 0; }

/* responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .e2-book, .e2-endnote-grid, .e2-authorgrid, .e2-credit, .e2-held { grid-template-columns: 1fr; }
  .e2-held-slot { aspect-ratio: 16 / 9; max-width: 420px; }
  .e2-stage { aspect-ratio: 1 / 1; }
}
@media (max-width: 620px) {
  .e2-hero-scrim { background: linear-gradient(to bottom, rgba(12,28,20,0.72), rgba(12,28,20,0.93)); }
  .e2-count { margin: 0; width: 100%; order: 3; text-align: center; }
  .e2-nav .btn { flex: 1 1 46%; }
  .e2-mini img { height: 160px; }
  .e2-endnote-text { font-size: 0.99rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .e2-kb { animation: none !important; transform: none !important; }
  html:not([data-motion="full"]) .e2-video { display: none; }
  html:not([data-motion="full"]) .e2-video-still { display: block; }
  html:not([data-motion="full"]) .e2-vidctl { display: none; }
}

/* ============================================================
   Front door — two-edition band (Nemur's Conspiracy E1 + E2)
   ============================================================ */
.ed2band { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(1.6rem, 4vw, 2.6rem); background: var(--paper-200); }
.ed2grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem); align-items: stretch;
}
.ed2card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ed2card:hover, .ed2card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); }
.ed2card-new { border-color: rgba(185, 114, 26, 0.55); box-shadow: 0 0 0 3px rgba(238, 196, 129, 0.28), var(--shadow-sm); }
.ed2flag {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 3;
  font-family: var(--ff-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.62rem; border-radius: var(--r-pill);
  background: var(--ochre-600); color: #fff8ea;
}
.ed2flag-quiet { background: rgba(31, 26, 19, 0.78); color: #f6ecd9; }
.ed2media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--foliage-900); }
.ed2media img, .ed2media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed2media-vid video { object-position: center 32%; }
.ed2vidlabel {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.24rem 0.5rem; border-radius: var(--r-pill);
  background: rgba(12, 26, 18, 0.82); color: #f3e6cd;
}
.ed2body { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1rem, 2vw, 1.5rem); flex: 1 1 auto; }
.ed2body h3 { margin: 0; font-family: var(--ff-display); font-size: 1.18rem; color: var(--foliage-800); }
.ed2body p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--ink-700); }
.ed2body .chiprow { margin: 0.1rem 0 0; }
.ed2body .go { margin-top: auto; font-weight: 700; color: var(--ochre-600); font-size: 0.88rem; }
.ed2foot { margin: clamp(1.1rem, 2.4vw, 1.7rem) 0 0; max-width: 78ch; color: var(--ink-500); }

@media (max-width: 780px) {
  .ed2grid { grid-template-columns: minmax(0, 1fr); }
  .ed2media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .ed2card { transition: none; }
  .ed2card:hover, .ed2card:focus-visible { transform: none; }
}