/* GEMMER — wild-fermented ginger beer & craft sodas, Paarl.
   THE STRUCTURAL MOVE: the four-tile attribute band is WELDED flush to the
   bottom of a 100vh slider — full-bleed, zero top padding, no heading over it,
   no radius and no border — and from that point the page never shows a card
   edge again. The catalogue's chrome comes off entirely, the story band is the
   only contained column on the page, and the continuous charcoal scroll is
   stopped exactly twice: by a 50/50 photograph-and-copy band and by the
   near-black closing band. Separation is done purely by photographs and by a
   two-stop shift of charcoal — no rules, no counters, no white anywhere, so
   all the warmth on the page comes off the amber glass and the wet slate. The
   one burnt ginger-gold is rationed to the hero's hairline outline, the strip
   labels, the link hover and the type on the buy slab; every button stays a
   flat dark slab so nothing inverts to white and breaks the run.
   Nothing here touches the order or position of anything in .sf-header —
   colour, type and tracking only — and there is no nth-of-type in the block. */
body.t-gemmer {
  background: #101010;
  color: #a29b92;
  --gm-gold: #c8862f;
  --gm-gold-hi: #d99a3d;
  --gm-slab: #1d1710;
  --gm-slab-hi: #2a2116;
  --gm-band: #0b0b0b;
  --gm-deep: #060606;
  --gm-well: #191919;
  --bg-flat: #101010;
  --header-bg: #101010;
  --surface: #171717;
  --surface-2: #0b0b0b;
  --line: #242424;
  --line-strong: #3c3c3c;
  --heading: #f2ece1;
  --text: #a29b92;
  --muted: #7c766d;
  --radius: 0;
  --shadow: none;
}

/* a flat charcoal bar the same value as the page, so the slider begins under it
   rather than behind it. Colour, type and tracking only. */
body.t-gemmer .sf-head, body.t-gemmer .sf-header,
body.t-gemmer .sf-foot, body.t-gemmer .sf-footer, body.t-gemmer .sf-cats {
  background: #101010; border-color: #242424;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-gemmer .sf-name, body.t-gemmer .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 500; }

/* GOLD 1 of 4 — the link hover, which is the only underline-weight accent */
body.t-gemmer a:hover, body.t-gemmer .sf-navlink:hover { color: var(--gm-gold-hi); }

/* GOLD 2 of 4 — the buy control. A flat slab with no edge on it, kept dark with
   gold type rather than filled bright: a white or gold-filled button would be
   the only lit rectangle on a page whose whole argument is the dark run. */
body.t-gemmer .btn.brand { background: var(--gm-slab); border: 0; box-shadow: none; color: var(--gm-gold-hi); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 600; padding: 15px 32px; }
body.t-gemmer .btn.brand:hover { background: var(--gm-slab-hi); color: #eab35f; }

/* THE SLIDER — the whole first screen, three photographs cross-fading, copy on
   the vertical midline: one flagship line at display scale with the sub dropped
   several sizes into a tracked gold kicker beneath it. GOLD 3 of 4 is the
   kicker; GOLD 4 is the hairline the ghost CTA is drawn with. */
body.t-gemmer .sc-hero { min-height: 100vh; padding: 130px 24px; }
body.t-gemmer .sc-hero h1 { font-size: clamp(40px, 8vw, 88px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 26px; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55); }
body.t-gemmer .sc-hero p { color: var(--gm-gold-hi); text-transform: uppercase; letter-spacing: 0.32em; font-size: clamp(9.5px, 1.2vw, 11.5px); font-weight: 600; line-height: 2; margin: 0 0 42px; text-shadow: none; }
body.t-gemmer .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--gm-gold); color: #f6f0e5; }
body.t-gemmer .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--gm-gold); border-color: var(--gm-gold); color: #12100c; }

/* every heading below the slider shares one voice: bone, book weight, tight
   tracking, no caps — which is what separates them from the tracked gold labels */
body.t-gemmer .sc-h2 { color: var(--heading); font-size: clamp(22px, 3vw, 34px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.14; margin: 0 0 24px; }

/* THE WELD — the attribute band is pulled out to the viewport and pinned hard
   against the bottom of the slider with no top padding and no heading over it,
   so hero and band read as one object. Four evenly gapped tiles, ground half a
   stop under the page, and no radius or border on anything in it. */
body.t-gemmer .sc-strip { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; padding: 0 clamp(20px, 4vw, 60px); background: var(--gm-band); }
body.t-gemmer .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); padding: clamp(34px, 4.6vw, 62px) 0 clamp(38px, 5vw, 66px); }
body.t-gemmer .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: var(--gm-well); }
body.t-gemmer .sc-strip-label { color: var(--gm-gold-hi); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; line-height: 1.7; margin-top: 16px; }

