/* ═══════════════════════════════════════════════════════════════════════════
   SALAH ALDEEN
   ═══════════════════════════════════════════════════════════════════════════

   The page is a wall section. A heat strip along the very top edge, the real
   material below it, cool ground where the reading happens. That strip doubles
   as the scroll indicator: dimmed ahead of you, saturated behind you.

   Bands alternate paper -> mint -> ink -> green, so green carries the page and
   WHITE IS RESERVED FOR CARDS, which then lift off the ground.

   ── Three things that break if you forget them ─────────────────────────────

   Arabic is cursive: NEVER give it positive letter-spacing. It pulls joined
   letters apart and the word stops reading as one. All tracking goes through
   --tr-wide / --tr-mid / --tr-sm, which collapse to 0 under html[lang="ar"].

   IBM Plex Mono has NO ARABIC GLYPHS. Any mono-styled label containing Arabic
   falls through to whatever monospace the visitor's OS has. Two guards: the
   Arabic text face sits inside --f-mono, AND every tracked label is listed in
   the one html[lang="ar"] :is(...) rule below, which switches it to the text
   face. ADD NEW LABELS TO THAT LIST.

   In RTL a flex row ALREADY puts the first child on the right. Do not "help"
   it with flex-direction: row-reverse — that double-flips. It once put the
   calculator's 50 degree label over the cold end of a mirrored gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the palette is MEASURED off the company logo, not chosen ─────────── */
  --green:      #08613A;   /* the brand, the header, every action. 7.5:1 on paper */
  --green-dk:   #054A2C;
  --green-lt:   #0A7546;
  --green-br:   #17A468;   /* the bright edge — emphasis figures on the INK ground */
  --green-pale: #A9F0CD;   /* emphasis figures on the GREEN field. green-br is 2.4:1 there */

  --steel:      #88918E;   /* the logo grey. 3.2:1 — RULES, ICONS, LARGE TEXT ONLY */
  --steel-ink:  #4E5A57;   /* body-size meta text. 5.3:1 on paper */

  --heat:       #E4551F;   /* ONLY where heat is the subject. Never decorative */
  --heat-dk:    #C3410F;   /* the same warm as a FIELD under white text */
  --heat-ink:   #A83609;   /* the same warm as SMALL TEXT on paper */
  --heat-lt:    #FF7A45;   /* the same warm as text on the ink ground */

  --ink:        #0C1A14;   /* near-black carrying the green undertone */
  --ink-2:      #142219;   /* a panel lifted off the ink ground */
  --paper:      #E7F0EA;   /* the ground is green-tinted, not white */
  --mint:       #D6E7DC;   /* a deeper green ground, for alternating bands */
  --line:       #C6DACD;   /* hairlines, green-tinted to match */
  --white:      #FFFFFF;   /* cards only */

  /* Text on a dark ground. The floor for anything under 24px is .82 —
     .66 measures 3.6:1 and fails. Hierarchy comes from size and weight. */
  --on-1:       #F2F7F4;
  --on-2:       rgba(231, 240, 234, .82);
  --on-3:       rgba(231, 240, 234, .6);   /* large text and rules ONLY */

  /* ── local colour context ──────────────────────────────────────────────
     A white card inside a green band is its own context. Without these,
     band-level "on dark" rules leak into it and paint paper on white.
     Every surface that changes ground re-declares the whole set. */
  --lc-key:     var(--steel-ink);
  --lc-rule:    var(--line);
  --lc-mark:    var(--green);
  --lc-link:    var(--green);

  /* ── measure ──────────────────────────────────────────────────────────── */
  --wrap:       1200px;
  --gut:        clamp(20px, 4vw, 40px);
  --head-h:     70px;          /* FIXED. See the header note. */
  --r:          10px;          /* the card radius */
  --r-sm:       6px;

  /* ── tracking. collapses to 0 for Arabic — see the trap note ──────────── */
  --tr-wide:    .14em;
  --tr-mid:     .07em;
  --tr-sm:      .02em;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --f-display:  'Noto Kufi Arabic', 'Archivo', system-ui, sans-serif;
  --f-latin:    'Archivo', 'Noto Kufi Arabic', system-ui, sans-serif;
  --f-text:     'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* the Arabic text face sits INSIDE the mono stack — guard one of two */
  --f-mono:     'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  --ease:       cubic-bezier(.2, .7, .3, 1);
  --shadow:     0 1px 2px rgba(12, 26, 20, .05), 0 10px 28px -16px rgba(12, 26, 20, .3);
  --shadow-lg:  0 2px 4px rgba(12, 26, 20, .06), 0 20px 44px -22px rgba(12, 26, 20, .38);
}

html[lang="ar"] {
  --tr-wide: 0;
  --tr-mid: 0;
  --tr-sm: 0;
}

/* GUARD TWO of the Arabic-in-mono trap: every tracked or mono-styled label that
   can contain Arabic is switched to the text face under Arabic. ADD NEW ONES. */
html[lang="ar"] :is(
  .eyebrow, .rcard__no, .facts dt, .sec__name, .card__no, .pitem__n,
  .chan__k, .specs__k, .slider__scale, .sizer__cap, .board__hd span,
  .spec thead th, .readout__item dt, .readout__item dd i, .crumb, .tag
) {
  font-family: var(--f-text);
  letter-spacing: 0;
}

