/* ==========================================================================
Guitar Thing — site styles. Needs tokens.css loaded first.
Sections: fonts · base · layout · header · footer · buttons & links ·
home hero · hero facts · content blocks · video · tool cards ·
tool page + controls · utilities
========================================================================== */
/* ---------- Fonts (self-hosted, SIL Open Font License — see fonts/) ------ */
@font-face { font-family: "Abril Fatface"; src: url("fonts/abril-fatface-latin-400-normal.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-latin-wght-italic.woff2") format("woff2");
font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap; }
/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font: 400 var(--fs-md)/var(--lh-body) var(--font-body);
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-snug); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .005em; }
h2 { font-size: var(--fs-2xl); line-height: 1.08; }
h3 { font-size: var(--fs-xl); font-weight: 700; }
p { margin: 0; }
p, li { text-wrap: pretty; }
a { color: var(--orange-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--orange-deep-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange); color: var(--ink); }
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 50; background: var(--ink); color: var(--cream);
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--sp-4); }
/* ---------- Layout ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-8); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); max-width: var(--measure); }
.prose { max-width: var(--measure); display: grid; gap: var(--sp-4); }
.eyebrow { font: 700 var(--fs-xs)/1.3 var(--font-tag); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--tobacco); }
.lede { font-size: var(--fs-lg); line-height: 1.5; }
.fine { font-size: var(--fs-sm); color: var(--muted); }
.stack { display: grid; gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .section { padding-block: var(--sp-7); } }
/* ---------- Header ------------------------------------------------------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.brand:hover { color: var(--ink); }
/* Logo slot: fixed 26×30 box. Drop the real pick logo (![]()
or