/* ---- spanspek (Spanspek — Cold-pressed juice bar 105) ----------------------
   THE STRUCTURAL MOVE: the reference divides its page with soft curved shape
   graphics laid over the band edges. Here the colour change IS the divider —
   a pale mint band simply starts where the cream stops, painted by a clipped
   box-shadow so it runs the full window while its content stays in the
   contained column. Nothing on the page is ruled, bordered or bevelled, and
   nothing sits off the centre line: the split about is flattened to a single
   column so the photograph lands ABOVE the type rather than beside it, and the
   lower catalogue is re-cut from alternating lookbook rows into a gapped
   four-up gallery. The two strips are told apart by their neighbours — never
   :nth-of-type, since the hero is always the first section element — so the
   claim row can be round cream discs on mint and the blends row tall gapped
   photographs on mint without either selector reaching the wrong band. */
body.t-spanspek {
  background: #fdf5eb;
  color: #1c3a29;
  --radius: 0;
  --header-bg: #fdf5eb;
  --surface: #fffaf3;
  --surface-2: #e7f1e3;
  --line: #ecdfcd;
  --line-strong: #d9c9b3;
  --heading: #12291d;
  --text: #1c3a29;
  --muted: #5b7263;
}
body.t-spanspek .sf-header, body.t-spanspek .sf-footer { background: #fdf5eb; border-color: #ecdfcd; }
body.t-spanspek .btn.brand { background: #ef7a51; color: #fff8f1; border-radius: 0; box-shadow: none; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px; padding: 16px 34px; }
body.t-spanspek .btn.brand:hover { background: #dc6339; opacity: 1; }

/* the opener owns the whole window and nothing competes with it for the width */
body.t-spanspek .sc-hero { min-height: 100vh; padding: 130px 20px; }
body.t-spanspek .sc-hero h1 { font-weight: 700; font-size: clamp(34px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }

/* THE BANDS — mint starts where cream stops, edge to edge, no divider drawn */
body.t-spanspek .sc-hero + .sc-strip, body.t-spanspek .sc-about-split + .sc-strip {
  background: #e7f1e3; box-shadow: 0 0 0 100vw #e7f1e3; clip-path: inset(0 -100vw); }
body.t-spanspek .sc-hero + .sc-strip { padding: 78px 20px 84px; }
body.t-spanspek .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
body.t-spanspek .sc-hero + .sc-strip .sc-strip-img { border: 0; border-radius: 50%; max-width: 148px; margin: 0 auto; background: #fdf5eb; }
body.t-spanspek .sc-about-split + .sc-strip { padding: 84px 20px 92px; }
body.t-spanspek .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
body.t-spanspek .sc-about-split + .sc-strip .sc-strip-img { border: 0; aspect-ratio: 4 / 5; background: #fdf5eb; }
body.t-spanspek .sc-strip-label { margin-top: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #1c3a29; }

/* the menu is hoisted to position three and arrives price-forward */
body.t-spanspek .sc-buygrid { max-width: 1020px; padding: 92px 20px 96px; }
body.t-spanspek .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 26px; }
body.t-spanspek .sc-buy-media img, body.t-spanspek .sc-look-media img { aspect-ratio: 3 / 4; }
body.t-spanspek .sc-buy-cat, body.t-spanspek .sc-look-cat { color: #7f9a86; }
body.t-spanspek .sc-buy-p, body.t-spanspek .sc-look-p { color: #ef7a51; font-weight: 700; font-size: 19px; }

/* the about holds the centre line: one column, photograph over the type */
body.t-spanspek .sc-about-split { grid-template-columns: 1fr; gap: 32px; max-width: 760px; padding: 96px 20px 92px; text-align: center; }
body.t-spanspek .sc-about-copy .sc-h2 { text-align: center; }
body.t-spanspek .sc-banner { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); min-height: 58vh; }

/* the lookbook re-cut as the drinks gallery: eight tiles, four across, gapped */
body.t-spanspek .sc-lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 24px; max-width: 1080px; margin: 0 auto; padding: 90px 20px 94px; }
body.t-spanspek .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0; }
body.t-spanspek .sc-look-row { display: block; text-align: center; }
body.t-spanspek .sc-look-copy { padding: 15px 0 0; }
body.t-spanspek .sc-look-t { font-size: 16px; font-weight: 600; letter-spacing: 0; margin: 7px 0 0; }
body.t-spanspek .sc-look-desc, body.t-spanspek .sc-look-btn, body.t-spanspek .sc-lookbook .sc-buy-form { display: none; }
body.t-spanspek .sc-contact-form .btn { align-self: center; }
@media (max-width: 900px) {
  body.t-spanspek .sc-buy-grid, body.t-spanspek .sc-lookbook,
  body.t-spanspek .sc-hero + .sc-strip .sc-strip-row,
  body.t-spanspek .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-spanspek .sc-hero { min-height: 86vh; padding: 100px 20px; }
}

/* NIGHT — the bar after close: cream goes to wet leaf-dark, and the mint band
   stays one half-shade up from the ground so the divider survives without a
   line being drawn. The coral lifts, because #ef7a51 on a near-black ground
   reads as rust rather than as melon. */
html[data-theme="dark"] body.t-spanspek {
  background: #101a14;
  color: #c3d2c6;
  --header-bg: #101a14;
  --surface: #16221a;
  --surface-2: #182619;
  --line: #223027;
  --line-strong: #33463a;
  --heading: #eef6ec;
  --text: #c3d2c6;
  --muted: #85998b;
}
html[data-theme="dark"] body.t-spanspek .sf-header, html[data-theme="dark"] body.t-spanspek .sf-footer { background: #101a14; border-color: #223027; }
html[data-theme="dark"] body.t-spanspek .sc-hero + .sc-strip,
html[data-theme="dark"] body.t-spanspek .sc-about-split + .sc-strip { background: #182619; box-shadow: 0 0 0 100vw #182619; }
html[data-theme="dark"] body.t-spanspek .sc-hero + .sc-strip .sc-strip-img,
html[data-theme="dark"] body.t-spanspek .sc-about-split + .sc-strip .sc-strip-img { background: #101a14; }
html[data-theme="dark"] body.t-spanspek .sc-strip-label { color: #dbe7dc; }
html[data-theme="dark"] body.t-spanspek .sc-buy-p, html[data-theme="dark"] body.t-spanspek .sc-look-p { color: #ff9169; }
html[data-theme="dark"] body.t-spanspek .sc-buy-cat, html[data-theme="dark"] body.t-spanspek .sc-look-cat { color: #7f9a86; }
html[data-theme="dark"] body.t-spanspek .btn.brand { background: #ff9169; color: #101a14; }
html[data-theme="dark"] body.t-spanspek .btn.brand:hover { background: #ffa985; }