/* Era landing page — layout. Colours, type scale and motion live in tokens.css / motion.css. */

/* Metric-matched fallbacks so the web-font swap causes no layout shift.
   Measured against Arial / Times New Roman (Liberation equivalents). */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 105.3%; ascent-override: 94.2%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Fallback'; src: local('Times New Roman'), local('Liberation Serif'); size-adjust: 111.4%; ascent-override: 97.1%; descent-override: 22.5%; line-gap-override: 0%; }
:root {
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
  --font-body: 'DM Sans', 'DM Sans Fallback', 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 64px;
  --era-body-text: #3A4456;
}
@media (min-width: 960px) { :root { --nav-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--nav-h); }
body { overflow-x: clip; }
img, video, picture { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--era-navy); }
a:hover { color: var(--era-orange); }
.btn, .btn:hover { color: var(--era-navy); }
.btn-nav, .btn-nav:hover { color: var(--era-paper); }
.btn-primary:hover { background: #F9A43F; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 12px 18px; background: var(--era-navy); color: var(--era-paper); border-radius: var(--radius-sm); }
.skip:focus { top: 12px; color: var(--era-paper); }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.chapter { padding-block: var(--section-y); }
.kicker { margin-bottom: 16px; color: var(--era-gold-deep); }
.instrument .kicker { color: var(--era-gold); }
h2 { font-size: var(--fs-h2); line-height: 1.08; color: var(--era-navy); }
.body { color: var(--era-body-text); }
.body + .body { margin-top: 24px; }
.body strong { color: var(--era-navy); font-weight: 600; }

/* ── Nav ───────────────────────────────────────── */
.nav { padding-top: env(safe-area-inset-top); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 12px; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.nav-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 0 -4px; border-radius: 50%; }
.nav-mark img { width: 36px; height: 36px; }
.nav .btn-nav { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--era-navy); cursor: pointer; border-radius: var(--radius-sm); }
.nav-toggle svg { width: 22px; height: 22px; }

/* One link list: a full-height paper panel (popover) on phone, inline row on desktop */
.menu { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: calc(env(safe-area-inset-top) + 12px) var(--gutter) 40px; background: var(--era-paper); color: var(--era-navy); }
.menu:popover-open { display: flex; flex-direction: column; }
.menu-close { align-self: flex-end; }
.menu-list { margin-top: 8px; }
.menu a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--era-rule); font-family: var(--font-display); font-size: 28px; text-decoration: none; }
.menu .nav-login { color: var(--era-gray-text); }
.menu::backdrop { background: transparent; }
@media (min-width: 960px) {
  .nav-mark img { width: 40px; height: 40px; }
  .nav-toggle, .menu-close { display: none; }
  .menu, .menu:popover-open { position: static; display: flex; flex-direction: row; align-items: center; gap: 36px; width: auto; height: auto; padding: 0; margin-right: 20px; background: none; overflow: visible; }
  .menu-list { display: flex; align-items: center; gap: 36px; margin: 0; }
  .menu a { min-height: 44px; border: 0; font-family: var(--font-body); font-size: 15px; font-weight: 500; }
}

/* ── 1 · Opening ───────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: calc(100svh - var(--nav-h)); background: var(--era-navy); color: var(--era-paper); }
.hero picture, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-photo { object-fit: cover; object-position: 50% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,31,68,0.55) 0%, rgba(10,31,68,0.55) 62%, rgba(10,31,68,0.3) 82%, rgba(10,31,68,0) 100%); }
.hero-inner { padding-block: 120px 36px; }
.hero h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.015em; color: var(--era-paper); max-width: 16ch; }
.hero .lead { margin-top: 20px; max-width: 640px; font-size: var(--fs-lead); line-height: 1.45; color: var(--era-paper-on-dark); }
.hero .cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.hero .cta .btn { width: 100%; }
.hero .cta span { font-size: var(--fs-small); color: var(--era-paper-dim); text-align: center; }
.hero .stance { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--era-rule-on-dark); font-size: var(--fs-small); line-height: 1.45; color: var(--era-paper-dim); }
@media (min-width: 640px) {
  .hero .cta { flex-direction: row; align-items: center; gap: 24px; }
  .hero .cta .btn { width: auto; padding: 18px 34px; font-size: 17px; }
}
@media (min-width: 960px) {
  .hero { min-height: 780px; }
  .hero-inner { padding-block: 160px 72px; }
  /* Forced break after the first sentence without adding a child (keeps the .w stagger order intact) */
  .hero h1 { display: flex; flex-wrap: wrap; column-gap: 0.25em; max-width: none; }
  .hero h1::after { content: ""; flex-basis: 100%; order: 1; }
  .hero h1 .w:nth-child(n+3) { order: 2; }
  .hero .stance { margin-top: 56px; padding-top: 20px; }
}

