/* ---- strop (Strop — Barber goods 60) ---------------------------------------
   STRUCTURAL MOVE: the two dark full-bleed photographs — a full-viewport hero
   and a letterbox banner — are the only things on this page that touch the
   edge, and they bracket its middle third. Between them the counts change
   under you: six square craft tiles three across with the word burnt into the
   corner of the photograph, then a picture-free centred column with the widest
   whitespace on the page beside it, then four portrait faces named underneath.
   Nothing anywhere on the page sits beside anything else. Bone paper, near-
   black ink, one tan leather accent spent on the rules, the headings and the
   prices. */
body.t-strop { background: #f6f3ee; color: #141210; --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --radius: 0; --surface: #ffffff; --surface-2: #efeae2; --line: #e2dbd0; --line-strong: #cabfae; --heading: #141210; --text: #2f2a25; --muted: #6d645a; }
body.t-strop .sf-header, body.t-strop .sf-footer { background: #f6f3ee; border-color: #e2dbd0; }
body.t-strop .sf-name, body.t-strop .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.01em; }
body.t-strop .btn.brand { background: #8a5a3b; color: #ffffff; box-shadow: none; font-weight: 600; letter-spacing: 0.06em; }
body.t-strop .btn.brand:hover { background: #6b4429; }
/* the opener is the whole pane of glass; nothing reaches the edge again until the banner */
body.t-strop .sc-hero { min-height: 100vh; }
body.t-strop .sc-hero h1 { font-size: clamp(36px, 6.4vw, 78px); line-height: 1.05; }
body.t-strop .sc-h2 { text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(11px, 1.3vw, 13px); font-weight: 700; color: #8a5a3b; margin-bottom: 30px; }
body.t-strop .sc-strip-card, body.t-strop .sc-strip-img { position: relative; border: 0; }
/* SIX: square, three across, two rows, the word burnt into the photograph */
body.t-strop .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.t-strop .sc-strip-row:has(> :nth-child(5)) .sc-strip-label { position: absolute; left: 0; bottom: 0; margin: 0; padding: 9px 15px 8px; background: #8a5a3b; color: #ffffff; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
/* FOUR: portrait crops, one row, the only faces on the page, named underneath */
body.t-strop .sc-strip-row:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, 1fr); gap: 24px; }
body.t-strop .sc-strip-row:not(:has(> :nth-child(5))) .sc-strip-img { aspect-ratio: 3 / 4; }
/* the hinge: no photograph, the narrowest measure and the widest air on the page */
body.t-strop .sc-richtext { max-width: 540px; padding: 118px 20px 104px; }
body.t-strop .sc-richtext p { font-size: 16.5px; line-height: 1.9; color: var(--text); text-align: left; }
/* the second and last dark band — letterbox, not a stage */
body.t-strop .sc-banner { margin: 64px calc(50% - 50vw) 58px; min-height: 40vh; display: flex; align-items: center; justify-content: center; }
/* six on the same three-across grid as the craft row, so the two rows rhyme */
body.t-strop .product-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 24px; padding-bottom: 30px; }
body.t-strop .product-card .p { color: #8a5a3b; font-weight: 600; }
/* the foot reads as the shop's column in a directory, not as an enquiry section */
body.t-strop .sc-contact-split { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 58px; }
body.t-strop .sc-contact-lead p { white-space: pre-line; line-height: 2; color: var(--text); }
@media (max-width: 760px) {
  body.t-strop .sc-strip-row:has(> :nth-child(5)), body.t-strop .sc-strip-row:not(:has(> :nth-child(5))), body.t-strop .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the paper drops to a lamp-lit near-black and the tan lifts to a
   lighter leather so headings and prices still carry it. The two photographic
   bands stay exactly where they were, now flush with the ground around them. */
html[data-theme="dark"] body.t-strop { background: #16130f; color: #ded6c9; --surface: #1e1a15; --surface-2: #241f19; --line: #2f2921; --line-strong: rgba(255, 255, 255, 0.16); --heading: #f6f3ee; --text: #ded6c9; --muted: #8d8377; }
html[data-theme="dark"] body.t-strop .sf-header, html[data-theme="dark"] body.t-strop .sf-footer { background: #16130f; border-color: #2f2921; }
html[data-theme="dark"] body.t-strop .btn.brand { background: #c9926a; color: #16130f; }
html[data-theme="dark"] body.t-strop .btn.brand:hover { background: #dda87f; }
html[data-theme="dark"] body.t-strop .sc-h2, html[data-theme="dark"] body.t-strop .product-card .p { color: #c9926a; }