/* HUSK — the reference's whole trick is scale: a page that stays full-bleed on
   one dark ground and only ever NARROWS into a pale slab, twice, with every
   picture block between those slabs running wall to wall and the gutter taken
   out altogether. That is the structural move carried here. The two strips
   drop the container and set gap to zero: the four-panel row near the top
   carries one enormous serif word on each panel and nothing else, and the
   six-panel row at the foot is welded flush to the footer, which is why the
   footer's own top margin is zeroed. The two contained bands are literal cream
   slabs inset in the brown and they redefine the ink tokens locally, so the
   narrowing is something you can see rather than infer and no second set of
   colour rules is needed. Green does exactly three jobs — the filled slab, the
   ghost edge on the stage, and the rule under every product title. */
body.t-husk {
  background: #221a12;
  color: #e0d4c0;
  --hsk-green: #5d7c4a;
  --bg-flat: #221a12;
  --surface: #2c2118;
  --surface-2: #34281c;
  --line: #3a2c1e;
  --line-strong: #55412c;
  --heading: #f5eee2;
  --text: #e0d4c0;
  --muted: #a4927a;
  --header-bg: #221a12;
  --radius: 0;
  --shadow: none;
}

/* the bar is the same roasted shell as the hero beneath it, so the first
   screen reads as one plate. margin-top on the footer goes because the closing
   photograph row butts straight into it. */
