/* ---- vastrap (Vastrap — Wedding & function band 252) -----------------------
   THE STRUCTURAL MOVE: the gig list refuses photographs. Between a six-tile
   icon grid and a six-tile photograph wall sits a band of plain type — three
   columns of dated lines, no bullet, no card, no picture — carried only by an
   amber rule and an amber date on the first line of each entry. Around it, two
   near-black full-bleed bands (the nav-into-hero run at the top, the closing
   call at the foot) bracket a warm off-white middle that never alternates.
   The nav is repainted as a bar and nothing else — no rule here touches the
   items inside .ws-nav / .ws-nav-inner, and nothing uses order, position or
   :nth-of-type. The one nth-child is the platform's own zebra selector, where
   every sibling is a section. */
body.t-vastrap.ws-body {
  --bg: #f4efe6; --fg: #4f483f; --heading: #17150f; --text: #4f483f; --muted: #8a8377;
  --vs-black: #0e0d0c; --vs-amber: #c98a2e; --vs-bone: #f0ebe1; --vs-line: #ded5c6;
  --hero-a: rgba(14, 13, 12, .32); --hero-b: rgba(14, 13, 12, .74);
}

/* the pale middle runs unbroken — the alternating wash is switched off so the
   only dark surfaces on the page are the two that paint themselves */
body.t-vastrap.ws-body .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }

/* the shared sheet's hardcoded greys re-pointed at tokens, so night moves the page */
body.t-vastrap .ws-sub, body.t-vastrap .ws-feature p, body.t-vastrap .ws-story-copy p, body.t-vastrap .ws-member p, body.t-vastrap .ws-gallery-cap span { color: var(--text); }

/* the bar itself goes near-black so the top of the page reads as one dark run
   into the photograph; the links inside it are left exactly where they are */
body.t-vastrap .ws-nav { background: var(--vs-black); color: var(--vs-bone); border-bottom: 0; }

/* band one: a whole screen of hall light, bone display type, one ghost line */
body.t-vastrap .ws-hero { min-height: 100vh; background-color: var(--vs-black); }
body.t-vastrap .ws-hero h1 { font-weight: 600; font-size: clamp(38px, 7vw, 84px); letter-spacing: -.035em; line-height: 1.02; }
body.t-vastrap.ws-body .ws-hero-cta.btn.brand { background: transparent; color: var(--vs-bone); box-shadow: inset 0 0 0 1px var(--vs-amber); border-radius: 0; padding: 16px 40px; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
body.t-vastrap.ws-body .ws-hero-cta.btn.brand:hover { background: var(--vs-amber); color: #14120e; }

/* every section heading is a small amber label; the display weight is spent on
   the story, the closing line and the bandleader's sentence instead */
body.t-vastrap .ws-h2 { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--vs-amber); margin-bottom: 30px; }
body.t-vastrap .ws-story-copy h2, body.t-vastrap .ws-quote-t { font-weight: 600; letter-spacing: -.03em; font-style: normal; }

/* photographs are dropped square onto the ground — no radius anywhere */
body.t-vastrap .ws-story-media img, body.t-vastrap .ws-gallery-item img, body.t-vastrap .ws-member-photo img { border-radius: 0; }
body.t-vastrap .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 0 16px; }

/* six tiles, two rows of three, ruled off at the top instead of boxed */
body.t-vastrap .ws-features-grid, body.t-vastrap .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
body.t-vastrap .ws-feature { text-align: left; padding: 18px 0 0; border-top: 1px solid var(--vs-line); }
body.t-vastrap .ws-feature-icon { color: var(--vs-amber); }
body.t-vastrap .ws-gallery-item img { aspect-ratio: 3 / 2; }

/* ★ THE MOVE — six dated entries, three columns of plain type, no picture at
   all, the date carried on the first line in amber above the venue */
body.t-vastrap .ws-listblock .ws-narrow { max-width: 1120px; }
body.t-vastrap .ws-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 44px; margin: 0; padding: 0; list-style: none; }
body.t-vastrap .ws-list li { margin: 0; padding: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--heading); white-space: pre-line; border-top: 2px solid var(--vs-amber); }
body.t-vastrap .ws-list li::first-line { color: var(--vs-amber); font-weight: 700; letter-spacing: .12em; }

/* three quotes down one centred column, so the eye takes one at a time */
body.t-vastrap .ws-testimonials-grid { grid-template-columns: minmax(0, 660px); justify-content: center; gap: 46px; }
body.t-vastrap .ws-quote { text-align: center; }
body.t-vastrap .ws-quote blockquote { font-size: 19px; line-height: 1.65; font-style: normal; color: var(--heading); }

/* four across in one row, answering the two rows of three above it */
body.t-vastrap .ws-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }

/* the bandleader's line, air above and below, his name in amber */
body.t-vastrap .ws-quoteblock { padding: 100px 0; }
body.t-vastrap .ws-quote-a { color: var(--vs-amber); }

/* band two: the closing call, near-black edge to edge, amber slab on it */
body.t-vastrap.ws-body .ws-section.ws-cta { background: var(--vs-black); color: var(--vs-bone); padding: 96px 0; }
body.t-vastrap.ws-body .btn.brand { background: var(--vs-amber); color: #14120e; border-radius: 0; box-shadow: none; padding: 15px 34px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

/* the last band splits: what we need on the left, the seven fields on the right */
body.t-vastrap .ws-contact .ws-narrow { max-width: 1120px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 12px 64px; align-items: start; }
body.t-vastrap .ws-contact .ws-h2 { grid-column: 1 / -1; text-align: left; }
body.t-vastrap .ws-contact .ws-sub { grid-column: 1; grid-row: 2; margin: 0; max-width: none; text-align: left; white-space: pre-line; font-size: 15px; line-height: 1.9; color: var(--heading); }
body.t-vastrap .ws-contact .ws-form { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
body.t-vastrap .ws-field input, body.t-vastrap .ws-field textarea { background: transparent; border: 1px solid var(--vs-line); border-radius: 0; color: var(--heading); }

/* every band folds to two and then to one — each still fills its rows */
@media (max-width: 980px) {
  body.t-vastrap .ws-features-grid, body.t-vastrap .ws-gallery-grid, body.t-vastrap .ws-list, body.t-vastrap .ws-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-vastrap .ws-contact .ws-narrow { grid-template-columns: 1fr; }
  body.t-vastrap .ws-contact .ws-sub, body.t-vastrap .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  body.t-vastrap .ws-features-grid, body.t-vastrap .ws-gallery-grid, body.t-vastrap .ws-list, body.t-vastrap .ws-team-grid { grid-template-columns: 1fr; }
}

/* night — the off-white cools to a warm dark room, the two black bands drop
   below it so they are still the darkest things on the page, and the tungsten
   lifts a shade to keep hold of the dates and the headings */
html[data-theme="dark"] body.t-vastrap.ws-body {
  --bg: #16140f; --fg: #ada699; --heading: #f2ede2; --text: #ada699; --muted: #7d7669;
  --vs-black: #080807; --vs-amber: #e0a44a; --vs-bone: #f2ede2; --vs-line: #302b23;
  --hero-a: rgba(6, 6, 5, .38); --hero-b: rgba(6, 6, 5, .80);
}