/**
 * ECUE — the VGEM visual layer.
 * =============================================================================
 * Loaded only on VGEM views. ECUE pages never download it.
 *
 * WHAT THIS FILE IS NOT
 * ---------------------
 * It is not a second design system. Every colour, space, radius and type role
 * below comes from the same tokens.css the ECUE side uses — the design system
 * export for VGEM was byte-for-byte identical to ECUE's, and it already carries
 * a full violet palette scoped to [data-brand="vgem"]. This file is the layer
 * that arranges those tokens differently: violet grounds, editorial serif
 * headlines, a marker-pen highlight, and a decorative motif layer.
 *
 * Prefix: `vg-`. Anything `ec-` is shared and behaves identically here —
 * containers, media frames, the prose column, focus states, the language
 * switcher, pagination.
 *
 * @package ecue
 */

/* =============================================================================
 * 1. Fluid type, through the existing token system
 * =============================================================================
 * The exported design sized type with 70 inline clamp() calls. The theme steps
 * the --fs-* tokens at 900px and 600px. Shipping both would mean two mechanisms
 * doing one job.
 *
 * So VGEM redefines the same token names fluidly. Every component in the theme
 * keeps reading --fs-*, VGEM gets fluid type, and there is still one system.
 *
 * The selector must be `:root[data-brand="vgem"]` — two selectors, specificity
 * (0,2,0) — because theme.css redefines these tokens inside media queries later
 * in the cascade at (0,1,0). A bare [data-brand] would tie and lose.
 * ========================================================================== */

:root[data-brand="vgem"] {
  --fs-display-1: clamp(38px, 7.6vw, 88px);
  --fs-display-2: clamp(32px, 5.4vw, 64px);
  --fs-h1: clamp(32px, 5vw, 48px);
  --fs-h2: clamp(26px, 3.6vw, 36px);
  --fs-h3: clamp(23px, 3.2vw, 27px);
  --fs-h4: clamp(18px, 2.2vw, 21px);

  /* Sections breathe fluidly too, rather than stepping at a breakpoint. */
  --section-y: clamp(56px, 9vw, 96px);

  /*
   * The design's headlines are the editorial serif, not the display sans.
   * That single swap carries most of the difference in character.
   */
  --vg-headline: var(--font-editorial);

  /*
   * Measured, not guessed. Rendering Vietnamese to a canvas and reading the
   * painted pixels gives the ink each face actually needs:
   *
   *              ordinary Vietnamese   all-caps stacked diacritics
   *   Source Serif 4        1.05                  1.13
   *   Familjen Grotesk      1.03                  1.18
   *
   * VGEM's headlines are the serif, so 1.14 clears even the all-caps case.
   * Card and row titles are the display sans, so 1.20 does the same for them.
   * At 1.06 — the value this started at — a heavy Vietnamese headline cleared
   * by 1.3px, which is not clearance, it is luck.
   */
  --vg-lh-display: 1.14;
  --vg-lh-title: 1.20;
}

/* =============================================================================
 * 2. Decorative motifs
 * =============================================================================
 * The export placed 26 absolutely-positioned divs by hand. These are the same
 * shapes as four named classes, so a section asks for one by name and the
 * geometry lives here.
 *
 * All are pointer-events:none and aria-hidden in markup, so they never
 * intercept a click or reach the accessibility tree. Every section that hosts
 * one sets `position:relative; overflow:hidden`, which is what stops them
 * widening the page — they are the one thing in this theme that could cause
 * horizontal overflow, and the containment is deliberate.
 * ========================================================================== */

.vg-hero,
.vg-section,
.vg-article__head,
.vg-archivehead {
  position: relative;
  overflow: hidden;
}

.vg-motif {
  position: absolute;
  pointer-events: none;
}

/* --- dot grid ------------------------------------------------------------- */

.vg-motif--dots {
  inset: 0;
  background-size: 26px 26px;
}

