/* L'Auto Sposa · Autonoleggio Vergara — the fleet as a paint colour card.
   The interface is neutral paper and ink; the only colours on the page are the chips. */
:root {
  --paper: #ECEBE7; --paper-2: #E1E0DB; --card: #F5F4F0;
  --fg: #1B1B1E; --fg-2: #52514C; --fg-3: #6A6964;
  --rule: rgba(27, 27, 30, .14); --rule-2: rgba(27, 27, 30, .34);
  --chip-sh: 0 1px 1px rgba(20, 20, 22, .10), 0 8px 18px -12px rgba(20, 20, 22, .38);
  --chip-sh-up: 0 2px 3px rgba(20, 20, 22, .10), 0 22px 34px -18px rgba(20, 20, 22, .5);
  --rail: 292px;
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --e2: cubic-bezier(0.65, 0, 0.35, 1);
  --disp: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
html[data-ground="sera"] {
  --paper: #161619; --paper-2: #222226; --card: #1D1D21;
  --fg: #EEEDE9; --fg-2: #AEADA8; --fg-3: #918F8A;
  --rule: rgba(238, 237, 233, .14); --rule-2: rgba(238, 237, 233, .34);
  --chip-sh: 0 1px 1px rgba(0, 0, 0, .5), 0 10px 22px -12px rgba(0, 0, 0, .9);
  --chip-sh-up: 0 2px 3px rgba(0, 0, 0, .5), 0 26px 40px -18px rgba(0, 0, 0, .95);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--fg); font: 400 16px/1.6 var(--text); transition: background-color .6s var(--e), color .6s var(--e); }