/* ═══ RESET ═══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: clamp(15.5px, .5vw + 14px, 17px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--heat); outline-offset: 3px; }

.skip {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 200; transform: translateY(-160%);
  background: var(--ink); color: var(--white);
  padding: 12px 20px; text-decoration: none; font-weight: 600;
  border-radius: var(--r-sm);
}
.skip:focus { transform: none; }

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

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gut);
}

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ═══ TYPE ════════════════════════════════════════════════════════════════

   One display face per script, because Arabic has no width axis to match
   Archivo's: Noto Kufi Arabic for Arabic headlines, Archivo at width 112 for
   Latin — expanded reads as MASS, which is what a block of foam is.

   Every measured value is set in mono (.num). It is what makes the site read
   like a datasheet rather than a brochure.
   ═══════════════════════════════════════════════════════════════════════════ */

.h-display {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: var(--tr-sm);
}
html[lang="en"] .h-display,
html[lang="en"] .hero__h,
html[lang="en"] .shead__h,
html[lang="en"] .phero__h,
html[lang="en"] .cta__h {
  font-family: var(--f-latin);
  font-stretch: 112%;
  line-height: 1.04;
}

.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--lc-mark);
  margin-block-end: 1.2em;
}
html[lang="ar"] .eyebrow { font-size: .82rem; text-transform: none; }

/* ═══ THE HEAT STRIP / SCROLL INDICATOR ═══════════════════════════════════

   The whole bar is the heat gradient, dimmed by an overlay, and the read
   portion is revealed with clip-path — NOT transform: scaleX, which would
   squash the gradient inside the fill so its colours stop lining up with the
   track behind it.
   ═══════════════════════════════════════════════════════════════════════════ */

.heatline {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 120;
  background: linear-gradient(90deg, #F0A81E, var(--heat) 48%, var(--heat-dk));
  opacity: .28;
}
.heatline__fill {
  position: absolute; inset: 0;
  background: inherit; opacity: 1;
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
}
html[dir="rtl"] .heatline__fill { clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%)); }

/* ═══ HEADER ══════════════════════════════════════════════════════════════

   THE HEIGHT IS FIXED AND MUST STAY FIXED. Shrinking a sticky header on scroll
   changes document height -> moves scroll position -> re-crosses the threshold
   -> the bar visibly oscillates. Only paint changes, and the stuck state has
   hysteresis (latches at 16px, releases at 4px) in app.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.site {
  position: sticky; inset-block-start: 0; z-index: 100;
  height: var(--head-h);
  background: var(--green);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.site.is-stuck {
  background: var(--green-dk);
  box-shadow: 0 10px 30px -18px rgba(12, 26, 20, .8);
}
.site__in { height: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }

.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--white); flex-shrink: 0;
}
/* On the brand green the mark's own green half would disappear, so it is
   reversed to solid white. The S still reads because it is negative space. */
.brand__mark { width: 40px; height: auto; filter: brightness(0) invert(1); }
.brand__txt { display: grid; line-height: 1.2; }
.brand__name { font-family: var(--f-display); font-size: 1.12rem; font-weight: 700; letter-spacing: var(--tr-sm); }
.brand__sub { font-size: .64rem; color: rgba(255, 255, 255, .8); letter-spacing: var(--tr-mid); }
html[lang="ar"] .brand__sub { font-size: .72rem; }

.site__nav {
  display: flex; align-items: center; gap: clamp(2px, .8vw, 12px);
  margin-inline-start: auto; position: relative;
}
.site__nav > a, .drop__btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 9px 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, .88);
  font-size: .92rem; font-weight: 500;
  letter-spacing: var(--tr-sm);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ease);
}
.site__nav > a:hover, .drop__btn:hover { color: var(--white); }

/* The underline marks which PAGE you are on; hovering previews where it would
   go. --x arrives from app.js ALREADY SIGNED for the current direction, because
   inset-inline-start:0 anchors to the right edge under RTL and a left-based
   offset then walks the bar the wrong way. Do not re-flip it here. */
.site__ink {
  position: absolute; inset-block-end: 13px; inset-inline-start: 0;
  height: 2px; width: var(--w, 0);
  background: var(--white);
  transform: translateX(var(--x, 0));
  opacity: 0;
  transition: transform .32s var(--ease), width .32s var(--ease), opacity .2s;
  pointer-events: none;
}
.site__nav.has-ink .site__ink { opacity: 1; }

/* ── the products dropdown ────────────────────────────────────────────────
   .drop__menu is a TRANSPARENT box whose top padding bridges the gap to the
   button; the visible panel is .drop__panel inside it. Remove the bridge and
   put the offset back on the menu and the pointer leaves .drop on the way
   down, closing the menu before anything can be clicked. There is also a
   220 ms grace period on mouseleave, in app.js.
   ───────────────────────────────────────────────────────────────────────── */

.drop { position: relative; }
.drop__chev {
  width: 6px; height: 6px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.drop.is-open .drop__chev { transform: rotate(225deg) translate(-2px, -2px); }

.drop__menu {
  position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-block-start: 12px;          /* the hover bridge. Do not remove. */
  min-width: 340px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), visibility .18s;
}
html[dir="rtl"] .drop__menu { transform: translateX(50%); }
.drop.is-open .drop__menu { opacity: 1; visibility: visible; }

.drop__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  --lc-key: var(--steel-ink);
}
.drop__panel a {
  display: grid; gap: 2px;
  padding: 10px 14px;
  text-decoration: none; color: var(--ink);
  border-radius: var(--r-sm);
  transition: background .16s var(--ease);
}
.drop__panel a:hover { background: var(--paper); }
.drop__panel b { font-size: .94rem; font-weight: 600; }
.drop__panel span { font-size: .78rem; color: var(--steel-ink); line-height: 1.5; }

.site__end { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.lang {
  width: 40px; height: 34px;
  background: none; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-sm);
  color: var(--white);
  font-family: var(--f-mono); font-size: .74rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lang:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); }

