/* ==========================================================================
   MBC. Swiss editorial plus glass. All tokens and component styles.
   Light is the default. [data-mode="dark"] inverts the world.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'MBC Didone';
  src: url('../assets/fonts/mbc-didone.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MBC Grotesk';
  src: url('../assets/fonts/mbc-grotesk.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --paper: #F0F0F0;
  --print: #FAFAF8;
  --ink: #0F0F0F;
  --ink-2: #555555;
  --ink-3: #6B6B6B;
  --grid: rgba(15, 15, 15, 0.07);
  --hairline: rgba(15, 15, 15, 0.12);
  --block: #D6D6D3;
  --frost: rgba(240, 240, 240, 0.42);
  --frost-edge: rgba(255, 255, 255, 0.35);
  --gold: #C9A24B;
  --gold-text: #8A6522;
  --error: #A93F2C;
  --grain-opacity: 0.04;

  /* print object colors, identical in both modes */
  --p-ink: #0F0F0F;
  --p-line: #B5B5B5;
  --p-block: #D6D6D3;
  --p-gold: #C9A24B;
  --p-gold-text: #8A6522;

  --gold-grad: linear-gradient(180deg, #E6C87F 0%, #C9A24B 52%, #A8842F 100%);

  --grotesk: 'Helvetica Neue', Helvetica, 'MBC Grotesk', Arial, sans-serif;
  --didone: 'MBC Didone', Georgia, 'Times New Roman', serif;

  --margin: 24px;
  --cols: 12;
  --section-space: clamp(6rem, 12vw, 12rem);

  --t-fast: 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-mid: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

[data-mode='dark'] {
  --paper: #0F0F0F;
  --ink: #F0F0F0;
  --ink-2: #A3A3A3;
  --ink-3: #8A8A8A;
  --grid: rgba(240, 240, 240, 0.07);
  --hairline: rgba(240, 240, 240, 0.14);
  --block: #2A2A2A;
  --frost: rgba(15, 15, 15, 0.45);
  --frost-edge: rgba(255, 255, 255, 0.12);
  --gold-text: #E6C87F;
  --error: #F2A08F;
  --grain-opacity: 0.06;
  color-scheme: dark;
}

@media (max-width: 620px) {
  :root { --margin: 16px; }
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection { background: var(--gold); color: #0F0F0F; }

/* --- Skip link ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: 0.78rem;
  font-weight: 500;
}
.skip:focus { left: 0; }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.shell {
  width: 100%;
  padding-inline: var(--margin);
  margin-inline: auto;
}

.g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0;
}

.section {
  position: relative;
  padding-block: var(--section-space);
  border-top: 1px solid var(--hairline);
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.label {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-3);
}

/* --- Type scale ----------------------------------------------------------- */

.masthead-type {
  font-family: var(--didone);
  font-weight: 800;
  font-size: clamp(9rem, 38vw, 34rem);
  line-height: 0.78;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  white-space: nowrap;
}

.statement {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.h2 {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.h3 {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lead-hero {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 62ch;
}

.body { font-size: 16px; line-height: 1.5; max-width: 72ch; }

.caption {
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-3);
}

.counter {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* --- Grid overlay and grain ---------------------------------------------- */

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding-inline: var(--margin);
}
.grid-overlay span {
  border-left: 1px solid var(--grid);
  height: 100%;
}
.grid-overlay span:last-child { border-right: 1px solid var(--grid); }

@media (max-width: 900px) {
  .grid-overlay { grid-template-columns: repeat(4, 1fr); }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url('../assets/mbc/grain.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}
[data-mode='dark'] .grain { mix-blend-mode: screen; }

/* --- Nav row -------------------------------------------------------------- */

.navrow {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 56px;
  display: flex;
  align-items: center;
  padding-inline: var(--margin);
  pointer-events: none;
}
.navrow > * { pointer-events: auto; }

.nav-plus {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-left: -10px;
  color: var(--gold);
  flex: 0 0 auto;
  transition: transform var(--t-fast);
}
.nav-plus.is-open { transform: rotate(45deg); }

.nav-items {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  color: var(--ink);
}

.nav-link {
  grid-column: span 2;
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 14px 0 14px 12px;
  display: inline-block;
  justify-self: start;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  bottom: 8px;
  width: 1px;
  height: 6px;
  background: currentColor;
  opacity: 0.45;
}
.nav-link.is-active::after {
  background: var(--gold);
  opacity: 1;
}

.nav-cta {
  flex: 0 0 auto;
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 14px 0;
  margin-left: 24px;
  color: var(--ink);
}
.nav-cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 10px;
  height: 1px;
  width: 30%;
  background: var(--gold);
  transition: width var(--t-fast);
}
.nav-cta:hover::after { width: 100%; }

@media (max-width: 1100px) {
  .nav-items, .nav-cta { display: none; }
}

/* --- Full screen menu ----------------------------------------------------- */

.fullmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  padding: 80px var(--margin) var(--margin);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.fullmenu.is-open { display: flex; }

.fullmenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.fullmenu-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 500;
}

/* --- Invert switch and language switch ------------------------------------ */

.invert {
  position: fixed;
  left: var(--margin);
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 44px;
  padding-right: 10px;
  color: var(--ink);
}

.langs {
  position: fixed;
  right: var(--margin);
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
}
.lang-code {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 10px 2px;
  border-bottom: 1px solid transparent;
}
.lang-code.is-active {
  border-bottom-color: var(--gold);
}

@media (max-width: 620px) {
  .invert, .langs { display: none; }
}

/* --- Quick menu ----------------------------------------------------------- */

.quick-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
}
.quick-scrim.is-open { display: block; }

.quick {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  width: min(620px, calc(100vw - 2 * var(--margin)));
  border-radius: 20px;
  background: var(--frost);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--frost-edge);
  overflow: hidden;
  display: none;
}
.quick.is-open { display: block; }

.quick-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.quick-field input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font-size: 1rem;
}
.quick-esc {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  padding: 3px 7px;
}

.quick-list { max-height: 48vh; overflow-y: auto; padding: 8px 0; }
.quick-group {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 10px 20px 6px;
}
.quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 20px;
  font-size: 0.9rem;
  min-height: 44px;
}
.quick-item[aria-selected='true'] { background: var(--hairline); }
.quick-item .tick { width: 6px; height: 6px; background: var(--gold); opacity: 0; }
.quick-item[aria-selected='true'] .tick { opacity: 1; }
.quick-foot {
  border-top: 1px solid var(--hairline);
  padding: 12px 20px;
  font-size: 0.7rem;
  color: var(--ink-3);
}
.quick-empty { padding: 18px 20px; font-size: 0.9rem; color: var(--ink-3); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 3;
}

.hero-mast {
  position: relative;
  padding-inline: var(--margin);
  margin-top: calc(var(--mast-fs) * -0.085);
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}
.hero-mast .masthead-type {
  font-size: var(--mast-fs);
  display: inline-block;
  width: auto;
  transform-origin: center;
}

.hero-diag {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-diag line { stroke: var(--hairline); stroke-width: 1; }

.hero-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-content: center;
  padding-inline: var(--margin);
  position: relative;
  z-index: 1;
}
.hero-label { grid-column: 1 / span 3; padding-left: 12px; }
.hero-lead {
  grid-column: 6 / span 7;
  padding-left: 12px;
  max-width: 48ch;
}

.hero-cue {
  padding: 0 var(--margin) 104px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  z-index: 1;
}
.hero-cue .rule {
  width: 1px;
  height: 48px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
  margin-left: 12px;
}
.hero-cue .rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(-100%);
  animation: draw 2.6s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes draw {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .hero-label { grid-column: 1 / span 12; margin-bottom: 20px; }
  .hero-lead { grid-column: 1 / span 12; }
}

/* --- Logo mark ------------------------------------------------------------ */

.logomark {
  font-family: var(--didone);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Icons ---------------------------------------------------------------- */

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
  flex: 0 0 auto;
}
.icon-sm { width: 14px; height: 14px; }

/* --- CTAs. Every CTA owns its class, defined once. ------------------------ */

/* Film, chapter one, primary */
.cta-film-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 28px 0 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
}
.cta-film-primary::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gold);
  transition: width var(--t-mid);
  z-index: -1;
}
.cta-film-primary:hover::before { width: 100%; }
.cta-film-primary:hover { color: var(--ink); }

