/* enspinors.com — the Academy.
 *
 * A reading site that happens to be about instruments. The writing is the subject; the
 * instruments appear as the diagrams themselves and as one accent colour, and nowhere else.
 * The app's phosphor green is present but held down to a signal rather than a skin — nine
 * articles cannot be read on a CRT.
 *
 * seed: coolsoft/AGENTS.md
 */

/* ---- tokens: light. paper with a faint green cast, so the accent belongs to it ---- */
:root{
  --paper:#F1F2EE;
  --sheet:#FBFBF9;
  --ink:#17201C;
  --ink-2:#42514A;
  --ink-3:#6E7C75;
  --rule:#D3D8D2;
  --rule-soft:#E2E6E0;
  --signal:#1F6B4A;          /* the line's colour, legible on paper */
  --signal-soft:#DCE9E1;
  --amber:#8A5A12;
  --sc-ink:#2A3630;
}
/* ---- tokens: dark. the same page at night, the signal now actually luminous ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1513;
    --sheet:#141C19;
    --ink:#DDE5E0;
    --ink-2:#A5B2AB;
    --ink-3:#77857E;
    --rule:#25322C;
    --rule-soft:#1B2621;
    --signal:#5FD39B;
    --signal-soft:#13251C;
    --amber:#D9A557;
    --sc-ink:#C3CEC8;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1513;
  --sheet:#141C19;
  --ink:#DDE5E0;
  --ink-2:#A5B2AB;
  --ink-3:#77857E;
  --rule:#25322C;
  --rule-soft:#1B2621;
  --signal:#5FD39B;
  --signal-soft:#13251C;
  --amber:#D9A557;
  --sc-ink:#C3CEC8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Charter,Georgia,serif;
  font-size:18px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---- the wordmark: real text, with the eye drawn over the dotless i ---- */
.mark{
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-weight:600;letter-spacing:-.005em;
  display:inline-block;line-height:1;white-space:nowrap;
  color:var(--ink);text-decoration:none;
}
.mark .dotless{position:relative;display:inline-block}
.mark .eye{
  position:absolute;left:50%;top:-.62em;transform:translateX(-50%);
  width:.92em;height:.52em;overflow:visible;
}
.mark .eye .lid{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mark .eye .iris{fill:var(--signal)}

/* The mark is drawn from three pieces so the eye can sit over the dotless i; screen readers
   and search engines get the whole word instead of the fragments. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- layout ---- */
.shell{max-width:1080px;margin:0 auto;padding:0 28px}
/* The reading column is centred rather than flush left: a 34rem measure inside a 1080px shell
   leaves half the page empty, and an off-centre column reads as a layout that lost an aside
   rather than one that chose a measure. */
.measure{max-width:34rem;margin-left:auto;margin-right:auto}

header.site{
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
}
header.site .row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  /* padding-block only: the shorthand was resetting .shell's horizontal padding to 0, which
     let the wordmark run off the left edge on a phone. */
  padding-block:14px;
}
header.site .mark{flex:0 0 auto}
nav.site{flex:0 1 auto;min-width:0}
header.site .mark{font-size:20px}
nav.site{display:flex;gap:22px;align-items:center}
nav.site a{
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:14px;
  color:var(--ink-2);text-decoration:none;letter-spacing:.005em;
}
nav.site a:hover{color:var(--ink)}
nav.site a.buy{
  color:var(--signal);border:1px solid var(--signal);border-radius:2px;
  padding:5px 12px;
}
nav.site a.buy:hover{background:var(--signal-soft);color:var(--signal)}

/* On a phone the row cannot hold the mark and three links at full size — it overflowed and
   clipped the wordmark off the left edge. The mark keeps its size (it is the identity); the
   nav gives ground. */
@media(max-width:640px){
  .shell{padding:0 18px}
  header.site .row{gap:12px}
  header.site .mark{font-size:18px}
  nav.site{gap:14px}
  nav.site a{font-size:13px}
  nav.site a[href="/academy/"]{display:none}
  nav.site a.buy{padding:5px 10px}
}
@media(max-width:480px){
  nav.site a[href="/support"]{display:none}
}

