/* ---- koper (Koper — Hand-raised copper cookware 198) -----------------------
   THE STRUCTURAL MOVE: THE CATALOGUE RUNS TWICE. The same eight pans appear
   first as large browsable panels with no rand figure anywhere in them, then
   again lower down as a full-bleed four-across grid butted edge to edge with
   the price against every one — the only place on the page a price exists.
   Around that, two rows of tiles are welded full-bleed with zero gutter (one
   onto the floor of the stage, one under the prose), and they bracket the one
   contained, imageless text column, so the page pinches inward exactly once
   between four bleeding photographic bands. Both strips are reached by the
   same class because there are only two and both are welded — no element-type
   selector is needed or wanted. Graphite ground, bone-white prose, and one
   burnished copper rationed to four jobs: the controls, the section titles,
   the rand figure and the hairlines. -------------------------------------- */
body.t-koper {
  background: #151311;
  color: #cfc6b9;
  --kp-cop: #b0682f;
  --kp-lit: #d6873c;
  --kp-rule: rgba(176, 104, 47, 0.34);
  --kp-lift: #201c18;
  --kp-slab: #2c251e;
  --bg-flat: #151311;
  --header-bg: #151311;
  --surface: #1c1916;
  --surface-2: #241f1a;
  --line: #2e2721;
  --line-strong: #453a30;
  --heading: #efe9e0;
  --text: #cfc6b9;
  --muted: #8d8175;
  --radius: 0;
  --shadow: none;
}

/* a solid graphite bar carrying the name hard left — the stage begins beneath
   it rather than behind it, so nothing ever floats over the photograph */
body.t-koper .sf-head, body.t-koper .sf-header,
body.t-koper .sf-foot, body.t-koper .sf-footer, body.t-koper .sf-cats {
  background: #151311; border-color: #2e2721;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-koper .sf-name, body.t-koper .sf-navlink { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 600; }

/* COPPER 1 of 4 — every control is a flat copper slab with no edge on it */
body.t-koper .btn.brand { background: var(--kp-cop); border: 0; color: #17120d; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 17px 36px; }
body.t-koper .btn.brand:hover { background: var(--kp-lit); color: #17120d; }

/* the stage: three cross-fading slides, a whole screen of photograph, copy
   held to the left third and nowhere near the vertical middle */
body.t-koper .sc-hero { min-height: 100vh; padding: 96px max(24px, calc(50vw - 620px)); }
body.t-koper .sc-hero-left .sc-hero-inner { max-width: 470px; margin: 0; }
body.t-koper .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(32px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.005em; }
body.t-koper .sc-hero p { text-transform: uppercase; letter-spacing: 0.15em; font-size: clamp(11px, 1.5vw, 13.5px); line-height: 2; }

/* COPPER 2 of 4 — the section titles, and the only tracked copper type here */
body.t-koper .sc-h2 { color: var(--kp-lit); text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(11px, 1.4vw, 13px); font-weight: 700; margin-bottom: 34px; }

/* THE WELD, TWICE — both tile rows give up the container, its padding and its
   gutters and run the full window. Four across, zero gap, roughly four-fifths
   photograph with the caption on a lifted graphite bar underneath it. */
body.t-koper .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-koper .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-koper .sc-strip-img { aspect-ratio: 5 / 4; border: 0; border-radius: 0; background: #151311; }
body.t-koper .sc-strip-label { margin: 0; padding: 20px 22px 24px; background: var(--kp-lift); color: var(--kp-lit); text-align: left; text-transform: uppercase; letter-spacing: 0.13em; font-size: 11px; font-weight: 700; line-height: 1.7; font-variant-numeric: tabular-nums; }

/* THE PINCH — the one contained band on the page, with no picture in it at
   all, sitting between the two welded rows and carrying more air than anything */
body.t-koper .sc-richtext { max-width: 640px; padding: 118px 20px 108px; }
body.t-koper .sc-richtext p { color: var(--heading); font-size: clamp(15.5px, 1.9vw, 17.5px); line-height: 2.05; }

/* PASS ONE — the same eight as browsable panels: one flat ground instead of
   the checkerboard, a copper hairline between rows, and the price suppressed */
body.t-koper .sc-show-item, body.t-koper .sc-show-item:nth-child(4n + 2),
body.t-koper .sc-show-item:nth-child(4n + 3) { background: var(--kp-lift); border-top: 1px solid var(--kp-rule); }
body.t-koper .sc-show-price { display: none; }
body.t-koper .sc-show-rule { background: var(--kp-cop); opacity: 1; width: 44px; }
body.t-koper .sc-show-btn { background: var(--kp-slab); color: var(--kp-lit); letter-spacing: 0.22em; }
body.t-koper .sc-show-cat, body.t-koper .sc-buy-cat { color: var(--muted); }

/* PASS TWO — the same eight again, full-bleed and butted edge to edge, with a
   single hairline of copper the only thing between one tile and the next.
   COPPER 3 of 4 is the rand figure, and it lives nowhere else on the page. */
body.t-koper .sc-buygrid { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 88px 0 96px; }
body.t-koper .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--kp-rule); }
body.t-koper .sc-buy-card { background: var(--kp-lift); padding: 0 0 30px; }
body.t-koper .sc-buy-p { color: var(--kp-lit); font-weight: 700; font-size: 16px; }

/* COPPER 4 of 4 — the hairline over the closing band. The promotional band
   holds its heading LEFT on the same axis as the stage sixty screens above it. */
body.t-koper .sc-banner { min-height: 58vh; display: flex; align-items: center; padding: 64px max(24px, calc(50vw - 620px)); text-align: left; }
body.t-koper .sc-banner-inner { margin: 0; max-width: 560px; }
body.t-koper .sc-contact-band { background: #100e0c; border-top: 1px solid var(--kp-rule); padding: 92px 0 104px; }

@media (max-width: 900px) {
  body.t-koper .sc-hero { min-height: 86vh; }
  body.t-koper .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-koper .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-koper .sc-show-grid { grid-template-columns: 1fr; }
}

/* NIGHT — the graphite drops another two stops toward black and the copper is
   lifted to meet it, so the hairlines, the prices and the caption bars stay
   readable once the photographs are the brightest things in the room. The
   lifted tile ground darkens with the page, which keeps the welded rows a
   shade off the floor rather than merging into it. */
html[data-theme="dark"] body.t-koper {
  background: #0d0c0a;
  color: #c2b8ab;
  --kp-cop: #c8823f;
  --kp-lit: #e09a52;
  --kp-rule: rgba(200, 130, 63, 0.32);
  --kp-lift: #171512;
  --kp-slab: #221d18;
  --bg-flat: #0d0c0a;
  --header-bg: #0d0c0a;
  --surface: #141210;
  --surface-2: #1b1815;
  --line: #241f1a;
  --line-strong: #38302a;
  --heading: #f6f1e8;
  --text: #c2b8ab;
  --muted: #968a7d;
}
html[data-theme="dark"] body.t-koper .sf-head, html[data-theme="dark"] body.t-koper .sf-header,
html[data-theme="dark"] body.t-koper .sf-foot, html[data-theme="dark"] body.t-koper .sf-footer,
html[data-theme="dark"] body.t-koper .sf-cats { background: #0d0c0a; border-color: #241f1a; }
html[data-theme="dark"] body.t-koper .sc-strip-img { background: #0d0c0a; }
html[data-theme="dark"] body.t-koper .sc-contact-band { background: #070605; }