.vg-motif--dots.vg-motif--light {
  opacity: 0.26;
  background-image: radial-gradient(var(--paper) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.vg-motif--dots.vg-motif--violet {
  opacity: 0.4;
  background-image: radial-gradient(var(--violet-300) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom right, transparent 30%, black);
  mask-image: linear-gradient(to bottom right, transparent 30%, black);
}

.vg-motif--dots.vg-motif--dark {
  opacity: 0.4;
  background-image: radial-gradient(var(--stone-400) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 45%, black);
  mask-image: linear-gradient(to right, transparent 45%, black);
}

.vg-motif--dots.vg-motif--right {
  inset: 0 0 0 40%;
}

/* --- rings ---------------------------------------------------------------- */

.vg-motif--rings {
  width: 620px;
  height: 310px;
  border-radius: 999px;
  transform: rotate(-14deg);
}

.vg-motif--rings.vg-motif--light { border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent); }
.vg-motif--rings.vg-motif--violet { border: 1px solid var(--violet-100); }
.vg-motif--rings.vg-motif--dark { border: 1px solid var(--line-hairline); }

.vg-motif--rings.vg-motif--tr { top: -110px; right: -90px; }
.vg-motif--rings.vg-motif--tl { top: 90px; left: -180px; transform: rotate(10deg); }

/* --- blob ----------------------------------------------------------------- */

.vg-motif--blob {
  width: 340px;
  height: 340px;
  border-radius: 999px;
}

.vg-motif--blob.vg-motif--light { background: color-mix(in oklab, var(--violet-900) 60%, transparent); }
.vg-motif--blob.vg-motif--violet { background: var(--violet-050); }

.vg-motif--blob.vg-motif--bl { bottom: -120px; left: -80px; }
.vg-motif--blob.vg-motif--tr { top: -200px; right: -160px; width: 560px; height: 560px; }

/* --- floating pills ------------------------------------------------------- */

.vg-motif--pills {
  top: 16%;
  right: 6%;
  width: 120px;
  height: 26px;
  border-radius: 999px;
  background: var(--solar-500);
}

.vg-motif--pills::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 52px;
  width: 68px;
  height: 26px;
  border-radius: 999px;
  background: var(--ember-500);
}

/*
 * Motifs are ornament. They come off entirely when someone has asked for less
 * movement or is printing — nothing below depends on them for legibility.
 */
@media (prefers-reduced-motion: reduce) {
  .vg-motif--pills::after { transition: none; }
}

@media print {
  .vg-motif { display: none; }
}

/* =============================================================================
 * 3. Shared VGEM primitives
 * ========================================================================== */

/* The marker-pen highlight under a section heading. */
.vg-mark {
  box-shadow: inset 0 -0.32em 0 var(--solar-500);
}

.vg-kicker {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--violet-500);
}

.vg-kicker--muted { color: var(--text-muted); }
.vg-kicker--ember { color: var(--ember-700); }
.vg-kicker--solar { color: var(--solar-500); }

/* A filled pill, for the label on a hero or an article. */
.vg-badge {
  display: inline-block;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--violet-900);
  background: var(--solar-500);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 52px;
  padding: 0 var(--space-7);
  border: 1px solid var(--violet-500);
  border-radius: var(--radius-pill);
  background: var(--violet-500);
  color: var(--paper);
  font: var(--fw-semibold) var(--fs-body) / 1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}

.vg-btn:hover {
  background: var(--violet-700);
  border-color: var(--violet-700);
  color: var(--paper);
}

.vg-btn--sm {
  min-height: 44px;
  padding: 0 var(--space-6);
  font-size: var(--fs-body-sm);
}

/* On a violet ground the button inverts to an outline. */
.vg-btn--ghost {
  background: transparent;
  border-color: color-mix(in oklab, var(--paper) 60%, transparent);
  color: var(--paper);
}

.vg-btn--ghost:hover {
  background: color-mix(in oklab, var(--paper) 14%, transparent);
  border-color: var(--paper);
  color: var(--paper);
}

.vg-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--fw-semibold) var(--fs-body-sm) / 1.3 var(--font-text);
  color: var(--text-strong);
  text-decoration: none;
}

.vg-link:hover { color: var(--violet-500); }

.vg-link--violet {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--violet-500);
}

.vg-link--violet:hover { color: var(--violet-700); }

.vg-section {
  padding-block: var(--section-y);
  background: var(--surface-page);
}

