/* AFG site — reads the brand tokens; everything here is layout and components.
 * Revised 10 September 2026: one twelve-column grid, one bar height, one focus ring,
 * the page-level components folded in, no inline styles in the pages. */
@import url("brand/tokens.css");
/* the site's bar is taller than the token's 54 px, so the logo can grow (S26-01, 2 October); the text in it does not */
:root { --bar-h: 66px; }

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t1); line-height: 1.5; overflow-x: clip; font-feature-settings: "kern" 1, "liga" 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
[id] { scroll-margin-top: calc(var(--bar-space) + var(--s3)); }
[hidden] { display: none !important; }

/* ---- type: the steps carry their own leading and tracking ------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-display); text-wrap: balance; }
.open h1, .hero h1, .hd h1, .facts .v { font-weight: var(--w-light); }   /* the weight axis carries the hierarchy: light at the top, Regular in the sections, firmer labels */
h3 { font-size: var(--t4); line-height: 1.2; letter-spacing: var(--track-sm); }
h4 { font-size: var(--t3); line-height: 1.2; letter-spacing: var(--track-sm); }
.open h1 { font-size: var(--huge); line-height: 1; letter-spacing: var(--track); }
.hero h1 { font-size: var(--claim); line-height: 1.02; letter-spacing: var(--track); }   /* a step under the page titles: the slogan read too large (Andrea, 12 September) */
.stmt p, .step h2, .panel, .facts .v, .pk .price, .hd h1 { font-size: var(--big); line-height: 1.04; letter-spacing: var(--track); }
.s .side h2, .pk h2 { font-size: var(--mid); line-height: 1.1; letter-spacing: var(--track-mid); }
p { margin: 0 0 var(--s3); max-width: var(--measure); } p:last-child { margin-bottom: 0; }
.lead { font-size: var(--t2); line-height: 1.45; color: var(--ink-2); }
.cap { font-size: var(--t0); line-height: 1.45; color: var(--mute); }
.label { display: block; font-size: var(--t0); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); font-weight: var(--w-label); }
.idx { font-size: var(--t0); color: var(--mute); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.grey { color: var(--mute); } .teal { color: var(--verde); }
.lnk { display: inline-block; font-weight: var(--w-label); color: var(--verde-testo); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .lnk:hover { text-decoration: underline; } } .lnk:focus-visible { text-decoration: underline; }
.lnk.plain { color: var(--ink); }
.note { font-size: var(--t0); color: var(--verde-testo); background: var(--note-bg); padding: 6px 10px; display: inline-block; }
.open .note { margin-top: var(--s4); } .side .note { margin-top: var(--s3); }

/* ---- the button: the one filled control, and giallo's one job on a light ground (ink on giallo, 18.8:1) ---- */
.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); background: var(--giallo); color: var(--ink); font: inherit; font-weight: var(--w-label); border: 0; border-radius: 0; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--giallo); } }
.btn:disabled { background: var(--bg-2); color: var(--mute); cursor: default; }

/* ---- the grid: twelve columns, one gap, every component on it -------------- */
.s, .step, .pk, .hd, .foot, .row2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.s > .side { grid-column: span 3; } .s > .side ~ * { grid-column: span 9; }
.s > :first-child:not(.side) { grid-column: 1 / -1; }
.step > :first-child { grid-column: span 3; } .step > .body { grid-column: span 9; }
.pk > :nth-child(1) { grid-column: span 3; } .pk > :nth-child(2) { grid-column: span 6; } .pk > :nth-child(3) { grid-column: span 3; }
.hd > * { grid-column: span 6; }
.row2 > :first-child { grid-column: span 3; } .row2 > p, .row2 > div:not(.meta) { grid-column: span 6; } .row2 > .price, .row2 > .meta { grid-column: span 3; text-align: right; }
@media (max-width: 860px) {
  .s > *, .step > *, .pk > *, .hd > *, .row2 > * { grid-column: 1 / -1 !important; }
  .row2 > .price, .row2 > .meta { text-align: left; }
}

/* ---- the bar: one height, one line, folds behind Menu under 1100, the CTA joins the menu under 640 ---- */
/* The row fits on one line, logo at full size, from 1062 px in English and 1072 in Italian (measured
   15 September with the short labels, links at 400); the fold at 1100 leaves it room. The long labels
   at 500 needed about 1270, so they wrapped above the fold. A longer label moves that point, and
   tools/check.mjs fails a bar that wraps, collides or squeezes between 1000 and 1600. */
.bar { position: sticky; top: 0; z-index: 10; height: var(--bar-h); margin: var(--bar-top) 10px 0; padding: 0 var(--s4); display: flex; align-items: center; gap: var(--s4); background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-radius: var(--radius); font-size: var(--t1); font-weight: 400; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.bar > a, .bar .r { flex-shrink: 0; }                                   /* only the space between may give: a nowrap row squeezed the logo to 70 px at 1000 */
.bar img { height: 50px; width: auto; margin-left: -6px; }               /* the mark has to read, not only the wordmark (Andrea, 12 September); 50 px in a taller bar since 2 October (S26-01), the lockup's own padding pulled into the bar's margin */
.bar ul { display: flex; gap: 20px; list-style: none; margin: 0 auto; padding: 0; }        /* 20, off the 8 px scale: 24 costs the row 24 px and the fold point with it */
.bar li a { display: inline-block; padding: 12px 0; font-weight: 400; white-space: nowrap; }   /* Regular and on one line (15 September); the button keeps its weight. 48 px tall targets inside the 54 px bar */
.bar li a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 11px; }
.bar .r { display: flex; align-items: center; gap: var(--s4); }
.bar .btn { min-height: 36px; padding: 0 var(--s3); }                                          /* the persistent action is the button, on both glasses */
.bar .cta[aria-disabled="true"] { background: var(--bg-2); color: var(--mute); cursor: default; }
.bar .lang { display: flex; gap: var(--s2); font-weight: 400; white-space: nowrap; } .bar .lang :where(a, span) { color: var(--mute); padding: 12px 0; } .bar .lang [aria-current] { color: var(--ink); }   /* a language not yet generated is a span: it reads as the link it will become */
.bar .menu { display: none; font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 12px 0; }
.bar .logo-w { display: none; }
.bar ul .menu-only { display: none; }
.bar.no-trans, .bar.no-trans * { transition: none !important; }
.bar.dark { background: var(--glass-dark); color: var(--on-dark); }
.bar.dark .lang :where(a, span) { color: var(--on-dark-3); } .bar.dark .lang [aria-current] { color: var(--on-dark); }
.bar.dark .logo-b { display: none; } .bar.dark .logo-w { display: block; }
@media (max-width: 1099px) {
  .bar ul { display: none; }
  .bar .r { margin-left: auto; }
  .bar .menu { display: inline-block; }
  .bar.is-open ul { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: var(--s2) var(--s4) var(--s3); background: var(--bg); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }   /* solid: the page must not show through the open list */
  .bar.dark.is-open ul { background: var(--neg); border-top-color: var(--neg-line); }
  .bar.is-open ul li a { display: block; padding: 10px 0; font-size: var(--t2); font-weight: 400; }
  .bar.is-open ul li:not(.menu-lang) a[aria-current] { border: 0; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 640px) {
  .bar .r .cta, .bar .r .lang { display: none; }
  .bar.is-open ul .menu-only { display: block; }
  .bar.is-open ul .menu-cta { padding: var(--s2) 0; } .bar.is-open ul .menu-cta .btn { display: inline-flex; font-size: var(--t1); font-weight: var(--w-label); padding: 0 var(--s4); min-height: 44px; }
  .bar.is-open ul .menu-lang { display: flex; gap: var(--s4); padding-top: var(--s2); }
  .bar.is-open ul .menu-lang :where(a, span) { color: var(--mute); } .bar.is-open ul .menu-lang [aria-current] { color: inherit; border: 0; }   /* the language is marked by colour, as in the bar */
}

/* ---- openings ------------------------------------------------------------ */
.hero { position: relative; margin-top: calc(-1 * var(--bar-space)); height: 92vh; min-height: 560px; overflow: hidden; background: var(--neg); }
.hero img, .hero video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.hero .t { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s7); z-index: 1; }   /* lower left, on the grid's left edge (15 September) */
.hero h1 { color: var(--on-dark); margin: 0; max-width: 22ch; }                                   /* plain white: the frame must be dark under it (mean luminance ≤ .35), or it takes the scrim */
.hero.scrim::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; background: linear-gradient(180deg, transparent, var(--scrim)); pointer-events: none; }
.hero .sub { color: var(--on-dark-2); font-size: var(--t2); line-height: 1.4; margin: var(--s3) 0 0; max-width: 44ch; text-wrap: balance; }   /* the long claim stays as the subtitle (NR48 06:59) */
.hero .cap { position: absolute; left: 0; right: 0; bottom: var(--s4); text-align: center; color: var(--on-dark-2); }
@media (max-width: 640px) { .hero .t { bottom: var(--s6); } }
.open { padding: var(--s8) var(--gutter) var(--s7); }                     /* inner pages open with type */
.open.tight { padding-bottom: var(--s5); }
/* the compact opening: a title and its lead on one row, for a page whose tool has to sit high
   (the configurator; Andrea, 12 September: the header ate three quarters of the screen) */
