@charset "UTF-8";
/* ==========================================================================
   Di Gioia Gastronomie — "Oficina"
   A print shop, not a screen. Three inks on unbleached paper.

   The visual language comes from Túlio's own history: 35 years designing
   surfwear prints (screen printing, limited ink palettes, hand registration),
   years in Japan (ma, restraint, the stamped seal), and Ayurveda in Zurich
   (spice, warmth). Indigo is the sea he grew up in and the dye of the cloth
   he printed; ochre is turmeric; the leaf green is his own logo.

   Rules of the house:
   - Flat inks. No gradients, no glows, no soft drop shadows.
   - Square corners, except the seal, which is round because a stamp is round.
   - Every reveal is a squeegee pass, left to right. Nothing fades up.
   - Colour plates sit slightly out of register, then snap in. That misalignment
     is the signature of a thing printed by hand.
   ========================================================================== */

/* --------------------------------------------------------- tokens */
:root {
  color-scheme: only light;

  /* inks */
  --paper:       #EDE6D7;
  --paper-deep:  #E4DAC6;
  --paper-lift:  #F5F1E7;
  --ink:         #16211D;
  --ink-soft:    rgba(22, 33, 29, .70);
  --ink-faint:   rgba(22, 33, 29, .45);
  --rule:        rgba(22, 33, 29, .22);
  --rule-soft:   rgba(22, 33, 29, .12);
  --indigo:      #26485B;
  --indigo-deep: #172F3C;
  --ochre:       #C8843A;
  --ochre-deep:  #A8631F;
  --leaf:        #6E8B4E;
  --clay:        #B0563A;

  /* type */
  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --text:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* measure */
  --pad:   clamp(20px, 5.2vw, 76px);
  --rail:  0px;
  --shell: 1480px;

  /* the squeegee */
  --pass: cubic-bezier(.16, .84, .28, 1);
}

@media (min-width: 1180px) { :root { --rail: 58px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--ochre-deep);
  outline-offset: 3px;
}

::selection { background: var(--ochre); color: var(--paper-lift); }

/* Paper grain. One fixed layer over the whole document so the texture stays
   put while the content moves under it, the way ink sits on a sheet. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .40;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23g)' opacity='.34'/></svg>");
}

/* --------------------------------------------------------- type scale */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.d-xl { font-size: clamp(46px, 7.6vw, 108px); }
.d-lg { font-size: clamp(36px, 5.2vw, 72px); }
.d-md { font-size: clamp(28px, 3.4vw, 46px); }
.d-sm { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.06; }

.label {
  font-family: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.3;
}
.label-ochre { color: var(--ochre-deep); }
.label-faint { color: var(--ink-faint); }

.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 54ch;
}
.body-copy p { color: var(--ink-soft); max-width: 64ch; }
.body-copy p + p { margin-top: 1.05em; }

.ochre { color: var(--ochre-deep); }
.indigo { color: var(--indigo); }

/* --------------------------------------------------------- layout shell */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}
main { padding-left: var(--rail); }

