/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: Studio (deal 3/3, seed sito-personale-bilingue-che-c318·83ff818a·2026-11-15·r0) · job: hire · draw: 785d91
 * hero: Stage · nav: floating pill · footer: colophon block · imagery: the user's photographs 2, charts of the user's data 5 · signature: the lab map with the measured trajectory drawn as ink against an orange guide
 * axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the stage facts ran long; cut every stage to one line and a short list */
/* Hallmark · dismissed 58 · the static count reads the code inside eight closed details rows and two hidden tab panels; the rendered page shows about 470 words, chart axis labels included */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --font-code: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --nav-h: 56px;
  --mark-len: 10px;
  --mark-off: 14px;
}

/* ---------- shared pieces ---------- */
.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); }

.proof { position: relative; isolation: isolate; }
.proof::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain), radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 160px 160px, 24px 24px; -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent); mask-image: linear-gradient(to bottom, black 62%, transparent); }
.proof--up::before { -webkit-mask-image: linear-gradient(to top, black 62%, transparent); mask-image: linear-gradient(to top, black 62%, transparent); }

.crop { position: relative; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--mark-off)); pointer-events: none; --m: linear-gradient(var(--color-mark), var(--color-mark));
  background:
    var(--m) 0 var(--mark-off) / var(--mark-len) 1px no-repeat, var(--m) var(--mark-off) 0 / 1px var(--mark-len) no-repeat,
    var(--m) 100% var(--mark-off) / var(--mark-len) 1px no-repeat, var(--m) calc(100% - var(--mark-off)) 0 / 1px var(--mark-len) no-repeat,
    var(--m) 0 calc(100% - var(--mark-off)) / var(--mark-len) 1px no-repeat, var(--m) var(--mark-off) 100% / 1px var(--mark-len) no-repeat,
    var(--m) 100% calc(100% - var(--mark-off)) / var(--mark-len) 1px no-repeat, var(--m) calc(100% - var(--mark-off)) 100% / 1px var(--mark-len) no-repeat; }

.btn { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 2px; background: var(--color-paper-hi); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 2px; border: var(--rule-hair) solid var(--color-mark); pointer-events: none; }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.caption, figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 70ch; }
figure { margin: 0; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); }

/* ---------- nav: a floating pill ---------- */
.nav-wrap { position: sticky; top: var(--space-md); z-index: var(--z-sticky-nav); padding: var(--space-md) var(--gutter) 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); width: min(100%, 60rem); min-height: var(--nav-h); margin-inline: auto; padding: 0 var(--space-xs) 0 var(--space-lg); background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.nav__mark { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; color: var(--color-ink-2); transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__end { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 500; }
.nav__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-xs); text-decoration: none; color: var(--color-ink-2); white-space: nowrap; }
.nav__lang:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- hero: Stage ---------- */
.hero { margin-top: calc(-1 * (var(--nav-h) + var(--space-md) * 2)); padding-top: calc(var(--nav-h) + var(--space-md) * 2); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - var(--space-md) * 2); padding-block: var(--space-xl) var(--space-2xl); }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero__figure { min-width: 0; }

