/* robertoreino.it — stile 2026. Nessuna dipendenza esterna. */
@font-face{font-family:"Planet Kosmos";src:url("../fonts/planet-kosmos.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{
  --ink:#0d1526; --ink-2:#1b2740; --accent:#e8590c; --accent-ink:#b8420a;
  --paper:#f5f3ee; --card:#fff; --text:#1a2233; --muted:#5b6578; --line:#dcd8cf;
  --radius:14px; --maxw:72rem; --gut:clamp(1rem,4vw,2rem);
  --display:"Planet Kosmos","Arial Narrow","Helvetica Neue",Arial,system-ui,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0a0f1b;--card:#121a2c;--text:#e8ebf2;--muted:#98a2b8;--line:#243049;--accent:#ff7a33;--accent-ink:#ff9a5f}
}
*,*::before,*::after{box-sizing:border-box}
/* Planet Kosmos ha un solo stile: niente grassetto/corsivo finti sui titoli */
.brand,.hero h1,.page-title h1,h2,.stat b,.year{font-weight:400!important;font-style:normal!important;text-transform:none!important}
/* niente maiuscolo forzato: il font non ha le maiuscole accentate (È, Ò, À) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:1.0625rem/1.65 var(--body);background:var(--paper);color:var(--text)}
img,video,iframe{max-width:100%;display:block}
a{color:var(--accent-ink);text-underline-offset:.2em}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto}

/* header */
.site-header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--accent)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font:italic 800 1.35rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.brand img{width:2.5rem;height:2.5rem;border-radius:6px;object-fit:cover}
.brand span em{color:var(--accent);font-style:inherit}
.nav-toggle{display:none;background:none;border:2px solid #fff4;color:#fff;border-radius:8px;padding:.45rem .8rem;font:inherit;cursor:pointer}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav a{display:block;color:#dfe5f2;text-decoration:none;padding:.5rem .85rem;border-radius:8px;font-weight:600;font-size:.95rem}
.nav a:hover{background:#ffffff14;color:#fff}
.nav a[aria-current="page"]{background:var(--accent);color:#fff}
@media (max-width:50rem){
  .nav-toggle{display:block}
  .nav{position:absolute;inset:100% 0 auto 0;background:var(--ink);display:none;border-bottom:3px solid var(--accent)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:.5rem var(--gut) 1rem}
  .nav a{padding:.8rem 1rem}
}

/* hero */
.hero{background:radial-gradient(120% 120% at 85% 0%,#243a66 0,var(--ink) 60%);color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:14px;background:repeating-linear-gradient(90deg,#fff 0 28px,#0d1526 28px 56px);opacity:.9}
.hero .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;padding-block:clamp(2.5rem,7vw,5rem) clamp(3rem,8vw,5.5rem)}
.eyebrow{display:inline-block;color:var(--accent);font:700 .85rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.hero h1{font:italic 900 clamp(2.8rem,9vw,6rem)/.95 var(--display);text-transform:uppercase;margin:0 0 1rem;letter-spacing:.01em}
.hero h1 em{display:block;color:var(--accent);font-style:inherit}
.hero p{color:#cdd6ea;max-width:34rem;font-size:1.15rem;margin:0 0 1.6rem}
.hero figure{margin:0;justify-self:center}
.hero figure img{width:min(100%,20rem);border-radius:18px;box-shadow:0 20px 60px #0008;transform:rotate(3deg)}
@media (max-width:50rem){.hero .wrap{grid-template-columns:1fr}.hero figure{order:-1}.hero figure img{width:11rem;transform:none}}

.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:.75rem 1.4rem;border-radius:999px;border:0;cursor:pointer;font-size:1rem;transition:transform .15s,background .15s}
.btn:hover{background:var(--accent-ink);color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid #ffffff66}
.btn.ghost:hover{background:#ffffff1a}

/* sezioni */
main{min-height:60vh}
section{padding-block:clamp(2.5rem,6vw,4.5rem)}
.page-title{background:var(--ink);color:#fff;padding-block:clamp(2rem,5vw,3.2rem);border-bottom:4px solid var(--accent)}
.page-title h1{font:italic 900 clamp(2rem,6vw,3.4rem)/1 var(--display);text-transform:uppercase;margin:0}
.page-title p{margin:.6rem 0 0;color:#b9c4dc}
.crumbs{font-size:.9rem;margin-bottom:.6rem;color:#9fb0d0}.crumbs a{color:#cbd6ee}
h2{font:italic 800 clamp(1.5rem,4vw,2.2rem)/1.1 var(--display);text-transform:uppercase;margin:0 0 1.2rem}
h2::after{content:"";display:block;width:3.2rem;height:4px;background:var(--accent);margin-top:.5rem}
.prose{max-width:46rem}
.prose p{margin:0 0 1.1rem}
.prose .lead{font-size:1.25rem;line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;margin-top:2rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.stat b{display:block;font:italic 900 2.2rem/1 var(--display);color:var(--accent)}
.stat span{color:var(--muted);font-size:.95rem}

/* card & griglie */
.grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0002}
.card a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.card img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--line)}
.card .body{padding:.9rem 1rem 1.1rem}
.card h3{margin:0 0 .2rem;font-size:1.05rem;line-height:1.3}
.card small{color:var(--muted)}
.year{display:flex;align-items:baseline;gap:.8rem;margin:2.5rem 0 1rem;font:italic 900 2.4rem/1 var(--display);color:var(--accent)}
.year::after{content:"";flex:1;height:2px;background:var(--line)}
.yearnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding:0;list-style:none}
.yearnav a{display:block;padding:.35rem .9rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700;background:var(--card)}
.yearnav a:hover{border-color:var(--accent)}

/* gallery */
.gallery{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.gallery a{display:block;border-radius:10px;overflow:hidden;background:var(--line);aspect-ratio:1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery a:hover img{transform:scale(1.07)}
dialog.lb{border:0;padding:0;background:transparent;width:100vw;max-width:100vw;height:100vh;max-height:100vh;color:#fff}
dialog.lb::backdrop{background:#000d}
.lb-inner{height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:1rem}
.lb img{max-width:min(96vw,1400px);max-height:78vh;object-fit:contain;border-radius:6px}
.lb-bar{display:flex;gap:.6rem;align-items:center;justify-content:center;padding:.6rem}
.lb button{background:#ffffff22;color:#fff;border:0;border-radius:999px;min-width:2.8rem;height:2.8rem;font-size:1.3rem;cursor:pointer}
.lb button:hover{background:var(--accent)}
.lb output{min-width:5rem;text-align:center;font-variant-numeric:tabular-nums}
.album-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}

/* video */
.videos{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.video figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.video iframe{width:100%;aspect-ratio:16/9;border:0;background:#000}
.video figcaption{padding:.8rem 1rem;font-weight:600}

/* news / link / form */
.news{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:46rem}
.news li{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:1rem 1.2rem}
.news time{display:block;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.2rem}
.links{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.links a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;font-weight:700;text-decoration:none}
.links a:hover{border-color:var(--accent)}
.links a::after{content:" ↗";color:var(--accent)}
form{display:grid;gap:1.1rem;max-width:36rem}
label{font-weight:700;display:block;margin-bottom:.3rem}
input,textarea{width:100%;font:inherit;color:inherit;background:var(--card);border:2px solid var(--line);border-radius:10px;padding:.7rem .85rem}
input:focus,textarea:focus{border-color:var(--accent);outline:none}
.hp{position:absolute;left:-9999px}
.msg{padding:1rem 1.2rem;border-radius:12px;max-width:36rem;margin-bottom:1.2rem;font-weight:600}
.msg[hidden]{display:none}.msg.ok{background:#16a34a22;border:1px solid #16a34a}.msg.err{background:#dc262622;border:1px solid #dc2626}
.note{color:var(--muted);font-size:.95rem}

/* footer */
.site-footer{background:var(--ink);color:#aab6d0;padding-block:2rem;font-size:.95rem;border-top:3px solid var(--accent)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.site-footer a{color:#dfe5f2}
.privacy h2{margin-top:2.4rem}