/* ---- bladsy (Bladsy — Africana bookroom & rare editions 315) ---------------
   THE STRUCTURAL MOVE: the SAME catalogue module runs TWICE — eight portrait
   tiles, then four — with nothing between the two but one full-bleed band of
   italic type and a lot of air. That band is the only edge-to-edge thing on the
   page after the hero, and it carries the shop's own paragraph instead of a
   photograph, so the page reads grid / statement / grid rather than the
   hero-strip-banner rhythm most storefronts run on. The ground is warm paper
   cream rather than white so the true-white tiles read as objects standing on a
   shelf against it, and one muted oxblood is spent on the rand figure and the
   buy slab and nowhere else. Nothing in this block touches header order,
   position or alignment — type, colour and spacing only. */
body.t-bladsy {
  background: #f6f1e7;
  color: #191714;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bd-ox: #7b2f34;
  --bd-lit: #94393f;
  --bg-flat: #f6f1e7;
  --header-bg: #f6f1e7;
  --surface: #ffffff;
  --surface-2: #ece3d3;
  --line: #e2dacb;
  --line-strong: #cfc4ae;
  --heading: #191714;
  --text: #191714;
  --muted: #6f6555;
  --radius: 0;
  --shadow: none;
}

/* a flat cream bar exactly the colour of the page, so the slider begins beneath
   the header rather than behind it. Type and colour only. */
body.t-bladsy .sf-head, body.t-bladsy .sf-header,
body.t-bladsy .sf-foot, body.t-bladsy .sf-footer, body.t-bladsy .sf-cats {
  background: #f6f1e7; border-color: #e2dacb;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-bladsy .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }

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

/* the whole first screen: three frames cross-fading, copy stacked and centred
   over the photograph, one solid slab under it */
body.t-bladsy .sc-hero { min-height: 100vh; padding: 110px 20px; }
body.t-bladsy .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }

/* under the fold everything narrows into one contained column with wide margins */
body.t-bladsy .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(23px, 3.1vw, 33px); letter-spacing: -0.015em; margin: 0 0 44px; }
body.t-bladsy .sc-products, body.t-bladsy .sc-buygrid, body.t-bladsy .sc-strip { padding: 96px 20px 72px; }

/* THE MODULE, ONCE — four across, so eight tiles fill two rows exactly and the
   second grid's four fill one. White cards on the cream ground, portrait
   objects, caption centred underneath and never over the picture. */
body.t-bladsy .product-grid, body.t-bladsy .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; }
body.t-bladsy .product-card, body.t-bladsy .sc-buy-card { background: var(--surface); border: 0; padding-bottom: 6px; }
body.t-bladsy .product-card .ph, body.t-bladsy .sc-buy-media, body.t-bladsy .sc-buy-media img { background: var(--surface); aspect-ratio: 3 / 4; }
body.t-bladsy .product-card .meta { text-align: center; padding: 18px 14px 24px; }
body.t-bladsy .product-card .t, body.t-bladsy .sc-buy-t, body.t-bladsy .sc-strip-label { font-family: var(--sf-serif); font-weight: 400; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.005em; }
/* OXBLOOD 2 of 2 — the rand figure, once per tile, and nothing else */
body.t-bladsy .product-card .p, body.t-bladsy .sc-buy-p { color: var(--bd-ox); font-size: 14.5px; font-weight: 700; margin-top: 8px; }
body.t-bladsy .sc-buy-cat { color: var(--muted); font-size: 10px; letter-spacing: 0.24em; margin-top: 18px; }

/* THE MODULE, TWICE — the second run is the four objects rather than the books,
   so the first four cards drop out of it. Same markup, same four columns, one
   row instead of two. */
body.t-bladsy #products-2 .sc-buy-card:nth-child(-n + 4) { display: none; }

/* THE BAND — the only edge-to-edge thing on the page after the hero. No
   picture, no button, one paragraph set large and italic with air round it. */
body.t-bladsy .sc-richtext { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: 112px clamp(20px, 9vw, 150px) 118px; background: var(--surface-2); }
body.t-bladsy .sc-richtext .sc-h2 { font-family: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.26em; color: var(--bd-ox); margin: 0 0 32px; }
body.t-bladsy .sc-richtext p { font-family: var(--sf-serif); font-style: italic; font-size: clamp(20px, 2.6vw, 34px); line-height: 1.44; letter-spacing: -0.015em; color: var(--heading); max-width: 26ch; margin: 0 auto; }

/* the rooms and the services: landscape frames, label under the picture */
body.t-bladsy .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-bladsy .sc-strip-img { aspect-ratio: 3 / 2; border: 0; background: var(--surface); }

/* the page closes on ink, edge to edge — the only dark surface in the document */
body.t-bladsy .sc-contact-band { background: #191714; padding: 92px 0 100px; }
body.t-bladsy .sc-contact-band .sc-h2, body.t-bladsy .sc-contact-band .sc-contact-sub, body.t-bladsy .sc-contact-band label { color: #f6f1e7; }

@media (max-width: 860px) {
  body.t-bladsy .product-grid, body.t-bladsy .sc-buy-grid, body.t-bladsy .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bladsy .sc-hero { min-height: 82vh; }
  body.t-bladsy .sc-richtext { padding: 76px 22px 80px; }
}

/* NIGHT — the paper goes to a warm near-black and the oxblood lifts to the
   colour old cloth binding takes under a lamp, so the rand figure and the buy
   slab still carry. The white tiles become the only lit things on the page,
   which is roughly what the room looks like at seven in the evening. */
html[data-theme="dark"] body.t-bladsy {
  background: #15130f;
  color: #e2dbcc;
  --bd-ox: #cf807a;
  --bd-lit: #e09a94;
  --bg-flat: #15130f;
  --header-bg: #15130f;
  --surface: #1e1a14;
  --surface-2: #23201a;
  --line: #2c281f;
  --line-strong: #3f3a2f;
  --heading: #f3ecdd;
  --text: #e2dbcc;
  --muted: #8d8474;
}
html[data-theme="dark"] body.t-bladsy .sf-head, html[data-theme="dark"] body.t-bladsy .sf-header,
html[data-theme="dark"] body.t-bladsy .sf-foot, html[data-theme="dark"] body.t-bladsy .sf-footer,
html[data-theme="dark"] body.t-bladsy .sf-cats { background: #15130f; border-color: #2c281f; }
html[data-theme="dark"] body.t-bladsy .btn.brand, html[data-theme="dark"] body.t-bladsy .btn.brand:hover { color: #1b0f0e; }
html[data-theme="dark"] body.t-bladsy .sc-contact-band { background: #26221b; }