/*
 VIA VICENZA · FIXES
 Small additions to vv-components.min.css (the generated bundle is never edited by hand).
 Loaded right after it; uses the same design tokens.
*/

/* "GET THE NEXT DROP" box inside the Places list: the bundle styles the container only.
   The form inside is the standard component (data-vv-block="CMP_004"), styled by the bundle. */
[data-vv-page-main] .pl-news > .head {
  padding: var(--s12) var(--s24);
  background: var(--verde);
  color: var(--crema);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
}
[data-vv-page-main] .pl-news > .body {
  display: grid;
  gap: var(--s12);
  padding: var(--s24);
}
[data-vv-page-main] .pl-news > .body h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--i-h3);
  color: var(--inchiostro);
}
[data-vv-page-main] .pl-news > .body > p,
[data-vv-page-main] .pl-news > .body > small {
  margin: 0;
  font-size: var(--t-piccolo);
  line-height: var(--i-piccolo);
  color: var(--grigio);
}
[data-vv-page-main] .pl-news > .body > small { font-size: var(--t-etichetta); }

/* "IN THIS STORY" chapter bar: the bundle's JavaScript builds it on every page with two or more titled
   sections and drops it into the content, but its styles only exist for a bar living inside the site header.
   It came out as bare text above the first section (home, /eat/, /stories/, long stories…): hidden. */
main .vv-chapters { display: none; }

/* Breadcrumb bar: the generator put a "context" link next to the breadcrumb of 32 pages ("Explore the Worlds of
   Vicenza", "Discover Vicenza"…) whose styles only exist inside <main>, while the bar sits before it: it came out as
   bare text after the breadcrumb. Hidden. */
.vv-global-trail .vv-global-context { display: none; }
/* The bar's own rules (border, cream background, spacing, upper-case labels, accent links) are also scoped to <main>
   in the bundle: here they are for the bar where it really is. The breadcrumb nav inside already has its width and
   side padding from the bar, so its own are removed to avoid a double indent. */
.vv-global-trail {
  border-block-start: var(--filo) solid var(--linea);
  background: var(--crema);
}
.vv-global-trail-in {
  width: 100%;
  max-width: var(--c-standard);
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-block: var(--s16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s12);
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  color: var(--grigio);
}
.vv-global-trail-in a { color: var(--accento); }
.vv-global-trail-in .vv-breadcrumbs {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: baseline;
}

/* When the page opens with a photo hero (BLK_015 as the first block of <main>), the breadcrumb bar disappears and
   the breadcrumb sits on the photo, top left, in "difference" blend: white on dark areas, dark on light ones. */
