/* ---- kleipot (Kleipot — Terracotta pots, urns & olive jars 318) ------------
   THE STRUCTURAL MOVE: THE GAPPED PLATE. Every band on the page is inset from
   the viewport by a hard 20px white gutter and held off its neighbour by a 10px
   white seam, so the photographs read as four large plates floating on a sheet
   rather than as sections butting edge to edge. Inside each plate the row is
   HALF EMPTY — the copy is capped at 50% and the other half is nothing but
   photograph — and the populated half alternates down the page: hero left, first
   banner right, second banner left, and the closing overlay right on a tighter
   41.5% column than the three above it. The two non-photographic bands (the
   shelf and the yard) are warm bone, so they still read as plates on the same
   sheet. One fired-clay ochre is rationed to the buy slab and the rand figure.
   nth-child appears nowhere, and nothing here touches the header, the nav, or
   the order or position of a single item inside them. -------------------- */
body.t-kleipot {
  background: #ffffff;
  color: #1a1714;
  --kp-ochre: #b5643c;
  --kp-ochre-hi: #c8744a;
  --kp-bone: #f7f3ed;
  --bg-flat: #ffffff;
  --header-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f3ed;
  --line: #e4dcd0;
  --line-strong: #cbbca8;
  --heading: #1a1714;
  --text: #1a1714;
  --muted: #7c7267;
  --radius: 0;
  --shadow: none;
}

/* a flat white bar the same colour as the sheet the plates sit on, so the first
   plate begins beneath the header rather than behind it. Colour, type and
   tracking only — never order, never position. */
