/* ============================================================================
   BRIDGES 91-110 — thirteen stores and seven websites.
   ==========================================================================*/
/* ---- hasp (Hasp — Brass & iron door hardware 110) --------------------------
   THE STRUCTURAL MOVE: the catalogue IS the page. Eight square flat-lays run
   FOUR across in two full rows through the middle of the layout, and every
   scrap of card chrome is stripped off them — no border, no ground, no radius —
   so the eight white photographs are the only bright objects punched out of the
   near-black. Nothing else is allowed a tile: there is no strip between the
   grid and the banner, which is what keeps the wall reading as one block
   instead of one of several. Verdigris is rationed to exactly three homes — the
   category row under the bar, the hero's outline and the price caption under
   each tile — and appears nowhere else on the page. */
body.t-hasp {
  background: #161714;
  color: #c6c3b8;
  --hp-verd: #6f9d85;
  --bg-flat: #161714;
  --surface: #1e1f1b;
  --surface-2: #24251f;
  --line: #2a2b26;
  --line-strong: #3b3c36;
  --heading: #f2eee4;
  --text: #c6c3b8;
  --muted: #8a877e;
  --header-bg: #161714;
  --radius: 0;
  --shadow: none;
}

/* the slim bar keeps a solid ground rather than going glassy over the slides —
   bone type on the photograph and bone type on the bar would otherwise meet */
body.t-hasp .sf-header, body.t-hasp .sf-head,
body.t-hasp .sf-footer, body.t-hasp .sf-foot, body.t-hasp .sf-cats {
  background: #161714; border-color: #2a2b26;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-hasp .sf-name, body.t-hasp .sf-navlink { text-transform: lowercase; letter-spacing: 0.02em; font-size: 14px; font-weight: 500; }

/* VERDIGRIS 1 of 3 — the category row, small-caps, the only colour above the fold */
body.t-hasp .sf-cats a { color: var(--hp-verd); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; }

body.t-hasp .btn.brand { background: var(--hp-verd); border-color: var(--hp-verd); color: #14150f; box-shadow: none; font-weight: 600; padding: 14px 28px; }

/* full viewport, copy held in the UPPER half — the bottom of the frame is left
   deliberately empty so the photograph finishes the first screen on its own */
body.t-hasp .sc-hero { min-height: 100vh; align-items: flex-start; padding: 24vh 20px 0; }
body.t-hasp .sc-hero-inner { max-width: 1040px; }
body.t-hasp .sc-hero h1 { text-transform: lowercase; font-weight: 400; font-size: clamp(38px, 6.4vw, 78px); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 20px; }

/* VERDIGRIS 2 of 3 — the hero outline, the one control on the page that is not
   a solid slab */
body.t-hasp .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--hp-verd); color: #f2eee4; }
body.t-hasp .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--hp-verd); color: #14150f; }

body.t-hasp .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; color: var(--heading); margin-bottom: 30px; }

/* the positioning line: one paragraph alone in a wide band of dark ground, with
   more air above and below it than anything else on the page is given */
body.t-hasp .sc-richtext { max-width: 720px; padding: 132px 20px 96px; }
body.t-hasp .sc-richtext p { color: var(--heading); font-size: clamp(17px, 2.1vw, 21px); line-height: 1.75; }

/* --- THE WALL: eight square flat-lays, four across, twice, no card around them --- */
body.t-hasp .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; padding: 0 0 54px; }
@media (max-width: 900px) { body.t-hasp .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.t-hasp .product-card { background: transparent; border: 0; box-shadow: none; text-align: center; }
body.t-hasp .product-card .ph { background: #ffffff; }
/* VERDIGRIS 3 of 3 — the price set as a small-caps caption under the tile
   rather than a number in a corner, so the label is the coloured thing */
body.t-hasp .product-card .p { color: var(--hp-verd); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; margin-top: 7px; }

/* the still life is the only full-bleed photograph on the page, and its copy is
   held left of the frame instead of centred over it */
body.t-hasp .sc-banner { min-height: 64vh; display: flex; align-items: center; text-align: left; padding: 88px 8vw; }
body.t-hasp .sc-banner-inner { margin: 0; max-width: 520px; }

body.t-hasp .sc-contact-band { background: #1a1b17; border-top: 1px solid #2a2b26; padding: 88px 0 100px; }

/* NIGHT — the ground drops another two stops toward black, the verdigris lifts
   to hold its contrast against it, and the eight flat-lays come off pure white
   so a wall of them stops glaring in a dark room. */
html[data-theme="dark"] body.t-hasp {
  background: #0b0c09;
  color: #c1beb4;
  --hp-verd: #86b8a0;
  --bg-flat: #0b0c09;
  --surface: #131410;
  --surface-2: #191a15;
  --line: #1f2019;
  --line-strong: #2e2f28;
  --heading: #f8f5ec;
  --text: #c1beb4;
  --muted: #8d8a81;
  --header-bg: #0b0c09;
}
html[data-theme="dark"] body.t-hasp .sf-header, html[data-theme="dark"] body.t-hasp .sf-head,
html[data-theme="dark"] body.t-hasp .sf-footer, html[data-theme="dark"] body.t-hasp .sf-foot,
html[data-theme="dark"] body.t-hasp .sf-cats { background: #0b0c09; border-color: #1f2019; }
html[data-theme="dark"] body.t-hasp .sc-contact-band { background: #10110d; border-top-color: #1f2019; }
html[data-theme="dark"] body.t-hasp .product-card .ph { background: #f1efe8; }