.vg-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.vg-sectionhead__title {
  margin: 0;
  font: var(--fw-semibold) var(--fs-h2) / 1.16 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

/* =============================================================================
 * 4. ECUE context bar
 * =============================================================================
 * The clearest signal that VGEM sits inside ECUE. It renders ECUE's real
 * primary menu rather than a hardcoded list — the exported design listed an
 * "Đào tạo" section that ECUE does not have, which is exactly the drift this
 * avoids.
 * ========================================================================== */

.vg-contextbar {
  background: var(--ink-900);
  color: color-mix(in oklab, var(--paper) 72%, transparent);
}

.vg-contextbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px;
}

.vg-contextbar__home { display: flex; flex: none; }
.vg-contextbar__home img { height: 14px; width: auto; }

.vg-contextbar__nav { flex: 1; min-width: 0; overflow: hidden; }

.vg-contextbar__list {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-contextbar__list a {
  font: var(--type-caption);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.vg-contextbar__list a:hover { color: var(--paper); }

/* The item pointing at VGEM is the one we are inside. */
.vg-contextbar__list .ec-gateway > a {
  color: var(--paper);
  border-bottom: 2px solid var(--ember-500);
  padding-bottom: 2px;
}

.vg-contextbar__domain {
  font: var(--type-caption);
  white-space: nowrap;
  flex: none;
}

/* =============================================================================
 * 5. VGEM header
 * ========================================================================== */

.vg-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--violet-500);
  color: var(--paper);
}

.vg-header__rule {
  height: 4px;
  background: var(--gradient-ember-h);
}

.vg-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  min-height: var(--header-height);
  padding-block: var(--space-4);
}

.vg-header__logo { display: flex; flex: none; }
.vg-header__logo img { height: 26px; width: auto; }

.vg-header__nav { flex: 1 1 240px; min-width: 0; }

.vg-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(14px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-nav a {
  font: var(--fw-regular) var(--fs-body-sm) / 1 var(--font-text);
  color: color-mix(in oklab, var(--paper) 72%, transparent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.vg-nav a:hover { color: var(--paper); }

.vg-nav .current-menu-item > a,
.vg-nav .current_page_item > a,
.vg-nav .current-menu-ancestor > a {
  font-weight: var(--fw-semibold);
  color: var(--paper);
  border-bottom-color: var(--solar-500);
}

.vg-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
  flex: none;
}

.vg-header__byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--type-caption);
  color: color-mix(in oklab, var(--paper) 64%, transparent);
  white-space: nowrap;
}

.vg-header__byline img { height: 15px; width: auto; }

/* The language switcher inherits the violet ground. */
.ec-langs--vgem .ec-langs__link { color: color-mix(in oklab, var(--paper) 68%, transparent); }
.ec-langs--vgem a.ec-langs__link:hover { color: var(--paper); border-bottom-color: var(--solar-500); }
.ec-langs--vgem .ec-langs__link.is-current { color: var(--paper); border-bottom-color: var(--solar-500); }
.ec-langs--vgem { --langs-sep: color-mix(in oklab, var(--paper) 30%, transparent); }

/* =============================================================================
 * 6. Hero
 * ========================================================================== */

.vg-hero {
  background: var(--violet-500);
  color: var(--paper);
  padding-block: clamp(56px, 8vw, 96px);
}

.vg-hero__rule {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--gradient-ember-h);
}

.vg-hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: clamp(32px, 5vw, 64px);
}

.vg-hero__lead {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.vg-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  width: 100%;
}

.vg-hero__hr {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: color-mix(in oklab, var(--paper) 34%, transparent);
}

.vg-hero__date {
  font: var(--type-caption);
  color: color-mix(in oklab, var(--paper) 70%, transparent);
}

.vg-hero__title {
  margin: 0;
  font: var(--fw-regular) var(--fs-display-1) / var(--vg-lh-display) var(--vg-headline);
  letter-spacing: 0;
  color: var(--paper);
  max-width: 20ch;
  text-wrap: balance;
}

.vg-hero__title a {
  color: inherit;
  text-decoration: none;
}

