/* ERINIUM® · erinium.com — Museum-grade scroll archive */

:root {
  --black: #000000;
  --ink: #1a1612;
  --ink-soft: #0a0a0a;
  --ink-warm: #14110d;
  --paper-cream: #f3eada;
  --paper-warm: #f0e6cf;
  --paper: #ede2c4;
  --gold: #e8c98e;
  --gold-bright: #f4d99e;
  --gold-deep: #c9a06a;
  --bronze: #6b5532;
  --bronze-dark: #4a3a22;
  --crimson: #5c1818;
  --hairline: rgba(232, 201, 142, 0.32);
  --hairline-strong: rgba(232, 201, 142, 0.55);
  --hairline-ink: rgba(26, 22, 18, 0.3);
  --hairline-ink-strong: rgba(26, 22, 18, 0.55);

  --foil: linear-gradient(180deg, #5a4220 0%, #8b6f3f 18%, #c9a06a 38%, #e8c98e 50%, #c9a06a 62%, #8b6f3f 82%, #5a4220 100%);

  --display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --display-soft: "Cormorant Garamond", Georgia, serif;
  --body: "EB Garamond", Georgia, serif;
  --mono: "Special Elite", "IBM Plex Mono", "Courier New", monospace;
  --mono-tech: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto; /* native handed off to Lenis for smoother inertia */
  font-size: 18px;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Smoother reveals — gentler curve, longer duration for a calmer feel */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--paper-cream);
  font-family: var(--body);
  font-size: clamp(22px, 1.6vw, 38px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Custom scrollbar — thin gold rail */
html { scrollbar-width: thin; scrollbar-color: rgba(201, 169, 110, 0.4) #000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5a4220 0%, #c9a06a 50%, #5a4220 100%);
  border: 2px solid #000;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8b6f3f 0%, #e8c98e 50%, #8b6f3f 100%); }

/* ─── Scroll progress rail (top) ─── */
.scroll-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(201, 169, 110, 0.08);
  z-index: 90;
  pointer-events: none;
}
.scroll-rail .fill {
  height: 100%;
  background: var(--foil);
  width: 0%;
  transition: width 80ms linear;
}

/* ─── Reveal-on-scroll primitives ─── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.65s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.75s; }
.reveal-stagger.in > *:nth-child(n+9) { transition-delay: 0.85s; }

.reveal-rule {
  position: relative;
}
.reveal-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: -10px;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.reveal-rule.in::after { width: 100%; }

/* parallax wrappers */
.parallax-slow { transition: transform 0.1s linear; will-change: transform; backface-visibility: hidden; }
[data-parallax] { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-rule::after { width: 100% !important; transition: none !important; }
}

/* ─── Back-to-top arrow ─── */
.to-top {
  position: fixed;
  right: clamp(18px, 2.4vw, 32px);
  bottom: clamp(18px, 2.4vw, 32px);
  width: clamp(54px, 5vw, 64px);
  height: clamp(54px, 5vw, 64px);
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 95;
  font-family: var(--mono);
}
.to-top.visible {
  opacity: 0.982;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.to-top:hover {
  opacity: 1;
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.to-top .arrow {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1;
  font-style: italic;
  margin-top: -2px;
}
.to-top .lbl {
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9855;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--black); }

/* ----- Atmosphere: noise grain overlay (page-level) ----- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.79  0 0 0 0 0.66  0 0 0 0 0.43  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ----- Chapter shell ----- */
.chapter {
  position: relative;
  width: 100%;
  padding: clamp(48px, 7vw, 120px) clamp(20px, 5vw, 80px);
  overflow: hidden;
}
.chapter--dark { background: var(--ink-soft); color: var(--paper-cream); }
.chapter--ink  { background: var(--ink-warm); color: var(--paper-cream); }
.chapter--cream { background: var(--paper-cream); color: var(--ink); }

.inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* corner ticks (museum vitrine label) */
.ticks {
  position: absolute;
  inset: clamp(20px, 3vw, 40px);
  pointer-events: none;
}
.ticks::before, .ticks::after,
.ticks > i::before, .ticks > i::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  opacity: 0.35;
}
.ticks::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ticks::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ticks > i::before { content: ""; bottom: 0; left: 0; position: absolute; width: 14px; height: 14px; border: 1px solid currentColor; border-right: 0; border-top: 0; opacity: 0.35; }
.ticks > i::after  { content: ""; bottom: 0; right: 0; position: absolute; width: 14px; height: 14px; border: 1px solid currentColor; border-left: 0; border-top: 0; opacity: 0.35; }

/* ----- Top / bottom strips ----- */
.strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-bottom: clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.982;
}
.chapter--cream .strip { color: var(--bronze); border-bottom-color: var(--hairline-ink); }
.strip > :nth-child(1) { text-align: left; }
.strip > :nth-child(2) { text-align: center; }
.strip > :nth-child(3) { text-align: right; }

.strip--bottom {
  border-top: 1px solid var(--hairline);
  border-bottom: 0;
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: 0;
  margin-top: clamp(48px, 7vw, 96px);
  opacity: 0.9852;
}
.chapter--cream .strip--bottom { border-top-color: var(--hairline-ink); }

/* ----- Mono labels (eyebrows) ----- */
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
}
.chapter--cream .eyebrow { color: var(--bronze); }
.eyebrow--small { font-size: clamp(0.92rem, 1.1vw, 1.05rem); letter-spacing: 0.28em; opacity: 0.9855; }