body.locked { overflow: hidden; }
::selection { background: var(--fg); color: var(--paper); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img { display: block; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--fg); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ---------- rail: hue groups, search, ground, fan deck ---------- */
.rail { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: var(--rail); display: flex; flex-direction: column; gap: 20px; padding: 24px 24px 18px; border-right: 1px solid var(--rule); overflow-y: auto; scrollbar-width: thin; background: var(--paper); transition: background-color .6s var(--e); }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand img { height: 44px; width: auto; }
.lang { display: flex; }
.lang button { border: 0; background: none; padding: 6px 7px; font: 500 12px/1 var(--mono); color: var(--fg-2); cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.rail-k { margin: 4px 0 -8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.hues { display: flex; flex-direction: column; }
.hues a { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 5px 0; text-decoration: none; border-bottom: 1px solid var(--rule); transition: opacity .3s; }
.hues a:first-child { border-top: 1px solid var(--rule); }
.hues .hn { font: 700 16px/1.25 var(--disp); letter-spacing: -.01em; }
.hues .hc { font-size: 12px; color: var(--fg-2); }
.hues a:hover .hn, .hues a.cur .hn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hues a.off { opacity: .35; }
.sw { display: inline-block; width: 16px; height: 16px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-ground="sera"] .sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sw.nd, .hue-name .sw[style*="transparent"] { background: none; outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; box-shadow: none; }

.tools { display: grid; gap: 16px; }
.lbl { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 4px; }
.search input { width: 100%; border: 0; border-bottom: 1.5px solid var(--fg); background: transparent; color: var(--fg); padding: 6px 0 7px; font: 500 17px/1.3 var(--disp); border-radius: 0; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--fg-3); }
.search input:focus-visible { outline-offset: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { border: 1px solid var(--rule-2); background: transparent; padding: 6px 9px; font: 500 12px/1.2 var(--mono); cursor: pointer; border-radius: 0; transition: background-color .25s, color .25s; }
.seg button:hover { border-color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--paper); border-color: var(--fg); }
.ground .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ground .seg button { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; text-align: left; padding: 7px 8px; font: 500 12px/1.25 var(--text); }
.ground .seg button::before { content: ''; width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .45); }
.ground .seg button[data-ground="chiesa"]::before { background: #F3F1EA; }
.ground .seg button[data-ground="sera"]::before { background: #141417; }

.mini { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; border-top: 1.5px solid var(--fg); }
.mini.bump .mini-fan { animation: bump .7s var(--e); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
.mini-fan { --sw: 22px; --sh: 104px; position: relative; height: 122px; }
.mini-fan.empty::before { content: ''; position: absolute; left: 50%; bottom: 12px; width: var(--sw); height: var(--sh); margin-left: calc(var(--sw) / -2); outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; }
.mini-txt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mini-txt b { font: 800 18px/1.2 var(--disp); letter-spacing: -.01em; }
.mini-n { font-size: 12px; color: var(--fg-2); text-align: right; }
.mini:not(.has) .mini-n { text-align: left; }
.mini:not(.has) .mini-txt { flex-direction: column; gap: 2px; }
.rail-legal { margin: 0; font-size: 12px; color: var(--fg-2); }

/* fan deck strips: rotate about a rivet */
.strip { position: absolute; left: 50%; bottom: 12px; width: var(--sw); height: var(--sh); margin-left: calc(var(--sw) / -2); background: var(--c); color: var(--ink); transform-origin: 50% calc(100% - var(--sw) / 2); transform: rotate(var(--a)); z-index: var(--z); box-shadow: var(--chip-sh); transition: transform .7s var(--e); overflow: hidden; }
.strip.nd { background: var(--card); outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; --ink: var(--fg); }
.strip.ape { background: var(--fg); --ink: var(--paper); }
.strip .st-int { position: absolute; left: 0; right: 0; top: 0; height: 14%; background: var(--ci); }
.strip .st-t2 { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--c2); }
.rivet { position: absolute; left: 50%; bottom: 12px; width: 10px; height: 10px; margin: 0 0 calc(var(--sw) / 2 - 5px) -5px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--fg); z-index: 50; }
html.js .mini-fan .strip { animation: fanin .8s var(--e) both; }
@keyframes fanin { from { transform: rotate(0deg); } }

/* ---------- main ---------- */
main { margin-left: var(--rail); padding: 0 clamp(20px, 4.4vw, 72px) 96px; min-width: 0; }
.meta { margin: 0; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.front { padding-top: 34px; }
.display { font-family: var(--disp); font-weight: 900; letter-spacing: -.045em; line-height: .86; margin: 0; }
.front h1 { font-size: clamp(54px, 10.2vw, 168px); margin: 26px 0 0 -.05em; max-width: 9.5em; }
.front h1 span { display: inline-block; }
.front h1 .dim { display: block; font-weight: 500; color: var(--fg-2); letter-spacing: -.05em; }
html.js .front h1 span { animation: up 1s var(--e) both; }
html.js .front h1 span:nth-child(2) { animation-delay: .08s; }
html.js .front h1 span:nth-child(3) { animation-delay: .2s; }
@keyframes up { from { transform: translateY(.35em); opacity: 0; } }
.front-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; margin-top: 36px; }
.lede { margin: 0; max-width: 54ch; font-size: 17.5px; line-height: 1.6; }
.price { justify-self: end; max-width: 380px; }
.price-n { margin: 0; font: 800 clamp(42px, 4.5vw, 70px)/.95 var(--disp); letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-n span:first-child { font-size: .36em; font-weight: 700; letter-spacing: 0; color: var(--fg-2); margin-right: .2em; vertical-align: .9em; }
.price-n .to { font-weight: 500; color: var(--fg-2); }
.price-c { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* the spine: the whole fleet in one strip */
.spine-wrap { margin-top: 64px; }
.spine-cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding-top: 12px; border-top: 1.5px solid var(--fg); }
.spine-cap h2 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.spine-cap p { margin: 0; font-size: 14px; color: var(--fg-2); }
.tint-note { font-family: var(--mono); font-size: 12px !important; }
.spine { display: flex; gap: 12px; margin-top: 18px; }
.sp-g { flex: var(--n) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-slats { display: flex; gap: 3px; height: clamp(150px, 26vh, 250px); align-items: stretch; }
.slat { flex: 1 1 0; min-width: 0; position: relative; padding: 0; border: 0; background: var(--c); box-shadow: var(--chip-sh); cursor: pointer; transform-origin: 50% 100%; transition: transform .45s var(--e), opacity .3s; }
html.js .slat { animation: rise 1s var(--e) both; animation-delay: calc(var(--i) * 28ms + .25s); }
@keyframes rise { from { transform: scaleY(0); } }
.slat:hover, .slat:focus-visible { transform: translateY(-10px); }
.slat.nd { background: transparent; box-shadow: none; outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; }
.slat.dim { opacity: .15; }
.slat-int { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: var(--ci); }
.slat-t2 { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--c2); }
.slat-tip { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--fg); color: var(--paper); padding: 6px 9px; font: 500 12.5px/1.2 var(--text); z-index: 5; pointer-events: none; }
.slat-tip b { font-weight: 500; opacity: .75; margin-right: 4px; }
.slat:hover .slat-tip, .slat:focus-visible .slat-tip { display: block; }
.sp-g:first-child .slat:first-child .slat-tip { left: 0; transform: none; }
.sp-g:last-child .slat-tip { left: auto; right: 0; transform: none; }
.sp-l { display: flex; gap: 6px; align-items: baseline; font: 700 13px/1.2 var(--disp); text-decoration: none; white-space: nowrap; overflow: hidden; }
.sp-l .mono { font-size: 11px; font-weight: 500; color: var(--fg-2); }
.sp-g.narrow .sp-l .nm { display: none; }
.sp-l:hover .nm { text-decoration: underline; }

/* ---------- chart ---------- */
.hue { scroll-margin-top: 24px; }
.hue.full { margin-top: 104px; }
.hue-h { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 4px 18px; padding-top: 14px; border-top: 1.5px solid var(--fg); }
.hue-name { margin: 0; font: 800 clamp(46px, 6.6vw, 108px)/.9 var(--disp); letter-spacing: -.045em; }
.hue-name .sw { width: .5em; height: .5em; margin-right: .16em; vertical-align: .06em; box-shadow: var(--chip-sh); }
.hue-n { font-size: 15px; color: var(--fg-2); }
.hue-w { margin: 0; justify-self: end; text-align: right; max-width: 42ch; font-size: 14px; color: var(--fg-2); }
.nd-group .hue-name { font-size: clamp(38px, 4.6vw, 72px); }
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 196px; grid-auto-flow: dense; gap: 14px; margin-top: 30px; }
.band { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 72px 28px; margin-top: 104px; padding-top: 14px; border-top: 1.5px solid var(--fg); }
.hue.small { flex: var(--n) 1 0; min-width: calc(var(--n) * 128px); }
.hue.small .hue-h { grid-template-columns: auto minmax(0, 1fr); border-top: 0; padding-top: 0; }
.hue.small .hue-name { grid-column: 1 / -1; white-space: nowrap; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.035em; }
.hue.small .hue-w { grid-column: auto; justify-self: start; text-align: left; font-size: 13px; }
.hue.small .hue-n { justify-self: start; font-size: 13px; }
.hue.small .wall { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: 268px; margin-top: 20px; }

/* the chip */
.chip { position: relative; min-width: 0; background: var(--c); color: var(--ink); box-shadow: var(--chip-sh); transition: transform .5s var(--e), box-shadow .5s var(--e), opacity .35s; }
.chip.big { grid-column: span 2; grid-row: span 2; }
.chip.tall { grid-row: span 2; }
.chip.wide { grid-column: span 2; }
.chip:hover { transform: translateY(-5px); box-shadow: var(--chip-sh-up); }
.chip.dim { opacity: .14; }
.chip.dim:hover { transform: none; }
.chip.nd { background: transparent; box-shadow: none; outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; --ink: var(--fg) !important; }
.chip-open { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px 14px 15px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.chip-open:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.chip-code { position: relative; font-size: 11px; letter-spacing: .04em; opacity: .78; }
.chip-name { position: relative; margin-top: auto; max-width: 92%; font: 700 15.5px/1.15 var(--disp); letter-spacing: -.01em; text-wrap: balance; }
.chip.big .chip-name { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.025em; }
.chip.big .chip-code { font-size: 12.5px; }
.chip-nd { position: relative; font-size: 10.5px; color: var(--fg-2); }
.chip.has-int .chip-open { padding-bottom: 30px; }
.chip-int { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--ci); box-shadow: inset 0 1px 0 rgba(128, 128, 128, .22); }
.chip.big .chip-int { height: 24px; }
.chip.big.has-int .chip-open { padding-bottom: 40px; }
.chip-t2 { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: var(--c2); }
.chip-t2 { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 12px 10px; }
.chip[data-id="mga"] .chip-t2 { height: 52px; align-items: center; justify-content: flex-start; padding: 0 14px; }
.sh-t2 { display: flex; align-items: flex-end; padding: 0 24px 18px; }
.chip[data-id="mga"] .chip-open { padding-bottom: 66px; }
.sh-sw[data-id="mga"] .sh-t2 { display: flex; align-items: flex-end; padding: 0 24px 18px; }
.chip-t2 i, .sh-t2 i { font-style: normal; font-size: 10.5px; color: var(--ink2); }

.chip-pick { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); cursor: pointer; transition: background-color .25s, box-shadow .25s, transform .3s var(--e); }
.chip-pick:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(1.08); }
.chip-pick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.chip-pick .tick { display: none; }
.chip-pick[aria-pressed="true"] { background: var(--ink); color: var(--c); box-shadow: none; }
.chip.nd .chip-pick[aria-pressed="true"] { color: var(--paper); }
.chip-pick[aria-pressed="true"] .plus { display: none; }
.chip-pick[aria-pressed="true"] .tick { display: block; }


