/* ==========================================================================
   Molten & Form — stylesheet

   Furnace-black ground, molten-orange primary, glass-cyan accent, incandescent
   highlights. Hard right angles by default; radius is reserved for inputs,
   cards and pills.

   No web fonts and no external requests of any kind: the type stacks are
   local system faces, which is also why the site renders identically offline.

   Contents
     1.  Design tokens
     2.  Reset / base
     3.  Typography
     4.  Layout
     5.  Header — the furnace gathering rig
     6.  Hero, trust strip, process steps
     7.  Page hero
     8.  Cards
     9.  Badges, tags and indicators
     10. Notices and tip boxes
     11. Buttons
     12. Forms
     13. Tables
     14. Filters, chips and pagination
     15. Calculator
     16. 3D studio
     17. Blog and prose
     18. Footer
     19. Utilities
     20. Responsive
     21. Motion, print
   ========================================================================== */

/* ---------------------------------------------- 1. Design tokens ---------- */

:root {
  /* furnace blacks */
  --furnace-950: #080606;
  --furnace-900: #12100E;
  --furnace-800: #1E1A18;
  --furnace-700: #2A2420;
  --furnace-600: #3A322C;
  --furnace-500: #50443C;
  --furnace-400: #6A5A4E;

  /* molten oranges — the primary */
  --ember-900: #4A1C05;
  --ember-800: #7A2E08;
  --ember-700: #B8480F;
  --ember-500: #E8641F;
  --ember-400: #F58A3C;
  --ember-300: #FAAE72;
  --ember-200: #FCD2AC;
  --ember-100: #FDEBDC;

  /* glass cyans — the accent */
  --glass-900: #142F38;
  --glass-800: #1E4A56;
  --glass-700: #2E6E7E;
  --glass-500: #4AA8B8;
  --glass-400: #6EC4D2;
  --glass-300: #A0DCE6;
  --glass-200: #CEEDF2;
  --glass-100: #E6F6F9;

  /* incandescent — hot metal and highlights */
  --inc-100: #F5E8D8;
  --inc-200: #E8D0B8;
  --inc-300: #D8B898;
  --inc-400: #C4A080;
  --inc-500: #A88868;

  /* cobalt — the cool auxiliary */
  --cobalt-900: #1E2A5C;
  --cobalt-700: #2E3A7A;
  --cobalt-500: #4A5A9A;
  --cobalt-300: #7A8AC0;
  --cobalt-200: #B0BCE0;

  /* gold — decoration */
  --gold-800: #8A5A10;
  --gold-700: #B87A18;
  --gold-500: #D89A28;
  --gold-400: #E8B858;
  --gold-300: #F2D090;

  /* semantics */
  --danger: #C44A3A;
  --ok: #5A8A5A;
  --warn: #D89A28;
  --info: #4A5A9A;

  /* surfaces and text */
  --bg: var(--furnace-900);
  --bg-deep: var(--furnace-950);
  --bg-raised: var(--furnace-700);
  --bg-sunken: var(--furnace-800);
  --text: #F0E8DC;
  --text-2: #C8B8A4;
  --text-3: #8A7860;
  --line: #3A322C;
  --line-strong: #50443C;

  /* radius — hard angles by default */
  --r-0: 0px;
  --r-sm: 4px;
  --r: 12px;
  --r-pill: 999px;

  /* shadows — black over black, with an ember hint on the raised states */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .5);
  --sh-md: 0 8px 22px rgba(0, 0, 0, .55);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, .65);
  --glow-ember: 0 0 16px rgba(232, 100, 31, .35), 0 0 40px rgba(232, 100, 31, .12);
  --glow-glass: 0 0 14px rgba(74, 168, 184, .25);

  /* transitions */
  --t-fast: .14s ease;
  --t: .28s ease;
  --t-blow: .5s cubic-bezier(.34, 1.2, .64, 1);

  /* the header: 36px brand bar + 68px rod rig = the 104px the layout reserves.
     The rig is taller than its 48px label row because the gathering rods are
     drawn above the labels. */
  --brandbar-h: 36px;
  --rods-h: 68px;
  --header-h: 104px;
  --header-h-scrolled: 42px;

  /* type */
  --font-display: "Cinzel", "Trajan Pro", "Georgia", "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, "Liberation Mono", monospace;

  /* texture */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg opacity='.05'%3E%3Ccircle cx='4' cy='5' r='.9' fill='%23E8641F'/%3E%3Ccircle cx='15' cy='12' r='.7' fill='%23F5E8D8'/%3E%3Ccircle cx='21' cy='3' r='.8' fill='%23F58A3C'/%3E%3Ccircle cx='8' cy='19' r='.6' fill='%23F5E8D8'/%3E%3Ccircle cx='19' cy='22' r='.9' fill='%23E8641F'/%3E%3C/g%3E%3C/svg%3E");
  --sheen: linear-gradient(180deg, rgba(74, 168, 184, .10), rgba(74, 168, 184, 0) 42%);
}

/* ------------------------------------------------------ 2. Reset / base --- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The furnace grain over the whole page. A positioned pseudo-element paints
   above in-flow content unless it is pushed behind, and this one covers every
   card, image and paragraph if it is not. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  z-index: -1;
}

img, svg, canvas, video { display: block; max-width: 100%; }

/* An inline <svg> with no width/height is a replaced element that defaults to
   300x150, which is how a 14px icon ends up dominating a page. Every inline
   icon carries its own viewBox; this is the fallback that keeps an unsized one
   in its box. */
svg { width: 1em; height: 1em; }
svg[viewBox] { width: auto; height: auto; }
.art svg, .card-media svg, .hero-media svg { width: 100%; height: auto; }

a { color: var(--inc-200); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--glass-400); }

/* Any `display` value on an element defeats [hidden]. These guards make the
   attribute authoritative again for the things that toggle it. */
