/* The look the pages of this site share: the palette, the face, the field
   behind the type, and the three or four things that are ever asked of a
   block of words here.

   It came out of stickers/index.html, which is where it was worked out, and
   it is a FILE rather than two copies because the front page and the sticker
   form are meant to read as siblings — a change to the gold or to the wash
   should land on both without anybody remembering there are two of them.

   What is NOT here: anything a single page owns. The form's boxes, the
   drawing screen, the thank-you — those stay in stickers/index.html, and the
   front page's own blocks stay in its head. Each page's own <style> comes
   after this link, so a page can always overrule what follows without
   fighting it.

   The build stamps the link with the commit (tools/build.mjs), because the
   edge caches /common/ for four hours whatever the headers ask and a page
   must never be paired with another build's stylesheet. */

/* The record's face, at the record's one weight. Same file, same reason: a
   page that falls back to system-ui is a different page on every machine. */
@font-face {
  font-family: 'Driftlines Sans';
  src: url('/assets/inter-tight-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
/* THE ITALIC IS A SECOND FILE AND IT CANNOT BE ONE FILE. That was asked, and
   the answer is Inter Tight's rather than a preference: Google Fonts cuts the
   upright and the italic as separate woff2 and the family has no single
   variable file with an ital or slnt axis, so an italic face here is a second
   @font-face and a second request, about 47 KB (tools/fonts.sh fetches both).
   Do not "tidy" this into the rule above; the two sources are not
   interchangeable and font-variation-settings cannot reach a slant that is
   not in the file.

   IT IS A REAL ITALIC, NOT A SHEAR. Without this face the browser synthesises
   one by leaning the upright, which keeps every letterform the upright has —
   Inter Tight's italic redraws the a and the g, and that is the difference
   somebody notices without being able to name it.

   WHAT ACTUALLY USES IT: the front page's intro tail, and nothing else so
   far. The rest of the site is upright.

   swap, like the face above, and on purpose. The two files are fetched from
   the same origin in the same breath and land together, so the tail is in the
   fallback for the same moment the rest of the page is; block would hold the
   tail invisible while its own metrics still came from the fallback, which is
   the same reflow with a hole in the paragraph while it waits. */
@font-face {
  font-family: 'Driftlines Sans';
  src: url('/assets/inter-tight-italic-var.woff2') format('woff2-variations');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #050302;
  --dim: #8a7454;
  --ink: #d9b98a;
  --bright: #f5e8d0;
  --gold: #f5c96a;
  --rule: #2a2118;
}
* { box-sizing: border-box; }
/* Nothing on these pages has any business being wider than the page. */
html, body { overflow-x: clip; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 400 15px/1.7 'Driftlines Sans', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  /* Nothing here is for copying, and a drag across a page whose background
     answers a finger should stir the field rather than paint a blue box
     over the type. The callout is the same gesture's other half: a long
     press on a phone otherwise offers to look the word up. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* No pull-to-refresh. It is the browser's gesture, not ours, and here it
     lands on a full-screen field that answers a finger — so dragging down
     at the top stirred the strands and then threw the page away. `contain`
     rather than `none`: the page still scrolls, it just stops handing the
     overscroll to Safari. */
  overscroll-behavior-y: contain; }
/* The field, behind everything, and only where there is a GPU to run it.
   Everywhere else this canvas never lights and the page is black behind
   the type, which is a background too. It is never touchable either way. */
#strands { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 2.5s ease; }
#strands.on { opacity: 1; }
/* A wash from the corners, so the type sits on something dark whatever the
   strands are doing behind it. */
body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(5, 3, 2, 0.18) 0%, rgba(5, 3, 2, 0.62) 55%, rgba(5, 3, 2, 0.93) 100%);
  transition: opacity 0.6s ease; }
main { position: relative; z-index: 2; max-width: 33em; margin: 0 auto;
  padding: max(3.5rem, env(safe-area-inset-top)) 1.6rem 5rem; }

