/* ============ ITALY — DARK EDITION ============
   Layers on top of europe.css (loaded first).
   Italy-specific: warmer accent, boot map, drives, region grid w/ hues.
*/
:root {
  --it-bg: #0e1a22;
  --it-bg-2: #142331;
  --it-bg-3: #1a2d3d;
  --it-card: rgba(20, 35, 49, 0.55);
  --it-card-2: rgba(26, 45, 61, 0.65);
  --it-line: rgba(236, 228, 211, 0.10);
  --it-line-strong: rgba(236, 228, 211, 0.22);
  --it-ink: #ece4d3;
  --it-ink-mute: rgba(236, 228, 211, 0.66);
  --it-ink-dim: rgba(236, 228, 211, 0.42);

  --it-tan: #d4a574;       /* base accent */
  --it-terra: #c4694e;     /* south accent */
  --it-olive: #8a9a5b;     /* center / Tuscan */
  --it-sky: #8aa9b8;       /* north */
  --it-aegean: #5d8a87;    /* islands */

  --it-accent: var(--it-tan);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

body.it-page {
  background: var(--it-bg);
  color: var(--it-ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.it-page .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

body.it-page * { box-sizing: border-box; }

/* macro tinting — applied to body when a macro is active */
body.it-page[data-macro="north"]  { --it-accent: var(--it-sky); }
body.it-page[data-macro="center"] { --it-accent: var(--it-tan); }
body.it-page[data-macro="south"]  { --it-accent: var(--it-terra); }
body.it-page[data-macro="isles"]  { --it-accent: var(--it-aegean); }

/* ---------- NAV OVERRIDE ---------- */
body.it-page .nav { background: rgba(14, 26, 34, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--it-line); position: sticky; top: 0; z-index: 50; }
body.it-page .nav .logo, body.it-page .nav a { color: var(--it-ink); }
body.it-page .nav .howto { color: var(--it-ink-mute); }
body.it-page .nav .edition { color: var(--it-accent); font-style: italic; }

/* ---------- SECTION DEFAULTS ---------- */
body.it-page .it-sec {
  padding: 130px 0;
  position: relative;
  border-top: 1px solid var(--it-line);
}
body.it-page .it-sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 80px;
}
body.it-page .it-sec-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--it-accent);
  margin-bottom: 18px;
}
body.it-page .it-sec h2 {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--it-ink);
  font-weight: 400;
}
body.it-page .it-sec h2 em {
  font-style: italic;
  color: var(--it-accent);
}
body.it-page .it-sec .it-sec-blurb {
  font-size: 16px;
  line-height: 1.65;
  color: var(--it-ink-mute);
  max-width: 480px;
}
body.it-page .it-sec .it-sec-blurb em {
  color: var(--it-ink);
  font-style: italic;
  font-family: var(--serif);
  font-size: 18px;
}

/* ---------- HERO ---------- */
.it-hero {
  position: relative;
  min-height: 92vh;
  padding: 200px 0 100px;
  overflow: hidden;
  background: var(--it-bg);
}
.it-hero-bg {
  position: absolute; inset: 0;
  background: url("https://images.unsplash.com/photo-1531572753322-ad063cecc140?w=2000&auto=format") center/cover no-repeat;
  filter: brightness(0.45) saturate(0.85);
  z-index: 0;
}
.it-hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,34,0.6) 0%, rgba(14,26,34,0.85) 60%, rgba(14,26,34,1) 100%);
}
.it-hero::before {
  /* giant ITALIA italic watermark */
  content: "ITALIA";
  position: absolute;
  bottom: -8vw;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32vw;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(212, 165, 116, 0.075);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.it-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.it-hero-trail {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--it-ink-mute);
  margin-bottom: 40px;
  display: flex; gap: 12px; align-items: center;
}
.it-hero-trail .crumb { color: var(--it-accent); }
.it-hero-trail .sep { opacity: 0.4; }

