/* =========================================================
   Pizza da Francesco · Nice
   One page site · made with love by 226lab.com
   ========================================================= */

/* ---------- Fonts (self-hosted, GDPR friendly) ---------- */
@font-face {
  font-family: "Gochi Hand";
  src: url("../fonts/GochiHand-Regular.woff2") format("woff2"),
       url("../fonts/GochiHand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green: #0B7A3B;
  --red: #C8232C;
  --red-dark: #A11B23;
  --white: #FFFFFF;
  --cream: #FFF6E9;
  --ink: #24201C;
  --ink-soft: #4A433B;
  --muted: #5B5348;
  --line: #E3D6C2;
  --yellow: #FFD27A;
  --sea: #1F5F7A;
  --green-tint: #E3F3E8;
  --red-tint: #FBE4E5;

  --font-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --font-body: "Fredoka", "Nunito", system-ui, sans-serif;

  --radius-s: 18px;
  --radius-m: 24px;
  --radius-l: 32px;
  --radius-xl: 40px;
  --pill: 999px;

  --border: 3px solid var(--ink);
  --shadow-s: 4px 4px 0 var(--ink);
  --shadow-m: 6px 6px 0 var(--ink);
  --shadow-l: 8px 8px 0 var(--ink);

  --wrap: 1240px;
  --gutter: 20px;
  --section-y: clamp(64px, 9vw, 104px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); }
a:hover { color: var(--red); }
h1, h2, h3 { margin: 0; font-family: var(--font-hand); font-weight: 400; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--pill);
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.eyebrow {
  display: block;
  font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow--green { color: var(--green); }
.eyebrow--red { color: var(--red); }
.eyebrow--yellow { color: var(--yellow); }

.h-xl { font-size: clamp(46px, 6.6vw, 92px); line-height: 1; }
.h-l  { font-size: clamp(38px, 5vw, 66px); }
.h-m  { font-size: clamp(30px, 3.4vw, 44px); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-soft); }

.c-green { color: var(--green); }
.c-red { color: var(--red); }

/* ---------- Buttons & pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 26px;
  border: var(--border); border-radius: var(--pill); box-shadow: 5px 5px 0 var(--ink);
  font: 600 18px/1.1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--green { background: var(--green); color: var(--white); }
.btn--red { background: var(--red); color: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--green:hover, .btn--red:hover { color: var(--white); }
.btn--white:hover { color: var(--ink); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 16px; box-shadow: var(--shadow-s); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--pill);
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
.pill--green { background: var(--green); color: var(--white); }
.pill--red { background: var(--red); color: var(--white); }
.pill--outline { background: var(--white); border: 2px solid var(--ink); }
.pill--status { background: var(--white); border: 2px solid var(--ink); }
.pill--status::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--muted);
}
.pill--status.is-open::before { background: #1DB954; box-shadow: 0 0 0 3px rgba(29,185,84,.25); animation: pdf-pulse 1.8s ease-out infinite; }
@keyframes pdf-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(29,185,84,.25); }
  50%  { box-shadow: 0 0 0 9px rgba(29,185,84,0); }
  100% { box-shadow: 0 0 0 3px rgba(29,185,84,.25); }
}
@media (prefers-reduced-motion: reduce) { .pill--status.is-open::before { animation: none; } }
.pill--status.is-closed::before { background: var(--red); }

/* ---------- Tricolore ---------- */
.tricolore { display: flex; height: 10px; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--green); }
.tricolore span:nth-child(2) { background: var(--white); }
.tricolore span:nth-child(3) { background: var(--red); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 246, 233, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 3px 0 var(--ink); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand img { height: 68px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  padding: 10px 16px; border-radius: var(--pill);
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.nav a:not(.btn):hover { background: var(--white); color: var(--red); }
.nav .btn { margin-left: 8px; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px; border: var(--border); border-radius: 16px;
  background: var(--white); box-shadow: var(--shadow-s); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--ink);
  position: relative; transition: transform .2s ease, background .2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .brand img { height: 52px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px; background: var(--white); border: var(--border); border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 14px 16px; font-size: 18px; }
  .nav .btn { margin: 8px 0 0; }
}

/* ---------- Hero: full-bleed illustration, text card on the right ---------- */
.hero { position: relative; background: var(--cream); overflow: hidden; }
.hero-media { position: absolute; inset: 0; display: block; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 70%; }
.hero .hero-media > img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.hero-wrap {
  position: relative; display: flex; justify-content: flex-start; align-items: center;
  min-height: clamp(600px, 46.9vw, 860px);
  padding-top: 28px; padding-bottom: 28px;
}
.hero-inner {
  display: flex; flex-direction: column; gap: 16px;
  width: min(440px, 100%);
  padding: clamp(22px, 2.4vw, 32px);
  background: rgba(255, 246, 233, .96);
  border: var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-l);
}
.hero .h-xl { font-size: clamp(40px, 3.7vw, 56px); }
.hero .lead { font-size: 17px; line-height: 1.5; }
.pill-row, .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