.burger {
  display: none; width: 40px; height: 34px;
  background: none; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-sm);
  cursor: pointer; padding: 8px 9px;
  flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2px; background: var(--white); transition: transform .22s var(--ease), opacity .22s; }
.is-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-open .burger span:nth-child(2) { opacity: 0; }
.is-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 24px;
  background: var(--green); color: var(--white);
  border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600; font-size: .94rem; letter-spacing: var(--tr-sm);
  cursor: pointer;
  transition: background .18s var(--ease), transform .14s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 1px 2px rgba(12, 26, 20, .12);
}
.btn:hover { background: var(--green-lt); transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(8, 97, 58, .7); }
.btn:active { transform: none; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--sm { padding: 8px 15px; font-size: .84rem; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--white); border-color: var(--steel); color: var(--ink); }

/* on a dark or green field the ghost inverts. EVERY dark surface must be listed */
.band--ink .btn--ghost, .band--green .btn--ghost,
.hero .btn--ghost, .phero .btn--ghost {
  color: var(--white); border-color: rgba(255, 255, 255, .45);
}
.band--ink .btn--ghost:hover, .band--green .btn--ghost:hover,
.hero .btn--ghost:hover, .phero .btn--ghost:hover {
  background: var(--white); color: var(--ink); border-color: var(--white);
}
.band--green .btn, .hero .btn--white {
  background: var(--white); color: var(--green);
}
.band--green .btn:hover, .hero .btn--white:hover { background: var(--paper); color: var(--green-dk); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none !important; }
}

/* ═══ BANDS ═══════════════════════════════════════════════════════════════ */

.band { padding-block: clamp(60px, 7.5vw, 108px); position: relative; }
.band--tight { padding-block: clamp(42px, 5vw, 68px); }

.band--paper { background: var(--paper); }
.band--mint  { background: var(--mint); }
.band--ink   { background: var(--ink); color: var(--on-1); }
.band--green { background: var(--green); color: var(--white); }

/* every dark surface re-declares the local colour context */
.band--ink, .band--green, .hero, .phero, .foot {
  --lc-key:  var(--on-2);
  --lc-rule: rgba(231, 240, 234, .18);
  --lc-mark: var(--green-br);
  --lc-link: var(--white);
}
.band--green { --lc-mark: rgba(255, 255, 255, .82); }

/* ...and a white card flips it back, wherever it is nested */
.card, .drop__panel, .board,
.band--paper .readout, .band--mint .readout {
  --lc-key:  var(--steel-ink);
  --lc-rule: var(--line);
  --lc-mark: var(--green);
  --lc-link: var(--green);
  color: var(--ink);
}

/* ── section heading ─────────────────────────────────────────────────── */
.shead { max-width: 60ch; margin-block-end: clamp(32px, 4vw, 54px); }
.shead__h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.18; letter-spacing: var(--tr-sm);
}
.shead__p { margin-block-start: 1em; font-size: 1.02rem; color: var(--lc-key); max-width: 56ch; }

/* ═══ HERO — the wall section ═════════════════════════════════════════════ */

.hero {
  background: var(--ink); color: var(--on-1);
  padding-block: clamp(52px, 7vw, 96px) 0;
  position: relative; overflow: hidden;
}
.hero__in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block-end: clamp(44px, 5vw, 72px);
}
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }

.hero__h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.16; letter-spacing: var(--tr-sm);
  max-width: 16ch;
}
.hero__p { margin-block-start: 1.1em; max-width: 48ch; font-size: 1.04rem; color: var(--on-2); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 1.9em; }

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-block-start: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(231, 240, 234, .18);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.facts > div { padding: 13px 16px; border-inline-start: 1px solid rgba(231, 240, 234, .18); }
.facts > div:first-child { border-inline-start: 0; }
.facts dt { font-size: .68rem; letter-spacing: var(--tr-mid); text-transform: uppercase; color: var(--on-2); }
html[lang="ar"] .facts dt { font-size: .78rem; text-transform: none; }
.facts dd { margin: 0; margin-block-start: .3em; font-size: .9rem; font-weight: 600; color: var(--on-1); }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } .facts > div { border-inline-start: 0; border-block-start: 1px solid rgba(231,240,234,.18); } .facts > div:first-child { border-block-start: 0; } }

/* ── the drawn wall section ──────────────────────────────────────────── */

.sec { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.sec__stack { display: grid; }
.sec__layer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.sec__layer--out {
  background: linear-gradient(180deg, #5A4416, #2C2A16);
  min-height: 96px; align-items: flex-end;
}
.sec__layer--block {
  background: repeating-linear-gradient(45deg, #24352B 0 7px, #1E2E25 7px 14px);
  min-height: 58px;
}
.sec__layer--eps {
  background: var(--white);
  background-image: url('media/foam-band.webp');
  background-size: cover; background-position: center;
  min-height: 62px;
}
.sec__layer--in { background: var(--ink-2); min-height: 84px; }

.sec__name { font-size: .76rem; color: rgba(255, 255, 255, .82); letter-spacing: var(--tr-sm); }
.sec__name--on { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.86); padding: 3px 9px; border-radius: 4px; }
.sec__t { font-family: var(--f-mono); font-size: 1.5rem; font-weight: 600; }
.sec__t--hot { color: var(--heat-lt); }
.sec__t--cool { color: var(--green-br); }
.sec__cap { margin-block-start: 0; padding: 12px 4px 0; font-size: .78rem; color: var(--on-2); }
.sec__cap a { color: var(--white); }
.sec__sun { position: absolute; inset: 0; pointer-events: none; }

.hero__band { line-height: 0; }
.hero__band img { width: 100%; height: clamp(70px, 9vw, 120px); object-fit: cover; }

/* ═══ PAGE HERO (interior pages) ══════════════════════════════════════════ */

.phero {
  background: var(--ink); color: var(--on-1);
  padding-block: clamp(36px, 4.6vw, 64px) clamp(40px, 5.4vw, 76px);
  position: relative; overflow: hidden;
}
.phero__tex { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(120% 90% at 80% 0%, rgba(23,164,104,.14), transparent 60%); }
.phero__in { position: relative; z-index: 1; }
.phero__h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.18; letter-spacing: var(--tr-sm); max-width: 22ch;
}
.phero__p { margin-block-start: 1em; max-width: 56ch; font-size: 1.02rem; color: var(--on-2); }

.crumb {
  display: flex; gap: .5em; align-items: center;
  font-family: var(--f-mono); font-size: .76rem;
  color: var(--on-2); margin-block-end: 1.4em;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--white); text-decoration: underline; }
