/* ---- slinger (Slinger — Longcase clocks, regulators & restoration 311) -----
   THE STRUCTURAL MOVE: every section word is set enormous on a line-height of
   0.8 and carries a negative bottom margin, so the tall CONTAINED plate under
   it rides up into the word instead of sitting politely below — and the
   catalogue runs on an uneven 0.78/1.22 grid, so as the plate swaps side down
   the page it swaps WIDTH too, narrow, wide, narrow, which is how the
   reference alternates its chapters. Between one row and the next there is the
   better part of a screen of bare white. The page never bands, never bleeds to
   the edge and never goes dark: bone paper from the nav to the foot, ink type,
   and one oxidised verdigris rationed to exactly two jobs — the rand figure
   and the hairline under an archive caption. The clock cases are the only
   warmth on it. nth-child appears nowhere; nothing here touches the header,
   the nav, or the order, position or alignment of anything inside them. ---- */
body.t-slinger {
  background: #fbfaf7;
  color: #191713;
  --sg-verd: #4b6b60;
  --bg-flat: #fbfaf7;
  --header-bg: #fbfaf7;
  --surface: #fbfaf7;
  --surface-2: #fbfaf7;
  --line: #e7e3da;
  --line-strong: #c9c4b7;
  --heading: #100f0d;
  --text: #191713;
  --muted: #7c776c;
  --radius: 0;
  --shadow: none;
}

