/* ==========================================================================
   Meridian Investor Portal — the continuous investment story
   One vertical narrative: documents 00…09 in sequence, then the data room.
   ========================================================================== */

/* ---- Sticky navigation ------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 21, 14, 0.86);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav__in {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3.4vw, 40px);
  height: 54px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex: none;
  color: var(--ivory);
}
.nav__brand .mark { width: 18px; height: 18px; }

/* Full item list — desktop only */
.nav__items {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.05vw, 17px);
  margin-left: auto;
  min-width: 0;
}
.nav__item {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dimmer);
  white-space: nowrap;
  padding: 19px 0 17px;
  border-bottom: 2px solid transparent;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.nav__item:hover { color: var(--ivory); }

/* Sections already passed hold a muted gold, the one being read is full
   orange — so the bar warms up left to right as the investor moves down. */
.nav__item.is-done:not(.is-cur) { color: #B4884A; }
.nav__item.is-cur {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* Contact — a destination rather than a section, so it reads differently */
.nav__contact {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  padding: 7px 13px;
  margin-left: 6px;
  border: 1px solid var(--rule);
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.nav__contact:hover {
  color: #150B02;
  background: var(--orange);
  border-color: var(--orange);
}
.sheet__item--contact .sheet__n { color: var(--orange); }

/* Compact selector — tablet and mobile */
.nav__compact {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ivory);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 9px 13px;
  cursor: pointer;
  max-width: 62vw;
}
.nav__compact b { color: var(--orange); font-weight: 400; }
.nav__compact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__compact svg {
  width: 12px; height: 12px; flex: none;
  stroke: var(--dim); fill: none; stroke-width: 2;
  transition: transform 0.2s var(--ease);
}
body.is-menu .nav__compact svg { transform: rotate(180deg); }

/* Overall reading progress */
.nav__prog {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
}
.nav__prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.12s linear;
}

/* Drop-down section sheet */
.sheet {
  position: fixed;
  top: 54px; left: 0; right: 0;
  z-index: 49;
  background: rgba(7, 21, 14, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
  max-height: calc(100dvh - 54px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
body.is-menu .sheet { opacity: 1; transform: none; pointer-events: auto; }

.sheet__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px clamp(18px, 5vw, 40px);
  border-bottom: 1px solid var(--rule-soft);
}
.sheet__item:last-child { border-bottom: 0; }
.sheet__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dimmer);
  flex: none;
  width: 2.4em;
}
.sheet__t { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.sheet__k {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--dim);
  margin-left: auto;
  text-align: right;
}
.sheet__item.is-cur .sheet__n,
.sheet__item.is-cur .sheet__t { color: var(--orange); }

@media (max-width: 1400px) {
  .nav__items { display: none; }
  .nav__compact { display: flex; }
}
@media (max-width: 640px) {
  .nav__in { height: 50px; }
  .sheet { top: 50px; }
  .nav__brand span { display: none; }
  .sheet__k { display: none; }
}

/* ---- Section divider --------------------------------------------------- */

/* Sections are the scroll targets, so they carry the offset that keeps the
   sticky bar from covering a divider. */
section[id^="s-"] { scroll-margin-top: 54px; }

.sec-div {
  padding: clamp(74px, 12vh, 152px) var(--edge) clamp(38px, 5.5vh, 66px);
  border-top: 1px solid var(--rule-soft);
}
.sec-div:first-of-type { border-top: 0; }

.sec-div__t {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  font-size: clamp(34px, 6.4vw, 78px);
  margin: 14px 0 0;
}
.sec-div__k {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2.1vw, 26px);
  color: var(--ivory-warm);
  margin: 10px 0 0;
  opacity: 0.85;
}
.sec-div__meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.sec-div__meta a {
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.sec-div__meta a:hover { color: var(--ivory); border-bottom-color: var(--orange); }

/* ---- Pages ------------------------------------------------------------- */

/* One flat green ground across the whole site. Pages butt directly against
   each other now, so nothing needs separating and the two-tone earns
   nothing. */
section[id^="s-"] { background: var(--ink); }

/* The data room sits on the deeper green of the Deep Culture pages, so the
   diligence end of the package reads as its own field. Carried through the
   file list and the footer, which follow it, so there is no stray band of
   the lighter ground between them. */
section#s-09,
.room { background: var(--ink-room); }

/* Pages butt directly against one another, within a document and between
   documents — one uninterrupted run of pages from 00 through 09. */
#story > section + section,
#story > section:first-child { padding-top: 0; }

/* Pages run edge to edge. No padding, no frame — the document is the page,
   not something mounted inside it. `max-width` is set per document by
   story.js from the live viewport. */
.pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Each slot reserves its exact aspect ratio before the page renders, so
   nothing shifts underfoot while scrolling. */
.pg-slot {
  position: relative;
  width: 100%;
  background: #08170F;
  line-height: 0;
  cursor: zoom-in;
  scroll-margin-top: 72px;
}
/* The slot already reserves the page's exact aspect ratio, so the canvas
   fills it outright — no rounding drift, no seam between pages. */
.pg-slot canvas { display: block; width: 100%; height: 100%; }

/* Live hyperlinks carried over from the source PDF. Invisible until hovered
   — the page's own design already shows where they are. */
.pg-link {
  position: absolute;
  z-index: 4;
  display: block;
  border-radius: 2px;
  transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.pg-link:hover {
  background: rgba(217, 130, 47, 0.18);
  box-shadow: 0 0 0 1.5px rgba(217, 130, 47, 0.65);
}


/* Placeholder shimmer, only for pages actually approaching the viewport —
   109 running animations would cost more than they are worth. */
.pg-slot.is-near:not(.is-on)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(251, 251, 247, 0.015) 30%,
    rgba(251, 251, 247, 0.05) 50%,
    rgba(251, 251, 247, 0.015) 70%);
  background-size: 220% 100%;
  animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-slot.is-near:not(.is-on)::before { animation: none; }
}