/* ---------- back of the card ---------- */
.back { margin-top: 150px; padding-top: 16px; border-top: 1.5px solid var(--fg); }
.back-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.back-h h2 { font-size: clamp(52px, 8vw, 132px); order: -1; }
.finishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-top: 48px; }
.finish h3 { margin: 0; display: flex; flex-direction: column; gap: 6px; font: 800 clamp(28px, 2.8vw, 40px)/1 var(--disp); letter-spacing: -.03em; }
.finish h3 .mono { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.finish p { margin: 16px 0 0; max-width: 56ch; font-size: 16px; }
.finish .finish-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--fg-2); }
.finish .finish-price b { font: 800 26px/1 var(--disp); letter-spacing: -.02em; color: var(--fg); }
.route { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: r; }
.route li { display: grid; gap: 6px; align-content: start; padding: 0 20px 0 0; position: relative; }
.route li::before { content: ''; height: 10px; margin-bottom: 10px; background: var(--fg); clip-path: polygon(0 40%, calc(100% - 10px) 40%, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, calc(100% - 10px) 60%, 0 60%); }
.route li:last-child::before { clip-path: polygon(0 40%, 100% 40%, 100% 0, calc(100% - 3px) 0, calc(100% - 3px) 100%, 100% 100%, 100% 60%, 0 60%); background: var(--fg); }
.route .mono { font-size: 12px; color: var(--fg-2); }
.route b { font: 800 26px/1.05 var(--disp); letter-spacing: -.025em; }
.route span:last-child { font-size: 14px; color: var(--fg-2); max-width: 24ch; }
.data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 72px 0 0; }
.data > div { padding: 14px 0 22px; border-top: 1px solid var(--rule-2); min-width: 0; }
.data dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.data dd { margin: 6px 0 0; font-size: 16px; }
.data .data-wide { grid-column: 1 / -1; }
.data .data-wide dd { font: 700 clamp(20px, 2vw, 28px)/1.3 var(--disp); letter-spacing: -.015em; }

