/* =============================================================================
   HOWEA Provisions — Concept 02 "After Service" — site styles
   Reads tokens.css. Sections:
     1 Base & type          6 The pass & the lamp (signature device)
     2 Layout               7 Numerals, photo stages
     3 Skip links, masthead 8 Rooms (homepage)
     4 Menu dialog, bar     9 Daylight: the prep sheet
     5 Buttons & links     10 Footer, seal
    11 Inner pages: local nav, breadcrumbs   12 The oil (product page)
    13 Selection   14 Motion   15 Forced colours, print   16 Utilities
   ========================================================================== */

/* 1 · Base & type ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  scroll-padding-top: 1rem;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 420;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-wrap: break-word;       /* very large text settings: break a word rather than the layout */
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; }
a[href^="mailto:"] { overflow-wrap: anywhere; }   /* a long address may break, never the layout */
/* Very large text settings on a phone: one-column grids keep to the screen.
   Zero specificity, so every layout rule further down still wins. */

button { font: inherit; color: inherit; }
::selection { background: var(--oil); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: var(--w-d);
  font-optical-sizing: auto;
  letter-spacing: calc(var(--track-display) * var(--tk));
  line-height: var(--lh-head);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: calc(-0.012em * var(--tk)); line-height: 1.12; }
p { text-wrap: pretty; }

.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg); max-width: 34em; }
.quiet { color: var(--fg-2); }
.small { font-size: var(--t-small); line-height: 1.5; }
.year { font-variant-numeric: lining-nums; }   /* accent discipline: the year is plain text */
.nowrap { white-space: nowrap; }
/* em media queries follow the reader's default text size: under 19em is a phone set to
   very large text (390 px at 24 px text is 16em). There, words may break anywhere and
   kept-together phrases may wrap, so nothing is pushed off the screen. */
@media (max-width: 19em) { body { overflow-wrap: anywhere; } .nowrap { white-space: normal; } }

/* 2 · Layout ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main { display: block; }

/* 3 · Skip links & masthead ------------------------------------------------ */

.skips { position: absolute; top: 0; left: 0; z-index: 100; }
.skip {
  position: absolute; top: 0.5rem; left: 0.5rem;
  white-space: nowrap;
  padding: 0.75rem 1.1rem;
  background: var(--oil); color: var(--ink);
  font-weight: 600; text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; outline-color: var(--bone); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; }
/* the box runs to the lowest ink (78.3 units: the O and the E's arm overshoot the
   baseline at 74.9); --logo-height keeps meaning the cap-to-baseline height */
.logo__mark { height: calc(var(--logo-height) * 78.3 / 74.9); width: auto; max-width: 100%; aspect-ratio: 789.2 / 78.3; fill: currentColor; }

.masthead {
  --logo-height: min(1.125rem, 5vw);
  position: relative;
  z-index: 20;
  background: var(--bg);
  color: var(--fg);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  min-height: var(--header-h);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.masthead .logo { margin-right: auto; padding-block: 0.75rem; }
.masthead__nav { display: none; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.masthead__nav a,
.footer a,
.menu__direct a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--hover) linear;
}
.masthead__nav a { padding-block: 0.6rem; font-size: 1rem; }
.masthead__nav a:hover,
.masthead__nav a[aria-current],
.masthead__nav a.is-section,
.footer a:hover,
.menu__direct a:hover { color: var(--fg); }
.masthead__nav a[aria-current],
.masthead__nav a.is-section { text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; text-decoration-color: var(--fg-2); }
.masthead .masthead__cta,
.masthead .masthead__call { display: none; }

.menu-open,
.menu-fallback {
  display: none;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  border: 0; background: none;
  color: var(--fg);
  font-weight: 560; font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.has-dialog .menu-open { display: inline-flex; align-items: center; }
.menu-open, .menu-fallback { flex: none; white-space: nowrap; overflow-wrap: normal; }
html:not(.has-dialog) .menu-fallback { display: inline-flex; align-items: center; }

@media (min-width: 60em) {
  .masthead { position: sticky; top: 0; --logo-height: 1.375rem; }
  .masthead__nav { display: flex; }
  .masthead .theme { display: inline-flex; }
  .masthead .masthead__cta { display: inline-flex; }
  /* On the tasting page itself the button would only reload the page: offer the phone instead. */
  .masthead:has(.masthead__cta[aria-current]) .masthead__cta { display: none; }
  .masthead:has(.masthead__cta[aria-current]) .masthead__call { display: inline-flex; }
  .has-dialog .menu-open,
  html:not(.has-dialog) .menu-fallback { display: none; }
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }
}

/* Theme control: two buttons, Dark and Light, each aria-pressed, in a quiet
   steel frame — smaller than the CTA, never competing with it. In the masthead
   below 75em only the icons show (the words stay for screen readers). */
.theme {
  display: inline-flex; align-items: center;
  padding: 2px;
  border: 1px solid var(--rule);
  flex: none;
}
.theme__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.25rem; min-width: 2.25rem;
  padding: 0.3rem 0.65rem;
  border: 0; background: none; cursor: pointer;
  color: var(--fg-2);
  font-size: 0.875rem; font-weight: 520; line-height: 1;
  transition: color var(--hover) linear, background-color var(--hover) linear;
}
.theme__opt:hover { color: var(--fg); }
.theme__opt[aria-pressed="true"] { background: var(--rule); color: var(--fg); }
.theme__icon { width: 0.875rem; height: 0.875rem; fill: currentColor; flex: none; }
.theme__icon--light { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (max-width: 59.99em) { .masthead .theme { display: none; } }
@media (min-width: 60em) and (max-width: 74.99em) {
  .masthead .theme__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .masthead .theme__opt { padding-inline: 0.5rem; }
}
/* More contrast asked for: the site is already in daylight, so the control would do nothing. */
@media (prefers-contrast: more) { .theme { display: none !important; } }

/* 4 · Menu dialog & bottom bar ------------------------------------------- */

.menu {
  width: 100%; max-width: none;
  height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.menu-is-open { overflow: hidden; }
.menu::backdrop { background: var(--glass); }
.menu__inner {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: 0 0 max(1.5rem, env(safe-area-inset-bottom));
}
.menu__top, .menu__nav, .menu__foot { padding-inline: var(--gutter); }
.menu__top { --logo-height: min(1.125rem, 5vw); display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.menu__close {
  min-height: 2.75rem; padding: 0.5rem 0.25rem 0.5rem 1rem;
  border: 0; background: none; cursor: pointer;
  font-weight: 560; font-size: 1rem;
}
.menu__nav { margin-block: auto 0; padding-block: 1.5rem 1.25rem; }
.menu__nav a {
  display: block;
  padding-block: 0.3rem;
  font-family: var(--serif); font-weight: var(--w-d);
  font-size: min(clamp(2.5rem, 1.6rem + 4vw, 3.5rem), 12.6vw);
  line-height: 1.08; letter-spacing: calc(-0.02em * var(--tk));
  text-decoration: none;
}
/* the lamp is on the page you are on (on the homepage, on the oil) */
.menu__nav a[aria-current],
.menu__nav a.is-section,
.menu__nav ul:not(:has([aria-current], .is-section)) li:first-child a { color: var(--lamp-text); }
/* The pass runs under the list: the pool lands where the lit link stands,
   and the button stands on the steel. */
.menu__pass {
  --surface: 5.5rem;
  display: flex; flex-wrap: wrap; align-content: center; gap: 0.75rem;
  padding-block: 1rem !important;
  min-height: var(--surface);
  padding: 0 var(--gutter);
  background:
    linear-gradient(var(--pass-edge) 0 1px, transparent 1px),
    radial-gradient(ellipse 36% 70% at 22% 0%, rgb(var(--glow-rgb) / calc(0.3 * var(--lit))), rgb(var(--glow-rgb) / calc(0.1 * var(--lit))) 55%, transparent 100%),
    linear-gradient(var(--pass-top-1), var(--pass-top-2));
  border-bottom: 1px solid var(--pass-lip);
}
.menu__foot { display: grid; gap: 1rem; padding-top: 1.5rem; }
.menu__direct { display: grid; gap: 0.25rem; font-size: 1.125rem; }
.menu__direct a { padding-block: 0.4rem; color: var(--fg); }
.menu__place { color: var(--fg-2); }
.menu .theme { justify-self: start; }

.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem var(--gutter) max(0.6rem, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--rule);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.bar.is-shown { transform: none; visibility: visible; transition: transform 260ms var(--ease-out), visibility 0s; }
.bar__what { display: grid; min-width: 0; line-height: 1.25; font-size: 0.9375rem; white-space: nowrap; }
.bar__what > * { overflow: hidden; text-overflow: ellipsis; }
.bar__name { font-family: var(--serif); font-size: 1.125rem; font-weight: var(--w-d); letter-spacing: calc(-0.01em * var(--tk)); }
.bar__year { color: var(--fg-2); }
.bar .btn { flex: none; min-height: 3rem; white-space: nowrap; }
@media (max-width: 22.49em) { .bar .btn { padding-inline: 1rem; } .bar__what { font-size: 0.875rem; } }
@media (max-width: 19em) { .bar .btn { flex: 0 1 auto; white-space: normal; } }   /* very large text */
@media (prefers-reduced-motion: reduce) { .bar, .bar.is-shown, .theme__opt { transition: none; } }
@media (min-width: 60em) { .bar { display: none; } }
@media (max-width: 59.99em) { html { scroll-padding-bottom: calc(var(--bar-h) + 1rem); } }

/* 5 · Buttons & links -------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hover) linear, color var(--hover) linear, border-color var(--hover) linear;
}
.btn--oil { background: var(--oil); color: var(--ink); }
.btn--oil:hover { background: #D6CC5C; }
.btn--oil:focus-visible { outline-color: var(--focus); }

.masthead__cta { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 1rem; }

.go {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem;
  color: var(--fg);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--fg-3);
  transition: text-decoration-color var(--hover) linear, color var(--hover) linear;
}
.go:hover { text-decoration-color: currentColor; }
.go::after { content: "→"; font-family: var(--sans); text-decoration: none; display: inline-block; }
.go--plain::after { content: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }

/* 6 · Night and day variables -------------------------------------------------
   The menu's pass (a steel line under the list) is the one place the Concept 05
   counter survives; its colours live here. --glow-rgb warms the award scene. */
.night {
  --pass-edge: #2F3933;
  --pass-top-1: #151D18;
  --pass-top-2: #111813;
  --pass-lip: #29322C;
  --glow-rgb: 255 206 140;
}
.day,
:root[data-lights="up"] .night {
  --pass-edge: #C9C4B7;
  --pass-top-1: #ECE9E1;
  --pass-top-2: #E4E0D6;
  --pass-lip: #CFCABD;
  --glow-rgb: 255 206 140;
}
/* More contrast asked for: everything is daylight, so the steel is too. */
@media (prefers-contrast: more) {
  .night {
    --pass-edge: var(--ink-2);
    --pass-top-1: var(--daylight);
    --pass-top-2: var(--daylight);
    --pass-lip: var(--ink-2);
  }
}

/* 7 · Small type -------------------------------------------------------------- */
.eyebrow {
  font-size: var(--t-small);
  color: var(--fg-2);
  margin-bottom: 0.9rem;
}

/* 9 · Daylight: the prep sheet ----------------------------------------------
   The lights come up: a hard cut to working daylight. No boxes, no tiles, no
   hairlines: each fact is one wide line, its value set big in ink and its
   sentence beside it; groups are marked by one 3px ink rule over their title
   (used nowhere else); the sheet ends on one line at display size. */
.sheet {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--s-8);
}
.sheet__head { display: grid; gap: 1.25rem var(--s-6); margin-bottom: var(--s-7); }
.sheet__title {
  font-size: min(clamp(2.75rem, 1.1rem + 6.6vw, 7.5rem), 13vw);
  font-variation-settings: "opsz" 72;
  line-height: 0.94;
  letter-spacing: calc(-0.038em * var(--tk));
  max-width: 11em;
}
.sheet__lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); max-width: 30em; }
.btn--ink { background: var(--ink); color: var(--daylight); }
.btn--ink:hover { background: #2B302B; }

/* Two daylight sheets in a row (e.g. when recognition is not yet approved): a hairline between. */
.sheet.day + .sheet.day { border-top: 1px solid var(--rule); }

.files__title {
  padding-top: 1.1rem;
  border-top: 3px solid var(--fg);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: calc(-0.022em * var(--tk));
}

/* The person, at display size (homepage and contact only). */

/* The sheet's last line: said once, at display size, the action beside it. */
.closing { display: grid; gap: var(--s-5); margin-top: var(--s-8); align-items: end; }
.closing__line {
  font-family: var(--serif);
  font-weight: var(--w-d);
  font-variation-settings: "opsz" 72;
  font-size: var(--t-h2);   /* Concept 06: said at heading size, not as a second hero */
  line-height: 1;
  letter-spacing: calc(-0.03em * var(--tk));
  max-width: 14em;
  text-wrap: balance;
}

@media (min-width: 60em) {
  .closing { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); }
  .closing__line { grid-column: 1; }
  .closing__act { grid-column: 2; padding-bottom: 0.6rem; }
  
  .closing:not(:has(.closing__line)) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .closing:not(:has(.closing__line)) .closing__act { grid-column: 1; padding: 0; }
  
}

