:root {
  --ink: #11100f;
  --paper: #f7f4ee;
  --white: #fffdf8;
  --coral: #ff4d57;
  --pink: #ff91a7;
  --lime: #d9ff58;
  --line: #d8d2c8;
  --muted: #6f6a63;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px;
  background: var(--lime); color: var(--ink); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; top: 0; z-index: 50; color: var(--white); background: var(--pink);
  border-bottom: 1px solid rgba(17,16,15,.12);
}
.header-inner {
  width: min(calc(100% - 40px), var(--max)); min-height: 76px; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
}
.wordmark { font-size: 2rem; line-height: 1; font-weight: 1000; letter-spacing: -.09em; color: var(--white); }
.wordmark span { color: inherit; }

/* Old hover-reveal genre subnav removed 5 Sept (mockup round) - replaced by
   a real burger menu, top right, on both desktop and mobile. See the
   BURGER MENU block near the end of this file. */

.footer-links a { position: relative; }
.footer-links a::after {
  content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: -6px;
  background: var(--coral); transition: right .2s ease;
}
.footer-links a:hover::after, .footer-links a:focus-visible::after { right: 0; }
.mobile-menu { display: none; }

.kicker {
  margin: 0 0 16px; color: var(--coral); font-size: .76rem; font-weight: 900;
  letter-spacing: .17em; text-transform: uppercase;
}
.kicker-light { color: var(--lime); }
.listing-hero h1, .not-found h1 {
  max-width: 980px; margin: 0; font-size: clamp(4.2rem, 10vw, 9rem); line-height: .82;
  font-weight: 1000; letter-spacing: -.08em; text-transform: uppercase;
}
.home-deck {
  max-width: 610px; margin: 38px 0 0 auto; color: var(--muted);
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45;
}
/* TOPLINE (5 Sept, mockup round 3) - Sandy: drop the date, and move the
   tagline off the hero entirely into "a horizontal sub nav bar under the
   pink one, and upon scroll down, it animates away... subtle and elegant".
   Sits sticky directly under the sticky .site-header (top offset matches
   its 76px min-height), and site.js toggles `.is-hidden` past a small
   scroll threshold. Homepage only - the hero itself no longer carries any
   intro copy. */