.band { padding-block: clamp(48px, 5.6vw, 88px); position: relative; }
.band-deep { background: var(--paper-deep); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .lede, .band-ink .body-copy p { color: rgba(237, 230, 215, .74); }
.band-ink .label-faint { color: rgba(237, 230, 215, .5); }

.hr { height: 1px; background: var(--rule); border: 0; }

/* --------------------------------------------------------- the selvedge
   A printed band of Túlio's own botanical marks — the carrot, the herb
   sprig, the asparagus and the spoon that live inside his seal — repeated
   the way a print repeats along a bolt of cloth. It marks the seam between
   sections, which is the only job a selvedge has ever had. */
.selvedge {
  height: 50px;
  border-block: 1px solid var(--rule);
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: auto 38px;
  opacity: .72;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 220 40' fill='none' \
stroke='%2316211D' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M18 33V13M18 21c-4-1-6-4-6-7 3 0 6 2 6 5M18 24c4-1 6-4 6-7-3 0-6 2-6 5'/>\
<path d='M62 32l-4-15h8l-4 15zM58 17c0-3 2-5 4-5s4 2 4 5M60 12l-2-4M64 12l2-4M62 11V6'/>\
<path d='M106 34V16M102 34V19M110 34V19M106 16c0-3 1-5 0-7M102 19c0-3 0-4-1-6M110 19c0-3 0-4 1-6'/>\
<path d='M150 34c0-8 3-11 3-15 0-4-3-5-3-8 0-3 3-4 6-4s5 2 5 5-4 4-4 7 3 4 3 8-3 7-3 7'/>\
<path d='M196 33c8-3 12-9 12-15 0-4-3-7-7-7s-6 3-6 6M196 33c-8-3-12-9-12-15 0-4 3-7 7-7'/>\
</svg>");
}
.band-ink .selvedge,
.selvedge-light {
  border-color: rgba(237, 230, 215, .28);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40' viewBox='0 0 220 40' fill='none' \
stroke='%23EDE6D7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M18 33V13M18 21c-4-1-6-4-6-7 3 0 6 2 6 5M18 24c4-1 6-4 6-7-3 0-6 2-6 5'/>\
<path d='M62 32l-4-15h8l-4 15zM58 17c0-3 2-5 4-5s4 2 4 5M60 12l-2-4M64 12l2-4M62 11V6'/>\
<path d='M106 34V16M102 34V19M110 34V19M106 16c0-3 1-5 0-7M102 19c0-3 0-4-1-6M110 19c0-3 0-4 1-6'/>\
<path d='M150 34c0-8 3-11 3-15 0-4-3-5-3-8 0-3 3-4 6-4s5 2 5 5-4 4-4 7 3 4 3 8-3 7-3 7'/>\
<path d='M196 33c8-3 12-9 12-15 0-4-3-7-7-7s-6 3-6 6M196 33c-8-3-12-9-12-15 0-4 3-7 7-7'/>\
</svg>");
}

/* --------------------------------------------------------- plates
   Every photograph is a printed plate: a flat colour block sits behind it,
   out of register by a few millimetres, and snaps home when the plate is
   pulled. That is the whole idea of the site in one component. */
.plate { position: relative; display: block; }
.plate > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--indigo);
  transform: translate(14px, 14px);
  transition: transform 1.05s var(--pass);
}
.plate-ochre::before { background: var(--ochre); }
.plate-leaf::before  { background: var(--leaf); }
.plate.in::before    { transform: translate(6px, 6px); }

/* --------------------------------------------------------- squeegee reveal
   One pass of the blade, left to right.

   Two rules keep this safe. First, the hidden state only exists once JS has
   stamped .reveals on <html>: if the script never runs, every word on the site
   is still there. Second, nothing that is clipped is ever the thing we observe
   — a zero-area element can never report itself as on screen, so watching it
   would hide the headline permanently. We watch the section; the section
   reveals its own children. */
:root.reveals .pull { clip-path: inset(0 100% 0 0); }
:root.reveals .pull.in {
  clip-path: inset(0 0 0 0);
  transition: clip-path .82s var(--pass);
}
.pull-d1.in { transition-delay: .09s; }
.pull-d2.in { transition-delay: .18s; }
.pull-d3.in { transition-delay: .27s; }
.pull-d4.in { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  :root.reveals .pull,
  :root.reveals .pull.in { clip-path: none; transition: none; }
  .plate::before, .plate.in::before { transform: translate(6px, 6px); transition: none; }
}

/* --------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  position: relative;
  transition: background .28s var(--pass), color .28s var(--pass);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ochre);
  transform: translate(5px, 5px);
  transition: transform .3s var(--pass);
  pointer-events: none;
}
.btn:hover { background: var(--indigo); }
.btn:hover::after { transform: translate(0, 0); }

.btn-ochre { background: var(--ochre-deep); }
.btn-ochre::after { border-color: var(--ink); }
.btn-ochre:hover { background: var(--ink); }

.btn-open {
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-open::after { border-color: var(--indigo); }
.btn-open:hover { background: var(--ink); color: var(--paper); }

.band-ink .btn-open { color: var(--paper); border-color: rgba(237,230,215,.5); }
.band-ink .btn-open:hover { background: var(--paper); color: var(--ink); }

/* A quiet text link that draws its rule on hover, left to right. */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-weight: 600;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--pass);
}
.link:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------- masthead */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s;
}
.masthead.stuck { box-shadow: 0 1px 0 var(--rule), 0 10px 30px -26px rgba(22,33,29,.7); }