/* Film, chapter one, secondary */
.cta-film-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  font-size: 0.95rem;
  font-weight: 500;
}
.cta-film-secondary::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 16px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width var(--t-mid);
}
.cta-film-secondary:hover::after { width: 100%; }

/* Magazine back cover */
.cta-mag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 7cqw;
  height: 9cqw;
  background: var(--p-ink);
  color: var(--print);
  font-size: 3.1cqw;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.cta-mag::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  border-top: 1.6cqw solid var(--p-gold);
  border-left: 1.6cqw solid transparent;
}
.cta-mag:hover { background: var(--print); color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-ink); }

/* Poster grid, sixth card */
.cta-poster {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--p-ink);
  color: var(--p-ink);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.cta-poster:hover { background: var(--p-ink); color: var(--print); }

/* Brief builder */
.cta-brief {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
}
.cta-brief[disabled] {
  background: none;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: not-allowed;
}
.cta-brief .fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  width: 0;
  transition: width var(--t-mid);
}

/* Contact */
.cta-send {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 56px;
  padding: 0 28px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
}
.cta-send::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gold);
  transition: width var(--t-mid);
  z-index: -1;
}
.cta-send:hover::before { width: 100%; }
.cta-send:hover { color: var(--ink); }
.cta-send[disabled] { opacity: 0.6; cursor: progress; }

/* --- Film ----------------------------------------------------------------- */

.film { position: relative; z-index: 3; }

.film-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.film-media { position: absolute; inset: 0; }
.film-media video,
.film-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.film-media .is-live { opacity: 1; }

.film-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 30%, color-mix(in srgb, var(--paper) 72%, transparent) 100%);
  pointer-events: none;
}

.film-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
  z-index: 2;
}

.film-copy {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-content: center;
  padding-inline: var(--margin);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.film-copy.is-live { opacity: 1; pointer-events: auto; }
.film-copy[data-align='left'] .film-copy-inner { grid-column: 1 / span 6; padding-left: 12px; }
.film-copy[data-align='right'] .film-copy-inner { grid-column: 7 / span 6; padding-left: 12px; }
.film-copy-inner { max-width: 46ch; }
.film-kicker {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.film-body { color: var(--ink-2); margin-top: 20px; max-width: 46ch; }
.film-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 36px; }

.film-counters {
  position: absolute;
  right: var(--margin);
  bottom: 40px;
  z-index: 4;
  display: flex;
  gap: 16px;
}
.film-counter {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-bottom: 10px;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
}
.film-counter.is-active { color: var(--ink); }
.film-counter.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: var(--gold);
}

@media (max-width: 860px) { .film-counters { display: none; } }
@media (max-width: 900px) {
  .film-copy[data-align='left'] .film-copy-inner,
  .film-copy[data-align='right'] .film-copy-inner { grid-column: 1 / span 12; }
}

/* --- Principles ----------------------------------------------------------- */

.principles { position: relative; z-index: 3; }
.principles-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-content: center;
  padding-inline: var(--margin);
}
.principles-count { grid-column: 1 / span 2; padding-left: 12px; }
.principles-count .counter { display: block; color: var(--ink-3); padding: 3px 0; }
.principles-count .counter.is-active { color: var(--ink); position: relative; }
.principles-count .counter.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  width: 7px;
  height: 2px;
  background: var(--gold);
}
.principles-stack { grid-column: 4 / span 9; position: relative; min-height: 8em; }
.principles-stack .statement {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t-slow), transform var(--t-slow), color var(--t-slow);
  transform: translate(0, 0);
}
.principles-stack .statement.is-live { opacity: 1; color: var(--ink); }
.principles-stack .statement.is-past { opacity: 1; }
/* The measure. Four segments on one hairline, aligned to the statement column.
   Each inks in from the left as its principle becomes live and stays inked, so by
   the last statement the rule is whole: four principles, one standard. The leading
   tick carries the gold while that principle is the live one. */
.principles-measure {
  position: relative;
  grid-column: 4 / span 9;
  margin-top: clamp(5rem, 9vw, 7.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 1px;
  background: var(--hairline);
}
/* the tick that closes the run, on the container so it never fights a segment */
.principles-measure::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--hairline);
}
.pm-seg { position: relative; --pm-fill: 0; }
/* the tick that opens each segment */
.pm-seg::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--hairline);
  transition: background var(--t-slow), height var(--t-slow), top var(--t-slow);
}
/* the ink fill */
.pm-seg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(var(--pm-fill));
  transform-origin: left center;
  transition: transform 0.85s var(--a-ease-out);
}
.pm-seg.is-done { --pm-fill: 1; }
/* the live segment stands its opening tick taller, in gold */
.pm-seg.is-live::before {
  background: var(--gold);
  height: 15px;
  top: -7px;
}

.principles-line {
  grid-column: 4 / span 7;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--t-slow);
}
.principles-line.is-live { opacity: 1; }

.principles-flat { display: none; }
.principles-flat .statement { margin-bottom: 0.4em; }

@media (max-width: 900px) {
  .principles { height: auto !important; }
  .principles-stage { display: none; }
  .principles-flat { display: block; }
}

/* --- The magazine: "The MBC brochure, Issue 01" --------------------------- */

.mag { position: relative; z-index: 3; }

.mag-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  perspective: 2200px;
  overflow: hidden;
}

.mag-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.mag-lines line {
  stroke: var(--p-line);
  stroke-width: 1;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mag-lines g.is-live line { stroke-dashoffset: 0; }

.mag-book {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform:
    translateX(var(--shift, -25%))
    translateZ(40px)
    rotateX(14deg)
    rotateZ(-2deg);
  /* no transition: this transform is scroll driven and updated every frame */
  --page-w: min(520px, 38vw);
  --page-h: calc(var(--page-w) * 4 / 3);
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
}

.mag-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -34px;
  height: 56px;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ink) 22%, transparent), transparent 70%);
  filter: blur(40px);
  transform: translateZ(-1px);
  pointer-events: none;
}