.open.compact { padding: var(--s5) var(--gutter) var(--s4); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
.open.compact .label { grid-column: 1 / -1; margin-bottom: var(--s2); }
.open.compact h1 { grid-column: span 5; font-size: var(--mid); line-height: 1.1; letter-spacing: var(--track-mid); max-width: none; margin-bottom: 0; }
.open.compact .lead { grid-column: span 7; font-size: var(--t1); }
.open.compact .note { grid-column: 6 / -1; margin-top: var(--s3); }
@media (max-width: 860px) { .open.compact > * { grid-column: 1 / -1 !important; } .open.compact .lead { margin-top: var(--s3); } }
.open .label { margin-bottom: var(--s3); }
.open h1 { max-width: 18ch; margin-bottom: var(--s5); }
.open .lead { max-width: 56ch; }
.back { margin: 0; padding: var(--s5) var(--gutter) 0; font-size: var(--t0); }
.back + .open { padding-top: var(--s5); }
.open:has(+ nav.tabs) { padding-bottom: var(--s5); }   /* a document page: the text starts sooner */ .back + .band { padding-top: var(--s5); }
.stmt { padding: var(--s8) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.stmt p { grid-column: 4 / -1; max-width: 28ch; margin: 0; }   /* on the content column's left edge, as the sections below */
@media (max-width: 860px) { .stmt p { grid-column: 1 / -1; } }

/* ---- sections ---------------------------------------------------------- */
.s { padding: var(--s7) var(--gutter); border-top: 1px solid var(--line); row-gap: var(--s5); align-items: start; }
.s.tight { padding-top: var(--s6); padding-bottom: var(--s6); }
.s.flush { border-top: 0; padding-top: 0; }
.open + .s:not(.neg) { border-top: 0; padding-top: 0; }   /* the opening's own space is the break; a rule under it doubled it */
nav.tabs + .s { padding-top: var(--s6); }
.s.intro { padding-bottom: 0; }
.s .side .label + h2 { margin-top: var(--s2); }   /* a heading with no label above it starts on the section's top edge */
.s .side .cap { margin-top: var(--s3); max-width: 30ch; }
.s .side .lnk { margin-top: var(--s4); }
.s .side.sticky { position: sticky; top: calc(var(--bar-space) + var(--s3)); }
@media (max-width: 860px) { .s .side.sticky { position: static; } }
.s .grid { padding: 0; }
.s.neg { background: var(--neg); color: var(--on-dark); border-top: 0; }
.s.neg .side h2 { color: var(--on-dark); } .s.neg .label { color: var(--neg-mute); } .s.neg .cap, .s.neg p { color: var(--neg-text); }
.s.neg .facts .v { color: var(--giallo); }
.cols { display: grid; gap: var(--s5) var(--gap); } .cols > * { min-width: 0; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .c3, .c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c2, .c3, .c4 { grid-template-columns: minmax(0, 1fr); } }
.cols h4 { margin-bottom: var(--s2); font-size: var(--t2); }
.cols p { font-size: var(--t05); color: var(--ink-2); }
.cols .label { margin-bottom: var(--s2); } .cols p.cap { margin-top: var(--s3); }
.pic { background: var(--bg-2); overflow: hidden; } .pic img { width: 100%; height: 100%; object-fit: cover; }
.pic.r43 { aspect-ratio: 4 / 3; } .pic.r11 { aspect-ratio: 1 / 1; } .pic.r219 { aspect-ratio: 21 / 9; }   /* the plant, the record, the band */
.band { padding: 0 var(--gutter); }
.pic.empty { display: grid; place-items: center; } .pic.empty span { font-size: var(--t0); color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; }   /* a photograph AFG have yet to take */
table { border-collapse: collapse; width: 100%; font-size: var(--t05); }
th, td { text-align: left; padding: 10px var(--s3) 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: var(--w-label); }
tr:first-child th { font-size: var(--t0); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
td.r, th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.kv td:first-child { color: var(--mute); width: 34%; }                 /* key–value tables: packs, the project, the summary */
.tscroll { overflow-x: auto; } @media (max-width: 600px) { .tscroll > table { min-width: 560px; } }
ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t05); color: var(--ink-2); } ul.plain li b { color: var(--ink); font-weight: var(--w-label); }
ul.plain li > a { display: block; padding: 5px 0; margin: -5px 0; }   /* 14px line box -> 24px hit area, height unchanged */
ul.plain li > a.lnk { display: inline; padding: 0; margin: 0; }   /* several links in one item stay in the line, as in the documents list */
ul.plain.kv li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s3); align-items: baseline; } ul.plain.kv li span { color: var(--ink-2); }   /* the value beside its key, not at the far edge */
@media (max-width: 560px) { ul.plain.kv li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
ol.plain { counter-reset: n; } ol.plain li { counter-increment: n; display: grid; grid-template-columns: 2.5em minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t05); color: var(--ink-2); }
ol.plain li::before { content: "/" counter(n, decimal-leading-zero); color: var(--mute); font-variant-numeric: tabular-nums; } ol.plain li b { color: var(--ink); font-weight: var(--w-label); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
@media (max-width: 700px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts .v { line-height: 1; } .facts .k { margin-top: var(--s2); } .facts + p { margin-top: var(--s5); }

/* ---- the list ----------------------------------------------------------- */
/* The home's ten steps, a section like the others: title and subtitle in the sidebar, the steps on the
   right as an index after the process page's own, number, name and one line (Andrea, 10 October:
   smaller, the way that index is; 15 px, the size of text read in lists). */
.list .steps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; }
.list .row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; border-top: 1px solid var(--line); padding: 12px 0; }
.list .row:last-child { border-bottom: 1px solid var(--line); }
.list .idx { grid-column: 1 / span 3; grid-row: 1; }
.list .row h2 { grid-column: 1 / span 3; grid-row: 1; padding-left: 44px; font-size: var(--t05); font-weight: var(--w-display); line-height: 1.35; letter-spacing: 0; transition: color var(--dur) var(--ease); }
.list .row p { grid-column: 4 / -1; grid-row: 1; margin: 0; font-size: var(--t05); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
@media (hover: hover) { .list a.row:hover h2 { color: var(--verde); } } .list a.row:focus-visible h2 { color: var(--verde); }
@media (max-width: 860px) { .list .steps { grid-template-columns: minmax(0, 1fr); } .list :is(.idx, .row h2, .row p) { grid-column: 1 / -1; } .list .row p { grid-row: 2; margin-top: 2px; padding-left: 44px; } }

/* ---- the steps (come lavoriamo) --------------------------------------------- */
.step { padding: var(--s7) var(--gutter); border-top: 1px solid var(--line); row-gap: var(--s5); }
.step h2 { line-height: 1; margin: var(--s2) 0 var(--s3); overflow-wrap: anywhere; }
.step .who { font-size: var(--t0); font-weight: var(--w-label); }
.step .who.out { color: var(--mute); }
.step .body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--gap); align-items: start; }
@media (max-width: 700px) { .step .body { grid-template-columns: minmax(0, 1fr); } }
.step .body .pic { aspect-ratio: 4 / 3; }
.step .body p { font-size: var(--t1); color: var(--ink-2); }
.step .body ul.plain { margin-top: var(--s3); }
.toc { list-style: none; margin: var(--s3) 0 0; padding: 0; } .toc li { padding: 6px 0; font-size: var(--t0); color: var(--ink-2); } @media (hover: hover) { .toc li a:hover { color: var(--verde-testo); } } .toc li a:focus-visible { color: var(--verde-testo); }
.toc li b { color: var(--mute); font-weight: 400; margin-right: 8px; font-variant-numeric: tabular-nums; }
.toc + .cap { margin-top: var(--s4); }

