/* ---------- self-hosted fonts ----------
   Served from this origin so the CSP can stay at 'self', and so Google
   never sees who visits. Both are variable fonts: one file per family
   covers the whole weight range. Licensed under the SIL Open Font License. */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
}

/* ==========================================================================
   Amputshirts shared stylesheet
   Type: pairing three (Space Grotesk display / IBM Plex Sans body)
   Colour: palette D, full spectrum. Flat only, no gradients anywhere.

   Rule that bit us once already: .wrap owns HORIZONTAL space, layout classes
   own VERTICAL space. Never use shorthand `padding` on either, or one silently
   wipes the other's axis.
   ========================================================================== */

:root{
  --paper:#faf8f4; --card:#ffffff; --line:#e4ded4;
  --ink:#17140f; --ink-soft:#524a40; --ink-faint:#6f6659;
  --red:#e23c22; --gold:#f5b301; --green:#2faa52; --cyan:#17a9d4;
  --focus:#1a6feb;
  --max:64rem;
  --display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-0.03em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,6.6vw,4rem);font-weight:700;text-wrap:balance}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;padding-top:.15em}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.02em}
p{margin:0 0 1em;max-width:34em}

/* .wrap: horizontal only */
.wrap{max-width:var(--max);margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:.5rem;padding:.6rem 1rem;
  background:var(--red);color:#fff}

/* ---------- header ---------- */
.site-head{border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:10;background:#fff}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:62px;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
.wordmark{display:block;line-height:0;text-decoration:none}
.wordmark img{height:26px;width:auto}
.site-head nav{display:flex;gap:1.15rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:500;font-size:.88rem}
.site-head nav a{text-decoration:none;border-bottom:2px solid transparent;padding:2px 0}
.site-head nav a:hover{border-bottom-color:var(--red)}
.site-head nav a[aria-current="page"]{border-bottom-color:var(--ink)}

/* ---------- section rhythm: vertical only ---------- */
section{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* section markers rotate through the spectrum */
.mark{display:block;width:2.6rem;height:5px;border-radius:3px;margin-bottom:.75rem;
  background:var(--red)}
.mark.gold{background:var(--gold)}
.mark.green{background:var(--green)}
.mark.cyan{background:var(--cyan)}

/* the spectrum, used as punctuation rather than decoration */
.spectrum{display:flex;gap:5px;margin:0 0 1.75rem}
.spectrum span{width:30px;height:5px;border-radius:3px}

/* ---------- bits ---------- */
.tag{display:inline-block;font-family:var(--display);font-weight:500;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.25rem}

.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;letter-spacing:-0.01em;
  padding:.85rem 1.6rem;border-radius:4px;border:2px solid var(--red);
  font-size:1rem;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);filter:none}

.lede{font-size:clamp(1.05rem,2.5vw,1.25rem);color:var(--ink-soft);max-width:30em}
.lede strong{color:var(--ink);font-weight:600}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-top:2.5rem;padding-bottom:3.5rem;
  font-size:.88rem;color:var(--ink-faint);line-height:1.75;margin-top:1rem}
.site-foot a{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}