/* SPDX-License-Identifier: GPL-3.0-only */
/* MONO2K's page. One 12-column grid (the dotted rules show where each column starts), one 8 px spacing scale,
 * line heights on a 4 px rhythm, five text sizes:
 *   label 11   Helvetica bold, uppercase, tracked
 *   small 14   Helvetica
 *   text  17   Helvetica, for reading
 *   title 24   Orbitron black, uppercase
 *   display    Orbitron black, uppercase (section titles, START); the section numbers in Orbitron regular
 * Orbitron is always uppercase and only for titles, numbers and the instrument's name. */
@font-face { font-family: "Orbitron"; src: url(fonts/Orbitron.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/InterTight-400.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonts/InterTight-600.woff) format("woff"); font-weight: 600 900; font-display: swap; }

:root {
  --ink: #0b0b0b;
  --paper: #f2f1ec;
  --inv-ink: #f2f1ec;            /* a block set against the page: the other theme's colours */
  --inv-paper: #0b0b0b;
  --head: "Orbitron", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  /* space */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px; --s24: 192px;
  --gut: var(--s2);
  /* type */
  --label: 700 11px / 16px var(--text);
  --small: 400 14px / 20px var(--text);
  --body: 400 17px / 24px var(--text);
  --title: 900 24px / 28px var(--head);
  --display: 900 clamp(40px, 5.6vw, 64px) / 1 var(--head);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #f2f1ec; --paper: #0b0b0b; --inv-ink: #0b0b0b; --inv-paper: #f2f1ec; color-scheme: dark; }
}
:root[data-theme="dark"] { --ink: #f2f1ec; --paper: #0b0b0b; --inv-ink: #0b0b0b; --inv-paper: #f2f1ec; color-scheme: dark; }
.inv { --ink: var(--inv-ink); --paper: var(--inv-paper); background: var(--paper); color: var(--ink); }

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
p, h2, h3, dl, dd, ol { margin: 0; }

/* the text styles */
.label, .read dt, .keys h3, .mcard .meta, .mcard ol, .themebtn,
.tracks li, .pats button { font: var(--label); text-transform: uppercase; letter-spacing: 0.1em; }
.small { font: var(--small); }
.lede { font: var(--body); max-width: 40em; }
.title { font: var(--title); text-transform: uppercase; letter-spacing: 0.01em; }
.display { font: var(--display); text-transform: uppercase; letter-spacing: 0; }

/* the grid: twelve columns with the gutter; the rules mark each column's start */
.bar, .hero__sub, .play, .sec, .rules {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding-left: var(--gut); padding-right: var(--gut);
}
.rules { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rules i { border-left: 1px dotted var(--ink); opacity: 0.2; }

/* the bars, top and foot: four labels, three columns each */
.bar { position: relative; z-index: 1; align-items: center; min-height: var(--s6); border-bottom: 1px solid var(--ink); }
.bar > * { grid-column: span 3; }
.bar.foot { border-bottom: 0; border-top: 1px solid var(--ink); margin-top: var(--s8); }
/* the author, elsewhere: six cells of two columns, above the foot */
.links { margin-top: var(--s8); border-top: 3px solid var(--ink); }
.links > * { grid-column: span 2; }
.links + .foot { margin-top: 0; }
.links a { color: var(--ink); text-decoration: none; }
.links a::after { content: " \2197"; }
.links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.r { text-align: right; }
.themebtn {
  display: inline-flex; align-items: center; gap: var(--s1); height: var(--s4); padding: 0 var(--s1);
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink); cursor: pointer;
}
.themebtn::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 50%, transparent 50%), var(--d-check);
  background-size: 100% 100%, 2px 2px; image-rendering: pixelated;
}
.themebtn:hover { background: var(--ink); color: var(--paper); }
.themebtn:hover::before { border-color: var(--paper); }

/* the hero: the wordmark across the grid, then the kicker (4 columns) and the lede (7) */
.hero { position: relative; z-index: 1; padding: var(--s3) var(--gut) 0; }
#wordmark { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.hero::after { content: ""; display: block; height: var(--s3); margin-top: var(--s2); background: var(--g-across) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.hero__sub { padding: var(--s3) 0 var(--s4); border-top: 3px solid var(--ink); margin-top: var(--s2); }
.hero__sub .kicker { grid-column: 1 / span 4; }
.hero__sub .lede { grid-column: 5 / span 7; }