a{color:var(--signal);text-underline-offset:2px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* ---- small caps: the source's UPPERCASE runs are emphasis, not shouting ---- */
.sc{
  font-variant-caps:all-small-caps;
  letter-spacing:.06em;
  color:var(--sc-ink);
  font-weight:600;
}

/* ---- type scale ---- */
h1,h2,h3{font-family:"Instrument Sans",system-ui,sans-serif;text-wrap:balance;font-weight:600}
h1{font-size:clamp(32px,5vw,50px);line-height:1.06;letter-spacing:-.018em;margin:0 0 14px}
h2{font-size:clamp(21px,2.6vw,26px);line-height:1.2;letter-spacing:-.008em;margin:44px 0 12px}
h3{font-size:18px;margin:28px 0 8px}
p{margin:0 0 20px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 14px;
}
.standfirst{font-size:clamp(19px,2.2vw,22px);line-height:1.45;color:var(--ink-2);margin:0 0 26px}

/* ---- the opening: one line, many sciences ---- */
.opening{
  position:relative;
  border-bottom:1px solid var(--rule);
  background:var(--sheet);
}
.opening canvas{display:block;width:100%;height:260px}
.opening .caption{
  position:absolute;left:28px;bottom:10px;margin:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  pointer-events:none;
}
.opening .caption b{color:var(--signal);font-weight:500}
@media(max-width:640px){
  .opening canvas{height:200px}
  .opening .caption{left:18px;font-size:10.5px;letter-spacing:.1em}
}

/* ---- article index ---- */
.index{
  display:grid;gap:0;margin:8px 0 0;
  border-top:1px solid var(--rule);
}
.index a.entry{
  display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;
}
.index a.entry:hover{background:var(--sheet)}
.index .t{font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;font-size:19px;color:var(--ink)}
.index .s{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.45;margin-top:3px;max-width:52ch}
.index .meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.index a.entry.real .t{color:var(--amber)}

/* ---- the listen bar ---- */
.listen{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--rule);border-radius:2px;background:var(--sheet);
  padding:12px 14px;margin:0 0 34px;
}
button.play{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:14.5px;font-weight:600;
  background:var(--signal);color:var(--paper);border:0;border-radius:2px;
  padding:8px 15px;cursor:pointer;
}
button.play:hover{filter:brightness(1.08)}
.listen .who{font-size:14.5px;color:var(--ink-2)}
.listen .who b{font-weight:600;color:var(--ink)}
.listen .dur{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums;
}

/* ---- article body ---- */
article.piece{padding:44px 0 80px}
article.piece .seen{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding-top:14px;border-top:1px solid var(--rule);margin-top:0;
}
section.part{margin:0 0 10px;scroll-margin-top:80px}
section.part.playing{position:relative}
section.part.playing::before{
  content:"";position:absolute;left:-20px;top:.55em;bottom:.3em;width:2px;
  background:var(--signal);border-radius:2px;
}
@media(max-width:720px){ section.part.playing::before{left:-14px} }

/* ---- the diagram ---- */
figure.diagram{
  max-width:46rem;margin:34px auto;padding:0;
  border:1px solid var(--rule);border-radius:2px;background:var(--sheet);
  overflow:hidden;
}
figure.diagram canvas{display:block;width:100%;height:240px}
figure.diagram figcaption{
  border-top:1px solid var(--rule-soft);padding:10px 14px;
  font-size:14px;color:var(--ink-2);
}
figure.diagram .ctl{
  border-top:1px solid var(--rule-soft);padding:10px 14px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
figure.diagram label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:9px;
}
figure.diagram input[type=range]{accent-color:var(--signal);width:130px}
/* The harmonic bank stands the sliders up, because a recipe of harmonics IS a bar chart and
   should be read as one. `writing-mode` is the supported way to do it; rotating with a
   transform leaves the hit area lying on its side and the thumbs overlapping. */
.bank{
  display:grid;grid-template-columns:repeat(2,auto);gap:4px 20px;align-items:center;
}
.bank .row{display:flex;align-items:center;gap:8px}
.bank .n{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3);
  width:1.1em;text-align:right;font-variant-numeric:tabular-nums;
}
figure.diagram .bank input[type=range]{
  width:92px;height:14px;margin:0;accent-color:var(--signal);
}
@media(max-width:560px){ .bank{grid-template-columns:auto} }
figure.diagram output{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.5em;
}

/* ---- the app, mentioned once, at the end ---- */
.coda{
  border-top:1px solid var(--rule);margin-top:56px;padding-top:26px;
}
.coda h2{margin-top:0}
.coda .price{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
  color:var(--ink-3);letter-spacing:.08em;
}

footer.site{
  border-top:1px solid var(--rule);margin-top:64px;padding:26px 0 54px;
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:14px;color:var(--ink-3);
}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site .row{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
footer.site .row .sp{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}