.it-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--it-ink);
  max-width: 1100px;
}
.it-hero h1 em {
  font-style: italic;
  color: var(--it-accent);
}
.it-hero h1 .ru {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--it-ink-mute);
  margin-top: 32px;
  font-weight: 500;
}

.it-hero-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.it-hero-lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.45;
  color: var(--it-ink);
  max-width: 580px;
}
.it-hero-lede em { font-style: italic; color: var(--it-accent); }
.it-hero-lede strong { font-weight: 500; color: var(--it-accent); font-family: var(--sans); font-size: 0.85em; letter-spacing: 0.02em; display: block; margin-top: 14px; }

.it-hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--it-line-strong);
  padding-top: 0;
}
.it-hero-meta .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--it-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.it-hero-meta .row span:first-child { color: var(--it-ink-mute); }
.it-hero-meta .row b { color: var(--it-ink); font-weight: 500; }

/* hero collage — three small framed photos angled bottom-right */
.it-hero-collage {
  position: absolute;
  right: -60px;
  top: 220px;
  z-index: 2;
  display: flex;
  gap: 16px;
}
.it-hero-collage .frame {
  width: 200px; height: 280px;
  background-size: cover; background-position: center;
  border: 6px solid #ece4d3;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  position: relative;
}
.it-hero-collage .frame::after {
  content: attr(data-cap);
  position: absolute;
  bottom: -28px; left: 0;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-mute);
  white-space: nowrap;
}
.it-hero-collage .f1 { transform: rotate(-4deg) translateY(20px); }
.it-hero-collage .f2 { transform: rotate(2deg); }
.it-hero-collage .f3 { transform: rotate(-2deg) translateY(30px); }

@media (max-width: 1100px) {
  .it-hero-collage { display: none; }
  .it-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- ANCHOR BAR ---------- */
.it-anchor {
  background: var(--it-bg-2);
  border-top: 1px solid var(--it-line);
  border-bottom: 1px solid var(--it-line);
  position: sticky; top: 0; z-index: 40;
}
.it-anchor-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 48px;
  display: flex; gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.it-anchor-inner::-webkit-scrollbar { display: none; }
.it-anchor-inner .lbl { color: var(--it-ink-dim); flex-shrink: 0; }
.it-anchor-inner a {
  color: var(--it-ink-mute);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}
.it-anchor-inner a:hover { color: var(--it-accent); }

/* ---------- INTRO (compact) ---------- */
.it-intro { background: var(--it-bg); }
.it-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 96px;
  align-items: start;
}
.it-intro-lead {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.25;
  color: var(--it-ink);
  letter-spacing: -0.01em;
  max-width: 720px;
}
.it-intro-lead em { font-style: italic; color: var(--it-accent); }
.it-intro-side {
  border-left: 1px solid var(--it-line-strong);
  padding-left: 28px;
}
.it-intro-side p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--it-ink-mute);
  margin-bottom: 16px;
}
.it-intro-side .credit {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
  margin-top: 24px;
}

