/* ==========================================================================
   NOW VOICES — design system
   Palette, type, cinematic media stage, editorial pages.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --nv-ink: #05070a;
  --nv-navy: #0a1424;
  --nv-navy-deep: #060d18;
  --nv-charcoal: #14181d;
  --nv-champagne: #f4e7d0;
  --nv-champagne-dim: rgba(244, 231, 208, 0.62);
  --nv-gold: #c79a55;
  --nv-amber: #d8a64a;
  --nv-ivory: #f7f2e9;
  --nv-sheet: #f3ede2;
  --nv-sheet-deep: #e9e1d3;

  /* type */
  --nv-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --nv-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* rhythm */
  --nv-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --nv-edge-x: clamp(1.25rem, 3.6vw, 3.75rem);
  --nv-edge-y: clamp(1.1rem, 2.8vw, 2.5rem);
  --nv-measure: 34rem;

  /* motion */
  --nv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nv-ease-cine: cubic-bezier(0.36, 0.06, 0.2, 1);
  --nv-micro: 220ms;
  --nv-ui: 480ms;
  --nv-cine: 1200ms;
  --nv-ticker-duration: 46s;
}

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--nv-ink);
  color: var(--nv-ivory);
  font-family: var(--nv-sans);
  font-size: clamp(0.95rem, 0.35vw + 0.86rem, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
picture { display: block; max-width: 100%; }

h1, h2, h3, h4, p, ul, li, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 1px solid var(--nv-champagne);
  outline-offset: 6px;
  border-radius: 2px;
}

.nv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nv-skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 80;
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.25rem;
  background: var(--nv-navy);
  color: var(--nv-champagne);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform var(--nv-micro) var(--nv-ease);
}
.nv-skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Typography primitives ---------- */
.nv-kicker {
  font-size: clamp(0.5625rem, 0.18vw + 0.53rem, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1.4;
}

.nv-display {
  font-family: var(--nv-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nv-rule {
  display: block;
  width: 100%;
  height: 1px;
  opacity: 0.9;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(199, 154, 85, 0) 0%,
    rgba(216, 166, 74, 0.9) 18%,
    rgba(216, 166, 74, 0.9) 78%,
    rgba(199, 154, 85, 0) 100%
  );
}

/* ==========================================================================
   CINEMATIC MEDIA STAGE — full bleed, no container, no margins
   ========================================================================== */
.nv-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--nv-ink);
  z-index: 0;
}

.nv-stage__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  margin: 0;
  border: 0;
}

/* base plate: poster paints instantly, so no black frame is ever visible */
.nv-stage__poster { z-index: 1; }

/* looping background sits under the intro and is already running before the
   intro fades out — that is what removes the flash between the two videos */
.nv-stage__loop {
  z-index: 2;
  opacity: 0;
  transition: opacity var(--nv-cine) var(--nv-ease-cine);
}
.nv-stage__loop.is-live { opacity: 1; }

.nv-stage__intro {
  z-index: 3;
  object-position: 50% 62%;
  opacity: 1;
  transition: opacity var(--nv-cine) var(--nv-ease-cine);
}
.nv-stage__intro.is-gone {
  opacity: 0;
  pointer-events: none;
}

/* grade: protects the masthead, badge and ticker without dulling the scene */
.nv-stage__grade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 52%, rgba(5, 7, 10, 0.30) 0%, rgba(5, 7, 10, 0.10) 58%, rgba(5, 7, 10, 0) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(5, 7, 10, 0) 38%, rgba(5, 7, 10, 0.46) 100%),
    linear-gradient(180deg, rgba(6, 13, 24, 0.62) 0%, rgba(6, 13, 24, 0) 26%),
    linear-gradient(0deg, rgba(5, 7, 10, 0.72) 0%, rgba(5, 7, 10, 0.12) 22%, rgba(5, 7, 10, 0) 42%);
}

