/* ---- klos (Klos — Sewing machines, overlockers & servicing 221) ------------
   THE STRUCTURAL MOVE: THE PAGE PINCHES. Full-bleed bands — a whole-window
   three-frame stage, six machines each given a band of their own, and one wide
   plate to close — alternate with CONTAINED blocks that give up the page width
   and sit on a lifted panel, so the bleed → contain → bleed rhythm reads before
   you have looked at a single photograph. The catalogue is ONE column, never a
   tile wall: a serviced machine is a capital object and gets a band to itself.
   Warm paper by day, near-black tungsten by night, and a single oxblood — the
   japanned red off an old machine head, not brass — rationed to three jobs in
   both: the controls, the hairlines and the rand figure. -------------------- */
body.t-klos {
  background: #f4f0e8;
  color: #3a352c;
  --kl-ox: #7e2b2b;
  --kl-ox-hi: #9a3838;
  --kl-ox-ink: #7e2b2b;
  --kl-panel: #e8e1d4;
  --kl-rule: rgba(126, 43, 43, 0.3);
  --bg-flat: #f4f0e8;
  --header-bg: #f4f0e8;
  --surface: #ece6da;
  --surface-2: #e4dccc;
  --line: #ddd4c2;
  --line-strong: #c4b7a0;
  --heading: #16130f;
  --text: #3a352c;
  --muted: #6f6656;
  --radius: 0;
  --shadow: none;
}

/* a flat bar carrying the name hard left — the stage starts under it, never
   behind it, so nothing ever floats across the photograph */
body.t-klos .sf-head, body.t-klos .sf-header,
body.t-klos .sf-foot, body.t-klos .sf-footer, body.t-klos .sf-cats {
  background: #efe9dd; border-color: #ddd4c2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-klos .sf-name, body.t-klos .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* OXBLOOD 1 of 3 — every control is a flat slab with no edge on it */
body.t-klos .btn.brand { background: var(--kl-ox); border: 0; color: #f7f2e9; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-klos .btn.brand:hover { background: var(--kl-ox-hi); color: #f7f2e9; }

/* BLEED ONE — the whole window, three frames cross-fading, type dead centre */
body.t-klos .sc-hero { min-height: 100vh; padding: 96px 24px; }
body.t-klos .sc-hero h1 { font-weight: 800; font-size: clamp(34px, 6.6vw, 76px); line-height: 0.98; letter-spacing: -0.025em; }
body.t-klos .sc-hero p { text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px, 1.5vw, 13px); line-height: 1.9; margin: 0 0 34px; }

/* OXBLOOD 2 of 3 — the section titles, tracked small and never large */
body.t-klos .sc-h2 { color: var(--kl-ox-ink); text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; margin-bottom: 26px; }

/* CONTAIN ONE — the split block pulls in under the 1080 container and lands on
   a lifted panel, machine head square on the left, the shop story on the right */
body.t-klos .sc-about-split { max-width: 940px; margin: 92px auto; padding: 56px; gap: 46px; background: var(--kl-panel); grid-template-columns: 0.85fr 1.15fr; }
body.t-klos .sc-about-media img { aspect-ratio: 1 / 1; }
body.t-klos .sc-about-copy p, body.t-klos .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* BLEED TWO — the catalogue drops to one column and the panel ground is taken
   away, so each machine is a full-width band on the page floor with nothing but
   an oxblood hairline between it and the next one */
body.t-klos .sc-show-grid { grid-template-columns: 1fr; }
body.t-klos .sc-show-item, body.t-klos .sc-show-item:nth-child(4n + 2),
body.t-klos .sc-show-item:nth-child(4n + 3) { background: transparent; border-top: 1px solid var(--kl-rule); }
body.t-klos .sc-show-inner { max-width: 1040px; margin: 0 auto; min-height: 0; padding: 62px 24px 70px; }
body.t-klos .sc-show-media img { max-width: 54%; max-height: 440px; }
body.t-klos .sc-show-rule { background: var(--kl-ox); opacity: 1; width: 52px; }
/* OXBLOOD 3 of 3 — the rand figure, and it is red nowhere else on the page */
body.t-klos .sc-show-price { color: var(--kl-ox-ink); font-weight: 700; font-size: clamp(20px, 2vw, 26px); }

/* CONTAIN TWO — the breath: the narrowest block on the site, no picture in it
   at all, and more air around it than anything else gets */
body.t-klos .sc-richtext { max-width: 760px; margin: 0 auto 92px; padding: 74px 54px 82px; background: var(--kl-panel); }

/* BLEED THREE — welded to its neighbours, no margin either side of it */
body.t-klos .sc-banner { min-height: 62vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 72px 24px; }

/* the close pulls in one last time, over an oxblood hairline */
body.t-klos .sc-contact-split { max-width: 940px; margin: 0 auto; padding: 76px 24px 92px; border-top: 1px solid var(--kl-rule); }

@media (max-width: 900px) {
  body.t-klos .sc-hero { min-height: 84vh; }
  body.t-klos .sc-about-split { margin: 54px auto; padding: 32px 24px; grid-template-columns: 1fr; }
  body.t-klos .sc-richtext { padding: 50px 26px 56px; margin-bottom: 58px; }
  body.t-klos .sc-show-media img { max-width: 72%; max-height: 250px; }
}

/* NIGHT — the invert the whole theme was built around: paper drops to near-black
   tungsten, the type goes bone white, and the panel becomes the lifted charcoal
   slab that makes the pinch read in the dark exactly as it does on paper. The
   oxblood is the constant — lifted just enough that the hairlines, the buttons
   and the rand figure still carry once the photographs are the brightest thing
   in the room. */
html[data-theme="dark"] body.t-klos {
  background: #0d0c0b;
  color: #cdc5b8;
  --kl-ox: #8f3232;
  --kl-ox-hi: #a84240;
  --kl-ox-ink: #c25e59;
  --kl-panel: #171512;
  --kl-rule: rgba(194, 94, 89, 0.32);
  --bg-flat: #0d0c0b;
  --header-bg: #0d0c0b;
  --surface: #141210;
  --surface-2: #1b1815;
  --line: #241f1c;
  --line-strong: #3a322c;
  --heading: #f4efe4;
  --text: #cdc5b8;
  --muted: #8b8175;
}
html[data-theme="dark"] body.t-klos .sf-head, html[data-theme="dark"] body.t-klos .sf-header,
html[data-theme="dark"] body.t-klos .sf-foot, html[data-theme="dark"] body.t-klos .sf-footer,
html[data-theme="dark"] body.t-klos .sf-cats { background: #0d0c0b; border-color: #241f1c; }
html[data-theme="dark"] body.t-klos .btn.brand { color: #f7ece6; }
html[data-theme="dark"] body.t-klos .btn.brand:hover { color: #f7ece6; }