.mag-leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-w);
  height: var(--page-h);
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(calc(var(--turn, 0) * -180deg));
}

.mag-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--print);
  border-radius: 2px;
  overflow: hidden;
  container-type: inline-size;
  color: var(--p-ink);
}
.mag-face.back { transform: rotateY(180deg); }

/* page thickness on the outer edge */
.mag-face::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 4px;
  background: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--p-ink) 16%, transparent) 0 1px,
    transparent 1px 2px);
  pointer-events: none;
}
.mag-face.front::after { right: 0; }
.mag-face.back::after { left: 0; }

/* gutter shade and page bend toward the spine */
.mag-face::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  pointer-events: none;
  z-index: 5;
}
.mag-face.front::before {
  left: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--p-ink) 13%, transparent), transparent);
}
.mag-face.back::before {
  right: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--p-ink) 13%, transparent), transparent);
}

.mag-leaf .turn-shade {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: calc(var(--shade, 0));
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--p-ink) 40%, transparent));
}

/* --- Page furniture ------------------------------------------------------- */

.pg { position: absolute; inset: 0; padding: 7cqw 6cqw; display: flex; flex-direction: column; }

.pg-rule-words {
  display: flex;
  gap: 2.4cqw;
  align-items: center;
  border-top: 1px solid var(--p-ink);
  padding-top: 1.6cqw;
  font-size: 2.1cqw;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-ink);
}

.pg-header {
  display: flex;
  align-items: stretch;
  font-size: 5.4cqw;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  line-height: 1;
}
.pg-header span { position: relative; padding: 0.1em 0.02em; }
.pg-header span:nth-child(even)::before {
  content: '';
  position: absolute;
  inset: 0 0.2em 0 -0.08em;
  background: var(--p-block);
  z-index: -1;
}
.pg-bar {
  background: var(--p-ink);
  color: var(--print);
  font-size: 2.6cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1.4cqw 2cqw;
  text-align: right;
  margin-top: 1.4cqw;
}
.pg-bar-gold { height: 1.2cqw; background: var(--p-gold); width: 22cqw; }

.pg-figure { position: relative; margin: 3cqw 0 1.4cqw; }
.pg-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--p-line);
  display: block;
}
.pg-cap {
  display: flex;
  gap: 1.4cqw;
  margin-top: 1.2cqw;
  font-style: italic;
  font-size: 2.2cqw;
  line-height: 1.3;
  color: var(--p-ink);
}
.pg-cap::before {
  content: '';
  flex: 0 0 auto;
  width: 2px;
  background: var(--p-gold);
  align-self: stretch;
}

.pg-h { font-size: 3.6cqw; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1cqw; }
.pg-t { font-size: 2.5cqw; line-height: 1.45; color: var(--p-ink); }
.pg-tag {
  display: inline-block;
  font-size: 2cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-gold-text);
  margin-bottom: 0.8cqw;
}
.pg-glyph { width: 6cqw; height: 6cqw; stroke: var(--p-ink); stroke-width: 1.5; fill: none; margin-bottom: 1.4cqw; }

.pg-num {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 2.2cqw;
  font-weight: 500;
  color: var(--p-ink);
}
.pg-num .bar { width: 1px; height: 2.6cqw; background: var(--p-ink); }

.pg-tab {
  position: absolute;
  top: 10cqw;
  width: 4.4cqw;
  padding: 3cqw 0;
  background: var(--p-ink);
  color: var(--print);
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-align: center;
}
.mag-face.front .pg-tab { right: 0; }
.mag-face.back .pg-tab { left: 0; }

.pg-footbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3.2cqw; background: var(--p-ink); }

.pg-barcode { display: flex; align-items: flex-end; gap: 1.6cqw; }
.pg-barcode svg { width: 20cqw; height: 6cqw; }
.pg-barcode span { font-size: 2cqw; font-weight: 500; }

/* cover */
.pg-cover-mast {
  font-family: var(--didone);
  font-weight: 800;
  font-size: 22cqw;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--p-ink);
}
.pg-cover-img { flex: 1; margin: 2.4cqw 0; overflow: hidden; }
.pg-cover-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-cover-line { font-size: 5.6cqw; font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; }

/* pull quote */
.pg-quote { font-size: 4.4cqw; font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; margin-top: 2cqw; }

/* process steps on the extending lines */
.pg-step { border-top: 1px solid var(--p-line); padding: 1.6cqw 0; display: grid; grid-template-columns: 7cqw 1fr; gap: 1.6cqw; }
.pg-step .n { font-size: 2.2cqw; font-weight: 500; color: var(--p-gold-text); }

/* back cover */
.pg-back-statement { font-family: var(--didone); font-weight: 500; font-size: 9cqw; line-height: 0.98; letter-spacing: -0.01em; }

/* --- Magazine controls ---------------------------------------------------- */

.mag-controls {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.78rem;
  font-weight: 500;
}
.mag-controls button { min-height: 44px; padding: 0 4px; }
.mag-controls button[disabled] { color: var(--ink-3); cursor: not-allowed; }
.mag-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- Magazine flat fallback ----------------------------------------------- */

.mag-flat { display: none; }
.mag-flat-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--margin) 20px;
  scrollbar-width: none;
}
.mag-flat-track::-webkit-scrollbar { display: none; }
.mag-flat-card {
  position: relative;
  flex: 0 0 min(86vw, 420px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  background: var(--print);
  color: var(--p-ink);
  border-radius: 2px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 18%, transparent);
  overflow: hidden;
  container-type: inline-size;
}
.mag-flat .mag-controls { position: static; transform: none; justify-content: center; margin-top: 20px; }

@media (max-width: 900px) {
  .mag { height: auto !important; }
  .mag-stage { display: none; }
  .mag-flat { display: block; }
}
.no-3d .mag-stage { display: none; }
.no-3d .mag-flat { display: block; }
.no-3d .mag { height: auto !important; }

/* --- Concepts: the poster series ------------------------------------------ */

.posters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (max-width: 900px) { .posters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posters { grid-template-columns: 1fr; } }

.poster {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--p-ink);
  color: var(--print);
  isolation: isolate;
}

.poster-plate { position: absolute; inset: 0; }
.poster-plate img { width: 100%; height: 100%; object-fit: cover; }

/* live fluted layer: vertical slices of the flat image, shifted per slice */
.poster-live {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.poster.has-live .poster-live { opacity: 1; }
.poster-live i {
  flex: 1 1 0;
  background-image: var(--src);
  background-size: calc(100% * var(--slices, 24)) 100%;
  background-position-x: calc(var(--i) * -100% + var(--shift, 0px));
  background-repeat: no-repeat;
  position: relative;
}
.poster-live i::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.22) 0 8%,
      transparent 22% 78%,
      rgba(0, 0, 0, 0.26) 94% 100%);
}

