/* ==========================================================================
   Under Pressure — DEMS, Università di Milano-Bicocca
   Elegant / minimalist / editorial. Black & white + one muted red "pen" ink.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --ink:#141414; --ink-soft:#2b2b2b; --grey-700:#4a4a4a; --grey-500:#6f6f6f;
  --grey-300:#cfccc6; --grey-200:#e5e2dc; --paper:#ffffff; --paper-warm:#faf9f7;
  --pen:#b5372e; --pen-ink:#9a2f27; --pen-wash:rgba(181,55,46,.10);
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1240px; --maxw-text:46rem;
  --step-1:.25rem; --step-2:.5rem; --step-3:.75rem; --step-4:1rem; --step-5:1.5rem;
  --step-6:2rem; --step-7:3rem; --step-8:4rem; --step-9:6rem; --step-10:8rem;
  --radius:4px; --rule:1px solid var(--grey-300);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  font:400 clamp(1.0625rem,.25vw + 1rem,1.2rem)/1.7 var(--font-body);
  color:var(--ink-soft);
  background:var(--paper-warm);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;}
img{height:auto;}
a{color:var(--ink); text-underline-offset:.16em;}
a:hover{color:var(--pen-ink);}
strong{color:var(--ink);}
:focus-visible{outline:2px solid var(--pen); outline-offset:2px; border-radius:2px;}

/* ---------- Typography ---------- */
h1,.h1{margin:0; font:700 clamp(2.75rem,6vw + 1rem,5.25rem)/1.02 var(--font-display); letter-spacing:-.01em; color:var(--ink);}
h2,.h2{margin:0; font:600 clamp(1.9rem,3vw + 1rem,3rem)/1.1 var(--font-display); letter-spacing:-.005em; color:var(--ink);}
h3,.h3{margin:0; font:600 clamp(1.3rem,1.4vw + .9rem,1.75rem)/1.2 var(--font-display); color:var(--ink);}
p{margin:0 0 var(--step-4);}
.eyebrow{margin:0; font:italic 400 clamp(.95rem,1vw + .6rem,1.15rem)/1.4 var(--font-display); color:var(--grey-700);}
.lead{font:400 clamp(1.1rem,.7vw + 1rem,1.375rem)/1.6 var(--font-body); color:var(--ink-soft);}
.caption,.source{font:400 .85rem/1.4 var(--font-body); color:var(--grey-500);}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem);}
.prose{max-width:var(--maxw-text);}
section{padding-block:clamp(3.5rem,8vw,8rem);}
section.page-head,section.hero{padding-bottom:clamp(2rem,5vw,4rem);}

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute; left:var(--step-4); top:-100px; z-index:100;
  background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:var(--radius);
  font:500 .95rem/1 var(--font-body); text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:var(--step-4); color:#fff;}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- Pen-stroke motif ---------- */
.pen-underline{display:block; width:min(240px,42%); height:auto; margin-top:.35rem;}
.pen-underline--hero{display:block; width:min(360px,52%); margin:.4rem auto 0;}
.pen-divider{display:block; width:100%; height:12px; margin-block:clamp(1.5rem,4vw,3rem);}
.stat-annotated{position:relative; display:inline-block; padding:.25em .55em;}
.pen-circle{position:absolute; inset:-14% -8%; width:116%; height:128%; pointer-events:none;}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:var(--rule);
}
.nav-inner{position:relative; display:flex; align-items:center; justify-content:space-between; min-height:64px;}
.wordmark{font:600 1.15rem/1 var(--font-display); color:var(--ink); text-decoration:none; letter-spacing:.01em;}
.wordmark:hover{color:var(--pen-ink);}
.site-nav{display:flex; gap:var(--step-5);}
.nav-link{font:500 .95rem/1 var(--font-body); color:var(--grey-700); text-decoration:none; padding-block:.4rem; position:relative;}
.nav-link:hover{color:var(--ink);}
.nav-link[aria-current="page"]{color:var(--ink);}
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8' fill='none'%3E%3Cpath d='M2 5 C 26 2, 52 7, 78 4 C 96 2, 108 6, 118 4.5' stroke='%23b5372e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% 100%;
}

