/* ---- palet (Palet — Hand-milled oil colours & artists' linen 337) ----------
   THE STRUCTURAL MOVE: STORY FIRST, SHOP LAST. Three editorial splits run
   before a single price appears — text left / image right, then the sides
   flipped, then a full-bleed overlay standing in for the reference's video
   block — and the entire catalogue only arrives at the foot of the page, in
   one go, as eight tall portraits four across with the card chrome stripped
   off so the picture edge is the only edge anywhere. Every structural surface
   is chalk and ink; the one warm ochre is spent on the hero's outline, the
   rand figures and the hairline above the contact band and nowhere else, so
   all the colour on the page comes off the pigment photography. The first
   split is flipped by ID (#about) rather than :nth-of-type, which would match
   the hero instead. Nothing here touches the header's order, position or
   alignment — type, colour, size and spacing only. --------------------------- */
body.t-palet {
  background: #f7f6f3;
  color: #141310;
  --pl-ochre: #b4762f;
  --pl-ochre-hi: #c98c42;
  --bg-flat: #f7f6f3;
  --header-bg: #f7f6f3;
  --surface: #f7f6f3;
  --surface-2: #f2f0eb;
  --line: #e2ded4;
  --line-strong: #c8c2b4;
  --heading: #141310;
  --text: #141310;
  --muted: #7c766c;
  --radius: 0;
  --shadow: none;
}

/* a flat chalk bar the same colour as the ground, so the opening frame starts
   under the header rather than behind it. Colour and tracking only. */
body.t-palet .sf-head, body.t-palet .sf-header,
body.t-palet .sf-foot, body.t-palet .sf-footer, body.t-palet .sf-cats {
  background: #f7f6f3; border-color: #e2ded4;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-palet .sf-name, body.t-palet .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 600; }

/* every control is a flat ochre slab with no edge on it */
body.t-palet .btn.brand { background: var(--pl-ochre); border: 0; box-shadow: none; color: #f7f6f3; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; padding: 15px 32px; }
body.t-palet .btn.brand:hover { background: var(--pl-ochre-hi); color: #ffffff; }

/* THE OPENING FRAME — the full window, three photographs cross-fading, copy
   dead centre on the vertical midline. Never right: the reference sets its
   collection line on the midline and so do we. */
body.t-palet .sc-hero { min-height: 100vh; padding: 110px 20px; }
body.t-palet .sc-hero h1 { font-size: clamp(28px, 4.4vw, 54px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 18px; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4); }
body.t-palet .sc-hero p { font-size: 14px; letter-spacing: 0.05em; margin: 0 0 34px; }

/* OCHRE 1 of 3 — the base stylesheet already draws this button as an outline;
   the theme only recolours that outline and restores its transparency, which
   the brand slab above would otherwise fill in. */
body.t-palet .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-width: 1px; border-color: rgba(212, 154, 78, 0.9); color: #f7f6f3; letter-spacing: 0.24em; padding: 16px 38px; }

/* THE THREE BEATS — contained 50/50, the picture tall and the text side mostly
   whitespace with a small block of type floating in it. There is no About
   section on this store: milling, linen and the early bench carry the whole
   who-we-are job on the way down to the shop. */
body.t-palet .sc-about-split { gap: 68px; padding: 104px 20px; align-items: center; }
body.t-palet .sc-about-media img { aspect-ratio: 4 / 5; }
body.t-palet .sc-about-copy .sc-h2 { font-size: clamp(21px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 20px; }
body.t-palet .sc-about-copy p { font-size: 14.5px; line-height: 1.95; max-width: 34ch; color: var(--muted); }

/* BEAT ONE ONLY — text left, image right. Targeted by the anchor the renderer
   gives the first richtext, because :nth-of-type would match the hero. */
body.t-palet #about .sc-about-media { order: 2; }

/* BEAT THREE — the reference's video block: the media goes full width and the
   words sit straight over it. The only dark surface above the footer. */
body.t-palet .sc-about-overlay { min-height: 78vh; padding: 15vh 20px; display: grid; align-content: center; }
body.t-palet .sc-about-overlay .sc-h2 { font-size: clamp(30px, 5.6vw, 74px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 26px; }
body.t-palet .sc-about-overlay p { font-size: 14.5px; line-height: 2; max-width: 52ch; margin: 0 auto; }

/* THE PAYOFF — the shop, all of it, and nothing before it. Four across, two
   rows that fill exactly, wider than the story column so the grid reads as the
   dense zone of a page that has been quiet the whole way down. */
body.t-palet .sc-products { max-width: 1400px; padding: 96px 20px 0; }
body.t-palet .sc-products .sc-h2, body.t-palet .sc-contact-band .sc-h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
body.t-palet .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 58px 32px; padding: 34px 0 112px; }

/* no card, no border, no shadow, no lift on hover — the photograph is the tile */
body.t-palet .product-card { background: transparent; border: 0; }
body.t-palet .product-card:hover { transform: none; box-shadow: none; }
body.t-palet .product-card .ph { aspect-ratio: 3 / 4; background: var(--surface-2); }
body.t-palet .product-card .meta { padding: 16px 0 0; text-align: center; }
body.t-palet .product-card .t { font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em; }
/* OCHRE 2 of 3 — the rand figure, and the only colour in the caption */
body.t-palet .product-card .p { color: var(--pl-ochre); font-size: 13px; font-weight: 600; margin-top: 7px; }

/* OCHRE 3 of 3 — one hairline, one line of type and a short form, standing in
   for the reference's four-column footer plus newsletter strip. Deliberately
   thin: the store engine renders the real footer beneath it. */
body.t-palet .sc-contact-band { background: #f7f6f3; border-top: 1px solid var(--pl-ochre); padding: 56px 0 64px; }
body.t-palet .sc-contact-band .sc-contact-sub { font-size: 13.5px; letter-spacing: 0.02em; margin: 0 0 24px; }

@media (max-width: 900px) {
  body.t-palet .sc-hero { min-height: 82vh; }
  body.t-palet .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
  body.t-palet .sc-about-split { padding: 68px 20px; }
  body.t-palet .sc-about-overlay { min-height: 58vh; padding: 11vh 20px; }
}

/* NIGHT — the chalk goes to the colour of the shop with the lights off and the
   ochre is lifted to what a raw sienna throws back under a bench lamp, so the
   rand figures and the hero outline still carry. The pigment photography stays
   the only saturated thing on the page in both themes, which is the point. */
html[data-theme="dark"] body.t-palet {
  background: #131211;
  color: #ddd8cf;
  --pl-ochre: #d79a4e;
  --pl-ochre-hi: #e5ae66;
  --bg-flat: #131211;
  --header-bg: #131211;
  --surface: #131211;
  --surface-2: #1a1917;
  --line: #2a2825;
  --line-strong: #3d3a35;
  --heading: #f4f1ea;
  --text: #ddd8cf;
  --muted: #8a847a;
}
html[data-theme="dark"] body.t-palet .sf-head, html[data-theme="dark"] body.t-palet .sf-header,
html[data-theme="dark"] body.t-palet .sf-foot, html[data-theme="dark"] body.t-palet .sf-footer,
html[data-theme="dark"] body.t-palet .sf-cats { background: #131211; border-color: #2a2825; }
html[data-theme="dark"] body.t-palet .btn.brand { background: var(--pl-ochre); color: #131211; }
html[data-theme="dark"] body.t-palet .btn.brand:hover { background: var(--pl-ochre-hi); color: #131211; }
html[data-theme="dark"] body.t-palet .sc-contact-band { background: #131211; }