.crumb b { font-weight: 600; color: var(--on-1); }

/* ═══ CARDS — white, and the only white on the page ═══════════════════════ */

.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow);
}
.card__no {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: var(--tr-mid); color: var(--lc-key);
  margin-block-end: .8em;
}
.card__h {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.28; letter-spacing: var(--tr-sm);
  margin-block-end: .55em;
}
.card__p { font-size: .9rem; color: var(--lc-key); line-height: 1.68; }

/* a card sitting on the ink band keeps its own white ground; a "quiet" card
   drops the white and lives as an outline on the band it is on */
.card--quiet {
  background: rgba(231, 240, 234, .05);
  border-color: rgba(231, 240, 234, .16);
  box-shadow: none;
  color: var(--on-1);
  --lc-key: var(--on-2);
}
.band--paper .card--quiet, .band--mint .card--quiet {
  background: var(--white); border-color: var(--line);
  color: var(--ink); --lc-key: var(--steel-ink);
}

/* ── the range grid ──────────────────────────────────────────────────── */

.range { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.rcard { display: grid; }
.rcard__a {
  display: grid; align-content: start;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 14px 20px;
  text-decoration: none; color: var(--ink);
  height: 100%;
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.rcard__a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--steel); }
@media (prefers-reduced-motion: reduce) { .rcard__a:hover { transform: none; } }

.rcard__no {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  color: var(--lc-key); letter-spacing: var(--tr-mid);
  padding-inline: 4px; margin-block-end: 8px;
}
.rcard__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--mint), var(--paper));
  display: grid; place-items: center;
  padding: 14px; overflow: hidden;
  margin-block-end: 16px;
}
.rcard__art svg, .rcard__art img { width: 100%; height: 100%; object-fit: contain; }
.rcard__art--foam { padding: 0; }
.rcard__art--foam img { object-fit: cover; }
.rcard__h { font-family: var(--f-display); font-weight: 700; font-size: 1.14rem; line-height: 1.3; padding-inline: 4px; }
.rcard__p { font-size: .88rem; color: var(--steel-ink); line-height: 1.66; margin-block-start: .5em; padding-inline: 4px; }
.rcard__go {
  display: inline-flex; align-items: center; gap: .4em;
  margin-block-start: 1em; padding-inline: 4px;
  font-size: .86rem; font-weight: 600; color: var(--green);
}
.rcard__go::after { content: '←'; transition: transform .2s var(--ease); }
html[lang="en"] .rcard__go::after { content: '→'; }
.rcard__a:hover .rcard__go::after { transform: translateX(-4px); }
html[lang="en"] .rcard__a:hover .rcard__go::after { transform: translateX(4px); }

/* ═══ SPEC TABLES ═════════════════════════════════════════════════════════ */