/* ---- ordering routes and collapsible packs ---------------------------------- */
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { display: block; font-size: var(--t0); color: var(--mute); letter-spacing: 0; margin-top: var(--s2); }
.price.tbd { color: var(--mute); white-space: normal; }
.route-grid, .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--gap); }
.route, .resource-card { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--s3); display: flex; flex-direction: column; align-items: flex-start; }
.route h3, .resource-card h3 { margin: var(--s3) 0; font-size: var(--t3); }
.route p, .resource-card p { color: var(--ink-2); font-size: var(--t05); }
.route .lnk, .resource-card > .lnk { margin-top: auto; padding-top: var(--s4); }
@media (hover: hover) { .route:hover h3, .resource-card:hover h3 { color: var(--verde-testo); } } .route:focus-visible h3, .resource-card:focus-visible h3 { color: var(--verde-testo); }
.resource-card { min-height: 260px; }
.resource-card ul { width: 100%; margin-top: auto; }
.resource-card ul .note { margin-left: var(--s2); }
@media (max-width: 760px) {
  .route-grid, .resource-grid { grid-template-columns: minmax(0, 1fr); }
  .route, .resource-card { min-height: 0; padding-bottom: var(--s5); }
}

.faq-group + .faq-group { margin-top: var(--s8); }
.faq-group > h2 { font-size: var(--mid); line-height: 1.1; letter-spacing: var(--track-mid); margin: var(--s2) 0 var(--s5); }
.faq-list { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; gap: var(--s3); align-items: center; padding: var(--s4) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--t2); line-height: 1.25; }
.faq summary i { justify-self: end; font-size: var(--t4); line-height: 1; font-style: normal; font-weight: 300; transition: transform var(--dur) var(--ease); }
.faq[open] summary i { transform: rotate(45deg); }
@media (hover: hover) { .faq summary:hover h3 { color: var(--verde-testo); } } .faq summary:focus-visible h3 { color: var(--verde-testo); }
.faq > div { padding: 0 40px var(--s5) 58px; }
.faq > div p { color: var(--ink-2); }
@media (max-width: 560px) {
  .faq summary { grid-template-columns: 30px minmax(0, 1fr) 20px; gap: var(--s2); }
  .faq > div { padding-left: 38px; padding-right: 28px; }
}
.tpl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--gap); margin-top: var(--s3); }
@media (max-width: 700px) { .tpl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tpl .sh { aspect-ratio: 1 / 1; background: var(--bg-2); position: relative; margin-bottom: var(--s2); }
.tpl .sh::after { content: ""; position: absolute; inset: 10%; border: 1px dashed var(--line-2); }
.tpl .sh.wide::after { inset: 10% 5%; } .tpl .sh.round::after { border-radius: 50%; inset: 22%; }
.tpl .t { font-size: var(--t0); font-weight: var(--w-label); } .tpl .c { font-size: var(--t0); color: var(--mute); }
/* the logo download, on the templates page: the lockup on the sunken surface the empty
   template slots use, so the two blocks read as one family */
.logo-dl .sh { aspect-ratio: 3 / 2; background: var(--bg-2); padding: var(--s5) var(--s6); margin-bottom: var(--s2); }
.logo-dl .sh img { width: 100%; height: 100%; object-fit: contain; }        /* one box for both lockups; the SVG scales inside it */
.logo-dl .t { font-size: var(--t0); font-weight: var(--w-label); } .logo-dl .c { font-size: var(--t0); color: var(--mute); }

/* ---- panels ------------------------------------------------------------- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--gap); padding: var(--s8) var(--gutter); }
.s:not(.neg) + .panels { padding-top: 0; }
@media (max-width: 800px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel { min-height: 180px; font-size: var(--mid); padding: var(--s5); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); line-height: 1; }
.panel.a { background: var(--verde); color: var(--giallo); } .panel.b { background: var(--neg); color: var(--giallo); }
.panel span { max-width: 12ch; text-wrap: balance; } .panel i { font-style: normal; }
.panel.sm { min-height: 160px; font-size: var(--t4); }

/* ---- grids of things ----------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--gap); padding: 0 var(--gutter) var(--s8); }
.grid.project-grid { padding-top: var(--s6); }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 960px) { .grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .grid.three { grid-template-columns: minmax(0, 1fr); } }
.card .pic { aspect-ratio: 1 / 1; margin-bottom: var(--s2); }
.card .t { font-size: var(--t0); font-weight: var(--w-label); transition: color var(--dur) var(--ease); } .card .c { font-size: var(--t0); color: var(--mute); }
@media (hover: hover) { .card:hover .t { color: var(--verde-testo); } } .card:focus-visible .t { color: var(--verde-testo); }
.grid.merch { padding-top: var(--s7); }                                                   /* products: the render, name, spec, variants, price, the request */
.grid.merch .card .pic { margin-bottom: var(--s3); }
.grid.merch .card .t { font-size: var(--t2); } .grid.merch .card .c { margin-top: 2px; }
.card .sw { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); font-size: var(--t0); color: var(--mute); }
.card .sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); display: block; }
.card .sw .c-nero { background: var(--neg); } .card .sw .c-verde { background: var(--verde); } .card .sw .c-giallo { background: var(--giallo); }
.card .sw b { font-weight: var(--w-label); color: var(--ink-2); }
.card .p { font-size: var(--t2); margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.card .lnk { margin-top: var(--s3); }
.rows { border-top: 1px solid var(--line); }
.row2 { padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: baseline; row-gap: var(--s2); }
.row2.top { align-items: start; }
.row2 h3 { font-size: var(--t3); transition: color var(--dur) var(--ease); } .row2 p { font-size: var(--t05); color: var(--ink-2); }
.row2 .price { font-size: var(--t3); letter-spacing: var(--track-sm); }
.row2 .meta { font-size: var(--t0); color: var(--mute); } .row2 .meta .lnk { margin-left: var(--s3); }
@media (hover: hover) { a.row2:hover h3, .row2:hover h3 { color: var(--verde-testo); } } a.row2:focus-visible h3, .row2:focus-visible h3 { color: var(--verde-testo); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); padding: 0 var(--gutter) var(--s5); font-size: var(--t0); font-weight: var(--w-label); }
.tabs a, .tabs span { color: var(--mute); padding: 4px 0; } .tabs [aria-current] { color: var(--ink); border-bottom: 1px solid currentColor; }
.tabs span i { font-style: normal; color: var(--mute); margin-right: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { nav.tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } nav.tabs::-webkit-scrollbar { display: none; } }   /* one row that scrolls, not two that wrap */
@media (max-width: 860px) { .s .side .toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); } }

