/* ==========================================================================
   Mighty Robbins — songs & stories that might be true
   Antique-gold letterpress on near-black. Mobile-first, min-width only.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
  /* ink & paper */
  --ink:          #0b0c0a;
  --ink-raised:   #14150f;
  --ink-deep:     #060706;
  --paper:        #e8e2d2;
  --paper-dim:    #a9a294;
  --paper-faint:  #8a8576;   /* 5.3:1 on --ink, 5.0:1 on --ink-raised */

  /* foil */
  --gold:         #c9a227;
  --gold-light:   #e4c765;
  --gold-dim:     #8a7434;   /* rules and borders only — fails AA as text */
  --gold-text:    #b99a3f;   /* 7.2:1 on --ink, 6.8:1 on --ink-raised */
  --gold-hair:    rgba(138, 116, 52, 0.38);

  /* the lake, borrowed from the album art */
  --lake:         #3e5b5c;

  --rule:         rgba(138, 116, 52, 0.28);
  --rule-faint:   rgba(138, 116, 52, 0.14);

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-label:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step--2: clamp(0.69rem, 0.67rem + 0.08vw, 0.74rem);
  --step--1: clamp(0.8rem,  0.77rem + 0.14vw, 0.88rem);
  --step-0:  clamp(1.05rem, 1.01rem + 0.2vw,  1.19rem);
  --step-1:  clamp(1.2rem,  1.11rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.26rem + 0.94vw, 2.1rem);
  --step-3:  clamp(1.75rem, 1.38rem + 1.84vw, 3rem);
  --step-4:  clamp(2.1rem,  1.48rem + 3.1vw,  4.2rem);
  --step-mark: clamp(2.6rem, 0.9rem + 8.4vw, 8rem);

  /* space */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --sp-xl:  clamp(3rem, 2rem + 5vw, 6rem);
  --sp-2xl: clamp(4.5rem, 3rem + 7.5vw, 9rem);

  /* measure */
  --measure: 36rem;
  --shell:   62rem;
  --gutter:  clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem);

  /* stacking — a small, explicit scale beats z-index: 9999 */
  --z-base: 0;
  --z-art:  1;
  --z-copy: 2;
  --z-nav:  30;
  --z-skip: 40;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-variation-settings: "opsz" 16;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden — hidden would break position: sticky */
  isolation: isolate;
}

/* the grain sits over everything and never intercepts a click */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-variation-settings: "opsz" 64, "SOFT" 12, "WONK" 1;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gold-light); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold-dim); color: var(--ink-deep); }

/* --- shared utilities ---------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The reading column and the full-width blocks share a centre axis, so a page
   that alternates between them stays balanced. */
.column {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.flow > * + * { margin-block-start: var(--flow, 1.15em); }

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--paper);
  font-variation-settings: "opsz" 36;
}

.dim { color: var(--paper-dim); }

/* an engraver's rule: hairline that fades out from a centred diamond */
.rule {
  position: relative;
  height: 1px;
  border: 0;
  margin-block: var(--sp-l);
  background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}
.rule::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 6px;
  height: 6px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--gold-dim);
}

/* every unfilled slot in the site announces itself the same way */
.pending {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  border: 1px dashed var(--gold-hair);
  border-radius: 2px;
  padding: 0.35em 0.7em;
  background: rgba(138, 116, 52, 0.05);
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.7em 1.5em;
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-deep);
  /* the dark end stops at #a88f3a, not --gold-dim: any lower and the near-black
     label drops below 4.5:1 along the bottom edge of the button */
  background-image: linear-gradient(172deg, var(--gold-light), var(--gold) 46%, #a88f3a);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: filter 0.25s var(--ease), translate 0.25s var(--ease);
}
.btn:hover { filter: brightness(1.12); translate: 0 -1px; }
.btn:active { translate: 0 1px; filter: brightness(0.95); }

.btn--ghost {
  color: var(--gold-light);
  background-image: none;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--gold-hair);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold-text); background-color: rgba(138, 116, 52, 0.08); }