.board {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.board__hd {
  padding: 14px 18px;
  border-block-end: 1px solid var(--line);
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.board__hd b { font-family: var(--f-display); font-size: 1.02rem; font-weight: 700; }
.board__hd span { font-family: var(--f-mono); font-size: .76rem; color: var(--steel-ink); }
.board__scroll { overflow-x: auto; }

.spec { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec th, .spec td {
  padding: 12px 16px; text-align: start; white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
.spec thead th {
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: var(--tr-mid); text-transform: uppercase;
  color: var(--steel-ink);
  background: var(--paper);
}
html[lang="ar"] .spec thead th { text-transform: none; font-size: .8rem; }
.spec tbody tr:last-child td { border-block-end: 0; }
.spec tbody tr:nth-child(even) { background: rgba(231, 240, 234, .5); }
.spec .c { text-align: center; }
.spec__yes { color: var(--green); font-weight: 700; }
.board__ft {
  padding: 12px 18px; border-block-start: 1px solid var(--line);
  background: var(--paper);
  font-size: .78rem; color: var(--steel-ink);
}

/* ── the thickness rail ───────────────────────────────────────────────── */

.rail { display: flex; flex-wrap: wrap; gap: 8px; }
.rail__i {
  font-family: var(--f-mono);
  display: inline-flex; align-items: baseline;
  padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white);
  font-size: .96rem; font-weight: 600; color: var(--ink);
}
.band--ink .rail__i, .band--green .rail__i {
  background: rgba(231, 240, 234, .06);
  border-color: rgba(231, 240, 234, .22);
  color: var(--on-1);
}
.rail__i--hi { background: var(--green); border-color: var(--green); color: var(--white); }
.band--ink .rail__i--hi, .band--green .rail__i--hi { background: var(--green-br); border-color: var(--green-br); color: var(--ink); }

/* ═══ SPEC ROWS ═══════════════════════════════════════════════════════════ */

.specs { border-block-start: 1px solid var(--lc-rule); }
.specs__r {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 0; border-block-end: 1px solid var(--lc-rule);
}
.specs__k { font-size: .88rem; color: var(--lc-key); min-width: 12ch; }
.specs__v { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; margin-inline-start: auto; text-align: end; }
.specs__v.num { font-family: var(--f-mono); }

/* ═══ TICKS, TAGS, QUOTES ═════════════════════════════════════════════════ */

.ticks { display: grid; gap: .55em; }
.ticks li { display: flex; gap: .6em; align-items: baseline; font-size: .93rem; }
.ticks li::before { content: '▸'; color: var(--lc-mark); flex-shrink: 0; font-size: .8em; }

.tag {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: var(--tr-mid);
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--lc-rule); color: var(--lc-key);
  font-style: normal;
}

.quote {
  border-inline-start: 3px solid var(--green);
  padding-inline-start: clamp(14px, 2vw, 22px);
  font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.7;
}
.band--ink .quote, .band--green .quote { border-inline-start-color: var(--green-br); }
.quote cite { display: block; margin-block-start: .8em; font-size: .8rem; font-style: normal; color: var(--lc-key); }

.askbox {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow);
}
.askbox__h { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin-block-end: .4em; }
.askbox__p { font-size: .92rem; color: var(--steel-ink); }

/* ═══ THE BIG FIGURE ══════════════════════════════════════════════════════ */

.figure { font-family: var(--f-mono); font-size: clamp(3rem, 8vw, 6rem); font-weight: 600; line-height: .96; color: var(--green); }
.band--ink .figure, .band--green .figure { color: var(--green-br); }
.figure sub { font-family: var(--f-text); font-size: .2em; font-weight: 600; vertical-align: baseline; color: var(--lc-key); }

/* ═══ CONTACT ROWS ════════════════════════════════════════════════════════ */

.chan { display: grid; border-block-start: 1px solid var(--lc-rule); }
.chan__i { display: flex; align-items: center; gap: 12px; border-block-end: 1px solid var(--lc-rule); }
.chan__a {
  flex: 1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 4px; text-decoration: none;
  transition: transform .2s var(--ease);
}
.chan__a:hover { transform: translateX(-8px); }
html[dir="ltr"] .chan__a:hover { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .chan__a:hover { transform: none; } }
.chan__k { font-family: var(--f-mono); font-size: .78rem; color: var(--lc-key); min-width: 15ch; }
.chan__v { font-family: var(--f-mono); font-size: clamp(1.02rem, 1.9vw, 1.3rem); font-weight: 600; direction: ltr; }
.chan__role {
  font-family: var(--f-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: var(--tr-mid); padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--lc-rule); color: var(--lc-key);
}
.chan__copy {
  background: none; border: 1px solid var(--lc-rule); border-radius: var(--r-sm);
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.chan__copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chan__copy:hover { background: rgba(231, 240, 234, .1); border-color: currentColor; }
.band--paper .chan__copy:hover, .band--mint .chan__copy:hover { background: var(--white); }
.chan__copy.is-done { background: var(--green); border-color: var(--green); color: var(--white); }

/* ═══ CTA ═════════════════════════════════════════════════════════════════ */

.cta__h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.2; letter-spacing: var(--tr-sm); max-width: 18ch; }
.cta__row { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 1.7em; }

/* ═══ FOOTER ══════════════════════════════════════════════════════════════ */

.foot {
  background: var(--ink); color: var(--on-2);
  padding-block: clamp(40px, 5vw, 64px) 26px;
  font-size: .89rem;
}
.foot__top {
  display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; justify-content: space-between;
  padding-block-end: 26px; border-block-end: 1px solid rgba(231, 240, 234, .16);
}
.foot__brand { display: flex; gap: 13px; align-items: flex-start; max-width: 42ch; }
.foot__brand img { width: 40px; height: auto; flex-shrink: 0; }
.foot__brand b { display: block; color: var(--on-1); font-weight: 600; font-size: .94rem; line-height: 1.45; }
.foot__brand > span > span { display: block; margin-block-start: .35em; font-size: .82rem; }
.foot__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .5em clamp(20px, 3vw, 40px); align-content: start; }
.foot__nav a { text-decoration: none; transition: color .16s var(--ease); }
.foot__nav a:hover { color: var(--on-1); }
.foot__meta { margin-block-start: 22px; font-size: .78rem; color: var(--on-2); }

/* ═══ TOAST ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%;
  transform: translate(-50%, 130%);
  opacity: 0; visibility: hidden;
  background: var(--ink); color: var(--on-1);
  border: 1px solid var(--green-br); border-radius: var(--r-sm);
  padding: 11px 20px; font-size: .88rem; font-weight: 600;
  z-index: 150; pointer-events: none;
  transition: transform .3s var(--ease), opacity .2s var(--ease), visibility .3s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ═══ REVEAL ══════════════════════════════════════════════════════════════

   .rise and .up are hidden ONLY under html.js, and .rise carries a 1.5 s
   failsafe in app.js that reveals everything if IntersectionObserver produced
   nothing. KEEP BOTH — without them a script error or a background tab renders
   whole sections permanently invisible.
   ═══════════════════════════════════════════════════════════════════════════ */

.js .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

