/* ============================== BEITEL ==============================
   THE STRUCTURAL MOVE: the catalogue is TWO columns wide and nothing else.
   Eight 5:6 portraits sit gapped on the bare bone ground with no card, no
   border, no shadow and no radius — the picture edge is the only edge
   anywhere on the page — and they start the INSTANT the silent slider ends,
   with the title block switched off so nothing introduces them. The hero
   type is deliberately small for the same reason: the stone has to be the
   loudest thing on the screen. Serpentine green is spent on the rand figure
   and the buy slab and nowhere else, so the category line above the price is
   pulled back to muted and the accent lands once per tile. Nothing in this
   block touches header order, position or alignment — only type and colour. */
body.t-beitel {
  background: #f4f1ea;
  color: #1c1b19;
  --bt-green: #2f4238;
  --bt-lit: #3b5646;
  --bg-flat: #f4f1ea;
  --header-bg: #f4f1ea;
  --surface: #f4f1ea;
  --surface-2: #efece4;
  --line: #ddd6c7;
  --line-strong: #c2bbaa;
  --heading: #1c1b19;
  --text: #1c1b19;
  --muted: #7d7669;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the ground, so the stage begins beneath
   the header rather than behind it. Type, colour and tracking only. */
body.t-beitel .sf-head, body.t-beitel .sf-header,
body.t-beitel .sf-foot, body.t-beitel .sf-footer, body.t-beitel .sf-cats {
  background: #f4f1ea; border-color: #ddd6c7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-beitel .sf-name, body.t-beitel .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11.5px; font-weight: 600; }

/* GREEN 1 of 2 — every control is a flat serpentine slab with no edge on it */
body.t-beitel .btn.brand { background: var(--bt-green); border: 0; box-shadow: none; color: #f4f1ea; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 14px 30px; }
body.t-beitel .btn.brand:hover { background: var(--bt-lit); color: #ffffff; }

/* NEAR-WORDLESS — the full window, three tall frames cross-fading, and one
   line held dead centre at barely more than body size. The heading is small
   ON PURPOSE; it is the only concession the opener makes to language. */
body.t-beitel .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-beitel .sc-hero h1 { font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; letter-spacing: 0.015em; line-height: 1.55; margin: 0 0 30px; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45); }

/* NO TITLE BLOCK — the wall carries an empty heading and the theme removes it,
   so the pictures butt straight onto the bottom of the slider with no gutter,
   no intro paragraph and no filter bar between them. 1400 wide, like the grid
   the reference is boxed to. */
body.t-beitel .sc-buygrid .sc-h2 { display: none; }
body.t-beitel .sc-buygrid { max-width: 1400px; padding: 0 20px 124px; }

/* THE WALL — two columns of 5:6 portraits, four rows that all fill, gapped on
   the bare ground. No card, no frame, no placeholder rectangle. */
body.t-beitel .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 40px; }
body.t-beitel .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-beitel .sc-buy-media img { aspect-ratio: 5 / 6; }

/* the caption stacks BELOW the picture and never over it: the category tiny and
   tracked open, the title one step up in plain title case, then GREEN 2 of 2 */
body.t-beitel .sc-buy-cat { margin-top: 22px; color: var(--muted); font-size: 10px; letter-spacing: 0.26em; }
body.t-beitel .sc-buy-t { margin-top: 10px; font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; letter-spacing: -0.005em; }
body.t-beitel .sc-buy-p { margin-top: 10px; color: var(--bt-green); font-size: 16px; font-weight: 700; }
body.t-beitel .sc-buy-form { margin-top: 20px; }

/* THE ONLY DARK SURFACE ABOVE THE FOOT — one absurd-scale line over the
   workshop, with the studio's four quiet lines under it at a tenth of the size */
body.t-beitel .sc-about-overlay { min-height: 84vh; padding: 14vh 20px; display: grid; align-content: center; }
body.t-beitel .sc-about-overlay-inner { max-width: 1100px; }
body.t-beitel .sc-about-overlay .sc-h2 { font-size: clamp(38px, 8.6vw, 122px); line-height: 0.94; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 42px; }
body.t-beitel .sc-about-overlay p { font-size: 13.5px; line-height: 2.1; max-width: 54ch; margin: 0 auto; color: rgba(244, 241, 234, 0.82); }

/* the quietest block on the page by design: a narrow column on bare bone,
   no photograph, no panel, no band, and a heading set smaller than the prose */
body.t-beitel .sc-contact { max-width: 430px; padding: 104px 20px 112px; }
body.t-beitel .sc-contact .sc-h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 600; margin: 0 0 16px; }
body.t-beitel .sc-contact-sub { font-size: 13.5px; line-height: 1.9; }

@media (max-width: 760px) {
  body.t-beitel .sc-hero { min-height: 84vh; }
  body.t-beitel .sc-buy-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  body.t-beitel .sc-about-overlay { min-height: 62vh; padding: 11vh 20px; }
}

/* NIGHT — the bone goes to wet slate and the serpentine is lifted to the pale
   green a polished offcut throws back under a work lamp, so the rand figure and
   the buy slab still carry against a dark ground. The wall of portraits becomes
   the only lit thing in the room, which is closer to how the gallery looks at
   six in the evening than the day version is. */
html[data-theme="dark"] body.t-beitel {
  background: #17171a;
  color: #d9d4c8;
  --bt-green: #7ba98d;
  --bt-lit: #93bfa3;
  --bg-flat: #17171a;
  --header-bg: #17171a;
  --surface: #17171a;
  --surface-2: #1d1d21;
  --line: #2a2a2f;
  --line-strong: #3c3c43;
  --heading: #f1ede2;
  --text: #d9d4c8;
  --muted: #8b8578;
}
html[data-theme="dark"] body.t-beitel .sf-head, html[data-theme="dark"] body.t-beitel .sf-header,
html[data-theme="dark"] body.t-beitel .sf-foot, html[data-theme="dark"] body.t-beitel .sf-footer,
html[data-theme="dark"] body.t-beitel .sf-cats { background: #17171a; border-color: #2a2a2f; }
html[data-theme="dark"] body.t-beitel .btn.brand { background: var(--bt-green); color: #10120f; }
html[data-theme="dark"] body.t-beitel .btn.brand:hover { background: var(--bt-lit); color: #10120f; }