[hidden] { display: none !important; }
.studio-overlay[hidden], .studio-fallback[hidden], .search-panel[hidden],
.drawer[hidden], .scrim[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--ember-500);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(232, 100, 31, .35);
}

::selection { background: rgba(232, 100, 31, .32); color: var(--inc-100); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--ember-500);
  color: var(--furnace-900);
  padding: 10px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------ 3. Typography ----- */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--text);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--inc-100); font-weight: 700; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember-500);
  margin: 0 0 .6em;
}
.eyebrow::before { content: "\1F525"; margin-right: .5em; font-size: .9em; }

.lede { font-size: 1.06rem; color: var(--text-2); max-width: 68ch; }

.mono, .mono-sm, .param-badge, .card-foot .mono-sm {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.mono-sm { font-size: .76rem; letter-spacing: .04em; color: var(--text-3); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* a parameter marker: temperature, dimension, weight, time */
.param-badge {
  display: inline-block;
  font-size: .78rem;
  padding: 2px 8px;
  background: var(--furnace-700);
  border: 1px solid var(--ember-800);
  color: var(--ember-300);
}

blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--ember-500);
  color: var(--text-2);
}
blockquote footer { font-size: .82rem; color: var(--text-3); margin-top: .5em; }
blockquote cite { font-style: normal; }

/* ------------------------------------------------------ 4. Layout --------- */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 820px; }
.wrap-wide { max-width: 1360px; }

main { padding-top: var(--header-h); }
main.no-pad { padding-top: 0; }

.section { padding: 60px 0; }
.section-sm { padding: 38px 0; }
.section-tight { padding: 42px 0 60px; }
.section-deep { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { margin-bottom: 26px; }
.section-head h2 { margin-bottom: .2em; }
.section-head p { color: var(--text-2); max-width: 70ch; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* align-items:start — a grid row stretches its children to the tallest one by
   default, which left the framed canvas 160px taller than the canvas itself
   and a block of empty frame underneath it. */
.split-wide { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 30px; align-items: start; }
.split-side { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; align-items: start; }

.stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------ 5. Header --------- */

/* Fixed, not sticky: §4 reserves 104px at the top of main so the header can
   overlay the page, and §5.2 needs the brand bar to retract on scroll without
   the rod rig leaving a hole behind it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--furnace-950);
}

/* --- the brand bar --- */
.brandbar {
  height: var(--brandbar-h);
  background: var(--furnace-950);
  border-bottom: 1px solid var(--ember-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
  transition: margin-top var(--t);
}
.site-header.is-scrolled .brandbar {
  margin-top: calc(-1 * var(--brandbar-h));
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--ember-500);
  color: var(--furnace-900);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--glow-ember);
}
.brand-mark svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.brand-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--inc-100);
  letter-spacing: .02em;
  white-space: nowrap;
}
.brand-sub {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember-500);
  white-space: nowrap;
}

.brandbar-right { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.icon-btn:hover { color: var(--ember-500); border-color: var(--ember-800); }
.icon-btn.burger { width: 38px; height: 38px; display: none; }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--ember-500);
  border-radius: var(--r-pill);
  color: var(--ember-500);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pill-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pill-link:hover { background: var(--ember-500); color: var(--furnace-900); box-shadow: var(--glow-ember); }

/* --- the gathering-rod rig ---
   Each nav item hangs off a rod. The rod is the ::before: a short diagonal
   stroke alternating 45deg / -45deg, as if the lump of glass had just been
   drawn out of the furnace on it. The label is the gather; the active one has
   been "blown" — lifted, lit and turned solid ember. */
.rod-nav {
  position: relative;
  z-index: 1;
  height: var(--rods-h);
  background: var(--furnace-900);
  border-bottom: 1px solid var(--ember-800);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0 22px 10px;
  transition: height var(--t);
}
.site-header.is-scrolled .rod-nav { height: var(--header-h-scrolled); padding-bottom: 5px; }

.nav-item {
  position: relative;
  display: block;
  padding: 6px 16px;
  border-radius: 6px;
  background: var(--furnace-700);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-blow), box-shadow var(--t-fast);
}
/* the rod above the gather */
.nav-item::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 22px;
  background: var(--ember-800);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(45deg);
  transition: background var(--t-fast), height var(--t-fast), transform var(--t-fast);
}
.rod-nav > *:nth-child(even) .nav-item::before { transform: translateX(-50%) rotate(-45deg); }

.site-header.is-scrolled .nav-item::before { height: 12px; opacity: .7; }

.nav-item:hover {
  background: var(--furnace-600);
  color: var(--text);
}
.nav-item:hover::before { background: var(--ember-500); }

.nav-item.is-active {
  background: var(--ember-500);
  color: var(--furnace-900);
  transform: translateY(-4px);
  box-shadow: var(--glow-ember), var(--sh-sm);
}
.nav-item.is-active::before {
  background: var(--inc-200);
  height: 26px;
  box-shadow: 0 0 8px rgba(232, 208, 184, .5);
}
.site-header.is-scrolled .nav-item.is-active { transform: none; }

