/* ---- muur (Muur — Hand-screened wallpaper & wall panels 211) ---------------
   THE STRUCTURAL MOVE: the catalogue refuses the staggered column flow. Both
   masonry passes are re-set as a two-column grid running a FIVE-tile cycle —
   one wide tile alone on its row, then two square pairs — so the wall reads
   wide / pair / pair, wide / pair, and at eight products every single row
   fills. :nth-child is safe here because every child of .sc-mas-grid is a
   .sc-mas-item; no :nth-of-type is used anywhere, since the hero is always the
   first section element. Around the wall: no hero in the usual sense, only a
   letterbox band with the copy held in the left third, so the first wide tile
   is already breaking the fold. Chalk paper ground, true ink type, hard square
   edges, no shadows — and one dusty terracotta rationed to exactly three homes
   and no others: the hero outline, the rand figure, and the hairline drawn
   under every tile title. Nothing else on the page is allowed colour. */
body.t-muur {
  background: #f7f5f1;
  color: #14140f;
  --mu-clay: #b4593f;
  --bg-flat: #f7f5f1;
  --header-bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #eeebe4;
  --line: #e0dcd2;
  --line-strong: #c6c1b4;
  --heading: #000000;
  --text: #14140f;
  --muted: #77746a;
  --radius: 0;
  --shadow: none;
}

/* flat chalk bars under one hairline — no blur, no glass, nothing rounded */
body.t-muur .sf-header, body.t-muur .sf-head, body.t-muur .sf-footer,
body.t-muur .sf-foot, body.t-muur .sf-cats {
  background: #f7f5f1; border-color: #e0dcd2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* the reference's tiny four-item micro-menu, honoured as TYPE only — small,
   wide-tracked, plain. Nothing here is moved, stacked or repositioned. */
body.t-muur .sf-name, body.t-muur .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11.5px; font-weight: 600; }

/* flat ink slab, no border of its own */
body.t-muur .btn.brand { background: #14140f; border-color: #14140f; color: #f7f5f1; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; padding: 15px 30px; }
body.t-muur .btn.brand:hover { background: var(--mu-clay); border-color: var(--mu-clay); opacity: 1; }
/* CLAY 1 of 3 — the hero outline, the only bordered control on the page */
body.t-muur .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--mu-clay); color: #ffffff; }
body.t-muur .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--mu-clay); color: #ffffff; }

/* THE COLD OPEN — a letterbox band, never a full-viewport plate: short enough
   that the first wide tile of the wall crests the fold, copy in the left third */
body.t-muur .sc-hero { min-height: 40vh; padding: clamp(52px, 9vh, 96px) clamp(20px, 6vw, 76px); }
body.t-muur .sc-hero h1 { max-width: 460px; font-size: clamp(27px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; text-shadow: none; margin: 0 0 14px; }
body.t-muur .sc-hero p { font-size: 14.5px; letter-spacing: 0.01em; text-shadow: none; margin: 0 0 26px; }

/* headings are labels, not chapters — the pictures carry the page */
body.t-muur .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; color: var(--muted); text-align: left; margin: 0 0 clamp(22px, 3vh, 34px); }

/* THE WALL — column flow switched off, two columns, five-tile cycle, gapped */
body.t-muur .sc-mas-grid { display: grid; column-count: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 5vh, 54px) clamp(16px, 2.2vw, 30px); }
body.t-muur .sc-mas-item { margin: 0; }
body.t-muur .sc-mas-media img { aspect-ratio: 1; }
body.t-muur .sc-mas-item:nth-child(5n + 1) { grid-column: span 2; }
body.t-muur .sc-mas-item:nth-child(5n + 1) .sc-mas-media img { aspect-ratio: 16 / 9; }

/* caption UNDER the frame, never over it and never beside it */
body.t-muur .sc-mas-cat, body.t-muur .sc-strip-label { display: block; margin-top: 14px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
/* CLAY 2 of 3 — the hairline ruled under every tile title */
body.t-muur .sc-mas-t { font-weight: 500; font-size: 15px; letter-spacing: 0.005em; padding-bottom: 9px; border-bottom: 1px solid var(--mu-clay); }
/* CLAY 3 of 3 — the rand figure, on the wall and on the price grid both */
body.t-muur .sc-mas-p, body.t-muur .product-card .p { margin-top: 9px; color: var(--mu-clay); font-weight: 600; font-size: 14px; }

/* the one first-person pause between the two passes — a picture and four plain
   sentences, held to the top so it reads as a break in the grid, not a chapter */
body.t-muur .sc-about-split { grid-template-columns: 0.85fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(56px, 8vh, 92px) 20px; align-items: start; }

/* six small tiles across one line, the word under the frame */
body.t-muur .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }

/* THE CLOSE — one ink band, the only place the chalk ground gives out */
body.t-muur .sc-contact-band { background: #14140f; padding: clamp(70px, 10vh, 110px) 0 clamp(78px, 11vh, 120px); }
body.t-muur .sc-contact-band .sc-h2 { color: #f7f5f1; font-size: clamp(21px, 2.9vw, 31px); letter-spacing: -0.015em; text-transform: none; font-weight: 500; text-align: center; }
body.t-muur .sc-contact-band .sc-contact-sub, body.t-muur .sc-contact-band .sc-field label { color: #cfcabd; }
body.t-muur .sc-contact-band .sc-field input, body.t-muur .sc-contact-band .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid #3d3b32; color: #f7f5f1; padding: 11px 2px; }
body.t-muur .sc-contact-band .btn.brand { background: #f7f5f1; border-color: #f7f5f1; color: #14140f; }
/* three fields and no more — the only measurement worth asking for up front */
body.t-muur .sc-contact-band .sc-field label[for="sc-msg"] { font-size: 0; }
body.t-muur .sc-contact-band .sc-field label[for="sc-msg"]::after { content: 'Roughly how big is the wall?'; font-size: 13px; }

@media (max-width: 860px) {
  body.t-muur .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-muur .sc-mas-grid { gap: 28px 12px; }
}
@media (max-width: 560px) {
  body.t-muur .sc-mas-grid { grid-template-columns: minmax(0, 1fr); }
  body.t-muur .sc-mas-item:nth-child(5n + 1) { grid-column: span 1; }
}

/* NIGHT — the chalk goes to wet ink, the clay lifts two stops so the rand
   figures and the title rules still carry against it, and the closing band
   drops BELOW the ground instead of rising above it. */
html[data-theme="dark"] body.t-muur {
  background: #121210;
  color: #c8c5bb;
  --mu-clay: #d98063;
  --bg-flat: #121210;
  --header-bg: #121210;
  --surface: #1a1a17;
  --surface-2: #20201c;
  --line: #2a2a25;
  --line-strong: #3b3b34;
  --heading: #f7f5f1;
  --text: #c8c5bb;
  --muted: #8b887e;
}
html[data-theme="dark"] body.t-muur .sf-header, html[data-theme="dark"] body.t-muur .sf-head,
html[data-theme="dark"] body.t-muur .sf-footer, html[data-theme="dark"] body.t-muur .sf-foot,
html[data-theme="dark"] body.t-muur .sf-cats { background: #121210; border-color: #2a2a25; }
html[data-theme="dark"] body.t-muur .btn.brand { background: #f7f5f1; border-color: #f7f5f1; color: #121210; }
html[data-theme="dark"] body.t-muur .btn.brand:hover { background: var(--mu-clay); border-color: var(--mu-clay); color: #121210; }
html[data-theme="dark"] body.t-muur .product-card .ph { background: #efece5; }
html[data-theme="dark"] body.t-muur .sc-contact-band { background: #0a0a08; }