/* ==========================================================================
   Fret & String — design system
   Deep rosewood ground · rosette gold as the primary colour ·
   string silver as the accent. Wood grain, string reflection and a
   fret-wire line running through the header, cards and dividers.

   1  tokens          6  header         11  tags & badges    16  blog
   2  reset & base    7  buttons        12  page templates   17  notices
   3  typography      8  cards          13  tools & DB       18  footer
   4  layout          9  hero           14  calculators      19  3D studio
   5  textures       10  steps          15  forms            20  responsive
   ========================================================================== */

/* ============================================================ 1. TOKENS */
:root {
  /* rosewood — the ground */
  --rosewood-950: #0A0806;
  --rosewood-900: #150C08;
  --rosewood-800: #2A1810;
  --rosewood-700: #3A2418;
  --rosewood-600: #4A3020;
  --rosewood-500: #5C3E2A;
  --rosewood-400: #7A5238;
  --rosewood-300: #9A6E4C;

  /* rosette gold — the primary colour */
  --rosette-900: #2E2410;
  --rosette-800: #4A3A14;
  --rosette-700: #8A6E28;
  --rosette-600: #B08C3C;
  --rosette-500: #C9A961;
  --rosette-400: #D8BC80;
  --rosette-300: #E8D0A8;
  --rosette-200: #F2E2C4;
  --rosette-100: #FAF0DC;

  /* string silver — the accent */
  --string-900: #2A2A2A;
  --string-800: #4A4A4A;
  --string-700: #6B6B6B;
  --string-600: #8A8A8A;
  --string-500: #A8A8A8;
  --string-400: #C0C0C0;
  --string-300: #D8D8D8;
  --string-200: #F0F0F0;

  /* ebony — fretboards and the deepest ground */
  --ebony-900: #0A0806;
  --ebony-800: #1A1410;
  --ebony-700: #2A2018;
  --ebony-600: #3A2E24;

  /* amber — finish and warm accents */
  --amber-900: #3A2808;
  --amber-700: #7A5210;
  --amber-500: #B07818;
  --amber-400: #D4A040;
  --amber-300: #E8C070;
  --amber-200: #F2DCA8;

  /* warm text */
  --cream-500: #F0E8DC;
  --cream-400: #E4D8C4;
  --cream-300: #D4C4A8;
  --cream-200: #C4B090;
  --cream-100: #A89478;

  /* near-white highlights */
  --feather-500: #F7F2E8;
  --feather-400: #EDE4D4;
  --feather-300: #D8CCB8;

  /* tonal green — success and structural margin */
  --moss-900: #24361F;
  --moss-700: #3E5A38;
  --moss-600: #4A6E44;
  --moss-500: #5A8A5A;
  --moss-400: #7AA878;
  --moss-300: #8AAE88;
  --moss-100: #C2D8C0;

  /* semantic */
  --ok: #5A8A5A;
  --warn: #D4A040;
  --danger: #C44A3A;
  --info: #4A6C8C;

  /* surfaces & text */
  --bg: var(--rosewood-800);
  --bg-deep: var(--rosewood-900);
  --surface: var(--rosewood-700);
  --surface-2: var(--rosewood-600);
  --surface-3: var(--rosewood-500);
  --text: var(--cream-500);
  --text-2: var(--cream-200);
  --text-3: #8A7860;
  --border: var(--rosewood-600);
  --border-strong: var(--rosewood-500);
  --border-gold: var(--rosette-800);
  --border-string: var(--string-700);

  /* radii — 2px small parts, 10px cards (spec), 16px CTA, 999px pills */
  --r-xs: 2px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* shadows — black over deep rosewood, with a gold lift on the active edge */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .45);
  --sh-md: 0 6px 18px rgba(0, 0, 0, .5);
  --sh-lg: 0 16px 44px rgba(0, 0, 0, .6);
  --glow-gold: 0 0 16px rgba(201, 169, 97, .3);
  --glow-string: 0 0 12px rgba(192, 192, 192, .25);
  --inset-press: inset 0 -2px 4px rgba(0, 0, 0, .3);

  /* motion */
  --t-fast: .14s ease;
  --t: .28s ease;
  --t-spring: .4s cubic-bezier(.34, 1.2, .64, 1);

  /* type */
  --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;

  /* layout */
  --container: 1200px;
  --container-narrow: 820px;
  --container-wide: 1360px;
  --gutter: 22px;
  --sec: 60px;
  --sec-sm: 38px;

  /* header rows */
  --h-brand: 36px;
  --h-fret: 48px;
  --h-fret-scrolled: 44px;
  --wire: 2px;
}

/* ===================================================== 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

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

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

/* Every illustration is an <img> in a sized container. Without an explicit
   sizing rule the container collapses and the drawing is invisible. */
.card-media img,
.cat-media img,
.tool-media img,
.post-media img,
.studio-thumb img,
.step-media img,
.hero-slide img,
.guitar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a { color: var(--rosette-400); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--rosette-300); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

::selection { background: rgba(201, 169, 97, .28); color: var(--feather-500); }

:focus-visible {
  outline: 2px solid var(--rosette-500);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(201, 169, 97, .35);
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--rosette-500);
  color: var(--rosewood-900);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

/* ======================================================= 3. TYPOGRAPHY */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--cream-500);
  margin: 0 0 .6em;
}

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; }
h5 { font-size: 1rem; }

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

.lede { font-size: 1.06rem; color: var(--cream-300); max-width: 68ch; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: .86rem; }
.mono { font-family: var(--font-mono); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rosette-500);
  margin-bottom: 10px;
}
/* a note symbol, not an arrow — this is a fretboard, not a trail */
.eyebrow::before { content: "\266A"; font-size: .92em; }

.prose-block { max-width: 74ch; }
.prose-block h2 { margin-top: 1.7em; }
.prose-block h3 { margin-top: 1.4em; }
.prose-block ul, .prose-block ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.prose-block li { margin-bottom: .45em; }
.prose-block a { text-decoration: underline; text-decoration-color: var(--rosette-800); text-underline-offset: 3px; }
.prose-block a:hover { text-decoration-color: var(--rosette-500); }

.mb-2 { margin-bottom: 18px; }
.mb-3 { margin-bottom: 28px; }
.mt-3 { margin-top: 28px; }

/* Reveal-on-scroll. Elements start slightly low and fade in; without JS, or
   with reduced motion, they must simply be visible — hence the base state is
   the visible one and .reveal only opts into the animation. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================== 4. LAYOUT */
/* container-wide and container-narrow are modifiers, but the generator emits
   them on their own in places, so each one has to carry the base geometry as
   well. Without this every container on the site sits flush against the
   viewport edge with no gutter. */