/* 10 · Footer & seal ------------------------------------------------------- */
.seal { display: inline-flex; align-items: center; gap: 0.9rem; max-width: 100%; }
/* The FLIP "Insured by" seal as FLIP shows it: square, no plate, no added background (its
   centre is transparent, so the sheet shows through). Width per page via --seal-w. */
.seal__plate { flex: none; display: block; width: var(--seal-w, 8.5rem); max-width: 100%; }
.seal__plate a { display: block; }
.seal__plate img { display: block; width: 100%; height: auto; }
.seal__text { min-width: 0; font-size: var(--t-small); color: var(--fg-2); max-width: 16em; line-height: 1.4; }

.footer {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: var(--s-7) 0 calc(var(--s-5) + var(--bar-h));
  border-top: 1px solid var(--rule);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.footer { --logo-height: clamp(1.6rem, 0.9rem + 2.6vw, 2.75rem); }
.footer .logo { display: flex; max-width: 100%; color: var(--fg); }
.footer .logo__mark { width: min(100%, var(--logo-height) * 10.54); height: auto; }   /* 10.54 = 789.2 / 74.9: same lettering size as before the box fix */
.footer__line { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.15; letter-spacing: calc(-0.012em * var(--tk)); margin-top: 1.5rem; max-width: 14em; }
.footer__place { color: var(--fg-2); margin-top: 0.75rem; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
.footer__nav a { display: inline-block; padding-block: 0.35rem; font-size: 1.0625rem; }
.footer__nav a[aria-current] { color: var(--fg); }
.footer__contact { display: grid; gap: 0.25rem; align-content: start; }
.footer__contact > p a { color: var(--fg); font-size: 1.0625rem; display: inline-block; padding-block: 0.3rem; }
.footer__contact .seal { margin-top: 1.25rem; }
.footer__legal {
  display: grid; gap: 0.5rem;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--fg-2);
}
.footer__legal .theme { justify-self: start; margin-top: 0.5rem; }
.footer__note { margin-top: 0.75rem; max-width: 22em; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
@media (min-width: 60em) {
  .footer { padding-bottom: var(--s-5); }
  .footer__inner { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__legal { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--s-5); }
  .footer__legal .theme { margin: 0; }
}

/* 11 · Inner pages: local navigation & breadcrumbs ------------------------- */

/* The product's own navigation. Sticks under the header on desktop and at the
   very top on phones (where the header scrolls away). */
.local {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
}
.local__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.local__name {
  display: none;
  margin-right: auto;
  font-family: var(--serif);
  font-weight: var(--w-d);
  font-size: 1.1875rem;
  letter-spacing: calc(-0.01em * var(--tk));
  white-space: nowrap;
}
.local__year { margin-left: 0.7rem; font-family: var(--sans); font-weight: 420; font-size: var(--t-small); letter-spacing: 0; color: var(--fg-2); }
.local__links { display: flex; flex-wrap: wrap; flex: 1; justify-content: space-between; gap: 0 0.75rem; }
.local__links a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--hover) linear;
}
.local__links a:hover,
.local__links a[aria-current] { color: var(--fg); }
.local__links a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; text-decoration-color: var(--fg-2); }

@media (max-width: 47.99em) {
  /* phones: one line that scrolls sideways, never two lines of sticky chrome */
  .local__links { flex-wrap: nowrap; justify-content: flex-start; gap: 0 1.35rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .local__links::-webkit-scrollbar { display: none; }
  /* the row fades at its right edge, so it reads as a row that scrolls */
  .local__links { padding-right: 2.5rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  .local__links a { white-space: nowrap; }
}
@media (min-width: 48em) {
  .local__name { display: block; }
  .local__links { flex: 0 1 auto; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
  .local__links a { font-size: 1rem; }
}
@media (min-width: 60em) { .local { top: var(--header-h); } }
html:has(.local) { scroll-padding-top: 3.75rem; }
@media (min-width: 60em) { html:has(.local) { scroll-padding-top: calc(var(--header-h) + 3.75rem); } }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; font-size: var(--t-small); color: var(--fg-2); }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--fg-3); }
.crumbs a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--fg-3);
  transition: color var(--hover) linear;
}
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); }

/* 12 · The oil (product page) -------------------------------------------------
   Six rooms in the dark, then the lights come up for the sheet and the
   paperwork, then they go down again for the tasting. */

/* Rooms 2–5 share one rhythm: a wall, a lit stage standing on the pass, a
   line or two on the counter. Stages alternate sides from room to room. */

/* Room 2 · The glass: raking light from the left */

   

/* Daylight · the specification: the name once, then one fact a line, in
   sentences — a sheet a buyer can read aloud, file or print. */


@media (min-width: 60em) {
  .spec__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

}

/* Daylight · producer & paperwork */
.maker { padding-block: var(--s-8); }
.maker__grid { display: grid; gap: var(--s-6); }
.maker__head h2 { font-size: min(clamp(2.5rem, 1.2rem + 5vw, 6rem), 12.6vw); line-height: 0.96; letter-spacing: calc(-0.035em * var(--tk)); max-width: 11em; }
.maker__body { display: grid; gap: 1rem; align-content: start; max-width: 36em; }
.maker__body .lead { color: var(--fg); }
/* 19 Oct 2026: the files are a ruled checklist beside the lede (one weight with it); the
   insurance line and the FLIP seal sit under the lede, so the two columns end together. */
.files { display: grid; gap: 0.9rem; align-content: start; }
.files__list { display: grid; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.3; letter-spacing: calc(-0.008em * var(--tk)); }
.files__list > li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.maker__body .files__ins { margin-top: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.maker .seal { margin-top: 0.25rem; }
.maker .seal { --seal-w: 10rem; }
@media (min-width: 60em) {
  .maker__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7.5rem); }
  .maker__head { grid-column: 1 / -1; }
  .files__title { padding-top: 0; border-top: 0; }
}

/* Product facts: two tables, the oil and its supply, ruled like the sheet. */
/* Product facts: the essentials, easy to scan. A measured width (never edge to
   edge), two balanced groups on wide screens, one column on phones, hairline rows,
   no boxes. Nothing here is a print or document function. */
.facts-wrap { max-width: calc(68rem + 2 * var(--gutter)); }
.facts__head { display: grid; gap: 0.75rem; margin-bottom: var(--s-6); }
.facts { display: grid; gap: var(--s-6); }
.facts__group { display: grid; align-content: start; }
.facts__cap {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); padding-bottom: 0.75rem;
}
.facts__list { margin: 0; }
.facts__row {
  display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 5fr); gap: 0.25rem 1.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.facts__row:first-child { border-top: 1px solid var(--rule); }