.btn-row { gap: 14px; }
.stats { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 4px; }
.stat { display: flex; flex-direction: column; }
.stat strong { font: 400 36px/1 var(--font-hand); }
.stat span { font-size: 14px; font-weight: 500; }

@media (max-width: 1100px) {
  .hero-media { position: relative; inset: auto; height: clamp(300px, 52vw, 520px); border-bottom: 4px solid var(--ink); }
  .hero-wrap { min-height: 0; justify-content: flex-start; padding-top: 0; padding-bottom: 48px; }
  .hero-inner { width: 100%; max-width: 680px; margin-top: -56px; }
}
@media (max-width: 1100px) {
  .hero-media img, .hero .hero-media > img { object-position: 72% 70%; }
}

/* ---------- Strip ---------- */
.strip {
  background: var(--ink);
  padding: 16px var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px;
}
.strip .pill { font-size: 15px; }
.strip .pill--outline, .strip .pill--status { border-color: var(--white); }

/* ---------- Menu ---------- */
.menu-section {
  background: var(--white);
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
}
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: 40px;
}
.section-head > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; }
.legend .pill { font-size: 14px; padding: 8px 14px; }
.legend .l-size { background: var(--cream); border: 2px solid var(--ink); }
.legend .l-veg { background: var(--green-tint); border: 2px solid var(--green); color: var(--green); }
.legend .l-hot { background: var(--red-tint); border: 2px solid var(--red); color: var(--red-dark); }

.menu-grid {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1080px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .menu-grid { grid-template-columns: 1fr; } }
.menu-col { display: flex; flex-direction: column; gap: 24px; }

.menu-card {
  border: var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--cream);
}
.menu-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 20px 26px; border-bottom: var(--border);
}
.menu-card__head h3 { font-size: 32px; }
.menu-card__head span { font-size: 14px; font-weight: 600; }
.menu-card--red .menu-card__head { background: var(--red); color: var(--white); }
.menu-card--white .menu-card__head { background: var(--white); color: var(--ink); }
.menu-card--green .menu-card__head { background: var(--green); color: var(--white); }
.menu-card--ink .menu-card__head { background: var(--ink); color: var(--cream); border-bottom: 0; }

.menu-list { list-style: none; margin: 0; padding: 6px 26px 16px; }
.menu-item {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 2px dashed var(--line);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 18px; }
.menu-item__desc { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.menu-item__price { font: 400 22px/1.2 var(--font-hand); color: var(--red-dark); white-space: nowrap; }
.tag {
  font-size: 12px; font-weight: 600; line-height: 1.4;
  border: 2px solid currentColor; border-radius: var(--pill); padding: 0 6px;
}
.tag--veg { color: var(--green); }
.tag--hot { color: var(--red-dark); }

.tiramisu-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border: var(--border); border-radius: var(--radius-l); background: var(--yellow);
}
.tiramisu-card img { flex: none; width: 128px; height: auto; margin: -18px 0 -18px -10px; transform: rotate(-6deg); filter: drop-shadow(4px 4px 0 rgba(36,32,28,.35)); }
.tiramisu-card strong { display: block; font: 400 26px/1.1 var(--font-hand); margin-bottom: 4px; }
.tiramisu-card p { font-size: 15px; line-height: 1.45; }

.menu-note { margin-top: 32px; text-align: center; font-size: 15px; color: var(--muted); }

/* ---------- Gallery ---------- */
.gallery__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 19vw, 270px);
  grid-auto-flow: dense;
}
.gallery__item { margin: 0; position: relative; }
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__btn {
  display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in;
  border: var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--white);
  box-shadow: var(--shadow-m); transition: transform .2s ease, box-shadow .2s ease;
}
.gallery__item:nth-child(odd) .gallery__btn:hover { transform: rotate(-1.2deg) translate(-2px,-3px); box-shadow: 8px 9px 0 var(--ink); }
.gallery__item:nth-child(even) .gallery__btn:hover { transform: rotate(1.2deg) translate(-2px,-3px); box-shadow: 8px 9px 0 var(--ink); }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__btn:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute; left: 16px; bottom: 16px; transform: rotate(-4deg); pointer-events: none;
  padding: 6px 14px; background: var(--yellow); border: var(--border); border-radius: var(--radius-s);
  font: 400 22px/1.1 var(--font-hand); box-shadow: var(--shadow-s);
}
@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 260px); gap: 14px; }
}

