/* dualuse.app: the "customs" design (Artifact VfQrqtab2pGMGMfkqbifM9).
   Fonts are served from this site, not from Google: Big Shoulders 800 and
   Public Sans (variable), latin subset, both SIL Open Font License. */

@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Layout: airport wayfinding, borrowed. One signage-yellow field from top to bottom with black type;
   black sign panels carry yellow type; customs green is the one action colour. The counter, the
   customs sign, the boarding pass and the departures board are the compositions. */
:root {
  --bg: #ffcc00;            /* signage yellow: the field */
  --surface: #f2bf00;       /* one tone step for fields and tiles */
  --ink: #0d0d0d;
  --muted: #4a3d00;         /* secondary ink on yellow, 7:1 */
  --accent: #0b7a3e;        /* customs green, "niente da dichiarare": the action only */
  --accent-strong: #075f30;
  --accent-ink: #ffffff;
  --field-1: #0d0d0d;  --field-1-ink: #ffcc00;   /* sign panel */
  --field-1-text: #f2f2f2;
  --field-2: #e3a700;  --field-2-ink: #0d0d0d;   /* ochre */
  --paper: #ffffff;    --paper-ink: #0d0d0d;
  --night: #050505;         /* the counter: the black of the object photographs */
  /* status colours, used only inside the interface fragments */
  --st-out: #ffb000;   --st-out-ink: #0d0d0d;    /* fuori UE */
  --st-in: #d7261e;    --st-in-ink: #ffffff;     /* anche in UE / bloccato */
  --st-none: #8d8d8d;  --st-none-ink: #0d0d0d;

  --font-display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-state: clamp(1.5rem, 1rem + 1.4vw, 1.875rem);   /* statements and the FAQ index */

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.5rem);
  --section: clamp(5.5rem, 11vw, 12rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* the black areas (the hero is also the 404's): a black outline would not show */
.hero :focus-visible, .board-sec :focus-visible, .foot :focus-visible { outline-color: var(--field-1-ink); }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; hyphens: none; font-weight: 800; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-left: max(var(--margin), env(safe-area-inset-left, 0px)); padding-right: max(var(--margin), env(safe-area-inset-right, 0px)); }
.display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.88; }

