/* ---- rotang (Rotang — Cane furniture & rattan weaving 303) -----------------
   THE STRUCTURAL MOVE: THE PAGE CHANGES MEASURE FOUR TIMES AND NEVER DRAWS A
   RULE TO DO IT. A full-viewport three-frame cross-fade drops straight onto
   four room photographs welded wall to wall with NO container margin and NO
   gutter between them — each one's name and its link set below the picture on
   bare oat ground, never overlaid — and the page then pulls sharply back into
   a 1140-wide container and runs eight square tiles four across in two gapped
   rows that both fill. Under that it empties out completely: one narrow
   centred paragraph on the oat ground with no photograph in it at all, which
   is the widest-to-narrowest swing on the page. Everything is flat — no card,
   no border, no radius, no shadow — so the furniture photographs carry all the
   colour, and the single burnt sienna lands exactly twice per tile: on the
   rand figure and on the add-to-cart slab. Nothing here touches the header's
   order, position or alignment; only type, colour, size and background. ---- */
body.t-rotang {
  background: #f2ece0;
  color: #17150f;
  --rt-sienna: #b4531f;
  --rt-sienna-hi: #98430f;
  --bg-flat: #f2ece0;
  --header-bg: #f2ece0;
  --surface: #f2ece0;
  --surface-2: #ebe3d4;
  --line: #ded4c2;
  --line-strong: #c6b9a2;
  --heading: #17150f;
  --text: #17150f;
  --muted: #857b6c;
  --radius: 0;
  --shadow: none;
}

/* a flat oat bar the same colour as the ground, so the stage begins beneath
   the header instead of behind it. Type, colour and tracking only. */
body.t-rotang .sf-head, body.t-rotang .sf-header,
body.t-rotang .sf-foot, body.t-rotang .sf-footer, body.t-rotang .sf-cats {
  background: #f2ece0; border-color: #ded4c2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-rotang .sf-name, body.t-rotang .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* SIENNA 1 of 2 — every control on the page is one flat burnt-sienna slab with
   no edge on it, and nothing else in the chrome carries colour at all */
body.t-rotang .btn.brand { background: var(--rt-sienna); border: 0; box-shadow: none; color: #fdf9f2; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 15px 32px; }
body.t-rotang .btn.brand:hover { background: var(--rt-sienna-hi); color: #ffffff; }

/* THE STAGE — the whole first screen and nothing else above the fold: three
   frames cross-fading, one line dead centre on the vertical midline, one slab */
body.t-rotang .sc-hero { min-height: 100vh; padding: 110px 20px; }
body.t-rotang .sc-hero h1 { font-size: clamp(30px, 4.4vw, 58px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 34px; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4); }

/* THE ROOM ROW — four photographs run the full width of the window with no
   container margin and no gutter anywhere between them, welded into one band
   directly under the stage. Nothing is overlaid on the pictures. */
body.t-rotang .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-rotang .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-rotang .sc-strip-img { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: #ebe3d4; }
body.t-rotang .sc-strip-card { text-align: left; }
/* the caption sits BELOW the photograph on bare oat ground — the room name,
   then the link under it, exactly the way the reference sets its featured
   cards instead of printing type over the picture */
body.t-rotang .sc-strip-label { margin: 0; padding: 20px 22px 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.012em; color: var(--heading); }
body.t-rotang .sc-strip-label::after { content: 'See the pieces'; display: block; margin-top: 9px; padding-bottom: 34px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* THE PULL-BACK — the page snaps out of full bleed into a narrow centred
   container with wide side margins, and runs eight square tiles four across in
   two rows that both fill. Flat ground, no card, no frame, no shadow. */
body.t-rotang .sc-buygrid { max-width: 1140px; padding: clamp(74px, 8vw, 118px) 20px clamp(78px, 8vw, 122px); }
body.t-rotang .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 30px; }
body.t-rotang .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-rotang .sc-buy-media img { aspect-ratio: 1 / 1; }
/* category tiny and tracked open in mid-brown grey — NOT in the accent, so the
   sienna is spent only on the money and the slab, twice per tile and no more */
body.t-rotang .sc-buy-cat { margin-top: 18px; color: var(--muted); font-size: 10px; letter-spacing: 0.22em; font-weight: 600; }
body.t-rotang .sc-buy-t { margin-top: 9px; font-size: 15.5px; font-weight: 500; letter-spacing: -0.005em; }
body.t-rotang .sc-buy-p { margin-top: 8px; color: var(--rt-sienna); font-size: 15px; font-weight: 700; }
body.t-rotang .sc-buy-form, body.t-rotang a.sc-buy-btn { margin-top: 16px; }

/* THE EMPTYING OUT — the widest-to-narrowest swing on the page: straight off a
   four-wide priced grid into one 640px column of prose on bare ground, with no
   photograph, no panel and no rule anywhere near it */
body.t-rotang .sc-richtext { max-width: 640px; padding: clamp(80px, 9vw, 132px) 20px clamp(84px, 9vw, 136px); }
body.t-rotang .sc-richtext .sc-h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 500; letter-spacing: -0.025em; margin: 0 0 26px; }

/* the closing band — one line over the workroom, and a link with an underline
   instead of a slab, so the page ends quieter than it started */
body.t-rotang .sc-banner { padding: clamp(96px, 12vw, 168px) 20px; margin: 0; }
body.t-rotang .sc-banner .btn.brand { background: rgba(0, 0, 0, 0); color: #ffffff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55); padding: 5px 2px; letter-spacing: 0.24em; }

@media (max-width: 860px) {
  body.t-rotang .sc-hero { min-height: 82vh; }
  body.t-rotang .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-rotang .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}

/* NIGHT — the oat straw goes to the colour of the workroom after the roller
   door comes down, and the sienna is lifted to the warmer orange raw cane
   throws back under a work lamp, so the rand figure and the buy slab still
   carry. The four room photographs become the only lit things on the page. */
html[data-theme="dark"] body.t-rotang {
  background: #15130f;
  color: #ddd4c4;
  --rt-sienna: #d9784a;
  --rt-sienna-hi: #e78d60;
  --bg-flat: #15130f;
  --header-bg: #15130f;
  --surface: #15130f;
  --surface-2: #1c1a15;
  --line: #2a2721;
  --line-strong: #3d3931;
  --heading: #f2ebdd;
  --text: #ddd4c4;
  --muted: #8d8474;
}
html[data-theme="dark"] body.t-rotang .sf-head, html[data-theme="dark"] body.t-rotang .sf-header,
html[data-theme="dark"] body.t-rotang .sf-foot, html[data-theme="dark"] body.t-rotang .sf-footer,
html[data-theme="dark"] body.t-rotang .sf-cats { background: #15130f; border-color: #2a2721; }
html[data-theme="dark"] body.t-rotang .btn.brand { background: var(--rt-sienna); color: #17120d; }
html[data-theme="dark"] body.t-rotang .btn.brand:hover { background: var(--rt-sienna-hi); color: #17120d; }
html[data-theme="dark"] body.t-rotang .sc-banner .btn.brand { background: rgba(0, 0, 0, 0); color: #ffffff; }