/* ==========================================================================
   Dejusticia · El camino del juicio por la Amazonía — línea de tiempo
   Geometry is authored against the 1920 px design frames: every length is
   `N * var(--u)`, where --u is one design pixel at the current width.
   All page styles are scoped under .amazonia-timeline so the page can live
   inside the site's WordPress template (header/footer come from the template).
   ========================================================================== */

/* ---------- Fonts (Dejusticia brand fonts) ----------
   Weight descriptors keep the values the rules below already request:
   Druk Medium is registered at 400 and GT Super Text Medium at 600. */
@font-face {
  font-family: "Druk";
  src: url("../assets/fonts/druk/Druk-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Druk";
  src: url("../assets/fonts/druk/Druk-MediumItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim Pro";
  src: url("../assets/fonts/gt-walsheim-pro/GTWalsheimPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim Pro";
  src: url("../assets/fonts/gt-walsheim-pro/GTWalsheimPro-MediumOblique.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim Pro";
  src: url("../assets/fonts/gt-walsheim-pro/GTWalsheimPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Walsheim Pro";
  src: url("../assets/fonts/gt-walsheim-pro/GTWalsheimPro-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super Text";
  src: url("../assets/fonts/gt-super-text/GTSuperText-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --at-navy: #2b265b;
  --at-navy-50: rgb(43 38 91 / 0.5);   /* sidebar header, sidebar border, chart axis (sampled) */
  --at-sage: #d3dad0;
  --at-mint: #e2ece3;
  --at-blue: #30bce8;
  --at-red: #f0384c;
  --at-green: #25b257;
  --at-cream: #efecea;
  --at-brown: #602a13;
  --at-reference-gray: #afb4b5;
  --at-orange: #faba1a;
  --at-teal: #66c99a;
  --at-sidebar-gray: #7a7a94;
  --at-white: #fff;
  /* Darkening veil over the texture: guía band and "Leer hito" strips (sampled #D4DACE) */
  --at-shade: rgb(110 100 80 / 0.12);
  /* Multiplied with the texture tile to reach the sampled page tone #E4EEE3 */
  --at-texture-tint: #fafdf5;
  --at-texture: url("../assets/img/fondo-timeline.jpg");

  --at-motion-duration: 450ms;
  --at-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --at-font-display: "Druk", "Arial Narrow", sans-serif;
  --at-font-sans: "GT Walsheim Pro", "Helvetica Neue", Arial, sans-serif;
  --at-font-serif: "GT Super Text", Georgia, "Times New Roman", serif;
}

/* ---------- Root wrapper ---------- */
.amazonia-timeline {
  container: amazonia / inline-size;
  display: block;
  overflow-x: clip;
  color: var(--at-navy);
  background-color: var(--at-mint);
  font-family: var(--at-font-sans);
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* One design pixel. Resolved on descendants, where 100cqi is the wrapper width. */
.amazonia-timeline > * {
  --u: calc(min(100cqi, 1920px) / 1920);
}

.amazonia-timeline *,
.amazonia-timeline *::before,
.amazonia-timeline *::after {
  box-sizing: border-box;
}

.amazonia-timeline [hidden] {
  display: none;
}

.amazonia-timeline img,
.amazonia-timeline svg {
  max-width: 100%;
}

.amazonia-timeline :focus-visible {
  outline: 3px solid var(--at-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--at-cream);
}

.amazonia-timeline .sr-only,
.amazonia-timeline .chart__table,
.site-footer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.at-inner {
  position: relative;
  width: min(100%, 1920px);
  margin-inline: auto;
}

/* Diamond +/− icons (sprite symbols) */
.icon {
  display: block;
  flex: none;
  color: var(--at-navy);
}

.icon__shape {
  fill: currentColor;
}

.icon__sign {
  fill: none;
  stroke: var(--icon-sign, var(--at-cream));
  stroke-width: 2.6;
}

/* ---------- Textured grounds ---------- */
.intro,
.timeline {
  background: var(--at-texture) 0 0 / calc(1080 * var(--u)) repeat var(--at-texture-tint);
  background-blend-mode: multiply;
}

.guide {
  background:
    linear-gradient(var(--at-shade), var(--at-shade)),
    var(--at-texture) 0 0 / calc(1080 * var(--u)) repeat var(--at-texture-tint);
  background-blend-mode: normal, multiply;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Cover illustration (PORTADA). Horizontal guide: the scene fills the right half and
   runs off the right edge, the title sits on the left over the tree rings. The scene
   spans 37-88% of the art's width, so 112% puts it at 41-99% of the hero. */
.hero {
  --hero-art: url("../assets/img/portada.jpg");
  position: relative;
  overflow: hidden;
  background: var(--hero-art) 0 31% / 112% auto no-repeat #e6e4e3;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(700 * var(--u));
  padding: calc(60 * var(--u)) 0 calc(60 * var(--u)) calc(190 * var(--u));
}

.hero__eyebrow,
.hero__title {
  position: relative;
}

.hero__eyebrow {
  margin: 0;
  font-size: max(11px, calc(22 * var(--u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__title {
  margin: calc(24 * var(--u)) 0 0;
  font-family: var(--at-font-display);
  font-weight: 400;
}

.hero__kicker {
  display: inline-block;
  padding: 0 calc(10 * var(--u));
  background: var(--at-navy);
  color: var(--at-cream);
  font-size: calc(84 * var(--u));
  font-style: italic;
  line-height: 1.155;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__headline {
  display: block;
  margin-top: calc(17 * var(--u));
  font-size: calc(123 * var(--u));
  line-height: 0.935;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Intro + créditos
   ========================================================================== */
.intro__inner {
  display: grid;
  grid-template-columns: calc(1170 * var(--u)) 1fr;
  column-gap: calc(63 * var(--u));
  align-items: start;
  min-height: calc(392 * var(--u));
  padding-left: calc(191 * var(--u));
}

.intro__text {
  margin: calc(40 * var(--u)) 0 0;
  font-family: var(--at-font-serif);
  font-size: max(15px, calc(26.8 * var(--u)));
  font-weight: 600;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.4925;
}

.credits {
  min-height: calc(247 * var(--u));
  margin-top: calc(51 * var(--u));
  padding-left: calc(69 * var(--u));
  border-left: max(1px, calc(2 * var(--u))) solid var(--at-navy);
}

.credits__title {
  margin: 0;
  font-size: max(11px, calc(21 * var(--u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.credits__list {
  display: grid;
  gap: calc(14.5 * var(--u));
  margin: calc(15 * var(--u)) 0 0;
}

.credits__list dt {
  font-size: max(11px, calc(17.8 * var(--u)));
  font-weight: 700;
  line-height: 1.18;
}

.credits__list dd {
  margin: 0;
  font-size: max(11px, calc(17.1 * var(--u)));
  font-weight: 500;
  line-height: 1.228;
}

/* ==========================================================================
   Guía de lectura
   ========================================================================== */
.guide__inner {
  display: flex;
  align-items: flex-start;
  min-height: calc(130 * var(--u));
  padding-left: calc(191 * var(--u));
}

.guide__title {
  flex: none;
  width: calc(297.5 * var(--u));
  margin: calc(52 * var(--u)) 0 0;
  font-size: max(11px, calc(22.5 * var(--u)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.guide__list {
  display: flex;
  gap: calc(38 * var(--u));
  margin: calc(26.5 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.guide__item {
  display: flex;
  align-items: center;
  gap: calc(5.5 * var(--u));
}

.guide__icon {
  flex: none;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
}

.guide__text {
  font-size: max(12px, calc(22 * var(--u)));
  font-style: italic;
  font-weight: 500;
  line-height: 1.364;
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline {
  position: relative;
}

.timeline__list {
  position: relative;
  display: flow-root;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Year badge ---------- */
.year-badge {
  position: relative;
  width: calc(150 * var(--u));
  margin: 0 auto calc(70 * var(--u));
  background: var(--at-navy);
  color: var(--at-cream);
  font-family: var(--at-font-display);
  font-size: calc(75 * var(--u));
  line-height: 1.294;
  letter-spacing: 0.06em;
  text-align: center;
  text-indent: 0.06em;
  scroll-margin-top: calc(var(--site-header-offset, 0px) + 178 * var(--u));
}

/* ---------- Milestone rhythm ----------
   A milestone's top margin never depends on its own state, so its heading does
   not move when it is toggled; only the air below it changes (and animates).
   Vertical margins collapse: between two expanded milestones the gap is 320 px,
   which keeps each one inside its own 1080 px design frame. */
.milestone {
  --cat: var(--at-navy);
  --mt: calc(120 * var(--u));
  --mb: calc(320 * var(--u));
  --badge-block: 0px;
  position: relative;
  margin: var(--mt) 0 var(--mb);
  transition: margin-bottom var(--at-motion-duration) var(--at-motion-ease);
}

.milestone:first-child {
  --mt: calc(178 * var(--u));
}

.milestone--has-badge {
  --badge-block: calc(167 * var(--u)); /* 97 px badge + 70 px gap */
}

.js .milestone[data-state="collapsed"] {
  --mb: 0px;
}

.js .milestone[data-state="collapsed"]:last-child {
  --mb: calc(160 * var(--u));
}

/* Spine: each milestone draws its own segment across its margins (neighbouring
   segments overlap where margins collapse). Deforestation cards interrupt it. */
.milestone::before,
.milestone--deforestacion::after {
  content: "";
  position: absolute;
  left: 50%;
  width: max(2px, calc(4 * var(--u)));
  background: var(--at-navy);
  transform: translateX(-50%);
}

.milestone::before {
  top: calc(-1 * var(--mt));
  bottom: calc(-1 * var(--mb));
  transition: bottom var(--at-motion-duration) var(--at-motion-ease);
}

.milestone--deforestacion::before {
  bottom: auto;
  height: calc(var(--mt) + var(--badge-block));
  transition: none;
}

.milestone--deforestacion::after {
  top: 100%;
  height: var(--mb);
  transition: height var(--at-motion-duration) var(--at-motion-ease);
}

/* Expand / collapse animation hooks (js/timeline.js) */
.milestone__article.is-animating {
  overflow: clip;
}

.milestone__article .is-leaving {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.is-instant .milestone,
.is-instant .milestone::before,
.is-instant .milestone::after,
.is-instant .toggle__icon,
.is-instant .toggle__icon-v {
  transition: none;
}

.milestone--juridico {
  --cat: var(--at-blue);
}

.milestone--sociedad-civil {
  --cat: var(--at-green);
}

.milestone--deforestacion {
  --cat: var(--at-red);
}

/* ---------- Spine marker ---------- */
.milestone__marker {
  position: absolute;
  z-index: 1;
  top: calc(var(--badge-block) - 13 * var(--u));
  left: 50%;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  transform: translateX(-50%);
}

.milestone__marker img {
  display: block;
  width: 100%;
  height: 100%;
}

.milestone__marker--edge {
  top: calc(var(--badge-block) - 38 * var(--u));
}

/* ---------- Narrative milestone ---------- */
.milestone__article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.milestone__text {
  grid-row: 1;
  width: calc(695 * var(--u));
}

.milestone--left .milestone__text {
  grid-column: 1;
  justify-self: end;
  margin-right: calc(65 * var(--u));
  text-align: right;
}

.milestone--right .milestone__text {
  grid-column: 2;
  justify-self: start;
  margin-left: calc(65 * var(--u));
  text-align: left;
}

.milestone__heading {
  margin: 0;
  font-family: var(--at-font-display);
  font-weight: 400;
}

.milestone__date {
  display: block;
  color: var(--cat);
  font-size: max(24px, calc(50 * var(--u)));
  line-height: 1;
  text-transform: uppercase;
}

.milestone__title {
  display: block;
  max-width: calc(620 * var(--u));
  font-size: max(20px, calc(40.5 * var(--u)));
  font-style: italic;
  line-height: 1.111;
  text-transform: uppercase;
  text-wrap: balance;
}

.milestone--left .milestone__title {
  margin-left: auto;
}

.title-bar {
  padding: 0 calc(8 * var(--u));
  background: var(--cat);
  color: var(--at-cream);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.title-bar__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.04em);
  text-underline-offset: 0.1em;
}

/* "Leer hito" / "Cerrar hito" */
.toggle {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  width: fit-content;
  margin-top: calc(9 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--at-navy);
  font-family: var(--at-font-sans);
  font-size: max(14px, calc(21 * var(--u)));
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

/* The label is what opens and closes a milestone, so it reads as a control, not as body text */
.toggle__label,
.strip-toggle__label {
  text-decoration: underline;
  text-decoration-thickness: max(2px, 0.1em);
  text-underline-offset: 0.2em;
}

.milestone--left .toggle {
  margin-left: auto;
}

.milestone--right .toggle {
  flex-direction: row-reverse;
}

/* The + turns into −: its vertical stroke swings a quarter turn onto the horizontal one */
.toggle__icon {
  width: max(18px, calc(27 * var(--u)));
  height: max(18px, calc(27 * var(--u)));
  transition: scale 200ms ease;
}

.toggle__icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--at-motion-duration) var(--at-motion-ease);
}

.toggle[aria-expanded="true"] .toggle__icon-v {
  transform: rotate(90deg);
}

.toggle[aria-expanded="true"] .toggle__label--open,
.toggle[aria-expanded="false"] .toggle__label--close {
  display: none;
}

.toggle[data-animated] .toggle__label {
  animation: at-label-in 320ms var(--at-motion-ease) both;
}

.toggle:hover .toggle__icon,
.strip-toggle:hover .strip-toggle__icon,
.year-nav__action:hover .year-nav__action-icon {
  scale: 1.12;
}

@keyframes at-label-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.milestone__body {
  margin: calc(11.5 * var(--u)) 0 0;
  font-size: max(14px, calc(21.4 * var(--u)));
  font-weight: 500;
  line-height: 1.402;
}

.milestone__body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.16em;
}

.milestone__body a:hover,
.title-bar__link:hover {
  text-decoration-thickness: max(2px, 0.1em);
}

/* Illustration panel. The images are transparent outside the designer's painted frame,
   so they sit straight on the page texture: no shade veil and no multiply, which
   read as a grey box around the frame and made the art look faded. */
.milestone__figure {
  position: relative;
  grid-row: 1;
  width: calc(763 * var(--u));
  aspect-ratio: 16 / 9;
  margin: calc(28 * var(--u)) 0 0;
}

.milestone--left .milestone__figure {
  grid-column: 2;
  justify-self: start;
  margin-left: calc(2 * var(--u));
}

.milestone--right .milestone__figure {
  grid-column: 1;
  justify-self: end;
  margin-right: calc(2 * var(--u));
}

.milestone__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Deforestation milestone ---------- */
.milestone--deforestacion .milestone__article {
  display: block;
  width: calc(1508 * var(--u));
  margin-inline: auto;
}

.defo-summary,
.defo-detail {
  position: relative;
}

/* Collapsed summary banner. The two phrases meet at the spine (the card is centred on it)
   instead of being centred as one line, so the diamond's lower tip always falls in the gap
   between them, whatever the hectare figure's length. */
.defo-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  height: calc(124 * var(--u));
  margin: 0;
  overflow: hidden;
  background: var(--at-red);
  color: var(--at-cream);
  font-family: var(--at-font-display);
  font-size: calc(92 * var(--u));
  line-height: 1.391;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.defo-banner__small,
.total-banner__small {
  font-size: calc(41 * var(--u));
  letter-spacing: 0.01em;
}

/* Offsets from the spine, as in the design frame */
.defo-banner__big {
  justify-self: end;
  margin-right: calc(19 * var(--u));
}

.defo-banner__small {
  justify-self: start;
  margin-left: calc(-9 * var(--u));
}

/* Full-width strips holding "Leer hito" / "Cerrar hito" (icon centred on the spine) */
.strip-toggle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: calc(9 * var(--u));
  width: 100%;
  min-height: calc(46 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--at-font-sans);
  font-size: max(14px, calc(21 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.strip-toggle__label {
  justify-self: end;
}

.strip-toggle__icon,
.year-nav__action-icon {
  transition: scale 200ms ease;
}

.strip-toggle__icon {
  width: max(18px, calc(27 * var(--u)));
  height: max(18px, calc(27 * var(--u)));
  color: inherit;
}

.strip-toggle--open {
  border: max(1px, calc(2 * var(--u))) solid var(--at-red);
  border-top: 0;
  background: var(--at-shade);
  color: var(--at-navy);
}

.strip-toggle--close {
  --icon-sign: var(--at-navy);
  background: var(--at-red);
  color: var(--at-cream);
}

.strip-toggle--close:focus-visible {
  outline-color: var(--at-cream);
  box-shadow: 0 0 0 3px var(--at-navy);
}

/* Expanded card */
.defo-card {
  position: relative;
  display: grid;
  grid-template-columns: max(calc(277 * var(--u)), 190px) minmax(0, 1fr);
  border: max(1px, calc(2 * var(--u))) solid var(--at-red);
}

.stat-callout {
  padding: calc(32 * var(--u)) calc(24 * var(--u)) calc(27 * var(--u));
  background: var(--at-cream);
}

.stat-callout p {
  margin: 0;
}

.stat-callout__number {
  color: var(--at-red);
  font-family: var(--at-font-display);
  font-size: calc(90 * var(--u));
  line-height: 0.78;
}

.stat-callout p.stat-callout__label {
  margin-top: calc(9 * var(--u));
  color: var(--at-red);
  font-family: var(--at-font-display);
  font-size: calc(35 * var(--u));
  font-style: italic;
  line-height: 0.743;
  text-transform: uppercase;
}

.stat-callout__label,
.stat-callout__number {
  white-space: nowrap;
}

.stat-callout p.stat-callout__body {
  margin-top: calc(7 * var(--u));
  font-size: max(12px, calc(17.2 * var(--u)));
  line-height: 1.453;
}

.stat-callout__body strong {
  color: var(--at-red);
  font-weight: 700;
}

.stat-callout p.stat-callout__note {
  margin-top: calc(17 * var(--u));
  font-size: max(10px, calc(12.7 * var(--u)));
  line-height: 1.339;
}

.stat-callout__asterisk,
.chart__asterisk {
  color: var(--at-red);
  font-weight: 700;
}

.stat-callout__asterisk {
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.12em;
}

/* Accumulated total (m25) */
.total-banner {
  height: calc(122 * var(--u));
  margin: 0;
  overflow: hidden;
  background: var(--at-red);
  color: var(--at-cream);
  font-family: var(--at-font-display);
  font-size: calc(92 * var(--u));
  line-height: 1.326;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Deforestation chart: the designer's illustration per year ---------- */
/* The image carries its own paper texture, so it is shown as is: no shade veil and
   no multiply over the page background. */
.chart {
  align-self: center;
  min-width: 0;
  margin: 0;
}

.chart__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   "Navegar por año" sidebar
   ========================================================================== */
.year-nav {
  /* The sidebar also scales with the viewport height, so its sticky box (113 px
     offset + 865 px tall at 1920) always fits short laptop windows. */
  --u: min(calc(min(100cqi, 1920px) / 1920), calc((100svh - var(--site-header-offset, 0px)) / 1000));
  position: absolute;
  z-index: 2;
  top: 0;
  right: calc(17.5 * var(--u));
  bottom: 0;
  width: calc(161 * var(--u));
}

/* max-height + scroll is a last resort for very short windows, where the px
   floors stop the sidebar shrinking. The padding keeps focus rings unclipped. */
.year-nav__sticky {
  position: sticky;
  top: calc(var(--site-header-offset, 0px) + 113 * var(--u));
  max-height: calc(100svh - var(--site-header-offset, 0px) - 113 * var(--u));
  margin: calc(113 * var(--u)) -8px -8px;
  padding: 0 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.year-nav__title {
  min-height: calc(72 * var(--u));
  margin: 0;
  padding: calc(8 * var(--u)) 0 0 0.18em;
  background: rgb(43 38 91 / 0.55);
  color: var(--at-cream);
  font-size: max(10px, calc(22.5 * var(--u)));
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.year-nav__list {
  margin: 0;
  padding: calc(16 * var(--u)) 0 calc(24 * var(--u)) calc(19 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--at-navy-50);
  border-top: 0;
  list-style: none;
}

.year-nav__link {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--at-navy);
  text-decoration: none;
}

.year-nav__marker {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(30 * var(--u));
  color: var(--at-navy);
}

.year-nav__year {
  font-size: max(11px, calc(22.5 * var(--u)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.13em;
}

.year-nav__link:hover .year-nav__year {
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.08em);
  text-underline-offset: 0.2em;
}

/* One dot per milestone of the year, coloured by category (generated) */
.year-nav__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5.5 * var(--u));
  width: calc(30 * var(--u));
  margin: 0;
  padding: calc(1.5 * var(--u)) 0;
  list-style: none;
}

.year-nav__dot {
  width: max(5px, calc(9 * var(--u)));
  height: max(5px, calc(9 * var(--u)));
  background: var(--cat, var(--at-navy));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.year-nav__dot--juridico { --cat: var(--at-blue); }
.year-nav__dot--deforestacion { --cat: var(--at-red); }
.year-nav__dot--sociedad_civil { --cat: var(--at-green); }

/* "Expandir / Contraer todos" sit above the year list as solid buttons, so they are
   the first thing the sidebar shows rather than a footnote under it */
.year-nav__actions {
  display: grid;
  gap: calc(8 * var(--u));
  margin-bottom: calc(16 * var(--u));
}

.year-nav__action {
  --icon-sign: var(--at-navy);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: 100%;
  min-height: calc(48 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border: 0;
  background: var(--at-navy);
  color: var(--at-cream);
  font-family: var(--at-font-sans);
  font-size: max(12px, calc(19 * var(--u)));
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}

.year-nav__action:hover {
  background: var(--at-blue);
  color: var(--at-navy);
}

.year-nav__action-icon {
  width: max(16px, calc(27 * var(--u)));
  height: max(16px, calc(27 * var(--u)));
  color: var(--at-cream);
}

/* ==========================================================================
   Without JavaScript: everything reads expanded, no toggles
   ========================================================================== */
.no-js .milestone__panel[hidden],
.no-js .milestone__figure[hidden],
.no-js .defo-detail[hidden] {
  display: block;
}

.no-js .toggle,
.no-js .strip-toggle,
.no-js .defo-summary,
.no-js .year-nav__actions {
  display: none;
}

/* ==========================================================================
   Narrow two-column (~900–1100 px): the stat callout stacks above the chart,
   so the chart keeps enough width for its labels
   ========================================================================== */
@container amazonia (min-width: 900px) and (max-width: 1099.98px) {
  .defo-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-callout {
    padding: max(18px, calc(32 * var(--u))) max(20px, calc(40 * var(--u)));
  }

  .stat-callout p.stat-callout__body {
    font-size: max(14px, calc(17.2 * var(--u)));
  }
}

/* ==========================================================================
   Single column (below ~900 px)
   ========================================================================== */
@container amazonia (max-width: 899.98px) {
  .amazonia-timeline > *,
  .year-nav {
    --u: 0.75px;
    --spine-x: 36px;
  }

  /* Hero, vertical guide: the scene fills the width at the top and the title sits
     below it. The hero itself shows only tree rings (the left of the art has no
     scene), and ::before lays the scene over them, fading out at its foot so the
     rings carry on under the title. */
  .hero {
    background: var(--hero-art) 0 0 / 360% auto repeat-y #e6e4e3;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100cqi;
    background: var(--hero-art) 74% -13cqi / 206% auto no-repeat;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }

  .hero__inner {
    display: block;
    min-height: 0;
    padding: 70cqi 16px 48px;
  }

  .hero__eyebrow {
    font-size: 13px;
    letter-spacing: 0.16em;
    line-height: 1.5;
  }

  .hero__title {
    margin-top: 14px;
  }

  .hero__kicker {
    display: inline;
    padding: 0 6px;
    font-size: clamp(27px, 10.625cqi, 34px);
    line-height: 1.35;
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero__headline {
    margin-top: 12px;
    font-size: clamp(46px, 18.75cqi, 60px);
    line-height: 0.95;
    white-space: normal;
  }

  /* Landscape phones: keep the title on the first screen */
  @media (orientation: landscape) and (max-height: 500px) {
    .hero {
      background: var(--hero-art) 0 31% / 112% auto no-repeat #e6e4e3;
    }

    .hero::before {
      content: none;
    }

    .hero__inner {
      padding-top: 40px;
    }

    .hero__eyebrow,
    .hero__title {
      max-width: 58%;
    }
  }

  /* Intro + créditos: the divider becomes horizontal */
  .intro__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 36px 16px 40px;
  }

  .intro__text {
    margin: 0;
    font-size: 19px;
    line-height: 1.5;
  }

  .credits {
    min-height: 0;
    margin-top: 32px;
    padding: 28px 0 0;
    border-top: 2px solid var(--at-navy);
    border-left: 0;
  }

  .credits__title {
    font-size: 15px;
  }

  .credits__list {
    gap: 12px;
    margin-top: 16px;
  }

  .credits__list dt {
    font-size: 15px;
  }

  .credits__list dd {
    font-size: 15px;
  }

  /* Guía */
  .guide__inner {
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 32px 16px;
  }

  .guide__title {
    width: auto;
    margin: 0;
    font-size: 16px;
  }

  .guide__list {
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }

  .guide__item {
    gap: 10px;
  }

  .guide__icon {
    width: 56px;
    height: 56px;
  }

  .guide__text {
    font-size: 17px;
  }

  /* Timeline: spine on the left, content to its right (never interrupted) */
  .milestone::before,
  .milestone--deforestacion::before {
    left: var(--spine-x);
    bottom: calc(-1 * var(--mb));
    height: auto;
  }

  .milestone--deforestacion::after {
    content: none;
  }

  .year-badge {
    margin: 0 0 24px calc(var(--spine-x) - 36px);
    width: 72px;
    font-size: 42px;
    line-height: 54px;
    scroll-margin-top: calc(var(--site-header-offset, 0px) + 136px);
  }

  .milestone,
  .milestone:first-child,
  .js .milestone[data-state="collapsed"] {
    --mt: 56px;
    --mb: 0px;
  }

  .milestone--has-badge {
    --badge-block: 78px; /* 54 px badge + 24 px gap */
  }

  .milestone:last-child,
  .js .milestone[data-state="collapsed"]:last-child {
    --mb: 64px;
  }

  .milestone__marker {
    top: calc(var(--badge-block) - 6px);
    left: var(--spine-x);
    width: 50px;
    height: 50px;
  }

  .milestone__marker--edge {
    top: calc(var(--badge-block) - 25px);
  }

  .milestone__article {
    display: block;
    padding: 0 16px 0 72px;
  }

  .milestone--left .milestone__text,
  .milestone--right .milestone__text {
    width: auto;
    margin: 0;
    text-align: left;
  }

  .milestone__date {
    font-size: clamp(26px, 9.375cqi, 30px);
    line-height: 1.25;
  }

  .milestone__title {
    max-width: none;
    font-size: clamp(22px, 7.8125cqi, 25px);
  }

  .milestone--left .milestone__title,
  .milestone--left .toggle {
    margin-left: 0;
  }

  .toggle {
    flex-direction: row-reverse;
    min-height: 44px;
    margin-top: 2px;
    font-size: 17px;
  }

  .milestone__body {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.55;
  }

  .milestone--left .milestone__figure,
  .milestone--right .milestone__figure {
    width: 100%;
    margin: 20px 0 0;
  }

  /* Deforestation */
  .milestone--deforestacion .milestone__article {
    width: auto;
    margin: 0 16px 0 72px;
    padding: 0;
  }

  .defo-banner,
  .total-banner {
    display: block;
    height: auto;
    padding: 20px 14px 16px;
    font-size: clamp(36px, 14.375cqi, 46px);
    line-height: 1;
    white-space: normal;
  }

  .defo-banner__big {
    margin-right: 0;
  }

  .defo-banner__small,
  .total-banner__small {
    display: block;
    margin-top: 6px;
    margin-left: 0;
    font-size: clamp(19px, 7.1875cqi, 23px);
  }

  .total-banner__small {
    margin-block: 6px;
  }

  .total-banner__big {
    display: block;
  }

  .strip-toggle {
    min-height: 44px;
    font-size: 17px;
  }

  .defo-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-callout {
    padding: 32px 20px 22px;
  }

  .stat-callout__number {
    font-size: clamp(58px, 23.75cqi, 76px);
  }

  .stat-callout p.stat-callout__label {
    font-size: clamp(22px, 8.75cqi, 28px);
  }

  .stat-callout p.stat-callout__body {
    font-size: 16px;
  }

  .stat-callout p.stat-callout__note {
    font-size: 13px;
  }

  .chart {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* Keep the year labels legible: the illustration scrolls sideways instead of shrinking */
  .chart .chart__img {
    width: 820px;
    max-width: none;
  }

  /* Sidebar → sticky, horizontally scrollable year chip bar */
  .year-nav {
    position: sticky;
    z-index: 5;
    top: var(--site-header-offset, 0px);
    right: auto;
    bottom: auto;
    width: auto;
    background: var(--at-mint);
    box-shadow: 0 1px 0 var(--at-navy-50);
  }

  /* The two buttons get a row of their own above the year chips, labels visible */
  .year-nav__sticky {
    position: static;
    display: flex;
    flex-direction: column;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .year-nav__nav {
    min-width: 0;
  }

  .year-nav__title {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .year-nav__list {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    overflow-x: auto;
    border: 0;
    scrollbar-width: thin;
  }

  .year-nav__link {
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
  }

  .year-nav__marker {
    width: 20px;
    height: 20px;
  }

  .year-nav__year {
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  .year-nav__dots {
    display: none;
  }

  .year-nav__actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 8px 8px 0;
  }

  .year-nav__action {
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 16px;
  }

  .year-nav__action-icon {
    width: 22px;
    height: 22px;
  }
}

/* Touch screens: at least 44 px hit areas on the scaled-down desktop controls,
   without changing how they look */
@media (pointer: coarse) {
  .toggle,
  .year-nav__link,
  .year-nav__action {
    position: relative;
  }

  .toggle::after,
  .year-nav__link::after,
  .year-nav__action::after {
    content: "";
    position: absolute;
    inset-block: min(0px, calc((100% - 44px) / 2));
    inset-inline: min(0px, calc((100% - 44px) / 2));
  }

  /* Room for the last control's hit area inside the sidebar's scroll box */
  @container amazonia (min-width: 900px) {
    .year-nav__sticky {
      padding-bottom: 24px;
      margin-bottom: -24px;
    }
  }

  .strip-toggle {
    min-height: max(44px, calc(46 * var(--u)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .amazonia-timeline *,
  .amazonia-timeline *::before,
  .amazonia-timeline *::after {
    scroll-behavior: auto;
    transition: none;
  }

  .amazonia-timeline .toggle[data-animated] .toggle__label {
    animation: none;
  }
}

/* ==========================================================================
   Dejusticia site header and footer
   Stand-ins for the WordPress template, restored from the previous wireframe
   (commit 00ae40b). Scoped to .site-header / .site-footer.
   ========================================================================== */
body:has(> .site-header) {
  margin: 0;
}

.site-header,
.site-footer {
  --ink: #111;
  --paper: #fff;
  --line: #111;
  --measure: 1360px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.site-header,
.site-header *,
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

.site-header a,
.site-footer a {
  color: inherit;
  text-underline-offset: 3px;
}

.site-footer button {
  font: inherit;
}

.site-header a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

.site-header,
.site-footer-inner {
  width: min(calc(100% - 40px), var(--measure));
  margin-inline: auto;
}

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
}

.wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.25vw, 22px);
  font-size: clamp(0.68rem, 0.75vw, 0.82rem);
  font-weight: 700;
  white-space: nowrap;
}

.header-nav a {
  text-decoration: none;
}

.header-nav a:hover {
  text-decoration: underline;
}

.header-nav .donate-link {
  padding: 8px 10px;
  border: 1px solid var(--paper);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.square-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--paper);
  background: var(--ink);
  text-decoration: none;
}

.site-footer {
  border-top: 2px solid var(--line);
  background: var(--ink);
  color: var(--paper);
}

.site-footer-inner {
  padding: 56px 0 26px;
}

.footer-primary {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.45fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 42px;
}

.footer-wordmark {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  text-decoration: none;
}

.footer-links {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-links a {
  width: fit-content;
  font-weight: 700;
  text-decoration: none;
}

.footer-links a:hover,
.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-heading {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.social-links a {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--paper);
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
}

.newsletter-copy {
  max-width: 520px;
  margin: 0 0 14px;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.35;
}

/* Input above a full-width "Enviar >>" button, as on dejusticia.org */
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.newsletter-form input,
.newsletter-form button {
  min-height: 46px;
  border: 1px solid var(--paper);
  border-radius: 0;
}

.newsletter-form input {
  min-width: 0;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
}

.newsletter-form button {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  cursor: pointer;
}

.footer-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 42px;
  padding: 28px 0;
  border-top: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
  font-size: 0.82rem;
}

.footer-contact p {
  margin: 0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  font-size: 0.72rem;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 900px) {
  .header-nav {
    display: none;
  }

  .footer-primary {
    grid-template-columns: 1fr 1fr;
  }

  .footer-newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .site-header,
  .site-footer-inner {
    width: min(calc(100% - 24px), var(--measure));
  }

  .site-header {
    min-height: 70px;
  }

  .footer-primary,
  .footer-contact {
    grid-template-columns: 1fr;
  }

  .footer-newsletter {
    grid-column: auto;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media print {
  .header-tools {
    display: none;
  }
}