.facts__row dt { font-size: var(--t-small); font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; }
.facts__row dd { margin: 0; font-size: var(--t-body); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.facts__ask { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; color: var(--fg-2); }
@media (max-width: 29.99em) {
  .facts__row { grid-template-columns: minmax(0, 1fr); padding: 0.85rem 0; }
}
@media (min-width: 60em) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); } }

/* Ordering in four lines, then the files. */
.terms { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.terms li { color: var(--fg-2); line-height: 1.5; }
.terms b { color: var(--fg); font-weight: 600; }
.files__ins { max-width: 26em; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }

/* 13 · Forms, questions and the notice (daylight) ------------------------- */

/* Tasting · daylight: the request ------------------------------------------- */
.day, :root[data-lights="up"] {
  --field: #FFFDF9;
  --field-line: #6F746C;   /* 4.4 : 1 on daylight, 4.7 : 1 on the field */
  --error: #9B2C1F;        /* 6.6 : 1 on daylight, 7.5 : 1 on the field */
}
.request { padding-block: var(--s-7) var(--s-8); }
.request__grid { display: grid; gap: var(--s-7); }
.request__head { display: grid; gap: 0.25rem; margin-bottom: var(--s-6); max-width: 44rem; }
.request__head h2 { font-size: min(clamp(2.5rem, 1.2rem + 5vw, 6rem), 12.6vw); line-height: 0.96; letter-spacing: calc(-0.035em * var(--tk)); }
.request__head .quiet { margin-top: 0.75rem; max-width: 34em; font-size: var(--t-lead); line-height: 1.45; }

.form__grid { display: grid; gap: 1.5rem 1.5rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field__label { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--fg); }
.opt { font-weight: 420; font-size: var(--t-small); color: var(--fg-2); margin-left: 0.3rem; }
.field__hint { font-size: var(--t-small); line-height: 1.4; color: var(--fg-2); }
.field__error { display: none; font-size: var(--t-small); line-height: 1.4; font-weight: 600; color: var(--error); }
.has-error .field__error { display: block; }
.input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.has-error .input { border-color: var(--error); box-shadow: inset 4px 0 0 var(--error); }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 52%, calc(100% - 1rem) 52%;
  background-size: 0.36rem 0.36rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.textarea { min-height: 9rem; resize: vertical; }
.choices { margin: 1.75rem 0 0; padding: 0; border: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 0.5rem; }
.choices__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 29.99em) {
  .choices__row { display: grid; grid-template-columns: auto auto auto; gap: 0.4rem; }
  .choice { gap: 0.45rem; padding: 0.5rem 0.6rem; font-size: 0.9375rem; }
}
@media (max-width: 22.49em) { .choices__row { grid-template-columns: minmax(0, 1fr); } }
.choice {
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-height: 3rem;
  padding: 0.55rem 1.05rem 0.55rem 0.85rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  line-height: 1.25;
}
.choice input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--ink); flex: none; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
#field-note { margin-top: 1.75rem; }
.choices { margin: 0 0 1.75rem; }
.form__privacy { margin-top: 1.25rem; max-width: 40em; color: var(--fg-2); }
.form__privacy b { color: var(--fg); font-weight: 600; }
.form__privacy a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.alert__act { margin-top: 0.5rem; gap: 0.75rem 1rem; }
.turnstile { margin-top: 1.5rem; min-height: 65px; }
.aside__ins { display: grid; gap: 1rem; justify-items: start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__send { display: grid; gap: 0.6rem; justify-items: start; margin-top: 2rem; }
.form__send .small { max-width: 34em; }
.form__send a, .status a, .alert a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.btn--send { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.125rem; margin-bottom: 0.4rem; }
.btn--line { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--line:hover { background: var(--bg-raised); }
.masthead__call { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 1rem; border-color: var(--fg-3); }
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.alert {
  display: grid; gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.25rem 1.25rem 1.4rem;
  background: var(--field);
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--error);
}
.alert:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.alert__title { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.2; }
.alert__list { display: grid; gap: 0.25rem; margin: 0; padding-left: 1.1rem; }
.alert__list a { color: var(--error); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
#status-failed { margin: 1.5rem 0 0; }

.status { display: grid; gap: 1rem; padding-top: 1.1rem; border-top: 3px solid var(--fg); }
.status:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.status__title { font-size: var(--t-h2); max-width: 12em; }
.status p { max-width: 36em; }
.status .eyebrow { margin: 0; }
.status .actions { gap: 0.75rem 1rem; margin-top: 0.5rem; }

.request__aside { display: grid; gap: var(--s-6); align-content: start; }
.aside__title { padding-top: 1rem; border-top: 3px solid var(--fg); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); margin-bottom: 0.75rem; }
/* phone and email as two aligned rows (no stranded "Or" between them) */
.aside__contact { display: grid; gap: 0.5rem; margin: 0; }
.aside__contact > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.aside__contact dt { font-size: var(--t-small); font-weight: 600; color: var(--fg-2); }
.aside__contact dd { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.3; overflow-wrap: anywhere; }
.aside__contact a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.aside__who { margin-top: 0.75rem; color: var(--fg-2); font-size: var(--t-small); }
.next { display: grid; gap: 1rem; }
.next li { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; }
.next__n { font-family: var(--serif); font-size: 2.25rem; line-height: 0.8; font-weight: var(--w-d); color: var(--accent-text); }
.next p { color: var(--fg-2); max-width: 24em; }
.request__aside .seal { --seal-w: 9rem; }
@media (min-width: 40em) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
  .request__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-7); align-items: start; }
  .request__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Questions · daylight prep sheet ------------------------------------------- */
/* No bars, no fills: each question is a line of serif on the sheet, a small
   oil-dark plus in the margin that turns to a minus when it opens. */
.faq-page { padding-block: var(--s-7) var(--s-8); }
.faq__layout { display: grid; gap: var(--s-6); }
.faq__index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem var(--s-4); }
.faq__index ul a {
  display: inline-block;
  overflow-wrap: anywhere;
  padding-block: 0.4rem;
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.15; letter-spacing: calc(-0.012em * var(--tk));
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--hover) linear;
}
.faq__index ul a:hover,
.faq__index ul a[aria-current] { color: var(--fg); }
.faq__index ul a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--fg); }
.faq__ask { display: none; }
.faq__ask a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qa { scroll-margin-top: 1.5rem; }
.qa + .qa { margin-top: var(--s-8); }
.qa__title {
  padding-top: 1.1rem;
  border-top: 3px solid var(--fg);
  font-size: min(clamp(2.25rem, 1.1rem + 4.4vw, 5rem), 11.4vw);
  line-height: 0.98;
  letter-spacing: calc(-0.035em * var(--tk));
  margin-bottom: var(--s-5);
}
.qa details { --indent: 2.25rem; }
.qa summary {
  position: relative;
  display: block;
  padding: 0.625rem 0 0.625rem var(--indent);
  font-family: var(--serif); font-weight: var(--w-d);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem);
  line-height: 1.18; letter-spacing: calc(-0.014em * var(--tk));
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before,
.qa summary::after {          /* plus, then minus: two bars, the upright one turns flat */
  content: "";
  position: absolute; left: 0.2rem; top: calc(0.625rem + 0.6em);
  width: 0.9rem; height: 2px;
  background: var(--fg-2);
  transition: transform var(--hover) var(--ease-out);
}
.qa summary::after { transform: rotate(90deg); }
.qa details[open] summary::after { transform: rotate(0deg); }
.qa summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--fg-3); }
.faq__answer { padding: 0.25rem 0 1.5rem var(--indent); max-width: calc(60ch + var(--indent)); }
.faq__answer p { color: var(--fg); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; }
.faq__answer a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }
@media (min-width: 60em) {
  .faq__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s-7); align-items: start; }
  .faq__index { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.5rem; }
  .faq__index ul { grid-template-columns: 1fr; }
  .faq__ask { display: block; max-width: 16em; }
  .qa { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .qa details { --indent: 2.75rem; }
}

/* Privacy · daylight, plain, readable --------------------------------------- */
.notice { padding-block: var(--s-7) var(--s-8); }
.notice__grid { display: grid; gap: var(--s-6); }
.notice__short { align-self: start; }
.notice__short-title { padding-top: 1rem; border-top: 3px solid var(--fg); font-size: var(--t-h3); margin-bottom: 0.75rem; }
.notice__short ul { display: grid; gap: 0.6rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.3; }
.prose { max-width: 40em; }
.prose section + section { margin-top: var(--s-6); }
.prose h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem); margin-bottom: 0.4rem; }
.prose__n { color: var(--fg-3); margin-right: 0.3em; }
.prose h3 { margin-top: 1.5rem; font-family: var(--sans); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.prose p, .prose ul, .prose ol { margin-top: 0.75rem; }
.prose :is(ul, ol) { padding-left: 1.15rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--fg-3); }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose section { scroll-margin-top: 1.5rem; }
@media (min-width: 60em) {
  .notice__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-7); }
  .notice__short { position: sticky; top: calc(var(--header-h) + 2rem); }
  .prose section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
}

/* 14 · Motion ----------------------------------------------------------------
   Concept 06 keeps motion to what helps: same-page anchors glide (section 17,
   scroll-behavior, only without a reduced-motion request) and buttons and
   links ease their colours on hover. Nothing animates on load or on scroll. */

/* 15 · Forced colours & print ----------------------------------------------- */
@media (forced-colors: active) {
  .btn { border: 1px solid CanvasText; }
  .menu__pass { border-top: 1px solid CanvasText; background: none; }
  .local { border-bottom: 1px solid CanvasText; }
  .theme__opt[aria-pressed="true"] { outline: 2px solid ButtonText; }
  .qa summary::before, .qa summary::after { background: CanvasText; }
  .o-photo--lamp::after { display: none; }
}