/* a link that reads as a caption but behaves as an action */
.textlink {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-light);
  border-block-end: 1px solid var(--rule);
  padding-block-end: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.textlink:hover { border-color: var(--gold-light); }

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  inset-block-start: var(--sp-2xs);
  inset-inline-start: var(--sp-2xs);
  z-index: var(--z-skip);
  padding: 0.6em 1em;
  background: var(--gold);
  color: var(--ink-deep);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  translate: 0 -160%;
}
.skip:focus { translate: 0 0; }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  /* opaque enough that scrolled text does not ghost through the bar */
  background-color: rgba(11, 12, 10, 0.94);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--rule-faint);
  padding-block: var(--sp-xs);
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  flex-wrap: wrap;
}

.masthead__mark {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variation-settings: "opsz" 20, "WONK" 1;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-s);
}

.nav__link {
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-block: 0.55em;
  border-block-end: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--paper); }
.nav__link[aria-current="page"] { color: var(--gold); border-block-end-color: var(--gold-dim); }

@media (min-width: 40em) {
  .masthead { padding-block: var(--sp-s); }
  .masthead__mark { font-size: var(--step-0); }
  .nav { gap: 0 var(--sp-m); }
  .nav__link { letter-spacing: 0.19em; }
}

/* --- page ---------------------------------------------------------------- */

.page {
  display: block;
  padding-block: var(--sp-xl) var(--sp-2xl);
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
}

/* the hero owns its own vertical rhythm */
.page--home { padding-block-start: 0; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 78vh;
  min-height: 78svh;
  padding-block: var(--sp-xl);
  text-align: center;
  overflow: clip;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  /* two masks: an oval that keeps the light off the edges, and a hard bottom
     fade so the image never ends on a visible seam */
  mask-image:
    radial-gradient(115% 80% at 50% 58%, #000 26%, transparent 76%),
    linear-gradient(to bottom, #000 55%, transparent 96%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.hero__inner { position: relative; z-index: var(--z-copy); }

/* Signature: the wordmark as pressed gold foil.
   Everything else on this site stays quiet so this can be loud. */
.wordmark {
  position: relative;
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-mark);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: transparent;
  background-image: linear-gradient(176deg, #8a6f22 0%, #d4ac2c 16%, #f6e7b6 36%, #c9a227 52%, #927b34 68%, #e0c778 86%, #f2dfa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.92))
    drop-shadow(0 -1px 0 rgba(244, 227, 173, 0.16))
    drop-shadow(0 10px 34px rgba(201, 162, 39, 0.14));
}

/* the light travelling across the foil */
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: linear-gradient(104deg, transparent 42%, rgba(255, 247, 224, 0.9) 50%, transparent 58%);
  background-size: 320% 100%;
  background-position: var(--sweep, 150%) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  animation: foil-sweep 2.6s var(--ease) 0.4s both;
}

@keyframes foil-sweep {
  from { background-position: 170% 0; }
  to   { background-position: -70% 0; }
}

/* once the load sweep is done, the foil tracks the pointer */
.wordmark.is-tracking::after { animation: none; }

.hero__tagline {
  margin-block-start: var(--sp-m);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-1);
  font-variation-settings: "opsz" 36;
  color: var(--paper);
  letter-spacing: 0.01em;
}

.hero__meta {
  margin-block-start: var(--sp-s);
  max-width: 30rem;
  margin-inline: auto;
  color: var(--paper-dim);
  font-size: var(--step--1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  justify-content: center;
  margin-block-start: var(--sp-l);
}

/* --- generic block ------------------------------------------------------- */

.block { margin-block-start: var(--sp-xl); }
.block:first-child { margin-block-start: 0; }

.block__head { margin-block-end: var(--sp-l); }
.block__head > * + * { margin-block-start: var(--sp-xs); }
.block__title { font-size: var(--step-3); }
.block__title--sub { font-size: var(--step-2); }

/* the standfirst under a page's h1 */
.block__lede { margin-block-start: var(--sp-s); }

/* a button or a pair of buttons closing a block */
.block__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-block-start: var(--sp-l);
}

.prose { font-size: var(--step-0); }
.prose p + p { margin-block-start: 1.1em; }
.prose em { font-style: italic; }

/* a pulled line, set as if it were struck larger on the same press */
.pull {
  margin-block: var(--sp-l);
  padding-inline-start: var(--sp-m);
  border-inline-start: 1px solid var(--gold-hair);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-variation-settings: "opsz" 48, "SOFT" 20, "WONK" 1;
  font-weight: 400;
  line-height: 1.24;
  color: var(--gold-light);
}

/* --- the six teachers ---------------------------------------------------- */

.roster { border-block-start: 1px solid var(--rule-faint); }

.roster__row {
  display: grid;
  gap: var(--sp-3xs) var(--sp-l);
  padding-block: var(--sp-m);
  border-block-end: 1px solid var(--rule-faint);
}

.roster__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1;
  font-weight: 500;
  color: var(--paper);
}

