/* ---- bluegum (Bluegum — Learning materials 67) — warm paper, ink, one sage --
   THE STRUCTURAL MOVE: the page halves as it descends. A narrow centred intro
   carrying far more air than type, then six deliberately TEXT-DOMINANT tiles
   three across, then four near-gapless squares, and finally the one edge break
   after the hero — a full-bleed split with a workshop photograph filling the
   left half and four plain figures set 2x2 on the right, got out of a single
   paragraph of four lines dropped into two columns. Sage is rationed to exactly
   three places: the hairlines between bands, the hero's ghost outline and those
   four figures — which is why .sc-buy-cat is pulled off var(--brand). The bar is
   mirrored (two links, wordmark, one link) with the cart lifted out of the flow
   so it is the single thing off the axis. */
body.t-bluegum { background: #f6f2ea; color: #1c1a17; --header-bg: rgba(246, 242, 234, 0.9); --surface: #efe9dd; --surface-2: #e9e2d3; --line: #e2dccf; --line-strong: #d5cebe; --heading: #1c1a17; --text: #3a352d; --muted: #7a7367; --radius: 0; --shadow: none; }
body.t-bluegum .sf-head, body.t-bluegum .sf-foot, body.t-bluegum .sf-header, body.t-bluegum .sf-footer { background: #f6f2ea; border-color: #e2dccf; }
/* equal padding both sides reserves the cart's room on the right and an equal
   pocket of air on the left, so the wordmark stays honestly centred */
body.t-bluegum .sf-header .container { gap: 6px clamp(14px, 3vw, 34px); }
body.t-bluegum .sf-name { font-weight: 500; font-size: 20px; letter-spacing: 0.01em; }
body.t-bluegum a.sf-cart:not(.sf-navlink) { font-size: 12.5px; }
/* full viewport with the copy dropped low, and a scrim that only exists below
   the midline so the top half of the photograph is left completely clear */
body.t-bluegum .sc-hero { min-height: 100vh; align-items: flex-end; padding: 0 clamp(20px, 6vw, 92px) clamp(84px, 21vh, 210px); }
body.t-bluegum .sc-hero::before { content: ''; position: absolute; inset: 44% 0 0; background: linear-gradient(rgba(17, 16, 13, 0) 0%, rgba(17, 16, 13, 0.52) 74%); }
body.t-bluegum .sc-hero h1 { font-size: clamp(40px, 6.6vw, 84px); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; max-width: 11ch; }
body.t-bluegum .sc-hero .btn.brand.sc-hero-ghost { border-color: #7d8f7a; color: #f6f2ea; }
/* section headings and product titles set at the SAME size — the reason the
   six-up reads as description rather than catalogue */
body.t-bluegum .sc-h2, body.t-bluegum .sc-buy-t { font-size: clamp(19px, 2.1vw, 25px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
/* the biggest pocket of air on the page: a column narrower than every grid
   under it, carrying more empty space than the type occupies */
body.t-bluegum .sc-richtext { max-width: 540px; padding: clamp(112px, 19vh, 208px) 20px; }
body.t-bluegum .sc-richtext p { font-size: clamp(17px, 1.8vw, 20px); line-height: 2.05; color: #3a352d; }
/* the three contained bands, ruled off from one another in sage hairline */
body.t-bluegum .sc-buygrid, body.t-bluegum .sc-strip, body.t-bluegum .sc-contact-split { border-top: 1px solid rgba(125, 143, 122, 0.5); padding: clamp(58px, 8vh, 82px) 20px clamp(66px, 9vh, 94px); }
body.t-bluegum .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 56px clamp(28px, 4vw, 54px); }
body.t-bluegum .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-bluegum .sc-buy-media { width: 42%; }
body.t-bluegum .sc-buy-media img { aspect-ratio: 1; }
body.t-bluegum .sc-buy-cat, body.t-bluegum .sc-strip-label { margin-top: 14px; color: #7a7367; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
/* the tightest thing on the page: four squares almost touching, one word each */
body.t-bluegum .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 3px; }
body.t-bluegum .sc-strip-img { border: 0; }
/* the only edge break after the hero — photograph left, figures right */
body.t-bluegum .sc-about-split { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; gap: 0; align-items: stretch; min-height: 62vh; }
body.t-bluegum .sc-about-media, body.t-bluegum .sc-about-media img { height: 100%; aspect-ratio: auto; }
body.t-bluegum .sc-about-copy { align-self: center; padding: clamp(52px, 8vw, 104px) clamp(24px, 6vw, 92px); }
/* one paragraph of four pre-line lines put into two columns — four figures, 2x2 */
body.t-bluegum .sc-about-copy p { columns: 2; column-gap: clamp(24px, 4vw, 60px); font-size: clamp(24px, 3.2vw, 40px); font-weight: 500; line-height: 2.1; letter-spacing: -0.03em; color: #7d8f7a; font-variant-numeric: tabular-nums; }
body.t-bluegum .btn.brand { background: #1c1a17; border-color: #1c1a17; color: #f6f2ea; box-shadow: none; font-weight: 500; letter-spacing: 0.03em; padding: 13px 26px; }
body.t-bluegum .product-card { background: transparent; border-color: transparent; }
@media (max-width: 860px) {
  body.t-bluegum .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-bluegum .sc-about-copy p { font-size: 26px; line-height: 1.9; }
}

/* night — the same workshop with the lights off: warm near-black ground, the
   sage lifted just far enough to carry the figures and the ghost outline */
html[data-theme="dark"] body.t-bluegum { background: #171613; color: #d9d3c7; --header-bg: rgba(23, 22, 19, 0.9); --surface: #1e1d19; --surface-2: #24231e; --line: #2f2d26; --line-strong: #3d3a31; --heading: #f2ede2; --text: #c4beb1; --muted: #8b8478; --radius: 0; --shadow: none; }
html[data-theme="dark"] body.t-bluegum .sf-head, html[data-theme="dark"] body.t-bluegum .sf-foot, html[data-theme="dark"] body.t-bluegum .sf-header, html[data-theme="dark"] body.t-bluegum .sf-footer { background: #171613; border-color: #2f2d26; }
html[data-theme="dark"] body.t-bluegum .sc-buygrid, html[data-theme="dark"] body.t-bluegum .sc-strip, html[data-theme="dark"] body.t-bluegum .sc-contact-split { border-top-color: rgba(147, 168, 143, 0.42); }
html[data-theme="dark"] body.t-bluegum .sc-richtext p { color: #c4beb1; }
html[data-theme="dark"] body.t-bluegum .sc-buy-cat, html[data-theme="dark"] body.t-bluegum .sc-strip-label { color: #8b8478; }
html[data-theme="dark"] body.t-bluegum .sc-about-copy p { color: #93a88f; }
html[data-theme="dark"] body.t-bluegum .sc-hero .btn.brand.sc-hero-ghost { border-color: #93a88f; }
html[data-theme="dark"] body.t-bluegum .btn.brand { background: #f2ede2; border-color: #f2ede2; color: #171613; }