/* ---------- off the card: the aperitif ---------- */
.extra { margin-top: 150px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 72px; align-items: start; padding-top: 16px; border-top: 1.5px solid var(--fg); }
.extra h2 { font-size: clamp(48px, 6vw, 96px); margin: 18px 0 0; }
.extra p:not(.meta) { margin: 22px 0 26px; max-width: 46ch; }
.ape-list { list-style: none; margin: 0; padding: 0; }
.ape-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0 12px; border-bottom: 1px solid var(--rule-2); }
.ape-list li:first-child { border-top: 1px solid var(--rule-2); }
.ape-list b { font: 800 clamp(30px, 3.6vw, 56px)/1 var(--disp); letter-spacing: -.035em; }
.ape-list .mono { font-size: 12px; color: var(--fg-2); text-align: right; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 0; padding: 13px 18px; background: var(--fg); color: var(--paper); font: 700 15px/1.2 var(--disp); letter-spacing: 0; cursor: pointer; transition: transform .35s var(--e), background-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn.ghost[aria-pressed="true"] { background: var(--fg); color: var(--paper); }
.btn.sq { width: 42px; height: 42px; padding: 0; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.x { border: 0; background: transparent; padding: 8px 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- panels: chip sheet and fan deck ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(12, 12, 14, .38); opacity: 0; transition: opacity .4s var(--e); }
.scrim.on { opacity: 1; }
.sheet, .deck { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: var(--card); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(104%); transition: transform .55s var(--e); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .45); }
.deck { width: min(640px, 100vw); }
.sheet.on, .deck.on { transform: none; }
.sh-sw { position: relative; height: 320px; background: var(--c); color: var(--ink); }
.sh-sw.nd { background: var(--paper-2); --ink: var(--fg) !important; }
.sh-sw .x { position: absolute; top: 14px; right: 18px; color: var(--ink); }
.sh-code { position: absolute; left: 24px; top: 20px; font-size: 14px; letter-spacing: .04em; }
.sh-nd { position: absolute; left: 24px; bottom: 22px; font-size: 13px; }
.sh-int { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: var(--ci); color: var(--inki, var(--ink)); display: flex; align-items: center; padding: 0 24px; box-shadow: inset 0 1px 0 rgba(128, 128, 128, .25); }
.sh-int .mono { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.sh-t2 { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--c2); }
.sh-body { padding: 26px 28px 40px; }
.sh-name { margin: 0; font: 800 clamp(30px, 4vw, 42px)/1.02 var(--disp); letter-spacing: -.03em; }
.sh-rows { margin: 22px 0 0; }
.sh-rows > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.sh-rows dt { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); padding-top: 3px; }
.sh-rows dd { margin: 0; font-size: 15.5px; }
.pair { margin-top: 22px; }
.pair > .mono { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-row.lbls { margin-top: 6px; font-size: 12.5px; color: var(--fg-2); }
.pair-sw { height: 116px; display: grid; place-items: center; }
.pair-sw.day { background: #F3F1EA; }
.pair-sw.night { background: #141417; }
.pair-chip { position: relative; width: 58px; height: 74px; background: var(--c); overflow: hidden; }
.pair-sw.day .pair-chip { box-shadow: 0 1px 1px rgba(20, 20, 22, .12), 0 8px 16px -10px rgba(20, 20, 22, .4); }
.pair-sw.night .pair-chip { box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .9); }
.pair-chip .pi { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--ci); }
.pair-chip .p2 { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--c2); }
.sh-tint { margin: 18px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--fg-2); }
.sh-photo { margin: 22px 0 0; }
.sh-photo > .mono { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.sh-photo img, .base-photo img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.sh-photo figcaption { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.sh-photo figcaption .mono { font-size: 11.5px; }
.base-photo { margin: 14px 0 0; max-width: 480px; }
.base-photo figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--fg-2); }
.sh-serv { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--fg-2); }
.sh-serv p { margin: 0 0 10px; }
.sh-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.sh-nav { display: flex; align-items: center; gap: 10px; }
.sh-nav .mono { font-size: 12px; color: var(--fg-2); }

