/* ============================== KIAAT ==============================
   THE STRUCTURAL MOVE: the opening screen is not a photograph with words
   over it — it is a two-column gallery wall. The four hero slides stop
   cross-fading and lay themselves out 2x2 filled column-first, so the LEFT
   half bleeds to the viewport edge while the RIGHT half prints its two
   photographs small inside a generous bone-white margin. That bleeding-half
   against breathing-half tension is the whole template, and the copy is set
   small and low inside the left half so it never lands on the boxed prints.
   Everything under it is drawn with hairlines and nothing else: no cards, no
   fills, no shadows, no radius, and one linseed-oil brown spent only on a
   hovered control and a hovered price. Nothing in .sf-header is written at
   all beyond its ground colour — no order, no position, no reordering. */
body.t-kiaat {
  background: #f7f5f1;
  color: #141414;
  --kia-bone: #f7f5f1;
  --kia-linseed: #6b4a2f;
  --bg-flat: #f7f5f1;
  --header-bg: #f7f5f1;
  --surface: #f7f5f1;
  --surface-2: #eceae4;
  --line: #dcd8d0;
  --line-strong: #141414;
  --heading: #141414;
  --text: #141414;
  --muted: #6c6a66;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar with one hairline under it — ground colour only, so the
   header keeps every item exactly where the platform puts it */
body.t-kiaat .sf-head, body.t-kiaat .sf-header,
body.t-kiaat .sf-foot, body.t-kiaat .sf-footer, body.t-kiaat .sf-cats {
  background: #f7f5f1; border-color: #dcd8d0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* controls are flat ink slabs with no edge on them; the linseed brown is the
   only colour the interface owns and it turns up on hover, nowhere else */
body.t-kiaat .btn.brand { background: #141414; color: #f7f5f1; border: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; padding: 15px 32px; }
body.t-kiaat .btn.brand:hover { background: var(--kia-linseed); color: #f7f5f1; }

/* THE SPLIT — the slide stack becomes a 2x2 grid filled column-first, so
   slides one and two hold the left half and three and four the right. The
   wrapper paints bone underneath, and that bone IS the right half's margin. */
body.t-kiaat .sc-hero { min-height: 100vh; padding: 0 0 16vh; }
body.t-kiaat .sc-hero-slides { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-auto-flow: column; background: var(--kia-bone); }
body.t-kiaat .sc-hero-slide { position: static; opacity: 1; transition: none; }
body.t-kiaat .sc-hero-slide:nth-child(n + 3) { padding: 6vh 13vw; background-origin: content-box; background-clip: content-box; }

/* copy small and low inside the bleeding left half, held to a third of the
   window so it can never stray across the boxed prints on the right */
body.t-kiaat .sc-hero-left .sc-hero-inner { max-width: min(34vw, 420px); margin-left: clamp(20px, 4.5vw, 76px); }
body.t-kiaat .sc-hero h1 { font-size: clamp(19px, 2.3vw, 29px); font-weight: 500; line-height: 1.22; letter-spacing: -0.005em; margin-bottom: 10px; }
body.t-kiaat .sc-hero p { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
body.t-kiaat .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: rgba(247, 245, 241, 0.9); padding: 13px 26px; }

/* every heading on the page is a tracked caption over a hairline, never a
   display line — the pictures are meant to do the talking */
body.t-kiaat .sc-h2 { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); padding-bottom: 13px; border-bottom: 1px solid var(--line); margin: 0 0 clamp(26px, 3.4vw, 44px); }

/* four gapped tiles carrying their labels over the picture, and no heading
   above them at all */
body.t-kiaat .sc-strip, body.t-kiaat .sc-masonry { padding-top: clamp(60px, 8vw, 104px); }
body.t-kiaat .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
body.t-kiaat .sc-strip-card { position: relative; text-align: left; }
body.t-kiaat .sc-strip-img { aspect-ratio: 3 / 4; border: 0; background: var(--surface-2); }
body.t-kiaat .sc-strip-label { position: absolute; left: 14px; bottom: 13px; margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #f7f5f1; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72); }

/* the wall: four columns on a three-step rhythm, so a 2.4 m slab and a one
   litre tin hang together without either being resized to match the other.
   Nothing zooms on hover anywhere — these are prints, not cards. */
body.t-kiaat .sc-mas-grid { column-count: 4; column-gap: clamp(14px, 2vw, 28px); }
body.t-kiaat .sc-mas-item:nth-child(3n + 1) .sc-mas-media img { aspect-ratio: 2 / 3; }
body.t-kiaat .sc-mas-item:nth-child(3n + 3) .sc-mas-media img { aspect-ratio: 5 / 4; }
body.t-kiaat .sc-mas-cat { color: var(--muted); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; margin-top: 13px; }
body.t-kiaat .sc-mas-item:hover .sc-mas-p { color: var(--kia-linseed); }
body.t-kiaat .sc-strip-card:hover .sc-strip-img img, body.t-kiaat .sc-mas-item:hover .sc-mas-media img { transform: none; }

/* about: the photograph takes the larger half and runs to the container edge,
   the type is held to a narrow measure in the smaller one, and the band is
   mostly white space — the hero's asymmetry said quietly a second time */
body.t-kiaat .sc-about-split { grid-template-columns: 1.15fr 0.85fr; gap: clamp(34px, 6vw, 84px); padding: clamp(72px, 9vw, 124px) 20px; }
body.t-kiaat .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-kiaat .sc-about-copy p { color: var(--text); font-size: 15px; line-height: 2.05; max-width: 32ch; }

/* the one wide photograph on the page after the opening screen */
body.t-kiaat .sc-banner { margin: clamp(66px, 8vw, 112px) calc(50% - 50vw) 0; min-height: 58vh; display: flex; align-items: center; justify-content: center; }

/* contact: hairline underlines instead of boxed fields, so the last band is
   as quiet as everything above it */
body.t-kiaat .sc-contact-split { padding: clamp(70px, 9vw, 118px) 20px clamp(80px, 10vw, 126px); gap: clamp(34px, 6vw, 84px); }
body.t-kiaat .sc-contact-lead p { color: var(--muted); font-size: 14px; line-height: 2.1; white-space: pre-line; }
body.t-kiaat .sc-field input, body.t-kiaat .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 8px 0 10px; }

@media (max-width: 900px) {
  body.t-kiaat .sc-hero { min-height: 86vh; padding: 0 20px 10vh; }
  body.t-kiaat .sc-hero-left .sc-hero-inner { max-width: none; margin-left: 0; }
  body.t-kiaat .sc-hero-slide:nth-child(n + 3) { padding: 4vh 9vw; }
  body.t-kiaat .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the gallery moves into a dark room. The bone ground and the bone
   margin around the boxed right half both drop to near-black together, the
   ink turns to bone, and the linseed brown lifts to a lit tan so a hovered
   price still reads. The photographs become the only lit things on the page. */
html[data-theme="dark"] body.t-kiaat {
  background: #141414;
  color: #ece9e3;
  --kia-bone: #141414;
  --kia-linseed: #b3835a;
  --bg-flat: #141414;
  --header-bg: #141414;
  --surface: #141414;
  --surface-2: #1d1c19;
  --line: #2b2926;
  --line-strong: #56534c;
  --heading: #ece9e3;
  --text: #ece9e3;
  --muted: #928d85;
  --radius: 0;
  --shadow: none;
}
html[data-theme="dark"] body.t-kiaat .sf-head, html[data-theme="dark"] body.t-kiaat .sf-header,
html[data-theme="dark"] body.t-kiaat .sf-foot, html[data-theme="dark"] body.t-kiaat .sf-footer,
html[data-theme="dark"] body.t-kiaat .sf-cats { background: #141414; border-color: #2b2926; }
html[data-theme="dark"] body.t-kiaat .btn.brand { background: #ece9e3; color: #141414; }
html[data-theme="dark"] body.t-kiaat .btn.brand:hover { background: var(--kia-linseed); color: #141414; }