/* ==========================================================================
   RealJenKiggans.com
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0b0b10;
  --ink-2: #16161f;
  --text: #f4f4f6;

  /* Accents sampled from the emojis */
  --gold: #f6c945;      /* 💰 */
  --cyan: #5cc8ff;      /* 🔌 */
  --tangerine: #ff9a2e; /* 🍊 */
  --yellow: #ffd24d;    /* 🤥 */
  --alarm: #ff4d3d;     /* hero accent */

  --font-display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;

  --fs-body: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-sub: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  --fs-kicker: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  --fs-callout: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
  --fs-statement: clamp(2.5rem, 1.2rem + 5.6vw, 6.5rem);
  --fs-title: clamp(3.5rem, 1rem + 12vw, 8rem);

  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --pad-y: clamp(4rem, 9vh, 7rem);
  --maxw: 72rem;
  --radius: clamp(1.5rem, 4vw, 3rem);

  /* Length of the "only emojis" beat between panels. */
  --cascade-h: 45vh;
  --cascade-h: 45svh;

  /* Height of mobile browser chrome that can cover the bottom of a pinned panel. */
  --toolbar-delta: 0px;
  --toolbar-delta: calc(100lvh - 100svh);
}

@media (min-width: 48em) {
  :root {
    --cascade-h: 55vh;
    --cascade-h: 55svh;
  }
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  /* clip (not hidden) so sticky keeps working and stray emojis never cause sideways scroll */
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
p,
ul {
  margin: 0;
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* ---------- Panels ---------- */
.panel {
  --panel-bg: var(--ink);
  --accent: var(--gold);
  --glow: rgb(246 201 69 / 0.12);

  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100lvh;
  padding: var(--pad-y) max(var(--pad-x), env(safe-area-inset-right)) var(--pad-y) max(var(--pad-x), env(safe-area-inset-left));
  /* Extra bottom room = toolbar height, so a pinned panel's last line is never under mobile browser UI. */
  padding-bottom: calc(var(--pad-y) + var(--toolbar-delta));
  background-color: var(--panel-bg);
  background-image: radial-gradient(70rem 42rem at 88% -8%, var(--glow), transparent 68%);
  color: var(--text);
  overflow: clip;
}

/* Stacking is switched on by main.js once every panel has been measured.
   Fits the screen  -> pins at the top.
   Taller than the screen -> scrolls to its end, then pins at its bottom. */
.is-stacked .panel--stack {
  position: sticky;
  top: min(0px, calc(100vh - var(--panel-h, 100vh)));
  top: min(0px, calc(100lvh - var(--panel-h, 100lvh)));
}

/* Every panel after the hero arrives as a sheet sliding over the stack. */
.panel:not(.hero) {
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -1.5rem 4rem rgb(0 0 0 / 0.5);
}

.panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Dim layer created by main.js; fades in while the next panel covers this one. */
.panel__dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.panel--money {
  --panel-bg: #0c2a1d;
  --accent: var(--gold);
  --glow: rgb(246 201 69 / 0.13);
}

.panel--power {
  --panel-bg: #0e1b3d;
  --accent: var(--cyan);
  --glow: rgb(92 200 255 / 0.14);
}

.panel--orange {
  --panel-bg: #3a1703;
  --accent: var(--tangerine);
  --glow: rgb(255 154 46 / 0.11);
}

.panel--lie {
  --panel-bg: #24103f;
  --accent: var(--yellow);
  --glow: rgb(255 210 77 / 0.13);
}

/* ---------- Panel typography ---------- */
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.panel__emoji {
  font-family: var(--font-emoji);
  font-size: clamp(3rem, 2rem + 3.5vw, 5rem);
  line-height: 1;
}

.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--accent);
}

.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin-bottom: clamp(1.75rem, 4.5vh, 3rem);
}

.statement__line {
  display: block;
}

.statement__line + .statement__line {
  color: var(--accent);
}

.statement__line--punch {
  font-size: 1.7em;
  line-height: 1;
  margin-top: 0.08em;
}

.hl {
  color: var(--accent);
  font-weight: 800;
}

/* keeps an em dash attached to the word before it, without touching the copy */
.nowrap {
  white-space: nowrap;
}

.body,
.card {
  max-width: 65ch;
  text-wrap: pretty;
}

.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.card {
  max-width: none;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 4px solid var(--accent);
  border-radius: 0 0 1rem 1rem;
  background: rgb(255 255 255 / 0.06);
}

.callout {
  font-size: var(--fs-callout);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 6px solid var(--accent);
}

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

