/* ---- spaander (Spaander — Greenwood turning & wooden ware 184) -------------
   THE STRUCTURAL MOVE: ONE BLEED, THEN THE BOX FOR GOOD. The three-slide stage
   is the only full-width thing on the page. The showcase hands back its
   full-bleed grid and returns inside the same 1080px container as every other
   band, so nothing escapes again after the first screen — there is no banner
   section here at all. Inside that box the rhythm is two rows of small things
   bracketing one wall of large landscape pictures: six labelled promise tiles,
   then the image wall whose titles drop UNDER the photograph as static caption
   text (.sc-show-media takes order:-1 so the shot climbs above the category and
   the title, and the little rule is switched off), then six smaller unlabelled
   tool-and-material cut-outs on a narrower row. Both strips are reached through
   `.sc-hero + .sc-strip` and `.sc-showcase + .sc-strip` — class-to-class
   siblings, never :nth-of-type, which counts the hero as the first section and
   would silently miss. Amber is rationed to three places and three only: the
   hero's hairline ghost, the price ticks and the contact submit. Category
   labels are pulled off var(--brand) to grey on purpose so the price stays the
   only coloured thing in a tile, and the one white card sits under the priced
   row — everywhere else is near-black on sycamore. */
body.t-spaander {
  background: #f3efe7;
  color: #35322b;
  --sp-amber: #9a6320;
  --radius: 0;
  --shadow: none;
  --header-bg: #f3efe7;
  --surface: #ffffff;
  --surface-2: #e8e3d8;
  --line: #d9d5cd;
  --line-strong: #bdb7a9;
  --heading: #14130f;
  --text: #35322b;
  --muted: #6f6b5e;
}

/* contained bar on a solid light ground: wordmark left, links and cart right,
   a hairline under it, and the photograph starting below the bar not behind it */
body.t-spaander .sf-head, body.t-spaander .sf-header,
body.t-spaander .sf-foot, body.t-spaander .sf-footer, body.t-spaander .sf-cats {
  background: #f3efe7; border-color: #d9d5cd;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-spaander .btn.brand { background: #1b1a17; border: 0; color: #f3efe7; box-shadow: none; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 700; padding: 15px 28px; }

/* THE ONE BLEED — full-viewport stage, three slides, copy centred on the image */
body.t-spaander .sc-hero { min-height: 100vh; padding: 104px 20px; }
body.t-spaander .sc-hero h1 { font-weight: 600; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -0.02em; }
body.t-spaander .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: var(--sp-amber); padding: 16px 36px; }

/* STRIP ONE — six labelled promise tiles, gapped, inside the narrow container */
body.t-spaander .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 42px; }
body.t-spaander .sc-strip-img { border: 0; background: transparent; }
body.t-spaander .sc-hero + .sc-strip .sc-strip-label { margin-top: 12px; font-size: 10.5px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); }

/* THE IMAGE WALL — the showcase gives up its full-bleed grid and comes back
   into the box, and every title becomes a caption sitting under its picture */
body.t-spaander .sc-show-grid { max-width: 1080px; margin: 0 auto; padding: 0 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 26px; }
body.t-spaander .sc-show-item, body.t-spaander .sc-show-item:nth-child(4n + 2),
body.t-spaander .sc-show-item:nth-child(4n + 3) { background: transparent; }
body.t-spaander .sc-show-inner { align-items: stretch; text-align: left; padding: 0; min-height: 0; }
body.t-spaander .sc-show-media { order: -1; padding: 0; flex: 0 0 auto; }
body.t-spaander .sc-show-media img { width: 100%; max-width: none; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
body.t-spaander .sc-show-cat, body.t-spaander .sc-buy-cat { margin-top: 18px; color: var(--muted); letter-spacing: 0.14em; font-size: 10.5px; }
body.t-spaander .sc-show-t { margin-top: 5px; font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
body.t-spaander .sc-show-rule, body.t-spaander .sc-showcase + .sc-strip .sc-strip-label { display: none; }
body.t-spaander .sc-show-price, body.t-spaander .sc-buy-p { color: var(--sp-amber); font-weight: 700; font-size: 15.5px; margin: 7px 0 18px; font-variant-numeric: tabular-nums; }

/* STRIP TWO — the second row of small things, smaller than the first and
   unlabelled: tools and material cut out against the shaving ground */
body.t-spaander .sc-showcase + .sc-strip .sc-strip-row { max-width: 720px; margin: 26px auto 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; }
body.t-spaander .sc-showcase + .sc-strip .sc-strip-img img { object-fit: contain; }

/* THE ONLY PROSE, ARRIVING FIFTH — photograph one side, two paragraphs the other */
body.t-spaander .sc-about-media img { aspect-ratio: 4 / 5; }
body.t-spaander .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.85; }

/* THE ONE WHITE CARD — the only band on the page that is not sycamore */
body.t-spaander .sc-buygrid { background: var(--surface); padding: 48px 32px 56px; }
body.t-spaander .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; }

/* CONTACT — address and hours as plain lines, the form beside them */
body.t-spaander .sc-contact-lead p { white-space: pre-line; line-height: 2; color: var(--text); }
body.t-spaander .sc-contact-split .btn.brand { background: var(--sp-amber); color: #ffffff; }

@media (max-width: 900px) {
  body.t-spaander .sc-hero { min-height: 84vh; }
  body.t-spaander .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-spaander .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-spaander .sc-showcase + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-spaander .sc-buygrid { padding: 36px 18px 44px; }
}

/* NIGHT — the shed after the light goes. Sycamore drops to burnt umber dark,
   the white card becomes the one lifted panel rather than the one bright one,
   and the amber lifts two steps: #9a6320 was picked against a pale ground and
   goes to mud on a dark one, so the price ticks and the submit take #c98a3f and
   the submit carries dark type instead of white. */
html[data-theme="dark"] body.t-spaander {
  background: #17150f;
  color: #b6b0a1;
  --sp-amber: #c98a3f;
  --header-bg: #17150f;
  --surface: #1f1d16;
  --surface-2: #26231a;
  --line: #302c22;
  --line-strong: #443f31;
  --heading: #f1ece0;
  --text: #b6b0a1;
  --muted: #837d6d;
}
html[data-theme="dark"] body.t-spaander .sf-head, html[data-theme="dark"] body.t-spaander .sf-header,
html[data-theme="dark"] body.t-spaander .sf-foot, html[data-theme="dark"] body.t-spaander .sf-footer,
html[data-theme="dark"] body.t-spaander .sf-cats { background: #17150f; border-color: #302c22; }
html[data-theme="dark"] body.t-spaander .btn.brand { background: #f1ece0; color: #17150f; }
html[data-theme="dark"] body.t-spaander .sc-contact-split .btn.brand { background: var(--sp-amber); color: #17150f; }