/* ----- Display type ----- */
.display-xl, .display-l, .display-m {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0;
}
.display-xl { font-size: clamp(2.25rem, 4.2vw, 4.5rem); line-height: 1.05; }
.display-l  { font-size: clamp(1.85rem, 3.5vw, 3.5rem); line-height: 1.08; }
.display-m  { font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.1; }

.italic-gold { font-style: italic; color: var(--gold); font-weight: 400; font-family: var(--display); }
.italic-bronze { font-style: italic; color: var(--bronze); font-weight: 400; font-family: var(--display); }

.lead {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  line-height: 1.55;
  font-weight: 400;
  max-width: 62ch;
  color: inherit;
  opacity: 1;
}
.body-text { font-size: clamp(0.95rem, 1.15vw, 1.15rem); line-height: 1.6; max-width: 62ch; opacity: 0.986; }

p { margin: 0 0 1em 0; }

/* hairline rule */
.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: clamp(20px, 3vw, 36px) 0;
}
.chapter--cream .rule { background: var(--hairline-ink); }
.rule--short { width: 60px; margin: clamp(14px, 2vw, 22px) 0; }

/* ----- Foil text ----- */
.foil {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* ----- Hero topographic rings ----- */
.topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
  opacity: 0.98588;
}
.topo svg { width: min(130vh, 1300px); height: min(130vh, 1300px); }

/* ----- Hero center ----- */
.hero-stack {
  position: relative; z-index: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(40px, 7vw, 96px) 0;
}
.hero-logo {
  width: clamp(280px, 38vw, 520px);
  height: auto;
  filter: drop-shadow(0 0 60px rgba(201, 169, 110, 0.18));
}
.hero-title { max-width: 18ch; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-meta .key { color: var(--gold); opacity: 0.9852; display: block; margin-bottom: 10px; }
.hero-meta .val { color: var(--paper-cream); opacity: 0.986; font-family: var(--display); font-style: italic; font-size: clamp(0.95rem, 1.15vw, 1.15rem); letter-spacing: 0; text-transform: none; }
.hero-meta .scroll-cue { color: var(--gold); animation: pulse 2.4s ease-in-out infinite; font-size: clamp(1rem, 1.3vw, 1.2rem); }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }

@media (max-width: 800px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-meta .scroll-cue-cell { grid-column: span 2; text-align: center; order: 99; }
}

/* ----- Origin timeline ----- */
.timeline {
  display: grid;
  grid-template-columns: minmax(120px, 18%) 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.timeline-row {
  display: contents;
}
.timeline-row > .year {
  font-family: var(--mono);
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.16em;
  color: var(--gold);
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid var(--hairline);
  align-self: start;
}
.timeline-row > .event {
  font-family: var(--display-soft);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.32;
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid var(--hairline);
  color: var(--paper-cream);
  opacity: 1;
}
.timeline-row:first-child > .year,
.timeline-row:first-child > .event { border-top: 0; }

@media (max-width: 700px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline-row > .year { padding-bottom: 0; border-top: 1px solid var(--hairline); }
  .timeline-row > .event { padding-top: clamp(8px, 1.5vw, 14px); border-top: 0; }
}

/* ----- Pull quote ----- */
.pullquote {
  margin: clamp(40px, 6vw, 80px) 0;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px);
  border-left: 1px solid var(--gold);
  max-width: 880px;
}
.pullquote q {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  line-height: 1.16;
  color: var(--gold);
  display: block;
  quotes: none;
}
.pullquote q::before, .pullquote q::after { content: ""; }
.pullquote cite {
  display: block;
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.26em;
  font-style: normal;
  color: var(--gold);
  opacity: 0.78;
}

/* ----- Two card pair (system) ----- */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } }
.pair-card {
  border: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
}
.pair-card .pair-eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.75vw, 0.75rem);
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.pair-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw, 1.7rem);
  line-height: 1.04;
  margin: 0 0 clamp(16px, 2vw, 22px) 0;
  color: var(--gold);
}
.pair-card p { font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.65; opacity: 0.95; }

