/* ==========================================================================
   Ink & Bind — letterpress & hand bookbinding tools and knowledge
   Single stylesheet. Retro print-shop cream theme: cream paper ground, ink
   black text, foil red for emphasis. No external fonts, no CDN, no images
   beyond the generated SVG data URIs.

   Section map
     01 tokens          06 search layer     11 notices
     02 reset / base    07 buttons          12 page hero
     03 typography      08 cards            13 tool detail
     04 layout          09 tags & badges    14 listings
     05 header / rack   10 steps            15 calculators
     16 studio          17 database         18 blog
     19 content pages   20 footer           21 motion / print / responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* the three primaries */
  --paper-50: #F4EDE0;   /* main ground */
  --ink-900: #1A1613;    /* text, footer */
  --red-500: #B83A2E;    /* emphasis, CTA */

  /* cream ramp */
  --paper-100: #FBF7EF;
  --paper-200: #F4EDE0;
  --paper-300: #EBE2D2;
  --paper-400: #DFD4C0;
  --paper-500: #CEC0A8;
  --paper-600: #B8A88C;
  --paper-700: #9C8C70;

  /* ink ramp */
  --ink-950: #0A0806;
  --ink-900: #1A1613;
  --ink-800: #2A2420;
  --ink-700: #3D3630;
  --ink-600: #5A5048;
  --ink-500: #7A6E62;
  --ink-400: #9C8E80;

  /* foil red ramp */
  --red-900: #5C1A14;
  --red-800: #8A2A20;
  --red-500: #B83A2E;
  --red-400: #D05648;
  --red-300: #E08878;
  --red-200: #F0C0B8;
  --red-100: #FAE0DC;

  /* navy — links and informational notes */
  --navy-900: #1E2A3C;
  --navy-800: #2E4058;
  --navy-600: #4A6488;
  --navy-400: #7A94B8;
  --navy-200: #C4D4E8;
  --navy-100: #E8EFF6;

  /* gold — the third accent, used sparingly */
  --gold-800: #8A6A10;
  --gold-600: #B8901A;
  --gold-500: #D9A82C;
  --gold-400: #E8C060;
  --gold-300: #F5DFA0;
  --gold-100: #FBF0D0;

  /* semantic */
  --ok-500: #4A6B4A;
  --ok-100: #E4EDE2;
  --warn-500: #B8901A;
  --danger-500: #B83A2E;
  --info-500: #4A6488;

  /* text roles */
  --text: #1A1613;
  --text-2: #5A5048;
  --text-3: #7A6E62;
  --text-on-dark: #F4EDE0;
  --text-on-dark-2: #CEC0A8;

  /* lines */
  --line: #DFD4C0;
  --line-strong: #CEC0A8;
  --line-ink: #1A1613;

  /* surfaces */
  --surface: #FBF7EF;
  --surface-2: #F4EDE0;
  --surface-3: #EBE2D2;
  --surface-dark: #0A0806;

  /* paper fibre texture and ink bleed — both are generated, never fetched */
  --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  --tex-bleed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.4' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23b)' opacity='0.5'/%3E%3C/svg%3E");

  /* radii — 2px small parts, 6px cards, 12px CTA blocks, pills */
  --r-xs: 2px;
  --r-card: 6px;
  --r-block: 12px;
  --r-pill: 999px;

  /* warm paper shadows */
  --sh-xs: 0 1px 2px rgba(26, 22, 19, .06);
  --sh-sm: 0 2px 4px rgba(26, 22, 19, .08);
  --sh-md: 0 4px 10px rgba(26, 22, 19, .09);
  --sh-lg: 0 12px 28px rgba(26, 22, 19, .11);

  /* transitions */
  --t-fast: .14s ease;
  --t-card: .26s ease;

  /* type stacks — all resolve to locally installed faces */
  --ff-display: "Playfair Display", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --ff-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "JetBrains Mono", Consolas, Menlo, "Courier New", monospace;

  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1360px;
  --gutter: 22px;
}

/* ------------------------------------------------------------ 02 reset/base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper-50);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* the paper fibre sits behind everything and never intercepts a click */
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--tex-fibre);
  opacity: .03;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

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

a { color: var(--navy-800); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--red-800); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--red-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

::selection { background: var(--red-200); color: var(--ink-900); }

/* A card is display:flex and a grid child is display:grid, both of which beat
   the user agent's own [hidden] rule — so the filter and pagination engines,
   which hide items with the hidden attribute, would leave everything on
   screen. This makes the attribute mean what it says. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  /* Anchored explicitly. With auto offsets an absolutely positioned span keeps
     its static position — and one sitting inside a 627px table lands 550px to
     the right, extending the page's scroll width even though the element is
     clipped and invisible. That is what made the database page scroll sideways
     on a phone. */
  left: 0; top: 0;
  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;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 400;
  background: var(--ink-900);
  color: var(--paper-100);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; color: var(--paper-100); }

/* ------------------------------------------------------------ 03 typography */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
h4 { font-size: 1.08rem; }
h5 { font-size: 1rem; }

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

strong, b { font-weight: 700; color: var(--ink-900); }
em { font-style: italic; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-2);
  max-width: 68ch;
  line-height: 1.68;
}

.small { font-size: .86rem; }
.muted { color: var(--text-2); }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: 10px;
}
.eyebrow::before { content: "\2766"; margin-right: .5em; }

/* mono is reserved for parameters: sizes, weights, page counts, ink volumes */
.mono, code, kbd, samp, pre { font-family: var(--ff-mono); font-size: .88em; }
code {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--ink-800);
}
pre {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; }

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--red-300);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-800);
}
blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-body);
  font-size: .82rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* prose links carry a foil-red rule */
.prose a, .post-body a, .card-text a {
  text-decoration: underline;
  text-decoration-color: var(--red-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover, .post-body a:hover { text-decoration-color: var(--red-500); }

/* ---------------------------------------------------------------- 04 layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: var(--container-wide); }

.section { padding: 60px 0; }
.section-sm { padding: 38px 0; }
.section-tight { padding: 42px 0 60px; }
.section-flush-top { padding-top: 0; }

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

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.flex-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-sm > * + * { margin-top: 10px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 22px; }
.mt-4 { margin-top: 34px; } .mt-5 { margin-top: 48px; }
.mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 22px; }
.center { text-align: center; }

.section-head { margin-bottom: 26px; max-width: 74ch; }
.section-head p { color: var(--text-2); margin: 0; }
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.section-head-row .section-head { margin-bottom: 0; }

/* --------------------------------------------------------- 05 header / rack
   The one thing no other site in this set has: a working type rack as the
   primary navigation. Row one is brand + search + menu; row two is a
   horizontally scrollable rail of type blocks.                               */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper-200);
}