/* THE STORY — the one contained column on the page: the brew room held to half
   the band, heading and two short left-aligned paragraphs on the other half */
body.t-gemmer .sc-about-split { gap: clamp(32px, 5vw, 76px); padding: clamp(80px, 9vw, 130px) 20px; }
body.t-gemmer .sc-about-media img { aspect-ratio: 4 / 5; border-radius: 0; }

/* THE CATALOGUE — three across on the bare charcoal with every scrap of card
   chrome taken off: no ground, no border, no shadow and no hover lift, so the
   six bottles read as six photographs rather than six tiles */
body.t-gemmer .sc-products { max-width: 1240px; padding: clamp(20px, 3vw, 40px) 20px clamp(70px, 8vw, 112px); }
body.t-gemmer .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 34px; padding: 0; }
body.t-gemmer .product-card, body.t-gemmer .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-gemmer .product-card .ph { aspect-ratio: 4 / 5; background: var(--gm-well); }
body.t-gemmer .product-card .meta { padding: 16px 0 0; }

/* THE 50/50 — the photograph takes the left half of a full-bleed band and the
   'known for' copy sits on flat near-black in the right half. Both background
   layers are sized to half the band, so the scrim stops where the picture does
   and the copy side stays a clean dark plane. */
body.t-gemmer .sc-banner { margin: 0 calc(50% - 50vw); min-height: 74vh; display: flex; align-items: center; text-align: left; background-color: var(--gm-deep); background-size: 50% 100%; background-position: left center; background-repeat: no-repeat; padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 76px) clamp(64px, 8vw, 112px) 56%; }
body.t-gemmer .sc-banner-inner { margin: 0; max-width: 440px; }
body.t-gemmer .sc-banner h2 { font-size: clamp(24px, 3.2vw, 40px); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; text-shadow: none; margin: 0 0 20px; }
body.t-gemmer .sc-banner p { color: var(--text); font-size: 15.5px; line-height: 1.85; text-shadow: none; margin: 0 0 30px; }

/* the closing band, a further stop into the black, and the last thing on the page */
body.t-gemmer .sc-contact-band { background: var(--gm-deep); border-top: 1px solid var(--line); padding: clamp(84px, 9vw, 128px) 0 clamp(90px, 10vw, 136px); }

@media (max-width: 900px) {
  body.t-gemmer .sc-hero { min-height: 86vh; padding: 104px 20px; }
  body.t-gemmer .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-gemmer .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  body.t-gemmer .sc-banner { min-height: 0; background-size: cover; background-position: center; padding: 72px 20px 78px; }
}

/* NIGHT — the neutral charcoal warms right down into an unlit brew room: the
   ground goes to a brown-black, the ink lifts to a warmer bone and the gold
   comes up two stops, because at #c8862f the hero hairline and the slab type
   both go muddy once the ground loses its grey. Every band on the page paints
   itself from these tokens, so nothing below needs restating. */
html[data-theme="dark"] body.t-gemmer {
  background: #0c0906;
  color: #b0a596;
  --gm-gold: #dda149;
  --gm-gold-hi: #eab863;
  --gm-slab: #241c12;
  --gm-slab-hi: #33281a;
  --gm-band: #080605;
  --gm-deep: #030202;
  --gm-well: #171310;
  --bg-flat: #0c0906;
  --header-bg: #0c0906;
  --surface: #141009;
  --surface-2: #080605;
  --line: #241d16;
  --line-strong: #3d3226;
  --heading: #f9f1e3;
  --text: #b0a596;
  --muted: #857a6c;
}
html[data-theme="dark"] body.t-gemmer .sf-head, html[data-theme="dark"] body.t-gemmer .sf-header,
html[data-theme="dark"] body.t-gemmer .sf-foot, html[data-theme="dark"] body.t-gemmer .sf-footer,
html[data-theme="dark"] body.t-gemmer .sf-cats { background: #0c0906; border-color: #241d16; }