/* Media (media.html) · page-scoped extensions of the shared components (css/site.css, css/pages.css). Tokens only, sharp
   corners, no shadows; every selector starts with .page-media.
   Revamp 2026-10-14 (docs/REVAMP-PLAN.md §5 "media.html", G8): hero F (the editorial split: a crest-navy panel with the
   words beside the dome photograph), then white and crest navy alternating with clean edges: latest news as the homepage's
   core cards without photographs (white), the publication covers (navy), the press resources (white), Connect with
   Confidante as the closing band (navy), the media inquiries form (white). One scrub stage: the hero's light drift
   (js/pages/media.js). Page doc: clients/confidante/docs/pages/media.md; decisions: lab/revamp/media-notes.md */

/* ═════════════ HERO · the .vhero family, canonical block (REVAMP-PLAN.md §2), scoped to this page ═════════════ */
.page-media .vhero { position: relative; isolation: isolate; overflow: clip; background-color: var(--deep); color: var(--text-1); }
.page-media .vhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-color: var(--deep); }
.page-media .vhero__img, .page-media .vhero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .page-media .vhero__img, .page-media .vhero__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.page-media .vhero__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.page-media .vhero__film.is-playing { opacity: 1; }
.page-media .vhero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--veil) / 0.55), rgb(var(--veil) / 0) 24%),
              linear-gradient(to top, rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.55) 34%, rgb(var(--veil) / 0) 64%); }
.page-media .vhero__inner { display: grid; align-content: end; gap: var(--space-head); min-height: max(38rem, 100svh);
  padding: calc(var(--nav-h) + 4rem) var(--edge) clamp(3rem, 2rem + 4vw, 6rem); }
.page-media .vhero__head, .page-media .vhero__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.page-media .vhero__crest { width: 2.25rem; height: calc(2.25rem * 1210 / 1092); color: var(--gold); }
.page-media .vhero__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.page-media .vhero__title { max-width: 18ch; font-size: clamp(2.6rem, 1.5rem + 3.4vw, 5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .page-media .vhero__title { font-weight: 400; } }
.page-media .vhero__lede { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); }
.page-media .vhero__action { justify-self: start; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .page-media .vhero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .page-media .vhero__head { grid-column: 1 / span 7; }
  .page-media .vhero__aside { grid-column: 9 / -1; }
}
/* the arrival */
.page-media .vhero__img { animation: vhero-settle 2600ms var(--ease-out) both; }
.page-media .vhero__crest, .page-media .vhero__label, .page-media .vhero__title, .page-media .vhero__lede, .page-media .vhero__action { animation: vhero-rise 1000ms cubic-bezier(0, 0, 0.2, 1) both; }
.page-media .vhero__crest { animation-delay: 60ms; } .page-media .vhero__label { animation-delay: 160ms; } .page-media .vhero__title { animation-delay: 280ms; }
.page-media .vhero__lede { animation-delay: 460ms; } .page-media .vhero__action { animation-delay: 600ms; }
@keyframes vhero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes vhero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-media .vhero__img, .page-media .vhero__crest, .page-media .vhero__label, .page-media .vhero__title, .page-media .vhero__lede, .page-media .vhero__action { animation: none; }
  .page-media .vhero__film { display: none; }
}

/* ───────────── F · the editorial split (REVAMP-PLAN.md §2): the closing band's grammar at full height ─────────────
   Phones and tablets: the photograph on top (52svh, 56svh from 768px) under the solid bar, the crest-navy panel with the
   words below it; the photograph opens upward from the panel's edge. From 992px: a full-height panel holding the words in
   the page's first six columns (five from 1280px), the photograph filling the rest to the screen edge, opening sideways from
   the panel's edge. The words sit on the navy (the dark palette from data-tone), so there is no veil and the bar is solid
   from the top. The picture layer is 8% taller than its frame so the scroll drift (js/pages/media.js) never uncovers it */
.page-media .vhero--f { display: flex; flex-direction: column; padding-top: var(--nav-h); background-color: var(--page); }
.page-media .vhero--f .vhero__frame { position: relative; order: 1; height: max(18rem, 52svh); overflow: hidden; background-color: var(--deep);
  animation: vhero-open-up 1500ms var(--ease-out) 120ms both; }
.page-media .vhero--f .vhero__media { inset: -8% 0 0 0; z-index: auto; }
.page-media .vhero--f .vhero__img { --focus: 50% 38%; }
.page-media .vhero--f .vhero__inner { order: 2; min-height: 0; align-content: start;
  padding: clamp(2.5rem, 2rem + 4vw, 4rem) var(--edge) clamp(3.5rem, 2.5rem + 4vw, 5.5rem); }
