/* ORIGINE ETS: foglio di stile unico. Stessi caratteri di Eleusis; rosso del logo, rosso scuro, nero caldo, fondo panna chiaro (non quello di Eleusis).
   Grafica: forme spigolose a taglio netto e bordi diagonali. Niente linee decorative, niente cerchi. */
:root{--red:#c4121f;--dred:#8e0d17;--ink:#2b1d19;--sand:#f5eddb;--sand2:#fbf6ea;--ink-tint:rgba(43,29,25,.06);
  --title:"Josefin Sans","Century Gothic",Futura,Arial,sans-serif;--text:"Raleway","Segoe UI",Helvetica,Arial,sans-serif;
  --gut:max(24px,calc((100vw - 1100px) / 2));--r:8px;--cut:48px;--k:12px;--rr:8px}
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--sand);color:var(--ink);font:400 18px/1.7 var(--text);overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:var(--red)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* colori di fascia */
.c-red{--bg:var(--red);--fg:#fff}
.c-ink{--bg:var(--ink);--fg:var(--sand)}
.c-dred{--bg:var(--dred);--fg:#fff}
[class*="c-"]{background:var(--bg);color:var(--fg)}
[class*="c-"] a:not(.btn):not(.card):not(.tile){color:inherit}

/* intestazione */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gut);background:var(--sand);box-shadow:0 3px 0 var(--red)}
.wm{font:700 24px var(--title);letter-spacing:.14em;text-decoration:none;color:var(--red)}
.wm span{font-size:12px;letter-spacing:.2em;margin-left:8px;color:var(--ink)}
.hd nav{display:flex;align-items:center;gap:24px;font:600 16px var(--title)}
.hd nav a{color:var(--ink);text-decoration:none}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--red)}
.mbtn{--k:10px;font:600 16px var(--title);background:var(--ink);color:var(--sand);border:0;padding:11px 22px;cursor:pointer}
.mbtn:hover{background:var(--red);color:#fff}
@media (max-width:900px){.hd nav .opt{display:none}}

/* menu */
.menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--sand);padding:14px var(--gut);overflow:auto;display:none}
.menu.open{display:block}
.menu .x{--k:10px;position:absolute;top:14px;right:var(--gut);font:600 16px var(--title);background:var(--sand);color:var(--ink);border:0;padding:11px 22px;cursor:pointer}
.menu ul{list-style:none;margin:64px 0 24px;padding:0;columns:2;column-gap:48px}
.menu li{break-inside:avoid}
.menu li a{display:block;padding:11px 0;text-decoration:none;color:var(--sand);font:500 24px/1.2 var(--title)}
.menu li a:hover{color:#fff;text-decoration:underline}
@media (max-width:700px){.menu ul{columns:1}}

/* strutture */
.in{max-width:1100px;margin:0 auto;position:relative}
.fa,.top,.hero{padding:clamp(48px,7vw,88px) var(--gut);position:relative;overflow:clip}
.fa.alt{background:var(--sand2)}
/* taglio diagonale sul bordo alto: la fascia entra su quella precedente */
.cut{margin-top:calc(-1 * var(--cut));padding-top:calc(clamp(48px,7vw,88px) + var(--cut));clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.cut.rev{clip-path:polygon(0 0,100% var(--cut),100% 100%,0 100%)}
h1,h2,h3,h4{font-family:var(--title);font-weight:700;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(38px,6vw,68px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:clamp(20px,2.2vw,26px)}
h4{font-size:20px;margin:1.4em 0 .4em}
.lead{font-size:clamp(19px,2vw,23px);line-height:1.55;margin:0 0 1em;max-width:60ch}
.kick{font:600 15px var(--title);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
p{margin:0 0 1em}
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,64px);align-items:center}
.two > h2{align-self:start}
.two.split{align-items:start;margin:0 0 1em}

/* pulsanti e pillole: un angolo tagliato in diagonale, come i bordi delle fasce */
.btn,.mbtn,.menu .x,.panel .close,summary,.fa .pills li,.panel .pills li,.tile,.fa .pillars li{
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%);border-radius:var(--rr) 0 var(--rr) var(--rr)}
.btns{margin:1.4em 0 0;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font:600 16px var(--title);text-decoration:none;background:var(--dred);color:#fff;border:0;padding:13px 26px}
.btn:hover{background:var(--ink);color:var(--sand)}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{background:var(--ink);color:var(--sand)}
.c-ink .btn,.c-red .btn,.c-dred .btn{background:var(--sand);color:var(--ink)}
.c-ink .btn:hover{background:var(--red);color:#fff}
.c-red .btn:hover,.c-dred .btn:hover{background:var(--ink);color:var(--sand)}
.fa ul.pills,.panel ul.pills{padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;list-style:none}
.fa .pills li,.panel .pills li{--k:10px;--rr:6px;margin:0;padding:9px 18px;background:var(--ink-tint);color:inherit;border:0;font:600 16px var(--title)}
.c-ink .pills li,.c-red .pills li,.c-dred .pills li{background:rgba(255,255,255,.17)}
.fa .pills li.me{background:var(--red);color:#fff}
.fa .pills li a{text-decoration:none;color:inherit}
.fa .pills li a:hover{text-decoration:underline}
.btn:focus-visible,.mbtn:focus-visible,.close:focus-visible,summary:focus-visible,.tile:focus-visible{outline:none;background:var(--red);color:#fff;text-decoration:underline;text-underline-offset:4px}

/* testata della home: solo il logo */
.hero{background:var(--sand);padding-bottom:calc(clamp(48px,7vw,88px) + var(--cut))}
.hero .in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero .logo{width:100%;max-width:520px;justify-self:center}
@media (max-width:820px){.hero .in{grid-template-columns:1fr}.hero .logo{order:-1;max-width:300px}}

/* testata delle pagine interne: due triangoli a taglio netto */
.top{background:var(--bg);color:var(--fg);padding-bottom:calc(clamp(48px,7vw,88px) + var(--cut))}
.shards{position:absolute;right:0;bottom:0;width:min(46%,460px);height:auto;pointer-events:none}
.top .in{z-index:1}

/* elenchi: voci su rettangoli, nessun pallino e nessuna linea */
.fa ul,.panel ul{margin:0 0 1.2em;padding:0;list-style:none}
.fa li,.panel li{margin:0 0 6px;padding:10px 14px;background:var(--ink-tint);border-radius:6px}
.fa.alt li,.panel li{background:var(--ink-tint)}
.c-ink li,.c-red li,.c-dred li{background:rgba(255,255,255,.12)}
details{margin:0 0 1.2em}
summary{--k:10px;display:inline-block;cursor:pointer;font:600 16px var(--title);padding:10px 20px;background:var(--red);color:#fff;margin-top:6px}
summary:hover{background:var(--ink);color:var(--sand)}
details[open] > summary{margin-bottom:12px}

/* schede dei progetti */
.fa ul.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.fa .cards li{padding:0;margin:0;background:none}
.card{display:flex;flex-direction:column;height:100%;background:var(--sand2);color:var(--ink);text-decoration:none;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);border-radius:10px 0 10px 10px;overflow:hidden;transition:translate .2s}
.card:hover{translate:0 -4px}
.card:hover h3{color:var(--red)}
.card > img,.card .art{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.card.tall > img{aspect-ratio:3/4}
.card.sq > img{aspect-ratio:1/1}
.card .art{background:var(--dred);overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end}
.card .art .shards{position:static;width:100%;height:100%}
.card div:not(.art){padding:16px 18px 20px}
.card small{font:600 13px var(--title);letter-spacing:.12em;text-transform:uppercase;color:var(--gc)}
.card h3{font-size:20px;margin:.25em 0 .3em}.card p{margin:0;font-size:15px;line-height:1.5}
@media (max-width:820px){.fa ul.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fa ul.cards{grid-template-columns:1fr}}

/* colori degli ambiti: un colore per gruppo, lo stesso su riquadri, pannelli e schede */
.g0{--gc:var(--red)}.g1{--gc:var(--dred)}.g2{--gc:var(--ink)}

/* ambiti: pulsanti */
.tgroup{margin:1.6em 0 0}
.tgroup h3{font-size:18px;margin:0 0 .6em;color:var(--gc)}
.fa ul.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:1.2em 0 0;padding:0;list-style:none}
.fa .tiles li{padding:0;margin:0;background:none}
.tile{--k:16px;--rr:10px;display:flex;align-items:center;height:100%;min-height:78px;padding:14px 22px;text-decoration:none;font:600 18px/1.2 var(--title);transition:translate .2s}
.tile:hover{translate:0 -3px}
.tile{background:var(--gc);color:#fff}
.tile[aria-expanded="true"]{background:var(--sand);color:var(--gc);box-shadow:inset 0 0 0 3px var(--gc);translate:0 -3px}

/* pannelli: si aprono sotto i pulsanti; l'intestazione è un blocco colorato a angolo tagliato */
.panel{padding:0 var(--gut) clamp(32px,5vw,56px);background:var(--sand);scroll-margin-top:76px}
.js .panel{display:none}.js .panel.open{display:block}
.panel .ph{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 calc(-1 * var(--gut)) 1.2em;padding:22px var(--gut);background:var(--gc);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.panel .ph h2{margin:0}
.panel .close{--k:10px;font:600 15px var(--title);background:var(--sand);color:var(--ink);border:0;padding:10px 20px;cursor:pointer;flex:none}
.panel .close:hover{background:var(--ink);color:var(--sand)}
.pb{margin:1.8em 0 0}
.pb h3{margin:0 0 .6em;color:var(--gc)}

/* immagini */
.poster{width:100%;max-width:340px;justify-self:center;border-radius:4px;box-shadow:0 8px 24px rgba(18,35,63,.25)}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;justify-items:center;margin:0 0 1em}
.posters figure{margin:0;width:100%;max-width:340px}
.posters img{width:100%;border-radius:4px;box-shadow:0 8px 24px rgba(18,35,63,.2)}
.posters figcaption{font-size:14px;line-height:1.4;margin-top:8px}
.mask{width:min(300px,70%);justify-self:center}
.logoM{width:100%;max-width:420px;justify-self:center}

.pic{margin:0 0 1.2em;max-width:460px}.pic img{width:100%;border-radius:4px}.pic figcaption{font-size:14px;margin-top:6px}

/* sette pilastri */
.fa ul.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:0}
.fa .pillars li{--k:18px;--rr:10px;margin:0;padding:18px 22px;display:flex;flex-direction:column;gap:6px}
.pillars b{font:700 22px/1.15 var(--title)}.pillars span{font-size:15px;line-height:1.45}
.fa .p0{background:var(--red);color:#fff}.fa .p1{background:var(--dred);color:#fff}.fa .p2{background:var(--sand2);color:var(--ink)}.fa .p3{background:var(--red);color:#fff}

/* libro */
.libro{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:center}
.libro img{width:100%;max-width:440px;justify-self:center}
.by{font:600 20px var(--title);margin-top:-.2em}
blockquote{margin:1.2em 0;padding:0;font:600 clamp(22px,2.6vw,30px)/1.3 var(--title)}

dl{margin:0;display:grid;grid-template-columns:140px 1fr;gap:6px 24px}
dt{font-weight:700}dd{margin:0}
.ft{background:var(--ink);color:var(--sand);padding:32px var(--gut);font-size:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.ft a{color:var(--sand)}.ft b{font-family:var(--title);letter-spacing:.1em}

@media (max-width:820px){
  :root{--cut:28px}
  body{font-size:17px}
  .two,.libro{grid-template-columns:1fr}
  dl{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.tile{transition:none}}