/* mobile crops: keep the skyline and the water, never the empty sky */
@media (max-width: 900px) {
  .nv-stage__loop,
  .nv-stage__poster { object-position: 42% 56%; }
  .nv-stage__intro { object-position: 50% 50%; }
}
@media (max-width: 640px) {
  /* the loop is a 2:1 plate on a tall screen: enlarge the frame and offset it
     so the skyline and the water carry the composition, not the empty sky */
  .nv-stage__loop,
  .nv-stage__poster {
    height: 128%;
    top: -19%;
    object-position: 44% 62%;
  }
  .nv-stage__intro { object-position: 50% 46%; }
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.nv-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nv-gutter);
  padding: calc(var(--nv-edge-y) + env(safe-area-inset-top))
    calc(var(--nv-edge-x) + env(safe-area-inset-right))
    var(--nv-edge-y)
    calc(var(--nv-edge-x) + env(safe-area-inset-left));
  pointer-events: none;
}
.nv-masthead > * { pointer-events: auto; }

.nv-masthead__mark {
  display: block;
  width: clamp(9.5rem, 17vw, 15.5rem);
  flex: 0 0 auto;
  transition: opacity var(--nv-micro) var(--nv-ease);
}
.nv-masthead__mark img {
  width: 100%;
  height: auto; /* exact 1246 x 320 proportions preserved */
  filter: drop-shadow(0 1px 14px rgba(5, 7, 10, 0.55));
}
.nv-masthead__mark:hover { opacity: 0.82; }

.nv-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-top: 0.35rem;
}
.nv-nav__link {
  position: relative;
  font-size: clamp(0.5625rem, 0.16vw + 0.54rem, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nv-ivory);
  padding-block: 0.5rem;
  text-shadow: 0 1px 12px rgba(5, 7, 10, 0.6);
}
.nv-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1px;
  background: var(--nv-champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nv-ui) var(--nv-ease);
}
.nv-nav__link:hover::after,
.nv-nav__link:focus-visible::after { transform: scaleX(1); }
.nv-nav__link[aria-current="page"] { color: var(--nv-champagne); }
.nv-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background: rgba(199, 154, 85, 0.75);
}

/* ==========================================================================
   HOME
   ========================================================================== */
.nv-home,
.nv-home body { height: 100%; }

.nv-hero {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--nv-edge-y) * 4.2) var(--nv-edge-x) calc(var(--nv-edge-y) * 5);
}

.nv-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.nv-hero__inner::before {
  content: "";
  position: absolute;
  inset: -70% -80% -60%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    38% 34% at 50% 58%,
    rgba(5, 7, 10, 0.74) 0%,
    rgba(5, 7, 10, 0.44) 42%,
    rgba(5, 7, 10, 0.14) 68%,
    rgba(5, 7, 10, 0) 88%
  );
}

/* --- Interviews badge: the entry object --- */
.nv-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1000ms var(--nv-ease-cine), transform 1000ms var(--nv-ease-cine);
}
.nv-badge__disc {
  position: relative;
  width: clamp(11rem, 24vw, 17.5rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: transform 420ms var(--nv-ease), filter 420ms var(--nv-ease);
  will-change: transform;
}
.nv-badge__disc::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(216, 166, 74, 0.28) 55%,
    rgba(216, 166, 74, 0) 100%
  );
  opacity: 0;
  transition: opacity 420ms var(--nv-ease);
  pointer-events: none;
}
.nv-badge__disc img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 46px rgba(5, 7, 10, 0.6));
}
.nv-badge__label {
  font-size: clamp(0.5625rem, 0.18vw + 0.53rem, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--nv-ivory);
  text-shadow: 0 1px 3px rgba(5, 7, 10, 0.9), 0 2px 22px rgba(5, 7, 10, 0.75);
}
.nv-badge__label span {
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(244, 231, 208, 0.28);
  transition: border-color var(--nv-ui) var(--nv-ease);
}
@media (hover: hover) {
  .nv-badge:hover .nv-badge__disc {
    transform: translateY(-6px) scale(1.035);
  }
  .nv-badge:hover .nv-badge__disc::after { opacity: 1; }
  .nv-badge:hover .nv-badge__label span { border-color: var(--nv-champagne); }
}
.nv-badge:focus-visible {
  outline: none;
}
.nv-badge:focus-visible .nv-badge__disc {
  transform: translateY(-6px) scale(1.035);
  outline: 1px solid var(--nv-champagne);
  outline-offset: 12px;
}
.nv-badge:focus-visible .nv-badge__disc::after { opacity: 1; }
.nv-badge:active .nv-badge__disc { transform: translateY(-2px) scale(1.01); }

