/* ---- glasuur (Glasuur — Ceramic glazes & oxides 243) ------------------------
   THE STRUCTURAL MOVE IS SCALE. The reference builds every screen around one
   word set enormous with everything else dropped far below it, so here the
   section headings are display type at up to 56px hard left while the tile
   titles, strip labels and prices sit at 11–15px underneath them — the type
   contrast is the whole design. Ground is flat cool paper grey wall to wall
   with no cards, no radius, no rules and no borders on the tiles, so the only
   saturated thing anywhere on the page is a glazed tile inside a photograph.
   The one plum is spent on the price and the buy slab and nowhere else. */
body.t-glasuur { background: #eceef0; color: #1c1e21; }
body.t-glasuur .sf-head, body.t-glasuur .sf-foot { background: #eceef0; border-color: #d8dbdf; }
body.t-glasuur .sc-hero { min-height: 90vh; padding: 112px 24px 96px; }
body.t-glasuur .sc-hero-inner { max-width: 840px; }
body.t-glasuur .sc-hero h1 { font-size: clamp(44px, 10.5vw, 132px); font-weight: 700; letter-spacing: -0.035em; line-height: 0.9; margin: 0 0 26px; }
body.t-glasuur .sc-hero p { font-size: 18px; font-weight: 300; line-height: 1.55; max-width: 46ch; }
body.t-glasuur .sc-h2 { text-align: left; font-size: clamp(26px, 4.6vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 36px; }
/* the two blocks that are genuinely centred keep their centre and drop a size */
body.t-glasuur .sc-contact-band .sc-h2, body.t-glasuur .sc-about-overlay .sc-h2 { text-align: center; font-size: clamp(22px, 3vw, 38px); }
body.t-glasuur .sc-strip-img { border-radius: 0; border: 0; background: #e2e5e9; }
body.t-glasuur .sc-strip-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }
body.t-glasuur .sc-mas-t { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
body.t-glasuur .sc-mas-p { color: #6b2f4a; font-weight: 700; font-size: 15px; }
body.t-glasuur .sc-contact-band { background: #e2e5e9; }
body.t-glasuur .sc-field input, body.t-glasuur .sc-field textarea { border-radius: 0; border-color: #cbd0d6; background: #f5f6f8; }
body.t-glasuur .btn.brand { background: #6b2f4a; color: #ffffff; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 14px 28px; }
body.t-glasuur .btn.brand:hover { background: #55253a; }

/* night — the same grey wall taken down to a cold near-black, and the plum
   lifted far enough that it still reads as the one coloured thing on the page */
html[data-theme="dark"] body.t-glasuur { background: #141618; color: #cfd3d8; }
html[data-theme="dark"] body.t-glasuur .sf-head, html[data-theme="dark"] body.t-glasuur .sf-foot { background: #141618; border-color: #24282c; }
html[data-theme="dark"] body.t-glasuur .sc-strip-img { background: #1c2023; }
html[data-theme="dark"] body.t-glasuur .sc-mas-p { color: #d09ab2; }
html[data-theme="dark"] body.t-glasuur .sc-contact-band { background: #1c2023; }
html[data-theme="dark"] body.t-glasuur .sc-field input, html[data-theme="dark"] body.t-glasuur .sc-field textarea { background: #1c2023; border-color: #2c3135; color: #e6e9ec; }
html[data-theme="dark"] body.t-glasuur .btn.brand { background: #d09ab2; color: #141618; }
html[data-theme="dark"] body.t-glasuur .btn.brand:hover { background: #e0b0c4; }