.topline {
  position: sticky; top: 76px; z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 15px 20px; text-align: center;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
/* Sandy (5 Sept, mockup round 3, next batch): "Dont use italic font for
   independemt music curattion line, make it all caps and smaller and
   beautiful" - swapped the serif italic for the site's own small-caps
   label voice (same family/weight/tracking as .kicker and .eyebrow), just
   sized a touch larger since it carries the tagline on its own now. */
/* Sandy (5 Sept, mockup round 3, third batch): "would make the
   independemnt music curation line slightly smaller and lighter. caps is
   right." - dropped weight from 800 to 500 and the size down a touch;
   caps/tracking untouched since those were already right. */
.topline p {
  margin: 0; color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-style: normal;
  font-weight: 500; text-transform: uppercase;
  font-size: clamp(.62rem, 1.1vw, .74rem); letter-spacing: .22em;
}
.topline.is-hidden { transform: translateY(-100%); opacity: 0; }

.lead-story { padding-bottom: 110px; }

/* FEATURE HERO - full-bleed, Rombo-style lead treatment (5 Sept, mockup
   round). Sandy: "the interview / feature doesnt work, its jammed in as a
   heading... try the full width thing like rombo" - one image, one
   gradient, copy overlaid and centred at the bottom, instead of a split
   image/text grid. */
/* Sandy (5 Sept, mockup round 3, fourth batch): "give more room on the hero
   image before the text comes in... show more of gamals head and make the
   whole hero section larger, there's still space to see more beneath it,
   particulaly on monbile/tablet." Taller min-height means object-fit:cover
   crops the source image less aggressively (more of it shows, not just a
   tight crop around the face), and the scrim's fade-to-clear point moved
   from 68% up to 55%, so a bigger share of the image at the top now sits
   completely free of any dark tint before the text zone starts. */
.feature-hero {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(560px, 78vw, 820px); overflow: hidden; background: var(--ink); color: var(--white);
}
.feature-hero-media { position: absolute; inset: 0; display: block; }
.feature-hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.75,.25,1); }
.feature-hero:hover .feature-hero-media img { transform: scale(1.03); }
.feature-hero .image-fallback { position: absolute; inset: 0; }
.feature-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(17,16,15,.94) 0%, rgba(17,16,15,.55) 26%, rgba(17,16,15,0) 55%);
}
.feature-hero-copy {
  position: relative; z-index: 1; width: min(100%, 760px); margin: 0 auto;
  padding: clamp(30px, 5vw, 66px); text-align: center;
}
.feature-hero-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.feature-hero .pill {
  padding: 7px 18px; border: 1px solid rgba(255,253,248,.55); border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white);
}
.feature-hero h2 {
  margin: 0 auto 18px; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.04;
  font-weight: 800; letter-spacing: -.015em; text-transform: none;
}
.feature-hero-copy > p { max-width: 560px; margin: 0 auto 24px; color: #d8d1c8; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.5; }
.feature-hero .text-link { justify-content: center; color: var(--lime); }

.card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #ded8cf; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.75,.25,1); }
.card-media:hover img { transform: scale(1.035); }
.image-fallback { display: grid; place-items: center; background: var(--pink); }
.image-fallback span { font-size: clamp(2rem, 5vw, 5rem); font-weight: 1000; letter-spacing: -.08em; }
.card-copy { padding-top: 22px; }
.eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { color: var(--coral); }
.post-card h2 { margin: 13px 0 13px; font-size: clamp(1.7rem, 2.4vw, 2.6rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.post-card h2 a:hover, .post-card h2 a:focus-visible { color: var(--coral); }
.post-card .card-copy > p { margin: 0 0 20px; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.04rem; line-height: 1.58; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(5px); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 76px 28px; }

.latest { padding-bottom: 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.section-heading h2, .genre-band h2, .submit-band h2 { margin: 0; font-size: clamp(2.6rem, 5.5vw, 5.3rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.genre-band { padding: 110px 0; color: var(--white); background: var(--ink); }
.genre-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 54px; border-top: 1px solid #48433f; }
.genre-list a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid #48433f; font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 900; text-transform: uppercase; }
.genre-list a:nth-child(odd) { padding-right: 28px; }
.genre-list a:nth-child(even) { padding-left: 28px; border-left: 1px solid #48433f; }
.genre-list a:hover { color: var(--lime); }
.genre-list span { color: var(--coral); font-size: .68rem; letter-spacing: .1em; }
.genre-list small { color: #89817a; font-size: .65rem; letter-spacing: .1em; }
.submit-band { padding-top: 130px; padding-bottom: 130px; text-align: center; }
.submit-band p:not(.kicker) { margin: 24px auto 30px; color: var(--muted); font-family: Georgia, serif; font-size: 1.3rem; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 25px; color: var(--white); background: var(--ink); border: 2px solid var(--ink); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: .2s ease; }
.button:hover, .button:focus-visible { color: var(--ink); background: var(--lime); }

.listing-hero { padding: clamp(70px, 10vw, 140px) 0 70px; border-bottom: 2px solid var(--ink); }
.listing-hero h1 { max-width: 1100px; font-size: clamp(3.8rem, 9vw, 8.5rem); }
.listing-hero > p:last-child { max-width: 620px; margin: 34px 0 0 auto; color: var(--muted); font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.5; }
.listing-grid { padding-top: 70px; padding-bottom: 130px; }

.article-shell { width: min(calc(100% - 40px), 860px); margin-inline: auto; padding: clamp(70px, 9vw, 125px) 0 120px; }
.article-header { margin-bottom: 56px; }
.back-link { display: inline-flex; margin-bottom: 24px; color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-header h1 { margin: 0; font-size: clamp(3.5rem, 8vw, 7.8rem); line-height: .85; letter-spacing: -.07em; text-transform: uppercase; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--ink); color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
/* The lead image on a piece that has none of its own. Sits between the
   headline and the body, full column width, so a long read has something to
   land on before the text starts. */
.article-hero { margin: 0 0 2.2rem; }
.article-hero img { display: block; width: 100%; height: auto; }

.article-content { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.12rem, 1.8vw, 1.28rem); line-height: 1.74; }
.article-content > p { margin: 0 0 1.65em; }
.article-content > p:first-child { font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.48; }
.article-content h2, .article-content h3 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.045em; }
.article-content h2 { margin: 2.2em 0 .65em; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: .95; }
.article-content h3 { margin: 2.5em 0 .65em; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .98; }
.article-content blockquote { margin: 1.1em 0 1.5em; padding: 28px 30px 30px; background: var(--pink); border: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.article-content blockquote p { margin: 0; }
.article-content figure { margin: 2.4em 0; }
.article-content figure img, .article-content > img { width: 100%; height: auto; }
.article-content figcaption { margin-top: 9px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.article-content a { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-content .bops-embed { margin: 2.2em 0 3.5em; }
.article-content .bops-spotify iframe { display: block; width: 100%; border-radius: 12px; }
/* SoundCloud embed (5 Sept, mockup round 3, next batch) - converted from a
   dead WordPress oEmbed placeholder in content.mjs; styled the same as
   the Spotify embed above. */
.article-content .bops-soundcloud iframe { display: block; width: 100%; border-radius: 8px; }
.article-content .wp-block-embed iframe { max-width: 100%; }
.article-end { display: flex; align-items: center; gap: 22px; margin-top: 76px; padding: 28px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.article-end span { color: var(--coral); font-size: 2rem; font-weight: 1000; letter-spacing: -.08em; }
.article-end p { margin: 0; color: var(--muted); font-family: Georgia, serif; }
.page-shell .article-content > p:first-child { font-size: inherit; line-height: inherit; }

.search-form { display: grid; grid-template-columns: 1fr auto; max-width: 760px; margin-top: 42px; }
.search-form input { min-width: 0; padding: 18px 20px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-right: 0; outline: 0; }
.search-form input:focus { box-shadow: inset 0 0 0 3px var(--pink); }
.search-form button { padding: 0 24px; color: var(--white); background: var(--ink); border: 2px solid var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.search-status { grid-column: 1 / -1; margin: 0 0 36px; color: var(--muted); font-family: Georgia, serif; font-size: 1.2rem; }
.not-found { min-height: 70vh; padding-top: 120px; padding-bottom: 120px; }
.not-found p:not(.kicker) { color: var(--muted); font-family: Georgia, serif; font-size: 1.3rem; }
.not-found div { display: flex; align-items: center; gap: 26px; margin-top: 32px; }

.site-footer { padding: 75px max(20px, calc((100vw - var(--max)) / 2)); color: var(--white); background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr auto; gap: 50px; align-items: start; padding-bottom: 54px; }
.footer-wordmark { display: inline-block; font-size: clamp(3.5rem, 8vw, 7rem); }
.footer-brand p { max-width: 340px; color: #aaa29a; font-family: Georgia, serif; font-size: 1.2rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.footer-links-heading { color: #716b65; font-weight: 800; letter-spacing: .14em; }
.footer-small { margin: 0; padding-top: 22px; color: #716b65; border-top: 1px solid #373330; font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 900px) {
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; cursor: pointer; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; top: 42px; right: 0; display: flex; min-width: 210px; flex-direction: column; gap: 18px; padding: 24px; color: var(--ink); background: var(--lime); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 14px 40px rgba(0,0,0,.2); }
  .feature-hero { min-height: clamp(620px, 118vw, 900px); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-list { grid-template-columns: 1fr; }
  .genre-list a:nth-child(odd), .genre-list a:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
}

@media (max-width: 620px) {
  .shell, .header-inner, .article-shell { width: min(calc(100% - 28px), var(--max)); }
  .header-inner { min-height: 66px; }
  .home-intro { padding-top: 64px; }
  .home-intro h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .home-deck { margin-left: 0; }
  .lead-story { padding-bottom: 82px; }
  .feature-hero-copy { padding: 26px 20px 32px; }
  .feature-hero h2 { font-size: 2.1rem; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .post-grid { grid-template-columns: 1fr; gap: 62px; }
  .genre-list a { grid-template-columns: 32px 1fr; }
  .genre-list small { display: none; }
  .listing-hero h1 { font-size: 3.7rem; }
  .article-header h1 { font-size: clamp(3.25rem, 16vw, 5rem); }
  .article-content { font-size: 1.08rem; }
  .article-content blockquote { padding: 23px 21px; }
  .search-form { grid-template-columns: 1fr; }
  .search-form input { border-right: 2px solid var(--ink); }
  .search-form button { min-height: 50px; }
  .footer-grid { grid-template-columns: 1fr; }
  .not-found div { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* Touch devices cannot hover: keep the categories visible. */
@media (hover: none) {
}


/* Footer: submitting is the only action down here, so let it look like one. */
.footer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.submit-btn {
  display: inline-block; padding: 18px 30px; border-radius: 999px;
  color: var(--ink); background: var(--pink);
  font-size: .82rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; transition: transform .18s ease, background .18s ease;
}
.submit-btn:hover, .submit-btn:focus-visible { transform: translateY(-2px); background: var(--white); }
.footer-note { max-width: 220px; color: #716b65; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
.footer-brand p { font-size: 1.45rem; line-height: 1.45; }
@media (max-width: 760px) {
  .footer-cta { align-items: stretch; }
  .submit-btn { text-align: center; }
}


/* Homepage index: type-led list, no images to art-direct. */
.post-index { display: flex; flex-direction: column; padding-bottom: 90px; }
.index-row {
  display: grid; grid-template-columns: 132px 1fr auto; gap: 30px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: padding-left .18s ease;
}
.index-row:last-of-type { border-bottom: 1px solid var(--line); }
.index-row:hover, .index-row:focus-visible { padding-left: 10px; }
.index-row time { color: var(--muted); font-size: .71rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.index-title { font-size: clamp(1.2rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.22; }
.index-row:hover .index-title, .index-row:focus-visible .index-title { color: var(--coral); }
.index-cat { color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.index-more { display: inline-block; margin-top: 42px; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.home-intro { padding-bottom: 18px; }
@media (max-width: 720px) {
  .index-row { grid-template-columns: 1fr; gap: 7px; padding: 22px 0; }
  .index-cat { order: -1; }
  .index-row time { order: 2; }
}


/* PULL QUOTE
   Serif italic across the full measure. Scale and the rule above do the work;
   coral stays reserved for links so it keeps its meaning. */
.article-content h3 + p {
  margin: 10px 0 42px;
  padding-top: 28px;
  border-top: 5px solid var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.7vw, 1.85rem);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--ink);
}
.article-content h3 + p em { font-style: italic; }
@media (max-width: 720px) {
  .article-content h3 + p { padding-top: 20px; margin-bottom: 32px; font-size: 1.25rem; }
}


/* Artist images: already in the data, now on the page. */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin-top: 4px; border-radius: 12px; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { }


/* Album art is square. Shown as a sleeve at a modest size so it gives the page
   colour without turning each review into a poster. */
@media (max-width: 720px) {
  }


/* BURGER MENU (5 Sept, mockup round; refined mockup round 2; moved to the
   left mockup round 3)
   A persistent top-left control, on both desktop and mobile - replacing
   the old desktop hover-reveal bar and its separate mobile-only toggle.
   Fixed position so it sits above everything and never scrolls away.
   Sandy (round 2): bars in white, to read as part of the header rather
   than a mismatched dark icon, and the panel it opens should be a sidebar
   that animates in, not a full-screen takeover. Sandy (round 3): moved the
   whole control - button and sidebar alike - to the left-hand side. */
/* Sandy (5 Sept, mockup round 3, third batch): "if i click hamburger, i
   dont want the site to scroll to the top" - the checkbox had
   position: absolute with no top/left, so its static position sat near
   the very top of the document; clicking its <label> (the menu button)
   focuses this real, focusable input, and the browser scrolled the page
   back up to bring it into view. Pinning it at a fixed, always-in-
   viewport coordinate means focusing it never needs a scroll. */
.nav-toggle-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-btn {
  position: fixed; top: 21px; left: max(20px, calc((100vw - var(--max)) / 2));
  z-index: 70; width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--white);
  border-radius: 2px; transition: transform .22s ease, opacity .18s ease, background .22s ease;
}
.menu-btn span::before { position: absolute; transform: translateY(-7px); }
.menu-btn span::after  { position: absolute; transform: translateY(7px); }
.nav-toggle-input:checked ~ .menu-btn span { background: transparent; }
.nav-toggle-input:checked ~ .menu-btn span::before { background: var(--white); transform: rotate(45deg); }
.nav-toggle-input:checked ~ .menu-btn span::after  { background: var(--white); transform: rotate(-45deg); }

/* Dim backdrop behind the sidebar, covering the rest of the page - also a
   label targeting the same checkbox, so a click outside the sidebar closes
   it, same as any standard drawer nav. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(17,16,15,.55);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.nav-toggle-input:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

/* The sidebar itself: a fixed-width left-hand panel that slides in, rather
   than expanding to fill the screen. */
/* Sandy (5 Sept, mockup round 3, third batch): "the sidebar menu items
   should be higher up for easier click" - was justify-content: center,
   which put the links dead in the middle of the viewport (thumb-reach on
   a tall phone screen, per her screenshot). Anchored to the top third
   instead, with enough clearance under the close/X control that it
   doesn't crowd it. */
.nav-overlay {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: min(360px, 84vw);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: clamp(18px, 3vw, 26px);
  padding: clamp(120px, 24vh, 200px) clamp(32px, 6vw, 48px) 0;
  background: var(--ink); color: var(--white);
  box-shadow: 24px 0 60px rgba(17,16,15,.25);
  transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.nav-overlay a {
  font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 1000; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--white);
}
.nav-overlay a:hover, .nav-overlay a:focus-visible { color: var(--lime); }
.nav-toggle-input:checked ~ .nav-overlay { transform: translateX(0); }
@media (max-width: 620px) {
  .menu-btn { top: 15px; left: 22px; }
}

/* More room at the screen edge on mobile */
@media (max-width: 720px) {
  .shell, .header-inner, .article-shell { width: min(calc(100% - 44px), var(--max)); }
  .site-footer { padding-left: 22px; padding-right: 22px; }
}

/* Footer stacks more tidily on mobile */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 34px; }
  .footer-wordmark { font-size: clamp(3rem, 17vw, 4.5rem); }
  .footer-brand p { font-size: 1.15rem; margin-top: 4px; }
  .footer-cta { gap: 10px; }
  .submit-btn { width: 100%; padding: 16px 24px; }
  .footer-note { max-width: none; }
  .site-footer { padding-top: 52px; padding-bottom: 42px; }
  .footer-small { padding-top: 18px; }
}


/* Artwork sits between the quote and the review, so it belongs to the section
   rather than floating between two of them. */
@media (max-width: 720px) {
  }


/* Album art, full column width. Square because sleeves are square. */
.artwork {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 38px;
  border-radius: 12px;
  background: var(--line);
}
@media (max-width: 720px) {
  .artwork { margin-bottom: 26px; border-radius: 8px; }
}


.article-header .kicker { margin-bottom: 14px; }
.article-header .kicker time { font: inherit; color: inherit; letter-spacing: inherit; }


/* One rule style on the page. The artist sections own it; the title does not
   need its own, and two identical heavy lines in the first screen competed. */
.article-header { border-bottom: none; }
.article-header .article-meta {
  border-top: none;
  padding-top: 0;
  margin-top: 14px;
}
.article-header .kicker { margin-bottom: 14px; }
.article-header .kicker time { font: inherit; color: inherit; letter-spacing: inherit; }


/* HOME-SHEET-V1
   A contact sheet, not a set of cards. Square crops, hairline gutters, every
   cover washed into the pink so the page reads as one object rather than
   twelve competing sleeves. Colour comes back under the cursor, which is the
   only reward a tile needs. */
.home-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 34px;
}
.home-sheet .grid-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pink);
  text-decoration: none;
  color: inherit;
}
.home-sheet .tile-art { position: absolute; inset: 0; display: block; }
.home-sheet .grid-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  transition: filter .4s ease, mix-blend-mode .4s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.home-sheet .grid-tile:hover img,
.home-sheet .grid-tile:focus-visible img {
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1.05);
}
.home-sheet .tile-meta {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 46px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0));
  color: #fff;
  opacity: 0;
  transition: opacity .28s ease;
}
.home-sheet .grid-tile:hover .tile-meta,
.home-sheet .grid-tile:focus-visible .tile-meta { opacity: 1; }
/* No cover: the tile becomes type on pink, and stays legible at rest. */
.home-sheet .grid-tile.no-art .tile-meta {
  inset: 0;
  padding: 16px;
  justify-content: flex-end;
  background: none;
  color: var(--ink);
  opacity: 1;
}
.home-sheet .tile-title {
  font-size: .78rem; line-height: 1.2;
  letter-spacing: .045em; text-transform: uppercase; font-weight: 700;
}
.home-sheet .grid-tile.no-art .tile-title { font-size: 1.05rem; line-height: 1.12; }
.home-sheet .tile-cat {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; opacity: .8;
}
.home-sheet .index-more { grid-column: 1 / -1; margin-top: 26px; }

@media (max-width: 900px) { .home-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .home-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .home-sheet .tile-meta { opacity: 1; padding: 34px 10px 10px; }
  .home-sheet .tile-title { font-size: .68rem; }
}


/* HOME-SHEET-V1
   A contact sheet, not a set of cards. Square crops, hairline gutters, every
   cover washed into the pink so the page reads as one object rather than
   twelve competing sleeves. Colour comes back under the cursor, which is the
   only reward a tile needs. */
.home-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 34px;
}
.home-sheet .grid-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pink);
  text-decoration: none;
  color: inherit;
}
.home-sheet .tile-art { position: absolute; inset: 0; display: block; }
.home-sheet .grid-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  transition: filter .4s ease, mix-blend-mode .4s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.home-sheet .grid-tile:hover img,
.home-sheet .grid-tile:focus-visible img {
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1.05);
}
.home-sheet .tile-meta {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 46px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0));
  color: #fff;
  opacity: 0;
  transition: opacity .28s ease;
}
.home-sheet .grid-tile:hover .tile-meta,
.home-sheet .grid-tile:focus-visible .tile-meta { opacity: 1; }
/* No cover: the tile becomes type on pink, and stays legible at rest. */
.home-sheet .grid-tile.no-art .tile-meta {
  inset: 0;
  padding: 16px;
  justify-content: flex-end;
  background: none;
  color: var(--ink);
  opacity: 1;
}
.home-sheet .tile-title {
  font-size: .78rem; line-height: 1.2;
  letter-spacing: .045em; text-transform: uppercase; font-weight: 700;
}
.home-sheet .grid-tile.no-art .tile-title { font-size: 1.05rem; line-height: 1.12; }
.home-sheet .tile-cat {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; opacity: .8;
}
.home-sheet .index-more { grid-column: 1 / -1; margin-top: 26px; }

@media (max-width: 900px) { .home-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .home-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .home-sheet .tile-meta { opacity: 1; padding: 34px 10px 10px; }
  .home-sheet .tile-title { font-size: .68rem; }
}


/* HOME-SHEET-V2
   Three corrections to v1. Captions sat on top of the artwork, which meant the
   picture had to carry text it was never designed to carry; they now sit under
   it, where a contact sheet has always put them. The 2px gutter read as jammed
   rather than tight, so it opens to a proper column gap with more room between
   rows than within them. And a post with no cover gets a house sleeve instead
   of an empty pink square. */

.home-sheet {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 46px;
  margin: 52px 0 0;
}

/* The tile is now picture + caption stacked, not one cropped block. */
.home-sheet .grid-tile {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-sheet .tile-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pink);
}
.home-sheet .grid-tile img { position: absolute; inset: 0; }

/* Caption below, in the page's own ink. No scrim, no hover reveal. */
.home-sheet .tile-meta,
.home-sheet .grid-tile.no-art .tile-meta {
  position: static;
  inset: auto;
  opacity: 1;
  padding: 0;
  background: none;
  color: var(--ink);
  gap: 5px;
}
.home-sheet .tile-title,
.home-sheet .grid-tile.no-art .tile-title {
  font-size: .74rem;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
}
.home-sheet .tile-cat {
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .55;
}
.home-sheet .grid-tile:hover .tile-title { text-decoration: underline; text-underline-offset: 3px; }

/* No cover: a house sleeve. Tonal, deliberate, and it stops the grid reading
   as half-finished when a release has no artwork yet. */
.home-sheet .grid-tile.no-art .tile-art::after {
  content: "introvert disco.";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255, 253, 247, .62);
}

/* Air. The sheet was touching the hero above it and the footer below it. */
.home-sheet .index-more {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding-top: 30px;
  border-top: 1px solid rgba(20, 16, 14, .12);
}
main { padding-bottom: 92px; }

/* The comma on line one and the ascenders of the italic line were sitting on
   top of each other. */
.home-intro h1 { line-height: 1.06; }
.home-intro h1 em { display: inline-block; padding-top: .06em; }
.home-intro { padding-bottom: 4px; }

@media (max-width: 900px) {
  .home-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 38px; }
}
@media (max-width: 620px) {
  .home-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 30px; margin-top: 36px; }
  .home-sheet .tile-title { font-size: .66rem; }
  main { padding-bottom: 64px; }
}


