/* ---------- self-hosted webfonts ----------
   Served from this site rather than Google's CDN: no third-party request is
   made on page load, so no visitor IP reaches Google before any consent.
   Both files are variable, covering every weight the site uses. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/playfair-display-italic.woff2") format("woff2");
}

/* =====================================================================
   Bocconi Students Management Club — core stylesheet
   Palette and type are lifted from the club's Instagram design system:
   navy #0C3152 on off-white #FAFAFA, Didone italic + Montserrat bold.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy: #0c3152;
  --navy-deep: #071f35;
  --navy-soft: #1c4c78;
  --steel: #6e93b4;
  --paper: #fafafa;
  --paper-2: #f1f0ec;
  --line: rgba(12, 49, 82, 0.14);
  --line-strong: rgba(12, 49, 82, 0.3);

  --ff-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --ff-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1560px;
  --nav-h: 84px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops the rubber-band overscroll: the page ends where the page ends.
     Where a browser bounces anyway, the strip it exposes is the canvas
     background — navy here, so it reads as more footer instead of a band of
     the wrong colour. The body paints the paper over the document itself. */
  overscroll-behavior-y: none;
  background: var(--navy);
}

body {
  margin: 0;
  background: var(--paper);
  /* never shorter than the viewport, so the navy canvas cannot show through
     under a short page */
  min-height: 100svh;
  overscroll-behavior-y: none;
  color: var(--navy);
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height: auto keeps the width/height attributes doing their job — they are
   only an aspect-ratio hint, and without this the height attribute wins as a
   presentational hint and squashes any image sized by width alone. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--navy); color: var(--paper); }

/* ---------- typography ---------- */
.display {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.stamp {
  font-family: var(--ff-sans);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: clamp(0.62rem, 0.75vw, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.32rem);
  line-height: 1.55;
  max-width: 62ch;
  color: rgba(12, 49, 82, 0.82);
}

.body-text {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.75;
  color: rgba(12, 49, 82, 0.82);
  max-width: 66ch;
}

.num-tag {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

/* ---------- layout ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(5rem, 11vh, 9.5rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 900px) {
  .section-head { grid-template-columns: 0.9fr 1.1fr; align-items: end; }
}

.section-title {
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
}

.section-title .stamp { display: block; font-size: 0.86em; }

/* ---------- grain + progress ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--navy);
  z-index: 60;
}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy);
  display: grid;
  place-items: center;
  transition: clip-path 1s var(--ease);
  clip-path: inset(0 0 0 0);
}

.loader__inner { text-align: center; color: var(--paper); }
.loader__mark { width: 52px; height: auto; margin-inline: auto; opacity: 0; animation: markIn 0.9s var(--ease) forwards; }
.loader__bar { width: min(240px, 50vw); height: 1px; background: rgba(250, 250, 250, 0.25); margin: 1.75rem auto 0; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; animation: barIn 1.15s var(--ease-io) 0.15s forwards; }
.loader__pct { margin-top: 0.9rem; font-size: 0.66rem; letter-spacing: 0.24em; font-weight: 700; opacity: 0.7; }

@keyframes markIn { to { opacity: 1; transform: translateY(0); } }
@keyframes barIn { to { transform: scaleX(1); } }

body.loaded .loader { clip-path: inset(0 0 100% 0); pointer-events: none; }

/* page transition curtain */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--navy);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.75s var(--ease);
}

body.leaving .curtain { transform: translateY(0); }

/* ---------- navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 80;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), height 0.4s var(--ease), box-shadow 0.4s;
}

.nav.is-stuck {
  background: rgba(250, 250, 250, 0.86);
  backdrop-filter: blur(14px);
  height: 68px;
  box-shadow: 0 1px 0 var(--line);
}

.nav__row {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo-svg { display: block; width: auto; height: clamp(30px, 3.4vw, 40px); }
.nav__logo { display: block; transition: opacity 0.3s var(--ease); }
.nav__logo:hover { opacity: 0.62; }

.nav__right { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.lang button {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.42em 0.85em;
  border-radius: 999px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
  color: rgba(12, 49, 82, 0.55);
}

.lang button.is-active { background: var(--navy); color: var(--paper); }

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.burger__lines { width: 30px; display: grid; gap: 6px; }
.burger__lines i { display: block; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease), width 0.45s var(--ease); }
.burger__lines i:last-child { width: 62%; margin-left: auto; }
.burger:hover .burger__lines i:last-child { width: 100%; }

body.menu-open .burger__lines i:first-child { transform: translateY(3.75px) rotate(9deg); }
body.menu-open .burger__lines i:last-child { transform: translateY(-3.75px) rotate(-9deg); width: 100%; }

/* dark headers (board page) */
.nav.on-dark:not(.is-stuck) { color: var(--paper); }
.nav.on-dark:not(.is-stuck) .lang { border-color: rgba(250, 250, 250, 0.35); }
.nav.on-dark:not(.is-stuck) .lang button { color: rgba(250, 250, 250, 0.7); }
.nav.on-dark:not(.is-stuck) .lang button.is-active { background: var(--paper); color: var(--navy); }
/* while the fullscreen menu is open the bar sits on navy */
body.menu-open .nav { background: transparent; backdrop-filter: none; box-shadow: none; color: var(--paper); }
body.menu-open .nav .lang { border-color: rgba(250, 250, 250, 0.35); }
body.menu-open .nav .lang button { color: rgba(250, 250, 250, 0.7); }
body.menu-open .nav .lang button.is-active { background: var(--paper); color: var(--navy); }