/* The band's name, small and spaced, at the top of a page that is not about
   the band — and the same line as a link back here from one that is. */
.band { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 3.2em; }
.band a { color: inherit; text-decoration: none; }
.band a:hover { color: var(--ink); }
h1 { font-weight: 700; font-size: clamp(30px, 9vw, 46px); line-height: 1.08;
  letter-spacing: -0.015em; color: var(--bright); margin: 0 0 0.5em; }
h1 em { font-style: normal; color: var(--gold); }
.lede { margin: 0 0 1em; max-width: 26em; color: var(--ink); }
.lede.small { font-size: 13.5px; color: var(--dim); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0 2.2em; }
/* The label over a block: what this next bit is, said once and quietly. */
.what { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.55em; }
.what span { text-transform: none; letter-spacing: 0.04em; color: var(--dim); }

/* The thing the page most wants pressed. One shape, whether it is a button
   or a link wearing one. */
.go { display: block; }
button {
  font: inherit; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px;
  color: #140c04; background: linear-gradient(180deg, #ffd98c, #d3a14e);
  border: 0; border-radius: 2px; padding: 0.95em 1.7em; cursor: pointer;
  box-shadow: 0 10px 30px -18px rgba(245, 201, 106, 0.9); transition: transform 0.15s, filter 0.2s;
}
button:hover { filter: brightness(1.09); }
button:active { transform: translateY(1px); }
button[disabled] { filter: saturate(0.4) brightness(0.8); cursor: default; }

/* Where the music already is, and anywhere else the page leads. Bright for
   the one or two that are the answer; hollow, on its own line, for anything
   worth having that is not what the page was for — a third bright button
   beside the other two would argue otherwise.

   QUIET IS ABOUT WEIGHT AND NOT ABOUT SIZE, which is the distinction the
   hollow one used to get wrong. Sized to its own words it stopped just short
   of the pair above — five pixels on one page, nearer thirty on the other —
   and a button that almost lines up reads as a mistake rather than as a
   decision. It ends where the pair ends now, so the three of them are one
   block with one right edge. Nothing about it got louder: no fill, no glow,
   the same dim ink and the same one-pixel rule.

   .ways is what makes that possible and is the whole trick: a box around both
   rows, sized to fit its contents, so it comes out as wide as its widest row
   — the bright pair — and the hollow one then grows into it. The alternative
   was stretching the bright buttons to fill the row instead, which lines the
   three of them up by changing the ANSWER so the footnote agrees with it.
   This changes the footnote. */
.ways { width: fit-content; max-width: 100%; }
nav.out { display: flex; flex-wrap: wrap; gap: 0.7em; }
nav.out a { font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px;
  color: #140c04; background: linear-gradient(180deg, #ffd98c, #d3a14e);
  text-decoration: none; border-radius: 2px; padding: 0.95em 1.5em;
  box-shadow: 0 10px 30px -18px rgba(245, 201, 106, 0.9); transition: filter 0.2s; }
nav.out a:hover { filter: brightness(1.09); }
/* A service's mark beside its name, in black: black is a colour Spotify,
   Apple and Instagram each allow their mark in, and gold is not. */
nav.out a:has(svg) { display: inline-flex; align-items: center; gap: 0.6em; }
nav.out a svg { width: 17px; height: 17px; fill: #000; flex: none; }
nav.out.quiet { margin-top: 0.7em; }
/* flex-grow on the one child, so it takes the whole of whatever .ways worked
   out — which is the bright pair's width, not the page's. The bright buttons
   are left exactly as they were, sized to their own words. */
nav.out.quiet a { flex: 1 1 auto; text-align: center;
  background: none; box-shadow: none; color: var(--dim);
  border: 1px solid var(--rule); transition: color 0.2s, border-color 0.2s; }
nav.out.quiet a:hover { color: var(--gold); border-color: #8a6a3a; filter: none; }

/* Something arriving after the page has settled, rather than having been
   there all along. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #strands { transition: none; }
}