/* --- the tools dropdown --- */
.nav-drop { position: relative; }
.dd {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 268px;
  background: var(--furnace-700);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--ember-500);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 30;
}
.nav-drop:hover .dd, .nav-drop:focus-within .dd {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dd a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: .84rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.dd a:hover { background: var(--furnace-600); color: var(--text); }
.dd-desc { display: block; font-size: .7rem; color: var(--text-3); font-family: var(--font-mono); }
.dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dd .dd-all { color: var(--ember-400); font-weight: 700; font-size: .78rem; letter-spacing: .06em; }

/* --- the search panel --- */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--furnace-800);
  border-bottom: 1px solid var(--ember-800);
  box-shadow: var(--sh-lg);
  padding: 18px 0;
  z-index: 150;
}
.search-panel input {
  width: 100%;
  padding: 13px 16px;
  font-size: 1rem;
  background: var(--furnace-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
}
.search-panel input::placeholder { color: var(--text-3); }
.search-results { margin-top: 12px; display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.search-results a {
  display: block;
  padding: 10px 14px;
  background: var(--furnace-700);
  border-left: 3px solid var(--ember-800);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-results a:hover { border-left-color: var(--ember-500); background: var(--furnace-600); }
.search-results .sr-kind {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-500);
}
.search-results .sr-title { display: block; color: var(--text); font-weight: 600; font-size: .92rem; }
.search-results .sr-desc { display: block; color: var(--text-3); font-size: .8rem; }

/* --- the drawer --- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 6, .72);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--furnace-900);
  border-left: 1px solid var(--line-strong);
  z-index: 300;
  transform: translateX(100%);
  transition: transform var(--t);
  overflow-y: auto;
  padding: 18px;
}
.drawer.is-on { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-nav > a, .drawer-group > summary {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--furnace-700);
  color: var(--text-2);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  border-left: 3px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.drawer-nav > a:hover, .drawer-group > summary:hover { background: var(--furnace-600); color: var(--text); border-left-color: var(--ember-500); }
.drawer-nav > a.is-active { background: var(--ember-500); color: var(--furnace-900); border-left-color: var(--inc-200); }
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-sub { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 6px 12px; }
.drawer-sub a { padding: 8px 12px; font-size: .84rem; color: var(--text-3); border-radius: var(--r-sm); }
.drawer-sub a:hover { color: var(--ember-400); background: var(--furnace-800); }

/* --------------------------------- 6. Hero, trust strip, process steps ---- */

.hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--furnace-950);
  border-bottom: 1px solid var(--ember-800);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero-slide.is-on { opacity: 1; pointer-events: auto; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #080606 0%, rgba(18, 16, 14, .9) 46%, rgba(232, 100, 31, .15) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 660px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--ember-500);
  border-radius: var(--r-pill);
  color: var(--ember-400);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(232, 100, 31, .08);
}
.hero-title {
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  margin-bottom: .35em;
  color: var(--inc-100);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.hero-lede { font-size: 1.04rem; color: var(--text-2); max-width: 54ch; margin-bottom: 1.6em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.hero-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--ember-500);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: width var(--t), background var(--t-fast), box-shadow var(--t-fast);
}
.hero-dot.is-on { width: 44px; background: var(--ember-500); box-shadow: var(--glow-ember); }
.hero-arrows { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(8, 6, 6, .6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-2);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hero-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.hero-arrow:hover { background: var(--ember-500); color: var(--furnace-900); border-color: var(--ember-500); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

.trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-icon {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  background: var(--furnace-700);
  border: 1px solid var(--ember-800);
  color: var(--ember-500);
}
.trust-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.trust-item h3 { font-size: .96rem; margin-bottom: .18em; }
.trust-item p { font-size: .84rem; color: var(--text-3); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.step-card { position: relative; }
.step-media { position: relative; background: var(--furnace-800); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.step-num {
  position: absolute;
  top: 10px; left: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--ember-500);
  color: var(--furnace-900);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  box-shadow: var(--glow-ember);
}
.step-label {
  display: inline-block;
  margin: 12px 0 6px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember-500);
}
.step-card h3 { font-size: 1.02rem; margin-bottom: .25em; }
.step-card p { font-size: .86rem; color: var(--text-3); }

/* ------------------------------------------------------ 7. Page hero ----- */

.page-hero {
  background: var(--furnace-800);
  border-bottom: 3px solid var(--ember-500);
  padding: 42px 0 34px;
  position: relative;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: .3em; }
.page-hero .lede { margin-bottom: 0; }

/* §12: the 800x480 editorial scenes are drawn for the home page and for page
   heroes. On a category page the scene sits behind the heading under the same
   diagonal scrim the home hero uses, so the text keeps its contrast over the
   busiest part of the drawing. Paint order is media -> scrim -> wrap -> grain. */
.page-hero.has-media { padding: 56px 0 48px; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .46; }
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #080606 0%, rgba(18, 16, 14, .92) 46%, rgba(232, 100, 31, .14) 100%);
}

.crumbs {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--glass-400); }
.crumbs span[aria-hidden] { color: var(--line-strong); }
.crumbs span[aria-current] { color: var(--ember-400); }

/* ------------------------------------------------------ 8. Cards --------- */

/* §0.1 — every entry card is clickable as a whole. The <a> wraps the entire
   card, so the padding is part of the target. Where a card must also carry a
   real outbound citation the anchor cannot nest, so the card becomes an
   <article> with an absolutely positioned overlay link instead. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  color: inherit;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-500), transparent);
  opacity: .5;
  z-index: 1;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(232, 100, 31, .25);
  border-color: var(--ember-700);
  color: inherit;
}
.card:active { transform: translateY(-1px); }
.card-media { background: var(--furnace-800); overflow: hidden; }
.card-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--t); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 18px; flex: 1; }
.card-title { font-size: 1.06rem; margin-bottom: .3em; }
.card-desc { font-size: .87rem; color: var(--text-3); margin: 0; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.card-arrow { color: var(--ember-500); font-size: 1.05rem; transition: transform var(--t); }
.card:hover .card-arrow { transform: translateX(4px); }
/* the overlay link: covers the card, sits under nothing interactive */
.card-overlay { position: absolute; inset: 0; z-index: 2; }
.card-ext { position: relative; z-index: 3; }

/* variants */
.cat-card .cat-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--ember-500);
  color: var(--furnace-900);
  border-radius: var(--r-pill);
  margin-bottom: 14px;
  box-shadow: var(--glow-ember);
}
.cat-card .cat-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cat-count { font-family: var(--font-mono); font-size: .76rem; color: var(--ember-400); }