.container, .container-narrow, .container-wide {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container { max-width: var(--container); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: var(--container-wide); }

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

.section-head { margin-bottom: 30px; max-width: 74ch; }
.section-head p { color: var(--text-2); margin-bottom: 0; }

.grid-2, .grid-3, .grid-4, .grid-auto { 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 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ========================================================= 5. TEXTURES */
/* Rosewood grain: soft slanted fibres across the main ground. */
.grain-bg { position: relative; }
.grain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(102deg, rgba(201, 169, 97, .04) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(102deg, rgba(201, 169, 97, .022) 0 1px, transparent 1px 23px);
  z-index: 0;
}
.grain-bg > * { position: relative; z-index: 1; }

/* String reflection: a fine counter-diagonal sheen for bands and the footer. */
.string-bg { position: relative; }
.string-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    repeating-linear-gradient(58deg, rgba(192, 192, 192, .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(192, 192, 192, .04) 0 1px, transparent 1px 11px);
}

/* Fret wire: a single bright line along one edge. The header uses it between
   every navigation segment; cards and dividers use it as a top rule. */
.fret-edge { position: relative; }
.fret-edge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--string-600) 18%, var(--string-400) 50%, var(--string-600) 82%, transparent);
  opacity: .5;
  pointer-events: none;
}

/* =========================================================== 6. HEADER */
/* The only site with a fretboard header: each nav item is a fret segment,
   separated by a silver fret-wire line, and the current page is the fret
   that has been pressed down. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg-deep);
}

.brandbar {
  height: var(--h-brand);
  background: var(--rosewood-900);
  border-bottom: 1px solid var(--rosette-800);
  transition: height var(--t), opacity var(--t);
  overflow: hidden;
}
.brandbar .container-wide { height: var(--h-brand); display: flex; align-items: center; justify-content: space-between; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cream-500);
}
.brand:hover { color: var(--cream-500); }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--rosette-500);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--glow-gold);
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}
.brand-tag {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rosette-500);
  margin-left: 8px;
}
.brandbar-right { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); }
.brandbar-right .season { color: var(--rosette-600); }

.fretbar {
  height: var(--h-fret);
  background: var(--rosewood-800);
  border-bottom: 1px solid var(--rosette-800);
  transition: height var(--t);
}
.fretbar .container-wide { height: 100%; display: flex; align-items: center; gap: 10px; }

/* scroll collapse */
.site-header.is-scrolled .brandbar { height: 0; opacity: 0; border-bottom-width: 0; }
.site-header.is-scrolled .fretbar { height: var(--h-fret-scrolled); }

.fret-nav { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; height: 100%; }
.fret-nav > li { list-style: none; display: flex; flex: 0 1 auto; }

/* A fret segment. The wire lives on the right edge of each segment, with one
   on the leading edge of the first, so segments are separated by a single
   2px silver line exactly as frets are separated on a board. */
.fret-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 14px 22px;
  background: var(--rosewood-700);
  color: var(--cream-200);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-xs);
  border-right: var(--wire) solid var(--string-700);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.fret-nav > li:first-child .fret-link { border-left: var(--wire) solid var(--string-700); }

.fret-link:hover { background: var(--rosewood-600); color: var(--cream-500); border-right-color: var(--string-400); }
.fret-nav > li:first-child .fret-link:hover { border-left-color: var(--string-400); }

/* the current page is the fret that is pressed down */
.fret-link[aria-current="page"] {
  background: var(--rosette-500);
  color: var(--rosewood-800);
  transform: translateY(1px);
  box-shadow: var(--inset-press), var(--glow-gold);
  border-right-color: var(--rosette-400);
}
.fret-nav > li:first-child .fret-link[aria-current="page"] { border-left-color: var(--rosette-400); }
.fret-link .ico { width: 15px; height: 15px; flex: none; }

/* Base size for every inline icon. An <svg> with a viewBox but no width or
   height has no intrinsic size, so it stretches to fill its container — which
   is how the icons in the database table ended up rendering at ~98px inside
   their cells. Context rules below override this with their own size. */
.ico { width: 18px; height: 18px; flex: none; }

/* dropdown for Tools */
.fret-item { position: relative; }
.fret-item .dd-toggle { position: relative; }
.dd-caret { font-size: .6em; transform: translateY(1px); }

.dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 10px;
  min-width: 300px;
  background: var(--rosewood-700);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--rosette-500);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 10px;
  display: none;
  z-index: 210;
}
.dropdown.open { display: block; }
.dropdown a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--cream-300);
  font-size: .88rem;
  font-weight: 600;
}
.dropdown a:hover, .dropdown a:focus-visible { background: var(--rosewood-600); color: var(--rosette-300); }
.dropdown a .ico { width: 16px; height: 16px; color: var(--rosette-600); flex: none; align-self: center; }
.dd-desc { display: block; font-size: .74rem; font-weight: 400; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.dd-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.dd-all { color: var(--rosette-400) !important; }

.fret-actions { display: flex; align-items: center; gap: 9px; flex: none; margin-left: auto; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--cream-200);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--rosewood-600); color: var(--rosette-300); }
.icon-btn .ico { width: 18px; height: 18px; }

.btn-studio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rosette-600);
  color: var(--rosette-400);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn-studio:hover { background: var(--rosette-500); color: var(--rosewood-800); box-shadow: var(--glow-gold); }
.btn-studio .ico { width: 15px; height: 15px; }

.nav-toggle { display: none; width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--cream-200); place-items: center; }
.nav-toggle:hover { background: var(--rosewood-600); }
.nav-toggle .ico { width: 20px; height: 20px; }

/* search */
.search-wrap { position: relative; }
.search-wrap input {
  width: 0;
  opacity: 0;
  padding: 0;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--rosewood-950);
  color: var(--text);
  transition: width var(--t), opacity var(--t-fast), padding var(--t);
}
.search-wrap.open input { width: 232px; opacity: 1; padding: 0 14px; }
.search-wrap.open input:focus { outline: none; border-color: var(--rosette-600); box-shadow: var(--glow-gold); }
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--rosewood-700);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 6px;
  display: none;
  z-index: 220;
}
.search-results.open { display: block; }
.sr-item { display: block; padding: 9px 11px; border-radius: var(--r-sm); }
.sr-item:hover, .sr-item:focus-visible { background: var(--rosewood-600); }
.sr-title { display: block; color: var(--cream-400); font-weight: 600; font-size: .88rem; }
.sr-meta { display: block; font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.sr-empty { padding: 12px; font-size: .86rem; color: var(--text-2); }

/* drawer — the fret list, vertical */
.nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  background: var(--rosewood-800);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: var(--sh-lg);
  padding: 14px var(--gutter) 24px;
}
.nav-drawer.open { display: block; }
.nd-section { margin-bottom: 18px; }
.nd-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rosette-500); margin-bottom: 8px;
}
.nav-drawer a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--cream-300);
  font-weight: 600;
  font-size: .92rem;
}
.nav-drawer a:hover, .nav-drawer a.is-active { background: var(--rosewood-600); color: var(--rosette-300); }
.nav-drawer a .ico { width: 17px; height: 17px; color: var(--rosette-600); flex: none; }
/* vertical fret list keeps the fretboard motif in the drawer */
.nd-fret a {
  background: var(--rosewood-700);
  border-left: var(--wire) solid var(--string-700);
  border-radius: var(--r-xs);
  margin-bottom: 3px;
}
.nd-fret a.is-active {
  background: var(--rosette-500);
  color: var(--rosewood-800);
  border-left-color: var(--rosette-400);
  box-shadow: var(--inset-press);
}
.nd-fret a.is-active .ico { color: var(--rosewood-700); }

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