/* ----- WHITE / BLACK chapter layouts ----- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--mirror > :first-child { order: 2; }
}

.manifest .manifest-eyerow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.75vw, 0.75rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.manifest-eyerow .key { opacity: 0.9858; }
.chapter--cream .manifest-eyerow .key { color: var(--bronze); }
.chapter--dark .manifest-eyerow .key, .chapter--ink .manifest-eyerow .key { color: var(--gold); }
.manifest-eyerow .val { color: var(--gold-deep); }
.chapter--cream .manifest-eyerow .val { color: var(--bronze); font-weight: 500; }

.manifest h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
}
.manifest h2 em { font-style: italic; font-weight: 400; }
.chapter--cream .manifest h2 em { color: var(--bronze); }
.chapter--dark .manifest h2 em, .chapter--ink .manifest h2 em { color: var(--gold); }

.ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ingredients li {
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: baseline;
}
.chapter--cream .ingredients li { border-top-color: var(--hairline-ink); }
.ingredients li:last-child { border-bottom: 1px solid var(--hairline); }
.chapter--cream .ingredients li:last-child { border-bottom-color: var(--hairline-ink); }
.ingredients .num {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.9852;
}
.chapter--cream .ingredients .num { color: var(--bronze); }
.ingredients .botanical {
  font-family: var(--display);
  font-weight: 400;
}
.ingredients .botanical { font-family: var(--display-soft); font-weight: 500; }
.ingredients .latin { font-style: italic; font-size: clamp(1.05rem, 1.3vw, 1.3rem); display: block; line-height: 1.2; font-family: var(--display-soft); font-weight: 500; }
.chapter--cream .ingredients .latin { color: var(--ink); }
.ingredients .spec {
  display: block;
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-style: normal;
  margin-top: 6px;
  opacity: 1;
}
.ingredients .source {
  display: block;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0.9858;
  color: var(--gold);
}
.chapter--cream .ingredients .source { color: var(--bronze); opacity: 0.9858; }
.ingredients .dose {
  font-family: var(--mono);
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  letter-spacing: 0.12em;
  color: var(--gold);
  white-space: nowrap;
  align-self: center;
}
.chapter--cream .ingredients .dose { color: var(--bronze-dark); font-weight: 500; }

.manifest-notes {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.manifest-notes .note {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(14px, 2vw, 24px);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.5;
  padding-top: clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--hairline);
}
.chapter--cream .manifest-notes .note { border-top-color: var(--hairline-ink); }
.manifest-notes .note .key {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9855;
}
.chapter--cream .manifest-notes .note .key { color: var(--bronze); }

/* Specimen card */
.specimen {
  border: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse at center, rgba(201, 169, 110, 0.05) 0%, transparent 70%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(24px, 3vw, 36px);
}
.chapter--cream .specimen {
  border-color: var(--hairline-ink);
  background:
    radial-gradient(ellipse at center, rgba(139, 111, 63, 0.06) 0%, transparent 70%);
}
.specimen-strip {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.7vw, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(12px, 2vw, 18px);
}
.chapter--cream .specimen-strip { color: var(--bronze); }
.specimen-art {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 32px) 0;
  position: relative;
}
.specimen-art .rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0.9852;
}
.specimen-art .rings svg { width: 100%; height: 100%; max-width: 480px; max-height: 480px; }
.specimen-art img {
  width: clamp(220px, 30vw, 360px);
  height: auto;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 40px rgba(201, 169, 110, 0.15));
}
.specimen-art--cream img {
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.18));
}
.specimen-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: clamp(0.55rem, 0.65vw, 0.65rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .specimen-foot { grid-template-columns: 1fr !important; gap: 14px !important; text-align: center !important; }
}
.chapter--cream .specimen-foot { border-top-color: var(--hairline-ink); }
.specimen-foot .key { display: block; opacity: 0.98588; margin-bottom: 8px; color: var(--gold); }
.chapter--cream .specimen-foot .key { color: var(--bronze); }
.specimen-foot .val { display: block; font-family: var(--display-soft); font-style: italic; font-weight: 500; font-size: clamp(0.95rem, 1.1vw, 1.1rem); letter-spacing: 0; text-transform: none; opacity: 0.986; }

/* TEHNOFARM seal — synthesised SVG (no PNG provided) */
.seal {
  width: clamp(140px, 18vw, 200px);
  aspect-ratio: 1 / 1;
  margin: clamp(28px, 4vw, 40px) auto 0;
  opacity: 0.9855;
}
.seal--centered { display: block; }

/* ----- Provenance dossier ----- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--hairline);
  padding: clamp(24px, 3vw, 36px);
  position: relative;
  overflow: hidden;
  min-height: auto;
}
.tier .tier-letter {
  position: absolute;
  top: clamp(16px, 2.5vw, 28px);
  right: clamp(16px, 2.5vw, 28px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 0.9;
  color: var(--gold);
  opacity: 0.14;
  pointer-events: none;
}
.tier .eyebrow { color: var(--gold); margin-bottom: clamp(14px, 2vw, 20px); display: block; }
.tier .foil { font-family: var(--display); font-size: clamp(0.78rem, 0.95vw, 0.88rem); letter-spacing: 0.4em; font-weight: 500; }
.tier h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 clamp(16px, 2.2vw, 22px) 0;
  color: var(--paper-cream);
  max-width: 22ch;
}
.tier ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.tier ul li {
  font-family: var(--display-soft);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  padding: clamp(10px, 1.2vw, 14px) 0;
  border-top: 1px solid var(--hairline);
}
.tier ul li:first-child { border-top: 0; }
.tier ul li em { font-style: italic; color: var(--gold); }

.batch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 700px) { .batch-grid { grid-template-columns: 1fr; } }
.batch-cell {
  padding: clamp(20px, 3vw, 32px);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.batch-cell:nth-child(3n) { border-right: 0; }
.batch-grid > .batch-cell:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 700px) {
  .batch-cell { border-right: 0; }
  .batch-grid > .batch-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .batch-grid > .batch-cell:last-child { border-bottom: 0; }
}
.batch-cell .key {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.98588;
  display: block;
  margin-bottom: 12px;
}
.batch-cell .val {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.25;
}

/* ----- Object specifications ----- */
.specs {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0 0;
  padding: 0;
}
.specs li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.specs li:last-child { border-bottom: 1px solid var(--hairline); }
.specs li .name {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 400;
  color: var(--paper-cream);
  display: block;
  margin-bottom: 10px;
}
.specs li .desc {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.5;
  opacity: 1;
  display: block;
  max-width: 70ch;
}
.specs li .qty {
  font-family: var(--mono);
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----- Concierge letter ----- */
.aside-block {
  padding-right: clamp(0px, 3vw, 40px);
}
.aside-meta {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
  margin-top: clamp(28px, 4vw, 40px);
}
.aside-meta .row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(12px, 2vw, 20px);
  padding-top: clamp(10px, 1.4vw, 14px);
  border-top: 1px solid var(--hairline-ink);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.4;
}
.aside-meta .row .key {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  opacity: 0.9855;
}
.aside-pull {
  margin-top: clamp(32px, 5vw, 56px);
  padding-left: clamp(20px, 3vw, 28px);
  border-left: 1px solid var(--bronze);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.26;
  color: var(--bronze-dark);
  max-width: 28ch;
}
.aside-pull cite {
  display: block;
  margin-top: clamp(18px, 2vw, 24px);
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  opacity: 0.85;
}