/* The brand document asks for the logo centred and the name not repeated.
   So the seal takes the middle of the masthead the way a wordmark sits on a
   magazine cover, navigation falls to one side and the actions to the other. */
.masthead-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 10px var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.mark { justify-self: center; display: block; line-height: 0; }
.mark img { width: 56px; height: 58px; object-fit: contain; transition: transform .4s var(--pass); }
.mark:hover img { transform: rotate(-6deg); }

.nav { display: none; align-items: center; gap: 26px; white-space: nowrap; }
@media (min-width: 1040px) { .nav { display: flex; } }
/* Five items, and Portuguese and Spanish spell them longer. Between the
   breakpoint and 1200px the nav breathes less so it never crowds the seal. */
@media (min-width: 1040px) and (max-width: 1200px) {
  .nav { gap: 17px; }
  .nav a { font-size: 12.5px; }
}
.nav a { font-size: 13.5px; font-weight: 600; }
.nav a.here { color: var(--ochre-deep); }

.mast-r { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.langs { display: flex; align-items: center; gap: 2px; }
.langs button {
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-faint);
  transition: color .25s;
}
.langs button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.langs button:hover { color: var(--ochre-deep); }

.masthead .btn { padding: 12px 18px; font-size: 10.5px; }
.mast-order { display: none; }
@media (min-width: 620px) { .mast-order { display: inline-flex; } }

.burger { display: grid; gap: 5px; padding: 10px; justify-self: start; margin-left: -10px; }
@media (min-width: 1040px) { .burger { display: none; } }
.burger i { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--pass), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px var(--pad) 26px;
}
.drawer.open { display: block; }
@media (min-width: 1040px) { .drawer, .drawer.open { display: none; } }
.drawer a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--display);
  font-size: 26px;
}
.drawer .btn { margin-top: 22px; width: 100%; justify-content: center; }

/* --------------------------------------------------------- announcement
   A printed overprint bar: one solid pass of ink across the top of the
   sheet, the way a press adds a run-change notice to a job already on the
   paper. It scrolls away with the page — the masthead above it is the only
   thing that earns permanent height.

   Two things make it read as one continuous bar. It sits above the fixed
   rail (z 56 against the rail's 55, still under the masthead's 60) so no
   paper-coloured strip interrupts the ink at the left edge. And its inner
   padding clears --rail the same way <main> does, so the sentence is
   centred over the content, not over the rail. */
.announce {
  position: relative;
  z-index: 56;
  background: var(--ink);
  color: var(--paper);
}
.announce-in {
  max-width: calc(var(--shell) + var(--rail));
  margin-inline: auto;
  padding: 13px var(--pad) 13px calc(var(--pad) + var(--rail));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 5px 15px;
  color: inherit;
}
/* The ochre square is the same mark the ticker uses between facts. */
.announce-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ochre);
  flex: none;
}
.announce-flag::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--ochre);
  flex: none;
}
.announce-text {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(237, 230, 215, .8);
}
.announce-text b { font-weight: 600; color: var(--paper); }
/* Carries its own hairline so it reads as the action even before a cursor
   arrives; the rule fills to solid when the bar is hovered. */
.announce-cta {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(237, 230, 215, .42);
  transition: border-color .3s var(--pass);
}
.announce-in:hover .announce-cta { border-bottom-color: var(--paper); }

/* --------------------------------------------------------- rail
   A fixed index down the left edge. It tells you where you are in the page
   and takes you somewhere else — the table of contents of a printed thing. */
.rail {
  display: none;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  z-index: 55;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  padding-block: 96px 26px;
}
@media (min-width: 1180px) { .rail { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } }
/* The announcement bar prints over the rail, so on the pages that carry one
   the rail starts its first word below the bar rather than under it. Browsers
   without :has() simply keep the old offset — nothing breaks. */
body:has(.announce) .rail { padding-top: 148px; }

.rail-dots { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.rail-dots::before {
  content: "";
  position: absolute;
  left: 50%; top: 16px; bottom: 16px;
  width: 1px;
  background: var(--rule-soft);
}
.rail-dots a {
  position: relative;
  display: block;
  width: 100%;
  padding: 11px 0;
  text-align: center;
}
.rail-dots a i {
  display: block;
  width: 11px; height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  opacity: .3;
  transition: width .35s var(--pass), opacity .35s, background .35s;
}
.rail-dots a.on i { width: 26px; opacity: 1; background: var(--ochre-deep); }
.rail-dots a span {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--pass);
}
.rail-dots a:hover span, .rail-dots a:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }

.rail-vert {
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(26px, 3.4vw, 46px) 0; }

.hero-grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }

.hero h1 { position: relative; z-index: 2; }
.hero h1 em { font-style: normal; color: var(--ochre-deep); }

/* The plate breaks upward past the top of the section, the way a printed
   image bleeds off the top of a page. */
@media (min-width: 940px) {
  .hero-fig { margin-top: clamp(-70px, -4vw, -22px); }
}

.hero-sub { margin-top: 26px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

.hero-plate { aspect-ratio: 4/5; }
@media (min-width: 940px) { .hero-plate { aspect-ratio: 3/4; } }
.hero-fig { position: relative; }
.hero-cap {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 3;
  background: var(--paper);
  padding: 11px 16px 10px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

/* The ticker prints the facts that never change, the way a label is woven
   into a garment. */
.ticker {
  border-block: 1px solid var(--rule);
  margin-top: clamp(30px, 4vw, 52px);
  overflow: hidden;
  /* break out of .shell so the label runs edge to edge */
  margin-inline: calc(var(--pad) * -1);
}
.ticker-track {
  display: flex;
  gap: 46px;
  padding-block: 13px;
  white-space: nowrap;
  width: max-content;
  animation: ticker 44s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track > span { display: inline-flex; align-items: center; gap: 46px; }
.ticker-track b { font-weight: 700; letter-spacing: .19em; text-transform: uppercase; font-size: 11px; }
.ticker-track i { display: block; width: 5px; height: 5px; background: var(--ochre); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --------------------------------------------------------- pillars */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  padding: 34px clamp(18px, 2.2vw, 34px) 38px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) { .pillar:nth-child(odd) { border-right: 1px solid var(--rule); } }
@media (min-width: 1000px) {
  .pillar { border-right: 1px solid var(--rule); border-bottom: 0; }
  .pillar:last-child { border-right: 0; }
}
.pillar svg { width: 44px; height: 52px; stroke: var(--indigo); fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { margin-top: 20px; font-family: var(--display); font-size: 21px; line-height: 1.1; }
.pillar p { margin-top: 9px; font-size: 14px; color: var(--ink-faint); }

/* --------------------------------------------------------- section heads */
.head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.head-line { flex: 1; height: 1px; background: var(--rule); min-width: 24px; }
.head-note { color: var(--ink-faint); display: none; }
@media (min-width: 900px) { .head-note { display: block; } }

/* --------------------------------------------------------- story */
.story { display: grid; gap: clamp(34px, 4.5vw, 76px); align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: .82fr 1.18fr; } }
.story-fig { position: relative; }
.story-fig .plate { aspect-ratio: 4/5; }
.story-quote {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.24;
  color: var(--indigo);
}
.story-sign { margin-top: 18px; }

/* Lifestyle photographs stay in full colour — they are the best thing the
   brand owns. The ink plate behind them carries the print idea instead. */

/* --------------------------------------------------------- dishes */
.dishes { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 600px) { .dishes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dishes { grid-template-columns: repeat(4, 1fr); } }
.dish { background: var(--paper); padding: 0 0 26px; display: flex; flex-direction: column; }
.dish-img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-deep); }
.dish-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pass); }
.dish:hover .dish-img img { transform: scale(1.035); }
.dish-img::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--indigo);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .45s var(--pass);
}
.dish:hover .dish-img::after { opacity: .14; }
.dish-txt { padding: 20px clamp(16px, 1.6vw, 24px) 0; }
.dish h3 { font-family: var(--display); font-size: 20px; line-height: 1.12; }
.dish p { margin-top: 8px; font-size: 13.5px; color: var(--ink-faint); }

