/* Hallmark · genre: quiet-editorial · tone: research-archival · audience:
   research, product, and advertising leaders · use: understand Meridian and
   reach the relevant role · anchor hue: Venetian red · ground: near-white
   with parchment held inside plates · macrostructure: one sentence over a
   full-viewport vista, sparse exhibits below · type: Source Serif
   throughout, Archivo for numerals only · copy: a line where a paragraph
   would do · scope: shared by home and careers */
@import url("../tokens.css?v=3");

/* ---------- @font-face (local woff2, variable) ---------- */
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo-var.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:100 900; }
@font-face { font-family:"Source Serif 4"; src:url("../assets/fonts/sourceserif4-var.woff2") format("woff2"); font-display:swap; font-style:normal; font-weight:200 900; }

:root {
  --measure: 64em;   /* exhibits column */
  --wide: 96em;      /* thesis + vista */
  --gutter: 1.5rem;
  --gutter-wide: 2.5rem;

  /* Every exhibit section pads by this top and bottom, so the gap between
     two sections is twice it. The sections are only a few lines tall now;
     the hairline above each one does the separating, and the space only has
     to give it room. Retune the page from here, not per-section. */
  --section-pad: 2.5rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The page is a light-ground design. Opting out keeps a browser in dark
   mode from auto-inverting the parchment and the artwork. */
:root { color-scheme: only light; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, figure, ol, li { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--color-ground);
  color: var(--color-ink-3);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.75;
}

/* Numerals only. Archivo does not set any running text on this page. */
.tnum { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-md);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-accent-ink);
  border-radius: var(--radius-sm);
}
.skip:focus { left: var(--space-md); }

:where(a, button):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   HERO
   ============================================================ */
/* --hero-h drives both the hero's own height and where the scroll arrow
   sits, so a shorter hero cannot leave the arrow stranded past its edge. */
.hero {
  --hero-h: 100svh;
  position: relative;
  overflow: hidden;
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.5rem var(--gutter) 4rem;
}
.hero--short { --hero-h: 88svh; }

.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-raised);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: 1.4rem var(--gutter-wide);
  font-size: var(--text-sm);
  color: var(--color-quiet);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink);
  font-size: var(--text-base);
}
.brand img { width: 1.35rem; height: 1.35rem; }
.nav__links { display: flex; gap: var(--space-lg); }
.nav__links a {
  padding-bottom: 0.12em;
  background-image: linear-gradient(var(--color-faint), var(--color-faint));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--dur-micro) var(--ease-out),
              background-image var(--dur-micro) var(--ease-out);
}
.nav__links a:hover,
.nav__links a[aria-current] {
  color: var(--color-ink);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
}

/* ---------- Thesis: a sentence, not a headline ---------- */
.thesis {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--wide);
}
.thesis h1 {
  font-size: var(--text-thesis);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin-bottom: 1em;
  text-wrap: balance;
}
/* Marked phrases: a ruled underline, the way a reader marks a page.
   Grey at rest so the sentence stays one colour; red on hover, which is
   where the accent is allowed to act as a signal. */
.thesis h1 em {
  font-style: normal;
  padding-bottom: 0.08em;
  background-image: linear-gradient(var(--color-quiet), var(--color-quiet));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

/* ---------- Vista: one plate, one painting ---------- */
/* The shape tracks the artwork, not the viewport. Hang a portrait work here
   and cover crops it to a strip with the subject gone, so pick landscape art
   or give the plate its own ratio. No height and no max-height: width is
   fixed at 100%, so aspect-ratio derives the height, and a max-height would
   cap it without narrowing the box, silently overriding the ratio. */
.vista {
  width: 100%;
  aspect-ratio: 2 / 1;
  border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-plate);
  background: var(--color-paper);
  overflow: hidden;
}
.vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(0.1) saturate(0.94) contrast(0.98);
}

.more {
  position: absolute;
  top: calc(var(--hero-h) - 1.4rem - 1em);
  left: 50%;
  width: 1.2em;
  margin-left: -0.6em;
  line-height: 1;
  text-align: center;
  color: var(--color-quiet);
  transition: color var(--dur-micro) var(--ease-out);
}
.more:hover { color: var(--color-ink); }

/* ============================================================
   EXHIBITS
   ============================================================ */
.exhibits {
  max-width: var(--measure);
  margin: 5rem auto 0;
  padding: 0 var(--gutter-wide);
}

/* Sections carry no label. A hairline and space separate them; the section
   says what it is by what is in it. The rule used to hang off a small
   italic caption above each one, which named the obvious. */
.exhibits > section {
  padding: var(--section-pad) 0;
  border-top: var(--rule-hair) solid var(--color-hairline);
}

/* ============================================================
   COLOPHON
   ============================================================ */
.colophon {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 2.75rem var(--gutter-wide);
}
.colophon__statement {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--color-ink);
}
.colophon__rail {
  margin-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-hairline);
}
.colophon__row {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-quiet);
}
.colophon__nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.colophon__nav a { transition: color var(--dur-micro) var(--ease-out); }
.colophon__nav a:hover { color: var(--color-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 40rem) {
  :root { --gutter-wide: 1.25rem; }
  .exhibits { margin-top: 3rem; }
  .nav__links { gap: var(--space-md); }
  .brand span { display: none; }
}

/* ============================================================
   REDUCED MOTION
   Nothing on either page animates or transitions. This is a backstop only.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}