/* ---- Film -------------------------------------------------------------
   A moving image between two documents. Same width as the pages, butted
   against them, so it reads as part of the run rather than an interruption. */

.film {
  margin: 0 auto;
  background: #000;
  position: relative;
}
.film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.film__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* YouTube shows its own chrome — title bar, share arrow, "More videos" —
   whenever the pointer is over the player, and no player parameter removes
   them. This transparent shield takes the pointer instead, so the player
   never sees a hover and never paints them. It sits above the iframe and
   below the sound control, which stays clickable. */
.film__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Sound control — the one thing the film asks of the viewer, so it is the
   one thing that looks clickable. Muted it reads as an invitation in full
   orange; once sound is on it recedes to a quiet outline. */
.film__sound {
  position: absolute;
  right: clamp(16px, 2.2vw, 32px);
  bottom: clamp(16px, 2.2vw, 32px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 19px;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #150B02;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  transition: opacity 0.35s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.film.is-live .film__sound { opacity: 1; }
.film__sound svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2.1;
}
.film__sound:hover { transform: translateY(-1px); background: #E8913B; border-color: #E8913B; }

/* A quiet nudge beside the control, only while the film is silent. */
.film__hint {
  position: absolute;
  right: calc(clamp(16px, 2.2vw, 32px) + 169px + 14px);
  bottom: calc(clamp(16px, 2.2vw, 32px) + 12px);
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ivory);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.film.is-live .film__hint { opacity: 0.9; }
.film.is-live .film__hint.is-gone,
.film.is-live .film__hint.is-faded { opacity: 0; }

@media (max-width: 700px) { .film__hint { display: none; } }

/* Sound already on and left alone — the control has done its job, so it
   fades out. Coming back to the film brings it back. It never fades while
   muted: that state is the invitation. */
.film.is-live .film__sound.is-faded {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s var(--ease);
}

/* Sound already on — step back out of the way. */
.film__sound.is-on {
  background: rgba(7, 21, 14, 0.62);
  backdrop-filter: blur(8px);
  border-color: rgba(251, 251, 247, 0.32);
  color: var(--ivory);
  box-shadow: none;
}
.film__sound.is-on:hover {
  background: rgba(7, 21, 14, 0.82);
  border-color: var(--ivory);
  color: var(--ivory);
}

/* A slow breath while muted, so the eye finds it without being nagged. */
@media (prefers-reduced-motion: no-preference) {
  .film.is-live .film__sound:not(.is-on) { animation: soundPulse 3.4s ease-in-out infinite; }
}
@keyframes soundPulse {
  0%, 100% { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(217, 130, 47, 0.5); }
  50%      { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 0 12px rgba(217, 130, 47, 0); }
}

@media (max-width: 640px) {
  .film__sound { padding: 12px 16px; font-size: 10.5px; gap: 9px; }
  .film__sound svg { width: 16px; height: 16px; }
}


/* ---- Data room: the evidence, as files -------------------------------- */

.room {
  padding: 0 var(--edge) clamp(16px, 2.5vh, 32px);
}
.room__group { margin-top: clamp(38px, 6vh, 64px); }
.room__gh {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule-firm);
}
.room__gt {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}
.room__gn {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--dim);
}

.file {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  transition: background 0.2s var(--ease);
}
.file::before {
  content: "";
  position: absolute;
  inset: 0 -20px;
  background: var(--panel);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.file:hover::before { opacity: 1; }
.file > * { position: relative; }

.file__icon { width: 20px; height: 20px; stroke: var(--dimmer); fill: none; stroke-width: 1.5; }
.file:hover .file__icon { stroke: var(--orange); }

.file__name { min-width: 0; }
.file__t {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.file__d {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dim);
  margin-top: 4px;
  max-width: 62ch;
}
.file__kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
  white-space: nowrap;
}
.file__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.file__act svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 1.8; }
.file:hover .file__act { color: var(--ivory); }

@media (max-width: 680px) {
  .file { grid-template-columns: 24px 1fr; row-gap: 10px; }
  .file__kind, .file__act { grid-column: 2; }
  .file__act { justify-self: start; }
}

/* ---- Full-screen page view -------------------------------------------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 12, 8, 0.97);
  display: none;
  flex-direction: column;
}
.lb.is-on { display: flex; }

.lb__bar {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.lb__id {
  display: flex;
  align-items: baseline;
  gap: 11px;
  min-width: 0;
}
.lb__n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--orange); }
.lb__t {
  font-size: 15px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb__pos {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}
.lb__sep { width: 1px; height: 22px; background: var(--rule); margin: 0 7px; flex: none; }

.lb__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: auto;
  padding: 16px;
  overscroll-behavior: contain;
  cursor: zoom-in;
}
.lb__stage.is-zoomed { cursor: grab; }
.lb__page { margin: auto; line-height: 0; background: #0A170F; }
.lb__page canvas { display: block; max-width: none; }

@media (max-width: 760px) {
  .lb__bar { height: 48px; padding: 0 8px; }
  .lb__stage { padding: 8px; }
}