/* ---- gesso (Bodkin — Haberdashery & trims 169) -----------------------------
   THE STRUCTURAL MOVE: THE WALL. The eight priced tiles lock to four columns on
   a 6 px gutter with square corners, so the one commercial block on the page
   reads as a single surface rather than as eight cards — the reference's
   edge-to-edge photograph wall, translated into stock somebody can actually buy.
   Everything around it is held to a true high-key white, and exactly one panel
   leaves that white: the about band goes full width and drops half a step to
   #f2f0ec, the way the reference's about screen is the only grey screen in its
   five. The closing contact band is the only rectangle on the page that changes
   VALUE rather than shade — the reference's last screen is a panel over a
   photograph and therefore dark, so ours goes to ink. Brass is rationed to the
   category kicker, the rand figure and the solid slab; headings are set light
   and large so nothing here ever shouts. The strip is targeted by class alone
   and the split richtext renders as .sc-about-split, so no element-type
   selector is needed anywhere. */
body.t-gesso {
  background: #fbfaf8;
  color: #4c4a45;
  --gs-brass: #8a6f3d;
  --gs-panel: #f2f0ec;
  --radius: 0;
  --shadow: none;
  --header-bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f2f0ec;
  --line: #e4e1da;
  --line-strong: #cbc6bb;
  --heading: #171614;
  --text: #4c4a45;
  --muted: #7d7a72;
}

/* a hairline of ink over the first screen — four links and the cart, no bar
   behind them and nothing that inverts over the photograph */
body.t-gesso .sf-head, body.t-gesso .sf-header,
body.t-gesso .sf-foot, body.t-gesso .sf-footer, body.t-gesso .sf-cats {
  background: #fbfaf8; border-color: #e4e1da;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-gesso .btn.brand { background: var(--gs-brass); border: 0; color: #fbfaf8; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11px; padding: 15px 30px; }

/* the stage: one still photograph, copy pinned to the left quarter, set light */
body.t-gesso .sc-hero { min-height: 100vh; padding: 96px max(24px, calc(50vw - 580px)); }
body.t-gesso .sc-hero-left .sc-hero-inner { max-width: 470px; }
body.t-gesso .sc-hero h1 { font-weight: 300; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.03em; }
body.t-gesso .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: rgba(251, 250, 248, 0.85); padding: 15px 32px; }
body.t-gesso .sc-h2 { font-weight: 300; font-size: clamp(26px, 3.8vw, 44px); letter-spacing: -0.025em; }

/* THE ONE PANEL THAT LEAVES THE PAPER — full width, half a step of grey, picture
   left and copy right with the copy shoved off its own gutter */
body.t-gesso .sc-about-split { max-width: none; width: 100%; margin: 0; background: var(--gs-panel); padding: 104px max(24px, calc(50vw - 600px)); gap: 68px; }
body.t-gesso .sc-about-media img { aspect-ratio: 4 / 5; object-fit: cover; }
body.t-gesso .sc-about-copy { padding-left: clamp(0px, 5vw, 92px); }
body.t-gesso .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.9; }

/* the services screen — six tiles three across and two deep, gapped generously
   in both directions, the label an 11px kicker rather than a caption */
body.t-gesso .sc-strip { padding: 112px 20px 100px; }
body.t-gesso .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 44px; }
body.t-gesso .sc-strip-img { border: 0; }
body.t-gesso .sc-strip-label { margin-top: 14px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: var(--muted); }

/* THE WALL — eight tiles, four across, 6 px of gutter and square corners */
body.t-gesso .sc-buygrid { padding: 8px 20px 104px; }
body.t-gesso .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.t-gesso .sc-buy-card { padding: 0 10px 26px; }
body.t-gesso .sc-buy-cat { color: var(--gs-brass); }
body.t-gesso .sc-buy-t { font-weight: 400; font-size: 15.5px; }
body.t-gesso .sc-buy-p { color: var(--gs-brass); font-weight: 600; font-variant-numeric: tabular-nums; }

/* the page closes on the only rectangle that changes value. Form tokens are
   re-pointed inside it so the fields sit on ink instead of on paper. */
body.t-gesso .sc-contact-band { background: #171614; color: #fbfaf8; margin-top: 40px; padding: 96px 0 104px; --heading: #fbfaf8; --text: #ded9d0; --muted: #9a958b; --surface: #232120; --line: #3c3934; }
body.t-gesso .sc-contact-band .btn.brand { background: #fbfaf8; color: #171614; }

@media (max-width: 900px) {
  body.t-gesso .sc-hero { min-height: 86vh; }
  body.t-gesso .sc-about-copy { padding-left: 0; }
  body.t-gesso .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-gesso .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
}

/* NIGHT — the counter after closing. The white ground inverts to a warm near
   black and the grey panel with it, so the about band stays half a step off the
   page rather than merging into it. The brass lifts two steps: #8a6f3d was
   picked to hold against paper and goes to mud on a dark ground, so at night the
   slab carries dark type instead of light. The closing band FLIPS — an ink
   rectangle would disappear into a dark page, and the whole point of that band
   is that it is the one thing on the page that changes value, so after dark it
   goes to paper and takes the ink type. */
html[data-theme="dark"] body.t-gesso {
  background: #131211;
  color: #b6b1a7;
  --gs-brass: #c09a58;
  --gs-panel: #1b1917;
  --header-bg: #131211;
  --surface: #1a1817;
  --surface-2: #201e1c;
  --line: #2d2a27;
  --line-strong: #423e39;
  --heading: #f4f1eb;
  --text: #b6b1a7;
  --muted: #837e75;
}
html[data-theme="dark"] body.t-gesso .sf-head, html[data-theme="dark"] body.t-gesso .sf-header,
html[data-theme="dark"] body.t-gesso .sf-foot, html[data-theme="dark"] body.t-gesso .sf-footer,
html[data-theme="dark"] body.t-gesso .sf-cats { background: #131211; border-color: #2d2a27; }
html[data-theme="dark"] body.t-gesso .btn.brand { color: #17140d; }
html[data-theme="dark"] body.t-gesso .sc-contact-band { background: #f4f1eb; color: #171614; --heading: #171614; --text: #4c4a45; --muted: #7d7a72; --surface: #ffffff; --line: #ddd9d1; }
html[data-theme="dark"] body.t-gesso .sc-contact-band .btn.brand { background: #171614; color: #f4f1eb; }