/* ---- grendel (Grendel — Escape rooms & puzzle goods 269) -------------------
   THE STRUCTURAL MOVE: the booking band is welded under the hero as section
   TWO — a solid alarm-red strip carrying one horizontal line of controls where
   a paragraph would normally go, so the first interactive thing on the page is
   a form and not a link. The fields are cut back into the dark ground so the
   band stays a band. Everything else sits on one bottle-green so dark it reads
   black: no lighter panel anywhere, product cards drawn with a warm-grey
   hairline instead of a fill, and the page ending on a six-across photograph
   wall run flush to the foot with no container and no gutter. Sections are
   picked out by class and by :not(:has(.sc-h2)), never by nth-of-type, and
   nothing here touches the header, the nav or the order of anything in them. */
body.t-grendel {
  background: #0a1310;
  color: #b8b3a6;
  --gn-red: #c0392b;
  --gn-lit: #d2483a;
  --gn-bone: #ece7dc;
  --bg-flat: #0a1310;
  --header-bg: #0a1310;
  --surface: #0a1310;
  --surface-2: #0e1714;
  --line: #4d4a42;
  --line-strong: #635f55;
  --heading: #ece7dc;
  --text: #b8b3a6;
  --muted: #857f73;
  --radius: 0;
  --shadow: none;
}

/* a flat felt bar the same colour as the page, so the stage begins beneath it
   rather than behind it — colour only, nothing moved and nothing reordered */
body.t-grendel .sf-head, body.t-grendel .sf-header,
body.t-grendel .sf-foot, body.t-grendel .sf-footer, body.t-grendel .sf-cats {
  background: #0a1310; border-color: #1a2420;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* RED 1 of 3 — every control is a flat alarm slab with no edge on it */
body.t-grendel .btn.brand { background: var(--gn-red); border: 0; box-shadow: none; color: #fbf7ef; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 30px; }
body.t-grendel .btn.brand:hover { background: var(--gn-lit); color: #ffffff; }

/* the stage: the whole window, three low-light rooms cross-fading, copy dead
   centre over the middle of the frame and nothing else on the fold */
body.t-grendel .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-grendel .sc-hero h1 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 18px; }
body.t-grendel .sc-h2 { color: var(--gn-bone); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.005em; margin-bottom: 30px; }

/* ★ THE MOVE — section two, butted straight onto the fold. RED 2 of 3, and the
   only object on the page allowed to carry the accent as a ground: one band,
   one line of dark inset controls, submit sitting on the end of the row. */
body.t-grendel .sc-contact-band { background: var(--gn-red); color: #fdf9f2; padding: 46px 0 52px; }
body.t-grendel .sc-contact-band-inner { max-width: 1160px; text-align: left; }
body.t-grendel .sc-contact-band .sc-h2 { color: #fdf9f2; margin-bottom: 8px; }
body.t-grendel .sc-contact-band .sc-contact-sub { color: #fdf9f2; margin: 0 0 26px; font-size: 14.5px; }
body.t-grendel .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1.6fr auto; gap: 18px; align-items: end; }
body.t-grendel .sc-contact-band .sc-field textarea { height: 46px; min-height: 46px; resize: none; }
body.t-grendel .sc-contact-band .btn.brand { background: #0a1310; color: var(--gn-bone); }

/* THE COLLAPSE — the page gives up the full window and stays contained from
   here to the band: prose in one half, one tall photograph in the other */
body.t-grendel .sc-about-split { max-width: 1080px; padding: 116px 20px 104px; gap: 64px; }
body.t-grendel .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-grendel .sc-about-copy p { color: var(--gn-bone); font-size: clamp(15.5px, 1.8vw, 17px); line-height: 1.95; }

/* the four rooms-and-rules tiles: one contained row that fills exactly */
body.t-grendel .sc-strip { padding: 96px 20px 100px; }
body.t-grendel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

/* and the wall at the foot — headingless, so it is the one strip that breaks
   the container: six across, edge to edge, no gutter, no caption */
body.t-grendel .sc-strip:not(:has(.sc-h2)) { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-grendel .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-grendel .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }

/* the priced block: three across in two rows that both fill. No lighter panel
   anywhere — each tile is a warm-grey hairline drawn on the same dark ground,
   and RED 3 of 3 is the rand figure. */
body.t-grendel .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
body.t-grendel .sc-buy-card { border: 1px solid var(--line); padding: 18px 18px 26px; }
body.t-grendel .sc-buy-p { color: var(--gn-lit); font-weight: 700; font-size: 16px; }

/* WIDE, TWICE AND LAST — the only full photograph after the stage, welded top
   and bottom, with the words held in the shadowed upper-left third */
body.t-grendel .sc-banner { min-height: 66vh; margin: 0 calc(50% - 50vw); padding: 13vh max(20px, calc(50vw - 620px)) 0; text-align: left; }
body.t-grendel .sc-banner-inner { max-width: 430px; margin: 0; }

@media (max-width: 900px) {
  body.t-grendel .sc-hero { min-height: 88vh; }
  body.t-grendel .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
  body.t-grendel .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-grendel .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-grendel .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-grendel .sc-banner { min-height: 52vh; padding: 11vh 20px 0; }
}

/* NIGHT — the felt drops another few stops toward true black so the hero, the
   banner and the wall at the foot become the only lit things in the building,
   and the alarm is lifted to meet them: the band, the rand figures and the
   controls all stay as loud against the darker ground as they were. */
html[data-theme="dark"] body.t-grendel {
  background: #050b09;
  color: #c6c0b2;
  --gn-red: #cf4436;
  --gn-lit: #e05547;
  --gn-bone: #f5f0e5;
  --bg-flat: #050b09;
  --header-bg: #050b09;
  --surface: #050b09;
  --surface-2: #0a110e;
  --line: #5a564c;
  --line-strong: #706b60;
  --heading: #f5f0e5;
  --text: #c6c0b2;
  --muted: #7c7669;
}
html[data-theme="dark"] body.t-grendel .sf-head, html[data-theme="dark"] body.t-grendel .sf-header,
html[data-theme="dark"] body.t-grendel .sf-foot, html[data-theme="dark"] body.t-grendel .sf-footer,
html[data-theme="dark"] body.t-grendel .sf-cats { background: #050b09; border-color: #131b18; }