/* ============================================================
   THE FRVR CLUB × ELI DELGADO · Client journey and dashboard
   Bold poster style. Anton (display) / Inter (body) / Space Mono (labels).
   Near-black #070606 canvas, red #e2241f accent.
   ============================================================ */

:root {
  --bg:        #070606;
  --bg-2:      #0d0b0b;
  --panel:     #111010;
  --panel-2:   #151313;
  --text:      #ccc4bc;   /* warm off-white body */
  --bright:    #f4efe9;   /* bright white, emphasis */
  --muted:     #8c837c;   /* muted grey */
  --red:       #e2241f;   /* primary red */
  --red-2:     #ff3b30;   /* brighter red, hover / glow */
  --red-deep:  #8e1212;   /* dark red border */
  --line:      #2a211f;   /* dark neutral border */
  --line-red:  rgba(226, 36, 31, 0.24);
  --glow-red:  rgba(226, 36, 31, 0.14);
  --hair:      rgba(244, 239, 233, 0.08);
  --display:   'Anton', 'Arial Narrow', sans-serif;
  --sans:      'Inter', system-ui, -apple-system, sans-serif;
  --mono:      'Space Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red-2); text-decoration: none; }
ul, ol { list-style: none; }

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

/* Faint film grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Layout */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 30px; }
.narrow { max-width: 820px; }

/* Mono labels */
.tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--red); display: inline-block;
}

/* Scroll reveal
   Resting opacity travels through --rest-opacity so a dimmed state (locked
   phases, locked bands) can set it without fighting the reveal rule on
   specificity. Anything that wants to sit dimmed sets the variable, never
   `opacity` directly. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible { opacity: var(--rest-opacity, 1); transform: none; }

/* ---------------- HERO ---------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 0 60px; overflow: hidden;
  /* graceful fallback if hero.jpg is missing */
  background:
    radial-gradient(90% 70% at 78% 20%, rgba(226,36,31,0.22), rgba(226,36,31,0) 60%),
    radial-gradient(80% 60% at 10% 100%, rgba(226,36,31,0.10), rgba(7,6,6,0) 60%),
    var(--bg);
}
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 28%;
  filter: saturate(0.78) contrast(1.06) brightness(0.82);
}
.hero__img::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,6,6,0.62) 0%, rgba(7,6,6,0.44) 38%, rgba(7,6,6,0.88) 80%, rgba(7,6,6,0.99) 100%),
    radial-gradient(85% 70% at 80% 22%, rgba(226,36,31,0.18), rgba(226,36,31,0) 60%);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 8px; }
.hero__brand { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bright); }
.hero__brand b { color: var(--red); font-weight: 400; }
.hero__badge { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text); }

.hero__center { margin-top: auto; }
.hero .tag { margin-bottom: 20px; color: var(--bright); opacity: 0.9; }

/* Poster headline: solid line + red outline line */
.hero h1 { margin: 0 0 26px; }
.hero h1 span { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em; }
.hl-solid {
  font-size: clamp(54px, 10.5vw, 160px);
  color: var(--bright);
  text-shadow: 0 6px 40px rgba(0,0,0,0.5);
}
.hl-outline {
  font-size: clamp(54px, 10.5vw, 160px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  text-stroke: 1.5px var(--red);
}
.hero__sub { font-family: var(--sans); font-weight: 400; font-size: clamp(18px, 2.1vw, 24px); color: var(--text); max-width: 42ch; line-height: 1.4; }
.hero__meta { margin-top: 20px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------------- SHARED BLOCKS ---------------- */
.block { padding: 120px 0; }
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 6vw, 88px); line-height: 0.92; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--bright);
}
h2 em { font-style: normal; color: var(--red); }
.body-lg { font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); }
.body-lg p { margin-bottom: 22px; }
.body-lg p:last-child { margin-bottom: 0; }
.lede { font-family: var(--sans); font-weight: 500; color: var(--bright); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.26; letter-spacing: -0.01em; }
.approach .tag { margin-bottom: 30px; }
.approach__close { color: var(--bright); font-weight: 500; }

