/* ————————————————————————————————————————————————
   nomads.pizza — site.css
   Fonts: Jost (var, normal + italic) · Cutive Mono (400)
———————————————————————————————————————————————— */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cutive Mono";
  src: url("/fonts/cutive-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette (OKLCH) */
  --rosso: #c9432a;                      /* logo tomato (#d24a2f), a step deeper so white text on it passes 4.5:1 */
  --rosso-deep: #a8361f;
  --carta: #f6f1e7;                      /* logo cream */
  --carta-2: #ede4d3;                    /* panels */
  --ink: #2b211c;                        /* logo ink */
  --ink-2: #4a3d35;
  --mute: #6e6158;
  --line: #e2d8c6;
  --giallo: #f2c14e;                     /* logo cheese */
  --verde: #3f9a5a;                      /* logo basil */
  --verde-deep: #2f7a46;
  --err: oklch(0.50 0.17 27);
  --radius: 14px;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --mono: "Cutive Mono", "Courier New", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { 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;
  background: var(--carta);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--rosso-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rosso); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--sans); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.lead { font-size: 1.18rem; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--carta); padding: 10px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { left: 8px; }

/* The single deliberate kicker on the page */
.hero-kick {
  font: 400 0.82rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosso-deep);
  margin-bottom: 20px;
}
/* Legacy class kept working for the article pages */
.eyebrow {
  font: 400 0.8rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosso-deep);
}

/* ——— Header ——— */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--carta);
  border-bottom: 1.5px solid var(--ink);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font: 600 1.06rem/1 var(--sans); letter-spacing: -0.01em;
}
.brand:hover { color: var(--rosso-deep); }
.brand svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.nav a:not(.btn):hover { color: var(--rosso); }
.nav .hide-sm { display: inline; }
@media (max-width: 720px) { .nav .hide-sm { display: none; } }