/* the one button shape: square, flat, customs green */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); font-family: var(--font-text); font-weight: 600; font-size: var(--step-body); text-decoration: none; white-space: nowrap; border-radius: var(--radius); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- hero: the counter ---------- */
.hero { position: relative; background: var(--night); color: var(--field-1-text); min-height: 100svh; display: grid; grid-template-rows: auto 1fr; overflow: clip; }
.hero__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); padding-bottom: 1rem; }
.hero__mark { font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); letter-spacing: 0.32em; text-decoration: none; color: var(--field-1-ink); }
.hero__navlink { font-size: var(--step-small); color: var(--field-1-text); }
.hero__stage { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(0.5rem, 3vh, 2.5rem); padding-bottom: 18svh; }
.counter { position: relative; width: min(27vw, calc((100svh - 25rem) * 0.8)); min-width: 15rem; aspect-ratio: 4 / 5; background: var(--night); overflow: clip; }
.counter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) contrast(1.04); opacity: 0; transition: opacity 1600ms ease; }
.counter img.is-on { opacity: 1; }
.wordmark { margin-top: clamp(1.25rem, 3.4vh, 2.25rem); font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.9vw, 5.25rem); line-height: 1; color: var(--field-1-ink); width: 100%; white-space: nowrap; letter-spacing: 0.9em; }
.wordmark span { display: inline-block; }
.hero__line { margin-top: 0.9rem; font-size: var(--step-lead); line-height: 1.3; color: var(--field-1-text); max-width: 40ch; }
.hero__row { margin-top: 1.75rem; display: flex; align-items: center; justify-content: center; gap: 3rem; font-size: var(--step-small); color: #cfcfcf; }
.hero__row > span { min-width: 15em; }
.hero__row > span:first-child { text-align: right; }
.hero__row > span:last-child { text-align: left; }
#counter-name { transition: opacity 400ms ease; }

/* ---------- gallery: the customs sign with prints ---------- */
.sign { position: relative; min-height: 108svh; overflow: clip; display: grid; place-items: start center; padding-block: 7svh 16svh; }
.sign__title { position: relative; z-index: 2; text-align: center; font-size: clamp(4rem, 17.5vw, 19rem); line-height: 0.84; color: var(--ink); }
.sign__title span { display: block; white-space: nowrap; }
.print { position: absolute; z-index: 1; margin: 0; background: var(--paper); padding: 8px; transition: transform 200ms var(--ease-out); }
.print img, .print video { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.print--a { width: 23vw; aspect-ratio: 3 / 4; left: 27vw; top: 46svh; transform: rotate(-8deg); }
.print--b { width: 23vw; aspect-ratio: 3 / 4; left: 51vw; top: 53svh; transform: rotate(6deg); }
.print--c { width: 15vw; aspect-ratio: 3 / 4; right: 6vw; bottom: -6vw; transform: rotate(-3deg); }
.print figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (hover: hover) and (pointer: fine) {
  .print:hover { transform: rotate(0deg) scale(1.02); }
}
.sign__note { position: absolute; left: max(var(--margin), env(safe-area-inset-left, 0px)); bottom: 3rem; z-index: 3; max-width: 30ch; font-size: var(--step-body); line-height: 1.45; }

/* ---------- how it works: one card, four fields ---------- */
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route__field { position: relative; min-height: 70svh; display: grid; grid-template-rows: auto 1fr auto; padding: 1.75rem; }
.route__field:nth-child(1) { background: var(--field-1); color: var(--field-1-text); }
.route__field:nth-child(1) .route__title { color: var(--field-1-ink); }
.route__field:nth-child(2) { background: var(--field-2); color: var(--field-2-ink); }
.route__field:nth-child(3) { background: var(--paper); color: var(--paper-ink); }
.route__field:nth-child(4) { background: var(--bg); color: var(--ink); }
.route__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-lead); line-height: 1; letter-spacing: 0.01em; }
.route__slot { display: grid; justify-items: center; align-content: start; padding-block: 12svh 2rem; }
.route__clause { font-size: var(--step-lead); line-height: 1.18; font-weight: 600; max-width: 14ch; }

