/*
Theme Name: Harvest Radius
Description: Block theme for harvest-radius.labs.fabrica.studio — a guide by comarca to km-0 producers (EN + ES page trees), published as static HTML. Direction: "Ledger on kraft".
Author: fabrica
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: harvest-radius
*/

/* ==================================================================
   Tokens — design.md § Paleta / Tipografía / Tokens.
   Hex first, OKLCH override where supported.
   ================================================================== */
:root {
  color-scheme: light;

  --kraft:       #d6c1a0;
  --sheet:       #e3d6be;
  --sheet-under: #d9c9ab;
  --kraft-deep:  #c3a581;
  --paper-light: #f0e7d6;
  --ink:         #221812;
  --ink-lift:    #30231b;
  --brown:       #5a3118;
  --olive:       #3e4f1a;
  --olive-deep:  #2f3e0c;
  --olive-glow:  #accb73;
  --rule:        #8c694e;
  --rule-soft:   rgb(90 49 24 / .32);
  --ring:        rgb(90 49 24 / .34);
  --ring-far:    rgb(90 49 24 / .15);
  --ring-lbl:    rgb(90 49 24 / .62);
  --ring-on-ink: rgb(214 193 160 / .13);

  --sh: 90 49 24;
  --shadow-sheet:
    inset 0 1px 0 var(--paper-light),
    inset 0 0 0 1px rgb(var(--sh) / .08),
    1px 1px 0 rgb(var(--sh) / .12),
    6px 10px 18px -10px rgb(var(--sh) / .30),
    18px 34px 56px -24px rgb(var(--sh) / .42),
    44px 88px 128px -52px rgb(var(--sh) / .38);
  --shadow-under: 10px 22px 44px -28px rgb(var(--sh) / .38);
  --shadow-slip:
    inset 0 1px 0 var(--paper-light),
    inset 0 0 0 1px rgb(var(--sh) / .08),
    1px 1px 0 rgb(var(--sh) / .12),
    5px 8px 14px -8px rgb(var(--sh) / .34),
    16px 28px 44px -20px rgb(var(--sh) / .46);
  --shadow-btn: inset 0 1px 0 rgb(240 231 214 / .22), 0 10px 22px -10px rgb(var(--sh) / .65);
  --shadow-btn-hover: inset 0 1px 0 rgb(240 231 214 / .26), 0 14px 26px -10px rgb(var(--sh) / .75);

  --serif: "Source Serif 4", "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --ratio: 1.333;
  --t-1: 0.8125rem;
  --t0:  1rem;
  --t1:  calc(var(--t0) * var(--ratio));
  --t2:  calc(var(--t1) * var(--ratio));
  --t3:  calc(var(--t2) * var(--ratio));
  --t4:  calc(var(--t3) * var(--ratio));
  --t5:  calc(var(--t4) * var(--ratio));

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem;   --s7: 3rem;  --s8: 4rem;   --s9: 6rem; --s10: 8rem;

  --r-print: 0;
  --r-control: 3px;

  --focus: 0 0 0 2px var(--kraft), 0 0 0 4px var(--olive);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 180ms;

  --gutter: clamp(1rem, 2.5vw, 2rem);
  --margin: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
}
@supports (color: oklch(0 0 0)) {
  :root {
    --kraft:       oklch(0.82 0.050 78);
    --sheet:       oklch(0.88 0.035 82);
    --sheet-under: oklch(0.84 0.045 80);
    --kraft-deep:  oklch(0.74 0.060 72);
    --paper-light: oklch(0.93 0.025 85);
    --ink:         oklch(0.22 0.020 55);
    --ink-lift:    oklch(0.27 0.025 55);
    --brown:       oklch(0.36 0.070 50);
    --olive:       oklch(0.40 0.080 125);
    --olive-deep:  oklch(0.34 0.075 125);
    --olive-glow:  oklch(0.80 0.120 125);
    --rule:        oklch(0.55 0.060 60);
    --rule-soft:   oklch(0.36 0.070 50 / .32);
    --ring:        oklch(0.36 0.070 50 / .34);
    --ring-far:    oklch(0.36 0.070 50 / .15);
    --ring-lbl:    oklch(0.36 0.070 50 / .62);
    --ring-on-ink: oklch(0.82 0.050 78 / .13);
  }
}

/* ==================================================================
   Base
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--kraft);
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 60em) { html { font-size: 112.5%; } }

/* `:root body` beats the `:root :where(body)` of WP global styles. */
:root body {
  margin: 0;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--kraft);
  background-image:
    radial-gradient(84rem 48rem at 0% 0%, rgb(240 231 214 / .70), rgb(240 231 214 / 0) 62%),
    linear-gradient(to bottom, rgb(195 165 129 / 0) 70%, rgb(195 165 129 / .26) 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .17;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0 0.05 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.55' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0 0.07 0 0 0 0 1'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0.35 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 240px 240px, 560px 560px, 700px 700px;
}
@media print { body::before { display: none; } }

main { position: relative; z-index: 1; overflow-x: clip; display: block; }
.wrap {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--margin);
}
/* WP's global styles put a block gap on every flow child; this page sets its own rhythm.
   Same specificity as theirs (0,1,0) and later in the cascade, so it wins. */
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > *,
:root :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

:root a {
  color: var(--olive);
  text-decoration: none;
  background-image: linear-gradient(var(--olive-glow), var(--olive-glow));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
:root a:hover { color: var(--olive-deep); background-size: 100% 40%; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-control); }
.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-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--margin); top: var(--s2); z-index: 20; background: var(--sheet); padding: .5em .8em; }