.envelope {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  opacity: 0.982;
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--hairline-ink);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.envelope > :nth-child(1) { text-align: left; }
.envelope > :nth-child(3) { text-align: right; }

.letter {
  background: #f3ecd8;
  border: 1px solid var(--hairline-ink);
  padding: clamp(28px, 4.5vw, 56px);
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.letter::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--hairline-ink);
  pointer-events: none;
  opacity: 0.55;
}
.letterhead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: baseline;
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--hairline-ink);
  margin-bottom: clamp(28px, 4vw, 40px);
  position: relative;
  z-index: 1;
}
.letterhead .lh-name {
  text-align: center;
  color: var(--ink);
  opacity: 0.982;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  letter-spacing: 0;
  text-transform: none;
}

.prose {
  font-family: var(--display-soft);
  font-weight: 500;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.prose p { margin: 0 0 1.1em 0; }
.prose .salutation, .prose .closing { font-style: italic; color: var(--bronze-dark); }

/* inline form fields */
.field {
  font-family: var(--display-soft);
  font-weight: 500;
  font-style: italic;
  font-size: inherit;
  color: var(--bronze);
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--bronze);
  padding: 2px 4px;
  outline: none;
  min-width: 60px;
  width: auto;
}
.field::placeholder { color: var(--bronze); opacity: 0.55; font-style: italic; }
.field:focus { background: rgba(139, 111, 63, 0.06); border-bottom-color: var(--bronze-dark); border-bottom-style: solid; }
.field--name { width: 18ch; }
.field--city { width: 22ch; }
.field--delivery { width: 14ch; }
.field--note { display: block; width: 100%; min-height: 90px; resize: vertical; margin: 6px 0; font-family: var(--display); font-style: italic; line-height: 1.6; padding: 10px 12px; border: 1px dotted var(--bronze); background: rgba(255,255,255,0.4); }
.field--select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='%238b6f3f'><path d='M0 0l4 5 4-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 8px 5px;
  cursor: pointer;
}

.signature-line {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: clamp(16px, 2vw, 28px);
  align-items: end;
}
.signature {
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-ink);
  padding-bottom: 6px;
  min-height: 2em;
}
.signature-line .lbl {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  opacity: 0.98588;
  border-top: 1px solid var(--hairline-ink);
  padding-top: 8px;
}

.action-row {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--hairline-ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 700px) { .action-row { grid-template-columns: 1fr; } }

.seal-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 36px;
  background: transparent;
  color: var(--crimson);
  border: 1px solid var(--crimson);
  font-family: var(--mono);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.seal-btn:hover { background: var(--crimson); color: var(--paper-cream); }
.seal-btn .er-mono {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
}
.action-caption .lbl {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  opacity: 0.9855;
  display: block;
  margin-bottom: 8px;
}
.action-caption .body {
  font-family: var(--display-soft);
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.98;
  max-width: 40ch;
}
.action-caption .ital-quiet { font-style: italic; color: var(--bronze-dark); display: block; margin-top: 6px; }

/* ----- Signature / footer chapter ----- */
.closing-quote {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.35;
  color: var(--gold);
  max-width: 32ch;
  margin: clamp(32px, 4vw, 56px) auto;
}

.tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 800px) { .tri { grid-template-columns: 1fr; } }
.tri .col {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(18px, 2.4vw, 24px);
}
.tri .col .key {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: clamp(14px, 2vw, 18px);
}
.tri .col ul { list-style: none; padding: 0; margin: 0; }
.tri .col li {
  font-family: var(--display-soft);
  font-weight: 500;
  font-size: clamp(0.88rem, 1.05vw, 1.05rem);
  line-height: 1.55;
  opacity: 1;
}
.tri .col li.italic { font-style: italic; color: var(--gold); }

.legal {
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--gold);
  opacity: 0.98588;
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.legal p { margin: 0 0 1em 0; }
.legal .copyright { letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.985; }

/* ----- Folio numbers (left margin, fixed) ----- */
.folio-fixed {
  position: fixed;
  left: clamp(10px, 1.6vw, 22px);
  bottom: 50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left bottom;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.45;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 800px) { .folio-fixed { display: none; } }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease, transform 1.2s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ────────────────────────────────────────────────────────────
   ENTITY BLOCKS — TF HOLDING (parent) + TEHNOFARM (manufacturer)
   + DOCUMENTS OF RECORD (archival proofs)
   added 25.04.2026 — Chapter 10 Signature
   Sized to read as a refined footer block, not as hero imagery