/* HOME-SHEET-V2
   Three corrections to v1. Captions sat on top of the artwork, which meant the
   picture had to carry text it was never designed to carry; they now sit under
   it, where a contact sheet has always put them. The 2px gutter read as jammed
   rather than tight, so it opens to a proper column gap with more room between
   rows than within them. And a post with no cover gets a house sleeve instead
   of an empty pink square. */

.home-sheet {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 46px;
  margin: 52px 0 0;
}

/* The tile is now picture + caption stacked, not one cropped block. */
.home-sheet .grid-tile {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-sheet .tile-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pink);
}
.home-sheet .grid-tile img { position: absolute; inset: 0; }

/* Caption below, in the page's own ink. No scrim, no hover reveal. */
.home-sheet .tile-meta,
.home-sheet .grid-tile.no-art .tile-meta {
  position: static;
  inset: auto;
  opacity: 1;
  padding: 0;
  background: none;
  color: var(--ink);
  gap: 5px;
}
.home-sheet .tile-title,
.home-sheet .grid-tile.no-art .tile-title {
  font-size: .74rem;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
}
.home-sheet .tile-cat {
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .55;
}
.home-sheet .grid-tile:hover .tile-title { text-decoration: underline; text-underline-offset: 3px; }

/* No cover: a house sleeve. Tonal, deliberate, and it stops the grid reading
   as half-finished when a release has no artwork yet. */