/* ---------- MACRO PICKER ---------- */
.it-macros { background: var(--it-bg-2); padding: 80px 0; }
.it-macros-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
.it-macros-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--it-line);
  padding-bottom: 20px;
}
.it-macros-head .lbl {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--it-accent);
}
.it-macros-head .hint {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-dim);
}
.it-macros-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.it-macro-btn {
  background: rgba(20,35,49,0.6);
  border: 1px solid var(--it-line);
  border-radius: 3px;
  padding: 22px 22px 24px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s;
  color: inherit;
  font: inherit;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.it-macro-btn:hover { border-color: var(--it-line-strong); transform: translateY(-2px); }
.it-macro-btn[aria-pressed="true"] {
  border-color: var(--macro-tint, var(--it-accent));
  box-shadow: 0 0 0 1px var(--macro-tint, var(--it-accent));
  background: rgba(20,35,49,0.85);
}
.it-macro-btn .chip {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--macro-tint, var(--it-accent));
  margin-bottom: 6px;
  box-shadow: 0 0 18px var(--macro-tint, var(--it-accent));
}
.it-macro-btn .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--it-ink);
  line-height: 1.1;
}
.it-macro-btn .blurb {
  font-size: 12px;
  line-height: 1.45;
  color: var(--it-ink-mute);
  margin-top: 4px;
  min-height: 36px;
}
@media (max-width: 900px) {
  .it-macros-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- REGIONS GRID (the 20 regions) ---------- */
.it-regions { background: var(--it-bg); position: relative; overflow: hidden; }
.it-regions::before {
  content: "REGIONI";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic; font-size: 24vw;
  color: rgba(212,165,116,0.045);
  letter-spacing: -0.04em; line-height: 1; pointer-events: none; white-space: nowrap; z-index: 0;
}
.it-regions > .container { position: relative; z-index: 1; }
.it-regions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* stacked horizontal rows by macro */
.it-regions-stack {
  display: flex; flex-direction: column;
  gap: 36px;
}
.it-regions-row {
  transition: opacity 0.3s;
}
.it-regions-row.is-dim { opacity: 0.32; }

.it-regions-row-head {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 8px;
}
.it-regions-row-head .chip {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--macro-tint, var(--it-accent));
  box-shadow: 0 0 16px var(--macro-tint, var(--it-accent));
}
.it-regions-row-head .name {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--it-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.it-regions-row-head .name em { font-style: italic; color: var(--macro-tint, var(--it-accent)); }
.it-regions-row-head .count {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-regions-row-head .line {
  height: 1px;
  background: linear-gradient(90deg, var(--macro-tint, var(--it-accent)) 0%, transparent 100%);
  opacity: 0.4;
}
.it-regions-row-head .hint {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
}

.it-regions-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--it-line-strong) transparent;
  padding-bottom: 14px;
  margin: 0 -48px;        /* bleed to viewport edge */
  padding-left: 48px;
  padding-right: 48px;
}
.it-regions-rail::-webkit-scrollbar { height: 6px; }
.it-regions-rail::-webkit-scrollbar-track { background: transparent; }
.it-regions-rail::-webkit-scrollbar-thumb { background: var(--it-line-strong); border-radius: 999px; }
.it-regions-rail::-webkit-scrollbar-thumb:hover { background: var(--it-accent); }

.it-regions-rail .it-region {
  scroll-snap-align: start;
  min-height: 320px;
}

.it-regions-rail-end {
  flex-shrink: 0;
  width: 80px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  border-left: 1px dashed var(--it-line);
  margin-left: 8px;
  padding: 16px 0;
}

@media (max-width: 1100px) {
  .it-regions-grid { grid-template-columns: repeat(2, 1fr); }
  .it-regions-rail { grid-auto-columns: 240px; }
}
.it-region {
  background: var(--it-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--it-line);
  border-top: 3px solid var(--region-hue, var(--it-accent));
  border-radius: 2px;
  padding: 24px 22px 22px;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.3s;
  cursor: pointer;
}
.it-region:hover {
  background: var(--it-card-2);
  transform: translateY(-3px);
  border-color: var(--region-hue, var(--it-accent));
}
.it-region.is-dim { opacity: 0.32; }
.it-region .num {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
}
.it-region .name {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.05;
  color: var(--it-ink);
  font-weight: 400;
}
.it-region .name em { font-style: italic; color: var(--region-hue, var(--it-accent)); }
.it-region .cap {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-region .known {
  font-size: 13px; line-height: 1.5;
  color: var(--it-ink-mute);
  margin-top: 4px;
}
.it-region .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--it-ink);
  border-top: 1px dashed var(--it-line);
  padding-top: 12px;
  margin-top: 6px;
}
.it-region .stats {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--it-ink-dim);
  margin-top: auto;
  padding-top: 12px;
}
.it-region .stats b { color: var(--region-hue, var(--it-accent)); font-weight: 500; }