/* ---------- fullscreen menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: var(--navy);
  color: var(--paper);
  clip-path: circle(0% at calc(100% - 90px) 42px);
  transition: clip-path 0.85s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  visibility: hidden;
}

body.menu-open .menu { clip-path: circle(150% at calc(100% - 90px) 42px); visibility: visible; }
body.menu-open { overflow: hidden; }

.menu__grid {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 1000px) {
  .menu__grid { grid-template-columns: 1.35fr 0.65fr; align-items: center; }
}

.menu__list {
  display: grid;
  gap: clamp(0.15rem, 1vw, 0.4rem);
  --menu-fs: clamp(2.4rem, 7.4vw, 6rem);
}

/* The slide-up reveal needs a clipping box, but Playfair italic draws well
   outside the em box — the ascender of the A, the descender of the y. The clip
   box is grown by that overshoot and pulled back with an equal negative
   margin, so the letters are whole and the rhythm of the list is unchanged. */
.menu__item {
  overflow: hidden;
  padding-block: calc(var(--menu-fs) * 0.12);
  margin-block: calc(var(--menu-fs) * -0.12);
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: clamp(0.15rem, 0.9vw, 0.5rem);
  transform: translateY(135%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}

body.menu-open .menu__link { transform: translateY(0); }

.menu__link span.idx {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.5;
  transform: translateY(-0.6em);
}

.menu__link span.txt {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--menu-fs);
  line-height: 1;
  position: relative;
  display: inline-block;
  transition: transform 0.6s var(--ease), opacity 0.4s;
}

.menu__link:hover span.txt { transform: translateX(clamp(8px, 1.5vw, 26px)); }
.menu__list:hover .menu__link:not(:hover) span.txt { opacity: 0.42; }

/* A pseudo-element sat above the baseline and cut through the letters, so the
   current page is marked with a real underline: it clears the baseline and
   skips descenders on its own. */
.menu__link.is-current span.txt {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: auto;
  opacity: 0.92;
}

.menu__aside { display: grid; gap: 1.75rem; align-content: center; }
.menu__aside h4 { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.6rem; }
.menu__aside p, .menu__aside a { font-size: 0.92rem; color: rgba(250, 250, 250, 0.8); }
.menu__aside a:hover { color: #fff; }
.menu__emails { display: grid; gap: 0.35rem; justify-items: start; }
.menu__socials { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.menu__socials a { position: relative; }
.menu__socials a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.45s var(--ease); }
.menu__socials a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- buttons ---------- */
.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05em 2.1em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover { color: var(--btn-bg); }
.btn:hover::before { transform: translateY(0); }

.btn__arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border: 1px solid var(--line-strong);
  color: var(--navy);
}

.btn--ghost::before { background: var(--navy); }
.btn--ghost:hover { color: var(--paper); }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--navy); }
.btn--light::before { background: var(--navy); }
.btn--light:hover { color: var(--paper); }

.btn[disabled], .btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: scaleX(1);
  transition: transform 0.5s var(--ease);
}

.link-underline:hover::after { transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease), transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].in { opacity: 1; transform: none; }

[data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }

[data-reveal="scale"] { opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
[data-reveal="scale"].in { opacity: 1; transform: none; }

.line-wrap { overflow: hidden; display: block; }
.line-wrap > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.in .line-wrap > span,
.line-wrap.in > span { transform: translateY(0); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  /* keeps the content clear of the scroll cue and the badge line below it */
  padding-bottom: clamp(5rem, 10vh, 7rem);
  overflow: hidden;
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__grid-lines i { border-left: 1px solid var(--line); }
.hero__grid-lines i:last-child { border-right: 1px solid var(--line); }

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title-wrap { position: relative; }

.hero__title {
  /* capped so the longest line still fits the 1560px shell: past this size the
     bold line wrapped onto a third row on wide screens */
  font-size: clamp(2.6rem, 9.6vw, 8.5rem);
  position: relative;
  line-height: 1.04;          /* room for the italic descenders above the bold line */
}

/* The reveal wrapper clips its overflow, which cut the tail of the italic
   descenders. It now carries enough bottom padding for them to be drawn in
   full, pulled back by an equal negative margin so the two lines keep their
   spacing. */
.hero__title .line-wrap,
.phero__title .line-wrap { padding-bottom: 0.3em; margin-bottom: -0.24em; }

.hero__title .l1 { display: block; }
.hero__title .l2 { display: block; margin-left: clamp(0px, 6vw, 150px); }

.hero__title .stamp { font-size: 0.76em; letter-spacing: -0.03em; }

.hero__meta {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .hero__meta { grid-template-columns: 1fr 1fr auto; }
  .hero__meta .flexrow { grid-column: 3; justify-content: flex-end; }
}

.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  z-index: 2;
}

.hero__cue i {
  width: 1px; height: 46px;
  background: linear-gradient(var(--navy), transparent);
  animation: cue 2.2s var(--ease-io) infinite;
  transform-origin: 0 0;
}

@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--navy);
  color: var(--paper);
  padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  animation: slide 38s linear infinite;
  flex: 0 0 auto;
}

.marquee__track span {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.marquee__track span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

@keyframes slide { to { transform: translateX(-100%); } }

.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------- manifesto (scroll-linked words) ---------- */
.manifesto p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.6rem, 4.4vw, 3.5rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.manifesto .w { opacity: 0.16; transition: opacity 0.35s linear; }
.manifesto .w.on { opacity: 1; }

/* ---------- divisions (pinned horizontal) ---------- */
.pin { position: relative; }
.pin__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.pin__track { display: flex; gap: clamp(1rem, 2.2vw, 2rem); padding-inline: var(--gutter); will-change: transform; }

.dcard {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 430px);
  height: min(66vh, 560px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  /* the icon is positioned absolutely top-right, so the copy is pushed to the
     bottom of the card and the two never meet */
  justify-content: flex-end;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.55s var(--ease), border-color 0.55s var(--ease);
}

.dcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateY(100%);
  transition: transform 0.7s var(--ease);
}

.dcard:hover { color: var(--paper); border-color: var(--navy); }
.dcard:hover::before { transform: translateY(0); }

.dcard__idx { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; opacity: 0.72; }

.dcard--area {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}

.dcard--area::before { background: var(--paper); }
.dcard--area:hover { color: var(--navy); border-color: var(--navy); }
.dcard--area .dcard__mark { opacity: 0.3; }
.dcard--area:hover .dcard__mark { opacity: 0.6; }

.dcard__flag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.4em 0.85em;
  opacity: 0.7;
}

.dcard__name {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.02;
}

.dcard__desc { font-size: 0.92rem; line-height: 1.65; opacity: 0.78; }

.dcard__mark {
  position: absolute;
  right: clamp(1rem, 2vw, 1.75rem);
  top: clamp(1rem, 2vw, 1.75rem);
  width: clamp(72px, 9vw, 118px);
  aspect-ratio: 1;
  opacity: 0.32;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}

.dcard:hover .dcard__mark { opacity: 0.62; transform: rotate(-4deg) scale(1.06); }

.dcard__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.dcard__tags li {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid currentColor;
  opacity: 0.55;
  border-radius: 999px;
  padding: 0.4em 0.85em;
}

.pin__hint { position: absolute; bottom: 6vh; left: var(--gutter); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.45; }

/* mobile fallback: plain grid */
.pin.no-pin .pin__stage { position: static; height: auto; display: block; }
.pin.no-pin .pin__track { flex-direction: column; transform: none !important; padding-inline: 0; }
.pin.no-pin .dcard { width: 100%; height: auto; min-height: 340px; }
.pin.no-pin .pin__hint { display: none; }


/* Icon per card and per activity row. The paths are relative to this file,
   because a url() inside a custom property resolves against the stylesheet. */
.dcard--strategy   { --icon: url("../img/icons/briefcase.png"); }
.dcard--marketing  { --icon: url("../img/icons/megaphone.png"); }
.dcard--finance    { --icon: url("../img/icons/handshake.png"); }
.dcard--accounting { --icon: url("../img/icons/folder.png"); }
.dcard--events     { --icon: url("../img/icons/microphone.png"); }
.dcard--media      { --icon: url("../img/icons/phone.png"); }