.nv-hero__tagline {
  max-width: 30rem;
  font-size: clamp(0.5625rem, 0.2vw + 0.52rem, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  line-height: 2.1;
  text-transform: uppercase;
  color: rgba(244, 231, 208, 0.92);
  text-shadow: 0 1px 3px rgba(5, 7, 10, 0.85), 0 2px 20px rgba(5, 7, 10, 0.7);
  opacity: 0;
  transition: opacity 1000ms var(--nv-ease-cine) 180ms;
}

/* --- reveal phases: brand furniture appears with the looping scene --- */
.nv-masthead__mark,
.nv-nav,
.nv-ticker {
  opacity: 0;
  transition: opacity 900ms var(--nv-ease-cine);
}
[data-nv-phase="loop"] .nv-masthead__mark,
[data-nv-phase="loop"] .nv-nav,
[data-nv-phase="loop"] .nv-ticker { opacity: 1; }
[data-nv-phase="loop"] .nv-badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 260ms;
}
[data-nv-phase="loop"] .nv-hero__tagline { opacity: 1; }

/* on light editorial pages the masthead scrolls away with the photograph
   instead of floating a cream wordmark over the ivory reading sheet */
.nv-page .nv-masthead { position: absolute; }

/* interviews page has no intro phase */
.nv-page .nv-masthead__mark,
.nv-page .nv-nav { opacity: 1; }

/* --- skip intro --- */
.nv-skip-intro {
  position: fixed;
  z-index: 32;
  right: calc(var(--nv-edge-x) + env(safe-area-inset-right));
  bottom: calc(var(--nv-edge-y) * 3.4 + env(safe-area-inset-bottom));
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.72);
  padding: 0.6rem 0.2rem;
  transition: color var(--nv-micro) var(--nv-ease), opacity var(--nv-ui) var(--nv-ease);
  text-shadow: 0 1px 12px rgba(5, 7, 10, 0.7);
}
.nv-skip-intro:hover { color: var(--nv-champagne); }
[data-nv-phase="loop"] .nv-skip-intro,
[data-nv-phase="static"] .nv-skip-intro {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   TICKER
   ========================================================================== */
.nv-ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  overflow: hidden;
  padding: clamp(0.7rem, 1.1vw, 1rem) 0
    calc(clamp(0.7rem, 1.1vw, 1rem) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(199, 154, 85, 0.16);
  background: linear-gradient(0deg, rgba(5, 7, 10, 0.62), rgba(5, 7, 10, 0.08));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.nv-ticker__track {
  display: flex;
  width: max-content;
  animation: nv-ticker var(--nv-ticker-duration) linear infinite;
}
.nv-ticker__group {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(0.5625rem, 0.16vw + 0.54rem, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: none;
  color: rgba(247, 242, 233, 0.78);
  padding-right: 0.85rem;
}
.nv-ticker__group b {
  font-weight: 500;
  color: var(--nv-gold);
  padding: 0 0.85rem;
}
@keyframes nv-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   PAGE TRANSITION (home -> interviews)
   ========================================================================== */
.nv-curtain {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  background: var(--nv-navy-deep);
}
.nv-curtain__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.55;
  transform: scale(1.04);
}
.is-leaving .nv-curtain {
  opacity: 1;
  transition: opacity 620ms var(--nv-ease-cine);
}
.is-leaving .nv-curtain__img {
  transform: scale(1);
  transition: transform 900ms var(--nv-ease-cine);
}
.is-leaving .nv-stage__grade {
  background: rgba(5, 7, 10, 0.55);
  transition: background 620ms var(--nv-ease-cine);
}
.is-leaving .nv-badge .nv-badge__disc {
  transform: scale(1.12);
  transition: transform 700ms var(--nv-ease-cine);
}
.is-leaving .nv-badge__label,
.is-leaving .nv-hero__tagline,
.is-leaving .nv-ticker,
.is-leaving .nv-nav {
  opacity: 0;
  transition: opacity 380ms var(--nv-ease);
}

/* arrival fade, pure CSS so it also works without JS */
.nv-enter {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--nv-navy-deep);
  pointer-events: none;
  animation: nv-enter-out 760ms var(--nv-ease-cine) forwards;
}
@keyframes nv-enter-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   INTERVIEWS PAGE
   ========================================================================== */
.nv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--nv-navy-deep);
}
.nv-backdrop picture {
  position: absolute;
  inset: 0;
  display: block;
}
.nv-backdrop__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.nv-backdrop__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 13, 24, 0.74) 0%, rgba(6, 13, 24, 0.26) 34%, rgba(6, 13, 24, 0.12) 60%),
    linear-gradient(100deg, rgba(6, 13, 24, 0.6) 0%, rgba(6, 13, 24, 0.28) 46%, rgba(6, 13, 24, 0) 78%),
    radial-gradient(120% 80% at 50% 30%, rgba(5, 7, 10, 0) 40%, rgba(5, 7, 10, 0.5) 100%);
}
@media (max-width: 900px) {
  .nv-backdrop__img { object-position: 34% 46%; }
}