/* the bar is the same paper as the page, so no band ever starts anywhere */
body.t-slinger .sf-head, body.t-slinger .sf-header,
body.t-slinger .sf-foot, body.t-slinger .sf-footer, body.t-slinger .sf-cats {
  background: #fbfaf7; border-color: #e7e3da;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-slinger .sf-name, body.t-slinger .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 500; }

/* controls are flat ink slabs with no edge — verdigris never fills anything */
body.t-slinger .btn.brand { background: #191713; border: 0; box-shadow: none; color: #fbfaf7; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 600; padding: 15px 32px; }
body.t-slinger .btn.brand:hover { background: var(--sg-verd); color: #fbfaf7; }

/* THE FOLD — a bare white wall, ONE tall plate contained and anchored to the
   bottom edge, and the page's single giant word standing over the top of it.
   The dim wash the shared hero bakes into its inline background is cancelled
   with background-blend-mode: screen — black screened onto anything is a
   no-op — so the wall stays paper rather than going grey. */
body.t-slinger .sc-hero {
  min-height: 100vh; align-items: flex-start;
  padding: clamp(74px, 12vh, 132px) 20px 0;
  background-color: #fbfaf7;
  background-size: 100% 100%, auto 74%;
  background-position: center, center bottom;
  background-repeat: no-repeat;
  background-blend-mode: screen, normal;
}
body.t-slinger .sc-hero-inner, body.t-slinger .sc-lookbook > .container { max-width: none; padding-left: 0; padding-right: 0; }
body.t-slinger .sc-hero h1 { color: #100f0d; text-shadow: none; font-size: clamp(58px, 17vw, 218px); line-height: 0.8; letter-spacing: -0.055em; font-weight: 500; margin: 0 0 clamp(26px, 4vh, 46px); }
body.t-slinger .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid #191713; color: #191713; }
body.t-slinger .sc-hero .btn.brand.sc-hero-ghost:hover { background: #191713; color: #fbfaf7; }

/* THE GIANT WORD — one per chapter, ink, centred, set tighter than its own
   glyphs; where a plate follows it the margin goes negative and the picture
   climbs into the empty descender band under the word */
body.t-slinger .sc-h2 { color: #100f0d; font-size: clamp(40px, 8.6vw, 122px); line-height: 0.8; letter-spacing: -0.055em; font-weight: 500; margin: 0 0 34px; }
body.t-slinger .sc-lookbook .sc-h2, body.t-slinger .sc-strip .sc-h2 { margin-bottom: -0.08em; }

/* one measure for the whole page, and a quarter of a screen of air above
   every chapter — the reference's 250px of nothing */
body.t-slinger .sc-lookbook, body.t-slinger .sc-strip, body.t-slinger .sc-about-split {
  max-width: 1220px; margin: 0 auto; padding: clamp(76px, 13vh, 150px) clamp(20px, 5vw, 70px) 0;
}

/* the uneven grid: the plate is narrow on one row and wide on the next
   because the shared sheet moves it into the other column */
body.t-slinger .sc-look-row, body.t-slinger .sc-about-split { grid-template-columns: 0.78fr 1.22fr; }
body.t-slinger .sc-look-row { margin-bottom: clamp(96px, 20vh, 236px); }
body.t-slinger .sc-look-media img, body.t-slinger .sc-about-media img, body.t-slinger .sc-strip-img img { aspect-ratio: 2 / 3; object-fit: contain; border-radius: 0; }

/* a row carries a title, a price and one line of movement note. Nothing else */
body.t-slinger .sc-look-cat { display: none; }
body.t-slinger .sc-look-t { font-size: clamp(19px, 2.1vw, 26px); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
body.t-slinger .sc-look-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.7; margin: 12px 0 0; max-width: 40ch; }
body.t-slinger .sc-look-p { color: var(--sg-verd); font-size: 17px; font-weight: 600; margin: 20px 0 24px; } /* verdigris, 1 of 2 */

/* THE ARCHIVE — six tall frames three across, two rows that fill square, each
   caption ruled underneath in verdigris and nowhere near centred */
body.t-slinger .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 5vh, 70px) clamp(24px, 3vw, 44px); }
body.t-slinger .sc-strip-img { aspect-ratio: 2 / 3; border: 0; background: transparent; }
body.t-slinger .sc-strip-label { text-align: left; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; margin-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sg-verd); } /* verdigris, 2 of 2 */

/* the screen made of nothing but words, and the prose beside the bench */
body.t-slinger .sc-richtext { max-width: 980px; padding: clamp(110px, 22vh, 240px) 20px clamp(90px, 18vh, 200px); }
body.t-slinger .sc-richtext p, body.t-slinger .sc-about-copy p { color: #2f2c25; font-size: 17px; line-height: 1.95; }

/* the two lower registers drop to a whisper so the giant words stay alone */
body.t-slinger .sc-about-copy .sc-h2, body.t-slinger .sc-contact .sc-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 600; line-height: 1.6; margin: 0 0 20px; }
body.t-slinger .sc-contact { max-width: 430px; padding: clamp(96px, 17vh, 200px) 20px clamp(96px, 16vh, 180px); }
body.t-slinger .sc-contact-sub { font-size: 13.5px; line-height: 1.95; }

@media (max-width: 860px) {
  body.t-slinger .sc-hero { min-height: 86vh; background-size: 100% 100%, auto 60%; }
  body.t-slinger .sc-look-row, body.t-slinger .sc-about-split { grid-template-columns: 1fr; }
  body.t-slinger .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-slinger .sc-look-row { margin-bottom: 76px; }
}

/* NIGHT — the paper goes to burnt walnut-black and the verdigris lifts to the
   pale green unpolished brass throws back under a bench lamp, so the rand
   figure and the caption rule still carry. The plates keep their white walls,
   which turns the catalogue into lit pages on a dark table — closer to how the
   workshop looks at seven in the evening than the day version is. */
html[data-theme="dark"] body.t-slinger {
  background: #131311;
  color: #cfcabd;
  --sg-verd: #82ab9c;
  --bg-flat: #131311;
  --header-bg: #131311;
  --surface: #131311;
  --surface-2: #131311;
  --line: #262521;
  --line-strong: #3a3833;
  --heading: #f3efe4;
  --text: #cfcabd;
  --muted: #837e72;
}
html[data-theme="dark"] body.t-slinger .sf-head, html[data-theme="dark"] body.t-slinger .sf-header,
html[data-theme="dark"] body.t-slinger .sf-foot, html[data-theme="dark"] body.t-slinger .sf-footer,
html[data-theme="dark"] body.t-slinger .sf-cats { background: #131311; border-color: #262521; }
html[data-theme="dark"] body.t-slinger .sc-hero { background-color: #131311; }
html[data-theme="dark"] body.t-slinger .sc-hero h1, html[data-theme="dark"] body.t-slinger .sc-h2 { color: #f3efe4; }
html[data-theme="dark"] body.t-slinger .sc-hero .btn.brand.sc-hero-ghost { border-color: #cfcabd; color: #f3efe4; }
html[data-theme="dark"] body.t-slinger .sc-hero .btn.brand.sc-hero-ghost:hover { background: #f3efe4; color: #131311; }
html[data-theme="dark"] body.t-slinger .btn.brand { background: #f3efe4; color: #131311; }
html[data-theme="dark"] body.t-slinger .btn.brand:hover { background: var(--sg-verd); color: #101210; }
html[data-theme="dark"] body.t-slinger .sc-richtext p, html[data-theme="dark"] body.t-slinger .sc-about-copy p { color: #b8b3a6; }
html[data-theme="dark"] body.t-slinger .sc-field input, html[data-theme="dark"] body.t-slinger .sc-field textarea { background: #1a1a17; border-color: #302e29; }