.vv-global-trail:has(+ main > .vvb015:first-child) {
  position: relative;
  width: 100%;
  max-width: none;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  z-index: 20;
}
.vv-global-trail:has(+ main > .vvb015:first-child) .vv-global-trail-in {
  position: absolute;
  inset-block-start: var(--s24);
  inset-inline-start: max(0px, calc((100% - var(--c-standard)) / 2));
  width: min(100%, var(--c-standard));
  margin: 0;
  padding-block: 0;
  color: #fff;
  mix-blend-mode: difference;
}
.vv-global-trail:has(+ main > .vvb015:first-child) .vv-global-trail-in a,
.vv-global-trail:has(+ main > .vvb015:first-child) .vv-breadcrumbs { color: #fff; }
.vv-global-trail:has(+ main > .vvb015:first-child) .vv-breadcrumbs a:hover { color: #fff; text-decoration-thickness: 2px; }

/* Quoted paragraph (BLK_009b, /curiosities/): a sixty-word paragraph set at heading size. Same style as the
   editorial note of the home page (BLK_026): serif 17px, normal leading, ink colour. */
[data-vv-block="BLK_009b"].vvb009-quoted { text-align: start; }
[data-vv-block="BLK_009b"] .vvb009-quote {
  justify-items: start;
  gap: var(--s16);
  padding-inline-start: var(--s24);
  border-inline-start: var(--tratto) solid var(--accento);
}
[data-vv-block="BLK_009b"] .vvb009-quote p {
  font-size: var(--t-h4);
  line-height: var(--i-corpo);
  letter-spacing: 0;
  color: var(--inchiostro);
  text-wrap: pretty;
}
[data-vv-block="BLK_009b"] .vvb009-quote.is-quoted p::before { content: none; }
[data-vv-block="BLK_009b"] .vvb009-quote .vvb026-signoff {
  font-family: var(--sans);
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  color: var(--grigio);
}
[data-vv-block="BLK_009b"] .vvb009-quote .vvb026-signoff strong { color: var(--ruggine); }

/* Flip cards (BLK_013 and the like): they no longer turn. Only the front is shown, the whole card opens the story
   (vv-cards.js) and on hover the photo lights up a little. */
.vv-flip-card .vv-flip-card-inner { transform: none !important; }
.vv-flip-card .vv-flip-card-back,
.vv-flip-card .vv-flip-card-hint { display: none; }
.vv-flip-card[data-vv-href] { cursor: pointer; }
.vv-flip-card .vv-flip-card-front img { transition: filter var(--veloce) var(--curva), transform var(--lento) var(--curva); }
.vv-flip-card .vv-flip-card-front::after { transition: opacity var(--veloce) var(--curva); }
.vv-flip-card:hover .vv-flip-card-front img,
.vv-flip-card:focus-within .vv-flip-card-front img { filter: brightness(1.12) saturate(1.05); }
.vv-flip-card:hover .vv-flip-card-front::after,
.vv-flip-card:focus-within .vv-flip-card-front::after { opacity: .8; }
.vv-flip-card .vv-flip-card-line { margin: 0; font-size: var(--t-piccolo); line-height: var(--i-piccolo); color: var(--crema); opacity: .92; }
.vv-flip-card:hover .vv-flip-card-face,
.vv-flip-card:focus-within .vv-flip-card-face { box-shadow: var(--ombra-strato); }

/* Seven stories carry the breadcrumb as a bare <nav> (no bar) right before a photo hero: same treatment as the
   pages with the bar, the breadcrumb goes onto the photo in "difference" blend and takes no vertical space. */
nav.vv-breadcrumbs:has(+ main > .vvb015:first-child) {
  position: relative;
  z-index: 20;
  height: 0;
  padding-block: 0;
  overflow: visible;
  transform: translateY(var(--s24));
  color: #fff;
  mix-blend-mode: difference;
}
nav.vv-breadcrumbs:has(+ main > .vvb015:first-child) a,
nav.vv-breadcrumbs:has(+ main > .vvb015:first-child) span { color: #fff; }

/* About page (BLK_034, variant "about-page"): the bundle's stylesheet was written for a different markup than the
   one the page has (arrows and cards were expected as direct children of the rail, the split as two columns of one
   element each). Result: the hero stuck to the left edge, the two arrow buttons stretched to the full height of the
   card column, the cards stacked in a narrow column next to them, the call-to-action row pushed to the top right.
   Same look the design intended, on the real markup. */
[data-vv-block="BLK_034"].about-page .manifesto-hero { max-width: none; padding-block-end: var(--s32); }
[data-vv-block="BLK_034"].about-page .about-split { margin-block-start: var(--s48); padding-block-end: var(--s48); }
[data-vv-block="BLK_034"].about-page .manifesto-hero .wrap { display: grid; gap: var(--s16); }
[data-vv-block="BLK_034"].about-page .manifesto-hero .manifesto-h1 { max-width: var(--c-testo); }
[data-vv-block="BLK_034"].about-page .manifesto-copy .left { display: grid; gap: var(--s16); }
[data-vv-block="BLK_034"].about-page .about-split { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
[data-vv-block="BLK_034"].about-page .charter-rail-wrap { display: block; overflow: visible; }
[data-vv-block="BLK_034"].about-page .charter-nav { display: none; }          /* the arrows have no script behind them */
[data-vv-block="BLK_034"].about-page .editorial-charter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 44ch);
  gap: var(--s16);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s8);
}
[data-vv-block="BLK_034"].about-page .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--s32); gap: var(--s16); }
/* every call to action in the row is a button, like the first one */
[data-vv-block="BLK_034"].about-page .cta-row .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tocco);
  padding-inline: var(--s32);
  border: var(--filo) solid var(--verde);
  border-radius: var(--r-pastiglia);
  background: transparent;
  color: var(--verde);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  text-decoration: none;
}
[data-vv-block="BLK_034"].about-page .cta-row .cta:hover,
[data-vv-block="BLK_034"].about-page .cta-row .cta:focus-visible { background: var(--accento); border-color: var(--accento); color: var(--accento-su); }
/* more air between the lines of the texts */
[data-vv-block="BLK_034"].about-page p { line-height: 1.8; }
/* the "Made by WØM" paragraph runs the full width of the column, like the cards and buttons above */
[data-vv-block="BLK_034"].about-page .signature-grid p { max-width: none; }
/* no automatic hyphenation on this page (the bundle turns it on for every paragraph) */
[data-vv-block="BLK_034"].about-page p { hyphens: manual; }
@media (min-width: 768px) {
  [data-vv-block="BLK_034"].about-page .mobile-charter-hint { display: none; }
  [data-vv-block="BLK_034"].about-page .editorial-charter {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
  /* the two buttons as wide as the two cards above them */
  [data-vv-block="BLK_034"].about-page .cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vicenza Lexicon (BLK_027): every entry has two paragraphs (the bold summary and the text) that the bundle pins
   to the same grid row, so they sit side by side; on a phone that gives two narrow columns. Below 768px the
   entry is a single column: word, summary, text, source. Desktop unchanged. */
@media (max-width: 767px) {
  [data-vv-block="BLK_027"] .vvb027-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  [data-vv-block="BLK_027"] .vvb027-entry h3,
  [data-vv-block="BLK_027"] .vvb027-entry p,
  [data-vv-block="BLK_027"] .vvb027-entry cite { grid-row: auto; }
}

/* "Places in Vicenza" list pages (13 pages: /places/, /asiago-plateau-vicenza/, /palladian-villas-vicenza/…): their
   list is marked as a swipe rail (data-vv-scorre) inside a sand box (.pl-curata), so the section titles end up as
   cells between the cards. They take the layout of /eat/ instead: a plain grid, one column on a phone, two on a
   tablet, four on desktop, with every title on its own full-width row. */
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s16);
  align-items: stretch;
  overflow: visible;
  scroll-snap-type: none;
  padding-inline: var(--margine);
  padding-block: 0 var(--ritmo);
  border-radius: 0;
  background: transparent;
}
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > * { flex: none; width: auto; scroll-snap-align: none; }
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > :last-child { margin-inline-end: 0; }
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > .pl-testa,
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > .pl-piu,
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > .pl-seeall,
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > .pl-sect,
[data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] > .pl-news { grid-column: 1 / -1; }
@media (min-width: 768px) {
  [data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  [data-vv-page-main] .pl-liste.pl-curata[data-vv-scorre] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Title of the "Places in Vicenza" list pages: twice the generic H1 (44px → 88px on desktop), tight leading,
   as the library's directory hero. */
[data-vv-page-main] .pl-intro h1 {
  font-size: clamp(48px, 9vw, 88px);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--verde);
  margin-block: var(--s32) var(--s40, 40px);
}

/* the bare SHARE / EMAIL commands under the intro of the list pages: removed */
[data-vv-page-main] .pl-intro .pl-share { display: none; }

/* "See all one hundred places in Vicenza →" at the foot of the list pages: a bare link in a sand box; now a
   centred button, in the row's own space (as the "Vedi tutti" of the library's directory). */
[data-vv-page-main] .pl-gateway {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--c-standard);
  margin: 0 auto;
  padding: var(--s16) var(--margine) var(--ritmo);
  background: transparent;
  border-radius: 0;
}
[data-vv-page-main] .pl-gateway a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tocco);
  padding-inline: var(--s32);
  border: var(--filo) solid var(--verde);
  border-radius: var(--r-pastiglia);
  color: var(--verde);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
[data-vv-page-main] .pl-gateway a:hover,
[data-vv-page-main] .pl-gateway a:focus-visible { background: var(--verde); color: var(--crema); }

/* Interactive map (BLK_023): the list of visible places next to the map is a grid whose rows shrank to the
   buttons' minimum height (44px), so every entry's name and text spilled over the next one. The list is a column
   of content-sized buttons that scrolls, with the texts sized for a list (the page's H3/paragraph styles are too big). */
[data-vv-block="BLK_023"] .vv-map-list { display: flex; flex-direction: column; align-items: stretch; }
[data-vv-block="BLK_023"] .vv-map-list button,
[data-vv-block="BLK_023"] .vv-map-list a { flex: none; height: auto; }
[data-vv-block="BLK_023"] .vv-map-list h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.2; }
[data-vv-block="BLK_023"] .vv-map-list p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--sabbia); }
[data-vv-block="BLK_023"] .vv-map-place-meta { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }

/* Hub cards of /places/ (one per list page, photo drawn from that page): no commands on the photo, so the text
   starts closer to it. */
[data-vv-page-main] .pl-hub-card > a > .pl-tx { padding-block-start: 20px; }
[data-vv-page-main] .pl-hub-card .pl-tx h3 { text-wrap: balance; font-size: 26px; }
[data-vv-page-main] .pl-hub-card .pl-tx p { font-size: 15px; }
/* two columns, larger cards than the lists inside the section */
@media (min-width: 768px) {
  [data-vv-page-main] .pl-liste.pl-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); }
}

/* /eat/ index: the EXPLORE filter row sits right under the "What to eat in Vicenza" title (the title's bottom
   padding and the row's top margin added up to ~100px), aligned with the title's left edge. */
