/* base: what every component needs (tokens, font, reset, the bar, the buttons, section heads, the reveal, the footer).
   The Simulator landing's kit (adr-simulator, star-base branch), reskinned as STAR BUILDERS on 2026-10-02
   (starbuilders-brand/README.md): night is black, day is white, no navy and no blue. Colour lives only in tags
   (components/chapter/: a pale pill and a solid dot). Display is ABC Favorit Light 300, body is Inter, the one
   accent word is Ed Nimpkish: written lowercase in an <em> inside a title, it comes out as the lockup's script
   capitals (never a word with an F in it: the verb or the feeling, never the product noun). Glass stays: smoke
   over the night, milk over the day. Every motion token and the --px type system are the kit's, untouched.
   The token names are the kit's (Italian) so every component keeps working: --blu is now "the ink of the action"
   (white at night, black by day), never a colour. Inter: SIL Open Font License 1.1, self-hosted in /fonts. */
@font-face{font-family:"ABC Favorit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/abc-favorit-light.woff2) format("woff2")}
@font-face{font-family:"Ed Nimpkish";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/EDNimpkish-Regular.ttf) format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* .cl-frame is an island of night too: a clip's picture is dark whichever section it sits in, so its white is always white */
:root,.notte,.cl-frame{
  color-scheme:dark;
  /* the night: black, then four steps of grey, no hue */
  --fondo:oklch(0% 0 0);--fondo-2:oklch(9% 0 0);--piano:oklch(12.5% 0 0);--piano-2:oklch(16% 0 0);--piano-3:oklch(20% 0 0);
  --riga:oklch(100% 0 0/.1);--riga-2:oklch(100% 0 0/.18);
  --ink:oklch(100% 0 0);--ink-2:oklch(100% 0 0/.74);--ink-3:oklch(100% 0 0/.54);--spento:oklch(100% 0 0/.34);
  /* the ink of the action: white at night. No blue anywhere. */
  --blu:oklch(100% 0 0);--blu-su:oklch(88% 0 0);--blu-t:oklch(92% 0 0);--blu-velo:oklch(100% 0 0/.1);--su-blu:oklch(0% 0 0);
  /* the only colours, for tags and nothing else (grades and states) */
  --ok:oklch(76% .15 155);--att:oklch(80% .13 78);
  --ombra-forte:oklch(0% 0 0/.8);
  /* the names the demo form still uses */
  --dim:var(--ink-2);--mute:var(--ink-3);--line:var(--riga);--line-2:var(--riga-2);
}
/* the day: white, black ink, black at 8% and 4% for the hairlines and the slabs (the guide's). A section with .giorno
   cuts from night to day; .notte inside it is an island of night again (a product window, the labels on the map).
   .sul-giorno is what the floating pieces (the bar, the ask box) wear while a day section is under them. */
.giorno,.sul-giorno{
  color-scheme:light;
  --fondo:oklch(100% 0 0);--fondo-2:oklch(100% 0 0);--piano:oklch(96% 0 0);--piano-2:oklch(93% 0 0);--piano-3:oklch(89% 0 0);
  --riga:oklch(0% 0 0/.08);--riga-2:oklch(0% 0 0/.16);
  --ink:oklch(0% 0 0);--ink-2:oklch(0% 0 0/.72);--ink-3:oklch(0% 0 0/.52);--spento:oklch(0% 0 0/.26);
  --blu:oklch(12% 0 0);--blu-su:oklch(30% 0 0);--blu-t:oklch(22% 0 0);--blu-velo:oklch(0% 0 0/.06);--su-blu:oklch(100% 0 0);
  --ok:oklch(50% .14 155);--att:oklch(56% .14 65);
  --ombra-forte:oklch(0% 0 0/.18);
  --dim:var(--ink-2);--mute:var(--ink-3);--line:var(--riga);--line-2:var(--riga-2);
}
.giorno{background:var(--fondo);color:var(--ink)}
.notte,.sul-giorno{color:var(--ink)}
:root{
  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* --serif keeps its name so every title in the kit follows: it is ABC Favorit Light now */
  --serif:"ABC Favorit","Helvetica Neue",Helvetica,Arial,sans-serif;
  --accent:"Ed Nimpkish","Helvetica Neue",Helvetica,Arial,sans-serif;
  --barra-h:60px;--largo:1200px;--gutter:clamp(16px,4vw,40px);
  --sez:clamp(120px,11vw,184px);   /* the room between sections (Tommi, 2026-10-01: "more white space") */
  /* one design pixel (Tommi, 2026-10-01: "se metti Command+ o Command-... voglio che controlli tu gli spazi"): a pixel
     on a phone, 1/1440 of the window from 900px up, so a browser zoom leaves the text as it is (the reference site's way:
     sizes that follow the window). Every text size is a number of these. */
  --px:1px;
  /* the type scale, smaller than before and close to the reference site's: on a phone here, from 900px up below */
  --t-h2:32px;--t-h3:26px;--t-lead:20px;--t-corpo:16px;--t-lista:17px;--t-nota:14.5px;
  --e-esce:cubic-bezier(.16,1,.3,1);--e-molla:cubic-bezier(.34,1.56,.64,1);--e-ui:cubic-bezier(.4,0,.6,1);
  --e-out:var(--e-esce);--e:var(--e-esce);
  /* glass, very blurred (Tommi, 2026-09-30: "i bottoni estremamente blurred"): smoke at night, milk by day */
  /* glass: smoke at night, milk by day, tinted deep and never blurred. blur(40px) of what lies behind, under the bar, its
     tabs and the glass buttons, was redrawn on every frame of the scroll; on the Simulator landing it alone made the page
     stutter at 120 Hz (landing-kit rule 3, Tommi, 2026-10-02: "its still soooo luggy and slow"). One place to bring it back */
  --vetro-sfoca:none;
  /* the guide's display: Favorit Light, tracked tight (measured on the reference: 48 at -1.92, so -.04em) */
  --track:-.04em;
}
@media (min-width:900px){:root{--px:clamp(.8px,100vw / 1440,1.3px);--t-h2:calc(50 * var(--px));--t-h3:calc(36 * var(--px));--t-lead:calc(22 * var(--px));--t-corpo:calc(16.5 * var(--px));--t-lista:calc(18 * var(--px));--t-nota:calc(14.5 * var(--px))}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fondo);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barra-h) + 8px)}
body{margin:0;background:var(--fondo);color:var(--ink);font-family:var(--font);font-weight:400;font-size:calc(17 * var(--px));line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ol,ul{margin:0}
::selection{background:oklch(100% 0 0/.3);color:var(--ink)}
.giorno ::selection{background:oklch(0% 0 0/.16)}
.salta{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--fondo);font-weight:600;transition:top .2s}
.salta:focus{top:10px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ---------- the accent word: Ed Nimpkish, the lockup's script. Write it lowercase in an <em> inside a title (or put
   .acc on any span): the script is its capitals. One per title, the verb or the feeling, never a word with an F ---------- */