/* the instrument: the panel on 8 columns, the side on 4 */
.play { position: relative; z-index: 1; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.play__main { grid-column: 1 / span 8; padding: var(--s12) 0; align-self: center; }   /* centred when the side runs taller */
/* the side: as tall as the instrument, the patterns taking what is left, so both columns start and end together */
.play__side { grid-column: 9 / span 4; padding: var(--s12) 0; display: grid; grid-template-rows: auto auto 1fr; gap: var(--s2); min-width: 0; }
.panel { position: relative; width: 100%; aspect-ratio: 876 / 538; }
#panel { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--text); }
#panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
#lcd {
  position: absolute;
  left: calc((247 - 14) / 876 * 100%); top: calc((59 - 14) / 538 * 100%);
  width: calc(201 / 876 * 100%); height: calc(201 / 538 * 100%);
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: var(--s1); padding: var(--s3) var(--s4); min-width: 46%;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer; text-align: left;
  font: var(--display); text-transform: uppercase;
}
.start small { font: var(--label); text-transform: uppercase; letter-spacing: 0.1em; }
.start:hover { outline: 3px solid var(--ink); outline-offset: 3px; }
.start::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--s4); background: var(--g-down) 0 0 / 4px var(--s4) repeat-x; image-rendering: pixelated; }
.start.gone { display: none; }

/* the side: readouts, the tracks, the patterns, the project, the tools */
/* the readout: boxed and padded as the tracks and patterns under it; in each cell the buttons share the name's row,
 * on the right, and the value has the whole width under them */
.read { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.read > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt ctls" "dd dd";
  column-gap: var(--s1); align-items: center; padding: var(--s1); border-bottom: 1px solid var(--ink); min-width: 0;
}
.read > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.read > div:nth-last-child(-n+2) { border-bottom: 0; }
.read dt { grid-area: dt; }
.read dd { grid-area: dd; margin-top: 4px; font: var(--title); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; font-variant-numeric: tabular-nums; }
/* the readout and the tracks are controls too: small square buttons in the label's type, dithered on hover */
.read .ctls { grid-area: ctls; display: flex; align-items: center; gap: 4px; }
.read .ctls button, .tracks .tmute {
  display: inline-grid; place-items: center; min-width: var(--s3); height: var(--s3); padding: 0 6px; cursor: pointer;
  font: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink);
}
.read .ctls .ar { width: var(--s3); padding: 0; }
.read .ctls svg { display: block; width: 10px; height: 10px; fill: currentColor; }
.read .ctls button:hover, .tracks .tmute:hover, .tracks .tsel:hover { background-image: var(--d-check); background-size: 2px 2px; image-rendering: pixelated; }
.read .ctls button[aria-pressed="true"], .tracks .tmute[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.read button:focus-visible, .tracks button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tracks .tsel {
  display: block; width: 100%; min-height: 48px; padding: var(--s1); text-align: left; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: transparent; border: 0;
}
.tracks li.on .tsel:hover { background-image: none; }
.tracks .tmute { position: absolute; top: var(--s1); right: var(--s1); min-width: var(--s3); height: var(--s3); padding: 0; }
.tracks li.on .tmute { color: var(--paper); background: var(--ink); border-color: var(--paper); }
.tracks li.on .tmute[aria-pressed="true"] { color: var(--ink); background: var(--paper); }
.tracks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.tracks li { position: relative; padding: 0; border-right: 1px solid var(--ink); overflow: hidden; white-space: nowrap; }
.tracks li:nth-child(3n) { border-right: 0; }
.tracks li:nth-child(-n+3) { border-bottom: 1px solid var(--ink); }
.tracks li b { display: block; font: var(--title); margin-bottom: 4px; }
.tracks li.on { background: var(--ink); color: var(--paper); }
.tracks li.mute { background-image: var(--d-sparse); }
.pats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.pats button {
  display: block; text-align: left; padding: 4px var(--s1); min-width: 0; overflow: hidden; cursor: pointer;
  color: var(--ink); background: var(--paper); border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.pats button b { display: block; font: 900 14px / 20px var(--head); letter-spacing: 0; }
.pats button:hover { background-image: var(--d-check); background-size: 2px 2px; image-rendering: pixelated; }
.pats button.on { background: var(--ink); color: var(--paper); }
.pats button.q { background-image: var(--d-dots); background-size: 2px 2px; image-rendering: pixelated; }

/* the sections: the number on 4 columns, the text on 8; full-width blocks below them */
.sec { position: relative; z-index: 1; row-gap: var(--s4); padding-top: var(--s12); padding-bottom: var(--s12); border-bottom: 1px solid var(--ink); }
.sec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--s4); background: var(--g-down) 0 0 / 4px var(--s4) repeat-x; image-rendering: pixelated; opacity: 0.9; pointer-events: none; }
.sec.inv::before { background-image: var(--g-down-inv); }   /* the band in the block's own ink */
.sec__n { grid-column: 1 / span 4; font: 400 clamp(56px, 9vw, 112px) / 0.8 var(--head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sec__body { grid-column: 5 / span 8; display: grid; gap: var(--s3); align-content: start; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--s2); }

/* the controls: three lists of four columns each */
.keys { grid-column: span 4; }
.keys h3 { padding-bottom: var(--s1); border-bottom: 3px solid var(--ink); }
.keys dl { display: grid; }
.keys dt { font: 700 14px / 20px var(--text); padding-top: var(--s1); }
.keys dd { font: var(--small); padding-bottom: var(--s1); border-bottom: 1px dotted var(--ink); }
kbd { display: inline-block; min-width: 1.5em; padding: 0 4px; font: 700 11px / 16px var(--mono); text-align: center; background: var(--ink); color: var(--paper); }

/* the machines: three cards of four columns each, Model:Cycles' cards in one bit */
.mgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); padding: var(--gut); margin: 0 calc(-1 * var(--gut)); }
.mcard { position: relative; border: 1px solid var(--ink); padding: var(--s2); display: grid; grid-template-columns: minmax(0, 1fr) 144px; gap: var(--s2); min-width: 0; }
.mcard canvas { width: 144px; height: 144px; image-rendering: pixelated; }
.mcard h4 { margin: 0 0 var(--s1); font: var(--title); text-transform: uppercase; }
.mcard .meta i { font-style: normal; letter-spacing: 0.15em; }
.mcard ol { grid-column: 1 / -1; margin: 0; padding: var(--s2) 0 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1) var(--s2); border-top: 1px dotted var(--ink); overflow-wrap: anywhere; }
.mcard ol li { font-weight: 400; letter-spacing: 0.06em; }
.mcard ol li b { display: block; font-weight: 700; }
.mcard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; opacity: 0.35;
  background: var(--ink);
  -webkit-mask: var(--g-up) 0 100% / 4px 100% repeat-x; mask: var(--g-up) 0 100% / 4px 100% repeat-x;
  transition: height 0.28s steps(7);
}
.mcard:hover::after { height: 100%; }