[data-vv-page-main] .pl-sect#eat-stories-title { padding-block-end: var(--s8); font-size: clamp(32px, 4.3vw, 43px); line-height: 1.15; }
[data-vv-page-main] .pl-ordina.eat-filters { margin-block-start: 0; padding-inline: var(--margine); }
/* EXPLORE as a subtitle of its own, close to the title; the buttons on the row below, further away */
[data-vv-page-main] .pl-ordina.eat-filters .pl-lab { flex: 0 0 100%; margin: 0 0 var(--s24); }
/* the five filter buttons on one line, without the card counts */
[data-vv-page-main] .pl-ordina.eat-filters .pl-conta { display: none; }
@media (min-width: 1024px) {
  [data-vv-page-main] .pl-ordina.eat-filters {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    justify-content: start;
    column-gap: var(--s16);
    row-gap: 0;
  }
  [data-vv-page-main] .pl-ordina.eat-filters .pl-lab { grid-column: 1 / -1; }
  [data-vv-page-main] .pl-ordina.eat-filters button { white-space: nowrap; }
}

/* "Keep looking" (/eat/): the section carries the class of the card grid, so it became a three-column grid with
   its single wrapper squeezed into the first column; the cards inside are marked as a swipe rail with fixed widths
   and have a photo their layout never planned for. The section is a plain block, the cards a 3-column grid with
   the photo above the texts. */
[data-vv-page-main] .vv-discover-section.vv-discover-more { display: block; padding-inline: var(--margine); }
[data-vv-page-main] .vv-discover-more-grid[data-vv-scorre] > * { width: auto; flex: none; scroll-snap-align: none; }
@media (min-width: 768px) {
  [data-vv-page-main] .vv-discover-more-grid[data-vv-scorre] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); overflow: visible; }
}
@media (min-width: 1024px) {
  [data-vv-page-main] .vv-discover-more-grid[data-vv-scorre] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-vv-page-main] .vv-discover-more-card { grid-template-rows: [foto] auto [testo] 1fr [azione] auto; text-decoration: none; }
[data-vv-page-main] .vv-discover-more-card > img { grid-row: foto; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r4); }
[data-vv-page-main] .vv-discover-more-copy small { font-family: var(--sans); font-weight: 700; font-size: var(--t-etichetta); letter-spacing: var(--lettere-etichetta); text-transform: uppercase; color: var(--ruggine); }
[data-vv-page-main] .vv-discover-more-copy h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--verde); }

/* Detail pages of /experiences/ and /food/ (2 pages): the three facts under the lead ("Pace", "Scenery", "Place")
   had no styles at all. Small label in rust, value in serif, each in its own sand box. */
[data-vv-page-main] .detail-body .fact-row[data-vv-scorre] > .fact { width: auto; flex: 1 1 0; scroll-snap-align: none; }
[data-vv-page-main] .detail-body .fact { display: grid; gap: var(--s4); padding: var(--s16) var(--s24); border-radius: var(--r12); background: var(--sabbia); }
[data-vv-page-main] .detail-body .fact small { font-family: var(--sans); font-weight: 700; font-size: var(--t-etichetta); line-height: var(--i-etichetta); letter-spacing: var(--lettere-etichetta); text-transform: uppercase; color: var(--ruggine); }
[data-vv-page-main] .detail-body .fact p { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--verde); }
[data-vv-page-main] .detail-body .wrap { width: 100%; max-width: var(--c-standard); margin-inline: auto; padding-inline: var(--margine); }
@media (max-width: 767px) { [data-vv-page-main] .detail-body .fact-row[data-vv-scorre] { display: grid; gap: var(--s12); overflow: visible; } }

/* Hub of /places/: the entries beyond the first six are rows (title + label), in the style of the category
   explorer's list, without the Save pill and without the space it would take. */
[data-vv-page-main] .pl-hub-rows {
  width: 100%;
  max-width: var(--c-standard);
  margin-inline: auto;
  padding-block: 0 var(--ritmo);
  padding-inline: var(--margine);
  background: transparent;
}
[data-vv-page-main] .pl-hub-rows .vvb002-cat > a { padding-inline-end: 0; }
[data-vv-page-main] .pl-hub-rows-head {
  margin: 0 0 var(--s16);
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--i-h2);
  color: var(--verde);
}

/* /journal/: the second half of each edit is no longer behind a "view the full edit" button (migration 033),
   so the two grids of an edit need the same gap between them as between the cards. */
[data-vv-page-main] .vv-journal-more > .vv-journal-grid { margin-block-start: var(--s24); }

/* /journal/: the card photo runs edge to edge (width 100% + 48px, -24px margins, in the page's own style block),
   but the global img { max-width: 100% } capped it, leaving a 48px strip on the right. */
[data-vv-page-main] .vv-journal-card img { max-width: none; }

/* /local-expertise-vicenza/ (BLK_035): the hero, the bridge and the closing block were given the reading width
   (680px) on the block itself, so they hung on the left edge instead of sitting in the page column with the rest.
   The blocks run the full width, their own texts keep the reading width. */
[data-vv-block="BLK_035"].option .c-hero,
[data-vv-block="BLK_035"].option .c-bridge,
[data-vv-block="BLK_035"].option .final { max-width: none; }
[data-vv-block="BLK_035"].option .c-hero > .wrap > *,
[data-vv-block="BLK_035"].option .c-bridge > .wrap > * { max-width: var(--c-testo); }
/* the "Picnic in the City" block: four columns for two children left the text in a 272px strip. Title on the left,
   text running the rest of the width. */
[data-vv-block="BLK_035"].option .picnic-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s32); align-items: start; }
[data-vv-block="BLK_035"].option .picnic-grid p { max-width: none; }
@media (max-width: 767px) { [data-vv-block="BLK_035"].option .picnic-grid { grid-template-columns: minmax(0, 1fr); } }
/* "Share what you do": air above, one full-width column, the button at the bottom right */
[data-vv-block="BLK_035"].option .final { padding-block-start: var(--ritmo); }
[data-vv-block="BLK_035"].option .final-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
[data-vv-block="BLK_035"].option .final-grid > * { max-width: none; }
[data-vv-block="BLK_035"].option .final-grid p { max-width: none; }
[data-vv-block="BLK_035"].option .final-grid > .btn { justify-self: end; max-width: none; width: auto; }

/* Night index (/astrotourism-noctourism/): air above the card grid, which sat right under the block before it */
[data-vv-page-main] .vv-night-card-index { padding-block-start: var(--ritmo); }

/* Place cards (.pl-card, used by the list pages, /eat/, the night index): brought to the TPL_002 specification of
   the component library — photo 3:2, the three commands as white rounded squares sitting on the seam between photo
   and text (bottom right), the "Save" pill of My Vicenza at the top right of the photo, label / serif title / one
   sentence, no hyphenation. Measures from the 1920 reference (260px card): 44px commands, 40/20/26 text padding. */
[data-vv-page-main] .pl-card > .pl-im,
[data-vv-page-main] .pl-card > a > .pl-im { position: relative; overflow: visible; }
[data-vv-page-main] .pl-card .pl-acts {
  position: absolute;
  inset-inline-end: var(--s12);
  inset-block-end: calc(var(--s24) * -1);
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  z-index: var(--z-appiccicato);
}
[data-vv-page-main] .pl-card .pl-acts button {
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r18);
  background: var(--bianco);
  color: var(--ruggine);
  box-shadow: 0 3px 10px rgba(20, 25, 20, .16);
  display: grid;
  place-items: center;
}
[data-vv-page-main] .pl-card .pl-acts button:hover,
[data-vv-page-main] .pl-card .pl-acts button:focus-visible { background: var(--crema); color: var(--verde); }
[data-vv-page-main] .pl-card .pl-acts svg { width: 52%; height: 52%; }
/* two commands, not three: the flag (first button) goes; the star is "save", the list opens the page (vv-cards.js) */
[data-vv-page-main] .pl-card .pl-acts button:first-child { display: none; }
[data-vv-page-main] .pl-card .pl-acts button.on { background: var(--ruggine); color: var(--bianco); }
[data-vv-page-main] .pl-card .vv-save {
  position: absolute;
  inset-block-start: var(--s12);
  inset-inline-end: var(--s12);
  z-index: var(--z-appiccicato);
}
[data-vv-page-main] .pl-card > .pl-tx,
[data-vv-page-main] .pl-card > a > .pl-tx { padding: 40px 20px 26px; gap: var(--s8); }
[data-vv-page-main] .pl-tx h3 { font-weight: 500; font-size: 22px; line-height: 1.14; letter-spacing: -.015em; color: var(--verde); }
[data-vv-page-main] .pl-tx p { font-size: 14px; line-height: 1.48; hyphens: manual; }
@media (max-width: 767px) {
  [data-vv-page-main] .pl-card > .pl-tx,
  [data-vv-page-main] .pl-card > a > .pl-tx { padding: 36px 20px 24px; }
  [data-vv-page-main] .pl-tx h3 { font-size: 24px; }
  [data-vv-page-main] .pl-tx p { font-size: 16px; line-height: 1.42; }
}

/* Category explorer (BLK_002/002b) whose list is marked as a swipe rail (data-vv-scorre: /curiosities/, one of
   /stories/): the rail gives every entry a fixed 390px width, which overflowed the middle column onto the photo
   preview. From tablet up the list is a plain column that fits its grid cell, so the gap on both sides of the list
   is the grid's own (64px), the same as between the promo and the list. */
@media (min-width: 768px) {
  [data-vv-block^="BLK_002"] .vvb002-cats[data-vv-scorre] { display: block; }
  [data-vv-block^="BLK_002"] .vvb002-cats[data-vv-scorre] > * { width: auto; flex: none; scroll-snap-align: none; }
}

/* Category explorer that links to stories (BLK_002b: /curiosities/, /stories/): on desktop the promo (label, title,
   button) runs across the top; below it the list, wider than before, with the photo preview on its right. */
@media (min-width: 1024px) {
  [data-vv-block="BLK_002b"] .vvb002-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--b002-prev));
    grid-template-areas: "promo promo" "cats prev";
    row-gap: var(--s32);
  }
  [data-vv-block="BLK_002b"] .vvb002-promo { grid-area: promo; max-width: var(--c-testo); }
  [data-vv-block="BLK_002b"] .vvb002-cats { grid-area: cats; }
  [data-vv-block="BLK_002b"] .vvb002-prev { grid-area: prev; }
}

/* Card slider (BLK_003): the rotating words under the rail ("FOODIE INSIGHTS | RARE FOOD | ...") are turned into
   spans by the bundle's script, which swaps the classes in/out every two seconds, but no stylesheet ever placed
   them: all the words showed at once, glued together. One word at a time, sliding up. */
[data-vv-block="BLK_003"] .vvb003-kw .roll { position: relative; height: 1.4em; padding-block: var(--s16); box-sizing: content-box; }
[data-vv-block="BLK_003"] .vvb003-kw .roll span {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--s16);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .34s ease, transform .34s ease;
}
[data-vv-block="BLK_003"] .vvb003-kw .roll span.in { opacity: 1; transform: none; }
[data-vv-block="BLK_003"] .vvb003-kw .roll span.out { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { [data-vv-block="BLK_003"] .vvb003-kw .roll span { transition: none; } }

/* The line drawings of BLK_017 (compass, balcony, fish, folding screen) live inside the sections of other blocks
   (five stories), where their size rule, scoped to [data-vv-block="BLK_017"], never applied: the SVG filled the
   whole width of the page. Same size the component intends, wherever it sits. */
[data-vv-page-main] .vvb017 { width: var(--s64); height: var(--s64); flex: 0 0 auto; color: var(--oro); }
[data-vv-page-main] .vvb017 > svg { width: 100%; height: 100%; display: block; }

/* Stories on the "ja2" model (15 pages): the rule meant for the small "01" label (.vv-ja2-index) also names
   .vv-ja2-movement, which is the <section> holding the article, and text-transform is inherited: the whole body
   came out in small bold grey capitals. The section goes back to normal text; the label keeps its look. */
[data-vv-page-main] .vv-ja2-movement {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
/* the buttons jumping to the sections of the same page are dropped, with the space they left behind */
[data-vv-page-main] .vv-ja2-iconnav { display: none; }
/* the "As told by" ribbon runs the full width of the page, its label stays in the content column, and the article
   below keeps its distance */
[data-vv-page-main] .vv-ja2-sources {
  max-width: none;
  padding-inline: 0;
  margin-block-end: var(--ritmo);
  border-block-start: 0;
}

/* The big serif line of a card (PRIABONIAN, GOLD MEDAL...) is set at display size, which a single
   long word cannot break: in the narrow cards of a row of three it ran past the right edge and was
   cut off. The line now follows the width of its own card instead of the width of the page. */
[data-vv-page-main] .vv-world-card {
  container-type: inline-size;
}

[data-vv-page-main] .vv-world-record {
  font-size: min(var(--t-h2), 16cqi);
  overflow-wrap: anywhere;
}

/* The bands of cards ran in the standard column (1200) while the same row of cards on the home
   page (BLK_021, .vvb021-in) runs in the wide one: same container here. */
[data-vv-page-main] .vv-world-wrap {
  max-width: var(--c-largo);
}

/* the card bands of the green escape: the component only spaces its foot, so each band of cards
   started right against the chapter title above it */
[data-vv-page-main] .vv-world-band.vv-green-chapter {
  padding-block-start: var(--ritmo);
}

/* CMP_001 sitting straight inside the page, with no card around it (two stories): the block has a
   column width of its own but nothing to centre it, so the text ran flush to the left edge. */
[data-vv-page-main] > .vvc001 {
  max-width: calc(var(--c-testo) + var(--margine) * 2);
  margin-inline: auto;
  padding-inline: var(--margine);
  margin-block: var(--ritmo);
}

/* the "Plan it" panel of the ja2 stories keeps its distance from the article above */
[data-vv-page-main] .vv-ja2-practical {
  margin-block-start: var(--ritmo);
}

/* the closing "Sources" list of the ja2 stories: plain list, in the text column */
[data-vv-page-main] .vv-ja2-srcs,
[data-vv-page-main] .vv-ja2-srcbox ul {
  margin: 0;
  padding-inline-start: var(--s24, 24px);
  display: grid;
  gap: var(--s12, 12px);
}

[data-vv-page-main] .vv-ja2-srcs li,
[data-vv-page-main] .vv-ja2-srcbox li {
  padding-inline-start: var(--s8, 8px);
}

[data-vv-page-main] .vv-ja2-sources .vvb010-lab {
  width: 100%;
  max-width: calc(var(--c-testo) + var(--margine) * 2);
  margin-inline: auto;
  text-align: start;
}

/* "As told by" ribbon: no space below the section, the block that follows starts right after it */
[data-vv-block^="BLK_010"] { padding-block-end: 0; }

/* the "Save" pill of My Vicenza: no outline anywhere */
[data-vv-block="MY_001"].vv-save { border: 0; }

/* Category explorer and route of the moment (BLK_002, BLK_002b): the "Save" pill the bundle adds to each item sat
   in the top-right corner, over the title. It follows the texts instead, as a last row of the item. */
[data-vv-block^="BLK_002"] .vvb002-cat > a { padding-inline-end: 0; }
[data-vv-block^="BLK_002"] .vvb002-cat > a > .vv-save {
  position: static;
  justify-self: end;
  margin-block-start: var(--s8);
}

/* Story carousel (BLK_012, tables carousels/carousel_stories, admin → "Storie in home"): the columns and the
   mobile list items are real links now, not <div>s built by JavaScript. Same look as before. */
[data-vv-block="BLK_012"] a.col,
[data-vv-block="BLK_012"] a.it {
  color: inherit;
  text-decoration: none;
}
/* The bundle writes these widths as calc(100% - var(--b012-fascia)- var(--s24)* 2): without a space before the
   second minus the calc() is invalid and ignored, so label and text ran under the vertical band. Same value, valid. */
[data-vv-block="BLK_012"] .col .lab,
[data-vv-block="BLK_012"] .col .body {
  width: calc(100% - var(--b012-fascia) - var(--s24) * 2);
}
[data-vv-block="BLK_012"] a.col:focus-visible {
  outline: 2px solid var(--b012-accento);
  outline-offset: -2px;
}

/* ============================================================================
   BLK_007 (the chapter with the list: 36 pages) - rules restored from the component library.
   The bundle's minifier dropped the space in ":is([data-vv-block=BLK_007],[data-vv-block=BLK_017]) .vvb007-in",
   so every rule of the block asked the section itself to carry the inner class and none of them ever applied:
   rows, rail and icons came out unstyled, the icons at full page width. Same rules, correct selectors.
   ============================================================================ */
/* BLK_007.css */
/* ==========================================================================
   BLK_007 - IL CAPITOLO CON L'ELENCO       36 pagine

   AMBITO: vvb007

   Il capitolo sta su fondo inchiostro: qui il ruggine non si usa. La regola
   dell'oro della sezione 06 dice che su fondo scuro il testo dorato e --oro,
   e il ruggine su inchiostro si ferma a 2,7 misurato sui pixel.

   Due codici, un componente: BLK_017 e questo stesso capitolo con in piu la
   bussola nella colonna di lato. Il markup e identico - section.vvb007 con
   vvb007-in, -rail, -main, -row - e cambia solo il codice dichiarato. Le
   regole valgono per tutti e due, la bussola sta nel file di BLK_017.

   Una colonna di testo su fondo scuro con, di lato, una nota che resta
   attaccata mentre si scorre. Le righe dell'elenco scoprono la fonte al
   passaggio: la fonte c'e sempre nel markup, non si aggiunge al volo.

   Contratto:
     section.vvb007
       div.vvb007-in
         aside.vvb007-rail  > div.mk > i x3, p
         div.vvb007-main
           small.vvb007-occ
           h1 | h2
           p.vvb007-intro
           div.vvb007-row  > span.ext > svg, h3, span.src > em, b
           div.vvb007-piu, p.vvb007-quando, div.vvb007-body
   ========================================================================== */
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]){
  position: relative;
  padding-block: var(--ritmo);
  padding-inline: var(--margine);
  background: var(--inchiostro);
  color: var(--crema);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-in{
  position: relative;
  width: 100%;
  max-width: var(--c-standard);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s32);
  align-items: start;
}