@media (max-width: 1100px) {
  .it-regions-rail { grid-auto-columns: 240px; }
}

/* (legacy fallback removed — replaced by stacked rails) */

/* ---------- BOOT MAP (stylised) ---------- */
.it-boot {
  background: var(--it-bg-2);
  padding: 80px 0;
  position: relative;
  border-top: 1px solid var(--it-line);
  border-bottom: 1px solid var(--it-line);
}
.it-boot-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.it-boot-side .lbl {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--it-accent);
}
.it-boot-side h3 {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1.0;
  color: var(--it-ink);
  margin: 14px 0 18px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.it-boot-side h3 em { font-style: italic; color: var(--it-accent); }
.it-boot-side p {
  font-size: 14px; line-height: 1.65;
  color: var(--it-ink-mute);
  margin-bottom: 14px;
}
.it-boot-side .legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  margin-top: 24px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-boot-side .legend .item {
  display: flex; align-items: center; gap: 8px;
}
.it-boot-side .legend .dot {
  width: 9px; height: 9px; border-radius: 50%;
}

.it-boot-svg {
  width: 100%; height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
}
.it-boot-svg .land {
  fill: rgba(20,35,49,0.85);
  stroke: rgba(236,228,211,0.18);
  stroke-width: 0.8;
}
.it-boot-svg .land.is-active { fill: var(--macro-tint, var(--it-accent)); fill-opacity: 0.22; stroke-opacity: 0.6; }
.it-boot-svg .pin { transition: r 0.3s, fill 0.3s; }
.it-boot-svg .pin-label {
  font-family: var(--mono); font-size: 7px;
  letter-spacing: 0.18em; text-transform: uppercase;
  fill: var(--it-ink-mute);
}

@media (max-width: 1000px) {
  .it-boot-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- DRIVES (signature) ---------- */
.it-drives { background: var(--it-bg); position: relative; }
.it-drives::before {
  content: "STRADE";
  position: absolute; bottom: 4vw; right: -3vw;
  font-family: var(--serif); font-style: italic; font-size: 22vw;
  color: rgba(196, 105, 78, 0.06);
  letter-spacing: -0.04em; line-height: 0.85; pointer-events: none; white-space: nowrap; z-index: 0;
}
.it-drives > .container { position: relative; z-index: 1; }

.it-drive {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 48px;
  padding: 64px 0;
  border-top: 1px solid var(--it-line);
  align-items: start;
}
.it-drive:last-child { border-bottom: 1px solid var(--it-line); }

.it-drive .num {
  font-family: var(--serif); font-style: italic;
  font-size: 56px; color: var(--region-hue, var(--it-accent));
  line-height: 1; letter-spacing: -0.02em;
}

.it-drive-head .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--region-hue, var(--it-accent));
  margin-bottom: 8px;
}
.it-drive-head h3 {
  font-family: var(--serif);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--it-ink);
  font-weight: 400;
}
.it-drive-head h3 em { font-style: italic; color: var(--region-hue, var(--it-accent)); }
.it-drive-head .blurb {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--it-ink);
  margin-top: 18px;
  max-width: 540px;
}
.it-drive-head .stops {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.it-drive-head .stops .stop {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--it-ink-mute);
  border: 1px solid var(--it-line);
  padding: 5px 10px;
  border-radius: 999px;
}
.it-drive-head .stops .arrow { color: var(--region-hue, var(--it-accent)); padding-top: 6px; }
.it-drive-head .tip {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--it-accent);
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--region-hue, var(--it-accent));
}

.it-drive-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.it-drive-meta .cell {
  background: var(--it-card);
  border: 1px solid var(--it-line);
  border-radius: 2px;
  padding: 14px 16px;
}
.it-drive-meta .cell .k {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
  margin-bottom: 4px;
}
.it-drive-meta .cell .v {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--it-ink);
  font-weight: 400;
  line-height: 1.1;
}
.it-drive-meta .cell .v em { font-style: italic; color: var(--region-hue, var(--it-accent)); }
.it-drive-meta .cell .u {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--it-ink-mute);
  margin-left: 4px;
}

