/* Hallmark · shape: Marquee Hero · genre: editorial · theme: Broadside (deal manual pick, seed rubrica-satirica-polemica-critica-de49·bec1b15f·2026-10-23·r0) · job: listen · draw: 409dad
 * hero: Ledge · nav: slab · footer: mast · imagery: none · signature: the accusation set as a public bill, the sovereign of the day fitted in vermilion · broadside: bill
 * axes: light/display-condensed/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · weakest: E, fitted lines depend on a script; a cqi size holds them when it does not run */
/* Hallmark · waive 55b · every .fit line is white-space nowrap and sized to its column by script and cqi · fitted wood capitals in Six Caps sit tight like a hand-set bill */
/* Hallmark · dismissed 23 · the vermilion band is the theme's one permitted accent band, under the committed posture, closing the page toward Conti Scomodi */
/* Hallmark · dismissed F4 · the hero pair is the theme's ink block beside a double-rule frame; the band button is the same ink block on vermilion */
/* Hallmark · dismissed 58 · the window at y 2500 holds the four rules of the bando, a set the author fixed at four, each one line */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Six Caps"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/six-caps-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bevan"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/bevan-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/archivo-narrow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/archivo-narrow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/archivo-narrow-latin-600-normal.woff2") format("woff2"); }

:root { --texture-opacity: 0.08; --nav-h: 72px; }
html, body { overflow-x: clip; }
body { font-size: 1.125rem; line-height: 1.5; }

.grained { position: relative; isolation: isolate; }
.grained::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-size: 200px 200px; opacity: var(--texture-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

h1, .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: var(--tracking-display); }
.fit { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 0.92; white-space: nowrap; overflow-wrap: normal; min-width: 0; }
h2, h3, .wordmark, .bev { font-family: var(--font-display-2); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: 0; overflow-wrap: break-word; min-width: 0; }
h2 { font-size: var(--text-section); }
.small { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* nav: slab */
.slab { background: var(--color-ink); color: var(--color-paper); }
.slab .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.slab .wordmark { font-size: var(--text-xl); color: var(--color-paper); text-decoration: none; white-space: nowrap; line-height: 1.04; }
.slab ul { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.slab a.nl { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); color: var(--color-paper); font-weight: 600; text-decoration: none; white-space: nowrap; }
.slab a.nl:hover { color: var(--color-paper); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.slab a:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 2px; }
.slab a.nl:active { background: var(--color-ink-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-xl); border: var(--rule-frame) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-sm)/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: none; }
.btn:hover { background: var(--color-ink-2); }
.btn:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--frame { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-paper), inset 0 0 0 4px var(--color-ink); }
.btn--frame:hover { background: var(--color-paper-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
a:not([class]):hover { color: var(--color-accent); }

/* hero: ledge */
.hero { min-height: calc(100dvh - var(--nav-h)); display: grid; align-content: end; padding-block: var(--space-lg) var(--space-lg); }
.hero .container { container-type: inline-size; }
.hero__bill { --f: min(calc((100dvh - 200px) / 1.3), 29cqi); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xl); align-items: end; padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-ink); }
.hero h1 { margin: 0; max-width: none; display: grid; gap: var(--space-xs); justify-items: start; }
.hero .l1 { font-size: var(--f); line-height: 0.86; }
.hero .l2 { font-size: calc(var(--f) * 0.45); color: var(--color-accent); }
.hero__foot { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.hero__foot .lead { font-size: var(--text-lead); max-width: 30ch; }

/* atto: particulars as rows */
.atto { padding-block: var(--section-gap-s) var(--section-gap); }
.atto__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); margin-bottom: var(--space-xl); }
.atto__head .small { justify-self: end; }
.parts { margin: 0; }
.parts > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.parts dt { font-family: var(--font-display-2); text-transform: uppercase; font-size: var(--text-title); line-height: 1.1; }
.parts dd { margin: 0; font-weight: 600; font-size: var(--text-lead); line-height: 1.4; max-width: 52ch; }
.parts dd .src { display: block; margin-top: var(--space-2xs); font-weight: 400; font-size: var(--text-md); color: var(--color-muted); }
.verdict { container-type: inline-size; margin-top: var(--space-2xl); }
.verdict .fit { font-size: 15cqi; color: var(--color-ink); }
.verdict .fit + .fit { color: var(--color-accent); }