.roster__lesson {
  min-width: 0;
  color: var(--paper-dim);
  font-style: italic;
  font-size: var(--step-0);
}

@media (min-width: 46em) {
  .roster__row {
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* --- record shelf -------------------------------------------------------- */

.shelf {
  display: grid;
  gap: var(--sp-l);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.release { min-width: 0; }

.release__art {
  position: relative;
  display: block;
  border: 1px solid var(--rule);
  background-color: var(--ink-deep);
  overflow: clip;
}
.release__art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: scale 0.6s var(--ease), filter 0.6s var(--ease);
}
a.release__art:hover img { scale: 1.03; filter: brightness(1.12); }

.release__kind {
  margin-block-start: var(--sp-s);
  display: block;
}
/* the album's label sits at the top of its own column, not under a cover */
.release__kind--first { margin-block-start: 0; }

.release__title {
  margin-block-start: var(--sp-3xs);
  font-size: var(--step-1);
  font-variation-settings: "opsz" 40, "SOFT" 16, "WONK" 1;
}
.release__title--album { font-size: var(--step-2); }

.release__note {
  margin-block-start: var(--sp-2xs);
  color: var(--paper-dim);
  font-size: var(--step--1);
}

.release__action { margin-block-start: var(--sp-s); }

/* --- tracklist ----------------------------------------------------------- */

.tracks { margin-block-start: var(--sp-m); }
.tracks__label { margin-block-start: var(--sp-l); }
.tracks__foot { margin-block-start: var(--sp-m); }

.tracks__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  padding-block: var(--sp-xs);
  border-block-end: 1px solid var(--rule-faint);
}

.tracks__no {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}

.tracks__name {
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-body);
  font-size: var(--step-0);
}
.tracks__name a { color: var(--paper); border-block-end: 1px solid var(--rule); }
.tracks__name a:hover { color: var(--gold-light); border-color: var(--gold-dim); }

/* --- song page ----------------------------------------------------------- */

.songhead {
  display: grid;
  gap: var(--sp-l);
  align-items: end;
}

.songhead__art {
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 22rem;
}

.songhead__title {
  font-size: var(--step-4);
  font-variation-settings: "opsz" 120, "SOFT" 8, "WONK" 1;
}

.songhead__meta { margin-block-start: var(--sp-s); }
.songhead__action { margin-block-start: var(--sp-m); }

@media (min-width: 48em) {
  .songhead { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.story__body { margin-block-start: var(--sp-s); }

/* framed slots waiting for Mathew's own photographs */
.frames {
  display: grid;
  gap: var(--sp-m);
  margin-block-start: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.frames__item { margin: 0; min-width: 0; }

.frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-m);
  text-align: center;
  background-color: var(--ink-raised);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 0 0 7px var(--ink-raised), inset 0 0 0 8px var(--rule-faint);
}

.frame__caption {
  margin-block-start: var(--sp-2xs);
  font-size: var(--step--1);
  color: var(--paper-faint);
  font-style: italic;
}

/* lyrics sit on a raised plate, set in the reading italic */
.lyrics {
  padding: var(--sp-l) var(--sp-m);
  background-color: var(--ink-raised);
  border-block: 1px solid var(--rule-faint);
  text-align: center;
}

.lyrics__body {
  max-width: 30rem;
  margin-inline: auto;
  margin-block-start: var(--sp-m);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step-1);
  font-variation-settings: "opsz" 30;
  line-height: 1.85;
  white-space: pre-line;
  color: var(--paper);
}