.js .up { opacity: 0; transform: translateY(14px); animation: upin .62s var(--ease) forwards; }
.js .up--1 { animation-delay: .07s; }
.js .up--2 { animation-delay: .14s; }
.js .up--3 { animation-delay: .21s; }
.js .up--4 { animation-delay: .28s; }
@keyframes upin { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .rise.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .up { opacity: 1 !important; transform: none !important; animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .burger { display: flex; }
  .site__nav {
    position: fixed; inset-block-start: var(--head-h); inset-inline: 0;
    background: var(--green-dk);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px var(--gut) 20px;
    max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
    transform: translateY(-140%);
    transition: transform .3s var(--ease);
    margin-inline-start: 0;
  }
  .site.is-open .site__nav { transform: none; }
  .site__nav > a, .drop__btn {
    padding: 14px 2px; width: 100%; justify-content: space-between;
    border-block-end: 1px solid rgba(255, 255, 255, .16);
  }
  .site__ink { display: none; }
  .drop { width: 100%; }
  /* grid-template-rows 0fr -> 1fr animates to the panel's REAL height */
  .drop__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    padding-block-start: 0; min-width: 0;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
  }
  html[dir="rtl"] .drop__menu { transform: none; }
  .drop.is-open .drop__menu { grid-template-rows: 1fr; }
  .drop__panel {
    border: 0; box-shadow: none; background: transparent; padding: 0 0 8px;
    min-height: 0; overflow: hidden;
  }
  .drop__panel a { color: rgba(255, 255, 255, .9); }
  .drop__panel a:hover { background: rgba(255, 255, 255, .1); }
  .drop__panel span { color: rgba(255, 255, 255, .68); }
}

@media (max-width: 620px) {
  :root { --head-h: 62px; }
  .brand__sub { display: none; }
  .specs__r { flex-wrap: wrap; gap: 2px 16px; }
  .specs__v { margin-inline-start: 0; text-align: start; }
  .foot__top { flex-direction: column; }
}

/* ═══ PRINT ═══════════════════════════════════════════════════════════════ */

@media print {
  .site, .heatline, .foot__nav, .toast, .btn { display: none; }
  body { background: #fff; color: #000; }
  .band, .hero, .phero { background: #fff !important; color: #000 !important; padding-block: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE INSTRUMENTS — sizer, calculator, exploded diagram
   ═══════════════════════════════════════════════════════════════════════════

   RANGE INPUTS ARE ALREADY MIRRORED BY THE BROWSER UNDER RTL. Do not add
   direction or transform overrides — that double-flips, and it once put the
   calculator's 50 degree label over the cold end of a mirrored gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

.sizer, .calc {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  background: rgba(231, 240, 234, .04);
  border: 1px solid rgba(231, 240, 234, .14);
  border-radius: var(--r);
  padding: clamp(18px, 2.6vw, 30px);
}
.band--paper .sizer, .band--mint .sizer,
.band--paper .calc, .band--mint .calc {
  background: var(--white); border-color: var(--line); box-shadow: var(--shadow);
}
@media (max-width: 900px) { .sizer, .calc { grid-template-columns: 1fr; } }

.sizer__ctl, .calc__ctl { display: grid; gap: clamp(18px, 2.2vw, 24px); align-content: start; }

/* ── sliders ──────────────────────────────────────────────────────────── */

.slider__lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: .5em; }
.slider__lab > span:first-child { font-size: .84rem; color: var(--lc-key); }
.slider__out { font-family: var(--f-mono); font-size: 1.24rem; font-weight: 600; color: var(--on-1); }
.band--paper .slider__out, .band--mint .slider__out { color: var(--ink); }

.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--green);
}
.slider input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--green);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; margin-block-start: -7px;
  background: var(--white); border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(12, 26, 20, .4); cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--green);
  box-shadow: 0 1px 3px rgba(12, 26, 20, .4); cursor: grab;
}
.slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

.slider__scale {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: .68rem; color: var(--lc-key);
  margin-block-start: .35em;
}
.slider__help { font-size: .78rem; color: var(--lc-key); margin-block-start: .5em; }