/* --- la nota di lato ------------------------------------------------------ */
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail{
  display: grid;
  gap: var(--s12);
  align-content: start;
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail .mk{
  display: flex;
  gap: var(--s4);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail .mk i{
  display: block;
  width: var(--s16);
  height: var(--s4);
  background: var(--oro);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail .mk i:nth-child(2){ background: var(--oro); }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail .mk i:nth-child(3){ background: var(--crema); }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail p{
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-etichetta);
  line-height: var(--i-corpo);
  color: var(--tenue);
}

/* --- la colonna principale ------------------------------------------------ */
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-main{
  display: grid;
  gap: var(--s16);
  align-content: start;
  min-width: 0;
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-occ{
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  color: var(--oro);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-main h1,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-main h2{
  margin: 0;
  max-width: 16ch;
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: var(--i-display);
  letter-spacing: -.03em;
  color: var(--crema);
  text-wrap: balance;
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-intro,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-body p,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-quando{
  margin: 0;
  max-width: var(--c-testo);
  font-size: var(--t-corpo);
  line-height: var(--i-corpo);
  color: var(--crema);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-quando{
  font-size: var(--t-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --- le righe dell'elenco -------------------------------------------------- */
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row{
  position: relative;
  display: grid;
  gap: var(--s8);
  padding-block: var(--s16);
  border-block-end: var(--filo) solid var(--grigio);
  color: inherit;
  cursor: pointer;
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row h3{
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--i-h3);
  letter-spacing: -.015em;
  color: var(--crema);
  transition: color var(--lento) var(--curva),
              transform var(--lento) var(--curva);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row .ext{
  position: absolute;
  inset-block-start: var(--s16);
  inset-inline-end: 0;
  width: var(--s24);
  height: var(--s24);
  color: var(--oro);
  opacity: 0;
  transition: opacity var(--lento) var(--curva);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row .ext svg{ width: 100%; height: 100%; }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row .src{
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  opacity: 0;
  transition: opacity var(--lento) var(--curva);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row .src em{
  font-style: normal;
  margin-inline-end: var(--s8);
  color: var(--tenue);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row .src b{
  font-weight: 600;
  color: var(--oro);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:hover h3,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-visible h3,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-within h3{
  color: var(--oro);
  transform: translateX(var(--s24));
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:hover .ext,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:hover .src,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-visible .ext,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-visible .src,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-within .ext,
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-within .src{ opacity: 1; }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-row:focus-visible{
  outline: var(--tratto) solid var(--oro);
  outline-offset: var(--s4);
}
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-piu{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
}

/* --- da 1024: la nota torna di lato e resta attaccata --------------------- */
@media (min-width: 1024px){
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-in{
    grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
    gap: var(--s64);
  }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail{
    position: sticky;
    top: var(--s24);
    z-index: var(--z-appiccicato);
  }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-main{ max-width: var(--c-testo); }
}

/* la freccina in mezzo al testo: non va mai a capo da sola */
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-freccia{
  padding-inline: var(--s4);
  font-weight: 700;
  color: var(--accento);
  white-space: nowrap;
}

/* --- IL DISEGNO DEL PESCE: l'occhio ---------------------------------------
   Nel markup il cerchietto porta fill="var(--ink,#252733)": un token che non
   esiste piu, e quindi vale il ripiego, cioe l'inchiostro della tavolozza
   vecchia. Non sta nella tavolozza di oggi e il controllo dei colori resi lo
   segnala. Un attributo di presentazione perde contro qualunque regola, per
   cui si corregge qui e non nel markup: l'occhio prende il colore del
   disegno, come tutto il resto della serie.
   ------------------------------------------------------------------------ */
[data-vv-block="BLK_007"] .pesce circle,
[data-vv-block="BLK_007"] .leg circle,
[data-vv-block="BLK_007"] .bal circle{ fill: currentColor; }

/* --- BLK_007: the measurements of the specification sheet -----------------
   The restored rules above put the list in the standard text column, starting right after the
   side note. The component specification (BLK_007-paragraph-link-list, measured on a screen of
   1920) wants it narrower and further right: 657px wide, set 574px in from the content edge of a
   container 1560px wide with 2vw of side padding - which on a screen of 1920 starts the list at
   792px, well past the middle. The side note stays sticky at the left of that gap. The measures are
   written as percentages of the screen, as the specification does, and stop growing past 1920.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px){
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-in{
    max-width: 1560px;
    padding-inline: 2vw;
    grid-template-columns: min(29.9vw, 574px) min(34.2vw, 657px);
    gap: 0;
  }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-rail{
    width: min(13vw, 250px);
    margin-inline-start: min(1vw, 19px);
  }
:is([data-vv-block="BLK_007"],[data-vv-block="BLK_017"]) .vvb007-main{ max-width: none; }
}

/* BLK_021, the "stone" card: the bundle paints a background for t-forest and t-rust but not for
   t-stone, while the rule of the tinted cards turns every title white - so this one card was white
   on the cream of the page. It keeps the light ground and takes the ink of the palette, like the
   untinted cards, and gets its hairline border back so it still reads as a card. */
[data-vv-block="BLK_021"] .vvb021-card.t-stone h3 { color: var(--inchiostro); }
[data-vv-block="BLK_021"] .vvb021-card.tinta.t-stone { border-color: var(--linea); }

/* CMP_001 as the body of a page (the two stories built with it): the component was drawn for the
   "About" box inside a card, where its titles are small sans-serif labels in forest green. Used as
   the text of a whole page they read as labels, not as the serif headings of every other story. */
[data-vv-page-main] > .vvc001 .vvc001-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--i-h2);
  letter-spacing: -.02em;
  color: var(--inchiostro);
}

/* BLK_006 with five tiles: the markup declares the variant (class "vvb006-cinque") but the bundle
   only knows rows of four, so on a desktop screen the fifth tile dropped onto a line of its own. */
@media (min-width: 1024px){
[data-vv-block^="BLK_006"].vvb006-cinque .vvb006-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* "As told by" ribbon straight under a photo hero: the rule above takes the space under every
   ribbon away, which is right when the next block has to follow it closely, but here the sources
   ended up against the section below. Here the rhythm comes back. */
.vvb015 + [data-vv-block^="BLK_010"] { padding-block-end: var(--ritmo); }

/* The call to action at the foot of a ja2 story: its link carries class "cta", but the bundle only
   styles that class inside BLK_015 and BLK_016, so here it stayed plain text on the forest ground.
   Same pill as the hero, in cream on green. */
[data-vv-page-main] .vv-ja2-cta .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tocco);
  padding-inline: var(--s32);
  border: var(--filo) solid var(--crema);
  border-radius: var(--r-pastiglia);
  color: var(--bianco);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-etichetta);
  line-height: var(--i-etichetta);
  letter-spacing: var(--lettere-etichetta);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--veloce) var(--curva), color var(--veloce) var(--curva);
}

[data-vv-page-main] .vv-ja2-cta .cta:hover,
[data-vv-page-main] .vv-ja2-cta .cta:focus-visible {
  background: var(--crema);
  color: var(--verde);
}

/* the same panel had a margin under it but none above, so it sat against the last paragraph */
[data-vv-page-main] .vv-ja2-cta { margin-block-start: var(--ritmo); }

/* Breadcrumb of the cards: its wrapper has side padding but no vertical rhythm, so the line sat
   against the top of the page and against the card below it. */
[data-vv-page-main] .wrap > .t3-crumb { margin-block: var(--s32); }

/* The photograph of a card: its box takes the width the ratio gives it once the height is capped
   (840 of the 1136 available), so it sat against the left edge of the column, with no air above or
   below. Centred, with a rhythm on each side; the credit line follows it. */
[data-vv-page-main] .t3-gallery { margin-block: var(--ritmo); }
[data-vv-page-main] .t3-gallery .t3-shot {
  width: min(100%, calc(min(62vh, var(--t3-foto-alta)) * 3 / 2));
  margin-inline: auto;
}
[data-vv-page-main] .t3-gallery .t3-credit { text-align: center; }

/* The text box of a card ("About") started right against the "Know before you go" rows above it:
   the blocks of this template carry no vertical rhythm of their own. */
[data-vv-page-main] .t3-body,
[data-vv-page-main] .t3-body2 { margin-block-start: var(--ritmo); }

/* The map of a card, drawn around its coordinates: same box as the placeholder it replaces. */
[data-vv-page-main] .t3-map .t3-osm {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 0;
  border-radius: var(--r12);
  background: var(--sabbia);
}

/* The column of a card ends right on the footer: a rhythm of air under the last block. */
[data-vv-page-main] > .wrap:last-child { padding-block-end: var(--ritmo); }

/* A card without coordinates draws no map: only the address line is left, with no grey box
   above it, so the panel does not take room to say nothing. */
[data-vv-page-main] .t3-map:not(:has(iframe, img, .slot)) { gap: 0; }

/* The blocks of a card carry no rhythm of their own, so they sat against one another - and with
   no photo at all the "Know before you go" rows touched the head of the card. One rhythm above
   each block; the margins collapse with the one under the photo, so nothing doubles. */
[data-vv-page-main] .t3-know,
[data-vv-page-main] .t3-extra-gallery,
[data-vv-page-main] .t3-map,
[data-vv-page-main] .t3-near,
[data-vv-page-main] .vv-place-feedback { margin-block-start: var(--ritmo); }

/* The "Know something we don't?" band of a card (and the "place alert" that shares its shape): the
   bundle keeps the box at the width of a text column, which left it short and hugging the left edge.
   It takes the width of the card's column, like every block above it. */
[data-vv-page-main] .vv-place-feedback-inline,
[data-vv-page-main] .vv-place-alert { max-width: none; margin-inline: auto; }

/* The caption under a photo of a card is a credit line, not a piece of the text: it reads at the
   size of a footnote, under the photo it belongs to. */
[data-vv-page-main] .t3-credit,
[data-vv-page-main] .t3-extra-gallery figcaption {
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--tenue);
}

/* The map of a card arrives from OpenStreetMap: while it travels, a turning ring holds its place
   in the middle of the panel. The frame lies over it, so the map covers the ring by itself, and
   vv-map.js stops it once the frame has painted. */
[data-vv-page-main] .t3-osm-box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--sabbia);
}

[data-vv-page-main] .t3-osm-box .t3-osm {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

[data-vv-page-main] .t3-osm-spin {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--s32);
  height: var(--s32);
  margin: calc(var(--s32) / -2) 0 0 calc(var(--s32) / -2);
  border: var(--tratto) solid var(--linea);
  border-block-start-color: var(--verde);
  border-radius: 50%;
  animation: vv-map-spin 900ms linear infinite;
}

[data-vv-page-main] .t3-osm-box.is-ready .t3-osm-spin { display: none; }

@keyframes vv-map-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  [data-vv-page-main] .t3-osm-spin { animation: none; border-block-start-color: var(--linea); }
}

/* The sticky header stays above everything in the page while scrolling: the bundle gives it the same level (10) as
   the commands and the "Save" pill of the cards, which come later in the page and so slid over it. Still below the
   drawers and dialogs (100, 1000). */
[data-vv-component="Header"] { z-index: 50; }

/* The voices of the menu are spaced by the gap only: the touch rule gives every link a minimum width of 44px, and
   "Eat", shorter than that, kept the rest as a blank after its text, before "Places". The height stays 44px. */
[data-vv-component="Header"] .vv-nav a { min-width: 0; }

/* The menu of the telephone without rules: the voices are already separated by their own spacing. */
body.vv-menu-aperto [data-vv-component="Header"] .vv-nav a { border-block-end: 0; }

/* The hero of the home page: its column is the text one (680px), which broke the three lines of the
   title in the wrong places. On a wide screen it takes 720. */
@media (min-width: 768px) {
  body[data-vv-page="index.html"] [data-vv-block="BLK_015"] .vvb015-in { max-width: 720px; }
}

/* Story carousel (BLK_012) on the telephone: the five rows were all the same forest green. Each one
   now wears the colour its column gives the whole block when the mouse passes over it on a wide
   screen - the pairing of ground and text comes from the same three colours of the story, so the
   contrast is the one the design chose. */
[data-vv-block="BLK_012"] .list .it,
[data-vv-block="BLK_012"] .list .it:hover,
[data-vv-block="BLK_012"] .list .it:focus-visible {
  background: var(--it-bg, var(--verde));
  color: var(--it-fg, var(--crema));
}

[data-vv-block="BLK_012"] .list .it .bar { background: var(--it-acc, var(--oro)); }
[data-vv-block="BLK_012"] .list .it p { color: inherit; opacity: .82; }
[data-vv-block="BLK_012"] .list .it .go { color: var(--it-acc, var(--oro)); }

/* Pastel version: instead of the full colour of the story, a third of its highlight over the cream
   of the site, with the text in ink. The tint is computed from the same colour, so a change in the
   admin carries through. Where color-mix is not understood the rows keep the strong colours above,
   which stay readable: never a pale text on a pale ground. */
@supports (background: color-mix(in srgb, red 50%, white)) {
  [data-vv-block="BLK_012"] .list .it,
  [data-vv-block="BLK_012"] .list .it:hover,
  [data-vv-block="BLK_012"] .list .it:focus-visible {
    background: color-mix(in srgb, var(--it-acc, var(--oro)) 32%, var(--crema));
    color: var(--inchiostro);
  }
  [data-vv-block="BLK_012"] .list .it .bar {
    background: color-mix(in srgb, var(--it-acc, var(--oro)) 55%, var(--inchiostro));
  }
  [data-vv-block="BLK_012"] .list .it .go,
  [data-vv-block="BLK_012"] .list .it p {
    color: color-mix(in srgb, var(--it-bg, var(--verde)) 78%, var(--inchiostro));
  }
  [data-vv-block="BLK_012"] .list .it p { opacity: 1; }
}

/* The pieces that move under the text on a telephone (vv-card-order.js) keep the rhythm of the
   blocks they now sit among. */
[data-vv-page-main] .t3-dopo-testo {
  display: grid;
  gap: var(--s24);
  margin-block-start: var(--ritmo);
}

[data-vv-page-main] .t3-dopo-testo .t3-know { margin-block-start: 0; }

/* "Source and current information" at the end of a card: a hairline above, a small spaced heading,
   one source per line in a quiet grey, the title of the work in italics. */
[data-vv-page-main] .t3-sources {
  margin-block-start: var(--ritmo);
  padding-block-start: var(--s24);
  border-block-start: 1px solid var(--linea);
}
[data-vv-page-main] .t3-sources h2 {
  margin: 0 0 var(--s16);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
[data-vv-page-main] .t3-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-vv-page-main] .t3-sources li {
  margin: 0 0 var(--s8);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--testo-tenue);
}
[data-vv-page-main] .t3-sources cite { font-style: italic; }

/* v2 · "Good to know" in the body of a place: the heading and its text in a sand box (vv_good_to_know() in app/site.php) */
[data-vv-page-main] .t3-good-to-know {
  display: grid;
  gap: var(--s16);
  max-width: var(--c-testo);
  padding: var(--s24);
  border-radius: var(--r12);
  background: var(--sabbia);
}
[data-vv-page-main] .t3-good-to-know > * { margin: 0; }

/* ---- Journal (v2): the colour of a card follows its chapter (data-vv-chapter, from vv_journal_card), on /journal/
   ("Latest" mixes the chapters) and on the page of each chapter. Same colours the hand-written journal had. ---- */
.vv-journal-card[data-vv-chapter="origins"]{background:color-mix(in srgb, var(--m-pigafetta-acceso) 18%, var(--crema));color:var(--inchiostro)}
.vv-journal-card[data-vv-chapter="origins"] small,.vv-journal-card[data-vv-chapter="origins"] span{color:var(--m-pigafetta)}
.vv-journal-card[data-vv-chapter="pop-culture"]{background:color-mix(in srgb, var(--m-giappone-acceso) 18%, var(--crema));color:var(--inchiostro)}
.vv-journal-card[data-vv-chapter="pop-culture"] small,.vv-journal-card[data-vv-chapter="pop-culture"] span{color:var(--m-giappone)}
.vv-journal-card[data-vv-chapter="food-faraway"]{background:color-mix(in srgb, var(--m-food-acceso) 18%, var(--crema));color:var(--inchiostro)}
.vv-journal-card[data-vv-chapter="food-faraway"] small,.vv-journal-card[data-vv-chapter="food-faraway"] span{color:var(--m-food)}
.vv-journal-card[data-vv-chapter="objects"]{background:color-mix(in srgb, var(--m-made-acceso) 18%, var(--crema));color:var(--inchiostro)}
.vv-journal-card[data-vv-chapter="objects"] small,.vv-journal-card[data-vv-chapter="objects"] span{color:var(--m-made)}
.vv-journal-card[data-vv-chapter="science-nature"]{background:color-mix(in srgb, var(--m-stargazing-acceso) 18%, var(--crema));color:var(--inchiostro)}
.vv-journal-card[data-vv-chapter="science-nature"] small,.vv-journal-card[data-vv-chapter="science-nature"] span{color:var(--m-stargazing)}
.vv-journal-card[data-vv-chapter] strong{color:var(--inchiostro)}
.vv-journal-edit,.vv-journal-edit-head,.vv-journal-grid{min-width:0;max-width:100%}
.vv-journal-edit-head h2 a{color:inherit;text-decoration:none}
@media (min-width:768px){
.vv-journal-edit .vv-journal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:stretch}
[data-vv-page-main] .vv-journal-card[data-vv-chapter]{height:100%}
.vv-journal-card[data-vv-chapter] span{margin-block-start:auto}
.vv-journal-edit .vv-journal-grid:has(> .vv-journal-card:only-child){grid-template-columns:minmax(0,1fr)}
}
[data-vv-page-main] .vv-journal-card[data-vv-chapter]{overflow:hidden}
[data-vv-page-main] .vv-journal-card[data-vv-chapter]:has(img){grid-template-columns:minmax(0,1fr);grid-template-rows:[foto] auto [occhiello] auto [titolo] 1fr [azione] auto}
[data-vv-page-main] .vv-journal-card[data-vv-chapter] img{grid-row:foto;grid-column:1 / -1;display:block;width:calc(100% + 48px);margin:-24px -24px 8px;height:180px;object-fit:cover}
/* /journal/: each chapter (and LATEST) stands clear of the cards of the one before */
[data-vv-journal-index] .vv-journal-edit + .vv-journal-edit{margin-block-start:var(--s64)}

/* /places/: the link under the introduction that jumps to the cards of the hubs */
.pl-intro .pl-jump,.vv-hubs-intro .pl-jump{margin-block-start:1.25em;font-size:.8rem;letter-spacing:.12em;font-weight:600}
.pl-intro .pl-jump a,.vv-hubs-intro .pl-jump a{color:inherit;text-decoration:none;border-block-end:1px solid currentColor;padding-block-end:2px}
.pl-intro .pl-jump a:hover,.vv-hubs-intro .pl-jump a:hover{opacity:.7}
#places-by-interest,#night-activities-by-interest,#food-by-interest{scroll-margin-block-start:96px}

/* /places/, /eat/, /night/: hub cards with a dark green 2px border and a button in place of the introduction of the hub */
[data-vv-page-main] .pl-hub-boxed .pl-hub-card { border: 2px solid var(--verde); }
[data-vv-page-main] .pl-hub-boxed .pl-hub-go {
  display: inline-flex; align-items: center; justify-self: start; margin-block-start: var(--s8);
  min-height: var(--tocco); padding-inline: var(--s24); border-radius: var(--r-pastiglia);
  background: var(--verde); color: var(--crema); font-family: var(--sans); font-weight: 700;
  font-size: var(--t-etichetta); letter-spacing: var(--lettere-etichetta); text-transform: uppercase;
}

/* /night/, /eat/: the introduction between the title of the hub cards and the cards */
.vv-hubs-intro{display:grid;gap:var(--s8);width:100%;max-width:var(--c-standard);margin-inline:auto;margin-block-end:var(--s48);padding-inline:var(--margine)}
.vv-hubs-intro .pl-jump{margin-block-start:var(--s8)}
[data-vv-page-main] #night-hubs-title,[data-vv-page-main] #eat-stories-title{padding-block-end:var(--s8)}

/* My Vicenza (assets/js/vv-myvicenza.js): the box that asks to join The Next Drop at the third saved place, and the
   field "Also send it to a friend" of the subscribers in "Send my Vicenza" */
.vv-join{position:fixed;inset:0;z-index:calc(var(--z-soprapagina) + 20);display:grid;place-items:center;padding:var(--s16);background:rgba(12,18,14,.5)}
.vv-join[hidden]{display:none}
.vv-join-in{position:relative;display:grid;gap:var(--s12);width:100%;max-width:440px;padding:var(--s32) var(--s24) var(--s24);border-radius:var(--r18);background:var(--crema);color:var(--inchiostro);box-shadow:var(--ombra-strato)}
.vv-join-in h2{margin:0;padding-inline-end:var(--s32);font-family:var(--serif);font-size:var(--t-h3);line-height:var(--i-h3);color:var(--verde)}
.vv-join-in p{margin:0;font-size:var(--t-piccolo);line-height:var(--i-piccolo)}
.vv-join-in form{display:grid;gap:var(--s12)}
.vv-join-in input[type="email"]{width:100%;min-height:var(--tocco);padding-inline:var(--s16);border:var(--filo) solid var(--linea);border-radius:var(--r-pastiglia);background:var(--bianco);color:var(--inchiostro);font-size:var(--t-corpo)}
.vv-join-consent{display:flex;gap:var(--s8);align-items:flex-start;font-size:var(--t-etichetta);line-height:var(--i-piccolo);color:var(--grigio)}
.vv-join-consent input{margin-block-start:3px;flex:0 0 auto}
.vv-join-consent a{color:inherit}
.vv-join-go{min-height:var(--tocco);border:0;border-radius:var(--r-pastiglia);background:var(--verde);color:var(--crema);font-weight:700;font-size:var(--t-etichetta);letter-spacing:var(--lettere-etichetta);text-transform:uppercase;cursor:pointer}
.vv-join-go:hover,.vv-join-go:focus-visible{background:var(--inchiostro)}
.vv-join-go:disabled{opacity:.6}
.vv-join-msg:empty{display:none}
.vv-join-close{position:absolute;inset-block-start:var(--s12);inset-inline-end:var(--s12);width:var(--tocco);height:var(--tocco);border:0;border-radius:50%;background:transparent;color:var(--inchiostro);font-size:26px;line-height:1;cursor:pointer}
.vv-share-to{display:grid;gap:var(--s4);font-size:var(--t-etichetta);color:var(--grigio)}

/* Share bar (assets/js/vv-share.js): round buttons for the device's share sheet, Facebook, WhatsApp, Pinterest,
   email and copy link, in place of the old pair "Share" + "Email" */
.vv-sharebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8)}
.pl-share.vv-sharebar{display:none}
.vv-sharebar .vv-sharebar-lab{margin-inline-end:var(--s4);font-family:var(--sans);font-weight:700;font-size:var(--t-etichetta);letter-spacing:var(--lettere-etichetta);text-transform:uppercase;color:var(--grigio)}
html body .vv-sharebar .vv-sharebar-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;min-width:0;padding:0;border:var(--filo) solid var(--linea);border-radius:50%;background:transparent;color:var(--verde);text-decoration:none;cursor:pointer;transition:background-color var(--veloce) var(--curva),color var(--veloce) var(--curva),border-color var(--veloce) var(--curva)}
html body .vv-sharebar .vv-sharebar-btn:hover,html body .vv-sharebar .vv-sharebar-btn:focus-visible{background:var(--verde);border-color:var(--verde);color:var(--crema)}
html body .vv-sharebar .vv-sharebar-btn svg{display:block;width:18px;height:18px}
.t3-acts{align-items:center}
.vv-sharebar.vv-sharebar-acts{margin-inline-start:auto}