/* ---- riempie (Riempie — Chairs & seating 77) --------------------------------
   THE STRUCTURAL MOVE: the page pinches, then breathes, twice over. A
   full-viewport photograph runs straight into the narrowest column we set
   anywhere (480px), the gallery reopens wide, and the two strips are
   deliberately different densities — four near-typographic detail tiles with
   the picture shrunk to a chip, then a tight wall of rooms low down. The two
   are told apart structurally, not by class: a row with a fifth card is the
   wall, a row without one is the detail band. No hue is defined in this whole
   block; every colour on the finished page comes out of the goods. */
body.t-riempie {
  background: #f4f4f4;
  color: #141414;
  --radius: 0;
  --header-bg: #f4f4f4;
  --surface: #fafafa;
  --surface-2: #eaeaea;
  --line: #dadada;
  --line-strong: #b4b4b4;
  --heading: #101010;
  --text: #141414;
  --muted: #6e6e6e;
}
/* the band scrolls away with the hero and never comes back */
body.t-riempie .sf-header, body.t-riempie .sf-head, body.t-riempie .sf-foot, body.t-riempie .sf-footer {
  position: static; background: #f4f4f4; border-color: #dadada; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* wordmark centred, the four-item menu dropped onto a second row beneath it */
body.t-riempie .sf-header .container { row-gap: 10px; flex-wrap: wrap; }
/* nothing is sticky, so an anchor offset would only open a dead gap */
body.t-riempie .sc-hero, body.t-riempie .sc-richtext, body.t-riempie .sc-about-split,
body.t-riempie .sc-strip, body.t-riempie .sc-contact { scroll-margin-top: 0; }

/* one chair holds the whole first screen; the copy sits left with air round it */
body.t-riempie .sc-hero { min-height: 94vh; padding: clamp(60px, 12vh, 150px) clamp(24px, 8vw, 108px); }
body.t-riempie .sc-hero h1 { font-weight: 500; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
body.t-riempie .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; color: var(--heading); margin-bottom: 34px; }

/* THE PINCH: the widest block on the page followed by the narrowest */
body.t-riempie .sc-richtext { max-width: 480px; padding: 104px 20px 92px; }
body.t-riempie .sc-richtext p, body.t-riempie .sc-about-copy p { font-size: 16px; line-height: 2; color: #3a3a3a; }

/* and it reopens: six portrait tiles, gapped, the name and price underneath */
body.t-riempie .sc-show-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 34px); max-width: 1180px; margin: 0 auto; padding: 0 20px 46px; }
body.t-riempie .sc-show-item, body.t-riempie .sc-show-inner { background: transparent; padding: 0; min-height: 0; align-items: flex-start; text-align: left; }
body.t-riempie .sc-show-media { order: -1; padding: 0; }
body.t-riempie .sc-show-media img, body.t-riempie .sc-about-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; }
body.t-riempie .sc-show-cat, body.t-riempie .sc-strip-row:has(> :nth-child(5)) .sc-strip-label {
  display: block; margin-top: 14px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: #6e6e6e;
}
body.t-riempie .sc-show-t, body.t-riempie .sc-show-price { font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; margin: 6px 0 16px; font-variant-numeric: tabular-nums; }

/* the two strips share one band rhythm with the split, and nothing else */
body.t-riempie .sc-strip, body.t-riempie .sc-about-split { padding: 88px 20px 76px; }
/* SPARSE — four detail tiles, nearly all type: the photograph shrinks to a chip
   above a hairline. Add a fifth card and the row becomes the wall below. */
body.t-riempie .sc-strip-row:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3.4vw, 44px); }
body.t-riempie .sc-strip-row:not(:has(> :nth-child(5))) .sc-strip-card { border-top: 1px solid var(--line); padding-top: 20px; }
body.t-riempie .sc-strip-row:not(:has(> :nth-child(5))) .sc-strip-img { width: 54px; margin: 0 auto 16px; border: 0; background: transparent; }
/* DENSE — the wall: rooms butted up against each other, label as a footnote */
body.t-riempie .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.t-riempie .sc-strip-row:has(> :nth-child(5)) .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }

/* the one row on the page where a photograph and a body of text share the line */
body.t-riempie .sc-about-split { grid-template-columns: 2fr 3fr; gap: clamp(28px, 5vw, 70px); align-items: start; }

body.t-riempie .sc-banner { min-height: 40vh; display: flex; align-items: center; justify-content: center; margin: 72px calc(50% - 50vw) 0; padding: 64px 28px; }
/* the page narrows a second time, and stops */
body.t-riempie .sc-contact { max-width: 460px; padding: 118px 20px 108px; }
body.t-riempie .sc-contact-form .btn { align-self: center; margin-top: 14px; }
body.t-riempie .btn.brand { background: #141414; color: #f4f4f4; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; padding: 14px 30px; }
body.t-riempie .btn.brand:hover { background: #4a4a4a; }

@media (max-width: 900px) {
  body.t-riempie .sc-show-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-riempie .sc-strip-row:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the same shed after dark: chalk goes to charcoal, the type inverts,
   and the black slab becomes a bone one so the only button on the page still
   reads as the heaviest thing in the room. Still no hue anywhere. */
html[data-theme="dark"] body.t-riempie {
  background: #121212;
  color: #cfcfcf;
  --header-bg: #121212;
  --surface: #191919;
  --surface-2: #1e1e1e;
  --line: #2c2c2c;
  --line-strong: #444444;
  --heading: #f2f2f2;
  --text: #cfcfcf;
  --muted: #8a8a8a;
}
html[data-theme="dark"] body.t-riempie .sf-header, html[data-theme="dark"] body.t-riempie .sf-head,
html[data-theme="dark"] body.t-riempie .sf-foot, html[data-theme="dark"] body.t-riempie .sf-footer { background: #121212; border-color: #2c2c2c; }
html[data-theme="dark"] body.t-riempie .sc-richtext p, html[data-theme="dark"] body.t-riempie .sc-about-copy p,
html[data-theme="dark"] body.t-riempie .sc-contact-sub { color: #a8a8a8; }
html[data-theme="dark"] body.t-riempie .sc-show-cat,
html[data-theme="dark"] body.t-riempie .sc-strip-row:has(> :nth-child(5)) .sc-strip-label { color: #8a8a8a; }
html[data-theme="dark"] body.t-riempie .sc-field input, html[data-theme="dark"] body.t-riempie .sc-field textarea { background: #191919; border-color: #2c2c2c; color: #f2f2f2; }
html[data-theme="dark"] body.t-riempie .btn.brand { background: #ededed; color: #121212; }
html[data-theme="dark"] body.t-riempie .btn.brand:hover { background: #bdbdbd; }