.btn-primary { background: var(--rosette-500); color: var(--rosewood-800); }
.btn-primary:hover { background: var(--rosette-400); color: var(--rosewood-800); box-shadow: var(--glow-gold); }

.btn-string { background: var(--string-400); color: var(--rosewood-800); }
.btn-string:hover { background: var(--string-300); color: var(--rosewood-800); box-shadow: var(--glow-string); }

.btn-outline { background: var(--rosewood-700); border-color: var(--rosette-700); color: var(--rosette-400); }
.btn-outline:hover { border-color: var(--rosette-500); color: var(--rosette-300); background: var(--rosewood-600); }

.btn-ghost { background: transparent; color: var(--cream-200); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--rosewood-600); color: var(--rosette-300); }

.btn-danger { background: #8A3228; color: var(--feather-500); }
.btn-danger:hover { background: var(--danger); }

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

.btn-arrow .ico-arrow { transition: transform var(--t-fast); }
.btn-arrow:hover .ico-arrow { transform: translateX(4px); }

/* the CTA button carries a fret segment as its icon */
.btn-fret { position: relative; overflow: hidden; }
.btn-fret .fret-ico {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
}
.btn-fret .fret-ico i {
  display: block; width: 2px; height: 13px;
  background: currentColor; opacity: .55; border-radius: 1px;
  transition: transform var(--t-spring), opacity var(--t-fast);
}
.btn-fret:hover .fret-ico i { transform: translateY(1.5px); opacity: .9; }

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

/* ============================================================ 8. CARDS */
/* Spec rule: every entry card is clickable as a whole card. The card IS the
   <a>, so no nested interactive elements and the whole padded box is a
   hit area. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  color: var(--text);
  cursor: pointer;
  min-width: 0;
  position: relative;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t-fast);
}
/* fret-wire rule across the top of every card */
.card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--string-600) 20%, var(--string-400) 50%, var(--string-600) 80%, transparent);
  opacity: .45;
  z-index: 2;
  pointer-events: none;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--rosette-700);
  color: var(--text);
}
.card:hover .card-title { color: var(--rosette-300); }
.card:active { transform: translateY(-1px); }
.card:focus-visible { outline: 2px solid var(--rosette-500); outline-offset: 3px; }

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--rosewood-950);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.card-media img { transition: transform var(--t); }
.card:hover .card-media img { transform: scale(1.04); }

.card-body { padding: 18px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card-title { font-size: 1.06rem; margin: 0; color: var(--cream-500); transition: color var(--t-fast); }
.card-desc, .card-text { font-size: .88rem; color: var(--text-2); margin: 0; line-height: 1.6; }
.card-foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .76rem;
  color: var(--text-3);
}
.card-arrow { color: var(--rosette-600); font-size: 1.05rem; transition: transform var(--t-fast), color var(--t-fast); }
.card:hover .card-arrow { transform: translateX(4px); color: var(--rosette-400); }

/* category card — icon instead of art */
.cat-card .cat-media {
  aspect-ratio: auto;
  padding: 26px 18px 6px;
  border-bottom: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 15px;
}
.cat-ico {
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--rosette-700);
  display: grid;
  place-items: center;
  color: var(--rosewood-900);
  flex: none;
  position: relative;
  overflow: hidden;
}
.cat-ico::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(102deg, rgba(10, 8, 6, .16) 0 1px, transparent 1px 5px);
}
.cat-ico .ico { width: 24px; height: 24px; position: relative; z-index: 1; }
.cat-count { font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); }

/* tool card — contained line drawing on a dark ground */
.tool-card .tool-media { background: var(--rosewood-950); }
.tool-card .tool-media img { object-fit: contain; padding: 8px; }

/* blog card */
.blog-card .blog-media { aspect-ratio: 16 / 9; }
.blog-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: .7rem; color: var(--text-3);
}

/* calculator card */
.calc-card .card-body { gap: 10px; }
.calc-mini {
  display: flex; align-items: center; gap: 9px;
  background: var(--rosewood-950);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--rosette-400);
}
.calc-mini span:last-child { margin-left: auto; color: var(--cream-500); }

/* studio card — deeper ground, interactive badge, glow edge */
.studio-card {
  background: var(--bg-deep);
  border-color: var(--rosette-900);
}
.studio-card:hover { border-color: var(--rosette-600); box-shadow: var(--sh-lg), var(--glow-gold); }
.studio-thumb { aspect-ratio: 16 / 10; background: var(--rosewood-950); border-bottom: 1px solid var(--border); overflow: hidden; }
.studio-thumb img { object-fit: cover; }

/* guitar / tonewood card for the database grid */
.guitar-card .guitar-media { aspect-ratio: 16 / 9; background: var(--rosewood-950); }
.guitar-card .guitar-specs { display: flex; flex-wrap: wrap; gap: 6px; }

/* feature card — a wide card with art on the left */
.card-wide { flex-direction: row; align-items: stretch; }
.card-wide .card-media { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--border); }
.card-wide .card-body { padding: 24px; }
@media (max-width: 700px) {
  .card-wide { flex-direction: column; }
  .card-wide .card-media { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ============================================================= 9. HERO */
.hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--rosette-800);
}
.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 { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #150C08 0%, rgba(42, 24, 16, .9) 46%, rgba(201, 169, 97, .15) 100%);
}
.hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The hero copy is emitted without a container wrapper, so it carries the
   container geometry itself. Without this the headline and the eyebrow sit
   flush against the left edge while every other section is properly inset. */
