: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: "BOPS.";
  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: "BOPS.";
  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;
}