/* ---------- Wort — Sparge, craft brewery & bottle shop 107 (store) ----------
   THE ONE STRUCTURAL MOVE: the showcase catalogue is dropped to a SINGLE column
   and each panel is re-laid as a three-track grid — category, name and rule in
   the left track set hard right; the bottle alone, large, in the centre track;
   price and buy control in the right track set hard left. The type becomes two
   wings pointing inward at the object, so the whitespace lives in the two
   gutters rather than in the margins, and the page reads as object-in-the-
   middle, words-either-side. Everything above and below is held to that same
   centre line: a full-viewport centred hero, a narrowed four-across ingredient
   row, an overlay set on open sky and a narrow centred contact closing the
   symmetry. Bone ground almost everywhere, one deep charcoal band at the
   banner, and exactly one accent — malt copper — used only as a rule, an
   underline or a rand price. Never a fill, never a button ground. */
body.t-wort {
  background: #f5f2ea;
  color: #171512;
  --surface: #f5f2ea;
  --surface-2: #ebe6da;
  --line: #ddd6c7;
  --line-strong: #c8bfab;
  --heading: #171512;
  --text: #4a453d;
  --muted: #6f6a61;
  --header-bg: #f5f2ea;
  --radius: 0;
  --shadow: none;
}
/* the header keeps the same bone ground as the page — a flat edge, no glass */
body.t-wort .sf-header, body.t-wort .sf-footer { background: #f5f2ea; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #ddd6c7; }

/* every call to action is a word with a copper line under it, not a slab */
body.t-wort .btn.brand {
  background: transparent; border: 0; box-shadow: none; color: #9e5f26;
  padding: 0; text-transform: uppercase; letter-spacing: 0.26em;
  font-size: 11px; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 9px;
}
/* on the two photographic grounds the same word comes up to a light malt */
body.t-wort .sc-hero .btn.brand, body.t-wort .sc-hero .btn.brand:hover, body.t-wort .sc-banner .btn.brand {
  background: transparent; border: 0; padding: 0; color: #e6bb85; text-decoration-color: #e6bb85;
}
/* section headings are labels, never display type — nothing competes with the object */
body.t-wort .sc-h2 { font-size: clamp(12.5px, 1.4vw, 14.5px); text-transform: uppercase; letter-spacing: 0.28em; font-weight: 700; margin: 0 0 34px; }

/* THE STAGE — three composed product photographs at full viewport, copy on the axis */
body.t-wort .sc-hero { min-height: 100vh; padding: 120px 20px; }
body.t-wort .sc-hero h1 { font-weight: 600; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.02em; }
body.t-wort .sc-hero h1::after { content: ''; display: block; width: 58px; height: 2px; background: #e6bb85; margin: 30px auto 4px; }

/* THE AXIS — one beer to a row, the bottle on the centre line, words in the wings */
body.t-wort .sc-show-grid { grid-template-columns: 1fr; }
body.t-wort .sc-show-item { background: transparent; border-top: 1px solid #ddd6c7; }
body.t-wort .sc-show-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 430px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: clamp(20px, 6vw, 96px);
  align-items: center; text-align: left;
  max-width: 1180px; margin: 0 auto; min-height: 580px; padding: 58px 24px 62px;
}
body.t-wort .sc-show-media { grid-column: 2; grid-row: 1 / -1; padding: 0; }
body.t-wort .sc-show-media img { max-width: 100%; max-height: 460px; }
body.t-wort .sc-show-cat { grid-column: 1; grid-row: 2; justify-self: end; color: #6f6a61; font-size: 10.5px; letter-spacing: 0.24em; }
body.t-wort .sc-show-t { grid-column: 1; grid-row: 3; justify-self: end; text-align: right; max-width: 14ch; margin: 12px 0 0; font-size: clamp(20px, 2.7vw, 34px); line-height: 1.08; letter-spacing: 0.01em; }
body.t-wort .sc-show-rule { grid-column: 1; grid-row: 4; justify-self: end; width: 46px; height: 2px; background: #9e5f26; opacity: 1; margin: 16px 0 0; }
body.t-wort .sc-show-price { grid-column: 3; grid-row: 3; justify-self: start; margin: 12px 0 0; color: #9e5f26; font-weight: 600; font-size: clamp(19px, 2.2vw, 27px); }
body.t-wort .sc-show-inner > .sc-show-buy, body.t-wort .sc-show-inner > .sc-show-btn { grid-column: 3; grid-row: 4; justify-self: start; margin: 16px 0 0; }

/* the ingredient row is pulled in off the container so it sits on the axis too */
body.t-wort .sc-strip { max-width: 940px; padding: 94px 20px 30px; }
body.t-wort .sc-strip-img { border: 0; aspect-ratio: 3 / 4; background: #ebe6da; }

/* the only words on a picture: a short column held in the calm upper third */
body.t-wort .sc-about-overlay { padding: 22vh 20px 34vh; }
/* the one full-bleed dark band on the page */
body.t-wort .sc-banner { min-height: 66vh; display: flex; align-items: center; justify-content: center; padding: 90px 28px; }

/* eight priced tiles, four across, twice — the rows always fill */
body.t-wort .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 26px; }
body.t-wort .sc-buy-p { color: #9e5f26; font-weight: 600; }
/* a narrow column dead on the axis, closing the symmetry the hero opened */
body.t-wort .sc-contact { max-width: 460px; padding: 104px 20px 122px; }

@media (max-width: 900px) {
  body.t-wort .sc-show-inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 0; padding: 46px 22px 54px; }
  body.t-wort .sc-show-t, body.t-wort .sc-show-rule, body.t-wort .sc-show-price { text-align: center; max-width: none; margin-left: auto; margin-right: auto; }
  body.t-wort .sc-show-media img { max-height: 300px; }
  body.t-wort .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the bone goes to wet malt-house dark, the ink inverts, and the copper
   lifts one stop so the rule, the underline and the price keep their bite as the
   only colour left on the page. */
html[data-theme="dark"] body.t-wort {
  background: #14120f;
  color: #cfc9be;
  --surface: #14120f;
  --surface-2: #1d1a15;
  --line: #2b2721;
  --line-strong: #3d382f;
  --heading: #f2eee5;
  --text: #cfc9be;
  --muted: #8b8479;
  --header-bg: #14120f;
  --radius: 0;
  --shadow: none;
}
html[data-theme="dark"] body.t-wort .sf-header, html[data-theme="dark"] body.t-wort .sf-footer { background: #14120f; border-color: #2b2721; }
html[data-theme="dark"] body.t-wort .btn.brand { color: #d9a460; }
html[data-theme="dark"] body.t-wort .sc-show-item { border-top-color: #2b2721; }
html[data-theme="dark"] body.t-wort .sc-show-rule { background: #d9a460; }
html[data-theme="dark"] body.t-wort .sc-show-price, html[data-theme="dark"] body.t-wort .sc-buy-p { color: #d9a460; }
html[data-theme="dark"] body.t-wort .sc-strip-img { background: #1d1a15; }
html[data-theme="dark"] body.t-wort .sc-field input, html[data-theme="dark"] body.t-wort .sc-field textarea { color: #f2eee5; border-color: #3d382f; }