/* ------------------------------------------------------------------
   Site — the pages around Rooms: Home, Projects and About.
   Loaded after style.css, so it reuses Rooms' tokens, bar and .tv
   scanlines rather than restating them. Only what the site adds
   lives here.
------------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- nav --------------------------------------------------------- */

/* Same voice as the old bar title — small, spaced capitals — so moving
   between pages changes what is in the bar, not how the bar reads. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
}

.nav__link {
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s ease;
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--fg); }

.nav__link:focus { outline: none; }
.nav__link:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 4px;
}

/* --- the Rooms bar ----------------------------------------------- */

/* Rooms normally hides its bar until Play is pressed and fades it in. Here it
   stays put, above the Play screen too, so the header is the same the
   moment you arrive as on every other page. */
.bar--rooms,
body:not(.is-started) .bar--rooms {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* The Play screen sits under the bar rather than over it. It used to be the
   other way round, with the bar lifted above it until Play and dropped back
   after — but the drop happened the instant the piece started, while the
   Play screen was still fading out, so for half a second the fading screen
   covered the bar: the header flashed on every load. Putting the Play screen
   below the bar (still above the grid and the scanlines, at 20) means the bar
   never changes layer at all. */
.start { z-index: 24; }

/* On arrival the Play screen is only the fallback for a browser that won't
   make a sound unasked, and most will. It stays hidden until the page knows
   which, rather than showing for the second it takes to find out. */
.is-arriving .start { visibility: hidden; transition: none; }

/* Shuffle is disabled for the moment it takes to load and draw, and the
   default style dims a disabled button. On arrival that meant it showed dim
   for a tenth of a second and then faded up as the piece opened — the other
   half of the flicker. It keeps its full look; a click in that moment simply
   does nothing. */
.bar--rooms .btn:disabled {
  opacity: 1;
  cursor: progress;
}

/* Name on the left, as on every page; on the right, the piece's own
   controls and then the site nav, which ends at the same edge as it does on
   every other page. */
.bar--rooms .bar__actions { margin-left: auto; }
.bar--rooms .nav { margin-left: 22px; }

/* The controls sit on a tray of their own — a lighter pill behind all four —
   so they read as the piece's instruments rather than as more of the menu.
   Inside it the buttons lose their individual outlines and light up on
   hover instead; the tray is the edge now. */
.bar--rooms .bar__actions {
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #171a1f;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
}

.bar--rooms .bar__actions .btn {
  border-color: transparent;
  transition: background-color .2s ease, opacity .15s ease;
}

.bar--rooms .bar__actions .btn:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, .07);
}

/* The tray is 8px taller than the buttons alone; take it back out of the
   bar's own padding so Rooms' header stays the same 60px as every page. */
.bar.bar--rooms {                /* outranks the shared bar rule further down */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Once the bar is too narrow for one row, the controls drop below the nav
   instead of sitting between the name and it: name, then the menu, then the
   piece's controls on a row of their own. */
@media (max-width: 962px) {
  .bar--rooms .nav { order: 2; }

  .bar--rooms::after {                       /* a line break between them */
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  .bar--rooms .bar__actions {
    order: 4;
    margin-left: 0;
  }

  .bar--rooms .bar__status { order: 5; }
}

@media (max-width: 560px) {
  .bar--rooms .nav,
  .bar--rooms .bar__actions { margin-left: 0; }
}

/* --- site pages ------------------------------------------------- */

/* Rooms locks the body to the viewport; the Projects page needs to scroll. */
body.site { overflow: auto; }

/* Rooms keeps its bar invisible until Play is pressed. There is no Play here,
   so the site pages would otherwise never show their nav. Same specificity as
   that rule, and later in the cascade. */
body.site .bar {
  opacity: 1;
  pointer-events: auto;
}

.bar__name {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bar__name a { color: inherit; text-decoration: none; }

.site .nav { margin-left: auto; }

/* One bar on every page, Rooms included, so nothing shifts as you move
   between them: the same 28px edges as the content, the same height (the
   height Rooms' buttons need), and no rule underneath. */
.site .bar,
.bar--rooms {
  min-height: 60px;
  padding: 14px 28px;
  border-bottom: 0;
}

/* --- about ----------------------------------------------------- */

/* Every page's content runs the full width of the window, inside the same
   28px gutter as the bar, up to 1600px — past that it centres, so a very
   wide screen doesn't stretch one video across the whole of it. The text keeps the
   reading size of Rooms' about panel. */
.about {
  width: 100%;
  max-width: calc(1600px + 56px);  /* 1600px of content inside the 28px gutters */
  margin: 0 auto;
  padding: 72px 28px 96px;
  animation: lb-rise .6s var(--ease-out) backwards;
}

/* The same small spaced capitals as the name on Home and the titles in
   Rooms, so it reads as a name rather than a page heading. */
.about__title {
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.about em { font-style: italic; color: var(--fg); }

.about a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .35);
  transition: text-decoration-color .2s ease;
}

.about a:hover { text-decoration-color: var(--fg); }

.about a:focus { outline: none; }
.about a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

.about p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.62;
  color: #c3c7cd;
}

/* The echoshell videos, on their own page. Each is
   a thumbnail until pressed, then swaps in place for the player, so the grid
   never reflows. */
.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 18px;
  margin: 26px 0 40px;
  padding: 0;
  list-style: none;
}

