/* ==========================================================================
   Brew & Bar — coffee and cocktail tool reference.
   Single stylesheet, no framework, no external font request.

   design.md §1–§11. The two hard rules this file exists to keep:

     §0.1  Every entry card is one clickable surface. The card is an <a>
           wrapping media + body + foot, so the hit area is the whole card,
           not the title. `.card` therefore never gets `display:contents`,
           and no card may nest another <a> or <button>.

     §5    The header is the site's one distinguishing feature: a brand bar
           with a stack of coasters under it. The active coaster is "pulled
           out" of the stack. --header-h must equal brandbar + coasters or
           anchors land under the bar; build/verify.js asserts the sum.
   ========================================================================== */

/* ------------------------------------------------------------- tokens §1 */

:root {
  /* coffee brown — the ground */
  --coffee-950: #0E0A08;
  --coffee-900: #1E1410;
  --coffee-800: #2E2018;
  --coffee-700: #3E2C20;
  --coffee-600: #523A2A;
  --coffee-500: #6E5038;
  --coffee-400: #8A6850;

  /* copper — the accent, and every call to action */
  --copper-900: #5C3A18;
  --copper-800: #8A5628;
  --copper-500: #B87333;
  --copper-400: #D08E48;
  --copper-300: #E0A868;
  --copper-200: #F0C898;
  --copper-100: #F8E0C4;

  /* cream — text and highlights */
  --cream-50: #F5EFE4;
  --cream-100: #F0E8DC;
  --cream-200: #E0D4C4;
  --cream-300: #C8B8A4;
  --cream-400: #A89880;
  --cream-500: #8A7860;

  /* espresso gold — crema, roast notes */
  --gold-900: #7A4A10;
  --gold-700: #A86818;
  --gold-500: #D08A28;
  --gold-300: #E8A858;
  --gold-200: #F2C890;
  --gold-100: #FAE4C0;

  /* glass cyan — carafes, shakers, cold surfaces */
  --glass-900: #2E4A52;
  --glass-700: #4A6A78;
  --glass-500: #7A9AA8;
  --glass-300: #B0C8D4;
  --glass-100: #D8E8F0;

  /* wine red — cocktail accents */
  --wine-900: #5C1A22;
  --wine-700: #8A2A38;
  --wine-500: #B83A4A;
  --wine-300: #D05868;
  --wine-200: #E89098;

  /* semantic */
  --ok: #5A8A5A;
  --warn: #D08A28;
  --danger: #C44A3A;
  --info: #5A7A98;

  /* text + borders */
  --text: #F0E8DC;
  --text-2: #C8B8A4;
  --text-3: #8A7860;
  --border: #3E2C20;
  --border-2: #523A2A;

  /* shape §2 — 0 is the default. The coaster is a hard right angle. */
  --r-0: 0px;
  --r-sm: 4px;
  --r-md: 12px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-md: 0 8px 22px rgba(0, 0, 0, .5);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, .6);
  --glow-copper: 0 0 16px rgba(184, 115, 51, .3);
  --glow-cream: 0 0 12px rgba(240, 232, 220, .2);

  --t-color: .14s ease;
  --t-card: .28s ease;
  --t-pop: .45s cubic-bezier(.34, 1.2, .64, 1);

  --font-head: "Bitter", "Rockwell", "Roboto Slab", "Georgia", serif;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", "Menlo", "Courier New", monospace;

  --wrap: 1200px;
  --wrap-narrow: 820px;
  --wrap-wide: 1360px;
  --gutter: 22px;

  --brandbar-h: 36px;
  --coaster-h: 52px;
  --header-h: 88px;              /* = brandbar + coaster, asserted in verify.js */
  --header-h-tight: 46px;        /* scrolled: coasters only */

  --sec: 60px;
  --sec-sm: 38px;
}

/* ------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--coffee-900);
  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;
}

/* Coffee-bean weave, 3.5% — §2. One repeat, no image request.
   `z-index: -1` is load-bearing: at z-index 0 a positioned pseudo-element
   paints above every in-flow descendant, so the weave laid a dot grid over the
   cards, the body copy and the card borders. At -1 it sits above the page
   background and below the content, which is what a texture is for. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .035;
  background-image:
    radial-gradient(ellipse 7px 4.4px at 12px 14px, var(--cream-100) 42%, transparent 46%),
    radial-gradient(ellipse 7px 4.4px at 34px 30px, var(--cream-100) 42%, transparent 46%);
  background-size: 44px 44px;
}

/* Every inline SVG on the site is an icon emitted by icon() in data.js, and
   most contexts set a size for it. This is the fallback for the contexts that
   do not: without it an unsized SVG is a replaced element and expands to its
   default 300x150, which is how a 12px cube glyph in an eyebrow ends up
   700px wide and looks like a layout bug. Sizing it in `em` makes an icon
   scale with the text it sits in, which is the right default everywhere. */
svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  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; }

a { color: var(--cream-200); text-decoration: none; transition: color var(--t-color); }
a:hover { color: var(--copper-400); }

/* Body-copy links carry a copper underline; card links must not. */
.prose a, .tip-box a, .notice a, .faq-answer a, .legal-note a {
  color: var(--copper-300);
  text-decoration: underline;
  text-decoration-color: var(--copper-900);
  text-underline-offset: 3px;
}
.prose a:hover, .tip-box a:hover, .notice a:hover, .faq-answer a:hover { color: var(--copper-200); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--copper-500);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(184, 115, 51, .35);
  border-radius: 2px;
}

::selection { background: var(--copper-500); color: var(--coffee-950); }

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  background: var(--copper-500); color: var(--coffee-950);
  padding: 10px 18px; font-weight: 700; border-radius: var(--r-sm);
  transition: top var(--t-color);
}
.skip-link:focus { top: 12px; color: var(--coffee-950); }

/* ------------------------------------------------------------- layout §4 */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.wrap-wide { max-width: var(--wrap-wide); }

.section { padding: var(--sec) 0; position: relative; z-index: 1; }
.section-sm { padding: var(--sec-sm) 0; position: relative; z-index: 1; }
.section-tight { padding: 42px 0 60px; position: relative; z-index: 1; }

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

.section-head { margin-bottom: 30px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead { color: var(--text-2); font-size: 1.02rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-500);
  margin: 0 0 .5em;
}

.site-main { position: relative; }

/* --------------------------------------------- header — coaster stack §5 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  isolation: isolate;
}

/* Brand bar 36px */
.brandbar {
  height: var(--brandbar-h);
  background: var(--coffee-950);
  border-bottom: 1px solid var(--copper-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--gutter);
  flex-wrap: nowrap;
  position: relative;
  overflow: hidden;
  transition: height var(--t-card), opacity var(--t-card), border-color var(--t-color);
}

.site-header.is-scrolled .brandbar {
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); }
.brand:hover { color: var(--text); }

