/* ---- gewel (Gewel — Architectural salvage & reclamation yard 305) ---------
   THE STRUCTURAL MOVE: THE PAGE HAS NO GUTTERS. Both repeating blocks — the
   four department doorways and the eight-piece catalogue — are the SAME
   gapless four-column grid, ruled by 1px hairlines at 12% bone, so the
   dividers are the only geometry on the document and the photographs run
   edge to edge into one another. Every cell (strip card and product card
   alike) is one object: transparent ground, no radius, no shadow, no lift on
   hover, one rule down its left edge and one along its bottom. The reference's
   left-aligned overlay stack is honoured in the BODY — hero, banner, about and
   contact all set hard left, never centred — so nothing here has to touch the
   header: no order, no position, no nth-of-type on a single item in it. Oxide
   red appears exactly twice, on the counter-generated department numerals and
   on the fill a ghost button takes when you hover it. ---------------------- */
body.t-gewel {
  background: #101010;
  color: #ede7dc;
  --gw-rule: rgba(237, 231, 220, 0.12);
  --gw-oxide: #b4552f;
  --bg-flat: #101010;
  --header-bg: #101010;
  --surface: #161616;
  --surface-2: #131313;
  --line: rgba(237, 231, 220, 0.12);
  --line-strong: rgba(237, 231, 220, 0.28);
  --heading: #ede7dc;
  --text: #ede7dc;
  --muted: #8d867c;
  --radius: 0;
  --shadow: none;
}

/* a flat near-black bar the same value as the page, so the hero begins beneath
   it rather than behind it. Colour and type only — nothing moves. */
