/* Dani Ramez — ramezmusic.com
   Visual system governed by portfolio/DESIGN_SPEC.md.
   No build step. Plain CSS. */

/* ---------- fonts ---------- */
/* IBM Plex Mono is SIL OFL and self-hosted. Helvetica Neue is licensed and
   bundled with macOS/iOS; it is referenced through the stack only. */

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --paper:      #F1EFE7;
  --paper-high: #F7F5EE;
  --ink:        #171715;
  --ink-muted:  #68665F;
  --rule:       #7C7869; /* structural — carries meaning, >=3:1 */
  --hairline:   #B8B4A8; /* decorative only — never the sole indicator */
  --rust:       #A43D27;

  --display: "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 144px;

  --gutter: 20px;
  --margin: 64px;
  --measure: 62ch;

  /* One column module, derived from the content column the page actually
     has rather than from the outer box. Every measure hold below is a
     column span, so type and rules terminate on the same lines. */
  --col:   calc((100% - 11 * var(--gutter)) / 12);
  --span4: calc(4 * var(--col) + 3 * var(--gutter));
  --span5: calc(5 * var(--col) + 4 * var(--gutter));
  --span6: calc(6 * var(--col) + 5 * var(--gutter));

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --accordion: 320ms;
  --swap: 200ms;
  --hover: 120ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  accent-color: var(--rust);
  scrollbar-color: var(--rule) var(--paper);
}

::selection { background: var(--rust); color: var(--paper-high); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.48;
}

/* Numerals line up in the mono channel: the register and the catalogue
   numbers are read as columns, not as prose. */
.masthead__index, .rail__num, .register__num,
.record__cat, .record__meta, .plate__num, .recog__num {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* Focus: rust outline + a second, non-colour channel. */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper-high); color: var(--ink);
  font-family: var(--mono); font-size: 13px;
  padding: var(--s4) var(--s4); z-index: 40;
}
.skip:focus { left: var(--margin); top: var(--s3); }

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

.masthead {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--s7) var(--margin) var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: start;
}

.masthead__name {
  font-size: 48px;
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
}

.masthead__role {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.masthead__place {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
  margin-top: var(--s2);
}

.masthead__utility { text-align: right; }
.masthead__index {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: var(--s4);
}
.utility__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--s5);
}
.utility__list a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--mono);
  font-size: 13px;
}

/* The seven rows below are the page's own index, but the default-open Music
   panel pushes 02-07 past the first viewport. This is the same index, reachable
   before the scroll. It repeats existing destinations, so it is skipped by
   assistive tech users who prefer the headings, not a second navigation model. */
.sections {
  grid-column: 1 / -1;
  margin-top: var(--s6);
}
.sections__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  list-style: none;
}
.sections__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.sections__list a:hover {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sections__num { color: var(--ink-muted); }
.sections__list a:hover .sections__num { color: var(--rust); }

/* ---------- catalogue ---------- */

/* The catalogue's opening rule reads as the first row divider, so it is
   inset to the content column like every divider below it rather than
   running the full outer box. */
.catalogue {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--margin);
}
.catalogue::before,
.foot::before,
.held::before,
.held::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: var(--rule);
}

.cat { border-bottom: 1px solid var(--rule); }
.cat[open] { border-bottom-color: var(--ink); }

/* The closed row sits on the same 12-column grid as the open panel, so the
   catalogue number and the section title stay in line with the register and
   the featured record beneath them. */
.cat__head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: baseline;
  gap: var(--gutter);
  padding: 32px 36px 32px 0;
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow var(--hover) ease;
}
.cat__title, .register__row, .press li {
  transition: color var(--hover) ease, border-color var(--hover) ease;
}
.cat__num   { grid-column: 1 / 3; }
.cat__title { grid-column: 3 / 13; }
.cat__head::-webkit-details-marker { display: none; }
.cat__head::marker { content: ""; }

.cat__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.cat[open] .cat__num { color: var(--rust); font-weight: 700; }

.cat__title {
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.cat[open] .cat__title { font-weight: 500; }

.cat__ind {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
  width: 14px; height: 14px;
}
.cat__ind::before,
.cat__ind::after {
  content: "";
  position: absolute;
  background: var(--ink);
  inset: 6px 0 auto 0; height: 1px;
}
.cat__ind::after { transform: rotate(90deg); transition: transform var(--swap) var(--ease); }
.cat[open] .cat__ind::after { transform: rotate(0deg); }

.cat__head:hover .cat__title { color: var(--rust); text-decoration: underline; text-underline-offset: 6px; }
.cat__head:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.cat__head:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; text-decoration: none; }
.cat__head:focus-visible .cat__title { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- panel ---------- */

.cat__panel { overflow: hidden; }

.panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  /* The footer contributes the rest of the gap below an open panel; s9 in both
     places stacked to ~192px of empty paper. */
  padding: var(--s2) 0 var(--s7);
}
.panel--wide { display: block; padding-top: var(--s5); }

.rail { grid-column: 1 / 3; }
.rail__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: var(--s3);
}
.rail__label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s2);
}