.brand-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--copper-400), var(--copper-800));
  display: grid; place-items: center;
  color: var(--coffee-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--sh-xs);
}
.brand-mark svg { width: 16px; height: 16px; }

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.brand-tag {
  font-size: .52rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-500); white-space: nowrap;
}

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

.icon-btn {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-2);
  transition: color var(--t-color), border-color var(--t-color), background var(--t-color);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--copper-400); border-color: var(--copper-900); background: rgba(184, 115, 51, .08); }

.pill-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  border: 1px solid var(--copper-500);
  border-radius: var(--r-pill);
  color: var(--copper-300);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-color), color var(--t-color), box-shadow var(--t-color);
}
.pill-link svg { width: 13px; height: 13px; }
.pill-link:hover { background: var(--copper-500); color: var(--coffee-950); box-shadow: var(--glow-copper); }

.nav-toggle { display: none; }

/* Coaster nav 52px — the signature. */
.coasternav {
  height: var(--coaster-h);
  background: var(--coffee-900);
  border-bottom: 1px solid var(--copper-900);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--gutter);
  overflow: visible;
  transition: height var(--t-card);
}
.site-header.is-scrolled .coasternav { height: var(--header-h-tight); }

.coaster {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  background: var(--coffee-800);
  border: 1px solid var(--border);
  border-radius: var(--r-0);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-color), color var(--t-color),
              border-color var(--t-color), transform var(--t-pop), box-shadow var(--t-card);
}
/* three coaster rings, drawn not imaged */
.coaster::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 5px;
  height: 3px;
  background:
    linear-gradient(var(--coffee-600), var(--coffee-600)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--coffee-600), var(--coffee-600)) 0 1px / 100% 1px no-repeat,
    linear-gradient(var(--coffee-600), var(--coffee-600)) 0 2px / 100% 1px no-repeat;
  opacity: .8;
  transition: opacity var(--t-color), background var(--t-color);
}
.coaster:hover { background: var(--coffee-700); color: var(--text); border-color: var(--border-2); }
.coaster.is-active {
  background: var(--copper-500);
  border-color: var(--copper-400);
  color: var(--coffee-950);
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--glow-copper);
}
.coaster.is-active::after {
  background:
    linear-gradient(var(--coffee-950), var(--coffee-950)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--coffee-950), var(--coffee-950)) 0 1px / 100% 1px no-repeat,
    linear-gradient(var(--coffee-950), var(--coffee-950)) 0 2px / 100% 1px no-repeat;
  opacity: .5;
}
.coaster-dd { display: inline-flex; align-items: center; gap: 7px; }
.coaster-dd svg { width: 11px; height: 11px; transition: transform var(--t-color); }
.coaster-dd[aria-expanded="true"] svg { transform: rotate(180deg); }

.coaster-wrap { position: relative; }

/* Tools dropdown — a coffee card, not a list */
.coaster-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 340px;
  background: var(--coffee-700);
  border: 1px solid var(--border-2);
  border-top: 2px solid var(--copper-500);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 12px;
  z-index: 210;
  display: none;
}
.coaster-menu.is-open { display: block; animation: ddIn .18s ease both; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.dd-head {
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-500); margin: 4px 8px 8px;
}
.coaster-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .9rem;
  transition: background var(--t-color), color var(--t-color);
}
.coaster-menu a:hover { background: var(--coffee-600); color: var(--copper-200); }
.dd-desc { display: block; font-size: .74rem; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.dd-divide { height: 1px; background: var(--border); margin: 8px 4px; }

/* drawer */
.scrim {
  position: fixed; inset: 0; background: rgba(14, 10, 8, .72);
  z-index: 300; backdrop-filter: blur(2px);
}
.scrim[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--coffee-800);
  border-left: 1px solid var(--copper-900);
  z-index: 310;
  transform: translateX(102%);
  transition: transform var(--t-card);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 16px var(--gutter) 28px;
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }

.drawer-nav { list-style: none; margin: 0; padding: 0; }
.drawer-item { margin-bottom: 6px; }
.drawer-link {
  display: block; padding: 12px 14px;
  background: var(--coffee-700);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem;
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color);
}
.drawer-link:hover, .drawer-link.is-active { background: var(--copper-500); color: var(--coffee-950); border-color: var(--copper-400); }
.drawer-sub { padding: 8px 0 4px 12px; border-left: 2px solid var(--copper-900); margin: 6px 0 10px; }
.drawer-sub a { display: block; padding: 6px 0; font-size: .86rem; color: var(--text-2); }
.drawer-sub a:hover { color: var(--copper-300); }
.drawer-foot { margin-top: auto; padding-top: 20px; }

/* search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(14, 10, 8, .86);
  backdrop-filter: blur(4px);
  display: none;
  padding: 8vh var(--gutter) 0;
  overflow-y: auto;
}
.search-overlay.is-open { display: block; }
.search-box {
  max-width: 680px; margin: 0 auto;
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-top: 2px solid var(--copper-500);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.search-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-row svg { width: 18px; height: 18px; color: var(--copper-500); flex: 0 0 auto; }
.search-row input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-size: 1.02rem; color: var(--text);
}
.search-row input::placeholder { color: var(--text-3); }
.search-results { max-height: 58vh; overflow-y: auto; padding: 8px; }
.search-empty { color: var(--text-3); font-size: .88rem; padding: 16px; margin: 0; }
.search-hit {
  display: block; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t-color), border-color var(--t-color);
}
.search-hit:hover, .search-hit.is-cursor { background: var(--coffee-700); border-color: var(--border-2); }
.search-hit strong { display: block; font-size: .95rem; color: var(--text); font-weight: 600; }
.search-hit span { font-size: .78rem; color: var(--text-3); }
.search-hit mark { background: rgba(184, 115, 51, .3); color: var(--copper-100); border-radius: 2px; }
.search-count { font-size: .74rem; color: var(--text-3); padding: 4px 14px 10px; margin: 0; }

/* --------------------------------------------------------------- cards §7 */

.card {
  display: flex;
  flex-direction: column;
  background: var(--coffee-700);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  color: var(--text);
  position: relative;
  cursor: pointer;
  transition: transform var(--t-card), box-shadow var(--t-card),
              border-color var(--t-card), background var(--t-color);
}
/* brushed-copper edge, §2 */
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-800) 30%, var(--copper-400) 50%, var(--copper-800) 70%, transparent);
  opacity: .5;
  transition: opacity var(--t-card);
  z-index: 2;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--glow-copper);
  border-color: var(--copper-500);
  color: var(--text);
}
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card:active { transform: translateY(-1px); }

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--coffee-800); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-card); }
.card:hover .card-media img { transform: scale(1.04); }