/* --- row one ------------------------------------------------------------- */
.hd-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  transition: height var(--t-card);
}
.site-header.is-condensed .hd-inner { height: 48px; }

.hd-logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.hd-logo:hover { color: inherit; }
.hd-logo-mark {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--ink-900);
  border-radius: var(--r-xs);
}
.hd-logo-mark svg { width: 20px; height: 20px; }
.hd-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.hd-logo-name {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.hd-tagline {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--red-500);
  margin-top: 2px;
  transition: opacity var(--t-card);
}
.site-header.is-condensed .hd-tagline { opacity: 0; }

.hd-search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.hd-search-form { position: relative; width: 200px; transition: width var(--t-card); }
.hd-search-form:focus-within { width: 260px; }
.hd-search-form input {
  width: 100%;
  height: 34px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper-100);
  font-size: .84rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hd-search-form input::placeholder { color: var(--text-3); }
.hd-search-form input:focus {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px var(--red-100);
  outline: none;
}
.hd-search-form .hd-search-ico {
  position: absolute; right: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-3);
  pointer-events: none;
}
/* live results hang off the header field, not a full-screen overlay */
.hd-results {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  width: 380px;
  max-height: 62vh;
  overflow-y: auto;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  z-index: 210;
}
.hd-results[hidden] { display: none; }

.hd-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hd-studio-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px;
  border: 1px solid var(--red-500);
  border-radius: var(--r-pill);
  color: var(--red-500);
  background: transparent;
  font-size: .8rem; font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
.hd-studio-btn svg { width: 15px; height: 15px; }
.hd-studio-btn:hover { background: var(--red-500); color: var(--paper-100); }

.hd-burger {
  width: 38px; height: 38px;
  display: none;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-100);
  color: var(--ink-900);
}
.hd-burger svg { width: 19px; height: 19px; }
.hd-burger:hover { border-color: var(--ink-900); }

/* --- row two: the type rack --------------------------------------------- */
.rack {
  background: var(--paper-300);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  height: 44px;
  display: flex;
  align-items: stretch;
  position: relative;
}
/* the lead-type side face, drawn with a repeating gradient */
.rack-rail {
  flex: 0 0 36px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--paper-500) 0 1px,
      var(--paper-600) 1px 2px,
      var(--paper-400) 2px 7px),
    repeating-linear-gradient(0deg,
      rgba(26, 22, 19, .16) 0 1px,
      transparent 1px 9px);
  border-right: 1px solid var(--line-strong);
}
.rack-track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.rack-track::-webkit-scrollbar { display: none; }

/* each tag is a sort, not a link — hard corners, ink edge, paper face */
.rack-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-200);
  color: var(--ink-900);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.rack-tag:hover { background: var(--red-100); color: var(--red-800); }
.rack-tag[aria-current="page"],
.rack-tag.is-active {
  background: var(--red-500);
  color: var(--paper-100);
  border-color: var(--red-800);
  transform: translateY(-1px);
}
.rack-tag[aria-current="page"]::before,
.rack-tag.is-active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: var(--red-500);
}
.rack-tag .rt-count {
  font-family: var(--ff-mono);
  font-size: .68rem;
  opacity: .72;
}
.rack-fade {
  flex: 0 0 36px;
  background: linear-gradient(90deg, rgba(235, 226, 210, 0), var(--paper-300));
  pointer-events: none;
}

/* --- drawer (<=900px) ---------------------------------------------------- */
.hd-drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper-100);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-card);
}
.site-header.is-open .hd-drawer { max-height: 78vh; overflow-y: auto; }
.dw-inner { padding: 16px 0 24px; display: grid; gap: 2px; }
.dw-inner > a {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-900);
  font-weight: 600;
}
.dw-inner > a:hover { color: var(--red-800); }
.dw-group { border-bottom: 1px solid var(--line); }
.dw-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px;
  background: none; border: 0;
  color: var(--ink-900);
  font-weight: 600;
  text-align: left;
}
.dw-toggle svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.dw-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dw-panel { display: none; padding: 0 4px 12px 14px; }
.dw-toggle[aria-expanded="true"] + .dw-panel { display: grid; gap: 2px; }
.dw-panel a {
  padding: 8px 0;
  color: var(--text-2);
  font-size: .92rem;
  border-bottom: 1px dashed var(--line);
}
.dw-panel a:last-child { border-bottom: 0; }
.dw-panel a:hover { color: var(--red-800); }

/* ------------------------------------------------------------ 06 search layer */
.search-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 22, 19, .55);
  padding: 12vh 20px 20px;
  overflow-y: auto;
}
.search-layer[hidden] { display: none; }
.sl-inner { max-width: 660px; margin: 0 auto; }
.search-box {
  position: relative;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  display: flex; align-items: center;
  padding: 0 16px;
}
.search-box svg { width: 19px; height: 19px; color: var(--text-3); flex: 0 0 19px; }
.search-box input {
  flex: 1 1 auto;
  border: 0; background: none;
  padding: 17px 12px;
  font-size: 1.02rem;
  outline: none;
}
.search-results {
  margin-top: 14px;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  max-height: 62vh;
  overflow-y: auto;
}
.search-results:empty { display: none; }
.sr-item {
  display: block;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-900);
}
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover, .sr-item.is-cursor { background: var(--paper-300); color: var(--ink-900); }
.sr-kind {
  display: inline-block;
  font-size: .64rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-500);
  margin-right: 8px;
}
.sr-title { font-weight: 600; }
.sr-desc { display: block; font-size: .84rem; color: var(--text-2); margin-top: 2px; }
.sr-empty { padding: 18px; color: var(--text-2); }

/* the standalone search page reuses the search box without the overlay */
.search-page { max-width: 760px; margin: 0 auto; }
.search-page .search-box { box-shadow: var(--sh-sm); }
.search-page .search-results { box-shadow: var(--sh-sm); max-height: none; }
.search-page .sr-count {
  font-family: var(--ff-mono);
  font-size: .8rem;
  color: var(--text-2);
  margin: 14px 0 0;
  min-height: 1.2em;
}