/* frosted window */
.poster-frost { position: absolute; inset: 0; }
.poster-frost .blur { position: absolute; inset: 0; }
.poster-frost .blur img { width: 100%; height: 100%; object-fit: cover; }
.poster-frost .sharp {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--wt, 30%) var(--wr, 18%) var(--wb, 52%) var(--wl, 18%));
  transition: clip-path var(--t-slow);
}
.poster-frost .sharp img { width: 100%; height: 100%; object-fit: cover; }
.poster-frost .frame {
  position: absolute;
  top: var(--wt, 30%);
  right: var(--wr, 18%);
  bottom: var(--wb, 52%);
  left: var(--wl, 18%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: inset var(--t-slow);
}
.poster-frost .frame i {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.poster-frost .frame i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.poster-frost .frame i:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.poster-frost .frame i:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.poster-frost .frame i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.poster-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  pointer-events: none;
}

.poster-micro {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 10px;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 3;
}
.poster-vert {
  position: absolute;
  top: 16px;
  right: 14px;
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  z-index: 3;
}
.poster-foot { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; }
.poster-body { font-size: 0.8rem; line-height: 1.35; max-width: 32ch; opacity: 0.82; margin-bottom: 10px; }
.poster-title {
  font-family: var(--didone);
  font-weight: 560;
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.poster-barcode { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; opacity: 0.75; }
.poster-barcode svg { width: 86px; height: 22px; }
.poster-barcode span { font-size: 0.64rem; font-weight: 500; }

/* sixth card */
.poster-six {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-image: url('../assets/mbc/liquid.webp');
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  padding: 24px;
}
.poster-six .card {
  position: relative;
  border-radius: 28px;
  padding: 30px 26px;
  background: rgba(250, 250, 248, 0.42);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: var(--p-ink);
  text-align: left;
  max-width: 300px;
}
.poster-six .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0.06;
  pointer-events: none;
}
.poster-six .card h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.poster-six .card p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 20px; }

.posters-note { margin-top: 20px; font-size: 0.78rem; color: var(--ink-3); }

/* --- Brief builder -------------------------------------------------------- */

.brief-head { grid-column: 1 / span 4; padding-left: 12px; }
.brief-table { grid-column: 5 / span 8; padding-left: 12px; }

.brief-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.brief-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.brief-legend { font-size: 0.92rem; font-weight: 500; padding-top: 11px; }
.brief-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  position: relative;
  min-height: 44px;
  padding: 0 16px 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  font-size: 0.88rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.chip[aria-pressed='true']::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);
}

.receipt {
  margin-top: 36px;
  background: var(--print);
  color: var(--p-ink);
  border: 1px solid var(--p-ink);
  padding: 24px;
  max-width: 440px;
}
.receipt h3 {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px dashed color-mix(in srgb, var(--p-ink) 35%, transparent);
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--p-ink) 22%, transparent);
  font-size: 0.86rem;
}
.receipt-row .k { color: color-mix(in srgb, var(--p-ink) 58%, transparent); flex: 0 0 auto; }
.receipt-row .v { text-align: right; }
.receipt-empty { padding: 16px 0; font-size: 0.86rem; color: color-mix(in srgb, var(--p-ink) 58%, transparent); }
.receipt-note { padding-top: 14px; font-size: 0.74rem; line-height: 1.4; color: color-mix(in srgb, var(--p-ink) 58%, transparent); }
.receipt-barcode { margin-top: 16px; }
.receipt-barcode svg { width: 130px; height: 30px; }

.brief-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold-text);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.brief-done.is-live { opacity: 1; }

@media (max-width: 900px) {
  .brief-head, .brief-table { grid-column: 1 / span 12; }
  .brief-table { margin-top: 36px; }
  .brief-row { grid-template-columns: 1fr; gap: 12px; }
  .brief-legend { padding-top: 0; }
}

/* --- Family --------------------------------------------------------------- */

.family-group-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 32px 0 12px 12px;
}
.family-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 0;
  padding: 24px 12px;
  border-top: 1px solid var(--hairline);
  transition: background var(--t-fast), color var(--t-fast);
}
.family-list .family-row:last-child { border-bottom: 1px solid var(--hairline); }
.family-row:hover, .family-row:focus-visible { background: var(--ink); color: var(--paper); }
.family-row:hover .f-arrow, .family-row:focus-visible .f-arrow { transform: translate(4px, -4px); }
.f-name {
  grid-column: 1 / span 6;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}
.f-body { grid-column: 7 / span 4; font-size: 0.95rem; color: inherit; opacity: 0.72; }
.f-host { grid-column: 11 / span 1; font-size: 0.78rem; font-weight: 500; opacity: 0.72; }
.f-arrow { grid-column: 12; justify-self: end; transition: transform var(--t-fast); }

@media (max-width: 860px) {
  .f-name { grid-column: 1 / span 10; margin-bottom: 8px; }
  .f-body { grid-column: 1 / span 10; }
  .f-host { display: none; }
  .f-arrow { grid-column: 11 / span 2; align-self: start; }
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-head { grid-column: 1 / span 4; padding-left: 12px; }
.faq-list { grid-column: 5 / span 8; padding-left: 12px; }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { transition: transform var(--t-fast), color var(--t-fast); }
.faq-item[open] summary .plus { transform: rotate(45deg); color: var(--gold); }
.faq-answer { padding: 0 0 24px; color: var(--ink-2); max-width: 62ch; }

@media (max-width: 900px) {
  .faq-head, .faq-list { grid-column: 1 / span 12; }
  .faq-list { margin-top: 28px; }
}

/* --- Contact -------------------------------------------------------------- */

.contact { position: relative; }
.contact-head { grid-column: 1 / span 5; padding-left: 12px; }
.contact-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.88rem; }
.contact-dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.72); } }

.contact-card-wrap { grid-column: 6 / span 7; position: relative; padding-left: 12px; }
.contact-liquid {
  position: absolute;
  inset: -40px -40px -40px 0;
  background-image: url('../assets/mbc/liquid.webp');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.contact-card {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--frost);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--frost-edge);
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0.06;
  pointer-events: none;
}