.card-body { padding: 18px; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.card-title { font-size: 1.06rem; margin: 0 0 6px; }
.card-desc { color: var(--text-2); font-size: .9rem; margin: 0; }

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-3);
  margin-top: auto;
}
.cf-meta { display: inline-flex; align-items: center; gap: 6px; }
.cf-meta svg { width: 13px; height: 13px; color: var(--copper-500); }
.cf-go { display: inline-flex; align-items: center; gap: 6px; color: var(--copper-400); font-weight: 600; white-space: nowrap; }
.cf-go svg { width: 13px; height: 13px; transition: transform var(--t-color); }
.card:hover .cf-go svg { transform: translateX(4px); }
.cf-rank {
  font-family: var(--font-mono); font-size: .78rem; color: var(--copper-400);
  border: 1px solid var(--copper-900); border-radius: var(--r-sm); padding: 1px 7px;
}

.media-badge {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.media-badge svg { width: 12px; height: 12px; }
.badge-3d { background: var(--copper-500); color: var(--coffee-950); box-shadow: var(--glow-copper); }

/* variants */
.cat-card .card-media { aspect-ratio: 16 / 10; }
.calc-card .card-media { aspect-ratio: 16 / 10; }
.blog-card .card-media { aspect-ratio: 16 / 9; }
.studio-card { background: var(--coffee-950); border-color: var(--copper-900); box-shadow: var(--sh-md), 0 0 0 1px rgba(184, 115, 51, .12); }
.studio-card:hover { box-shadow: var(--sh-lg), var(--glow-copper); }
.station-card .card-media { aspect-ratio: 16 / 10; }

/* quote card — SEO module C */
.quote-card {
  display: flex; flex-direction: column;
  background: var(--coffee-700);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--copper-500);
  border-radius: var(--r-md);
  padding: 22px 20px 18px;
  position: relative;
  cursor: pointer;
  color: var(--text);
  transition: transform var(--t-card), box-shadow var(--t-card), border-color var(--t-card);
}
.quote-card:hover, .quote-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--glow-copper);
  border-color: var(--copper-500);
  border-left-color: var(--copper-300);
  color: var(--text);
}
.quote-card:active { transform: translateY(-1px); }
.qc-mark {
  font-family: var(--font-head);
  font-size: 2.6rem; line-height: .8;
  color: var(--copper-800);
  display: block; margin-bottom: 4px;
}
.quote-card blockquote { margin: 0; border: 0; padding: 0; }
.quote-card blockquote p { font-size: .96rem; color: var(--text); font-style: italic; }
.qc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.qc-source { font-family: var(--font-mono); font-size: .74rem; color: var(--copper-400); line-height: 1.35; }
.qc-source span { display: block; color: var(--text-3); font-size: .68rem; }
.qc-go { color: var(--copper-400); font-size: .76rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.qc-go svg { width: 12px; height: 12px; }

/* Q&A card — SEO module A */
.qa-card {
  display: flex; flex-direction: column;
  background: var(--coffee-700);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--copper-500);
  border-radius: var(--r-md);
  padding: 20px;
  cursor: pointer;
  color: var(--text);
  transition: transform var(--t-card), box-shadow var(--t-card), border-color var(--t-card);
}
.qa-card:hover, .qa-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg), var(--glow-copper);
  border-color: var(--copper-500);
  border-left-color: var(--copper-300);
  color: var(--text);
}
.qa-card:active { transform: translateY(-1px); }
.qa-tag { margin-bottom: 10px; align-self: flex-start; }
.qa-q { font-size: 1.02rem; font-style: italic; margin: 0 0 8px; }
.qa-source {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--copper-400); margin: 0 0 12px;
}
.qa-source svg { width: 13px; height: 13px; }
.qa-a { font-size: .9rem; color: var(--text-2); margin: 0 0 14px; }
.qa-a::before { content: "\2713  "; color: var(--ok); font-weight: 700; }
.qa-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.qa-foot .cf-go { font-size: .8rem; }

/* ------------------------------------------------------ tags / chips §7 */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(184, 115, 51, .16);
  color: var(--copper-200);
  border: 1px solid rgba(184, 115, 51, .3);
  white-space: nowrap;
}
.tag-cream { background: rgba(240, 232, 220, .1); color: var(--cream-200); border-color: rgba(240, 232, 220, .22); }
.tag-gold { background: rgba(208, 138, 40, .16); color: var(--gold-200); border-color: rgba(208, 138, 40, .3); }
.tag-glass { background: rgba(122, 154, 168, .16); color: var(--glass-300); border-color: rgba(122, 154, 168, .3); }
.tag-wine { background: rgba(184, 58, 74, .16); color: var(--wine-200); border-color: rgba(184, 58, 74, .3); }
.tag-outline { background: transparent; color: var(--text-2); border-color: var(--border-2); }
.tag-stage { background: transparent; color: var(--text-3); border-color: var(--border-2); }
.tag-topic { background: rgba(90, 122, 152, .16); color: #A8C4D9; border-color: rgba(90, 122, 152, .3); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--coffee-800);
  color: var(--text-2);
  font-size: .82rem; font-weight: 600;
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color);
}
.chip:hover { border-color: var(--copper-500); color: var(--copper-200); }
.chip.is-active { background: var(--copper-500); color: var(--coffee-950); border-color: var(--copper-400); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the discussion tag rail — SEO module D */
.rail { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--copper-900); border-radius: 3px; }
.rail-item {
  flex: 0 0 auto; max-width: 320px;
  display: block;
  background: var(--coffee-800);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  color: var(--text);
  transition: border-color var(--t-color), background var(--t-color), transform var(--t-card);
}
.rail-item:hover { border-color: var(--copper-500); background: var(--coffee-700); color: var(--text); transform: translateY(-3px); }
.rail-title { display: block; font-size: .86rem; font-weight: 600; }
.rail-src { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--copper-400); }

/* parameter badges */
.param-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: .78rem;
  background: var(--coffee-800);
  border: 1px solid var(--copper-900);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  color: var(--copper-200);
}
.brew-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.brew-espresso { color: var(--gold-300); }
.brew-pourover { color: var(--copper-300); }
.brew-french { color: var(--cream-300); }
.brew-moka { color: var(--wine-200); }
.brew-cold { color: var(--glass-300); }
.station-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.station-home { color: var(--copper-300); }
.station-pro { color: var(--gold-300); }
.station-travel { color: var(--glass-300); }
.station-minimal { color: var(--cream-300); }

