/* ---- skuiling (Skuiling — Waterhole hides & limited-edition prints 295) -----
   THE ONE STRUCTURAL MOVE: a CONTAINED letterbox masthead — inside the page
   gutters, air above and below, nowhere near full-viewport — and then the page
   gives itself up entirely to a full-bleed MIXED-ASPECT wall. True 0.68
   portraits alternate with 1.55 landscapes at a 10px gutter, so with four
   columns every column carries one tall frame and one wide one and no two
   columns ever land level. The wall starts cold: no heading, no intro, no
   filter row. Bone paper, graphite ink, and one burnt amber — Limpopo dust at
   four in the afternoon — spent on exactly two things, the tile wash and the
   buy button. The price is the only word that survives outside the hover. */
body.t-skuiling {
  background: #f2efe9; color: #17161a;
  --radius: 0;
  --header-bg: #f2efe9;
  --surface: #f2efe9;
  --surface-2: #e9e5dd;
  --line: #ddd8ce;
  --line-strong: #c6bfb1;
  --heading: #17161a;
  --text: #17161a;
  --muted: #726d64;
}
body.t-skuiling .sf-header, body.t-skuiling .sf-footer { backdrop-filter: none; -webkit-backdrop-filter: none; background: #f2efe9; border-color: #ddd8ce; }
body.t-skuiling .btn.brand { background: #c2560f; color: #fdfbf7; box-shadow: none; font-weight: 600; letter-spacing: 0.04em; }
body.t-skuiling .btn.brand:hover { background: #a3470b; }

/* THE MASTHEAD — contained and letterboxed, roughly 2.9:1. It names the place
   and then gets out of the way of the pictures. */
body.t-skuiling .sc-hero { max-width: min(1180px, calc(100% - 40px)); margin: clamp(40px, 6vh, 84px) auto clamp(46px, 7vh, 96px); padding: clamp(34px, 5vw, 64px) 30px; min-height: clamp(240px, 30vw, 410px); }
body.t-skuiling .sc-hero h1 { font-size: clamp(24px, 3.4vw, 40px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; }
body.t-skuiling .sc-hero p { font-size: 15px; line-height: 1.65; max-width: 520px; margin: 0 auto 26px; }

/* THE WALL — edge to edge at a 10px gutter, and it opens with nothing said */
body.t-skuiling .sc-masonry { padding: 0 0 8px; }
body.t-skuiling .sc-masonry .sc-h2:empty { display: none; }
body.t-skuiling .sc-masonry .container { max-width: none; padding: 0 10px; }
body.t-skuiling .sc-mas-grid { column-count: 4; column-gap: 10px; }
body.t-skuiling .sc-mas-item { position: relative; margin: 0 0 10px; }
body.t-skuiling .sc-mas-item:hover .sc-mas-media img { transform: none; }
/* half tall, half wide, in an order that never repeats down a column */
body.t-skuiling .sc-mas-item .sc-mas-media img { aspect-ratio: 17 / 25; }
body.t-skuiling .sc-mas-item:nth-child(2) .sc-mas-media img,
body.t-skuiling .sc-mas-item:nth-child(3) .sc-mas-media img,
body.t-skuiling .sc-mas-item:nth-child(5) .sc-mas-media img,
body.t-skuiling .sc-mas-item:nth-child(8) .sc-mas-media img { aspect-ratio: 31 / 20; }
/* the amber wash — the only colour on the page apart from the buy button */
body.t-skuiling .sc-mas-media { position: relative; }
body.t-skuiling .sc-mas-media::after { content: ''; position: absolute; inset: 0; background: rgba(194, 86, 15, 0.6); opacity: 0; transition: opacity 0.25s ease; }
body.t-skuiling .sc-mas-cat, body.t-skuiling .sc-mas-t { position: absolute; left: 18px; right: 18px; margin: 0; z-index: 2; opacity: 0; transition: opacity 0.25s ease; color: #fdfbf7; text-align: left; }
body.t-skuiling .sc-mas-t { bottom: 62px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
body.t-skuiling .sc-mas-cat { bottom: 44px; font-size: 10.5px; letter-spacing: 0.22em; font-weight: 600; }
body.t-skuiling .sc-mas-item:hover .sc-mas-media::after, body.t-skuiling .sc-mas-item:hover .sc-mas-cat, body.t-skuiling .sc-mas-item:hover .sc-mas-t { opacity: 1; }
/* the price is the one word that stays out of the hover — and its 24px block
   (9px margin + 15px line) is exactly what the captions above are offset by */
body.t-skuiling .sc-mas-p { margin-top: 9px; font-size: 12px; line-height: 15px; letter-spacing: 0.04em; color: var(--muted); }

/* four small squares — the category line let out of the hover state, once */
body.t-skuiling .sc-strip { padding: 30px 20px 10px; }
body.t-skuiling .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 540px; margin: 0 auto; }
body.t-skuiling .sc-strip-label { margin-top: 9px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* the two quiet columns that close the page, both on the same narrow measure */
body.t-skuiling .sc-richtext, body.t-skuiling .sc-contact { max-width: 540px; }
body.t-skuiling .sc-richtext { padding: clamp(72px, 12vh, 140px) 20px clamp(24px, 4vh, 48px); }
body.t-skuiling .sc-contact { padding: clamp(64px, 10vh, 124px) 20px clamp(88px, 15vh, 168px); }
body.t-skuiling .sc-richtext .sc-h2, body.t-skuiling .sc-contact .sc-h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 16px; }

/* a phone has no pointer, so the wall halves and the names drop back under the
   frame in ink rather than sitting forever on an amber block */
@media (max-width: 900px) { body.t-skuiling .sc-mas-grid { column-count: 2; } }
@media (hover: none) {
  body.t-skuiling .sc-mas-cat, body.t-skuiling .sc-mas-t { position: static; opacity: 1; }
  body.t-skuiling .sc-mas-t { color: var(--heading); }
  body.t-skuiling .sc-mas-cat { color: var(--muted); }
}

/* NIGHT — the hide an hour before first light. The paper goes to wet graphite
   and the amber lifts to the colour the dust actually is with sun behind it. */
html[data-theme="dark"] body.t-skuiling {
  background: #131215; color: #e7e3da;
  --header-bg: #131215; --surface: #131215; --surface-2: #1c1b1f;
  --line: #2c2a30; --line-strong: #423f47; --heading: #f3efe7; --text: #e7e3da; --muted: #8b867c;
}
html[data-theme="dark"] body.t-skuiling .sf-header, html[data-theme="dark"] body.t-skuiling .sf-footer { background: #131215; border-color: #2c2a30; }
html[data-theme="dark"] body.t-skuiling .btn.brand { background: #d9772e; color: #131215; }
html[data-theme="dark"] body.t-skuiling .btn.brand:hover { background: #c2560f; }