/* ---- emery (Emery — Nail bar & own-label lacquer 230) ----------------------
   THE STRUCTURAL MOVE: the catalogue is demoted to a SERVICE MENU. The buy grid
   gives up its cards, borders, shadows and hover lift; the six flat-lays shrink
   to small thumbnails in a fixed three-across grid, every item ruled off with a
   single hairline, and the price is given a line of its own. So the ONLY priced
   block on the page is also the plainest and densest thing on it — and it lands
   fourth, after a 100vh photographic slider, four square scene tiles and a
   full-bleed voucher band, which is the reference's rhythm of big picture slabs
   alternating with thin bands of text. Ground is warm chalk plaster rather than
   white, and the clay-rose has exactly three homes: a link under the cursor,
   the solid slab button and the price figure. */
body.t-emery {
  background: #f4efe9;
  color: #4a3f38;
  --em-rose: #b8776b;
  --bg-flat: #f4efe9;
  --surface: #fbf8f5;
  --surface-2: #ece5dc;
  --line: #ddd3c8;
  --line-strong: #c9bcae;
  --heading: #241d19;
  --text: #4a3f38;
  --muted: #7d7166;
  --header-bg: #f4efe9;
  --radius: 0;
  --shadow: none;
}
/* the bar stays on the plaster ground instead of going glassy over the photograph */
body.t-emery .sf-head, body.t-emery .sf-header,
body.t-emery .sf-foot, body.t-emery .sf-footer, body.t-emery .sf-cats {
  background: #f4efe9; border-color: #ddd3c8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-emery .sf-name { text-transform: lowercase; font-weight: 500; letter-spacing: 0.02em; font-size: 19px; }
/* ROSE 1 of 3 — links under the cursor */
body.t-emery a:hover { color: var(--em-rose); }
/* ROSE 2 of 3 — every button is the same small flat slab, no outline of its own */
body.t-emery .btn.brand { background: var(--em-rose); border-color: var(--em-rose); color: #fbf8f5; box-shadow: none; text-transform: lowercase; letter-spacing: 0.05em; font-weight: 600; font-size: 13px; padding: 12px 24px; }
body.t-emery .btn.brand:hover { background: #9f6155; border-color: #9f6155; }

/* SLAB ONE — the first screen is the room, copy held left and vertically centred */
body.t-emery .sc-hero { min-height: 100vh; padding: 0 clamp(20px, 7vw, 96px); }
body.t-emery .sc-hero h1 { text-transform: lowercase; font-weight: 300; font-size: clamp(52px, 11vw, 146px); line-height: 0.92; letter-spacing: -0.045em; margin-bottom: 22px; }
body.t-emery .sc-h2 { text-transform: lowercase; font-weight: 400; font-size: clamp(21px, 2.7vw, 31px); letter-spacing: -0.005em; color: var(--heading); margin-bottom: 30px; }

/* the two contained blocks share one measure of air, so the page keeps a beat */
body.t-emery .sc-strip, body.t-emery .sc-buygrid { padding: clamp(72px, 9vw, 112px) 20px clamp(8px, 1vw, 14px); }
body.t-emery .sc-strip .sc-h2, body.t-emery .sc-buygrid .sc-h2 { text-align: left; }
/* SLAB TWO — four square scenes, gapped and labelled flush left */
body.t-emery .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.t-emery .sc-strip-card, body.t-emery .sc-buy-card { text-align: left; align-items: flex-start; }
/* SLAB THREE — the voucher band, the last block before anything is priced */
body.t-emery .sc-banner { min-height: 54vh; display: flex; align-items: center; margin: clamp(72px, 9vw, 112px) calc(50% - 50vw) 0; }

/* --- THE MENU: six items, three across, hairline-ruled, no card anywhere --- */
body.t-emery .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
body.t-emery .sc-buy-card { border-top: 1px solid var(--line); padding: 22px 0 34px; }
body.t-emery .sc-buy-media { width: clamp(112px, 14vw, 172px); background: var(--surface); }
body.t-emery .sc-buy-cat { color: var(--muted); font-size: 10px; letter-spacing: 0.2em; font-weight: 600; margin-top: 18px; }
/* ROSE 3 of 3 — the price, alone on its line and the only figure on the page */
body.t-emery .sc-buy-p { color: var(--em-rose); font-size: 14px; font-weight: 600; margin-top: 7px; }

/* the story runs flush off the left edge of the page, with the column of warm
   empty space and the ninety words held on the right */
body.t-emery .sc-about-split { width: 100vw; max-width: 100vw; margin: clamp(72px, 9vw, 112px) calc(50% - 50vw) 0; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 92px); padding: 0 clamp(20px, 7vw, 96px) 0 0; }
body.t-emery .sc-about-copy p { max-width: 460px; font-size: 16.5px; line-height: 2; color: var(--text); }
/* a thin strip on the plaster, opened by a hairline rather than a change of ground */
body.t-emery .sc-contact-band { background: transparent; border-top: 1px solid var(--line); margin-top: clamp(72px, 9vw, 112px); padding: clamp(46px, 5vw, 62px) 0 clamp(52px, 6vw, 72px); }

@media (max-width: 860px) {
  body.t-emery .sc-strip-row, body.t-emery .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-emery .sc-about-split { grid-template-columns: 1fr; padding: 0 20px; }
}

/* NIGHT — the plaster inverts to the deep clay-brown the ink was cut from, and
   the rose lifts a couple of steps so it still reads as the one accent. */
html[data-theme="dark"] body.t-emery {
  background: #1b1512;
  color: #c6b9b0;
  --em-rose: #d29b8e;
  --bg-flat: #1b1512;
  --surface: #241d19;
  --surface-2: #201a17;
  --line: #342a24;
  --line-strong: #47392f;
  --heading: #f6f1ea;
  --text: #c6b9b0;
  --muted: #948578;
  --header-bg: #1b1512;
}
html[data-theme="dark"] body.t-emery .sf-head, html[data-theme="dark"] body.t-emery .sf-header,
html[data-theme="dark"] body.t-emery .sf-foot, html[data-theme="dark"] body.t-emery .sf-footer,
html[data-theme="dark"] body.t-emery .sf-cats { background: #1b1512; border-color: #342a24; }
html[data-theme="dark"] body.t-emery .btn.brand { color: #1b1512; }
html[data-theme="dark"] body.t-emery .btn.brand:hover { background: #e4ab9d; border-color: #e4ab9d; color: #1b1512; }