.vg-hero__title a:hover {
  color: var(--solar-500);
}

.vg-hero__excerpt {
  font: var(--type-body-lg);
  color: color-mix(in oklab, var(--paper) 86%, transparent);
  max-width: 48ch;
}

.vg-hero__media {
  flex: 1 1 340px;
  min-width: 0;
  /*
   * Held well under the 560px it used to run to. A square poster at 560px
   * stands taller than the headline, date and button beside it and takes over
   * the composition; at 440 it sits level with them.
   */
  max-width: 440px;
}

/* =============================================================================
 * VGEM posters
 * =============================================================================
 * VGEM's featured images are social-media posters brought over from Facebook —
 * mostly square, and designed artwork rather than photographs. A poster has
 * type set to its own edges, a logo in a corner and often a border, so the
 * `cover` crop the rest of the theme uses cuts words in half.
 *
 * So VGEM media is matted rather than cropped: a square frame, the whole
 * artwork fitted inside it, and a violet mat filling whatever the poster's own
 * ratio leaves over. A near-square poster barely shows the mat; a 4:5 one shows
 * a little at the sides and reads as deliberate rather than broken.
 *
 * Scoped to the `vg-` classes rather than [data-brand="vgem"]. Both would work
 * on VGEM's own pages, but the brand attribute also sits on the VGEM panel on
 * the ECUE home page, and ECUE's photography must keep cropping as it does.
 * ========================================================================== */

.vg-hero__media .ec-frame__img,
.vg-card__media .ec-frame__img,
.vg-row__media .ec-frame__img {
  object-fit: contain;
}

/* On the violet hero ground the mat is a deeper violet, like a mount board. */
.vg-hero__media .ec-frame__img {
  background: color-mix(in oklab, var(--violet-900) 62%, var(--violet-500));
}

/* On paper the mat is the palest violet in the set, barely a tint. */
.vg-card__media .ec-frame__img,
.vg-row__media .ec-frame__img {
  background: var(--violet-050);
}

/*
 * The article's own poster: the same square frame as the cards and the hero.
 *
 * It used to ask for `ratio: auto` — keep the picture's own shape, crop
 * nothing. That was right in principle and wrong in practice. WordPress marks
 * lazy images `sizes="auto"` and ships this alongside them:
 *
 *   img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
 *
 * That size *substitutes* the picture's own, so a frame with no aspect-ratio of
 * its own took the 1500 — and every poster, whatever its shape, sat in a 1500px
 * box with hundreds of pixels of empty page above and below it. Measured at
 * 1440/1280/768/390: a square poster drew 740px of that.
 *
 * Naming the ratio settles it, because an aspect-ratio outranks the substituted
 * size. Nothing is cropped: `contain` still fits the whole poster, and a poster
 * that is not square is matted like everywhere else in VGEM rather than trimmed.
 *
 * Capped in width, not height, so the whole poster scales down together — a
 * square one across the full wide container would otherwise come out 1344px
 * tall and swallow the article it belongs to.
 */
.vg-article__lead .ec-frame {
  max-width: 760px;
  margin-inline: auto;
}

.vg-article__lead .ec-frame__img {
  object-fit: contain;
  background: var(--violet-050);
}

/* =============================================================================
 * 7. Cards
 * ========================================================================== */

.vg-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 48px);
}

.vg-card__link {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.vg-card__link:hover { color: inherit; }
.vg-card__link:hover .vg-card__title { color: var(--violet-500); }

.vg-card__media { margin-bottom: var(--space-2); }

.vg-card__title {
  margin: 0;
  font: var(--fw-semibold) var(--fs-h4) / var(--vg-lh-title) var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  transition: var(--transition-control);
}

.vg-card__excerpt {
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.vg-card__meta {
  font: var(--type-caption);
  color: var(--text-muted);
}

/* =============================================================================
 * 8. Facebook band
 * ========================================================================== */

.vg-facebook {
  border-top: 1px solid var(--line-hairline);
  padding-block: clamp(48px, 7vw, 64px);
}

.vg-facebook__rule {
  position: absolute;
  top: -1px;
  left: 0;
  width: 220px;
  height: 3px;
  background: var(--gradient-ember-h);
}

.vg-facebook__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.vg-facebook__note {
  font: var(--type-caption);
  color: var(--text-muted);
}

.vg-facebook__head .vg-link--violet { margin-left: auto; }

.vg-facebook__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 32px);
  margin-top: var(--space-7);
}