/* ------------------------------------------------------------- 06b hero ---- */
.hero {
  position: relative;
  background: var(--paper-100);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-viewport {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
  display: flex;
  align-items: center;
}
.hero-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #FBF7EF 0%, rgba(244, 237, 224, .9) 46%, rgba(184, 58, 46, .15) 100%);
  z-index: 1;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 46px 0;
  width: 100%;
}
.hero-copy { max-width: 60ch; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--red-100);
  border: 1px solid var(--red-300);
  color: var(--red-800);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  margin-bottom: .45em;
}
/* Each slide carries its own headline, but a carousel must not emit three
   <h1>s — the real h1 is a visually-hidden line above the slides, and the
   slide headlines borrow its typography. */
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink-900);
  margin: 0 0 .45em;
}
.hero p { font-size: 1.02rem; color: var(--text-2); max-width: 56ch; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 22px; }
.hero-plate {
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--sh-md);
  position: relative;
}
.hero-plate img { width: 100%; border-radius: var(--r-xs); display: block; }
.hero-plate .hp-cap {
  font-family: var(--ff-mono);
  font-size: .76rem;
  color: var(--text-2);
  text-align: center;
  margin-top: 10px;
}
.hero-controls {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
.hero-controls > * { pointer-events: auto; }
.hero-dots { display: flex; align-items: center; gap: 9px; }
.hero-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper-500);
  transition: width var(--t-card), background var(--t-fast);
}
.hero-dot[aria-current="true"] { width: 44px; background: var(--red-500); }
.hero-arrow {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper-100);
  color: var(--ink-900);
}
.hero-arrow:hover { border-color: var(--red-500); color: var(--red-500); }
.hero-arrow svg { width: 16px; height: 16px; }

/* trust strip under the hero */
.trust-strip { background: var(--ink-900); color: var(--text-on-dark); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: 26px 0;
}
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--red-400); margin-top: 2px; }
.trust-item h3 {
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--paper-100);
  margin: 0 0 3px;
}
.trust-item p { font-size: .82rem; color: var(--gold-300); margin: 0; line-height: 1.55; }

/* the closing call to action band */
.cta-band {
  background: var(--ink-900);
  border-radius: var(--r-block);
  padding: 34px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(184, 58, 46, .18);
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-bleed);
  opacity: .06;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--paper-100); font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: .25em; }
.cta-band p { color: var(--text-on-dark-2); margin: 0; max-width: 62ch; }

/* ---------------------------------------------------------------- 07 buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn-primary { background: var(--red-500); color: var(--paper-100); }
.btn-primary:hover { background: var(--red-800); color: var(--paper-100); }
.btn-ink { background: var(--ink-900); color: var(--paper-100); }
.btn-ink:hover { background: var(--ink-700); color: var(--paper-100); }
.btn-outline {
  background: var(--paper-100);
  color: var(--ink-900);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--ink-900); color: var(--ink-900); }
.btn-ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(244, 237, 224, .38);
}
.btn-ghost:hover { background: rgba(244, 237, 224, .14); color: var(--text-on-dark); }
.btn-sm { padding: 8px 15px; font-size: .82rem; }
.btn-sm svg { width: 14px; height: 14px; flex: 0 0 14px; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* a button that reads as pressed into the paper */
.btn-letterpress { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sh-sm); }
.btn-letterpress:hover { box-shadow: inset 0 2px 5px rgba(10, 8, 6, .34); transform: translateY(1px); }

/* ----------------------------------------------------------------- 08 cards
   Every card is wrapped whole in a single <a> — the entire padded box is the
   hit area, not just the title. Nested interactive elements are forbidden;
   where one is genuinely needed the script stops propagation.               */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  color: var(--ink-900);
  transition: transform var(--t-card), box-shadow var(--t-card),
              border-color var(--t-card);
}
a.card, .card > a.card-link { cursor: pointer; }
.card:hover, a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--red-500);
  color: var(--ink-900);
}
.card:focus-visible {
  outline: 3px solid var(--red-500);
  outline-offset: 2px;
}
.card:active, a.card:active { transform: translateY(-1px); box-shadow: var(--sh-md); }

/* printer's registration marks in the corners — four L-shaped hairlines */
.card-marks::before, .card-marks::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border-color: var(--red-500);
  border-style: solid;
  opacity: 0;
  transition: opacity var(--t-card);
  z-index: 2;
  pointer-events: none;
}
.card-marks::before { top: 5px; left: 5px; border-width: 1px 0 0 1px; }
.card-marks::after { bottom: 5px; right: 5px; border-width: 0 1px 1px 0; }
.card-marks:hover::before, .card-marks:hover::after { opacity: 1; }

.card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-300);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-card);
}
.card:hover .card-media img { transform: scale(1.04); }
.card-media.is-contain img { object-fit: contain; padding: 12px; }
.card-media.is-16-9 { aspect-ratio: 16 / 9; }

.card-body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.card-title {
  font-family: var(--ff-display);
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.28;
}
.card-title a { color: inherit; }
/* the title link is a convenience for keyboard users only — the whole card
   is the real target, so it must not double up the tab order */
.card > a.card-link > .card-body .card-title a,
a.card .card-title a { pointer-events: none; }
.card-text { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.6; }
.card-foot {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .78rem;
  color: var(--text-2);
}
.card-arrow, .cat-arrow {
  color: var(--red-500);
  font-size: 1.02rem;
  transition: transform var(--t-card);
}
.card:hover .card-arrow, .card:hover .cat-arrow { transform: translateX(4px); }

/* category card — no image, a round ink icon block instead.
   Styled on .cat-icon itself rather than scoped to .cat-card: the calculator
   cards use the same mark, and while the rule was scoped they got no icon size
   at all and fell back to the 300x150 default. */
.cat-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--ink-900);
  color: var(--paper-100);
  border-radius: 50%;
  margin-bottom: 4px;
}
.cat-icon svg { width: 23px; height: 23px; }
.cat-count { font-family: var(--ff-mono); font-size: .78rem; color: var(--text-2); }

/* tool card — cream ground, line drawing, contained not cropped */
.tool-card .card-media { background: var(--paper-200); }

/* calculator card carries a miniature parameter strip */
.calc-mini {
  display: flex;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: .74rem;
  color: var(--text-2);
  background: var(--paper-300);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 7px 10px;
}
.calc-mini span + span { border-left: 1px solid var(--line-strong); padding-left: 8px; }