@media (min-width: 40em) {
  .lyrics { padding-inline: var(--sp-l); }
}

/* --- journal ------------------------------------------------------------- */

.posts { border-block-start: 1px solid var(--rule-faint); }

.post-row {
  display: grid;
  gap: var(--sp-2xs) var(--sp-l);
  padding-block: var(--sp-m);
  border-block-end: 1px solid var(--rule-faint);
}

.post-row__date {
  min-width: 0;
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.post-row__title {
  min-width: 0;
  font-size: var(--step-2);
  font-variation-settings: "opsz" 48, "SOFT" 16, "WONK" 1;
}
.post-row__title a { color: var(--paper); }
.post-row__title a:hover { color: var(--gold-light); }

.post-row__excerpt {
  grid-column: 1 / -1;
  color: var(--paper-dim);
  font-size: var(--step-0);
}

@media (min-width: 46em) {
  .post-row { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); }
  .post-row__date { padding-block-start: 0.55em; }
  .post-row__excerpt { grid-column: 2; }
}

.article__title {
  margin-block-start: var(--sp-2xs);
  font-size: var(--step-3);
}
.article__meta { margin-block-start: var(--sp-s); }
.article h2 {
  margin-block-start: var(--sp-l);
  font-size: var(--step-1);
  font-variation-settings: "opsz" 40, "SOFT" 16, "WONK" 1;
  color: var(--gold-light);
}
.article h2 + p { margin-block-start: var(--sp-s); }

/* --- connect ------------------------------------------------------------- */

.form { margin-block-start: var(--sp-l); }

.field { display: block; margin-block-start: var(--sp-m); }
.field:first-child { margin-block-start: 0; }

.field__label {
  display: block;
  margin-block-end: var(--sp-2xs);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.field__input,
.field__area {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.7em 0.85em;
  font-family: var(--font-body);
  /* below 16px iOS Safari zooms the viewport on focus */
  font-size: max(16px, var(--step-0));
  color: var(--paper);
  background-color: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field__input:focus,
.field__area:focus { border-color: var(--gold-dim); background-color: #191a12; }
.field__area { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field__input::placeholder,
.field__area::placeholder { color: var(--paper-faint); opacity: 1; }

.form__action { margin-block-start: var(--sp-l); }

.form__note {
  margin-block-start: var(--sp-s);
  font-size: var(--step--1);
  color: var(--paper-faint);
}

.calls {
  display: grid;
  gap: var(--sp-l);
  margin-block-start: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.call {
  min-width: 0;
  padding: var(--sp-m);
  background-color: var(--ink-raised);
  border-block-start: 1px solid var(--gold-hair);
}
.call__title {
  font-size: var(--step-1);
  font-variation-settings: "opsz" 36, "SOFT" 16, "WONK" 1;
}
.call__body { margin-block-start: var(--sp-2xs); color: var(--paper-dim); font-size: var(--step--1); }

/* --- footer -------------------------------------------------------------- */

.colophon {
  border-block-start: 1px solid var(--rule-faint);
  padding-block: var(--sp-l);
  padding-block-end: calc(var(--sp-l) + env(safe-area-inset-bottom));
  color: var(--paper-faint);
  font-size: var(--step--1);
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  align-items: baseline;
  justify-content: space-between;
}
.colophon__inner > * { min-width: 0; }
.colophon a { color: var(--paper-dim); border-block-end: 1px solid var(--rule-faint); }
.colophon a:hover { color: var(--gold-light); }

/* --- back link ----------------------------------------------------------- */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-block-end: var(--sp-l);
  font-family: var(--font-label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.backlink:hover { color: var(--gold-light); }

/* On a post, where the only thing under the backlink is the reading column,
   hang it off that column instead of leaving it stranded at the shell edge.
   Song pages keep it at the shell edge, because their cover starts there. */
.shell:has(> .article) .backlink {
  margin-inline-start: max(0px, calc((100% - var(--measure)) / 2));
}

/* --- reveal on scroll ---------------------------------------------------- */

.js .reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .wordmark::after { display: none; }
  a.release__art:hover img { scale: 1; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  body::after, .masthead, .hero__backdrop, .skip { display: none !important; }
  a { color: #000; }
}