:is(h1,h2,h3,.titolo,.cl-h2,.in-t,.sc-h,.fr-t) em,.acc{font-family:var(--accent);font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;line-height:.9}

/* ---------- section heads ---------- */
.giro,.wrap{width:min(var(--largo),100% - 2 * var(--gutter));margin-inline:auto}
.sez{padding-block:var(--sez);position:relative}
/* the line over a title: small, spaced capitals in Inter, in the quiet ink (no colour, and no mono, by the guide) */
.occhio{display:block;font-size:calc(13 * var(--px));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.titolo{font-family:var(--serif);font-size:var(--t-h2);font-weight:300;line-height:1.02;letter-spacing:var(--track);text-wrap:balance}
.titolo em{font-style:normal}
.sotto{font-size:var(--t-corpo);line-height:1.4;letter-spacing:-.012em;color:var(--ink-2);max-width:32ch;text-wrap:pretty}
.sotto b{color:var(--ink);font-weight:600}
.capo{text-align:center;display:grid;justify-items:center;gap:22px}
.capo .sotto{margin-inline:auto}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:var(--track)}

/* ---------- buttons: the action is the ink (white at night, black by day), glass is the second one, the link with the chevron goes further ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;background:oklch(100% 0 0);color:oklch(0% 0 0);font-size:calc(17 * var(--px));font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s var(--e-ui),transform .45s var(--e-molla),box-shadow .2s var(--e-ui)}
.giorno .btn,.sul-giorno .btn{background:var(--blu);color:var(--su-blu)}
.btn-vetro{background:linear-gradient(180deg,oklch(100% 0 0/.16),oklch(100% 0 0/.05));color:var(--ink);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.34),inset 0 0 0 1px oklch(100% 0 0/.14),0 16px 40px -18px oklch(0% 0 0/.6)}
.giorno .btn-vetro{background:linear-gradient(180deg,oklch(0% 0 0/.06),oklch(0% 0 0/.03));box-shadow:inset 0 0 0 1px oklch(0% 0 0/.1)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink);font-size:calc(17 * var(--px));font-weight:500;letter-spacing:-.01em}
.btn-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e-esce)}
@media (hover:hover){
  .btn:hover{background:oklch(90% 0 0);box-shadow:0 10px 40px -10px oklch(100% 0 0/.45)}
  .giorno .btn:hover,.sul-giorno .btn:hover{background:var(--blu-su);box-shadow:0 10px 30px -10px oklch(0% 0 0/.5)}
  .btn-vetro:hover{background:oklch(100% 0 0/.2);box-shadow:inset 0 1px 0 oklch(100% 0 0/.42),inset 0 0 0 1px oklch(100% 0 0/.26),0 16px 40px -18px oklch(0% 0 0/.6)}
  .giorno .btn-vetro:hover{background:oklch(0% 0 0/.08)}
  .btn-link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .btn-link:hover svg{transform:translateX(3px)}
}

/* glass panels: smoke over the night, milk over the day */
.vetro{position:relative;isolation:isolate;background:linear-gradient(180deg,oklch(100% 0 0/.13),oklch(100% 0 0/.045));-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.32),inset 0 -1px 0 oklch(100% 0 0/.05),0 24px 60px -24px oklch(0% 0 0/.7)}
.vetro::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,oklch(100% 0 0/.55),oklch(100% 0 0/.08) 38%,oklch(100% 0 0/.04) 62%,oklch(100% 0 0/.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.giorno .vetro{background:linear-gradient(180deg,oklch(100% 0 0/.86),oklch(100% 0 0/.62));box-shadow:inset 0 1px 0 oklch(100% 0 0),0 0 0 1px oklch(0% 0 0/.08),0 18px 50px -20px oklch(0% 0 0/.2)}
.giorno .vetro::before{display:none}

/* ---------- the bar: clear and wide over the first screen; once the page moves, a pill floating under the top edge,
   very blurred, smoke over the night and milk over the day (Tommi, 2026-09-30: "a pillola e non fissa sopra") ---------- */
.barra{position:fixed;inset:0 0 auto;z-index:100;display:flex;flex-direction:column;align-items:center;padding-top:0;pointer-events:none;transition:padding .5s var(--e-esce)}
.barra .giro{pointer-events:auto;height:var(--barra-h);display:flex;align-items:center;gap:24px;padding:0;border-radius:999px;background:oklch(100% 0 0/0);transition:width .7s var(--e-molla),height .5s var(--e-esce),padding .5s var(--e-esce),background-color .35s var(--e-ui),box-shadow .35s var(--e-ui),-webkit-backdrop-filter .35s var(--e-ui),backdrop-filter .35s var(--e-ui)}
.barra.piena{padding-top:12px}
.barra.piena .giro{width:min(860px,100% - 24px);height:54px;padding:0 7px 0 22px;border-radius:27px;background:oklch(12% 0 0/.94);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.2),inset 0 0 0 1px oklch(100% 0 0/.1),0 20px 50px -20px oklch(0% 0 0/.8)}
.barra.piena.sul-giorno .giro{background:oklch(100% 0 0/.95);box-shadow:inset 0 1px 0 oklch(100% 0 0/.9),0 0 0 1px oklch(0% 0 0/.08),0 18px 50px -20px oklch(0% 0 0/.25)}
/* a strip of tabs marked data-dock (the six steps' on /come-funziona, the chapters' here) docks into the bar once it reaches it (Tommi,
   2026-10-01: "the progress bar has to integrate seamlessly with the nav bar"): base.js lays a copy of it under the pill (and marks the strip .dockable; a page without base.js keeps it sticky),
   the pill widens and opens downward to hold it, the original hides until the page comes back up to it */