/* ---- the project head ------------------------------------------------------------ */
.hd { padding: var(--s6) var(--gutter) var(--s7); align-items: end; row-gap: var(--s5); }
.hd .by { font-size: var(--t2); color: var(--mute); margin-top: var(--s2); }

/* ---- the configurator (configura.html): the stage, the callouts, the steps ------------
   The record and its sleeve sit on the page's ground, in three.js, with the option-A
   callouts of August drawn as a technical drawing: dashed ink leaders, the active step's
   in verde. The steps column is one step at a time, in the site's own controls. */
.cfg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--gutter) var(--s8); align-items: start; }
.cfg .stage { grid-column: span 7; position: sticky; top: calc(var(--bar-space) + var(--s3)); height: calc(100vh - var(--bar-space) - var(--s3) - var(--s4)); min-height: 480px; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--bg); }
/* The configurator stands apart from the rest of the site (Andrea, 12 September: "quando vai
   sul configuratore lo sfondo cambia"). From 15 September to 11 October that was a light verde
   ground under everything; now the stage alone carries it. */
/* 11 October 2026 (Julian): the whole page dark with white text, and the stage a dark grey room
   with a pool of light where the model stands. The tokens are redefined on the body, so the bar,
   the opening, the stage and the form all take them; the giallo button and the draft note keep
   their dark ink, because their grounds stay light. Measured on #111: ink 17.6:1, ink-2 12.5:1,
   mute 6.9:1, verde-testo 9.6:1, line-2 4.3:1. */