/* registro */
.registro { padding-block: 0 var(--section-gap); }
.registro h2 { max-width: none; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); margin-bottom: var(--space-xl); }
.reg { margin: 0; padding: 0; list-style: none; }
.reg li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.reg a { display: grid; grid-template-columns: 6rem minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); color: var(--color-ink); text-decoration: none; }
.reg a:hover .bev { color: var(--color-accent); }
.reg a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.reg a:active { background: var(--color-paper-2); }
.reg .n { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 0.88; font-variant-numeric: tabular-nums; }
.reg .bev { font-size: var(--text-title); }
.reg .c { color: var(--color-ink-2); }

/* regole: a bill in three columns */
.regole { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.regole h2 { margin-bottom: var(--space-xl); }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols > div { container-type: inline-size; padding: var(--space-md) var(--space-lg) 0; border-top: var(--rule-bar) solid var(--color-ink); display: grid; gap: var(--space-sm); align-content: start; }
.cols > div + div { border-left: var(--rule-bar) solid var(--color-ink); }
.cols > div:first-child { padding-left: 0; }
.cols .fit { font-size: 62cqi; }
.cols .bev { font-size: var(--text-title); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink); }
.cols p { max-width: 34ch; }
@media (max-width: 75rem) and (min-width: 60.01rem) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } .cols > div:nth-child(3) { border-left: 0; padding-left: 0; } }

/* close: the vermilion band */
.band { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section-gap-s); }
.band .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: end; }
.band h2 { color: var(--color-accent-ink); }
.band p { color: var(--color-accent-ink); font-size: var(--text-lead); max-width: 40ch; margin-top: var(--space-md); }
.band .btn { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); justify-self: end; }
.band .btn:hover { background: var(--color-ink-2); }
.band .btn:focus-visible { outline-color: var(--color-accent-ink); }

/* footer: mast */
.mast { padding-block: var(--space-2xl) var(--space-xl); }
.mast__wm { container-type: inline-size; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); }
.mast__wm .fit { font-size: 40cqi; }
.mast__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); padding-top: var(--space-lg); margin-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.mast ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; justify-content: end; }
.mast a { color: var(--color-ink); }
.mast__row p { color: var(--color-muted); }
.mast__wm .fit { color: var(--color-ink); }

@media (max-width: 60rem) {
  .slab ul { gap: 0; } .slab a.nl { padding: 0 var(--space-xs); }
  .hero { min-height: 0; padding-top: var(--space-3xl); }
  .hero__bill { --f: 40cqi; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .atto__head, .band .container, .mast__row { grid-template-columns: minmax(0, 1fr); }
  .band .btn, .atto__head .small { justify-self: start; }
  .parts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .reg a { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .reg .c { grid-column: 2; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cols > div, .cols > div:first-child { padding-left: 0; }
  .cols > div + div { border-left: 0; }
  .cols .fit { font-size: 16cqi; }
  .mast ul { justify-content: start; }
}
@media (max-width: 40rem) { .slab .wordmark { font-size: var(--text-lg); } .slab a.nl.opt { display: none; } }

/* pagina d'attesa */
/* Hallmark · answered · registro senza link (.reg .row), stessa griglia delle righe con link */
.reg .row { display: grid; grid-template-columns: 6rem minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); }
.atto__intro { font-size: var(--text-lead); max-width: 58ch; margin-bottom: var(--space-xl); }
@media (max-width: 60rem) { .reg .row { grid-template-columns: 3.5rem minmax(0, 1fr); } .reg .row .c { grid-column: 2; } }