/* ============================================================================
   SAUNA LOMBOK — "Thermal Instrument"
   A precision field manual for heat and ice, set on a volcanic island.

   Organizing principle: the page is a temperature axis. Hot zones sit in
   volcanic basalt and ember; cold zones invert to glacial white. Scrolling
   the page performs the contrast ritual the product sells.
   ========================================================================= */

/* --- 1. FONTS ------------------------------------------------------------ */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-400_700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. TOKENS ----------------------------------------------------------- */

:root {
  /* Volcanic substrate — warm near-blacks, never blue-black */
  --basalt: #0a0908;
  --basalt-2: #100e0c;
  --ash: #17140f;
  --ash-2: #221d17;
  /* --smoke carries every mono micro-label. Held at >=4.53:1 on basalt — any
     darker and the spec numbers stop being readable text and become texture. */
  --smoke: #80776e;

  /* Warm paper */
  --bone: #eee9e0;
  --bone-dim: #a29a8e;

  /* Heat. --ember is a button background under white 0.7rem mono, so it is
     pinned at the darkest point that still reads as molten (4.53:1 on white).
     --ember-lift is a light surface: it only ever takes dark text. */
  --ember: #d74019;
  --ember-lift: #ff7a3c;
  --ember-deep: #6e1c08;

  /* Cold */
  --glacial: #4fa8c8;
  --glacial-lift: #8fd4ea;
  --glacial-deep: #123f52;
  --ice: #dfeff6;

  /* Instrument */
  --brass: #c9a227;

  /* Semantic — remapped per zone */
  --bg: var(--basalt);
  --bg-raised: var(--ash);
  --fg: var(--bone);
  --fg-dim: var(--bone-dim);
  --accent: var(--ember);
  --accent-lift: var(--ember-lift);
  --rule: rgba(238, 233, 224, 0.14);
  --rule-soft: rgba(238, 233, 224, 0.07);
  --temp-label: '90°C';

  /* Fluid type scale (1.20 minor third → 1.25 at large viewports) */
  --step--2: clamp(0.68rem, 0.66rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.17vw, 0.93rem);
  --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.36vw, 1.44rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.54vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.56rem + 0.81vw, 2.25rem);
  --step-4: clamp(2.07rem, 1.83rem + 1.2vw, 2.81rem);
  --step-5: clamp(2.49rem, 2.14rem + 1.75vw, 3.52rem);
  --step-6: clamp(2.99rem, 2.48rem + 2.51vw, 4.4rem);

  /* Space */
  --gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --pad-x: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --rail: clamp(0px, -3rem + 8vw, 5rem); /* instrument rail gutter */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --measure: 68ch;
  --max: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Volcanic grain — one inline turbulence, reused everywhere */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* The inversion. Cold zones flip the whole substrate — this is the site's
   one big move, so it is a token swap rather than a pile of overrides. */
.zone--cold {
  --bg: var(--ice);
  --bg-raised: #fff;
  --fg: #0d2029;
  --fg-dim: #4a6672;
  --accent: var(--glacial-deep);
  /* NOT --glacial: the pale blue that glows on basalt only reaches 2.3:1 on
     ice. Inverting the substrate has to invert the accent's weight too. */
  --accent-lift: #1d6d8c;
  --smoke: #506a76;
  --rule: rgba(13, 32, 41, 0.16);
  --rule-soft: rgba(13, 32, 41, 0.08);
  --temp-label: '3°C';
}

/* --- 3. RESET ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--smoke) var(--basalt);
}
body {
  background: var(--basalt);
  color: var(--bone);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
/* <picture> is a source-selection wrapper, not a box. Letting it generate one
   breaks every `height:100%` on the <img> inside, because the img then resolves
   its height against an auto-height parent. display:contents removes it from
   layout so the img sits directly in .hero__media / .card__media / .fig. */