body.cfg-page {
  --bg: #111111; --bg-2: #1F1F1F; --ink: #F4F3EE; --ink-2: #D2D1CC; --mute: #9C9B96; --line: #2E2E2B; --line-2: #77766F;
  --glass: rgb(17 17 17 / .78); --verde-testo: #8CC7C2; --err: #FF8A80; --err-bg: #3A1C1C;
  background: var(--bg); color: var(--ink); color-scheme: dark;   /* native controls (the file picker) go dark too */
}
body.cfg-page .bar .logo-b { display: none; } body.cfg-page .bar .logo-w { display: block; }
body.cfg-page .btn { color: #080B0A; }
@media (hover: hover) { body.cfg-page .btn:hover { background: #F4F3EE; color: #080B0A; } }
body.cfg-page .btn:disabled { background: var(--bg-2); color: var(--mute); }
body.cfg-page .sw canvas { box-shadow: 0 0 0 1px var(--line-2); }   /* the black swatch would vanish on the dark */
body.cfg-page .note { color: #2A6462; background: #F3FFA9; }   /* the note as it reads on white: its 45% giallo turns olive on the dark */
@media print {   /* "Stampa il modulo" prints on paper: the site's own light tokens back */
  body.cfg-page { --bg: #FFFFFF; --bg-2: #EDF2F2; --ink: #080B0A; --ink-2: #393E3E; --mute: #707776; --line: #DFE4E4; --line-2: #858C8B; --verde-testo: #2A6462; --err: #A50D26; color-scheme: light; }
}
body.cfg-page .cfg > .stage { --bg: #1A1A1A; --glass: rgb(26 26 26 / .72); background: var(--bg); padding: var(--s3) var(--s4) var(--s4); }
body.cfg-page .cfg > .stage .view { background:
  radial-gradient(ellipse 34% 9% at 52% 80%, rgb(255 244 230 / .10) 0%, transparent 100%),   /* the pool on the floor */
  radial-gradient(ellipse 50% 56% at 54% 46%, #4A4A47 0%, #30302E 40%, #1A1A1A 80%); }          /* the spot's falloff on the back wall */
.cfg .steps { grid-column: span 5; min-width: 0; }
.stage .view { position: relative; min-height: 0; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.stage .off-note { display: none; }
.stage.off .view, .stage.off .spec { display: none; }
.stage.off { min-height: 0; height: auto; } .stage.off .off-note { display: block; font-size: var(--t0); color: var(--mute); padding: var(--s3) 0; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labels svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-line { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 4; transition: stroke var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.l-line.hot { stroke: var(--verde); stroke-dasharray: none; stroke-width: 1.25; }
.l-dot { fill: var(--ink); transition: opacity var(--dur) var(--ease); } .l-dot.hot { fill: var(--verde); }
.l-text { position: absolute; left: 0; top: 0; transform: translateY(calc(-0.72em - 3px)); padding: 3px 6px; font-size: var(--t0); line-height: 1.4; color: var(--ink-2); white-space: pre; background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }   /* the glass keeps a callout legible where it crosses the disc */
.l-title { display: block; font-weight: var(--w-label); color: var(--ink); }
.l-main { display: block; }
.l-text.hot { color: var(--verde-testo); } .l-text.hot .l-title { color: var(--verde-testo); }
.l-warn { display: block; color: var(--err); font-weight: var(--w-label); }
.spec { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t0); color: var(--ink-2); }   /* what the callouts do not say, as a caption under the model */
.spec .id { display: flex; align-items: baseline; gap: var(--s2); margin-right: auto; min-width: 0; }
.spec .cat { font-size: var(--t3); letter-spacing: var(--track-sm); color: var(--ink); font-weight: var(--w-display); }
.spec .ttl { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec .rows { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); } .spec .k { color: var(--mute); }
.spec .copy { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t0); font-weight: var(--w-label); cursor: pointer; }
.labels.narrow .l-text:not(.hot), .labels.narrow .l-line:not(.hot), .labels.narrow .l-dot:not(.hot) { opacity: 0 !important; }
.head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--gap); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.head > .cap { grid-column: 1 / -1; }
.head .field .msg { display: none; }                                             /* the catalogue's message shows only when the request is refused */
.head .field.error .msg { display: block; }
.cfg .tabs { padding: 0 0 var(--s4); gap: var(--s2) var(--s3); }
.tabs button { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: var(--w-label); color: var(--mute); cursor: pointer; }
.tabs button[aria-current] { color: var(--ink); border-bottom: 1px solid currentColor; }
.tabs button.done { color: var(--ink-2); }
.tabs button i { font-style: normal; color: var(--mute); margin-right: 6px; font-variant-numeric: tabular-nums; }
.passo h2 { position: sticky; top: var(--bar-space); z-index: 3; margin: 0 0 var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); font-size: var(--mid); line-height: 1.1; letter-spacing: var(--track-mid); }
.passo .rule { min-height: 1.45em; margin: var(--s2) 0 0; font-size: var(--t0); color: var(--verde-testo); }
.passo .q { margin-top: var(--s5); } .passo .q .label { margin-bottom: var(--s2); }
.passo .q .msg { margin: var(--s2) 0 0; font-size: var(--t0); color: var(--verde-testo); }   /* a rule speaking: verde, not the error red */
.passo .q .cap { margin-top: var(--s2); }
.passo .q .note { margin-top: var(--s3); }
.passo > .field, .passo > .note, .passo > .form { margin-top: var(--s4); }
.passo .field .cap { display: block; margin-top: 6px; }
.passo .form { margin-top: var(--s4); }
.passo textarea { min-height: 64px; }
.sw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.sw-grid.fx { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sw { display: grid; justify-items: center; gap: 6px; padding: 8px 2px 6px; background: none; border: 1px solid transparent; font: inherit; font-size: var(--t0); color: var(--mute); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.sw canvas { width: 48px; height: 48px; border-radius: 50%; }
.sw i { font-style: normal; text-align: center; line-height: 1.2; }
@media (hover: hover) { .sw:hover { border-color: var(--line-2); } }
.sw[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.opt.chk input { border-radius: 0; }
.passo .opt { font-size: var(--t05); }   /* an option is read, not scanned: the 15 px step */
.passo .field.up input[type="file"]::file-selector-button { margin-right: var(--s3); padding: 6px var(--s3); border: 1px solid var(--line-2); border-radius: 0; background: transparent; font: inherit; font-weight: var(--w-label); color: var(--ink); cursor: pointer; transition: border-color var(--dur) var(--ease); }
@media (hover: hover) { .passo .field.up input[type="file"]:hover::file-selector-button { border-color: var(--ink); } }
.field.up input[type="file"] { border: 0; padding: 6px 0; font-size: var(--t0); color: var(--mute); }
.addr .one { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
.addr .one:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.addr .one .cap { grid-column: 1 / -1; }
.addr .one .lnk.plain { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; }
.addr > .lnk { margin-top: var(--s3); background: none; border: 0; padding: 0; cursor: pointer; }
.order { margin-top: var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s3); }
.order .label { margin-bottom: var(--s2); }
.order .tot { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s3) 0; font-size: var(--t3); letter-spacing: var(--track-sm); font-variant-numeric: tabular-nums; }
.order .tot small { font-size: var(--t0); color: var(--mute); letter-spacing: 0; }
.order .lnk { margin-top: var(--s3); background: none; border: 0; padding: 0; cursor: pointer; }
.nav2 { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.nav2 .back { background: none; border: 0; padding: 0; cursor: pointer; }
.nav2 .back[hidden] { display: none; }
.sent { padding-top: var(--s5); } .sent h2 { font-size: var(--mid); letter-spacing: var(--track-mid); line-height: 1.1; margin: var(--s3) 0 var(--s4); }
@media (max-width: 1000px) {
  .cfg .stage { grid-column: 1 / -1; position: relative; top: auto; height: 60vh; min-height: 420px; }
  .cfg .steps { grid-column: 1 / -1; margin-top: var(--s5); }
  .spec .rows { display: none; }
  .l-text { font-size: 11px; }
}
@media (max-width: 640px) { .head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .head > .field:nth-child(3) { grid-column: 1 / -1; } .sw-grid.fx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cfg .tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .cfg .tabs::-webkit-scrollbar { display: none; } }   /* one row that scrolls, as the documents' tabs, not two that wrap */
@media (max-width: 640px) { .cfg .stage { height: 300px; min-height: 300px; } }
@media print {
  .bar, .foot, .stage, .tabs, .nav2, .head .msg, .note, .open .note { display: none !important; }
  .cfg { display: block; } .cfg .steps { width: 100%; }
}

/* ---- forms: hairlines, no boxes -------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }
.form .full { grid-column: 1 / -1; }
.form .actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.field { display: block; }
.field > span { display: block; font-size: var(--t0); font-weight: var(--w-label); color: var(--ink); margin-bottom: 6px; }
.field > span.req::after { content: " *"; color: var(--verde-testo); }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 2px solid var(--line-2); background: transparent; font: inherit; color: var(--ink); padding: 8px 0; border-radius: 0; transition: border-color var(--dur) var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--verde); }
.field textarea { min-height: 120px; resize: vertical; }
.field .msg { display: none; font-size: var(--t0); color: var(--err); margin-top: 6px; }
.field.error input, .field.error textarea, .field.error select { border-bottom-color: var(--err); }
.field.error .msg { display: block; }
.opt { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t1); cursor: pointer; }
.opt input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border-radius: 50%; border: 1px solid var(--line-2); flex: none; background: transparent; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.opt input:checked { background: var(--verde); border-color: var(--verde); }
.opt input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.opt:has(input:checked) { font-weight: var(--w-label); }
.opt .p { margin-left: auto; color: var(--mute); font-size: var(--t0); font-variant-numeric: tabular-nums; }

/* ---- the footer ----------------------------------------------------------- */
.foot { background: var(--neg); color: var(--neg-text); padding: var(--s7) var(--gutter) var(--s6); row-gap: var(--s5); font-size: var(--t0); }   /* the black stays at the negative: the footer (VQA2 04:03) */
main:has(> .panels:last-child) + .foot { margin-top: calc(-1 * var(--s8) + var(--s6)); padding-top: var(--s8); }   /* the page is wrapped in <main>, so the footer meets the black panel through main, not as its sibling */
.foot.after-neg { border-top: 1px solid var(--neg-rule); }   /* set by lib/layout.js when the page ends on a negative section: two blacks want a hairline between them */
.foot > .co { grid-column: span 6; } .foot > div { grid-column: span 2; }   /* the company block and three columns, as on main (restored 15 September) */
@media (max-width: 900px) { .foot > .co { grid-column: 1 / -1; } .foot > div { grid-column: span 4; } }
@media (max-width: 640px) { .foot > div { grid-column: span 6; } }
.foot .label { margin-bottom: var(--s3); color: var(--neg-mute); } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: 6px; }
.foot li a { display: inline-block; padding: 2px 0; color: var(--on-dark); } @media (hover: hover) { .foot li a:hover { color: var(--giallo); } } .foot li a:focus-visible { color: var(--giallo); }
.foot a[href^="mailto"] { overflow-wrap: anywhere; }
.foot .co img { height: 28px; width: auto; margin-bottom: var(--s4); } .foot .co p { color: var(--neg-text); } .foot .co a { color: var(--on-dark); }
.foot .co hr { border: 0; height: 1px; background: var(--neg-line); margin: var(--s4) 0; max-width: 300px; }
.cartline { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin: var(--s6) var(--gutter) 0; padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t0); }
.cartline b { color: var(--ink); font-weight: var(--w-label); }
.grid.merch .btn { margin-top: var(--s3); }

/* ---- prose ---------------------------------------------------------------- */
.prose h3 { margin: var(--s6) 0 var(--s3); } .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); } .prose ul { padding-left: 1.2em; margin: 0 0 var(--s3); max-width: var(--measure); } .prose li { margin-bottom: 6px; } .prose li::marker { color: var(--mute); }
.prose code { font-family: inherit; background: var(--bg-2); padding: 1px 6px; }

.foot .lang a { display: inline-block; padding: 5px 0; margin: -5px 0; }   /* the footer switch: 24px hit area, height unchanged */

/* Skip to content. Off-screen until focused; the generated page emits it before the bar. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: var(--gutter); top: var(--s2); width: auto; height: auto; padding: 10px var(--s3); background: var(--ink); color: var(--bg); font-weight: var(--w-label); outline: var(--focus); outline-offset: var(--focus-offset); }

/* ---- rails: a row of tiles that scrolls, with arrows and one tile in focus (chrome.js) --------
   15 September: the packs and the examples on the home. The row scrolls inside itself; the page
   never does. The tile in focus is the one at the start edge, marked by a firmer top rule. */
.rail { min-width: 0; }
.rail-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gap)) / 2.2); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 860px) { .rail-track { grid-auto-columns: 80%; } }
.rail-nav { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }   /* two quiet arrows at the row's end: the boxed 44 px squares read clunky (Julian, 15 September) */
.rail-nav button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--t1); line-height: 1; cursor: pointer; transition: color var(--dur) var(--ease); }   /* the glyph at 16 px, the hit area 32 px */
@media (hover: hover) { .rail-nav button:hover { color: var(--verde-testo); } }
.rail-nav button:disabled { color: var(--line-2); cursor: default; }