/* ------------------------------------------------------------- buttons §10 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-align: center;
  transition: background var(--t-color), color var(--t-color),
              border-color var(--t-color), box-shadow var(--t-color), transform var(--t-color);
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--copper-500); color: var(--coffee-950); }
.btn-primary:hover { background: var(--copper-400); color: var(--coffee-950); box-shadow: var(--glow-copper); }

.btn-cream { background: var(--cream-100); color: var(--coffee-950); }
.btn-cream:hover { background: #fff; color: var(--coffee-950); }

.btn-outline { background: transparent; border-color: var(--copper-500); color: var(--copper-300); }
.btn-outline:hover { background: rgba(184, 115, 51, .14); color: var(--copper-200); border-color: var(--copper-400); }

.btn-ghost { background: rgba(240, 232, 220, .08); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: rgba(240, 232, 220, .16); color: var(--text); }

.btn-danger { background: var(--wine-700); color: #fff; }
.btn-danger:hover { background: var(--wine-500); color: #fff; }

.btn-sm { padding: 7px 14px; font-size: .78rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* steam on the primary brew CTA, off under reduced-motion */
.btn-brew { position: relative; }
.btn-brew .steam { display: inline-flex; gap: 3px; }
.btn-brew .steam i {
  width: 2px; height: 9px; border-radius: 2px; background: currentColor; opacity: .55;
  animation: steam 2.4s ease-in-out infinite;
}
.btn-brew .steam i:nth-child(2) { animation-delay: .5s; }
.btn-brew .steam i:nth-child(3) { animation-delay: 1s; }
@keyframes steam {
  0%, 100% { transform: translateY(1px) scaleY(.7); opacity: .3; }
  50% { transform: translateY(-3px) scaleY(1.1); opacity: .8; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------- notices §9 */

.notice {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--coffee-700);
  margin: 0 0 18px;
}
.notice svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; }
.notice-body strong { display: block; font-size: .94rem; margin-bottom: 2px; }
.notice-body p { font-size: .88rem; color: var(--text-2); margin: 0; }
.n-safety { background: #2E1418; border-color: var(--wine-700); }
.n-safety svg, .n-safety strong { color: var(--wine-200); }
.n-info { background: #152030; border-color: #3A5A78; }
.n-info svg, .n-info strong { color: #A8C4D9; }
.n-warn { background: #2E2410; border-color: var(--gold-900); }
.n-warn svg, .n-warn strong { color: var(--gold-200); }
.n-neutral { background: var(--coffee-700); }
.n-neutral svg, .n-neutral strong { color: var(--copper-300); }

.tip-box {
  background: var(--coffee-800);
  border-left: 4px solid var(--copper-500);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.tip-box p { font-size: .9rem; color: var(--text-2); margin: 0; }
.tb-title {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--copper-300) !important;
  text-transform: uppercase; font-size: .74rem !important; letter-spacing: .1em;
  margin-bottom: 5px !important;
}
.tb-title svg { width: 14px; height: 14px; }
.t-warn { border-left-color: var(--wine-500); }
.t-warn .tb-title { color: var(--wine-200) !important; }
.t-note { border-left-color: var(--info); }
.t-note .tb-title { color: #A8C4D9 !important; }
.t-ok { border-left-color: var(--ok); }
.t-ok .tb-title { color: #8FBE8F !important; }

.legal-note {
  display: flex; gap: 12px;
  background: var(--coffee-800);
  border-left: 4px solid var(--copper-500);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 24px 0;
}
.legal-note svg { width: 18px; height: 18px; color: var(--copper-500); flex: 0 0 auto; margin-top: 3px; }
.legal-note p { font-family: var(--font-mono); font-size: .84rem; color: var(--text-2); margin: 0; line-height: 1.6; }

.empty-state {
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  padding: 40px 24px;
  text-align: center;
  color: var(--text-3);
}
.empty-state strong { display: block; color: var(--text); margin-bottom: 6px; font-family: var(--font-head); }

.safety-strip {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  background: #2E1418;
  border: 1px solid var(--wine-700);
  border-radius: var(--r-md);
  padding: 13px 18px;
  margin: 0 0 26px;
}
.ss-item { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--text-2); }
.ss-item svg { width: 16px; height: 16px; color: var(--wine-200); flex: 0 0 auto; }
.ss-title { display: block; color: var(--wine-200); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .09em; }

/* small meters */
.temp-indicator, .ratio-indicator, .grind-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .78rem;
  background: var(--coffee-800); border: 1px solid var(--border-2);
  border-radius: var(--r-pill); padding: 4px 12px;
}
.ti-bar, .ri-bar, .gi-bar { width: 54px; height: 6px; border-radius: 3px; background: var(--coffee-600); overflow: hidden; }
.ti-bar i, .ri-bar i, .gi-bar i { display: block; height: 100%; border-radius: 3px; }
.ti-bar i { background: linear-gradient(90deg, var(--info), var(--danger)); }
.ri-bar i { background: linear-gradient(90deg, var(--coffee-500), var(--copper-200)); }
.gi-bar i { background: linear-gradient(90deg, var(--coffee-500), var(--cream-100)); }

.webgl-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--coffee-800); color: var(--text-3);
}
.webgl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.webgl-status.is-loading { color: var(--text-3); }
.webgl-status.is-ready { color: #8FBE8F; border-color: rgba(90, 138, 90, .5); }
.webgl-status.is-fallback { color: var(--gold-200); border-color: var(--gold-900); }
.webgl-status.is-error { color: var(--wine-200); border-color: var(--wine-700); }

/* --------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--coffee-700); }

.spec-table, .param-table, .data-table, .trouble-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.spec-table caption, .param-table caption, .data-table caption, .trouble-table caption {
  text-align: left; padding: 14px 16px 0; font-family: var(--font-head);
  font-weight: 700; color: var(--text); font-size: .98rem;
}
.spec-table th, .param-table th, .data-table th, .trouble-table th {
  text-align: left; font-weight: 700;
  padding: 11px 16px;
  background: var(--coffee-800);
  color: var(--copper-200);
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
}
.spec-table td, .param-table td, .data-table td, .trouble-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td,
.param-table tbody tr:last-child th, .param-table tbody tr:last-child td,
.data-table tbody tr:last-child td, .trouble-table tbody tr:last-child td { border-bottom: 0; }
.spec-table th[scope="row"], .param-table th[scope="row"] {
  background: transparent; color: var(--text); text-transform: none;
  letter-spacing: 0; font-size: .86rem; width: 42%; white-space: normal;
  border-bottom: 1px solid var(--border);
}
.param-table td { font-family: var(--font-mono); color: var(--copper-200); font-size: .84rem; }

.trouble-table td:first-child { color: var(--text); font-weight: 600; }
.trouble-table tbody tr { transition: background var(--t-color); }
.trouble-table tbody tr:hover { background: var(--coffee-600); }
.trouble-src { font-family: var(--font-mono); font-size: .76rem; color: var(--copper-400); white-space: nowrap; }
.trouble-src a { color: var(--copper-400); }
.trouble-src a:hover { color: var(--copper-200); }

.data-table { font-size: .86rem; }
.data-table tbody tr { transition: background var(--t-color); cursor: pointer; }
.data-table tbody tr:hover { background: var(--coffee-600); }
.data-table tbody tr.is-open { background: var(--coffee-600); }
.data-table .dt-name { color: var(--text); font-weight: 600; }
.data-table td.mono { font-family: var(--font-mono); color: var(--copper-200); font-size: .82rem; }
.data-detail td { background: var(--coffee-800); }
.data-detail .dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dd-cell { border-left: 2px solid var(--copper-900); padding-left: 10px; }
.dd-cell strong { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-500); }
.dd-cell span { font-size: .86rem; color: var(--text-2); }

.compare-bar {
  position: sticky; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--coffee-800);
  border: 1px solid var(--copper-900);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--sh-lg);
  margin-top: 14px;
}
.compare-bar[hidden] { display: none; }
.cmp-slots { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.cmp-slot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; padding: 4px 10px;
  border: 1px solid var(--copper-900); border-radius: var(--r-pill);
  color: var(--text-2);
}
.cmp-slot button { background: none; border: 0; color: var(--wine-200); padding: 0; line-height: 1; font-size: 1rem; }
.cmp-panel { margin-top: 16px; }
.cmp-panel[hidden] { display: none; }
.cmp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cmp-col { background: var(--coffee-800); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: 16px; }
.cmp-col h4 { color: var(--copper-300); margin-bottom: 10px; }
.cmp-col dl { margin: 0; font-size: .84rem; }
.cmp-col dt { color: var(--text-3); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.cmp-col dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-size: .82rem; }

/* ------------------------------------------------------------- page hero */

.page-hero {
  background: var(--coffee-950);
  border-bottom: 3px solid var(--copper-500);
  padding: 34px 0 38px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image:
    radial-gradient(ellipse 7px 4.4px at 12px 14px, var(--cream-100) 42%, transparent 46%),
    radial-gradient(ellipse 7px 4.4px at 34px 30px, var(--cream-100) 42%, transparent 46%);
  background-size: 44px 44px;
}
.page-hero .wrap { z-index: 1; }
.page-hero h1 { margin-bottom: .35em; }
.lede { color: var(--text-2); font-size: 1.05rem; max-width: 720px; margin: 0; }

.breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 0; margin: 0 0 16px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
}
.breadcrumb li { display: flex; align-items: center; gap: 7px; margin: 0; }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--copper-300); }
.breadcrumb [aria-current] { color: var(--copper-400); }
.bc-sep { color: var(--coffee-500); display: inline-flex; }
.bc-sep svg { width: 11px; height: 11px; }