.act--cases     { --icon: url("../img/icons/documents.png"); }
.act--debates   { --icon: url("../img/icons/speech-bubble.png"); }
.act--talks     { --icon: url("../img/icons/speaker.png"); }
.act--aperitivi { --icon: url("../img/icons/drinks.png"); }

/* ---------- activities ---------- */
.acts { border-top: 1px solid var(--line); }

.act {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3.2vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  transition: padding-inline 0.6s var(--ease), color 0.5s;
}

.act:hover { padding-inline: clamp(0.5rem, 2vw, 2rem); }

.act__idx { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; opacity: 0.7; }

.act__name {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 1.05;
}

.act__desc { font-size: 0.92rem; opacity: 0.72; max-width: 46ch; }

.act__row { display: grid; gap: 0.5rem; }
@media (min-width: 900px) { .act__row { grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; } }

.act__bg {
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(110px, 14vw, 190px);
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: 0;
  transform: scale(0.85) rotate(-8deg);
  transition: opacity 0.55s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}

.act:hover .act__bg { opacity: 0.22; transform: scale(1) rotate(0); }

/* ---------- stats ---------- */
.stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.stat__n { font-family: var(--ff-display); font-style: italic; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1; }
.stat__l { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin-top: 0.6rem; }

/* ---------- apply / countdown ---------- */
.apply {
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}


.apply .shell { position: relative; z-index: 2; }

.apply__mark {
  position: absolute;
  color: var(--paper);
  height: auto;
  right: clamp(1rem, 7vw, 8rem);
  bottom: clamp(2rem, 8vw, 6rem);
  width: clamp(110px, 20vw, 280px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}
.apply .lede, .apply .body-text { color: rgba(250, 250, 250, 0.8); }

.apply__title { font-size: clamp(2.6rem, 8vw, 7rem); }

.countdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.6rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 560px) {
  .countdown { grid-template-columns: repeat(4, max-content); }
}

.cd-unit { min-width: clamp(78px, 9vw, 132px); }
.cd-unit__n {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-unit__l { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.75; margin-top: 0.5rem; }

.apply__status {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(250, 250, 250, 0.3);
  border-radius: 999px;
  padding: 0.55em 1.15em;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.apply__status i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.apply__window {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 250, 0.18);
}

.apply__window div { min-width: 150px; }
.apply__window dt { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0.55; }
.apply__window dd { margin: 0.35rem 0 0; font-family: var(--ff-display); font-style: italic; font-size: 1.4rem; }

/* ---------- cross links ---------- */
.crosslinks { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 800px) { .crosslinks { grid-template-columns: repeat(3, 1fr); } }

.cross {
  background: var(--paper);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 200px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease);
}

.cross::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  transform: translateY(100%);
  transition: transform 0.6s var(--ease);
}

.cross:hover { color: var(--paper); }
.cross:hover::before { transform: translateY(0); }
.cross__t { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.05; }
.cross__d { font-size: 0.86rem; opacity: 0.72; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: var(--paper); padding-block: clamp(3rem, 7vw, 6rem) 0; overflow: hidden; }
.footer__top { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.2fr 0.8fr 0.8fr; } }
.logo-svg--footer { height: 46px; }
.footer h4 { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.5; margin-bottom: 1rem; }
.footer li + li { margin-top: 0.55rem; }
.footer a, .footer p { color: rgba(250, 250, 250, 0.78); font-size: 0.9rem; }
.footer a:hover { color: #fff; }
.footer__affiliation {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  max-width: 62ch;
  font-size: 0.72rem;
  line-height: 1.65;
  opacity: 0.55;
}

.footer__affiliation + .footer__bottom { margin-top: 1.5rem; }

.footer__bottom {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 250, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.7rem;
  opacity: 0.6;
}

/* The wordmark sits at the very bottom and is cut by the edge of the page:
   only the upper part of the letters is visible. */
.footer__word {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(5.5rem, 24vw, 22rem);
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.12;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  height: 0.56em;              /* cuts the glyphs below their waist */
  user-select: none;
}

.footer__word > span { display: block; margin-top: -0.2em; }

/* ---------- page hero (inner pages) ---------- */
.phero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.phero__title { font-size: clamp(2.8rem, 9.5vw, 9rem); line-height: 1.04; }
.phero__title .stamp { display: block; font-size: 0.72em; }

.phero__row { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .phero__row { grid-template-columns: 1.05fr 0.95fr; align-items: end; } }

/* the line-art that heads each inner page */
.phero__ill {
  width: min(280px, 46vw);
  height: auto;
  margin-inline: auto;
  opacity: 0.9;
}

/* the line-art beside the "who we are" text on the home page */
.about__ill { width: min(280px, 42vw); height: auto; }

/* ---------- org chart (structure page) ---------- */
.org { position: relative; display: grid; gap: clamp(1rem, 2.4vw, 2rem); }

.org__row { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 780px) { .org__row--4 { grid-template-columns: repeat(4, 1fr); } .org__row--2 { grid-template-columns: repeat(2, 1fr); } }

.node {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--paper);
  position: relative;
  transition: transform 0.5s var(--ease), border-color 0.5s, background 0.5s, color 0.5s;
}