.vg-fbcard {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding-top: var(--space-5);
  border-top: 3px solid var(--violet-500);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

a.vg-fbcard:hover { border-top-color: var(--ember-500); }

.vg-fbcard__date {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.vg-fbcard__text {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
}

/* =============================================================================
 * 9. Network band — "VGEM là gì?"
 * ========================================================================== */

.vg-network {
  background: var(--violet-050);
}

.vg-network__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.vg-network__body {
  flex: 1 1 460px;
  min-width: 0;
  padding-block: 0;
}

/*
 * The band's content is ordinary page content, so it arrives through
 * prose.css. Two overrides: it is not a centred reading column here, and its
 * first heading is the editorial serif rather than the display sans.
 */
.vg-network__body > * {
  max-width: 54ch;
  margin-inline: 0;
}

.vg-network__body > h2:first-child {
  font: var(--fw-regular) var(--fs-display-2) / 1.16 var(--vg-headline);
  letter-spacing: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.vg-network__aside {
  flex: 0 1 300px;
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  border-top: 3px solid var(--violet-500);
  padding-top: var(--space-5);
}

.vg-network__ecue {
  margin: 0;
  font: var(--type-body-sm);
  color: var(--text-muted);
}

/* =============================================================================
 * 10. Archive call to action
 * ========================================================================== */

.vg-archivecta {
  border-top: 1px solid var(--line-hairline);
}

.vg-archivecta__rule {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-ember-h);
}

.vg-archivecta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}

.vg-archivecta__title {
  margin: 0;
  font: var(--fw-semibold) var(--fs-h2) / 1.16 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  max-width: 24ch;
}

/* =============================================================================
 * 11. Article
 * ========================================================================== */

.vg-article__head {
  background: var(--surface-page);
  padding-block: var(--space-9) var(--space-8);
}

.vg-article__headinner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.vg-article__title {
  margin: 0;
  font: var(--fw-regular) var(--fs-display-2) / var(--vg-lh-display) var(--vg-headline);
  letter-spacing: 0;
  color: var(--text-strong);
  max-width: 24ch;
  text-wrap: balance;
}

.vg-article__standfirst {
  font: var(--type-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
}

.vg-byline {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  width: 100%;
  font: var(--type-caption);
  color: var(--text-muted);
  padding-top: var(--space-4);
  border-top: 3px solid var(--violet-500);
}

.vg-byline__author {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}

.vg-article__lead { padding-top: var(--space-8); }
.vg-article__body { padding-bottom: var(--space-8); }

.vg-article__foot {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-6);
  padding-bottom: var(--section-y);
}

.vg-share {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.vg-related { background: var(--violet-050); }

/*
 * Article body. The prose column is shared with ECUE — headings, lists,
 * images, captions, quotes and embeds all behave identically. Only the accents
 * change.
 */
.vg-prose a { text-decoration-color: var(--violet-300); }
.vg-prose a:hover { color: var(--violet-500); }
.vg-prose blockquote { border-inline-start-color: var(--violet-500); }
.vg-prose .wp-block-pullquote { border-block-color: var(--violet-500); }
.vg-prose h2 { font-family: var(--font-display); }

/* =============================================================================
 * 12. Archive
 * ========================================================================== */

.vg-archivehead {
  background: var(--violet-050);
  padding-block: var(--space-9) var(--space-8);
}

.vg-archivehead__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-7);
}

.vg-archivehead__lead {
  display: grid;
  gap: var(--space-4);
  flex: 1 1 320px;
}

.vg-archivehead__title {
  margin: 0;
  font: var(--fw-bold) var(--fs-h1) / 1.1 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}

.vg-archivehead__note {
  font: var(--type-body);
  color: var(--text-muted);
}

.vg-search {
  position: relative;
  display: flex;
  align-items: end;
  gap: var(--space-4);
  flex: 0 1 420px;
}

