/* ============================================================
   ITALIA INNOVATION — IDENTITY PROGRAMME
   Local install of design project 839c9689-7610-4b9d-889b-0420b968c8ed
   ("Italia Innovation Identity Programme"), pulled via DesignSync
   2026-08-07. Tokens below are transcribed verbatim from the project's
   tokens/{colors,typography,grid,motion,base}.css — do not edit here;
   edit upstream and re-pull.

   Register: Otl Aicher's 1962 Lufthansa programme crossed with Olivetti
   under Adriano. Italy as industrial modernism, never as heritage.
   "Never argue, always demonstrate. The page is evidence and nothing else."
   ============================================================ */

/* ---------- FONTS ----------
   LOCAL DEVIATION, documented: the programme specifies Neue Haas Grotesk
   TEXT Pro for interface, Micro labels and every numeral. Those cuts are
   not installed in this repository (only Display Pro + Simoncini are
   licensed here). --font-text therefore resolves to Display Pro, which is
   the same grotesque at a different optical size, then to Helvetica Neue.
   This follows the programme's own precedent for Forma DJR Mono: an
   unavailable face is dropped, not faked. Re-point --font-text the day
   Text Pro is licensed; nothing else changes. */
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-55Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-56It.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-65Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-66MdIt.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-75Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NHG Display Pro";src:url("fonts/NHaasGroteskDSPro-76BdIt.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Simoncini Garamond";src:url("fonts/SimonciniGaramondStd.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Simoncini Garamond";src:url("fonts/SimonciniGaramondStd-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Simoncini Garamond";src:url("fonts/SimonciniGaramondStd-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* Simoncini has no Bold Italic — it does not exist. Never rely on one or the
   browser synthesises a fake slant. */

:root{
/* ---------- COLOUR — five members, no sixth ----------
   Names are load-bearing: they encode behaviour. Never rename the blue
   after anything marine; the name would pull decisions toward the sea and
   away from the machine. */
/* RE-CUT 2026.08 (AN 17). #0B4C9B -> #05164D, the depth of the current Lufthansa
   navy: the register of this programme is Aicher's 1962 system and this is the
   value that system wears now. 15.19:1 on paper — reversed paper type gains four
   steps, so fields hold Micro without the ground being lightened under them.
   The consequence is carried, not ignored: at 1.11x from ink a small blue disc
   beside black type reads as black, so the marker floor rises 9 -> 11 px and a
   marker is kept clear of black type by more than one diameter. */
--blue:#05164D;          /* il campo — technical drawing ink, machine enamel */
--blue-press:#030E33;    /* the enamel one impression heavier; #083C7B has left the palette */
--blue-hair:#05164D;
--marker-floor:11px;     /* the nine-pixel law, re-cut: a placed case must be SEEN to be blue */
--black:#111111;         /* inchiostro e ghisa — ink and cast iron */
--yellow:#F5C400;        /* segnaletica — factory safety marking. Once per screen. */
--paper:#F4F1EA;         /* warm ground; a screen should read as printed matter */
--paper-deep:#EAE6DC;    /* the same ground, one press impression heavier */
--grey:#8A867C;          /* secondary structure + the English parallel line */

--text-primary:var(--black);
--text-parallel:var(--grey);
--text-on-field:var(--paper);
--surface-page:var(--paper);
--surface-inset:var(--paper-deep);
--surface-field:var(--blue);
--rule-structure:color-mix(in srgb,var(--black) 22%,transparent);
--rule-strong:var(--black);
--rule-hazard:var(--yellow);
--node-case:var(--blue);
--node-planned:var(--grey);
--focus-ring:var(--yellow);
/* RATIO as area: paper 82 · black 11 · blue 6 · grey 1 · yellow <0.4 */

/* ---------- TYPE — two families, four roles, five steps ---------- */
--font-display:"NHG Display Pro","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,sans-serif;
--font-text:"NHG Display Pro","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,sans-serif;
--font-numeral:var(--font-text); /* + font-variant-numeric:tabular-nums */
--font-body:"Simoncini Garamond",Georgia,serif;

--step-banner:clamp(48px,7.4vw,104px);
--step-display:clamp(30px,3.4vw,50px);
--step-title:clamp(19px,1.5vw,25px);
--step-text:16.5px;
--step-micro:11.5px;
--step-body-serif:19px;

--lh-banner:0.92;--lh-display:1.0;--lh-title:1.16;
--lh-text:1.45;--lh-micro:1.28;--lh-body-serif:1.62;

--tr-banner:-0.035em;--tr-display:-0.02em;--tr-title:-0.01em;
--tr-text:0;--tr-micro:0.07em;

--w-light:300;--w-regular:400;--w-medium:500;--w-bold:700;

--pair-gap:0.28em;      /* the fixed Italian/English gap */
--measure-serif:34em;
--measure-text:31em;

/* ---------- GRID ---------- */
--cols:12;--gutter:24px;
--margin-page:clamp(20px,3.4vw,56px);
--max-page:1560px;
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:144px;
--hair:1px;--rule-weight-hazard:3px;
--radius:0px;   /* nothing is rounded. Nothing. */
--shadow:none;  /* elevation is rule weight, position and the ground */

/* ---------- THE MARK — il punto / il blocco ---------- */
--mark-w:56px;--mark-ratio:1.45;--mark-cut:0.38;
--mark-globe:1.66;--mark-clear:0.5;--mark-min:26px;--mark-inline:0.73em;

/* ---------- MOTION ---------- */
--dur-1:110ms;--dur-2:180ms;--dur-3:280ms;
--ease:cubic-bezier(.2,0,.2,1);
--dur-accrue:420ms;--dur-live:1800ms;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-text);font-size:var(--step-text);
  line-height:var(--lh-text);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--rule-structure);
  transition:border-color var(--dur-1) var(--ease)}