.it-drive-detail {
  display: grid; grid-template-columns: 1fr;
  gap: 6px;
  font-size: 13px; line-height: 1.6;
  color: var(--it-ink-mute);
}
.it-drive-detail .row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--it-line);
}
.it-drive-detail .row .k {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-dim);
  padding-top: 3px;
}

.it-drive-profile {
  margin-top: 18px;
  background: rgba(20,35,49,0.55);
  border: 1px solid var(--it-line);
  border-radius: 2px;
  padding: 14px 16px 10px;
}
.it-drive-profile .head {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-dim);
  margin-bottom: 8px;
}
.it-drive-profile svg {
  width: 100%; height: 70px;
  display: block;
}
.it-drive-profile .axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--it-ink-dim);
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .it-drive { grid-template-columns: 1fr; gap: 24px; }
  .it-drive .num { font-size: 40px; }
}

/* ---------- CITIES ---------- */
.it-cities { background: var(--it-bg-2); }
.it-cities-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}
.it-city {
  background: var(--it-card);
  border: 1px solid var(--it-line);
  border-top: 3px solid var(--region-hue, var(--it-accent));
  border-radius: 2px;
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.3s;
}
.it-city.lg { grid-column: span 3; min-height: 460px; }
.it-city.md { grid-column: span 2; min-height: 360px; }
.it-city.sm { grid-column: span 2; min-height: 360px; }
.it-city::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--city-img);
  background-size: cover; background-position: center;
  filter: saturate(0.75) brightness(0.55);
  z-index: -2;
  transition: transform 0.6s, filter 0.6s;
}
.it-city::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,26,34,0.2) 0%, rgba(14,26,34,0.85) 70%);
  z-index: -1;
}
.it-city:hover { transform: translateY(-4px); }
.it-city:hover::before { transform: scale(1.06); filter: saturate(0.95) brightness(0.65); }
.it-city .body {
  padding: 24px;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.it-city .top {
  position: absolute; top: 18px; left: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-city .top b { color: var(--region-hue, var(--it-accent)); font-weight: 500; }
.it-city .name {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 0.95;
  color: var(--it-ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.it-city.lg .name { font-size: 64px; }
.it-city .mood {
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
  color: var(--it-accent);
  margin-top: 2px;
}
.it-city .quote {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(236,228,211,0.85);
  border-top: 1px solid rgba(236,228,211,0.2);
  padding-top: 12px;
  margin-top: 8px;
}
.it-city .meta {
  display: flex; gap: 18px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-city .meta b { color: var(--it-ink); font-weight: 500; }

@media (max-width: 1100px) {
  .it-cities-grid { grid-template-columns: repeat(2, 1fr); }
  .it-city, .it-city.lg, .it-city.md, .it-city.sm { grid-column: span 1; min-height: 320px; }
}

/* ---------- TRAINS ---------- */
.it-trains { background: var(--it-bg); }
.it-trains-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.it-trains-aside p {
  font-size: 14px; line-height: 1.65;
  color: var(--it-ink-mute);
  margin-bottom: 14px;
}
.it-trains-aside p strong { color: var(--it-accent); font-weight: 500; }
.it-trains-aside .pull {
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  color: var(--it-ink);
  line-height: 1.35;
  margin: 28px 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--it-accent);
}

.it-trains-table {
  border-top: 1px solid var(--it-line-strong);
}
.it-trains-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--it-line);
  align-items: baseline;
}
.it-trains-row .route {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--it-ink);
}
.it-trains-row .time {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--it-accent);
  text-transform: uppercase;
}
.it-trains-row .op {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-trains-row .note {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--it-ink-mute);
  font-style: italic;
  font-family: var(--serif);
  padding-top: 6px;
}

@media (max-width: 1000px) {
  .it-trains-grid { grid-template-columns: 1fr; gap: 32px; }
  .it-trains-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- WHEN (12 month) ---------- */
.it-when { background: var(--it-bg-2); }
.it-when-strip {
  display: grid;
  grid-template-columns: 80px repeat(12, 1fr);
  border: 1px solid var(--it-line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--it-card);
  font-family: var(--mono);
  font-size: 11px;
}
.it-when-strip .row { display: contents; }
.it-when-strip .row .lbl {
  background: rgba(20,35,49,0.85);
  padding: 14px 12px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--it-accent);
  border-bottom: 1px solid var(--it-line);
  display: flex; align-items: center;
}
.it-when-strip .row .cell {
  padding: 14px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--it-ink-mute);
  border-bottom: 1px solid var(--it-line);
  border-left: 1px solid var(--it-line);
  text-align: center;
  text-transform: uppercase;
}
.it-when-strip .row .cell.mhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--it-ink);
  text-transform: none;
  letter-spacing: 0;
  background: rgba(20,35,49,0.85);
  text-align: center;
}
.it-when-strip .row.last .cell, .it-when-strip .row.last .lbl { border-bottom: none; }
.it-when-strip .cell.is-star { background: rgba(212,165,116,0.14); color: var(--it-ink); }
.it-when-strip .cell.is-star::before { content: "★ "; color: var(--it-accent); }

/* ---------- FOOD BENTO ---------- */
.it-food { background: var(--it-bg); position: relative; overflow: hidden; }
.it-food-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.it-food-card {
  background: var(--it-card);
  border: 1px solid var(--it-line);
  border-top: 3px solid var(--region-hue, var(--it-accent));
  border-radius: 2px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 200px;
}
.it-food-card.span-2 { grid-column: span 2; }
.it-food-card .em { font-size: 28px; }
.it-food-card .where {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--region-hue, var(--it-accent));
}
.it-food-card .dish {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--it-ink);
  line-height: 1.05;
}
.it-food-card.span-2 .dish { font-size: clamp(32px, 3vw, 44px); }
.it-food-card .note {
  font-size: 13px; line-height: 1.55;
  color: var(--it-ink-mute);
  margin-top: auto;
}

@media (max-width: 1000px) {
  .it-food-grid { grid-template-columns: repeat(2, 1fr); }
  .it-food-card.span-2 { grid-column: span 2; }
}

/* ---------- FESTIVALS ---------- */
.it-fest { background: var(--it-bg-2); }
.it-fest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.it-fest-card {
  background: var(--it-card);
  border: 1px solid var(--it-line);
  border-left: 3px solid var(--region-hue, var(--it-accent));
  border-radius: 2px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 240px;
}
.it-fest-card .num {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-ink-dim);
}
.it-fest-card .name {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  color: var(--it-ink);
}
.it-fest-card .name em { font-style: italic; color: var(--region-hue, var(--it-accent)); }
.it-fest-card .meta {
  display: flex; gap: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-fest-card .meta b { color: var(--it-accent); font-weight: 500; }
.it-fest-card .text {
  font-size: 14px; line-height: 1.6;
  color: var(--it-ink-mute);
  margin-top: auto;
}

@media (max-width: 900px) {
  .it-fest-grid { grid-template-columns: 1fr; }
}

/* ---------- LANGUAGE ---------- */
.it-lang { background: var(--it-bg); }
.it-lang-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
}
.it-lang-aside p {
  font-size: 14px; line-height: 1.65;
  color: var(--it-ink-mute);
  margin-bottom: 14px;
}
.it-lang-aside .pull {
  font-family: var(--serif); font-style: italic;
  font-size: 24px;
  color: var(--it-accent);
  margin: 28px 0;
}