picture {
  display: contents;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
  border-radius: 1px;
}
::selection {
  background: var(--ember);
  color: var(--bone);
}
.zone--cold ::selection {
  background: var(--glacial-deep);
  color: var(--ice);
}

/* --- 4. TYPOGRAPHY ------------------------------------------------------- */

.display {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  color: var(--accent-lift);
}

h1,
h2,
h3,
h4 {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: var(--step-6);
  line-height: 0.94;
}
h2 {
  font-size: var(--step-5);
}
h3 {
  font-size: var(--step-3);
}
h4 {
  font-size: var(--step-1);
}

/* The mono voice: readouts, labels, spec numbers. Instrument, not decoration. */
.mono {
  font-family: 'DM Mono', ui-monospace, 'SF Mono', monospace;
  font-weight: 400;
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lift);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: '';
  width: clamp(1.5rem, 3vw, 3rem);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 1.15em;
}
.prose p,
.prose li {
  color: var(--fg-dim);
  text-wrap: pretty;
}
.prose h2 {
  font-size: var(--step-3);
  margin-top: 2.2em;
  color: var(--fg);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.prose h3 {
  font-size: var(--step-1);
  margin-top: 1.8em;
  color: var(--fg);
}
.prose strong {
  color: var(--fg);
  font-weight: 600;
}
.prose em {
  font-style: italic;
}
.prose ul,
.prose ol {
  padding-left: 0;
  display: grid;
  gap: 0.6em;
}
.prose li {
  position: relative;
  padding-left: 1.6em;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 0.62em;
  width: 0.5em;
  height: 1px;
  background: var(--accent-lift);
}
.prose ol {
  counter-reset: n;
}
.prose ol > li {
  counter-increment: n;
}
.prose ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: 'DM Mono', monospace;
  font-size: 0.72em;
  color: var(--accent-lift);
  letter-spacing: 0.05em;
}
.prose a:not(.btn) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.prose a:not(.btn):hover {
  color: var(--accent-lift);
  text-decoration-color: var(--accent-lift);
}
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.2em 0 0.2em 1.4em;
  margin-block: 2em;
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-2);
  line-height: 1.24;
  color: var(--fg);
  font-style: italic;
}
.prose figure {
  margin-block: 2.4em;
}
.prose figcaption {
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 0.9rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

/* --- 5. LAYOUT ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.shell--rail {
  padding-left: calc(var(--pad-x) + var(--rail));
}
.section {
  padding-block: var(--section-y);
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

/* Editorial asymmetry: heading column narrower than content, offset right. */
.split {
  display: grid;
  gap: var(--gap) clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .split--sticky > :first-child {
    position: sticky;
    top: calc(var(--section-y) * 0.5);
  }
}

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.stack > * + * {
  margin-top: var(--flow, 1.5rem);
}

/* --- 6. ATMOSPHERE ------------------------------------------------------- */

/* Volcanic grain over everything. Fixed so it reads as film, not wallpaper. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* Thermal bloom behind hot sections — heat leaking from the substrate. */
.bloom {
  position: relative;
  isolation: isolate;
}
.bloom::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: -10%;
  top: -20%;
  height: 70%;
  background: radial-gradient(
    60% 50% at 50% 40%,
    color-mix(in oklab, var(--accent) 24%, transparent),
    transparent 72%
  );
  filter: blur(60px);
  pointer-events: none;
}
.bloom--low::before {
  top: auto;
  bottom: -25%;
}