/* 16:9 unless a video says otherwise: one shot wider than that sets its
   own --ratio on the button, so it gets its own shape instead of black bars
   top and bottom. The player that replaces it inherits the same ratio. */
.video__play,
.video__frame {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #000;
}

.video__play {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

/* A video with black bars baked into the file itself: the box takes the
   picture's shape (--ratio), and the player inside it is sized to the whole
   frame (data-frame) and centred, so the bars fall outside the box. */
.video__frame--cropped {
  position: relative;
  overflow: hidden;
}

.video__frame--cropped iframe {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: var(--frame);
  transform: translateY(-50%);
  border: 0;
}

.project__line a,
.about a { color: var(--fg); }
.project__line a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .35);
}
.project__line a:hover { text-decoration-color: var(--fg); }

.video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .78;
  filter: grayscale(.35);
  transition: opacity .4s var(--ease-out), filter .4s var(--ease-out);
}

/* The Rooms play mark, smaller: a thin ring with a triangle in it. */
.video__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}

.video__mark::before {
  content: '';
  margin-left: 2px;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent var(--fg);
}

.video__play:hover .video__thumb { opacity: 1; filter: none; }
.video__play:hover .video__mark {
  border-color: var(--fg);
  transform: scale(1.06);
}

.video__play:focus { outline: none; }
.video__play:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

.about .video__title {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c3c7cd;
}

/* A credit after a title — who plays on it, whose footage it is. Set back a
   little so the title still reads first. */
.video__note { opacity: .55; }

.video__note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.video__year {
  margin-left: 6px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .videos { grid-template-columns: 1fr; }
}

/* The About page sits in the middle of the window both ways, in a 900px
   block, rather than hanging from the top of a full-width page. It still
   scrolls normally if the text is ever taller than the window. */
.about--centred {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: calc(900px + 56px);   /* 900px of content inside the 28px gutters */
  margin: 0 auto;
  padding-top: 72px;
  padding-bottom: 72px;            /* even, or the block sits high */
}

.about--centred > :last-child { margin-bottom: 0; }

/* Music is wider than the About text: three records across, each big enough
   for its cover to read. */
.about--music { max-width: calc(1200px + 56px); }

/* The echoshell page: three to a row, each a third of the width. */
.about--wide .videos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 20px;
}

@media (max-width: 560px) {
  .about--wide .videos { grid-template-columns: 1fr; }
}

/* --- bandcamp ---------------------------------------------------- */

/* The records' Bandcamp players, three across on the Music page. Bandcamp's own dark colours are overridden in the embed URL to
   the site's panel colour and text colour, so they sit in the page rather
   than on it. */
.bandcamps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

/* The large player: the cover at the full width of the column, the player
   underneath. Bandcamp draws the cover square at whatever width it's given
   and the controls below it at a fixed 120px, so the height is the width
   plus 120 — measured off the column with a container query, so it stays
   right at any size instead of cropping the art or leaving a gap. */
.bandcamp-wrap { container-type: inline-size; }