/* --------------------------------------------------------- steps */
.steps { display: grid; gap: 40px; position: relative; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.step { position: relative; padding-top: 30px; border-top: 2px solid var(--ink); }
@media (min-width: 820px) { .step { padding-right: clamp(20px, 3vw, 54px); } }
.step-n {
  font-family: var(--display);
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: .8;
  color: var(--ochre-deep);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-top: 20px; font-family: var(--display); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.08; }
.step p { margin-top: 11px; color: var(--ink-soft); font-size: 15.5px; }
.step .link { margin-top: 15px; font-size: 14px; color: var(--indigo); }

/* --------------------------------------------------------- delivery */
.delivery { display: grid; gap: clamp(30px, 4vw, 64px); align-items: start; }
@media (min-width: 860px) { .delivery { grid-template-columns: 1fr 1fr; } }
.areas { border-top: 1px solid rgba(237,230,215,.28); }
.areas li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(237,230,215,.16);
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}
.areas li b { font-family: var(--text); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); flex: none; }

/* --------------------------------------------------------- quotes */
.quotes { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .quotes { grid-template-columns: repeat(4, 1fr); } }
.quote { background: var(--paper); padding: 32px clamp(20px, 2vw, 30px) 30px; display: flex; flex-direction: column; }
.quote-mark { font-family: var(--display); font-size: 52px; line-height: .5; color: var(--ochre); height: 26px; }
.quote p { margin-top: 20px; font-size: 15px; line-height: 1.58; color: var(--ink-soft); flex: 1; }
.quote cite { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule-soft); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--indigo); }

/* --------------------------------------------------------- closing + footer */
.closing { text-align: center; }
.closing .display { margin-inline: auto; }
.closing .lede { margin: 22px auto 0; text-align: center; }
.closing .btn { margin-top: 28px; }

.foot { background: var(--ink); color: var(--paper); padding-block: clamp(52px, 6vw, 84px) 34px; }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 56px; } }
.foot h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,230,215,.5); margin-bottom: 16px; }
.foot li + li { margin-top: 11px; }
.foot a:hover { color: var(--ochre); }
.foot-seal { width: 96px; height: 96px; object-fit: contain; }
.foot-slogan { margin-top: 20px; font-family: var(--display); font-size: 23px; line-height: 1.14; max-width: 18ch; }
.foot-base {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(237,230,215,.18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 11.5px;
  color: rgba(237,230,215,.5);
}

/* --------------------------------------------------------- whatsapp */
.wa {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ochre);
  transition: background .3s var(--pass), transform .3s var(--pass);
}
.wa:hover { background: var(--ochre-deep); transform: translateY(-3px); }
.wa svg { width: 25px; height: 25px; fill: currentColor; }
@media (min-width: 900px) { .wa { right: 26px; bottom: 26px; } }

/* --------------------------------------------------------- chef page */
.chapter { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 960px) { .chapter { grid-template-columns: 260px 1fr; } }
.chapter + .chapter { margin-top: clamp(42px, 4.6vw, 68px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); }
.chapter-head { position: relative; }
@media (min-width: 960px) { .chapter-head { position: sticky; top: 118px; } }
.chapter-head h2 { font-family: var(--display); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.02; margin-top: 12px; }
.chapter-body p { color: var(--ink-soft); max-width: 68ch; font-size: 16.5px; }
.chapter-body p + p { margin-top: 1.1em; }
.chapter-body figure { margin: 34px 0; max-width: 720px; }
/* 720px is the honest ceiling for a 937px source: any wider and a retina
   screen is upscaling. Narrower than the band also reads as deliberate. */
.chapter-body .plate { aspect-ratio: 3/2; }
.chapter-body .term { color: var(--indigo); font-weight: 600; font-style: normal; border-bottom: 1px dotted var(--indigo); cursor: help; }

.chef-hero { display: grid; gap: clamp(28px, 4vw, 60px); align-items: end; }
@media (min-width: 900px) { .chef-hero { grid-template-columns: 1.1fr .9fr; } }
.chef-hero .plate { aspect-ratio: 4/5; }

/* --------------------------------------------------------- menu page */
.menu-hero { text-align: center; padding-block: clamp(30px, 3.6vw, 48px) clamp(24px, 3vw, 36px); }
.menu-hero .lede { margin-inline: auto; text-align: center; }

/* Sits under the menu heading, where someone who just clicked "Menu" is
   looking. Quiet enough not to pull focus from the week. */
.menu-large-link {
  margin-top: 22px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ink-faint);
}