a:hover{border-bottom-color:var(--black)}
a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--w-bold)}
p{margin:0}
time,.num,[data-num]{font-family:var(--font-numeral);font-variant-numeric:tabular-nums}
::selection{background:var(--yellow);color:var(--black)}

/* ---------- SIGNATURE ELEMENTS ---------- */
/* Bilingual pair: Italian in ink, English in grey directly beneath, same size,
   same measure, fixed gap so a longer English string never shifts the Italian. */
.pair-it{display:block}
.pair-en{display:block;color:var(--text-parallel);margin-top:var(--pair-gap)}

/* Micro label: caps, tracked open — with no mono face, this tracking IS the
   technical register. */
.micro{font-family:var(--font-text);font-size:var(--step-micro);
  line-height:var(--lh-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase}

/* Type steps */
.t-banner{font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--step-banner);line-height:var(--lh-banner);letter-spacing:var(--tr-banner)}
.t-display{font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--step-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.t-title{font-family:var(--font-display);font-weight:var(--w-medium);
  font-size:var(--step-title);line-height:var(--lh-title);letter-spacing:var(--tr-title)}
.t-body{font-family:var(--font-body);font-size:var(--step-body-serif);
  line-height:var(--lh-body-serif);max-width:var(--measure-serif)}

/* Rules — elevation substitute */
.rule{border:0;border-top:var(--hair) solid var(--rule-structure);margin:0}
.rule-strong{border-top-color:var(--rule-strong)}
.rule-hazard{border-top:var(--rule-weight-hazard) solid var(--rule-hazard)}

/* Records are rows bounded by hairlines, or blocks on paper-deep.
   Cards are not cards: no floating panel, no border-plus-shadow. */
.record{border-top:var(--hair) solid var(--rule-structure);padding:var(--s-5) 0}
.inset{background:var(--surface-inset);padding:var(--s-5)}

/* Serial — zero-padded, tabular */
.serial{font-family:var(--font-numeral);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-micro)}

/* The live state — the only animation in the identity */
@keyframes punto-live{0%,100%{opacity:1}50%{opacity:.34}}
.punto-live{animation:punto-live var(--dur-live) var(--ease) infinite}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-accrue:0ms}
  .punto-live{animation:none}}