.home-sheet .grid-tile.no-art .tile-art::after {
  content: "introvert disco.";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255, 253, 247, .62);
}

/* Air. The sheet was touching the hero above it and the footer below it. */
.home-sheet .index-more {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding-top: 30px;
  border-top: 1px solid rgba(20, 16, 14, .12);
}
main { padding-bottom: 92px; }

/* The comma on line one and the ascenders of the italic line were sitting on
   top of each other. */
.home-intro h1 { line-height: 1.06; }
.home-intro h1 em { display: inline-block; padding-top: .06em; }
.home-intro { padding-bottom: 4px; }

@media (max-width: 900px) {
  .home-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 38px; }
}
@media (max-width: 620px) {
  .home-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 30px; margin-top: 36px; }
  .home-sheet .tile-title { font-size: .66rem; }
  main { padding-bottom: 64px; }
}


/* HOME-SHEET-V3
   The sheet was hanging off the left edge because "margin: 52px 0 0" replaced
   .shell's auto side margins and un-centred the whole grid. Only the top
   margin is set now. The pink wash is gone too: covers are shown as they are,
   and the pink stays where it belongs, in the nav and the furniture. */

.home-sheet {
  margin-left: auto;
  margin-right: auto;
  margin-top: 64px;
  column-gap: 30px;
  row-gap: 54px;
}
.home-sheet .tile-art {
  background: #EFE9DF;
  border-radius: 2px;
}
.home-sheet .grid-tile img {
  filter: none;
  mix-blend-mode: normal;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.home-sheet .grid-tile:hover img,
.home-sheet .grid-tile:focus-visible img { transform: scale(1.03); filter: none; }
.home-sheet .grid-tile:hover .tile-art { opacity: .94; }

/* No cover at all: quiet neutral card, not a pink slab. */
.home-sheet .grid-tile.no-art .tile-art { background: #EFE9DF; }
.home-sheet .grid-tile.no-art .tile-art::after {
  color: rgba(20, 16, 14, .17);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}
.home-sheet .tile-title { letter-spacing: .06em; }
.home-sheet .index-more { margin-top: 34px; padding-top: 34px; }

@media (max-width: 900px) { .home-sheet { column-gap: 22px; row-gap: 42px; margin-top: 46px; } }
@media (max-width: 620px) { .home-sheet { column-gap: 16px; row-gap: 32px; margin-top: 38px; } }

/* Homepage recent-posts tile date (added 5 Sept - Sandy wanted a visible
   date on every tile, not just title + genre). Mirrors .tile-cat's quiet,
   small-caps treatment. */
.home-sheet .tile-date {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
  margin-top: 2px;
}

/* Music embed on news article pages (5 Sept - Sandy: news needs to link to
   the actual music, Spotify/YouTube/Bandcamp/whatever). Reuses the same
   open.spotify.com/embed pattern already used for round-up posts, just
   wrapped so it doesn't crowd the article copy. */
.track-embed {
  margin: 32px 0;
}
.track-embed iframe {
  display: block;
  width: 100%;
}

/* Article breadcrumb (5 Sept night - Sandy: 'include some kinda elegant
   way back'). Quiet, small-caps, sits above the date/kicker line. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.breadcrumb .crumb-sep {
  opacity: .5;
}

/* News-post hero image (5 Sept night - Sandy: 'big visual images within
   the news post too'). Reuses the existing full-width figure/img rule
   for .article-content, just needs its own top margin since it's now the
   very first element in the article body. */
.article-content > figure:first-child {
  margin-top: 0;
  margin-bottom: 2.2em;
}

/* Card-grid alignment (5 Sept - Sandy: cards with different excerpt
   lengths left the "Read the Bops" link sitting at a different height on
   every card in the row, reading as sloppy rather than laid out on a
   grid). Grid items stretch to the row's tallest card by default, so
   turning each card into a flex column and pinning the link to the
   bottom with margin-top: auto gets every card's CTA sitting on the same
   line, whatever its excerpt length. Scoped away from
   .post-card-feature, which already has its own deliberate grid layout
   and stays untouched. */
/* Sandy (5 Sept, mockup round 3): tried an image-overlay treatment on the
   Features grid (post-card-feature, see history), then reverted it same
   day - "this approach of the writing on the image doesnt work,
   particulaly on monbile... just move text below, like the other
   reviews". Every post-card now gets this same plain stacked treatment;
   the :not(.post-card-feature) scoping from the overlay era is gone since
   that class no longer exists anywhere. */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.post-card .card-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card .text-link {
  margin-top: auto;
  padding-top: 8px;
}


/* ============================================================================
   Introvert Disco — theme
   ============================================================================
   Sandy picked the Opener: bone stock, blue ink, a full-bleed duotone image
   before a word of the piece, and reading set in a text face. Not a zine —
   "a niche but loved blog magazine that opens up and you're like wow this is
   cool".

   The rules that follow from that:
     · bone is the page, blue is the ink for furniture and links only
     · yellow has exactly one job — the marker on a pull quote
     · Newsreader reads, Space Mono labels. Mono never runs a paragraph
     · every photograph is duotoned blue-to-bone, so images belong to the page
     · headings are sentence case. Shouting is what the old theme did

   Appended to the shared stylesheet for BLOG=introvert-disco only, so it
   overrides rather than replaces, and BOPS is untouched.
   ========================================================================= */

:root {
  --paper: #EFE9D3;
  --ink: #000AFF;
  --text: #14141A;
  --text-dim: #57564E;
  --marker: #F6EB80;
  --line: #CFCBBD;
  --white: #F4F2EA;
  --coral: #000AFF;
  --pink: #F6EB80;
  --lime: #F6EB80;
  --muted: #57564E;
  --max: 1320px;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

body, body * { font-family: var(--serif); }

body {
  background: var(--paper);
  color: var(--text);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { border-radius: 0 !important; }

a { color: inherit; }

/* Furniture — labels, dates, categories, the wordmark. Never body copy. */
.kicker, .eyebrow, .eyebrow span, .article-meta, .footer-small, .footer-note,
.footer-links-heading, .text-link, .button, .submit-btn, .wordmark,
.nav-overlay a, .breadcrumb, .back-link, .ed-eyebrow, .genre-list span,
.genre-list small, .pill {
  font-family: var(--mono);
}

/* ---- header ------------------------------------------------------------ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--text);
  color: var(--text);
}

.header-inner { align-items: center; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  text-decoration: none;
}

/* Sandy's own photograph of the ball. It turns because a mirror ball turns;
   the rotation is slow enough to notice only if you look at it. */
.site-ball {
  display: block;
  width: clamp(30px, 4vw, 42px);
  height: auto;
  animation: id-ball-spin 18s linear infinite;
}
/* Nothing but rotation on transform, so the ball turns on the spot. */
@keyframes id-ball-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .site-ball { animation: none; } }

/* The full stop belongs to BOPS. The spacer spans between words do not. */
.wordmark > span:not(.sp) { display: none; }
.wordmark .l { font-weight: 700; }

.topline { display: none; }

/* ---- labels ------------------------------------------------------------ */

.kicker, .eyebrow, .eyebrow span, .ed-eyebrow, .article-meta, .back-link {
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- the opener --------------------------------------------------------
   Full-bleed image, then the piece's own furniture underneath it. The image
   is the arrival; everything after it is deliberately quiet. */

.ed-hero {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-bottom: 1px solid var(--text);
}
.ed-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: url(#duotone);
}

.ed-lead-copy {
  display: grid;
  gap: 12px;
  padding: 34px 0 40px;
}

/* The words sit ON the picture. The opener was costing the page half a
   screen of bone before a single review, and the headline belongs on the
   face it is about. */
.ed-lead-over { position: relative; }
.ed-lead-over .ed-hero { aspect-ratio: auto; height: clamp(440px, 68vh, 720px); border-bottom: 0; }
.ed-lead-over .ed-lead-copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(calc(100% - 96px), 1080px);
  padding: 0 0 clamp(30px, 5vw, 54px);
  color: var(--paper);
  gap: 10px;
}
.ed-lead-over::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(transparent, rgba(11, 17, 96, 0.9));
  pointer-events: none;
}
.ed-lead-over .ed-lead-copy { z-index: 1; }
.ed-lead-over .ed-eyebrow { color: var(--marker); }
.ed-lead-over .ed-eyebrow a { color: var(--marker); }
.ed-lead-over .ed-title, .ed-lead-over .ed-title a { color: var(--paper); }
.ed-lead-over .ed-standfirst { color: rgba(233, 230, 218, 0.82); max-width: 54ch; }

@media (max-width: 700px) {
  .ed-lead-over .ed-hero { height: clamp(380px, 62vh, 520px); }
  .ed-lead-over .ed-lead-copy { width: calc(100% - 32px); }
}

/* The archive shouts its titles in capitals. The blog does not, so they are
   set down to its own voice and given their first letter back. */
.ed-title, .ed-item-title, .article-header h1, .post-card h2, .listing-hero h1 {
  text-transform: lowercase;
}
.ed-title::first-letter, .ed-item-title::first-letter,
.article-header h1::first-letter, .post-card h2::first-letter,
.listing-hero h1::first-letter {
  text-transform: uppercase;
}

.ed-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.ed-title a { text-decoration: none; }
.ed-title a:hover, .ed-title a:focus-visible { text-decoration: underline; text-underline-offset: 0.1em; }

.ed-standfirst {
  margin: 0;
  max-width: 62ch;
  color: var(--text-dim);
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.5;
}

/* ---- the picks: one artist, one row ------------------------------------- */

.pk-wrap { padding-top: clamp(36px, 5vw, 60px); padding-bottom: 8px; }
.pk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.pk-head span + span { color: var(--text-dim); font-weight: 400; }

.pk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 52px);
}