/* --- 7. INSTRUMENT RAIL -------------------------------------------------- */
/* The signature: a fixed thermometer down the left edge whose readout and
   colour track whichever zone you are scrolled into. */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail);
  z-index: 40;
  display: none;
  pointer-events: none;
  mix-blend-mode: normal;
}
@media (min-width: 64rem) {
  .rail {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr auto 1fr;
  }
}
.rail__line {
  width: 1px;
  height: 100%;
  background: var(--rule);
  position: relative;
  justify-self: center;
}
.rail__fill {
  position: absolute;
  inset-inline: -0.5px;
  top: 0;
  height: var(--scroll, 0%);
  background: linear-gradient(
    to bottom,
    var(--ember-lift),
    var(--ember) 45%,
    var(--glacial) 100%
  );
  transition: height 0.1s linear;
}
.rail__read {
  writing-mode: vertical-rl;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rail-fg, var(--bone));
  padding-block: 1.25rem;
  background: var(--rail-bg, var(--basalt));
  display: flex;
  align-items: center;
  gap: 1.1rem;
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.rail__read::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rail-dot, var(--ember-lift));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--rail-dot, var(--ember-lift)) 20%, transparent);
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* --- 8. HEADER ----------------------------------------------------------- */

.hdr {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr[data-stuck='true'] {
  background: color-mix(in oklab, var(--basalt) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule-soft);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 1.05rem;
  padding-left: calc(var(--pad-x) + var(--rail));
  padding-right: var(--pad-x);
  max-width: var(--max);
  margin-inline: auto;
}

/* Wordmark carries the concept: serif name, mono temperature tag. */
.mark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: none;
}
.mark__name {
  font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1;
}
.mark__temp {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ember-lift);
  border: 1px solid color-mix(in oklab, var(--ember) 45%, transparent);
  padding: 0.2em 0.45em;
  line-height: 1;
  white-space: nowrap;
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
@media (min-width: 60rem) {
  .nav {
    display: flex;
  }
}
.nav a {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--ember-lift);
  transition: width 0.35s var(--ease);
}
.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--bone);
}
.nav a:hover::after,
.nav a[aria-current='page']::after {
  width: 100%;
}

/* Below the nav breakpoint the header is just wordmark + WhatsApp + burger, so
   the CTA collapses to its icon rather than wrapping and pushing the burger
   off the edge. The label lives on in the drawer. */
@media (max-width: 59.999rem) {
  .hdr__in .btn--hot {
    padding: 0.8rem;
  }
  .hdr__in .btn--hot span {
    display: none;
  }
  .hdr__in .btn--hot svg {
    width: 1.15rem;
    height: 1.15rem;
  }
}

.burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  flex: none;
}
@media (min-width: 60rem) {
  .burger {
    display: none;
  }
}
.burger span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--bone);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span + span {
  margin-top: 4px;
}
.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--basalt);
  padding: 6rem var(--pad-x) 2rem;
  display: grid;
  align-content: start;
  gap: 0.1rem;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0.5s;
}
.drawer[data-open='true'] {
  transform: none;
  visibility: visible;
}
.drawer a {
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-3);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--bone);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.drawer a span {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--smoke);
}
@media (min-width: 60rem) {
  .drawer {
    display: none;
  }
}

/* --- 9. BUTTONS ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.05em 1.6em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
  line-height: 1;
  text-align: center;
}
.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease);
  z-index: -1;
}
.btn > * {
  position: relative;
  z-index: 1;
}

/* Primary: an ember block that flares brighter on hover. The label flips to
   basalt as it does — white on #ff7a3c is 2.6:1 and unreadable, dark on it is
   7.7:1. The flare reads as heat rising, which is the point. */
.btn--hot {
  color: #fff;
  background: var(--ember);
  border-color: var(--ember);
}
.btn--hot::before {
  background: var(--ember-lift);
  transform: scaleY(0);
}
.btn--hot:hover {
  transform: translateY(-2px);
  color: var(--basalt);
  border-color: var(--ember-lift);
}
.btn--hot:hover::before {
  transform: scaleY(1);
}