.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field.wide { grid-column: 1 / -1; }
.f-label { font-size: 0.78rem; font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
.f-label .opt { color: var(--ink-3); font-weight: 400; font-size: 0.72rem; }
.f-input, .f-select, .f-area {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
  min-height: 48px;
  outline: none;
  transition: border-color var(--t-fast);
  border-radius: 0;
}
.f-area { min-height: 140px; resize: vertical; line-height: 1.5; }
.f-input:focus, .f-select:focus, .f-area:focus { border-bottom-color: var(--gold); }
.f-phone { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.f-select { appearance: none; cursor: pointer; }
.f-foot { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-top: 30px; }
.f-privacy { font-size: 0.78rem; color: var(--ink-3); max-width: 38ch; }
.f-error { color: var(--error); font-size: 0.88rem; margin-top: 14px; }
.f-pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.f-success { text-align: left; padding: 10px 0; }
.f-success .check { color: var(--gold); margin-bottom: 18px; }
.f-success h3 { margin-bottom: 10px; }
.f-success p { color: var(--ink-2); }

@media (max-width: 900px) {
  .contact-head, .contact-card-wrap { grid-column: 1 / span 12; }
  .contact-card-wrap { margin-top: 40px; padding-left: 0; }
  .contact-liquid { inset: -20px; }
  .f-grid { grid-template-columns: 1fr; }
}

/* --- Footer --------------------------------------------------------------- */

.footer { position: relative; border-top: 1px solid var(--hairline); padding-top: var(--section-space); overflow: hidden; z-index: 3; }
.footer-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 0 var(--margin) 48px;
  font-size: 0.78rem;
  font-weight: 500;
}
.footer-col { grid-column: span 3; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-mast { padding-inline: var(--margin); margin-bottom: -0.16em; overflow: hidden; }
.footer-mast .masthead-type { font-size: min(38vw, 34rem); width: 100%; text-align: center; transform: scaleX(1.06); }

@media (max-width: 900px) { .footer-col { grid-column: span 6; } }
@media (max-width: 620px) { .footer-col { grid-column: span 12; } }

/* --- Reduced motion ------------------------------------------------------- */

@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;
  }
  .film, .principles, .mag { height: auto !important; }
  .film-stage, .principles-stage, .mag-stage { position: static; height: auto; }
  .mag-stage { display: none; }
  .mag-flat { display: block; }
  .principles-stage { display: none; }
  .principles-flat { display: block; }
  .film-stage { min-height: 60svh; }
  .poster-live { display: none; }
  .hero-cue .rule::after { animation: none; transform: translateY(0); }
  .contact-dot { animation: none; }
}

/* --- Fixes and small pieces ----------------------------------------------- */

:root {
  --mast-fs: min(38vw, 34rem);
  --mast-h: calc(var(--mast-fs) * 0.78 * 0.89);
}

/* the hero is exactly one screen: masthead plus nav row plus this */
.hero.hero-rest {
  height: calc(100svh - 56px - var(--mast-h));
  min-height: 320px;
}

.anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }

[id] { scroll-margin-top: 72px; }

.footer-invert {
  text-align: left;
  color: var(--ink-2);
  min-height: 24px;
}
.footer-invert:hover { color: var(--ink); }

.mag-flat-card .mag-face { position: absolute; inset: 0; }
.mag-flat-card .pg-tab { display: none; }

.quick-item { color: var(--ink); }

/* grid overlay must not sit above the full screen menu or the quick menu */
.fullmenu, .quick, .quick-scrim { isolation: isolate; }

/* --- Magazine page fitting ------------------------------------------------ */
/* Pages are a fixed 3:4, so figures are capped rather than allowed to push the
   page number and the footer furniture off the paper. */

.pg { overflow: hidden; padding: 5.5cqw 5.5cqw 4cqw; }
.pg-figure { min-height: 0; flex: 0 0 auto; }
.pg-figure img { max-height: 58cqw; object-fit: cover; }
.pg-figure.sm img { max-height: 25cqw; }
.pg-cover-img { min-height: 0; }
.pg-t { overflow: hidden; }
.mag-face.front .pg { padding-right: 7cqw; }
.mag-face.back .pg { padding-left: 7cqw; }

.mag-stage .mag-controls { transition: opacity var(--t-fast); }

/* The flat carousel reuses the real page faces. They must lose their 3D state,
   or every cloned back face renders blank. */
.mag-flat-card .mag-face {
  position: absolute;
  inset: 0;
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.mag-flat-card .mag-face.back::before { right: auto; left: 0; background: linear-gradient(to right, color-mix(in srgb, var(--p-ink) 13%, transparent), transparent); }
.mag-flat-card .mag-face.back::after { left: auto; right: 0; }

/* --- Glass legibility ----------------------------------------------------- */
/* A 42% frost cannot flatten the liquid gold plate enough for form labels and
   placeholders to pass AA. These two cards sit over that plate, so they carry a
   denser frost. They still blur and still read as glass. */

.contact-card { background: color-mix(in srgb, var(--paper) 82%, transparent); }
[data-mode='dark'] .contact-card { background: color-mix(in srgb, var(--paper) 84%, transparent); }

.poster-six .card { background: color-mix(in srgb, var(--print) 84%, transparent); }

.f-input, .f-select, .f-area { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.f-area::placeholder, .f-input::placeholder { color: var(--ink-3); }

/* --- Phones: no live blur ------------------------------------------------- */
/* backdrop-filter over a full bleed plate is the most expensive thing on the
   page. On phones the plate is swapped for a pre blurred copy and the live blur
   is dropped, so scrolling stays smooth. */

@media (max-width: 620px) {
  .contact-liquid { background-image: url('../assets/mbc/liquid-blur.webp'); }
  .poster-six { background-image: url('../assets/mbc/liquid-blur.webp'); }
  .contact-card,
  .poster-six .card,
  .quick {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .contact-card { background: color-mix(in srgb, var(--paper) 92%, transparent); }
  .poster-six .card { background: color-mix(in srgb, var(--print) 92%, transparent); }
  .quick { background: var(--paper); }
  .quick-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--paper) 82%, transparent); }
}

/* footer links hug their text, so the gold active underline does not run the column */
.footer-col { align-items: flex-start; }

/* The nav row carries no bar, but without difference blending, content scrolling
   under it collides. A short paper fade solves that, and because each film's world
   is the paper colour, the fade is invisible over the film in both modes. */
.navrow::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 112px;
  background: linear-gradient(to bottom, var(--paper) 38%, color-mix(in srgb, var(--paper) 55%, transparent) 70%, transparent);
  pointer-events: none;
  z-index: -1;
}

/* The liquid plate bleeds past the contact card on purpose; clip it at the section
   so it never extends the page. */
.contact { overflow: hidden; }

/* Inputs carry an intrinsic min width from their default size, and a `1fr` track
   is minmax(auto, 1fr), so without this the form grid refuses to shrink and
   overflows the card between roughly 900px and 1100px. */
.f-grid > *,
.f-phone > *,
.f-field { min-width: 0; }
.f-input, .f-select, .f-area { width: 100%; min-width: 0; }

/* ==========================================================================
   Motion. Precise through the body of the page, expressive in the hero and
   the posters. Everything here is disabled under prefers-reduced-motion by
   the block at the end of this file.
   ========================================================================== */

:root {
  --a-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --a-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --a-dur: 0.75s;
}

/* type reveals by clip, so letters are uncovered rather than slid about */
[data-a='clip'] {
  clip-path: inset(105% 0 -30% 0);
  transform: translateY(0.14em);
  transition: clip-path var(--a-dur) var(--a-ease-out), transform var(--a-dur) var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='clip'].is-in { clip-path: inset(-18% 0 -30% 0); transform: translateY(0); }