.pk-grid .pk:nth-last-child(-n + 2) { border-bottom: 0; }

.pk {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.pk-copy { min-width: 0; }

/* The sleeves stay in their own colours here. The duotone is for photographs
   of people, and a record cover is a made thing -- printing it in our two
   inks takes the artist's work off them. */
.pk-art { position: relative; display: block; width: 88px; height: 88px; overflow: hidden; background: var(--line); }
.pk-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A wash of the marker over every sleeve: the covers keep their own picture
   but stop being twelve unrelated colour schemes down one page. */

.pk-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
}

.pk-who { margin: 0 0 5px; font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.14; letter-spacing: -0.02em; }
.pk-who a { color: inherit; text-decoration: none; }
.pk:hover .pk-who a, .pk:focus-within .pk-who a { text-decoration: underline; text-underline-offset: 0.12em; }
.pk-line { margin: 0 0 6px; font-style: italic; font-weight: 300; font-size: 1rem; line-height: 1.4; }
.pk-meta { margin: 0; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* ---- the second act ----------------------------------------------------- */

/* A square sleeve cropped to a letterbox loses the record: the title gets
   sliced off the top and whatever is in the middle becomes the picture. So
   the sleeve is shown WHOLE, and the band behind it is the same sleeve blown
   up and thrown out of focus -- the colour comes off the record itself and
   nothing is cut. */
.line-band { position: relative; overflow: hidden; margin: 52px 0 0; padding: clamp(34px, 5vw, 62px) 0; isolation: isolate; }
.line-band::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background-image: var(--band-image);
  background-size: cover;
  background-position: center;
  filter: blur(46px) saturate(1.15);
  transform: scale(1.12);
}
.line-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 10, 62, 0.92) 0%, rgba(6, 10, 62, 0.74) 48%, rgba(6, 10, 62, 0.42) 100%);
}
.line-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 20vw, 230px);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.line-band-art { display: block; order: 2; box-shadow: 0 18px 40px rgba(6, 10, 62, 0.45); }
.line-band-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.line-band-copy { order: 1; color: var(--paper); }
.line-band-kick { margin: 0 0 12px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marker); }
.line-band-quote { margin: 0; max-width: 24ch; font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 3.1vw, 2.2rem); line-height: 1.24; letter-spacing: -0.015em; }
.line-band-quote a { color: inherit; text-decoration: none; }
.line-band-quote a:hover { text-decoration: underline; text-underline-offset: 0.14em; }