/* studio card — ink ground so the interactive set reads as a different class */
.studio-card { background: var(--ink-900); border-color: var(--ink-700); color: var(--text-on-dark); }
.studio-card:hover { border-color: var(--red-500); color: var(--text-on-dark); }
.studio-card .card-title { color: var(--text-on-dark); }
.studio-card .card-text { color: var(--text-on-dark-2); }
.studio-card .card-foot { border-top-color: rgba(244, 237, 224, .18); color: var(--text-on-dark-2); }
.studio-card .card-media { border-bottom-color: var(--ink-700); background: var(--ink-950); }
.studio-card .card-media img { background: var(--ink-950); }

/* type card — a sort of type as a card face, for the paper & type database */
.type-card { background: var(--paper-300); }
.type-card .tc-face {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  line-height: 1;
  padding: 20px 18px 6px;
  color: var(--ink-900);
}
.type-card .tc-face.is-mono { font-family: var(--ff-mono); font-size: 1.7rem; }

/* ---------------------------------------------------------- 09 tags & badges */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--paper-300);
  color: var(--ink-800);
  border: 1px solid transparent;
}
.tag-red { background: var(--red-100); color: var(--red-800); }
.tag-ink { background: var(--ink-900); color: var(--paper-100); }
.tag-navy { background: var(--navy-100); color: var(--navy-800); }
.tag-gold { background: var(--gold-100); color: var(--gold-800); }
.tag-ok { background: var(--ok-100); color: var(--ok-500); }
.tag-outline { background: transparent; border-color: var(--line-strong); color: var(--text-2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper-100);
  color: var(--ink-800);
  font-size: .8rem;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-100);
}

/* parameter marks — always mono, always on a cream chip with an ink hairline */
.param-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: .78rem;
  background: var(--paper-300);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  padding: 3px 8px;
  color: var(--ink-800);
}
.param-badge b { font-weight: 600; color: var(--text-2); }
.param-badge svg { width: 14px; height: 14px; flex: 0 0 14px; }

.badge-3d {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--red-500);
  color: var(--paper-100);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.badge-3d svg { width: 12px; height: 12px; }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok-500);
  flex: 0 0 8px;
}
.status-dot.is-warn { background: var(--warn-500); }
.status-dot.is-danger { background: var(--danger-500); }
.status-dot.is-idle { background: var(--ink-400); }

/* ------------------------------------------------------------------ 10 steps */
ol.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
}
ol.steps > li { position: relative; }
.step-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper-200);
  margin-bottom: 14px;
}
.step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-num {
  position: absolute;
  top: 10px; left: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper-100);
  font-family: var(--ff-mono);
  font-size: .84rem;
  font-weight: 700;
}
.step-kicker {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-500);
  display: block;
  margin-bottom: 4px;
}
ol.steps h3 { font-size: 1.1rem; margin-bottom: .3em; }
ol.steps p { font-size: .88rem; color: var(--text-2); margin: 0; }

/* --------------------------------------------------------------- 11 notices */
.notice {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper-300);
  font-size: .88rem;
  color: var(--ink-800);
}
.notice svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; }
.notice > div > *:last-child, .notice > p:last-child { margin-bottom: 0; }
.notice strong { display: block; margin-bottom: 2px; }
.notice-safety { background: var(--red-100); border-color: var(--red-300); color: var(--red-800); }
.notice-safety strong, .notice-safety a { color: var(--red-800); }
.notice-info { background: var(--navy-100); border-color: var(--navy-200); color: var(--navy-800); }
.notice-info strong { color: var(--navy-900); }
.notice-warn { background: var(--gold-100); border-color: var(--gold-400); color: var(--gold-800); }
.notice-neutral { background: var(--paper-300); border-color: var(--line-strong); }
.notice[hidden] { display: none; }

.tip-box {
  padding: 14px 18px;
  border-left: 4px solid var(--red-500);
  background: var(--paper-300);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: .9rem;
  margin: 22px 0;
}
.tip-box.is-tip { border-left-color: var(--red-500); }
.tip-box.is-warn { border-left-color: var(--gold-600); background: var(--gold-100); }
.tip-box.is-note { border-left-color: var(--navy-600); background: var(--navy-100); }
.tip-box.is-ok { border-left-color: var(--ok-500); background: var(--ok-100); }
.tip-box h4, .tip-box .tb-title {
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 5px;
  color: var(--ink-800);
}
.tip-box.is-warn .tb-title { color: var(--gold-800); }
.tip-box.is-note .tb-title { color: var(--navy-800); }
.tip-box.is-ok .tb-title { color: var(--ok-500); }
.tip-box p:last-child { margin-bottom: 0; }

.legal-note {
  background: var(--paper-300);
  border-left: 4px solid var(--ink-900);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 14px 18px;
  font-family: var(--ff-mono);
  font-size: .84rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.legal-note strong { color: var(--ink-900); }

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  padding: 40px 22px;
  text-align: center;
  color: var(--text-2);
  background: var(--paper-100);
}
.empty-state svg { width: 30px; height: 30px; color: var(--text-3); margin: 0 auto 10px; }

/* the strip that runs across any page touching lead, solvent or blades */
.safety-strip {
  background: var(--red-100);
  border-top: 1px solid var(--red-300);
  border-bottom: 1px solid var(--red-300);
}
.ss-inner {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding: 9px 0;
  font-size: .78rem;
  color: var(--red-800);
}
.ss-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ss-title svg { width: 16px; height: 16px; }
.ss-items { display: flex; gap: 18px; flex-wrap: wrap; }
.ss-items > span { display: inline-flex; align-items: center; gap: 6px; }
.ss-items svg { width: 14px; height: 14px; }

/* WebGL / canvas status readout on the studio pages */
.webgl-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  background: var(--paper-300);
  color: var(--text-2);
}
.webgl-status[data-state="loading"] { color: var(--text-3); }
.webgl-status[data-state="ready"] { color: var(--ok-500); border-color: var(--ok-500); }
.webgl-status[data-state="fallback"] { color: var(--gold-800); border-color: var(--gold-500); }
.webgl-status[data-state="error"] { color: var(--red-800); border-color: var(--red-500); }

/* -------------------------------------------------------------- 12 page hero */
.page-hero {
  background: var(--ink-900);
  border-bottom: 3px solid var(--red-500);
  padding: 40px 0 38px;
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tex-fibre);
  opacity: .05;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--paper-100); margin-bottom: .35em; }
.page-hero .lead { color: var(--text-on-dark-2); }
.page-hero .eyebrow { color: var(--red-400); }
.page-hero a { color: var(--paper-100); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  margin-bottom: 18px;
  color: var(--text-on-dark-2);
}
.breadcrumbs a { color: var(--text-on-dark-2); }
.breadcrumbs a:hover { color: var(--paper-100); }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs [aria-current="page"] { color: var(--paper-100); font-weight: 600; }

