/* Ugo Lattanzi — ugolattanzi.com
   Editorial dark/light. Bodoni Moda display · Public Sans body · IBM Plex Mono utility. */

/* self-hosted: nessuna richiesta a Google. Bodoni istanziato a opsz 32,
   l'asse ottico e' rimosso dal file quindi non puo' assottigliarsi da solo. */
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-italic-400-900-latin-ext.682b061169.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-italic-400-900-latin.dfda082deb.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}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-normal-400-900-latin-ext.7b44987213.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-normal-400-900-latin.24b4afd5e3.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}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:300 700;font-display:swap;src:url(/assets/fonts/public-sans-italic-300-700-latin-ext.bbf89d33a9.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:300 700;font-display:swap;src:url(/assets/fonts/public-sans-italic-300-700-latin.03c56a19a5.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}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/public-sans-normal-300-700-latin-ext.1c8a26c0ed.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/public-sans-normal-300-700-latin.c1b6da516e.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-400-latin-ext.f1050dc531.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-400-latin.c36f509c0a.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-500-latin-ext.77f03e26f9.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-normal-500-latin.a76f53ca66.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}


:root{
  --void:#F5F2E9; --raise:#EBE6D9; --bone:#16151A; --bone-2:#4C4941;
  --mute:#7D776A; --brass:#8A6212; --brass-dim:#CBB47C; --hair:#DCD5C4;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --void:#0A0A0C; --raise:#121216; --bone:#F2EFE6; --bone-2:#C4BFB2;
    --mute:#847E71; --brass:#D8A63E; --brass-dim:#5E4A1C; --hair:#25242A;
  }
}
:root[data-theme="dark"]{
  --void:#0A0A0C; --raise:#121216; --bone:#F2EFE6; --bone-2:#C4BFB2;
  --mute:#847E71; --brass:#D8A63E; --brass-dim:#5E4A1C; --hair:#25242A;
}

*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--brass);color:var(--void)}
html{-webkit-text-size-adjust:100%;background:var(--void);scroll-behavior:smooth}
body{background:var(--void);color:var(--bone);font-family:var(--sans);
  font-size:17px;line-height:1.6;font-weight:300;overflow-x:hidden}
/* Su fondo chiaro l'antialiasing forzato assottiglia le aste del Didone: lo si tiene
   solo in tema scuro, dove il testo chiaro su fondo scuro tende invece a ingrassare. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{-webkit-font-smoothing:antialiased}}
:root[data-theme="dark"] body{-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
a{color:var(--bone);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
em{font-style:italic}
strong{font-weight:600;color:var(--bone)}
i{font-style:normal;color:var(--brass)}
img{max-width:100%;height:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--void);
  padding:10px 16px;font-family:var(--mono);font-size:12px;z-index:99}
.skip:focus{left:0}

section.flush{border-top:0;padding-top:0}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);display:block}
.measure{max-width:62ch;color:var(--bone-2)}
.measure p+p{margin-top:1.15em}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:60;background:var(--void);border-bottom:1px solid var(--hair)}
.bar-in{max-width:1240px;margin:0 auto;padding:10px clamp(20px,4vw,56px);
  display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.brand{font-weight:500;color:var(--bone);white-space:nowrap}
.brand:hover{color:var(--brass)}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap;flex:1 1 auto}
.nav a{color:var(--mute);white-space:nowrap;transition:color .18s}
.nav a:hover{color:var(--brass)}
.nav a[aria-current="page"]{color:var(--bone)}
.ctrls{display:flex;align-items:center;gap:7px;margin-left:auto}
.langs{display:flex;gap:3px}
.langs a,.theme{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:1px solid var(--hair);color:var(--mute);cursor:pointer;padding:5px 10px;
  transition:color .18s,border-color .18s;line-height:1.2}
.langs a:hover,.theme:hover{color:var(--bone);border-color:var(--mute)}
.langs a[aria-current="true"]{color:var(--void);background:var(--brass);border-color:var(--brass)}
.theme{min-width:64px}
@media(max-width:640px){
  .bar-in{gap:8px 14px;padding:9px 20px}
  .brand{flex:1 1 100%}.nav{order:3;flex:1 1 100%;gap:4px 15px}.ctrls{order:2;margin-left:auto}
}

/* ---------- language notice ---------- */
.langnote{display:none;border-bottom:1px solid var(--hair);background:var(--raise)}
.langnote.on{display:block}
.langnote-in{max-width:1240px;margin:0 auto;padding:9px clamp(20px,4vw,56px);
  display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:11.5px;color:var(--bone-2)}