@media (max-width: 640px) {
  .line-band-inner { grid-template-columns: 1fr; gap: 20px; }
  .line-band-art { order: 1; max-width: 180px; }
  .line-band-copy { order: 2; }
}

@media (max-width: 860px) {
  .pk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pk { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .pk-art { width: 72px; height: 72px; }
}

/* ---- listings, cards, bands -------------------------------------------- */

.section-heading { border-bottom: 1px solid var(--text); }
.section-heading h2, .genre-band h2, .submit-band h2 {
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
  text-transform: none;
}

.post-card { background: transparent; border: 0; box-shadow: none; }
.card-image { border: 0; }
.card-image img, .feature-hero-media img, .image-fallback { filter: url(#duotone); }
.post-card h2 { font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.2; letter-spacing: -0.018em; text-transform: none; }
.post-card h2 a { text-decoration: none; }
.post-card .card-copy > p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.5; }

.text-link { color: var(--ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.image-fallback { background: var(--ink); }
.image-fallback span { color: var(--paper); font-family: var(--mono); font-weight: 700; text-transform: lowercase; }

.button, .submit-btn { background: var(--ink); color: var(--paper); border: 0; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.button:hover, .submit-btn:hover { background: var(--text); color: var(--paper); }

.feature-hero { border: 0; }
.feature-hero-scrim { background: linear-gradient(to top, rgba(20,20,26,0.86), rgba(20,20,26,0.08) 62%, transparent); }
.feature-hero-copy h2 { font-weight: 500; letter-spacing: -0.028em; text-transform: none; }
.feature-hero-copy h2 a, .feature-hero-copy > p { color: #F4F2EA; }
.feature-hero .pill { background: var(--marker); color: var(--text); border: 0; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.feature-hero .text-link { color: var(--marker); }

.genre-band, .submit-band { background: var(--text); color: var(--paper); }
.genre-band h2, .submit-band h2, .genre-list a, .genre-list span, .genre-list small { color: var(--paper); }
.genre-list a { font-weight: 500; text-transform: none; letter-spacing: -0.02em; }

.site-footer { background: var(--text); color: var(--paper); border-top: 0; }
.site-footer a, .footer-links a, .footer-links-heading, .footer-note, .footer-small { color: var(--paper); }
.footer-small { opacity: 0.75; }
.footer-wordmark { color: var(--paper); }
.footer-wordmark .site-ball { animation-duration: 26s; }

/* ============================================================================
   The roundup page — Sandy's notes, 12 Sept
   ============================================================================
   "The top bar is shit... left-aligned, small, and wonky. The blue tinge to
   the disco ball still needs to be there... it can't be silver. It needs to
   be blue. The introvert disco text is shit... make it all capital and small.
   Remove Home. There's too much space. The horizontal line looks shit.
   Always Words by Nami. Make the eyebrow the date a dot, not a full stop.
   Make the pop bangs all the same colour."
   ========================================================================= */

/* ---- the top bar ------------------------------------------------------- */

/* No rule under the masthead, and no burger: the blog has one nav item and
   it does not need a drawer to hold it. */
/* A little air above the name so the masthead sits down into the page
   rather than on its top edge, and room under the ball so it is not resting
   on whatever comes next. */
.site-header {
  background: var(--paper);
  border-bottom: 0;
  padding-top: 22px;
  padding-bottom: 26px;
  /* It rides down the page with you. `relative` here quietly cancelled the
     shared stylesheet's sticky, which is why it stopped. */
  position: sticky;
  top: 0;
  z-index: 50;
}

/* The line under the masthead draws itself in from the left as the page
   moves, so the bar arrives rather than sits there. Browsers without a
   scroll timeline just get the line, which is the point of it anyway. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 35%, transparent));
  transform-origin: left center;
  animation: id-rule-in linear both;
  animation-timeline: scroll();
  animation-range: 0 140px;
}
@keyframes id-rule-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .site-header::after { animation: none; } }
.menu-btn, .nav-overlay, .nav-scrim { display: none; }

/* Left, beside the burger, small. The kink is deliberate: it was in the
   first mock-up she liked and it stops the lockup reading as a template. */
/* Same measure as the article, so the I of INTROVERT sits on the same
   vertical as the T of the headline underneath it. */
.header-inner {
  position: relative;
  justify-content: center;
  width: min(calc(100% - 96px), 1080px);
  min-height: 56px;
  padding-left: 0;
}

/* No room to hang a bullet on a phone: the ball comes back inline and the
   name gives up its alignment rather than the ball falling off the page. */
@media (max-width: 700px) {
  .header-inner { width: min(calc(100% - 32px), 1080px); }
  .site-ball { left: 50%; }
}

/* The name sits on the text vertical -- level with the genre, the headline
   and the byline -- and the ball hangs in the margin to its left, like a
   bullet. That needs a gutter wide enough to hold it, which is why the
   article measure below insets further than the default 24px. */
.wordmark {
  position: relative;
  padding-top: 54px;
  gap: 0;
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.wordmark .l { font-weight: 400; }
/* Two words, not one long one: the spacer between them is a real gap. */
.wordmark .sp { display: inline-block; width: 0.62em; }
.wordmark:hover { color: var(--ink); }

/* Blue, like the favicon — the ball is duotoned into the page's own two
   inks rather than left as a silver photograph. */
/* Over the name, centred on it, and small enough to read as a mark. The
   letters are separate elements -- stacking the lockup with flex-direction
   spelled the name downwards, one letter per line. */
.site-ball {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: clamp(24px, 3vw, 32px);
  filter: url(#duotone);
}

.menu-btn span, .menu-btn span::before, .menu-btn span::after { background: var(--ink); }

/* ---- the headline block ------------------------------------------------ */

.article-shell { width: min(calc(100% - 96px), 1240px); padding: clamp(26px, 3.5vw, 44px) 0 110px; }

/* Everything sits on the same vertical: the masthead, the words on the hero,
   the picks and the article. The shared stylesheet runs to 1320px, which left
   THE PICKS starting a good way left of the headline above it. */
/* Widened 13 Sept. The hero, the picks and the article all take this one
   measure, so they keep the same left edge. */
.shell { width: min(calc(100% - 96px), 1240px); }
@media (max-width: 700px) { .shell { width: calc(100% - 32px); } }
.article-header { margin-bottom: 30px; }
.breadcrumb { display: none; }

/* Genre and date, one line, one colour, a middle dot between them. */
/* Blue made the genre read as a link and the date read as a mistake. The
   whole line is quiet now; it is furniture, not a call to action. */
.article-header .kicker,
.article-header .kicker a,
.article-header .kicker time { color: var(--text-dim); }
/* The date is the only thing above the headline now, and it is not leaning
   on it. */
.article-header .kicker { margin: 0 0 26px; }
.article-header .kicker a { text-decoration: none; }
.article-header .kicker a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* The rule under the byline was the thing she called shit. */
.article-meta { margin-top: 12px; padding-top: 0; border-top: 0; }

/* ---- one artist, one block --------------------------------------------- */

/* No separate cover: the player carries the artwork, so a review is a single
   column -- heading, the line worth quoting, the words, the player. */
/* No rule between artists: the verdict's own hairline is the only horizontal
   line a review needs, and two of them a block apart reads as a table. */
.rv {
  padding: 30px 0 42px;
}

.rv-copy > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rv-copy h3 { margin: 0 0 0.5em; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.rv-copy p { margin: 0 0 1.1em; }
.rv-copy p:last-child { margin-bottom: 0; }
.rv-copy .bops-embed { margin: 1.4em 0 0; }

/* The verdict: a mono label in the same voice as the kicker at the top of the
   page, the line itself in italic text face, and a hairline to close it. */
.article-content .rv-deck {
  /* It sits where BOPS's pull quote used to, and inherits that blue 5px rule
     unless it is told otherwise. One line per review, not two. */
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.article-content h5.rv-quote {
  display: block;
  margin: 0;
  padding: 0 0 14px;
  background: none;
  border-bottom: 1px solid var(--text);
  color: var(--text);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.38;
  letter-spacing: -0.012em;
}
.article-content h5.rv-quote + p { margin-top: 1.7em; }

/* A single-artist review carries the verdict on its own, outside a .rv block,
   so the same furniture has to work there too. */
.article-content > .rv-deck { margin: 0 0 8px; padding-top: 0; border-top: 0; }
.article-content > .rv-quote + p { margin-top: 1.7em; }
.article-content > .bops-embed:last-child { margin-top: 2em; }

/* The marker is a movement now, not a state: it wipes across the line as you
   reach it, the way someone marking a page in front of you would. Browsers
   without a view timeline draw it on load instead -- same end, less theatre. */
.article-content h5.rv-quote .rv-hl {
  display: inline;
  padding: 0.06em 0.2em;
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-position: 0 0.1em;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Tied to the scroll, so it draws going down and undraws coming back up.
     The range is measured across the line's whole journey through the
     viewport: nothing happens until it is a third of the way up the screen
     -- by which point you have seen there is a quote there -- and it lands
     as the line reaches the middle. Starting at `entry` meant it was most
     of the way across before the quote was properly on screen. */
  animation: id-marker-sweep 1200ms linear both;
  animation-timeline: view();
  animation-range: cover 34% cover 58%;
}
@keyframes id-marker-sweep { to { background-size: 100% 100%; } }

.article-content h5.rv-quote .rv-mark {
  color: var(--ink);
  font-style: normal;
  opacity: 0;
  animation: id-mark-in 600ms ease-out both;
  animation-timeline: view();
  animation-range: cover 30% cover 40%;
}
@keyframes id-mark-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .article-content h5.rv-quote .rv-hl { animation: none; background-size: 100% 100%; }
  .article-content h5.rv-quote .rv-mark { animation: none; opacity: 1; }
}

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

.about { padding: clamp(36px, 5vw, 70px) 0 clamp(60px, 8vw, 110px); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.about-photo { margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; filter: url(#duotone); }
.about-copy { max-width: 46ch; }
.about-h {
  margin: 0 0 22px;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.about-copy p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; }
.about-copy .about-small { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; line-height: 1.9; margin: 0; color: var(--text-dim); }
.about-copy a { color: var(--ink); }
.about-badges { margin-top: 26px; }
.about-badges .id-badge { border-color: var(--text); color: var(--text); text-decoration: none; }
.about-badges .id-badge.b1 { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.about-badges .id-badge.b2 { background: var(--marker); color: var(--text); border-color: var(--text); }
.about-badges .id-badge.b3:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo img { max-width: 320px; }
}

/* ---- pagination --------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--text);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { text-decoration: underline; text-underline-offset: 0.24em; }
.pager-step.is-off { color: var(--line); }
.pager-nums { display: flex; align-items: center; gap: 10px; }
.pager-num.is-here { color: var(--text); border-bottom: 2px solid var(--marker); }
.pager-gap { color: var(--text-dim); }

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

/* No rule above the ticker: the change of colour underneath is the edge. */
.id-footer { background: var(--paper); border-top: 0; padding: 0; margin-top: 18px; }
.id-footer .footer-grid, .id-footer .footer-small { display: none; }

/* NOW PLAYING: every artist the blog has written about, moving across the
   bottom of the page they were reviewed on. */
.id-ticker {
  display: flex;
  align-items: center;
  padding: 30px 0 34px;
  overflow: hidden;
  border-bottom: 0;
}
.id-ticker-track { display: flex; min-width: 0; }
.id-ticker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  animation: id-ticker 240s linear infinite;
}
.id-ticker-row a { color: var(--text); text-decoration: none; }
.id-ticker-row a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.id-ticker-row b { color: var(--ink); font-weight: 400; }
.id-ticker:hover .id-ticker-row { animation-play-state: paused; }
@keyframes id-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .id-ticker-row { animation: none; } }

/* The page ends in the ink. */
/* The electric blue is right for a link and too loud for a field this size,
   so the footer runs a deeper mix of it and keeps the bright one for the
   marks between things. */
.id-terminal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  background: #0B1160;
  color: var(--paper);
  padding: 34px max(24px, calc((100% - 1080px) / 2)) 42px;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
.id-terminal-copy { min-width: 0; }
.id-now { min-width: 0; display: grid; gap: 10px; }
.id-now-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(233, 230, 218, 0.75);
}
/* A player that plays nothing. It is the shelf the newest record is sitting
   on -- title bar, LCD, a bouncing EQ -- and the only button that does
   anything is the one that takes you to the review. 1997, on purpose. */
.id-amp {
  background: #23242B;
  border: 1px solid #4A4C57;
  box-shadow: inset -1px -1px 0 #101117, inset 1px 1px 0 #6E7080;
  color: #C9CBD6;
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  user-select: none;
}
.id-amp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: linear-gradient(90deg, #3B3D9E, #23242B 78%);
  color: #E9E6DA;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.id-amp-bar b { color: #9A9CAB; font-weight: 400; letter-spacing: 0.1em; }
.id-amp-body { display: flex; gap: 10px; padding: 10px; align-items: stretch; }
.id-amp-art {
  width: 58px;
  height: 58px;
  flex: none;
  object-fit: cover;
  display: block;
  filter: url(#duotone) saturate(1.1);
  box-shadow: inset 1px 1px 0 #101117;
}
.id-amp-art-blank { background: repeating-linear-gradient(45deg, #2C2E36 0 6px, #23242B 6px 12px); }
.id-amp-read { min-width: 0; flex: 1; display: grid; align-content: space-between; gap: 6px; }
.id-amp-time {
  color: #79F07A;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(121, 240, 122, 0.45);
  font-variant-numeric: tabular-nums;
}
.id-amp-marquee { overflow: hidden; white-space: nowrap; display: flex; color: #79F07A; }
.id-amp-marquee span { flex: none; padding-right: 10px; animation: id-amp-scroll 14s linear infinite; }
@keyframes id-amp-scroll { to { transform: translateX(-100%); } }
.id-amp-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.id-amp-eq i {
  width: 4px;
  height: 20%;
  background: #79F07A;
  animation: id-amp-eq 700ms steps(4) infinite alternate;
}
@keyframes id-amp-eq { from { height: 15%; } to { height: 100%; } }
.id-amp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid #3A3C45;
  font-size: 0.6rem;
}
.id-amp-keys { color: #9A9CAB; letter-spacing: 0.16em; }
.id-amp-foot a { color: #79F07A; border-bottom-color: rgba(121, 240, 122, 0.4); }
.id-amp-foot a:hover { color: var(--marker); border-bottom-color: var(--marker); }

@media (prefers-reduced-motion: reduce) {
  .id-amp-marquee span, .id-amp-eq i { animation: none; }
  .id-amp-eq i { height: 60%; }
}

@media (max-width: 860px) {
  .id-terminal { grid-template-columns: 1fr; gap: 26px; }
  .id-now { margin-top: 4px; }
}
.id-terminal .id-line { margin: 0; }
.id-terminal a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(233, 230, 218, 0.45); }
.id-terminal a:hover { color: var(--marker); border-bottom-color: var(--marker); }
.id-terminal i { color: var(--marker); font-style: normal; padding: 0 4px; }
.id-terminal .id-line b { color: var(--paper); }
.id-terminal b { letter-spacing: 0.2em; }
.id-hits { color: var(--marker); font-variant-numeric: tabular-nums; }
.id-copy { margin-top: 14px; opacity: 0.6; font-size: 0.64rem; }

.id-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 6px; }
.id-badge {
  width: 88px;
  height: 31px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2px;
  font-size: 0.45rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--paper);
}
.id-badge.b1 { background: var(--paper); color: var(--ink); }
.id-badge.b2 { background: var(--marker); color: var(--text); border-color: var(--marker); }
.id-badge.b3 { background: transparent; color: var(--paper); text-decoration: none; }
.id-badge.b3:hover { background: var(--paper); color: #0B1160; }

.id-prompt { margin-top: 10px; }
.id-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--marker);
  vertical-align: -0.14em;
  animation: id-blink 620ms steps(1) infinite;
}
@keyframes id-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .id-cursor { animation: none; } }

@media (max-width: 700px) {
  .id-terminal { padding-left: 16px; padding-right: 16px; }
}
.rv-player iframe,
.rv-copy .bops-embed iframe { display: block; width: 100%; }

@media (max-width: 760px) {
  .rv { padding: 28px 0; }
}

/* ---------------------------------------------------------------------
   The issue number, top right of a piece.
   The ornament and the information are the same object: nothing here is
   moving purely to move. It rolls up to the number once, on load.
   --------------------------------------------------------------------- */
/* Grid, not flex, and for one reason: a grid track is reserved whether or not
   the headline wants it. A long single-artist headline -- "Abraham manticore
   descends into dust on tongue" -- was running under the number, because flex
   lets a long word push past its own box. The number's column exists first and
   the headline is given what is left, which is never nothing. */
/* Three rows: date, headline, byline. The number sits on the HEADLINE's row,
   which is the only thing on the page big enough to align to. Top-aligned to
   it, so the numerals and the first line of the headline start together.
   Its column is reserved by the grid, so a long headline wraps instead of
   running underneath it. */
.issue-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 40px;
  align-items: start;
}
.issue-header > .kicker       { grid-column: 1; grid-row: 1; }
.issue-header > h1            { grid-column: 1; grid-row: 2; overflow-wrap: break-word; }
.issue-header > .article-meta { grid-column: 1; grid-row: 3; }
.issue-mark {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  text-align: center;
  line-height: 1;
  /* The headline's cap-height starts a touch below its box. This drops the
     number by the same amount so the two read as sitting on one line. */
  margin-top: 0.14em;
}
.issue-word {
  display: block;
  margin-bottom: 5px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.issue-digits {
  display: flex;
  justify-content: center;
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.issue-reel { height: 1em; overflow: hidden; }
.issue-strip { display: block; will-change: transform; }
.issue-strip > span { display: block; height: 1em; }

@media (max-width: 760px) {
  .issue-header { column-gap: 22px; }
  .issue-digits { font-size: 2.1rem; }
}
/* Below this the two columns are fighting over a phone screen. The number goes
   above the date, small, on its own line, where it still reads as a masthead
   mark and takes nothing from the headline. */
@media (max-width: 520px) {
  .issue-header { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .issue-header > .kicker       { grid-row: 2; }
  .issue-header > h1            { grid-row: 3; }
  .issue-header > .article-meta { grid-row: 4; }
  .issue-mark {
    grid-column: 1; grid-row: 1;
    text-align: left; margin: 0 0 14px;
  }
  .issue-word { text-align: left; }
  .issue-digits { justify-content: flex-start; font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .issue-strip { transition: none !important; }
}