body.t-gewel .sf-head, body.t-gewel .sf-header,
body.t-gewel .sf-foot, body.t-gewel .sf-footer, body.t-gewel .sf-cats {
  background: #101010; border-color: var(--gw-rule);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-gewel .sf-name, body.t-gewel .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 500; }

/* the buy control is a flat bone slab with no edge on it — the accent is not
   spent here, it is rationed to the numerals and the ghost hover */
body.t-gewel .btn.brand { background: #ede7dc; border: 0; box-shadow: none; color: #101010; text-transform: uppercase; letter-spacing: 0.24em; font-size: 10px; font-weight: 600; padding: 15px 30px; }

/* THE OPENER — the whole first screen, four salvage photographs cross-fading,
   and one screen of copy anchored hard left with no scrim card behind it */
body.t-gewel .sc-hero { min-height: 100vh; padding: 130px 40px; }
body.t-gewel .sc-hero-inner, body.t-gewel .sc-banner-inner,
body.t-gewel .sc-about-overlay-inner, body.t-gewel .sc-contact-band-inner { max-width: 760px; margin: 0; text-align: left; }
body.t-gewel .sc-hero h1 { color: #f4efe6; font-size: clamp(36px, 6.2vw, 74px); font-weight: 400; line-height: 1.04; letter-spacing: -0.035em; text-shadow: none; margin: 0 0 24px; }
body.t-gewel .sc-hero p { color: rgba(237, 231, 220, 0.8); text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(9.5px, 1.15vw, 11.5px); font-weight: 500; text-shadow: none; margin: 0 0 40px; }

/* the two outline controls on the page are the same object, top and bottom */
body.t-gewel .sc-hero .btn.brand.sc-hero-ghost,
body.t-gewel .sc-contact-band .btn.brand { background: transparent; border: 1px solid rgba(237, 231, 220, 0.55); color: #ede7dc; }
/* OXIDE 1 of 2 */
body.t-gewel .sc-hero .btn.brand.sc-hero-ghost:hover,
body.t-gewel .sc-contact-band .btn.brand:hover { background: var(--gw-oxide); border-color: var(--gw-oxide); color: #f7f2ea; }

/* small tracked label above the catalogue, and the display voice everything
   below the hero shares: book weight, no caps, tight tracking, hard left */
body.t-gewel .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 24px; }
body.t-gewel .sc-banner h2, body.t-gewel .sc-about-overlay .sc-h2,
body.t-gewel .sc-contact-band .sc-h2 { color: #ede7dc; font-size: clamp(24px, 3.6vw, 44px); font-weight: 400; line-height: 1.14; letter-spacing: -0.03em; text-transform: none; text-shadow: none; margin: 0 0 18px; }

/* THE HAIRLINE GRID — the four doorways and the eight pieces are one system:
   four gapless columns, five vertical rules (four left edges plus the row's
   own right edge), and a rule along the top and under every cell. */
body.t-gewel .sc-strip { max-width: none; padding: 0; }
body.t-gewel .sc-strip-row, body.t-gewel .product-grid {
  grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; counter-reset: gw-dept;
  border-top: 1px solid var(--gw-rule); border-right: 1px solid var(--gw-rule);
}
body.t-gewel .sc-strip-card, body.t-gewel .product-card, body.t-gewel .product-card:hover {
  position: relative; text-align: left; background: transparent;
  border: 0; border-left: 1px solid var(--gw-rule); border-bottom: 1px solid var(--gw-rule);
  border-radius: 0; box-shadow: none; transform: none;
}
body.t-gewel .sc-strip-img, body.t-gewel .product-card .ph { aspect-ratio: 4 / 5; background: transparent; border: 0; border-radius: 0; }
/* OXIDE 2 of 2 — the department numeral, counted rather than hand-numbered so
   the four doorways can be reordered without the figures going out of sequence */
body.t-gewel .sc-strip-card::before { counter-increment: gw-dept; content: counter(gw-dept); position: absolute; left: 24px; top: 18px; z-index: 1; color: var(--gw-oxide); font-size: clamp(38px, 4.6vw, 68px); font-weight: 400; line-height: 1; }
body.t-gewel .sc-strip-label { margin: 0; padding: 16px 24px 32px; text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 600; }
body.t-gewel .sc-products { max-width: none; padding: 96px 40px 100px; }
body.t-gewel .product-card .meta { padding: 18px 22px 34px; }

/* the two places the page gives itself back to a photograph, both set hard
   left on the picture with no card and no scrim panel */
body.t-gewel .sc-banner { margin: 0 calc(50% - 50vw); }
body.t-gewel .sc-banner, body.t-gewel .sc-about-overlay { display: flex; align-items: center; min-height: 66vh; padding: 104px 40px; text-align: left; }
body.t-gewel .sc-about-overlay p { color: rgba(237, 231, 220, 0.88); font-size: 16px; line-height: 1.95; text-shadow: none; }

/* the page ends on an edge: one near-black band the same value as the ground,
   separated from the yard photograph above it by a single hairline */
body.t-gewel .sc-contact-band { background: #101010; border-top: 1px solid var(--gw-rule); padding: 104px 20px 116px; }
body.t-gewel .sc-field input, body.t-gewel .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0; }

@media (max-width: 900px) {
  body.t-gewel .sc-hero { min-height: 84vh; padding: 108px 22px; }
  body.t-gewel .sc-strip-row, body.t-gewel .product-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-gewel .sc-products { padding: 68px 22px 74px; }
  body.t-gewel .sc-banner, body.t-gewel .sc-about-overlay { min-height: 0; padding: 74px 22px; }
  body.t-gewel .sc-contact-band { padding: 78px 20px 88px; }
}

/* NIGHT — a yard that is already dark cannot invert, so night takes the ground
   the rest of the way to true black, drops the hairlines from 12% to 9% so the
   grid thins to almost nothing, and lifts the oxide two stops because #b4552f
   loses the numerals against #000. The bone slab and the outline controls both
   still read, so no button rule is repeated here. */
html[data-theme="dark"] body.t-gewel {
  background: #000000;
  color: #ded6c8;
  --gw-rule: rgba(222, 214, 200, 0.09);
  --gw-oxide: #c9663a;
  --bg-flat: #000000;
  --header-bg: #000000;
  --surface: #0b0b0b;
  --surface-2: #080808;
  --line: rgba(222, 214, 200, 0.09);
  --line-strong: rgba(222, 214, 200, 0.24);
  --heading: #f4efe5;
  --text: #ded6c8;
  --muted: #7c766d;
}
html[data-theme="dark"] body.t-gewel .sf-head, html[data-theme="dark"] body.t-gewel .sf-header,
html[data-theme="dark"] body.t-gewel .sf-foot, html[data-theme="dark"] body.t-gewel .sf-footer,
html[data-theme="dark"] body.t-gewel .sf-cats { background: #000000; border-color: var(--gw-rule); }
html[data-theme="dark"] body.t-gewel .sc-contact-band { background: #000000; }