/* ---- langspeel (Langspeel — Music magazine & live sessions 226) -----------
   THE STRUCTURAL MOVE: ratio discipline. Above the hinge everything bleeds and
   nothing has a gutter — a near-full-viewport cover photograph with the
   headline centred on it, and six trending frames welded straight onto its
   floor, three across and gapless. From the feature band down the page never
   leaves the 1120px column again and every grid is gapped: the SAME
   three-across tile recipe, only breathing. Two things break it — the session
   band, the widest thing on the page, sitting on its own still; and the one
   asymmetric split at the end, a wide reading column beside a narrow rail
   ruled off with a hairline. Brass is spent on category tags, timestamps and
   link hover and nowhere else; every other colour comes out of a photograph. */
body.t-langspeel.ws-body {
  --bg: #faf8f5; --fg: #3b3833; --heading: #14120f; --text: #3b3833; --muted: #857f75;
  --lg-line: #e4dfd5; --lg-brass: #a87d3c;
  --hero-a: rgba(14, 11, 8, .26); --hero-b: rgba(14, 11, 8, .58);
}

/* the bar is its own strip above the cover — solid paper, never overlaid */
body.t-langspeel .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--lg-line); }
body.t-langspeel .ws-brand { font-family: var(--sf-serif); font-weight: 400; font-size: 27px; letter-spacing: -.035em; color: var(--heading); }
body.t-langspeel .ws-nav-links a { color: var(--heading); opacity: .7; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; }
body.t-langspeel .ws-nav-links a:hover, body.t-langspeel .ws-nav-links a.on { color: var(--lg-brass); opacity: 1; }

/* the cover — one photograph, centred serif, a brass kicker, one ask */
body.t-langspeel .ws-hero { min-height: 88vh; }
body.t-langspeel .ws-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(38px, 6.2vw, 80px); letter-spacing: -.035em; line-height: 1.02; text-shadow: none; max-width: 19ch; }
body.t-langspeel .ws-hero p { color: #dcbd83; text-transform: uppercase; letter-spacing: .26em; font-size: 11px; font-weight: 700; max-width: none; margin: 0 auto 30px; opacity: 1; }

/* flat slabs, never a border */
body.t-langspeel.ws-body .btn.brand { background: var(--heading); color: var(--bg); border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; padding: 16px 32px; }
body.t-langspeel.ws-body .ws-hero-cta.btn.brand, body.t-langspeel.ws-body .ws-cta .btn.brand { background: #faf8f5; color: #14120f; box-shadow: none; }

/* one paper ground the whole way down — no tinted zebra band anywhere */
body.t-langspeel.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-langspeel .ws-h2, body.t-langspeel .ws-story-copy h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--heading); font-size: clamp(25px, 3.4vw, 40px); letter-spacing: -.032em; line-height: 1.08; text-align: left; margin: 0 0 16px; }
body.t-langspeel .ws-story-copy p, body.t-langspeel .ws-col p { color: var(--text); font-size: 15.5px; line-height: 1.85; }
body.t-langspeel .ws-sub { color: var(--muted); font-size: 13.5px; line-height: 1.72; text-align: left; margin: 0 0 34px; max-width: 64ch; }
body.t-langspeel .ws-feature p { color: var(--muted); font-size: 13.5px; line-height: 1.7; }

/* THE WELD — six trending frames on the cover's floor, no gutter at all */
body.t-langspeel.ws-body .ws-photogrid { padding: 0; }
body.t-langspeel .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-langspeel .ws-photogrid-grid img, body.t-langspeel .ws-gallery-item img, body.t-langspeel .ws-story-media img { border-radius: 0; aspect-ratio: 3 / 2; object-fit: cover; }

/* past the hinge nothing bleeds — the same three-across recipe, now gapped */
body.t-langspeel .ws-gallery-grid, body.t-langspeel .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 30px; }
body.t-langspeel .ws-gallery-cap strong, body.t-langspeel .ws-feature h3, body.t-langspeel .ws-col-h { display: block; font-family: var(--sf-serif); font-weight: 400; font-size: 20px; line-height: 1.28; letter-spacing: -.015em; color: var(--heading); margin: 12px 0 8px; }
body.t-langspeel .ws-gallery-cap span { display: block; color: var(--lg-brass); text-transform: uppercase; letter-spacing: .17em; font-size: 10px; font-weight: 700; }
body.t-langspeel .ws-feature { text-align: left; padding: 22px 0 0; border-top: 1px solid var(--lg-line); color: var(--heading); }

/* the session — the widest band on the page, standing on its own still */
body.t-langspeel.ws-body .ws-video { background-color: #14120f; background-image: linear-gradient(rgba(12, 10, 8, .60), rgba(12, 10, 8, .78)), url("/media/samples/mrb_session.jpg"); background-size: cover; background-position: center; }
body.t-langspeel .ws-video .ws-container { max-width: 1240px; }
body.t-langspeel .ws-video-frame { border-radius: 0; box-shadow: none; }
body.t-langspeel .ws-video .ws-h2, body.t-langspeel .ws-video-caption { color: #ece4d7; text-align: left; }

/* the page's only asymmetric split — reading column left, ruled rail right */
body.t-langspeel .ws-col + .ws-col { border-left: 1px solid var(--lg-line); padding-left: 32px; }
body.t-langspeel .ws-col + .ws-col::before { content: ""; display: block; height: 190px; margin: 0 0 20px; background: url("/media/samples/mrb_rail.jpg") center / cover no-repeat; }
body.t-langspeel .ws-col + .ws-col p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--lg-line); }

/* the subscribe prompt — the second and last time the paper goes dark */
body.t-langspeel.ws-body .ws-cta { padding: 120px 0; background-color: #14120f; background-image: linear-gradient(rgba(11, 9, 7, .62), rgba(11, 9, 7, .80)), url("/media/samples/mrb_cta.jpg"); background-size: cover; background-position: center; }
body.t-langspeel .ws-cta-inner h2 { font-family: var(--sf-serif); font-weight: 400; letter-spacing: -.03em; }
body.t-langspeel .ws-field input, body.t-langspeel .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--lg-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

@media (max-width: 760px) {
  body.t-langspeel .ws-photogrid-grid, body.t-langspeel .ws-gallery-grid, body.t-langspeel .ws-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-langspeel .ws-col + .ws-col { border-left: 0; border-top: 1px solid var(--lg-line); padding-left: 0; padding-top: 26px; }
  body.t-langspeel .ws-hero h1 { font-size: clamp(32px, 10vw, 52px); }
}

/* night — the same paper turned to charcoal, the brass one stop warmer */
html[data-theme="dark"] body.t-langspeel.ws-body {
  --bg: #171613; --fg: #a8a29a; --heading: #f6f3ed; --text: #a8a29a; --muted: #7d776e;
  --lg-line: #2e2b26; --lg-brass: #c99b52;
  --hero-a: rgba(8, 7, 5, .30); --hero-b: rgba(8, 7, 5, .64);
}
html[data-theme="dark"] body.t-langspeel.ws-body .ws-cta { background-image: linear-gradient(rgba(6, 5, 4, .72), rgba(6, 5, 4, .86)), url("/media/samples/mrb_cta.jpg"); }
html[data-theme="dark"] body.t-langspeel.ws-body .ws-video { background-image: linear-gradient(rgba(6, 5, 4, .68), rgba(6, 5, 4, .84)), url("/media/samples/mrb_session.jpg"); }