/* ---- filament (Filament — Lighting workshop 43) ---------------------------
   THE STRUCTURAL MOVE: the service ledger runs SIX numbered tiles and sits
   AFTER the catalogue instead of before it. The shop shows the goods, then
   lists the six things the workshop does to make them — so the strip stops
   being a category nav and becomes a ledger. Everything else is left to the
   shared sheet. Ground is the warm near-black of a workshop after hours,
   because every photograph on this template is of light itself; verdigris is
   the only accent. The whole palette rides on tokens, which is what lets the
   night look be a single rule instead of twenty. */
body.t-filament {
  background: #17120e;
  color: #cabfae;
  --fl-jade: #4f8f6d;
  --surface: #1c1610;
  --surface-2: #221a13;
  --line: #2e251d;
  --line-strong: #43362a;
  --heading: #ece2d2;
  --text: #cabfae;
  --muted: #8e8271;
  --header-bg: rgba(23, 18, 14, 0.9);
  --radius: 0;
}
body.t-filament a { color: var(--heading); }
body.t-filament a:hover { color: var(--fl-jade); }
body.t-filament .btn.brand { background: var(--fl-jade); color: #12100c; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11px; padding: 14px 28px; }
body.t-filament .btn.brand:hover { background: color-mix(in srgb, var(--fl-jade) 78%, #ffffff); color: #12100c; }

/* one still of lit fittings, copy dead centre, nothing else on it */
body.t-filament .sc-hero { min-height: 88vh; }
body.t-filament .sc-hero h1 { font-weight: 500; letter-spacing: -0.01em; max-width: 18ch; margin-left: auto; margin-right: auto; }
body.t-filament .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: clamp(12px, 1.5vw, 15px); color: var(--heading); }

/* --- the ledger: six tiles, two full rows of three, each opened by a hairline
   and numbered 01–06 so the block reads as a list of services, not a nav --- */
body.t-filament .sc-strip { padding: 66px 20px 20px; }
body.t-filament .sc-strip-row { counter-reset: fl; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
body.t-filament .sc-strip-card { counter-increment: fl; text-align: left; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 32px; }
body.t-filament .sc-strip-img { border: 0; }
body.t-filament .sc-strip-label { margin-top: 14px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; color: var(--heading); }
body.t-filament .sc-strip-label::before { content: counter(fl, decimal-leading-zero); display: block; margin-bottom: 7px; color: var(--fl-jade); letter-spacing: 0.1em; }
@media (min-width: 840px) {
  body.t-filament .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lit brass shot on black — give the photograph more room and keep the price
   quiet, because the picture is already the loud part of the panel */
body.t-filament .sc-show-cat { color: var(--fl-jade); }
body.t-filament .sc-show-price { font-weight: 400; color: var(--heading); }
body.t-filament .sc-show-media img { max-width: 82%; max-height: 300px; }
body.t-filament .sc-show-btn { background: var(--heading); color: #17120e; }

/* the only conversational line on the page: the message field is asked, not
   labelled. font-size:0 collapses the word, ::after restores the question. */
body.t-filament .sc-contact-split label[for="sc-msg"] { font-size: 0; }
body.t-filament .sc-contact-split label[for="sc-msg"]::after { content: 'What room, and how high is the ceiling?'; font-size: 13px; }

/* NIGHT — the same workshop with the overheads off: the ground drops away, the
   brass-lit photographs stay exactly where they are, and the verdigris lifts to
   hold its contrast against the deeper black. */
html[data-theme="dark"] body.t-filament {
  background: #0c0a07;
  color: #cfc4b3;
  --fl-jade: #6fb492;
  --surface: #141010;
  --surface-2: #1a140f;
  --line: #262019;
  --line-strong: #382f25;
  --heading: #f4ebdd;
  --text: #cfc4b3;
  --muted: #857a6a;
  --header-bg: rgba(12, 10, 7, 0.9);
}