/* ---- sluier (Sluier — Silk sleepwear & robes 299) --------------------------
   THE STRUCTURAL MOVE: THERE IS NO GRID. The catalogue is taken apart and laid
   out one garment to a full-width band — an enormous photograph pinned to one
   edge of the page and bleeding off it, with the name, the price and the buy
   control set small in the empty half opposite — and the bands mirror, left,
   right, left, so the eye is thrown across the page and back six times. A
   full-viewport three-image stage opens it, one bare statement band interrupts
   it, and the whole document sits on one oyster bone ground with a single
   dusty plum rationed to the buy control and the hero's hairline outline.
   Display type is very large and set at book weight; everything under it drops
   several sizes into tracked mid-grey caps, so all the saturation on the page
   comes off the photographs. nth-child appears only on .sc-show-item, where
   every sibling is a band; nothing here touches the header, the nav, or the
   order or position of a single item inside them. -------------------------- */
body.t-sluier {
  background: #f6f1ea;
  color: #2c2521;
  --sl-plum: #6b4a5a;
  --sl-plum-hi: #7d5768;
  --sl-band: #efe8df;
  --bg-flat: #f6f1ea;
  --header-bg: #f6f1ea;
  --surface: #f1ebe3;
  --surface-2: #efe8df;
  --line: #e4dcd2;
  --line-strong: #cabdaf;
  --heading: #171310;
  --text: #2c2521;
  --muted: #8a8079;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the page, so the stage begins beneath it
   rather than behind it. Colour, type and tracking only. */
body.t-sluier .sf-head, body.t-sluier .sf-header,
body.t-sluier .sf-foot, body.t-sluier .sf-footer, body.t-sluier .sf-cats {
  background: #f6f1ea; border-color: #e4dcd2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-sluier .sf-name, body.t-sluier .sf-navlink { text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; font-weight: 500; }

/* PLUM 1 of 2 — the buy control, a flat slab with no edge on it */
body.t-sluier .btn.brand { background: var(--sl-plum); border: 0; box-shadow: none; color: #f8f3ec; text-transform: uppercase; letter-spacing: 0.26em; font-size: 10px; font-weight: 600; padding: 15px 32px; }
body.t-sluier .btn.brand:hover { background: var(--sl-plum-hi); color: #ffffff; }

/* THE STAGE — the whole first screen, three photographs cross-fading, copy on
   the vertical midline: one very large heading at book weight and the sub
   dropped right down into a tracked kicker under it. PLUM 2 of 2 is the
   hairline the ghost button is drawn with, and the colour appears nowhere
   else on the page. */
body.t-sluier .sc-hero { min-height: 100vh; padding: 120px 24px; }
body.t-sluier .sc-hero h1 { font-size: clamp(38px, 7.4vw, 84px); font-weight: 400; line-height: 1.03; letter-spacing: -0.035em; margin: 0 0 26px; }
body.t-sluier .sc-hero p { text-transform: uppercase; letter-spacing: 0.34em; font-size: clamp(9.5px, 1.2vw, 11.5px); font-weight: 500; margin: 0 0 42px; }
body.t-sluier .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--sl-plum-hi); color: #fdf9f4; }
body.t-sluier .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--sl-plum); border-color: var(--sl-plum); color: #fdf9f4; }

/* every small label on the page is the same object: tracked caps in mid-grey,
   sitting several sizes below whatever it belongs to */
body.t-sluier .sc-h2, body.t-sluier .sc-show-cat { color: var(--muted); text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(9.5px, 1.2vw, 11px); font-weight: 600; }
body.t-sluier .sc-showcase > .container { padding: 112px 24px 56px; }

/* THE UNROLLED SLIDER — the catalogue drops to a single column and every panel
   ground is taken away, so each garment owns a full-width band of bare bone.
   The photograph is lifted out of the flow and pinned to the left edge of the
   band, which lets it run the full height and bleed off the page, and leaves
   the name and the price sitting one directly under the other in the empty
   half. No tile grid anywhere, which is the whole point. */
body.t-sluier .sc-show-grid { grid-template-columns: 1fr; }
body.t-sluier .sc-show-item,
body.t-sluier .sc-show-item:nth-child(4n + 2),
body.t-sluier .sc-show-item:nth-child(4n + 3) { background: transparent; position: relative; }
body.t-sluier .sc-show-media { position: absolute; top: 0; bottom: 0; left: 0; width: 54%; padding: 0; }
body.t-sluier .sc-show-media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
body.t-sluier .sc-show-inner { min-height: 82vh; align-items: flex-start; justify-content: center; text-align: left; padding: 9vh 6vw 9vh 62%; }

/* THE MIRROR — every second band throws the photograph to the other edge and
   the type back across the page, so the eye crosses six times on the way down */
body.t-sluier .sc-show-item:nth-child(even) .sc-show-media { left: auto; right: 0; }
body.t-sluier .sc-show-item:nth-child(even) .sc-show-inner { padding-left: 6vw; padding-right: 62%; }

body.t-sluier .sc-show-rule { display: none; }
body.t-sluier .sc-show-t { margin: 18px 0 0; font-size: clamp(21px, 2.5vw, 30px); font-weight: 400; text-transform: none; letter-spacing: -0.015em; }
body.t-sluier .sc-show-price { color: var(--muted); font-size: clamp(15px, 1.6vw, 19px); font-weight: 400; margin: 10px 0 30px; }

/* the statement band between the garments, and the atelier note over the
   workroom — the two places the page gives itself back to a photograph */
body.t-sluier .sc-banner { min-height: 78vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 84px 24px; }
body.t-sluier .sc-about-overlay { min-height: 74vh; display: flex; align-items: center; justify-content: center; padding: 104px 24px; }
body.t-sluier .sc-about-overlay p { font-size: 16px; line-height: 2.05; }

/* every large heading below the stage shares one voice: book weight, no caps,
   tight tracking — which is what separates them from the tracked grey labels */
body.t-sluier .sc-banner h2,
body.t-sluier .sc-about-overlay .sc-h2,
body.t-sluier .sc-contact-band .sc-h2 { font-size: clamp(22px, 3.4vw, 40px); font-weight: 400; line-height: 1.14; letter-spacing: -0.03em; text-transform: none; margin: 0 0 16px; }

/* one full-width strip at the foot, half a step deeper than the page */
body.t-sluier .sc-contact-band { background: var(--sl-band); border-top: 1px solid var(--line); padding: 96px 0 108px; }

@media (max-width: 900px) {
  body.t-sluier .sc-hero { min-height: 84vh; padding: 100px 20px; }
  body.t-sluier .sc-show-media { position: static; width: 100%; }
  body.t-sluier .sc-show-media img { height: auto; aspect-ratio: 4 / 5; }
  body.t-sluier .sc-show-inner,
  body.t-sluier .sc-show-item:nth-child(even) .sc-show-inner { min-height: 0; padding: 0 20px 62px; }
  body.t-sluier .sc-banner { min-height: 54vh; padding: 64px 20px; }
  body.t-sluier .sc-about-overlay { min-height: 0; padding: 72px 20px; }
}

/* NIGHT — the bone inverts to a warm near-black and the ink to bone, so the six
   photographs become the only lit things in the room and the empty half of every
   band goes properly dark. The plum lifts two stops, because at #6b4a5a the
   buy slab and the hero hairline both disappear against a black ground. */
html[data-theme="dark"] body.t-sluier {
  background: #14100e;
  color: #cfc5ba;
  --sl-plum: #8d6072;
  --sl-plum-hi: #a3738a;
  --sl-band: #1c1613;
  --bg-flat: #14100e;
  --header-bg: #14100e;
  --surface: #1a1512;
  --surface-2: #1c1613;
  --line: #2a221c;
  --line-strong: #43372e;
  --heading: #f4ede4;
  --text: #cfc5ba;
  --muted: #8f8479;
}
html[data-theme="dark"] body.t-sluier .sf-head, html[data-theme="dark"] body.t-sluier .sf-header,
html[data-theme="dark"] body.t-sluier .sf-foot, html[data-theme="dark"] body.t-sluier .sf-footer,
html[data-theme="dark"] body.t-sluier .sf-cats { background: #14100e; border-color: #2a221c; }
html[data-theme="dark"] body.t-sluier .btn.brand { color: #fbf5ef; }