.hero-copy {
  width: 100%;
  max-width: var(--container-wide);
  padding: 0 var(--gutter);
}
/* the text column stays narrower than the container, so the headline wraps */
.hero-copy > * { max-width: 640px; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(201, 169, 97, .16);
  border: 1px solid var(--rosette-800);
  color: var(--rosette-300);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kicker::before { content: "\266A"; }
.hero-copy h1, .hero-copy h2 {
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  margin-bottom: 14px;
  color: var(--feather-500);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.hero-copy p { color: var(--cream-300); font-size: 1.02rem; max-width: 52ch; }

.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  z-index: 3;
}
.hero-dots button {
  width: 28px; height: 5px;
  border-radius: var(--r-pill);
  background: rgba(240, 232, 220, .26);
  transition: width var(--t), background var(--t), box-shadow var(--t);
}
.hero-dots button[aria-selected="true"] {
  width: 44px;
  background: var(--rosette-500);
  box-shadow: var(--glow-gold);
}
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: rgba(10, 8, 6, .6);
  border: 1px solid var(--border-strong);
  color: var(--cream-200);
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background var(--t-fast), color var(--t-fast);
}
.hero-nav:hover { background: var(--rosette-500); color: var(--rosewood-900); }
.hero-nav.prev { left: 18px; }
.hero-nav.next { right: 18px; }
.hero-nav .ico { width: 18px; height: 18px; }

/* trust bar */
.trust { background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding: 28px 0; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .ico { width: 22px; height: 22px; color: var(--rosette-500); flex: none; margin-top: 2px; }
.trust-item h4 { font-family: var(--font-body); font-size: .92rem; font-weight: 700; margin: 0 0 3px; color: var(--cream-500); }
.trust-item p { font-size: .8rem; color: var(--text-2); margin: 0; line-height: 1.55; }

/* ============================================================ 10. STEPS */
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.step-item { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.step-media { position: relative; aspect-ratio: 16 / 10; background: var(--rosewood-950); border-bottom: 1px solid var(--border); }
.step-media img { object-fit: cover; }
.step-num {
  position: absolute;
  top: 12px; left: 12px;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--rosette-500);
  color: var(--rosewood-800);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: var(--sh-sm);
}
.step-body { padding: 17px 18px 20px; }
.step-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--rosette-500);
  margin-bottom: 7px;
}
.step-body h3 { font-size: 1.04rem; margin-bottom: 6px; }
.step-body p { font-size: .86rem; color: var(--text-2); margin: 0; }

/* ==================================================== 11. 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: .06em;
  text-transform: uppercase;
  background: var(--rosette-800);
  color: var(--rosette-200);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-string { background: var(--string-800); color: var(--string-200); }
.tag-moss { background: var(--moss-900); color: var(--moss-100); }
.tag-cream { background: var(--cream-300); color: var(--rosewood-900); }
.tag-outline { background: transparent; border-color: var(--rosette-700); color: var(--rosette-400); }
.tag-dim { background: var(--rosewood-600); color: var(--text-2); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--rosewood-700);
  border: 1px solid var(--border-strong);
  color: var(--cream-200);
  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(--rosette-600); color: var(--rosette-300); }
.chip.is-active { background: var(--rosette-500); border-color: var(--rosette-500); color: var(--rosewood-800); }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

.param-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--rosewood-950);
  border: 1px solid var(--border-gold);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--rosette-400);
}

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

/* the tool's own type — tonewood, hand tool, jig, consumable */
.spec-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid;
}
.spec-tonewood { color: var(--rosette-300); border-color: var(--rosette-700); background: rgba(201, 169, 97, .1); }
.spec-hand { color: var(--string-200); border-color: var(--string-700); background: rgba(192, 192, 192, .08); }
.spec-jig { color: var(--moss-100); border-color: var(--moss-700); background: rgba(90, 138, 90, .12); }
.spec-consumable { color: var(--amber-300); border-color: var(--amber-700); background: rgba(176, 120, 24, .12); }
.spec-hardware { color: var(--cream-200); border-color: var(--rosewood-500); background: rgba(196, 176, 144, .1); }

/* tonewood badge, colour-coded by species character */
.tonewood-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid;
}
.tw-spruce { color: var(--rosette-200); border-color: var(--rosette-700); background: rgba(201, 169, 97, .1); }
.tw-cedar { color: var(--amber-200); border-color: var(--amber-700); background: rgba(176, 120, 24, .12); }
.tw-mahogany { color: #E0B090; border-color: #8A5A38; background: rgba(160, 96, 56, .14); }
.tw-rosewood { color: #C0A0D0; border-color: #5A4068; background: rgba(120, 80, 140, .14); }
.tw-maple { color: var(--cream-400); border-color: var(--rosewood-400); background: rgba(216, 188, 128, .08); }
.tw-ebony { color: var(--string-200); border-color: var(--string-800); background: rgba(40, 40, 40, .5); }

/* action badge — low / medium / high */
.action-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid;
}
.action-low { color: var(--moss-100); border-color: var(--moss-500); background: rgba(90, 138, 90, .14); }
.action-medium { color: var(--amber-300); border-color: var(--amber-500); background: rgba(176, 120, 24, .12); }
.action-high { color: #E89080; border-color: #8A3228; background: rgba(196, 74, 58, .12); }

/* ==================================================== 12. PAGE TEMPLATES */
.page-hero {
  position: relative;
  background: var(--bg-deep);
  border-bottom: 3px solid var(--rosette-700);
  padding: 40px 0 34px;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--rosette-400); }
.crumbs .sep { color: var(--rosette-700); }
.page-hero h1 { margin-bottom: 12px; }
.page-hero .lede { margin-bottom: 0; }

/* tool detail: exhibit column + content column */
.split-wide { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: start; }
.split-side { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 40px; align-items: start; }
.split-side .side { position: sticky; top: 104px; }

.exhibit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--sh-sm);
}
.exhibit-main {
  aspect-ratio: 4 / 3;
  background: var(--rosewood-950);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
}
.exhibit-main img { width: 100%; height: 100%; object-fit: contain; }
.exhibit-main .ex-fallback { display: none; }

.ex-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.ex-thumb {
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: var(--rosewood-950);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 0;
  transition: border-color var(--t-fast);
}
.ex-thumb:hover { border-color: var(--rosette-700); }
.ex-thumb.is-active { border-color: var(--rosette-500); box-shadow: var(--glow-gold); }
.ex-thumb img { width: 100%; height: 100%; object-fit: contain; max-width: 100%; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .84rem; }
.spec-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosette-500);
  padding-bottom: 8px;
}
.spec-table th, .spec-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { color: var(--text-3); font-weight: 600; width: 42%; font-size: .78rem; }
.spec-table td { color: var(--cream-300); font-family: var(--font-mono); font-size: .8rem; overflow-wrap: anywhere; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--rosewood-950);
  border: 1px solid var(--border-gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rosette-400);
}
.stage-pill .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--rosette-500); }

.compat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* filter bar */
.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, .8fr) auto;
  gap: 12px;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--rosewood-950);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--text);
  font-size: .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rosette-600);
  box-shadow: var(--glow-gold);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rosette-600) 50%), linear-gradient(135deg, var(--rosette-600) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { font-size: .74rem; color: #E89080; display: none; }
.field.has-error .field-error { display: block; }

.result-count { font-size: .84rem; color: var(--text-2); }
.result-count b { color: var(--rosette-400); font-family: var(--font-mono); }

.pagination { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 30px; }
.pagination button {
  min-width: 40px; height: 40px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--cream-200);
  font-family: var(--font-mono);
  font-size: .86rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pagination button:hover:not(:disabled) { border-color: var(--rosette-600); color: var(--rosette-300); }
.pagination button[aria-current="page"] { background: var(--rosette-500); border-color: var(--rosette-500); color: var(--rosewood-800); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ====================================================== 13. TOOLS & DB */
.db-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
table.db { width: 100%; border-collapse: collapse; min-width: 940px; }
table.db th {
  position: sticky; top: 0;
  background: var(--rosewood-950);
  text-align: left;
  padding: 13px 14px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
table.db th button { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 6px; }
table.db th button:hover { color: var(--rosette-400); }
table.db th .sort-mark { color: var(--rosette-600); font-size: .9em; }
table.db td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .86rem; color: var(--cream-300); vertical-align: top; }
table.db tbody tr:hover { background: var(--rosewood-600); }
table.db .num { font-family: var(--font-mono); color: var(--rosette-400); white-space: nowrap; }
table.db tr.is-hidden { display: none; }
.db-name { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--cream-500); }
.db-name .ico { width: 18px; height: 18px; color: var(--rosette-600); }

.db-detail-row td { background: var(--rosewood-950); padding: 0; }
.db-detail { padding: 18px 20px; font-size: .88rem; color: var(--text-2); display: none; }
.db-detail.show { display: block; }
.db-detail h4 { font-family: var(--font-body); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rosette-500); margin-bottom: 8px; }

.compare-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg-deep);
  border-top: 2px solid var(--rosette-700);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  z-index: 40;
}
.compare-bar .picked { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.compare-panel { margin-top: 26px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.compare-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
.compare-col h3 { font-size: 1rem; margin-bottom: 12px; }
.compare-col dl { margin: 0; font-size: .84rem; }
.compare-col dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 10px; }
.compare-col dd { margin: 3px 0 0; color: var(--cream-300); }

/* ======================================================= 14. CALCULATORS */
.calc-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }

.calc-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.calc-form .field label { color: var(--rosette-600); }
.calc-form .hint { font-size: .76rem; color: var(--text-3); margin-top: 4px; }

.calc-result {
  background: var(--bg-deep);
  border: 1px solid var(--border-gold);
  border-radius: var(--r);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.calc-result::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(58deg, rgba(192, 192, 192, .045) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.calc-result > * { position: relative; }
.big-num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  color: var(--rosette-400);
  line-height: 1;
  text-shadow: 0 0 26px rgba(201, 169, 97, .35);
  display: block;
}
.big-num .unit { font-size: .34em; color: var(--text-2); margin-left: 6px; letter-spacing: .06em; }
.big-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rosette-500); margin-bottom: 8px; display: block; }

.result-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.result-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; }
.result-cell .k { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.result-cell .v { font-family: var(--font-mono); font-size: 1rem; color: var(--rosette-300); }

.gauge { margin-top: 20px; }
.gauge-track { height: 8px; border-radius: var(--r-pill); background: var(--rosewood-700); overflow: hidden; border: 1px solid var(--border); }
.gauge-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--moss-500), var(--rosette-500) 55%, var(--danger)); width: 0; transition: width var(--t); }
.gauge-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .66rem; color: var(--text-3); margin-top: 6px; }

.formula { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .78rem; color: var(--text-2); line-height: 1.7; }
.formula b { color: var(--rosette-400); font-weight: 700; }

/* a scrollable table of fret positions */
.result-table { margin-top: 20px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.result-table table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .78rem; }
.result-table th { position: sticky; top: 0; background: var(--rosewood-950); color: var(--text-3); text-align: left; padding: 8px 10px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.result-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--cream-300); }
.result-table tr:last-child td { border-bottom: 0; }
.result-table .cents-off { color: #E89080; }

/* ============================================================ 15. FORMS */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 26px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-status { display: none; margin-top: 18px; }
.form-status.show { display: block; }

.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
.info-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.info-card p { font-size: .9rem; color: var(--text-2); margin: 0; }

/* ============================================================= 16. BLOG */
.featured-post { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t); }
.featured-post:hover { border-color: var(--rosette-700); box-shadow: var(--sh-lg); color: var(--text); }
.featured-post .fp-media { aspect-ratio: 16 / 10; background: var(--rosewood-950); min-width: 0; }
.featured-post .fp-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-post .fp-body { padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.featured-post h2 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); margin: 0; }

.post-hero { position: relative; background: var(--bg-deep); border-bottom: 3px solid var(--rosette-700); padding: 38px 0 30px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); margin-top: 14px; }
.post-meta .author-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--cream-200); }
.author-dot { width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--rosette-700); color: var(--rosewood-900); display: grid; place-items: center; font-size: .72rem; font-weight: 700; font-family: var(--font-mono); }

.post-figure { margin: 26px 0; }
.post-figure img { width: 100%; border-radius: var(--r); border: 1px solid var(--border); }
.post-figure figcaption { font-size: .8rem; color: var(--text-3); margin-top: 9px; font-family: var(--font-mono); }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; }
.toc h4 { font-family: var(--font-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rosette-500); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 2px; }
.toc a { display: block; padding: 6px 9px; border-radius: var(--r-xs); font-size: .84rem; color: var(--text-2); border-left: 2px solid transparent; }
.toc a::before { content: counter(toc) ". "; font-family: var(--font-mono); color: var(--text-3); }
.toc a:hover { background: var(--rosewood-600); color: var(--rosette-300); }
.toc a.is-current { color: var(--rosette-300); border-left-color: var(--rosette-500); background: var(--rosewood-600); }

.step-block { display: flex; gap: 16px; margin: 22px 0; }
.step-block .sb-num {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-pill);
  background: var(--rosewood-950);
  border: 2px solid var(--rosette-700);
  color: var(--rosette-400);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
}
.step-block .sb-body h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 8px 0 5px; color: var(--cream-500); }
.step-block .sb-body p { font-size: .9rem; color: var(--text-2); margin: 0; }

.author-box { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--rosette-700); border-radius: var(--r); padding: 20px; margin-top: 34px; }
.author-box .ab-avatar { width: 52px; height: 52px; flex: none; border-radius: var(--r-pill); background: var(--rosette-700); color: var(--rosewood-900); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; }
.author-box h4 { font-family: var(--font-body); font-size: .98rem; margin: 0 0 3px; }
.author-box p { font-size: .86rem; color: var(--text-2); margin: 0; }
.author-box .ab-role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rosette-500); margin-bottom: 6px; }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.post-nav a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; color: var(--text); transition: border-color var(--t-fast), transform var(--t); }
.post-nav a:hover { border-color: var(--rosette-700); transform: translateY(-3px); color: var(--text); }
.post-nav .pn-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 6px; }
.post-nav .pn-title { font-weight: 700; color: var(--cream-500); font-size: .94rem; }
.post-nav .pn-next { text-align: right; }

.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--rosette-500); z-index: 300; box-shadow: var(--glow-gold); }

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--rosette-500);
  color: var(--rosewood-800);
  display: grid; place-items: center;
  box-shadow: var(--sh-md);
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity var(--t), transform var(--t);
  z-index: 120;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top .ico { width: 20px; height: 20px; }

/* =========================================================== 17. NOTICES */
.notice { border-radius: var(--r); padding: 15px 18px; border: 1px solid var(--border); background: var(--surface); font-size: .88rem; margin: 18px 0; }
.notice strong { display: block; margin-bottom: 4px; }
.notice p:last-child { margin-bottom: 0; }
.notice-safety { background: #2E1410; border-color: #8A3228; color: #E89080; }
.notice-safety strong { color: #F5C0B8; }
.notice-info { background: #152530; border-color: #2E5A88; color: #B0C8E0; }
.notice-info strong { color: #D0E2F2; }
.notice-warn { background: #2E2410; border-color: var(--amber-700); color: var(--amber-300); }
.notice-warn strong { color: var(--amber-200); }
.notice-neutral { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }

.tip-box { border-left: 4px solid var(--rosette-600); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; padding: 15px 18px; margin: 20px 0; font-size: .88rem; }
.tip-box .tb-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rosette-300); margin-bottom: 6px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.tip-box .ico { width: 16px; height: 16px; flex: none; }
.tip-box p:last-child { margin-bottom: 0; }
.tip-warn { border-left-color: var(--danger); }
.tip-warn .tb-title { color: #E89080; }
.tip-note { border-left-color: var(--info); }
.tip-note .tb-title { color: #B0C8E0; }
.tip-ok { border-left-color: var(--moss-500); }
.tip-ok .tb-title { color: var(--moss-300); }

.legal-note {
  background: var(--surface);
  border-left: 4px solid var(--rosette-700);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--text-2);
  margin: 26px 0 0;
  line-height: 1.65;
}
.legal-note strong { color: var(--rosette-300); }

.empty-state { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 34px; text-align: center; }
.empty-state h3 { font-size: 1.05rem; margin-bottom: 6px; }
.empty-state p { color: var(--text-2); margin: 0; font-size: .9rem; }

.safety-strip {
  background: #2E1410;
  border-top: 1px solid #8A3228;
  border-bottom: 1px solid #8A3228;
  padding: 11px 0;
}
.safety-strip .container-wide { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.safety-strip .ico { width: 18px; height: 18px; color: #E89080; flex: none; }
.safety-strip .ss-text { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: #E89080; text-transform: uppercase; }
.safety-strip .ss-icons { display: flex; gap: 12px; margin-left: auto; }

/* measurement indicators used on tool and setup pages */
.action-indicator, .intonation-indicator, .relief-indicator, .tension-indicator {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .76rem;
  background: var(--rosewood-950);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 7px 11px;
}
.action-indicator .ai-bar,
.intonation-indicator .ii-bar,
.relief-indicator .ri-bar,
.tension-indicator .ti-bar { flex: 1; height: 6px; border-radius: var(--r-pill); }
.action-indicator .ai-bar { background: linear-gradient(90deg, var(--moss-500), var(--amber-500) 55%, var(--danger)); }
.intonation-indicator .ii-bar { background: linear-gradient(90deg, var(--danger), var(--moss-500) 50%, var(--info)); }
.relief-indicator .ri-bar { background: linear-gradient(90deg, var(--danger), var(--moss-500) 50%, var(--amber-500)); }
.tension-indicator .ti-bar { background: linear-gradient(90deg, var(--moss-500), var(--rosette-500) 50%, var(--danger)); }
.action-indicator .ai-val, .intonation-indicator .ii-val,
.relief-indicator .ri-val, .tension-indicator .ti-val { color: var(--rosette-300); }

/* state tint — the label, the border and the readout all move together so a
   glance is enough; the gradient bar stays as the scale reference */
.action-indicator.is-ok, .intonation-indicator.is-ok,
.relief-indicator.is-ok, .tension-indicator.is-ok { border-color: var(--moss-700); }
.action-indicator.is-warn, .intonation-indicator.is-warn,
.relief-indicator.is-warn, .tension-indicator.is-warn { border-color: var(--amber-700); }
.action-indicator.is-bad, .intonation-indicator.is-bad,
.relief-indicator.is-bad, .tension-indicator.is-bad { border-color: var(--danger); }
.action-indicator.is-ok .ai-val, .intonation-indicator.is-ok .ii-val,
.relief-indicator.is-ok .ri-val, .tension-indicator.is-ok .ti-val { color: var(--moss-300); }
.action-indicator.is-warn .ai-val, .intonation-indicator.is-warn .ii-val,
.relief-indicator.is-warn .ri-val, .tension-indicator.is-warn .ti-val { color: var(--amber-300); }
.action-indicator.is-bad .ai-val, .intonation-indicator.is-bad .ii-val,
.relief-indicator.is-bad .ri-val, .tension-indicator.is-bad .ti-val { color: #E89080; }
.action-indicator .ai-lab, .intonation-indicator .ii-lab,
.relief-indicator .ri-lab, .tension-indicator .ti-lab {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}

.webgl-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--rosewood-950); color: var(--text-3);
}
.webgl-status .ws-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--text-3); }
.webgl-status.is-loading .ws-dot { background: var(--rosette-500); animation: pulse 1.2s ease-in-out infinite; }
.webgl-status.is-ready { color: var(--moss-300); border-color: var(--moss-700); }
.webgl-status.is-ready .ws-dot { background: var(--moss-500); }
.webgl-status.is-fallback { color: var(--rosette-300); border-color: var(--rosette-700); }
.webgl-status.is-fallback .ws-dot { background: var(--rosette-500); }
.webgl-status.is-error { color: #E89080; border-color: #8A3228; }
.webgl-status.is-error .ws-dot { background: var(--danger); }
.webgl-status.is-idle { color: var(--text-3); border-color: var(--border-strong); }
.webgl-status.is-idle .ws-dot { background: var(--rosette-700); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================ 18. FOOTER */
.site-footer { background: var(--rosewood-900); border-top: 1px solid var(--rosette-800); padding: 50px 0 0; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-col h4 { font-family: var(--font-body); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rosette-500); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--text-2); font-size: .88rem; }
.footer-col a:hover { color: var(--rosette-400); }
.footer-brand p { font-size: .86rem; color: var(--text-2); margin: 14px 0; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; margin-bottom: 14px; }
.footer-social .icon-btn { border-color: var(--border-strong); }
.footer-ver { font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }

.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input { flex: 1; min-width: 0; padding: 10px 12px; background: var(--rosewood-800); border: 1px solid var(--border-strong); border-radius: var(--r-xs); color: var(--text); font-size: .86rem; }
.newsletter input:focus { outline: none; border-color: var(--rosette-600); }
.newsletter-msg { display: none; font-size: .78rem; margin-top: 8px; }
.newsletter-msg.show { display: block; }
.newsletter-msg.ok { color: var(--moss-300); }
.newsletter-msg.err { color: #E89080; }

.footer-legal { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.legal-block { background: var(--rosewood-800); border: 1px solid var(--border-gold); border-left: 4px solid var(--rosette-700); border-radius: var(--r); padding: 18px 20px; }
.legal-block h4 { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rosette-300); margin-bottom: 10px; }
.legal-block h4 .ico { width: 18px; height: 18px; color: #E89080; }
.legal-block p { font-size: .82rem; color: var(--text-2); margin: 0 0 8px; line-height: 1.65; }
.legal-block ul { margin: 0; padding-left: 18px; font-size: .82rem; color: var(--text-2); }
.legal-block li { margin-bottom: 5px; }

.footer-bottom { margin-top: 34px; border-top: 1px solid var(--border); padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.footer-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .82rem; }
.footer-bottom .fb-links a { color: var(--text-2); }
.range-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: var(--r-pill); border: 1px solid var(--moss-700); color: var(--moss-300); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }

/* ========================================================= 19. 3D STUDIO */
.studio-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }

.studio-stage {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 460px;
}
.studio-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.studio-canvas-wrap { position: relative; aspect-ratio: 16 / 11; min-height: 340px; }

.studio-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.studio-toolbar .tb-group { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.studio-toolbar .tb-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.studio-toolbar .spacer { margin-left: auto; }

.preset-btn {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--rosewood-800);
  border: 1px solid var(--border-strong);
  color: var(--cream-200);
  font-size: .76rem;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.preset-btn:hover { border-color: var(--rosette-600); color: var(--rosette-300); }
.preset-btn.is-active { background: var(--rosette-500); border-color: var(--rosette-500); color: var(--rosewood-800); }

.studio-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg-deep);
  z-index: 5;
}
.studio-loading.hide { display: none; }
.sl-skeleton { width: 62%; height: 8px; border-radius: var(--r-pill); background: var(--rosewood-700); overflow: hidden; }
.sl-bar { height: 100%; width: 0; background: var(--rosette-500); transition: width .3s ease; }
.studio-loading p { font-family: var(--font-mono); font-size: .76rem; color: var(--text-2); margin: 0; }

.studio-fallback { display: none; position: absolute; inset: 0; background: var(--bg-deep); padding: 26px; overflow-y: auto; z-index: 6; }
.studio-fallback.show { display: block; }
.studio-fallback h3 { font-size: 1.05rem; margin-bottom: 8px; }
.studio-fallback p { font-size: .88rem; color: var(--text-2); max-width: 62ch; }
.studio-fallback .fb-art { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--rosewood-950); }
.studio-fallback .fb-art img { width: 100%; }
.studio-fallback table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .8rem; margin-top: 12px; }
.studio-fallback th, .studio-fallback td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.studio-fallback th { color: var(--text-3); font-weight: 600; }
.studio-fallback td { color: var(--rosette-300); }

.sc-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sc-readout {
  position: absolute; top: 12px; left: 12px;
  background: rgba(10, 8, 6, .78);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--rosette-300);
  line-height: 1.65;
  max-width: 62%;
}
.sc-readout .rk { color: var(--text-3); }
.sc-hint {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(10, 8, 6, .72);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: .74rem;
  color: var(--text-2);
}
.sc-warn {
  position: absolute; top: 12px; right: 12px;
  background: rgba(46, 20, 16, .92);
  border: 1px solid #8A3228;
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: .78rem;
  color: #F5C0B8;
  max-width: 46%;
  display: none;
}
.sc-warn.show { display: block; }

.studio-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 17px; }
.studio-panel h3 { font-size: 1rem; margin: 0; }
.studio-panel .panel-group { display: flex; flex-direction: column; gap: 13px; }
.studio-panel label { display: flex; flex-direction: column; gap: 7px; font-size: .82rem; color: var(--text-2); }
.studio-panel label .lv { font-family: var(--font-mono); font-size: .8rem; color: var(--rosette-400); letter-spacing: 0; }
.studio-panel label .lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  /* .field input sets a text-input padding; a range track is 6px tall, so the
     padding has to go or the track collapses to nothing inside border-box */
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--rosewood-700);
  border: 1px solid var(--border);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--rosette-500);
  border: 2px solid var(--rosewood-900);
  box-shadow: var(--sh-xs);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--rosette-500);
  border: 2px solid var(--rosewood-900);
  cursor: grab;
}
input[type="range"]:focus-visible { outline: 2px solid var(--rosette-500); outline-offset: 4px; }

.studio-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.so-cell { background: var(--rosewood-950); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; }
.so-cell .k { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.so-cell .v { font-family: var(--font-mono); font-size: .92rem; color: var(--rosette-300); }
.so-cell.wide { grid-column: 1 / -1; }

.studio-steps { display: flex; flex-wrap: wrap; gap: 7px; }
.sstep { padding: 5px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 600; background: var(--rosewood-950); border: 1px solid var(--border); color: var(--text-3); font-family: var(--font-body); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.sstep.done, .sstep.is-done { border-color: var(--moss-700); color: var(--moss-300); }
.sstep.active, .sstep.is-active { background: var(--rosette-500); border-color: var(--rosette-500); color: var(--rosewood-800); }
.sstep:disabled { opacity: .4; cursor: not-allowed; }
.sstep:focus-visible { outline: 2px solid var(--rosette-500); outline-offset: 2px; }

/* panel controls the tools share */
.studio-panel select {
  width: 100%;
  padding: 9px 11px;
  background: var(--rosewood-950);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .86rem;
}
.studio-panel select:focus-visible { outline: 2px solid var(--rosette-500); outline-offset: 2px; }
.studio-panel .panel-note { font-size: .76rem; color: var(--text-3); margin: 0; line-height: 1.55; }
.studio-panel .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-panel .panel-actions .btn { flex: 1 1 auto; justify-content: center; }
.studio-panel .view-row { display: flex; flex-wrap: wrap; gap: 7px; }

.sc-meter { display: flex; align-items: center; gap: 10px; }
.sc-meter .mbar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--rosewood-700); border: 1px solid var(--border); overflow: hidden; }
.sc-meter .mbar span { display: block; height: 100%; width: 2%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--moss-600), var(--moss-400)); transition: width .2s ease; }
.sc-meter .mval { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--text-3); white-space: nowrap; }