/* ---- tiles --------------------------------------------------------------------------------- */
.tile { display: flex; flex-direction: column; cursor: pointer; }   /* no rule above the frame (15 September): the arrows say where the row is */
.tile.is-active { cursor: auto; }
.tile-pic { aspect-ratio: 5 / 4; overflow: hidden; }
.pack-tile .tile-pic::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }   /* the frame drawn over the slot's contents: an inset shadow on the slot itself paints beneath the live stage, which is opaque, and the tile in focus lost its frame */
.ex-tile .tile-pic { aspect-ratio: 3 / 2; background: var(--bg-2); }   /* the photographs' grey ground cropped, the sleeve whole */
.ex-tile .tile-pic > img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding-top: var(--s3); }
.tile-body h3 { font-size: var(--t4); }
.tile-body p { margin: 0; }
.tile-sub { font-size: var(--t0); color: var(--mute); }
.tile-line { font-size: var(--t05); color: var(--ink-2); }
.tile-body .price { font-size: var(--t3); letter-spacing: var(--track-sm); }
.tile-body > .lnk { margin-top: auto; padding-top: var(--s2); }
.ex-tile table.kv, .ex-info table.kv { font-size: var(--t0); }   /* the configuration, small: the photograph leads */
.tile-body table.kv td, .ex-info table.kv td { padding: 4px var(--s3) 4px 0; }
.tile-body table.kv td:first-child, .ex-info table.kv td:first-child { width: 38%; }
.ex-who { font-size: var(--t0); color: var(--mute); }       /* the record's name, quieter than what it is made of */
.ex-who span { color: var(--ink-2); }

/* ---- examples page: small tiles that open in place into the large tile ------------------------ */
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--s5) var(--gap); padding: var(--s2) var(--gutter) var(--s8); }
@media (max-width: 960px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex { min-width: 0; }
.ex summary { display: block; list-style: none; cursor: pointer; }
.ex summary::-webkit-details-marker { display: none; }
.ex summary .pic { display: block; aspect-ratio: 1 / 1; margin-bottom: var(--s2); }
.ex summary .t { display: block; font-size: var(--t0); font-weight: var(--w-label); transition: color var(--dur) var(--ease); }
.ex summary .c { display: block; font-size: var(--t0); color: var(--mute); }
.ex-peek { display: block; margin-top: 2px; font-size: var(--t0); color: var(--verde-testo); opacity: 0; transition: opacity var(--dur) var(--ease); }   /* on hover, what the record is made of */
@media (hover: hover) { .ex summary:hover .t { color: var(--verde-testo); } } .ex summary:focus-visible .t { color: var(--verde-testo); }
.ex summary:focus-visible .ex-peek { opacity: 1; } @media (hover: hover) { .ex summary:hover .ex-peek { opacity: 1; } }
@media (hover: none) { .ex-peek { opacity: 1; } }
.ex-close { display: none; font-size: var(--t0); font-weight: var(--w-label); text-align: right; padding-bottom: var(--s2); }
.ex[open] { grid-column: span 2; grid-row: span 2; }
@media (max-width: 640px) { .ex[open] { grid-column: 1 / -1; grid-row: auto; } }
.ex[open] summary .pic, .ex[open] summary .t, .ex[open] summary .c, .ex[open] summary .ex-peek { display: none; }
.ex[open] .ex-close { display: block; }
.ex-open .pic { aspect-ratio: 3 / 2; }
.ex-info { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); }
.ex-info p { margin: 0; }

/* ---- before you order, on the home: three cards with the figures people open the PDF for, the
   document as the filled button and its page as the outlined one (version B of the lab, 18 October) ---- */
.prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.prep article { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); background: var(--bg-2); }
.prep .label { color: var(--mute); }
.prep dl { margin: 0; display: grid; align-content: start; gap: var(--s3); flex: 1; }
.prep dl > div { border-top: 1px solid var(--line); padding-top: var(--s2); }
.prep dt { font-size: var(--t0); color: var(--mute); }
.prep dd { margin: 0; font-size: var(--t4); line-height: 1.15; letter-spacing: var(--track-sm); font-variant-numeric: tabular-nums; }
.prep-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.prep-btn { display: inline-flex; align-items: baseline; gap: var(--s2); min-height: 44px; padding: 12px var(--s3); background: var(--giallo); color: var(--ink); font-size: var(--t05); font-weight: var(--w-label); line-height: 1.2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.prep-btn i { font-style: normal; font-weight: 400; font-size: var(--t0); opacity: .7; }
.prep-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) { .prep-btn:hover { background: var(--ink); color: var(--giallo); } .prep-btn.ghost:hover { background: var(--ink); color: var(--bg); } }
.prep-btn:focus-visible { background: var(--ink); color: var(--giallo); }
.prep-more { grid-column: 4 / -1; margin-top: var(--s5); font-size: var(--t05); color: var(--mute); }
@media (max-width: 1100px) { .prep { grid-template-columns: 1fr; } .prep dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .prep-more { grid-column: 1 / -1; } }
@media (max-width: 520px) { .prep dl { grid-template-columns: 1fr; } }

