/* ==================================================================
   Lincoln — base, type, buttons, nav, the reel and its beats.
   Sections below the reel live in sections.css.
   Palette is Lincoln's own: felt green, 1-ball yellow, logo red,
   set on near-black because the footage is a hall at night.
   ================================================================== */

:root {
  --ink: #08090a;
  --ink-2: #0f1211;
  --ink-3: #161a18;
  --line: rgba(245, 242, 234, .14);
  --chalk: #f5f2ea;
  --dim: #aab2ac;
  --felt: #0c6538;
  --felt-deep: #073d22;
  --felt-lit: #0f6e3d;
  --yellow: #ffcc1a;
  --yellow-hi: #ffd84d;
  --red: #e3222d;
  --display: 'Karantina', 'Heebo', system-ui, sans-serif;
  --body: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pad: clamp(20px, 5vw, 88px);
  --radius: 14px;
  --nav-h: 72px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; inset-inline-start: 16px; top: -64px; z-index: 100;
  background: var(--yellow); color: #111; padding: 10px 18px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 16px; }

/* ---- type ---------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: .9;
  margin: 0 0 .26em;
  font-size: clamp(56px, 8.2vw, 128px);
  text-wrap: balance;
}
.display--xl { font-size: clamp(76px, 12vw, 196px); }
.display em { font-style: normal; color: var(--yellow); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  color: var(--yellow);
}
.eyebrow::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 12px rgba(227, 34, 45, .8);
}

.lede {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: #dde1dc;
  max-width: 44ch;
  margin: 0 0 26px;
}

/* ---- buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 16px/1 var(--body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn--lg { min-height: 56px; padding: 14px 32px; font-size: 17px; }
.btn--ball {
  background: var(--yellow); color: #121212;
  box-shadow: 0 10px 30px -12px rgba(255, 204, 26, .65), inset 0 -3px 0 rgba(0, 0, 0, .14);
}
.btn--ball:hover { background: var(--yellow-hi); transform: translateY(-1px); }
.btn--ghost {
  border-color: rgba(245, 242, 234, .5); color: var(--chalk);
  background: rgba(8, 9, 10, .28); backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--chalk); background: rgba(245, 242, 234, .1); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid rgba(245, 242, 234, .32); border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.chip:hover { border-color: var(--chalk); background: rgba(245, 242, 234, .08); }

/* ---- nav -------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--pad);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.nav::before {
  content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 9, 10, .7), rgba(8, 9, 10, 0));
  transition: opacity .35s;
}
.nav.is-solid { background: rgba(8, 9, 10, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid::before { opacity: 0; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; position: relative; z-index: 2; }
.brand__ball { width: 34px; height: 34px; flex: none; }
.brand__word {
  display: flex; flex-direction: column;
  font-family: var(--display); font-weight: 700; font-size: 34px; line-height: .8;
}
.brand__word small {
  margin-top: 5px;
  font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .34em;
  color: var(--dim);
}

.nav nav { flex: 1; }
.nav__links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; padding: 8px 0;
  font-size: 15px; font-weight: 500; color: #e6e8e4; text-decoration: none;
}
.nav__links a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 2px; height: 2px;
  background: var(--yellow); transform: scaleX(0); transition: transform .25s;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { position: relative; z-index: 2; }
.nav__toggle { display: none; }

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav { gap: 12px; }
  .nav nav {
    position: fixed; inset: 0; z-index: 1;
    display: grid; place-items: center;
    background: rgba(8, 9, 10, .97);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .nav[data-open] nav { opacity: 1; visibility: visible; }
  .nav__links { flex-direction: column; align-items: center; gap: 14px; }
  .nav__links a { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; }
  .nav__cta { margin-inline-start: auto; min-height: 42px; padding: 8px 18px; font-size: 15px; }
  .nav__toggle {
    position: relative; z-index: 2;
    display: grid; place-content: center; gap: 6px;
    width: 46px; height: 46px; flex: none;
    border: 1px solid var(--line); border-radius: 50%;
    background: rgba(8, 9, 10, .45); color: var(--chalk); cursor: pointer;
  }
  .nav__toggle i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .25s; }
  .nav[data-open] .nav__toggle i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .nav[data-open] .nav__toggle i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
}

@media (max-width: 420px) {
  .brand__word small { display: none; }
  .nav__cta { padding: 8px 14px; font-size: 14px; }
}

/* ---- the reel ------------------------------------------------------------ */

.reel { position: relative; height: calc(8.5 * 100vh); }
.reel__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  background: #070808;
}
.reel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* grade: vignette + a floor of shadow for the copy, then animated grain,
   which also hides how soft 720p/1080p frames are on a big screen */
