/* Brilo Studio site base: a reset, the skip link, focus outlines, .visually-hidden and no smooth scroll under reduced motion. */
/* It decides nothing about the look and hides nothing at rest. The site's own styles follow it in site.css. */
/* From Brilo Studio plugins/studio/templates/site/site.css; scaffold.mjs copies it and never overwrites it. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

img, picture, video, canvas {
  display: block;
  max-width: 100%;
}

/* An SVG stays inline (icons in text); when narrowed, it keeps its proportions. */
svg {
  max-width: 100%;
}

img, video, svg {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* Off screen until focused, then shown at the top left above everything. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: Canvas;
  color: CanvasText;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* For screen readers only: clipped to nothing, never faded. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: no smooth scrolling, whatever the site's own CSS says. Nothing else is cut here: each scene's
   reduced branch and the site's CSS remove movement and keep the fades and state changes that carry meaning. */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}


/* ---------- El Pastor: the tin's world. Black, cream, gold only where the tin prints it. ---------- */
@font-face { font-family: "Marcellus"; src: url("/el-pastor/fonts/marcellus-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Marcellus SC"; src: url("/el-pastor/fonts/marcellus-sc-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sacramento"; src: url("/el-pastor/fonts/sacramento-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/el-pastor/fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Marcellus fallback"; src: local("Georgia"); size-adjust: 96%; }
@font-face { font-family: "Hanken fallback"; src: local("Arial"); size-adjust: 98%; }

:root {
  --color-tin: #0d0b08; --color-tin-2: #15120d; --color-ink: #efe6d2; --color-muted: #b3a68b; --color-gold: #d2a94f;
  --color-line: rgb(239 230 210 / .14); --color-cream: #efe6d2; --color-cream-ink: #1b1711; --color-cream-muted: #6c6150;
  --font-display: "Marcellus", "Marcellus fallback", Georgia, serif; --font-mark: "Marcellus SC", "Marcellus fallback", Georgia, serif;
  --font-text: "Hanken Grotesk", "Hanken fallback", "Helvetica Neue", Arial, sans-serif;
  --fs-h2: clamp(2.1rem, 1.4rem + 2.9vw, 4rem); --fs-h3: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); --fs-lead: clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --space-gutter: clamp(16px, 5vw, 72px); --space-section: clamp(96px, 14svh, 180px); --max: 1320px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
html { background: var(--color-tin); color: var(--color-ink); }
body { font: 400 1.0625rem/1.65 var(--font-text); background: var(--color-tin); }
a { color: inherit; }
.kicker { font: 500 .74rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 1.4rem; }
.h2 { font: 400 var(--fs-h2)/1.06 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }

/* The header: the wordmark and three links, white in difference so it reads over the film and the cream alike. */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--space-gutter) 24px; pointer-events: none; mix-blend-mode: difference; }
.bar a { pointer-events: auto; }
.mark { font: 400 1.5rem/1 var(--font-mark); letter-spacing: .02em; color: #fff; text-decoration: none; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nav a { font: 500 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; }
.nav .nav-ask { padding: .75em 1.2em; border: 1px solid rgb(255 255 255 / .6); border-radius: 999px; }
/* Laptops: the sections sit in the bar; phones: the Menu button opens them. On the home page the links sit in one small
   frosted capsule, dark over the film and the black sections, cream over the cream ones, so they read everywhere and
   cover almost nothing (the legal pages keep the difference blend). */
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav .nav-link { position: relative; padding: .75em 0; white-space: nowrap; }
.nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.nav .nav-link.is-here::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav .nav-link:hover::after { transform: scaleX(1); } }
@media (max-width: 1239px) { .nav-links { display: none; } }
.nav .nav-menu { pointer-events: auto; display: inline-flex; align-items: center; gap: .7em; font: 500 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: none; border: 0; padding: .75em 0; cursor: pointer; }
.nav-menu-lines { width: 18px; height: 7px; border-block: 1px solid currentColor; transition: height .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav .nav-menu:hover .nav-menu-lines { height: 11px; } }
@media (min-width: 1240px) { .nav .nav-menu { display: none; } }
.bar.bar-nav { mix-blend-mode: normal; }
.bar-nav .mark { color: var(--color-cream); text-shadow: 0 1px 14px rgb(8 7 5 / .6); transition: color .4s ease, text-shadow .4s ease; }
.bar-nav .nav { pointer-events: auto; gap: clamp(14px, 1.7vw, 26px); padding: 4px 4px 4px clamp(14px, 1.6vw, 22px); border-radius: 999px; background: rgb(13 11 8 / .34); border: 1px solid rgb(239 230 210 / .14); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); transition: background-color .4s ease, border-color .4s ease; }
.bar-nav .nav-links { gap: clamp(14px, 1.7vw, 26px); }
.bar-nav .nav a, .bar-nav .nav-menu { color: var(--color-cream); font-size: .72rem; transition: color .4s ease; }
.bar-nav .nav .nav-link { padding: .6em 0; }
.bar-nav .nav .nav-ask { padding: .78em 1.15em; border: 0; background: rgb(239 230 210 / .14); transition: background-color .4s ease, color .4s ease; }
@media (hover: hover) and (pointer: fine) { .bar-nav .nav .nav-ask:hover { background: var(--color-gold); color: var(--color-tin); } }
/* Over a cream section, or the film's cream scenes, the capsule turns to cream glass with dark ink, and the name with it. */
/* El Pecado de Lola, the special edition, keeps its own place in the bar: a red dot and its name, on every screen size. */
.nav .nav-lola { display: inline-flex; align-items: center; gap: .55em; padding: .6em 0; white-space: nowrap; }
.nav .nav-lola::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d90a10; box-shadow: 0 0 0 3px rgb(217 10 16 / .22); }
.bar-nav .nav .nav-lola { color: #ff8a80; }
html.on-paper .bar-nav .nav .nav-lola, html.on-cream-film .bar-nav .nav .nav-lola { color: #b3080e; }
.page-lola .nav .nav-lola { text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .nav .nav-lola:hover { text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; } }
@media (max-width: 599px) { .bar-nav .nav .nav-lola { font-size: 0; gap: 0; } .bar-nav .nav .nav-lola::after { content: "Lola"; font-size: .72rem; margin-left: .5em; } }
.nav .nav-ask { white-space: nowrap; }
/* On the narrowest phones the bar keeps the name on one line: Menu shows only its two lines (the word stays its name). */
.bar-nav .mark { white-space: nowrap; }
@media (max-width: 440px) { .bar-nav .nav .nav-menu { font-size: 0; gap: 0; padding-inline: 2px; } .bar-nav .nav { gap: 12px; } }
@media (max-width: 380px) { .bar-nav .mark { font-size: 1.25rem; } .bar-nav .nav { gap: 8px; padding-left: 10px; } .bar-nav .nav .nav-ask { padding-inline: .8em; letter-spacing: .1em; } }
.menu-lola { display: grid; gap: .45rem; margin-top: clamp(1.2rem, 3svh, 2rem); padding: clamp(.9rem, 2svh, 1.3rem) 1.2rem; border: 1px solid rgb(217 10 16 / .5); border-radius: 2px; color: var(--color-ink); text-decoration: none; background: linear-gradient(90deg, rgb(217 10 16 / .16), transparent 70%); }
.menu-lola-kicker { font: 500 .7rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: #ff8a80; }
.menu-lola-name { font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.05 var(--font-display); }
@media (hover: hover) and (pointer: fine) { .menu-lola:hover { border-color: #d90a10; } }
html.on-paper .bar-nav .mark, html.on-cream-film .bar-nav .mark { color: #1b1711; text-shadow: none; }
html.on-paper .bar-nav .nav, html.on-cream-film .bar-nav .nav { background: rgb(239 230 210 / .62); border-color: rgb(27 23 17 / .12); }
html.on-paper .bar-nav .nav a, html.on-paper .bar-nav .nav-menu, html.on-cream-film .bar-nav .nav a, html.on-cream-film .bar-nav .nav-menu { color: #1b1711; }
html.on-paper .bar-nav .nav .nav-ask, html.on-cream-film .bar-nav .nav .nav-ask { background: rgb(27 23 17 / .08); }

/* ---------- The menu: the tin's black, the sections in the display face, a small Spanish word in gold beside each ---------- */
html.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--color-tin); color: var(--color-ink); display: grid; grid-template-rows: auto 1fr; padding: max(18px, env(safe-area-inset-top)) var(--space-gutter) max(32px, env(safe-area-inset-bottom)); overflow-y: auto; opacity: 0; transition: opacity .45s ease; }
.menu.open { opacity: 1; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; }
.menu-top .mark { color: var(--color-ink); }
.menu-close { display: inline-flex; align-items: center; gap: .8em; font: 500 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); background: none; border: 0; padding: .75em 0; cursor: pointer; }
.menu-x { position: relative; width: 16px; height: 16px; }
.menu-x::before, .menu-x::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu-x::after { transform: rotate(-45deg); }
.menu-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: var(--max); width: 100%; margin-inline: auto; }
.menu-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-line); }
.menu-list li { border-bottom: 1px solid var(--color-line); opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--ease-out); }
.menu.open .menu-list li { opacity: 1; transform: none; }
.menu.open .menu-list li:nth-child(2) { transition-delay: .05s; } .menu.open .menu-list li:nth-child(3) { transition-delay: .1s; }
.menu.open .menu-list li:nth-child(4) { transition-delay: .15s; } .menu.open .menu-list li:nth-child(5) { transition-delay: .2s; }
.menu.open .menu-list li:nth-child(6) { transition-delay: .25s; }
.menu-list a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; padding: clamp(.7rem, 1.6svh, 1.15rem) 0; color: var(--color-ink); text-decoration: none; }
.menu-n { font: 400 .95rem/1 var(--font-mark); color: var(--color-gold); letter-spacing: .06em; }
.menu-name { font: 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem)/1.05 var(--font-display); transition: color .3s ease, transform .5s var(--ease-out); }
.menu-es { font: 500 .7rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); transition: color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .menu-list a:hover .menu-name { color: var(--color-gold); transform: translateX(10px); }
  .menu-list a:hover .menu-es { color: var(--color-gold); }
}
.menu-side .f-script { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.menu-note { color: var(--color-muted); max-width: 22rem; margin-top: 1rem; }
@media (max-width: 899px) { .menu-body { grid-template-columns: minmax(0, 1fr); align-content: center; } .menu-side { display: none; } }
@media (max-width: 520px) { .menu-es { display: none; } .menu-list a { grid-template-columns: 2rem minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .menu, .menu-list li { transition: none; } }

/* The tin's lettering: a flared Roman in unicase, small capitals with a lowercase e, a and r, as on the El Pastor tin. */
.wm { font-family: var(--font-mark); text-transform: lowercase; letter-spacing: .02em; }
.wm .lc { font-family: var(--font-display); }
.f-script { font: 400 clamp(1.7rem, 2.4vw, 2.2rem)/1 "Sacramento", cursive; color: var(--color-gold); margin-bottom: .6rem; letter-spacing: .02em; }

/* ---------- The film: one tall section, one screen held inside it, the clips stacked on that screen. ---------- */
.reel { position: relative; height: 900svh; }
.r-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--color-tin); }
.r-media { position: absolute; inset: 0; }
.r-stage video, .r-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* the light engine: the film draws itself into the canvas; the video under it is never what the eye sees */
.r-stage video.r-film, .r-canvas { opacity: 0; }
.r-stage video.r-film { z-index: 1; }
.r-canvas { z-index: 2; }
.r-stage video.r-film.is-ready, .r-canvas.is-ready { opacity: 1; }
.r-stage video.r-clip:not([data-clip="1"]) { visibility: hidden; }
.r-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No video shows before it holds a picture: the still lies under them, so a film the browser will not start never shows. */
.r-stage video.r-clip { opacity: 0; }
.r-stage video.r-clip.is-ready { opacity: 1; }
.r-stage video.r-loop { z-index: 3; opacity: 0; transition: opacity .5s ease; }
.r-stage video.r-loop.is-playing { opacity: 1; }
.reel.is-moving video.r-loop { opacity: 0; }
.r-stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgb(8 7 5 / .7) 0%, rgb(8 7 5 / .35) 28%, transparent 48%); transition: opacity .6s ease; }
.reel.is-moving .r-stage::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .reel { height: auto; } .r-stage { position: relative; } }
.f-words { position: absolute; z-index: 5; left: var(--space-gutter); max-width: min(34rem, calc(100% - 32px)); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease-out); }
/* a line that is not showing never catches a click meant for the one under it */
.f-words { pointer-events: none; }
.f-words.on { opacity: 1; transform: none; pointer-events: auto; }
.f-land { top: 50%; max-width: min(40rem, calc(100% - 32px)); transform: translateY(-50%); }
.f-land.on { transform: translateY(-50%); }
.f-land > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.4s var(--ease-out); }
.f-land.on > * { opacity: 1; transform: none; }
.f-land.on > :nth-child(1) { transition-delay: .2s; } .f-land.on > :nth-child(2) { transition-delay: .45s; }
.f-land.on > :nth-child(3) { transition-delay: .8s; } .f-land.on > :nth-child(4) { transition-delay: 1.1s; }
.f-land.on > :nth-child(5) { transition-delay: 1.3s; } .f-land.on > :nth-child(6) { transition-delay: 1.5s; }
.f-brand { font-size: clamp(3rem, 6vw, 5.6rem); line-height: .9; color: var(--color-gold); }
.f-sub { font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--color-gold); margin: .3rem 0 0 clamp(6rem, 14vw, 13rem); }
.f-line { font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.4 var(--font-display); color: var(--color-ink); margin-top: 2.2rem; max-width: 28rem; }
/* A buyer who knows the film goes straight to the olives. */
.f-skip { margin-top: 1.4rem; }
.f-skip a { display: inline-flex; align-items: center; gap: .6em; font: 500 .74rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-gold) 45%, transparent); text-underline-offset: .5em; padding: .6em 0; }
@media (hover: hover) and (pointer: fine) { .f-skip a:hover { text-decoration-color: var(--color-gold); } }
/* The closing words sit in the dark kitchen above the tin, once the camera has settled. */
.f-end { top: clamp(72px, 12svh, 140px); }
.f-kicker { font: 500 .74rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 1.1rem; }
.f-title { font: 400 clamp(2.1rem, 3.6vw, 3.4rem)/1.05 var(--font-display); }
.f-cta { margin-top: 1.6rem; }
.f-cta a, .cf-send { display: inline-block; font: 500 .8rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); text-decoration: none; padding: 1.1em 1.7em; background: transparent; border: 1px solid color-mix(in srgb, var(--color-gold) 70%, transparent); border-radius: 999px; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
@media (hover: hover) and (pointer: fine) { .f-cta a:hover, .cf-send:hover { background: var(--color-gold); color: var(--color-tin); } .paper .cf-send:hover { color: var(--color-cream); } }
/* Lines along the film: one at a time, while its scene plays; dark ink over the cream scenes. */
.f-cap { top: 50%; max-width: min(27rem, calc(100% - 32px)); transform: translateY(calc(-50% + 12px)); }
.f-cap.on { transform: translateY(-50%); }
.f-cap.f-low { top: auto; bottom: clamp(48px, 11svh, 120px); transform: translateY(12px); }
.f-cap.f-low.on { transform: none; }
.f-cap.f-right { left: auto; right: var(--space-gutter); text-align: right; }
.f-say { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.9rem)/1.3 var(--font-display); color: var(--color-ink); text-wrap: balance; }
.f-cap .f-say { text-shadow: 0 1px 18px rgb(8 7 5 / .55); }
.f-cream .f-kicker { color: #74581b; }
.f-cream .f-say { color: #1b1711; text-shadow: none; }
.f-end-line { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); color: var(--color-muted); margin-top: 1.2rem; max-width: 24rem; }
@media (prefers-reduced-motion: reduce) { .f-words, .f-land > * { opacity: 1; transform: none; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .f-cap { display: none; } }
/* On a phone the tin and the bowl fill the frame: the dark scenes' words sit on a soft scrim, and none of them on the right. */
@media (max-width: 700px) {
  .f-cap.f-right { left: var(--space-gutter); right: auto; text-align: left; top: auto; bottom: clamp(48px, 11svh, 120px); transform: translateY(12px); }
  .f-cap.f-right.on { transform: none; }
  .f-cap:not(.f-cream), .f-end { padding: 18px 20px; margin-left: -8px; border-radius: 4px; background: rgb(13 11 8 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .f-cap.f-cream { padding: 18px 20px; margin-left: -8px; border-radius: 4px; background: rgb(239 230 210 / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* ---------- Below the film ---------- */
:root { --pad-x: max(var(--space-gutter), calc((100% - var(--max)) / 2)); }
.story, .range, .enquire, .tins, .house, .bar-pairs { padding: var(--space-section) var(--pad-x); }

/* Only two colours: the tin's black and the cream of the pick in the film. The story, the range and the tins are cream;
   the film, the form and the footer are black. Each cream section sets the colour tokens again, so every rule under it reads them in its own colours. */
.paper { --color-ink: #1b1711; --color-muted: #625846; --color-line: rgb(27 23 17 / .14); --color-line-strong: rgb(27 23 17 / .3); --color-gold: #74581b; --color-failed: #8c3b1e; background: var(--paper, #efe6d2); color: var(--color-ink); color-scheme: light; }
.paper + .paper { border-top: 1px solid var(--color-line); }

/* The photographs stand still (Fredd, 29 Oct: motion only where it means something). */
[data-life] { overflow: hidden; }
[data-life] img { transform-origin: 40% 55%; }


/* Rows and blocks rise into place as they come into view, where the browser can tie it to the scroll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .olive, .story-text > *, .house-text > *, .house-facts li, .pairs li, .fam-text > :not(.olives), .spec tr, .care, .enq-head > *, .cf-field { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.fam-pic img { width: 100%; height: 100%; object-fit: cover; }
.story-text p:not(.kicker):not(.story-say) { color: var(--color-muted); max-width: 32rem; margin-top: 1.2rem; font-size: var(--fs-lead); }
.story-text .h2 { margin-bottom: .6rem; }
.story-say { font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.3 var(--font-display); color: var(--color-ink); margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--color-line); max-width: 26rem; }

/* The range alternates by family, cream then black, so the long list has a rhythm; the head sits on black. */
.range { padding: var(--space-section) 0 0; }
.range-head { max-width: calc(50rem + 2 * var(--pad-x)); padding: 0 var(--pad-x) clamp(64px, 11svh, 128px); }
.range-lead { font-size: var(--fs-lead); color: var(--color-muted); margin-top: 1.4rem; max-width: 36rem; }
.range-index { display: flex; flex-wrap: wrap; gap: .4rem 0; margin-top: 2.4rem; }
.range-index a { font: 400 1.02rem/1 var(--font-display); color: var(--color-ink); text-decoration: none; padding: .55rem 1.1rem .55rem 0; margin-right: 1.1rem; border-right: 1px solid var(--color-line); }
.range-index a:last-child { border-right: 0; }
@media (hover: hover) and (pointer: fine) { .range-index a:hover { color: var(--color-gold); } }
.range-key { font-size: 1rem; color: var(--color-ink); margin-top: 1.6rem; max-width: 40rem; padding-left: 1rem; border-left: 2px solid var(--color-gold); }

.fam { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(72px, 12svh, 144px) var(--pad-x); scroll-margin-top: 0; }
.fam:nth-of-type(even) .fam-pic { order: 2; }
/* Each family's bowl in a round window ringed twice in gold, like the tin's lid and the house's seals, numbered in a
   small gold medallion, with the price list's Spanish name in the tin's script under it. */
.fam { align-items: center; }
.fam-pic { position: relative; width: min(100%, 540px); justify-self: center; margin-bottom: 3.6rem; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .fam-pic { position: sticky; top: max(110px, calc(50svh - min(20vw, 270px) - 1.8rem)); } }
.fam-pic::before, .fam-pic::after { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.fam-pic::before { margin: -13px; border: 1px solid var(--color-gold); }
.fam-pic::after { margin: -21px; border: 1px solid color-mix(in srgb, var(--color-gold) 38%, transparent); }
.fam-disc { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 34px 80px -34px rgb(8 7 5 / .6); }
.fam-disc picture { display: block; height: 100%; }
.fam-disc img { object-position: 50% 60%; transform-origin: 50% 60%; }
#sevillana .fam-disc img { object-position: 60% 58%; transform-origin: 60% 58%; }
#gordal .fam-disc img { object-position: 52% 62%; transform-origin: 52% 62%; }
#otras .fam-disc img { object-position: 62% 64%; transform-origin: 62% 64%; }
.fam-n { position: absolute; top: 3.5%; right: 3.5%; width: clamp(52px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--color-tin); border: 1px solid var(--color-gold); color: var(--color-gold); font: 400 1.05rem/1 var(--font-mark); letter-spacing: .06em; }
.paper .fam-n { background: var(--paper, #efe6d2); }
.fam-cap { position: absolute; left: 0; right: 0; top: calc(100% + 1.9rem); text-align: center; font: 400 clamp(1.7rem, 2.3vw, 2.25rem)/1 "Sacramento", cursive; color: var(--color-gold); }
.fam-title { font: 400 var(--fs-h3)/1.05 var(--font-display); }
.fam-line { color: var(--color-muted); margin-top: 1rem; max-width: 30rem; }
.olives { list-style: none; padding: 0; margin-top: 2rem; }
.olive { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--color-line); }
.olive-name { font: 400 1.22rem/1.25 var(--font-display); }
.olive-note { font-size: .95rem; color: var(--color-muted); max-width: 26rem; margin-top: .35rem; }
.sizes { list-style: none; padding: 0; padding-top: .2rem; text-align: right; font-size: .86rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sizes li { white-space: nowrap; }
.sizes .cal { color: var(--color-ink); margin-right: .7rem; }
.sizes .cans { color: var(--color-muted); }

/* The tins */
.tins { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px) clamp(32px, 6vw, 96px); }
.tins-head p:not(.kicker) { color: var(--color-cream-muted); font-size: var(--fs-lead); margin-top: 1.4rem; max-width: 30rem; }
.tins-fig { align-self: center; }
.tins-draw { width: 100%; height: auto; overflow: visible; }
.tins-draw .body { fill: var(--color-tin); }
.tins-draw .lid { fill: #1d1912; stroke: var(--color-gold); stroke-width: 1.2; }
.tins-draw .rim { fill: none; stroke: var(--color-gold); stroke-width: 1.2; }
.tins-draw .rib { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 1; }
.tins-draw .emblem ellipse { fill: none; stroke: var(--color-gold); stroke-width: 3; }
.tins-draw .emblem .leaf { fill: var(--color-gold); }
.tins-draw .dim { stroke: var(--color-cream-muted); stroke-width: 1; }
.tins-draw .dimt { font: 500 15px var(--font-text); fill: var(--color-cream-muted); letter-spacing: .04em; }
.tins-draw .kg { font: 400 30px var(--font-display); fill: var(--color-cream-ink); }
.spec { grid-column: 1 / -1; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec th, .spec td { text-align: left; padding: 1rem 1rem 1rem 0; border-top: 1px solid rgb(27 23 17 / .16); font-weight: 400; vertical-align: baseline; }
.spec thead th { font: 500 .74rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); border-top: 0; }
.spec tbody th { color: var(--color-cream-muted); width: 32%; }
.spec small { color: var(--color-cream-muted); font-size: .85em; }
.care { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); padding-top: 2rem; border-top: 1px solid rgb(27 23 17 / .16); }
.care-title { font: 400 var(--fs-h3)/1.1 var(--font-display); }
.care ul { padding-left: 1.1rem; color: var(--color-cream-muted); }
.care li + li { margin-top: .6rem; }

/* Enquire */
.enquire { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); scroll-margin-top: 0; }
.enq-head p:last-child { color: var(--color-muted); font-size: var(--fs-lead); margin-top: 1.4rem; max-width: 28rem; }
.cf { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; align-content: start; }
.cf-wide { grid-column: 1 / -1; }
.cf-field label { display: block; font: 500 .72rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .7rem; }
.cf-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cf input, .cf textarea { width: 100%; padding: .7rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--color-line-strong, rgb(239 230 210 / .3)); border-radius: 0; color: var(--color-ink); font-size: 1.05rem; transition: border-color .3s ease; }
.cf textarea { resize: vertical; min-height: 7.5rem; }
.cf textarea::placeholder { color: var(--color-muted); opacity: .85; }
.cf input:focus-visible, .cf textarea:focus-visible { outline: none; border-bottom-color: var(--color-gold); }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.cf-privacy { font-size: .88rem; color: var(--color-muted); }
.cf-privacy a { color: var(--color-ink); }
.cf-status { min-height: 1.6em; color: var(--color-ink); }
.cf[data-state="failed"] .cf-status { color: var(--color-failed, #e7b38a); }
.cf-send:disabled { opacity: .6; cursor: progress; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.foot { border-top: 1px solid var(--color-line); padding: clamp(48px, 8svh, 88px) var(--space-gutter) max(32px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 3rem; align-items: baseline; }
.foot-mark { font-size: 1.9rem; color: var(--color-gold); text-decoration: none; line-height: 1; }
.foot-line { color: var(--color-muted); font-size: .92rem; }
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .92rem; }
.foot-links a { color: var(--color-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--color-gold); } }

/* Legal pages and 404 */
.legal { min-height: 70svh; padding: clamp(140px, 22svh, 220px) max(var(--space-gutter), calc((100% - 46rem) / 2)) var(--space-section); }
.legal h1 { font: 400 var(--fs-h2)/1.06 var(--font-display); margin-bottom: 2rem; }
.legal h2 { font: 400 1.5rem/1.2 var(--font-display); margin: 2.4rem 0 .8rem; }
.legal p, .legal li { color: var(--color-muted); }
.legal p + p { margin-top: 1rem; }
.legal .back { margin-top: 2.4rem; }
.legal .back a { color: var(--color-gold); }
.legal .pending { color: var(--color-ink); border-left: 1px solid var(--color-gold); padding-left: 1rem; }

/* Tablets and phones: one column, every composition again rather than squeezed. */
@media (max-width: 899px) {
  .story, .fam, .enquire, .tins, .care { grid-template-columns: minmax(0, 1fr); }
  .fam:nth-of-type(even) .fam-pic { order: 0; }
  .fam-pic { width: min(84%, 420px); margin: 22px auto 5rem; }
  .tins-fig { max-width: 520px; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .olive { display: flex; flex-direction: column; gap: 0; }
  .olive-main { display: contents; }
  .sizes { order: 1; text-align: left; margin-top: .5rem; }
  .range-index a { border-right: 0; margin-right: 1.4rem; padding-right: 0; }
  .cf { grid-template-columns: minmax(0, 1fr); }
  .spec th, .spec td { padding-right: .6rem; font-size: .92rem; }
  .spec tbody th { width: 30%; }
  .f-sub { margin-left: 4.6rem; }
}

/* ---------- Serving ideas and About us (the eight days, then the house): short reads between the tins and the form ---------- */
.house { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.house .seals { grid-column: 1 / -1; }
.house-text p:not(.kicker) { color: var(--color-muted); max-width: 34rem; margin-top: 1.2rem; font-size: var(--fs-lead); }
.house-facts { list-style: none; padding: 0; display: grid; gap: 1.2rem; }
.house-facts li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; font-size: .95rem; color: var(--color-muted); padding-top: 1.2rem; border-top: 1px solid var(--color-line); }
.house-facts .fact-n { font: 400 1.35rem/1 var(--font-display); color: var(--color-gold); }
.pairs { list-style: none; padding: 0; margin-top: clamp(2rem, 4vw, 3.2rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pairs li { padding-top: 1.2rem; border-top: 1px solid var(--color-line); }
.pair-name { font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.2 var(--font-display); }
.pairs p { color: var(--color-muted); margin-top: .6rem; max-width: 18rem; }
@media (max-width: 899px) { .house { grid-template-columns: minmax(0, 1fr); } .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pairs { grid-template-columns: minmax(0, 1fr); } }
/* The certifications as quiet gold seals in the site's two colours (the bodies' own colour logos would break them). */
.seals { list-style: none; padding: 0; margin-top: clamp(1rem, 3vw, 2.4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.seal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.seal-ring { width: 76px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--color-gold); box-shadow: inset 0 0 0 4px var(--paper, #efe6d2), inset 0 0 0 5px color-mix(in srgb, var(--color-gold) 45%, transparent); display: grid; place-content: center; text-align: center; font: 400 1.02rem/1 var(--font-mark); color: var(--color-gold); letter-spacing: .04em; }
.seal-sub { display: block; font: 500 .62rem/1 var(--font-text); letter-spacing: .18em; text-transform: uppercase; margin-top: .35rem; }
.seal-name { display: block; font: 400 1.15rem/1.25 var(--font-display); color: var(--color-ink); }
.seal-note { display: block; font-size: .82rem; line-height: 1.45; color: var(--color-muted); margin-top: .3rem; }
@media (max-width: 899px) { .seals { grid-template-columns: minmax(0, 1fr); } }
/* ---------- The languages: ES EN DE in quiet small capitals; the page's own language in full with a hairline under
   it (as the bar marks the section in view), the others dimmed. In the bar from 600 px, under the menu's sections, and
   under the footer's links. ---------- */
.langs { display: inline-flex; align-items: center; gap: .15em; }
.langs a, .nav .langs a, .bar-nav .nav .langs a { position: relative; font: 500 .72rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, currentColor 58%, transparent); text-decoration: none; padding: .75em .4em; transition: color .3s ease; }
.langs a[aria-current] { color: inherit; }
.langs a[aria-current]::after { content: ""; position: absolute; left: .4em; right: calc(.4em + .14em); bottom: .35em; height: 1px; background: currentColor; }
@media (hover: hover) and (pointer: fine) { .langs a:hover { color: inherit; } }
.nav .langs a { font-size: inherit; letter-spacing: .14em; }
.bar-nav .nav .langs { color: var(--color-cream); font-size: .72rem; margin-inline: -.3em; transition: color .4s ease; }
html.on-paper .bar-nav .nav .langs, html.on-cream-film .bar-nav .nav .langs { color: #1b1711; }
html.on-paper .bar-nav .nav .langs a:not([aria-current]), html.on-cream-film .bar-nav .nav .langs a:not([aria-current]) { color: rgb(27 23 17 / .58); }
.bar:not(.bar-nav) .nav .langs { color: #fff; font-size: .78rem; }
@media (max-width: 599px) { .bar .langs { display: none; } }
.menu-main .langs { color: var(--color-ink); margin: clamp(1.2rem, 3svh, 2rem) 0 0 -.4em; }
.menu-main .langs a { font-size: .78rem; }
.foot .langs { color: var(--color-ink); margin-left: -.4em; }
@media (min-width: 900px) { .foot .langs { grid-column: 3; justify-self: start; margin-top: -.6rem; } }
.foot-credit { font-size: .82rem; color: var(--color-muted); }
.foot-credit a { color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-line); transition: color .3s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .foot-credit a:hover { color: var(--color-gold); border-color: currentColor; } }
@media (min-width: 900px) { .foot-credit { grid-column: 1 / 3; grid-row: 2; margin-top: -.6rem; align-self: center; } }


/* ---------- Line drawings that draw themselves (Fredd, 29 Oct: motion that means something, premium and minimal; the
   photographs stay still). Gold lines in the tin's manner, each drawn once as it comes into view (draw.js adds
   .is-drawn), then at rest. Without draw.js, or under reduced motion, everything is simply there. ---------- */
/* Our house: where the olives come from, the groves of Andalucía, Extremadura and Aragón, and the road to Segorbe. */
.house-side { display: grid; gap: clamp(28px, 4vw, 48px); align-content: end; }
.harvest { margin: 0; }
.harvest-map { display: block; width: min(100%, 420px); height: auto; margin-left: auto; overflow: visible; }
.harvest-map .ln { fill: none; stroke: var(--color-gold); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.harvest-map .coast { stroke-opacity: .55; }
.harvest-map .route { stroke-width: 1.3; stroke-dasharray: 1; }
.harvest-map .grove { fill: var(--paper, #efe6d2); stroke: var(--color-gold); stroke-width: 1.2; }
.harvest-map .town { fill: var(--color-gold); }
.harvest-map .town-ring { fill: none; stroke: var(--color-gold); stroke-width: .8; }
.harvest-map .lbl { font: 500 10px var(--font-text); letter-spacing: .16em; text-transform: uppercase; fill: var(--color-muted); }
.harvest-map .lbl-town { font: 400 15px var(--font-display); letter-spacing: .02em; text-transform: none; fill: var(--color-ink); }
@media (max-width: 899px) { .harvest-map { margin-left: 0; width: min(100%, 360px); } }
/* At the table: a glass for each olive, drawn in gold over its name. */
.pair-ico { display: block; width: 44px; height: auto; margin-bottom: 1rem; overflow: visible; }
.pair-ico .ln { fill: none; stroke: var(--color-gold); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; }
.pair-ico .olive { fill: var(--color-gold); }
.pairs li:nth-child(2) .pair-ico { --s: .25s; } .pairs li:nth-child(3) .pair-ico { --s: .5s; } .pairs li:nth-child(4) .pair-ico { --s: .75s; }
html.draws [data-draw] .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.draws [data-draw] .fade { opacity: 0; }
html.draws [data-draw].is-drawn .ln { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d, 1.4s) cubic-bezier(.45, 0, .2, 1) calc(var(--s, 0s) + var(--t, 0s)); }
html.draws [data-draw].is-drawn .fade { opacity: 1; transition: opacity .8s ease calc(var(--s, 0s) + var(--t, 0s)); }
html.draws .harvest-map .coast { --d: 2.2s; }
html.draws .harvest-map .route { --d: 1.1s; }

/* The range: a ring of gold dots turns slowly around each olive window, a full turn a minute, the next family the
   other way (Fredd liked this one: it belongs to the window, like the dotted pattern on the tin). */
.fam-pic::after { border: 0; margin: -24px; background: var(--color-gold); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='297' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0 10.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='297' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0 10.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .fam .fam-pic::after { animation: turn 60s linear infinite; }
  .fam:nth-of-type(even) .fam-pic::after { animation-direction: reverse; }
}
@keyframes turn { to { transform: rotate(1turn); } }
/* The story: the bowl of clean water in the same round window, still (the film above it moves), an 8 for the eight
   days in the medallion and the water named in the tin's script. */
.story { align-items: center; }
.story-window { width: min(100%, 520px); }
.story-window .fam-disc img { object-position: 92% 56%; transform-origin: 92% 56%; }
.story-window .fam-n { font: 400 1.5rem/1 var(--font-display); letter-spacing: 0; }
@media (min-width: 900px) { .story-window { position: relative; top: auto; } }
@media (max-width: 899px) { .story-window { width: min(84%, 420px); margin: 22px auto 5rem; } }
/* the medallion sits over the turning ring of dots */
.fam-n { z-index: 2; }

/* ---------- The way to us: the first screen, the film's last frame, the form ---------- */
/* The first screen says the trade in plain words, under the wordmark. */
.f-trade { font: 500 clamp(.92rem, .85rem + .3vw, 1.05rem)/1.45 var(--font-text); color: var(--color-ink); margin-top: 1.4rem; max-width: 30rem; }
/* The film's last frame: contact first, filled; the olives beside it. */
.f-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.f-cta a.f-cta-go, .cf-send { background: var(--color-gold); color: var(--color-tin); border-color: var(--color-gold); }
@media (hover: hover) and (pointer: fine) { .f-cta a.f-cta-go:hover, .cf-send:hover, .paper .cf-send:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-tin); } }
.f-skip a { min-height: 44px; }
/* El Pecado de Lola closes the olive list: her red and her page. */
.fam-lola { margin: 0 var(--pad-x) clamp(72px, 12svh, 144px); border: 1px solid rgb(217 10 16 / .55); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); max-width: 64rem; overflow: hidden; }
.fam-lola-text { display: grid; gap: .6rem; align-content: center; padding: clamp(28px, 4vw, 48px); }
/* Lola's red skirt, as on her page: her cream, the film over its still, the whole picture a way to her page */
.fam-lola-pic { position: relative; display: block; background: #f7efe3; min-height: 300px; }
.fam-lola-still, .fam-lola-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fam-lola-film { opacity: 0; transition: opacity .4s ease; }
.fam-lola-film.is-playing { opacity: 1; }
@media (max-width: 699px) { .fam-lola { grid-template-columns: minmax(0, 1fr); } .fam-lola-pic { order: -1; min-height: 0; aspect-ratio: 4 / 3; } }
.fam-lola .kicker { color: #ff8a80; display: inline-flex; align-items: center; gap: .6em; }
.fam-lola .kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d90a10; box-shadow: 0 0 0 3px rgb(217 10 16 / .22); }
.fam-lola-more span { margin-left: .5em; }
.fam-lola-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 2rem; margin-top: .4rem; }
.fam-lola-more { display: inline-flex; align-items: center; min-height: 44px; color: #ff8a80; text-decoration: none; font: 500 .72rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .fam-lola-more:hover { text-decoration: underline; text-underline-offset: .4em; } }
/* The eight days' badge: the number and the word, so it never reads as a seventh family. */
.fam-n-days { display: grid; place-content: center; gap: .15em; line-height: 1; }
.fam-n-days small { font: 500 .52rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; }
/* Errors: under their own field, in the tin's gold, the field's line gold too. */
.cf-err { display: block; min-height: 0; margin-top: .45rem; font-size: .9rem; color: var(--color-gold); }
.cf-err:empty { display: none; }
.cf [aria-invalid="true"] { border-bottom-color: var(--color-gold); border-bottom-width: 2px; }
.cf-send { font-weight: 600; min-height: 48px; }
.cf[data-state="sent"] .cf-status { font: 400 1.35rem/1.35 var(--font-display); color: var(--color-gold); }
/* Phones: every control at least 44 px to tap. */
.nav .nav-menu, .nav .nav-lola { min-height: 44px; min-width: 44px; justify-content: center; }
.bar-nav .nav .nav-ask { position: relative; }
.bar-nav .nav .nav-ask::after { content: ""; position: absolute; inset: -8px -4px; }
.menu-main .langs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.range-index a { min-height: 44px; display: inline-flex; align-items: center; }
/* On Lola's page the bar's capsule is solid cream, so her red link stays readable over the red skirt. */
html.on-paper .page-lola .bar-nav .nav { background: rgb(247 239 227 / .95); }
/* The cream film scenes: the gold kicker one step darker, readable on the lighter frames too. */
.f-cream .f-kicker { color: #5e4612; }
/* The film's moving layers never widen the page sideways. */
main { overflow-x: clip; }
/* The form's promise on delivery, and Lola's tins on her card. */
.enq-delivery { margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--color-gold); color: var(--color-ink); font-size: .98rem; }
.fam-lola-tins { font-size: .95rem; color: var(--color-ink); }
/* A detail still to come (the Imprint's email address). */
.legal .pending { color: var(--color-muted); font-style: italic; }
/* ---------- Wholesale: the tins, boxes and pallets on a page of their own ---------- */
.wholesale { padding: clamp(140px, 22svh, 220px) max(var(--pad-x), calc((100% - 1120px) / 2)) var(--space-section); }
.ws-head { margin-bottom: clamp(2rem, 5vw, 3.6rem); }
.ws-lead { color: var(--color-muted); font-size: var(--fs-lead); margin-top: 1.4rem; max-width: 36rem; }
.wholesale .spec { margin-top: 1rem; }
.ws-delivery { margin-top: 2.4rem; padding-left: 1rem; border-left: 1px solid var(--color-gold); color: var(--color-ink); }
.ws-ask { margin-top: 2rem; }
.ws-ask .cf-send { display: inline-flex; align-items: center; background: #1b1711; border-color: #1b1711; color: #efe6d2; }
@media (hover: hover) and (pointer: fine) { .ws-ask .cf-send:hover, .paper .ws-ask .cf-send:hover { background: var(--color-gold); border-color: var(--color-gold); color: #1b1711; } }
/* the tins on the home page lead to it */
.tins-more { margin-top: 1.6rem; }
.tins-more a { display: inline-flex; align-items: center; min-height: 44px; color: #74581b; font: 500 .74rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .5em; text-decoration-color: rgb(116 88 27 / .4); }
@media (hover: hover) and (pointer: fine) { .tins-more a:hover { text-decoration-color: currentColor; } }
/* A section kept in the page but not shown (the eight days, for now). */
main > section[hidden] { display: none; }
/* No native play button anywhere (an iPhone in Low Power Mode shows one on every video it may not start). */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
/* Lola sits in the bar on laptops only; below that she is in the menu. */
@media (max-width: 1239px) { .bar-nav .nav .nav-lola { display: none; } }
/* ---------- Phones and upright tablets: the film as a sharp square at the top of the held screen, the words under it ---------- */
@media (max-width: 699px), (orientation: portrait) and (max-width: 1199px) {
  .r-stage { --sq: min(100vw, 70svh); }
  .r-media { inset: 0 auto auto 50%; width: var(--sq); height: var(--sq); translate: -50% 0; }
  .r-stage::after { display: none; }
  /* the words in the middle of the space under the film */
  .f-land, .f-land.on, .f-cap, .f-cap.on, .f-cap.f-low, .f-cap.f-low.on, .f-end { top: calc(var(--sq) + (100svh - var(--sq)) / 2); bottom: auto; transform: translateY(-50%); }
  .f-words { max-width: calc(100% - 2 * var(--space-gutter)); }
  .f-cap.f-cream, .f-cap:not(.f-cream), .f-end { padding: 0; margin-left: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .f-cap .f-say, .f-cream .f-say { color: var(--color-ink); text-shadow: none; font-size: clamp(1.15rem, 1rem + 1.2vw, 1.5rem); }
  .f-cream .f-kicker { color: var(--color-gold); }
  .f-land .f-brand { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .f-land .f-trade { margin-top: .8rem; }
  .f-land .f-line { margin-top: 1rem; font-size: 1.05rem; }
  .f-skip { margin-top: .6rem; }
  .f-title { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); }
  .f-end .f-cta { margin-top: 1rem; }
}
@media (max-width: 699px) and (max-height: 720px), (orientation: portrait) and (max-width: 1199px) and (max-height: 720px) { .f-land .f-line, .f-land .f-script { display: none; } }