/* ——— Buttons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--rosso); color: #fff !important;
  font: 600 1rem/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.18s var(--ease-quart), box-shadow 0.18s var(--ease-quart), background 0.15s;
}
.btn:hover { background: var(--rosso-deep); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn.ghost { background: transparent; color: var(--ink) !important; }
.btn.ghost:hover { background: var(--ink); color: var(--carta) !important; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* ——— Hero ——— */
.hero { padding: 56px 0 72px; overflow: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.hero-title {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .ln-in { display: block; }
.hero-title em { font-style: italic; font-weight: 500; color: var(--rosso); }
.hero .lead { margin-top: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-note { margin-top: 18px; font: 400 0.9rem/1.5 var(--mono); color: var(--mute); }


/* ——— Photo slots ——— */
.shot {
  margin: 22px 0 0;
  transform: rotate(-1.6deg);
  background: #fff;
  padding: 10px 10px 8px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -18px oklch(0.3 0.03 30 / 0.5);
  max-width: 340px;
  position: relative;
}
.shot::before {
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 84px; height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: oklch(0.84 0.14 95 / 0.55);
  border-left: 1px dashed oklch(0.7 0.1 90 / 0.6);
  border-right: 1px dashed oklch(0.7 0.1 90 / 0.6);
}
.shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--carta-2); }
.shot figcaption {
  display: flex; justify-content: space-between; gap: 10px;
  padding-top: 8px;
  font: 400 0.78rem/1.3 var(--mono);
  color: var(--mute);
}
.shot-city { transform: rotate(1.2deg); margin-top: 28px; }
.shot-city img { aspect-ratio: 3 / 2; }

@media (max-width: 900px) {
  .hero { padding: 40px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ——— Sections ——— */
section { padding: 76px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head p { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }
@media (max-width: 720px) { section { padding: 56px 0; } }

/* ——— Offer: numbered manifesto strip ——— */
.offer {
  list-style: none; margin: 0; padding: 0;
  counter-reset: offer;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.offer li {
  counter-increment: offer;
  padding: 22px 18px 26px;
  border-left: 1px solid var(--line);
}
.offer li:first-child { border-left: 0; }
.offer li::before {
  content: counter(offer, decimal-leading-zero);
  display: block;
  font: 400 0.85rem/1 var(--mono);
  color: var(--rosso);
  margin-bottom: 40px;
}
.offer h3 { font-size: 1.12rem; }
.offer p { margin-top: 8px; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 980px) {
  .offer { grid-template-columns: repeat(2, 1fr); }
  .offer li { border-left: 0; border-top: 1px solid var(--line); }
  .offer li:nth-child(-n+2) { border-top: 0; }
  .offer li:nth-child(even) { border-left: 1px solid var(--line); }
  .offer li::before { margin-bottom: 24px; }
}
@media (max-width: 520px) {
  .offer { grid-template-columns: 1fr; }
  .offer li { border-left: 0; border-top: 1px solid var(--line); }
  .offer li:first-child { border-top: 0; }
}

/* ——— Why Italy: ruled editorial list ——— */
.why-list { list-style: none; margin: 0; padding: 0; counter-reset: why; border-top: 1.5px solid var(--ink); }
.why-row {
  counter-increment: why;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.why-row::before {
  content: counter(why, decimal-leading-zero);
  font: 400 1rem/1 var(--mono);
  color: var(--rosso);
}
.why-row h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; }
.why-row:nth-child(even) h3 { font-style: italic; font-weight: 500; }
.why-row p { color: var(--ink-2); font-size: 1rem; max-width: 46ch; }
@media (max-width: 760px) {
  .why-row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 6px 14px; padding: 18px 0; }
  .why-row p { grid-column: 2; }
}

/* ——— Visa band ——— */
.visa { background: var(--rosso); color: oklch(0.95 0.02 40); }
.visa-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.visa h2 { color: #fff; }
.visa p { margin-top: 16px; color: oklch(0.93 0.03 35); max-width: 52ch; }
.visa .btn {
  margin-top: 28px;
  background: var(--carta); color: var(--ink) !important;
  border-color: var(--ink);
}
.visa .btn:hover { background: oklch(0.88 0.15 95); }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid oklch(0.95 0.02 40 / 0.5); }
.facts li {
  padding: 16px 0;
  border-bottom: 1px solid oklch(0.95 0.02 40 / 0.3);
  font-size: 0.98rem;
  color: oklch(0.93 0.03 35);
}
.facts b {
  display: block;
  font: 600 1.5rem/1.15 var(--sans);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 2px;
}
@media (max-width: 860px) { .visa-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ——— Cities: the timetable ——— */
.cities-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.cities-intro { position: sticky; top: 96px; }
.cities-intro p { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }
.tt { border-top: 1.5px solid var(--ink); }
.tt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: start;
  padding: 20px 12px;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease-quart);
}
.tt-row.lit { background: var(--carta-2); }
.tt-row.lit h3 { color: var(--rosso-deep); }
.tt-region {
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute);
}
.tt-row h3 { margin-top: 4px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); transition: color 0.35s var(--ease-quart); }
.tt-main p { margin-top: 8px; color: var(--ink-2); font-size: 0.97rem; max-width: 52ch; }
.tt-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; padding-top: 22px; }
.tt-tags span {
  font: 400 0.74rem/1 var(--mono);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cities-grid { grid-template-columns: 1fr; gap: 36px; }
  .cities-intro { position: static; }
}
@media (max-width: 560px) {
  .tt-row { grid-template-columns: 1fr; padding: 18px 4px; }
  .tt-tags { justify-content: flex-start; padding-top: 4px; }
}

/* ——— Community ——— */
.community { background: var(--ink); color: oklch(0.9 0.015 50); }
.community h2 { color: var(--carta); }
.community .section-head p { color: oklch(0.78 0.02 50); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.perk { border-top: 1.5px solid var(--rosso); padding-top: 16px; }
.perk h3 { color: var(--carta); font-size: 1.15rem; }
.perk p { margin-top: 8px; color: oklch(0.78 0.02 50); font-size: 0.97rem; }
@media (max-width: 760px) { .perks { grid-template-columns: 1fr; gap: 24px; } }

/* ——— Join ——— */
#join { background: var(--carta); }
.join { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.join-intro { position: sticky; top: 96px; }
.join-intro .lead { margin-top: 16px; }
.join-intro ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.join-intro li { display: flex; gap: 10px; color: var(--ink-2); }
.join-intro li::before { content: "—"; color: var(--rosso); }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; gap: 32px; } .join-intro { position: static; } }