/* The register keeps the full rail width for titles: at two columns a
   number gutter costs more lines than it saves. */
.register__row {
  display: block;
  padding: 9px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.register__row:hover { border-bottom-color: var(--ink); }
.register__row:hover .register__title { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.register__row.is-active { border-bottom-color: var(--ink); }
.register__row.is-active .register__num { color: var(--rust); font-weight: 700; }
.register__row.is-active .register__title { font-weight: 500; }

.register__num {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}
.register__title {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  margin: 1px 0;
}
.register__role {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

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

/* The register runs longer than any single record, so the featured record
   holds its position while the index beside it is scanned. */
.featured {
  grid-column: 3 / 13;
  position: sticky;
  top: var(--s6);
}

.record {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.record + .record { margin-top: var(--s9); }

.record__media { grid-column: 1 / 6; }
.record__body  { grid-column: 6 / 11; }

.record__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}

.plate {
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  display: block;
}
.plate__num {
  display: block;
  font-family: var(--mono);
  font-size: 64px;
  line-height: 1;
  color: var(--ink-muted);
  letter-spacing: -0.03em;
}
.plate__note {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

/* Records without artwork still lead with a way in: the plate is the link,
   the same role the poster plays on a record that has a player. Without it the
   only route to the work sat below the metadata and the attribution note. */
.plate--link {
  text-decoration: none;
  color: inherit;
}
.plate--link:hover { border-top-color: var(--ink); }
.plate--link:hover .plate__num { color: var(--ink); }
.plate--link:hover .plate__label { color: var(--rust); }
.plate__cue {
  width: 44px;
  height: 44px;
  margin-top: var(--s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--rust);
}
.plate__label {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  margin-top: var(--s3);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.record__cat {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
}
.record__title {
  font-size: 38px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.record__meta {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-muted);
}
.record__role {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 700;
  margin-top: var(--s2);
}
.record__copy {
  font-size: 18px;
  line-height: 1.48;
  max-width: var(--measure);
  margin-top: var(--s4);
}
/* Titles of works named inside body copy. */
.record__copy cite {
  font-style: italic;
}
.record__actions {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
}
.action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- player ---------- */

.player { position: relative; margin: 0; }
.player__link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.player__link img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }
.player__cue {
  position: absolute;
  left: var(--s4); bottom: 44px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--rust);
}
.player__label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  padding: var(--s3) 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.player__link:hover .player__label { color: var(--rust); }

/* A record with no approved still gets the same typographic plate as every
   other image-less record, with the play control added. */
.player__plate {
  display: block;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}
.player--type .player__cue {
  position: static;
  display: inline-flex;
  margin-top: var(--s4);
}
.player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}
/* Bandcamp's large player is square; a 16:9 frame would letterbox it. */
.player__frame--square { aspect-ratio: 1 / 1; }
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- recognition ---------- */

.recog__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7);
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}
.recog__num { font-family: var(--mono); font-size: 12px; color: var(--rust); font-weight: 700; }
.recog__title { font-size: 26px; line-height: 1.1; font-weight: 500; margin: var(--s3) 0; letter-spacing: -0.01em; }
.recog__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); margin-bottom: var(--s3); }
.recog__body { font-size: 18px; line-height: 1.48; max-width: 40ch; }
.recog__src { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.recog__src a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-family: var(--mono); font-size: 12px; }

.press { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.press li {
  font-size: 15px;
  line-height: 1.5;
  padding: var(--s3) 0;
  padding-right: calc(100% - var(--span6));
  border-bottom: 1px solid var(--rule);
}
.press__pub { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.press a { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

/* ---------- held content ---------- */

/* The rule runs the full twelve columns; the mark sits in 1–2 and the
   statement's place in 3–8, so the empty section reads as a held plate
   rather than a fragment. */
.empty {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  min-height: 320px;
}
.empty__mark {
  grid-column: 1 / 3;
  font-family: var(--mono); font-size: 64px; line-height: 1;
  color: var(--ink-muted); letter-spacing: -0.03em;
}
.empty__line {
  grid-column: 3 / 9;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.empty__body {
  grid-column: 3 / 9;
  font-size: 18px; line-height: 1.48; color: var(--ink-muted);
  max-width: 52ch;
}

/* ---------- information ---------- */

.info {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s7) var(--gutter);
  border-top: 1px solid var(--rule);
  padding-top: var(--s6);
}
.info__statement {
  grid-column: 1 / 10;
  grid-row: 1;
  max-width: 72ch;
  font-size: 24px;
  line-height: 1.42;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.info__bio { grid-column: 1 / 8; grid-row: 2; max-width: var(--measure); }
.info__aside { grid-column: 8 / 13; grid-row: 2; align-self: start; }
.info__portrait { width: 100%; }
.info__contact { margin-top: var(--s7); }

.info__bio p { margin-bottom: var(--s4); }
.info__portrait img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }

.info__ask { font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--s4); }
.info__email a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 18px; }
.info__lines { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); margin-top: var(--s3); }

/* ---------- held-record notice ---------- */