/* ---------- charts ---------- */
.chart { position: relative; background: var(--color-paper-hi); }
.chart--map { aspect-ratio: 4 / 3; }
.chart--square { aspect-ratio: 1 / 1; max-height: 600px; }
.chart--wide { aspect-ratio: 3 / 1; min-height: 320px; background: transparent; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart img { width: 100%; height: 100%; object-fit: contain; }
.chart text { font: 500 12px var(--font-body); fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.chart .t-ink { fill: var(--color-ink); }
.g-rule { stroke: var(--color-rule); stroke-width: 1; fill: none; }
.s-ink { stroke: var(--color-ink); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.s-accent { stroke: var(--color-accent); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.s-muted { stroke: var(--color-muted); stroke-width: 1; fill: none; }
.s-thin { stroke-width: 1; }
.f-muted { fill: var(--color-muted); }
.f-ink { fill: var(--color-ink); }
.f-accent { fill: var(--color-accent); }
.f-paper { fill: var(--color-paper-hi); }
.stop { cursor: pointer; }
.stop .hit { fill: transparent; }
.stop:hover .ring, .stop:focus-visible .ring, .stop.is-on .ring { stroke-width: 3; }
.stop:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-in 0.8s var(--ease-out) 0.15s forwards; }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw-in { animation: none; stroke-dashoffset: 0; } }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-md) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.sw { flex-shrink: 0; width: 20px; height: 2px; background: var(--color-ink); }
.sw--accent { background: var(--color-accent); }
.sw--muted { height: 1px; background: var(--color-muted); }
.sw--dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-muted); }
.readout { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* ---------- stages ---------- */
.stage { padding-top: var(--section-gap); }
.stage--tight { padding-top: var(--section-gap-s); }
.stage--wide { padding-top: var(--section-gap-l); }
.stage--band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.stage__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.stage__head h2 { grid-column: 1 / span 7; }
.stage__head .lead { grid-column: 9 / span 4; }
.stage--band .stage__head { border-top: 0; padding-top: 0; }
.stage__head--under { margin: var(--space-xl) 0 0; padding-top: 0; border-top: 0; align-items: start; }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.split__text { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.split__text--narrow { grid-column: 1 / span 5; }
.split__media { grid-column: 8 / span 5; min-width: 0; }
.split__media--wide { grid-column: 6 / span 7; }

.facts { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 500; color: var(--color-ink); }
.facts dd { margin: 0; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

.photo { border-radius: var(--radius-card); }
.photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--lab { aspect-ratio: 2 / 1; }

.code { margin: 0; padding: var(--space-xl); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); font: 400 var(--text-sm)/1.6 var(--font-code); overflow-x: auto; tab-size: 2; }
.code code { font: inherit; white-space: pre; }
.code:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- switcher ---------- */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.seg button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 2px; background: transparent; color: var(--color-ink-2); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.seg button:active { transform: translateY(1px); }
.seg button[aria-selected="true"] { border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) .seg { display: none; }
.panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.panel + .panel { margin-top: var(--space-2xl); }
.panel__chart { grid-column: 1 / span 6; min-width: 0; }
.panel__data { grid-column: 8 / span 5; display: grid; gap: var(--space-lg); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { margin-bottom: var(--space-md); text-align: left; font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: -0.005em; color: var(--color-ink); }
th, td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
thead th { border-bottom-color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
tbody th { font-weight: 500; }
td.num, th.num { text-align: right; padding-left: var(--space-md); white-space: nowrap; }

/* ---------- index of nodes ---------- */
.index { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.index > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index summary { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); cursor: pointer; list-style: none; transition: background-color var(--dur-micro) var(--ease-out); }
.index summary::-webkit-details-marker { display: none; }
.index summary:hover { background: var(--color-paper-2); }
.index summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.index h3 { grid-column: 1 / span 4; }
.index__pkg { grid-column: 5 / span 3; font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.index__what { grid-column: 6 / span 6; color: var(--color-ink-2); }
.index__n { grid-column: 12 / span 1; text-align: right; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.index details[open] summary { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index__body { padding-block: var(--space-lg) var(--space-xl); }
.index__body figcaption { margin: 0 0 var(--space-sm); color: var(--color-muted); }

/* ---------- footer: a colophon block ---------- */
.foot { margin-top: var(--section-gap-l); padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.foot__colophon { grid-column: 1 / span 7; font-family: var(--font-display); font-size: var(--text-title); line-height: 1.3; letter-spacing: -0.005em; max-width: 34ch; }
.foot__contact { grid-column: 9 / span 4; display: grid; gap: var(--space-sm); align-content: start; color: var(--color-ink-2); }
.foot__contact a:hover { text-decoration-color: var(--color-accent); }
.foot__legal { grid-column: 1 / -1; margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- small screens ---------- */
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .stage__head h2, .stage__head .lead, .split__text, .split__text--narrow, .split__media, .split__media--wide, .panel__chart, .panel__data, .foot__colophon, .foot__contact { grid-column: 1 / -1; }
  .chart--wide { aspect-ratio: auto; height: 320px; }
  .photo--lab { aspect-ratio: 4 / 3; }
  .index summary { row-gap: var(--space-2xs); }
  .index h3 { grid-column: 1 / span 9; }
  .index__n { grid-column: 10 / span 3; grid-row: 1; }
  .index__pkg, .index__what { grid-column: 1 / -1; }
  .code { padding: var(--space-md); }
}
@media (max-width: 40rem) {
  .nav { padding-left: var(--space-md); gap: var(--space-xs); }
  .nav__mark { font-size: var(--text-md); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) { .btn, .seg button, .index summary, .nav__links a { transition: none; } }