/* the title keeps the family size (line 24), as Careers' F-flip does: reviewer 2026-10-14 (it was 4.25rem at most here) */
@media (min-width: 768px) and (max-width: 991px) { .page-media .vhero--f .vhero__frame { height: max(22rem, 56svh); } }
@media (min-width: 992px) {
  .page-media .vhero--f { --vf-cols: 6; display: grid; padding-top: 0; min-height: max(40rem, 100svh);
    grid-template-columns: var(--edge) calc((100% - 2 * var(--edge) - 11 * var(--col-gap)) * var(--vf-cols) / 12 + var(--vf-cols) * var(--col-gap)) minmax(0, 1fr); }
  .page-media .vhero--f .vhero__frame { grid-column: 3; grid-row: 1; height: auto; margin-top: var(--nav-h); animation-name: vhero-open-side; }
  .page-media .vhero--f .vhero__img { --focus: 50% 30%; }
  .page-media .vhero--f .vhero__inner { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-content: center;
    padding: calc(var(--nav-h) + clamp(2.5rem, 1rem + 3vw, 4.5rem)) clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem) clamp(2.5rem, 1rem + 3vw, 4.5rem) 0; }
  .page-media .vhero--f .vhero__head, .page-media .vhero--f .vhero__aside { grid-column: 1; }
}
@media (min-width: 1280px) { .page-media .vhero--f { --vf-cols: 5; } }
@keyframes vhero-open-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes vhero-open-side { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .page-media .vhero--f .vhero__frame { animation: none; } }

/* ═════════════ RHYTHM · white and crest navy alternate with clean edges (REVAMP-PLAN.md §3.2) ═════════════ */
/* the padding fix until the shared rule exists (§8.2): pages.css collapses the top of a section that follows another */
.page-media .section[data-tone="dark"], .page-media .section + .section[data-tone="dark"], .page-media .section[data-tone="dark"] + .section { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }
/* the Pacaso section heads: the homepage core head (Zodiak 300 title, Zodiak lede, centred), a little wider for the brief's
   longer sentences */
.page-media .md-head .core__title { color: var(--text-1); }
.page-media .md-head .core__lede { max-width: 46ch; }

/* ── 2 · latest news: the core card without its photograph. Three in a row from 992px; from 640 to 991px two, the third
   across the row; phones stack them (three short text cards read better in a column than in a sideways row) ── */
.page-media .md-news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-media .md-card .core__body { gap: 0.75rem; min-height: clamp(15rem, 11rem + 6vw, 19rem); }
.page-media .md-card .core__line { margin-top: 0.25rem; }
.page-media .md-card__status { align-self: stretch; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 991px) and (min-width: 640px) {
  .page-media .md-news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--col-gap); }
  .page-media .md-news__list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-media .md-news__list > :last-child:nth-child(odd) .core__body { min-height: 0; }
}
@media (max-width: 639px) {
  .page-media .md-news__list { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 1rem; }
  .page-media .md-card .core__body { min-height: 0; }
  .page-media .md-card__status { margin-top: 1rem; }
}

/* ── 3 · featured publications: publication covers on the navy ── */
/* the four covers from 375px (mobile pass 2026-10-15: phones and tablets had a quiet index of rows; they now keep the
   desktop's covers): the crest at the head, the title set low like a masthead, the status under a rule at the foot and an
   inner hairline frame (the printed cover's double rule). Two by two on phones (the title at the lede size, the frame a
   little closer to the edge), two by two at the desktop's scale on tablets (the pair held to 46rem), four in a row from
   992px. Under 375px a cover is too narrow for "Publications", so the four stay a quiet index of rows */
.page-media .md-pubs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.page-media .md-pub { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; aspect-ratio: 4 / 5; padding: 1rem;
  background-color: var(--card); border: 1px solid var(--line); transition: border-color var(--dur-3) var(--ease-out); }