.data, .folio, .masthead .dateline, .masthead-aside, .dir thead, .dir .num, .dir .where, .dir .when, .dir .lbl,
.access label, .access input, .access button, .ph figcaption, .fig figcaption, .fn-n, .dir caption .cap-m, .rings text,
.steps .step-n, .rate .price, .rate .flag, .legend, .compare .lbl, .faq dt, .sample-tag {
  font-family: var(--sans);
  font-feature-settings: "tnum" 1, "ss01" 0;
  font-variant-numeric: tabular-nums;
}

/* the site's own glyphs: 24×24, one stroke, currentColor, the north-east always cut */
.ic {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vertical-align: -.22em;
  flex: none;
}
.ic .fill { fill: currentColor; stroke: none; }

/* Inline links inside legal/prose copy (privacy, terms, cookies): the global
   olive-on-ink link colour reads at ~1.9:1 against body text, which fails
   WCAG's "distinguishable without colour" rule when the link isn't underlined
   either. Underline them here rather than everywhere olive is used as a link
   colour (masthead, colophon), where it sits on a different, higher-contrast
   ground and an underline would fight the ruled-line motif. */
.page-body a:where(:not(.wp-element-button)) {
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* ==================================================================
   Masthead
   ================================================================== */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s6);
  row-gap: var(--s2);
  padding-block: var(--s5) var(--s2);
  border-bottom: 1px solid var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) left bottom 3px / 100% 2px no-repeat;
  padding-bottom: 10px;
}
:root .wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t1);
  letter-spacing: -.005em;
  color: var(--ink);
  background: none;
  margin-right: auto;
}
:root .wordmark .ic { width: 1em; height: 1em; color: var(--brown); }
:root .wordmark:hover { color: var(--brown); background: none; }
.masthead .dateline {
  margin: 0 auto 0 0;
  font-size: var(--t-1);
  color: var(--brown);
  letter-spacing: .01em;
  white-space: nowrap;
}
.masthead-aside {
  display: flex;
  gap: var(--s5);
  font-size: var(--t-1);
}
.masthead-aside a { color: var(--brown); background: none; }
.masthead-aside a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.masthead-aside .cta-link {
  color: var(--olive);
  font-weight: 600;
  background-image: linear-gradient(var(--olive-glow), var(--olive-glow));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
}
.masthead-aside .cta-link:hover { color: var(--olive-deep); text-decoration: none; background-size: 100% 40%; }
@media (max-width: 56em) {
  .masthead { column-gap: var(--s4); }
  .masthead .dateline { order: 3; flex-basis: 100%; margin-right: 0; }
}
@media (max-width: 40em) {
  .masthead { column-gap: var(--s2); }
  .masthead-aside { font-size: .75rem; gap: var(--s2); margin-left: auto; white-space: nowrap; }
  .wordmark { font-size: 1.1rem; gap: .4em; }
}

/* section running heads */
.folio {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  font-size: var(--t-1);
  color: var(--brown);
  border-top: 1px solid var(--ink);
  padding-top: var(--s2);
}
.folio .folio-n { font-weight: 600; color: var(--ink); }
.folio .folio-t { color: var(--ink); }
.folio .folio-r { margin-left: auto; text-align: right; }
@media (max-width: 40em) {
  .folio { flex-wrap: wrap; row-gap: var(--s1); }
  .folio .folio-r { flex-basis: 100%; margin-left: 0; text-align: left; padding-left: calc(1ch + var(--s4)); }
}

/* ==================================================================
   1 · Hero + the compass + the reply card
   ================================================================== */
.section { display: block; }
#directory { padding-block: var(--s6) var(--s10); }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
  padding-block: var(--s7) var(--s8);
}
.hero-art {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(-1 * var(--margin));
  left: calc(-1 * var(--margin));
  bottom: -46rem;
  overflow: clip;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / .55) 62%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / .55) 62%, transparent 97%);
}
.rings {
  position: absolute;
  width: 48rem;
  height: 48rem;
  top: -2.6rem;
  right: 3.2rem;
  overflow: visible;
  color: var(--ring);
}
.rings circle, .rings path { vector-effect: non-scaling-stroke; }
.rings .far { color: var(--ring-far); }
.rings text { font-size: 13px; fill: rgb(90 49 24 / .95); font-weight: 500; letter-spacing: .02em; }
@supports (color: oklch(0 0 0)) { .rings text { fill: oklch(0.36 0.070 50 / .95); } }
.rings .bearing { stroke: var(--ring-lbl); }
.rings .needle, .rings .centre { fill: var(--brown); stroke: none; }
.rings .west { display: none; }
@media (max-width: 60em) {
  .hero-art { bottom: -30rem; }
  .rings { width: 40rem; height: 40rem; top: 3.2rem; right: -23.5rem; color: rgb(90 49 24 / .28); }
  .rings text { font-size: 18px; }
  .rings .west text.mid { display: none; }
  .rings .east { display: none; }
  .rings .west { display: block; }
}
.hero > :not(.hero-art) { position: relative; }
.hero h1 {
  grid-column: 1 / 12;
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.4rem + 5.6vw, 5.9rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.015em;
  max-width: 15ch;
  text-wrap: balance;
  font-optical-sizing: auto;
  color: var(--ink);
}
.hero .standfirst {
  grid-column: 1 / 8;
  font-size: var(--t1);
  line-height: 1.4;
  max-width: 34ch;
  text-wrap: pretty;
  margin-top: var(--s3);
}