body.t-husk .sf-header, body.t-husk .sf-head, body.t-husk .sf-cats,
body.t-husk .sf-footer, body.t-husk .sf-foot {
  background: #221a12; border-color: #3a2c1e; margin-top: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-husk .sf-name, body.t-husk .sc-hero h1, body.t-husk .sc-h2,
body.t-husk .sc-banner h2, body.t-husk .product-card .t {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.015em;
}
body.t-husk .sf-name { font-size: 23px; letter-spacing: 0.01em; }

body.t-husk .btn.brand { background: var(--hsk-green); border-color: var(--hsk-green); color: #f7f2e8; border-radius: 0; box-shadow: none; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 28px; }
body.t-husk .btn.brand:hover, body.t-husk .sc-hero .btn.brand.sc-hero-ghost:hover { background: #6f9159; border-color: #6f9159; color: #f7f2e8; opacity: 1; }

/* the stage: three plates cross-fading on a flat dark ground, copy dead centre */
body.t-husk .sc-hero { min-height: 100vh; }
body.t-husk .sc-hero h1 { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.08; margin: 0 0 18px; }
body.t-husk .sc-hero .btn.brand.sc-hero-ghost { border-color: var(--hsk-green); color: #f3ece0; }
body.t-husk .sc-h2 { font-size: clamp(24px, 3.4vw, 40px); }

/* THE TWO NARROWINGS — cream slabs inset in the brown, ink flipped inside them */
body.t-husk .sc-about-split, body.t-husk .sc-richtext {
  background: #f3ece0; padding: clamp(38px, 4.6vw, 68px); margin-top: clamp(56px, 7vw, 96px);
  --heading: #17110b; --text: #3b2f22; --muted: #5f5343;
}
body.t-husk .sc-richtext { max-width: 880px; text-align: center; }
body.t-husk .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }

/* PICTURE ROWS — container gone, gutter gone, one word lying on each panel */
body.t-husk .sc-strip { width: 100vw; max-width: 100vw; margin: clamp(56px, 7vw, 96px) calc(50% - 50vw) 0; padding: 0; }
body.t-husk .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-husk .sc-strip-card { position: relative; }
body.t-husk .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; }
body.t-husk .sc-strip-label { position: absolute; top: 26px; left: 16px; right: 16px; margin: 0; font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: #f7f2e8; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5); }
/* the closing row is the one with a heading: six wide, still gapless, captions
   dropped to micro-caps so it stays a wall of pictures and not a list */
body.t-husk .sc-strip:has(.sc-h2) .sc-h2 { margin: 0 clamp(20px, 5vw, 70px) 32px; text-align: left; }
body.t-husk .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(6, 1fr); }
body.t-husk .sc-strip:has(.sc-h2) .sc-strip-img { aspect-ratio: 1; }
body.t-husk .sc-strip:has(.sc-h2) .sc-strip-label { top: auto; bottom: 12px; left: 12px; right: 12px; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }

body.t-husk .sc-banner { margin: clamp(56px, 7vw, 96px) calc(50% - 50vw) 0; min-height: 62vh; display: flex; align-items: center; justify-content: center; }
body.t-husk .sc-banner h2 { font-size: clamp(28px, 4.4vw, 58px); line-height: 1.14; }
/* the second plate carries a heading and nothing else, so it runs deeper */
body.t-husk .sc-banner:not(:has(.btn)) { min-height: 78vh; }

/* the close reverses the shared order: form in the left half, the visit-us
   stack centre-set in the right, exactly as the reference ends */
body.t-husk .sc-contact-split { padding: clamp(56px, 7vw, 96px) 20px clamp(60px, 7vw, 100px); }
body.t-husk .sc-contact-body { grid-column: 1; grid-row: 1; }
body.t-husk .sc-contact-lead { grid-column: 2; grid-row: 1; text-align: center; }
body.t-husk .sc-contact-lead .sc-h2 { text-align: center; }

/* the catalogue: four across, two clean rows, green hairline under each title */
body.t-husk .product-grid { grid-template-columns: repeat(4, 1fr); gap: 34px 24px; padding: 8px 0 0; }
body.t-husk .product-card, body.t-husk .product-card:hover { background: transparent; border: 0; border-radius: 0; transform: none; box-shadow: none; }
body.t-husk .product-card .ph { aspect-ratio: 4 / 3; background: var(--surface); border-radius: 0; }
body.t-husk .product-card .meta { padding: 14px 0 0; }
body.t-husk .product-card .t { font-size: 18px; padding-bottom: 9px; border-bottom: 1px solid var(--hsk-green); }
body.t-husk .product-card .p { margin-top: 9px; font-size: 15px; color: var(--text); }

@media (max-width: 900px) {
  body.t-husk .product-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-husk .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-husk .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  body.t-husk .sc-contact-body, body.t-husk .sc-contact-lead { grid-column: auto; grid-row: auto; }
}

/* NIGHT — the shell goes past brown to a burnt near-black, the cream slabs drop
   to a warm charcoal so the page still visibly narrows in the same two places,
   and the green lifts because it is the only colour anywhere on the page. */
html[data-theme="dark"] body.t-husk {
  background: #100c08;
  color: #cbbfab;
  --hsk-green: #7ea165;
  --bg-flat: #100c08;
  --surface: #1a140d;
  --surface-2: #221a12;
  --line: #2a2119;
  --line-strong: #40342a;
  --heading: #f2ece1;
  --text: #cbbfab;
  --muted: #8d7f6c;
  --header-bg: #100c08;
}
html[data-theme="dark"] body.t-husk .sf-header, html[data-theme="dark"] body.t-husk .sf-head,
html[data-theme="dark"] body.t-husk .sf-cats, html[data-theme="dark"] body.t-husk .sf-footer,
html[data-theme="dark"] body.t-husk .sf-foot { background: #100c08; border-color: #2a2119; }
html[data-theme="dark"] body.t-husk .sc-about-split, html[data-theme="dark"] body.t-husk .sc-richtext {
  background: #241c14; --heading: #f2ece1; --text: #cbbfab; --muted: #8d7f6c;
}
html[data-theme="dark"] body.t-husk .btn.brand { color: #0f1409; }
html[data-theme="dark"] body.t-husk .btn.brand:hover,
html[data-theme="dark"] body.t-husk .sc-hero .btn.brand.sc-hero-ghost:hover { background: #93b57a; border-color: #93b57a; color: #0f1409; }