/* line by line, one clip per line */
[data-a='lines'] .a-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.26em;
  margin-bottom: -0.26em;
}
[data-a='lines'] .a-line > span {
  display: block;
  transform: translateY(145%);
  transition: transform var(--a-dur) var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='lines'].is-in .a-line > span { transform: translateY(0); }

[data-a='rise'] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--a-ease), transform 0.6s var(--a-ease);
  transition-delay: var(--a-delay, 0s);
}
[data-a='rise'].is-in { opacity: 1; transform: none; }

[data-a='fade'] {
  opacity: 0;
  transition: opacity 0.7s var(--a-ease);
  transition-delay: var(--a-delay, 0s);
}
[data-a='fade'].is-in { opacity: 1; }

/* hairlines draw from the left */
[data-a='rule'] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='rule'].is-in { transform: scaleX(1); }

/* vertical gold ticks extend downward */
[data-a='tick'] {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='tick'].is-in { transform: scaleY(1); }

/* images settle in rather than popping */
[data-a='plate'] {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s var(--a-ease), transform 1.1s var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='plate'].is-in { opacity: 1; transform: none; }

/* a block wipes across, Swiss poster style */
[data-a='wipe'] {
  clip-path: inset(0 100% -30% 0);
  transition: clip-path 0.7s var(--a-ease-out);
  transition-delay: var(--a-delay, 0s);
}
[data-a='wipe'].is-in { clip-path: inset(0 0 -30% 0); }

/* letterspaced headers reveal letter by letter */
[data-a='letters'] span {
  opacity: 0;
  transform: translateY(0.22em);
  transition: opacity 0.4s var(--a-ease), transform 0.5s var(--a-ease-out);
}
[data-a='letters'].is-in span { opacity: 1; transform: none; }

/* barcode bars draw up */
[data-a='bars'] rect {
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.5s var(--a-ease-out);
}
[data-a='bars'].is-in rect { transform: scaleY(1); }

/* the grid overlay draws down on load */
.grid-overlay span {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--a-ease-out);
}
.grid-overlay.is-in span { transform: scaleY(1); }
.grid-overlay span:nth-child(1) { transition-delay: 0.05s; }
.grid-overlay span:nth-child(2) { transition-delay: 0.12s; }
.grid-overlay span:nth-child(3) { transition-delay: 0.19s; }
.grid-overlay span:nth-child(4) { transition-delay: 0.26s; }
.grid-overlay span:nth-child(5) { transition-delay: 0.33s; }
.grid-overlay span:nth-child(6) { transition-delay: 0.40s; }

/* the hero diagonal draws across */
.hero-diag line {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 1.6s var(--a-ease-out) 0.3s;
}
.hero-diag.is-in line { stroke-dashoffset: 0; }

/* the gold plus turns in */
.nav-plus { transition: transform var(--t-fast), opacity 0.5s var(--a-ease); }
.navrow:not(.is-in) .nav-plus { opacity: 0; transform: rotate(-90deg); }
.navrow:not(.is-in) .nav-link,
.navrow:not(.is-in) .nav-cta { opacity: 0; transform: translateY(-6px); }
.nav-link, .nav-cta { transition: opacity 0.5s var(--a-ease), transform 0.5s var(--a-ease-out), color var(--t-fast); }
.navrow.is-in .nav-link:nth-child(1) { transition-delay: 0.06s; }
.navrow.is-in .nav-link:nth-child(2) { transition-delay: 0.12s; }
.navrow.is-in .nav-link:nth-child(3) { transition-delay: 0.18s; }
.navrow.is-in .nav-link:nth-child(4) { transition-delay: 0.24s; }
.navrow.is-in .nav-link:nth-child(5) { transition-delay: 0.30s; }
.navrow.is-in .nav-link:nth-child(6) { transition-delay: 0.36s; }

/* nav tick under each item grows when its section is active */
.nav-link::after { transition: background var(--t-fast), height 0.3s var(--a-ease-out), opacity var(--t-fast); }
.nav-link.is-active::after { height: 10px; }

/* language codes stagger in */
.langs .lang-code { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--a-ease), transform 0.5s var(--a-ease-out), border-color var(--t-fast); }
.langs.is-in .lang-code { opacity: 1; transform: none; }
.langs.is-in .lang-code:nth-child(2) { transition-delay: 0.07s; }
.langs.is-in .lang-code:nth-child(3) { transition-delay: 0.14s; }
.langs.is-in .lang-code:nth-child(4) { transition-delay: 0.21s; }

/* invert switch */
.invert { opacity: 0; transform: translateX(-8px); transition: opacity 0.6s var(--a-ease) 0.4s, transform 0.6s var(--a-ease-out) 0.4s; }
.invert.is-in { opacity: 1; transform: none; }
.invert .icon { transition: transform 0.5s var(--a-ease-out); }
.invert:hover .icon { transform: rotate(180deg); }

/* chevrons and arrows nudge on hover */
.cta-film-secondary .icon { transition: transform var(--t-fast); }
.cta-film-secondary:hover .icon { transform: translateX(5px); }

/* chips */
.chip { transform: translateY(8px); opacity: 0; }
.brief-opts.is-in .chip { transform: none; opacity: 1; }
.chip { transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 0.45s var(--a-ease-out), opacity 0.45s var(--a-ease); }
.chip::before { transition: transform 0.3s var(--a-ease-out); transform-origin: top; }