.langnote a{color:var(--brass);border-bottom:1px solid var(--brass-dim)}
.langnote button{margin-left:auto;background:none;border:0;color:var(--mute);
  font-family:var(--mono);font-size:11.5px;cursor:pointer;text-decoration:underline}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(38px,7vw,88px) 0 clamp(44px,7vw,84px)}
.hero::before{content:"";position:absolute;left:-14vw;top:-12vw;width:64vw;height:64vw;
  max-width:900px;max-height:900px;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--brass) 14%,transparent),transparent 62%)}
.hero>*{position:relative;z-index:1}
.name{font-family:var(--serif);font-weight:700;font-size:clamp(46px,11.5vw,150px);
  line-height:.86;letter-spacing:-.028em;margin:14px 0 0}
.name .last{display:block;color:var(--brass);font-style:italic;font-weight:500}
.thesis{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.7vw,33px);
  line-height:1.3;letter-spacing:-.012em;max-width:24ch;margin:34px 0 22px;text-wrap:balance}
.hero .measure{font-size:17.5px}

/* page header (inner pages) */
.phead{padding:clamp(34px,5.5vw,70px) 0 clamp(26px,3.4vw,42px)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,6vw,74px);line-height:1.02;
  letter-spacing:-.03em;margin:14px 0 20px;text-wrap:balance;max-width:18ch}

/* ---------- compression device ---------- */
.comp{margin:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--hair);padding-top:26px}
.comp .cap{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:16px}
.compline{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px clamp(12px,2vw,26px)}
.compline .was{font-family:var(--mono);font-size:clamp(13px,1.5vw,17px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);text-decoration:line-through;
  text-decoration-color:var(--brass-dim);text-decoration-thickness:1px}
.compline .arrow{color:var(--brass);font-size:clamp(20px,2.6vw,32px);line-height:1}
.compline .now{font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(34px,8.4vw,104px);line-height:1;letter-spacing:-.028em;color:var(--bone)}
@media(prefers-reduced-motion:no-preference){
  .compline .now{animation:swell .9s cubic-bezier(.2,.7,.3,1) .25s both}
  .compline .arrow{animation:slide .7s cubic-bezier(.2,.7,.3,1) .1s both}
}
@keyframes swell{from{opacity:.35;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- sections ---------- */
section{border-top:1px solid var(--hair);padding:clamp(46px,6.2vw,80px) 0}
.head{margin-bottom:clamp(24px,3.4vw,40px)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4.4vw,52px);line-height:1.07;
  letter-spacing:-.024em;text-wrap:balance;max-width:21ch;margin-top:12px}

/* ---------- deltas ---------- */
.delta{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:10px clamp(24px,4vw,64px);align-items:center;
  padding:clamp(18px,2.5vw,28px) 0;border-bottom:1px solid var(--hair)}
.delta:first-of-type{border-top:1px solid var(--hair)}
.delta .what{font-size:15.5px;color:var(--bone-2);line-height:1.5}
.delta .move{display:flex;align-items:baseline;gap:.44em;flex-wrap:wrap}
.delta .f{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute)}
.delta .a{color:var(--brass);font-size:clamp(15px,1.8vw,20px);line-height:1}
.delta .t{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.6vw,46px);
  line-height:1.05;letter-spacing:-.024em;color:var(--bone);font-variant-numeric:tabular-nums}
@media(max-width:780px){.delta{grid-template-columns:minmax(0,1fr)}}

/* ---------- blocks / services ---------- */
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:clamp(30px,3.6vw,52px)}
.block h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;
  letter-spacing:-.012em;margin:12px 0 10px;color:var(--bone);text-wrap:balance}
.block p{font-size:15.5px;color:var(--bone-2);line-height:1.62}
.svc{border-top:1px solid var(--hair);padding:clamp(26px,3.4vw,42px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px clamp(24px,4vw,64px)}
.svc h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.14;
  margin-top:0;
  letter-spacing:-.02em;color:var(--bone);text-wrap:balance}
.svc .body p{color:var(--bone-2);font-size:16px}
.svc .for{margin-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  color:var(--brass);line-height:1.5}
@media(max-width:820px){.svc{grid-template-columns:minmax(0,1fr)}}

/* ---------- contact ---------- */
.cblocks{margin-top:clamp(30px,4vw,50px)}
.cblock{border-top:1px solid var(--hair);padding:clamp(24px,3.2vw,36px) 0;max-width:66ch}
.cblock h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.8vw,31px);
  line-height:1.18;letter-spacing:-.018em;color:var(--bone);max-width:26ch;margin:0 0 .5em}