.tool-card .card-media { background: var(--furnace-900); }
.tool-card .card-media img { object-fit: contain; padding: 6px; }

.blog-card .card-media img { aspect-ratio: 16 / 9; }
.blog-meta { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--glass-400); }

.studio-card { background: var(--furnace-950); border-color: var(--ember-800); box-shadow: var(--sh-md), 0 0 0 1px rgba(232, 100, 31, .12); }
.studio-card .card-media img { background: var(--furnace-900); }

.qa-card, .quote-card { border-left: 3px solid var(--ember-500); }
.qa-card .card-body, .quote-card .card-body { padding-top: 16px; }
.qa-tag {
  display: inline-block;
  padding: 2px 9px;
  margin-bottom: 10px;
  background: rgba(232, 100, 31, .14);
  border: 1px solid var(--ember-800);
  border-radius: var(--r-pill);
  color: var(--ember-400);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.qa-q { font-style: italic; color: var(--inc-200); font-size: .95rem; margin-bottom: .5em; }
.qa-src { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); margin-bottom: .7em; }
.qa-a { font-size: .86rem; color: var(--text-2); }
.qa-a::before { content: "\2705"; margin-right: .45em; }
.quote-mark { font-family: var(--font-display); font-size: 2.6rem; line-height: .6; color: var(--ember-500); margin: 0 0 .1em; }
.quote-text { font-size: .95rem; color: var(--inc-200); font-style: italic; }

/* the shelf of glass pieces in the database */
.glass-card .card-media img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--furnace-900); padding: 8px; }

/* --------------------------------------- 9. Badges, tags and indicators --- */

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(232, 100, 31, .14);
  border: 1px solid var(--ember-800);
  color: var(--ember-300);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-outline { background: transparent; border-color: var(--line-strong); color: var(--text-3); }
.tag-glass { background: rgba(74, 168, 184, .14); border-color: var(--glass-800); color: var(--glass-300); }
.tag-inc { background: rgba(245, 232, 216, .1); border-color: var(--inc-500); color: var(--inc-200); }
.tag-cobalt { background: rgba(74, 90, 154, .2); border-color: var(--cobalt-700); color: var(--cobalt-200); }
.tag-gold { background: rgba(216, 154, 40, .16); border-color: var(--gold-800); color: var(--gold-300); }
.tag-danger { background: rgba(196, 74, 58, .18); border-color: var(--danger); color: #E89080; }
.tag-ok { background: rgba(90, 138, 90, .18); border-color: var(--ok); color: #A8D0A8; }

.chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--furnace-700);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--ember-700); color: var(--text); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--ember-500); border-color: var(--ember-500); color: var(--furnace-900); font-weight: 700; }

.stage-pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-800);
  background: rgba(74, 168, 184, .1);
  color: var(--glass-300);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
}

.badge-3d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
  background: var(--ember-500);
  color: var(--furnace-900);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.badge-3d svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.glass-badge, .anneal-badge, .temp-badge, .duty-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  border: 1px solid var(--line-strong);
  background: var(--furnace-800);
  color: var(--text-2);
}
.temp-badge { border-color: var(--ember-800); color: var(--ember-300); }
.duty-badge { border-color: var(--glass-800); color: var(--glass-300); }

.glass-badge[data-family="Soda-lime"] { border-color: var(--gold-800); color: var(--gold-300); }
.glass-badge[data-family="Borosilicate"] { border-color: var(--glass-700); color: var(--glass-300); }
.glass-badge[data-family="Lead crystal"] { border-color: var(--cobalt-700); color: var(--cobalt-200); }
.glass-badge[data-family="Quartz"] { border-color: var(--inc-500); color: var(--inc-200); }

/* the temperature and stress meters, as small coloured strips */
.temp-indicator, .anneal-indicator, .glass-health-indicator {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  border-left: 3px solid var(--ember-500);
  background: var(--furnace-800);
  color: var(--text-2);
}
.temp-indicator[data-level="1"] { border-left-color: var(--glass-500); color: var(--glass-300); }
.temp-indicator[data-level="2"] { border-left-color: var(--glass-400); }
.temp-indicator[data-level="3"] { border-left-color: var(--gold-500); color: var(--gold-300); }
.temp-indicator[data-level="4"] { border-left-color: var(--ember-400); color: var(--ember-300); }
.temp-indicator[data-level="5"] { border-left-color: var(--ember-500); color: var(--ember-200); }

