/* ---- meul (Meul — Watermill & stone-ground meal 273) -----------------------
   THE STRUCTURAL MOVE: a hard four-beat of contained and full-bleed. A
   full-viewport slider with the display line hard LEFT, then a naked 700px
   column holding nothing but a kicker, an oversized uppercase serif and one
   paragraph, then FOUR photographs welded edge to edge across the whole window
   with no gutter, then six white cards three across back inside the 1080px
   measure. Both wide beats are laid on a hessian deeper than the milled-oat
   cream of the page — the strip band IS hessian, and the closing photograph is
   banded off it by a 28px hessian border top and bottom — so the rhythm reads
   before a word of it does. Willow green off the leat does three jobs only:
   the button slabs, the kicker the markup has no element for, and the rand
   figure under each bag. Nothing else on the page carries colour. */
body.t-meul {
  background: #f2ead9; color: #241d16;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg-flat: #f2ead9; --surface: #ffffff; --surface-2: #e9dfc9;
  --line: #ddd0b5; --line-strong: #c2b18f;
  --heading: #1b150f; --text: #241d16; --muted: #7b6f5c; --header-bg: #f2ead9;
  --meu-green: #5c7a5a; --meu-hessian: #ddcfb2;
}
body.t-meul .sf-head, body.t-meul .sf-header, body.t-meul .sf-foot,
body.t-meul .sf-footer, body.t-meul .sf-cats { background: #f2ead9; border-color: #ddd0b5; }
body.t-meul .sf-name { text-transform: uppercase; letter-spacing: .34em; font-size: 12.5px; font-weight: 700; }

/* green 1 of 3 — flat slabs, never an outline */
body.t-meul .btn.brand { background: var(--meu-green); color: #f4eddd; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; padding: 17px 36px; }
body.t-meul .btn.brand:hover { background: #46603f; color: #f4eddd; }

/* BEAT ONE, WIDE — the whole first screen, three frames, the line hard left */
body.t-meul .sc-hero { min-height: 100vh; padding: 100px clamp(20px, 7vw, 96px); }
body.t-meul .sc-hero h1 { font-size: clamp(33px, 6.2vw, 76px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; max-width: 15ch; margin: 0 0 18px; }
body.t-meul .sc-hero p { max-width: 44ch; font-size: 16.5px; line-height: 1.65; }

/* every section heading: uppercase, widely tracked, serif */
body.t-meul .sc-h2 { font-family: var(--sf-serif); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(17px, 2.3vw, 25px); line-height: 1.45; margin: 0 0 30px; color: var(--heading); }

/* BEAT TWO, NARROW — the naked column. Green 2 of 3 is the kicker, and the
   markup has no element for one, so the section carries it itself. */
body.t-meul .sc-richtext { max-width: 700px; padding: 118px 20px 104px; }
body.t-meul .sc-richtext::before { content: 'Since 1923'; display: block; text-align: center; color: var(--meu-green); text-transform: uppercase; letter-spacing: .4em; font-size: 10.5px; font-weight: 700; margin: 0 0 22px; }
body.t-meul .sc-richtext .sc-h2 { font-size: clamp(27px, 4.8vw, 46px); letter-spacing: .1em; line-height: 1.2; margin-bottom: 28px; }
body.t-meul .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* still narrow — the practical half: short lines left, one photograph right */
body.t-meul .sc-about-split { gap: 66px; padding: 0 20px 108px; align-items: center; }
body.t-meul .sc-about-media { order: 2; }
body.t-meul .sc-about-media img { border-radius: 0; aspect-ratio: 4 / 5; }
body.t-meul .sc-about-copy p { color: var(--heading); font-size: 15.5px; line-height: 2.3; max-width: 42ch; border-top: 1px solid var(--line-strong); padding-top: 24px; }

/* BEAT THREE, WIDE — four tiles welded edge to edge, hessian showing only
   under the labels. The one gapless moment on the page. */
body.t-meul .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; background: var(--meu-hessian); }
body.t-meul .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-meul .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 5; background: var(--meu-hessian); }
body.t-meul .sc-strip-label { text-transform: uppercase; letter-spacing: .24em; font-size: 10.5px; font-weight: 700; color: #2b2318; margin: 0; padding: 21px 14px 26px; }

/* BEAT FOUR, NARROW — six white cards, three across, two rows that fill */
body.t-meul .sc-products { padding: 112px 20px 96px; }
body.t-meul .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; padding: 0; }
body.t-meul .product-card, body.t-meul .product-card:hover { background: var(--surface); border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-meul .product-card .meta { padding: 22px 22px 28px; text-align: center; }
body.t-meul .product-card .t { font-family: var(--sf-serif); font-weight: 500; font-size: 16.5px; line-height: 1.35; }
/* green 3 of 3 */
body.t-meul .product-card .p { color: var(--meu-green); font-size: 15px; font-weight: 600; margin-top: 10px; }

/* the close — full-bleed photograph, hessian banding it off the cream */
body.t-meul .sc-banner { margin: 0 calc(50% - 50vw); border-top: 28px solid var(--meu-hessian); border-bottom: 28px solid var(--meu-hessian); min-height: 64vh; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
body.t-meul .sc-banner h2 { font-family: var(--sf-serif); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(21px, 3.4vw, 40px); line-height: 1.25; margin: 0 0 16px; }

/* the ask — narrowest measure on the page, hairlines instead of boxes */
body.t-meul .sc-contact { max-width: 540px; padding: 106px 20px 112px; }
body.t-meul .sc-field label { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted); }
body.t-meul .sc-field input, body.t-meul .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 12px 2px; color: var(--heading); }

@media (max-width: 900px) {
  body.t-meul .product-grid, body.t-meul .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-meul .sc-about-split { gap: 34px; }
}

/* NIGHT — the cream goes to damp mill-floor black and the hessian drops to a
   barely-lit loam, so the two wide beats still band off the ground. The green
   lifts because it is still doing all three of its jobs. The cards stay a
   raised charcoal rather than going transparent: the bags are shot on white
   and a bare card would cut a hard square out of every one of them. */
html[data-theme="dark"] body.t-meul {
  background: #17130e; color: #c4bbaa;
  --bg-flat: #17130e; --surface: #201b14; --surface-2: #272117;
  --line: #2f2820; --line-strong: #453c2e;
  --heading: #f4efe2; --text: #c4bbaa; --muted: #8b8171; --header-bg: #17130e;
  --meu-green: #8fb388; --meu-hessian: #2b241a;
}
html[data-theme="dark"] body.t-meul .sf-head, html[data-theme="dark"] body.t-meul .sf-header,
html[data-theme="dark"] body.t-meul .sf-foot, html[data-theme="dark"] body.t-meul .sf-footer,
html[data-theme="dark"] body.t-meul .sf-cats { background: #17130e; border-color: #2f2820; }
html[data-theme="dark"] body.t-meul .btn.brand { color: #141a12; }
html[data-theme="dark"] body.t-meul .btn.brand:hover { background: #a6c69e; color: #141a12; }
html[data-theme="dark"] body.t-meul .sc-strip-label { color: #cbc2b1; }