.vg-search .ec-field { flex: 1; min-width: 0; }

.vg-search__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.vg-years {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
}

.vg-years__link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.vg-years__link:hover {
  color: var(--violet-500);
  border-bottom-color: var(--solar-500);
}

.vg-years__count { color: var(--text-muted); }

.vg-yearhead {
  margin: 0;
  font: var(--fw-regular) var(--fs-display-2) / 1 var(--vg-headline);
  color: var(--violet-500);
  padding-block: var(--space-8) var(--space-5);
  font-variant-numeric: tabular-nums;
}

.vg-rows { border-bottom: 1px solid var(--line-hairline); }

.vg-row__link {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: clamp(12px, 2vw, 24px);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line-hairline);
  color: inherit;
  text-decoration: none;
}

.vg-row__link:hover { color: inherit; }
.vg-row__link:hover .vg-row__title { color: var(--violet-500); }

.vg-row__date {
  flex: 0 0 auto;
  min-width: 48px;
  padding-top: 4px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.vg-row__media { flex: 0 0 160px; min-width: 0; }

.vg-row__body {
  display: grid;
  gap: var(--space-3);
  flex: 1 1 260px;
  min-width: 0;
}

.vg-row__title {
  font: var(--fw-semibold) var(--fs-h4) / 1.24 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  transition: var(--transition-control);
}

.vg-row__excerpt {
  font: var(--type-body-sm);
  color: var(--text-muted);
  max-width: 62ch;
}

/* =============================================================================
 * 13. Footer
 * ========================================================================== */

.vg-footer {
  background: var(--violet-900);
  color: color-mix(in oklab, var(--paper) 74%, transparent);
}

.vg-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: clamp(48px, 7vw, 64px) var(--space-7);
}

.vg-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.vg-footer__brand {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
}

.vg-footer__logo { height: 30px; width: auto; }

.vg-footer__blurb {
  margin: 0;
  font: var(--type-body-sm);
  max-width: 34ch;
}

.vg-footer__col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.vg-footer__coltitle {
  margin: 0;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
}

.vg-footer__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-footer a {
  color: inherit;
  text-decoration: none;
}

.vg-footer a:hover {
  color: var(--paper);
  text-decoration: underline;
}

.vg-footer__list a { font: var(--type-body-sm); }

.vg-footer__hr {
  height: 1px;
  background: color-mix(in oklab, var(--paper) 22%, transparent);
}

.vg-footer__legal { font: var(--type-caption); }

.vg-footer__credit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.vg-footer__credit img { height: 13px; width: auto; }

/* =============================================================================
 * 14. Responsive
 * =============================================================================
 * The type scale is already fluid, so these only change what the grids do.
 * Same two breakpoints as the ECUE side, so the whole site reflows together.
 * ========================================================================== */

@media (max-width: 900px) {

  .vg-cards,
  .vg-facebook__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vg-header__byline { display: none; }

  .vg-contextbar__domain { display: none; }

  .vg-archivecta__inner { align-items: start; }

  /*
   * The hero stacks here — the lead comes first in the markup, so the poster
   * lands under the text on its own. Once stacked it takes the full column:
   * the 440px cap exists to keep it level with the headline beside it, and
   * there is nothing beside it any more.
   */
  .vg-hero__media {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Rings and blobs are sized for a wide viewport; scale them down. */
  .vg-motif--rings { width: 420px; height: 210px; }
  .vg-motif--blob { width: 240px; height: 240px; }
  .vg-motif--blob.vg-motif--tr { width: 360px; height: 360px; }
}

@media (max-width: 600px) {

  .vg-cards,
  .vg-facebook__grid,
  .vg-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vg-header__bar { gap: var(--space-5); }

  /* The context bar keeps the wordmark and drops the borrowed menu. */
  .vg-contextbar__nav { display: none; }

  .vg-hero__meta .vg-hero__hr { display: none; }

  /* The archive row loses its thumbnail rather than shrinking it to a stamp. */
  .vg-row__media { display: none; }

  .vg-search { flex: 1 1 100%; }

  .vg-network__aside { flex: 1 1 100%; }

  .vg-motif--pills { display: none; }
}