/* the reply card: the form is a magazine blow-in card */
.access {
  grid-column: 9 / 13;
  align-self: end;
  position: relative;
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--sheet);
  box-shadow: var(--shadow-slip);
  transform: rotate(-1.1deg);
  transform-origin: 100% 100%;
}
.access::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  border-top: 1px dashed rgb(var(--sh) / .30);
}
.access .stamp {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 2.5rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  color: var(--brown);
  border: 1px dashed rgb(var(--sh) / .55);
  outline: 3px solid var(--sheet);
  outline-offset: -4px;
  background: var(--kraft);
}
.access .stamp .ic { width: 1.25rem; height: 1.25rem; }
.access .micro {
  font-size: var(--t0);
  color: var(--brown);
  font-style: italic;
  padding-right: 3rem;
}
.access label { font-size: var(--t-1); color: var(--brown); display: block; }
.access .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: end;
}
.access input[type="email"],
.access input[type="text"]:not(.hp) {
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: var(--t0);
  padding: .55em 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.access input::placeholder { font-family: var(--serif); font-style: italic; color: var(--brown); opacity: 1; }
.access input:focus-visible { box-shadow: none; border-bottom-color: var(--olive); border-bottom-width: 2px; margin-bottom: -1px; }
.access .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.access button {
  font-family: var(--sans);
  font-size: var(--t-1);
  font-weight: 600;
  padding: .85em 1.15em;
  border: 0;
  border-radius: var(--r-control);
  background: linear-gradient(to bottom, var(--ink-lift), var(--ink) 60%);
  color: var(--sheet);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-btn);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.access button:hover { background: linear-gradient(to bottom, var(--olive), var(--olive-deep) 60%); box-shadow: var(--shadow-btn-hover); }
.access button:active { transform: translateY(1px); box-shadow: var(--shadow-btn); }
.access .fine { font-size: var(--t-1); color: var(--brown); }
.access .ok { margin: 0; }
.access .ok > span {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px dashed rgb(var(--sh) / .40);
  font-size: var(--t-1);
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.45;
}
.access .ok > span[hidden] { display: none; }

/* laptops: the reply card stays in the corner of the radius, so the button drops to its
   own line instead of squeezing the email field. Measured: 167px at 1280 before, ~300px after. */
@media (max-width: 86em) {
  .access .field { grid-template-columns: minmax(0, 1fr); }
  .access button { justify-self: start; }
}
@media (max-width: 60em) {
  .hero h1 { grid-column: 1 / -1; }
  .hero .standfirst { grid-column: 1 / -1; }
  .access { grid-column: 1 / -1; max-width: 32rem; margin-top: var(--s6); transform: none; }
}
@media (max-width: 40em) {
  .access { padding: var(--s4); margin-inline: calc(var(--margin) * -.35); }
  .access .stamp { top: var(--s3); right: var(--s3); }
}

/* ==================================================================
   2 · The ledger (signature) + footnotes
   ================================================================== */
.ledger {
  display: grid;
  grid-template-columns: minmax(0, 8.6fr) minmax(0, 3.4fr);
  column-gap: calc(var(--gutter) * 2);
  row-gap: var(--s6);
  align-items: start;
}
.sheet {
  position: relative;
  background: var(--sheet);
  padding: var(--s5) var(--s6) var(--s6);
  box-shadow: var(--shadow-sheet);
}
.sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px -9px -10px 9px;
  background: var(--sheet-under);
  box-shadow: var(--shadow-under);
}
.sheet::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 0;
  border-left: 1px dashed rgb(var(--sh) / .28);
}
.dir {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 2px solid var(--ink);
  color: var(--ink);
}
.dir caption {
  text-align: left;
  caption-side: top;
  padding-block: var(--s2) var(--s4);
  color: var(--ink);
}
.dir caption .cap-t { display: block; font-size: var(--t1); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
.dir caption .cap-m { display: block; font-size: var(--t-1); color: var(--brown); margin-top: var(--s2); }
@media (min-width: 46.01em) {
  .dir { table-layout: fixed; }
  .dir col.c-who { width: 22%; }
  .dir col.c-what { width: 31%; }
  .dir col.c-km { width: 8%; }
  .dir col.c-season { width: 24%; }
  .dir col.c-when { width: 15%; }
}
.dir thead th {
  text-align: left;
  font-weight: 500;
  font-size: var(--t-1);
  color: var(--brown);
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}
.dir thead th .ic { margin-right: .3em; }
.dir thead th.num { text-align: right; }
.dir thead .key { font-weight: 400; color: var(--brown); }
.dir tbody th, .dir tbody td {
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
  text-align: left;
  font-weight: 400;
}
.dir tbody tr:last-child th, .dir tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.dir .who { display: block; font-weight: 600; font-size: var(--t1); line-height: 1.15; letter-spacing: -.005em; }
.dir .where { display: block; font-size: var(--t-1); color: var(--brown); margin-top: .35em; }
.dir .what { font-size: var(--t0); }
.dir .note { display: block; font-style: italic; color: var(--brown); font-size: .95em; margin-top: .3em; max-width: 32ch; }
.dir .num { text-align: right; white-space: nowrap; }
.dir tbody .num { font-weight: 500; font-size: var(--t1); letter-spacing: -.01em; }
.dir tbody .num .unit { font-size: var(--t-1); font-weight: 400; color: var(--brown); letter-spacing: 0; }
.dir .when { font-size: var(--t-1); white-space: nowrap; }
.dir .when time { color: var(--ink); }
.dir .stale { display: block; font-family: var(--serif); font-style: italic; color: var(--brown); white-space: normal; }
.dir tr.old .when time { color: var(--brown); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--rule); text-underline-offset: .2em; }

.season { white-space: nowrap; }
.strip {
  --x1: calc((var(--a) - 1) / 12 * 100%);
  --x2: calc(var(--b) / 12 * 100%);
  --now: 67%;
  position: relative;
  display: inline-block;
  vertical-align: -.1em;
  width: 6.75rem;
  height: .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-print);
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--kraft) calc(100% / 12 - 1px), var(--kraft) calc(100% / 12)),
    linear-gradient(to right, transparent var(--x1), var(--olive) var(--x1), var(--olive) var(--x2), transparent var(--x2));
  background-color: var(--kraft);
  background-clip: padding-box;
}
.strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x1);
  width: calc(var(--x2) - var(--x1));
  background: linear-gradient(to bottom, rgb(172 203 115 / .55), rgb(172 203 115 / 0) 62%);
  pointer-events: none;
}
.strip::after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--now);
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}
.strip i {
  position: absolute;
  left: var(--now);
  top: -9px;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
}
.dir .lbl { display: block; margin-top: .45em; font-size: var(--t-1); color: var(--brown); }