.btn--ghost {
  color: var(--fg);
  border-color: var(--rule);
  background: none;
}
.btn--ghost::before {
  background: var(--fg);
  transform: scaleY(0);
}
.btn--ghost:hover {
  color: var(--bg);
  border-color: var(--fg);
}
.btn--ghost:hover::before {
  transform: scaleY(1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Text link with a travelling arrow. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lift);
  transition: gap 0.3s var(--ease);
}
.tlink::after {
  content: '→';
  transition: transform 0.3s var(--ease);
}
.tlink:hover {
  gap: 0.85em;
}
.tlink:hover::after {
  transform: translateX(3px);
}

/* --- 10. HERO ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-block: 9rem 3.5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Two-stop scrim: kills the top for the nav, floors the bottom for the type. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      var(--basalt) 2%,
      color-mix(in oklab, var(--basalt) 72%, transparent) 32%,
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--basalt) 78%, transparent),
      transparent 30%
    );
}
/* Heat haze: a slow, near-subliminal shimmer over the ember glow. */
.hero__haze {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    46% 34% at 62% 62%,
    color-mix(in oklab, var(--ember) 30%, transparent),
    transparent 70%
  );
  filter: blur(52px);
  animation: haze 13s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes haze {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate3d(-2%, -2.5%, 0) scale(1.1);
    opacity: 1;
  }
}

.hero__in {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  width: 100%;
}
@media (min-width: 64rem) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: end;
  }
}
.hero h1 {
  font-size: clamp(3rem, 11.5vw, 8.5rem);
  max-width: 13ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--ember-lift);
}
.hero__lede {
  font-size: var(--step-1);
  color: var(--bone-dim);
  max-width: 40ch;
  margin-top: 1.75rem;
  text-wrap: pretty;
}