/* ── 2 · Convergence ───────────────────────────── */
.grid-12 { display: grid; gap: 24px; }
.vision-assets { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--era-rule); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); color: var(--era-gray-text); }
.vision-assets ul { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--era-navy); font-weight: 600; }
@media (min-width: 960px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .vision-head { grid-column: 1 / span 5; }
  .vision-body { grid-column: 7 / span 6; align-self: end; }
  .vision-assets span { margin-left: auto; }
}

/* ── 3 · A glimpse (the only dark chapter; hard edge, no gradient) ── */
.instrument { color: var(--era-paper); }
.instrument h2 { font-size: var(--fs-h2-dark); line-height: 1.1; color: var(--era-paper); max-width: 22ch; }
.glimpse-cap { margin-top: 16px; font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--era-paper-dim); }
.panel { position: relative; margin-top: 32px; border: 1px solid var(--era-rule-on-dark); border-radius: var(--radius-md); background: var(--era-navy-2); overflow: hidden; }
.film { position: relative; aspect-ratio: 16 / 9; background: var(--era-navy-2); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--era-rule-on-dark); border-radius: 50%; background: rgba(10,31,68,0.72); color: var(--era-paper); cursor: pointer; }
.film-play[hidden] { display: none; }
.film-play svg { width: 20px; height: 20px; margin-left: 3px; }
.panel-foot { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.reading { display: flex; flex-direction: column; gap: 6px; }
.reading:has(.reading-label:empty) { display: none; }
.reading-label { font-size: var(--fs-kicker); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--era-orange); }
.reading-value { min-height: 1.1em; font-variant-numeric: lining-nums tabular-nums; font-family: var(--font-display); font-size: var(--fs-reading); line-height: 1.05; color: var(--era-paper); white-space: nowrap; }
.reading-time { font-size: var(--fs-small); color: var(--era-paper-dim); }
.panel-foot .btn { width: 100%; }
@media (min-width: 960px) {
  .glimpse-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .glimpse-cap { margin: 0; flex-shrink: 0; }
  .panel { margin-top: 40px; }
  /* Reading sits in a strip under the film, so the film's own lower-left labels stay clear */
  .panel-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 24px 28px; border-top: 1px solid var(--era-rule-on-dark); }
  .panel-foot .btn { width: auto; margin-left: auto; padding: 14px 26px; }
}