.notes { padding-top: var(--s3); }
.notes ol { list-style: none; padding: 0; display: grid; gap: var(--s5); }
.notes li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s2); font-size: var(--t0); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.fn-n { font-weight: 600; font-size: var(--t-1); color: var(--brown); padding-top: .2em; }
sup.fn { font-family: var(--sans); font-weight: 600; font-size: .62em; line-height: 0; vertical-align: .55em; margin-left: .12em; }
sup.fn a { color: var(--brown); background: none; }
sup.fn a:hover { color: var(--olive); text-decoration: underline; }

@media (max-width: 68em) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .notes { border-top: 1px solid var(--ink); padding-top: var(--s4); }
  .notes ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
}
@media (max-width: 48em) {
  .ledger { row-gap: var(--s6); }
  .notes { border-top: 0; padding-top: 0; }
  .notes ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46em) {
  .sheet { padding: var(--s4) var(--s4) var(--s5) var(--s5); margin-inline: calc(var(--margin) * -.35); }
  .sheet::before { inset: 8px -6px -8px 6px; }
  .sheet::after { left: 9px; top: 10px; bottom: 10px; }
  .dir, .dir thead, .dir tbody, .dir tr, .dir th, .dir td { display: block; }
  .dir thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dir caption { display: block; }
  .dir tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "who km"
      "what what"
      "season season"
      "when when";
    column-gap: var(--s4);
    row-gap: var(--s2);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--rule-soft);
  }
  .dir tbody tr:first-child { border-top: 1px solid var(--ink); }
  .dir tbody tr:last-child { border-bottom: 1px solid var(--ink); }
  .dir tbody th, .dir tbody td,
  .dir tbody tr:last-child th, .dir tbody tr:last-child td { padding: 0; border: 0; }
  .dir tbody th { grid-area: who; }
  .dir .what { grid-area: what; max-width: none; }
  .dir .num { grid-area: km; align-self: start; padding-top: .1em; }
  .dir .season { grid-area: season; }
  .dir .lbl { display: inline-block; margin: 0 0 0 var(--s3); vertical-align: baseline; }
  .dir .when { grid-area: when; }
  .dir .when::before { content: attr(data-when-label) " "; color: var(--brown); }
  .dir .stale { display: inline; margin-left: .4em; }
  .dir .who { font-size: var(--t1); }
}

/* ==================================================================
   3 · The article (two columns, capital, margin)
   ================================================================== */