/* ------------------------------------------------------------ 13 tool detail */
.split-wide { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 34px; align-items: start; }
.split-side { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 38px; align-items: start; }

.exhibit {
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 18px;
  position: relative;
}
/* four corner registration marks around the exhibit plate */
.exhibit::before, .exhibit::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--red-500);
  border-style: solid;
  pointer-events: none;
}
.exhibit::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.exhibit::after { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }
.exhibit-stage {
  background: var(--paper-200);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.exhibit-stage img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.exhibit-caption {
  font-size: .78rem;
  color: var(--text-2);
  text-align: center;
  margin-top: 10px;
  font-family: var(--ff-mono);
}
.exhibit-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.exhibit-thumb {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper-200);
  padding: 4px;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.exhibit-thumb img { width: 100%; height: 100%; object-fit: contain; }
.exhibit-thumb:hover { border-color: var(--ink-900); }
.exhibit-thumb[aria-pressed="true"] { border-color: var(--red-500); border-width: 2px; }

.spec-table, .db-table, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  background: var(--paper-100);
}
.spec-table caption, .db-table caption, .data-table caption {
  text-align: left;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-500);
  padding-bottom: 8px;
}
.spec-table th, .spec-table td,
.db-table th, .db-table td,
.data-table th, .data-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th, .db-table th, .data-table th {
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--paper-300);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.spec-table td:first-child { font-weight: 600; color: var(--ink-900); width: 40%; }
.spec-table td:last-child { font-family: var(--ff-mono); font-size: .82rem; color: var(--ink-700); }
.data-table tbody tr:hover { background: var(--paper-200); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.table-wrap .spec-table, .table-wrap .db-table, .table-wrap .data-table { background: transparent; }

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--paper-300);
  border: 1px solid var(--line-strong);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-800);
}
.stage-pill .sp-n {
  font-family: var(--ff-mono);
  font-size: .72rem;
  color: var(--red-500);
  font-weight: 700;
}

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .89rem;
  color: var(--ink-800);
}
.check-list svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 4px; color: var(--red-500); }
.check-list.is-ok svg { color: var(--ok-500); }

/* --------------------------------------------------------------- 14 listings */
.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  margin-bottom: 22px;
}
/* The search field is shared by the filter bar and the database toolbar, so
   these rules are keyed on .fb-search itself. Scoping them to .filter-bar left
   the database's field and its icon completely unstyled — the icon rendered at
   its 300x150 default and the field became an 800px square. */
.fb-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.fb-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper-200);
  font-size: .86rem;
}
.fb-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-3); pointer-events: none;
}
.filter-bar select, .db-filter-row select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper-200);
  font-size: .86rem;
  min-width: 140px;
}
.fb-count { font-family: var(--ff-mono); font-size: .8rem; color: var(--text-2); margin-left: auto; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pagination button, .pagination a {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-100);
  color: var(--ink-800);
  font-family: var(--ff-mono);
  font-size: .84rem;
  padding: 0 10px;
}
.pagination button:hover, .pagination a:hover { border-color: var(--ink-900); color: var(--ink-900); }
.pagination [aria-current="page"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-100); }
.pagination button[disabled] { opacity: .4; pointer-events: none; }

.no-results { display: none; }
.no-results.is-shown { display: block; }

/* ------------------------------------------------------------ 15 calculators */
.calc-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.calc-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > label {
  font-family: var(--ff-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field input, .field select, .field textarea {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-100);
  font-size: .92rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { height: auto; padding: 11px 13px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px var(--red-100);
  outline: none;
}
.field .fh { font-size: .78rem; color: var(--text-3); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-error { font-size: .78rem; color: var(--red-800); }
.field.has-error input, .field.has-error select { border-color: var(--red-500); }

/* the result panel is deliberately ink-on-cream inverted */
.result-card {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-block);
  padding: 26px 24px;
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tex-bleed);
  opacity: .05;
  pointer-events: none;
}
.result-card > * { position: relative; z-index: 1; }
.rc-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-400);
}
.rc-hero {
  font-family: var(--ff-mono);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--red-400);
  margin: 6px 0 2px;
  word-break: break-word;
}
.rc-unit { font-size: .86rem; color: var(--text-on-dark-2); }
.rc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244, 237, 224, .16);
  border: 1px solid rgba(244, 237, 224, .16);
  border-radius: var(--r-card);
  margin-top: 20px;
  overflow: hidden;
}
.rc-cell { background: var(--ink-900); padding: 12px 14px; }
.rc-cell .rc-k {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-on-dark-2);
}
.rc-cell .rc-v {
  font-family: var(--ff-mono);
  font-size: 1.05rem;
  color: var(--paper-100);
  margin-top: 3px;
  word-break: break-word;
}
.rc-formula {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 237, 224, .18);
  font-family: var(--ff-mono);
  font-size: .78rem;
  color: var(--text-on-dark-2);
  line-height: 1.7;
}
.rc-formula strong { color: var(--paper-100); }

.gauge { display: grid; gap: 6px; }
.gg-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .78rem; color: var(--text-2);
}
.result-card .gg-head { color: var(--text-on-dark-2); }
.gg-track {
  height: 10px;
  background: var(--paper-400);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.result-card .gg-track { background: rgba(244, 237, 224, .18); }
.gg-fill {
  height: 100%;
  width: 0;
  background: var(--red-500);
  border-radius: var(--r-pill);
  transition: width var(--t-card), background var(--t-fast);
}
.gg-fill.is-ok { background: var(--ok-500); }
.gg-fill.is-warn { background: var(--gold-500); }
.gg-fill.is-danger { background: var(--red-500); }

/* --------------------------------------------------------------- 16 studio */
.studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: start;
}
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom: 0;
}
.st-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 3px;
}
.st-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.st-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper-200);
  color: var(--ink-800);
  font-size: .78rem;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.st-btn svg { width: 14px; height: 14px; }
.st-btn:hover { border-color: var(--ink-900); color: var(--ink-900); }
.st-btn.is-active, .st-btn[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-100);
}