.nv-page__main {
  position: relative;
  z-index: 20;
}

/* --- editorial title block over the photograph --- */
.nv-pagehead {
  min-height: 78vh;
  min-height: 78dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: calc(var(--nv-edge-y) * 6) var(--nv-edge-x) clamp(3rem, 7vw, 6rem);
  max-width: 78rem;
  margin-inline: auto;
}
.nv-pagehead .nv-kicker { color: var(--nv-champagne); }
.nv-pagehead__title {
  font-family: var(--nv-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--nv-ivory);
  text-shadow: 0 2px 40px rgba(5, 7, 10, 0.5);
}
.nv-pagehead__standfirst {
  max-width: 32rem;
  font-size: clamp(0.5625rem, 0.2vw + 0.52rem, 0.75rem);
  letter-spacing: 0.24em;
  line-height: 2.05;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.78);
}
.nv-pagehead__rule { max-width: 22rem; }

/* --- the ivory sheet: reading surface, still full bleed --- */
.nv-sheet {
  position: relative;
  background: var(--nv-sheet);
  color: var(--nv-charcoal);
  padding: clamp(3rem, 6vw, 6.5rem) var(--nv-edge-x) clamp(3.5rem, 7vw, 7rem);
}
.nv-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(199, 154, 85, 0), rgba(199, 154, 85, 0.6), rgba(199, 154, 85, 0));
}
.nv-sheet__inner {
  max-width: 78rem;
  margin-inline: auto;
}
.nv-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(20, 24, 29, 0.14);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.nv-sheet__title {
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--nv-navy);
}
.nv-sheet__note {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(20, 24, 29, 0.55);
}

/* --- interview cards --- */
.nv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.nv-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(20, 24, 29, 0.1);
  transition: border-color var(--nv-ui) var(--nv-ease),
    transform var(--nv-ui) var(--nv-ease), box-shadow var(--nv-ui) var(--nv-ease);
}
.nv-card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 34%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--nv-sheet-deep) 0%, #dbd0bd 100%);
  display: grid;
  place-items: center;
}
.nv-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.nv-card__portrait::after {
  content: "";
  position: absolute;
  inset: clamp(0.75rem, 1.4vw, 1.15rem);
  border: 1px solid rgba(199, 154, 85, 0.5);
  pointer-events: none;
}
.nv-card__plate {
  width: clamp(4rem, 7vw, 5.5rem);
  opacity: 0.62;
}
.nv-card__plate img { width: 100%; height: auto; }
.nv-card__status {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.55rem 0.9rem;
  background: var(--nv-navy);
  color: var(--nv-champagne);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.nv-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.nv-card__name {
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--nv-navy);
}
.nv-card__meta {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(20, 24, 29, 0.6);
}
.nv-card__meta i { font-style: normal; color: var(--nv-gold); padding: 0 0.5rem; }
.nv-card__teaser {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(20, 24, 29, 0.78);
}
.nv-card__cta {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nv-navy);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.nv-card__cta::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--nv-gold);
  transition: width var(--nv-ui) var(--nv-ease);
}
.nv-card--linked { cursor: pointer; }
@media (hover: hover) {
  .nv-card--linked:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 154, 85, 0.75);
    box-shadow: 0 20px 45px -30px rgba(6, 13, 24, 0.55);
  }
  .nv-card--linked:hover .nv-card__cta::after { width: 3rem; }
}
.nv-card--linked:focus-within {
  border-color: rgba(199, 154, 85, 0.9);
}
.nv-card--placeholder { border-color: rgba(20, 24, 29, 0.16); }
/* an empty plate should not occupy portrait height it has not earned */
.nv-card--placeholder .nv-card__portrait { aspect-ratio: 4 / 3.1; }
.nv-card--placeholder .nv-card__plate { opacity: 0.8; }