#this-month { padding-block: 0 var(--s10); }
.article {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s6);
  padding-top: var(--s7);
}
.art-head { grid-column: 1 / 9; }
.art-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1rem + 3.4vw, 3.157rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  max-width: 18ch;
  text-wrap: balance;
}
.art-head .standfirst {
  margin-top: var(--s4);
  font-size: var(--t1);
  line-height: 1.4;
  max-width: 36ch;
  color: var(--brown);
  text-wrap: pretty;
}
.art-body {
  grid-column: 1 / 9;
  columns: 2;
  column-gap: calc(var(--gutter) * 1.5);
  column-rule: 1px solid var(--rule-soft);
  hyphens: auto;
  -webkit-hyphens: auto;
  font-size: var(--t0);
  line-height: 1.58;
  text-wrap: pretty;
}
.art-body p + p { margin-top: 1em; }
.art-body .fig {
  column-span: all;
  max-width: 26rem;
  margin-top: var(--s6);
}
.art-body p:first-of-type::first-letter {
  float: left;
  font-size: 4.3em;
  line-height: .78;
  font-weight: 600;
  padding: .06em .08em 0 0;
  color: var(--ink);
}
.art-more { grid-column: 1 / 9; font-size: var(--t0); }
.art-margin {
  grid-column: 9 / 13;
  grid-row: 2 / span 2;
  display: grid;
  gap: var(--s6);
  align-content: start;
  padding-left: var(--gutter);
  border-left: 1px solid var(--rule-soft);
}
@media (max-width: 60em) {
  .art-head, .art-body, .art-margin, .art-more { grid-column: 1 / -1; grid-row: auto; }
  .art-body { columns: 1; }
  .art-margin { padding-left: 0; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40em) {
  .art-margin { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 40.01em) and (max-width: 60em) {
  .art-body { columns: 2; }
}

/* photos and the map placeholder */
.fig, .ph { display: grid; gap: var(--s2); }
.fig img {
  width: 100%;
  border-radius: var(--r-print);
  box-shadow: inset 0 0 0 1px rgb(34 24 18 / .28);
  filter: sepia(.55) saturate(.78) hue-rotate(-6deg) contrast(.93) brightness(1.04);
}
.fig figcaption, .ph figcaption { font-size: var(--t-1); color: var(--brown); line-height: 1.45; max-width: 34ch; }
.ph-box {
  position: relative;
  width: 100%;
  background: var(--kraft-deep);
  border-radius: var(--r-print);
  box-shadow: inset 0 0 0 1px rgb(34 24 18 / .28);
  display: grid;
  place-items: center;
}
.ph-box.map {
  background:
    radial-gradient(circle at 42% 58%, var(--brown) 0 3px, transparent 3.5px),
    repeating-radial-gradient(circle closest-side at 42% 58%, transparent 0, transparent calc(24% - 1px), var(--ring) calc(24% - 1px), var(--ring) 24%),
    linear-gradient(var(--ring), var(--ring)) 42% 0 / 1px 100% no-repeat,
    linear-gradient(var(--ring), var(--ring)) 0 58% / 100% 1px no-repeat,
    var(--sheet);
}
.ph-box span {
  font-family: var(--sans);
  font-size: var(--t-1);
  color: var(--brown);
  border: 1px solid var(--rule);
  padding: .2em .55em;
  background: var(--kraft);
}

/* ==================================================================
   4 · How a line gets on this list — a printed running order, not cards
   ================================================================== */
#how { padding-block: 0 var(--s9); }
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s6); padding-top: var(--s7); }
.how h2 { grid-column: 1 / 7; font-size: clamp(1.8rem, 1rem + 2.6vw, 2.369rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; max-width: 16ch; }
.steps { grid-column: 1 / 8; }
.steps ol { list-style: none; padding: 0; display: grid; }
.steps li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.steps li:first-child { border-top: 1px solid var(--ink); }
.steps li:last-child { border-bottom: 1px solid var(--ink); }
.steps .step-n { font-size: var(--t-1); font-weight: 600; color: var(--brown); }
.steps .step-l { display: block; font-weight: 600; font-size: var(--t1); letter-spacing: -.005em; line-height: 1.2; }
.steps .step-b { display: block; margin-top: .3em; max-width: 46ch; text-wrap: pretty; }
.how-close { grid-column: 1 / 8; font-style: italic; color: var(--brown); }
.how-fig { grid-column: 9 / 13; grid-row: 2 / span 2; align-self: start; }
@media (max-width: 60em) {
  .how h2, .steps, .how-close, .how-fig { grid-column: 1 / -1; grid-row: auto; }
  .how-fig { max-width: 30rem; }
}

/* ==================================================================
   5 · A pin, and a line with a date on it — a spread, split by a rule
   ================================================================== */
#compare { padding-block: 0 var(--s9); }
.compare { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); padding-top: var(--s7); }
.compare h2 { grid-column: 1 / 13; font-size: clamp(1.8rem, 1rem + 2.6vw, 2.369rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; max-width: 20ch; }
.compare .side { grid-column: span 6; padding-top: var(--s4); border-top: 1px solid var(--ink); }
.compare .side + .side { padding-left: calc(var(--gutter) * 1.2); border-left: 1px solid var(--rule-soft); }
.compare .lbl { display: block; font-size: var(--t-1); color: var(--brown); margin-bottom: var(--s3); }
.compare .body { font-size: var(--t1); line-height: 1.38; max-width: 30ch; text-wrap: pretty; }
.compare .side-b .body { color: var(--ink); }
.compare .side-a .body { color: var(--brown); }
@media (max-width: 60em) {
  .compare .side { grid-column: 1 / -1; }
  .compare .side + .side { padding-left: 0; border-left: 0; }
}

/* ==================================================================
   6 · Where we have been (map) + legend + scale
   ================================================================== */
#map { padding-block: 0 var(--s9); }
.mapsec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); padding-top: var(--s7); align-items: start; }
.mapsec .mapcol { grid-column: 1 / 6; }
.mapsec h2 { font-size: clamp(1.8rem, 1rem + 2.6vw, 2.369rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; max-width: 14ch; }
.mapsec .body { margin-top: var(--s4); max-width: 34ch; text-wrap: pretty; }
.legend { list-style: none; padding: 0; margin-top: var(--s5); display: grid; gap: var(--s2); font-size: var(--t-1); color: var(--brown); }
.legend li { display: flex; align-items: center; gap: var(--s3); }
.legend .sw { width: 1.6rem; height: .55rem; flex: none; border: 1px solid var(--rule); }
.legend .sw-pub { background: var(--olive); }
.legend .sw-driving { background: repeating-linear-gradient(45deg, var(--rule) 0 2px, transparent 2px 5px); }
.legend .sw-outline { background: transparent; }
.mapsec .figcol { grid-column: 7 / 13; }
@media (max-width: 60em) {
  .mapsec .mapcol, .mapsec .figcol { grid-column: 1 / -1; }
  .mapsec .figcol { max-width: 30rem; }
}

/* ==================================================================
   7 · Pricing — a printed rate card, three ruled lines
   ================================================================== */
#pricing { padding-block: 0 var(--s9); }
.pricing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); padding-top: var(--s7); }
.pricing h2 { grid-column: 1 / 8; font-size: clamp(1.8rem, 1rem + 2.6vw, 2.369rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; max-width: 16ch; }
.pricing .lead { grid-column: 1 / 8; color: var(--brown); max-width: 40ch; }
.rate { grid-column: 1 / 13; }
.rate ul { list-style: none; padding: 0; }
.rate li {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.rate li:first-child { border-top: 1px solid var(--ink); }
.rate li:last-child { border-bottom: 1px solid var(--ink); }
.rate .name { font-weight: 600; font-size: var(--t1); letter-spacing: -.005em; }
.rate .price { font-size: var(--t1); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.rate .flag { display: inline-block; margin-left: var(--s3); font-size: var(--t-1); font-weight: 400; color: var(--brown); border: 1px solid var(--rule); padding: .05em .5em; white-space: nowrap; }
.rate .what { text-wrap: pretty; }
.pricing .close { grid-column: 1 / 9; color: var(--brown); max-width: 52ch; text-wrap: pretty; }
@media (max-width: 60em) {
  .pricing h2, .pricing .lead, .pricing .close { grid-column: 1 / -1; }
  .rate li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "what what"; row-gap: var(--s2); }
  .rate .name { grid-area: name; }
  .rate .price { grid-area: price; text-align: right; }
  .rate .what { grid-area: what; }
  .rate .flag { margin-left: 0; display: block; width: max-content; margin-top: var(--s2); }
}

/* ==================================================================
   8 · FAQ + the inline reply card (the final CTA is not another band)
   ================================================================== */
#faq { padding-block: 0 var(--s9); }
.faqsec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s6); padding-top: var(--s7); align-items: start; }
.faqsec h2 { grid-column: 1 / 13; font-size: clamp(1.8rem, 1rem + 2.6vw, 2.369rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; max-width: 18ch; }
.faq { grid-column: 1 / 8; }
.faq dl { display: grid; border-bottom: 1px solid var(--ink); padding-bottom: var(--s5); }
.faq dt { font-size: var(--t-1); font-weight: 600; color: var(--brown); padding-top: var(--s4); border-top: 1px solid var(--rule-soft); }
.faq dl > dt:first-of-type { border-top: 1px solid var(--ink); }
.faq dd { margin: var(--s2) 0 var(--s5); max-width: 52ch; text-wrap: pretty; }
.faq dd:last-of-type { margin-bottom: 0; }
.final { grid-column: 9 / 13; align-self: start; }
.final h3 { font-size: var(--t1); font-weight: 600; letter-spacing: -.005em; }
.final .body { margin-top: var(--s3); color: var(--brown); text-wrap: pretty; }
.final .access { grid-column: auto; transform: none; margin-top: var(--s5); }
@media (max-width: 68em) {
  .faq, .final { grid-column: 1 / -1; }
  .final .access { max-width: 34rem; }
}

/* ==================================================================
   Colophon — the one ink band
   ================================================================== */
.colophon {
  position: relative;
  z-index: 1;
  margin-top: var(--s7);
  color: var(--kraft);
  background-color: var(--ink);
  background-image:
    repeating-radial-gradient(circle at 88% 128%, transparent 0, transparent calc(3.6rem - 1px), var(--ring-on-ink) calc(3.6rem - 1px), var(--ring-on-ink) 3.6rem),
    linear-gradient(to bottom, var(--ink-lift), var(--ink) 9rem);
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px 0 rgb(240 231 214 / .10);
}
.colophon .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
  padding-block: var(--s7) var(--s6);
}
:root .colophon .wordmark { grid-column: 1 / 5; color: var(--sheet); font-size: var(--t1); }
:root .colophon .wordmark .ic { color: var(--kraft); }
:root .colophon .wordmark:hover { color: var(--olive-glow); }
.scale { grid-column: 9 / 13; justify-self: end; align-self: center; width: 100%; max-width: 15rem; color: var(--kraft); }
.scale svg { display: block; width: 100%; height: auto; overflow: visible; }
.scale text { font-family: var(--sans); font-size: 11px; fill: currentColor; font-variant-numeric: tabular-nums; }
.scale path { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.col-voice {
  grid-column: 1 / 8;
  font-size: var(--t1);
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--sheet);
  max-width: 26ch;
  text-wrap: pretty;
}
.colophon nav { grid-column: 9 / 13; align-self: end; }
.colophon nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); font-size: var(--t-1); font-family: var(--sans); }
.colophon nav a { color: var(--olive-glow); background-image: linear-gradient(rgb(172 203 115 / .35), rgb(172 203 115 / .35)); display: inline-flex; align-items: baseline; gap: .45em; }
.colophon nav a:hover { color: var(--paper-light); background-image: linear-gradient(var(--olive-glow), var(--olive-glow)); background-size: 100% 2px; }
.colophon nav a .ic { align-self: center; width: 1.6em; height: 1.6em; }
.col-meta {
  grid-column: 1 / 8;
  font-family: var(--sans);
  font-size: var(--t-1);
  color: var(--kraft);
  padding-top: var(--s4);
  border-top: 1px solid rgb(214 193 160 / .22);
  max-width: 44ch;
}
.col-legal {
  grid-column: 9 / 13;
  align-self: end;
  font-family: var(--sans);
  font-size: var(--t-1);
  color: var(--kraft);
  padding-top: var(--s4);
  border-top: 1px solid rgb(214 193 160 / .22);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.col-legal a { color: var(--olive-glow); background-image: linear-gradient(rgb(172 203 115 / .35), rgb(172 203 115 / .35)); }
.colophon :focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--olive-glow); }
@media (max-width: 60em) {
  .colophon .wordmark, .col-voice, .colophon nav, .col-meta, .col-legal { grid-column: 1 / -1; }
  .scale { grid-column: 1 / -1; justify-self: start; }
  .colophon nav { align-self: start; }
  .col-legal { border-top: 0; padding-top: 0; }
}