body.t-kleipot .sf-head, body.t-kleipot .sf-header,
body.t-kleipot .sf-foot, body.t-kleipot .sf-footer, body.t-kleipot .sf-cats {
  background: #ffffff; border-color: #e4dcd0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kleipot .sf-name, body.t-kleipot .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 500; }

/* the ochre, first of two places it is allowed: a flat slab with no edge on it */
body.t-kleipot .btn.brand { background: var(--kp-ochre); border: 0; box-shadow: none; color: #fffaf5; text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; font-weight: 600; padding: 15px 30px; }
body.t-kleipot .btn.brand:hover { background: var(--kp-ochre-hi); color: #ffffff; }

/* THE GUTTER — 20px of white either side of every band and 10px between them
   (adjacent margins collapse to one seam, which is exactly the seam wanted) */
body.t-kleipot .sc-hero,
body.t-kleipot .sc-lookbook,
body.t-kleipot .sc-about-overlay,
body.t-kleipot .sc-contact-band { margin: 10px 20px; }
/* the banner breaks out of its container by default; it is re-inset to the same
   gutter instead of running the full 100vw */
body.t-kleipot .sc-banner { width: calc(100vw - 40px); max-width: calc(100vw - 40px); margin: 10px calc(50% - 50vw + 20px); }

/* the plates are TALL PADDED BANDS — even the first one, which is never a
   100vh screen */
body.t-kleipot .sc-hero,
body.t-kleipot .sc-banner,
body.t-kleipot .sc-about-overlay { padding: clamp(104px, 12vw, 186px) clamp(24px, 4.5vw, 62px) clamp(88px, 10vw, 152px); text-align: left; }

/* THE HALF-EMPTY COLUMN — copy to one half, photograph to the other. Hero left,
   first banner right; the second banner (the only .container standing after the
   shelf) throws it back to the left, and the closing overlay takes a tighter
   column still, the way the reference's fourth band does. */
body.t-kleipot .sc-hero-inner { max-width: 50%; }
body.t-kleipot .sc-banner-inner { max-width: 50%; margin-left: auto; margin-right: 0; }
body.t-kleipot #products ~ .container .sc-banner-inner { margin-left: 0; margin-right: auto; }
body.t-kleipot .sc-about-overlay-inner { max-width: 41.5%; margin-left: auto; margin-right: 0; text-align: left; }

/* one rhythm in all four plates: a large lowercase headline at book weight over
   no more than two lines of body, and nothing else */
body.t-kleipot .sc-hero h1,
body.t-kleipot .sc-banner h2,
body.t-kleipot .sc-about-overlay .sc-h2 { font-size: clamp(30px, 4.8vw, 62px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 20px; text-align: left; text-shadow: none; }
body.t-kleipot .sc-hero p,
body.t-kleipot .sc-banner p,
body.t-kleipot .sc-about-overlay p { font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.8; margin: 0 0 34px; max-width: 42ch; text-shadow: none; }

/* THE INTERRUPTION — the one commercial block in a page of photographs. The
   lookbook's alternating full-bleed rows are re-gridded into a three-across
   shelf on a warm bone plate; six pieces fill both rows exactly. */
body.t-kleipot .sc-lookbook { background: var(--kp-bone); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(20px, 2.6vw, 36px); padding: clamp(76px, 8vw, 120px) clamp(24px, 4.5vw, 62px) clamp(80px, 9vw, 128px); }
body.t-kleipot .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0 0 22px; }
body.t-kleipot .sc-look-row { display: block; }
body.t-kleipot .sc-look-copy { padding: 18px 0 0; }
body.t-kleipot .sc-h2, body.t-kleipot .sc-look-cat { color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: 0.26em; font-size: 10.5px; font-weight: 600; margin: 0; }
body.t-kleipot .sc-look-t { font-size: clamp(17px, 1.7vw, 21px); font-weight: 400; letter-spacing: -0.015em; margin: 10px 0 0; }
/* the ochre, second and last place: the rand figure */
body.t-kleipot .sc-look-p { color: var(--kp-ochre); font-weight: 600; font-size: 16px; margin: 16px 0 18px; }

/* the quiet band, last — bone, left-set and small, so the page's only form
   never becomes a big centred heading stack */
body.t-kleipot .sc-contact-band { background: var(--kp-bone); padding: clamp(78px, 8vw, 116px) 0 clamp(86px, 9vw, 128px); }
body.t-kleipot .sc-contact-band-inner { max-width: 540px; text-align: left; margin: 0 auto 0 clamp(4px, 3.3vw, 42px); }
body.t-kleipot .sc-contact-band .sc-h2 { color: var(--heading); font-size: clamp(22px, 2.6vw, 32px); font-weight: 400; letter-spacing: -0.02em; text-transform: none; margin: 0 0 10px; }

@media (max-width: 900px) {
  body.t-kleipot .sc-hero-inner,
  body.t-kleipot .sc-banner-inner,
  body.t-kleipot .sc-about-overlay-inner { max-width: none; margin-left: 0; margin-right: 0; }
  body.t-kleipot .sc-lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kleipot .sc-contact-band-inner { margin-left: 0; }
}

/* NIGHT — the sheet the plates float on goes to a warm near-black, which is the
   move that keeps the gutter reading as a gutter instead of vanishing; the two
   bone bands drop to a dark clay so they stay legible as plates, and the ochre
   lifts two stops because at #b5643c the buy slab and the price both sink. */
html[data-theme="dark"] body.t-kleipot {
  background: #131110;
  color: #ddd4c9;
  --kp-ochre: #cd7b4f;
  --kp-ochre-hi: #dd8f63;
  --kp-bone: #1c1917;
  --bg-flat: #131110;
  --header-bg: #131110;
  --surface: #1c1917;
  --surface-2: #1c1917;
  --line: #2e2926;
  --line-strong: #463f39;
  --heading: #f3ece2;
  --text: #ddd4c9;
  --muted: #8d8378;
}
html[data-theme="dark"] body.t-kleipot .sf-head, html[data-theme="dark"] body.t-kleipot .sf-header,
html[data-theme="dark"] body.t-kleipot .sf-foot, html[data-theme="dark"] body.t-kleipot .sf-footer,
html[data-theme="dark"] body.t-kleipot .sf-cats { background: #131110; border-color: #2e2926; }
html[data-theme="dark"] body.t-kleipot .btn.brand { background: var(--kp-ochre); color: #16110d; }
html[data-theme="dark"] body.t-kleipot .btn.brand:hover { background: var(--kp-ochre-hi); color: #16110d; }