.reel__grade {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(to top, rgba(8, 9, 10, .6), transparent 32%);
}
.reel__grade::after {
  content: ''; position: absolute; inset: -50%;
  background-image: var(--grain);
  opacity: .1; mix-blend-mode: overlay;
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* UI sits in the *small* viewport so bottom-anchored bits stay above a
   mobile URL bar, while the canvas fills the large one behind it. */
.reel__ui { position: absolute; inset-inline: 0; top: 0; height: 100vh; height: 100svh; }

/* ---- beats (copy panels) ---- */

.beat {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: min(620px, 46vw);
  padding-block: calc(var(--nav-h) + 24px) 120px;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.beat.is-live { pointer-events: auto; }
.beat--start { inset-inline-start: var(--pad); }
.beat--end { inset-inline-end: var(--pad); }
.beat--center {
  inset-inline: 0; margin-inline: auto;
  width: min(1100px, 92vw);
  align-items: center; text-align: center;
}
.beat--center .lede { margin-inline: auto; }
.beat--center .cta-row { justify-content: center; }
/* a lower band, for frames whose subjects fill the middle (the bar) */
.beat--bottom {
  inset-inline: 0; margin-inline: auto;
  width: min(1180px, 92vw);
  justify-content: flex-end;
  padding-bottom: 104px;
}
.beat--bottom .display { font-size: clamp(48px, 6vw, 96px); }
.beat--bottom .lede { max-width: 64ch; }
.beat--bottom::before {
  inset: 40% -10% -4%;
  background: linear-gradient(to top, rgba(8, 9, 10, .88) 30%, rgba(8, 9, 10, 0));
}
.beat .display { text-shadow: 0 8px 50px rgba(0, 0, 0, .55); }
.beat .lede { text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.beat::before {                     /* a soft pool of shadow behind the copy */
  content: ''; position: absolute; inset: 12% -28%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 9, 10, .6), rgba(8, 9, 10, 0));
}

.packs { display: flex; gap: 8px; list-style: none; margin: -6px 0 26px; padding: 0; }
.packs li {
  padding: 6px 12px; border: 1px solid rgba(255, 204, 26, .55); border-radius: 6px;
  color: var(--yellow); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  background: rgba(8, 9, 10, .35);
}

/* ---- reel chrome: hint, chapters, progress ---- */

.reel__hint {
  position: absolute; inset-inline: 0; bottom: 92px; margin: 0;
  text-align: center; font-size: 13px; letter-spacing: .3em; color: var(--dim);
  transition: opacity .4s;
}
.reel__hint span::after {
  content: ''; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--dim), transparent);
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.has-scrolled .reel__hint { opacity: 0; }

.reel__chapters { position: absolute; inset-inline: 0; bottom: 22px; display: flex; justify-content: center; pointer-events: none; }
.reel__chapters ol {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(8, 9, 10, .55); backdrop-filter: blur(8px);
  pointer-events: auto;
}
.reel__chapters button {
  display: flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--dim); font: 500 14px var(--body); cursor: pointer;
  transition: background-color .25s, color .25s;
}
.reel__chapters button:hover { color: var(--chalk); }
.reel__chapters button .num { font-size: 11px; opacity: .75; }
.reel__chapters button[aria-current] { background: var(--chalk); color: #111; }

.reel__skip {
  position: absolute; inset-inline-end: var(--pad); bottom: 24px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(8, 9, 10, .55); backdrop-filter: blur(8px);
  color: var(--dim); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.reel__skip::after { content: '↓'; }
.reel__skip:hover { color: var(--chalk); border-color: rgba(245, 242, 234, .45); }
@media (max-width: 1100px) { .reel__skip { bottom: auto; top: calc(var(--nav-h) + 12px); } }

.reel__progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(245, 242, 234, .08); }
#reel-progress-bar {
  height: 100%; transform: scaleX(0); transform-origin: right center;
  background: linear-gradient(to left, var(--yellow), var(--red));
}

@media (max-width: 760px) {
  .beat, .beat--start, .beat--end, .beat--center {
    inset-inline: 0; width: auto; margin: 0;
    padding: 0 20px 104px;
    justify-content: flex-end; align-items: stretch; text-align: start;
  }
  .beat--center { text-align: center; }
  .beat .cta-row { flex-wrap: nowrap; }
  .beat .cta-row .btn { flex: 1; padding-inline: 16px; }
  .beat::before {
    inset: 25% -10% -2%;
    background: linear-gradient(to top, rgba(8, 9, 10, .94) 35%, rgba(8, 9, 10, 0));
  }
  .display { font-size: clamp(48px, 13.5vw, 70px); }
  .display--xl { font-size: clamp(62px, 18vw, 100px); }
  .lede { font-size: 16px; margin-bottom: 20px; }
  .reel__hint { display: none; }
  .reel__chapters { bottom: 18px; }
  .reel__chapters button { font-size: 0; gap: 0; min-width: 36px; padding: 0 8px; justify-content: center; }
  .reel__chapters button .num { font-size: 12px; opacity: 1; }
}

/* ---- phones: swipeable full-screen slides over looping clips (phone.js) ---- */

.m-reel { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #070808; }
.m-reel__track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.m-reel__track::-webkit-scrollbar { display: none; }
.m-reel__track:focus-visible { outline-offset: -4px; }
.m-slide {
  position: relative; flex: 0 0 100%; height: 100%; overflow: hidden;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.m-slide__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fx, 50%) 50%;
  background: #070808;
}
.m-slide .beat {
  position: absolute; inset: 0; width: auto; margin: 0;
  opacity: 1; transform: none; pointer-events: auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: start;
  padding: 0 20px calc(60px + env(safe-area-inset-bottom));
}
.m-slide .beat--center { text-align: center; }
.m-slide .beat::before {
  inset: 32% -10% -2%;
  background: linear-gradient(to top, rgba(8, 9, 10, .94) 30%, rgba(8, 9, 10, 0));
}
.m-slide .beat--bottom .display { font-size: clamp(44px, 12vw, 64px); }

.m-reel__dots {
  position: absolute; z-index: 3; top: calc(var(--nav-h) + 8px); inset-inline: 16px;
  display: flex; gap: 5px;
}
.m-reel__dots button {
  position: relative; flex: 1; height: 3px; padding: 0;
  border: 0; border-radius: 2px; background: rgba(245, 242, 234, .3); cursor: pointer;
}
.m-reel__dots button::after { content: ''; position: absolute; inset: -12px 0; }   /* a thumb-sized hit area */
.m-reel__dots button[aria-current] { background: var(--chalk); }

.m-reel__hint {
  position: absolute; inset-inline: 0; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0;
  text-align: center; font-size: 12px; letter-spacing: .3em; color: var(--dim);
  pointer-events: none; transition: opacity .4s;
}
.m-reel__hint span::after { content: ' ←'; letter-spacing: 0; }
.m-reel__hint.is-gone { opacity: 0; }