/* ── segmented radios ─────────────────────────────────────────────────── */

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { font-size: .84rem; color: var(--lc-key); padding: 0; margin-block-end: .55em; }
.seg__row { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__row label { position: relative; }
.seg__row input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg__row span {
  display: block; padding: 8px 14px;
  border: 1px solid var(--lc-rule); border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 600;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.seg__row input:checked + span { background: var(--green); color: var(--white); border-color: var(--green); }
.seg__row input:focus-visible + span { outline: 3px solid var(--heat); outline-offset: 2px; }
.seg__row label:hover span { border-color: currentColor; }

/* ── readouts ─────────────────────────────────────────────────────────── */

.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  border: 1px solid var(--lc-rule); border-radius: var(--r);
  overflow: hidden; margin-block-start: clamp(16px, 2vw, 22px);
}
.readout__item {
  padding: 14px 16px;
  border-inline-end: 1px solid var(--lc-rule);
  border-block-end: 1px solid var(--lc-rule);
}
.readout__item dt { font-family: var(--f-mono); font-size: .7rem; color: var(--lc-key); margin-block-end: .35em; }
.readout__item dd { margin: 0; display: flex; align-items: baseline; gap: .3em; }
.readout__item dd b { font-family: var(--f-mono); font-size: 1.55rem; font-weight: 600; line-height: 1; }
.readout__item dd i { font-family: var(--f-mono); font-style: normal; font-size: .72rem; color: var(--lc-key); }
.readout__item--big { grid-column: span 2; }
.readout__item--big dd b { font-size: 2.1rem; color: var(--green-br); }
.band--paper .readout__item--big dd b,
.band--mint .readout__item--big dd b { color: var(--green); }
.band--green .readout__item--big dd b { color: var(--green-pale); }
@media (max-width: 520px) { .readout__item--big { grid-column: span 1; } }

/* ── the drawn sheet ──────────────────────────────────────────────────── */

.sizer__stage {
  position: relative; min-height: 290px;
  display: grid; place-items: center;
  border: 1px solid var(--lc-rule); border-radius: var(--r-sm);
  padding: 30px; overflow: hidden;
  background-color: rgba(12, 26, 20, .3);
  background-image:
    linear-gradient(rgba(231, 240, 234, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 240, 234, .05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.band--paper .sizer__stage, .band--mint .sizer__stage {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(12, 26, 20, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 26, 20, .05) 1px, transparent 1px);
}
.sizer__board {
  position: relative;
  width: var(--bw, 200px); height: var(--bh, 100px);
  background: var(--white);
  background-image: url('media/foam-card.webp');
  background-size: cover; background-position: center;
  border: 1px solid rgba(12, 26, 20, .3);
  box-shadow: 0 var(--bt, 8px) 0 #B9C6BD, 0 var(--bt, 8px) 0 1px rgba(12, 26, 20, .3);
  transition: width .2s var(--ease), height .2s var(--ease), box-shadow .2s var(--ease);
}
.sizer__dimW, .sizer__dimH, .sizer__edge {
  position: absolute;
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600;
  color: #F2F7F4; white-space: nowrap;
  background: #16241C;
  padding: 2px 7px; border-radius: 3px;
}
.sizer__dimW { inset-block-start: -20px; inset-inline-start: 50%; transform: translateX(-50%); }
.sizer__dimH { inset-block-start: 50%; inset-inline-end: -14px; transform: translate(100%, -50%); }
.sizer__edge { inset-block-end: -24px; inset-inline-start: 2px; }
.sizer__cap { position: absolute; inset-block-end: 10px; inset-inline-end: 14px; font-family: var(--f-mono); font-size: .68rem; color: var(--lc-key); }
.sizer__note { font-size: .8rem; color: var(--lc-key); margin-block-start: 1em; }
.sizer__note a { color: var(--lc-link); font-weight: 600; }

/* ── the calculator's wall section ────────────────────────────────────── */

.calc__viz { display: grid; gap: 8px; }
.calc__scale { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .82rem; font-weight: 600; }
.calc__hot { color: var(--heat-lt); }
.calc__cold { color: var(--green-br); }
.band--paper .calc__hot, .band--mint .calc__hot { color: var(--heat-ink); }
.band--paper .calc__cold, .band--mint .calc__cold { color: var(--green); }

.calc__bar {
  position: relative; height: clamp(120px, 15vw, 180px);
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--lc-rule);
}
.calc__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--heat) 0%, var(--heat) var(--edge, 30%), var(--cool, #2E7D55) 100%);
}
html[dir="rtl"] .calc__fill {
  background: linear-gradient(270deg, var(--heat) 0%, var(--heat) var(--edge, 30%), var(--cool, #2E7D55) 100%);
}
.calc__eps {
  position: absolute; inset-block: 0;
  inset-inline-start: var(--edge, 30%);
  width: var(--w, 34%);
  background: var(--white);
  background-image: url('media/foam-band.webp');
  background-size: cover;
  border-inline: 1px solid rgba(12, 26, 20, .35);
  display: grid; place-items: center;
  transition: width .25s var(--ease);
}
.calc__epslab {
  font-family: var(--f-mono); font-size: .76rem; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, .9); padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.calc__assume { font-size: .78rem; color: var(--lc-key); margin-block-start: 1.1em; line-height: 1.6; }

/* ── the method block ─────────────────────────────────────────────────── */

.method__eq {
  font-family: var(--f-mono); font-size: clamp(.94rem, 1.6vw, 1.16rem);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: clamp(14px, 2vw, 20px);
  direction: ltr; text-align: center; overflow-x: auto;
}
.band--ink .method__eq, .band--green .method__eq {
  background: rgba(231, 240, 234, .06); color: var(--on-1); border-color: rgba(231, 240, 234, .18);
}
.method__key { display: grid; gap: .5em; margin-block-start: 1.2em; font-size: .88rem; color: var(--lc-key); }
.method__key b { font-family: var(--f-mono); font-weight: 600; color: var(--lc-mark); }

/* ── the exploded cooler ──────────────────────────────────────────────── */

.explode { display: grid; grid-template-columns: 1fr minmax(250px, 340px); gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (max-width: 880px) { .explode { grid-template-columns: 1fr; } }
.explode__fig {
  background: rgba(231, 240, 234, .04);
  border: 1px solid rgba(231, 240, 234, .14);
  border-radius: var(--r);
  padding: clamp(16px, 2.4vw, 28px);
  min-height: 320px; display: grid; place-items: center;
}
.band--paper .explode__fig, .band--mint .explode__fig { background: var(--white); border-color: var(--line); box-shadow: var(--shadow); }

.cool__part { transition: opacity .2s var(--ease); cursor: pointer; }
.explode__fig:hover .cool__part:not(.is-lit) { opacity: .3; }
.cool__part.is-lit { opacity: 1; }

.explode__list { border-block-start: 1px solid var(--lc-rule); }
.pitem {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 10px;
  border-block-end: 1px solid var(--lc-rule);
  cursor: pointer; border-radius: var(--r-sm);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.pitem:hover, .pitem.is-lit { background: rgba(231, 240, 234, .08); transform: translateX(-6px); }
html[dir="ltr"] .pitem:hover, html[dir="ltr"] .pitem.is-lit { transform: translateX(6px); }
.band--paper .pitem:hover, .band--paper .pitem.is-lit,
.band--mint .pitem:hover, .band--mint .pitem.is-lit { background: var(--white); }
@media (prefers-reduced-motion: reduce) { .pitem:hover, .pitem.is-lit { transform: none; } }
.pitem__n { font-family: var(--f-mono); font-size: .72rem; font-weight: 600; color: var(--lc-mark); min-width: 2em; }
.pitem__h { font-weight: 600; font-size: .93rem; }
.pitem__d { font-size: .8rem; color: var(--lc-key); margin-inline-start: auto; text-align: end; }

/* ── application photos ───────────────────────────────────────────────── */

.use { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.use__i { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.use__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mint); position: relative; background-size: cover; background-position: center; }
.use__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.use__media img.is-loaded { opacity: 1; }
.use__b { padding: 14px 16px 18px; }
.use__b h3 { font-family: var(--f-display); font-weight: 700; font-size: 1rem; margin-block-end: .35em; }
.use__b p { font-size: .84rem; color: var(--steel-ink); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DRAWN PRODUCTS
   ═══════════════════════════════════════════════════════════════════════════

   Every product is a shaded three-quarter render sharing one set of materials
   defined once per page in .matdefs. The art lives in _src/partials/art_*.html
   and is INLINED by the build — never <use>d from a <symbol>, because document
   CSS cannot reach inside a <use> shadow tree and the drawings have to animate.
   ═══════════════════════════════════════════════════════════════════════════ */

.art {
  width: 100%; height: auto; overflow: visible;
  stroke: #2F3D36; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  fill: none;
}

.art__shadow { fill: url(#mDrop); stroke: none; }
.art__bead { fill: url(#mBead); stroke: none; }

/* foam bodies */
.art__top, .art__lid, .art__lid2 { fill: url(#mFoamTop); }
.art__front, .art__wall { fill: url(#mFoamL); }
.art__side { fill: url(#mFoamR); }
.art__rim { fill: url(#mFoamTop); }
.art__cavity { fill: #BFCCC3; }
.art__seam, .art__grip { fill: none; }
.art__cold { fill: var(--green-br); }

/* steel and housings */
.art__plate, .art__stem, .art__cap, .art__fix { fill: url(#mSteel); }
.art__ceil { stroke-width: 2.4; }
.art__ceilhatch { stroke-width: 1.2; opacity: .5; }
.art__bezel { fill: #EDF2EF; }
.art__throat { fill: #1E2E25; }
.art__guard { stroke-width: 1.2; opacity: .85; }
.art__hub { fill: url(#mSteelD); }
.art__air { stroke: var(--green); stroke-width: 2; opacity: .85; }

/* blades */
.art__blade { fill: url(#mGreen); }
.art__blades { transform-origin: center; transform-box: fill-box; }

/* cooler */
.art__louvre { fill: #EDF2EF; }
.art__pad { fill: url(#mGreen); }
.art__padline { stroke: #06442A; stroke-width: 1.1; opacity: .6; }
.art__ring { fill: #1E2E25; }
.art__knob { fill: var(--heat); }
.art__leg, .art__feet { fill: url(#mSteelD); }
.art__tankband { fill: url(#mGreenD); }
.art__water { stroke: var(--green-br); stroke-width: 2; }

/* pump */
.art__volute { fill: url(#mGreen); }
.art__motor { fill: url(#mSteel); }
.art__base { fill: url(#mSteelD); }
.art__flange, .art__port { fill: url(#mSteel); }
.art__fins { stroke-width: 1.1; opacity: .6; }
.art__imp { fill: #EDF2EF; }
.art__cable, .art__term { fill: url(#mDark); }
.art__flow { stroke: var(--green-br); stroke-width: 2.2; }

/* One orchestrated behaviour per drawing, all of it off under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .art__blades { animation: spin 3.4s linear infinite; }
  .rcard__a:hover .art__blades { animation-duration: 1s; }
  .art__air, .art__water, .art__flow { stroke-dasharray: 6 8; animation: flow 1.5s linear infinite; }
  .art--coolbox .art__lid { transition: transform .4s var(--ease); transform-box: fill-box; transform-origin: center bottom; }
  .rcard__a:hover .art--coolbox .art__lid { transform: translateY(-7px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* ── the exploded cooler drawing ──────────────────────────────────────── */

.cool {
  width: 100%; height: auto; max-height: 400px;
  stroke: var(--on-1); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; fill: none;
}
.band--paper .cool, .band--mint .cool { stroke: #2F3D36; }
.cool__pad { fill: rgba(23, 164, 104, .28); }
.cool__ring { fill: rgba(231, 240, 234, .06); }
.cool__f { fill: rgba(231, 240, 234, .2); stroke-width: 1.4; }
.cool__blades { transform-origin: 190px 124px; }
.cool__hub { fill: var(--on-1); stroke: none; }
.cool__grille rect { fill: rgba(231, 240, 234, .05); }
.cool__grille path { stroke-width: 1.5; }
.cool__motor rect { fill: rgba(231, 240, 234, .1); }
.cool__tank { fill: rgba(23, 164, 104, .16); }
.cool__pump rect { fill: rgba(231, 240, 234, .12); }
.cool__float circle { fill: var(--green-br); stroke-width: 1.6; }
.cool__hose { stroke: var(--green-br); stroke-width: 2.2; }
.cool__spray { stroke: var(--green-br); stroke-width: 1.6; opacity: .8; }
.cool__waterline { stroke: var(--green-br); stroke-width: 1.6; opacity: .5; }
.cool__part.is-lit { stroke: var(--heat-lt); }
.band--paper .cool__part.is-lit, .band--mint .cool__part.is-lit { stroke: var(--heat); }

@media (prefers-reduced-motion: no-preference) {
  .cool__blades { animation: spin 4.2s linear infinite; }
  .cool__hose, .cool__spray { stroke-dasharray: 5 7; animation: flow 1.6s linear infinite; }
}