/* ---- forel (Forel — Highlands trout farm & smokehouse 293) ------------------
   THE STRUCTURAL MOVE: the entire first screen is a fixed 50/50 split. The left
   half is a flat bone field holding nothing but enormous condensed caps; the
   right half is a river-ink panel with ONE tall portrait floating inside a
   thick bone mat, and two of those cross-fade in place. It is built entirely
   out of the hero's own slide stack — the stack is pushed to left:50%, an
   opaque mat pseudo sits UNDER the fading slides (first child, so it paints
   below them), and the slide images drop to `contain` with the scrim layer
   sized to 0 0 — so the header is never touched and nothing inside it moves.
   The story band repeats the same proportion (copy left, print right) and the
   display type goes hollow on hover: our echo of the reference's outline trick.
   Bone #f4efe6 and river-ink #14181c, with one smoked rose #b06054 spent on the
   circled numerals, the micro-labels, the rand figure and the ghost edge. */
body.t-forel { background: #f4efe6; color: #14181c; }
body.t-forel .sf-head, body.t-forel .sf-foot { background: #f4efe6; border-color: #e2d9c8; }
body.t-forel .btn.brand { background: #14181c; color: #f4efe6; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 17px 34px; }

/* condensed display caps on every heading; the warm serif carries reading copy */
body.t-forel .sc-hero h1, body.t-forel .sc-h2, body.t-forel .sc-banner h2 { font-family: 'Arial Narrow', 'Helvetica Neue', var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.02; text-shadow: none; }
body.t-forel .sc-h2 { text-align: left; font-size: clamp(20px, 3.2vw, 34px); margin-bottom: clamp(20px, 3vw, 38px); }
/* the hollow-type trick — solid saturated ink, outline on hover */
body.t-forel .sc-hero h1:hover, body.t-forel .sc-h2:hover { -webkit-text-stroke: 1px #14181c; -webkit-text-fill-color: transparent; }
body.t-forel .sc-hero p, body.t-forel .sc-about-copy p, body.t-forel .sc-contact-lead p { font-family: var(--sf-serif); font-size: 16.5px; line-height: 1.75; color: #4c545b; text-shadow: none; }

/* LEFT HALF: words only, vertically centred. RIGHT HALF: one matted print. */
body.t-forel .sc-hero { min-height: 100vh; background-color: #f4efe6; padding: 96px 54vw 96px clamp(20px, 7.8vw, 132px); }
/* slide one is duplicated onto the section itself; hide it once the stack exists
   so a single-image hero still falls back to a normal photograph */
body.t-forel .sc-hero:has(.sc-hero-slides) { background-size: 0 0; }
body.t-forel .sc-hero h1 { color: #14181c; font-size: clamp(40px, 6.6vw, 108px); margin: 0 0 24px; }
body.t-forel .sc-hero-slides { left: 50%; background: #14181c; }
body.t-forel .sc-hero-slides::before { content: ''; position: absolute; inset: 9vh 6vw; background: #f4efe6; }
body.t-forel .sc-hero-slide { inset: calc(9vh + 22px) calc(6vw + 22px); background-size: 0 0, contain; background-repeat: no-repeat; background-position: center; }
body.t-forel .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-color: #b06054; color: #14181c; }

/* THE FOUR-WAY INDEX — circled numerals 1–4 pinned over four tall panels */
body.t-forel .sc-strip, body.t-forel .sc-products { padding: clamp(58px, 7.5vw, 104px) 20px; }
body.t-forel .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); counter-reset: forel; }
body.t-forel .sc-strip-card { position: relative; counter-increment: forel; text-align: left; }
body.t-forel .sc-strip-card::before { content: counter(forel); position: absolute; top: 13px; right: 13px; z-index: 1; width: 35px; height: 35px; line-height: 33px; text-align: center; font-size: 12px; color: #b06054; border: 1px solid #b06054; border-radius: 50%; background: rgba(20, 24, 28, 0.5); }
body.t-forel .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
body.t-forel .sc-strip-label { margin-top: 13px; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #b06054; }

/* the split, a second time: copy LEFT, one tall matted print RIGHT. The media
   cell is first in the markup, so ordering it last keeps the photograph right. */
body.t-forel .sc-about-split, body.t-forel .sc-contact-split { gap: clamp(28px, 5vw, 84px); padding: clamp(64px, 8vw, 112px) 20px; }
body.t-forel .sc-about-media { order: 2; }
body.t-forel .sc-about-media img { aspect-ratio: 2 / 3; border-radius: 0; border: 20px solid #f4efe6; background: #f4efe6; }

/* flat-lays dropped onto bone by multiply, price small under the title */
body.t-forel .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 44px); padding: 0; }
body.t-forel .product-card, body.t-forel .product-card .ph { background: #f4efe6; border: 0; border-radius: 0; box-shadow: none; }
body.t-forel .product-card .ph img { object-fit: contain; mix-blend-mode: multiply; }
body.t-forel .product-card .t { color: #14181c; }
body.t-forel .product-card .p { color: #b06054; font-size: 12px; letter-spacing: 0.16em; margin-top: 6px; }

/* the one wide photograph on the page, and the only line of type over an image */
body.t-forel .sc-banner { min-height: 62vh; display: flex; align-items: center; }
body.t-forel .sc-banner h2 { font-size: clamp(28px, 4.4vw, 58px); }

@media (max-width: 980px) {
  body.t-forel .sc-hero { min-height: auto; padding: 116px 20px 46vh; }
  body.t-forel .sc-hero-slides { left: 0; top: auto; height: 42vh; }
  body.t-forel .sc-hero-slides::before { inset: 20px 18px; }
  body.t-forel .sc-hero-slide { inset: 40px 38px; }
  body.t-forel .sc-strip-row, body.t-forel .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-forel .sc-about-media { order: 0; }
}

/* NIGHT — the bone half goes to river-ink and the type flips to bone with it,
   so the hollow hover has to restroke in bone or the heading disappears. The
   product cards deliberately STAY bone in both modes: they carry white flat-lays
   on multiply, and on a dark card multiply would turn every fish black. */
html[data-theme="dark"] body.t-forel { background: #14181c; color: #ece5d7; }
html[data-theme="dark"] body.t-forel .sf-head, html[data-theme="dark"] body.t-forel .sf-foot { background: #14181c; border-color: #2b323a; }
html[data-theme="dark"] body.t-forel .sc-hero { background-color: #0f1318; }
html[data-theme="dark"] body.t-forel .sc-hero h1, html[data-theme="dark"] body.t-forel .sc-h2 { color: #f4efe6; }
html[data-theme="dark"] body.t-forel .sc-hero h1:hover, html[data-theme="dark"] body.t-forel .sc-h2:hover { -webkit-text-stroke-color: #f4efe6; }
html[data-theme="dark"] body.t-forel .sc-hero p, html[data-theme="dark"] body.t-forel .sc-about-copy p, html[data-theme="dark"] body.t-forel .sc-contact-lead p { color: #9aa4ac; }
html[data-theme="dark"] body.t-forel .btn.brand { background: #f4efe6; color: #14181c; }
html[data-theme="dark"] body.t-forel .sc-hero .btn.brand.sc-hero-ghost { background: transparent; color: #f4efe6; }