/*
 * Design system — one set of type roles and one background behaviour for
 * every page. Loaded last (after site.css, editorial.css and the page
 * stylesheets), so it is the single place where these decisions live.
 *
 *   Font      Manrope for every headline, title and paragraph.
 *             Cormorant only for quotations, numerals and signatures.
 *   Roles     display (page h1) · statement (large reading lines) ·
 *             section (h2) · title (cards, h3) · eyebrow · caps
 *   Surface   the page colour changes as a whole on scroll
 *             (theme-surface.js); text follows body[data-page-tone].
 */

:root {
  --sys-display: clamp(2.9rem, 6.6vw, 7rem);
  --sys-statement: clamp(2.3rem, 4.9vw, 4.9rem);
  --sys-section: clamp(2rem, 3.6vw, 3.8rem);
  --sys-ink-dark: #111;
  --sys-ink-light: #f4f1ea;
}

/* ── Display: the h1 of a page ─────────────────────────────────────── */

.ed .ed-display,
.ed .nws-mast__title,
.ed .mfx-title,
.ed .cfp2-cover__title,
.ed .evs-poster__title,
.ed .nwa-title,
.life-open .life-open__title {
  font-family: var(--font-sans);
  font-size: var(--sys-display);
  line-height: 0.96;
  font-weight: 600;
  letter-spacing: -0.055em;
}
.hero .hero__title {
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

/* Accent words inside a headline: gold, same face (no italic serif). */
.ed .ed-display .ed-accent,
.ed .nws-mast__title em,
.ed .mfx-call .mnf-ending__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ── Statement: large reading lines ─────────────────────────────────── */

.biography .biography__statement,
.about-editorial__headline--statement.biography__statement,
.about-editorial .about-editorial__pause-quote,
.mgi-home-story .mgi-home-story__statement,
.life-coda .life-coda__statement,
.ed .mfx-call {
  font-family: var(--font-sans);
  font-size: var(--sys-statement);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.05em;
}

/* ── Section headings (h2) ─────────────────────────────────────────── */

.ed .ed-h2,
.past-events .past-events__title,
.pillars .pillars__title,
.newsletter-block .newsletter-block__title,
.mgi-home-story h2,
.biography .biography__title-line--lead {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.past-events .past-events__title,
.newsletter-block .newsletter-block__title { font-size: var(--sys-section); }
.past-events .past-events__title-accent,
.biography .biography__title-accent { font-weight: inherit; }

/* ── Titles: cards, list rows, h3 ──────────────────────────────────── */

.past-card__title,
.hero__event-title,
.mgi-home-sources h3,
.release-strip .release-strip__title,
.vdo-listen__title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.release-strip .release-strip__title,
.vdo-listen__title { line-height: 1.1; }
.release-strip .release-strip__title { font-size: clamp(1.35rem, 2.2vw, 2rem); }
.vdo-listen__title { font-size: clamp(1.2rem, 1.7vw, 1.6rem); }

/* ── Caps lines (philosophy, interlude, footer) ────────────────────── */

.manifesto .manifesto__title,
.manifesto .manifesto__title-accent,
.interlude .interlude__word,
.interlude .interlude__accent { font-weight: 700; }

/* ── Eyebrows ───────────────────────────────────────────────────────── */

.ed .ed-eyebrow,
.manifesto__eyebrow,
.past-card__eyebrow,
.newsletter-block__eyebrow,
.hero__eyebrow,
.biography .biography__eyebrow,
.mgi-home-story .mgi-home-story__eyebrow,
.about-editorial__eyebrow,
.about-editorial__pause-eyebrow,
.life-eyebrow,
.release-strip__label,
.mo-marquee__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Marquee: one face, outline / gold alternate. */
.mo-marquee .mo-marquee__item:nth-child(even) {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.055em;
}

/* ── Surface: the page colour changes as a whole ───────────────────── */

/* Editorial sections no longer paint their own blocks: the body colour
   (theme-surface.js) shows through, exactly as on Home / About / Biography.
   Photo-backed heroes keep their own dark ground. */
body.has-surface-blend .ed,
body.has-surface-blend .ed .ed-section,
body.has-surface-blend .ed .ed-section--deep,
body.has-surface-blend .ed .ed-section--dark,
body.has-surface-blend .ed .ed-section--night-soft { background: transparent; }
body.has-surface-blend .ed .cfp2-cover,
body.has-surface-blend .ed .evs-poster { background: var(--ed-night); }

/* Text follows the page tone, whichever section it sits in. */
.ed .ed-section,
.manifesto__title,
.manifesto__text,
.manifesto__eyebrow,
.about-editorial__pause-quote,
.about-editorial__pause-text,
.about-editorial__pause-eyebrow,
.about-editorial__pause-cta { transition: color 0.45s ease; }

body.has-surface-blend[data-page-tone="light"] .ed .ed-section:not(.cfp2-cover):not(.evs-poster) {
  --ed-ink: #111;
  --ed-copy: rgba(17, 17, 17, 0.78);
  --ed-soft: rgba(17, 17, 17, 0.52);
  --ed-rule: rgba(17, 17, 17, 0.14);
  color: var(--sys-ink-dark);
}
body.has-surface-blend[data-page-tone="dark"] .ed .ed-section:not(.cfp2-cover):not(.evs-poster) {
  --ed-ink: #f4f1ea;
  --ed-copy: rgba(255, 255, 255, 0.74);
  --ed-soft: rgba(255, 255, 255, 0.5);
  --ed-rule: rgba(255, 255, 255, 0.14);
  color: var(--sys-ink-light);
}
body.has-surface-blend[data-page-tone="light"] .ed .ed-section .ed-accent { color: var(--ed-gold); }
body.has-surface-blend[data-page-tone="dark"] .ed .ed-section .ed-accent { color: var(--ed-gold-bright); }

/* Pieces that had a fixed light / dark colour of their own. */
body.has-surface-blend[data-page-tone="light"] .ed :is(.vdo-film, .cfp2-next, .mfx-q) { color: var(--ed-ink); }
body.has-surface-blend[data-page-tone="light"] .ed :is(.vdo-listen__desc, .vdo-listen__more a) { color: var(--ed-copy); }
body.has-surface-blend[data-page-tone="light"] .ed .cfp2-next { border-color: var(--ed-rule); }
body.has-surface-blend[data-page-tone="dark"] .ed .vdo-filter.is-active { color: #111; }
body.has-surface-blend[data-page-tone="dark"] .ed .vdo-filter:hover { border-color: var(--ed-ink); }

body[data-page-tone="light"] .manifesto .manifesto__title { color: var(--sys-ink-dark); }
body[data-page-tone="light"] .manifesto .manifesto__text { color: rgba(17, 17, 17, 0.72); }
body[data-page-tone="light"] .manifesto .manifesto__eyebrow { color: rgba(17, 17, 17, 0.5); }
body[data-page-tone="light"] .about-editorial__pause :is(.about-editorial__pause-quote, .about-editorial__pause-cta) { color: var(--sys-ink-dark); }
body[data-page-tone="light"] .about-editorial__pause :is(.about-editorial__pause-text, .about-editorial__pause-eyebrow) { color: rgba(17, 17, 17, 0.6); }

/* ── Layout fixes ───────────────────────────────────────────────────── */

/* About, one-column layout: the notes sat on the last line of the headline. */
@media (max-width: 1180px) {
  .about-editorial__hero-notes,
  .about-editorial__manifesto-notes { padding-top: clamp(2.2rem, 5vw, 3.6rem); }
}

/* ══ Art direction ══════════════════════════════════════════════════
   One editorial frame on every page (assets/js/art.js adds the markup):
   column hairlines, a side rail, a ghost page word, numbered sections
   and numbered plates. All of it is tone-neutral: it reads on the dark
   and on the pale page colour alike. */

:root { --sys-gutter: clamp(20px, 3.4vw, 64px); }

/* Column hairlines: the four-column grid the layouts sit on, drawn on the
   page itself, so photographs and solid blocks simply cover it. */
@media (min-width: 900px) {
  body.has-surface-blend {
    --sys-line: linear-gradient(rgba(128, 128, 128, 0.11), rgba(128, 128, 128, 0.11));
    --sys-col: calc((100% - 2 * var(--sys-gutter)) / 4);
    background-image: var(--sys-line), var(--sys-line), var(--sys-line), var(--sys-line), var(--sys-line);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position:
      var(--sys-gutter) 0,
      calc(var(--sys-gutter) + var(--sys-col)) 0,
      calc(var(--sys-gutter) + 2 * var(--sys-col)) 0,
      calc(var(--sys-gutter) + 3 * var(--sys-col)) 0,
      calc(100% - var(--sys-gutter)) 0;
  }
}

/* Side rail */
.sys-rail {
  position: fixed;
  top: 50%;
  z-index: 40;
  display: none;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.62;
}
.sys-rail--left { left: 0; width: var(--sys-gutter); }
.sys-rail--right { right: 0; width: var(--sys-gutter); }
.sys-rail__text {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  white-space: pre;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.sys-rail--right .sys-rail__text { transform: translate(-50%, -50%) rotate(90deg); }
.sys-rail--right .sys-rail__text::before { content: "Scroll  \2014  "; }
@media (min-width: 1280px) and (hover: hover) {
  .sys-rail { display: block; }
}

/* Ghost word behind the first section of an editorial page */
.ed .sys-has-ghost { overflow: hidden; overflow: clip; }
.ed .sys-has-ghost > .ed-shell { position: relative; z-index: 1; }
.sys-ghost {
  position: absolute;
  right: -0.03em;
  bottom: -0.17em;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  font-size: clamp(8rem, 27vw, 31rem);
  line-height: 0.8;
  font-weight: 600;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ed-rule, rgba(128, 128, 128, 0.3));
  will-change: transform;
}

/* Section index in front of the eyebrow: 02 —— THE WORK */
.sys-idx {
  display: inline-flex;
  align-items: center;
  margin-right: 1em;
  color: var(--ed-gold, #b8955a);
  font-variant-numeric: tabular-nums;
}
.sys-idx::after {
  content: "";
  width: 2.4em;
  height: 1px;
  margin-left: 1em;
  background: currentColor;
  opacity: 0.6;
}

/* Plate numbers on large photographs */
.ed .sys-plated { position: relative; }
.sys-plate {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  pointer-events: none;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.85;
}

@media (max-width: 700px) {
  .sys-ghost { font-size: 42vw; bottom: -0.12em; }
  .sys-idx::after { width: 1.4em; }
}

/* ══ Fixes from the pre-submission review ═══════════════════════════ */

/* Floating Spotify button (art.js toggles the classes). */
.spotify-float {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease, padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), gap 0.4s ease;
}
.spotify-float span {
  display: inline-block;
  max-width: 12em;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.spotify-float.is-compact { padding: 0.8rem; gap: 0; }
.spotify-float.is-compact span { max-width: 0; opacity: 0; }
@media (hover: hover) {
  .spotify-float.is-compact:hover { padding: 0.7rem 1.15rem 0.7rem 0.95rem; gap: 0.55rem; }
  .spotify-float.is-compact:hover span { max-width: 12em; opacity: 1; }
}
.spotify-float.is-away { opacity: 0; pointer-events: none; transform: translateY(14px); }

/* Home "one title" roles: the longest word (HUMANITARIAN) was cut off. */
.pillars .pillars__role-label { font-size: clamp(2.3rem, 5.4vw, 5rem); font-weight: 700; }

/* Contact: addresses stay on one line on phones instead of breaking mid-domain. */
@media (max-width: 700px) {
  .cnx-desk .cnx-desk__email { font-size: clamp(1rem, 5.2vw, 1.5rem); word-break: normal; white-space: nowrap; }
  .cnx-desk { grid-template-columns: 2.2rem 1fr; }
}

/* Ghost word: desktop only. On phones it ran through the text of the masthead. */
@media (max-width: 900px) {
  .sys-ghost { display: none; }
}

/* Gallery: batches. */
.gly-tile[hidden] { display: none; }
.gly-more { display: flex; justify-content: center; padding-top: clamp(2rem, 4vw, 3.4rem); }
.gly-more[hidden] { display: none; }
.gly-more__count { opacity: 0.55; font-variant-numeric: tabular-nums; }

/* Navigation labels never wrap ("À propos"). */
.site-nav__links a { white-space: nowrap; }

/* About header: a still photograph with a slow push-in instead of the video loop. */
.about-editorial__hero-still { object-fit: cover; object-position: center 40%; animation: sys-push-in 18s ease-out both; }
@keyframes sys-push-in { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .about-editorial__hero-still { animation: none; } }

/* ── One corner radius ──────────────────────────────────────────────
   Home, About and MGI used 14–34px rounded cards while the editorial
   pages used 4px. One value for every picture and card; pills stay round. */
:root { --sys-radius: 4px; }
.hero__shell,
.hero__event-card,
.past-card,
.mgi-photo-card,
.mgi-home-story__media,
.mgi-home-source-card,
.mgi-home-hero__content::before,
.about-editorial__video-frame,
.biography__media,
.biography__media-slide,
.newsletter-block__content,
.content-panel,
.default-entry { border-radius: var(--sys-radius); }

/* MGI All Stars: same section-heading role as the rest of the site. */
.mgi-home-sources .mgi-home-sources__head h2 {
  font-size: var(--sys-section);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
  text-transform: none;
}
.mgi-home-source-card h3 { font-weight: 600; letter-spacing: -0.035em; }

/* ── Video archive ──────────────────────────────────────────────────
   YouTube thumbnails come with their own red banners and lettering:
   shown in one muted grade so the wall reads as one set; full colour on
   hover. Eight films first, the rest behind "Show all videos". */
.vdo-card .vdo-card__frame img {
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  transition: transform 0.9s var(--ed-ease), filter 0.5s ease;
}
.vdo-card:hover .vdo-card__frame img,
.vdo-card:focus-visible .vdo-card__frame img { filter: none; }
.vdo-grid.is-collapsed .vdo-card:nth-child(n + 9) { display: none; }
.vdo-more { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.2rem); }
.vdo-more[hidden] { display: none; }

/* Contact used to be locked to exactly one screen (no footer, nothing below
   the fold). It now scrolls like every other page: form, channels, footer. */
main.site-main--contact { height: auto; min-height: 0; max-height: none; overflow: visible; overflow-x: clip; }
.cnx-head { min-height: 0; padding-bottom: clamp(4.5rem, 9vw, 9rem); }