.anneal-indicator[data-state="CRACKED"], .glass-health-indicator[data-state="CRACKED"] { border-left-color: var(--danger); color: #E89080; }
.anneal-indicator[data-state="STRESSED"], .glass-health-indicator[data-state="STRESSED"] { border-left-color: var(--warn); color: var(--gold-300); }
.anneal-indicator[data-state="ANNEALING"], .glass-health-indicator[data-state="ANNEALING"] { border-left-color: var(--glass-500); color: var(--glass-300); }
.anneal-indicator[data-state="ANNEALED"], .glass-health-indicator[data-state="HEALTHY"] { border-left-color: var(--ok); color: #A8D0A8; }

/* the 3D tool state pill */
.webgl-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  border: 1px solid var(--line-strong);
  background: var(--furnace-800);
  color: var(--text-3);
  white-space: nowrap;
}
.webgl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.webgl-status.is-loading { color: var(--gold-300); border-color: var(--gold-800); }
.webgl-status.is-ready { color: #A8D0A8; border-color: var(--ok); }
.webgl-status.is-fallback { color: var(--glass-300); border-color: var(--glass-800); }
.webgl-status.is-error { color: #E89080; border-color: var(--danger); }
.webgl-status.is-loading::before { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ------------------------------------------ 10. Notices and tip boxes ---- */

.notice {
  padding: 14px 18px;
  border-left: 4px solid var(--line-strong);
  background: var(--furnace-700);
  font-size: .88rem;
  color: var(--text-2);
  margin: 0 0 16px;
}
.notice strong { display: block; color: var(--text); margin-bottom: .25em; font-family: var(--font-display); letter-spacing: .01em; }
.notice-safety { background: #2E1410; border-left-color: #8A3228; color: #E89080; }
.notice-safety strong { color: #F0A898; }
.notice-info { background: #152030; border-left-color: var(--cobalt-700); color: var(--cobalt-200); }
.notice-info strong { color: #C8D2EE; }
.notice-warn { background: #2E2410; border-left-color: var(--gold-800); color: var(--gold-300); }
.notice-warn strong { color: var(--gold-300); }
.notice-neutral { background: var(--furnace-700); border-left-color: var(--line-strong); }

.tip-box {
  padding: 13px 18px;
  border-left: 4px solid var(--ember-500);
  background: var(--furnace-800);
  font-size: .88rem;
  color: var(--text-2);
  margin: 0 0 16px;
}
.tip-box strong { display: block; color: var(--ember-300); margin-bottom: .2em; }
.tip-box.warn { border-left-color: var(--danger); }
.tip-box.warn strong { color: #E89080; }
.tip-box.note { border-left-color: var(--cobalt-500); }
.tip-box.note strong { color: var(--cobalt-200); }
.tip-box.ok { border-left-color: var(--ok); }
.tip-box.ok strong { color: #A8D0A8; }

.legal-note {
  padding: 14px 18px;
  background: var(--furnace-800);
  border-left: 4px solid var(--ember-500);
  font-family: var(--font-mono);
  font-size: .84rem;
  line-height: 1.65;
  color: var(--text-2);
}

.safety-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  background: #2E1410;
  border: 1px solid #8A3228;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: #E89080;
}
.safety-strip svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }

.empty-state {
  padding: 40px 22px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
  font-size: .9rem;
}

/* ------------------------------------------------------ 11. Buttons ------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--furnace-700);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--ember-500); color: var(--furnace-900); }
.btn-primary:hover { background: var(--ember-400); color: var(--furnace-900); box-shadow: var(--glow-ember); }
.btn-glass { background: var(--glass-500); color: var(--furnace-900); }
.btn-glass:hover { background: var(--glass-400); color: var(--furnace-900); box-shadow: var(--glow-glass); }
.btn-outline { background: transparent; border-color: var(--ember-500); color: var(--ember-400); }
.btn-outline:hover { background: rgba(232, 100, 31, .12); color: var(--ember-300); }
.btn-ghost { background: var(--furnace-800); border-color: var(--line-strong); color: var(--text-2); }
.btn-ghost:hover { background: var(--furnace-600); color: var(--text); }
.btn-danger { background: var(--danger); color: #FFF2EE; }
.btn-danger:hover { background: #D45A48; color: #FFF2EE; }

.btn-sm { padding: 7px 14px; font-size: .76rem; }
.btn-lg { padding: 14px 28px; font-size: .96rem; }
.btn-block { width: 100%; }

/* the CTA: a blowpipe with a flame that moves when you hover it */
.btn-blow { position: relative; }
.btn-blow .flame {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--ember-300), var(--ember-500));
  transition: transform var(--t), box-shadow var(--t);
}
.btn-blow:hover .flame { transform: rotate(-45deg) scale(1.28); box-shadow: 0 0 12px var(--ember-400); }

/* ------------------------------------------------------ 12. Forms -------- */

.field { margin-bottom: 15px; }
.field label, .range-head label, .calc-form label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--furnace-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ember-500);
  box-shadow: 0 0 0 3px rgba(232, 100, 31, .16);
  outline: none;
}
select { cursor: pointer; }
textarea { min-height: 130px; resize: vertical; }

.range-row { margin-bottom: 15px; }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.range-head label { margin-bottom: 5px; }
.range-val {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ember-300);
  white-space: nowrap;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--furnace-600);
  border-radius: var(--r-pill);
  border: none;
  padding: 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ember-500);
  border: 2px solid var(--furnace-900);
  box-shadow: 0 0 10px rgba(232, 100, 31, .5);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ember-500);
  border: 2px solid var(--furnace-900);
  box-shadow: 0 0 10px rgba(232, 100, 31, .5);
  cursor: pointer;
}

.seg { display: flex; gap: 4px; }
.seg button {
  flex: 1;
  padding: 8px 10px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.seg button:hover { border-color: var(--ember-700); color: var(--text); }
.seg button.is-active { background: var(--ember-500); border-color: var(--ember-500); color: var(--furnace-900); font-weight: 700; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: .86rem; color: var(--text-2); }
.switch { position: relative; display: inline-block; width: 42px; height: 23px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--furnace-600);
  border-radius: var(--r-pill);
  transition: background var(--t-fast);
  pointer-events: none;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform var(--t), background var(--t-fast);
}
.switch input:checked + .switch-track { background: var(--ember-800); }
.switch input:checked + .switch-track::after { transform: translateX(19px); background: var(--ember-500); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(232, 100, 31, .3); }

.subscribe { display: flex; gap: 8px; }
.subscribe input { flex: 1; min-width: 0; }

.form-status { font-size: .84rem; margin-top: 10px; color: var(--ok); }
.form-status.is-error { color: var(--danger); }

/* ------------------------------------------------------ 13. Tables ------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--furnace-800); }
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 640px; }
table.data th {
  text-align: left;
  padding: 12px 14px;
  background: var(--ember-800);
  color: var(--ember-100);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data th button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
table.data th button::after { content: "\2195"; opacity: .5; font-size: .85em; }
table.data th[aria-sort="ascending"] button::after { content: "\2191"; opacity: 1; }
table.data th[aria-sort="descending"] button::after { content: "\2193"; opacity: 1; }
table.data td { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: rgba(232, 100, 31, .06); }
table.data td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
table.data .row-name { color: var(--text); font-weight: 600; }
table.data .src-cell { font-family: var(--font-mono); font-size: .76rem; }
table.data .src-cell a { color: var(--text-3); }
table.data .src-cell a:hover { color: var(--glass-400); }

tr.detail-row td { background: var(--furnace-900); border-top: 1px solid var(--ember-800); }
tr.detail-row dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: .84rem; }
tr.detail-row dt { font-family: var(--font-mono); font-size: .76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
tr.detail-row dd { margin: 0; color: var(--text-2); }

.compare-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 18px;
}
.compare-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--furnace-700);
  border: 1px solid var(--ember-800);
  border-radius: var(--r-pill);
  font-size: .8rem;
  color: var(--text-2);
}
.compare-slot button { background: none; border: none; color: var(--ember-400); cursor: pointer; font-size: 1rem; line-height: 1; }

/* ------------------------------------- 14. Filters, chips, pagination ---- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 18px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 24px;
}
.filter-field { flex: 1 1 190px; min-width: 150px; }
.filter-field label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.filter-count { font-family: var(--font-mono); font-size: .8rem; color: var(--ember-400); margin-left: auto; white-space: nowrap; }
.filter-actions { display: flex; gap: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.page-btn {
  min-width: 40px; height: 40px;
  padding: 0 10px;
  display: inline-grid; place-items: center;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: .84rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.page-btn:hover { border-color: var(--ember-700); color: var(--text); }
.page-btn.is-active { background: var(--ember-500); border-color: var(--ember-500); color: var(--furnace-900); font-weight: 700; }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ------------------------------------------------------ 15. Calculator --- */

.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.calc-form { background: var(--furnace-800); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.calc-form h3 { font-size: 1rem; margin: 20px 0 12px; }
.calc-form h3:first-child { margin-top: 0; }

.calc-result {
  background: var(--furnace-800);
  border: 1px solid var(--ember-800);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-md);
}
.calc-big {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ember-400);
  text-shadow: 0 0 26px rgba(232, 100, 31, .35);
  margin-bottom: .1em;
}
.calc-unit { font-family: var(--font-mono); font-size: .9rem; color: var(--text-3); margin-bottom: 20px; }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.calc-cell { background: var(--furnace-900); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.calc-cell dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.calc-cell dd { margin: 0; font-family: var(--font-mono); font-size: 1rem; color: var(--inc-200); }

.gauge { height: 8px; background: var(--furnace-900); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.gauge-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--glass-500), var(--ember-500)); transition: width var(--t); }
.gauge-band { position: absolute; top: 0; bottom: 0; background: rgba(245, 232, 216, .14); border-left: 1px solid var(--inc-500); border-right: 1px solid var(--inc-500); }