/* Hamburger */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--ink); padding:0;
}
.nav-toggle-box{position:relative; display:block; width:24px; height:16px;}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle-bar{top:7px;}
.nav-toggle-bar::before{top:-7px;}
.nav-toggle-bar::after{top:7px;}
.is-open .nav-toggle-bar{background:transparent;}
.is-open .nav-toggle-bar::before{transform:translateY(7px) rotate(45deg);}
.is-open .nav-toggle-bar::after{transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{max-width:var(--maxw); text-align:center; padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(1.5rem,4vw,3rem);}
.hero .eyebrow{max-width:48rem; margin-inline:auto;}
.hero-title{margin:var(--step-4) 0 var(--step-5); font:700 clamp(2.9rem,7vw + 1rem,6.25rem)/1.02 var(--font-display); letter-spacing:-.015em;}
.pen-underline--hero{margin-inline:auto;}
.hero-subtitle{max-width:46rem; margin:0 auto; font:500 clamp(1.1rem,1vw + .95rem,1.45rem)/1.5 var(--font-body); color:var(--grey-700);}

/* ---------- Intro (short project description) ---------- */
.intro{padding-block:clamp(1.5rem,4vw,3rem);}
.intro-lead{max-width:54rem; margin-inline:auto; text-align:center; font:400 clamp(1.2rem,.9vw + 1.05rem,1.6rem)/1.55 var(--font-body); color:var(--ink-soft);}

/* ---------- Home cards ---------- */
.home-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--step-5); padding-block:clamp(2rem,5vw,4rem);}
.home-card{
  display:flex; flex-direction:column; gap:var(--step-2);
  padding:var(--step-6) var(--step-5) var(--step-5);
  background:var(--paper); border:1px solid var(--grey-200); border-radius:var(--radius);
  text-decoration:none; color:var(--ink-soft);
  transition:border-color .3s ease, transform .3s ease;
}
.home-card:hover{border-color:var(--pen); transform:translateY(-2px); color:var(--ink-soft);}
.home-card-index{font:600 .9rem/1 var(--font-body); letter-spacing:.14em; color:var(--grey-500); transition:color .3s ease;}
.home-card:hover .home-card-index{color:var(--pen);}
.home-card-title{font:600 clamp(1.4rem,1.5vw + 1rem,1.9rem)/1.15 var(--font-display); color:var(--ink); margin:0;}
.home-card-desc{margin:0; color:var(--grey-700); font-size:.98rem;}
.home-card-go{margin-top:auto; padding-top:var(--step-4); font-size:1.4rem; color:var(--grey-500); transition:color .3s ease, transform .3s ease;}
.home-card:hover .home-card-go{color:var(--pen); transform:translateX(4px);}

/* ---------- Data section / charts ---------- */
.data-section .lead{margin-top:var(--step-4);}
.charts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--step-7); margin-top:clamp(2rem,5vw,3.5rem);}
.chart{margin:0; padding:var(--step-5); background:var(--paper); border:1px solid var(--grey-200); border-radius:var(--radius);}
.chart-title{font:600 clamp(1.1rem,1vw + .8rem,1.3rem)/1.25 var(--font-display); color:var(--ink); margin:0 0 var(--step-4);}
.chart svg.chart-svg{width:100%; height:auto; display:block;}
.chart figcaption{margin-top:var(--step-3);}