/* ---------------- ROADMAP ---------------- */
.roadmap { border-top: 1px solid var(--hair); padding-bottom: 0; }
.roadmap__head { margin-bottom: 56px; }
.roadmap__head .tag { margin-bottom: 22px; }
.phase-slot { display: block; }

.phase {
  position: relative;
  padding: 44px 0 44px 26px;
  border-top: 1px solid var(--hair);
  border-left: 2px solid transparent;
  /* opacity and transform must keep the reveal timing, or the card fades
     without rising. The state colours can move at their own pace. */
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1), border-color 0.5s ease, background 0.5s ease;
}
.phase-slot:first-child .phase { border-top: 1px solid var(--line-red); }
.phase__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.phase__no { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); flex: 0 0 auto; }
.phase__titles { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.phase__title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vw, 64px); line-height: 0.96; text-transform: uppercase; color: var(--bright); }
.phase__summary { margin-top: 16px; color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; max-width: 62ch; }

/* Status chips */
.chip {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--hair); color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.chip--active { color: var(--red-2); border-color: var(--line-red); background: rgba(226,36,31,0.10); }
.chip--complete { color: var(--red-2); border-color: var(--line-red); background: rgba(226,36,31,0.08); }
.chip--locked { color: var(--red); border-color: var(--line-red); background: rgba(226,36,31,0.05); }
.chip__check { color: var(--red-2); font-size: 11px; line-height: 1; }

/* Phase states */
.phase--active {
  border-left-color: var(--red);
  background: linear-gradient(90deg, var(--glow-red), rgba(226,36,31,0) 44%);
  animation: redGlow 5s ease-in-out infinite;
}
@keyframes redGlow {
  0%, 100% { box-shadow: inset 0 0 60px rgba(226,36,31,0.04); }
  50%      { box-shadow: inset 0 0 80px rgba(226,36,31,0.10); }
}
.phase--complete { border-left-color: var(--line-red); }
/* Dimmed states set the resting opacity, never `opacity` directly. */
.phase--locked { --rest-opacity: 0.4; }
.phase--locked:hover, .phase--locked:focus-within { --rest-opacity: 0.75; }
/* Locked TIERS (upsells) keep their "why" copy readable — they sit brighter
   than a locked package phase, and their chip is dashed to read as a
   different kind of lock: not-yet-purchased rather than not-yet-started. */
.phase--tier.phase--locked { --rest-opacity: 0.55; }
.phase--tier.phase--locked:hover, .phase--tier.phase--locked:focus-within { --rest-opacity: 0.9; }
.chip--tier { border-style: dashed; }

/* Detail disclosure */
.phase__toggle {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 0 0 6px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease;
}
.phase__toggle:hover { color: var(--red-2); border-bottom-color: var(--line-red); }
.phase__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.phase__caret { font-size: 13px; line-height: 1; }
.phase__detail { margin-top: 20px; max-width: 66ch; color: var(--text); font-size: clamp(16px, 1.45vw, 17.5px); line-height: 1.75; }
.phase__detail[hidden] { display: none; }

/* ---------------- CINEMATIC IMAGE BAND (2.39:1) ---------------- */
.cine {
  position: relative; width: 100%; aspect-ratio: 2.39 / 1; min-height: 240px;
  overflow: hidden; margin: 8px 0 0;
  /* graceful fallback if the file is missing */
  background:
    radial-gradient(80% 120% at 60% 30%, rgba(226,36,31,0.10), rgba(13,11,11,0) 65%),
    var(--bg-2);
}
/* A band under a locked phase dims with its card. */
.cine--locked { --rest-opacity: 0.4; }
.cine__img { position: absolute; inset: 0; background-size: cover; background-position: center 42%; filter: saturate(0.8) contrast(1.05) brightness(0.78); }
.cine__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,6,6,0.42), rgba(7,6,6,0.66)),
              radial-gradient(90% 130% at 50% 50%, rgba(226,36,31,0.10), rgba(7,6,6,0) 72%);
}
.cine__cap {
  position: absolute; left: 30px; bottom: 20px; z-index: 1;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bright);
}