/* ---------------------------------------------------------- hero carousel */

.hero {
  position: relative;
  height: 460px;
  background: var(--coffee-950);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #0E0A08 0%, rgba(30, 20, 16, .9) 46%, rgba(184, 115, 51, .12) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 14px; margin-bottom: 18px;
  border: 1px solid var(--copper-500); border-radius: var(--r-pill);
  background: rgba(14, 10, 8, .6);
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-300);
}
.hero h2 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); margin-bottom: .4em; }
.hero-text { color: var(--text-2); font-size: 1.02rem; margin-bottom: 24px; max-width: 560px; }
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
}
.hero-dot {
  width: 28px; height: 4px; border-radius: 2px; border: 0; padding: 0;
  background: rgba(240, 232, 220, .3);
  transition: width var(--t-card), background var(--t-color), box-shadow var(--t-color);
}
.hero-dot.is-active { width: 44px; background: var(--copper-500); box-shadow: var(--glow-copper); }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(240, 232, 220, .28);
  background: rgba(14, 10, 8, .55);
  color: var(--cream-100);
  display: grid; place-items: center;
  transition: background var(--t-color), border-color var(--t-color);
}
.hero-arrow svg { width: 16px; height: 16px; }
.hero-arrow:hover { background: var(--copper-500); border-color: var(--copper-500); color: var(--coffee-950); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

/* ------------------------------------------------------------ trust strip */

.trust { background: var(--coffee-800); border-block: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(184, 115, 51, .14);
  border: 1px solid var(--copper-900);
  color: var(--copper-400);
}
.trust-icon svg { width: 18px; height: 18px; }
.trust-item strong { display: block; font-size: .94rem; margin-bottom: 2px; }
.trust-item p { font-size: .82rem; color: var(--text-3); margin: 0; }

/* ----------------------------------------------------------- process steps */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.step { position: relative; margin: 0; }
.step-media { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: hidden; background: var(--coffee-800); }
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.step-num {
  position: absolute; top: 10px; left: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--copper-500); color: var(--coffee-950);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  box-shadow: var(--sh-sm);
}
.step-tag { display: block; margin: 12px 0 4px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; color: var(--copper-500); }
.step h3 { font-size: 1.04rem; margin-bottom: 4px; }
.step p { font-size: .86rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------- studio */

.studio-band {
  background: linear-gradient(160deg, var(--coffee-950), var(--coffee-800));
  border-block: 1px solid var(--copper-900);
}
.studio-band-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gutter); align-items: center; }
.studio-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--coffee-950);
  border: 1px solid var(--copper-900);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md), inset 0 0 40px rgba(184, 115, 51, .08);
}
.studio-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.studio-side-panel { display: flex; flex-direction: column; gap: 12px; }

/* studio tool page layout */
.studio-wrap { position: relative; }
.studio-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--gutter); align-items: start; }
.studio-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.studio-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.studio-stage-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 380px;
  background: radial-gradient(circle at 50% 40%, var(--coffee-800), var(--coffee-950) 72%);
  border: 1px solid var(--copper-900);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.studio-stage-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.studio-stage-wrap canvas[data-gl] { z-index: 2; }
.studio-stage-wrap canvas[data-2d] { z-index: 1; }
.studio-stage-wrap canvas.is-hidden { display: none; }

.studio-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: rgba(14, 10, 8, .9);
  text-align: center; padding: 24px;
  transition: opacity var(--t-card), visibility var(--t-card);
}
.studio-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.so-inner { max-width: 380px; }
.so-inner svg { width: 30px; height: 30px; color: var(--copper-500); margin-bottom: 10px; }
.so-inner strong { display: block; font-family: var(--font-head); font-size: 1.06rem; margin-bottom: 6px; }
.so-inner p { font-size: .86rem; color: var(--text-2); }
.so-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.sk-progress { width: 190px; height: 4px; border-radius: 2px; background: var(--coffee-700); margin: 14px auto 0; overflow: hidden; }
.sk-progress i { display: block; height: 100%; width: 12%; background: var(--copper-500); transition: width .3s ease; }
.sk-spin {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2px solid var(--coffee-600); border-top-color: var(--copper-500);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.studio-fallback {
  position: absolute; inset: 0; z-index: 3;
  display: none;
  flex-direction: column;
  background: var(--coffee-900);
  overflow: hidden;
}
.studio-fallback.is-on { display: flex; }
.studio-fallback .fb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.studio-fallback .fb-head strong { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-200); }
.studio-fallback .fb-figure { flex: 1 1 auto; position: relative; min-height: 0; }
.studio-fallback .fb-figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-fallback .fb-body { padding: 12px 14px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.studio-fallback .fb-body p { font-size: .82rem; color: var(--text-2); margin: 0 0 8px; }
.fb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.studio-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--text-3); margin-top: 10px;
}
.studio-hint svg { width: 14px; height: 14px; color: var(--copper-500); }