/* Print: black type on white, no chrome, no photographs except the product's
   own bottle on its sheet. The oil page prints as a product sheet a buyer can
   file. A claim still pending owner sign-off NEVER prints (preview prints get
   passed around); retired claims cannot exist in a page (the build fails). */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  [data-claim-pending] { display: none !important; }
  .skips, .sprite, .masthead__nav, .masthead__cta, .masthead__call, .menu-open, .menu-fallback,
  .menu, .bar, .theme, .actions, .local, .crumbs, .go[href^="#"],
  .footer__nav, .footer__note, .footer .seal, .seal, .o-hero__more, .o-awards__all > summary,
  .o-photo, .o-taste, .p-close, .o-house__producer a, .p-links { display: none !important; }
  .closing__line { font-size: 14pt !important; }
  h2, h3, .o-awards__head, .maker__head, .facts__cap { break-after: avoid-page; break-inside: avoid; }
  .o-hero--product .o-hero__photo { display: block !important; width: 34mm; float: right; margin: 0 0 4mm 6mm; }
  .o-hero--product .o-hero__photo img { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; max-height: 60mm; }
  .o-hero--product .o-hero__photo picture { position: static !important; }
  .o-photo--lamp::after { display: none !important; }

  html, body { background: #fff !important; }
  body *, body *::before, body *::after {
    color: #000 !important; -webkit-text-fill-color: #000 !important;
    background: transparent !important; box-shadow: none !important; text-shadow: none !important;
    border-color: #999 !important;
  }
  body { font-size: 10.5pt; line-height: 1.4; }
  h1 { font-size: 24pt !important; } h2 { font-size: 16pt !important; } h3 { font-size: 12pt !important; }
  .o-name__brand, .p-feature__name, .sheet__title, .p-head__title, .p-close__line, .aw-lead__result { font-size: 20pt !important; line-height: 1.1 !important; }
  .o-hero, .o-hero__copy, .p-head__in, .p-sec__in, .o-awards__in, .o-plate__in, .o-origin__in, .o-house__in,
  .p-split, .p-feature, .request__grid, .form__grid, .maker__grid, .spec__head, .footer__inner {
    display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-width: none !important;
  }
  .o-hero__copy > *, .p-head__copy > *, .p-sec__in > *, .o-awards__in > *, .maker__grid > * { margin: 0 0 2.5mm !important; }
  section, .sheet, .footer { padding: 3mm 0 !important; border: 0 !important; }
  .sheet { clear: both; }
  .wrap { padding: 0 !important; }
  a { text-decoration: none !important; }
  .masthead { position: static !important; }
  .masthead__bar { min-height: 0; padding: 0 0 2mm; }
  /* the full award record prints even where it is folded away on screen */
  .o-awards__all > .o-awards__record { display: block !important; }
  .aw-lead { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 4mm !important; margin: 2mm 0 !important; }
  .aw-lead__i { padding: 1mm 0 !important; }
  .aw-rec { gap: 2mm !important; }
  .aw-rec__row { padding: 0.6mm 0 !important; display: block !important; font-size: 8.5pt !important; }
  .aw-rec__row > .aw-rec__sep { display: inline !important; }
  .aw-rec__place { font-size: 9.5pt !important; }
  .aw-rec__comp { font-size: 8.5pt !important; }
  .o-menu li { padding: 0.6mm 0 !important; }
  .o-menu__dish { font-size: 11pt !important; }
  .o-steps li, .o-four li, .p-list li, .p-dl > div, tr, .aw-rec__row { break-inside: avoid; }
  h2, h3, .facts__cap { break-after: avoid; }
  /* a visitor's own print stays readable; the site offers no print button or sheet */
  .facts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 5mm !important; }
  .facts__row { padding: 0.8mm 0 !important; font-size: 9pt !important; }
  .files__list { font-size: 9.5pt !important; gap: 0 !important; }
  .footer { font-size: 9pt; }
  .footer .logo, .footer__place { display: none !important; }
  .footer__contact p, .footer__legal p { display: inline; margin-right: 4mm; }
}

/* 16 · Utilities ---------------------------------------------------------- */
/* Gated claims, preview only. The build marks pending claims with
   data-claim-pending; dist/ removes them, so this tag can never ship. */
@media screen {
  /* one quiet label: a hairline pill in the secondary text colour, never a fill */
  [data-claim-pending] { position: relative; }
  [data-claim-pending]::before {
    content: "Pending owner sign-off";
    content: "Pending owner sign-off" / "";
    display: block;
    width: fit-content;
    margin-bottom: 0.45rem;
    padding: 0.22rem 0.42rem 0.2rem;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: var(--fg-2);
    font: 600 0.5625rem/1 var(--sans);
    letter-spacing: 0.1em; text-transform: uppercase;
    font-variant-numeric: normal;
    -webkit-text-fill-color: var(--fg-2);
    white-space: nowrap; pointer-events: none;
    opacity: 0.85;
  }
  /* inside a sentence: the words get a dashed underline and the label follows them */
  span[data-claim-pending] { text-decoration: underline dashed var(--fg-3); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  span[data-claim-pending]::before { content: none; }
  span[data-claim-pending]::after {
    content: "Pending";
    content: "Pending" / "";
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.18rem 0.32rem 0.16rem;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: var(--fg-2);
    font: 600 0.5625rem/1 var(--sans);
    letter-spacing: 0.1em; text-transform: uppercase;
    vertical-align: 0.15em;
    text-decoration: none;
    white-space: nowrap; pointer-events: none;
    opacity: 0.85;
  }
  /* a whole section: the label sits in its top corner, out of the layout */
  section[data-claim-pending]::before { position: absolute; z-index: 6; top: 0.9rem; right: var(--gutter); margin: 0; }
  .seal[data-claim-pending] { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .seal[data-claim-pending]::before { margin: 0; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* 17 · Concept 06 "Oro House" — the photographed home and product pages -----
   Real producer photographs replace the empty stages. The lamp survives only as
   warm light laid over a photograph's edge (.o-photo--lamp). Dark sections are
   bottle-glass; daylight sections are warm paper. One accent (#C8BE4E), used for
   the primary action and the award results only.                              */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.o-eyebrow {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2);
}
.o-cap { margin-top: 0.75rem; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
.o-filetype { color: var(--fg-2); font-weight: 450; }

/* A photograph. It is cropped by its frame (object-fit), never stretched. */
.o-photo { position: relative; margin: 0; }
.o-photo picture, .o-photo img { width: 100%; }
.o-photo img { height: 100%; object-fit: cover; }
/* the lamp, as light on a real photograph: a warm falloff from one top corner */
.o-photo--lamp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 85% -10%, rgb(255 214 150 / calc(0.16 * var(--lit))), transparent 60%),
    linear-gradient(to top, rgb(14 21 17 / calc(0.28 * var(--lit))), transparent 30%);
  mix-blend-mode: normal;
}
.o-photo--lamp figcaption { position: relative; z-index: 1; }
/* The genuine 500 mL bottle (the transparent master, trimmed; v4) on a warm ivory
   panel: always whole (contain, never cropped or enlarged past its source), a soft
   contact shadow under the base. The panel sets the size; the bottle sits inside it. */
.o-photo--bottle {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(70% 55% at 50% 38%, rgb(255 252 242 / 0.55), transparent 75%),
    linear-gradient(#F1EBDC, #E4DAC5);
  outline: 1px solid rgb(238 231 215 / 0.14); outline-offset: -1px;
}
.o-photo.o-photo--bottle picture { position: absolute; inset: 7% 0 6%; }
.o-photo.o-photo--bottle img {
  width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto;
  object-fit: contain; object-position: 50% 100%;
  background: none; filter: drop-shadow(0 0.45rem 0.35rem rgb(58 44 24 / 0.22));
}
/* H1 (home only): the bottle stands right of centre with sky above the cap; the
   frame may trim the edges of the scene but never the cap or the base. */
.o-photo--h1 img { object-position: 62% 58% !important; }
/* P1: the frame is the image's own 1678 × 2048 (white side strips already removed
   in the derivative), so nothing else is cut. */
.o-photo--p1 img { aspect-ratio: 1678 / 2048 !important; object-fit: contain; }

/* ---- Product name: the brand in display serif, the kind in spaced caps ---- */
.o-name { display: grid; gap: 0.6rem; font-weight: var(--w-d); line-height: 1; }
.o-name__brand {
  font-size: min(clamp(3.5rem, 1.6rem + 6.4vw, 8rem), 17vw);
  letter-spacing: calc(-0.03em * var(--tk)); line-height: 0.92;
  color: var(--lamp-text);
}
.o-name__kind {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3;
  color: var(--fg);
}
.o-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-size: var(--t-body); color: var(--fg-2); }
.o-facts span + span::before { content: "·"; padding-inline: 0.6em; color: var(--fg-3); }

/* ---- 1 · Hero: copy and the bottle; the table below the copy ---------------- */
.o-hero {
  background: var(--bg); color: var(--fg);
  display: grid; gap: 0;
  padding-bottom: var(--s-7);
}
.o-hero__copy { padding: var(--s-5) var(--gutter) 0; display: grid; gap: 1.1rem; align-content: start; }
.o-hero__copy .o-eyebrow { order: -1; }
.o-hero__lede { font-size: var(--t-lead); line-height: 1.45; max-width: 30em; color: var(--fg); }
.o-hero__actions { margin-top: 0.4rem; gap: 0.75rem; }
.o-hero__more { margin-top: -0.25rem; }
.o-hero__award { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: 32rem; }
.o-hero__award a { display: grid; gap: 0.15rem; text-decoration: none; color: var(--fg); }
.o-hero__award-what { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; }
.o-hero__award-when { font-size: var(--t-small); letter-spacing: 0.08em; color: var(--accent-text); font-variant-numeric: lining-nums tabular-nums; }
.o-hero__award a:hover .o-hero__award-what { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.o-hero__photo { order: -1; }
.o-hero__photo img { aspect-ratio: 4 / 5; max-height: 62svh; object-position: 30% 45%; }

@media (min-width: 48em) {
  .o-hero {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4.5vw, 5rem);
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin-inline: auto;
    padding: clamp(1.5rem, 3.5vh, 3rem) var(--gutter) var(--s-7);
  }
  .o-hero__copy { grid-column: 1; grid-row: 1; padding: clamp(0.5rem, 3vh, 2.5rem) 0 0; gap: 1.25rem; }
  .o-hero__photo { order: 0; grid-column: 2; grid-row: 1 / span 2; position: relative; }
  .o-hero__photo picture { position: absolute; inset: 0; }
  .o-hero__photo img { aspect-ratio: auto; height: 100%; min-height: 34rem; max-height: none; object-position: 0% 45%; }
}

/* ---- 2 · Distinctions: one typographic scene -------------------------------- */
.o-awards {
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(var(--glow-rgb) / calc(0.11 * var(--lit))), transparent 70%),
    var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--rule);
}
.o-awards__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-7);
}
.o-awards__head { display: grid; gap: 1rem; max-width: 52rem; }
.o-awards__head h2 { max-width: 16em; }

