/* Emberlith, concept launch site. Hand-built CSS, no framework.
   core.css: tokens, base, header and hero. It's the only render-blocking
   stylesheet, so the first screen paints as soon as it lands. sections.css
   styles everything below the fold and loads without blocking.
   Fonts: Newsreader and Geologica, both SIL Open Font License, self-hosted. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Newsreader";
  src: url(/demos/emberlith/assets/fonts/newsreader-display.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url(/demos/emberlith/assets/fonts/newsreader-display-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url(/demos/emberlith/assets/fonts/geologica-var.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks, so the swap to the real fonts doesn't move anything. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos");
  size-adjust: 110.05%;
  ascent-override: 66.79%;
  descent-override: 24.08%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic");
  size-adjust: 102.48%;
  ascent-override: 71.72%;
  descent-override: 25.86%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geologica Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 109.25%;
  ascent-override: 89.24%;
  descent-override: 25.17%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces: warm near-black, lifted in small steps. */
  --bg: #0c0907;
  --bg-1: #110d0a;
  --bg-2: #17120e;
  --bg-3: #211a14;
  --line: #2b221b;
  --line-2: #3d3128;
  --edge: #6f6153; /* 3:1 on every surface: input borders, slider tracks */

  /* Text. All AA on every surface. */
  --fg: #f5ece2;
  --fg-2: #bdae9f;
  --fg-3: #9a8a7b;
  --dim: #7a6b5d; /* large text only (3.9:1) */

  /* Heat, from ember to white-hot. The one gradient means temperature, so it only
     goes on hot things: the brick, the stored-heat meter and "Burn nothing." */
  --ember-700: #8f1d0b;
  --ember-600: #c42d0c;
  --ember-500: #e8520f;
  --flame: #ff7a1f;
  --amber: #ffb35c;
  --hot: #ffe8c4;
  --steel: #9fb4c2;
  --error: #ff9c85;
  --molten: linear-gradient(96deg, #ff5a1f 0%, #ff8a3a 34%, #ffc27a 70%, #ffe8c4 100%);

  --font-display: "Newsreader", "Newsreader Fallback", "Times New Roman", serif;
  --font-text: "Geologica", "Geologica Fallback", Arial, sans-serif;

  /* Type scale: fluid between 360 and 1440. */
  --t-display: clamp(3rem, 1.55rem + 5.2vw, 7rem);
  --t-h2: clamp(2.25rem, 1.45rem + 3vw, 4.25rem);
  --t-h3: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  --t-lede: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .75rem;

  /* Spacing: 4px base. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(96px, 10vw, 160px);
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  /* The fixed header: the bar, plus the concept strip on phones and tablets. */
  --bar: 72px;
  --strip: 0px;
  --header: calc(var(--bar) + var(--strip));

  /* Plant equipment is square. Buttons get a little more. */
  --r-1: 6px;
  --r-2: 3px;
  --r-3: 4px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display; hidden still wins */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent; /* buttons and links have their own pressed states */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
b, strong { font-weight: 550; }
sub { font-size: .7em; line-height: 0; vertical-align: -.25em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--flame); color: #1a0b04; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-1);
  background: var(--hot);
  color: #1a0b04;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

/* ---------- Type ---------- */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: .96;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.h3 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.molten {
  font-style: italic;
  padding-right: .08em;
  margin-right: -.08em;
  background: var(--molten);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.eyebrow {
  margin: 0 0 var(--s-5);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg-2);
}
.lede, .section-lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.fine { font-size: .8125rem; line-height: 1.5; color: var(--fg-3); }
.fine a { color: var(--fg-2); text-underline-offset: 3px; }
@media (hover: hover) { .fine a:hover { color: var(--fg); } }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-1);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { --h: 56px; padding: 0 26px; font-size: 1.0625rem; }
.btn-sm { --h: 40px; padding: 0 16px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-primary { color: #1a0b04; background: var(--flame); }
/* Hover styles only where there's a pointer that hovers, so a tap never leaves them stuck on. */
@media (hover: hover) { .btn-primary:hover { background: var(--amber); } }
.btn-primary:focus-visible { outline-color: var(--hot); }
.btn-ghost {
  color: var(--fg);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--edge);
}
@media (hover: hover) { .btn-ghost:hover { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--amber); } }
.btn-arrow {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--fg);
  cursor: pointer;
}
@media (hover: hover) { .icon-btn:hover { box-shadow: inset 0 0 0 1px var(--amber); background: var(--bg-3); } }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { background: var(--bg-3); }
.icon-btn .i-play { fill: currentColor; stroke-width: 1.4; display: none; }
.icon-btn.is-paused .i-play { display: block; }
.icon-btn.is-paused .i-pause { display: none; }
.icon-btn-lg { width: 48px; height: 48px; }
.icon-btn-lg svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
}
.site-header.is-scrolled, .site-header.is-open {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.no-js .site-header { position: relative; }
.no-js .hero { padding-top: clamp(28px, 5vh, 64px); }
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--bar);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 44px to tap, without moving anything. */
  padding-block: 9px;
  margin-block: -9px;
  color: var(--fg);
  text-decoration: none;
  flex: none;
}
.brand-mark { width: 26px; height: 26px; }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -.015em;
  transform: translateY(-1px);
}
.nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 36px; }
.nav-list { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav-list a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--fg-2);
  font-size: .9375rem;
  text-decoration: none;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--amber);
  visibility: hidden;
}
.nav-list a.is-current { color: var(--fg); }
.nav-list a.is-current::after { visibility: visible; }
@media (hover: hover) {
  .nav-list a:hover { color: var(--fg); }
  .nav-list a:hover::after { visibility: visible; }
}
.nav-toggle { display: none; }