.lightbox {
  padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; overflow: hidden;
}
.lightbox::backdrop { background: rgba(36, 32, 28, .88); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img {
  max-width: min(92vw, 900px); max-height: 86vh; width: auto; height: auto;
  border: 4px solid var(--cream); border-radius: var(--radius-l); background: var(--cream);
}
.lightbox__close, .lightbox__nav {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  border: var(--border); background: var(--white); color: var(--ink); box-shadow: var(--shadow-s);
  font: 600 30px/1 var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 22px; transform: none; }
  .lightbox__prev { left: calc(50% - 64px); } .lightbox__next { right: calc(50% - 64px); }
}

/* ---------- Take-away ritual: text left, photo right (full bleed) ---------- */
.ritual {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--cream);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}
.ritual__text { display: flex; justify-content: flex-end; }
.ritual__inner {
  width: 100%; max-width: calc(var(--wrap) / 2);
  padding: var(--section-y) clamp(28px, 4vw, 64px) var(--section-y) var(--gutter);
  display: flex; flex-direction: column; gap: 18px;
}
.ritual .lead { max-width: 44ch; }
.ritual-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.ritual-step {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 22px 0; border-top: 2px dashed var(--line);
}
.ritual-step:last-child { border-bottom: 2px dashed var(--line); }
.ritual-step img { width: 88px; height: 88px; object-fit: contain; }
.ritual-step h3 { font-size: 28px; margin-bottom: 4px; }
.ritual-step p { font-size: 17px; color: var(--ink-soft); }
.ritual__media { margin: 0; position: relative; min-height: 100%; border-left: 4px solid var(--ink); }
.ritual__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }

@media (max-width: 900px) {
  .ritual { grid-template-columns: 1fr; }
  .ritual__inner { max-width: none; padding: var(--section-y) var(--gutter) 48px; }
  .ritual__media { border-left: 0; border-top: 4px solid var(--ink); aspect-ratio: 1 / 1; min-height: 0; }
}

/* ---------- Story & ingredients ---------- */
.story { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; margin-bottom: 72px; }
.story__map { flex: 1 1 320px; min-width: 0; display: flex; justify-content: center; }
.map-wrap { position: relative; width: 100%; max-width: 440px; }
.map-wrap img { width: 100%; height: auto; }
.map-label {
  position: absolute; right: 0; top: 24%; transform: rotate(6deg);
  background: var(--white); border: var(--border); border-radius: var(--radius-s);
  padding: 6px 14px; font: 400 22px/1.1 var(--font-hand); color: var(--red); box-shadow: var(--shadow-s);
}
.story__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.story__text .lead { line-height: 1.6; }
.facts { display: flex; flex-wrap: wrap; gap: 14px; }
.fact {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; background: var(--white); border: var(--border); border-radius: var(--radius-m);
}
.fact strong { font: 400 22px/1.1 var(--font-hand); }
.fact span { font-size: 15px; line-height: 1.4; }

.ingredients h3 { text-align: center; margin-bottom: 24px; }
.ing-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ing {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 26px 22px; background: var(--white); border: var(--border); border-radius: var(--radius-l);
  transition: transform .2s ease;
}
.ing:hover { transform: rotate(-1.5deg) translateY(-3px); }
.ing img { width: 120px; height: 120px; object-fit: contain; }
.ing strong { font: 400 26px/1.1 var(--font-hand); }
.ing p { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- Reviews ---------- */
.reviews {
  background: var(--green); color: var(--white);
  border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink);
}
.reviews .section-head { align-items: flex-end; }
.reviews-count { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.reviews-count strong { font: 400 clamp(72px, 10vw, 128px)/0.9 var(--font-hand); color: var(--yellow); }
.reviews-count img { height: 64px; width: auto; }
.review-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.review {
  margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 26px; background: var(--cream); color: var(--ink);
  border: var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m);
}
.review blockquote { margin: 0; font-size: 18px; line-height: 1.5; }
.review figcaption { font: 400 21px/1.2 var(--font-hand); color: var(--red); }