.aw-lead { display: grid; gap: 0; margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.aw-lead__i {
  display: grid; gap: 0.35rem; align-content: start;
  padding-block: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.aw-lead__place { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.aw-lead__res { display: grid; gap: 0.15rem; }
.aw-lead__r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; }
.aw-lead__result {
  font-family: var(--serif); font-weight: var(--w-d);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); line-height: 1;
  letter-spacing: calc(-0.025em * var(--tk));
  color: var(--accent-text);
}
.aw-lead__r + .aw-lead__r .aw-lead__result { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); color: var(--lamp-text); }
.aw-lead__years { font-size: 1.0625rem; font-weight: 560; letter-spacing: 0.06em; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.aw-lead__note { font-size: 1.0625rem; font-weight: 560; color: var(--fg); }
.aw-lead__comp { color: var(--fg-2); font-size: var(--t-small); line-height: 1.45; max-width: 24em; }
.aw-lead__product { color: var(--fg-2); font-size: var(--t-small); line-height: 1.45; }
@media (min-width: 48em) {
  .aw-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3.5rem); border-bottom: 1px solid var(--rule); }
  .aw-lead__i { border-bottom: 0; padding-block: var(--s-5); }
}

.o-awards__foot { margin-top: var(--s-5); display: grid; gap: 1.25rem; }
.aw-scope { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; max-width: 26em; color: var(--fg); }
.o-awards__all > summary {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 3rem; padding: 0.6rem 1.25rem;
  border: 1px solid var(--fg-3); cursor: pointer; list-style: none;
  font-weight: 600; color: var(--fg);
  transition: border-color var(--hover) linear, background-color var(--hover) linear;
}
.o-awards__all > summary::-webkit-details-marker { display: none; }
.o-awards__all > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; font-weight: 400; }
.o-awards__all[open] > summary::after { content: "−"; }
.o-awards__all > summary:hover { border-color: var(--fg); background: var(--bg-raised); }
.o-awards__close, .o-awards__all[open] .o-awards__open { display: none; }
.o-awards__all[open] .o-awards__close { display: inline; }
.o-awards__record { padding-top: var(--s-5); }
.o-awards__note { margin-top: var(--s-5); color: var(--fg-2); display: grid; gap: 0.5rem; justify-items: start; max-width: 40em; }

/* the complete record: place · competition · result — years, one line each */
.aw-rec { display: grid; gap: var(--s-5); }
.aw-rec__title {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2);
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule);
}
.aw-rec__n { margin-left: 0.5em; color: var(--fg-3); letter-spacing: 0.04em; }
.aw-rec__list { display: grid; }
.aw-rec__row {
  display: grid; gap: 0.15rem;
  padding-block: 0.9rem; border-bottom: 1px solid var(--rule);
}
.aw-rec__row > .aw-rec__sep { display: none; }
.aw-rec__place { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; color: var(--fg); }
.aw-rec__comp { color: var(--fg-2); font-size: var(--t-small); line-height: 1.45; }
.aw-rec__res { color: var(--fg); font-weight: 560; line-height: 1.5; }
.aw-rec__dash { color: var(--fg-3); font-weight: 400; }
.aw-rec__years { font-variant-numeric: lining-nums tabular-nums; }
.aw-rec__res .aw-rec__sep { color: var(--fg-3); font-weight: 400; }
@media (min-width: 60em) {
  .aw-rec__row { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 2rem; align-items: baseline; }
  .aw-rec__comp { font-size: var(--t-body); }
}

/* ---- 3 · On the plate: a menu card in warm daylight ------------------------- */
.o-plate { --bg: #EFE8D8; background: var(--bg); color: var(--fg); }
:root[data-lights="up"] .o-plate { --bg: #EFE8D8; }
.o-plate__in {
  max-width: calc(64rem + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter);
  display: grid; gap: var(--s-4); justify-items: center; text-align: center;
}
.o-plate__title { font-size: var(--t-h2); }
.o-plate__taste {
  font-family: var(--serif); font-weight: var(--w-d2); font-style: normal;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.22;
  max-width: 22em; letter-spacing: calc(-0.012em * var(--tk));
}
.o-menu { display: grid; width: 100%; max-width: 44rem; margin-top: var(--s-4); border-top: 1px solid #CFC6B2; }
.o-menu li { display: grid; gap: 0.15rem; justify-items: center; padding-block: 1rem; border-bottom: 1px solid #CFC6B2; }
.o-menu__dish { font-family: var(--serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; }
.o-menu__how { color: var(--fg-2); font-size: var(--t-small); letter-spacing: 0.02em; }
.o-plate__note { color: var(--fg-2); max-width: 30em; }

/* ---- 4 · Origin & making: photographs and three confident lines ------------- */
.o-origin { background: var(--bg); color: var(--fg); }
.o-origin__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-7);
  display: grid; gap: var(--s-5);
}
.o-origin__head { display: grid; gap: 1rem; }
.o-origin__head h2 { max-width: 14em; }
.o-origin__grove img { aspect-ratio: 4 / 5; }
.o-origin__harvest img { aspect-ratio: 4 / 3; }
/* full column width below 60em, like the grove and harvest photos */
.o-origin__pour img { aspect-ratio: 4 / 5; }
.o-steps { display: grid; gap: var(--s-4); counter-reset: none; }
.o-steps li { display: grid; gap: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.o-steps__t { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.o-steps p { color: var(--fg-2); max-width: 28em; }
.o-steps li:nth-child(2) .o-steps__t { color: var(--lamp-text); }
@media (min-width: 60em) {
  .o-origin__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.5vw, 2.5rem); row-gap: var(--s-6);
    align-items: start;
  }
  .o-origin__head { grid-column: 1 / span 7; }
  .o-origin__grove { grid-column: 1 / span 4; grid-row: 2 / span 2; }
  .o-origin__grove img { aspect-ratio: 2 / 3; }
  .o-origin__harvest { grid-column: 5 / span 5; grid-row: 2; }
  .o-origin__pour { grid-column: 10 / span 3; grid-row: 2; width: auto; justify-self: end; align-self: end; }
  .o-steps { grid-column: 5 / span 8; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  .o-origin__go { grid-column: 5 / span 8; }
}

/* ---- 5 · HOWEA, in daylight -------------------------------------------------- */
.o-house { background: var(--bg); color: var(--fg); }
.o-house__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-7);
  display: grid; gap: var(--s-6);
}
.o-house__head { display: grid; gap: 1rem; max-width: 46rem; }
.o-house__lede { font-size: var(--t-lead); line-height: 1.45; }
.o-four { display: grid; gap: 0; border-top: 3px solid var(--fg); }
.o-four li { display: grid; align-content: start; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.o-four__n { grid-row: 1 / span 2; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent-text); padding-top: 0.55rem; font-variant-numeric: lining-nums; }
.o-four__t { font-size: var(--t-h3); }
.o-four p { color: var(--fg-2); }
.o-house__foot { display: grid; gap: 1rem; }
.o-house__fact { max-width: 34em; }
.o-house__producer { color: var(--fg-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
@media (min-width: 48em) {
  .o-four { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
}
@media (min-width: 64em) {
  .o-four { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .o-four li { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-block: 1.5rem 0.5rem; }
  .o-four__n { grid-row: auto; padding-top: 0; }
  .o-house__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---- 6 · The tasting invitation ---------------------------------------------- */
.o-taste { background: var(--bg); color: var(--fg); }
.o-taste__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter);
  display: grid; gap: var(--s-5); align-items: center;
}
.o-taste__photo img { aspect-ratio: 1 / 1; }
.o-taste__photo.o-photo--tall img { aspect-ratio: 4 / 5; max-height: 44rem; }
.o-taste__copy { display: grid; gap: 1.25rem; }
.o-taste__copy h2 { max-width: 13em; }
.o-taste__lede { font-size: var(--t-lead); line-height: 1.45; max-width: 30em; }
.o-taste__direct { color: var(--fg-2); font-size: var(--t-small); }
.o-taste__direct a { color: var(--fg); }
@media (min-width: 60em) {
  .o-taste__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5.5rem); }
}

/* footer: the producer's site, said once */
.footer .footer__ext { color: var(--fg); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ---- Product page variants ---------------------------------------------------- */
.o-hero--product .crumbs { margin-bottom: 0.25rem; }
@media (min-width: 60em) {
  .o-hero--product { grid-template-columns: minmax(0, 6fr) minmax(0, 4.6fr); min-height: calc(100svh - var(--header-h) - 3.5rem); padding-bottom: var(--s-6); }
  .o-hero--product .o-hero__copy { grid-row: 1 / span 2; align-self: center; padding-top: 0; }
}
@media (min-width: 48em) and (max-width: 59.99em) {
  .o-hero--product { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 0; }
  .o-hero--product .o-hero__copy { grid-row: 1 / span 2; }
}
.o-awards__kinds { color: var(--fg-2); max-width: 40em; }
.o-awards--full .o-awards__record { padding-top: var(--s-4); }
.o-origin__pdo { color: var(--fg-2); max-width: 40em; margin-bottom: 0.5rem; }
.o-plate--split .o-plate__in { max-width: calc(var(--max) + 2 * var(--gutter)); text-align: left; justify-items: stretch; gap: var(--s-5); }
.o-plate--split .o-plate__text { display: grid; gap: var(--s-4); justify-items: start; }
.o-plate--split .o-menu { max-width: none; }
.o-plate--split .o-menu li { justify-items: start; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; }
.o-plate--split .o-menu__how { text-align: right; }
.o-plate__photo img { aspect-ratio: 3 / 2; }
@media (min-width: 60em) {
  .o-plate--split .o-plate__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
  .o-plate--split .o-plate__photo { position: sticky; top: calc(var(--header-h) + 4.5rem); }
}
@media (max-width: 37.49em) {
  .o-plate--split .o-menu li { grid-template-columns: minmax(0, 1fr); }
  .o-plate--split .o-menu__how { text-align: left; }
}

/* Very narrow phones: the three facts wrap without a stray leading dot. */
@media (max-width: 22.49em) {
  .o-facts { column-gap: 1rem; }
  .o-facts span + span::before { content: none; }
}

/* ---- Inner pages: one photographed head, then photo-led sections ---------------
   .p-head   the page's opening: eyebrow, title, a line, the actions; a real
             photograph beside it (desktop) or under it (phones and tablets).
   .p-sec    a section shell (day or night) with an optional .p-sec__head.
   .p-split  text beside a photograph.
   .p-list   short confident lines under a hairline, two up on wide screens.
   .p-dl     facts as label / value rows.
   .p-close  the last word: one line, the two actions, the person who answers. */
.p-head { background: var(--bg); color: var(--fg); }
.p-head__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-5) var(--gutter) var(--s-7);
  display: grid; gap: var(--s-5); align-items: center;
}
.p-head__copy { display: grid; gap: 1.1rem; align-content: start; }
.p-head__title { font-size: var(--t-h1); line-height: var(--lh-head); letter-spacing: calc(var(--track-display) * var(--tk)); max-width: 12em; }

.p-head__lede { font-size: var(--t-lead); line-height: 1.45; max-width: 31em; }
.p-head__more { color: var(--fg-2); max-width: 34em; }
.p-head__photo img { aspect-ratio: 3 / 2; }
.p-head__photo--square img { aspect-ratio: 1 / 1; object-position: 40% 45%; }
.p-head--short .p-head__in { padding-bottom: var(--s-6); }
.p-head .crumbs { margin-bottom: 0.25rem; }
@media (min-width: 48em) {
  .p-head__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5.5rem); padding-top: var(--s-6); }
  .p-head__photo img { aspect-ratio: 4 / 5; max-height: min(36rem, 72svh); }
  .p-head--wide .p-head__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .p-head--wide .p-head__photo img { aspect-ratio: 4 / 3; }
  .p-head--text .p-head__in { grid-template-columns: minmax(0, 1fr); }
}