@media (max-width: 959px) {
  :root { --bar: 64px; }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 16px;
    border: 0;
    border-radius: var(--r-1);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--edge);
    color: var(--fg);
    font-size: .9375rem;
    cursor: pointer;
  }
  .js .nav-toggle:active { background: var(--bg-3); }
  .nav-toggle-icon { position: relative; width: 16px; height: 10px; }
  .nav-toggle-icon i {
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    background: currentColor;
  }
  .nav-toggle-icon i:first-child { top: 1px; }
  .nav-toggle-icon i:last-child { top: 7.5px; }
  .is-open .nav-toggle-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
  .is-open .nav-toggle-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

  .js .nav-menu {
    position: fixed;
    top: var(--header);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    max-height: calc(100svh - var(--header));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-3) var(--gutter) var(--s-6);
    background: var(--bg);
    box-shadow: 0 1px 0 var(--line), 0 100vmax 0 100vmax rgba(8, 6, 5, .72);
    visibility: hidden;
  }
  .js .nav.is-open .nav-menu { visibility: visible; }
  .js .nav-list { flex-direction: column; gap: 0; }
  .js .nav-list a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: -.01em;
    color: var(--fg);
  }
  .js .nav-list a::after { display: none; }
  .nav-cta { --h: 52px; }

  .no-js .header-bar { flex-wrap: wrap; height: auto; padding-block: 16px; row-gap: 12px; }
  .no-js .nav-menu { flex-wrap: wrap; gap: 12px 20px; }
  .no-js .nav-list { flex-wrap: wrap; gap: 4px 18px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(100svh, 980px);
  padding-top: calc(var(--header) + clamp(28px, 5vh, 64px));
  padding-bottom: clamp(48px, 7vh, 88px);
  overflow: clip;
}
.hero { border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.hero-copy { max-width: 700px; }
/* Loops stop while their element is off screen or the tab is hidden (see initIdle). */
.is-idle, .is-idle *, .is-idle *::before, .is-idle *::after { animation-play-state: paused !important; }
.hero .display { max-width: 11.5ch; }
.hero .lede { max-width: 46ch; margin-top: clamp(20px, 3vh, 32px); }
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vh, 40px);
}
.hero-note {
  margin-top: clamp(36px, 6vh, 64px);
  padding-top: 16px;
  max-width: 46ch;
  border-top: 1px solid var(--line-2);
  font-size: .9375rem;
  color: var(--fg-2);
}
.hero-note a { text-decoration-color: var(--edge); text-underline-offset: 4px; }
@media (hover: hover) { .hero-note a:hover { color: var(--fg); text-decoration-color: var(--amber); } }

/* The heat core: a section through Core E1. The canvas draws the shell, the insulation,
   the brick, the heating rods, the air duct, the steam generator and the temperature
   profile. CSS only sets out the box and the fallback, which shows until the canvas
   draws and without JavaScript. The canvas bleeds past the figure so the steam line
   can run down to the readout. */