/* Chart reveal (motion-guarded below) */
.chart .bar{transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.chart-a .bar{transform-box:fill-box; transform-origin:bottom; transform:scaleY(0);}
.chart-b .bar{transform-box:fill-box; transform-origin:left; transform:scaleX(0);}
.chart-a.is-visible .bar{transform:scaleY(1);}
.chart-b.is-visible .bar{transform:scaleX(1);}
.chart-a .bar:nth-of-type(1){transition-delay:0s;}
.chart-a .bar:nth-of-type(2){transition-delay:.12s;}
.chart-a .bar:nth-of-type(3){transition-delay:.24s;}
.chart-b .bar:nth-of-type(1){transition-delay:0s;}
.chart-b .bar:nth-of-type(2){transition-delay:.12s;}
.chart-b .bar:nth-of-type(3){transition-delay:.24s;}
.axis-line{stroke:var(--grey-200); stroke-width:1;}
.axis-base{stroke:var(--grey-300); stroke-width:1.5;}
.bar-value{font:700 15px/1 var(--font-body); fill:var(--grey-700);}
.bar-value--hi{fill:var(--pen);}
.axis-label{font:500 13px/1.2 var(--font-body); fill:var(--grey-700);}
.cat-label{font:400 13px/1.3 var(--font-body); fill:var(--grey-700);}

/* Stat tile */
.stat-tile{
  margin-top:clamp(2rem,5vw,3.5rem); padding-top:clamp(1.5rem,4vw,2.5rem);
  border-top:var(--rule); max-width:var(--maxw-text);
}
.stat-tile p{font:400 clamp(1.15rem,1vw + 1rem,1.5rem)/1.5 var(--font-body); color:var(--ink-soft);}
.stat-tile .source{font-size:.85rem;}
.stat-num{font:700 1.15em/1 var(--font-display); color:var(--pen); font-style:normal;}
.stat-num-plain{font:700 1.15em/1 var(--font-display); color:var(--ink); font-weight:700;}

/* ---------- Quote box ---------- */
.quotebox{text-align:center; padding-top:clamp(1.5rem,4vw,3rem); padding-bottom:clamp(2.5rem,6vw,4.5rem);}
.quote{position:relative; margin:0 auto; max-width:60rem;}
.quote-text{
  margin:0; font:400 clamp(1.65rem,3vw + 1rem,3.1rem)/1.28 var(--font-display);
  color:var(--ink); transition:opacity .4s ease;
}
.quote-source{margin-top:var(--step-4); font:500 1rem/1.4 var(--font-body); color:var(--grey-500);}
.quote-controls{display:flex; flex-direction:column; align-items:center; gap:var(--step-5); margin-top:var(--step-6);}
.quote-next{
  background:none; border:0; padding:.5rem 1rem; cursor:pointer; color:var(--pen);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.quote-next:hover{transform:translateX(5px);}
.pen-arrow{display:block; width:clamp(64px,8vw,84px); height:auto;}
.quote-dots{display:inline-flex; gap:.5rem;}
.quote-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:var(--grey-300); cursor:pointer; transition:background .3s ease;
}
.quote-dots button[aria-current="true"]{background:var(--pen);}

/* ---------- Chi siamo ---------- */
.page-head .lead{margin-top:var(--step-4);}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--step-6); padding-block:clamp(2rem,5vw,4rem);}
.team-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--step-3);
  padding:var(--step-5); background:var(--paper); border:1px solid var(--grey-200);
  border-radius:var(--radius); transition:border-color .3s ease;
}
.team-card:hover,.team-card:focus-within{border-color:var(--grey-300);}
.team-photo{
  width:clamp(140px,18vw,200px); aspect-ratio:1/1; object-fit:cover; object-position:center top;
  border-radius:50%; border:1px solid var(--grey-200);
  filter:grayscale(1) contrast(1.02); transition:filter .4s ease;
}
.team-card:hover .team-photo,.team-card:focus-within .team-photo{filter:grayscale(0);}
.team-name{font:600 clamp(1.3rem,1.4vw + .9rem,1.65rem)/1.2 var(--font-display); color:var(--ink); margin:0;}
.team-role{margin:0; font:500 .95rem/1.4 var(--font-body); color:var(--pen-ink);}
.team-bio{margin:0; color:var(--ink-soft); font-size:.98rem;}
.team-link{margin-top:var(--step-2); font:500 .95rem/1.4 var(--font-body); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--grey-300); padding-bottom:2px; align-self:flex-start;}
.team-link:hover{color:var(--pen-ink); border-color:var(--pen);}
.dems{background:var(--paper); border-top:var(--rule);}
.dems .prose{margin-top:var(--step-4);}