.p-sec { background: var(--bg); color: var(--fg); }
.p-sec__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-7);
  display: grid; gap: var(--s-6);
}
.p-sec__head { display: grid; gap: 1rem; max-width: 48rem; }
.p-sec__head h2 { max-width: 15em; }
.p-sec__lede { font-size: var(--t-lead); line-height: 1.45; max-width: 32em; }
.night + .night .p-sec__in, .night + .night.o-taste .o-taste__in { border-top: 1px solid var(--rule); }

.p-split { display: grid; gap: var(--s-5); align-items: start; }
.p-split__text { display: grid; gap: var(--s-4); align-content: start; }
.p-split__text > p { max-width: 34em; }
.p-split__photos { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.p-split__photos .o-photo img { aspect-ratio: 4 / 3; }
.p-split__photos .o-photo--tall img { aspect-ratio: 4 / 5; }
.p-split__photos--stack .o-photo--tall { width: min(70%, 24rem); justify-self: end; }
.p-split__photos--stack .o-photo--inset { width: min(84%, 30rem); justify-self: end; }
@media (min-width: 40em) {
  .p-split__photos--two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
  .p-split__photos--stack .o-photo--tall { width: 62%; }
}
@media (min-width: 60em) {
  .p-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5.5rem); }
  
  
}

.p-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.p-list li { display: grid; gap: 0.35rem; align-content: start; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.p-list__t { font-family: var(--serif); font-weight: var(--w-d); font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); line-height: 1.15; letter-spacing: calc(-0.01em * var(--tk)); }
.p-list p:not(.p-list__t) { color: var(--fg-2); max-width: 32em; }
.p-list__t { color: var(--fg); }
@media (min-width: 48em) { .p-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }

.p-dl { display: grid; border-top: 1px solid var(--rule); }
.p-dl > div { display: grid; gap: 0.2rem; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); }
.p-dl dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.p-dl dd { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; }
@media (min-width: 40em) { .p-dl > div { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; } }

.p-feature { display: grid; gap: var(--s-5); align-items: center; }
.p-feature__photo img { aspect-ratio: 4 / 5; max-height: 40rem; }
.p-feature__text { display: grid; gap: 1.1rem; }
.p-feature__name { font-size: min(clamp(3rem, 1.6rem + 5vw, 6.5rem), 15vw); line-height: 0.95; letter-spacing: calc(-0.03em * var(--tk)); color: var(--lamp-text); }
.p-feature__name a { color: inherit; text-decoration: none; }
.p-feature__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
@media (min-width: 48em) { .p-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5.5rem); } }

.p-close { background: var(--bg); color: var(--fg); }
.p-close__in {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
  display: grid; gap: 1.25rem; justify-items: start;
  border-top: 1px solid var(--rule);
}
.p-close__line { font-family: var(--serif); font-weight: var(--w-d); font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: calc(var(--track-display) * var(--tk)); max-width: 15em; }
.p-close__call { color: var(--fg-2); font-size: var(--t-small); }
.p-close__call a { color: var(--fg); }
.day.p-close .p-close__in { border-top: 0; }

/* Contact: the two ways in, at display size */
.p-contact { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.p-contact a {
  font-family: var(--serif); font-weight: var(--w-d);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.1;
  color: var(--lamp-text); text-decoration: none; overflow-wrap: anywhere;
}
.p-contact a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.p-contact__k { font-size: var(--t-small); color: var(--fg-2); margin-bottom: 0.75rem; }

/* A list of ways back (404) */
.p-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: var(--t-lead); }
.p-links a { color: var(--fg); }

/* Home · tablets: the bottle runs the full height of the copy (no dead space
   under it); the table photograph runs full width beneath, as a band. */
@media (min-width: 48em) and (max-width: 59.99em) {
  .o-hero:not(.o-hero--product) .o-hero__photo { grid-row: 1; align-self: stretch; margin-top: clamp(0.5rem, 3vh, 2.5rem); }
  .o-hero:not(.o-hero--product) .o-hero__photo picture { position: absolute; inset: 0; }
  .o-hero:not(.o-hero--product) .o-hero__photo img { height: 100%; min-height: 0; aspect-ratio: auto; object-position: 0% 50%; }
}

/* ---- Awards & distinctions (/selection/oro-di-milas/awards/) ----------------------
   The English award sheet, large on arrival, in the same dark room as the rest of the
   site; the page scrolls normally. No viewer, zoom, overlay or inner scrolling: the
   two quiet links under the sheet are the only actions. The written list follows. */
.o-awards__poster { margin-top: 0.25rem; }
/* The sheet keeps the dark room in both themes (like the poster itself): the night
   tokens are restated with enough weight to win over the Light theme. */
.sheet-page.night, .sheet-text.night,
:root[data-lights="up"] .sheet-page.night, :root[data-lights="up"] .sheet-text.night {
  --bg: var(--glass);
  --bg-raised: var(--glass-raised);
  --fg: var(--bone);
  --fg-2: var(--smoke);
  --fg-3: var(--smoke-2);
  --fg-lit: var(--smoke-lit);    /* secondary text standing in a pool */
  --fg-unlit: var(--unlit);
  --glyph-off: var(--numeral-off);
  --rule: var(--steel);
  --accent: var(--oil);
  --accent-text: var(--oil);
  --on-accent: var(--ink);
  --focus: var(--oil);
  --lit: 1;                      /* pools on */
  /* Text the lamp lands on (lit numerals, names on the pass): warm on glass,
     plain ink whenever the room is in daylight. */
  --lamp-text: #F1DFB9;
  --lamp-from: #BDB5A2;          /* the far side of a lit word  9.1 : 1 */
  --lamp-to:   #F4E5C4;          /* the side nearest the lamp  14.9 : 1 */
  --lamp-fill: linear-gradient(#F7EBD0 8%, #EBD4A6 60%, #F2DCB0 100%);
  color-scheme: dark;
}
.sheet-page, .sheet-text { background: var(--glass); color: var(--bone); }
.sheet-page__in { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-6); display: grid; gap: var(--s-4); }
.sheet-page__head { display: grid; gap: 0.75rem; max-width: 46rem; }
.sheet-page__title { font-family: var(--serif); font-weight: var(--w-d); font-size: var(--t-h1); line-height: var(--lh-head); letter-spacing: calc(var(--track-display) * var(--tk)); color: var(--lamp-text); }
.sheet-page__lede { font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); max-width: 34em; }
.sheet-page__textlink { margin-top: 0.75rem; }
/* The sheet runs the full width of the site's column (the logo's left edge to the
   button's right edge); on phones it reaches to within 0.5rem of the screen edge. */