.hero-visual { position: relative; isolation: isolate; margin: 0; }
.core-stage {
  --pad: 30px; /* the 80 cm of insulation, roughly to scale */
  --v-top: 7%;
  --v-bottom: 3%;
  --v-left: 25%;
  --v-right: 22%;
  position: relative;
  height: clamp(400px, calc(100svh - 330px - var(--strip)), 620px);
}
.core-halo {
  /* Light from the open cut face, hugging the vessel. Only hot things glow. */
  position: absolute;
  top: 3%; bottom: 0; left: 21%; right: 18%;
  z-index: -2;
  background: radial-gradient(closest-side, rgba(255, 110, 30, .2), rgba(232, 82, 15, .05) 70%, transparent 100%);
  opacity: .8;
  pointer-events: none;
}
.core-canvas, .core-glow {
  position: absolute;
  top: -48px;
  left: -48px;
  z-index: -1;
  width: calc(100% + 96px);
  max-width: none;
  height: calc(100% + 96px);
  pointer-events: none;
}
/* The glow is painted at a fifth of the size and scaled up by the compositor: soft for free. */
.core-glow { opacity: .7; }
.core-vessel {
  position: absolute;
  top: var(--v-top);
  bottom: var(--v-bottom);
  left: var(--v-left);
  right: var(--v-right);
  border: 2px solid #8a7968;
  background:
    repeating-linear-gradient(-45deg, rgba(150, 128, 110, .22) 0 1px, transparent 1px 6px),
    #120d0a;
  pointer-events: none;
}
.hero-visual.is-live .core-vessel { border-color: transparent; background: none; }
.core-fallback {
  position: absolute;
  z-index: 1;
  top: calc(var(--v-top) + var(--pad));
  bottom: calc(var(--v-bottom) + var(--pad));
  left: calc(var(--v-left) + var(--pad));
  right: calc(var(--v-right) + var(--pad));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='44'%3E%3Cg fill='%23280c06' fill-opacity='.62'%3E%3Crect y='19' width='100' height='3'/%3E%3Crect y='41' width='100' height='3'/%3E%3Crect x='47' width='3' height='19'/%3E%3Crect x='97' width='3' height='19'/%3E%3Crect x='22' y='22' width='3' height='19'/%3E%3Crect x='72' y='22' width='3' height='19'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100px 44px,
    linear-gradient(180deg, #ffc98a 0%, #ff9a45 24%, #f06a1c 50%, #b8330c 66%, #4a160a 80%, #1d120d 100%);
}
.hero-visual.is-live .core-fallback { opacity: 0; }
.core-dim {
  position: absolute;
  top: var(--v-top);
  bottom: var(--v-bottom);
  right: 0;
  width: 9px;
  border: 1px solid var(--edge);
  border-left: 0;
  border-right: 0;
}
.core-dim::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 4px;
  width: 1px;
  background: var(--edge);
}
.core-dim span {
  position: absolute;
  top: 50%;
  right: 14px;
  font-size: .75rem;
  color: var(--fg-3);
  white-space: nowrap;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 100% 50%;
  translate: 50% 0;
}

/* The readout is an instrument panel, not a card: opaque, square, tabular figures. */
.readout {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 16px 16px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--bg-1);
  font-variant-numeric: tabular-nums;
}
.readout-top { display: flex; align-items: center; gap: 16px; }
.readout-time {
  flex: none;
  min-width: 2.7em;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--hot);
}
.readout-time.is-flash { color: var(--amber); }
.readout-status { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: .9375rem; line-height: 1.3; color: var(--fg); }
.readout-status small { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.readout-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.readout-grid > span { display: grid; gap: 2px; align-content: start; }
.readout-grid > span + span { padding-left: 14px; border-left: 1px solid var(--line); }
.readout-grid small { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.readout-grid b { font-weight: 450; font-size: 1.0625rem; color: var(--fg); }
.meter { display: block; width: calc(100% - 14px); height: 3px; margin-top: 6px; background: var(--line-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--molten); transform-origin: 0 50%; }

/* ---------- Concept badge ---------- */
/* Always visible and never over the page: a tag in the header bar wherever it fits
   (from 1280px, and between 600 and 959px, where the menu is one button), a strip
   across the top of the header elsewhere. Hidden in ?capture=1. */
.concept-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: .78125rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.concept-badge b { color: var(--fg); font-weight: 500; }
/* The tag is 29px tall; its hit area is 45px. */
.concept-badge::after { content: ""; position: absolute; inset: -8px 0; }
@media (hover: hover) { .concept-badge:hover { color: var(--fg); border-color: var(--amber); } }
/* "Case study" shows on the strip; on the tag it's only read out, so the link's name never changes. */
.concept-more {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.concept-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px), (min-width: 960px) and (max-width: 1279px) {
  :root { --strip: 34px; }
  .site-header { padding-top: var(--strip); }
  .concept-badge {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--strip);
    margin: 0;
    padding: 0 var(--gutter);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-2);
    font-size: .75rem;
    line-height: 1;
  }
  .concept-badge:focus-visible { outline-offset: -3px; border-radius: 0; }
  /* The strip's hit area runs 10px into the empty top of the bar: 44px to tap. */
  .concept-badge::after { inset: 0 0 -10px; }
  .concept-more { position: static; display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; margin-left: auto; overflow: visible; clip: auto; color: var(--amber); }
}
:root.is-capture { --strip: 0px; }
.is-capture .concept-badge { display: none; }