.deck-in { padding: 24px 32px 48px; }
.deck-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.deck-h h2 { font-size: clamp(36px, 5vw, 56px); }
.compliance { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--fg); font: 700 16px/1.45 var(--disp); }
.fan { --sw: 54px; --sh: 270px; position: relative; height: 312px; margin-top: 18px; }
.fan .st-code, .fan .st-name { position: absolute; top: 12px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.fan .st-code { left: 6px; font-size: 10.5px; letter-spacing: .04em; opacity: .8; }
.fan .st-name { left: 24px; font: 700 13px/1 var(--disp); max-height: 60%; overflow: hidden; text-overflow: ellipsis; }
.fan .st-code { max-height: 40%; overflow: hidden; }
.fan .rivet { margin-bottom: calc(var(--sw) / 2 - 5px); }
.fan-empty { position: absolute; inset: 20px 0; display: grid; place-items: center; margin: 0; padding: 0 12%; text-align: center; font-size: 15px; color: var(--fg-2); outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; }
.picks { list-style: none; margin: 8px 0 0; padding: 0; }
.picks li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.picks li:last-child { border-bottom: 1px solid var(--rule); }
.picks .mono { font-size: 11.5px; color: var(--fg-2); }
.pk-sw { width: 18px; height: 18px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .3); }
.pk-sw.nd { background: none; outline: 1.5px dashed var(--rule-2); outline-offset: -1.5px; box-shadow: none; }
.pk-sw.ape { background: var(--fg); }
.pk-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-x { border: 0; background: none; padding: 4px; font: 500 12px/1 var(--mono); color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ask { display: grid; gap: 18px; margin-top: 28px; }
.how { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; border: 0; }
.how legend { float: left; width: 100%; margin-bottom: 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.how label, .tick { display: flex; align-items: center; gap: 9px; font-size: 15.5px; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--fg); width: 18px; height: 18px; margin: 0; }
.fld { display: grid; gap: 4px; }
.fld > span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.fld input { width: 100%; min-width: 0; border: 0; border-bottom: 1.5px solid var(--fg); border-radius: 0; background: transparent; color: var(--fg); padding: 7px 0 8px; font: 500 18px/1.3 var(--disp); -webkit-appearance: none; appearance: none; }
.fld input::placeholder { color: var(--fg-3); }
.fld input:focus-visible { outline-offset: 5px; }
.date-hint { margin: -8px 0 0; font-size: 13.5px; color: var(--fg-2); }
.date-hint:empty { display: none; }
.date-hint.warn { color: var(--fg); font-weight: 500; }
.date-hint.warn::before { content: '— '; }
.preview summary { cursor: pointer; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.preview pre { margin: 10px 0 0; padding: 14px 16px; background: var(--paper-2); color: var(--fg); font: 400 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.ask .btn { justify-self: start; }
.sent { display: none; margin: 0; padding: 10px 12px; background: var(--fg); color: var(--paper); font-size: 14px; }
.sent.on { display: block; }
.calls { margin: 0; font-size: 14px; color: var(--fg-2); }
.calls a { color: var(--fg); font-weight: 500; }

.flyer { position: fixed; z-index: 120; pointer-events: none; box-shadow: var(--chip-sh-up); }

/* ---------- seller block in the chart's own type ---------- */
footer.seller { margin-left: var(--rail); padding: 22px clamp(20px, 4.4vw, 72px) 40px; border-top: 1.5px solid var(--fg); color: var(--fg); font-family: var(--text); font-size: 13px; }
footer.seller .seller-in { max-width: none; margin: 0; gap: 16px 40px; }
footer.seller b { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; opacity: 1; color: var(--fg-2); }
footer.seller strong { font-family: var(--disp); font-weight: 800; }

/* ---------- legal pages (shell from privacy.html) ---------- */
.lgl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(16px, 4vw, 48px); border-bottom: 1.5px solid var(--fg); }
.lgl-top img { height: 40px; width: auto; }
.lgl-top a.lgl-back { font: 500 13px/1.2 var(--mono); }
body .ck-page button { border-radius: 0; font-family: var(--disp); } body .ck-page .st { border-radius: 0; }
main.doc { margin: 0 auto; max-width: 820px; padding: 40px clamp(16px, 4vw, 48px) 80px; }
main.doc h1 { font: 900 clamp(36px, 6vw, 64px)/.95 var(--disp); letter-spacing: -.04em; margin: 0 0 24px; }
main.doc h2 { font: 800 24px/1.15 var(--disp); letter-spacing: -.02em; margin: 40px 0 10px; padding-top: 12px; border-top: 1px solid var(--rule-2); }
main.doc h3 { font: 700 18px/1.2 var(--disp); margin: 24px 0 6px; }
main.doc p, main.doc li { max-width: 70ch; }
main.doc table { font-size: 14px; }
main.doc th { font: 500 11.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.lgl-body { --rail: 0px; }
.lgl-body footer.seller { margin-left: 0; }

/* ---------- motion preferences and review mode ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
html.static *, html.static *::before, html.static *::after { animation: none !important; transition: none !important; }
html.static { scroll-behavior: auto; }

/* ---------- narrower screens ---------- */
@media (max-width: 1320px) { .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .front-grid { grid-template-columns: minmax(0, 1fr); }
  .price { justify-self: start; }
  .data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spine-cap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { position: static; width: auto; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--rule); padding: 16px 16px 18px; gap: 16px; }
  .brand img { height: 38px; }
  .rail-k { margin: 0 0 -6px; }
  .hues { flex-direction: row; gap: 0 18px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .hues::-webkit-scrollbar { display: none; }
  .hues a, .hues a:first-child { flex: 0 0 auto; border: 0; grid-template-columns: 14px auto auto; gap: 7px; padding: 6px 0; }
  .sw { width: 14px; height: 14px; }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .mini { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1.5px solid var(--fg); background: var(--card); }
  .mini-fan { --sw: 9px; --sh: 42px; height: 52px; }
  .mini-fan .strip { bottom: 4px; }
  .mini-fan .rivet { bottom: 4px; width: 6px; height: 6px; margin: 0 0 calc(var(--sw) / 2 - 3px) -3px; box-shadow: 0 0 0 1.5px var(--fg); }
  .mini-fan.empty::before { bottom: 4px; }
  .mini-txt { flex-direction: column; align-items: flex-start; gap: 0; }
  .mini-txt b { font-size: 15px; }
  .mini-n { text-align: left !important; font-size: 11px; }
  .mini .btn { padding: 11px 14px; font-size: 14px; }
  .rail-legal { margin-top: -4px; }
  body { padding-bottom: 72px; }
  main { margin-left: 0; padding: 0 16px 72px; }
  footer.seller { margin-left: 0; padding: 20px 16px 28px; }
  .front { padding-top: 22px; }
  .front h1 { font-size: clamp(52px, 15vw, 96px); margin-top: 18px; }
  .lede { font-size: 16.5px; }
  .spine { gap: 6px; }
  .sp-slats { gap: 2px; height: 150px; }
  .sp-l { font-size: 0; }
  .sp-l .mono { font-size: 10px; }
  .sp-l .mono + .mono { display: none; }
  .hue.full, .band { margin-top: 72px; }
  .hue-h { grid-template-columns: auto minmax(0, 1fr); }
  .hue-n { justify-self: end; }
  .hue-w { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 172px; gap: 12px; }
  .band { gap: 56px 16px; }
  .hue.small { min-width: calc(var(--n) * 140px); }
  .hue.small .wall { grid-auto-rows: 210px; gap: 12px; }
  .back, .extra { margin-top: 96px; }
  .finishes, .extra, .data { grid-template-columns: minmax(0, 1fr); }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; margin-top: 52px; }
  .sh-sw { height: 240px; }
  .sh-body, .deck-in { padding-left: 18px; padding-right: 18px; }
  .fan { --sw: 44px; --sh: 220px; height: 258px; }
  .fan .st-name { left: 19px; font-size: 12px; }
}
@media (max-width: 420px) {
  .hue.small { min-width: calc(var(--n) * 50% - 9px); }
  .ape-list li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .ape-list .mono { text-align: left; }
}

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: autonoleggio-vergara-autosposa */
.ck { --ck-bottom: 78px; left: calc(var(--rail, 0px) + 28px); bottom: 26px; width: 300px; max-width: 300px; padding: 152px 18px 16px; background: #FBFAF6; color: #1B1B1E; font-family: 'Red Hat Text', 'Helvetica Neue', Arial, sans-serif; transform: rotate(-2deg); box-shadow: 0 1px 1px rgba(20, 20, 22, .14), 0 22px 40px -18px rgba(20, 20, 22, .55); }
.ck::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 138px; background: #C9A577; }
.ck::after { content: 'tinta indicativa'; position: absolute; right: 12px; top: 112px; font: 400 10.5px/1 'Red Hat Mono', ui-monospace, monospace; color: #3A2D1C; }
html[lang="en"] .ck::after { content: 'indicative tint'; }
.ck .ck-k { font: 500 11px/1.3 'Red Hat Mono', ui-monospace, monospace; letter-spacing: .05em; color: #52514C; }
.ck .ck-t b { display: block; margin: 3px 0 6px; font: 800 19px/1.15 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.015em; color: #1B1B1E; }
.ck .ck-p { font-size: 12.5px; line-height: 1.5; color: #42413D; }
.ck .b { margin-top: 12px; gap: 6px; }
.ck button { border: 0; border-radius: 0; padding: 9px 13px; font: 700 13px/1.1 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif; }
.ck .ok { background: #1B1B1E; color: #FBFAF6; } .ck .ok:hover { background: #3A3A3F; }
.ck .no { background: transparent; color: #1B1B1E; box-shadow: inset 0 0 0 1.5px #1B1B1E; } .ck .no:hover { background: rgba(27, 27, 30, .07); }
.ck .more { margin-left: 4px; font: 500 12px/1.2 'Red Hat Mono', ui-monospace, monospace; color: #1B1B1E; text-decoration: underline; text-underline-offset: 3px; }
.ck button:focus-visible, .ck .more:focus-visible { outline: 2px solid #1B1B1E; outline-offset: 2px; }
@media (max-width: 600px) { .ck { padding-top: 78px; transform: none; } .ck::before { height: 64px; } .ck::after { top: 46px; } }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }