@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* NERO / OCRA */
  --bg:#0c0b08; --bg-soft:#15130d; --bg-card:#17150f; --bg-card-h:#1e1b12;
  --border:#332e1f; --border-soft:#26221728;
  --txt:#f1ece0; --txt-soft:#b3a98f; --txt-dim:#7d745d;
  --accent:#d99a2b; --accent-soft:#f0b94f; --accent-deep:#a8761c; --accent-dim:#2a2010;
  --ring:rgba(217,154,43,.35);
  --chip:#1c190f; --chip-active:#d99a2b;
  --glass:rgba(20,18,11,.62); --glass-brd:rgba(217,154,43,.14);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 14px 40px -18px rgba(0,0,0,.8);
  --grad-brd:linear-gradient(135deg, rgba(217,154,43,.45), rgba(217,154,43,0) 40%, rgba(217,154,43,.12));
  --mono:'Space Grotesk',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"]{
  --bg:#f4f0e6; --bg-soft:#ece6d6; --bg-card:#fbf8f0; --bg-card-h:#fffdf7;
  --border:#ddd3ba; --border-soft:#e6dec850;
  --txt:#1c1810; --txt-soft:#5d5640; --txt-dim:#928a72;
  --accent:#b87914; --accent-soft:#9c6510; --accent-deep:#8a5a0e; --accent-dim:#f0e4c8;
  --ring:rgba(184,121,20,.25);
  --chip:#e8e0cc; --chip-active:#b87914;
  --glass:rgba(251,248,240,.7); --glass-brd:rgba(184,121,20,.18);
  --shadow:0 1px 2px rgba(60,45,10,.05), 0 12px 30px -16px rgba(60,45,10,.22);
  --grad-brd:linear-gradient(135deg, rgba(184,121,20,.4), rgba(184,121,20,0) 40%, rgba(184,121,20,.1));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--txt); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(820px 460px at 82% -6%, rgba(217,154,43,.16), transparent 60%), radial-gradient(680px 520px at 8% 102%, rgba(217,154,43,.07), transparent 60%)}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}

.shell{display:grid; grid-template-columns:300px 1fr; gap:0; position:relative; z-index:1}
.side{position:sticky; top:0; height:100vh; overflow-y:auto; padding:28px 22px; border-right:1px solid var(--border); background:linear-gradient(180deg, var(--bg-soft), var(--bg))}
.main{padding:0 56px 120px; max-width:960px; position:relative}
/* da 961px: allarga l'area per ospitare l'illustrazione fuori scheda a destra */
@media(min-width:961px){
  .main{max-width:100%}
  .hero, .chips, .noresult{max-width:880px}
}

.brand{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; line-height:1.2; padding-top:6px}
.brand .dot{color:var(--accent)}
.brand small{display:block; font-weight:400; font-size:12px; color:var(--txt-dim); letter-spacing:.05em; margin-top:5px; text-transform:uppercase}
.side-search{position:relative; margin:22px 0 18px}
.side-search input{width:100%; padding:11px 12px 11px 36px; border-radius:11px; border:1px solid var(--border); background:var(--bg-card); color:var(--txt); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s}
.side-search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.side-search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--txt-dim); fill:none; stroke-width:2}
.idx{list-style:none; margin-top:4px}
.idx li a{display:flex; gap:10px; align-items:baseline; padding:6px 8px; border-radius:8px; text-decoration:none; color:var(--txt-soft); font-size:13.5px; transition:background .12s, color .12s, transform .12s}
.idx li a:hover{background:var(--bg-card); color:var(--txt); transform:translateX(2px)}
.idx .n{font-family:var(--mono); font-size:12px; color:var(--accent); min-width:22px; text-align:right; font-weight:600; opacity:.7}
.idx li.hide{display:none}
.idx-cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-dim); margin:18px 0 6px 8px; font-weight:600}
.idx-cat.hide{display:none}

.header{position:sticky; top:0; z-index:30; margin:0 -56px 30px; padding:16px 56px; background:var(--glass); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--glass-brd); display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hsearch{position:relative; flex:1; min-width:200px}
.hsearch input{width:100%; padding:11px 14px 11px 40px; border-radius:12px; border:1px solid var(--border); background:var(--bg-card); color:var(--txt); font-family:var(--sans); font-size:14.5px; outline:none; transition:border-color .15s, box-shadow .15s}
.hsearch input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.hsearch svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--txt-dim); fill:none; stroke-width:2}
.theme-btn{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg-card); color:var(--txt-soft); cursor:pointer; font-family:var(--mono); font-size:12.5px; transition:all .14s; flex:none}
.theme-btn:hover{color:var(--accent); border-color:var(--accent)}
.theme-btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2}

.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:34px}
.chip{font-family:var(--mono); font-size:12px; font-weight:500; padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--chip); color:var(--txt-soft); cursor:pointer; transition:all .16s var(--ease); white-space:nowrap}
.chip:hover{color:var(--txt); border-color:var(--accent); transform:translateY(-1px)}
.chip.active{background:var(--chip-active); border-color:var(--chip-active); color:#0c0b08; font-weight:600; box-shadow:0 6px 18px -8px var(--accent)}

.hero{margin-bottom:40px; padding-bottom:34px; border-bottom:1px solid var(--border); padding-top:8px}
.hero .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600}
.hero h1{font-family:var(--display); font-size:clamp(30px,5vw,50px); font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:14px 0 14px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{color:var(--txt-soft); font-size:16px; max-width:62ch}
.hero .meta{margin-top:20px; display:flex; gap:22px; font-family:var(--mono); font-size:14px; color:var(--txt-dim); flex-wrap:wrap}
.hero .meta b{color:var(--accent); font-weight:600}

.card{position:relative; background:var(--bg-card); border-radius:18px; padding:30px 32px; box-shadow:var(--shadow); border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s}
/* riga esterna: scheda a sinistra + illustrazione (fuori scheda) a destra */
.bias-row{position:relative; margin-bottom:22px; scroll-margin-top:90px; animation:rise .5s var(--ease) both}
.bias-row.hide{display:none}
.card-main{min-width:0}
.art{display:none}
@media(min-width:961px){
  .bias-row{display:grid; grid-template-columns:1fr 40%; gap:34px; align-items:start}
  .art{display:block; position:sticky; top:96px; padding-top:8px}
}
.art-frame{width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden}
.art-frame img{width:100%; height:auto; display:none}
.art-frame.ready img{display:block}

/* pannello scuro fisso dietro le illustrazioni (valido in entrambi i temi) */
.art-frame.ready{
  background:#0c0b08;
  border-radius:18px;
  padding:12px 6px;
 /* 
  border:1px solid rgba(217,154,43,.22);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.55);*/
}

.art-cap{display:none; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-dim); text-align:center}
.art-frame.ready + .art-cap{display:block}
.card::before{content:""; position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none; background:var(--grad-brd); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.card:hover{box-shadow:0 1px 0 rgba(255,255,255,.04), 0 26px 56px -22px rgba(0,0,0,.85)}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}

.card-top{display:flex; align-items:flex-start; gap:18px; margin-bottom:6px}
.num{font-family:var(--mono); font-weight:700; font-size:36px; color:var(--accent); border:1px solid var(--accent); border-radius:9px; padding:6px 10px; line-height:1; flex:none; margin-top:5px; background:var(--accent-dim)}
.card h2{font-family:var(--display); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1}
.tagrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
.eng{font-family:var(--mono); font-size:12px; color:var(--txt-dim)}
.eng a{color:var(--txt-soft); text-decoration:none; border-bottom:1px dotted var(--txt-dim)}
.eng a:hover{color:var(--accent); border-color:var(--accent)}
.catdot{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--accent-dim); color:var(--accent-soft)}
.lead{font-size:16.5px; color:var(--txt); margin:18px 0 4px; line-height:1.62}

details{margin-top:14px; border-top:1px solid var(--border); padding-top:6px}
summary{list-style:none; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-soft); padding:9px 0; display:flex; align-items:center; gap:8px; font-weight:600; transition:color .14s}
summary:hover{color:var(--accent)}
summary::-webkit-details-marker{display:none}
summary .tw{transition:transform .25s var(--ease); color:var(--accent)}
details[open] summary .tw{transform:rotate(90deg)}
.detail-body{padding:4px 0 12px}
.detail-body h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:16px 0 6px; font-weight:600}
.detail-body h4:first-child{margin-top:4px}
.detail-body p{color:var(--txt-soft); margin-bottom:8px}
.ex{display:grid; gap:9px; margin-top:4px}
.ex .item{background:var(--bg-soft); border-left:2px solid var(--accent); border-radius:0 9px 9px 0; padding:4px 12px; font-size:14.5px; color:var(--txt-soft)}
.ex .item b{color:var(--txt); font-weight:600}
ul.clean{list-style:none; display:grid; gap:6px; margin-top:2px}
ul.clean li{position:relative; padding-left:18px; color:var(--txt-soft); font-size:14.5px}
ul.clean li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:2px; background:var(--accent); opacity:.75}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top: 26px;}

.seealso{margin-top:18px; padding-top:14px; border-top:1px solid var(--border)}
.seealso .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim); margin-bottom:8px; font-weight:600}
.seealso .links{display:flex; gap:7px; flex-wrap:wrap}
.seealso a{font-size:13px; text-decoration:none; padding:6px 12px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--border); color:var(--txt-soft); transition:all .16s var(--ease)}
.seealso a:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim); transform:translateY(-1px)}
.seealso a .sn{font-family:var(--mono); font-size:11px; color:var(--accent); opacity:.7}

.noresult{display:none; text-align:center; padding:60px 20px; color:var(--txt-dim); font-family:var(--mono)}
.noresult.show{display:block}

/* pulsante torna su */
.totop{position:fixed; right:24px; bottom:24px; z-index:45; width:48px; height:48px; border-radius:14px;
  border:1px solid var(--glass-brd); background:var(--glass); backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); color:var(--accent); cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px) scale(.9);
  pointer-events:none; transition:opacity .25s, transform .25s var(--ease)}
.totop.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.totop:hover{border-color:var(--accent); color:var(--accent-soft)}
.totop svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

.menu-btn{display:none}
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; z-index:50; width:300px; left:-320px; top:0; transition:left .28s var(--ease); box-shadow:0 0 50px rgba(0,0,0,.6)}
  .side.open{left:0}
  .main{padding:0 18px 100px}
  .header{margin:0 -18px 26px; padding:14px 18px 14px 62px}
  .cols{grid-template-columns:1fr; gap:16px}
  .card{padding:24px 20px}
  .menu-btn{display:flex; position:fixed; top:13px; left:14px; z-index:60; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; border:1px solid var(--glass-brd); background:var(--glass); backdrop-filter:blur(14px); color:var(--accent); font-size:17px; cursor:pointer; box-shadow:var(--shadow)}
  .scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:40}
  .scrim.show{display:block}
}