/* OLYF — the donor is a magazine front page with no hero at all, so what is
   lifted is its RHYTHM, not its furniture: a suppressed title area, a
   near-gapless band of wide landscape frames whose captions sit in a white
   block BELOW the photograph rather than over it, then horizontal image-left
   rows, a small personal author card and a quiet subscribe band to close.
   THE STRUCTURAL MOVE is the reference's 1 + 7 + 1 + 3 grid: every band under
   the strip is padded far harder on the LEFT than the right, so the whole page
   sits off-centre like a printed spread with a margin. Olive-grey is spent on
   exactly two jobs — the tiny uppercase eyebrows and the hairline under every
   title — and never on a control, a heading or a price. */
body.t-olyf {
  background: #f7f4ec;
  color: #35362d;
  --olv-sage: #6f7a62;
  --bg-flat: #f7f4ec;
  --surface: #fffdf7;
  --surface-2: #efebe0;
  --line: #e3ded0;
  --line-strong: #cec8b6;
  --heading: #14150f;
  --text: #35362d;
  --muted: #7a7a6e;
  --header-bg: #f7f4ec;
  --radius: 0;
  --shadow: none;
}

/* bone bar, flat and unblurred, wordmark in the display cut */
body.t-olyf .sf-header, body.t-olyf .sf-head,
body.t-olyf .sf-footer, body.t-olyf .sf-foot, body.t-olyf .sf-cats {
  background: #f7f4ec; border-color: #e3ded0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-olyf .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 21px; letter-spacing: 0.03em; }

/* one flat ink slab wherever a control appears — the olive never touches it */
body.t-olyf .btn.brand { background: var(--heading); border-color: var(--heading); color: #f7f4ec; border-radius: 0; box-shadow: none; font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 26px; }

/* the opener is deliberately LOW and set hard left, so the page drops into the
   strip almost at once the way the reference drops straight into its cards */
body.t-olyf .sc-hero { min-height: 44vh; padding: 86px clamp(20px, 11vw, 180px); }
body.t-olyf .sc-hero h1, body.t-olyf .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(28px, 4vw, 50px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 16px; }

/* headings large and generously spaced, and the one place a rule is drawn */
body.t-olyf .sc-h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--heading); font-size: clamp(25px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.012em; text-align: left; margin: 0; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--olv-sage); }

/* THE INSET — strip, rows and author card all share the off-centre margin */
body.t-olyf .sc-strip, body.t-olyf .sc-lookbook, body.t-olyf .sc-about-split {
  max-width: 1300px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 70px) 26px clamp(20px, 11vw, 180px);
}

/* THE STRIP — three wide landscape frames a row, 3px gutters so they read as
   almost welded, caption in a white block under the picture and inset 32px */
body.t-olyf .sc-strip { padding-top: 46px; padding-bottom: 12px; }
body.t-olyf .sc-strip-row { grid-template-columns: repeat(3, 1fr); gap: 3px; }
body.t-olyf .sc-strip-img { aspect-ratio: 3 / 2; border: 0; }
body.t-olyf .sc-strip-label { margin: 0; padding: 19px 32px 27px; background: var(--surface); text-align: left; font-family: var(--sf-serif); font-weight: 400; font-size: 15px; line-height: 1.35; color: var(--heading); }

/* THE ROWS — image hard left at roughly a third, eyebrow / title / copy / price
   stacked beside it, a dashed hairline between. Placed explicitly rather than
   left to the shared alternation, because this reference never flips a row. */
body.t-olyf .sc-lookbook > .container { max-width: none; padding: 96px 0 30px; }
body.t-olyf .sc-look-row { grid-template-columns: 32% 1fr; align-items: start; padding: 42px 0; border-bottom: 1px dashed var(--line-strong); }
body.t-olyf .sc-look-media { grid-column: 1; grid-row: 1; }
body.t-olyf .sc-look-copy { grid-column: 2; grid-row: 1; padding: 0 0 0 clamp(24px, 3.4vw, 54px); }
body.t-olyf .sc-look-cat { color: var(--olv-sage); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; }
body.t-olyf .sc-look-t { margin: 14px 0 0; font-family: var(--sf-serif); font-weight: 400; font-size: clamp(21px, 2.2vw, 29px); letter-spacing: -0.01em; }
body.t-olyf .sc-look-p { margin: 20px 0 22px; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; }

/* the author card lifted out of the 3/12 rail and scaled into a real band */
body.t-olyf .sc-about-split { grid-template-columns: 290px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: 98px; padding-bottom: 98px; }
body.t-olyf .sc-about-media img { aspect-ratio: 4 / 5; }

/* the close, standing in for the subscribe widget: no fill, one hairline over
   it, and the smallest type on the page so it never becomes the loudest thing */
body.t-olyf .sc-contact-band { background: transparent; box-shadow: inset 0 1px 0 var(--line); padding: 78px 0 92px; }
body.t-olyf .sc-contact-band-inner { max-width: 560px; text-align: left; }

@media (max-width: 900px) {
  body.t-olyf .sc-strip, body.t-olyf .sc-lookbook, body.t-olyf .sc-about-split { padding-left: 20px; padding-right: 20px; }
  body.t-olyf .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-olyf .sc-look-row, body.t-olyf .sc-about-split { grid-template-columns: 1fr; }
  body.t-olyf .sc-look-media, body.t-olyf .sc-look-copy { grid-column: 1; grid-row: auto; }
  body.t-olyf .sc-look-copy { padding: 22px 0 0; }
  body.t-olyf .sc-hero { padding-left: 20px; padding-right: 20px; }
}

/* NIGHT — the bone goes to a warm near-black, the olive lifts because it is
   still carrying every eyebrow and every hairline on its own, and the slab
   inverts so the one control on the page stays the flattest thing here. */
html[data-theme="dark"] body.t-olyf {
  background: #14150f;
  color: #c2c1b5;
  --olv-sage: #9ba78e;
  --bg-flat: #14150f;
  --surface: #1c1d15;
  --surface-2: #23241b;
  --line: #2d2e24;
  --line-strong: #414234;
  --heading: #f4f2e8;
  --text: #c2c1b5;
  --muted: #85867a;
  --header-bg: #14150f;
}
html[data-theme="dark"] body.t-olyf .sf-header, html[data-theme="dark"] body.t-olyf .sf-head,
html[data-theme="dark"] body.t-olyf .sf-footer, html[data-theme="dark"] body.t-olyf .sf-foot,
html[data-theme="dark"] body.t-olyf .sf-cats { background: #14150f; border-color: #2d2e24; }
html[data-theme="dark"] body.t-olyf .btn.brand { background: #f4f2e8; border-color: #f4f2e8; color: #14150f; }