/* LanzaNote · grafiche in prova (solo su link di prova, con ?theme / barra stili) */

/* A · MONOCLE — bianco, serif editoriale, titolo SOPRA la foto incorniciata, sezioni come indice numerato */
html[data-theme="monocle"]{--bg:#FFFFFF;--paper:#FFFFFF;--ink:#141414;--ink2:#141414;--soft:#3F3F3F;--muted:#8E8E8E;--line:#E6E6E6;
  --serif:"Source Serif 4",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
  --natura:#3E6B4F;--cammini:#B07A2A;--arte:#9C4A3C;--musica:#3D4F8C;--letteratura:#6B5440;--persone:#A0526B;--vino:#6E2C3E}
html[data-theme="monocle"] h1,html[data-theme="monocle"] h2,html[data-theme="monocle"] h3,html[data-theme="monocle"] .what-line{font-weight:600;letter-spacing:-.015em}
html[data-theme="monocle"] .logo b{font-family:"Source Serif 4",serif;font-weight:700}
html[data-theme="monocle"] .cover,html[data-theme="monocle"] .cover .txt,html[data-theme="monocle"] .slide,html[data-theme="monocle"] .slide .t{background:#fff!important}
html[data-theme="monocle"] .cover .txt{order:-1;padding-bottom:8px}
html[data-theme="monocle"] .cover .ph{margin:0 16px 18px;border-radius:0}
html[data-theme="monocle"] .cover h1{font-size:clamp(34px,9vw,46px)}
html[data-theme="monocle"] .cover .scrollcue{display:none}
html[data-theme="monocle"] .tiles{display:block;padding:0 16px}
html[data-theme="monocle"] .tile{width:auto;max-width:none;min-height:0;background:none!important;border-top:1px solid #141414;border-radius:0;padding:16px 0 18px 56px;display:block}
html[data-theme="monocle"] .tile .tn{position:absolute;left:0;top:14px;font-size:30px;color:var(--c)!important;font-family:"Source Serif 4",serif}
html[data-theme="monocle"] .tile h3{margin:0 0 4px;font-size:24px}
html[data-theme="monocle"] .tile .live{border:0;padding:0;margin-top:8px;color:var(--c)!important}
html[data-theme="monocle"] .tile .tgo{top:18px;bottom:auto}
html[data-theme="monocle"] .card .ph{border-radius:0}
html[data-theme="monocle"] .btn{border-radius:0}
html[data-theme="monocle"] .body p{font-family:"Source Serif 4",serif;font-size:19px}

/* B · BRUTUS — bianco e nero, grotesk enorme, fascia nera, numeri giganti */
html[data-theme="brutus"]{--bg:#FFFFFF;--paper:#F5F5F5;--ink:#0E0E0E;--ink2:#0E0E0E;--soft:#333;--muted:#888;--line:#E4E4E4;
  --natura:#0E0E0E;--cammini:#0E0E0E;--arte:#0E0E0E;--musica:#0E0E0E;--letteratura:#0E0E0E;--persone:#0E0E0E;--vino:#0E0E0E}
html[data-theme="brutus"] h1,html[data-theme="brutus"] h2,html[data-theme="brutus"] h3,html[data-theme="brutus"] .what-line{font-weight:800;letter-spacing:-.045em;line-height:.95}
html[data-theme="brutus"] .cover,html[data-theme="brutus"] .cover .txt,html[data-theme="brutus"] .slide,html[data-theme="brutus"] .slide .t{background:#0E0E0E!important}
html[data-theme="brutus"] .cover h1,html[data-theme="brutus"] .slide h2,html[data-theme="brutus"] .cover .txt .cap,html[data-theme="brutus"] .slide .cap{color:#fff}
html[data-theme="brutus"] .cover p.dek,html[data-theme="brutus"] .slide p{color:#bbb}
html[data-theme="brutus"] .cover .btn.dark{background:#fff;color:#0E0E0E;border-color:#fff}
html[data-theme="brutus"] .cover .btn.ghost,html[data-theme="brutus"] .slide .btn.white{border-color:#fff;color:#fff}
html[data-theme="brutus"] .slide .side button svg{stroke:#fff}
html[data-theme="brutus"] .cover .scrollcue{border-color:#fff}html[data-theme="brutus"] .cover .scrollcue span{background:#fff}
html[data-theme="brutus"] .tile{background:#F2F2F2!important;border-radius:0}
html[data-theme="brutus"] .tile:nth-child(odd){background:#0E0E0E!important}
html[data-theme="brutus"] .tile:nth-child(odd) *{color:#fff!important}
html[data-theme="brutus"] .tile:nth-child(odd) .tgo{border-color:#fff}html[data-theme="brutus"] .tile:nth-child(odd) .tgo svg{stroke:#fff}
html[data-theme="brutus"] .tile .tn{font-size:120px;font-weight:800;letter-spacing:-.06em;font-style:normal}
html[data-theme="brutus"] .card .ph,html[data-theme="brutus"] .btn,html[data-theme="brutus"] .bdlogo,html[data-theme="brutus"] .howto{border-radius:0}
html[data-theme="brutus"] .dot{background:#E23B2E!important}

/* C · KINFOLK — crema caldo, serif leggero, foto con margini, tanto respiro */
html[data-theme="kinfolk"]{--bg:#F5F0E8;--paper:#FBF8F3;--ink:#2A2622;--ink2:#2A2622;--soft:#5C554D;--muted:#A0978B;--line:#E4DCCF;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
  --natura:#D5DCCB;--cammini:#E8D9BF;--arte:#EBD3CB;--musica:#D8D6E4;--letteratura:#E2D6C8;--persone:#EED9D6;--vino:#DCC8CF}
html[data-theme="kinfolk"] h1,html[data-theme="kinfolk"] h2,html[data-theme="kinfolk"] h3,html[data-theme="kinfolk"] .what-line{font-weight:400;letter-spacing:0}
html[data-theme="kinfolk"] .cover h1{font-size:clamp(40px,11vw,58px);font-weight:300}
html[data-theme="kinfolk"] .cover,html[data-theme="kinfolk"] .cover .txt,html[data-theme="kinfolk"] .slide,html[data-theme="kinfolk"] .slide .t{background:#F5F0E8!important}
html[data-theme="kinfolk"] .cover .ph{margin:16px 16px 0;border-radius:4px}
html[data-theme="kinfolk"] .cover .txt{text-align:center}
html[data-theme="kinfolk"] .cover .acts{justify-content:center}
html[data-theme="kinfolk"] .cover .scrollcue{display:none}
html[data-theme="kinfolk"] .tile{border-radius:4px}
html[data-theme="kinfolk"] .tile .tn{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300}
html[data-theme="kinfolk"] .btn{border-radius:99px;font-weight:500}
html[data-theme="kinfolk"] .logo b{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:30px}
html[data-theme="kinfolk"] .body p{font-family:"Cormorant Garamond",serif;font-size:21px}

/* D · OCEANO — bianco, blu oceano profondo, sabbia, corsivo Fraunces */
html[data-theme="oceano"]{--bg:#FAFAF7;--paper:#FFFFFF;--ink:#0F2F4A;--ink2:#0F2F4A;--soft:#3D5266;--muted:#8A97A3;--line:#E3E7EA;
  --serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;
  --natura:#CFE3DA;--cammini:#EADBC2;--arte:#F1D2C6;--musica:#D2DBEE;--letteratura:#E6DCCD;--persone:#F3D9DE;--vino:#E0CBD5}
html[data-theme="oceano"] h1,html[data-theme="oceano"] h2,html[data-theme="oceano"] h3,html[data-theme="oceano"] .what-line{font-weight:500}
html[data-theme="oceano"] .cover h1,html[data-theme="oceano"] .what-line{font-style:italic}
html[data-theme="oceano"] .cover,html[data-theme="oceano"] .cover .txt,html[data-theme="oceano"] .slide,html[data-theme="oceano"] .slide .t{background:#0F2F4A!important}
html[data-theme="oceano"] .cover h1,html[data-theme="oceano"] .slide h2,html[data-theme="oceano"] .cover .txt .cap,html[data-theme="oceano"] .slide .cap{color:#fff}
html[data-theme="oceano"] .cover p.dek,html[data-theme="oceano"] .slide p{color:#C9D6E2}
html[data-theme="oceano"] .cover .btn.dark{background:#EADBC2;color:#0F2F4A;border-color:#EADBC2}
html[data-theme="oceano"] .cover .btn.ghost,html[data-theme="oceano"] .slide .btn.white{border-color:#C9D6E2;color:#fff}
html[data-theme="oceano"] .slide .side button svg{stroke:#fff}
html[data-theme="oceano"] .cover .scrollcue{border-color:#fff}html[data-theme="oceano"] .cover .scrollcue span{background:#fff}
html[data-theme="oceano"] .tile{border-radius:18px}
html[data-theme="oceano"] .tile .tn{font-family:"Fraunces",serif;font-style:italic}
html[data-theme="oceano"] .btn{border-radius:99px}
html[data-theme="oceano"] .btn.dark{background:#0F2F4A;border-color:#0F2F4A}

/* barra di scelta stile */
.stylebar{position:fixed;z-index:95;left:50%;transform:translateX(-50%);top:64px;display:flex;gap:2px;background:#111;border-radius:99px;padding:4px;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}
.stylebar button{font:500 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:#bbb;padding:9px 12px;border-radius:99px;white-space:nowrap}
.stylebar button.on{background:#fff;color:#111}
html[data-theme="monocle"] .cover .ph,html[data-theme="kinfolk"] .cover .ph{width:auto;align-self:stretch}

/* ===== dinamismo (solo varianti in prova) ===== */
html[data-motion] .w{display:inline-block;overflow:hidden;vertical-align:top}
html[data-motion] .w>span{display:inline-block;transform:translateY(105%);animation:wup .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + .15s)}
@keyframes wup{to{transform:none}}
/* 1 · ticker */
.ticker{overflow:hidden;border-top:1px solid #141414;border-bottom:1px solid #141414;background:#fff;white-space:nowrap}
.ticker .tk{display:inline-flex;gap:18px;padding:11px 0;animation:tk 38s linear infinite;font:500 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.ticker .tk i{color:#E23B2E;font-style:normal}
.ticker b{font-family:"Source Serif 4",serif;font-size:14px;letter-spacing:0;text-transform:none}
@keyframes tk{to{transform:translateX(-33.333%)}}
html[data-motion] .tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
html[data-motion="ticker"] .tile:active{transform:translateX(6px)}
/* 2 · storie */
.sbars{position:absolute;z-index:5;top:10px;left:16px;right:16px;display:flex;gap:4px}
.sbars i{flex:1;height:3px;background:rgba(255,255,255,.45);border-radius:2px;overflow:hidden}
.sbars i b{display:block;height:100%;width:0;background:#fff}
.sbars i.done b{width:100%}
.sbars i.on b{animation:sbar 5s linear forwards}
@keyframes sbar{to{width:100%}}
html[data-motion="storie"] .cover{position:relative}
html[data-motion="storie"] .cover .ph{cursor:pointer;position:relative}
html[data-motion="storie"] .cover .ph img{animation:kb2 6s ease-out both}
@keyframes kb2{from{transform:scale(1.12) translate(2%,1%)}to{transform:scale(1)}}
html[data-motion="storie"] .cover .txt.swap{animation:fadeup .6s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html[data-theme="monocle"][data-motion="storie"] .cover .txt{order:0}
html[data-theme="monocle"][data-motion="storie"] .cover .ph{margin:0;aspect-ratio:4/5;height:auto;flex:none}
@media(max-width:899px){html[data-theme="monocle"][data-motion="storie"] .cover{height:auto;min-height:0}}
html[data-motion="storie"] .sbars{top:10px}
/* 3 · cinetica */
.kin{overflow:hidden;padding:26px 0 6px;white-space:nowrap}
.kin>div{display:inline-flex;gap:22px;font-family:"Source Serif 4",serif;font-size:clamp(46px,13vw,110px);line-height:1.05;font-weight:600;letter-spacing:-.03em}
.kin i{font-style:normal;color:#E23B2E;font-size:.5em;align-self:center}
.kin .k1{animation:k1 30s linear infinite}
.kin .k2{display:flex;width:max-content;animation:k2 34s linear infinite;color:transparent;-webkit-text-stroke:1px #141414}
@keyframes k1{to{transform:translateX(-50%)}}
@keyframes k2{from{transform:translateX(-50%)}to{transform:none}}
.ph.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.ph.wipe.open{clip-path:inset(0 0 0 0)}
@media(max-width:899px){html[data-motion="cinetica"] .grid .card{position:sticky;top:68px;background:var(--bg);padding-bottom:18px;box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}}
@media (prefers-reduced-motion:reduce){.ticker .tk,.kin>div,.sbars i.on b{animation:none}}
html.inframe .stylebar{display:none}
html[data-motion="ticker"] .ticker{background:#141414;color:#fff;border:0}
html[data-motion="ticker"] .ticker b{color:#fff}
html[data-motion="cinetica"] .kin{padding:14px 0 0}
html[data-motion="cinetica"] .cover h1{font-size:clamp(40px,11.5vw,60px);letter-spacing:-.03em}

/* ===== UFFICIALE (09/10/2026): Monocle + Ticker con le VOCI nei colori pastello ===== */
html[data-theme="monocle"]{--natura:#BFE3C8;--cammini:#FFE1A1;--arte:#FFC9C0;--musica:#CDD3FF;--letteratura:#E9D6C2;--persone:#FFCFE2;--vino:#E2C4EA}
html[data-theme="monocle"] .tile{background:var(--c)!important;border-top:0;border-radius:14px;margin-bottom:8px;padding:16px 56px 16px 64px}
html[data-theme="monocle"] .tile .tn{color:#141414!important;opacity:.55;left:16px}
html[data-theme="monocle"] .tile .live{color:#141414!important;opacity:.75}
html[data-theme="monocle"] .tile .tgo{right:14px}
html[data-theme="monocle"] .secrow a.on,html[data-theme="monocle"] .secrow a:hover{border-color:#141414}
html[data-theme="monocle"] .dot{box-shadow:0 0 0 1px rgba(0,0,0,.18)}
html[data-theme="monocle"] .dtag{background:var(--c,#FFE1A1);color:#141414}
html[data-theme="monocle"] .d-alta{background:#E2C4EA}
html[data-theme="monocle"] .best-beach{background:#DDF1E3}
html[data-theme="monocle"] .bdlogo.mono{background:#E2C4EA}
html[data-theme="monocle"] .ph.noimg{background:var(--c)}
html[data-theme="monocle"] .bd .grapes,html[data-theme="monocle"] .bd .visit{color:#7A3E8C}