/* ---- scrumpy (Scrumpy — Elgin cider house & bottle sales 187) ---------------
   Bottle-glass black the whole way down, warm bone text, one pressed-amber
   accent rationed to eyebrows, hairline rules, strip labels, prices and the
   hero's ghost outline. There is no white band anywhere on the page.
   THE STRUCTURAL MOVE: the page escapes the container exactly ONCE — a gapless
   four-column wall of six photographs, the first and last spanning two columns,
   run edge to edge with the captions switched off. That wall is the strip that
   ships WITHOUT a heading, so it is selected on :not(:has(.sc-h2)) — a
   :nth-of-type would count sections, where the hero is number one, and would
   silently never fire. The four process pillars above it keep their heading and
   stay contained and gapped, which is what makes the wall read as a hole cut in
   the dark rather than as one more band. Second, smaller move: the buy card is
   a grid, so the price sits welded onto the title's own line, and the flat-lay
   plate is the only white on the page — lit bottles on a black shelf. */
body.t-scrumpy { background: #0c0b0a; color: #e8e1d6; --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --header-bg: rgba(12, 11, 10, 0.9); --surface: #141210; --surface-2: #1a1714; --line: #26211b; --line-strong: #3a332a; --heading: #f4efe6; --text: #e8e1d6; --muted: #a3988a; --radius: 0; --shadow: none; }
body.t-scrumpy .sf-head, body.t-scrumpy .sf-foot, body.t-scrumpy .sf-header, body.t-scrumpy .sf-footer { background: #0c0b0a; border-color: #26211b; }
/* heavy slab serif carries the wordmark, the stage line, every section heading
   and the welded title/price pair; everything else is the light sans */
body.t-scrumpy .sf-name, body.t-scrumpy .sc-hero h1, body.t-scrumpy .sc-h2, body.t-scrumpy .sc-buy-t, body.t-scrumpy .sc-buy-p { font-family: var(--sf-serif); font-weight: 700; letter-spacing: -0.02em; }
/* the bar is one thin tracked line floating on the photograph, and the hero
   eyebrow is set to the same micro-caps so it reads as a label, not a sentence */
body.t-scrumpy .sf-navlink, body.t-scrumpy .sc-hero p { text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 600; }
body.t-scrumpy .sc-hero { min-height: 100vh; }
body.t-scrumpy .sc-hero h1 { font-size: clamp(42px, 8.4vw, 96px); line-height: 0.95; letter-spacing: -0.035em; }
body.t-scrumpy .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: #c07a35; color: #f4efe6; }
body.t-scrumpy .sc-h2 { font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.025em; color: #f4efe6; }
/* body copy in warm bone rather than the muted token — on this ground the muted
   grey reads as switched off */
body.t-scrumpy .sc-richtext p, body.t-scrumpy .sc-about-copy p, body.t-scrumpy .sc-contact-sub { font-size: 16px; line-height: 1.95; letter-spacing: 0.012em; color: #cfc4b4; }
/* the contained bands are ruled off one another in amber hairline */
body.t-scrumpy .sc-strip, body.t-scrumpy .sc-contact-band { border-top: 1px solid rgba(192, 122, 53, 0.4); }
body.t-scrumpy .sc-strip { padding: clamp(62px, 9vh, 94px) 20px clamp(54px, 8vh, 80px); }
body.t-scrumpy .sc-strip-label, body.t-scrumpy .sc-buy-cat { text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 600; color: #c07a35; margin-top: 13px; }
/* THE ESCAPE — the headingless strip gives up the container, the gutters and
   the captions: four columns, six tiles, first and last spanning two */
body.t-scrumpy .sc-strip:not(:has(.sc-h2)) { border-top: 0; width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; grid-auto-rows: clamp(148px, 19.5vw, 288px); }
body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-card:nth-child(1), body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-card:nth-child(6) { grid-column: span 2; }
body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-img { aspect-ratio: auto; height: 100%; border: 0; }
body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }
/* the buy grid: four across, twice, dead balanced */
body.t-scrumpy .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 46px clamp(16px, 2.2vw, 30px); }
/* two columns, so the title takes column one and the price is pushed onto the
   same line beside it instead of stacking under it */
body.t-scrumpy .sc-buy-card { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; text-align: left; }
body.t-scrumpy .sc-buy-media { grid-column: 1 / -1; background: #ffffff; padding: 12px; }
body.t-scrumpy .sc-buy-cat, body.t-scrumpy .sc-buy-form, body.t-scrumpy .sc-buy-card > .sc-buy-btn { grid-column: 1 / -1; justify-self: start; }
body.t-scrumpy .sc-buy-p { color: #c07a35; }
/* the second edge break, and the only parallax on the page */
body.t-scrumpy .sc-banner { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); min-height: 58vh; background-attachment: fixed; }
body.t-scrumpy .sc-contact-band { background: #100e0c; padding: clamp(72px, 11vh, 112px) 0; }
body.t-scrumpy .btn.brand { background: #c07a35; color: #0c0b0a; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; padding: 15px 30px; }
body.t-scrumpy .btn.brand:hover { background: #d18d47; }
@media (max-width: 820px) {
  body.t-scrumpy .sc-buy-grid, body.t-scrumpy .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-scrumpy .sc-banner { background-attachment: scroll; }
}

/* night — the cellar with the lights taken right down. Nothing inverts, because
   the day look is already dark: the ground goes blacker and the amber cools to
   the colour it actually is under a bulb. */
html[data-theme="dark"] body.t-scrumpy { background: #060505; color: #ded6ca; --header-bg: rgba(6, 5, 5, 0.92); --surface: #0e0c0b; --surface-2: #131110; --line: #1e1a16; --line-strong: #2d2822; --heading: #efe8dc; --text: #ded6ca; --muted: #948a7d; --radius: 0; --shadow: none; }
html[data-theme="dark"] body.t-scrumpy .sf-head, html[data-theme="dark"] body.t-scrumpy .sf-foot, html[data-theme="dark"] body.t-scrumpy .sf-header, html[data-theme="dark"] body.t-scrumpy .sf-footer { background: #060505; border-color: #1e1a16; }
html[data-theme="dark"] body.t-scrumpy .sc-strip, html[data-theme="dark"] body.t-scrumpy .sc-contact-band { border-top-color: rgba(176, 111, 48, 0.34); }
html[data-theme="dark"] body.t-scrumpy .sc-contact-band { background: #0a0908; }
html[data-theme="dark"] body.t-scrumpy .sc-richtext p, html[data-theme="dark"] body.t-scrumpy .sc-about-copy p, html[data-theme="dark"] body.t-scrumpy .sc-contact-sub { color: #c2b8a8; }
html[data-theme="dark"] body.t-scrumpy .sc-strip-label, html[data-theme="dark"] body.t-scrumpy .sc-buy-cat, html[data-theme="dark"] body.t-scrumpy .sc-buy-p, html[data-theme="dark"] body.t-scrumpy .sc-hero .btn.brand.sc-hero-ghost { border-color: #b06f30; color: #b06f30; }
html[data-theme="dark"] body.t-scrumpy .btn.brand { background: #b06f30; color: #060505; }
html[data-theme="dark"] body.t-scrumpy .btn.brand:hover { background: #c58339; }