.form-card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 6px 6px 0 var(--carta-2);
}
@media (max-width: 520px) { .form-card { padding: 22px 16px; } }
.form-card h3 { font-size: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.group { margin-top: 28px; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.group:first-of-type { margin-top: 20px; }
.group > legend {
  float: left; width: 100%;
  font: 400 0.78rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rosso-deep);
  margin-bottom: 4px; padding: 0;
}
.group > legend + * { clear: both; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
.field { margin-top: 16px; min-width: 0; }
.field > label, .field > .q { display: block; font-weight: 600; font-size: 0.98rem; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; font-size: 0.86rem; color: var(--mute); margin-top: 2px; }
.opt { font-weight: 400; color: var(--mute); font-size: 0.88rem; }
.req { color: var(--rosso); }
input[type=text], input[type=email], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--carta);
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  appearance: none; -webkit-appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23544' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--verde);
  outline: 3px solid oklch(0.52 0.11 155 / 0.25);
  outline-offset: 0;
}
.field.invalid input, .field.invalid select { border-color: var(--err); }
.err { display: none; color: var(--err); font-size: 0.9rem; margin-top: 6px; }
.field.invalid .err, .consent.invalid .err { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--carta);
  font-size: 0.95rem;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.choice input:hover + span { border-color: var(--mute); }
.choice input:checked + span {
  background: var(--rosso); border-color: var(--rosso); color: #fff; font-weight: 600;
}
.choice input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }

.consent {
  margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  font-size: 0.95rem; color: var(--ink-2);
  background: var(--carta);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px;
}
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rosso); flex: none; }
.consent label { flex: 1; min-width: 0; }
.consent .err { flex-basis: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-actions .btn { min-width: 220px; }
.form-status { font-size: 0.95rem; }
.form-status.error { color: var(--err); }
.thanks { text-align: center; padding: 28px 8px; }
.thanks .big { font-size: 3rem; line-height: 1; }
.thanks h3 { margin-top: 14px; font-size: 1.7rem; }
.thanks p { margin-top: 12px; color: var(--ink-2); }

/* ——— FAQ ——— */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font: 600 1.12rem/1.35 var(--sans);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 6px; top: 16px;
  font: 400 1.5rem/1 var(--mono);
  color: var(--rosso);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 68ch; }