.studio-fallback .fb-canvas { display: block; width: 100%; height: auto; margin: 15px 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--rosewood-950); }
.studio-fallback .fb-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.studio-fallback .fb-note { font-size: .8rem; color: var(--text-3); margin-top: 12px; }

/* ------------------------------------------------- 19b. HERO 3D PREVIEW
   The static preview sits on top of the canvas. Nothing is downloaded until
   the visitor asks, so the placeholder is what almost everyone sees. */
.hero-3d { position: relative; }
.hero-3d-media {
  position: relative;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-deep);
}
.hero-3d-media canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.hero-3d-static { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-3d-media .webgl-status { position: absolute; top: 12px; right: 12px; z-index: 4; }
.hero-3d-cta {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; z-index: 4; width: min(92%, 420px);
}
.hero-3d-note { font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); }
.hero-3d-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.hero-3d-tools a {
  display: block; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  transition: transform var(--t), border-color var(--t-fast), box-shadow var(--t);
}
.hero-3d-tools a:hover { transform: translateY(-4px); border-color: var(--rosette-700); box-shadow: var(--sh-md); }
.hero-3d-tools .ht-name { display: block; font-family: var(--font-head); font-size: .92rem; color: var(--cream-400); margin-bottom: 4px; }
.hero-3d-tools .ht-desc { display: block; font-size: .78rem; color: var(--text-3); }

/* ------------------------------------------- 19c. PAGE COMPONENTS (part 2) */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--rosette-400); }
.breadcrumb > span { color: var(--rosette-700); }

.pill-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px; border-radius: var(--r-pill);
  background: rgba(10, 8, 6, .74);
  border: 1px solid var(--rosette-800);
  color: var(--rosette-300);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 16px;
}
.pill-kicker .ico { width: 14px; height: 14px; }

.fret-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: none; }

.meta-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 20px; }
.ex-img { display: block; }
.exhibit-main .ex-img { max-width: 100%; }

/* the four process steps are informational, so they must not look clickable */
.step-card { cursor: default; }
.step-card:hover { transform: none; box-shadow: var(--sh-sm); border-color: var(--border); }
.step-card:hover .card-title { color: var(--cream-500); }

.step-list { list-style: none; margin: 0; padding: 0; }

.pull-quote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--rosette-600);
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.5;
  color: var(--cream-200);
}

.cta-band {
  position: relative; overflow: hidden;
  background: var(--rosette-500);
  color: var(--rosewood-800);
  border-radius: 16px;
  padding: 34px;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(58deg, rgba(10, 8, 6, .09) 0 2px, transparent 2px 11px);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--rosewood-800); margin-bottom: 8px; }
.cta-band p { color: #4A3020; max-width: 64ch; margin-bottom: 18px; }
.cta-band .btn-primary { background: var(--rosewood-800); color: var(--rosette-300); }
.cta-band .btn-primary:hover { background: #0A0806; color: var(--rosette-200); }
.cta-band .btn-outline { background: rgba(10, 8, 6, .14); border-color: rgba(10, 8, 6, .36); color: var(--rosewood-800); }
.cta-band .btn-outline:hover { background: rgba(10, 8, 6, .24); border-color: rgba(10, 8, 6, .55); color: var(--rosewood-800); }

/* expanded database row */
.db-detail dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 7px 20px; margin: 14px 0 0; }
.db-detail dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.db-detail dd { margin: 0; color: var(--cream-300); font-size: .86rem; }

/* the "at a glance" panel on the content pages */
.toc dl { margin: 0; }
.toc dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-top: 10px; }
.toc dt:first-child { margin-top: 0; }
.toc dd { margin: 2px 0 0; font-size: .85rem; color: var(--cream-300); }

.info-card ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--text-2); }
.info-card li { margin-bottom: 7px; }
.info-card li:last-child { margin-bottom: 0; }

/* the studio status pill sits inside the stage, over the canvas */
.studio-stage > .webgl-status { position: absolute; bottom: 12px; right: 12px; z-index: 4; }
.studio-stage .studio-canvas-wrap { min-height: 460px; }

/* the exhibit frame keeps its own ratio, not the card ratio */
.exhibit-main { display: grid; place-items: center; }
.exhibit-main img { width: 100%; height: auto; object-fit: contain; }

.studio-hero { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: var(--bg-deep); }
.studio-hero .sh-stage { aspect-ratio: 21 / 9; min-height: 300px; }
.studio-hero .sh-side { position: absolute; top: 0; right: 0; bottom: 0; width: 330px; background: linear-gradient(90deg, transparent, rgba(10, 8, 6, .95) 32%); padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.studio-hero .sh-side h3 { margin: 0; }

/* ========================================================= 20. RESPONSIVE */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-wide { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
  .studio-shell { grid-template-columns: minmax(0, 1fr); }
  .studio-hero .sh-side { position: static; width: auto; background: var(--bg-deep); }
  .studio-hero .sh-stage { aspect-ratio: 16 / 9; }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the fretboard tightens before it collapses */
@media (max-width: 1000px) {
  .fret-link { padding: 13px 15px; font-size: .75rem; letter-spacing: .03em; }
  .fret-link .ico { display: none; }
  .btn-studio span { display: none; }
  .btn-studio { padding: 0 11px; }
}

@media (max-width: 900px) {
  .fret-nav { display: none; }
  .nav-toggle { display: grid; }
  /* The brand bar keeps only the logo, the search and the hamburger. Leaving
     the 3D Studio pill and the version in pushes the row onto a second line
     and blows the 36px bar apart. */
  .btn-studio { display: none; }
  .brandbar-right { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-wide, .split-side, .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .split-side .side { position: static; }
  .featured-post { grid-template-columns: minmax(0, 1fr); }
  .info-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .search-wrap.open input { width: 180px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --sec: 44px; --sec-sm: 30px; }
  .grid-2, .grid-3, .grid-4, .grid-auto, ol.steps, .trust-grid, .footer-grid, .footer-legal, .post-nav, .result-cells, .studio-out {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero { height: 460px; }
  .hero-nav { display: none; }
  .hero-3d-media { aspect-ratio: 16 / 9; min-height: 300px; }
  .hero-3d-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-results { width: calc(100vw - 32px); right: -8px; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .ex-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-wide .card-media { aspect-ratio: 16 / 10; }
  .featured-post .fp-body { padding: 22px; }
  .step-block .sb-num { width: 40px; height: 40px; font-size: .95rem; }
  .to-top { right: 14px; bottom: 14px; }
  .brand-tag { display: none; }
  .db-wrap { border-radius: var(--r-sm); }
}

/* ================================================== REDUCED MOTION */
@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, .post-nav a:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
  .btn-fret:hover .fret-ico i { transform: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .to-top, .read-progress, .hero-nav, .hero-dots, .compare-bar { display: none; }
  body { background: #fff; color: #000; }
}