/* the boarding pass (an interface fragment of the pratica) */
[data-ui].pass { position: relative; width: 260px; background: #ffffff; color: #111111; border-radius: 8px; font-family: var(--font-text); font-size: 13px; line-height: 1.4; text-align: left; transition: transform 150ms var(--ease-out); }
.route__field:nth-child(3) [data-ui].pass { background: #f4f4f4; }
[data-ui].pass .pass__top { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; }
[data-ui].pass .pass__ref { font-weight: 600; font-size: 13px; }
[data-ui].pass .pass__date { color: #5f6368; font-size: 13px; font-variant-numeric: tabular-nums; }
[data-ui].pass .pass__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; padding: 0 16px 12px; }
[data-ui].pass .pass__k { display: block; color: #5f6368; font-size: 13px; }
[data-ui].pass .pass__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 0.95; letter-spacing: 0.02em; }
[data-ui].pass .pass__v--cn { font-size: 24px; letter-spacing: 0.03em; white-space: nowrap; }
[data-ui].pass .pass__arrow { padding-bottom: 6px; color: #5f6368; }
[data-ui].pass .pass__body { padding: 12px 16px 16px; background: #f6f6f6; border-radius: 0 0 8px 8px; display: grid; gap: 8px; }
.route__field:nth-child(3) [data-ui].pass .pass__body { background: #ebebeb; }
[data-ui].pass .pass__desc { font-size: 13px; color: #111; }
[data-ui].pass .pass__line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
[data-ui].pass .pass__line span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
[data-ui].pass .pass__muted { color: #5f6368; }
[data-ui].pass .pass__code { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-ui].pass .pass__check { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
[data-ui].pass .pass__box { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #8a8a8a; display: grid; place-items: center; }
[data-ui].pass .pass__box.is-on { background: #111; border-color: #111; }
[data-ui].pass .pass__box.is-on::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
[data-ui].pass .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
[data-ui].pass .pill--wait { background: #eeeeee; color: #3a3a3a; }
[data-ui].pass .pill--strong { background: #fffbeb; color: #92400e; }
[data-ui].pass .pill--stop { background: #ffedea; color: #831c1e; }
[data-ui].pass .pill--ok { background: #dcfae5; color: #04250e; }
[data-ui].pass .pass__notch { position: absolute; top: 62px; width: 14px; height: 14px; border-radius: 50%; background: var(--notch, var(--bg)); }
[data-ui].pass .pass__notch--l { left: -7px; }
[data-ui].pass .pass__notch--r { right: -7px; }
.route__field:nth-child(1) { --notch: var(--field-1); }
.route__field:nth-child(2) { --notch: var(--field-2); }
.route__field:nth-child(3) { --notch: var(--paper); }
.route__field:nth-child(4) { --notch: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .route__field:hover [data-ui].pass { transform: translateY(-6px); }
}

/* ---------- showcase: the departures board (CN pre-screening) ---------- */
.board-sec { background: var(--field-1); color: var(--field-1-text); padding-block: clamp(4rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem); }
.board-sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.25rem; align-items: end; }
.board-sec__title { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-head); line-height: 0.9; color: var(--field-1-ink); }
.board-sec__line { grid-column: 7 / 13; font-size: var(--step-body); line-height: 1.5; max-width: 48ch; color: var(--field-1-text); }
.cnform { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem; }
.cnform label { display: block; font-size: var(--step-small); color: #d9d9d9; margin-bottom: 0.4rem; }
.cnform input { width: min(22rem, 100%); min-height: 3rem; padding: 0.55rem 0.9rem; background: #1c1c1c; color: var(--field-1-ink); border: 0; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; font-size: var(--step-lead); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.cnform input::placeholder { color: #8f8f8f; }
.cnform .button { min-height: 3rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.chip { min-height: 2.75rem; padding: 0.5rem 0.9rem; background: #1c1c1c; color: var(--field-1-text); font-size: var(--step-small); text-align: left; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chip strong { font-family: var(--font-display); font-weight: 800; font-size: var(--step-body); letter-spacing: 0.04em; color: var(--field-1-ink); margin-right: 0.45rem; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: #2b2b2b; }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: #2b2b2b; } }

[data-ui].board { margin-top: 1.75rem; display: grid; gap: 4px; font-family: var(--font-text); }
[data-ui].board .bhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding: 14px 18px; background: #161616; }
[data-ui].board .bhead__cn { grid-column: 1 / 5; font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--field-1-ink); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
[data-ui].board .bhead__desc { grid-column: 5 / 11; font-size: 15px; line-height: 1.4; color: #e6e6e6; }
[data-ui].board .bhead__count { grid-column: 11 / 13; text-align: right; font-size: 15px; color: #e6e6e6; font-variant-numeric: tabular-nums; }
[data-ui].board .brow { display: block; width: 100%; text-align: left; background: #1c1c1c; color: #f2f2f2; transition: background-color var(--t-hover) ease; }
[data-ui].board .brow__line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 72px; padding: 0 18px; }
[data-ui].board .brow__code { grid-column: 1 / 3; font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 0.03em; color: var(--field-1-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-ui].board .brow__title { grid-column: 3 / 8; font-size: 18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui].board .brow__cat { grid-column: 8 / 9; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-ui].board .brow__grp { grid-column: 9 / 11; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui].board .brow__st { grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.05em; white-space: nowrap; }
[data-ui].board .st-out { background: var(--st-out); color: var(--st-out-ink); }
[data-ui].board .st-in { background: var(--st-in); color: var(--st-in-ink); }
[data-ui].board .st-none { background: var(--st-none); color: var(--st-none-ink); }
[data-ui].board .brow__more { display: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 18px 22px; font-size: 17px; line-height: 1.45; }
[data-ui].board .brow__more > * { display: block; grid-column: 3 / 11; max-width: 72ch; }
[data-ui].board .brow__more > * + * { margin-top: 0.35rem; }
[data-ui].board .brow.is-open { background: var(--accent); color: #ffffff; }
[data-ui].board .brow.is-open .brow__code { color: #ffffff; }
[data-ui].board .brow.is-open .brow__line { min-height: 84px; }
[data-ui].board .brow.is-open .brow__title { white-space: normal; }
[data-ui].board .brow.is-open .brow__more { display: grid; }
[data-ui].board .brow--note { cursor: default; }
@media (hover: hover) and (pointer: fine) { [data-ui].board .brow:not(.is-open):not(.brow--note):hover { background: #262626; } }
.board-sec__caveat { margin-top: 1.5rem; max-width: 70ch; font-size: var(--step-body); color: var(--field-1-text); }
.board-sec__caveat strong { color: var(--field-1-ink); font-weight: 600; }

/* ---------- features: one paragraph with picture words ---------- */
.feat { padding-block: var(--section) calc(var(--section) * 0.75); }
.feat__para { font-size: var(--step-state); line-height: 1.22; font-weight: 600; max-width: 62ch; letter-spacing: -0.005em; }
.slot { display: inline-block; height: 1em; min-width: 1.9em; vertical-align: -0.12em; border-radius: 0.18em; overflow: clip; margin: 0 0.12em; background: var(--surface); }
.slot img { width: 1.9em; height: 1em; object-fit: cover; }
.slot--photo img { object-position: 45% 50%; }
[data-ui].slotui { display: inline-flex; align-items: center; height: 1em; padding: 0 0.45em; border-radius: 0.18em; vertical-align: -0.12em; margin: 0 0.12em; background: #111111; color: var(--field-1-ink); font-family: var(--font-display); font-weight: 800; font-size: 1em; letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-ui].slotui--file { background: #ffffff; color: #111111; font-family: var(--font-text); font-weight: 600; font-size: 0.62em; height: 1.62em; vertical-align: 0.05em; letter-spacing: 0; padding: 0 0.6em; }
[data-ui].slotui .lt { color: #ffffff; margin: 0 0.25em; }
.feat__after { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.feat__after > div { grid-column: 7 / 13; display: grid; gap: 1.25rem; justify-items: start; }
.feat__after p { font-size: var(--step-body); max-width: 46ch; }

/* ---------- stats: the total and its receipt ---------- */
.tally { padding-block: calc(var(--section) * 0.6) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.tally__left { grid-column: 1 / 7; display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
.tally__title { font-size: var(--step-head); }
.tally__note { margin-top: 1rem; max-width: 46ch; font-size: var(--step-body); color: var(--muted); }
.tally__total { margin-top: 3rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(10rem, 22vw, 22rem); line-height: 0.8; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tally__cap { margin-top: 1rem; font-size: var(--step-body); max-width: 40ch; }
.slip-wrap { grid-column: 8 / 12; align-self: start; }
.slip { background: var(--paper); color: var(--paper-ink); padding: 1.5rem 1.5rem 2.5rem; max-width: 440px; width: 100%; justify-self: start;
  clip-path: polygon(0 0, 100% 0, 100.000% calc(100% - 12px), 97.727% 100%, 95.455% calc(100% - 12px), 93.182% 100%, 90.909% calc(100% - 12px), 88.636% 100%, 86.364% calc(100% - 12px), 84.091% 100%, 81.818% calc(100% - 12px), 79.545% 100%, 77.273% calc(100% - 12px), 75.000% 100%, 72.727% calc(100% - 12px), 70.455% 100%, 68.182% calc(100% - 12px), 65.909% 100%, 63.636% calc(100% - 12px), 61.364% 100%, 59.091% calc(100% - 12px), 56.818% 100%, 54.545% calc(100% - 12px), 52.273% 100%, 50.000% calc(100% - 12px), 47.727% 100%, 45.455% calc(100% - 12px), 43.182% 100%, 40.909% calc(100% - 12px), 38.636% 100%, 36.364% calc(100% - 12px), 34.091% 100%, 31.818% calc(100% - 12px), 29.545% 100%, 27.273% calc(100% - 12px), 25.000% 100%, 22.727% calc(100% - 12px), 20.455% 100%, 18.182% calc(100% - 12px), 15.909% 100%, 13.636% calc(100% - 12px), 11.364% 100%, 9.091% calc(100% - 12px), 6.818% 100%, 4.545% calc(100% - 12px), 2.273% 100%, 0.000% calc(100% - 12px)); }
.slip__head { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.625rem; line-height: 1; letter-spacing: 0.04em; }
.slip__sub { margin-top: 0.35rem; font-size: 0.9375rem; color: #444; }
.slip__group { margin-top: 1.25rem; font-weight: 600; font-size: 1rem; }
.slip__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.4rem; font-size: 1rem; line-height: 1.7; font-variant-numeric: tabular-nums; }
.slip__row .lead-dots { overflow: hidden; white-space: nowrap; color: #8a8a8a; letter-spacing: 0.2em; }
.slip__row .lead-dots::before { content: "··································································································"; }
.slip__total { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr auto; padding: 0.55rem 0.75rem; background: var(--ink); color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- about: two columns with highlighted facts ---------- */
.about { padding-block: calc(var(--section) * 0.6); }
.about__text { columns: 2; column-gap: 2rem; font-size: var(--step-state); line-height: 1.22; color: var(--muted); }
.about__text strong { color: var(--ink); font-weight: 600; }
.hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.1em; color: var(--ink); }
.hl--paper { background: var(--paper); }
.hl--ochre { background: var(--field-2); }
.hl--black { background: var(--ink); color: var(--field-1-ink); }
.hl--go { background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .hl--go:hover { background: var(--accent-strong); } }

/* ---------- faq: large questions, answers beside ---------- */
.faq { padding-block: calc(var(--section) * 0.6) var(--section); }
.faq__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.faq__row + .faq__row { margin-top: clamp(3rem, 5.5vw, 5.25rem); }
.faq__q { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-state); line-height: 1.05; letter-spacing: 0.01em; }
.faq__title { color: var(--muted); }
.faq__a { grid-column: 8 / 13; font-size: var(--step-body); line-height: 1.55; max-width: 42ch; }

/* ---------- cta: one word is the button ---------- */
.cta { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 60svh; padding-top: 1.5rem; padding-left: max(var(--margin), env(safe-area-inset-left, 0px)); padding-right: max(var(--margin), env(safe-area-inset-right, 0px)); background: var(--accent); color: var(--accent-ink); text-decoration: none; overflow: clip; }
.cta__note { grid-row: 1; max-width: 34ch; font-size: var(--step-body); line-height: 1.45; }
.cta__arrow { display: inline-block; vertical-align: -0.35em; width: 1.6em; height: 1.6em; margin-left: 0.25em; }
.cta__verb { grid-row: 3; display: block; padding-bottom: calc(0.2em + 1.5rem); font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 27vw, 30rem); line-height: 0.8; letter-spacing: -0.005em; white-space: nowrap; }
.cta:hover, .cta:focus-visible { background: var(--paper); color: var(--accent); }
.cta:focus-visible { outline: 4px solid var(--ink); outline-offset: -8px; }

/* ---------- footer: invitation over the cropped name ---------- */
.foot { position: relative; min-height: 100svh; background: var(--field-1); color: var(--field-1-text); overflow: clip; display: grid; grid-template-rows: auto 1fr auto; padding-top: clamp(2.5rem, 5vw, 4rem); }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.foot__invite { grid-column: 1 / 8; display: grid; gap: 1.75rem; justify-items: start; }
.foot__title { font-size: var(--step-head); color: var(--field-1-ink); }
.foot__contacts { grid-column: 10 / 13; display: grid; gap: 0.75rem; align-content: start; font-size: var(--step-body); }
.foot__contacts a { color: var(--field-1-text); }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.mail__addr { user-select: all; -webkit-user-select: all; font-weight: 600; color: var(--field-1-ink); }
.copy { min-height: 2.25rem; padding: 0 0.75rem; background: #262626; color: var(--field-1-text); font-size: var(--step-small); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.copy:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .copy:hover { background: #333333; } }
.foot__legal { position: relative; z-index: 2; display: grid; gap: 0.5rem; padding-top: 2.5rem; padding-bottom: 0.5rem; font-size: var(--step-small); line-height: 1.5; color: #d6d6d6; max-width: 120ch; }
.foot__legal a { color: #e8e8e8; }
.foot__name { position: relative; z-index: 1; display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 29vw, 34rem); line-height: 0.8; color: var(--field-1-ink); white-space: nowrap; transform: translateY(26%); margin-top: -0.06em; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .sign { min-height: 88svh; place-items: start center; padding-block: 8svh 16svh; }
  .print--a { width: 34vw; left: 12vw; top: 32svh; }
  .print--b { width: 34vw; left: 50vw; top: 38svh; }
  .print--c { width: 20vw; right: 4vw; bottom: -8vw; }
  .counter { width: min(48vw, calc((100svh - 26rem) * 0.8)); }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__field { min-height: 72svh; }
  .board-sec__title { grid-column: 1 / 13; }
  .board-sec__line { grid-column: 1 / 13; }
  [data-ui].board .brow__title { grid-column: 3 / 9; }
  [data-ui].board .brow__cat { display: none; }
  [data-ui].board .brow__grp { display: none; }
  [data-ui].board .brow__st { grid-column: 9 / 13; }
  .tally__left { grid-column: 1 / 13; }
  .slip-wrap { grid-column: 1 / 13; margin-top: 3rem; }
  .faq__q { grid-column: 1 / 13; }
  .faq__a { grid-column: 1 / 13; margin-top: 0.85rem; }
  .foot__invite { grid-column: 1 / 13; }
  .foot__contacts { grid-column: 1 / 13; }
}

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .hero__mark { font-size: 1.25rem; letter-spacing: 0.24em; }
  .hero__stage { padding-top: 6svh; padding-bottom: 10svh; }
  .counter { width: 70vw; min-width: 0; }
  .wordmark { font-size: 2.5rem; }
  .hero__line { font-size: var(--step-lead); max-width: 22ch; }
  .hero__row { flex-direction: column; gap: 0.75rem; width: 100%; }
  .hero__row > span { min-width: 0; text-align: center !important; }
  .hero__row .button { width: 100%; }
  .sign { min-height: 82svh; padding-block: 7svh 18svh; }
  .print--a { width: 50vw; left: 4vw; top: 24svh; }
  .print--b { width: 50vw; left: 46vw; top: 31svh; }
  .print--c { display: none; }
  .sign__note { right: max(var(--margin), env(safe-area-inset-right, 0px)); }
  .route { grid-template-columns: 1fr; }
  .route__field { min-height: 0; padding: 1.5rem 1.25rem 2.5rem; grid-template-rows: auto auto auto; align-content: start; gap: 1.5rem; }
  .route__slot { justify-items: start; padding-top: 0; order: 3; }
  .route__clause { order: 2; }
  [data-ui].board .brow__line { min-height: 64px; padding: 0 12px; }
  [data-ui].board .brow__code { grid-column: 1 / 7; font-size: 22px; }
  [data-ui].board .brow__title { display: none; }
  /* "show all" never opens, and without its title it would read only "+N" */
  [data-ui].board .brow.is-open .brow__title, [data-ui].board .brow--all .brow__title { display: block; grid-column: 1 / 13; grid-row: 2; padding-bottom: 6px; white-space: normal; }
  [data-ui].board .brow__st { grid-column: 7 / 13; height: 34px; font-size: 18px; padding: 0 10px; }
  [data-ui].board .brow__more { padding: 0 12px 16px; font-size: 16px; }
  [data-ui].board .brow__more > * { grid-column: 1 / 13; }
  [data-ui].board .bhead { padding: 12px; }
  [data-ui].board .bhead__cn { grid-column: 1 / 13; font-size: 1.75rem; }
  [data-ui].board .bhead__desc { grid-column: 1 / 13; margin-top: 6px; }
  [data-ui].board .bhead__count { grid-column: 1 / 13; text-align: left; margin-top: 4px; }
  .feat__para { line-height: 1.24; }
  .slot img { width: 1.5em; }
  .slot { min-width: 1.5em; }
  .feat__after { margin-top: 2.5rem; }
  .feat__after > div { grid-column: 1 / 13; }
  .feat__after .button { width: 100%; }
  .tally__total { font-size: 40vw; }
  .about__text { columns: 1; font-size: var(--step-lead); line-height: 1.3; }
  .hl--go { display: inline-block; margin-top: 1.25rem; padding: 0.5rem 0.6rem; }
  .cta { min-height: 46svh; }
  .cta__note { max-width: 18ch; font-size: 1.0625rem; }
  .foot__invite .button { width: 100%; }
  .foot__name { font-size: 34vw; }
}

/* ---------- motion (content stays visible without script; reduced motion = finished state) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: p3-rise 700ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
  .js .hero .counter[data-load] { transform: scale(0.97); animation: p3-settle 1200ms var(--ease-expo) forwards; animation-delay: 80ms; }
  .counter img.is-on { animation: p3-drift 7000ms var(--ease-soft) both; }
  .js [data-reveal] { opacity: 0; transform: translateY(var(--rise, 24px)); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .print[data-reveal] { transform: translateY(-40px) rotate(0deg); transition: opacity 700ms var(--ease-out), transform 1100ms var(--ease-expo); }
  .js .print--a[data-reveal].is-in { transform: rotate(-8deg); }
  .js .print--b[data-reveal].is-in { transform: rotate(6deg); }
  .js .print--c[data-reveal].is-in { transform: rotate(-3deg); }
  .js .slip-wrap[data-reveal] { opacity: 1; transform: none; }
  .js .slip-wrap[data-reveal] .slip { transform: translateY(-28px); clip-path: inset(0 0 100% 0); transition: transform 1100ms var(--ease-expo); }
  .js .slip-wrap[data-reveal].is-in .slip { transform: none; clip-path: polygon(0 0, 100% 0, 100.000% calc(100% - 12px), 97.727% 100%, 95.455% calc(100% - 12px), 93.182% 100%, 90.909% calc(100% - 12px), 88.636% 100%, 86.364% calc(100% - 12px), 84.091% 100%, 81.818% calc(100% - 12px), 79.545% 100%, 77.273% calc(100% - 12px), 75.000% 100%, 72.727% calc(100% - 12px), 70.455% 100%, 68.182% calc(100% - 12px), 65.909% 100%, 63.636% calc(100% - 12px), 61.364% 100%, 59.091% calc(100% - 12px), 56.818% 100%, 54.545% calc(100% - 12px), 52.273% 100%, 50.000% calc(100% - 12px), 47.727% 100%, 45.455% calc(100% - 12px), 43.182% 100%, 40.909% calc(100% - 12px), 38.636% 100%, 36.364% calc(100% - 12px), 34.091% 100%, 31.818% calc(100% - 12px), 29.545% 100%, 27.273% calc(100% - 12px), 25.000% 100%, 22.727% calc(100% - 12px), 20.455% 100%, 18.182% calc(100% - 12px), 15.909% 100%, 13.636% calc(100% - 12px), 11.364% 100%, 9.091% calc(100% - 12px), 6.818% 100%, 4.545% calc(100% - 12px), 2.273% 100%, 0.000% calc(100% - 12px)); }
  /* the split-flap: each row turns down on its top edge, row after row */
  [data-ui].board .brow.flap { animation: p3-flap 420ms var(--ease-out) both; animation-delay: calc(var(--r, 0) * 55ms); transform-origin: 50% 0; }
  .js .foot__name[data-reveal] { transform: translateY(46%); transition: transform 1300ms var(--ease-expo), opacity 600ms ease; }
  .js .foot__name[data-reveal].is-in { transform: translateY(26%); }
  .js .cta__verb[data-reveal] { transform: translateY(30%); }
  .js .cta__verb[data-reveal].is-in { transform: none; }
}
@keyframes p3-rise { to { opacity: 1; transform: none; } }
@keyframes p3-settle { to { opacity: 1; transform: none; } }
@keyframes p3-drift { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes p3-flap { from { transform: perspective(700px) rotateX(-78deg); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* ---------- the live site's additions: the language link, the 404 ---------- */
.hero__links { display: flex; align-items: center; gap: 1.25rem; }
.button--line { background: transparent; color: var(--field-1-ink); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) { .button--line:hover { background: var(--field-1-ink); color: var(--ink); } }
.nf { display: grid; align-content: center; justify-items: start; gap: 1.5rem; padding-block: 6svh 18svh; }
.nf__title { font-size: clamp(3.5rem, 1rem + 11vw, 10rem); color: var(--field-1-ink); }
.nf__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* without the script the board's rows cannot open: each one shows what it says */
html:not(.js) [data-ui].board .brow__more { display: grid; }