/* ---- document thumbnails: the specifications page's cards ---------------------------------------- */
.rthumb { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: var(--s2); padding: var(--s3); overflow: hidden; background: var(--bg-2); transition: background var(--dur) var(--ease); }
.rthumb > img { width: 100%; height: 100%; object-fit: contain; }
.rthumb-logo { padding: var(--s5) var(--s6); }
.rthumb-q > span { justify-self: start; align-self: end; font-size: var(--t3); font-weight: var(--w-light); line-height: 1.2; color: var(--ink); max-width: 16ch; }

/* ---- documents: the first page beside the download ----------------------------------------- */
.doc { display: flex; flex-direction: column; gap: var(--s2); max-width: 160px; margin-top: var(--s4); }
.doc-thumb { display: block; aspect-ratio: 210 / 297; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur) var(--ease); }
.doc-thumb > img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .doc:hover .doc-thumb { box-shadow: 0 0 0 1px var(--ink); } } .doc:focus-visible .doc-thumb { box-shadow: 0 0 0 1px var(--ink); }
.side .doc + .cap { margin-top: var(--s3); }
.doc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); width: 100%; margin: 0 0 var(--s4); }
.doc-row .doc { max-width: none; margin-top: 0; font-size: var(--t0); font-weight: var(--w-label); }
@media (hover: hover) { .doc-row .doc:hover { color: var(--verde-testo); } } .doc-row .doc:focus-visible { color: var(--verde-testo); }

/* ---- templates: the die itself in the square, where its thumbnail exists ---------------------- */
.tpl .sh > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.tpl .sh:has(> img) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tpl .sh:has(> img)::after { display: none; }

/* ---- orders & materials (15 September): the routes as one compact row, the packs as tiles with
   their full table, the resources as tiles with the documents list under them ---------------- */
.route-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 860px) { .route-row { grid-template-columns: minmax(0, 1fr); } }
.route-row .route { border-top: 0; min-height: 0; padding: var(--s4); background: var(--bg-2); transition: background var(--dur) var(--ease); }
.route-row .route h3 { margin: var(--s2) 0; }
@media (hover: hover) { .route-row .route:hover { background: var(--line); } } .route-row .route:focus-visible { background: var(--line); }
.pack-tile table.kv { font-size: var(--t0); margin-top: var(--s2); }
.pack-tile .tile-body > .btn { align-self: flex-start; margin-top: auto; }
.res .docs { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.res .docs h3 { margin-bottom: var(--s3); }
.res .docs .doc-row { max-width: 520px; }

/* ---- merch as tiles (15 September): two to a row, the render on the sunken ground, small lines -- */
.grid.merch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--gap); }
@media (max-width: 640px) { .grid.merch { grid-template-columns: minmax(0, 1fr); } }
.grid.merch .card .pic { aspect-ratio: 3 / 2; background: var(--render-ground); }   /* the renders' own ground: the product stays whole (its ink runs to 13-88% of the square) and no seam shows */
.grid.merch .card .pic img { object-fit: contain; }
.grid.merch .card .t { font-size: var(--t4); font-weight: var(--w-display); }
.grid.merch .card .c { font-size: var(--t0); max-width: 52ch; }

/* ---- motion and states (15 September) ------------------------------------------------------
   From the review of the plugins' advice (hallmark, micro-interaction, accessible-animation, 60fps,
   page transitions): finished states rather than new motion. Hover styles above apply only where a
   pointer hovers, each with a :focus-visible twin where the element takes focus, so a tap on a
   phone leaves no stuck state and a keyboard sees what a pointer sees. Every duration is --dur or a
   multiple of it, so reduced motion stops all of it from tokens.css. */
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:active, .rail-nav button:active { transform: translateY(1px); }   /* a press travels one pixel: no spring, no scale */
.rail-nav button { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover: hover) { .tabs button:hover { color: var(--ink); } }
.tabs button:focus-visible { color: var(--ink); }

/* the tile in focus: its title in ink, the others a step back, nothing moves */
.rail-track .tile-body h3, .rail-track .ex-who span { color: var(--ink-2); transition: color var(--dur) var(--ease); }
.rail-track .tile.is-active .tile-body h3, .rail-track .tile.is-active .ex-who span { color: var(--ink); }

/* the opening film can be stopped (WCAG 2.2.2): a label on the film, bottom right */
.hero .film { position: absolute; right: var(--gutter); bottom: var(--s4); z-index: 2; min-height: 32px; padding: 0; background: none; border: 0; font: inherit; font-size: var(--t0); font-weight: var(--w-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-2); cursor: pointer; transition: color var(--dur) var(--ease); }
@media (hover: hover) { .hero .film:hover { color: var(--on-dark); } }
.hero .film:focus-visible { color: var(--on-dark); outline-color: var(--on-dark); }
@media (max-width: 640px) { .hero .film { bottom: var(--s2); } }   /* under the subtitle, which runs to the right edge on a phone */

/* a request prepared or a message confirmed fades in, once */
.sent, .form-status { transition: opacity var(--dur) var(--ease); }
@starting-style { .sent, .form-status { opacity: 0; } }
.form .form-status { margin: 0; font-size: var(--t05); color: var(--verde-testo); }

/* sibling pages cross-fade over --dur with the bar held still; off under reduced motion, a plain load
   where a browser has no cross-document view transitions (and in the offline package, which has no
   origin); the logo intro keeps its own entrance */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar { view-transition-name: bar; }
}
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur, 150ms); animation-timing-function: var(--ease, ease); }
::view-transition-old(bar) { display: none; }
::view-transition-group(bar), ::view-transition-new(bar) { animation: none; }
html[data-intro]::view-transition-old(root), html[data-intro]::view-transition-new(root) { animation: none; }
/* an example opening in place: the grid moves as one, over two --dur (chrome.js names the tiles) */
html.vt-ex::view-transition-group(*), html.vt-ex::view-transition-old(*), html.vt-ex::view-transition-new(*) { animation-duration: calc(var(--dur, 150ms) * 2); animation-timing-function: var(--ease, ease); }

/* ---- Andrea's feedback of 26 September ---------------------------------------------------------
   Photographs smaller and enlarging in place (S26-02), galleries of two with arrows (S26-16, S26-23),
   a record tile cycling its own photographs (S26-09), the specifications as a triptych with bigger
   titles and pictures that say what each card is (S26-34, S26-35), the templates as a list by format
   (S26-36), and the quick fields of the quote (S26-31). */