.bandcamp {
  display: block;
  width: 100%;
  height: calc(100cqw + 120px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #101216;
}

@media (max-width: 560px) {
  .bandcamps { grid-template-columns: 1fr; }
}

/* --- history ---------------------------------------------------- */

/* The About page's sections — one per band or body of work, oldest first.
   Not scoped to the page, because the About popup shows the same markup. */
/* "History" heads the older sections, in the same voice as the page title,
   separated from the current work above it by the same rule as a section. */
/* "History" divides the page in two, so it reads as a heading rather than
   another section label: larger, wider-spaced, a brighter rule above it and
   more room either side than the sections get. */
.about__title.about__title--section {
  margin: 72px 0 36px;
  padding-top: 40px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .24em;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

.about__title--section + .history__band { margin-top: 0; }

/* Every section is ruled off the same way — the first one, under the opening
   paragraph, as well as the rest. */
p:has(+ .history__band) { margin-bottom: 0; }   /* or its margin adds on */

p + .history__band,
.history__band + .history__band {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.history__name {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.history__years {
  margin-left: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.history__band p:last-child { margin-bottom: 0; }

/* Pictures inside a section: the records' covers, a video's stills, a poster.
   Held to a fixed height and left at their own shapes rather than cropped
   into squares — Home's cover is wide, the others square. */
.history__media {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
}

.history__media a { display: block; line-height: 0; }

.history__media img {
  display: block;
  height: 150px;
  width: auto;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .06);
  opacity: .9;
  transition: opacity .2s ease;
}

.history__media a:hover img { opacity: 1; }

/* The echoshell stills are old 4:3 frames with black bars baked in; cropped
   to the picture and kept small, a strip of seven. */
.history__media--stills img {
  height: 84px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Every section's pictures come first, straight under its heading. */
.history__name + .history__media { margin: 0 0 18px; }
/* The Rooms grid screenshot: at its own shape, no taller than 221px. */
.history__media--wide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 221px;
}

/* The only poster available is Wikipedia's 300px copy — shown no larger. */
.history__media--poster img { height: auto; max-width: min(100%, 300px); }

@media (max-width: 560px) {
  .history__media img { height: 110px; }
  .history__media--wide img { height: auto; max-height: 221px; }
  .history__media--stills img { height: 64px; }
}

/* A section's songs as a list, one per line, each with its players set back
   beside it — easier to read than the same credits run into a paragraph. */
.credits {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.62;
  color: #c3c7cd;
}

.credits li {
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.credits li:first-child { border-top: 0; }

.credits__note {
  margin-left: 10px;
  font-size: 13px;
  color: var(--muted);
}

.credits__note a { color: inherit; }

/* A track's length, beside its title, set in the same muted voice as a credit. */
.credits__time {
  margin-left: 8px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


.videos--one {
  grid-template-columns: minmax(0, 300px);
  margin: 22px 0 0;
}

.history__band .video__title {
  margin: 9px 0 0;
  font-size: 13px;
  color: #c3c7cd;
}

/* --- home ------------------------------------------------------- */

/* The same empty stage as Rooms' title screen: one name, nothing else,
   and the scanlines rolling over it. */
.home {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
}

.home__name {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: lb-rise .7s var(--ease-out) backwards;
}

/* On the home screen the nav is the content, so it sits under the name
   instead of in a bar. Home itself is left out — you are already there. */
.home__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.home__nav .nav__link {
  animation: lb-rise .7s var(--ease-out) backwards;
}

.home__nav .nav__link:nth-child(1) { animation-delay: .1s; }
.home__nav .nav__link:nth-child(2) { animation-delay: .16s; }
.home__nav .nav__link:nth-child(3) { animation-delay: .22s; }
.home__nav .nav__link:nth-child(4) { animation-delay: .28s; }
.home__nav .nav__link:nth-child(5) { animation-delay: .34s; }

/* --- projects --------------------------------------------------- */

.projects {
  width: 100%;
  max-width: calc(1600px + 56px);  /* 1600px of content inside the 28px gutters */
  margin: 0 auto;
  padding: 72px 28px 96px;
}

.projects__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project {
  border-bottom: 1px solid var(--line);
  animation: lb-rise .6s var(--ease-out) backwards;
}

.project__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 24px;
  padding: 22px 2px;
  color: inherit;
  text-decoration: none;
}

.project__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.project__year {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.project__line {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.6;
  color: #c3c7cd;
}

/* A project that is a video rather than a page: the same title row, with
   the player under it instead of a link. */
.project--video { padding: 22px 2px 26px; }
.project--video:last-child { border-bottom: 0; }

.project__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  margin-bottom: 14px;
}

.project__head .project__line { flex: 1 0 100%; }
.project__line em { font-style: italic; color: var(--fg); }

/* A project with more than one video: side by side, under the one title. */
.videos--pair { margin: 0; }

.projects .video__title {
  margin: 9px 0 0;
  font-size: 13px;
  color: #c3c7cd;
}

.project__link:hover .project__title { text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px; }

.project__link:focus { outline: none; }
.project__link:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

/* --- small screens ---------------------------------------------- */

@media (max-width: 560px) {
  .nav { gap: 4px 16px; }
  .site .nav { margin-left: 0; }

  .site .bar,
  .bar--rooms {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about,
  .projects,
  .about--centred {
    padding: 40px 20px 64px;
  }
}

/* --- exclusion mode (dev only: rooms.html?exclude) ---------------- */

/* A plain, obviously-tooling button in each tile's corner, above the static
   and the player. Faint until you're over the tile, so the grid still reads
   while you look; always full on touch screens, which have no hover. */
.tile__exclude {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  padding: 5px 10px;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(190, 30, 30, .85);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s ease, background-color .15s ease;
}

/* The second button, under the first: darker, since it takes out far more. */
.tile__exclude--channel {
  top: 36px;
  background: rgba(100, 12, 12, .9);
}

/* A tile does not open in exclusion mode, so it should not look as if it would. */
.is-excluding-mode .tile { cursor: default; }

.tile:hover .tile__exclude,
.tile__exclude:focus-visible { opacity: 1; }
.tile__exclude:hover { background: rgb(215, 35, 35); }
.tile__exclude--channel:hover { background: rgb(150, 20, 20); }

@media (hover: none) {
  .tile__exclude { opacity: 1; }
}

.tile.is-excluding { opacity: .35; pointer-events: none; }

.exclude-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 14px;
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fg);
  background: rgba(20, 22, 26, .94);
  border: 1px solid rgba(190, 30, 30, .7);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.exclude-bar__mode {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(235, 90, 90);
}

.exclude-bar__pool,
.exclude-bar__count { color: var(--fg); }

.exclude-bar__mode,
.exclude-bar__pool,
.exclude-bar__count { white-space: nowrap; }

.exclude-bar__last {
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.exclude-bar__undo {
  padding: 4px 10px;
  font: inherit;
  color: var(--fg);
  background: rgba(255, 255, 255, .08);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.exclude-bar__undo:hover { background: rgba(255, 255, 255, .16); }

/* --- lightbox (About's pictures) ---------------------------------- */

.history__media img.is-zoomable { cursor: zoom-in; }
.history__media img.is-zoomable:hover { opacity: 1; }
.history__media img.is-zoomable:focus { outline: none; }
.history__media img.is-zoomable:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: rgba(6, 7, 9, .9);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: lb-fade .25s ease;
}

.lightbox[hidden] { display: none; }

/* The picture and its ✕ travel together, so the ✕ sits inside the picture's
   top-right corner and can never end up near the window's edge. */
.lightbox__frame {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

/* Its own size at most — these are small files — and never past the window. */
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: lb-rise .35s var(--ease-out);
}

.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 0;                 /* the cross is drawn below, so it centres exactly */
  color: var(--fg);
  background: rgba(6, 7, 9, .6);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__close:hover { background: rgba(6, 7, 9, .85); }

.lightbox__close::before,
.lightbox__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- about popup ------------------------------------------------- */

/* The whole window, over any page. The About page itself sits in the frame. */
.about-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  animation: lb-fade .3s ease;
}

.about-popup[hidden] { display: none; }

.about-popup__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* Clear of the frame's scrollbar. */
.about-popup__close {
  position: absolute;
  top: 12px;
  right: 30px;
  padding: 4px 8px;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.about-popup__close:hover { color: var(--fg); }

/* The page behind stays where it was, and does not scroll under the popup. */
.has-about-popup body { overflow: hidden; }

/* In the popup the page has no bar of its own: the ✕ is the way out. */
.is-framed .bar { display: none; }