/* ---- conche (Conche — Bean-to-bar chocolate 126) ---------------------------
   THE STRUCTURAL MOVE: the page CLOSES ON PHOTOGRAPHS. Six uniform tiles are
   welded gapless and full-bleed and sit AFTER the order form — no gutters, no
   labels, no heading — so the last thing in the shop is an unbroken wall of
   pictures rather than a footer block. Everything above it runs as a narrow
   centred spine (one paragraph, one band, one late split) strung between a
   full-viewport opener and two passes over the same catalogue. Cocoa
   brown-black throughout so the tiles and the page share a ground and the wall
   needs no border; oxidised copper is rationed to exactly three homes — the
   buttons, the prices, and the hairline rules between bands. */
body.t-conche {
  background: #1a120d;
  color: #cbbcac;
  --cn-cop: #b1734a;
  --cn-rule: rgba(177, 115, 74, 0.32);
  --bg-flat: #1a120d;
  --surface: #221710;
  --surface-2: #2a1c14;
  --line: #2f2118;
  --line-strong: #402d21;
  --heading: #f0e7db;
  --text: #cbbcac;
  --muted: #97867a;
  --header-bg: #1a120d;
  --radius: 0;
  --shadow: none;
}

/* the bar keeps a solid cocoa ground rather than going glassy over the slides */
body.t-conche .sf-header, body.t-conche .sf-head,
body.t-conche .sf-footer, body.t-conche .sf-foot, body.t-conche .sf-cats {
  background: #1a120d; border-color: #2f2118;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* four items, set thin and wide-tracked — no dropdowns, no search field */
body.t-conche .sf-name, body.t-conche .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 500; }

/* COPPER 1 of 3 — the controls, flat slabs with no visible edge */
body.t-conche .btn.brand { background: var(--cn-cop); border-color: var(--cn-cop); color: #17100b; box-shadow: none; font-weight: 600; letter-spacing: 0.06em; padding: 14px 30px; }
body.t-conche .btn.brand:hover { background: #96603b; border-color: #96603b; color: #f0e7db; }

/* the opener: a full screen of dark photograph with the copy stacked dead
   centre in three lines of sharply decreasing size */
body.t-conche .sc-hero { min-height: 100vh; }
body.t-conche .sc-hero h1 { text-transform: uppercase; font-weight: 800; letter-spacing: 0.015em; font-size: clamp(34px, 7.4vw, 86px); line-height: 0.98; margin-bottom: 16px; }
body.t-conche .sc-hero p { text-transform: uppercase; letter-spacing: 0.17em; font-weight: 500; font-size: clamp(11.5px, 1.7vw, 16px); margin-bottom: 32px; }
body.t-conche .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; color: var(--heading); margin-bottom: 28px; }

/* COPPER 2 of 3 — the hairlines that separate one band from the next, and the
   only division on a page that otherwise has no borders anywhere */
body.t-conche .sc-richtext, body.t-conche .sc-about-split, body.t-conche .sc-buygrid { border-top: 1px solid var(--cn-rule); }

/* THE SPINE — narrow, centred, almost entirely text, sitting in the middle
   third between the picture at the top and the pictures at the foot */
body.t-conche .sc-richtext { max-width: 620px; padding: 104px 20px 92px; }
body.t-conche .sc-richtext p { color: var(--heading); font-size: clamp(16px, 2vw, 19.5px); line-height: 1.85; }
body.t-conche .sc-banner { min-height: 46vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); }

/* pass one — uneven tiles, four columns so eight items fill every column */
body.t-conche .sc-mas-grid { column-count: 4; column-gap: 18px; }
/* COPPER 3 of 3 — the rand figure, in both catalogue passes */
body.t-conche .sc-mas-p, body.t-conche .sc-buy-p { color: var(--cn-cop); font-weight: 600; }
/* pass two — priced, four across, two rows that fill */
body.t-conche .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; padding-top: 8px; }

body.t-conche .sc-contact-band { background: #150f0a; border-top: 1px solid var(--cn-rule); padding: 92px 0 100px; }
body.t-conche .sc-contact-sub { white-space: pre-line; line-height: 2; color: var(--text); }

/* THE WALL — six tiles welded flush, full-bleed, uncaptioned and unheadlined,
   closing the shop after the form. Tile ground and page ground are the same
   brown-black, so the wall needs no border to sit on. */
body.t-conche .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-conche .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-conche .sc-strip-img { aspect-ratio: 4 / 3; border: 0; border-radius: 0; background: #1a120d; }
body.t-conche .sc-strip-label { display: none; }

@media (max-width: 900px) {
  body.t-conche .sc-mas-grid { column-count: 2; }
  body.t-conche .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-conche .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the cocoa drops another two stops toward black and the copper is
   lifted to hold against it, so the hairlines and the prices stay readable
   once the photographs are the brightest things in the room. */
html[data-theme="dark"] body.t-conche {
  background: #100b07;
  color: #c4b4a4;
  --cn-cop: #c98a5e;
  --cn-rule: rgba(201, 138, 94, 0.3);
  --bg-flat: #100b07;
  --surface: #17100b;
  --surface-2: #1e150e;
  --line: #241a12;
  --line-strong: #33241a;
  --heading: #f6efe5;
  --text: #c4b4a4;
  --muted: #9c8a7c;
  --header-bg: #100b07;
}
html[data-theme="dark"] body.t-conche .sf-header, html[data-theme="dark"] body.t-conche .sf-head,
html[data-theme="dark"] body.t-conche .sf-footer, html[data-theme="dark"] body.t-conche .sf-foot,
html[data-theme="dark"] body.t-conche .sf-cats { background: #100b07; border-color: #241a12; }
html[data-theme="dark"] body.t-conche .sc-contact-band { background: #0b0705; }
html[data-theme="dark"] body.t-conche .sc-strip-img { background: #100b07; }