/* a photograph that enlarges: a button with nothing of a button about it */
.zoom-in { display: block; width: 100%; padding: 0; border: 0; background: var(--bg-2); font: inherit; color: inherit; cursor: zoom-in; overflow: hidden; }
.zoom-in:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.zoom-in img { width: 100%; height: 100%; object-fit: cover; }
dialog.zoom { max-width: min(92vw, 1400px); max-height: 92vh; width: auto; padding: 0; border: 0; background: transparent; cursor: zoom-out; overflow: visible; }
dialog.zoom::backdrop { background: rgb(8 11 10 / .86); }
dialog.zoom img { display: block; max-width: min(92vw, 1400px); max-height: 92vh; width: auto; height: auto; object-fit: contain; }
dialog.zoom:focus-visible { outline: none; }

/* the gallery: two photographs in view, the rest behind the arrows; half the page, not the width */
.gallery { max-width: 760px; }
.gal-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
.gal-item { margin: 0; }
.gal-item .pic { aspect-ratio: 4 / 5; }
.s > .gallery { grid-column: 4 / span 6; }
@media (max-width: 860px) { .s > .gallery { grid-column: 1 / -1 !important; } .gal-track { grid-auto-columns: 70%; } }

/* a record tile: its photographs one at a time, the arrows under the frame */
.ex-gal { position: relative; }
.ex-gal .gal-shot { position: absolute; inset: 0; height: 100%; }
.ex-gal .gal-shot[hidden] { display: none; }
.gal-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); font-size: var(--t0); color: var(--mute); font-variant-numeric: tabular-nums; }
.gal-nav button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--t1); line-height: 1; cursor: pointer; transition: color var(--dur) var(--ease); }
@media (hover: hover) { .gal-nav button:hover { color: var(--verde-testo); } }
.ex-tile .gal-nav + .tile-body { padding-top: var(--s2); }

/* a process step's photograph, smaller than the column (S26-02) */
.step .body .pic { aspect-ratio: 4 / 3; max-width: 520px; }

/* the specifications: three cards, a picture that says what each is, a title that reads */
.spec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--gap); }
@media (max-width: 960px) { .spec-cards { grid-template-columns: minmax(0, 1fr); } }
.spec-card { min-width: 0; display: flex; flex-direction: column; }
.spec-pic { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--s3); }
.spec-card h3 { font-size: var(--t4); margin-bottom: var(--s2); }
.spec-card > p { font-size: var(--t05); color: var(--ink-2); }
.spec-card ul.plain { margin-top: var(--s3); border-top: 1px solid var(--line); }
@media (max-width: 960px) { .spec-pic { max-width: 420px; } }

/* the templates, a list by format (objects.press is Andrea's model) */
.tpl-list { border-top: 1px solid var(--line); }
.tpl-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s2) var(--gap); padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.tpl-list h3 { font-size: var(--t2); line-height: 1.3; }
.tpl-list ul { list-style: none; margin: 0; padding: 0; font-size: var(--t05); }
.tpl-list li { padding: 3px 0; }
.tpl-list li .sup { color: var(--mute); font-size: var(--t0); margin-left: var(--s2); }
@media (max-width: 640px) { .tpl-list > div { grid-template-columns: minmax(0, 1fr); } }

/* a field's own small print, under a select */
.field > span.cap { margin: 6px 0 0; font-weight: 400; color: var(--mute); }

/* merch: three products, smaller photographs (S26-02, S26-39) */
.grid.merch.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid.merch.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.merch.three { grid-template-columns: minmax(0, 1fr); } }
.grid.merch.three .card .pic { aspect-ratio: 1 / 1; background: var(--render-ground); }
.grid.merch.three .card .pic img { object-fit: cover; }
.card .sw-pick { background: none; padding: 0; cursor: pointer; }
.card .sw-pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.card .sw .sw-pick { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: block; }
.card .sw .sw-pick.c-nero { background: var(--neg); } .card .sw .sw-pick.c-verde { background: var(--verde); } .card .sw .sw-pick.c-giallo { background: var(--giallo); }
.grid.merch .card .pic.ex-gal { position: relative; }
.pic > .zoom-in { height: 100%; }

/* ---- the configurator, 26 September (S26-43 to S26-49) -----------------------------------------
   The model bigger and the options narrower (S26-44): eight columns to four at desktop, and a taller
   stage on a phone. The copies as a grid of chips (100 to 1,000+), the colours in two groups, one line
   per effect, the templates the record needs at the last step. */
/* 11 October (Julian): the form slimmer, a column of its own width beside the stage, the copies in
   three columns */
@media (min-width: 1001px) {
  .cfg { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px); }
  .cfg .stage { grid-column: 1; } .cfg .steps { grid-column: 2; }
  .cfg .head { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }   /* label and catalogue side by side, the title under them */
  .cfg .head > .field:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1000px) { .cfg .stage, .cfg .steps { grid-column: 1 / -1; } }
@media (max-width: 640px) { .cfg .stage { height: 400px; min-height: 400px; } }
.opts.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s3); }
.opts.chips .opt { font-variant-numeric: tabular-nums; }
.opts.chips .opt .p { display: none; }
.sw-group { display: block; margin: var(--s3) 0 var(--s2); font-size: var(--t0); color: var(--ink-2); }
.q .sw-group:first-of-type { margin-top: 0; }
.sw-grid.fx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-defs { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--t0); color: var(--ink-2); }
.fx-defs li { padding: 3px 0; } .fx-defs b { color: var(--ink); font-weight: var(--w-label); }
.tpl-need ul.plain li { font-size: var(--t05); }
/* Services (27 September): a service's text, then its options, with room between them */
.s > div > .prose + .cols, .s > div > .cols + ul.plain { margin-top: var(--s6); }
ul.plain.kv + ul.plain.kv { margin-top: var(--s5); }
/* the gallery runs on to the page's right edge (Julian, 2 October): the photographs keep their size,
   the row bleeds past the gutter so the next one shows at the edge, and the arrows stay on the grid */
.s > .gallery { grid-column: 4 / -1; max-width: none; margin-right: calc(-1 * var(--gutter)); }
.gallery .gal-track { grid-auto-columns: min(58vw, 560px); }   /* 345 px until 10 October: Andrea found the photographs small */
.gal-item .pic { aspect-ratio: 3 / 4; }   /* the shape the factory photographs were shot in, so nothing is cut (Julian, 2 October) */
.gallery .rail-nav { padding-right: var(--gutter); }
@media (max-width: 860px) { .gallery .gal-track { grid-auto-columns: 82%; } }

/* Home, the factory (Andrea, 10 October: small, and cropped too much): the heading above, then the photographs
   whole at 3:4 in the site's gallery, as on About. */
[data-sec="chi-siamo"] > .side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: var(--s5); }
[data-sec="chi-siamo"] > .side > h2 { grid-column: 1 / span 7; }
[data-sec="chi-siamo"] > .side > .cap, [data-sec="chi-siamo"] > .side > .lnk { grid-column: 1 / span 6; }
[data-sec="chi-siamo"] > .side > .lnk { margin-top: var(--s3); }
.s[data-sec="chi-siamo"] > .gallery { grid-column: 1 / -1; }   /* 18 October: the pair became the gallery, full width, so it scrolls */