/* ============================================================================
   Guitarmaking — editorial component kit
   v0.8 · 2026-08-25 · depends on tokens.css

   Content-level components: the things that appear INSIDE a page.
   Page-level structure (chapter template, directory, home triage) waits on
   the sitemap and is not in this file.

   Adapted from the Vilnius Wage Geography reference, with three deliberate
   departures — noted at each component:
     1. Serif italic, not sans italic. Minion has real italics; the reference's
        display face does not and its "italic" is a browser-synthesised slant.
     2. Our palette, not theirs.
     3. Our 14px spacing unit. The reference's 140px label column happens to
        equal exactly 10 of our units, so that measurement carries over intact.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1 · EYEBROW — the smallest, hardest-working element
   Red letterspaced caps above the thing they label.
   The reference measures .32em; on the masthead only, .4em.
   --------------------------------------------------------------------------- */
.gm-eyebrow{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-accent);
  margin: 0 0 var(--gm-u);
}
.gm-eyebrow--wide{ letter-spacing: var(--gm-track-eyebrow-wide); }
.gm-eyebrow--muted{ color: var(--gm-gray-tool); }

/* Rule-prefixed variant. A short red rule before the label gives the eye a
   repeating left-edge anchor on a long scrolling chapter. */
.gm-eyebrow--ruled{
  display: flex;
  align-items: center;
  gap: var(--gm-u);
}
.gm-eyebrow--ruled::before{
  content: "";
  width: var(--gm-u-2);
  height: 1px;
  background: currentColor;
  flex: none;
}


/* ---------------------------------------------------------------------------
   2 · DROP CAP
   Chapter openers and standalone articles ONLY. Never on a procedure page,
   where it fights the numbered steps.
   Applied to the first paragraph automatically; .gm-prose--nocap opts out.
   --------------------------------------------------------------------------- */
.gm-prose--opener > p:first-of-type::first-letter{
  font-family: var(--gm-font-display);   /* ~95px */
  font-size: var(--gm-dropcap-size);
  line-height: var(--gm-dropcap-lh);
  font-weight: 400;
  font-style: normal;
  float: left;
  padding: 0.05em 0.22em 0 0;
  color: var(--gm-dropcap-color);
  letter-spacing: 0;
}
/* Ink variant — for any opener where a red initial would sit near links */
.gm-prose--opener.gm-prose--cap-ink > p:first-of-type::first-letter{ color: var(--gm-ink); }
.gm-prose--nocap > p:first-of-type::first-letter{
  font-size: inherit; line-height: inherit; float: none;
  padding: 0; color: inherit; font-family: inherit;
}


/* ---------------------------------------------------------------------------
   3 · ASIDE — definition / explanation
   Transparent, hairlines top and bottom, label in a 140px column at left.
   This is the glossary component: "barrel-bolt fastening system", "neckshaft",
   "scale length". The book italicises defined terms on first use; this is
   where that term resolves to.
   --------------------------------------------------------------------------- */
.gm-aside{
  max-width: var(--gm-measure);
  margin: var(--gm-u-3) auto;
  padding: var(--gm-u-2) 0;
  border-top: var(--gm-rule-weight) solid var(--gm-rule);
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule);
  display: grid;
  grid-template-columns: var(--gm-label-col) 1fr;
  gap: var(--gm-u-2);
  background: transparent;
}
.gm-aside > .gm-aside-label{
  grid-column: 1; grid-row: 1;
  align-self: start;
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-accent);
  line-height: 1.4;
  margin: 0;
}
.gm-aside > *:not(.gm-aside-label){ grid-column: 2; }
.gm-aside p{
  font-family: var(--gm-font-text);      /* 16px */
  font-size: var(--gm-size-secondary);
  line-height: var(--gm-leading-loose);
  color: var(--gm-ink);
  margin: 0 0 0.8em;
}
.gm-aside p:last-child{ margin-bottom: 0; }
/* The defined term itself, restated at the head of the definition */
.gm-aside .gm-term{ font-style: italic; font-weight: 600; }


/* ---------------------------------------------------------------------------
   4 · PANEL — TOOLS / SUPPLIES / MATERIALS
   The book's own tinted callout, rebuilt on the aside's label-column grid.
   Same structure as .gm-aside, different skin: tint instead of rules.
   --------------------------------------------------------------------------- */