.studio-canvas-wrap {
  position: relative;
  /* width must be explicit. With aspect-ratio set and width left to auto, the
     browser derives the *width* from the min-height instead of the height from
     the width — 340px tall at 4:3 becomes 453px wide, which overflows any
     phone-sized column. */
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--line-strong);
  border-radius: 0 0 var(--r-card) var(--r-card);
  aspect-ratio: 4 / 3;
  min-height: 340px;
  overflow: hidden;
}
.studio-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.sc-overlay {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: .72rem;
  font-family: var(--ff-mono);
  color: rgba(244, 237, 224, .62);
  pointer-events: none;
}
.sc-hud {
  position: absolute;
  right: 12px; top: 10px;
  font-family: var(--ff-mono);
  font-size: .74rem;
  line-height: 1.55;
  text-align: right;
  color: var(--paper-200);
  text-shadow: 0 1px 3px rgba(10, 8, 6, .85);
  pointer-events: none;
}
.studio-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--paper-200);
  overflow: hidden;
}
.studio-fallback.is-shown { display: block; }
.studio-fallback > img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px;
  opacity: .5;
}
.sf-body {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 430px);
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  padding: 20px 22px;
  text-align: center;
}
.sf-body h3 { font-size: 1.05rem; margin-bottom: .4em; }
.sf-body p { font-size: .84rem; color: var(--text-2); margin-bottom: 14px; }
.studio-canvas-wrap.has-fallback .sc-overlay,
.studio-canvas-wrap.has-fallback .sc-hud { display: none; }

.panel {
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.panel > h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-500);
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.panel > h3 svg { width: 15px; height: 15px; }
.panel:last-child { margin-bottom: 0; }

.ctrl { margin-bottom: 14px; }
.ctrl:last-child { margin-bottom: 0; }
.ct-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 5px; }
.ct-name { font-size: .82rem; font-weight: 600; color: var(--ink-800); }
.ct-val { font-family: var(--ff-mono); font-size: .78rem; color: var(--red-500); font-weight: 600; }
.ctrl input[type="range"] {
  width: 100%;
  height: 22px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
}
.ctrl input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; background: var(--paper-400); border-radius: var(--r-pill);
}
.ctrl input[type="range"]::-moz-range-track {
  height: 5px; background: var(--paper-400); border-radius: var(--r-pill);
}
.ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--red-500);
  border: 2px solid var(--paper-100);
  box-shadow: var(--sh-xs);
  cursor: pointer;
}
.ctrl input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--red-500);
  border: 2px solid var(--paper-100);
  cursor: pointer;
}
.ct-range {
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--text-3);
  margin-top: 2px;
}
.ctrl select, .ctrl input[type="number"], .ctrl input[type="text"] {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-200);
  font-size: .86rem;
}
.ctrl select:focus, .ctrl input:focus { border-color: var(--red-500); outline: none; }

.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; }
.ro { background: var(--paper-200); padding: 9px 11px; }
.ro-k { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ro-v { font-family: var(--ff-mono); font-size: .92rem; color: var(--ink-900); font-weight: 600; margin-top: 2px; word-break: break-word; }

.sf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .87rem; color: var(--ink-800); }
.sf-list li svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 4px; color: var(--red-500); }
ol.sf-list { counter-reset: sfl; }
ol.sf-list li::before {
  counter-increment: sfl;
  content: counter(sfl);
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--paper-100);
  background: var(--ink-900);
  width: 19px; height: 19px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 19px;
  margin-top: 3px;
}

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 250px; overflow-y: auto; }
.event-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .84rem;
  padding: 9px 11px;
  border-radius: var(--r-xs);
  background: var(--paper-200);
  border-left: 3px solid var(--ink-400);
  color: var(--ink-800);
}
.event-list li.is-ok { border-left-color: var(--ok-500); background: var(--ok-100); }
.event-list li.is-warn { border-left-color: var(--gold-500); background: var(--gold-100); }
.event-list li.is-danger { border-left-color: var(--red-500); background: var(--red-100); }
.event-list li .ev-time { font-family: var(--ff-mono); font-size: .72rem; color: var(--text-3); flex: 0 0 auto; }

.studio-note {
  display: flex; gap: 13px;
  padding: 16px 18px;
  background: var(--navy-100);
  border: 1px solid var(--navy-200);
  border-radius: var(--r-card);
  margin-bottom: 24px;
  font-size: .89rem;
  color: var(--navy-800);
}
.studio-note svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
.studio-note p { margin: 0; }
.studio-note strong { color: var(--navy-900); }

.studio-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.studio-feature .sf-list { margin-top: 2px; }
.studio-feature .sf-list li { color: var(--text-on-dark-2); font-size: .82rem; }

.perf-note {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--paper-300);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  font-size: .87rem;
  color: var(--text-2);
}
.perf-note strong { color: var(--ink-900); }

/* the home page preview block */
.studio-preview {
  background: var(--ink-900);
  border-radius: var(--r-block);
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.studio-preview::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-bleed);
  opacity: .05;
  pointer-events: none;
}
.studio-preview > * { position: relative; z-index: 1; }
.studio-stage {
  position: relative;
  /* same trap as .studio-canvas-wrap: aspect-ratio plus min-height with an auto
     width sizes the box from its height, not its column */
  width: 100%;
  background: var(--ink-950);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-card);
  aspect-ratio: 16 / 10;
  min-height: 260px;
  overflow: hidden;
}
.studio-stage canvas { display: block; width: 100%; height: 100%; }
.studio-preview h2 { color: var(--paper-100); font-size: clamp(1.3rem, 2.3vw, 1.75rem); }
.studio-preview p { color: var(--text-on-dark-2); font-size: .92rem; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.sp-links { display: grid; gap: 7px; margin-top: 16px; }
.sp-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(244, 237, 224, .22);
  border-radius: var(--r-card);
  color: var(--paper-200);
  font-size: .86rem;
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sp-link:hover { background: rgba(244, 237, 224, .1); border-color: var(--red-500); color: var(--paper-100); }
.sp-link .sp-arrow { color: var(--red-400); }
.sp-link:hover .sp-arrow { transform: translateX(3px); }

/* --- pieces the studio modules reach for, added with the generator -------- */

/* the canvas column has to be allowed to shrink, or the canvas forces the
   grid track wider than its share and the panel is pushed off screen */
.studio-main { min-width: 0; }

/* loading skeleton — shown by mountStudio while the 3D library downloads and
   cleared once the first frame is actually up */
.studio-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  gap: 12px;
  background: var(--ink-950);
  color: var(--text-on-dark-2);
  font-family: var(--ff-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 3;
}
.studio-loading.is-shown { display: grid; }
.studio-loading span {
  display: block;
  width: 128px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-800);
  overflow: hidden;
  position: relative;
}
.studio-loading span::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42%;
  border-radius: var(--r-pill);
  background: var(--red-500);
  animation: ink-sweep 1.15s ease-in-out infinite;
}
@keyframes ink-sweep {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-loading span::after { animation: none; width: 100%; }
}