/* scroll: parts arrive once, in steps like the screen (app.js adds .reveal only when motion is welcome) */
.reveal .rv-up { opacity: 0; transform: translateY(var(--s2)); transition: opacity 480ms steps(6), transform 480ms steps(6); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal .rv-up.in { opacity: 1; transform: none; }
.reveal .rv-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 560ms steps(14); }
.reveal .rv-wipe.in { clip-path: inset(0 0 0 0); }
.reveal .sec::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 720ms steps(18); }
.reveal .sec.in::before { transform: none; }
.reveal .mgrid .mcard { opacity: 0; transform: translateY(var(--s2)); transition: opacity 480ms steps(6), transform 480ms steps(6); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal .mgrid.in .mcard { opacity: 1; transform: none; }

/* below 1400 the readout cannot stand as tall as the instrument beside it: it goes under it */
@media (max-width: 1400px) {
  .play__main { grid-column: 1 / -1; padding-bottom: 0; }
  .play__side { grid-column: 1 / -1; padding-top: var(--s3); }
}
@media (max-width: 1100px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys { grid-column: span 6; }
  .keys:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sec { padding-top: var(--s8); padding-bottom: var(--s8); }
  .play__main { padding-top: var(--s8); }
  .play__side { padding-bottom: var(--s8); }
  .bar > * { grid-column: span 6; }
  .bar { row-gap: var(--s1); padding-top: var(--s2); padding-bottom: var(--s2); }   /* bars that wrap: rows apart */
  header.bar > :nth-child(2), header.bar > :nth-child(3) { display: none; }   /* the name and the switch only */
  .hero__sub .kicker, .hero__sub .lede, .sec__n, .sec__body, .keys, .keys:last-child { grid-column: 1 / -1; }
  .hero__sub { row-gap: var(--s2); }
  .cols2, .mgrid { grid-template-columns: 1fr; }
  .mcard { grid-template-columns: minmax(0, 1fr) 96px; }
  .mcard canvas { width: 96px; height: 96px; }
}