/* Phones: keep each statement sentence on one line (the longest is 9.55em wide in Anton), and drop the
   card boxes so the evidence text gets the full width. Both also shorten the panels, so more of them
   fit the screen and pin at the top. */
@media (max-width: 47.99em) {
  :root {
    --pad-y: clamp(3.25rem, 8vh, 7rem);
  }

  .panel__head {
    margin-bottom: 0.75rem;
  }

  .statement {
    font-size: min(var(--fs-statement), calc((100vw - 2 * var(--pad-x)) / 9.7));
  }

  .cards {
    gap: 1.25rem;
  }

  .card {
    padding: 1rem 0 0;
    border-radius: 0;
    background: none;
  }
}

@media (min-width: 56em) {
  .cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .split--lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
}

/* 🤥 is the longest panel: big type left, evidence stacked right. */
@media (min-width: 64em) {
  .panel--lie .panel__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .panel--lie .panel__head {
    grid-column: 1;
    grid-row: 1;
  }

  .panel--lie .statement {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(2.5rem, 1rem + 3.2vw, 4.25rem);
    margin-bottom: 0;
  }

  .panel--lie .cards {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* ---------- Links ---------- */
.panel a:not(.share__btn) {
  color: var(--accent);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
  border-radius: 0.2em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.panel a:not(.share__btn):hover,
.panel a:not(.share__btn):focus-visible {
  color: var(--panel-bg);
  background-color: var(--accent);
  text-decoration-color: transparent;
}

/* Accent-colored text inside a link would vanish against the accent hover background. */
.panel a:not(.share__btn):hover :is(.hl, .hero__real),
.panel a:not(.share__btn):focus-visible :is(.hl, .hero__real) {
  color: inherit;
  text-shadow: none;
}

/* ---------- Hero ---------- */
.hero {
  --panel-bg: var(--ink);
  --accent: var(--alarm);
  background-image:
    radial-gradient(60rem 36rem at 78% 12%, rgb(255 77 61 / 0.1), transparent 70%),
    radial-gradient(50rem 34rem at 10% 92%, rgb(255 154 46 / 0.06), transparent 70%),
    radial-gradient(90rem 60rem at 50% 40%, var(--ink-2), transparent 75%);
}

.hero__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  justify-items: center;
  text-align: center;
}

.hero__portrait {
  order: -1;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  text-wrap: balance;
  text-shadow: 0 0.04em 1.5rem rgb(11 11 16 / 0.85);
}

.hero__real {
  color: var(--accent);
  text-shadow: 0 0 2.5rem rgb(255 77 61 / 0.45);
}

.hero__sub {
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  max-width: 38ch;
  font-size: var(--fs-sub);
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
  text-shadow: 0 0 1.25rem rgb(11 11 16 / 0.9);
}

.hero__sub .hl {
  font-weight: 800;
}

.portrait {
  --size: clamp(10rem, 42vw, 23rem);
  --ring: clamp(0.4rem, 1vw, 0.6rem);

  position: relative;
  /* Explicit width AND height, photo placed absolutely: iOS WebKit mis-sizes an aspect-ratio box
     whose child uses a percentage height, which turned the circle into an oval. */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--accent); /* the ring */
  box-shadow: 0 0 3.5rem rgb(255 77 61 / 0.35), 0 1.5rem 4rem rgb(0 0 0 / 0.55);
}

.portrait__img {
  position: absolute;
  top: var(--ring);
  left: var(--ring);
  width: calc(100% - 2 * var(--ring));
  height: calc(100% - 2 * var(--ring));
  border: 0.2rem solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-2);
}

.portrait--mono .portrait__img {
  filter: grayscale(1) contrast(1.08);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--toolbar-delta) + 1rem);
  z-index: 1;
  translate: -50% 0;
  color: var(--text);
  opacity: 0.8;
  line-height: 0;
}

@media (min-width: 56em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  /* Sized so "Jen Kiggans" (4.92em wide in Anton) always fits the text column on one line. */
  .hero__title {
    font-size: min(10.75vw, 8rem);
  }

  .hero__portrait {
    order: 0;
    justify-self: end;
  }

  .portrait {
    --size: clamp(16rem, 26vw, 23rem);
  }
}

/* ---------- Emoji fields + cascades (built by main.js, purely decorative) ---------- */
.emoji-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.emoji-field__layer {
  position: absolute;
  inset: 0;
}

.cascade {
  /* Without JS the gaps collapse and the page is a plain colored scroll. */
  height: 0;
  pointer-events: none;
}