/* the step guide — the next action is lit, finished steps are ticked */
.step-guide {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 7px;
  counter-reset: sg;
}
.step-guide li {
  counter-increment: sg;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 11px;
  border-radius: var(--r-xs);
  background: var(--paper-200);
  border-left: 3px solid var(--line-strong);
  font-size: .85rem;
  color: var(--text-2);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.step-guide li::before {
  content: counter(sg);
  font-family: var(--ff-mono);
  font-size: .72rem; font-weight: 700;
  color: var(--paper-100);
  background: var(--ink-400);
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 2px;
}
.step-guide li.is-active {
  background: var(--red-100);
  border-left-color: var(--red-500);
  color: var(--red-800);
}
.step-guide li.is-active::before { background: var(--red-500); }
.step-guide li.is-done { color: var(--text-3); }
.step-guide li.is-done::before { background: var(--ok-500); content: "\2713"; }

/* the type tray — click or drag a sort onto the composing stick */
.type-tray {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px 14px;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.glyph-btn {
  min-width: 30px; height: 32px;
  padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-300);
  border: 1px solid var(--line-strong);
  border-top-color: var(--paper-500);
  border-radius: var(--r-xs);
  font-family: var(--ff-mono);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-800);
  box-shadow: inset 0 -2px 0 rgba(26, 22, 19, .1);
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.glyph-btn:hover { background: var(--red-100); color: var(--red-800); }
.glyph-btn:active { transform: translateY(1px); box-shadow: none; }
.glyph-btn.is-wide { min-width: 72px; font-size: .7rem; letter-spacing: .06em; }

/* the 2D proof plate on the type composition page */
.proof-wrap {
  background: var(--paper-300);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 10px;
}
.proof-wrap canvas {
  display: block;
  width: 100%;
  border-radius: var(--r-xs);
  background: var(--paper-100);
}

/* the copy-out field on the type composition page */
.copy-area {
  width: 100%;
  min-height: 76px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-200);
  font-family: var(--ff-mono);
  font-size: .82rem;
  line-height: 1.5;
  resize: vertical;
}

/* the featured article is a grid, so hiding it needs a rule of its own */
.is-filtered-out { display: none !important; }

/* -------------------------------------------------------------- 17 database */
.db-filters { display: grid; gap: 14px; margin-bottom: 20px; }
.db-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.db-filter-row > span {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  min-width: 78px;
}
.db-row-detail td { background: var(--paper-200); }
.db-row-detail .drd-inner { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.db-expand {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--paper-200);
  color: var(--ink-800);
}
.db-expand svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.db-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.compare-tray {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: var(--ink-900);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-on-dark);
  box-shadow: 0 -6px 22px rgba(26, 22, 19, .18);
}
.compare-tray[hidden] { display: none; }
.compare-tray .ct-title {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-400);
}
.compare-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(244, 237, 224, .28);
  border-radius: var(--r-pill);
  font-size: .78rem;
  color: var(--paper-200);
  background: none;
}
.compare-chip:hover { border-color: var(--red-500); color: var(--paper-100); }

/* ------------------------------------------------------------ 18 blog */
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 34px;
  transition: box-shadow var(--t-card), border-color var(--t-card);
}
.featured-post:hover { box-shadow: var(--sh-lg); border-color: var(--red-500); }
.featured-post .fp-media { min-height: 300px; background: var(--paper-300); }
.featured-post .fp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-post .fp-body { padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.featured-post h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 0; }
.featured-post .fp-excerpt { color: var(--text-2); font-size: .94rem; margin: 0; }

.blog-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .78rem; color: var(--text-2);
}
.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

.post-hero { background: var(--ink-900); border-bottom: 3px solid var(--red-500); padding: 42px 0 38px; color: var(--text-on-dark); position: relative; overflow: hidden; }
.post-hero::after { content: ""; position: absolute; inset: 0; background-image: var(--tex-fibre); opacity: .05; pointer-events: none; }
.post-hero .container { position: relative; z-index: 1; }
.post-hero h1 { color: var(--paper-100); font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.post-hero .blog-meta { color: var(--text-on-dark-2); }
.post-hero a { color: var(--paper-100); }

.post-figure { margin: 26px 0; }
.post-figure img {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper-200);
  display: block;
}
.post-figure figcaption {
  font-size: .8rem;
  color: var(--text-2);
  margin-top: 8px;
  font-family: var(--ff-mono);
}

.post-body { font-size: 1.02rem; }
.post-body h2 { margin-top: 1.9em; }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { margin-top: 1.5em; }
.post-body ul, .post-body ol { padding-left: 22px; margin: 0 0 1.1em; }
.post-body li { margin-bottom: .5em; }
.post-body table { margin: 24px 0; }

.step-block { display: grid; gap: 18px; margin: 26px 0; }
.step-block .sb-item { display: flex; gap: 14px; align-items: flex-start; }
.step-block .sb-num {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-300);
  border: 1px solid var(--line-strong);
  font-family: var(--ff-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--red-500);
}
.step-block .sb-body h3, .step-block .sb-body h4 { font-size: 1.02rem; margin: 0 0 .3em; }
.step-block .sb-body p { font-size: .93rem; color: var(--text-2); margin: 0; }

.toc {
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.toc h2, .toc h3 {
  font-family: var(--ff-body);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--red-500);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 9px;
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.45;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--ff-mono);
  font-size: .74rem;
  color: var(--red-500);
  flex: 0 0 auto;
}
.toc a:hover { color: var(--red-800); }

.sidebar { position: sticky; top: 78px; display: grid; gap: 16px; }

.author-box {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.author-box .ab-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper-100);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
}
.author-box h3 { font-size: .95rem; margin: 0 0 2px; }
.author-box .ab-role { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--red-500); font-weight: 700; }
.author-box p { font-size: .84rem; color: var(--text-2); margin: 8px 0 0; }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.post-nav a {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper-100);
  transition: border-color var(--t-fast), transform var(--t-card);
}
.post-nav a:hover { border-color: var(--red-500); transform: translateY(-3px); }
.post-nav .pn-dir {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-500);
  display: block; margin-bottom: 4px;
}
.post-nav .pn-title { font-weight: 600; color: var(--ink-900); font-size: .92rem; }
.post-nav .pn-next { text-align: right; }