/* ---------------- DASHBOARD ---------------- */
.dashboard { border-top: 1px solid var(--hair); }
.dashboard__head { margin-bottom: 46px; }
.dashboard__head .tag { margin-bottom: 22px; }

.dash {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line-red);
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  overflow: hidden;
}
.dash__panel { padding: 34px 30px; border-bottom: 1px solid var(--hair); }
.dash__panel:last-child { border-bottom: 0; }
.dash__label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}

/* a) Progress */
.dash__bar-row { display: flex; align-items: center; gap: 22px; }
.bar { position: relative; flex: 1 1 auto; height: 6px; background: rgba(244,239,233,0.08); border-radius: 999px; overflow: hidden; }
.bar__fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--red-2));
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(226,36,31,0.5);
  transition: width 1.4s cubic-bezier(.2,.6,.2,1);
}
.dash__pct { font-family: var(--display); font-size: 26px; letter-spacing: 0.02em; color: var(--red); flex: 0 0 auto; line-height: 1; }

/* b) Current phase */
.dash__current-no { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); }
.dash__current-title { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 56px); line-height: 0.96; text-transform: uppercase; color: var(--bright); margin-top: 10px; }
.dash__current-summary { margin-top: 14px; color: var(--muted); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; max-width: 58ch; }

/* c) Deliverables table */
.dtable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  padding: 0 16px 14px 0; border-bottom: 1px solid var(--line-red); white-space: nowrap;
}
.dtable th:last-child, .dtable td:last-child { padding-right: 0; }
.dtable td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: 15.5px; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable__name { color: var(--bright); line-height: 1.5; min-width: 220px; }
/* Per-cell labels for the stacked mobile layout. Hidden from assistive tech
   because the real column headers already carry that information. */
.dtable__label { display: none; margin-bottom: 5px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.dtable__cat { color: var(--muted); font-size: 14px; white-space: nowrap; }
.dtable__status { white-space: nowrap; }
.chip--d-not-started { color: var(--muted); border-color: var(--hair); }
.chip--d-in-progress { color: var(--red-2); border-color: var(--line-red); background: rgba(226,36,31,0.10); }
.chip--d-complete { color: var(--red-2); border-color: var(--line-red); background: rgba(226,36,31,0.08); }

/* d) Package */
.pkg { display: grid; gap: 14px; }
.pkg__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pkg__label { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pkg__value { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.01em; color: var(--bright); line-height: 1; }
.pkg__value--paid { display: inline-flex; align-items: center; gap: 10px; color: var(--red); }
.pkg__value--muted { font-family: var(--sans); font-size: 17px; color: var(--muted); }
.pkg__value--name { font-size: clamp(22px, 2.3vw, 30px); }
.pkg__check { color: var(--red); font-size: 20px; line-height: 1; }

/* e) Internal notes, never shown when CLIENT_VIEW is true */
.internal {
  margin-top: 34px; padding: 26px 24px;
  border: 2px dashed var(--red); border-radius: 3px;
  background: repeating-linear-gradient(135deg, rgba(226,36,31,0.05) 0 12px, rgba(226,36,31,0.02) 12px 24px);
}
.internal__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.internal__flag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bg); background: var(--red); padding: 6px 12px; border-radius: 2px;
}
.internal__hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--red-2); }
.internal__list { display: grid; gap: 18px; }
.internal__item { padding-left: 16px; border-left: 1px solid var(--line-red); }
.internal__no { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-2); }
.internal__note { margin-top: 6px; color: var(--text); font-size: 15.5px; line-height: 1.65; max-width: 76ch; }