/* ==========================================================================
   INTERVIEW ARTICLE (template)
   ========================================================================== */
.nv-article {
  max-width: var(--nv-measure);
  margin-inline: auto;
}
.nv-article__lede {
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.45;
  color: var(--nv-navy);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.nv-qa { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); }
.nv-qa__q {
  font-family: var(--nv-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.35;
  color: var(--nv-navy);
}
.nv-qa__a { font-size: 1.0625rem; line-height: 1.78; color: rgba(20, 24, 29, 0.85); }
.nv-qa__a + .nv-qa__a { margin-top: 1rem; }
.nv-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(20, 24, 29, 0.55);
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(20, 24, 29, 0.14);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.nv-footer {
  position: relative;
  z-index: 20;
  background: var(--nv-navy-deep);
  color: rgba(247, 242, 233, 0.7);
  padding: clamp(2.25rem, 4vw, 3.5rem) var(--nv-edge-x)
    calc(clamp(2.25rem, 4vw, 3.5rem) + env(safe-area-inset-bottom));
}
.nv-footer__inner {
  max-width: 78rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.nv-footer__mark { width: clamp(8rem, 14vw, 11rem); }
.nv-footer__mark img { width: 100%; height: auto; }
.nv-footer__links { display: flex; gap: 1.75rem; }
.nv-footer__meta {
  width: 100%;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.66);
}

/* ==========================================================================
   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;
  }
  .nv-ticker__track { animation: none; transform: none; }
  .nv-ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .nv-ticker__group:nth-child(2) { display: none; }
  .nv-enter { display: none; }
  .nv-badge,
  .nv-masthead__mark,
  .nv-nav,
  .nv-ticker,
  .nv-hero__tagline {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* static phase: no video at all (reduced motion or autoplay refused) */
[data-nv-phase="static"] .nv-masthead__mark,
[data-nv-phase="static"] .nv-nav,
[data-nv-phase="static"] .nv-ticker,
[data-nv-phase="static"] .nv-hero__tagline { opacity: 1; }
[data-nv-phase="static"] .nv-badge { opacity: 1; transform: none; }

/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */
@media (max-width: 640px) {
  :root { --nv-ticker-duration: 34s; }
  .nv-masthead {
    align-items: center;
  }
  .nv-masthead__mark { width: clamp(8.25rem, 40vw, 11rem); }
  .nv-nav { gap: 1rem; padding-top: 0; }
  .nv-nav__link { letter-spacing: 0.2em; }
  .nv-hero {
    padding-top: calc(var(--nv-edge-y) * 7);
    padding-bottom: calc(var(--nv-edge-y) * 6.5);
  }
  .nv-hero__tagline { letter-spacing: 0.2em; line-height: 2; }
  .nv-pagehead { min-height: 70dvh; }
}

@media (max-width: 400px) {
  .nv-nav__link { font-size: 0.5rem; letter-spacing: 0.16em; }
  .nv-masthead__mark { width: 8.5rem; }
}

/* very wide screens: keep the composition centred, media still edge to edge */
@media (min-width: 1800px) {
  :root { --nv-edge-x: 4.5rem; --nv-edge-y: 3rem; }
  .nv-badge__disc { width: clamp(15rem, 15vw, 19rem); }
}