.node:hover { transform: translateY(-6px); border-color: var(--navy); }
.node--lead { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.node__role { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }
.node__name { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.7rem); margin-top: 0.4rem; line-height: 1.1; }
.node__d { font-size: 0.82rem; opacity: 0.72; margin-top: 0.5rem; }

.org__level { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 900px) { .org__level { grid-template-columns: minmax(200px, 260px) 1fr; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); } }

.org__label .node__role { opacity: 0.75; }
.org__label .node__d { font-size: 0.84rem; opacity: 0.7; margin-top: 0.4rem; }

.org__cells { display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .org__cells { grid-template-columns: repeat(4, 1fr); } }

.node--sm {
  display: grid;
  place-items: center;
  min-height: 76px;
  text-align: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  padding: 0.9rem 1rem;
}

.node--pair { grid-auto-flow: column; gap: 0.6rem; }
.node--pair i {
  width: 26px; height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.45s var(--ease), border-color 0.45s;
}
.node--pair:hover i { background: var(--navy); border-color: var(--navy); }

.node--dots {
  background-image: radial-gradient(var(--line-strong) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  background-position: center;
}

.org__connector { height: clamp(28px, 5vw, 56px); position: relative; }
.org__connector::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
  transform: scaleY(var(--grow, 1));
  transform-origin: 50% 0;
}

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  text-align: left;
}
.acc__btn h3 { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.35rem, 3vw, 2.3rem); line-height: 1.1; font-weight: 500; }
.acc__ico { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.acc__ico::before, .acc__ico::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; }
.acc__ico::after { transform: rotate(90deg); transition: transform 0.5s var(--ease); }
.acc__item.open .acc__ico::after { transform: rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.acc__item.open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel .body-text { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }


/* ---------- application process timeline ---------- */
.proc { position: relative; padding-left: clamp(1.75rem, 6vw, 0px); }

.proc__line {
  position: absolute;
  top: 0.6rem; bottom: 0.6rem;
  left: clamp(0.35rem, 1.5vw, 0.9rem);
  width: 1px;
  background: var(--line);
}

@media (min-width: 860px) {
  .proc { padding-left: 0; }
  .proc__line { left: clamp(120px, 13vw, 190px); }
}

.proc__line span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--navy);
  transform: scaleY(var(--fill, 0));
  transform-origin: 50% 0;
}

.proc__step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

@media (min-width: 860px) {
  .proc__step {
    grid-template-columns: clamp(120px, 13vw, 190px) 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.proc__step:first-child { padding-top: 0.5rem; }
.proc__step:last-child { padding-bottom: 0.5rem; }

/* the date sits on the line itself */
.proc__when {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

@media (min-width: 860px) {
  .proc__when { justify-content: flex-end; padding-right: clamp(1.25rem, 2.6vw, 2rem); }
}

.proc__date {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(12, 49, 82, 0.68);
  transition: color 0.5s var(--ease);
}

.proc__dot {
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 6vw, 0px) + clamp(0.35rem, 1.5vw, 0.9rem) - 5px);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: background 0.45s var(--ease), transform 0.5s var(--ease), border-color 0.45s;
}

@media (min-width: 860px) {
  .proc__dot { left: auto; right: -5.5px; }
}

.proc__step.is-on .proc__dot { background: var(--navy); border-color: var(--navy); transform: scale(1.25); }
.proc__step.is-on .proc__date { color: var(--navy); }

/* the step itself only appears once the line reaches it */
.proc__body {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease), transform 0.9s var(--ease);
}

.proc__step.is-on .proc__body { opacity: 1; transform: none; }

.proc__idx { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; opacity: 0.7; }
.proc__t {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  margin-top: 0.35rem;
}
.proc__d { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.75; color: rgba(12, 49, 82, 0.82); max-width: 60ch; margin-top: 0.75rem; }

.proc__note {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(12, 49, 82, 0.78);
  max-width: 56ch;
}

@media (min-width: 860px) { .proc__note { margin-left: calc(clamp(120px, 13vw, 190px) + clamp(2rem, 5vw, 4.5rem)); } }