/* ---------- Progetto ---------- */
.subnav{display:flex; flex-wrap:wrap; gap:var(--step-3); margin-top:var(--step-6);}
.subnav-link{
  display:inline-flex; align-items:center; padding:.5rem 1rem;
  border:1px solid var(--grey-300); border-radius:999px;
  font:500 .95rem/1 var(--font-body); color:var(--ink); text-decoration:none;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.subnav-link:hover{border-color:var(--pen); color:var(--pen-ink); background:var(--pen-wash);}
.proj-section{scroll-margin-top:88px;}
.proj-section h2{margin-bottom:var(--step-5);}
.proj-section .prose p{color:var(--ink-soft);}
.note{
  margin-top:var(--step-5); padding-left:var(--step-4);
  border-left:2px solid var(--pen); font:italic 400 1.05rem/1.6 var(--font-display);
  color:var(--grey-700);
}
.cta{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--pen); color:#fff;
  padding:.85rem 1.4rem; border-radius:var(--radius);
  font:600 1.05rem/1 var(--font-body); text-decoration:none; margin-top:var(--step-5);
}
.cta:hover{background:var(--pen-ink); color:#fff;}
.cta .cta-arrow{transition:transform .3s ease;}
.cta:hover .cta-arrow{transform:translateX(4px);}

/* ---------- Partecipa (spiegazione esperimento) ---------- */
.callout{
  margin-top:var(--step-5); padding:var(--step-5) var(--step-6);
  background:var(--pen-wash); border:1px solid var(--grey-200);
  border-left:3px solid var(--pen); border-radius:var(--radius);
}
.callout p{margin:0; color:var(--ink-soft);}
.callout p+p{margin-top:var(--step-3);}

.groups{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--step-5);
  margin-top:var(--step-6); padding:0; list-style:none;
}
.group-card{
  display:flex; flex-direction:column; gap:var(--step-3);
  padding:var(--step-6) var(--step-5) var(--step-5);
  background:var(--paper); border:1px solid var(--grey-200); border-radius:var(--radius);
}
.group-num{font:700 .9rem/1 var(--font-body); letter-spacing:.14em; color:var(--pen); text-transform:uppercase;}
.group-title{font:600 clamp(1.2rem,1.2vw + .9rem,1.5rem)/1.15 var(--font-display); color:var(--ink); margin:0;}
.group-card p{margin:0; color:var(--grey-700); font-size:.98rem;}

.info-list{margin:var(--step-5) 0 0; padding:0; list-style:none; display:grid; gap:var(--step-3);}
.info-list li{position:relative; padding-left:1.8rem; color:var(--ink-soft);}
.info-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--pen); font-weight:700;
}

.timeline{margin:var(--step-6) 0 0; padding:0; list-style:none; display:grid; gap:0;}
.tl-item{
  display:grid; grid-template-columns:minmax(9rem,12rem) 1fr; gap:var(--step-5);
  padding:var(--step-5) 0; border-top:1px solid var(--grey-200); align-items:baseline;
}
.tl-item:last-child{border-bottom:1px solid var(--grey-200);}
.tl-date{font:600 1rem/1.3 var(--font-body); color:var(--pen-ink);}
.tl-body{margin:0; color:var(--ink-soft);}
.tl-body strong{color:var(--ink);}

@media (max-width:720px){
  .groups{grid-template-columns:1fr;}
  .tl-item{grid-template-columns:1fr; gap:var(--step-1); padding:var(--step-4) 0;}
}