.menu-bar {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: var(--paper);
  border-block: 1px solid var(--rule);
}
.menu-bar-in { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 10px var(--pad); scrollbar-width: none; }
.menu-bar-in::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 9px 17px;
  border: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: .25s var(--pass);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-selected="true"], .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-sep { width: 1px; height: 22px; background: var(--rule); flex: none; margin-inline: 6px; }

.week { padding-top: clamp(30px, 3.6vw, 46px); scroll-margin-top: 168px; }
.week-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.week-head .label { flex: none; }
.week-head h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); line-height: 1; white-space: nowrap; }
.week-head .head-line { height: 1px; background: var(--rule); flex: 1; min-width: 24px; }
.week-days { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--rule); }
@media (min-width: 640px) { .week-days { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .week-days { grid-template-columns: repeat(5, 1fr); } }
.day {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 20px clamp(16px, 1.5vw, 22px) 22px;
  display: flex;
  flex-direction: column;
  transition: background .3s;
}
.day:hover { background: var(--paper-lift); }
.day.is-today { background: var(--paper-lift); box-shadow: 0 0 0 1px var(--rule), inset 0 0 0 2px var(--ochre); }
.day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.day-name { font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint); }
.day-num { font-family: var(--display); font-size: 25px; line-height: .9; color: var(--ochre-deep); font-variant-numeric: tabular-nums; }
.day h3 { margin-top: 16px; font-family: var(--display); font-size: 18.5px; line-height: 1.14; flex: 1; }
.day-ing { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule-soft); font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.day-ing b { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--leaf); }
.day mark { background: var(--ochre); color: var(--ink); padding: 0 2px; }

.filter {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  padding: 0 14px;
  flex: none;
  min-width: 210px;
}
.filter svg { width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 1.6; flex: none; }
.filter input { border: 0; background: none; padding: 11px 0; font: inherit; font-size: 13px; width: 100%; outline: none; }
.filter input::placeholder { color: var(--ink-faint); }

.empty { padding: 60px 0; text-align: center; color: var(--ink-faint); }

/* --------------------------------------------------------- large orders
   Larger-format dishes, ordered ahead. Same rules as everywhere else: square
   corners, hairline separators, flat ink. The dish name is the hero; what it
   serves is a quiet aside; the price is legible without shouting. */

.lo-hero { display: grid; gap: clamp(28px, 4vw, 60px); align-items: end; }
@media (min-width: 900px) { .lo-hero { grid-template-columns: 1.08fr .92fr; } }
.lo-hero .plate { aspect-ratio: 4/5; }
@media (min-width: 900px) { .lo-hero .plate { aspect-ratio: 5/6; } }
/* One H1 holds the page name and the hero line; they still look like two
   separate things. */
.lo-h1 { display: block; }
.lo-h1 .display { display: block; margin-top: 20px; max-width: 11ch; }

.lo-note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.lo-note::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--ochre);
  transform: translateY(-2px);
  flex: none;
}

.lo-section + .lo-section { margin-top: clamp(46px, 5.5vw, 78px); }
.lo-section .week-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1; white-space: nowrap; }

/* Two columns on desktop, one on a phone. The 1px gap on a ruled background
   is what draws the grid — no borders on the cards themselves. */
.lo-grid { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--rule); }
@media (min-width: 760px) { .lo-grid { grid-template-columns: repeat(2, 1fr); } }

.lo-card {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 24px clamp(18px, 2vw, 28px) 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .3s;
}
.lo-card:hover { background: var(--paper-lift); }
.lo-card-empty { display: none; }
.lo-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.14;
  flex: 1;
}
.lo-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.lo-serves {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lo-price {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  color: var(--ochre-deep);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* The nudge on the weekly menu page. Deliberately quiet: it sits on the second
   paper tone with a hairline, so it reads as an aside rather than a banner
   competing with the week. */
.lo-nudge {
  background: var(--paper-deep);
  border-block: 1px solid var(--rule);
  padding-block: clamp(38px, 4.6vw, 64px);
}
.lo-nudge-in { display: grid; gap: 26px; align-items: center; }
@media (min-width: 860px) { .lo-nudge-in { grid-template-columns: 1fr auto; gap: 56px; } }
.lo-nudge h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.04; }
.lo-nudge p { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; }
.lo-nudge .btn { white-space: nowrap; }

/* --------------------------------------------------------- utilities */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: top .2s;
}
.skip:focus { top: 12px; }
.nowrap { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }