/* 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; }
.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: 999px) { .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: 1000px) { .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. */
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-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.r-stage video.r-clip:not([data-clip="1"]) { visibility: hidden; }
.r-stage video.r-loop { z-index: 3; opacity: 1; transition: opacity .5s ease; }
.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); }
.f-words.on { opacity: 1; transform: none; }
.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-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; }
/* 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; } }
@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); }

/* A camera that never quite stops: each photograph drifts in very slowly while it is on screen. */
[data-life] { overflow: hidden; }
[data-life] img { transform-origin: 40% 55%; }
@media (prefers-reduced-motion: no-preference) {
  [data-life] img { animation: drift 16s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: scale(1.001); } to { transform: scale(1.045) translateX(-.6%); } }

/* 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; }
.story-pic { aspect-ratio: 3 / 2; border-radius: 2px; }
.story-pic img, .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: .9rem; color: var(--color-muted); margin-top: 1.6rem; }

.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; }
.fam-pic { aspect-ratio: 3 / 2; border-radius: 2px; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .fam-pic { position: sticky; top: max(96px, calc(50svh - 18vw)); } }
.fam-es { font: 500 .74rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); }
.fam-title { font: 400 var(--fs-h3)/1.05 var(--font-display); margin-top: 1rem; }
.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); }
.olive-ask { display: inline-block; margin-top: .5rem; font: 500 .72rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); text-decoration: none; padding: .5rem 0; }
.olive-ask::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) { .olive-ask:hover { text-decoration: underline; text-underline-offset: .4em; } }

/* 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: 24px; }
.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; }
  .story-pic { margin-inline: calc(-1 * var(--space-gutter)); border-radius: 0; }
  .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; }
  .olive-ask { order: 2; }
  .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; }
}
.olive-ask .visually-hidden { text-transform: none; letter-spacing: normal; }

/* ---------- Our house, and the pairings: short reads between the story, the range 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); } }