/* ==================================================================
   Interior pages: the post content, set as a printed page
   ================================================================== */
.page-head { padding-block: var(--s7) var(--s5); }
.page-band { margin-block: 0 var(--s6); }
.page-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgb(34 24 18 / .28);
  filter: sepia(.55) saturate(.78) hue-rotate(-6deg) contrast(.93) brightness(1.04);
}
.page-body { padding-block: var(--s7) var(--s9); max-width: 46rem; }
.page-body > * + * { margin-top: var(--s4); }
.page-body h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.157rem); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; max-width: 18ch; margin-top: 0; }
.page-body h2 { font-size: var(--t2); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--ink); }
.page-body h3 { font-size: var(--t1); font-weight: 600; margin-top: var(--s5); }
.page-body p, .page-body li { text-wrap: pretty; }
.page-body ul, .page-body ol { padding-left: 1.2em; display: grid; gap: var(--s2); }
.page-body table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
  font-size: var(--t0);
}
.page-body table th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-1);
  color: var(--brown);
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--ink);
}
.page-body table td { padding: var(--s3) var(--s3) var(--s3) 0; border: 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.page-body table th { border-left: 0; border-right: 0; border-top: 0; }
.page-body .wp-block-table td, .page-body .wp-block-table th { border-left: 0; border-right: 0; border-top: 0; }
.page-body .wp-block-table { margin: 0; }
.page-body .wp-block-table { overflow-x: auto; }
.page-body figcaption, .page-body .wp-element-caption { font-family: var(--sans); font-size: var(--t-1); color: var(--brown); margin-top: var(--s2); }
.sample-tag {
  display: inline-block;
  font-size: var(--t-1);
  color: var(--brown);
  border: 1px solid var(--rule);
  padding: .1em .55em;
}


/* the reply card and the gate form when they sit inside a page's content */
.page-body .access {
  transform: none;
  grid-column: auto;
  max-width: 34rem;
  margin-top: var(--s5);
}
.page-body .access .field + .field { margin-top: var(--s3); }
.page-body .access .micro { padding-right: 3.4rem; }
.gate-form { gap: var(--s2); }
.gate-form .field { grid-template-columns: minmax(0, 1fr); }
.gate-form button { justify-self: start; margin-top: var(--s2); }

/* ==================================================================
   404 — the gate glyph at poster size
   ================================================================== */
.notfound { display: grid; gap: var(--s5); padding-block: var(--s9) var(--s10); max-width: 44rem; }
.notfound .gate { width: 96px; height: 96px; color: var(--brown); stroke-width: 1.5; }
.notfound h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem); font-weight: 400; line-height: 1; letter-spacing: -.015em; }
.notfound p { font-size: var(--t1); line-height: 1.4; max-width: 42ch; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ==================================================================
   Capa cinemática — scroll ligado (design-rules.md § "Capa cinemática")
   Sin JS, sin librerías: sólo CSS scroll-driven. Todo vive dentro de
   @supports (animation-timeline: view()) y de
   @media (prefers-reduced-motion: no-preference); el navegador que no lo
   soporte, o la lectora que pida menos movimiento, ve la página estática
   exactamente como está diseñada arriba.

   La coreografía sale del signature: el compás de 40 km y el registro de
   productores ordenado por kilómetros.
     1 · Héroe → superficie. El compás se asienta (se encoge y deriva más
         despacio que el scroll), la luz de la ventana viaja sobre el kraft
         a 0,35× y el titular retrocede: tres planos, tres velocidades.
     2 · Escena fijada (~2 pantallas): la hoja del registro se queda quieta
         mientras el radio se abre sobre el papel — cuatro anillos de luz
         desde la esquina de la hoja (10, 20, 30, 40 km) — y cada línea del
         directorio se entinta cuando el anillo la alcanza, del productor
         más cercano (9 km) al más lejano (28 km). Sin fijar por debajo de
         62em/44em: la misma secuencia, ligada a la vista de la hoja.
     3 · Detalle en la tarifa: la regla de luz del plan principal se dibuja
         y las tres cifras se asientan sobre su línea.

   Sólo transform, opacity, clip-path y custom properties. will-change en
   cuatro capas: el compás, la luz, el titular y el barrido de anillos.
   CLS 0: nada reserva espacio de más en tiempo de scroll; el alto del
   contenedor fijado es estático.
   ================================================================== */
:root {
  /* Rangos y desplazamientos en rem, no en vh: el pliegue no cambia con la
     barra del navegador ni con las capturas a página completa. */
  --hr-hero-range: 40rem;      /* el primer viewport: lo que dura el asiento */
  --hr-light-range: 96rem;     /* la luz recorre 34 de cada 96 rem: 0,35× */
  --hr-light-drift: 34rem;
  --hr-head-recede: 1rem;      /* el titular baja 1rem respecto al scroll */
  --hr-head-scale: .98;
  --hr-head-fade: .82;         /* 8,1 : 1 sobre kraft en el punto más bajo */
  --hr-compass-drift: 2.5rem;  /* el compás, el plano más lejano */
  --hr-compass-settle: .965;
  --hr-pin: 104rem;            /* ~2,1 pantallas de recorrido fijado */
  --hr-pin-top: clamp(1rem, 50vh - 21rem, 4rem);
  --hr-sweep-end: 168%;        /* el anillo de 40 km sale de la hoja */
  --hr-ring-gap: 25%;          /* cuatro anillos: 10, 20, 30 y 40 km */

  /* Los timelines se referencian SIEMPRE por variable: un minificador que
     pliegue `animation-timeline` dentro del shorthand `animation` hace que
     Chrome descarte la declaración entera (gotcha del piloto). */
  --tl-root: scroll(root);
  --tl-ledger: --ledger;
  --tl-rate: --rate;
}

/* El barrido es inerte fuera de la capa cinemática: una caja vacía, sin
   fondo, que no ocupa flujo ni recibe el ratón. */
.sheet > .sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- 1 · el héroe se asienta ---------- */

    /* La luz de la ventana: entra por arriba a la izquierda y baja por la
       mesa mientras subes. Plano de fondo, 0,35× del scroll. */
    .hero-art::after {
      content: "";
      position: absolute;
      z-index: 1;
      /* Alto y desplazamiento en rem, no en %: si dependieran del alto del
         héroe, cualquier reflujo de la tipografía movería una caja de media
         pantalla y la contaría como layout shift. */
      top: -4rem;
      right: -6%;
      left: -22%;
      height: 46rem;
      pointer-events: none;
      background: radial-gradient(58rem 32rem at 16% 4%, rgb(240 231 214 / .50), rgb(240 231 214 / 0) 66%);
      will-change: transform;
      animation: hr-light linear both;
      animation-timeline: var(--tl-root);
      animation-range: 0 var(--hr-light-range);
    }
    @keyframes hr-light {
      to { transform: translate3d(calc(var(--hr-light-drift) * .22), var(--hr-light-drift), 0); }
    }

    /* El compás impreso en el kraft: se asienta sobre la mesa (se encoge un
       3,5 %) y deriva hacia abajo, que es lo que hace un plano lejano. */
    .rings {
      will-change: transform;
      animation: hr-compass linear both;
      animation-timeline: var(--tl-root);
      animation-range: 0 var(--hr-hero-range);
    }
    @keyframes hr-compass {
      to { transform: translate3d(0, var(--hr-compass-drift), 0) scale(var(--hr-compass-settle)); }
    }

    /* El titular retrocede: otra capa, otra velocidad. Baja 1rem (el hueco
       hasta el standfirst es 1,5rem, así que no se toca nada) y pierde algo
       de luz sin bajar de 8 : 1. */
    .hero h1 {
      transform-origin: 0 100%;
      will-change: transform, opacity;
      animation: hr-recede linear both;
      animation-timeline: var(--tl-root);
      animation-range: 0 var(--hr-hero-range);
    }
    @keyframes hr-recede {
      to {
        transform: translate3d(0, var(--hr-head-recede), 0) scale(var(--hr-head-scale));
        opacity: var(--hr-head-fade);
      }
    }

    /* ---------- 2 · la escena del registro ----------
       Un solo timeline (--ledger) para las dos formas de la escena: fijada
       (rangos `contain`, el contenedor mide --hr-pin) y sin fijar (rangos
       `cover`, la hoja pasa por delante de la ventana). */
    .ledger { view-timeline-name: --ledger; }
    .dir { position: relative; z-index: 1; }

    /* Los anillos de luz sobre el papel: se revelan de dentro afuera desde
       la esquina de la hoja, que es donde está la lectora. Luz aditiva
       (paper-light sobre sheet): sube el contraste del texto, no lo baja. */
    .sheet > .sweep {
      z-index: 0;
      /* Cada anillo es una banda que crece hasta un filete: una ola de luz
         sobre el papel, no un arañazo. Cuatro, a 10, 20, 30 y 40 km. */
      background:
        repeating-radial-gradient(circle at 0% 0%,
          rgb(240 231 214 / 0) 0 calc(var(--hr-ring-gap) - 46px),
          rgb(240 231 214 / .10) calc(var(--hr-ring-gap) - 30px),
          rgb(240 231 214 / .34) calc(var(--hr-ring-gap) - 3px),
          rgb(240 231 214 / .62) calc(var(--hr-ring-gap) - 1.5px) var(--hr-ring-gap)),
        radial-gradient(circle at 0% 0%, rgb(240 231 214 / .5), rgb(240 231 214 / 0) 72%);
      clip-path: circle(0% at 0% 0%);
      will-change: clip-path;
      animation: hr-sweep linear both;
      animation-timeline: var(--tl-ledger);
      animation-range: contain -16% contain 88%;
    }
    @keyframes hr-sweep {
      to { clip-path: circle(var(--hr-sweep-end) at 0% 0%); }
    }

    /* Cada línea se entinta cuando el radio la alcanza. La fila entera
       lleva el rango; animan sus celdas (transform en <tr> es frágil). */
    .dir tbody tr > * {
      animation: hr-ink linear both;
      animation-timeline: var(--tl-ledger);
    }
    @keyframes hr-ink {
      from { opacity: 0; transform: translate3d(-.4rem, 0, 0); }
      to   { opacity: 1; transform: none; }
    }
    /* `contain` en los dos modos, y por eso no hay dos juegos de rangos: para
       un sujeto más alto que la ventana el rango es exactamente el tramo en
       que la hoja tapa la pantalla — fijada arriba (el contenedor mide
       --hr-pin) o pasando por delante abajo. Se normaliza solo. */
    .dir tbody tr:nth-child(1) > * { animation-range: contain -16% contain -2%; }
    .dir tbody tr:nth-child(2) > * { animation-range: contain 2%   contain 14%; }
    .dir tbody tr:nth-child(3) > * { animation-range: contain 18%  contain 30%; }
    .dir tbody tr:nth-child(4) > * { animation-range: contain 34%  contain 46%; }
    .dir tbody tr:nth-child(5) > * { animation-range: contain 50%  contain 62%; }
    .dir tbody tr:nth-child(6) > * { animation-range: contain 66%  contain 78%; }

    /* Modo fijado: la hoja y sus notas al margen se quedan quietas ~2,1
       pantallas mientras el radio se abre. Por debajo de 62em/44em no se fija
       nada: la misma secuencia ocurre mientras la hoja sube por la pantalla. */
    @media (min-width: 62em) and (min-height: 44em) {
      .ledger { min-height: var(--hr-pin); }
      .sheet, .notes { position: sticky; top: var(--hr-pin-top); }
    }

    /* ---------- 3 · el detalle de la tarifa ---------- */
    .rate { view-timeline-name: --rate; }

    /* La regla de luz que marca el plan principal se dibuja de izquierda a
       derecha. Es filete decorativo, no texto. */
    .rate li:nth-child(2) { position: relative; }
    .rate li:nth-child(2)::after {
      content: "";
      position: absolute;
      z-index: 1;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      pointer-events: none;
      background: linear-gradient(90deg, var(--olive-glow), rgb(172 203 115 / 0));
      box-shadow: 0 0 10px rgb(172 203 115 / .45);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: hr-rule linear both;
      animation-timeline: var(--tl-rate);
      animation-range: cover 26% cover 48%;
    }
    @keyframes hr-rule { to { transform: scaleX(1); } }

    /* Y las tres cifras se asientan sobre su línea, en orden. */
    .rate .price {
      display: inline-block;
      animation: hr-settle linear both;
      animation-timeline: var(--tl-rate);
    }
    @keyframes hr-settle {
      from { transform: translate3d(0, .5rem, 0); }
      to   { transform: none; }
    }
    .rate li:nth-child(1) .price { animation-range: cover 24% cover 36%; }
    .rate li:nth-child(2) .price { animation-range: cover 30% cover 42%; }
    .rate li:nth-child(3) .price { animation-range: cover 36% cover 48%; }
  }
}

/* En papel, nada de esto existe. */
@media print {
  .sheet > .sweep { display: none; }
  .hero h1, .rings, .dir tbody tr > *, .rate .price, .rate li::after { animation: none !important; }
}