/* control panel */
.studio-side {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px;
  position: sticky;
  top: calc(var(--header-h) + 14px);
}
.sc-block + .sc-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.sc-block h3 {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-500); font-family: var(--font-body); font-weight: 800;
  margin-bottom: 12px;
}
.sc-steps { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: sc; }
.sc-steps li {
  counter-increment: sc;
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: .84rem; color: var(--text-3);
  margin: 0;
  transition: color var(--t-color);
}
.sc-steps li::before {
  content: counter(sc);
  position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coffee-700); border: 1px solid var(--border-2);
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-3);
}
.sc-steps li.is-current { color: var(--text); }
.sc-steps li.is-current::before { background: var(--copper-500); border-color: var(--copper-400); color: var(--coffee-950); }
.sc-steps li.is-done { color: var(--text-2); }
.sc-steps li.is-done::before { content: "\2713"; background: rgba(90, 138, 90, .22); border-color: var(--ok); color: #8FBE8F; }

.sc-field { margin-bottom: 14px; }
.sc-field:last-child { margin-bottom: 0; }
.sc-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .78rem; color: var(--text-2); margin-bottom: 5px;
}
.sc-label output {
  font-family: var(--font-mono); font-size: .8rem; color: var(--copper-200);
  background: var(--coffee-950); border: 1px solid var(--copper-900);
  border-radius: var(--r-sm); padding: 1px 7px;
}
.sc-label span:first-child { letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; color: var(--text-3); font-weight: 700; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--copper-900), var(--coffee-600));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--copper-500); border: 2px solid var(--coffee-950);
  margin-top: -6px; box-shadow: var(--sh-xs);
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--coffee-600); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--coffee-950); border-radius: 50%; background: var(--copper-500); }

select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea {
  width: 100%;
  background: var(--coffee-950);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-size: .88rem;
  color: var(--text);
  transition: border-color var(--t-color);
}
select:focus, input:focus, textarea:focus { border-color: var(--copper-500); }
textarea { min-height: 130px; resize: vertical; font-family: inherit; }

.sc-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ro {
  background: var(--coffee-950);
  border: 1px solid var(--border);
  border-left: 2px solid var(--copper-900);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 0;
}
.ro.wide { grid-column: 1 / -1; }
.ro-label { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
.ro-value { display: block; font-family: var(--font-mono); font-size: .96rem; color: var(--copper-200); margin-top: 2px; word-break: break-word; }
.ro.is-bad .ro-value { color: var(--wine-200); }
.ro.is-good .ro-value { color: #8FBE8F; }

.sc-warn {
  display: none;
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--r-sm);
  border-left: 4px solid var(--wine-500);
  background: #2E1418;
  font-size: .82rem; color: var(--wine-200);
}
.sc-warn.show { display: block; }
.sc-warn.is-ok { border-left-color: var(--ok); background: rgba(90, 138, 90, .12); color: #9CC99C; }

.sc-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.preset {
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2); background: var(--coffee-950);
  color: var(--text-2); font-size: .76rem; font-weight: 600;
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color);
}
.preset:hover { border-color: var(--copper-500); color: var(--copper-200); }
.preset.is-active { background: var(--copper-500); color: var(--coffee-950); border-color: var(--copper-400); }

.sc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------ calculators */

.calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.calc-form {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 22px;
}
.calc-form .field { margin-bottom: 16px; }
.calc-form label {
  display: block; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.calc-form .hint { font-size: .76rem; color: var(--text-3); margin-top: 4px; }
.calc-result {
  background: linear-gradient(165deg, var(--coffee-800), var(--coffee-950));
  border: 1px solid var(--copper-900);
  border-radius: var(--r-md);
  padding: 26px 24px;
  box-shadow: var(--sh-md), inset 0 0 50px rgba(184, 115, 51, .06);
  position: sticky; top: calc(var(--header-h) + 14px);
}
.calc-headline {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700; line-height: 1.05;
  color: var(--copper-300);
  text-shadow: 0 0 26px rgba(184, 115, 51, .35);
  margin: 4px 0 2px;
  word-break: break-word;
}
.calc-headline-unit { font-size: .95rem; color: var(--text-3); font-family: var(--font-mono); display: block; margin-bottom: 20px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.calc-cell { background: var(--coffee-950); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; }
.calc-cell .cc-label { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.calc-cell .cc-value { display: block; font-family: var(--font-mono); font-size: 1rem; color: var(--copper-200); }
.gauge { position: relative; height: 8px; border-radius: 4px; background: var(--coffee-700); overflow: hidden; margin: 6px 0 18px; }
/* One fixed gradient cannot be right for all three gauges: the ratio scale
   runs strong-to-light while the extraction scale runs under-to-over, so the
   same ramp encodes opposite meanings on the two pages. The fill is therefore
   coloured by its distance from the recommended band, which the script knows
   and the stylesheet does not. */
.gauge i { display: block; height: 100%; background: var(--copper-500); transition: width .3s ease; }
.gauge i.is-on { background: var(--ok); }
.gauge i.is-near { background: var(--gold-500); }
.gauge i.is-off { background: var(--danger); }
/* The recommended range, drawn over the fill. Without it the bar only says
   where you are; the two end labels say which direction is which, but nothing
   says which part of the track is on target. */
.gauge-band {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  background: rgba(201, 162, 39, .18);
  border-left: 1px solid var(--copper-300);
  border-right: 1px solid var(--copper-300);
  pointer-events: none;
}
.gauge-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); margin-top: -12px; margin-bottom: 16px; }
.formula {
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-3);
  background: var(--coffee-950); border: 1px dashed var(--border-2);
  border-radius: var(--r-sm); padding: 12px 14px; line-height: 1.7;
}
.formula strong { color: var(--copper-300); }

/* --------------------------------------------------------------- filters */

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 24px;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 160px; flex: 1 1 160px; }
.filter-field label {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700;
}
.filter-count { font-family: var(--font-mono); font-size: .8rem; color: var(--copper-300); padding-bottom: 10px; }
.filter-reset { flex: 0 0 auto; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-grid; place-items: center;
  background: var(--coffee-800); border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-2); font-family: var(--font-mono); font-size: .86rem;
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color);
}
.page-btn:hover { border-color: var(--copper-500); color: var(--copper-200); }
.page-btn.is-active { background: var(--copper-500); color: var(--coffee-950); border-color: var(--copper-400); }
.page-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------- tool detail */