.gm-panel{
  max-width: var(--gm-measure);
  margin: var(--gm-u-3) auto;
  padding: var(--gm-u-2);
  background: var(--gm-panel);
  border: 0;
  display: grid;
  grid-template-columns: var(--gm-label-col) 1fr;
  gap: var(--gm-u-2);
}
.gm-panel > .gm-panel-label{
  grid-column: 1; grid-row: 1;
  align-self: start;
  font-family: var(--gm-font-caption);    /* Caption cut — 700 keeps smcp/onum */
  font-size: var(--gm-size-label);
  font-weight: var(--gm-weight-label);
  letter-spacing: var(--gm-track-caps);
  font-variant-caps: small-caps;          /* REAL small caps — 128 drawn glyphs */
  text-transform: lowercase;              /* let smcp do it, not a transform */
  color: var(--gm-ink);
  margin: 0;
}
.gm-panel > *:not(.gm-panel-label){ grid-column: 2; }
.gm-panel ul{ margin: 0; padding: 0; list-style: none; }
.gm-panel li{
  font-size: var(--gm-size-secondary);
  line-height: var(--gm-leading-loose);
  margin: 0 0 0.35em;
}
/* Track-specific quantities: "Steel-string: 2 required / Classical: 3 required" */
.gm-panel .gm-qty{ font-style: italic; }


/* ---------------------------------------------------------------------------
   5 · SPEC — the reference's .stat, repurposed for measurements
   This book has almost no statistics but is dense with dimensions. The
   symbol trick (unit at 0.62em, raised) carries the imperial mark or mm.
   --------------------------------------------------------------------------- */
.gm-spec{
  max-width: var(--gm-measure);
  margin: var(--gm-u-3) auto;
  padding: var(--gm-u-2) 0;
  border-top: var(--gm-rule-weight) solid var(--gm-rule);
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule);
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 1.2fr;
  gap: var(--gm-u-3);
  align-items: end;
}
.gm-spec .gm-num,
.gm-spec-pair .gm-num{
  font-family: var(--gm-font-display);   /* 48-88px */
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--gm-accent);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.gm-spec .gm-unit,
.gm-spec-pair .gm-unit{           /* ″ ′ mm cm — the reference's .sym */
  font-size: 0.62em;
  margin-left: 0.04em;
  vertical-align: 0.16em;
  letter-spacing: -0.02em;
}
.gm-spec .gm-gloss,
.gm-spec-pair .gm-gloss{
  font-family: var(--gm-font-text);      /* 15px */
  font-style: italic;
  font-size: var(--gm-size-caption);
  line-height: var(--gm-leading-loose);
  color: var(--gm-ink);
  padding-bottom: 0.5em;
}
.gm-spec .gm-altunit,
.gm-spec-pair .gm-altunit{        /* the metric/imperial counterpart */
  display: block;
  font-style: normal;
  color: var(--gm-gray-tool);
}
.gm-spec .gm-source,
.gm-spec-pair .gm-source{
  display: block;
  margin-top: var(--gm-u);
  font-family: var(--gm-font-sans);
  font-style: normal;
  font-size: var(--gm-size-callout);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gm-gray-tool);
}

/* Two-up: the CL / SS comparison the book makes constantly */
.gm-spec-pair{
  max-width: var(--gm-measure);
  margin: var(--gm-u-3) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gm-u-3);
  border-top: var(--gm-rule-weight) solid var(--gm-rule);
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule);
  padding: var(--gm-u-2) 0;
}
.gm-spec-pair .gm-num{ font-size: clamp(2.25rem, 5vw, 3.5rem); }
.gm-spec-pair > * > .gm-track-cl,
.gm-spec-pair > * > .gm-track-ss{ margin-bottom: var(--gm-u); display: inline-block; }


/* ---------------------------------------------------------------------------
   6 · PULL QUOTE — principles only, roughly once per chapter
   Departure from the reference: NO 200px hanging quote mark. That is a
   magazine gesture and this is a reference work. The italic and the short
   red rule carry it.
   --------------------------------------------------------------------------- */
.gm-pullquote{
  max-width: var(--gm-measure);
  margin: var(--gm-u-6) auto;
  padding: 0;
  border: 0;
  position: relative;
}
.gm-pullquote q{
  display: block;
  font-family: var(--gm-font-subhead);   /* 24-34px */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.25;
  color: var(--gm-ink);
  margin: 0 0 var(--gm-u-2);
  quotes: none;
  text-wrap: balance;
}
.gm-pullquote q::before, .gm-pullquote q::after{ content: none; }
.gm-pullquote::after{        /* the short accent rule */
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--gm-accent);
}
.gm-pullquote cite{
  display: block;
  font-family: var(--gm-font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--gm-size-eyebrow);
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-gray-tool);
  margin-top: var(--gm-u-05);
}

/* Closing variant — chapter end. Centred, double-ruled. */
.gm-pullquote--closing{
  margin: var(--gm-u-8) auto var(--gm-u-6);
  padding: var(--gm-u-4) var(--gm-u-2) var(--gm-u-3);
  text-align: center;
  border-top: 3px double var(--gm-rule);
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule);
}
.gm-pullquote--closing::after{ margin: 0 auto; }
.gm-pullquote--closing q{ margin-inline: auto; }