.held {
  position: relative;
  max-width: 1320px;
  margin: 0 auto var(--s5);
  padding: var(--s3) var(--margin);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.held::after { top: auto; bottom: 0; }

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

.foot {
  position: relative;
  max-width: 1320px;
  margin: var(--s7) auto 0;
  padding: var(--s5) var(--margin) var(--s7);
}
.foot__line { font-family: var(--mono); font-size: 13px; }
.foot__line a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- script-enhanced states ---------- */
/* With scripts blocked every record in an opened section is visible.
   With scripts on, one record is featured at a time and the others stay
   in the DOM behind the register. */
.js .record:not([data-active]) { display: none; }
/* The stacked sibling gap is for no-JS and print, where every record is
   visible. With one featured record it was shifting every entry after the
   first down by --s9. */
.js .record + .record { margin-top: 0; }

/* Collapsed panels are hidden by their own hidden="until-found" attribute
   where the browser lets author CSS take over the details box, so
   find-in-page can reach records inside closed sections. */
@supports selector(::details-content) {
  .js .cat::details-content { content-visibility: visible; display: block; }
  .js .cat > .cat__panel[hidden="until-found"] { content-visibility: hidden; }
}

/* ---------- responsive ---------- */

@media (max-width: 1439px) {
  :root { --margin: 40px; --gutter: 16px; }
}

@media (max-width: 1023px) {
  :root { --margin: 28px; }
  .masthead__name { font-size: 36px; }
  .cat__head { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-right: 30px; }
  .cat__num { grid-column: 1 / 2; }
  .cat__title { grid-column: 2 / 9; font-size: 38px; }
  .panel { display: block; }
  .featured { position: static; }
  .rail { margin-bottom: var(--s7); }
  .rail__label { max-width: 60ch; }
  .register__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
  .record { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .record__media { grid-column: 1 / 5; }
  .record__body { grid-column: 5 / 9; }
  .record__title { font-size: 32px; }
  .record__copy { font-size: 17px; line-height: 1.5; }
  .recog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .empty { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .empty__mark { grid-column: 1 / 2; }
  .empty__line, .empty__body { grid-column: 2 / 8; }
  .info { display: block; }
  .info__statement { max-width: var(--measure); margin-bottom: var(--s7); }
  .info__aside { max-width: 480px; margin-top: var(--s7); }
}

@media (max-width: 767px) {
  :root { --margin: 20px; }
  body { font-size: 17px; }
  .masthead {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--s6);
  }
  .masthead__name { font-size: 32px; }
  .masthead__utility { text-align: left; margin-top: var(--s5); }
  .utility__list { justify-content: flex-start; gap: 0 var(--s5); }
  .cat__head { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 24px 22px 0; }
  .cat__num { grid-column: 1 / 2; }
  .cat__title { grid-column: 1 / 5; grid-row: 2; font-size: 32px; margin-top: var(--s2); }
  .register__list { grid-template-columns: minmax(0, 1fr); }
  /* One column here, so the entry number moves out of the stack and beside the
     title. Thirteen entries stop running to nearly two screens before the first
     record. The 44px target is preserved by the two remaining lines. */
  .register__row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: baseline;
    padding: 7px 0;
  }
  .register__num { grid-column: 1; grid-row: 1 / 3; }
  .register__title { grid-column: 2; grid-row: 1; margin: 0; }
  .register__role { grid-column: 2; grid-row: 2; }
  .record { display: block; }
  .record__media { max-width: 100%; margin-bottom: var(--s5); }
  .record__title { font-size: 30px; }
  .record + .record { margin-top: var(--s8); }
  .js .record + .record { margin-top: 0; }
  .recog__list { grid-template-columns: minmax(0, 1fr); }
  .info__statement { margin-bottom: var(--s7); font-size: 18px; line-height: 1.45; }
  .empty__mark { font-size: 48px; }
  .empty { display: block; }
  .empty__body { margin-top: var(--s4); }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

@media print {
  :root { --paper: #fff; --ink: #000; --ink-muted: #333; --rule: #555; --hairline: #999; --rust: #000; --margin: 0; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  /* Every section is expanded on paper, so an in-page jump list is dead ink. */
  .skip, .cat__ind, .player__cue, .sections { display: none !important; }
  /* Printers drop pseudo-element backgrounds; the inset rules become real
     borders, which do not need the inset once margins are zero. */
  .catalogue::before, .foot::before, .held::before, .held::after { display: none; }
  .catalogue, .foot, .held { border-top: 1px solid var(--rule); }
  .held { border-bottom: 1px solid var(--rule); }
  .js .record:not([data-active]) { display: grid !important; }
  .js .record + .record { margin-top: var(--s9); }
  .cat__panel { display: block !important; content-visibility: visible !important; }
  .cat::details-content { content-visibility: visible !important; display: block !important; }
  .cat { break-inside: auto; page-break-inside: auto; }
  .cat__head { page-break-after: avoid; }
  a { color: #000; }
  .action[href^="http"]::after,
  .recog__src a[href^="http"]::after,
  .press a[href^="http"]::after,
  .player__link[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 8pt;
    word-break: break-all;
  }
  .player__frame { display: none; }
}