/* ---------- Visit ---------- */
.visit { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.visit__info { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 18px; }
.contact-list a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--red); }
.contact-list svg { width: 28px; height: 28px; flex: none; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.socials a {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 8px 18px; border: var(--border); border-radius: var(--pill);
  background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none;
}
.socials a:hover { background: var(--ink); color: var(--white); }
.socials a.soc { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.socials a.soc--instagram:hover { background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%); border-color: #DC2743; color: #fff; }
.socials a.soc--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.socials a.soc--tripadvisor:hover { background: #34E0A1; border-color: #34E0A1; color: #000; }
.socials a.soc--linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.hours-card {
  flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px;
  padding: 32px; background: var(--red); color: var(--white);
  border: 4px solid var(--ink); border-radius: var(--radius-xl); box-shadow: var(--shadow-l);
}
.hours-card h3 { font-size: 36px; }
.hours { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.hours li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 2px dashed rgba(255,255,255,.5);
}
.hours li:last-child { border-bottom: 0; }
.hours li.is-today { font-weight: 600; }
.hours li.is-today span:first-child::after { content: " · today"; font-weight: 500; opacity: .85; }
.hours b { font-weight: 600; }
.hours-card .btn { margin-top: 8px; }

/* ---------- Map (full width) ---------- */
.map-section { position: relative; border-top: 4px solid var(--ink); background: #F4E7C8; overflow: hidden; }
.map-section__link { display: block; }
.map-section__link img { width: 100%; height: auto; aspect-ratio: 1866 / 843; object-fit: cover; object-position: 48% 42%; transition: transform .6s ease; }
.map-section__link:hover img { transform: scale(1.02); }
.map-section__card {
  position: absolute; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); top: clamp(20px, 3vw, 40px);
  max-width: 320px; display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; background: var(--white); border: var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-m);
}
.map-section__card strong { font: 400 28px/1.1 var(--font-hand); }
.map-section__card > span { font-size: 15px; color: var(--muted); }
.map-section__card .map-section__hint { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.map-section__card .btn { margin-top: 12px; align-self: flex-start; }
@media (max-width: 760px) {
  .map-section__link img { aspect-ratio: auto; height: 420px; }
  .map-section__card { position: relative; z-index: 1; left: auto; top: auto; max-width: none; margin: -40px var(--gutter) 32px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 48px 0 28px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.footer-top p { font: 400 clamp(30px, 4vw, 46px)/1.1 var(--font-hand); }
.footer-top p span { color: #7FD39A; }

/* Footer credit link (226lab.com): neutral colour + optional GSAP shine (see main.js) */
.credit-link .shine-t { color: var(--shine-base, #CFC6B8); }
.credit-link.is-shine .shine-t {
  --b: var(--shine-base, #CFC6B8);
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(110deg, var(--b) 0%, var(--b) 38%, var(--shine-1, #12A150) 46%, var(--shine-2, #E8333D) 54%, var(--b) 62%, var(--b) 100%);
  background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.credit-link.is-shine:hover .shine-t {
  background-image: linear-gradient(110deg, var(--b) 0%, var(--b) 38%, var(--shine-h1, #FFFFFF) 46%, var(--shine-h2, #FFD27A) 54%, var(--b) 62%, var(--b) 100%);
}
.flag { display: flex; width: 120px; height: 14px; border: 2px solid var(--cream); border-radius: var(--pill); overflow: hidden; }
.flag span { flex: 1; }
.flag span:nth-child(1) { background: var(--green); }
.flag span:nth-child(2) { background: var(--white); }
.flag span:nth-child(3) { background: var(--red); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #CFC6B8; }
.footer-bottom a { color: #CFC6B8; text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Mobile call bar ---------- */
.call-bar { display: none; }
@media (max-width: 700px) {
  .call-bar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    gap: 10px;
  }
  .call-bar .btn { flex: 1; min-height: 52px; font-size: 17px; }
  .site-footer { padding-bottom: 96px; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .ing { transition: none; }
}

/* Anchor offset for sticky header */
section[id] { scroll-margin-top: 96px; }

/* =========================================================
   WordPress + Elementor integration
   ========================================================= */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Elementor wrappers must not add spacing around our full-bleed sections */
.elementor-widget[class*="elementor-widget-pdf_"] { width: 100%; }
.elementor-widget[class*="elementor-widget-pdf_"] > .elementor-widget-container { margin: 0; padding: 0; }
.site-main--builder .elementor-section.elementor-section-full_width > .elementor-container { max-width: none; }
.site-main--builder .elementor-widget-wrap { padding: 0; }

/* Scroll-reveal must never hide content inside the Elementor editor */
.elementor-editor-active .reveal,
.elementor-editor-active .js .reveal { opacity: 1 !important; transform: none !important; }

/* Generic pages / blog */
.site-main--plain, .site-main:not(.site-main--builder) { min-height: 40vh; }
.entry { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.entry__title { margin-bottom: 24px; }
.entry__meta { color: var(--muted); margin-bottom: 24px; }
.entry__content { max-width: 760px; font-size: 18px; line-height: 1.65; }
.entry__content > * + * { margin-top: 1em; }
.entry__content img { height: auto; border-radius: var(--radius-m); }
.entry-list { padding-top: var(--section-y); padding-bottom: var(--section-y); display: grid; gap: 24px; }
.entry-card { background: var(--white); border: var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: 26px; }
.entry-card h2 a { color: var(--ink); text-decoration: none; }
.entry-card h2 a:hover { color: var(--red); }
.entry-404 { padding-top: var(--section-y); padding-bottom: var(--section-y); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.search-form { display: flex; gap: 10px; flex-wrap: wrap; }
.search-form input[type="search"] { min-height: 44px; padding: 8px 16px; border: var(--border); border-radius: var(--pill); font: inherit; }
.brand .brand__logo { height: 68px; width: auto; }
@media (max-width: 1080px) { .brand .brand__logo { height: 52px; } }
.alignwide { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ritual scene: gull, boat and steam animated on top of the clean photo (same framing as the original cover-fit) */
.ritual__media--scene { container-type: size; overflow: hidden; }
.ritual__media .scene { position: absolute; --s: max(100cqw, 100cqh); width: var(--s); height: var(--s); left: calc((100cqw - var(--s)) * .4); top: calc((100cqh - var(--s)) * .6); }
.ritual__media .scene img { object-fit: fill; }
.ritual__media .scene .sc-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.ritual__media .scene .sc-l { position: absolute; right: auto; bottom: auto; inset: auto; max-width: none; pointer-events: none; will-change: transform; }
.ritual__media .scene .sc-gull, .ritual__media .scene .sc-boat { position: absolute; inset: 0; pointer-events: none; }

/* Puglia map: the heart beats (lub-dub) */
.map-wrap .map-heart { position: absolute; width: auto; max-width: none; pointer-events: none; transform-origin: 50% 60%; animation: pdf-heart 1.6s ease-in-out infinite; }
@keyframes pdf-heart { 0%,100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.16); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .map-wrap .map-heart { animation: none; } }

/* Animated step icons (layers of the original icons) */
.ritual-step .ico { width: 88px; height: 88px; display: grid; place-items: center; }
.ritual-step .ico__s { position: relative; display: block; }
.ritual-step .ico .ic { position: absolute; width: auto; height: auto; max-width: none; object-fit: fill; pointer-events: none; }
/* phone: rings (shakes) in bursts, the waves pulse outwards */
.ic--ph-body { transform-origin: 50% 55%; animation: pdf-ring 3.2s ease-in-out infinite; }
.ic--ph-arc-l1, .ic--ph-arc-r1 { animation: pdf-wave 3.2s ease-in-out infinite; animation-delay: .12s; }
.ic--ph-arc-l2, .ic--ph-arc-r2 { animation: pdf-wave 3.2s ease-in-out infinite; }
.ic--ph-arc-l1 { transform-origin: 100% 50%; } .ic--ph-arc-l2 { transform-origin: 100% 50%; }
.ic--ph-arc-r1 { transform-origin: 0 50%; } .ic--ph-arc-r2 { transform-origin: 0 50%; }
@keyframes pdf-ring { 0%,40%,100% { transform: rotate(0); } 3% { transform: rotate(-6deg); } 6% { transform: rotate(6deg); } 9% { transform: rotate(-6deg); } 12% { transform: rotate(6deg); } 15% { transform: rotate(-5deg); } 18% { transform: rotate(5deg); } 21% { transform: rotate(-4deg); } 24% { transform: rotate(4deg); } 28% { transform: rotate(-2deg); } 32% { transform: rotate(2deg); } 36% { transform: rotate(0); } }
@keyframes pdf-wave { 0%,40%,100% { opacity: 1; transform: scale(1); } 4% { opacity: .15; transform: scale(.85); } 12% { opacity: 1; transform: scale(1.12); } 20% { opacity: .15; transform: scale(.85); } 28% { opacity: 1; transform: scale(1.12); } 36% { opacity: .85; transform: scale(1); } }
/* box: the steam rises */
.ic--bx-steam-1, .ic--bx-steam-2, .ic--bx-steam-3 { transform-origin: 50% 100%; animation: pdf-steam 3.4s ease-in-out infinite; }
.ic--bx-steam-2 { animation-delay: .9s; } .ic--bx-steam-3 { animation-delay: 1.8s; }
@keyframes pdf-steam { 0% { opacity: 0; transform: translateY(8%) scaleY(.9); } 25% { opacity: 1; } 70% { opacity: 1; transform: translateY(-14%) translateX(4%) scaleY(1.06); } 100% { opacity: 0; transform: translateY(-22%) translateX(-3%) scaleY(1.1); } }
/* umbrella: sways in the breeze, the waves roll */
.ic--um-top { transform-origin: 48% 68%; animation: pdf-sway 2.6s ease-in-out infinite alternate; }
.ic--um-waves { animation: pdf-roll 2.2s ease-in-out infinite alternate; }
@keyframes pdf-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes pdf-roll { from { transform: translate(-9%, 5%); } to { transform: translate(9%, -5%); } }
@media (prefers-reduced-motion: reduce) { .ritual-step .ico .ic { animation: none !important; } }

/* Ingredient illustrations: each one moves in its own way */
.ing img.ing-a { transform-origin: 50% 90%; animation-iteration-count: infinite; animation-timing-function: ease-in-out; will-change: transform; }
.ing-a--mozzarella { animation-name: pdf-mozz; animation-duration: 3.2s; }
.ing-a--pomodoro { animation-name: pdf-tomato; animation-duration: 2.4s; animation-delay: .4s; }
.ing-a--basilico { animation-name: pdf-basil; animation-duration: 3.6s; animation-delay: .8s; transform-origin: 50% 92%; }
.ing-a--trullo { animation-name: pdf-trullo; animation-duration: 3.8s; animation-delay: 1.2s; }
@keyframes pdf-mozz { 0%,100% { transform: scale(1,1) rotate(0); } 30% { transform: scale(1.05,.95) rotate(-1.5deg); } 65% { transform: scale(.97,1.04) rotate(1.5deg); } }
@keyframes pdf-tomato { 0%,100% { transform: translateY(0) scale(1,1); } 15% { transform: translateY(0) scale(1.06,.93); } 45% { transform: translateY(-9px) scale(.97,1.04); } 75% { transform: translateY(0) scale(1.04,.96); } 88% { transform: translateY(0) scale(1,1); } }
@keyframes pdf-basil { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes pdf-trullo { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(1.2deg); } }
/* mozzarella: milk drops from the cut half */
.ing-mz { position: relative; display: block; width: 120px; height: 120px; }
.ing-mz .milk { position: absolute; left: 63%; top: 86%; width: 9px; height: 12px; margin-left: -4.5px; background: #FFFDF6; border: 1.5px solid #24201C; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; transform-origin: 50% 0; opacity: 0; animation: pdf-milk 3.4s ease-in infinite; pointer-events: none; }
.ing-mz .milk--2 { left: 57%; top: 88%; width: 7px; height: 9px; margin-left: -3.5px; animation-delay: 1.7s; }
.ing-mz .milk-pool { position: absolute; left: 62%; top: 100%; width: 20px; height: 5px; margin: 6px 0 0 -10px; border-radius: 50%; background: #FFFDF6; border: 1.5px solid #24201C; opacity: 0; transform: scale(0); animation: pdf-pool 3.4s ease-out infinite; pointer-events: none; }
@keyframes pdf-milk { 0% { opacity: 0; transform: translateY(0) scale(.2); } 12% { opacity: 1; transform: translateY(0) scale(.7,.8); } 34% { opacity: 1; transform: translateY(0) scale(1,1.3); } 44% { opacity: 1; transform: translateY(2px) scale(.95,1.4); } 66% { opacity: 1; transform: translateY(17px) scale(.85,1.2); } 70% { opacity: 0; transform: translateY(19px) scale(.6,.6); } 100% { opacity: 0; transform: translateY(19px) scale(.6,.6); } }
@keyframes pdf-pool { 0%,64% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(.7,.8); } 82% { opacity: 1; transform: scale(1.1,1); } 96%,100% { opacity: 0; transform: scale(1.3,.9); } }
@media (prefers-reduced-motion: reduce) { .ing img.ing-a { animation: none; } .ing-mz .milk, .ing-mz .milk-pool { animation: none; opacity: 0; } }

/* Map: the pin jumps to point at the shop */
.map-stage { display: block; position: relative; width: 100%; aspect-ratio: 1866 / 843; container-type: size; overflow: hidden; }
.map-scene { position: absolute; --w: max(100cqw, calc(100cqh * 2.2135)); --h: calc(var(--w) * .45177); width: var(--w); height: var(--h); left: calc((100cqw - var(--w)) * .48); top: calc((100cqh - var(--h)) * .42); transition: transform .6s ease; }
.map-section__link .map-scene img { position: absolute; max-width: none; aspect-ratio: auto; object-fit: fill; transition: none; }
.map-section__link .map-scene > img:first-child { inset: 0; width: 100%; height: 100%; }
.map-section__link:hover .map-scene { transform: scale(1.02); }
.map-section__link:hover img { transform: none; }
.map-section__link .map-scene .map-pin { height: auto; transform-origin: 50% 100%; animation: pdf-pin 4.6s ease-in-out infinite; }
.map-shadow { position: absolute; left: 46.9%; top: 45.2%; width: 1.9%; height: .9%; margin-left: -.1%; border-radius: 50%; background: rgba(36,32,28,.35); filter: blur(1px); animation: pdf-pinshadow 4.6s ease-in-out infinite; }
@keyframes pdf-pin { 0%,100% { transform: translateY(0) scale(1,1); } 5% { transform: translateY(0) scale(1.08,.92); } 22% { transform: translateY(-62%) scale(.97,1.04); } 40% { transform: translateY(0) scale(1.1,.9); } 48% { transform: translateY(0) scale(1,1); } 54% { transform: translateY(0) scale(1.05,.95); } 68% { transform: translateY(-34%) scale(.98,1.02); } 82% { transform: translateY(0) scale(1.06,.94); } 90% { transform: translateY(0) scale(1,1); } }
@keyframes pdf-pinshadow { 0%,100%,40%,48%,82%,90% { transform: scale(1); opacity: .9; } 22% { transform: scale(.65); opacity: .45; } 68% { transform: scale(.82); opacity: .65; } }
@media (max-width: 760px) { .map-stage { aspect-ratio: auto; height: 420px; } }
@media (prefers-reduced-motion: reduce) { .map-pin, .map-shadow { animation: none !important; } }

/* ---------- Shine effects (colours/speed from Personalizza) ---------- */
.fx-sweep { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(110deg, transparent 38%, var(--c1) 46%, var(--c2) 54%, transparent 62%); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
.map-wrap .fx-puglia { -webkit-mask: url(../img/scene/puglia-mask.webp) 0 0 / 100% 100% no-repeat; mask: url(../img/scene/puglia-mask.webp) 0 0 / 100% 100% no-repeat; }
.flag { position: relative; }
@keyframes pdf-fxsweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.pdf-fx-card .menu-card__head { position: relative; overflow: hidden; }
.pdf-fx-card .menu-card__head::after { content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--fx-card-white); opacity: .6; background-image: linear-gradient(110deg, transparent 38%, var(--c) 46%, var(--c) 54%, transparent 62%); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
.pdf-fx-card .menu-card--red .menu-card__head::after { --c: var(--fx-card-red); }
.pdf-fx-card .menu-card--white .menu-card__head::after { --c: var(--fx-card-white); }
.pdf-fx-card .menu-card--green .menu-card__head::after { --c: var(--fx-card-green); }
.pdf-fx-card .menu-card--ink .menu-card__head::after { --c: var(--fx-card-ink); }
.pdf-fx-card .menu-card:hover .menu-card__head::after { animation: pdf-fxsweep var(--fx-card-t) ease-in-out 1; }
.pdf-fx-logo .brand { position: relative; display: inline-block; line-height: 0; }
.pdf-fx-logo .brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--logo-mask) 0 0 / 100% 100% no-repeat; mask: var(--logo-mask) 0 0 / 100% 100% no-repeat; background-image: linear-gradient(112deg, transparent 41%, color-mix(in srgb, var(--fx-logo-1) 35%, transparent) 45%, color-mix(in srgb, var(--fx-logo-1) 70%, transparent) 47.5%, var(--fx-logo-1) 49%, color-mix(in srgb, var(--fx-logo-2) 25%, transparent) 50.5%, color-mix(in srgb, var(--fx-logo-2) 75%, transparent) 52.5%, color-mix(in srgb, var(--fx-logo-2) 30%, transparent) 55%, transparent 58%); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
.pdf-fx-logo .brand:hover::after { animation: pdf-fxsweep var(--fx-logo-t) ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .pdf-fx-card .menu-card:hover .menu-card__head::after, .pdf-fx-logo .brand:hover::after { animation: none; } }

.tricolore span, .flag span { position: relative; overflow: hidden; }
/* glossy sweep for the tricolore strip and the footer flag: tinted shoulders, bright white core */
.fx-sweep[data-pdf-fx-seq] { background-image: linear-gradient(112deg, transparent 40%, color-mix(in srgb, var(--c1) calc(var(--k, 80%) * .45), transparent) 44%, color-mix(in srgb, var(--c1) var(--k, 80%), transparent) 46.5%, color-mix(in srgb, var(--c1) 20%, #fff) 48.5%, #fff 50%, color-mix(in srgb, var(--c1) 20%, #fff) 51.5%, color-mix(in srgb, var(--c1) var(--k, 80%), transparent) 53.5%, color-mix(in srgb, var(--c1) calc(var(--k, 80%) * .45), transparent) 56%, transparent 60%); }

/* social buttons: glossy shine on hover only */
.socials a.soc { position: relative; overflow: hidden; }
.socials a.soc::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.55) 48.5%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.5) 51.5%, rgba(255,255,255,.18) 55%, transparent 60%); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
.socials a.soc:hover::after { animation: pdf-fxsweep .9s ease-in-out 1; }

/* footer green accent text ("Ciao!"): glossy shine, loop with a pause */
.footer-top p span { background-image: linear-gradient(112deg, #7FD39A 0%, #7FD39A 40%, #C9F5DA 46%, #FFFFFF 50%, #C9F5DA 54%, #7FD39A 60%, #7FD39A 100%); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.footer-top p span { animation: pdf-textshine 4.5s ease-in-out infinite; }
@keyframes pdf-textshine { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .socials a.soc:hover::after, .footer-top p span { animation: none; } }

/* Tiramisù: jelly wobble on hover only */
.tiramisu-card img { transform-origin: 50% 85%; }
.tiramisu-card:hover img { animation: pdf-wobble .9s ease-in-out 1; }
@keyframes pdf-wobble { 0%,100% { transform: rotate(-6deg); } 12% { transform: rotate(-11deg) scale(1.04,.96); } 27% { transform: rotate(-2deg) scale(.97,1.04); } 42% { transform: rotate(-9deg) scale(1.03,.97); } 57% { transform: rotate(-4deg) scale(.99,1.02); } 72% { transform: rotate(-7.2deg); } 86% { transform: rotate(-5.4deg); } }
@media (prefers-reduced-motion: reduce) { .tiramisu-card:hover img { animation: none; } }

/* Puglia arrow: nudges towards the region */
.map-wrap .map-arrow { position: absolute; width: auto; max-width: none; pointer-events: none; transform-origin: 85% 15%; animation: pdf-arrow 3.2s ease-in-out infinite; }
@keyframes pdf-arrow { 0%,50%,100% { transform: translate(0,0) rotate(0); } 14% { transform: translate(-9%,7%) rotate(-2deg); } 28% { transform: translate(0,0) rotate(0); } 38% { transform: translate(-6%,5%) rotate(-1.4deg); } }
@media (prefers-reduced-motion: reduce) { .map-wrap .map-arrow { animation: none; } }

/* Hero scene: foliage sways (original pixels, masked) and the street lamps are lit */
.hero-media--scene { container-type: size; }
.hero-media .hs { position: absolute; --w: max(100cqw, calc(100cqh * 2.1316)); --h: calc(var(--w) * .46915); width: var(--w); height: var(--h); left: calc((100cqw - var(--w)) * .7); top: calc((100cqh - var(--h)) * .7); pointer-events: none; }
@media (max-width: 1100px) { .hero-media .hs { left: calc((100cqw - var(--w)) * .72); } }
.hero-media .hs-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.hero-media .hs-leaf { position: absolute; background-image: url(../img/hero-shop.webp); background-repeat: no-repeat; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; will-change: transform; animation: pdf-leaf calc(var(--d) * .75) ease-in-out var(--dl) infinite alternate; }
@media (max-width: 700px) { .hero-media .hs-leaf { background-image: url(../img/hero-shop-900.webp); } }
@keyframes pdf-leaf { from { transform: rotate(calc(var(--a) * -3.6)) skewX(calc(var(--a) * -1.8)); } to { transform: rotate(calc(var(--a) * 3.6)) skewX(calc(var(--a) * 1.8)); } }
@media (prefers-reduced-motion: reduce) { .hero-media .hs-leaf { animation: none; } }

/* Yoast SEO breadcrumbs */
.breadcrumbs { padding-top: 24px; font-size: 15px; color: var(--muted); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.breadcrumbs a:hover { color: var(--red); border-color: var(--red); }
.breadcrumbs .breadcrumb_last { color: var(--ink); font-weight: 500; }
.breadcrumbs + .entry, .breadcrumbs + .entry-list { padding-top: clamp(24px, 4vw, 40px); }