/* ---------------------------------------------------------------------------
   7 · SECTION DIVIDER — in-chapter break
   The book uses white space the page can afford and a scroll cannot.
   A centred mark between two faded rules substitutes for it.
   The mark should be drawn from the book's own world (rosette motif or the
   Rosewood Press device), NOT a generic typographic fleuron.
   --------------------------------------------------------------------------- */
.gm-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gm-u-2);
  max-width: var(--gm-measure);
  margin: var(--gm-u-4) auto;
  color: var(--gm-accent);
}
.gm-divider::before, .gm-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gm-rule-light);
}
.gm-divider svg{ display: block; width: 1.75rem; height: 1.75rem; fill: currentColor; flex: none; }


/* ---------------------------------------------------------------------------
   8 · STANDFIRST — two columns, italic, once at the top of a chapter
   A nod to the book's two-column grid without forcing body text into columns.
   Collapses to one column below the md breakpoint.
   --------------------------------------------------------------------------- */
.gm-standfirst{
  max-width: var(--gm-measure);
  margin: 0 auto var(--gm-u-3);
  columns: 2;
  column-gap: var(--gm-u-3);
  font-family: var(--gm-font-serif);
  font-style: italic;
  font-size: var(--gm-size-secondary);
  line-height: var(--gm-leading-loose);
  color: var(--gm-ink);
}
.gm-standfirst p{ margin: 0 0 1em; max-width: none; text-indent: 0; }


/* ---------------------------------------------------------------------------
   9 · FIGURE + CAPTION
   Caption grid matches the aside's label column so figures and asides align.
   Terminal period follows caption LENGTH — see the style guide §2. Short
   captions are labels and take none; long captions are sentences and do.
   --------------------------------------------------------------------------- */
.gm-figure{
  margin: var(--gm-u-3) auto;
  background: var(--gm-paper);        /* line drawings always on true white */
}
.gm-figure img, .gm-figure svg{ display: block; width: 100%; height: auto; }
.gm-figure figcaption{
  margin-top: var(--gm-u);
  display: grid;
  grid-template-columns: var(--gm-label-col) 1fr;
  gap: var(--gm-u-2);
  align-items: baseline;
  font-family: var(--gm-font-text);      /* 15px */
  font-style: italic;
  font-size: var(--gm-size-caption);
  line-height: var(--gm-leading-loose);
  color: var(--gm-gray-tool);
}
.gm-figure figcaption .gm-fignum{
  font-family: var(--gm-font-sans);
  font-style: normal;
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-ink);
}
/* Figure widths — decoded from 357 size calls + 527 placements, guide §6.4 */
.gm-figure--column{ width: var(--gm-fig-column); }  /* column / 1-2 page — 41% of calls */
.gm-figure--wide  { width: var(--gm-fig-wide); }    /* 2-3 page — 45% of calls, THE WORKHORSE */
.gm-figure--full  { width: var(--gm-fig-full); }    /* full width — the text block */
.gm-figure--bleed { width: var(--gm-fig-bleed);     /* full page — out into the margins */
                    margin-inline: calc(-1 * var(--gm-page-inset)); }

/* Aspect presets — measured shares of the 790-asset corpus, guide 6.5 */
.gm-figure--3-2 img{ aspect-ratio: var(--gm-ar-3-2); object-fit: cover; }  /* 25% */
.gm-figure--4-3 img{ aspect-ratio: var(--gm-ar-4-3); object-fit: cover; }  /* 19% */
.gm-figure--1-1 img{ aspect-ratio: var(--gm-ar-1-1); object-fit: cover; }  /*  7% */
.gm-figure--3-4 img{ aspect-ratio: var(--gm-ar-3-4); object-fit: cover; }  /*  7% */
/* MANDATORY for the 19% on non-standard ratios. Never force these into a preset
   — it is what makes 6.1's "never crop a drawing" rule enforceable. */
.gm-figure--intrinsic img{ aspect-ratio: auto; height: auto; object-fit: contain; }


/* ---------------------------------------------------------------------------
   10 · STEP BLOCK — procedure
   From the YOUNG reference: the number, a red label, a title, and a rule
   whose weight encodes position in the sequence.
   The book's own step head is Minion Bold Italic — that is the type; this
   is the container.
   --------------------------------------------------------------------------- */
.gm-step{
  max-width: var(--gm-measure);
  margin: var(--gm-u-3) auto;
  padding-top: var(--gm-u);
  border-top: 2px solid var(--gm-accent);
}
.gm-step--later{ border-top-color: color-mix(in srgb, var(--gm-accent) 45%, transparent); }
.gm-step--last { border-top-color: color-mix(in srgb, var(--gm-accent) 20%, transparent); }
.gm-step .gm-step-num{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-accent);
  display: block;
  margin-bottom: var(--gm-u-05);
}
.gm-step .gm-step-title{
  font-family: var(--gm-font-subhead);   /* 21px */
  font-style: italic;
  font-weight: 700;
  font-size: var(--gm-size-step);
  line-height: var(--gm-leading-head);
  margin: 0 0 var(--gm-u);
}


/* ---------------------------------------------------------------------------
   11 · CREDIT LINE — four registers, one line
   BY · NAME · role · date. The project has three credit-holders and no
   pattern for them: Cumpiano (drawings), Herlitz (photography), Natelson.
   --------------------------------------------------------------------------- */
.gm-credit{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-gray-tool);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gm-u);
  align-items: baseline;
}
.gm-credit .gm-credit-name{ color: var(--gm-accent); font-weight: 600; }
.gm-credit .gm-credit-role{
  font-family: var(--gm-font-text);      /* 15px */
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--gm-size-caption);
  color: var(--gm-ink);
}


/* ---------------------------------------------------------------------------
   12 · CHAPTER INDEX ROW — the contents table
   Roman numeral · title in letterspaced caps · italic gloss · folio right.
   Roman numerals also solve the Afterword, which the book leaves unnumbered
   and the current site mislabels "chapter 17".
   --------------------------------------------------------------------------- */
.gm-index-row{
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--gm-u-2);
  align-items: baseline;
  padding: var(--gm-u) 0;
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule-light);
  text-decoration: none;
  color: inherit;
}
.gm-index-row .gm-roman{
  font-family: var(--gm-font-subhead);   /* 24px */
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gm-accent);
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
}
.gm-index-row .gm-index-title{
  font-family: var(--gm-font-text);      /* 20px */
  font-size: var(--gm-size-section);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: var(--gm-leading-head);
  display: block;
  margin-bottom: 0.2em;
}
.gm-index-row .gm-index-gloss{
  font-family: var(--gm-font-text);      /* 15px */
  font-style: italic;
  font-size: var(--gm-size-caption);
  color: var(--gm-ink);
  display: block;
}
.gm-index-row .gm-folio{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  letter-spacing: 0.2em;
  color: var(--gm-gray-tool);
  font-variant-numeric: tabular-nums;
}
.gm-index-row:hover .gm-index-title,
.gm-index-row:focus-visible .gm-index-title{ color: var(--gm-link); }


/* ---------------------------------------------------------------------------
   RESPONSIVE — every label-column grid collapses at the same breakpoint
   --------------------------------------------------------------------------- */
@media (max-width: 40rem){
  .gm-aside,
  .gm-panel,
  .gm-spec,
  .gm-spec-pair,
  .gm-figure figcaption{
    grid-template-columns: 1fr;
    gap: var(--gm-u);
  }
  .gm-standfirst{ columns: 1; }
  .gm-index-row{ grid-template-columns: 2.25rem 1fr; }
  .gm-index-row .gm-folio{ grid-column: 2; }
  .gm-figure--column, .gm-figure--wide{ max-width: 100%; }
  .gm-figure--bleed{ max-width: 100%; margin-inline: 0; }
  .gm-prose--opener > p:first-of-type::first-letter{ font-size: 4.2em; }
}


/* ---------------------------------------------------------------------------
   13 · TYPE ROLES
   Moved here from tokens.css in v0.6 — tokens.css owns tokens, base setting
   and surfaces; this file owns everything with a visual shape.
   --------------------------------------------------------------------------- */
.gm-chapter-title{
  font-family: var(--gm-font-display);   /* 36-52px */
  font-size: var(--gm-size-chapter);
  font-style: italic;
  font-weight: 600;
  line-height: var(--gm-leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--gm-u-2);
}
/* The book's own lockup: letterspaced caps above, italic title below.
   Minion has a real Semibold Italic Display cut — this is not a synthesised slant. */
.gm-chapter-eyebrow{
  font-family: var(--gm-font-display);   /* 28px - book's own exception, 3.2 */
  font-size: var(--gm-size-title);
  font-weight: 400;
  letter-spacing: var(--gm-track-display);
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 var(--gm-u);
}
.gm-section-head{
  font-family: var(--gm-font-caption);   /* 20px - book's own exception, 3.2 */
  font-size: var(--gm-size-section);
  font-style: italic;
  font-weight: 700;
  line-height: var(--gm-leading-head);
  margin: var(--gm-u-3) 0 var(--gm-u);
}
.gm-caption{
  font-family: var(--gm-font-text);      /* 15px */
  font-style: italic;
  font-size: var(--gm-size-caption);
  line-height: var(--gm-leading-loose);
  color: var(--gm-gray-tool);
}
/* Labels inside line drawings. The ONLY place the sans appears at this size. */
.gm-figure-callout{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-callout);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   14 · TECHNICAL DRAWING — strokes, callouts, leaders
   For SVG the site authors. The legacy line art is raster and stays raster;
   anything new is vector from the start (navigators, CL/SS comparisons,
   spec charts, the fret calculator).
   --------------------------------------------------------------------------- */
svg.gm-drawing{ display:block; width:100%; height:auto; overflow:visible; color:var(--gm-ink); }

svg.gm-drawing .gm-object   { stroke:var(--gm-ink); stroke-width:var(--gm-stroke-object);  fill:none; }
svg.gm-drawing .gm-section  { stroke:var(--gm-ink); stroke-width:var(--gm-stroke-section); fill:none; }
svg.gm-drawing .gm-hidden   { stroke:var(--gm-ink); stroke-width:var(--gm-stroke-hair);
                              stroke-dasharray:var(--gm-dash-hidden); fill:none; }
svg.gm-drawing .gm-dimension{ stroke:var(--gm-gray-tool); stroke-width:var(--gm-stroke-hair); fill:none; }
svg.gm-drawing .gm-division { stroke:var(--gm-gray-tool); stroke-width:var(--gm-stroke-hair);
                              stroke-dasharray:var(--gm-dash-division); fill:none; }

/* The connector the book draws in ink and we had never specified. */
svg.gm-drawing .gm-leader{ stroke:var(--gm-gray-tool); stroke-width:var(--gm-stroke-hair); fill:none; }
svg.gm-drawing .gm-leader-dot{ fill:var(--gm-ink); }

/* Callout labels inside drawings — the ONLY place the sans appears this small */
svg.gm-drawing .gm-callout{
  font-family:var(--gm-font-sans);
  font-size:11px; font-weight:500; letter-spacing:.04em;
  fill:var(--gm-ink);
}
svg.gm-drawing .gm-callout--track-cl{ fill:var(--gm-track-classical); }
svg.gm-drawing .gm-callout--track-ss{ fill:var(--gm-track-steelstring); }

/* Data marks — semantic, never brand-decorative */
svg.gm-drawing .gm-axis     { stroke:var(--gm-data-axis); stroke-width:var(--gm-stroke-object); fill:none; }
svg.gm-drawing .gm-grid     { stroke:var(--gm-data-grid); stroke-width:var(--gm-stroke-hair);   fill:none; }
svg.gm-drawing .gm-featured { fill:var(--gm-data-featured); }
svg.gm-drawing .gm-secondary{ fill:var(--gm-data-secondary); }
svg.gm-drawing .gm-tertiary { fill:var(--gm-data-tertiary); }
svg.gm-drawing .gm-muted    { fill:var(--gm-data-muted); }
svg.gm-drawing .gm-tick,
svg.gm-drawing .gm-datavalue{
  font-family:var(--gm-font-sans); font-size:11px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  fill:var(--gm-gray-tool);
}
svg.gm-drawing .gm-datavalue{ font-weight:500; fill:var(--gm-ink); }


/* ---------------------------------------------------------------------------
   15 · PRINT — the site hands a page back
   A book brand should print well. The 1:1 templates already prove readers
   want this; a tool list or a single procedure at the bench is the same need.
   Trim is the BOOK's proportion, not A4.
   --------------------------------------------------------------------------- */
@media print{
  @page{ size:9.5in 12in; margin:1.5in 1.46in 1.95in; }   /* the book's own trim + margins */
  @page :first{ margin:0; }

  html, body{
    background:var(--gm-paper) !important;
    color:var(--gm-ink) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    font-size:11pt; line-height:1.27;                      /* the book's own 11/14 */
  }

  /* Chrome the reader does not need on paper */
  nav, .gm-surface-identity, .gm-track-switch,
  [data-print="hide"]{ display:none !important; }

  /* Keep things whole */
  .gm-figure, .gm-panel, .gm-aside, .gm-spec,
  .gm-spec-pair, .gm-step, .gm-pullquote{ break-inside:avoid; }
  .gm-chapter-title, .gm-section-head, .gm-step-title{ break-after:avoid; }
  .gm-chapter-eyebrow{ break-before:page; }

  /* Figures print at true white so line art stays clean */
  .gm-figure{ background:#fff !important; }
  .gm-figure--bleed{ width:100%; margin-inline:0; }

  /* Resolve links so a printed page is still usable */
  .gm-surface-reading a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-family:var(--gm-font-sans); font-size:8pt; color:var(--gm-gray-tool);
    word-break:break-all;
  }
}

/* ---------------------------------------------------------------------------
   16 · TRACK SWITCH — the site's single most important control
   Design language, Move I. 64% of the book's pages carry a CL/SS distinction
   and 36% discuss both at once. The book must print both paths; the site asks
   once and remembers.

   HONEST DEGRADATION IS NOT OPTIONAL:
     - no choice made      -> BOTH tracks render (the book's own behaviour)
     - JS unavailable      -> BOTH tracks render
     - crawlers            -> see both; never gate content behind the switch
   The switch REVEALS a preference, it does not fetch. Content ships complete.
   --------------------------------------------------------------------------- */
.gm-track-switch{
  display: flex;
  align-items: center;
  gap: var(--gm-u);
  padding: var(--gm-u) 0;
  border-top: var(--gm-rule-weight) solid var(--gm-rule);
  border-bottom: var(--gm-rule-weight) solid var(--gm-rule);
  margin: var(--gm-u-3) 0;
}
.gm-track-switch .gm-track-label{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--gm-track-eyebrow);
  text-transform: uppercase;
  color: var(--gm-gray-tool);
}
.gm-track-switch .gm-seg{ display: flex; border: 1px solid var(--gm-ink); }
.gm-track-switch button{
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5em 1.15em;
  border: 0;
  background: transparent;
  color: var(--gm-ink);
  cursor: pointer;
}
.gm-track-switch button + button{ border-left: 1px solid var(--gm-ink); }
.gm-track-switch button[aria-pressed="true"]{
  background: var(--gm-track-classical);
  color: var(--gm-paper-warm);
}
.gm-track-switch button[data-track="ss"][aria-pressed="true"]{
  background: var(--gm-track-steelstring);
}

/* Track-scoped content. Default: EVERYTHING shows. A choice narrows it. */
[data-track="cl"] .gm-only-ss,
[data-track="ss"] .gm-only-cl{ display: none; }

/* When both are showing, each needs its own badge so they stay distinguishable */
.gm-only-cl > .gm-track-cl:first-child,
.gm-only-ss > .gm-track-ss:first-child{ margin-bottom: var(--gm-u); display: inline-block; }

/* An inline aside that applies to one track only, mid-paragraph */
.gm-track-note{
  border-left: 2px solid var(--gm-track-classical);
  padding-left: var(--gm-u);
  margin: var(--gm-u) 0;
}
.gm-track-note--ss{ border-left-color: var(--gm-track-steelstring); }

@media print{
  /* Paper cannot switch. Print what the reader chose; if they chose nothing,
     print both — same rule as the no-JS case. */
  .gm-track-switch{ display: none; }
}


/* ---------------------------------------------------------------------------
   17 · MARGINALIA — the deep margin does the work of a running head
   Design language, Move VI. The book holds 15.8% of the page empty and that
   emptiness is most of why it feels considered. The reading measure is never
   touched; the margin carries where-am-I.
   --------------------------------------------------------------------------- */
.gm-with-margin{
  display: grid;
  grid-template-columns: var(--gm-label-col) minmax(0, 1fr);
  gap: var(--gm-u-2);
  align-items: start;
}
.gm-marginalia{
  position: sticky;
  top: var(--gm-u-2);
  font-family: var(--gm-font-sans);
  font-size: var(--gm-size-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-gray-tool);
  line-height: 1.6;
}
.gm-marginalia .gm-roman{
  display: block;
  font-family: var(--gm-font-subhead);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gm-accent);
  margin-bottom: var(--gm-u-05);
}
.gm-marginalia .gm-margin-track{ display: block; margin-top: var(--gm-u); }

/* Below the collapse point the margin has nowhere to go — design this state
   first, because a phone is where the builder actually is. */
@media (max-width: 44rem){
  .gm-with-margin{ grid-template-columns: 1fr; gap: var(--gm-u); }
  .gm-marginalia{
    position: static;
    display: flex; align-items: baseline; gap: var(--gm-u);
    padding-bottom: var(--gm-u-05);
    border-bottom: var(--gm-rule-weight) solid var(--gm-rule-light);
  }
  .gm-marginalia .gm-roman{ display: inline; font-size: 1.15rem; margin: 0; }
  .gm-marginalia .gm-margin-track{ display: inline; margin: 0 0 0 auto; }
}


/* ---------------------------------------------------------------------------
   18 · SECTION DIVIDER MARK — resolves guide 7.3 rule 8
   The mark is a ROSETTE, drawn from the book's own subject: concentric rings
   with a soundhole void. Not a generic typographic fleuron, and not Minion's
   ornament set — those are lovely and belong to Slimbach's world, not to a
   guitar. Inline SVG so it inherits currentColor and scales cleanly.

   <span class="gm-divider">
     <svg class="gm-rosette" viewBox="0 0 32 32" aria-hidden="true">
       <circle cx="16" cy="16" r="12.5" class="gm-object"/>
       <circle cx="16" cy="16" r="10"   class="gm-dimension"/>
       <circle cx="16" cy="16" r="6.5"  class="gm-object"/>
       <circle cx="16" cy="16" r="2.2"  class="gm-fill"/>
     </svg>
   </span>
   --------------------------------------------------------------------------- */
.gm-rosette{ width: 1.75rem; height: 1.75rem; display: block; overflow: visible; }
.gm-rosette .gm-object   { stroke: currentColor; stroke-width: var(--gm-stroke-object);  fill: none; }
.gm-rosette .gm-dimension{ stroke: currentColor; stroke-width: var(--gm-stroke-hair);    fill: none; opacity: .6; }
.gm-rosette .gm-fill     { fill: currentColor; stroke: none; }

/* ===========================================================================
   19 · CONTROLS — buttons, links, fields, chips, rows
   v0.9. A manual is static; a website is not. Every control has five states:
   rest, hover, active, focus-visible, disabled. Motion is state feedback only
   — 90-140ms — never entrances or reveals.
   =========================================================================== */

.gm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:var(--gm-control-h);
  padding:0 calc(var(--gm-control-pad) * 1.6);
  font-family:var(--gm-font-caption);
  font-size:var(--gm-size-label);
  font-weight:var(--gm-weight-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  border:var(--gm-border) solid transparent;
  cursor:pointer;
  transition:background-color var(--gm-t-base) var(--gm-ease),
             border-color var(--gm-t-base) var(--gm-ease),
             color var(--gm-t-base) var(--gm-ease);
}
.gm-btn:disabled,.gm-btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; pointer-events:none;
}

/* --- Reading surface --- */
.gm-surface-reading .gm-btn,
.gm-btn--primary{ background:var(--gm-ink); color:var(--gm-paper-warm); }
.gm-surface-reading .gm-btn:hover,
.gm-btn--primary:hover{ background:var(--gm-ink-hover); }
.gm-surface-reading .gm-btn:active,
.gm-btn--primary:active{ background:var(--gm-ink); transform:translateY(.5px); }

.gm-btn--secondary{
  background:transparent; color:var(--gm-ink); border-color:var(--gm-ink);
}
.gm-btn--secondary:hover{ background:var(--gm-panel); }
.gm-btn--secondary:active{ background:var(--gm-panel-hover); }

.gm-btn--quiet{
  background:transparent; color:var(--gm-link); border-color:transparent;
  padding-inline:calc(var(--gm-control-pad) * .6);
}
.gm-btn--quiet:hover{ color:var(--gm-link-hover); background:var(--gm-tint-1); }

/* The reading surface fills every .gm-btn with ink (0-2-0), which outranks the
   bare variant classes (0-1-0) — so on paper `secondary` and `quiet` were both
   rendering as solid ink fills. Restated at surface specificity, exactly as the
   identity surface already does for its own secondary. */
.gm-surface-reading .gm-btn--secondary{
  background:transparent; color:var(--gm-ink); border-color:var(--gm-ink);
}
.gm-surface-reading .gm-btn--secondary:hover{ background:var(--gm-panel); }
.gm-surface-reading .gm-btn--secondary:active{ background:var(--gm-panel-hover); }
.gm-surface-reading .gm-btn--quiet{
  background:transparent; color:var(--gm-link); border-color:transparent;
  padding-inline:calc(var(--gm-control-pad) * .6);
}
.gm-surface-reading .gm-btn--quiet:hover{ color:var(--gm-link-hover); background:var(--gm-tint-1); }

/* --- Identity surface: amber is monochrome, so buttons are ink fills --- */
.gm-surface-identity .gm-btn{ background:var(--gm-ink); color:var(--gm-amber); border-color:transparent; }
.gm-surface-identity .gm-btn:hover{ background:var(--gm-ink-hover); }
.gm-surface-identity .gm-btn--secondary{
  background:transparent; color:var(--gm-ink); border-color:var(--gm-ink);
}
.gm-surface-identity .gm-btn--secondary:hover{ background:var(--gm-amber-hover); }
.gm-surface-identity .gm-btn--secondary:active{ background:var(--gm-amber-active); }

/* --- Links --- */
.gm-surface-reading a:hover{ color:var(--gm-link-hover); text-decoration-thickness:2px; }
.gm-surface-reading a:active{ color:var(--gm-link-active); }
.gm-surface-identity a:hover{ text-decoration-thickness:2px; }

/* Row-level anchors are ROWS, not links. Both .gm-index-row and .gm-row already
   declare `color:inherit; text-decoration:none`, but a bare class (0-1-0) loses
   to `.gm-surface-reading a` (0-1-1) — so every contents row and every directory
   row was rendering red and underlined at rest. Restated here at surface
   specificity. The intended hover still lands: `.gm-index-row:hover
   .gm-index-title` reddens the title, and `.gm-row:hover` tints the ground. */
.gm-surface-reading a.gm-index-row,
.gm-surface-reading a.gm-index-row:hover,
.gm-surface-reading a.gm-row,
.gm-surface-reading a.gm-row:hover,
.gm-surface-identity a.gm-index-row,
.gm-surface-identity a.gm-row{
  color: inherit;
  text-decoration: none;
}

/* --- Fields --- */
.gm-field{ display:block; margin:0 0 var(--gm-u-2); max-width:24rem; }
.gm-field > .gm-field-label{
  display:block;
  font-family:var(--gm-font-sans);
  font-size:var(--gm-size-eyebrow);
  font-weight:600; letter-spacing:var(--gm-track-eyebrow);
  text-transform:uppercase; color:var(--gm-gray-tool);
  margin:0 0 var(--gm-u-05);
}
.gm-input,.gm-select,.gm-textarea{
  width:100%; min-height:var(--gm-control-h);
  padding:0 var(--gm-control-pad);
  font-family:var(--gm-font-text);
  font-size:var(--gm-size-body);
  color:var(--gm-ink);
  background:var(--gm-paper);
  border:var(--gm-border) solid var(--gm-rule-light);
  border-radius:0;
  transition:border-color var(--gm-t-base) var(--gm-ease), background-color var(--gm-t-base) var(--gm-ease);
}
.gm-textarea{ padding:var(--gm-control-pad); min-height:7rem; line-height:var(--gm-leading-body); }
.gm-input:hover,.gm-select:hover,.gm-textarea:hover{ border-color:var(--gm-gray-tool); }
.gm-input:focus,.gm-select:focus,.gm-textarea:focus{
  outline:2px solid var(--gm-focus); outline-offset:1px;
  border-color:var(--gm-ink); background:var(--gm-paper);
}
.gm-input::placeholder{ color:var(--gm-gray-tool); opacity:.75; font-style:italic; }
.gm-field--error .gm-input{ border-color:var(--gm-status-alert); border-width:2px; }
.gm-field-msg{
  display:block; margin-top:var(--gm-u-05);
  font-family:var(--gm-font-text); font-style:italic;
  font-size:var(--gm-size-caption); color:var(--gm-status-alert);
}
.gm-input:disabled{ background:var(--gm-panel); color:var(--gm-gray-tool); cursor:not-allowed; }

/* --- Filter chips: the supplier directory's main control --- */
.gm-chip{
  display:inline-flex; align-items:center; gap:.4em;
  min-height:2.25rem; padding:0 .85em;
  font-family:var(--gm-font-sans); font-size:var(--gm-size-eyebrow);
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gm-ink); background:transparent;
  border:var(--gm-border) solid var(--gm-rule-light);
  cursor:pointer;
  transition:background-color var(--gm-t-fast) var(--gm-ease), border-color var(--gm-t-fast) var(--gm-ease);
}
.gm-chip:hover{ border-color:var(--gm-ink); background:var(--gm-tint-1); }
.gm-chip[aria-pressed="true"]{ background:var(--gm-ink); color:var(--gm-paper-warm); border-color:var(--gm-ink); }
.gm-chip[aria-pressed="true"]:hover{ background:var(--gm-ink-hover); }

/* --- Status pill: the directory must LOOK maintained --- */
.gm-status{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--gm-font-sans); font-size:var(--gm-size-callout);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.25em .6em; color:var(--gm-paper-warm);
}
.gm-status::before{ content:""; width:.45em; height:.45em; background:currentColor; border-radius:50%; }
.gm-status--verified{ background:var(--gm-status-verified); }
.gm-status--caution { background:var(--gm-status-caution); }
.gm-status--retired { background:var(--gm-status-retired); }
.gm-status--alert   { background:var(--gm-status-alert); }

/* --- Clickable row: directory entries, chapter index --- */
.gm-row{
  display:block; text-decoration:none; color:inherit;
  padding:var(--gm-u) var(--gm-u);
  margin-inline:calc(var(--gm-u) * -1);
  border-bottom:var(--gm-rule-weight) solid var(--gm-rule-light);
  transition:background-color var(--gm-t-fast) var(--gm-ease);
}
.gm-row:hover{ background:var(--gm-tint-1); }
.gm-row:active{ background:var(--gm-tint-2); }

/* --- Nav --- */
.gm-nav{ display:flex; flex-wrap:wrap; gap:0 var(--gm-u-2); }
.gm-nav a{
  font-family:var(--gm-font-sans); font-size:var(--gm-size-eyebrow);
  font-weight:600; letter-spacing:var(--gm-track-eyebrow); text-transform:uppercase;
  text-decoration:none; color:var(--gm-ink);
  padding:var(--gm-u-05) 0; border-bottom:2px solid transparent;
  transition:border-color var(--gm-t-base) var(--gm-ease), color var(--gm-t-base) var(--gm-ease);
}
.gm-nav a:hover{ border-bottom-color:var(--gm-accent); }
.gm-nav a[aria-current="page"]{ border-bottom-color:var(--gm-accent); color:var(--gm-accent); }
/* Amber is monochrome: the accent red is 2.90:1 on it and fails. The current
   item keeps its accent underline but the LABEL stays ink, per the surface rule
   the rest of the system already honours. */
.gm-surface-identity .gm-nav a[aria-current="page"]{ color:var(--gm-ink); }

/* --- Honour the user's motion preference --- */
@media (prefers-reduced-motion:reduce){
  .gm-btn,.gm-chip,.gm-row,.gm-nav a,.gm-input,.gm-select,.gm-textarea{ transition:none; }
  .gm-btn:active{ transform:none; }
}