.cblock p{color:var(--bone-2);font-size:16.5px;line-height:1.7}
.cblock p+p{margin-top:1.1em}
.faq{border-top:1px solid var(--hair);padding:clamp(26px,3.4vw,40px) 0 0;max-width:66ch}
.faq>h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);max-width:none;margin:0 0 4px}
.qa{border-bottom:1px solid var(--hair);padding:20px 0}
.qa:last-child{border-bottom:0}
.qa h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,24px);
  line-height:1.2;letter-spacing:-.016em;color:var(--bone);margin-bottom:.4em}
.qa p{color:var(--bone-2);font-size:16px;line-height:1.7}

/* ---------- work ---------- */
.case{border-top:1px solid var(--hair);padding:clamp(24px,3.2vw,38px) 0}
/* Il settore è un h2: è il titolo del caso. L'aspetto non cambia — font-weight,
   line-height, max-width, margin-top e text-wrap sono qui solo per annullare
   quello che la regola globale h2 porterebbe dentro. */
.case h2.sector{font-family:var(--mono);font-size:12px;font-weight:300;line-height:1.6;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  max-width:none;text-wrap:wrap;margin:0 0 12px}
.case p{color:var(--bone-2);max-width:70ch;font-size:16px}
.case .move{margin-top:14px;font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(19px,2.4vw,28px);letter-spacing:-.02em;color:var(--bone)}

/* deep link da un caso all'articolo che lo racconta per esteso */
.case .deep{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  border-bottom:1px solid var(--brass-dim);padding-bottom:2px;transition:color .18s}
.case .deep:hover{color:var(--bone);border-color:var(--mute)}

/* ---------- writing ---------- */
.pageno{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-top:14px}
.pager{display:flex;gap:18px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--hair);padding:26px 0 0;margin-top:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.pager a{color:var(--brass);border-bottom:1px solid var(--brass-dim);padding-bottom:2px;
  transition:color .18s,border-color .18s}
.pager a:hover{color:var(--bone);border-color:var(--mute)}
.pager .older{margin-left:auto}
.intro{margin:0 0 clamp(30px,4vw,48px)}

/* Link inline nella prosa: senza queste regole sarebbero invisibili,
   perche' a{} globale toglie sia colore che sottolineatura. */
article.post .prose a{color:var(--bone);border-bottom:1px solid var(--brass-dim);
  transition:color .18s,border-color .18s}
article.post .prose a:hover{color:var(--brass);border-color:var(--brass)}

/* articoli correlati: nessun pezzo deve essere un vicolo cieco */
.related{margin-top:clamp(46px,6vw,72px);border-top:1px solid var(--hair);padding-top:26px}
.related h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);max-width:none;margin:0 0 6px}
.relrow{display:block;border-bottom:1px solid var(--hair);padding:16px 0}
.relrow:last-child{border-bottom:0}
.relrow .date{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--mute);margin-bottom:6px}
.relrow .t{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,27px);
  line-height:1.16;letter-spacing:-.02em;color:var(--bone);transition:color .18s;display:block}
.relrow:hover .t{color:var(--brass)}

.postlist{border-top:1px solid var(--hair)}
.postrow{display:block;border-bottom:1px solid var(--hair);padding:clamp(22px,3vw,34px) 0}
.postrow .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)}
.postrow h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.6vw,40px);
  line-height:1.1;letter-spacing:-.024em;margin:10px 0 10px;color:var(--bone);
  text-wrap:balance;max-width:24ch;transition:color .18s}
.postrow:hover h2{color:var(--brass)}
.postrow p{color:var(--bone-2);max-width:66ch;font-size:16px}
.postrow .more{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}

article.post{padding:clamp(30px,4vw,54px) 0 clamp(50px,7vw,90px);max-width:none}
article.post .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
article.post .lede{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.6vw,29px);
  line-height:1.32;letter-spacing:-.016em;color:var(--bone);max-width:34ch;margin:8px 0 34px;
  text-wrap:balance}
article.post .prose{max-width:none}
article.post .prose p{color:var(--bone-2);font-size:17px;line-height:1.72;
  margin-bottom:1.15em;max-width:66ch}
article.post .prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.8vw,31px);
  line-height:1.18;letter-spacing:-.018em;color:var(--bone);margin:1.9em 0 .6em;max-width:26ch}
article.post .prose blockquote{font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(21px,2.8vw,31px);line-height:1.24;letter-spacing:-.018em;color:var(--brass);
  border-left:2px solid var(--brass-dim);padding-left:24px;margin:1.7em 0;max-width:26ch}
/* diagrammi: sfondo gia' nel tema giusto, il filetto li stacca dal testo */
.fig{margin:2.6em 0;width:100%}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.fig figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.65;
  letter-spacing:.01em;color:var(--mute);max-width:58ch}

.backlink{display:inline-block;margin-top:36px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--hair);
  padding-bottom:3px}