.formula {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--furnace-900);
  border-left: 3px solid var(--glass-700);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-2);
  overflow-x: auto;
}
.formula strong { display: block; color: var(--glass-300); margin-bottom: .3em; font-family: var(--font-body); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

.calc-notes { margin-top: 20px; font-size: .84rem; color: var(--text-3); }
.calc-notes li { margin-bottom: .4em; }

/* ------------------------------------------------------ 16. 3D studio ---- */

.studio-wrap { display: flex; flex-direction: column; gap: 14px; }
.studio-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.studio-bar .spacer { flex: 1; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }

/* the stage: canvases, overlay and fallback all stack here */
[data-studio-wrap] {
  position: relative;
  background: var(--furnace-950);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 480px;
  height: 62vh;
  max-height: 720px;
}
[data-studio-wrap] canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
[data-studio-wrap] canvas[data-2d] { z-index: 1; }
[data-studio-wrap] canvas[data-gl] { z-index: 2; }
[data-studio-wrap] canvas[data-gl].is-hidden { display: none !important; }

.studio-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 6, .9);
  text-align: center;
  padding: 24px;
  transition: opacity var(--t), visibility var(--t);
}
.studio-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.so-inner { max-width: 380px; }
.so-inner h3 { font-size: 1.05rem; margin-bottom: .4em; }
.so-inner p { font-size: .86rem; color: var(--text-3); }
.so-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.spinner {
  width: 34px; height: 34px;
  margin: 0 auto 16px;
  border: 3px solid var(--furnace-600);
  border-top-color: var(--ember-500);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sk-progress { width: 100%; max-width: 240px; height: 4px; margin: 16px auto 0; background: var(--furnace-700); border-radius: var(--r-pill); overflow: hidden; }
.sk-progress i { display: block; height: 100%; width: 0; background: var(--ember-500); transition: width var(--t); }

/* The fallback note sits BELOW the layout, not over it. It used to be an
   inset:0 panel, which covered the very 2D diagram it was telling the reader
   to use — lib's inShell() searches the whole .studio-wrap, so the element
   does not have to live inside [data-studio-wrap] to be found. */
.studio-fallback {
  display: none;
  background: var(--furnace-800);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ember-500);
  border-radius: var(--r);
  padding: 16px 18px;
}
.studio-fallback.is-on { display: block; }
.studio-fallback[hidden] { display: none !important; }
.fb-inner { max-width: 780px; }
.fb-inner h3 { font-size: .98rem; margin-bottom: .3em; }
.fb-inner p { font-size: .85rem; color: var(--text-3); margin-bottom: 0; }
.fb-inner svg { width: 100%; height: auto; max-height: 46vh; border: 1px solid var(--line); background: var(--furnace-900); }
.fb-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.studio-panel {
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  max-height: 720px;
  overflow-y: auto;
}
.studio-panel h4 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember-500);
  margin: 18px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.studio-panel h4:first-child { margin-top: 0; }