/* ---------- Responsive: header and hero ---------- */
@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* On one column the glowing core follows the buttons, so it reaches the first screen,
     and the Brekkeby line moves under its readout. */
  .hero-copy { display: contents; }
  .hero-visual { order: 1; margin-top: clamp(36px, 7vw, 56px); }
  .hero-note { order: 2; margin-top: clamp(28px, 5vw, 40px); }
  .hero .display { max-width: 12ch; }
  .core-stage { height: clamp(420px, 62vw, 560px); --v-left: 26%; --v-right: 24%; }
}

@media (max-width: 719px) {
  :root { --section: clamp(80px, 20vw, 112px); }
  .hero { padding-top: calc(var(--header) + 24px); }
  /* The cover line sets the scale on a phone too: 50px at 360, 56px at 430. */
  .hero .display { font-size: clamp(3.125rem, 1.2rem + 8.6vw, 3.75rem); }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero-visual { margin-top: 32px; }
  .actions .btn { width: 100%; }
  .core-stage { height: 420px; --pad: 20px; --v-left: 27%; --v-right: 18%; --v-top: 8%; }
  .core-dim { display: none; }
  .eyebrow { letter-spacing: .1em; }
}

/* The readout where it's phone-narrow (a phone, either way up). */
@media (max-width: 719px), (orientation: landscape) and (max-height: 540px) and (min-width: 640px) and (max-width: 1023px) {
  .readout { padding: 12px 12px 14px 16px; }
  /* The panel's name runs across the top, over the clock and the status, so it gets
     the width it needs at 12px; the pause button sits beside both. */
  .readout-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "label label btn" "time mode btn";
    align-items: center;
    gap: 4px 12px;
  }
  .readout-status { display: contents; }
  .readout-status small { grid-area: label; font-size: .75rem; letter-spacing: .1em; }
  /* Status lines can run to two lines here: hold the room, so nothing below moves. */
  .readout-status [data-r="mode"] { grid-area: mode; min-height: 2.6em; display: flex; align-items: center; }
  .readout-time { grid-area: time; font-size: 1.625rem; }
  .readout-top .icon-btn { grid-area: btn; }
  .readout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readout-grid > span + span { padding-left: 10px; }
  .readout-grid small { font-size: .75rem; letter-spacing: .08em; }
  .readout-grid b { font-size: 1rem; }
}

/* Touch: 44px to tap. */
@media (max-width: 719px), (pointer: coarse) {
  .readout .icon-btn { width: 44px; height: 44px; }
}
/* Touch screens of any size (a phone on its side, a tablet): 44px to tap in the bar,
   and the instrument labels at 12px. */
@media (pointer: coarse) {
  .nav-list a { padding-block: 12px; }
  .nav-cta { --h: 44px; }
  .readout-status small, .readout-grid small { font-size: .75rem; }
}

@media (max-width: 400px) {
  /* One line at 390px; two balanced lines at 360px. */
  .eyebrow { letter-spacing: .05em; text-wrap: balance; }
  .readout-status { font-size: .875rem; }
  .brand-word { font-size: 1.5rem; }
}

/* Phones on their side: the copy and the core side by side, like the desktop cover,
   sized to the short screen, under a slimmer bar. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) and (max-width: 1023px) {
  :root { --bar: 56px; }
  .hero { padding-top: calc(var(--header) + 24px); padding-bottom: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: start; }
  .hero-copy { display: block; }
  .hero-visual { order: 0; margin-top: 40px; }
  .hero-note { margin-top: 28px; }
  .hero .display { font-size: clamp(2.5rem, 1rem + 4.4vw, 3.5rem); max-width: 11ch; }
  .hero .lede { margin-top: 18px; font-size: 1rem; }
  .actions { margin-top: 24px; }
  .actions .btn-lg { --h: 48px; padding: 0 18px; font-size: 1rem; }
  .core-stage { height: clamp(250px, calc(100svh - var(--header) - 64px), 400px); --pad: 20px; --v-left: 31%; --v-right: 16%; --v-top: 8%; }
  .core-dim { display: none; }
  .js .nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .js .nav-list a { padding: 10px 0; font-size: 1.375rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .site-header { position: static; }
  .concept-badge { position: static; }
}

@media (forced-colors: active) {
  .molten { color: CanvasText; background: none; }
  .btn-primary { border: 1px solid ButtonText; }
}