/* ── 4 · Why Era ───────────────────────────────── */
.why-head h2 { max-width: 20ch; }
.hosts { display: grid; gap: 24px; margin-top: 48px; }
.host-card { display: grid; gap: 16px; align-content: start; padding: 20px; border: 1px solid var(--era-rule); border-radius: var(--radius-md); background: #FBF8F2; }
[data-host="mr-era"] { view-transition-name: mr-era; }
.host-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); color: var(--era-navy); }
.host-card p { font-size: 15px; line-height: 1.55; color: var(--era-gray-text); }
.host-card .disclaimer { font-size: 12.5px; line-height: 1.5; }
.facade { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--era-navy-2); }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade .play { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.facade .play span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--era-orange); color: var(--era-navy); transition: transform var(--t-fast) var(--ease); }
.facade .play:hover span { transform: scale(1.06); }
.facade .play svg { width: 22px; height: 22px; margin-left: 4px; }
@media (min-width: 960px) {
  .why-head { grid-column: 1 / span 6; }
  .why-body { grid-column: 8 / span 5; align-self: end; }
  .hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 56px; }
  .host-card { padding: 28px; }
  /* Miss Era spans both columns while Mr Era is hidden */
  .hosts:has([data-host="mr-era"][hidden]) .host-card { grid-column: 1 / -1; grid-template-columns: 7fr 5fr; column-gap: 40px; align-items: center; }
  .hosts:has([data-host="mr-era"][hidden]) .host-card > :not(.facade, iframe) { grid-column: 2; }
  .hosts:has([data-host="mr-era"][hidden]) .host-card > .facade,
  .hosts:has([data-host="mr-era"][hidden]) .host-card > iframe { grid-column: 1; grid-row: 1 / span 4; }
}

/* ── 5 · Curiosity (quiet; ocean tint behind the rotating line only) ── */
.curiosity { text-align: center; }
.curiosity .body { max-width: 560px; margin: 20px auto 0; }
.q-band { max-width: 760px; margin: 48px auto 0; padding: 36px var(--gutter); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--era-ocean) 6%, transparent); }
.q-rotate { height: 2.8em; font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--era-navy); }
.q-rotate span { display: flex; align-items: center; justify-content: center; }
@media (min-width: 640px) { .q-rotate { height: 1.4em; } }

/* ── 6 · Who it's for ──────────────────────────── */
.who { background: var(--era-sand); }
.who-head { display: grid; gap: 16px; }
.who-head h2 { max-width: 16ch; }
.who-line { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); color: var(--era-navy); }
.portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--era-navy); color: var(--era-paper); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,31,68,0.6) 0%, rgba(10,31,68,0.6) 30%, rgba(10,31,68,0.3) 55%, rgba(10,31,68,0) 75%); }
.portrait .cap { position: absolute; z-index: 1; inset: auto 0 0 0; padding: 14px; font-family: var(--font-display); font-size: clamp(16px, 1.7vw, 26px); line-height: 1.22; }
@media (min-width: 960px) {
  .who-head { grid-template-columns: 1fr auto; align-items: end; }
  .portraits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
  .portrait { border-radius: var(--radius-md); }
  .portrait .cap { padding: 24px; }
}

/* ── 7 · Close ─────────────────────────────────── */
.close { text-align: center; }
.close-mark { width: 72px; height: 72px; margin: 0 auto 28px; }
.close h2 { max-width: 18ch; margin-inline: auto; font-size: clamp(36px, 4vw, 58px); line-height: 1.06; }
.close .body { max-width: 560px; margin: 20px auto 0; }
.close .btn { margin-top: 28px; width: 100%; }
.close-notes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--era-rule); display: grid; gap: 8px; font-size: var(--fs-small); line-height: 1.5; color: var(--era-gray-text); }
.close-notes .stance { color: var(--era-navy); }
@media (min-width: 640px) { .close .btn { width: auto; padding: 18px 36px; font-size: 17px; } }

/* ── Footer ────────────────────────────────────── */
.footer { background: var(--era-navy); color: var(--era-paper-dim); font-size: var(--fs-small); padding-block: 48px calc(40px + env(safe-area-inset-bottom)); }
.footer a { color: var(--era-paper-on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer a:hover { color: var(--era-orange); }
.footer-top { display: grid; gap: 32px; }
.footer-brand img { width: 56px; height: 56px; margin-bottom: 16px; }
.footer-brand p { max-width: 360px; line-height: 1.5; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols h3 { margin-bottom: 4px; font-size: var(--fs-kicker); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--era-gold); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--era-rule-on-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; }
@media (min-width: 960px) {
  .footer-top { grid-template-columns: 1fr auto; align-items: start; }
  .footer-cols { gap: 64px; }
}