/* ---------------- WHAT IS INCLUDED ---------------- */
.included { border-top: 1px solid var(--hair); }
.included .tag { margin-bottom: 22px; }
.included h2 { margin-bottom: 40px; }
.included__list { border-top: 1px solid var(--line-red); }
.included__list li {
  position: relative; padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--hair);
  color: var(--bright); font-size: clamp(16px, 1.6vw, 18.5px);
}
.included__list li::before { content: ''; position: absolute; left: 0; top: 28px; width: 16px; height: 2px; background: var(--red); }
.included__note { margin-top: 30px; color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 62ch; }

/* ---------------- GOING DEEPER ---------------- */
.deeper { border-top: 1px solid var(--hair); }
.deeper .tag { margin-bottom: 22px; }
.deeper h2 { margin-bottom: 32px; }
.deeper__block {
  padding: 30px 28px; border: 1px solid var(--hair); border-left: 2px solid var(--line-red);
  border-radius: 2px; background: rgba(17,16,16,0.6);
}
.deeper__block p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.deeper__block p + p { margin-top: 20px; }
.deeper__block strong { color: var(--bright); font-weight: 600; }

/* ---------------- CLOSE ---------------- */
.close { text-align: center; }
.close h2 { margin-bottom: 26px; }
.close__body { margin: 0 auto; max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.7; }

/* ---------------- FOOTER ---------------- */
footer { padding: 60px 0; text-align: center; border-top: 1px solid var(--hair); background: var(--bg); }
.footer__brand { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bright); }
.footer__brand b { color: var(--red); font-weight: 400; }
.footer__meta { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 819px) {
  .block { padding: 84px 0; }
  .hero { padding: 22px 0 48px; }
  .hl-solid, .hl-outline { line-height: 0.9; }
  .cine { aspect-ratio: 16 / 10; }
  .phase { padding-left: 20px; }
  .dash__panel { padding: 28px 22px; }

  /* Deliverables stack into labelled rows instead of scrolling sideways.
     The explicit ARIA roles emitted by script.js keep the table semantics
     alive through display:block, and the column headers stay clipped rather
     than removed so they are still announced and still associated. */
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; }
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dtable tr { padding: 20px 0; border-bottom: 1px solid var(--hair); }
  .dtable tr:last-child { border-bottom: 0; }
  .dtable td { padding: 0; border: 0; }
  .dtable td + td { margin-top: 10px; }
  .dtable__name { font-size: 17px; min-width: 0; }
  .dtable__label { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: var(--rest-opacity, 1); transform: none; transition: none; }
  .phase--active { animation: none; }
  .bar__fill { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- PRINT ---------------- */
@media print {
  :root { --bg:#fff; --bg-2:#fafafa; --panel:#fff; --panel-2:#fff; --text:#222; --bright:#111; --muted:#555; --red:#c21a16; --red-2:#c21a16; --red-deep:#c21a16; --line:#ddd; --hair:#e5e5e5; --line-red:#e6b3b1; }
  body { background:#fff; } body::after { display:none; }
  .hero { min-height:auto; padding:30px 0; } .hero__img::after { background: rgba(255,255,255,0.45); }
  .hl-outline { color: var(--red); -webkit-text-stroke: 0; }
  .cine__img::after { background: rgba(255,255,255,0.2); }
  .phase--locked, .cine--locked { --rest-opacity: 0.75; }
  .phase--active { animation: none; }
  .dash { box-shadow: none; }
  section, .phase, .dash__panel, .internal__item { page-break-inside: avoid; }
  .reveal { opacity: var(--rest-opacity, 1); transform: none; }
  /* The internal warning is knocked-out white on red, which disappears when
     browsers drop background graphics. Force it to read as ink on paper. */
  .internal__flag {
    color: #c21a16; background: none; border: 1px solid #c21a16;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .internal { border-color: #c21a16; background: none; }
}