/* Live spec strip under the hero — the instrument reading, not a stat card. */
.gauge {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border-block: 1px solid var(--rule-soft);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .gauge {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gauge__cell {
  background: var(--basalt);
  padding: 1.1rem clamp(0.75rem, 2vw, 1.4rem);
  display: grid;
  gap: 0.3rem;
}
.gauge__n {
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--bone);
}
.gauge__n span {
  font-family: 'DM Mono', monospace;
  font-size: 0.42em;
  color: var(--ember-lift);
  letter-spacing: 0.04em;
}
.gauge__k {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  line-height: 1.35;
}

/* --- 11. CARDS ----------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  height: 100%;
}
/* Thermal edge-light: heat bleeds in from the top edge on hover. */
.card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent-lift),
    transparent
  );
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.card:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}
.card:hover::after {
  transform: scaleX(1);
}
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ash-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
  filter: saturate(0.9);
}
.card:hover .card__media img {
  transform: scale(1.045);
  filter: saturate(1.05);
}
.card__body {
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.card__k {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.card__k b {
  font-weight: 400;
  color: var(--smoke);
}
.card h3 {
  font-size: var(--step-2);
}
.card p {
  color: var(--fg-dim);
  font-size: var(--step--1);
  flex: 1;
  text-wrap: pretty;
}
.card__foot {
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.card__price {
  font-family: 'DM Mono', monospace;
  font-size: var(--step--1);
  color: var(--fg);
  letter-spacing: 0.02em;
}
.card__price small {
  color: var(--smoke);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Whole card clickable without nesting interactive elements. */
.card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- 12. SPEC LIST ------------------------------------------------------- */
/* Numbered like a manual. The counter is the design. */

.spec {
  counter-reset: spec;
  display: grid;
  border-top: 1px solid var(--rule);
}
.spec__row {
  counter-increment: spec;
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.4rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  grid-template-columns: 1fr;
  transition: background-color 0.4s var(--ease);
}
@media (min-width: 48rem) {
  .spec__row {
    grid-template-columns: 3.5rem minmax(0, 13rem) minmax(0, 1fr);
    align-items: baseline;
  }
}
.spec__row::before {
  content: counter(spec, decimal-leading-zero);
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  color: var(--accent-lift);
  letter-spacing: 0.08em;
}
.spec__row h3 {
  font-size: var(--step-1);
  color: var(--fg);
}
.spec__row p {
  color: var(--fg-dim);
  font-size: var(--step--1);
  text-wrap: pretty;
}

/* --- 13. THE CONTRAST PANEL --------------------------------------------- */
/* Two halves, literally hot and cold, meeting on a hairline. */

.contrast {
  display: grid;
  border: 1px solid var(--rule);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .contrast {
    grid-template-columns: 1fr 1fr;
  }
}
.contrast__half {
  padding: clamp(1.75rem, 4vw, 3.25rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  position: relative;
  min-height: clamp(18rem, 34vw, 26rem);
  isolation: isolate;
}
.contrast__half + .contrast__half {
  border-top: 1px solid var(--rule);
}
@media (min-width: 52rem) {
  .contrast__half + .contrast__half {
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}
.contrast__half::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.85;
  transition: opacity 0.6s var(--ease);
}
.contrast__hot {
  background: var(--ash);
}
.contrast__hot::before {
  background: radial-gradient(
    80% 70% at 20% 100%,
    color-mix(in oklab, var(--ember) 26%, transparent),
    transparent 70%
  );
}
.contrast__cold {
  background: #0c1a20;
}
.contrast__cold::before {
  background: radial-gradient(
    80% 70% at 80% 100%,
    color-mix(in oklab, var(--glacial) 22%, transparent),
    transparent 70%
  );
}
.contrast__half:hover::before {
  opacity: 1;
}
.contrast__t {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
}
.contrast__hot .contrast__t {
  color: var(--ember-lift);
}
.contrast__cold .contrast__t {
  color: var(--glacial-lift);
}
.contrast__t span {
  font-family: 'DM Mono', monospace;
  font-size: 0.24em;
  letter-spacing: 0.1em;
  vertical-align: super;
}
.contrast__half h3 {
  font-size: var(--step-2);
  color: var(--bone);
}
.contrast__half p {
  color: var(--bone-dim);
  font-size: var(--step--1);
  max-width: 34ch;
  text-wrap: pretty;
}
.contrast__half dl {
  margin-top: auto;
  padding-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
}
.contrast__half dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.contrast__half dt {
  color: var(--smoke);
  text-transform: uppercase;
}
.contrast__half dd {
  color: var(--bone);
  text-align: right;
}

/* --- 14. FIGURE / BLEED -------------------------------------------------- */

.fig {
  position: relative;
  overflow: hidden;
  background: var(--ash-2);
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fig--wide {
  aspect-ratio: 16 / 9;
}
.fig--tall {
  aspect-ratio: 3 / 4;
}
.fig--sq {
  aspect-ratio: 1;
}
/* Grid-breaker: image runs off the right edge of the canvas. */
.fig--bleed-r {
  margin-right: calc(var(--pad-x) * -1);
}
@media (min-width: 62rem) {
  .fig--bleed-r {
    margin-right: calc((100vw - min(100vw, var(--max))) / -2 - var(--pad-x));
  }
}
.fig__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--basalt);
  color: var(--bone-dim);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

/* --- 15. STEPS ----------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 68rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step {
  background: var(--bg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
  position: relative;
  transition: background-color 0.4s var(--ease);
}
.step:hover {
  background: var(--bg-raised);
}
.step__n {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--accent-lift);
}
.step h3 {
  font-size: var(--step-1);
}
.step p {
  color: var(--fg-dim);
  font-size: var(--step--1);
  text-wrap: pretty;
}

/* --- 16. FAQ ------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--accent-lift);
}
.faq summary::after {
  content: '+';
  font-family: 'DM Mono', monospace;
  font-size: 1.1rem;
  color: var(--accent-lift);
  flex: none;
  transition: transform 0.35s var(--ease);
  line-height: 1;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq__a {
  padding-bottom: 1.6rem;
  max-width: 62ch;
  color: var(--fg-dim);
  font-size: var(--step--1);
  animation: fade-up 0.45s var(--ease);
  text-wrap: pretty;
}
.faq__a > * + * {
  margin-top: 0.8em;
}
.faq__a a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  transition: color 0.25s var(--ease);
}
.faq__a a:hover {
  color: var(--accent-lift);
}
/* The read-on line. Excluded from FAQPage schema (see conf.faq_schema) — it is
   an affordance, not part of the answer. */
.faq__more {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--step--2);
  color: var(--smoke);
}

/* --- 17. PRICE TABLE ----------------------------------------------------- */

.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.ptable caption {
  text-align: left;
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  padding-bottom: 1rem;
}
.ptable th,
.ptable td {
  text-align: left;
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.ptable thead th {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  border-bottom-color: var(--rule);
}
.ptable tbody th {
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--fg);
}
.ptable td {
  color: var(--fg-dim);
}
.ptable td.num {
  font-family: 'DM Mono', monospace;
  color: var(--fg);
  white-space: nowrap;
}
.tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- 18. CTA BAND -------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ash);
  border: 1px solid var(--rule);
  padding: clamp(2.25rem, 6vw, 5rem);
  text-align: center;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      70% 120% at 12% 110%,
      color-mix(in oklab, var(--ember) 34%, transparent),
      transparent 66%
    ),
    radial-gradient(
      70% 120% at 88% 110%,
      color-mix(in oklab, var(--glacial) 26%, transparent),
      transparent 66%
    );
}
.cta h2 {
  font-size: var(--step-5);
  max-width: 16ch;
}
.cta p {
  color: var(--bone-dim);
  max-width: 48ch;
  text-wrap: pretty;
}

/* --- 19. FOOTER ---------------------------------------------------------- */

.ftr {
  background: var(--basalt-2);
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  color: var(--bone-dim);
}
.ftr__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .ftr__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 68rem) {
  .ftr__grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}