.contact{text-align:center;}
.contact h2{display:inline-block;}
.contact .pen-underline{margin-inline:auto;}
.contact-intro{margin-top:var(--step-4); margin-inline:auto; color:var(--ink-soft);}
.contact-email{margin-top:var(--step-5);}
.contact-email a{font:600 clamp(1.5rem,3vw + 1rem,2.75rem)/1.2 var(--font-display); color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; transition:border-color .3s ease, color .3s ease;}
.contact-email a:hover{color:var(--pen-ink); border-color:var(--pen);}

/* ---------- Contatti: il gruppo ---------- */
.people{text-align:center; padding-block:clamp(2rem,5vw,4rem);}
.people h2{display:inline-block;}
.people .pen-underline{margin-inline:auto;}
.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--step-6); margin-top:var(--step-6); text-align:center;}
.person-card{
  display:flex; flex-direction:column; align-items:center; gap:var(--step-2);
  padding:var(--step-5); background:var(--paper);
  border:1px solid var(--grey-200); border-radius:var(--radius);
  transition:border-color .3s ease;
}
.person-card:hover{border-color:var(--pen);}
.person-name{font:600 clamp(1.2rem,1.2vw + .9rem,1.5rem)/1.2 var(--font-display); color:var(--ink); margin:0;}
.person-role{margin:0; font:500 .95rem/1.4 var(--font-body); color:var(--pen-ink);}
.person-mail{margin:0;}
.person-mail a{font:500 1.05rem/1.3 var(--font-body); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--grey-300); padding-bottom:2px; transition:color .3s ease, border-color .3s ease; word-break:break-word;}
.person-mail a:hover{color:var(--pen-ink); border-color:var(--pen);}
.person-card .team-link{align-self:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper); border-top:var(--rule); padding-block:clamp(2.5rem,6vw,4rem);}
.footer-inner{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--step-6);}
.footer-brand{flex:0 0 auto;}
.footer-logo{height:clamp(54px,6vw,72px); width:auto; display:block;}
.footer-credits{flex:1 1 240px;}
.footer-credits p{margin:0 0 var(--step-2); color:var(--grey-700); font-size:.95rem;}
.footer-contact a{color:var(--ink); text-decoration:underline;}
.footer-contact a:hover{color:var(--pen-ink);}
.footer-sources{flex:1 1 100%; margin:0; padding-top:var(--step-4); border-top:1px solid var(--grey-200);}

/* ---------- Privacy banner ---------- */
.privacy-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:color-mix(in srgb,var(--paper) 96%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);
  backdrop-filter:saturate(1.1) blur(8px);
  border-top:2px solid var(--pen);
  box-shadow:0 -6px 24px rgba(20,20,20,.08);
}
.privacy-banner[hidden]{display:none;}
.privacy-inner{
  display:flex; align-items:center; gap:var(--step-5);
  padding-block:var(--step-4);
}
.privacy-text{
  margin:0; flex:1 1 auto;
  font:400 .92rem/1.5 var(--font-body); color:var(--grey-700);
}
.privacy-text strong{color:var(--ink);}
.privacy-dismiss{
  flex:0 0 auto; cursor:pointer;
  background:var(--ink); color:#fff; border:0; border-radius:var(--radius);
  padding:.6rem 1.2rem; font:600 .95rem/1 var(--font-body);
  transition:background .3s ease;
}
.privacy-dismiss:hover{background:var(--pen-ink);}

@media (max-width:640px){
  .privacy-inner{flex-direction:column; align-items:flex-start; gap:var(--step-3);}
  .privacy-dismiss{align-self:flex-end;}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .team{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .charts-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-toggle{display:inline-flex;}
  .site-nav{display:none;}
  .is-open .site-nav{
    display:flex; flex-direction:column; gap:var(--step-4);
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:var(--rule);
    padding:var(--step-4) clamp(1.25rem,4vw,2.5rem);
  }
  .home-cards{grid-template-columns:1fr;}
  .team{grid-template-columns:1fr;}
  .people-grid{grid-template-columns:1fr;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .chart-a .bar{transform:scaleY(1);}
  .chart-b .bar{transform:scaleX(1);}
  .quote-text{transition:none;}
}