.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--red-500);
  z-index: 250;
  transition: width .08s linear;
}
.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper-100);
  color: var(--ink-900);
  box-shadow: var(--sh-md);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-card), transform var(--t-card);
}
.to-top.is-shown { opacity: 1; pointer-events: auto; }
.to-top:hover { border-color: var(--red-500); color: var(--red-500); }
.to-top svg { width: 18px; height: 18px; }

/* -------------------------------------------------------- 19 content pages */
.info-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prose-block { max-width: 72ch; }
.prose-block h2 { margin-top: 1.8em; }
.prose-block h2:first-child { margin-top: 0; }

.form-card {
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid;
  gap: 16px;
}
.form-card .fc-msg { font-size: .86rem; }
.form-card .fc-msg.is-ok { color: var(--ok-500); }
.form-card .fc-msg.is-err { color: var(--red-800); }

/* ------------------------------------------------------------------ 20 footer */
.site-footer {
  background: var(--ink-950);
  color: var(--text-on-dark-2);
  margin-top: 60px;
  border-top: 3px solid var(--red-500);
}
.ft-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 34px;
  padding: 48px 0 34px;
}
.ft-brand p { font-size: .87rem; line-height: 1.7; margin: 14px 0; }
.ft-logo { display: flex; align-items: center; gap: 10px; }
.ft-logo-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--paper-100);
  border-radius: var(--r-xs);
}
.ft-logo-mark svg { width: 19px; height: 19px; }
.ft-logo-name { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 700; color: var(--paper-100); }
.ft-icons { display: flex; gap: 10px; margin: 16px 0; }
.ft-icons svg { width: 19px; height: 19px; color: var(--red-400); }
.ft-version { font-family: var(--ff-mono); font-size: .74rem; color: var(--ink-400); }

.ft-col h4 {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-100);
  margin: 0 0 12px;
}
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft-col a { font-size: .87rem; color: var(--text-on-dark-2); }
.ft-col a:hover { color: var(--paper-100); }

.ft-sub { margin-top: 18px; }
.ft-sub label { display: block; font-size: .74rem; color: var(--text-on-dark-2); margin-bottom: 7px; }
.ft-sub-row { display: flex; gap: 8px; }
.ft-sub-row input {
  flex: 1 1 auto; min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-xs);
  background: var(--ink-900);
  color: var(--paper-100);
  font-size: .84rem;
}
.ft-sub-row input::placeholder { color: var(--ink-400); }
.ft-sub-row input:focus { border-color: var(--red-500); outline: none; }
.fs-msg { font-size: .78rem; margin: 7px 0 0; min-height: 1em; }
.fs-msg.is-ok { color: #8FBE8C; }
.fs-msg.is-err { color: var(--red-300); }

.ft-safety {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--red-800);
  border-radius: var(--r-card);
  background: rgba(184, 58, 46, .07);
  margin-bottom: 30px;
}
.ft-safety .fs-ico { flex: 0 0 34px; }
.ft-safety .fs-ico svg { width: 30px; height: 30px; color: var(--red-400); }
.ft-safety h4 {
  font-family: var(--ff-body);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-400);
  margin: 0 0 8px;
}
.ft-safety p { font-size: .85rem; margin: 0 0 10px; }
.ft-safety ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ft-safety li { font-size: .84rem; line-height: 1.65; }
.ft-safety strong { color: var(--paper-100); }
.ft-safety .small { color: var(--ink-400); margin-top: 12px; margin-bottom: 0; }

.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0 26px;
  border-top: 1px solid var(--ink-800);
  font-size: .8rem;
}
.ft-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.ft-animal {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--text-on-dark-2);
}
.ft-animal svg { width: 13px; height: 13px; color: var(--red-400); }

/* ------------------------------------------------- 21 motion / print / mq */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .post-nav a:hover, .card:hover .card-media img { transform: none; }
}

/* --- 1080px: four-column grids drop to two ------------------------------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-shell { grid-template-columns: minmax(0, 1fr) 320px; }
  .ft-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
  .ft-col:last-child { grid-column: 1 / -1; }
}

/* --- 1000px: the rack tightens ------------------------------------------- */
@media (max-width: 1000px) {
  .rack-tag { padding: 8px 12px; font-size: .76rem; }
  .hd-search-form { width: 170px; }
  .hd-search-form:focus-within { width: 210px; }
}

/* --- 900px: hamburger takes over, the rack folds into it ----------------- */
@media (max-width: 900px) {
  .hd-burger { display: grid; }
  .hd-studio-btn { display: none; }
  .rack { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-wide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .split-side { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sidebar { position: static; }
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .studio-shell { grid-template-columns: minmax(0, 1fr); }
  .studio-preview { grid-template-columns: minmax(0, 1fr); }
  .featured-post { grid-template-columns: minmax(0, 1fr); }
  .featured-post .fp-media { min-height: 220px; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-col:last-child { grid-column: auto; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-viewport { min-height: 520px; }
  .hero-plate { display: none; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* --- 640px: single column, tighter gutter -------------------------------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .container { padding: 0 16px; }
  .section { padding: 42px 0; }
  .section-sm { padding: 28px 0; }
  .section-tight { padding: 30px 0 42px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  ol.steps { grid-template-columns: minmax(0, 1fr); }
  .hd-search { display: none; }
  .page-hero { padding: 30px 0 28px; }
  .rc-grid { grid-template-columns: minmax(0, 1fr); }
  .readout { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav .pn-next { text-align: left; }
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .exhibit-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-block .sb-num { width: 42px; height: 42px; flex-basis: 42px; font-size: .9rem; }
  .studio-preview { padding: 18px; }
  .filter-bar { padding: 12px; }
  .fb-count { margin-left: 0; }
  /* the database toolbar stacks on a phone: a 78px label plus a 180px minimum
     search field plus a 140px select cannot share a 388px row */
  .db-filter-row > span { flex: 0 0 100%; min-width: 0; }
  .fb-search { flex: 1 1 100%; min-width: 0; }
  .filter-bar select, .db-filter-row select { flex: 1 1 100%; min-width: 0; }
  .hero-viewport { min-height: 460px; }
  .hero-inner { padding: 32px 0; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-band { padding: 24px 20px; }
  .hd-results { width: calc(100vw - 32px); left: -8px; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  body::before, .site-header, .hd-drawer, .search-layer, .to-top,
  .read-progress, .safety-strip, .compare-tray, .site-footer nav { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .post-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .page-hero h1, .post-hero h1 { color: #000; }
  .card, .panel, .result-card { break-inside: avoid; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
}