.sheet-poster { margin: 0; display: grid; gap: 0.5rem; }
@media (max-width: 47.99em) { .sheet-poster { margin-inline: calc(0.5rem - var(--gutter)); } .sheet-poster__pdf { padding-inline: calc(var(--gutter) - 0.5rem); } }
.sheet-poster__frame { padding: clamp(0.25rem, 0.6vw, 0.5rem); background: #EFE9D6; box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.55); }
.sheet-poster__img { display: block; width: 100%; height: auto; background: #EFE9D6; }
.sheet-poster__pdf { display: flex; flex-wrap: wrap; gap: 0 1.75rem; font-size: var(--t-small); }
.sheet-poster__pdf a { color: var(--fg-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; display: inline-block; padding-block: 0.6rem; }
.sheet-poster__pdf a:hover { color: var(--fg); }
.sheet-page__back { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.sheet-text { border-top: 1px solid var(--rule); }
.sheet-text .sheet-page__in { padding-block: var(--s-5) var(--s-7); }
.aw33 > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.aw33 > summary::-webkit-details-marker { display: none; }
.aw33 > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--fg-2); }
.aw33[open] > summary::after { content: "−"; }
.aw33__title { font-family: var(--serif); font-weight: var(--w-d); font-size: var(--t-h2); line-height: 1.05; }
.aw33__body { display: grid; gap: var(--s-5); padding-top: var(--s-4); }
.aw33__year { display: grid; gap: 0.75rem; }
.aw33__y { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; color: var(--oil); font-variant-numeric: lining-nums tabular-nums; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.aw33__list { display: grid; gap: 0; }
.aw33__list li { padding-block: 0.55rem; border-bottom: 1px solid rgb(238 231 215 / 0.08); line-height: 1.4; }
.aw33__dist { font-family: var(--serif); font-size: 1.1875rem; color: var(--fg); }
.aw33__sep { color: var(--fg-3); padding-inline: 0.25em; }
.aw33__comp, .aw33__country { color: var(--fg-2); }
.sheet-page :focus-visible, .sheet-text :focus-visible { outline-color: var(--oil); }
@media (min-width: 60em) {
  .aw33__year { grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--s-4); }
  .aw33__y { padding-top: 0.9rem; }
  .aw33__list { border-top: 1px solid var(--rule); }
}
@media print {
  .sheet-poster__pdf, .sheet-page__back { display: none !important; }
  .sheet-poster__frame { padding: 0 !important; box-shadow: none !important; }
  .aw33 > summary::after { content: none; }
}

/* lqip:start — generated by tools/photos/lqip.py; do not edit by hand */
.o-photo img { background-color: #1B241E; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
img[src*="/photos/branch-d-"] { background-image: url(data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAACwBACdASoUAB4APu1qq08ppiOiMBgIATAdiWMAwoAJm6DnxkJFKf0V93Rx5wgwAP5I2mxebNQT7g36eKR7j51raZiwhSepEp9f60ieGdpeDC9e7vSj5EM5j4K/Lv46fWh4UeLNkgmCWG4gQki+1oNzUZvK7qjdYeUvhw/aaBh504HW4nELtOWZYwAAAA==); }
img[src*="/photos/drizzle-d-"] { background-image: url(data:image/webp;base64,UklGRswAAABXRUJQVlA4IMAAAACQBQCdASoUAB8APu1or1CppaQiqAqpMB2JZADDNDNB0toQoFpVySBF3i3Rqu170E6gHDT4UAD+95gblnCWOkruMFDA6X+9nUJdDI8opW1n8fj+RuIl+w04mu/fk+wi/ydOlQiHhcX/clGHLw4HY2Q+xRwYZSno/XgR9Q2l7OlflfuOkaF6YQy2csQMVpCXaSClp0wKdGanjlsY3eHVOD+kNVZ8mFKwxh9jMVxonRaC2D9U2yBzUAm1GE/qPdfAAAA=); }
img[src*="/photos/facility-d-"] { background-image: url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAABQBQCdASoUABkAPu1sq1EppaOiqAqpMB2JYwCxHswBpaLi4wy66wgGNxmu+9zh503dgAAA/ucf5FRu9y8KR7n5isxkC5HdntdBlsgGiU/DeIlOYchZtKHK9/u47433tQ/9la2xGFCs+mM0DKQThILxW8b3vf863xRpCeFjPoUzkpfkssAM5HaD7thf/P/Fr4AAAA==); }
img[src*="/photos/glasses-d-"] { background-image: url(data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAADwBACdASoUABQAPu1urlIppiQiqAgBMB2JbACxHzL8qCN7Ig06UdnZdQGR9xsF+AAA/o+o7V0bo7eLC7H2aOHPSqg9yvLEqOWR6iOLLimglnFcvkU5+V15JOTilCnR2PUSdg2QxhgyZvXaoPgDhOuuKf5MV/HEPwGvGa5wcuvUVprLQj6ajx9X5YalV8+79ux9GAAAAAA=); }
img[src*="/photos/glasses-t-"] { background-image: url(data:image/webp;base64,UklGRrAAAABXRUJQVlA4IKQAAAAQBQCdASoUABkAPu1or1AppaSiqAqpMB2JaACdMoRwIrCAHVevNcBwcZ4jdydqilKAAP6TSj8UZxuNhOEjLd0rAWy3y7zO2YzlhvY6IlT7dgTbKIB0dAxeA0aFl0kcMJMmPlkWWVhCzHdjZkBoLEa57oPPFj0Y0e4jUQftyJfc3KntETGI6KY+gYTz99SN2Ywn70xqt+9ziN1/MGHF3oa2JmHwAA==); }
img[src*="/photos/harvest-d-"] { background-image: url(data:image/webp;base64,UklGRnQAAABXRUJQVlA4IGgAAABwBACdASoUAA8APu1iqU2ppaOiMAgBMB2JaACdMoMggD2HuhVxFAlz1qDjAAD8ZwQrDM/i51dMI3broDNbUVLWBOK5CH2VNyXCVwu6pudsaki2o4MBKMQZV3sBpbXs6mZ1hYgZjgAAAA==); }
img[src*="/photos/home-d-"] { background-image: url(data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAADwBACdASoUABkAPu1mq0+ppaOiMBgIATAdiWUAthQK7aNtI5kWk/F8w2FqFmPQeQAA/u1UDhodz2rNuqurAPJGqfi9qdL1OPFIN2XkWf+P1+IHcIqnFO8SyXqtbh6YaZfsrZKeo79Q6VHRizA9ZEpXGRzayj6x3VO+yKZy+XT9IP+fluPO+LtZysAAAA==); }
img[src*="/photos/mill-w-"] { background-image: url(data:image/webp;base64,UklGRmQAAABXRUJQVlA4IFgAAADQAwCdASoUAAoAPu1iqU2ppaQiMAgBMB2JQBYdgkVBU1x1OJ844AAA8kFXfpdG8AlJ2Kv9B0NXxHHENoXouJzgRw7yN+XDDaSrOb3Uty3M/xJuuOQupAAA); }
img[src*="/photos/orchard-l-"] { background-image: url(data:image/webp;base64,UklGRnAAAABXRUJQVlA4IGQAAADQAwCdASoUAA0APu1kqk4ppaQiMAgBMB2JQBWABDnG9huZTJsmP0AA/tSefX9qhB1flH5mXamCYWSzCNS7fnVkkBZqkqjHSY5w/SeZsj3jJ1CoKWWOSatGdtqFsfrIpC2uAAAA); }
img[src*="/photos/plate-d-"] { background-image: url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAADQBACdASoUABgAPu1orlCppaQiqAqpMB2JQAAE+5ENK+MXQ0VM69TZ5AVqqXPgAAD+Odwpu0xBSsbeEmkGkh6DPPMesvvIYO1ri3KYrXL9B8TSTczTzi0COE/FChWpD4Vj+3RxFC+W7pvUESXlGBDoN6APSD3P0uD0mhHJBoURNVEhWkZ4YTIhtU2cUrEqAAA=); }
img[src*="/photos/pour-d-"] { background-image: url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAADwBACdASoUABkAPu1sqlEppaOiqAqpMB2JZAC+SBEFrBnTB0VDY++R+YXC/fwkNQAA9pFJ0aYSji+g7U0S+21ExXxlUFybT0T59m2KuQAM1bgNXlaaZXtCDkB4ok5Ypd3juev3XMy6kevLCxmf4buYJm8emHS9BnHt2J6iD8iUhhz0DxGfuwKS9vfgGUoWac272SLNva7nDqW3wzQ5XAAA); }
img[src*="/photos/sofra-d-"] { background-image: url(data:image/webp;base64,UklGRvAAAABXRUJQVlA4IOQAAADQBQCdASoUABkAPu1sqlEppaOiqAqpMB2JbACdMoSFMLyAph3nitu5lXAwksRkMLkng1BlYYIAAPpFVYDgwfc0bfNDSf8Jk10uby0mya6fMnoyeqbXwtNc2RxNowMaNzBK1GLehLf6Sr8rDMkYmjiMIRk/JPWoQAgLw2RlOyUxaJlm+DdIbywbBrQa0S6qr4jaPxjIYb4bk3sOvF88sUK8DLbNo3X/j4g3qCJNPslU5PcJftmvQiu7ad5KF8cCd4L221Lv4Dzw+oy69tRx/p22FsZ/Eit8RISUBAQrb7agJlBPwAA=); }
img[src*="/photos/yard-d-"] { background-image: url(data:image/webp;base64,UklGRs4AAABXRUJQVlA4IMIAAAAwBQCdASoUAB4APu1qqU8ppiOiMBgIATAdiUAWo2ZfQArD2O/5XfKKMHaD7VQb+VQk4AD+6qjW5RRMAKGx9Qo4f179ph+cIf4Pjx73W2rRlt4Tt3VOPz4gklItTDHoZkaH3tC/JEPuOWvValjvosGa2v2queZtKzo20xJKwlezAYjMnAUOzpCJ0QGbMbN7VNR9cn8IfoqX2+jmxnSnQbLk0IDDNKdN3LjDez1/Lt6X+pkmC4V24OpZ+CYFr3+AAAAAAA==); }
@media (max-width: 59.99em) {
  picture:has(source[srcset*="/photos/branch-m-"]) img { background-image: url(data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAACwBACdASoUABkAPu1qrVCppaQiqAqpMB2JZQCyzA2MZLsV0A9FZGyaauiDffAAAP7QnlIsO9euuXBOzbOCTngazphzxk9X6sRhpbrS9OhAMJf5FE1iOxPB7BG1UmgCj0uDQ2Yu5ZR+JSGnGqBE+ldeSRbw6U8sE7YAAA==); }
  picture:has(source[srcset*="/photos/facility-m-"]) img { background-image: url(data:image/webp;base64,UklGRnAAAABXRUJQVlA4IGQAAACwAwCdASoUAA0APu1iqk2ppaQiMAgBMB2JQBOgBFcRLnHTb5/ygAD+tsEnOCtoYDBK9/YtnECf0SoG3umSLHIFdo8Rcl7r6hoJlnR3kZGjow7MArBtVR0LptkK/M1qfYs/TkAA); }
  picture:has(source[srcset*="/photos/sofra-m-"]) img { background-image: url(data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAABQBQCdASoUABQAPu1usFIppiSiqAgBMB2JagCdMt4EABY/ZG1W7gGjrdxGiUSAzOJ9OcAA+mJTGcWQY3uZIvZVfCs8d2D3VPjWMhJ4b4hMgtRB6BR5TyYjygecaPXfCZY9vpC6w6IZ1Yb6jzMTG/Op3I2APoXL2Yk1H5mG/+BZxq772+STgBf8e2Sop/Tj5AKhxdXlWzbC5gzAEE/2tPyOWLlmoTdgy8BC0yhlfnkFQAAA); }
}
/* lqip:end */