.split-wide { display: grid; grid-template-columns: 380px 1fr; gap: 34px; align-items: start; }
.exhibit {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-top: 2px solid var(--copper-500);
  border-radius: var(--r-md);
  overflow: hidden;
  position: sticky; top: calc(var(--header-h) + 14px);
}
.exhibit-frame { position: relative; aspect-ratio: 4 / 3; background: var(--coffee-950); }
.exhibit-frame img { width: 100%; height: 100%; object-fit: contain; }
.exhibit-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.exhibit-frame.is-3d canvas { display: block; }
.exhibit-frame.is-3d img { display: none; }
.exhibit-frame .exhibit-hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  font-family: var(--font-mono); font-size: .68rem; color: var(--copper-300);
  background: rgba(14, 10, 8, .75); border: 1px solid var(--copper-900);
  border-radius: var(--r-sm); padding: 3px 8px;
}
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
.thumb {
  aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: var(--coffee-950); padding: 0; cursor: pointer;
  transition: border-color var(--t-color);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb:hover, .thumb.is-active { border-color: var(--copper-500); }
.exhibit-meta { padding: 0 14px 14px; }
.stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(184, 115, 51, .14);
  border: 1px solid var(--copper-900);
  color: var(--copper-200);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.detail-body h2 { font-size: 1.28rem; margin-top: 34px; }
.detail-body h2:first-child { margin-top: 0; }
.detail-body h3 { font-size: 1.05rem; margin-top: 24px; }
.detail-body ul { color: var(--text-2); }
.detail-body p { color: var(--text-2); }
.detail-body p strong, .detail-body li strong { color: var(--text); }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 0 18px; }
.chip-list li { margin: 0; }
.related { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); }

/* -------------------------------------------------------------- database */

.db-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.db-stat {
  background: var(--coffee-800); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 8px 14px; font-size: .8rem; color: var(--text-3);
}
.db-stat strong { font-family: var(--font-mono); color: var(--copper-200); font-size: .96rem; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--copper-100); }
th.sortable .sort-ind { color: var(--copper-500); font-size: .8em; margin-left: 4px; }
.table-caption-note { font-size: .78rem; color: var(--text-3); margin: 10px 2px 0; }

/* ------------------------------------------------------------------ blog */

.featured-post {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--coffee-700);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 34px;
  color: var(--text);
  transition: border-color var(--t-card), box-shadow var(--t-card), transform var(--t-card);
}
.featured-post:hover { border-color: var(--copper-500); box-shadow: var(--sh-lg), var(--glow-copper); transform: translateY(-4px); color: var(--text); }
.fp-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--coffee-800); }
.fp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-card); }
.featured-post:hover .fp-media img { transform: scale(1.03); }
.fp-body { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.fp-body .card-kicker { margin-bottom: 12px; }
.fp-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.fp-body p { color: var(--text-2); font-size: .94rem; }
.fp-meta { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); margin-top: 14px; }

.post-hero { background: var(--coffee-950); border-bottom: 3px solid var(--copper-500); padding: 30px 0 34px; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-family: var(--font-mono); font-size: .76rem; color: var(--text-3); margin-top: 14px;
}
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 13px; height: 13px; color: var(--copper-500); }
.post-figure { margin: 0 0 28px; }
.post-figure img { width: 100%; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--coffee-800); }
.post-figure figcaption { font-size: .8rem; color: var(--text-3); margin-top: 8px; }

.split-side { display: grid; grid-template-columns: 1fr 310px; gap: 40px; align-items: start; }
.post-side { position: sticky; top: calc(var(--header-h) + 14px); }
.side-card {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 16px;
}
.side-card h3 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-500); font-family: var(--font-body); font-weight: 800; margin-bottom: 12px;
}
.toc { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.toc li { margin: 0 0 2px; }
.toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--border); color: var(--text-2); }
.toc a:hover { color: var(--copper-200); border-left-color: var(--copper-500); }
.toc a.is-active { color: var(--copper-200); border-left-color: var(--copper-500); background: rgba(184, 115, 51, .08); }
.toc li.toc-sub a { padding-left: 22px; font-size: .8rem; color: var(--text-3); }

.prose { color: var(--text-2); font-size: 1rem; }
.prose h2 { margin-top: 40px; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { margin-top: 28px; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose ul, .prose ol { color: var(--text-2); }
.prose blockquote {
  margin: 22px 0; padding: 14px 20px;
  background: var(--coffee-800);
  border-left: 4px solid var(--copper-500);
  border-radius: var(--r-sm);
  color: var(--text);
  font-style: italic;
}
.prose blockquote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-mono); font-size: .78rem; color: var(--copper-400); }

.step-block {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  margin: 22px 0; align-items: start;
}
.step-block .sb-num {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(184, 115, 51, .14);
  border: 1px solid var(--copper-900);
  color: var(--copper-300);
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
}
.step-block h3 { margin: 8px 0 6px; }
.step-block p { margin: 0 0 8px; }

.author-box {
  display: flex; gap: 16px; align-items: center;
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 18px;
  margin-top: 34px;
}
.author-box .ab-mark {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  background: linear-gradient(160deg, var(--copper-400), var(--copper-800));
  display: grid; place-items: center; color: var(--coffee-950);
}
.author-box .ab-mark svg { width: 24px; height: 24px; }
.author-box strong { display: block; font-family: var(--font-head); }
.author-box p { font-size: .84rem; color: var(--text-3); margin: 2px 0 0; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.post-nav a {
  background: var(--coffee-800); border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 16px; display: block; color: var(--text);
  transition: border-color var(--t-color), transform var(--t-card);
}
.post-nav a:hover { border-color: var(--copper-500); transform: translateY(-3px); color: var(--text); }
.post-nav .pn-dir { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--copper-500); text-transform: uppercase; letter-spacing: .1em; }
.post-nav .pn-title { display: block; font-weight: 600; margin-top: 4px; font-size: .94rem; }
.post-nav .pn-next { text-align: right; }

.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--copper-500); z-index: 250;
  box-shadow: var(--glow-copper);
}

/* ------------------------------------------------------------- content pages */

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gutter); }
.prose-block { max-width: 760px; }
.prose-block h2 { margin-top: 34px; }
.prose-block h2:first-child { margin-top: 0; }

.form-card {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 26px;
}
.form-card .field { margin-bottom: 16px; }
.form-card label { display: block; font-size: .78rem; color: var(--text-2); margin-bottom: 6px; font-weight: 600; }
.form-card .req { color: var(--copper-400); }
.form-msg { font-size: .82rem; margin-top: 12px; min-height: 1.2em; }
.form-msg.is-ok { color: #8FBE8F; }
.form-msg.is-bad { color: var(--wine-200); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--wine-500); }
.field-error { font-size: .76rem; color: var(--wine-200); margin-top: 4px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; }
.check-row input { width: auto; margin-top: 5px; }
.check-row label { margin: 0; font-weight: 400; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* ------------------------------------------------------------------ faq */

.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--coffee-800);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 15px 18px;
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--copper-500); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { color: var(--copper-200); border-bottom: 1px solid var(--border); }
.faq-answer { padding: 14px 18px 18px; color: var(--text-2); font-size: .9rem; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--coffee-950);
  border-top: 1px solid var(--copper-900);
  padding-top: 52px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-col h3 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--copper-500);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: .86rem; color: var(--text-2); }
