/* ---- trestle (Trestle — Long-table wedding goods 116) ----------------------
   THE STRUCTURAL MOVE: narrow — WIDE — narrow. The contained founder column is
   welded straight onto the masonry wall: the wall carries no top padding and
   its container loses its measure, so the photographs start where the copy
   stops and run to both page edges on 6px gutters. A narrow centred column of
   customer lines then drops straight back in from the edges, and the six
   labelled strip tiles answer the wall as a second six-up of the opposite
   character — flat contained tiles and small-caps words where the wall was
   gapless full-bleed photographs. Clay-rose is rationed to exactly three homes:
   the rand figures, the buy slabs and the hero outline. Nothing else on the
   page is allowed colour; the photographs supply all of it. */
body.t-trestle {
  background: #f7f3ec;
  color: #3a3d33;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tr-clay: #b0705f;
  --radius: 0;
  --shadow: none;
  --bg-flat: #f7f3ec;
  --header-bg: #f7f3ec;
  --surface: #ffffff;
  --surface-2: #efe9df;
  --line: #e0d9cc;
  --line-strong: #c7bfae;
  --heading: #1c1e18;
  --text: #3a3d33;
  --muted: #7c7f72;
}

/* flat bone slabs under a single hairline — no glass, no shadow anywhere */
body.t-trestle .sf-header, body.t-trestle .sf-footer, body.t-trestle .sf-cats {
  background: #f7f3ec; border-color: #e0d9cc;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-trestle .sf-name, body.t-trestle .sc-hero h1, body.t-trestle .sc-h2, body.t-trestle .sc-richtext p {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.01em;
}

/* CLAY 1 of 3 — the buy slab, flat and unbordered */
body.t-trestle .btn.brand { background: var(--tr-clay); border-color: var(--tr-clay); color: #fbf7f0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; padding: 15px 30px; }
body.t-trestle .btn.brand:hover { background: #96594a; }

/* the stage: full viewport, copy hard left, and the sub pulled ABOVE the
   headline in flex order — so the first screen reads as one small line over one
   large line while the h1 stays first in the markup */
body.t-trestle .sc-hero { min-height: 100vh; padding: 0 clamp(20px, 7vw, 104px); }
body.t-trestle .sc-hero-inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 700px; }
body.t-trestle .sc-hero p { order: -1; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; margin: 0 0 18px; }
body.t-trestle .sc-hero h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.05; margin: 0 0 30px; }
/* CLAY 2 of 3 — the hero outline, the one control on the page that is not a slab */
body.t-trestle .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--tr-clay); color: #fbf7f0; }
body.t-trestle .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--tr-clay); color: #1c1e18; }

body.t-trestle .sc-h2 { font-size: clamp(21px, 2.6vw, 30px); color: var(--heading); margin: 0 0 24px; }

/* NARROW — the founder block on a short measure, its bottom padding almost gone
   so the wall below is welded onto it rather than banded under it */
body.t-trestle .sc-about-split { max-width: 880px; grid-template-columns: 0.9fr 1fr; gap: clamp(26px, 4vw, 48px); padding: clamp(76px, 10vw, 120px) 20px 30px; }
body.t-trestle .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.85; }

/* WIDE — the wall runs to both page edges on 6px gutters, with no top air */
body.t-trestle .sc-masonry { padding: 0 0 6px; }
body.t-trestle .sc-masonry .container { max-width: none; padding: 34px 6px 0; }
body.t-trestle .sc-mas-grid { column-gap: 6px; }
body.t-trestle .sc-mas-item { margin: 0 0 6px; }
body.t-trestle .sc-mas-cat, body.t-trestle .sc-strip-label { margin-top: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; font-weight: 600; }
/* CLAY 3 of 3 — the rand figure, on the wall and on the price grid both */
body.t-trestle .sc-mas-p, body.t-trestle .product-card .p { color: var(--tr-clay); font-weight: 600; font-size: 14px; }

/* NARROW again — the customer lines come straight back in from the edges */
body.t-trestle .sc-richtext { max-width: 620px; padding: clamp(78px, 10vw, 118px) 20px clamp(56px, 8vw, 88px); }
body.t-trestle .sc-richtext p { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.7; color: var(--heading); }

/* the answering six-up: three across, two rows, hairline gutters, contained
   where the wall was full-bleed, and a word under each tile instead of a price */
body.t-trestle .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.t-trestle .sc-strip-img { border: 0; aspect-ratio: 4 / 3; }

/* the price wall: four across, two rows, ruled with a hairline instead of carded */
body.t-trestle .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; padding: 4px 0 62px; }
body.t-trestle .product-card, body.t-trestle .product-card:hover { background: transparent; border: 0; border-top: 1px solid var(--line-strong); box-shadow: none; transform: none; }
body.t-trestle .product-card .meta { padding: 12px 0 0; }
@media (max-width: 820px) {
  body.t-trestle .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-trestle .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the closing band is the only ink ground on the page */
body.t-trestle .sc-contact-band { background: #1c1e18; padding: 88px 0 96px; }
body.t-trestle .sc-contact-band .sc-h2, body.t-trestle .sc-contact-band .sc-contact-sub, body.t-trestle .sc-contact-band .sc-field label { color: #f0ece1; }

/* NIGHT — bone drops to a warm near-black, the clay lifts two stops so the rand
   figures still carry against it, and the flat-lays are given a paper bed so
   goods shot on white stay cut out instead of floating in the dark. */
html[data-theme="dark"] body.t-trestle {
  background: #161712;
  color: #c6c8bb;
  --tr-clay: #d3937f;
  --bg-flat: #161712;
  --header-bg: #161712;
  --surface: #1e2019;
  --surface-2: #24261f;
  --line: #2b2d25;
  --line-strong: #3d3f34;
  --heading: #f4f1e8;
  --text: #c6c8bb;
  --muted: #8b8d80;
}
html[data-theme="dark"] body.t-trestle .sf-header, html[data-theme="dark"] body.t-trestle .sf-footer, html[data-theme="dark"] body.t-trestle .sf-cats { background: #161712; border-color: #2b2d25; }
html[data-theme="dark"] body.t-trestle .btn.brand { color: #161712; }
html[data-theme="dark"] body.t-trestle .product-card .ph { background: #f1ede4; }
html[data-theme="dark"] body.t-trestle .sc-contact-band { background: #0e0f0b; }