.studio-hint {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-3);
  text-align: center;
  padding: 8px;
}

.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ro { background: var(--furnace-900); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; }
.ro .ro-k { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ro .ro-v { display: block; font-family: var(--font-mono); font-size: .95rem; color: var(--ember-300); word-break: break-word; }
.ro.wide { grid-column: 1 / -1; }
.ro.is-good .ro-v { color: #A8D0A8; }
.ro.is-bad .ro-v { color: #E89080; }

.sc-warn { display: none; margin-top: 12px; padding: 11px 14px; border-left: 3px solid var(--warn); background: #2E2410; color: var(--gold-300); font-size: .84rem; }
.sc-warn.show { display: block; }
.sc-warn.is-ok { border-left-color: var(--ok); background: #16241A; color: #A8D0A8; }

.sc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; counter-reset: s; }
.sc-steps li {
  position: relative;
  padding: 7px 11px 7px 32px;
  background: var(--furnace-900);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .82rem;
  color: var(--text-3);
  counter-increment: s;
}
.sc-steps li::before {
  content: counter(s);
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--furnace-600);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: .62rem;
}
.sc-steps li.is-done { color: var(--text-2); border-color: var(--line-strong); }
.sc-steps li.is-done::before { background: var(--ok); color: var(--furnace-900); }
.sc-steps li.is-current { color: var(--ember-200); border-color: var(--ember-700); background: rgba(232, 100, 31, .1); }
.sc-steps li.is-current::before { background: var(--ember-500); color: var(--furnace-900); }

.step-track { display: flex; gap: 5px; flex-wrap: wrap; }
.step-chip {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--furnace-900);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-3);
}
.step-chip.is-active { background: var(--ember-500); border-color: var(--ember-500); color: var(--furnace-900); font-weight: 700; }

.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

/* The annealing chart lives in the panel, not on the stage: the stage is a
   two-canvas stack where canvas[data-gl] covers canvas[data-2d], so a chart
   drawn on the 2D canvas would be invisible whenever WebGL works — and for
   that tool the chart is the deliverable, not a preview. */
.studio-chart {
  display: block;
  width: 100%;
  height: 258px;
  background: var(--furnace-950);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  touch-action: none;
}

/* the colour mixer's current pigment */
.studio-swatch-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.studio-swatch {
  display: block;
  flex: 1;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--furnace-900);
  cursor: pointer;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.studio-swatch:hover { border-color: var(--ember-700); box-shadow: var(--glow-glass); }
.studio-swatch-row .sw-name { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); white-space: nowrap; }

.studio-side { min-width: 0; }
.studio-panel .cluster { margin-bottom: 12px; }
.studio-panel .btn-block + .btn-block { margin-top: 8px; }

.studio-aside .panel, .panel {
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.panel h3 { font-size: .96rem; margin-bottom: .5em; }
.panel p { font-size: .85rem; color: var(--text-3); }

/* ------------------------------------------------- 17. Blog and prose --- */

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 34px;
}
.featured-post .fp-media { background: var(--furnace-900); }
.featured-post .fp-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.featured-post .fp-body { padding: 28px; }

.post-hero { padding-bottom: 26px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono); font-size: .76rem; color: var(--text-3); margin-top: 12px; }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* Every other icon container in this sheet sets these four properties; without
   them an inline SVG falls back to the SVG default fill (solid black) at its
   auto size, which reads as a black blob in the byline. */
.post-meta svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }

.prose { font-size: 1.02rem; line-height: 1.8; color: var(--text-2); }
.prose h2 { margin: 1.8em 0 .6em; color: var(--text); }
.prose h3 { margin: 1.5em 0 .5em; color: var(--text); }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--glass-400); text-decoration: underline; text-decoration-color: var(--glass-800); text-underline-offset: 3px; }
.prose a:hover { color: var(--ember-400); text-decoration-color: var(--ember-700); }
.prose code {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: 1px 6px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ember-300);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0 0 1.3em; }
.prose th { text-align: left; padding: 10px 12px; background: var(--ember-800); color: var(--ember-100); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.prose td { padding: 10px 12px; border-top: 1px solid var(--line); }

.toc {
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember-500);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin: 0 0 26px;
}
.toc h2 { font-size: .78rem; font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6em; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: .88rem; }
.toc li { margin-bottom: .3em; }

.step-block { position: relative; padding-left: 64px; margin: 0 0 26px; }
.step-block::before {
  content: attr(data-step);
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ember-500);
  color: var(--furnace-900);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--glow-ember);
}
.step-block h3 { margin-top: 0; }

.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-top: 34px;
}
.author-avatar {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  background: var(--ember-500);
  color: var(--furnace-900);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
}
.author-avatar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.author-box h3 { font-size: .96rem; margin-bottom: .2em; }
.author-box p { font-size: .84rem; color: var(--text-3); }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.post-nav a { padding: 16px 18px; background: var(--furnace-800); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--t-fast), transform var(--t); }
.post-nav a:hover { border-color: var(--ember-700); transform: translateY(-3px); }
.post-nav .pn-label { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .3em; }
.post-nav .pn-title { display: block; color: var(--text); font-weight: 600; font-size: .92rem; }

.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 18px; }

.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ember-500); z-index: 250; transition: width .1s linear; box-shadow: var(--glow-ember); }

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--furnace-700);
  border: 1px solid var(--ember-800);
  border-radius: var(--r-pill);
  color: var(--ember-400);
  cursor: pointer;
  z-index: 180;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t), background var(--t-fast);
}
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--ember-500); color: var(--furnace-900); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ------------------------------------------------------ 18. Footer ------- */

