/* ============================== TINKTUUR ==============================
   THE STRUCTURAL MOVE: the page is wide exactly TWICE — a full-viewport
   cross-fading stage at the top and one full-bleed dusk band low down — and
   everything caught between the two collapses into a 680px column of prose
   on bare hemp paper. Because the priced grid is pinned to exactly three
   across (the shared grid auto-fills, which would orphan six tiles as 4+2)
   and arrives seventh, the shop lands as one square 3x2 block that squares
   the page off instead of leading it. The green is the INK, not the accent:
   tincture amber is spent three times only — the controls, the category line
   above each product and the rand figure. Nothing here touches the order or
   the position of a single item in the header. */
body.t-tinktuur {
  background: #e8e3d6;
  color: #3f463c;
  --tk-ink: #16211a;
  --tk-amber: #b9762c;
  --tk-amber-lit: #a4661f;
  --bg-flat: #e8e3d6;
  --header-bg: #e8e3d6;
  --surface: #f0ece0;
  --surface-2: #ddd7c6;
  --line: #d3ccb8;
  --line-strong: #b8b09a;
  --heading: #16211a;
  --text: #3f463c;
  --muted: #7a7a68;
  --radius: 0;
  --shadow: none;
}

/* a flat paper bar the same greige as the page, so the stage begins beneath the
   header rather than behind it. Colour, tracking and size only. */
body.t-tinktuur .sf-head, body.t-tinktuur .sf-header,
body.t-tinktuur .sf-foot, body.t-tinktuur .sf-footer, body.t-tinktuur .sf-cats {
  background: #e8e3d6; border-color: #d3ccb8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-tinktuur .sf-name, body.t-tinktuur .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11.5px; font-weight: 600; }

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

/* WIDE, ONCE — the whole first screen: field, press room, counter, cross-fading
   behind one block of copy held in the LEFT third on a soft scrim that fades out
   toward the middle of the frame. One button, nothing else on the fold. */
body.t-tinktuur .sc-hero { min-height: 100vh; padding: 100px max(20px, calc(50vw - 600px)); }
body.t-tinktuur .sc-hero-left .sc-hero-inner { max-width: 470px; padding: 44px 42px 46px; background: linear-gradient(104deg, rgba(9, 15, 11, 0.66), rgba(9, 15, 11, 0.08)); }
body.t-tinktuur .sc-hero h1 { font-size: clamp(33px, 5.1vw, 58px); line-height: 1.05; letter-spacing: -0.022em; font-weight: 600; margin-bottom: 18px; }

/* serif headings, tight and large, on green-black ink */
body.t-tinktuur .sc-h2 { color: var(--tk-ink); font-weight: 600; font-size: clamp(23px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 30px; }

/* THE COLLAPSE — the first thing under the stage is a contained column and the
   page holds one all the way to the band. 680px is narrow enough that leaving
   the full viewport is felt rather than merely seen. */
body.t-tinktuur .sc-about-split { max-width: 1000px; padding: 112px 20px 96px; gap: 58px; }
body.t-tinktuur .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-tinktuur .sc-richtext { max-width: 680px; padding: 118px 20px 114px; }
body.t-tinktuur .sc-richtext p, body.t-tinktuur .sc-about-copy p { color: var(--text); font-size: clamp(16px, 1.8vw, 17px); line-height: 1.95; }

/* TWO FOUR-ACROSS RAILS, BACK TO BACK, DELIBERATELY DIFFERENT TEXTURES — the
   materials rail carries a heading and gets a small tracked caption; the voices
   rail has none and gets its quote set at reading size in the ink. Headingless
   is what tells the two apart, so no :nth-of-type is needed or wanted. */
body.t-tinktuur .sc-strip { max-width: 1000px; padding: 92px 20px 96px; }
body.t-tinktuur .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
body.t-tinktuur .sc-strip-img { border: 0; border-radius: 0; background: var(--surface-2); }
body.t-tinktuur .sc-strip:has(.sc-h2) .sc-strip-label { margin-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
body.t-tinktuur .sc-strip:not(:has(.sc-h2)) .sc-strip-label { margin-top: 16px; font-size: 14.5px; font-weight: 400; line-height: 1.6; color: var(--tk-ink); }

/* WIDE, TWICE AND LAST — the only full photograph between the stage and the
   footer, butted flush with no gutter, words in the dark left third of it */
body.t-tinktuur .sc-banner { min-height: 66vh; margin: 0 calc(50% - 50vw); padding: 0 max(22px, calc(50vw - 600px)); display: flex; align-items: center; text-align: left; }
body.t-tinktuur .sc-banner-inner { max-width: 430px; margin: 0; }
body.t-tinktuur .sc-banner h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; line-height: 1.1; }

/* THE ONE PRICED BLOCK, PINNED — the shared grid auto-fills and would break six
   tiles as four-then-two, so it is nailed to three across and the row fills
   twice. AMBER 2 and 3 of 3: the category line above each title and the rand
   figure under it, and the accent appears nowhere else on the page. */
body.t-tinktuur .sc-buygrid { max-width: 940px; padding: 14px 20px 108px; }
body.t-tinktuur .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; }
body.t-tinktuur .sc-buy-cat { color: var(--tk-amber); font-size: 10px; letter-spacing: 0.2em; }
body.t-tinktuur .sc-buy-p { color: var(--tk-amber); font-weight: 700; font-size: 15.5px; }

/* the page ends on colour rather than another picture: one tinted greige slab
   running the full width with the form centred on it */
body.t-tinktuur .sc-contact-band { background: var(--surface-2); padding: 100px 0 108px; }

@media (max-width: 900px) {
  body.t-tinktuur .sc-hero { min-height: 84vh; }
  body.t-tinktuur .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-tinktuur .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-tinktuur .sc-banner { min-height: 52vh; padding: 68px 20px; }
}

/* NIGHT — the paper turns to the dark green-black of the bottle itself and the
   ink and ground swap roles, so the two wide photographs are the only lit things
   left in the room. The amber is lifted two stops to stay legible on it, which
   keeps the category lines and the rand figures readable. */
html[data-theme="dark"] body.t-tinktuur {
  background: #14180f;
  color: #c5c8b4;
  --tk-ink: #eef0e1;
  --tk-amber: #d18d3f;
  --tk-amber-lit: #e29d4e;
  --bg-flat: #14180f;
  --header-bg: #14180f;
  --surface: #1a1f13;
  --surface-2: #1f2418;
  --line: #2a3020;
  --line-strong: #3d4531;
  --heading: #eef0e1;
  --text: #c5c8b4;
  --muted: #8a8c76;
}
html[data-theme="dark"] body.t-tinktuur .sf-head, html[data-theme="dark"] body.t-tinktuur .sf-header,
html[data-theme="dark"] body.t-tinktuur .sf-foot, html[data-theme="dark"] body.t-tinktuur .sf-footer,
html[data-theme="dark"] body.t-tinktuur .sf-cats { background: #14180f; border-color: #2a3020; }
html[data-theme="dark"] body.t-tinktuur .btn.brand { color: #14180f; }