/* receipt rows arrive */
.receipt-row { animation: receiptIn 0.45s var(--a-ease-out) both; }
@keyframes receiptIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* FAQ answer opens */
.faq-item summary .plus { transition: transform 0.35s var(--a-ease-out), color var(--t-fast); }
.faq-answer { animation: faqIn 0.45s var(--a-ease-out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq-item summary { transition: padding-left 0.3s var(--a-ease-out); }
.faq-item summary:hover { padding-left: 8px; }

/* form field underlines grow from the left on focus */
.f-input, .f-select, .f-area { background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 0.45s var(--a-ease-out), border-color var(--t-fast); }
.f-input:focus, .f-select:focus, .f-area:focus { background-size: 100% 1px; }

/* success check draws its stroke */
.f-success .check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.f-success:not([hidden]) .check path { animation: drawCheck 0.7s var(--a-ease-out) 0.15s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* family rows */
.family-row { transition: background var(--t-fast), color var(--t-fast), padding-left 0.3s var(--a-ease-out); }
.family-row:hover { padding-left: 22px; }

/* footer columns stagger */
.footer-col { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--a-ease), transform 0.6s var(--a-ease-out); }
.footer-row.is-in .footer-col { opacity: 1; transform: none; }
.footer-row.is-in .footer-col:nth-child(2) { transition-delay: 0.08s; }
.footer-row.is-in .footer-col:nth-child(3) { transition-delay: 0.16s; }
.footer-row.is-in .footer-col:nth-child(4) { transition-delay: 0.24s; }

/* magazine extending lines retract before the next spread draws */
.mag-lines g.is-out line { stroke-dashoffset: var(--len, 2000); transition-duration: 0.35s; }

/* poster expressive motion */
.poster-plate { transition: transform 1.2s var(--a-ease-out); will-change: transform; }
.poster .poster-frost .sharp,
.poster .poster-frost .frame { transition: clip-path 0.9s var(--a-ease-out), top 0.9s var(--a-ease-out), bottom 0.9s var(--a-ease-out), transform 0.9s var(--a-ease-out); }
.poster-title { transition: transform 0.7s var(--a-ease-out), letter-spacing 0.5s var(--a-ease-out); }
.poster:hover .poster-title { letter-spacing: 0.004em; }
.poster-six .card { transition: transform 0.9s var(--a-ease-out); }
.poster-six:hover .card { transform: translateY(-6px); }

/* the hairline that marks a section start, drawn on entry */
.section > .a-rule {
  position: absolute;
  top: -1px;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: var(--ink);
  opacity: 0.32;
  display: block;
}

/* --- Film chapter copy, re-revealed each time a chapter becomes current --- */

.film-copy .film-kicker,
.film-copy .film-body,
.film-copy .film-actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--a-ease), transform 0.8s var(--a-ease-out);
}
.film-copy .statement {
  clip-path: inset(105% 0 -30% 0);
  transform: translateY(0.12em);
  transition: clip-path 0.9s var(--a-ease-out), transform 0.9s var(--a-ease-out);
}
.film-copy.is-shown .film-kicker { opacity: 1; transform: none; transition-delay: 0.05s; }
.film-copy.is-shown .statement { clip-path: inset(-18% 0 -30% 0); transform: none; transition-delay: 0.14s; }
.film-copy.is-shown .film-body { opacity: 1; transform: none; transition-delay: 0.42s; }
.film-copy.is-shown .film-actions { opacity: 1; transform: none; transition-delay: 0.55s; }

/* the counter's gold underline grows rather than appearing */
.film-counter::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--a-ease-out); }
.film-counter.is-active::after { transform: scaleX(1); }
.film-counter { transition: color 0.4s var(--a-ease); }

/* magazine figures settle in with their spread */
.mag-leaf .mag-face .pg-figure img { transition: opacity 0.8s var(--a-ease), transform 1s var(--a-ease-out); }
.mag-leaf .mag-face:not(.is-open) .pg-figure img { opacity: 0; transform: scale(1.05); }
.mag-leaf .mag-face.is-open .pg-figure img { opacity: 1; transform: none; }
.mag-leaf .mag-face .pg-bar-gold { transform-origin: left center; transition: transform 0.7s var(--a-ease-out) 0.2s; }
.mag-leaf .mag-face:not(.is-open) .pg-bar-gold { transform: scaleX(0); }
.mag-leaf .mag-face .pg-bar { clip-path: inset(0 100% -40% 0); transition: clip-path 0.7s var(--a-ease-out) 0.12s; }
.mag-leaf .mag-face.is-open .pg-bar { clip-path: inset(0 0 -40% 0); }
.mag-leaf .mag-face .pg-step { opacity: 0; transform: translateX(-14px); transition: opacity 0.6s var(--a-ease), transform 0.6s var(--a-ease-out); }
.mag-leaf .mag-face.is-open .pg-step { opacity: 1; transform: none; }
.mag-leaf .mag-face.is-open .pg-step:nth-of-type(1) { transition-delay: 0.22s; }
.mag-leaf .mag-face.is-open .pg-step:nth-of-type(2) { transition-delay: 0.32s; }
.mag-leaf .mag-face.is-open .pg-step:nth-of-type(3) { transition-delay: 0.42s; }
.mag-leaf .mag-face.is-open .pg-step:nth-of-type(4) { transition-delay: 0.52s; }
.mag-leaf .mag-face .pg-cover-mast { clip-path: inset(-12% 0 105% 0); transition: clip-path 0.9s var(--a-ease-out); }
.mag-leaf .mag-face.is-open .pg-cover-mast { clip-path: inset(-12% 0 -18% 0); }

/* The mastheads carry a fitted scaleX, so they reveal by clip alone; adding a
   transform here would undo the fit. */
.hero-mast .masthead-type,
.footer-mast .masthead-type {
  clip-path: inset(105% 0 -10% 0);
  transition: clip-path 1.25s var(--a-ease-out) 0.1s;
}
.hero-mast.is-in .masthead-type,
.footer-mast.is-in .masthead-type { clip-path: inset(-12% 0 -10% 0); }

/* Chapters are frame contiguous, so a short crossfade is invisible on content but
   covers any seek latency at the boundary. */
.film-media video,
.film-media img { transition: opacity 0.32s var(--a-ease); }

/* Venture logo. Sits inside the name cell so it never competes with the name for a
   grid column. Absent until the key is listed in VENTURE_LOGOS. */
.f-name { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 20px; }
.f-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(1.5em, 68px);
  height: min(1.5em, 68px);
  color: inherit;
}
.f-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* inlined marks: `color: inherit` as a rule beats the svg's own colour attribute,
   so a currentColor mark takes the row's colour in both modes and on hover */
.f-mark svg { width: 100%; height: 100%; display: block; color: inherit; overflow: visible; }
.f-vname { min-width: 0; }

@media (max-width: 860px) {
  .f-mark { width: min(1.4em, 44px); height: min(1.4em, 44px); }
  .f-name { gap: 13px; }
}

/* --- Film copy legibility ------------------------------------------------- */
/* The engine's radial scrim is not enough once the skyline fills the frame: gold
   towers run straight behind the copy. Each chapter gets a scrim graded from its own
   side, in the paper colour, so it is invisible against the world and only does work
   where the text sits. It sits behind the text and above the film. */

.film-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.film-copy[data-align='left']::before {
  background: linear-gradient(to right,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 92%, transparent) 26%,
    color-mix(in srgb, var(--paper) 62%, transparent) 44%,
    transparent 66%);
}
.film-copy[data-align='right']::before {
  background: linear-gradient(to left,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 92%, transparent) 26%,
    color-mix(in srgb, var(--paper) 62%, transparent) 44%,
    transparent 66%);
}
@media (max-width: 900px) {
  /* copy spans the full width here, so the scrim has to as well */
  .film-copy[data-align='left']::before,
  .film-copy[data-align='right']::before {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--paper) 88%, transparent) 0%,
      color-mix(in srgb, var(--paper) 88%, transparent) 72%,
      transparent 100%);
  }
}

/* Optical sizing. The marks already fill their viewBoxes, but a solid near square
   shape reads larger than a ring or a disc at the same box size, and a wide mark is
   held back by its width. These factors even them out by eye; the transform does not
   affect layout, so the rows keep their rhythm. */
.f-mark[data-logo='clardesk'] svg { transform: scale(1); }
.f-mark[data-logo='athenos']  svg { transform: scale(1.16); }
.f-mark[data-logo='specter']  svg { transform: scale(1.3); }

/* ISO and Tufar supplied wordmarks, not square symbols (2.88:1 and 3.37:1). In the
   square box they would shrink to a ~23px sliver, so they get a box of their own
   aspect instead. Height is held near the other marks so the row rhythm holds. */