.page-media .md-pub::before { content: ""; position: absolute; inset: 0.4375rem; border: 1px solid var(--line); pointer-events: none; transition: border-color var(--dur-lux) var(--ease-lux); }
.page-media .md-pub__crest { flex: none; width: 1.25rem; height: calc(1.25rem * 1210 / 1092); color: var(--gold); }
.page-media .md-pub__title { flex: none; min-width: 0; margin-top: auto; font-size: var(--fs-lede); font-weight: 400; line-height: 1.15; color: var(--text-1); }
.page-media .md-pub__status { flex: none; font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.page-media .md-pub__more { flex: none; min-height: 0; align-self: stretch; }
.page-media .md-pub__status, .page-media .md-pub__more { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
/* the published one (Insights) opens its page: the title's link covers the cover; the focus ring sits on the cover */
.page-media .md-pub__link { color: inherit; }
.page-media .md-pub__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-media .md-pub__link:focus-visible { outline: none; }
.page-media .md-pub:has(.md-pub__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (max-width: 374px) {
  .page-media .md-pubs__list { grid-template-columns: minmax(0, 1fr); }
  .page-media .md-pub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 1rem; aspect-ratio: auto; padding: 1.25rem; }
  .page-media .md-pub::before { content: none; }
  .page-media .md-pub__crest { grid-row: span 2; }
  .page-media .md-pub__title { margin-top: 0; line-height: 1.25; }
  .page-media .md-pub__status, .page-media .md-pub__more { grid-column: 2; justify-self: start; margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (min-width: 768px) {
  .page-media .md-pub { padding: clamp(1.75rem, 2.4vw, 2.5rem); }
  .page-media .md-pub::before { inset: 0.625rem; }
  .page-media .md-pub__crest { width: 1.625rem; height: calc(1.625rem * 1210 / 1092); }
  .page-media .md-pub__title { font-size: clamp(1.5rem, 0.6rem + 1.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.015em; }
  .page-media .md-pub__status, .page-media .md-pub__more { margin-top: 1.25rem; padding-top: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 991px) { .page-media .md-pubs__list { max-width: 46rem; margin-inline: auto; } }
@media (min-width: 992px) {
  .page-media .md-pubs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-media .md-pub__title { font-weight: 300; }
}
@media (hover: hover) and (pointer: fine) {
  .page-media .md-pub--live:hover { border-color: var(--line-2); }
  .page-media .md-pub--live:hover::before { border-color: var(--accent-line); }
  .page-media .md-pub--live:hover .md-pub__more::after { transform: scaleX(1); }
}
/* touch screens: the live cover takes its hover state while it crosses the middle of the screen (js/pages/media.js) */
@media (hover: none), (pointer: coarse) {
  .page-media .md-pub--live.is-near { border-color: var(--line-2); }
  .page-media .md-pub--live.is-near::before { border-color: var(--accent-line); }
  .page-media .md-pub--live.is-near .md-pub__more::after { transform: scaleX(1); }
}

/* ── 4 · press and media resources: "Five icon cards". Phones: one column, the gold line icon beside the name. From 768px
   the icon above its name: three columns to 991px, one row of five from 992px. Every resource is a link to where it can
   be had today: the title's link covers its item, and a half gold hairline follows the name (under it in the columns),
   lengthening on hover ── */
.page-media .md-res__list { grid-template-columns: minmax(0, 1fr); }
.page-media .md-res__list .index__item { position: relative; }
.page-media .md-res__link { color: inherit; }
.page-media .md-res__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-media .md-res__link:focus-visible { outline: none; }
.page-media .md-res__list .index__item:has(.md-res__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.page-media .md-res__list .index__title::after { content: ""; display: inline-block; vertical-align: middle; width: 48px; height: 1px; margin-left: 16px; background-color: var(--accent); transform: scaleX(0.5); transform-origin: 0 50%; transition: transform var(--dur-lux) var(--ease-lux); }
@media (hover: hover) and (pointer: fine) {
  .page-media .md-res__list .index__item:hover .index__title::after { transform: scaleX(1); }
}
/* touch screens: the resource crossing the middle of the screen lengthens its hairline (js/pages/media.js) */
@media (hover: none), (pointer: coarse) {
  .page-media .md-res__list .index__item.is-near .index__title::after { transform: scaleX(1); }
}
@media (min-width: 768px) {
  .page-media .md-res__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-media .md-res__list .index__item { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; padding: 1.75rem 0 2.25rem; }
  .page-media .md-res__list .index__item > :not(.index__icon) { grid-column: 1; }
  .page-media .md-res__list .index__icon { grid-row: auto; }
  .page-media .md-res__list .index__title::after { display: block; margin: 1rem 0 0; }
}
@media (min-width: 992px) {
  .page-media .md-res__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .page-media .md-res__list .index__item { padding-bottom: 0; }
}

/* ── 5 · the closing band: the brief's statement in the lede's Zodiak, then its paragraph ── */
.page-media .md-cta__statement { max-width: 32ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); }
.page-media .md-cta .cta-band__lede { margin-top: calc(1rem - var(--space-head)); }

/* ── 6 · the media inquiries form: both media buttons land on the form block with its title and the card's top in view
   below the bar ── */
.page-media #media-inquiries { scroll-margin-top: calc(var(--nav-h) + 1rem); }
/* the email address is one long word at the lede size: under 360px it takes the body size and may break rather than widen
   the column past the screen (as on Careers; mobile pass 2026-10-15, it overflowed by 10px at 320) */
.page-media .md-form .form-block__grid > * { min-width: 0; }
.page-media .md-form .form-block__facts dd { overflow-wrap: anywhere; }
@media (max-width: 359px) { .page-media .md-form .form-block__facts dd { font-size: var(--fs-body); } }

@media (prefers-reduced-motion: reduce) {
  .page-media .md-pub, .page-media .md-pub::before, .page-media .md-res__list .index__title::after { transition: none; }
}