/* ---------- Escapement — Watches & straps 72 (store) ----------
   THE ONE STRUCTURAL MOVE: the catalogue is stated twice. The masonry wall is
   pulled out of its staggered column flow and set as exactly the same
   three-across, tight-gutter, 4:5 tile grid the buygrid uses, so one grid
   rhythm is stated, broken once by a bare centred column of type, then
   restated verbatim underneath — a catalogue spread rather than a landing
   page. Around it: a flat opaque header that sits ABOVE the first photograph
   instead of floating over it, and a still half-and-half hero where the
   picture takes the right half and the copy sits on bare bone at the left
   (the inline scrim layer is sized to nothing, so only the photograph paints).
   Bone ground, near-black type, one mid-grey hairline between bands, and the
   brass kept for buttons and the price line only. */
body.t-mainspring {
  background: #f7f6f2;
  color: #121316;
  --radius: 0;
  --shadow: none;
  --header-bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #eceae4;
  --line: #cfcec8;
  --line-strong: #b6b5ae;
  --heading: #121316;
  --text: #121316;
  --muted: #6b6d72;
}
body.t-mainspring .sf-head, body.t-mainspring .sf-foot, body.t-mainspring .sf-footer,
body.t-mainspring .sf-header { background: #f7f6f2; border-color: #cfcec8; }
/* the hard horizontal edge: a solid slab above the hero, not over it, and not
   sticky — with nothing left pinned, the anchor offset would only open a gap */
body.t-mainspring .sf-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #b6b5ae; }
body.t-mainspring .sc-hero, body.t-mainspring .sc-masonry, body.t-mainspring .sc-richtext,
body.t-mainspring .sc-strip, body.t-mainspring .sc-buygrid, body.t-mainspring .sc-contact-split { scroll-margin-top: 0; }

/* THE SPLIT: layer one of the inline background is the dark scrim, so it is
   sized to nothing and never paints; layer two — the photograph — takes the
   right half at full height, and the copy stands on bone in the left half */
body.t-mainspring .sc-hero {
  min-height: 62vh;
  padding: clamp(72px, 11vh, 128px) 54% clamp(72px, 11vh, 128px) clamp(20px, 6vw, 76px);
  background-color: #f7f6f2;
  background-size: 0 0, 50% 100%;
  background-position: 0 0, right center;
  background-repeat: no-repeat;
}
body.t-mainspring .sc-hero h1 { color: #121316; text-shadow: none; font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.025em; }
body.t-mainspring .sc-hero p { color: #56585d; text-shadow: none; font-size: 16px; line-height: 1.65; }

/* one mid-grey hairline between bands, drawn INSIDE the max-width column so
   nothing on the page bleeds to the window edge except the footer */
body.t-mainspring .sc-masonry .container, body.t-mainspring .sc-strip,
body.t-mainspring .sc-buygrid, body.t-mainspring .sc-contact-split {
  border-top: 1px solid #cfcec8;
  padding-top: clamp(44px, 6vh, 66px);
  padding-bottom: clamp(46px, 7vh, 74px);
}
body.t-mainspring .sc-masonry { padding: 0; }

/* the break: an image-free column in more vertical air than any other band */
body.t-mainspring .sc-richtext { max-width: 640px; padding: clamp(100px, 15vh, 172px) 20px; }
body.t-mainspring .sc-richtext p { font-size: 16px; line-height: 2; color: #3c3e43; }
body.t-mainspring .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; color: #6b6d72; margin-bottom: 26px; }
body.t-mainspring .sc-mas-cat, body.t-mainspring .sc-buy-cat, body.t-mainspring .sc-strip-label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 700; color: #6b6d72; margin-top: 12px; }

/* STATED, then RESTATED VERBATIM — masonry and buygrid share one grid rule */
body.t-mainspring .sc-mas-grid, body.t-mainspring .sc-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 12px; }
body.t-mainspring .sc-mas-item, body.t-mainspring .sc-buy-card { margin: 0; align-items: flex-start; text-align: left; }
/* every tile the same 4:5, so the wall stops staggering and the two grids twin */
body.t-mainspring .sc-mas-item .sc-mas-media img { aspect-ratio: 4 / 5; }
body.t-mainspring .sc-mas-p, body.t-mainspring .sc-buy-p { color: #8f6a2e; font-weight: 600; }

/* three fields: name, email, and the only question worth asking before a book */
body.t-mainspring .sc-contact-split label[for="sc-msg"] { font-size: 0; }
body.t-mainspring .sc-contact-split label[for="sc-msg"]::after { content: 'Which watch is it?'; font-size: 13px; }
body.t-mainspring .btn.brand { background: #8f6a2e; color: #f7f6f2; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 13px 26px; }
body.t-mainspring .btn.brand:hover { background: #6f5122; }
body.t-mainspring .btn.brand.sc-buy-btn { margin-top: 12px; padding: 9px 15px; font-size: 10px; }
@media (max-width: 900px) {
  body.t-mainspring .sc-hero { min-height: 0; padding: 44vh clamp(20px, 6vw, 40px) 52px; background-size: 0 0, 100% 40vh; background-position: 0 0, center top; }
  body.t-mainspring .sc-mas-grid, body.t-mainspring .sc-buy-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 10px; }
}

/* NIGHT — the same bench under a task lamp: the bone goes to cold graphite,
   the hairline holds one shade above the ground, and the brass has to lift,
   because #8f6a2e on a near-black ground stops reading as metal at all. */
html[data-theme="dark"] body.t-mainspring {
  background: #131417;
  color: #cdced2;
  --header-bg: #131417;
  --surface: #1a1c20;
  --surface-2: #1f2126;
  --line: #2c2e34;
  --line-strong: #3b3e45;
  --heading: #f4f3ef;
  --text: #cdced2;
  --muted: #8a8d94;
}
html[data-theme="dark"] body.t-mainspring .sf-head, html[data-theme="dark"] body.t-mainspring .sf-foot,
html[data-theme="dark"] body.t-mainspring .sf-footer, html[data-theme="dark"] body.t-mainspring .sf-header { background: #131417; border-color: #2c2e34; }
html[data-theme="dark"] body.t-mainspring .sc-hero { background-color: #131417; }
html[data-theme="dark"] body.t-mainspring .sc-hero h1 { color: #f4f3ef; }
html[data-theme="dark"] body.t-mainspring .sc-hero p, html[data-theme="dark"] body.t-mainspring .sc-richtext p { color: #a9acb3; }
html[data-theme="dark"] body.t-mainspring .sc-masonry .container, html[data-theme="dark"] body.t-mainspring .sc-strip,
html[data-theme="dark"] body.t-mainspring .sc-buygrid, html[data-theme="dark"] body.t-mainspring .sc-contact-split { border-top-color: #2c2e34; }
html[data-theme="dark"] body.t-mainspring .sc-h2, html[data-theme="dark"] body.t-mainspring .sc-mas-cat,
html[data-theme="dark"] body.t-mainspring .sc-buy-cat, html[data-theme="dark"] body.t-mainspring .sc-strip-label { color: #9a9da4; }
html[data-theme="dark"] body.t-mainspring .sc-mas-p, html[data-theme="dark"] body.t-mainspring .sc-buy-p { color: #cda45c; }
html[data-theme="dark"] body.t-mainspring .btn.brand { background: #cda45c; color: #131417; }
html[data-theme="dark"] body.t-mainspring .btn.brand:hover { background: #ddb872; }