.ftr h4 {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 1.1rem;
}
.ftr li + li {
  margin-top: 0.55rem;
}
.ftr a {
  font-size: var(--step--1);
  color: var(--bone-dim);
  transition: color 0.25s var(--ease);
}
.ftr a:hover {
  color: var(--ember-lift);
}
.ftr__note {
  font-size: var(--step--1);
  max-width: 40ch;
  text-wrap: pretty;
}
.ftr__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* --- 19b. COVERAGE MAP --------------------------------------------------- */
/* Hand-drawn schematic of the island. Replaces a Google Maps embed: no
   third-party payload, no cookies, and each marker is a real internal link. */

/* Capped and centred. The viewBox is square, so at full shell width this would
   be a 1000px-tall plate; and because SVG text scales with the box, a narrow
   container renders the labels at 3px. 34rem is the band where they land around
   11px — the map is legible or it is decoration. */
.map {
  max-width: 34rem;
  margin-inline: auto;
  border: 1px solid var(--rule);
  padding: 1.25rem;
  background: var(--bg-raised);
}
.map svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.map__land {
  fill: color-mix(in oklab, var(--ember) 9%, transparent);
  stroke: color-mix(in oklab, var(--ember) 45%, transparent);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.map text {
  font-family: 'DM Mono', monospace;
  font-size: 2.1px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--bone-dim);
  transition: fill 0.3s var(--ease);
}
.map__pin circle {
  fill: var(--ember-lift);
  transition: fill 0.3s var(--ease), r 0.3s var(--ease);
}
.map__halo {
  fill: none !important;
  stroke: var(--ember-lift);
  stroke-width: 0.4;
  opacity: 0.35;
  transform-origin: center;
  animation: ping 3.2s var(--ease-in-out) infinite;
}
@keyframes ping {
  0%,
  70%,
  100% {
    opacity: 0.28;
    stroke-width: 0.4;
  }
  35% {
    opacity: 0.7;
    stroke-width: 0.7;
  }
}
.map__pin {
  cursor: pointer;
}
.map__pin:hover text,
.map__pin:focus-visible text {
  fill: var(--ember-lift);
}
.map__gili circle {
  fill: var(--glacial-lift);
}
.map__gili text {
  fill: var(--bone-dim);
}
.map__rinjani path {
  fill: none;
  stroke: var(--smoke);
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.map__rinjani text {
  fill: var(--smoke);
  font-size: 2.2px;
}
.map figcaption {
  font-family: 'DM Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--smoke);
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule-soft);
  text-transform: none;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .map__halo {
    animation: none;
  }
}