/* requirements list */
.reqs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.reqs li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(12, 49, 82, 0.82);
}
.reqs__n { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; opacity: 0.4; }

/* ---------- events timeline ---------- */
.tl { position: relative; padding-left: clamp(1.5rem, 5vw, 4rem); }

.tl__line {
  position: absolute;
  left: clamp(0.25rem, 1.4vw, 1.1rem);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}

.tl__line span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--navy);
  transform: scaleY(var(--fill, 0));
  transform-origin: 50% 0;
}

.ev {
  position: relative;
  display: block;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.6s var(--ease), color 0.4s;
}

.ev:hover { padding-left: clamp(0.5rem, 1.6vw, 1.4rem); }

.ev::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 5vw, 4rem) + clamp(0.25rem, 1.4vw, 1.1rem) - 4px);
  top: clamp(2rem, 3.6vw, 3rem);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: background 0.4s var(--ease), transform 0.5s var(--ease);
}

.ev:hover::before, .ev.is-next::before { background: var(--navy); border-color: var(--navy); transform: scale(1.35); }

.ev__grid { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .ev__grid { grid-template-columns: 0.22fr 1fr 0.34fr auto; align-items: center; gap: 2rem; } }

.ev__date { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.ev__title { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.08; }
.ev__meta { font-size: 0.82rem; opacity: 0.85; }
.ev__cta { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ev__cta i { display: block; width: 26px; height: 1px; background: currentColor; transition: width 0.45s var(--ease); }
.ev:hover .ev__cta i { width: 44px; }

/* stretched link: the whole row opens the event, the register CTA stays clickable */
.ev { position: relative; }
.ev__link { position: static; }
.ev__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ev__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev__actions { position: relative; z-index: 2; justify-self: start; }
.ev__register { white-space: nowrap; }
.ev.is-past .ev__title { opacity: 0.7; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4em 0.85em;
}

.chip--solid { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.chip--past { opacity: 0.5; }

/* truncated list: the last row fades out and the button opens the rest */
#ev-list { position: relative; }

#ev-list.is-truncated .ev:last-of-type { -webkit-mask-image: linear-gradient(#000 30%, transparent 96%); mask-image: linear-gradient(#000 30%, transparent 96%); }
#ev-list.is-truncated .ev:last-of-type { border-bottom: 0; }

.tl__more { display: flex; justify-content: center; padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.btn__count { opacity: 0.55; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filters button {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.6em 1.15em;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s;
}
.filters button.is-active { background: var(--navy); color: var(--paper); border-color: var(--navy); }

/* ---------- event detail ---------- */
.edetail { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) { .edetail { grid-template-columns: 1.25fr 0.75fr; align-items: start; } }

.panel { border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.panel + .panel { margin-top: 1rem; }
.panel h4 { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; margin-bottom: 1.1rem; }

.person { display: flex; gap: 1rem; align-items: center; padding-block: 0.85rem; border-top: 1px solid var(--line); }
.person:first-of-type { border-top: 0; padding-top: 0; }
.person__av {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  border: 1px solid var(--line);
}
.person__n { font-weight: 600; font-size: 0.94rem; }
.person__r { font-size: 0.74rem; opacity: 0.65; }

.meta-list dt { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; opacity: 0.55; }
.meta-list dd { margin: 0.3rem 0 1.25rem; font-size: 0.98rem; }
.meta-list dd:last-child { margin-bottom: 0; }
.meta-list__note { font-size: 0.78rem; opacity: 0.6; }

.sticky-panel { position: sticky; top: calc(var(--nav-h) + 1rem); }


/* ---------- structure: the chart with people in it ---------- */
/* three controls plus the logo are tight on the smallest phones */
@media (max-width: 430px) {
  .lang button { padding-inline: 0.6em; letter-spacing: 0.1em; }
  .nav__right { gap: 0.6rem; }
}

@media (max-width: 380px) {
  .burger__label { display: none; }
}


/* seats */
.seat {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  padding: clamp(0.85rem, 1.6vw, 1.15rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}

.seat:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.seat--tba { opacity: 0.75; }

.seat__face {
  width: clamp(42px, 4.5vw, 52px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.95rem;
}

.seat__face--img { background-image: var(--photo); background-size: cover; background-position: center; text-indent: -9999px; }

.seat__meta { min-width: 0; }
.seat__name { font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.15; }
.seat__role { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; margin-top: 0.3rem; }
.seat__extra { font-size: 0.72rem; opacity: 0.6; margin-top: 0.2rem; }

/* the name is a button now, so it has to be un-styled back into text */
.seat__link { display: inline; }
.seat__link--btn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.seat__li { display: inline-block; margin-left: 0.35em; vertical-align: -0.02em; }
.seat__li .ic-li { display: block; }
.seat__li:hover .ic-li { opacity: 1; }
.ic-li { width: 0.72em; height: 0.72em; flex: 0 0 auto; opacity: 0.45; transition: opacity 0.35s var(--ease); }
.seat__link:hover .ic-li, .mlist a:hover .ic-li { opacity: 1; }
.seat__link:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }

/* rows and division columns */
.chart__row { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 700px) { .chart__row--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px) { .chart__row--3 { grid-template-columns: repeat(3, 1fr); } }

.chart { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
@media (min-width: 700px) { .chart { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .chart { grid-template-columns: repeat(4, 1fr); } }

.chart__col { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.2vw, 0.9rem); }
.chart__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.2rem; }
.chart__div { font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; white-space: nowrap; }
.chart__rule { flex: 1; height: 1px; background: var(--line-strong); opacity: 0.6; }
.chart__stack { display: grid; gap: clamp(0.4rem, 0.9vw, 0.6rem); }

/* the members rectangle opens the pop-up.
   It follows the last seat instead of being pushed to the bottom of the
   column: divisions do not all hold the same number of people, and aligning
   the rectangles left a hole under the shorter columns. */
.chart__members {
  margin-top: clamp(0.4rem, 1vw, 0.85rem);
  width: 100%;
  text-align: left;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  padding: clamp(0.9rem, 1.8vw, 1.2rem);
  display: grid;
  gap: 0.7rem;
  background: transparent;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}

.chart__members:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.chart__membersTop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.chart__membersLabel { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.chart__membersCount { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; opacity: 0.55; }
.chart__membersCta { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; display: inline-flex; align-items: center; gap: 0.5em; }
.chart__members:hover .chart__membersCta { opacity: 1; }
.chart__members i { font-style: normal; transition: transform 0.4s var(--ease); }
.chart__members:hover i { transform: translateX(4px); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); }
.modal[aria-hidden="true"] { pointer-events: none; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 31, 53, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(76vh, 720px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 6px;
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 30px 80px rgba(7, 31, 53, 0.25);
}

.modal[aria-hidden="false"] .modal__backdrop { opacity: 1; }
.modal[aria-hidden="false"] .modal__panel { opacity: 1; transform: none; }
body.modal-open { overflow: hidden; }

.modal__close {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.4rem);
  right: clamp(0.9rem, 2vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.modal__close:hover { opacity: 1; }
.modal__close span:last-child { font-size: 1.2rem; line-height: 1; }

.modal__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 0.4rem; }
.modal__title:empty { display: none; }
.modal__body { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

/* ---------- profile card inside the pop-up ----------
   The same anatomy as a card on the board page: portrait or initials, the
   name (which opens LinkedIn), the biography and the sectors. */
.pcard__head { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.25rem); }

.pcard__face {
  width: clamp(56px, 8vw, 74px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sand, rgba(12, 49, 82, 0.07));
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.pcard__face--img { background-image: var(--photo); background-size: cover; background-position: center; text-indent: -9999px; }

.pcard__hgroup { margin: 0; font-size: 1rem; font-weight: 400; }
.pcard__name { text-decoration: none; font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1; }
.pcard__name .ic-li { display: inline-block; vertical-align: -0.02em; margin-left: 0.35em; }
a.pcard__name:hover { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
a.pcard__name:hover .ic-li { opacity: 1; }

.pcard__bio { margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0; font-size: 0.94rem; line-height: 1.75; opacity: 0.86; }
.pcard__bio--soon { opacity: 0.5; font-style: italic; }

.pcard__tags { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); padding-top: clamp(0.75rem, 1.6vw, 1.1rem); border-top: 1px solid var(--line); }
.pcard__tagsLabel { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; margin-bottom: 0.6rem; }
.pcard__tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pcard__tags li {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5em 0.95em;
}
.modal__count { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; margin-bottom: 0.75rem; }

.mlist { display: grid; border-top: 1px solid var(--line); }
.mlist li { border-bottom: 1px solid var(--line); }
.mlist a, .mlist span { display: flex; align-items: center; gap: 0.5em; padding-block: 0.75rem; font-size: 1rem; }
.mlist a:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }

/* ---------- board: nine profile cards ---------- */
.people { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .people { grid-template-columns: repeat(3, 1fr); } }

.person-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.4rem);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.person-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.person-card--tba { opacity: 0.78; }

.person-card__head { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.25rem); }

.person-card__photo {
  width: clamp(64px, 7vw, 84px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  transition: transform 0.6s var(--ease);
}

.person-card:hover .person-card__photo { transform: scale(1.04); }
.person-card__photo--img { background-image: var(--photo); background-size: cover; background-position: center; text-indent: -9999px; }

.person-card__name { font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.1; }
/* inline, not inline-flex: a name that wraps to two lines keeps the profile
   icon next to its last word instead of parking it beside the block */
.person-card__link { display: inline; }
.person-card__link .ic-li { display: inline-block; vertical-align: -0.02em; margin-left: 0.35em; }
.person-card__link:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.person-card__link:hover .ic-li { opacity: 1; }
.person-card__role { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; margin-top: 0.45rem; }
.person-card__div { font-size: 0.74rem; opacity: 0.6; margin-top: 0.25rem; }

.person-card__bio { font-size: 0.92rem; line-height: 1.72; color: rgba(12, 49, 82, 0.82); }
.person-card__bio--soon { opacity: 0.5; font-style: italic; }

.person-card__tags { margin-top: auto; padding-top: clamp(0.5rem, 1.2vw, 0.9rem); border-top: 1px solid var(--line); }
.person-card__tagsLabel { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; margin-bottom: 0.6rem; }
.person-card__tags ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.person-card__tags li {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.42em 0.8em;
  opacity: 0.75;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), opacity 0.4s;
}
.person-card:hover .person-card__tags li { opacity: 1; }


/* ---------- keyboard accessibility ---------- */
/* The design removes the browser's own outline in places; this puts a visible,
   brand-coloured one back for anyone navigating with the keyboard. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.dark :focus-visible,
.apply :focus-visible,
.menu :focus-visible,
.footer :focus-visible,
.dcard--area :focus-visible { outline-color: var(--paper); }

/* skip link: first stop of the tab order on every page */
.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 120;
  background: var(--navy);
  color: var(--paper);
  padding: 0.85em 1.5em;
  border-radius: 0 0 4px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease);
}

.skip:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

/* the pre-rendered copy of a JS-built section, replaced on load */
[data-static-note] { display: contents; }

/* ---------- utility ---------- */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mt-5 { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.center { text-align: center; }
.flexrow { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.dark { background: var(--navy); color: var(--paper); }
.dark .body-text, .dark .lede { color: rgba(250, 250, 250, 0.78); }
.dark .rule { background: rgba(250, 250, 250, 0.18); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.parallax { will-change: transform; }



/* the poster's second line, a size down from the title it belongs to */
.ev__subtitle {
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  line-height: 1.15;
  opacity: 0.62;
  /* clears the descenders of the display title above it */
  margin: 0.55em 0 0;
}

/* ---------- cookie consent banner ----------
   Only ever built by consent.js, and only when an analytics ID exists.
   Accept and Refuse carry the same visual weight: a refusal that is harder
   to find than an acceptance is not a free choice. */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 90;
  width: min(720px, calc(100vw - 2 * clamp(0.75rem, 4vw, 2rem)));
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}

.consent.is-in { transform: translate(-50%, 0); opacity: 1; }

.consent__inner {
  background: var(--navy);
  color: var(--paper);
  border-radius: 8px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  box-shadow: 0 18px 50px rgba(12, 49, 82, 0.28);
}

@media (min-width: 720px) {
  .consent__inner { grid-template-columns: 1fr auto; align-items: center; }
}

.consent__title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  opacity: 0.7;
}

.consent__body { margin: 0; font-size: 0.86rem; line-height: 1.6; opacity: 0.92; }
.consent__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.consent__btn {
  flex: 1 1 auto;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.85em 1.7em;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}

.consent__btn--ghost { background: transparent; color: var(--paper); }
.consent__btn:hover { opacity: 0.78; }
.consent :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---------- no JavaScript ----------
   Everything the scroll engine animates starts hidden. With JS off nothing
   would ever reveal it, so the page falls back to its finished state: the
   full text is readable, and the loader never covers it. Text extractors
   and crawlers that do not execute scripts read the same content a visitor
   does. */
html.no-js .loader { display: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
html.no-js .line-wrap > span { transform: none; }
html.no-js .manifesto .w { opacity: 1; }
html.no-js .pin__stage { position: static; height: auto; display: block; }
html.no-js .pin__track { flex-direction: column; transform: none; padding-inline: 0; }
html.no-js .tl__line span,
html.no-js .proc__line span { height: 100%; }
html.no-js .proc__step { opacity: 1; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .line-wrap > span { transform: none !important; }
  .manifesto .w { opacity: 1 !important; }
  .pin__stage { position: static; height: auto; }
  .pin__track { flex-wrap: wrap; transform: none !important; }
}