.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line-strong); padding: 48px 0 26px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; margin-bottom: 34px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-note { font-size: .84rem; color: var(--text-3); max-width: 40ch; }
.footer-icons { display: flex; gap: 10px; margin: 16px 0; }
.footer-icons a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-icons a:hover { color: var(--ember-500); border-color: var(--ember-800); }
.footer-icons svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.footer-ver { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }

.footer-col h4 { font-family: var(--font-body); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-500); margin-bottom: .9em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .45em; }
.footer-col a { font-size: .86rem; color: var(--text-3); }
.footer-col a:hover { color: var(--ember-400); }

.footer-safety {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--furnace-800);
  border: 1px solid var(--ember-800);
  border-radius: var(--r);
  margin-bottom: 26px;
}
.footer-safety > svg { width: 26px; height: 26px; flex: none; stroke: var(--ember-500); fill: none; stroke-width: 1.7; }
.footer-safety h4 { font-size: .92rem; margin-bottom: .3em; color: var(--ember-400); }
.footer-safety p { font-size: .82rem; color: var(--text-3); margin: 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-bottom nav a { color: var(--text-3); font-size: .8rem; }
.footer-bottom nav a:hover { color: var(--ember-400); }

.ppe-pill, .silica-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--ember-800);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--ember-400);
}
.ppe-pill svg, .silica-pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ------------------------------------------------------ 19. Utilities ---- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 28px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

.spec-list { margin: 0; padding: 0; }
.spec-list div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.spec-list dt { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--text-3); text-transform: uppercase; }
.spec-list dd { margin: 0; color: var(--text-2); }

.art-frame { background: var(--furnace-950); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 10px; }
/* artwork is emitted as <img>, so the container has to size it or the frame
   collapses to nothing */
.art-frame img { width: 100%; height: auto; border-radius: var(--r-sm); }
/* §6 module 6: the live cross-section. It is a canvas rather than an <img>, so
   it needs the same fluid sizing the images get, and a floor so it never
   collapses while the script is still deferred. */
.art-frame canvas { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
[data-preview-canvas] { min-height: 180px; touch-action: pan-y; }
.thumb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.thumb-row img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--furnace-900); transition: border-color var(--t-fast); }
.thumb-row img:hover { border-color: var(--ember-700); }
.thumb-row img.is-active { border-color: var(--ember-500); }

.scroll-x { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.scroll-x > * { flex: 0 0 auto; scroll-snap-align: start; }
.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-track { background: var(--furnace-800); }
.scroll-x::-webkit-scrollbar-thumb { background: var(--furnace-500); border-radius: var(--r-pill); }

.disc-tag {
  display: block;
  width: 268px;
  padding: 13px 16px;
  background: var(--furnace-800);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t-fast), transform var(--t);
}
.disc-tag:hover { border-color: var(--ember-700); transform: translateY(-3px); }
.disc-tag .dt-title { display: block; color: var(--text); font-size: .88rem; font-weight: 600; margin-bottom: .35em; }
.disc-tag .dt-src { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }

.cta-band {
  position: relative;
  padding: 40px;
  background: var(--ember-500);
  border-radius: var(--r);
  color: var(--furnace-900);
  overflow: hidden;
}
.cta-band::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--furnace-900); }
.cta-band p { color: rgba(18, 16, 14, .82); max-width: 58ch; }
.cta-band .btn { background: var(--furnace-900); color: var(--ember-300); border-color: var(--furnace-900); }
.cta-band .btn:hover { background: var(--furnace-800); color: var(--ember-200); }

/* ------------------------------------------------------ 20. Responsive --- */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-side { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .studio-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-panel { max-height: none; }
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .rod-nav { gap: 4px; }
  .nav-item { padding: 6px 12px; font-size: .72rem; letter-spacing: .08em; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rod-nav { display: none; }
  .icon-btn.burger { display: grid; }
  .brand-sub { display: none; }
  .split-wide { grid-template-columns: minmax(0, 1fr); }
  .featured-post { grid-template-columns: minmax(0, 1fr); }
  main { padding-top: var(--brandbar-h); }
  .site-header.is-scrolled .brandbar { margin-top: 0; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .section { padding: 42px 0; }
  .section-sm { padding: 30px 0; }
  .section-tight { padding: 30px 0 42px; }

  .grid-2, .grid-3, .grid-4, .grid-auto, .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-strip, .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .thumb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout { grid-template-columns: minmax(0, 1fr); }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }

  /* the hero: auto height with a reserved strip, so the second CTA cannot be
     clipped by the fixed height and cannot collide with the dots.
     Only the vertical padding is set here: .hero-inner is also a .wrap, so a
     padding shorthand would wipe the 16px gutter and run the text into the
     edge of the viewport. */
  .hero { height: auto; min-height: 460px; }
  .hero-inner { justify-content: flex-start; padding-top: 42px; padding-bottom: 92px; }
  .hero-arrow { display: none; }
  .hero-title { font-size: 1.85rem; }

  /* the hero scene must not fight the heading on a phone */
  .page-hero.has-media { padding: 38px 0 30px; }
  .page-hero-media img { opacity: .3; }

  .brandbar { padding: 0 16px; }
  .pill-link { display: none; }

  /* §16: on a small screen the studio opens in its 2D reference form, and the
     stage is sized for a phone rather than for a desktop canvas */
  [data-studio-wrap] { min-height: 340px; height: 46vh; max-height: 420px; }

  .spec-list div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  table.data { min-width: 560px; }
  .cta-band { padding: 26px 20px; }
  .disc-tag { width: 232px; }
}

/* ------------------------------------------- 21. Motion, print ----------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
  .nav-item.is-active { transform: none; }
  .spinner { animation: none; border-top-color: var(--ember-500); }
}

@media print {
  .site-header, .drawer, .scrim, .to-top, .read-progress, .hero-dots, .hero-arrows { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding-top: 0; }
  .card, .panel, .notice { border-color: #999; }
}