.it-phrases {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--it-line-strong);
}
.it-phrase {
  padding: 18px 0;
  border-bottom: 1px solid var(--it-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: baseline;
}
.it-phrase:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--it-line); }
.it-phrase:nth-child(even) { padding-left: 24px; }
.it-phrase .it {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--it-ink);
}
.it-phrase .en {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--it-accent);
}
.it-phrase .note {
  grid-column: 1 / -1;
  font-size: 12px; line-height: 1.5;
  color: var(--it-ink-mute);
  font-style: italic;
}
@media (max-width: 900px) {
  .it-lang-grid { grid-template-columns: 1fr; gap: 32px; }
  .it-phrases { grid-template-columns: 1fr; }
  .it-phrase, .it-phrase:nth-child(odd), .it-phrase:nth-child(even) {
    grid-column: 1; padding: 18px 0; border-right: none;
  }
}

/* ---------- NEIGHBORHOODS ---------- */
.it-nbhd { background: var(--it-bg-2); }
.it-nbhd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.it-nbhd-card {
  background: var(--it-card);
  border: 1px solid var(--it-line);
  border-radius: 2px;
  padding: 32px 28px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  position: relative;
}
.it-nbhd-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--region-hue, var(--it-accent));
}
.it-nbhd-card .num {
  font-family: var(--serif); font-style: italic;
  font-size: 38px;
  color: var(--region-hue, var(--it-accent));
  line-height: 1;
}
.it-nbhd-card .city {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--it-accent);
  margin-bottom: 6px;
}
.it-nbhd-card .name {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.08;
  color: var(--it-ink);
}
.it-nbhd-card .name em { font-style: italic; color: var(--region-hue, var(--it-accent)); }
.it-nbhd-card .text {
  font-size: 14px; line-height: 1.6;
  color: var(--it-ink-mute);
  margin-top: 10px;
}
.it-nbhd-card .why {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--it-accent);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--it-line);
}

@media (max-width: 900px) {
  .it-nbhd-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.it-faq { background: var(--it-bg); }
.it-faq-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.it-faq-aside p {
  font-size: 14px; line-height: 1.65;
  color: var(--it-ink-mute);
  margin-bottom: 14px;
}
.it-faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--it-line);
}
.it-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--it-ink);
  line-height: 1.3;
}
.it-faq-item summary::-webkit-details-marker { display: none; }
.it-faq-item summary::after {
  content: "＋";
  color: var(--it-accent);
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.it-faq-item[open] summary::after { content: "—"; }
.it-faq-item .a {
  padding-top: 14px;
  font-size: 14px; line-height: 1.7;
  color: var(--it-ink-mute);
  max-width: 760px;
}
.it-faq-item .a strong { color: var(--it-ink); font-weight: 500; }

@media (max-width: 900px) {
  .it-faq-grid { grid-template-columns: 1fr; }
}

/* ---------- SIGN-OFF ---------- */
.it-signoff {
  position: relative;
  padding: 200px 0 160px;
  text-align: center;
  background: linear-gradient(180deg, var(--it-bg) 0%, var(--it-bg-2) 100%);
  overflow: hidden;
}
.it-signoff::before {
  content: "ITALIA";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic; font-size: 36vw;
  color: rgba(212,165,116,0.05);
  letter-spacing: -0.04em; line-height: 1; pointer-events: none; white-space: nowrap;
}
.it-signoff-inner {
  position: relative; z-index: 2;
  max-width: 880px; margin: 0 auto; padding: 0 48px;
}
.it-signoff h2 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--it-ink);
  font-weight: 400;
}
.it-signoff h2 em { font-style: italic; color: var(--it-accent); display: block; }
.it-signoff p {
  margin-top: 32px;
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--it-ink-mute);
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.it-signoff .meta {
  margin-top: 40px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--it-ink-mute);
}
.it-signoff .meta b { color: var(--it-accent); font-weight: 500; }

/* footer override */
body.it-page .footer { background: #0a1419; }

/* ---------- TWEAKS ---------- */
.tweaks-it h4 { color: var(--it-accent); }

/* small region-tinted helper */
.tag-region {
  display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--region-hue, var(--it-accent));
  border: 1px solid var(--region-hue, var(--it-accent));
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.2);
}