.is-stacked .cascade {
  position: relative;
  z-index: 2;
  height: var(--cascade-h);
  overflow-x: clip;
  overflow-y: visible;
}

.emoji {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: var(--y, 50%);
  font-family: var(--font-emoji);
  font-size: calc(var(--s, 2) * 1rem);
  line-height: 1;
  opacity: var(--o, 1);
  rotate: calc(var(--r, 0) * 1deg);
  user-select: none;
  -webkit-user-select: none;
}

.emoji__glyph {
  display: block;
}

.is-active > .emoji,
.is-active > .emoji > .emoji__glyph,
.is-active .emoji-field__layer > .emoji,
.is-active .emoji-field__layer > .emoji > .emoji__glyph {
  will-change: transform;
}

/* ---------- Share ---------- */
.cta {
  --panel-bg: var(--ink);
  background-image:
    radial-gradient(56rem 34rem at 15% 12%, rgb(246 201 69 / 0.09), transparent 70%),
    radial-gradient(56rem 34rem at 85% 88%, rgb(92 200 255 / 0.09), transparent 70%),
    radial-gradient(90rem 60rem at 50% 50%, var(--ink-2), transparent 75%);
}

.cta__inner {
  display: grid;
  justify-items: center;
}

.share {
  display: grid;
  gap: clamp(0.875rem, 2vh, 1.25rem);
  width: min(100%, 26rem);
  padding: 0;
  list-style: none;
}

.share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 4rem;
  padding: 0.875rem 1.75rem;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.45);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.share__btn:hover,
.share__btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.share__icon {
  flex: none;
  fill: currentColor;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  padding: 2.5rem var(--pad-x) calc(2.5rem + env(safe-area-inset-bottom));
  background: #000;
  color: #fff;
  text-align: center;
}

.disclaimer {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid #fff;
  font-size: 1rem;
  line-height: 1.4;
}

/* ---------- 404 ---------- */
/* One full-screen panel in the hero's colors; the footer sits inside the first screen. */
.page-notfound {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.page-notfound main {
  display: grid;
  flex: 1;
}

.panel.notfound {
  --accent: var(--alarm);
  min-height: 0;
  padding-bottom: var(--pad-y);
  border-radius: 0;
  box-shadow: none;
  background-image:
    radial-gradient(60rem 36rem at 78% 12%, rgb(255 77 61 / 0.1), transparent 70%),
    radial-gradient(50rem 34rem at 10% 92%, rgb(255 154 46 / 0.06), transparent 70%),
    radial-gradient(90rem 60rem at 50% 40%, var(--ink-2), transparent 75%);
}

/* Shrink-wrapped so each is its own emoji-free zone and the scatter can fill the space beside them. */
.notfound .panel__head,
.notfound .statement {
  width: fit-content;
  max-width: 100%;
}

.notfound .statement {
  text-shadow: 0 0.04em 1.5rem rgb(11 11 16 / 0.85);
}

/* "You're on the wrong page." is 10.59em wide in Anton: keep it on one line on phones too. */
@media (max-width: 47.99em) {
  .notfound .statement {
    font-size: min(var(--fs-statement), calc((100vw - 2 * var(--pad-x)) / 10.8));
  }
}

.notfound__btn {
  display: inline-flex;
  width: auto;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
}

.notfound__btn:hover,
.notfound__btn:focus-visible {
  background: var(--alarm);
  border-color: var(--alarm);
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .card,
  .share__btn {
    border: 2px solid CanvasText;
  }

  .portrait {
    background: CanvasText;
  }

  .emoji-field,
  .cascade,
  .panel__dim {
    display: none;
  }

  :focus-visible {
    outline-color: Highlight;
  }
}

@media print {
  .is-stacked .panel--stack,
  .panel {
    position: static;
    min-height: 0;
    padding: 1.5rem 0;
    background: #fff;
    color: #000;
    border-radius: 0;
    box-shadow: none;
  }

  .panel a:not(.share__btn),
  .kicker,
  .hl,
  .statement__line + .statement__line,
  .hero__real {
    color: #000;
    background: none;
  }

  .hero__title,
  .hero__sub {
    text-shadow: none;
  }

  .emoji-field,
  .cascade,
  .panel__dim,
  .scroll-cue,
  .cta {
    display: none !important;
  }

  .site-footer {
    background: #fff;
    color: #000;
    padding: 1.5rem 0;
  }

  .disclaimer {
    border-color: #000;
  }
}