.barra .bar-tabs{position:relative;top:auto;z-index:auto;pointer-events:auto;display:grid;grid-template-rows:0fr;width:min(860px,100% - 24px);margin:0;opacity:0;border-radius:0 0 24px 24px;background:oklch(12% 0 0/.94);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 -1px 0 oklch(100% 0 0/.08),0 24px 50px -24px oklch(0% 0 0/.8);transition:grid-template-rows .55s var(--e-esce),opacity .3s var(--e-ui),width .7s var(--e-molla)}
.barra .bar-tabs>ol{min-height:0;overflow:hidden;width:auto;margin:0;padding:0 22px}
.barra.with-tabs .giro,.barra.with-tabs .bar-tabs{width:min(1240px,100% - 24px)}
.barra.with-tabs .giro{border-radius:27px 27px 0 0}
.barra.with-tabs .bar-tabs{grid-template-rows:1fr;opacity:1}
.barra.sul-giorno .bar-tabs{background:oklch(100% 0 0/.95);box-shadow:0 18px 50px -20px oklch(0% 0 0/.25)}
[data-dock].dockable{position:relative!important;top:auto!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-dock].docked{visibility:hidden}
/* no frosted glass anywhere on the page, the clips' chips, sheets and veils included: each was redrawn on every frame
   (landing-kit rule 3). Their own backgrounds are already tinted; this is the one place to bring the glass back */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (max-width:899px){.barra .bar-tabs>ol{overflow-x:auto;padding:0 14px}}