/* --- 20. BREADCRUMB + PAGE HEAD ----------------------------------------- */

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 2rem;
}
.crumb a {
  color: var(--smoke);
  transition: color 0.25s var(--ease);
}
.crumb a:hover {
  color: var(--accent-lift);
}
.crumb li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.5;
}
.crumb ol {
  display: contents;
}
.crumb li {
  display: inline;
}

.phead {
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  position: relative;
}
.phead h1 {
  font-size: var(--step-6);
  max-width: 18ch;
}
.phead .lede {
  margin-top: 1.5rem;
  max-width: 54ch;
}
.phead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.75rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* --- 21. ARTICLE LAYOUT -------------------------------------------------- */

.art {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 68rem) {
  .art {
    grid-template-columns: minmax(0, 1fr) 16rem;
  }
}
.aside {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: 2rem;
  font-size: var(--step--1);
}
.aside h4 {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.toc li + li {
  margin-top: 0.5rem;
}
.toc a {
  color: var(--fg-dim);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
  display: block;
  font-size: var(--step--1);
  line-height: 1.35;
}
.toc a:hover {
  color: var(--accent-lift);
  padding-left: 0.3rem;
}

/* Key-numbers box — the article's instrument panel. */
.readout {
  border: 1px solid var(--rule);
  padding: 1.2rem;
  display: grid;
  gap: 0.85rem;
  background: var(--bg-raised);
}
.readout div {
  display: grid;
  gap: 0.15rem;
}
.readout dt {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
.readout dd {
  font-family: 'Instrument Serif', serif;
  font-size: var(--step-1);
  color: var(--fg);
  line-height: 1.1;
}
.readout dd span {
  font-family: 'DM Mono', monospace;
  font-size: 0.5em;
  color: var(--accent-lift);
}

/* Inline callout inside prose. */
.note {
  border-left: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  padding: 1.2rem 1.4rem;
  margin-block: 2em;
  display: grid;
  gap: 0.5rem;
}
.note b {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lift);
}
.note p {
  font-size: var(--step--1);
  color: var(--fg);
  margin: 0;
}

/* --- 22. MOTION ---------------------------------------------------------- */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reveal on scroll. Set by IntersectionObserver, never trapped hidden:
   if JS fails, .reveal is simply never applied and content shows. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal[data-in='true'] {
  opacity: 1;
  transform: none;
}

/* Orchestrated hero entrance — one staggered load beats scattered fidgeting. */
.hero .eyebrow,
.hero h1,
.hero__lede,
.hero .btn-row,
.hero .gauge {
  animation: fade-up 0.9s var(--ease) backwards;
}
.hero .eyebrow {
  animation-delay: 0.1s;
}
.hero h1 {
  animation-delay: 0.2s;
}
.hero__lede {
  animation-delay: 0.35s;
}
.hero .btn-row {
  animation-delay: 0.45s;
}
.hero .gauge {
  animation-delay: 0.55s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__haze {
    animation: none;
  }
}

/* --- 23. UTILITIES ------------------------------------------------------- */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100;
  background: var(--ember);
  color: #fff;
  padding: 0.8rem 1.2rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus {
  top: 0;
}
.hot {
  color: var(--ember-lift);
}
.cold {
  color: var(--glacial-lift);
}
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}
.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}