.backlink:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* ---------- pull / view ---------- */
.pull{font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(24px,3.6vw,42px);line-height:1.16;letter-spacing:-.02em;color:var(--brass);
  max-width:22ch;margin:clamp(30px,4vw,46px) 0;text-wrap:balance}

/* ---------- teaching ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3.4vw,48px)}
.fact .n{font-family:var(--serif);font-weight:700;font-size:clamp(44px,6vw,76px);line-height:.94;
  letter-spacing:-.03em;color:var(--brass);font-variant-numeric:tabular-nums}
.fact .t{font-size:15px;color:var(--bone-2);line-height:1.58;margin-top:12px}

/* ---------- contact ---------- */
.contact{padding-bottom:clamp(56px,8vw,110px)}
.mail{font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(26px,5.2vw,66px);line-height:1.05;letter-spacing:-.026em;display:inline-block;
  margin:6px 0 26px;color:var(--bone);border-bottom:2px solid var(--brass-dim);
  transition:border-color .2s,color .2s;overflow-wrap:anywhere}
.mail:hover{color:var(--brass);border-bottom-color:var(--brass)}
.links{display:flex;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap;margin-top:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.links a{color:var(--mute);border-bottom:1px solid var(--hair);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.links a:hover{color:var(--brass);border-bottom-color:var(--brass)}

.foot{border-top:1px solid var(--hair);padding:22px 0 46px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  display:flex;gap:8px 24px;flex-wrap:wrap}

/* ---------- prosa lunga ----------
   Elenchi, tabelle, codice e h3 esistono da quando un articolo puo' essere
   lungo. Tutto resta sulla misura dei paragrafi (66ch) perche' la riga sia
   leggibile; l'unica eccezione e' la tabella, che scorre nel suo contenitore
   invece di allargare la pagina. */
article.post .prose h3{font-family:var(--sans);font-weight:600;
  font-size:clamp(16px,1.7vw,18.5px);line-height:1.32;letter-spacing:.005em;
  color:var(--bone);margin:2em 0 .5em;max-width:46ch}

article.post .prose ul,article.post .prose ol{color:var(--bone-2);font-size:17px;
  line-height:1.72;margin:0 0 1.15em;padding-left:1.4em;max-width:66ch}
article.post .prose li{margin-bottom:.5em}
article.post .prose li::marker{color:var(--brass)}

article.post .prose hr{border:0;border-top:1px solid var(--hair);margin:2.8em 0;max-width:66ch}

article.post .prose code{font-family:var(--mono);font-size:.86em;color:var(--bone);
  background:var(--raise);border:1px solid var(--hair);border-radius:3px;padding:.12em .4em}
article.post .prose pre{background:var(--raise);border:1px solid var(--hair);
  padding:18px 20px;margin:1.7em 0;overflow-x:auto;max-width:66ch}
article.post .prose pre code{background:none;border:0;padding:0;font-size:13px;
  line-height:1.7;color:var(--bone-2);white-space:pre}

.tw{overflow-x:auto;margin:1.9em 0;max-width:100%}
article.post .prose table{border-collapse:collapse;font-size:15px;line-height:1.55;
  min-width:min(100%,540px)}
article.post .prose th,article.post .prose td{border-bottom:1px solid var(--hair);
  padding:11px 22px 11px 0;text-align:left;vertical-align:top;color:var(--bone-2)}
article.post .prose th{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute);font-weight:500;white-space:nowrap}
article.post .prose tbody tr:last-child td{border-bottom:0}

/* ---------- la misura dell'articolo ----------
   Da quando gli articoli hanno tabelle, elenchi e foto, il problema non era che
   le figure fossero larghe: era che la colonna di testo, a 17px e 66ch, restava
   a 676px mentre tutto il resto andava a 1128. Non si risolve allargando il
   testo e basta — a piena larghezza la riga arriverebbe a 149 caratteri, contro
   i 45-75 dell'intervallo leggibile. Si risolve alzando il corpo: a 20px la
   colonna sta a 840px con 94 caratteri per riga, praticamente gli 89 di prima.
   Figure e tabelle prendono 1000px, uno sbordo di un quinto che le fa leggere
   come figure senza schiacciare il testo. Le misure sono in px, non in ch,
   proprio perche' non devono muoversi se un giorno cambia il corpo. */
article.post .prose p,
article.post .prose ul,
article.post .prose ol{font-size:20px;max-width:840px}
article.post .prose h3{max-width:840px}
article.post .prose hr,
article.post .prose pre{max-width:1000px}
article.post .prose .fig,
article.post .prose .tw{max-width:1000px}
article.post .prose figcaption{max-width:1000px}