/* incipit.studio · coming soon · identità v2, direzione D · v1.1 del 26/10/2026 (review KERN v1, F1-F10 in coda) · v1.2 del 26/10/2026 (tre pilastri) */
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url("fonts/InterTight-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:600;font-display:swap;src:url("fonts/InterTight-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("fonts/PlexMono-Medium.woff2") format("woff2")}
:root{
  --paper:#EFEBE1; --ink:#111111; --muted:#555555; --line:#111111;
  --wm:url("incipit-nero.svg");
  --font-text:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --font-label:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root{ --paper:#111111; --ink:#EFEBE1; --muted:#A9A69E; --line:#EFEBE1; --wm:url("incipit-bianco.svg"); color-scheme:dark } }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper) url("grana.png");color:var(--ink);font:400 17px/1.5 var(--font-text);-webkit-font-smoothing:antialiased}
.wrap{min-height:100%;max-width:1200px;margin:0 auto;padding-block:28px 32px;padding-inline:clamp(16px,4vw,56px);display:flex;flex-direction:column}
.lab{font:500 12px/1.4 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;padding-bottom:18px}
.wm{display:block;width:120px;height:34px;background:var(--wm) left center/contain no-repeat}
.wm span{position:absolute;left:-9999px}
.hr{display:flex;align-items:center;gap:20px}
.hr>.lab:last-child{white-space:nowrap}
.langs{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.langs a{color:var(--muted);text-decoration:none}
.langs a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
main{flex:1;display:grid;grid-template-columns:1fr;gap:28px;padding-block:40px 48px;align-content:center}
h1{margin:0;font-weight:600;font-size:clamp(36px,6.8vw,96px);line-height:.97;letter-spacing:-.035em;text-wrap:balance;max-width:13ch}
.lead{max-width:46ch;margin:0;font-size:clamp(17px,1.6vw,21px);line-height:1.45}
.lead a,.what a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (min-width:860px){ main{grid-template-columns:1.5fr 1fr;align-items:end} .lead{justify-self:end} }
.what{padding-block:28px}
.what ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.what li{padding:12px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.45;min-width:0}
.what li:first-child{border-top:0}
@media (min-width:860px){ .what ul{grid-template-columns:1fr 1fr 1fr 1fr;gap:24px} .what li{border-top:1px solid var(--line);padding-top:12px} }
.cols{display:grid;grid-template-columns:1fr;gap:28px;padding-block:28px}
@media (min-width:640px){ .cols{grid-template-columns:1fr 1fr} }
.cols>div{min-width:0}
.cols p{margin:8px 0 0;font-size:16px}
.mail{font:500 16px var(--font-label);letter-spacing:.01em;word-break:break-all}
.mail a{color:inherit;text-decoration:none}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:16px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* incipit.studio · coming soon · patch KERN v1 · 26/10/2026
   Da INCOLLARE IN CODA a site/assets/style.css: sono override, la cascata fa il resto.
   Nessun colore fuori dai token v2 (--paper, --ink, --muted, --line). Misure nuove: 44 (target Apple),
   24 (gutter, già usata), 12 · 14 (compensazioni dei target, a layout invariato), 1100 (salto a 4 colonne).
   Ogni regola rimanda al finding (F n) del README. Il markup (F9 · F10 · F11 · F12 · F13) sta nel README, non qui.
   Provata in copia nello scratchpad: 390 · 320 · 195 · 700 · 900 · 1180, chiaro e scuro, EN FR IT (png/patch/). */

/* F1 · reflow a 320 px: EN sborda di 5 px. Il blocco lingue + etichetta può andare a capo */
.hr{flex-wrap:wrap;row-gap:8px}                                   /* F1 */
@media (max-width:299px){ .hr>.lab:last-child{white-space:normal} } /* F8 · solo con testo al 200 % sul telefono */

/* F2 · filetto mancante sulla 1a colonna di «What we do» sopra 860 (li:first-child vince sulla media query)
   F3 · colonne: 1 da 644 px (~105 battute) fra 640 e 859, 4 da 189 px (7 righe in FR) fra 860 e 1099 */
@media (min-width:640px){
  .what ul{grid-template-columns:1fr 1fr;gap:0 24px}             /* F3 · 2 colonne fra 640 e 1099 */
  .what li,.what li:first-child{border-top:1px solid var(--line);padding-top:12px} /* F2 · specificità pari, viene dopo */
  .cols{gap:24px}                                                 /* F3 · stessa gutter di .what: colonne allineate */
}
@media (min-width:860px){
  .what ul{grid-template-columns:repeat(3,1fr)}                   /* F3 · v1.2 (26/10): tre pilastri, tre colonne da 860 (248 px a 860, 357 a 1180) */
}

/* F4 · lingue EN · FR · IT: area di tocco da 16 × 15 a 44 × 44, senza spostare il layout */
header{row-gap:16px}                                              /* F4 · su 390 le aree non toccano il wordmark */
.langs{gap:0;margin-inline:-14px}                                 /* F4 · il testo resta allineato al bordo */
.langs a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin-block:-14px}              /* F4 · 44 × 44, altezza di riga invariata */

/* F5 · mail: area di tocco da 20 a 44 di altezza */
.mail a{display:inline-block;padding-block:12px;margin-block:-12px} /* F5 */

/* F6 · stati: hover (solo dove esiste un puntatore) e active (riscontro al tocco) */
@media (hover:hover){
  .langs a:hover,.mail a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* F6 */
  .lead a:hover,.what a:hover{text-decoration-thickness:2px}      /* F6 */
}
.lead a:active,.what a:active,.mail a:active{color:var(--muted)}  /* F6 · tocco: inchiostro → grigio */
.langs a:active{color:var(--ink)}                                 /* F6 · tocco: grigio → inchiostro */

/* F7 · scuro: la grana si vede (ΔL* 4,1 contro 3,2 del chiaro). Velo di --paper al 50 % sopra la grana: ΔL* 2,1 */
@media (prefers-color-scheme: dark){
  body{background:linear-gradient(color-mix(in srgb,var(--paper) 50%,transparent),color-mix(in srgb,var(--paper) 50%,transparent)),
       var(--paper) url("grana.png")}                             /* F7 */
}

/* F8 · testo al 200 % (390 px = 195 px CSS): h1, griglia e intestazione sbordano. Identico sopra 390 */
main{grid-template-columns:minmax(0,1fr)}                         /* F8 · la traccia non si allarga sul min-content */
@media (min-width:860px){ main{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} } /* F8 · come prima, con minmax */
h1{font-size:min(max(28px,9.2vw),max(36px,6.8vw),96px)}           /* F8 · 390 → 35,9 · 1180 → 80,2 · 320 → 29,4 · 195 → 28 */

/* F9 · h1: ogni frase parte a inizio riga. Serve il markup <span class="s"> (README, F9); senza, non fa nulla */
h1 .s{display:block}                                              /* F9 */

/* F10 · mail: spezza solo se serve e dopo la @ (con il <wbr> del markup), non «incipit.st / udio» */
.mail{word-break:normal;overflow-wrap:anywhere}                   /* F10 */