/* ---- Stage 3 refinements -------------------------------------------------------- */
/* Home hero: one photograph and the name; the copy sits in the middle of the frame. */
@media (min-width: 60em) {
  .o-hero--home { min-height: calc(100svh - var(--header-h) - 1rem); max-height: 62rem; padding-bottom: var(--s-6); }
  .o-hero--home .o-hero__copy { grid-row: 1 / span 2; align-self: center; padding-top: 0; }
  .o-hero--home .o-hero__photo img { min-height: 32rem; }
}
@media (min-width: 48em) and (max-width: 59.99em) {
  .o-hero--home .o-hero__copy { padding-bottom: var(--s-3); }
}
/* "On the plate" with the table beside it (home and product) */
@media (max-width: 47.99em) { .o-plate--split .o-plate__photo img { aspect-ratio: 1 / 1; } }
.o-plate--split .o-plate__title { max-width: 12em; }
/* For kitchens: the same oil, said as a ticket for the pass, not a third menu card */
.o-plate--pass .o-plate__in { max-width: calc(var(--max) + 2 * var(--gutter)); text-align: left; justify-items: stretch; gap: var(--s-5); }
.o-plate--pass .o-plate__text { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.o-plate--pass .o-plate__taste { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); }
.o-pass { display: grid; gap: var(--s-5); border-top: 3px solid var(--fg); padding-top: var(--s-4); }
.o-pass__col { display: grid; gap: 0.75rem; align-content: start; }
.o-pass__h { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.o-pass__col .o-pass__h + * { margin-bottom: 1rem; }
.o-pass__list { display: grid; border-top: 1px solid #CFC6B2; }
.o-pass__list li { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.2; padding-block: 0.7rem; border-bottom: 1px solid #CFC6B2; }
.o-pass__line { color: var(--fg-2); max-width: 26em; }
@media (min-width: 48em) { .o-pass { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-5); } }
@media (min-width: 60em) {
  .o-plate--pass .o-plate__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
}
/* Light theme: origin and HOWEA share a ground, so a rule divides them */
:root[data-lights="up"] .o-origin + .o-house .o-house__in { border-top: 1px solid var(--rule); }
@media (min-width: 60em) { .o-plate--split .o-plate__photo img { aspect-ratio: 1 / 1; object-position: 45% 50%; } }
@media (max-width: 47.99em) { .o-hero--home .o-hero__photo img { object-position: 0% 45%; } }
@media (min-width: 60em) { .o-plate--split .o-plate__photo { max-width: 44rem; } }

/* ---- v4: page roles ------------------------------------------------------------ */
.go--back::after { content: none; }
.go--back::before { content: "←"; font-family: var(--sans); text-decoration: none; display: inline-block; }
/* The genuine bottle in each frame that shows it */
.o-hero .o-photo--bottle { max-height: 70svh; }
.p-feature__photo.o-photo--bottle { max-height: 40rem; }
@media (max-width: 47.99em) {
  .p-feature__photo.o-photo--bottle, .p-head__photo.o-photo--bottle { aspect-ratio: 1 / 1; }
}
@media (min-width: 48em) {
  .o-hero--product .o-hero__photo.o-photo--bottle { aspect-ratio: auto; align-self: stretch; min-height: 30rem; max-height: none; }
  .p-head__photo.o-photo--bottle { max-height: min(36rem, 72svh); }
}
/* The oil page: origin said briefly (the full story lives on /story/), no photographs */
.o-origin__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.o-origin--short .o-origin__in { padding-block: var(--s-7) var(--s-7); }
@media (min-width: 60em) {
  .o-origin--short .o-origin__in { align-items: end; }
  .o-origin--short .o-origin__head { grid-column: 1 / span 6; }
  .o-origin--short .o-origin__go { grid-column: 7 / span 6; grid-row: 1; }
}
/* The oil page's closing invitation: words only (the glasses photograph stays on home) */
.o-taste--text .o-taste__in { grid-template-columns: minmax(0, 1fr); }
.o-taste--text .o-taste__copy { max-width: 46rem; }
/* Story: the harvest leads; the mill sits under it on the same right edge, in a
   deliberate smaller cell with the same gutter. Phones: a plain stack. */
.p-split__photos--stack .o-photo--mill img { aspect-ratio: 3 / 2; }
@media (min-width: 40em) { .p-split__photos--stack .o-photo--mill { width: 62%; justify-self: end; } }
/* P1 is a secondary picture, never a second hero: it keeps to a modest width */
@media (min-width: 60em) { .o-plate--split .o-plate__photo.o-photo--p1 { max-width: 30rem; } }
/* Home's "On the plate" is the short version (the full list of uses is on The Oil):
   its few lines sit at the middle of the photograph */
@media (min-width: 60em) { .o-plate--brief .o-plate__in { align-items: center; } .o-plate--brief .o-plate__photo { position: static; } }
/* Home hero (18 Oct 2026): the old twin-trunked tree — keep the trunk and the crown */
.o-hero .o-photo--orchard img { object-position: 66% 60% !important; }
/* For kitchens: H1, cap and base always in frame — square on phones, never 3:2 */
@media (max-width: 47.99em) { .p-head__photo.o-photo--h1 img { aspect-ratio: 1 / 1; } }

/* ---- 18 Oct 2026 · final visual revisions --------------------------------------- */
/* The Oil: the genuine transparent bottle stands on the page itself — no ivory panel —
   lifted by a faint olive glow and a soft shadow under the base. Selection and Contact
   keep their ivory panel. */
.o-hero--product .o-photo--bottle {
  background: radial-gradient(closest-side at 50% 54%, rgb(156 164 82 / 0.20), rgb(120 134 62 / 0.07) 60%, transparent 100%);
  outline: none;
}
.o-hero--product .o-photo.o-photo--bottle img { filter: drop-shadow(0 1.1rem 1.4rem rgb(0 0 0 / 0.45)); }
:root[data-lights="up"] .o-hero--product .o-photo.o-photo--bottle img { filter: drop-shadow(0 0.8rem 1rem rgb(40 32 18 / 0.22)); }
@media (min-width: 48em) { .o-hero--product .o-photo.o-photo--bottle picture { inset: 4% 0 6%; } }

/* For kitchens: the table of mezze with the real bottle (IG01) — square on phones */
@media (max-width: 47.99em) { .p-head__photo.o-photo--sofra img { aspect-ratio: 1 / 1; } }
@media (min-width: 48em) { .p-head__photo.o-photo--sofra img { max-height: min(40rem, 78svh); object-position: 40% 40%; } }

/* Our story: a larger opening photograph; the grove beside the text; the mill as a
   wide band across the section; the closing invitation with a photograph beside it. */
@media (min-width: 48em) {
  .p-head--story .p-head__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .p-head--story .p-head__photo img { max-height: min(42rem, 80svh); }
}
.p-split__photos .o-photo--grove img { aspect-ratio: 4 / 5; object-position: 66% 60%; }
.o-photo--band { margin-top: var(--s-6); }
.o-photo--band img { aspect-ratio: 2 / 1; }
@media (max-width: 47.99em) { .o-photo--band img { aspect-ratio: 3 / 2; object-position: 62% 50%; } }
.p-close--photo .p-close__copy { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.p-close--photo .p-close__photo img { aspect-ratio: 2 / 3; }
@media (max-width: 47.99em) { .p-close--photo .p-close__photo img { aspect-ratio: 4 / 5; object-position: 50% 60%; } }
@media (min-width: 48em) {
  .p-close--photo .p-close__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
}

/* ---- 19 Oct 2026 ------------------------------------------------------------------ */
/* Home "On the plate": IG03, the finishing pour — portrait, beside the short text */
.o-plate__photo.o-photo--drizzle img { aspect-ratio: 9 / 14 !important; object-position: 50% 50%; }
@media (max-width: 59.99em) { .o-plate__photo.o-photo--drizzle { max-width: 26rem; } }
@media (min-width: 60em) { .o-plate--split .o-plate__photo.o-photo--drizzle { max-width: 28rem; } }
/* The Oil "On the plate": P1 as tall as the text beside it, not larger */
@media (min-width: 60em) { .o-plate--split .o-plate__photo.o-photo--p1 { max-width: 36rem; } }
/* Our story: the grove and the mill stacked beside the text, same width, one gutter */
.p-split__photos--pair { gap: var(--s-4); }
.p-split__photos--pair .o-photo--grove img { aspect-ratio: 3 / 2; object-position: 70% 55%; }
.p-split__photos--pair .o-photo--mill img { aspect-ratio: 2 / 1; }
/* "optional" never changes the label's line height, so paired fields line up exactly */
.field__label .opt { line-height: 1; }

/* 19 Oct 2026 · Home "On the plate": the 2:3 pour at a modest width, the text beside it
   rather than across the page. */
@media (min-width: 60em) {
  .o-plate--brief .o-plate__in { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 8.5rem); }
  .o-plate--brief .o-plate__text { max-width: 36rem; }
}

/* 19 Oct 2026 · FLIP seal on Our story: inside the "Paperwork in order" item */
.p-list .seal { --seal-w: 9rem; margin-top: 1rem; }