/* ===========================================================================
   mlav.land — landing
   Swiss / International Typographic style. Trainer Grotesk (single weight:
   regular + italic), 6-column grid, no strokes, two type sizes.
   ======================================================================== */

@font-face {
  font-family: 'Trainer Grotesk';
  src: url('../fonts/TrainerGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trainer Grotesk';
  src: url('../fonts/TrainerGrotesk-RegularItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* — Reset ————————————————————————————————————————————————————————————— */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* — Theme tokens ——————————————————————————————————————————————————————— */
body.home-landing {
  --bg: #fff;
  --fg: #000;
  --fg-strong: #000;       /* never dimmed by the intro state */
  --muted: rgba(0, 0, 0, 0.45);
  --surface: #ececec;      /* solid pill fill (no translucency) */
  --filter-fg: #000;
  --filter-bg: #ececec;
  --filter-active-fg: #fff;
  --filter-active-bg: #000;

  /* Exactly two sizes. */
  --fs: clamp(13px, 0.62vw + 9px, 16px);
  --fs-display: clamp(1.7rem, 3.4vw, 3.2rem);

  --gutter: 20px;
  --transition: 320ms ease;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.home-landing {
    --bg: #000;
    --fg: #fff;
    --fg-strong: #fff;
    --muted: rgba(255, 255, 255, 0.45);
    --surface: #1c1c1c;
    --filter-fg: #fff;
    --filter-bg: #1c1c1c;
    --filter-active-fg: #000;
    --filter-active-bg: #fff;
  }
}
html[data-theme='dark'] body.home-landing {
  --bg: #000;
  --fg: #fff;
  --fg-strong: #fff;
  --muted: rgba(255, 255, 255, 0.45);
  --surface: #1c1c1c;
  --filter-fg: #fff;
  --filter-bg: #1c1c1c;
  --filter-active-fg: #000;
  --filter-active-bg: #fff;
}
html[data-theme='light'] body.home-landing {
  --bg: #fff;
  --fg: #000;
  --fg-strong: #000;
  --muted: rgba(0, 0, 0, 0.45);
  --surface: #ececec;
  --filter-fg: #000;
  --filter-bg: #ececec;
  --filter-active-fg: #fff;
  --filter-active-bg: #000;
}

/* Intro state — content reads gray; the statement keeps full contrast. */
body.home-landing.is-intro {
  --fg: #9a9a9a;
  --muted: #b4b4b4;
  --filter-fg: #9a9a9a;
  --filter-bg: #efefef;
  --filter-active-fg: #fff;
  --filter-active-bg: #9a9a9a;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.home-landing.is-intro {
    --fg: #6e6e6e;
    --muted: #565656;
    --filter-fg: #6e6e6e;
    --filter-bg: #151515;
    --filter-active-fg: #000;
    --filter-active-bg: #6e6e6e;
  }
}
html[data-theme='dark'] body.home-landing.is-intro {
  --fg: #6e6e6e;
  --muted: #565656;
  --filter-fg: #6e6e6e;
  --filter-bg: #151515;
  --filter-active-fg: #000;
  --filter-active-bg: #6e6e6e;
}
html[data-theme='light'] body.home-landing.is-intro {
  --fg: #9a9a9a;
  --muted: #b4b4b4;
  --filter-fg: #9a9a9a;
  --filter-bg: #efefef;
  --filter-active-fg: #fff;
  --filter-active-bg: #9a9a9a;
}

body.home-landing {
  font-family: 'Trainer Grotesk', Arial, sans-serif;
  /* Single-weight typeface: never synthesize bold/italic. */
  font-synthesis: none;
  font-weight: normal;
  font-size: var(--fs);
  line-height: 1.34;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition), color var(--transition);
}
body.home-landing a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  text-decoration-color: currentColor;
}

/* — 6-column grid ——————————————————————————————————————————————————————— */
.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* — Masthead (static, no stroke) ——————————————————————————————————————— */
.masthead {
  align-items: baseline;
  padding: var(--gutter);
}
.masthead__brand,
.masthead__about {
  font: inherit;
  font-weight: normal;
  letter-spacing: 0;
}
.masthead__brand {
  grid-column: 1;
}
.masthead__about {
  grid-column: 5;
  justify-self: end;
  color: var(--muted);
  transition: color var(--transition);
}
.masthead__about:hover,
.masthead__about.is-current { color: var(--fg); }
.masthead__toggles {
  grid-column: 6;
  justify-self: end;
  display: flex;
  gap: 1.1rem;
  white-space: nowrap;
}
.ui-toggle {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color var(--transition);
}
.ui-toggle:hover { color: var(--fg); }
#languageToggle[data-active-language='fr'] .ui-toggle__opt--fr,
#languageToggle[data-active-language='en'] .ui-toggle__opt--en,
#themeToggle[data-active-theme='dark'] .ui-toggle__opt--dark,
#themeToggle[data-active-theme='light'] .ui-toggle__opt--light {
  color: var(--fg);
}

/* — Domain columns ————————————————————————————————————————————————————— */
.domains {
  padding: calc(var(--gutter) * 1.5) var(--gutter) calc(var(--gutter) * 2.5);
  row-gap: var(--gutter);
}
.domain {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.domain__title { color: var(--fg); }
.domain__text {
  max-width: 34ch;
  color: var(--muted);
}
.domain__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gutter);
}

/* — Filter links ——————————————————————————————————————————————————————— */
.filter-pill {
  position: relative;
  z-index: 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
  color: var(--filter-fg);
  transition: color var(--transition);
}
.filter-pill::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.24em;
  right: -0.24em;
  top: -0.14em;
  bottom: -0.02em;
  background: var(--filter-bg);
  transition: background-color var(--transition);
}
.filter-pill:hover {
  color: var(--filter-active-fg);
}
.filter-pill:hover::before {
  background: var(--filter-active-bg);
}
.filter-pill.is-active {
  color: var(--filter-active-fg);
}
.filter-pill.is-active::before {
  background: var(--filter-active-bg);
}

/* — Works list (no strokes) ——————————————————————————————————————————— */
.works { padding: 0 var(--gutter) calc(var(--gutter) * 4); }
.works__header {
  margin-bottom: 0.2rem;
  padding: 0 0 0.3rem;
  color: var(--muted);
  align-items: baseline;
}
.works__sort {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}
.works__sort:hover,
.works__sort.is-active {
  color: var(--fg);
}
.works__sort-indicator {
  min-width: 0.8em;
}
.works__sort--n     { grid-column: 1; }
.works__sort--year  { grid-column: 2; }
.works__sort--title { grid-column: 3 / span 2; }
.works__sort--cat   { grid-column: 5; }
.works__sort--type  { grid-column: 6; justify-self: end; }
.works__list { list-style: none; }
.works__row[hidden] { display: none; }

.works__trigger {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 0;
  color: inherit;
  align-items: baseline;
  transition: color var(--transition);
}
.works__list:hover .works__trigger { color: var(--muted); }
.works__list:hover .works__col--title {
  color: var(--fg);
}
.works__list:hover .works__trigger:hover,
.works__row.is-open .works__trigger { color: var(--fg); }
.works__list:has(.works__row.is-open) .works__row:not(.is-open) .works__col--title {
  color: var(--muted);
}
.works__list:hover .works__trigger:hover .works__col--title,
.works__row.is-open .works__col--title {
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}
.works__row.is-open .works__col--n,
.works__row.is-open .works__col--year,
.works__row.is-open .works__col--title,
.works__row.is-open .works__col--cat,
.works__row.is-open .works__col--type {
  color: var(--fg-strong);
}

.works__col--n     { grid-column: 1; color: var(--muted); }
.works__col--year  { grid-column: 2; color: var(--muted); }
.works__col--title { grid-column: 3 / span 2; color: var(--fg); }
.works__col--cat   { grid-column: 5; color: var(--muted); }
.works__col--type  { grid-column: 6; color: var(--muted); text-align: right; }

/* — Expanding project panel ————————————————————————————————————————————— */
.works__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.works__row.is-open .works__panel { grid-template-rows: 1fr; }

.works__panel-inner {
  overflow: hidden;
  min-height: 0;
  align-items: start;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 320ms ease, padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.works__row.is-open .works__panel-inner {
  padding-top: 1rem;
  padding-bottom: 2.6rem;
  opacity: 1;
}

.works__panel-text {
  grid-column: 3 / span 2;
  align-self: start;
}
.works__panel-text p { margin-bottom: 1rem; }
.works__panel-text p:last-child { margin-bottom: 0; }

.works__panel-meta {
  grid-column: 5 / span 2;
  display: grid;
  gap: 0.9rem;
  align-self: start;
}
.works__meta-item {
  display: grid;
  gap: 0.12rem;
}
.works__meta-label {
  color: var(--muted);
}
.works__meta-value p {
  margin: 0;
}
.works__meta-value a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

/* — Miniatures gallery ————————————————————————————————————————————————— */
.works__gallery {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
  align-self: start;
}
.works__figure {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-self: stretch;
}
.works__thumb {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  align-self: start;
}
.works__thumb-placeholder,
.works__thumb-image {
  width: 100%;
  height: auto;
  display: block;
}
.works__thumb-placeholder {
  position: absolute;
  inset: 0;
  filter: blur(10px);
  transform: scale(1.04);
  transition: opacity 0.24s ease;
  pointer-events: none;
}
.works__thumb-image {
  opacity: 0;
  transition: opacity var(--transition);
}
.works__thumb-image.is-loaded {
  opacity: 1;
}
.works__thumb.is-loaded .works__thumb-placeholder {
  opacity: 0;
}
.works__thumb:hover .works__thumb-image.is-loaded { opacity: 0.72; }
.works__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.82em;
  line-height: 1.2;
}
.works__caption-index {
  flex: 0 0 auto;
}
.works__caption-credit {
  flex: 1 1 auto;
  text-align: right;
}