.f-mark[data-logo='iso']   { width: min(3.6em, 164px); }
.f-mark[data-logo='tufar'] { width: min(4.0em, 182px); }

@media (max-width: 860px) {
  .f-mark[data-logo='iso']   { width: min(2.7em, 84px); }
  .f-mark[data-logo='tufar'] { width: min(3.0em, 94px); }
}

/* --- Team ----------------------------------------------------------------- */

.team-group-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 44px 0 16px 12px;
}
#teamList > .team-group-title:first-child { padding-top: 0; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .team-grid { grid-template-columns: 1fr; } }

.tm { position: relative; background: var(--paper); }
.tm-plate {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--print);
}
.tm-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* no photograph yet: a printed initial, in the magazine's ink on paper */
.tm-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--didone);
  font-weight: 800;
  font-size: 34cqw;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--p-ink) 16%, transparent);
  container-type: inline-size;
}
.tm-plate { container-type: inline-size; }

.tm-foot { padding: 16px 16px 22px; }
.tm-name {
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tm-role {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gold-text);
}

/* a hairline tick under the name, the same mark the nav uses */
.tm-foot::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 14px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--a-ease-out);
}
.tm.is-in .tm-foot::before { transform: scaleX(1); }

/* the nav row now carries seven items */
.nav-items { grid-template-columns: repeat(7, 1fr); }
.nav-link { grid-column: span 1; }

/* --- Legal pages ---------------------------------------------------------- */

.legal-head { padding: clamp(5rem, 10vw, 9rem) var(--margin) 0; position: relative; z-index: 3; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.legal-back:hover { color: var(--ink); }
.legal-back .icon { transition: transform var(--t-fast); }
.legal-back:hover .icon { transform: translateX(-4px); }
.legal-date { margin-top: 20px; font-size: 0.78rem; font-weight: 500; color: var(--ink-3); }
.legal-note {
  margin-top: 28px;
  max-width: 62ch;
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.legal-body {
  position: relative;
  z-index: 3;
  padding: clamp(3.5rem, 8vw, 7rem) var(--margin) clamp(5rem, 10vw, 9rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.legal-body > * { grid-column: 3 / span 8; }
@media (max-width: 900px) { .legal-body > * { grid-column: 1 / span 12; } }

.legal-body h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: clamp(2.6rem, 5vw, 4rem) 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); max-width: 68ch; margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 0; max-width: 68ch; }
.legal-body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.legal-body a { color: var(--ink); border-bottom: 1px solid var(--hairline); }
.legal-body a:hover { border-bottom-color: var(--gold); }
.legal-body strong { color: var(--ink); font-weight: 500; }

.legal-foot {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--hairline);
  padding: 32px var(--margin);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
}
.legal-foot a { color: var(--ink-2); }
.legal-foot a:hover { color: var(--ink); }
.legal-foot .spacer { margin-left: auto; }

/* --- Team profile pages --------------------------------------------------- */
/* team-<key>.html. One shell per person, filled by js/profile.js from i18n, so the
   layout below is the whole design: a masthead name, the portrait, the copy, and a
   numbered list of principles set like a contents page. */

/* the button on each team card */
.tm-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 0;
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.tm-link .icon { width: 13px; height: 13px; transition: transform var(--t-fast); }
.tm-link:hover { color: var(--gold-text); border-bottom-color: var(--gold); gap: 11px; }
.tm-link:hover .icon { transform: translateX(2px); }
.tm-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* page head */
.p-head { padding: 92px var(--margin) 0; }
.p-name {
  font-family: var(--didone);
  font-weight: 800;
  font-size: clamp(2.6rem, 8.4vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 0;
  padding-bottom: 0.08em;
}
.p-role {
  font-family: var(--grotesk);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 18px;
}

/* body: portrait beside the copy */
.p-main {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  align-items: start;
  padding: 64px var(--margin) 0;
  border-top: 1px solid var(--hairline);
  margin-top: 52px;
}
.p-plate {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--block);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-copy { padding: 8px 0 0 clamp(24px, 5vw, 76px); }

.p-intro {
  font-family: var(--grotesk);
  font-size: clamp(1.18rem, 2.1vw, 1.72rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
}
.p-para {
  font-family: var(--grotesk);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 54ch;
  margin-top: 22px;
}

/* principles, set like a contents page */
.p-sub {
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 56px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.p-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.p-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: baseline;
  gap: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.p-num {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
.p-text {
  font-family: var(--didone);
  font-size: clamp(1.15rem, 2.3vw, 1.78rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* pull quote: the person's own line, given the width of the page */
.p-quote {
  margin: clamp(56px, 7vw, 92px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.p-quote-text {
  font-family: var(--didone);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.1vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 30px 0 0;
  padding-bottom: 0.08em;
  text-indent: -0.42em;
}
.p-quote-text::before { content: '\201C'; }
.p-quote-text::after  { content: '\201D'; }
/* a short quote carries at full display size; a long one would become a wall of
   Didone, so past ~120 characters it steps down and tightens */
.p-quote-text.is-long {
  font-size: clamp(1.2rem, 2.3vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 26ch;
}

.p-quote-note {
  font-family: var(--grotesk);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 18px;
  max-width: 44ch;
}

/* the rest of the team */
.p-morewrap { padding: clamp(72px, 10vw, 132px) var(--margin) 0; }
.p-morewrap .label { padding-bottom: 16px; }
.p-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.p-other {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 22px;
  background: var(--paper);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.p-other-name { font-family: var(--grotesk); font-size: 1.04rem; color: var(--ink); }
.p-other-role {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.p-other:hover { background: var(--ink); }
.p-other:hover .p-other-name { color: var(--paper); }
.p-other:hover .p-other-role { color: var(--gold); }
.p-other:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* footer */
.p-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  padding: clamp(64px, 8vw, 104px) var(--margin) 56px;
  margin-top: clamp(72px, 10vw, 128px);
  border-top: 1px solid var(--hairline);
  font-family: var(--grotesk);
  font-size: 0.8rem;
}
.p-langs { display: flex; gap: 14px; }
.p-lang { color: var(--ink-3); text-decoration: none; letter-spacing: 0.06em; }
.p-lang.is-on { color: var(--ink); border-bottom: 1px solid var(--gold); }
.p-lang:hover { color: var(--ink); }
.p-footlinks { display: flex; gap: 22px; align-items: center; }
.p-footlinks a { color: var(--ink-2); text-decoration: none; }
.p-footlinks a:hover { color: var(--ink); }
.p-copyright { color: var(--ink-3); margin-left: auto; }

@media (max-width: 900px) {
  .p-head { padding-top: 64px; }
  .p-main { grid-template-columns: 1fr; margin-top: 38px; padding-top: 40px; }
  .p-plate { aspect-ratio: 4 / 5; }
  .p-copy { padding: 36px 0 0; }
  .p-more { grid-template-columns: 1fr; }
  .p-copyright { margin-left: 0; width: 100%; }
}