@font-face {
    font-display: auto;
    font-family: "PolySans";
    font-style: normal;
    font-weight: 700;
    src: url("https://grist.org/wp-content/themes/grist/dist/fonts/PolySansUS-Median.woff2") format("woff2"),
        url("https://grist.org/wp-content/themes/grist/dist/fonts/PolySansUS-Median.woff") format("woff");
}

@font-face {
    font-display: auto;
    font-family: "Basis Grotesque Pro";
    font-style: normal;
    font-weight: 500;
    src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-regular-pro.woff2") format("woff2"),
        url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-regular-pro.woff") format("woff");
}

@font-face {
    font-display: auto;
    font-family: "Basis Grotesque Pro";
    font-style: normal;
    font-weight: 700;
    src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-pro.woff2") format("woff2"),
        url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-pro.woff") format("woff");
}

/* Regular italic for the note; without it the browser fell back to the bold italic face. */
@font-face {
    font-display: auto;
    font-family: "Basis Grotesque Pro";
    font-style: italic;
    font-weight: 500;
    src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-regular-italic-pro.woff2") format("woff2"),
        url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-regular-italic-pro.woff") format("woff");
}

@font-face {
    font-display: auto;
    font-family: "Basis Grotesque Pro";
    font-style: italic;
    font-weight: 700;
    src: url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-italic-pro.woff2") format("woff2"),
        url("https://grist.org/wp-content/themes/grist/dist/fonts/basis-grotesque-bold-italic-pro.woff") format("woff");
}

:root {
  --color-primary: #3c3830;
  --color-secondary: #807a70;
  --color-accent: #1f5a2e;
  --color-rail: #dadfe5;
  --color-stage: #fff;
  --color-background: #fff;
  --typography-primary: "PolySans", sans-serif;
  --typography-secondary: "Basis Grotesque Pro", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--color-background); color: var(--color-primary); font-family: var(--typography-secondary); font-weight: 500; }

.amazon-clearing { max-width: 700px; margin: 0 auto; padding: 4px 20px 12px; }

.amazon-clearing h2 {
  font-family: var(--typography-primary);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.amazon-clearing .subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-primary);
  opacity: .7;
  margin-bottom: 16px;
  max-width: 600px;
}

.amazon-clearing__year {
  font-family: var(--typography-primary);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

/* Stage: stacked frames, one per year; the JS sets each one's opacity directly. */
.amazon-clearing__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 1102;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-stage);
  line-height: 0;
}
.amazon-clearing__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

.amazon-clearing__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-top: 18px;
}
.amazon-clearing__play {
  font-family: var(--typography-secondary);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-width: 76px;
  letter-spacing: .2px;
  transition: background 120ms;
}
.amazon-clearing__play:hover { background: var(--color-accent); }

.amazon-clearing__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--color-rail);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 0;
  touch-action: none;
}
.amazon-clearing__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: grab;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(60, 56, 48, .25);
}
.amazon-clearing__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: grab;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(60, 56, 48, .25);
}
.amazon-clearing__slider:active::-webkit-slider-thumb { cursor: grabbing; }
.amazon-clearing__slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Tick marks: one per Landsat scene, at its true position in time.
   Left margin = play button width + gap + half the thumb, so ticks line up
   with the thumb's centre at either end of the track. */
.amazon-clearing__ticks {
  position: relative;
  height: 26px;
  margin-left: calc(90px + 9px);
  margin-right: 9px;
  font-size: 11px;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}
.amazon-clearing__tick {
  position: absolute;
  top: 3px;
  width: 1px;
  height: 6px;
  background: var(--color-secondary);
  opacity: .55;
  transform: translateX(-.5px);
}
.amazon-clearing__tick.is-current { background: var(--color-accent); opacity: 1; height: 8px; top: 2px; }
.amazon-clearing__tick-label {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.amazon-clearing__tick-label.edge-l { transform: none; }
.amazon-clearing__tick-label.edge-r { transform: translateX(-100%); }

.amazon-clearing__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 12px;
}
.amazon-clearing__source {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-secondary);
}
.amazon-clearing__source strong {
  font-weight: 700;
  font-style: italic;
}
.amazon-clearing__logo {
  height: 18px;
  width: auto;
  flex-shrink: 0;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .amazon-clearing h2 { font-size: 22px; }
  .amazon-clearing .subtitle { font-size: 13px; margin-bottom: 14px; }
  .amazon-clearing__year { font-size: 22px; }
  .amazon-clearing__play { min-width: 62px; padding: 7px 12px; font-size: 12px; }
  .amazon-clearing__controls { margin-top: 14px; }
  .amazon-clearing__ticks { margin-left: calc(76px + 9px); }
}

/* Year and cleared share on a card in the map's bottom-left corner, styled like the legend boxes on Grist's
   static maps (br-319, vz-oil-reserves): square corners, light fill, thin dark border, small hard offset. */
.amazon-clearing__headline {
  position: absolute; left: 22px; bottom: 22px; z-index: 3; line-height: 1.2; pointer-events: none;
  background: #f0f0f0; border: 1.5px solid var(--color-primary); box-shadow: 2px 2px 0 var(--color-primary);
  padding: 8px 12px 9px;
}
.amazon-clearing__headline .amazon-clearing__year { margin-bottom: 2px; }
.amazon-clearing__share { font-size: 13px; color: var(--color-primary); max-width: 10em; }
.amazon-clearing__share b { font-variant-numeric: tabular-nums; }
.amazon-clearing__short { display: none; }

/* Map canvas: rounded corners soften the gray land at the frame edge. */
.amazon-clearing__stage { border-radius: 24px; margin-top: 22px; }
@media (max-width: 600px) { .amazon-clearing__stage { border-radius: 14px; margin-top: 16px; } }

/* Borders and labels drawn over the frames; they do not dissolve. The z-index keeps them above the frames
   whichever loads first. Stroke widths are in screen pixels. */
.amazon-clearing__overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.amazon-clearing__frame { z-index: 1; }
.amazon-clearing__state, .amazon-clearing__country, .amazon-clearing__legal { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.amazon-clearing__state { stroke: var(--color-primary); stroke-width: .8; opacity: .45; }
.amazon-clearing__country { stroke: var(--color-secondary); stroke-width: 1; opacity: .8; }
.amazon-clearing__legal { stroke: var(--color-primary); stroke-width: 1.2; opacity: .7; }
.amazon-clearing__label {
  font-family: var(--typography-secondary);
  font-weight: 700;
  font-size: 24px;
  fill: var(--color-primary);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.amazon-clearing__country-label {
  font-family: var(--typography-secondary);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: var(--color-secondary);
  text-anchor: middle;
}

/* Legend. */
.amazon-clearing__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 13px; list-style: none; }
.amazon-clearing__legend li { display: flex; align-items: center; gap: 6px; }
.amazon-clearing__swatch { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }

/* Presidential terms under the tick labels, aligned with the slider track. */
.amazon-clearing__terms {
  position: relative;
  height: 30px;
  margin-left: calc(90px + 9px);
  margin-right: 9px;
  font-size: 11px;
  color: var(--color-secondary);
}
.amazon-clearing__term { position: absolute; top: 2px; border-top: 2px solid var(--color-rail); padding-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.amazon-clearing__term.is-current { border-top-color: var(--color-primary); color: var(--color-primary); }

.amazon-clearing__note { font-size: 11px; line-height: 1.5; color: var(--color-secondary); font-style: italic; margin-top: 8px; }

@media (max-width: 600px) {
  .amazon-clearing__terms { margin-left: calc(76px + 9px); }
  .amazon-clearing__label { font-size: 34px; stroke-width: 7px; }
  .amazon-clearing__country-label { font-size: 28px; letter-spacing: 1px; }
  .amazon-clearing__country-label.is-minor { display: none; }
  .amazon-clearing__headline { left: 12px; bottom: 12px; padding: 5px 8px 6px; border-width: 1px; box-shadow: 1.5px 1.5px 0 var(--color-primary); }
  .amazon-clearing__headline .amazon-clearing__year { font-size: 18px; margin-bottom: 1px; }
  .amazon-clearing__share { font-size: 11px; }
  .amazon-clearing__long { display: none; }
  .amazon-clearing__short { display: inline; }
  .amazon-clearing__legend { font-size: 12px; }
}
/* Phones: the names are wider than the shorter terms, so they alternate between two rows, each centered on
   its term and free to run past its ends (Lula, Temer and Lula above; Rousseff and Bolsonaro below). */
@media (max-width: 420px) {
  .amazon-clearing__terms { height: 40px; }
  .amazon-clearing__term { overflow: visible; }
  .amazon-clearing__term span { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); }
  .amazon-clearing__term:nth-child(even) span { top: 18px; }
}