.footer-col a:hover { color: var(--copper-300); }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand > p { font-size: .86rem; color: var(--text-3); max-width: 34ch; }
.footer-social { display: flex; gap: 8px; margin: 16px 0 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--text-2);
  transition: border-color var(--t-color), color var(--t-color);
}
.footer-social a svg { width: 15px; height: 15px; }
.footer-social a:hover { border-color: var(--copper-500); color: var(--copper-300); }
.footer-version { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
.footer-divide { height: 1px; background: var(--border); margin: 10px 0; list-style: none; }

.footer-sub { display: flex; gap: 8px; margin-top: 14px; }
.footer-sub input { flex: 1 1 auto; min-width: 0; }
.footer-sub button {
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--copper-500);
  background: transparent; color: var(--copper-300);
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  transition: background var(--t-color), color var(--t-color);
}
.footer-sub button:hover { background: var(--copper-500); color: var(--coffee-950); }

.footer-disclaimer {
  display: flex; gap: 18px;
  background: var(--coffee-900);
  border: 1px solid var(--copper-900);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: 44px 0 30px;
}
.fd-icon { color: var(--copper-500); flex: 0 0 auto; }
.fd-icon svg { width: 26px; height: 26px; }
.footer-disclaimer h3 { font-size: .98rem; margin-bottom: 10px; }
.footer-disclaimer p { font-size: .84rem; color: var(--text-3); margin-bottom: 8px; }
.footer-disclaimer strong { color: var(--text-2); }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--border);
  padding: 20px 0 30px;
}
.fb-copy { font-size: .8rem; color: var(--text-3); margin: 0; }
.fb-links { display: flex; flex-wrap: wrap; gap: 16px; }
.fb-links a { font-size: .8rem; color: var(--text-3); }
.fb-links a:hover { color: var(--copper-300); }
.string-safe, .drink-safe {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper-300);
  border: 1px solid var(--copper-900); border-radius: var(--r-pill);
  padding: 4px 12px;
}
.string-safe svg { width: 13px; height: 13px; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--copper-500); color: var(--coffee-950);
  border: 0; display: grid; place-items: center;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-card), visibility var(--t-card), background var(--t-color);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--copper-400); }

/* ------------------------------------------------------------------ misc */

.cta-band {
  background: linear-gradient(120deg, var(--copper-800), var(--copper-500) 55%, var(--copper-400));
  border-radius: var(--r-md);
  padding: 40px 34px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-lg);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, .5) 3px 4px);
}
.cta-band h2, .cta-band p { color: var(--coffee-950); position: relative; z-index: 1; }
.cta-band p { font-size: .94rem; margin: 4px 0 0; opacity: .82; max-width: 56ch; }
.cta-band .btn-row { position: relative; z-index: 1; }
.cta-band .btn-cream:hover { background: var(--coffee-950); color: var(--cream-100); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.article-list { display: grid; gap: 14px; }
.article-row {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center;
  background: var(--coffee-800); border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 14px 18px;
  color: var(--text);
  transition: border-color var(--t-color), transform var(--t-card);
}
.article-row:hover { border-color: var(--copper-500); transform: translateX(4px); color: var(--text); }
.article-row .ar-date { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); }
.article-row h3 { font-size: 1rem; margin: 0 0 3px; }
.article-row p { font-size: .84rem; color: var(--text-3); margin: 0; }
.article-row .ar-go { color: var(--copper-400); }

/* 404 */
.err-code {
  font-family: var(--font-mono); font-size: clamp(3.4rem, 12vw, 6rem);
  color: var(--copper-500); line-height: 1; text-shadow: 0 0 40px rgba(184, 115, 51, .35);
}

/* --------------------------------------------------------- tool exhibit */

.exhibit-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--coffee-950);
}
.exhibit-bar .stage-pill { margin-bottom: 0; }
.exhibit-frame.is-3d .exhibit-hint { display: none; }
.exhibit-overlay-note {
  position: absolute; inset: auto 10px 10px auto; z-index: 5;
  font-size: .72rem; color: var(--text-3);
  background: rgba(14, 10, 8, .8); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 3px 8px;
}

/* `hidden` must beat any display rule, or a toggled element stays visible.
   This is the trap recorded in the sibling projects: setting `display` on an
   element silently defeats the browser's own [hidden] { display: none }. */
.studio-fallback[hidden],
.compare-bar[hidden],
.cmp-panel[hidden],
.empty-state[hidden],
[data-filter-empty][hidden] { display: none !important; }

/* `.card` is `display:flex` and table rows carry their own display, so the
   filter engine's `el.hidden = true` would be silently ignored on both. The
   tools overview, every category page and the database table all depend on
   this guard. */
.card[hidden],
.data-table tbody tr[hidden] { display: none !important; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .studio-layout { grid-template-columns: 1fr 300px; }
}

@media (max-width: 1000px) {
  :root { --gutter: 18px; }
  .coaster { padding: 0 16px; font-size: .76rem; }
  .split-wide { grid-template-columns: 320px 1fr; gap: 26px; }
  .split-side { grid-template-columns: 1fr; gap: 26px; }
  .post-side { position: static; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .studio-band-inner { grid-template-columns: 1fr; }
  .studio-layout { grid-template-columns: 1fr; }
  .studio-side { position: static; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .split-wide { grid-template-columns: 1fr; }
  .exhibit { position: static; }
  .featured-post { grid-template-columns: 1fr; }

  /* coasters fold into the drawer */
  .coasternav { display: none; }
  .nav-toggle { display: grid; }
  :root { --header-h: var(--brandbar-h); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --sec: 44px; }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .hero { height: 460px; }
  .hero-arrow { display: none; }
  .sc-readout { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: 6px; }
  .footer-disclaimer { flex-direction: column; gap: 10px; }
  .studio-stage-wrap { min-height: 300px; aspect-ratio: 4 / 3; }
  .thumbs { grid-template-columns: repeat(2, 1fr); }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .pn-next { text-align: left; }
  .to-top { right: 14px; bottom: 14px; }
  .filter-field { flex: 1 1 100%; min-width: 0; }
}

/* ------------------------------------------------------------ motion off */

@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, .quote-card:hover, .qa-card:hover, .featured-post:hover { transform: none; }
  .coaster.is-active { transform: none; }
  .btn-brew .steam i { animation: none; opacity: .4; }
}

/* --------------------------------------------------------------- print */

@media print {
  .site-header, .site-footer, .to-top, .studio-side, .read-progress { display: none !important; }
  body { background: #fff; color: #111; }
}