──────────────────────────────────────────────────────────── */
.entity-block {
  display: grid !important;
  grid-template-columns: clamp(110px, 14vw, 180px) 1fr !important;
  gap: clamp(20px, 2.5vw, 40px) !important;
  align-items: center !important;
  text-align: left !important;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) !important;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(28px, 3.5vw, 48px) !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
  box-sizing: border-box;
}
.entity-block--parent {
  border-top-color: rgba(232, 201, 142, 0.32);
  border-bottom-color: rgba(232, 201, 142, 0.32);
  background: linear-gradient(180deg, rgba(232, 201, 142, 0.02) 0%, transparent 100%);
}
.entity-block--manufacturer {
  margin-top: clamp(14px, 1.6vw, 22px) !important;
}
.entity-logo {
  width: 100% !important;
  max-width: 180px !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 0 18px rgba(232, 201, 142, 0.08));
}
.entity-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(6px, 0.8vw, 12px) !important;
  text-align: left !important;
}
.entity-meta .key {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  text-align: left !important;
}
.entity-line {
  font-family: var(--body);
  font-size: clamp(0.85rem, 1.05vw, 1rem) !important;
  line-height: 1.6 !important;
  color: rgba(243, 234, 218, 0.94);
  margin: 0 !important;
  max-width: 60ch;
  text-align: left !important;
}
.entity-line strong {
  font-family: var(--display-soft);
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}
.entity-line em {
  color: var(--gold);
  font-style: italic;
}
.entity-line--small {
  font-family: var(--mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.04em;
  color: rgba(243, 234, 218, 0.72);
  line-height: 1.65 !important;
  margin-top: 4px !important;
}

/* ────────────────────────────────────────────────────────────
   DOCUMENTS OF RECORD (archival proofs)
──────────────────────────────────────────────────────────── */
.docs-block {
  margin: clamp(40px, 5vw, 72px) auto !important;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 40px) !important;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 1000px !important;
  text-align: left !important;
  box-sizing: border-box;
}
.docs-block .key {
  text-align: left !important;
}
.docs-intro {
  font-family: var(--display-soft);
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  line-height: 1.7 !important;
  color: rgba(243, 234, 218, 0.9);
  max-width: 75ch;
  margin: clamp(12px, 1.4vw, 18px) 0 clamp(24px, 3vw, 36px) !important;
  text-align: left !important;
}
.docs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 2vw, 28px) !important;
}
.doc-card {
  display: flex !important;
  flex-direction: column !important;
  background: rgba(26, 22, 18, 0.5);
  border: 1px solid var(--hairline);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s;
  overflow: hidden;
  text-align: left !important;
}
.doc-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: rgba(40, 32, 22, 0.6);
}
.doc-card img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: 0.707;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--hairline);
  filter: brightness(0.95) contrast(1.05);
  margin: 0 !important;
}
.doc-meta {
  padding: clamp(12px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.doc-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.doc-title {
  font-family: var(--display-soft);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--gold-bright);
  margin-top: 4px;
  font-weight: 500;
}
.doc-sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: rgba(243, 234, 218, 0.78);
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.doc-date {
  font-family: var(--display-soft);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 4px;
}

/* Mobile: stack entity blocks + single-column docs grid */
@media (max-width: 800px) {
  .entity-block {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 18px !important;
    padding: 24px 20px !important;
  }
  .entity-logo {
    max-width: 140px !important;
    margin: 0 auto !important;
  }
  .entity-meta { align-items: center !important; text-align: center !important; }
  .entity-meta .key { text-align: center !important; }
  .entity-line, .entity-line--small { text-align: center !important; }
}
@media (max-width: 640px) {
  .docs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .docs-intro { font-size: 0.9rem !important; line-height: 1.6 !important; }
  .doc-title { font-size: 1rem !important; }
}

/* ────────────────────────────────────────────────────────────
   MOBILE SCROLL OPTIMIZATION — added 25.04.2026
   Force native momentum scrolling on touch devices,
   disable parallax (which fights touch scroll), reduce work per frame
──────────────────────────────────────────────────────────── */
@media (hover: none), (max-width: 900px) {
  html, body {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
  }
  /* Disable parallax on touch — it blocks scroll perf */
  [data-parallax] {
    transform: none !important;
    will-change: auto !important;
  }
  /* Lighter/no transitions on common elements during scroll */
  .reveal,
  .ingredients .row,
  .doc-card,
  .entity-block {
    transition: opacity 0.3s ease !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ▌ FINAL RESPONSIVE & TOUCH OPTIMIZATION ▌
   added 26.04.2026 — comprehensive cross-device polish
   Targets: 360px iPhone SE → 390px iPhone → 640px smartphone
            → 800px tablet portrait → 1100px tablet landscape
            → 1440px desktop → 1920px+ wide
═══════════════════════════════════════════════════════════ */

/* Base: smooth font rendering everywhere */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* Prevent horizontal overflow on any device */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Images never overflow their container */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Touch targets: all interactive elements ≥44×44 (Apple HIG / WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
  a, button, input[type="submit"], input[type="button"], .doc-card, .return-top, .folio-link {
    min-height: 44px;
    min-width: 44px;
  }
  button, input[type="submit"], input[type="button"] {
    padding: 12px 18px !important;
  }
  /* Form inputs comfortable to tap */
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 14px 16px !important;
  }
}

/* iOS-specific: prevent zoom on input focus */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ─── BREAKPOINT: 1100px and below (tablet landscape & small laptop) ─── */
@media (max-width: 1100px) {
  .inner {
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }
  .display-xl { font-size: clamp(2.4rem, 6vw, 4.5rem) !important; }
  .display-l  { font-size: clamp(2rem, 5vw, 3.6rem) !important; }
  .display-m  { font-size: clamp(1.65rem, 4vw, 2.6rem) !important; }
}

/* ─── BREAKPOINT: 800px and below (tablet portrait) ─── */
@media (max-width: 800px) {
  .inner {
    padding-left: clamp(18px, 4vw, 28px);
    padding-right: clamp(18px, 4vw, 28px);
  }
  .display-xl { font-size: clamp(2.1rem, 7.5vw, 3.6rem) !important; }
  .display-l  { font-size: clamp(1.75rem, 6vw, 2.8rem) !important; }
  .display-m  { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
  .lead { font-size: clamp(0.95rem, 1.15vw, 1.2rem) !important; }
  .closing-quote { font-size: clamp(1.3rem, 3.4vw, 1.85rem) !important; }
  .body-text, .desc, .prose { font-size: clamp(0.95rem, 2.2vw, 1.1rem) !important; }
  /* Spacing: chapters tighter on mobile/tablet */
  .chapter, section.chapter {
    padding-top: clamp(48px, 8vh, 80px) !important;
    padding-bottom: clamp(48px, 8vh, 80px) !important;
  }
}

/* ─── BREAKPOINT: 640px and below (smartphone) ─── */
@media (max-width: 640px) {
  .display-xl { font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important; line-height: 1.1 !important; }
  .display-l  { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.15 !important; }
  .display-m  { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; line-height: 1.2 !important; }
  .lead { font-size: clamp(0.95rem, 1.15vw, 1.2rem) !important; line-height: 1.55 !important; }
  .closing-quote { font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important; max-width: 90% !important; }
  .eyebrow { font-size: clamp(0.72rem, 0.85vw, 0.85rem) !important; letter-spacing: 0.22em !important; }
  /* Tier letter much smaller on mobile */
  .tier-letter { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .name { font-size: clamp(1.05rem, 1.3vw, 1.3rem) !important; }
  /* Hero specific */
  .hero-title { word-break: break-word; hyphens: auto; }
  .hero-meta { flex-direction: column !important; gap: 12px !important; }
  /* Tri-cols */
  .tri { gap: 24px !important; }
  .tri .col ul li { font-size: 0.95rem !important; line-height: 1.55 !important; }
  /* Concierge form */
  .concierge-form { padding: 0 !important; }
  .concierge-form input,
  .concierge-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Letter / signature container */
  .letter, .letterhead { padding: clamp(20px, 5vw, 32px) !important; }
  /* Folio side label hidden on mobile */
  .folio-fixed { display: none !important; }
  .return-top { width: 56px !important; height: 56px !important; right: 16px !important; bottom: 16px !important; }
}

/* ─── BREAKPOINT: 390px and below (iPhone SE / mini) ─── */
@media (max-width: 390px) {
  .inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .display-xl { font-size: 1.7rem !important; }
  .display-l  { font-size: 1.5rem !important; }
  .display-m  { font-size: 1.3rem !important; }
  .body-text, .desc, .prose { font-size: 0.92rem !important; }
  .closing-quote { font-size: 1.1rem !important; }
  .eyebrow { font-size: 0.62rem !important; letter-spacing: 0.2em !important; }
  .copyright { font-size: 0.7rem !important; }
}

/* ─── Spacing optimization for very wide screens (1920px+) ─── */
@media (min-width: 1920px) {
  .inner { max-width: 1440px; }
}

/* ─── Print: hide interactive elements ─── */
@media print {
  .return-top, .folio-fixed, .grain { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* ─── Final accessibility polish ─── */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 4px;
  border-radius: 2px;
}
.doc-card:focus-visible {
  outline-offset: 6px;
}

/* Forced colors mode (Windows high contrast) */
@media (forced-colors: active) {
  .doc-card, .entity-block, .tri .col {
    border: 1px solid CanvasText !important;
  }
}

/* ─── CROSS-LINK TO .SPACE — laboratory archive ─── */
.cross-link-archive {
  display: block;
  max-width: 720px;
  margin: clamp(56px, 7vw, 96px) auto clamp(32px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 4vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: 1px;
  text-decoration: none !important;
  color: inherit;
  text-align: left;
  position: relative;
  background: linear-gradient(180deg, rgba(232, 201, 142, 0.02) 0%, transparent 60%);
  transition: border-color 0.4s, background 0.4s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-sizing: border-box;
}
.cross-link-archive:hover,
.cross-link-archive:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(232, 201, 142, 0.04) 0%, transparent 60%);
  transform: translateY(-2px);
}
.cross-link-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 14px;
}
.cross-link-title {
  font-family: var(--display-soft);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.45vw, 1.5rem);
  color: var(--gold-bright);
  line-height: 1.25;
  margin: 0 0 12px 0;
}
.cross-link-desc {
  font-family: var(--body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: rgba(243, 234, 218, 0.92);
  margin: 0 0 16px 0;
  max-width: 56ch;
}
.cross-link-url {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cross-link-url::after {
  content: "→";
  font-family: var(--display-soft);
  font-size: 1.1em;
  transition: transform 0.3s ease;
}
.cross-link-archive:hover .cross-link-url::after {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .cross-link-archive {
    padding: 22px 18px !important;
    margin-top: 40px !important;
    margin-bottom: 24px !important;
  }
  .cross-link-title { font-size: 1.2rem !important; }
  .cross-link-desc { font-size: 0.9rem !important; }
}

@media (max-width: 640px) {
  .strip {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    text-align: center !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
  }
  .strip > :nth-child(1),
  .strip > :nth-child(2),
  .strip > :nth-child(3) { text-align: center !important; }
}

/* ════════════════════════════════════════════════════════════
   ▌ FINAL CONTRAST BOOST ▌
   added 26.04.2026 — high contrast for readability
═══════════════════════════════════════════════════════════ */

/* Default body text on dark chapters — bright cream, high opacity */
.chapter--dark p,
.chapter--dark .body-text,
.chapter--dark .lead,
.chapter--dark .prose,
.chapter--dark .desc,
.chapter--dark li,
.chapter--ink p,
.chapter--ink .body-text,
.chapter--ink .lead {
  color: var(--paper-cream) !important;
  opacity: 0.96 !important;
}

/* Body text on cream chapters — deep ink, full opacity */
.chapter--cream p,
.chapter--cream .body-text,
.chapter--cream .lead,
.chapter--cream .prose,
.chapter--cream .desc,
.chapter--cream li {
  color: var(--ink) !important;
  opacity: 0.92 !important;
}

/* Entity blocks text contrast */
.entity-line {
  color: rgba(243, 234, 218, 0.95) !important;
}
.entity-line strong {
  color: var(--gold-bright) !important;
}
.entity-line--small {
  color: rgba(243, 234, 218, 0.78) !important;
}

/* Documents block text */
.docs-intro {
  color: rgba(243, 234, 218, 0.92) !important;
}
.doc-sub {
  color: rgba(243, 234, 218, 0.78) !important;
}

/* Cross-link card text */
.cross-link-desc {
  color: rgba(243, 234, 218, 0.92) !important;
}

/* Tier ingredients on dark */
.tier ul li {
  color: rgba(243, 234, 218, 0.96) !important;
}

/* Top/bottom strips */
.strip {
  color: var(--gold) !important;
  opacity: 1 !important;
}
.chapter--cream .strip {
  color: var(--bronze) !important;
  opacity: 0.95 !important;
}

/* Tri-cols list items */
.tri .col li {
  color: var(--paper-cream) !important;
  opacity: 0.95 !important;
}
.chapter--cream .tri .col li {
  color: var(--ink) !important;
  opacity: 0.92 !important;
}
.tri .col li.italic {
  opacity: 0.8 !important;
}

/* Eyebrow labels — full gold on dark, bronze on cream */
.eyebrow {
  opacity: 1 !important;
}
.chapter--cream .eyebrow {
  color: var(--bronze) !important;
}
.chapter--dark .eyebrow,
.chapter--ink .eyebrow {
  color: var(--gold) !important;
}

/* Manifest notes (Protocol, Batch) */
.manifest-notes .note > span:not(.key) {
  color: var(--paper-cream) !important;
  opacity: 0.92 !important;
}
.chapter--cream .manifest-notes .note > span:not(.key) {
  color: var(--ink) !important;
  opacity: 0.9 !important;
}

/* Ingredients list — botanical names + specs */
.ingredients .latin {
  color: var(--paper-cream) !important;
  opacity: 0.95 !important;
}
.chapter--cream .ingredients .latin {
  color: var(--bronze-dark) !important;
  opacity: 1 !important;
}
.ingredients .spec {
  opacity: 0.85 !important;
}
.ingredients .source {
  opacity: 0.78 !important;
}
.ingredients .dose {
  color: var(--gold) !important;
  opacity: 1 !important;
}
.chapter--cream .ingredients .dose {
  color: var(--bronze) !important;
}

/* Pair card text contrast */
.pair-card p {
  color: var(--paper-cream) !important;
  opacity: 0.95 !important;
}

/* Closing quote — full gold opacity */
.closing-quote {
  opacity: 1 !important;
}

/* Specimen foot keys */
.specimen-foot .key {
  opacity: 1 !important;
}
.specimen-foot .val {
  opacity: 1 !important;
}

/* Hero meta values */
.hero-meta .key {
  opacity: 0.85 !important;
}
.hero-meta .val {
  color: var(--paper-cream) !important;
  opacity: 1 !important;
}

/* Legal disclaimer — readable but not screaming */
.legal {
  color: var(--paper-cream) !important;
  opacity: 0.78 !important;
}
.copyright {
  opacity: 0.85 !important;
}

/* ──────────────────────────────────────────────────────────────
   SCREEN-FIT COMPRESSION v2 · 2026-04-26 · TIGHTER
   Goal: Chapter 5 (WHITE) and Chapter 6 (BLACK) fit in single
   viewport at 100% browser zoom on 1440x900+ desktop.
   v1 wasn't enough — at 100% still ~30% over. This is v1 + ~30%.
   To revert: delete this entire block.
   ────────────────────────────────────────────────────────────── */

/* Chapter padding y: 240 → 56-72 (saves ~170px) */
.chapter {
  padding: clamp(28px, 2.4vw, 36px) clamp(20px, 5vw, 80px);
}

/* Eyerow margin: 32 → 14 (saves 18px) */
.manifest .manifest-eyerow {
  margin-bottom: clamp(10px, 1.2vw, 14px);
}

/* H2 — overriding locked type scale per current Voice instruction.
   2.75rem → 2.0rem max (44 → 32px). Saves ~20px on 2 lines. */
.manifest h2 {
  font-size: clamp(1.45rem, 2.4vw, 2.0rem);
  line-height: 1.05;
}

/* Lead paragraph: smaller font + tighter top + tighter line-height
   (JSX inline style → !important) */
.manifest .lead {
  font-size: clamp(0.88rem, 1.0vw, 1.0rem) !important;
  line-height: 1.45 !important;
  margin-top: clamp(8px, 1.0vw, 12px) !important;
}

/* Ingredients ul top spacing (JSX inline → !important) */
.manifest .ingredients {
  margin-top: clamp(10px, 1.2vw, 14px) !important;
}

/* Split margin-top: 64 → 22 max (saves 42px) */
.split {
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* Ingredients row padding: 52 → 14 per row × 5 = saves 190px (huge) */
.ingredients li {
  padding: clamp(5px, 0.6vw, 7px) 0;
}

/* Ingredients typography — smaller, denser */
.ingredients .latin {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.15;
}
.ingredients .spec {
  font-size: clamp(0.82rem, 0.92vw, 0.92rem);
  margin-top: 2px;
}
.ingredients .source {
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  margin-top: 4px;
}

/* Manifest notes block: 44 → 14 (saves 30px), smaller text */
.manifest-notes {
  margin-top: clamp(10px, 1.2vw, 14px);
  gap: clamp(8px, 1.0vw, 12px);
}
.manifest-notes .note {
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  line-height: 1.4;
  padding-top: clamp(6px, 0.8vw, 10px);
}

/* Specimen card: tighter padding/gap */
.specimen {
  padding: clamp(14px, 1.6vw, 20px);
  gap: clamp(12px, 1.4vw, 16px);
}
.specimen-art {
  padding: clamp(8px, 1.4vw, 16px) 0;
}
.specimen-art img {
  width: clamp(180px, 22vw, 260px);
}

/* ────────────────── END SCREEN-FIT v2 ──────────────────────── */

/* ──────────────────────────────────────────────────────────────
   CHAPTER 9 COMPRESSION (Concierge Letter form) · 2026-04-26
   Goal: entire form visible at one glance at 100% zoom on 1440x900+.
   Targets .aside-block (left) and .letter-block (right).
   To revert: delete this entire block.
   ────────────────────────────────────────────────────────────── */

/* ────── LEFT COLUMN (.aside-block) ────── */

/* H2 .display-l: 3.5rem → 2.0rem max (saves ~40px on 2 lines).
   Type-scale override per current Voice instruction. */
.aside-block h2.display-l {
  font-size: clamp(1.5rem, 2.4vw, 2.0rem);
  line-height: 1.05;
  margin-top: clamp(10px, 1.2vw, 14px) !important;
}

/* Lead in aside-block (JSX inline style → !important) */
.aside-block .lead {
  font-size: clamp(0.88rem, 1.0vw, 1.0rem) !important;
  line-height: 1.45 !important;
  margin-top: clamp(10px, 1.2vw, 14px) !important;
}

/* Aside meta block (4 rows) */
.aside-meta {
  margin-top: clamp(12px, 1.4vw, 16px);
  gap: clamp(6px, 0.8vw, 8px);
}
.aside-meta .row {
  padding-top: clamp(6px, 0.8vw, 8px);
  font-size: clamp(0.82rem, 0.92vw, 0.92rem);
  line-height: 1.35;
  grid-template-columns: 140px 1fr;
}
.aside-meta .row .key {
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
}

/* Aside pull-quote */
.aside-pull {
  margin-top: clamp(14px, 1.6vw, 18px);
  font-size: clamp(0.88rem, 1.0vw, 1.0rem);
  line-height: 1.25;
  padding-left: clamp(14px, 1.8vw, 18px);
}
.aside-pull cite {
  margin-top: clamp(8px, 1.0vw, 12px);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
}

/* TEHNOFARM seal: smaller in chapter 9 */
.aside-block .seal {
  width: clamp(110px, 12vw, 140px);
  margin-top: clamp(14px, 1.6vw, 18px);
}

/* ────── RIGHT COLUMN (.letter-block) ────── */

.envelope {
  padding-bottom: clamp(6px, 0.8vw, 10px);
  margin-bottom: clamp(8px, 1.0vw, 12px);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
}

.letter {
  padding: clamp(18px, 2.2vw, 28px);
}

.letterhead {
  padding-bottom: clamp(8px, 1.0vw, 12px);
  margin-bottom: clamp(12px, 1.4vw, 16px);
  font-size: clamp(0.62rem, 0.75vw, 0.75rem);
}
.letterhead .lh-name {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
}

.prose {
  font-size: clamp(0.88rem, 1.0vw, 1.0rem);
  line-height: 1.45;
}
.prose p {
  margin: 0 0 0.5em 0;
}

.field {
  padding: 1px 3px;
}
.field--note {
  min-height: 48px;
  line-height: 1.4;
  padding: 6px 10px;
  margin: 4px 0;
}

.signature-line {
  margin-top: clamp(12px, 1.6vw, 18px);
}
.signature {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  min-height: 1.6em;
  padding-bottom: 4px;
}
.signature-line .lbl {
  padding-top: 6px;
}

.action-row {
  margin-top: clamp(12px, 1.6vw, 18px);
  padding-top: clamp(10px, 1.2vw, 14px);
  gap: clamp(14px, 2vw, 22px);
}
.action-caption .body {
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  line-height: 1.4;
}
.action-caption .ital-quiet {
  margin-top: 2px;
}

/* ────────────────── END CHAPTER 9 BLOCK ────────────────────── */