/* — Lightbox ————————————————————————————————————————————————————————————— */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 64px);
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* — Intro overlay ——————————————————————————————————————————————————————— */
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  pointer-events: auto;
  transition: opacity 520ms ease;
}
.intro.is-dismissed {
  opacity: 0;
  pointer-events: none;
}
.intro__text {
  max-width: 24ch;
  text-align: center;
  font-size: var(--fs-display);
  font-weight: normal;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

/* — Manifesto (domain pages) ——————————————————————————————————————————— */
.manifesto {
  padding: calc(var(--gutter) * 2) var(--gutter) calc(var(--gutter) * 6);
  row-gap: 0;
}
.manifesto__back {
  grid-column: 1 / -1;
  color: var(--muted);
  transition: color var(--transition);
}
.manifesto__back:hover { color: var(--fg); }
.manifesto__title {
  grid-column: 1 / span 4;
  margin-top: 2.5rem;
  font-size: var(--fs-display);
  font-weight: normal;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.manifesto__lede {
  grid-column: 1 / span 4;
  margin-top: 1.4rem;
  max-width: 46ch;
}
.manifesto__body {
  grid-column: 2 / span 4;
  margin-top: 3rem;
  max-width: 64ch;
}
.manifesto__body > * { margin-bottom: 1.1rem; }
.manifesto__body h1,
.manifesto__body h2,
.manifesto__body h3 { margin-top: 2rem; }
.manifesto__body figure,
.manifesto__body img { display: block; width: 100%; height: auto; }
.manifesto__body figure { margin: 2rem 0; }
.manifesto__body figcaption { margin-top: 0.4rem; color: var(--muted); }
.manifesto__body a { text-decoration: underline; text-underline-offset: 0.15em; }
.manifesto__body ul,
.manifesto__body ol { padding-left: 1.2em; }

@media (max-width: 760px) {
  .manifesto__title,
  .manifesto__lede,
  .manifesto__body { grid-column: 1 / -1; }
}

/* — About page ————————————————————————————————————————————————————————— */
.about {
  padding: calc(var(--gutter) * 2) var(--gutter) calc(var(--gutter) * 6);
  row-gap: 0;
}
.about__intro {
  max-width: 60ch;
}
.about__intro p { margin-bottom: 1rem; }
.about__intro p:last-child { margin-bottom: 0; }

.about__intro-grid {
  grid-column: 1 / -1;
  row-gap: calc(var(--gutter) * 2);
}
.about__intro-block {
  grid-column: span 2;
}

.about__lists {
  grid-column: 1 / -1;
  margin-top: calc(var(--gutter) * 3);
  row-gap: calc(var(--gutter) * 2);
}
.about__col { grid-column: span 2; }
.about__col-title {
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.about__list { list-style: none; }
.about__list li { padding: 0.12rem 0; }

.about__partners {
  grid-column: 1 / -1;
  margin-top: calc(var(--gutter) * 3);
}
.about__partners-list {
  list-style: none;
  columns: 3;
  column-gap: var(--gutter);
}
.about__partner {
  break-inside: avoid;
  padding: 0.12rem 0;
}
.about__partner a { text-decoration: underline; text-underline-offset: 0.15em; }
.about__partner-role { color: var(--muted); }
.about__partner-role::before { content: " — "; }

@media (max-width: 760px) {
  .about__intro-block { grid-column: 1 / -1; }
  .about__col { grid-column: 1 / -1; }
  .about__partners-list { columns: 2; }
}

/* — Responsive ————————————————————————————————————————————————————————— */
@media (max-width: 900px) {
  .domain { grid-column: span 3; }
  .domain:last-child { grid-column: span 6; max-width: 34ch; }
}

@media (max-width: 760px) {
  body.home-landing { --gutter: 14px; }

  html,
  body.home-landing,
  body.home-landing main {
    width: 100dvw;
    max-width: 100dvw;
  }

  .masthead { display: flex; justify-content: space-between; }

  .domains { display: flex; flex-direction: column; gap: calc(var(--gutter) * 1.5); }
  .domain, .domain:last-child { max-width: none; }
  .domain__text { max-width: none; }
  .filter-pill { display: none; }

  .works__trigger { grid-template-columns: 2.4rem 4.5rem 1fr; }
  .works__header { grid-template-columns: 2.4rem 4.5rem 1fr; }
  .works__sort--n { grid-column: 1; }
  .works__sort--year { grid-column: 2; }
  .works__sort--title { grid-column: 3; }
  .works__sort--cat { display: none; }
  .works__sort--type { display: none; }
  .works__col--title { grid-column: 3; }
  .works__col--cat { display: none; }
  .works__col--type { display: none; }

  .works__panel-inner { display: block; }
  .works__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1.4rem;
  }
  .works__panel-text { margin-bottom: 1.4rem; }

  .lightbox {
    width: 100dvw;
    min-height: 100dvh;
    padding: 14px;
  }
}