/* ——— Article pages (visa guide, privacy) ——— */
.article { padding: 56px 0 80px; }
.article h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; }
.article .meta { margin-top: 14px; color: var(--mute); font: 400 0.9rem/1.5 var(--mono); }
.article h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 48px; }
.article h3 { margin-top: 28px; }
.article p, .article ul, .article ol, .article table { margin-top: 16px; }
.article li { margin-top: 6px; }
.article .callout {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 24px;
  box-shadow: 4px 4px 0 oklch(0.52 0.11 155 / 0.35);
}
.article .callout.warn { box-shadow: 4px 4px 0 oklch(0.47 0.16 26 / 0.4); }
.article table { width: 100%; border-collapse: collapse; font-size: 0.97rem; display: block; overflow-x: auto; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-weight: 600; background: var(--carta-2); }
.toc { background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; padding: 18px 22px; margin-top: 28px; }
.toc ol { margin: 8px 0 0; padding-left: 20px; }
.cta-box { margin-top: 48px; background: var(--rosso); color: oklch(0.95 0.02 40); border: 1.5px solid var(--ink); border-radius: 18px; padding: 32px; }
.cta-box h2 { color: #fff; margin-top: 0; }
.cta-box p { color: oklch(0.93 0.03 35); }
.cta-box .btn { margin-top: 20px; background: var(--carta); color: var(--ink) !important; }

/* ——— Footer ——— */
.site-footer { background: var(--ink); color: oklch(0.78 0.02 50); padding: 56px 0 36px; overflow: clip; }
.site-footer a { color: var(--carta); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer .footer-h {
  font: 400 0.74rem/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.6 0.02 50);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer .brand { color: var(--carta); }
.footer-word {
  margin: 48px 0 0;
  font: 700 clamp(2.6rem, 9.5vw, 7.5rem)/0.95 var(--sans);
  letter-spacing: -0.04em;
  color: oklch(0.32 0.02 32);
  white-space: nowrap;
  user-select: none;
}
.site-footer .small {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid oklch(0.35 0.02 32);
  font: 400 0.85rem/1.5 var(--mono);
  color: oklch(0.6 0.02 50);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr; } }
/* ——— Fixes after screenshot review ——— */
/* Small labels: larger and darker for contrast. */
.hero-note { font: 400 0.95rem/1.5 var(--sans); color: var(--ink-2); }
.tt-region { font-size: 0.8rem; color: var(--ink-2); }
.tt-tags span { font-size: 0.8rem; }
.shot figcaption { color: var(--ink-2); }
/* Only one numbered sequence on the page (Why Italy); the offer strip needs no numbers. */
.offer li::before { content: none; }

/* ——— Review fixes: contrast, focus, phone board, entrance motion ——— */
/* Text on the dark ink surfaces: at least 4.5:1. */
.site-footer .small, .site-footer .footer-h { color: oklch(0.78 0.02 50); }
/* A focus ring that shows on red and dark surfaces too. */
.visa :focus-visible, .community :focus-visible, .site-footer :focus-visible { outline-color: var(--carta); }
/* Entrance motion. html.motion is set in <head> only when motion is wanted,
   so the first paint already has the start state: no flash, and no content
   ever waits on JS to become visible. */
@keyframes ln-reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); } to { clip-path: inset(0 0 -0.1em 0); transform: none; } }
.motion .hero-title .ln-in { animation: ln-reveal 0.9s var(--ease-out) both; }
.motion .hero-title .ln:nth-child(1) .ln-in { animation-delay: 0.12s; }
.motion .hero-title .ln:nth-child(2) .ln-in { animation-delay: 0.23s; }
.motion .hero-title .ln:nth-child(3) .ln-in { animation-delay: 0.34s; }
.motion .hero-title .ln:nth-child(4) .ln-in { animation-delay: 0.45s; }
.why-row.pre { opacity: 0; transform: translateY(14px); }
.why-row.pre.go { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
@media print { .why-row.pre { opacity: 1; transform: none; } }

/* ——— Hero art: Italy emojis roaming free ———
   No box: motion.js moves the emojis around the right side of the hero, they
   bounce off its edges and dodge the pointer. Without JS or with reduced
   motion they rest in place. Decoration only (aria-hidden). */
.hero-art { position: relative; min-height: clamp(380px, 44vw, 580px); }
.emoji-field { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.emoji-field span {
  position: absolute; left: 0; top: 0; line-height: 1; will-change: transform;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 8px 10px oklch(0.2 0.03 30 / 0.18));
}
@keyframes emoji-pop { from { scale: 0; } to { scale: 1; } }
.motion .emoji-field span { animation: emoji-pop 0.55s var(--ease-out) var(--in) both; }
@media (max-width: 900px) { .hero-art { min-height: 320px; } }

/* Theme toggle in the header: one tap changes the flavour. */
.theme-toggle {
  min-height: 44px; min-width: 44px; padding: 0 14px 0 10px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 0.95rem/1 var(--sans); color: var(--ink);
  background: transparent; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.theme-toggle:hover { border-color: var(--ink); background: var(--carta-2); }
.theme-toggle .tt-emoji { font-size: 1.25rem; display: inline-block; transition: transform 0.45s var(--ease-out); }
.theme-toggle.spin .tt-emoji { transform: rotate(360deg) scale(1.15); }
@media (max-width: 720px) { .theme-toggle { padding: 0; justify-content: center; } .theme-toggle .tt-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-emoji { transition: none; } }

/* ——— Palettes (A is the default in :root) ——— */
html[data-palette="amalfi"] {
  --rosso: oklch(0.45 0.13 255);        /* majolica blue */
  --rosso-deep: oklch(0.38 0.11 258);
  --giallo: oklch(0.88 0.16 102);       /* lemon */
  --verde: oklch(0.55 0.11 150);
  --carta: oklch(0.979 0.006 250);
  --carta-2: oklch(0.948 0.016 250);
}
html[data-palette="aperitivo"] {
  --rosso: oklch(0.52 0.16 42);         /* Aperol orange, deep enough for white text */
  --rosso-deep: oklch(0.45 0.14 40);
  --giallo: oklch(0.86 0.13 88);
  --verde: oklch(0.55 0.10 135);        /* pistachio */
  --carta: oklch(0.977 0.008 130);
  --carta-2: oklch(0.945 0.02 130);
}

/* Phone header: logo, theme toggle and Join fit on one line. */
.brand, .btn { white-space: nowrap; }
@media (max-width: 420px) {
  .site-header .wrap { gap: 8px; }
  .nav { gap: 8px; }
  .brand { font-size: 0.95rem; gap: 8px; }
  .btn.small { padding: 0 14px; }
}

/* ——— Icons (Phosphor duotone, public/icons.svg) ———
   Outline in ink, the light layer in the theme colour, so icons repaint with the theme. */
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; color: currentColor; fill: currentColor; --icon-2: var(--rosso); --icon-2-op: 0.35; }
.offer h3, .why-row h3, .with-ic { display: flex; align-items: center; gap: 0.45em; }
.offer h3 .ic { width: 1.6em; height: 1.6em; color: var(--rosso-deep); }
.why-row h3 .ic { width: 1.15em; height: 1.15em; color: var(--rosso); --icon-2-op: 0.25; }
.visa .facts li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.visa .facts li .ic { grid-row: span 2; width: 1.9em; height: 1.9em; color: #fff; --icon-2: var(--carta); --icon-2-op: 0.45; margin-top: 2px; }
.visa .facts li b { grid-column: 2; }
.tt-region { display: inline-flex; align-items: center; gap: 4px; }
.tt-region .ic { width: 1.1em; height: 1.1em; color: var(--rosso); --icon-2-op: 0.3; }
.btn .ic { width: 1.15em; height: 1.15em; margin-right: 2px; }
.site-footer li a { display: inline-flex; align-items: center; gap: 8px; }
.site-footer .ic { --icon-2: #d24a2f; --icon-2-op: 0.8; }
.callout .with-ic .ic, .article h2.with-ic .ic { color: var(--rosso); }
.cta-box h2.with-ic .ic { color: var(--carta); --icon-2: var(--rosso); --icon-2-op: 0.9; }

/* ——— Brand: nomads.pizza (Claude Design "nomads.pizza Logo", see design/README.md) ——— */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
.brand .mark { width: auto; height: 40px; }
.wordmark { font: 800 1.4rem/1 "Bricolage Grotesque", var(--sans); letter-spacing: -0.04em; color: #2b211c; }
.wordmark span { color: #d24a2f; }
.site-footer .wordmark { color: #f6f1e7; }
.site-footer .wordmark span, .footer-word span { color: #d24a2f; }   /* same tomato as the header: one brand */
.footer-word { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; }
@media (max-width: 420px) { .brand .mark { height: 34px; } .wordmark { font-size: 1.2rem; } }

/* ——— Plan your Italy: links to Italy Atlas and Scova ——— */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.plan-card { border: 1.5px solid var(--ink); border-radius: 18px; padding: 26px; background: #fff; box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; gap: 12px; }
.plan-card h3 { display: flex; align-items: center; gap: 0.45em; }
.plan-card h3 .ic { width: 1.4em; height: 1.4em; color: var(--rosso); --icon-2: var(--rosso); --icon-2-op: 0.25; }
.plan-card p { color: var(--ink-2); }
.plan-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-links a { font-weight: 500; }
.plan-card .btn { align-self: flex-start; margin-top: auto; }