/* the name: the lockup (an asterisk, STAR in Favorit, BUILDERS in the script), drawn once in the page as a <symbol id="sb-lockup">
   and used here and in the footer; it takes the ink of whatever it sits on */
.marchio{display:inline-flex;align-items:center;gap:8px;padding-block:10px;white-space:nowrap;line-height:1;color:var(--ink)}
.marchio svg{height:calc(19 * var(--px));width:auto;aspect-ratio:935.42/132;fill:currentColor;stroke:none;overflow:visible}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.barra nav a[data-voce]{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:calc(14 * var(--px));color:var(--ink-2);border-radius:999px;transition:color .2s}
.barra .btn{min-height:38px;padding:0 17px;border-radius:999px;font-size:calc(14 * var(--px));margin-left:8px}
@media (hover:hover){.barra nav a[data-voce]:hover{color:var(--ink)}}
@media (max-width:760px){.barra nav a[data-voce]{display:none}.barra.piena .giro{padding-left:18px}}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0}
.rv.vis{animation:sale 1.15s var(--e-esce) forwards}
.rv.vis.su{animation-name:scende}
.rv.via{animation:via .45s var(--e-ui) forwards}
/* what comes in rises out of a light blur, as the reference site's pieces do (Tommi, 2026-10-01: "better animation of new stuff
   coming in"); /clip's blocks (.cl-rv) do the same from components/clips/clips.css, the clips themselves without the blur */
/* no blur on the way in: a blur that changes is redrawn on every frame (landing-kit rule 3); fading and rising cost nothing */
@keyframes sale{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes scende{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes via{from{opacity:1}to{opacity:0}}
.pagina-in{animation:sale .9s var(--e-esce) both}

/* ---------- footer: the name as wide as the screen (the lockup, drawn in the page), over the glass ---------- */
.piede{position:relative;isolation:isolate;padding:clamp(88px,9vw,140px) 0 120px;text-align:center;overflow:hidden}
.piede>.glass-field{opacity:.42}
.piede::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--fondo),oklch(0% 0 0/.3) 45%,oklch(0% 0 0/.55));pointer-events:none}
/* the pages in one row, wrapping on a phone (Tommi, 2026-10-05: "make the footer layout horizontally the pages not vertically") */
.piede-voci{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em 1.1em;font-family:var(--serif);font-weight:300;font-size:var(--t-h2);line-height:1.12;letter-spacing:var(--track)}
.piede-voci a{transition:color .2s var(--e-ui)}
.piede-marchio{margin-top:clamp(64px,8vw,120px);font-family:var(--serif);font-weight:300;font-size:clamp(84px,20.5vw,320px);line-height:.8;letter-spacing:-.045em;white-space:nowrap}
.piede-lockup{display:block;width:calc(100% - 2 * var(--gutter));height:auto;margin:clamp(64px,8vw,120px) auto 0;aspect-ratio:935.42/132;fill:currentColor}
.piede-nota{margin-top:36px;font-size:calc(14 * var(--px));color:var(--ink-3)}
@media (hover:hover){.piede-voci a:hover{color:var(--ink-3)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.rv.vis,.rv.via{opacity:1;animation:none}   /* the reveal's out state ends at opacity 0 and holds: with reduced motion nothing goes out */
}

/* read by screen readers only */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}