:root {
  --paper: #f3ead6;
  --paper-edge: #e7dcc2;
  --ink: #1c1712;
  --ink-soft: #4a4036;
  --rule: #2a231b;
  --accent: #6b1d10;
  /* Gen Z pops — loud on purpose */
  --hot: #ff3d8b;        /* hot pink */
  --lime: #c6ff3d;       /* highlighter lime */
  --electric: #7b4dff;   /* electric purple */
  --cyan: #2fe6e0;       /* y2k cyan */
  --highlighter: #fff04d;/* marker yellow */
  --serif: "Old Standard TT", "Times New Roman", serif;
  --display: "Playfair Display", "Times New Roman", serif;
  --black-letter: "UnifrakturMaguntia", "Playfair Display", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }
/* Scroll only as a fallback: when everything fits (the normal case) the page
   fills exactly one viewport with no scrollbar. When it can't fit — very short
   screens, landscape, or large accessibility fonts — the page scrolls instead
   of clipping, so the bottom astrologer selector is always reachable. */
body { min-height: 100%; }

body {
  font-family: var(--serif);
  color: var(--ink);
  /* aged paper + halftone dots. The dots tile cleanly at any page height, so they
     live on the body. The corner color blooms + edge vignette are on a fixed layer
     (body::before) instead — anchored to the viewport so they stay tidy corner
     accents when the page scrolls, rather than ballooning to the document height. */
  isolation: isolate; /* make body a stacking context so ::before sits above the
                         paper but behind the content */
  background:
    radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1.6px) 0 0 / 7px 7px,
    var(--paper);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* risograph color blooms in the corners + a soft top vignette */
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(255, 61, 139, 0.16), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(123, 77, 255, 0.16), transparent 70%),
    radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(60, 45, 25, 0.18));
}

.paper {
  min-height: 100vh;
  min-height: 100dvh; /* dvh excludes mobile browser chrome; min-height lets it grow & scroll if content can't fit */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(0.5rem, 1.6vh, 1.2rem);
  /* Honor the device safe areas (notch, rounded corners, gesture-nav bar) so the
     top masthead and bottom astrologer selector are never tucked under system UI. */
  padding:
    calc(clamp(1rem, 3vh, 2rem)   + env(safe-area-inset-top))
    calc(clamp(1rem, 5vw, 3.5rem) + env(safe-area-inset-right))
    calc(clamp(1rem, 3vh, 2rem)   + env(safe-area-inset-bottom))
    calc(clamp(1rem, 5vw, 3.5rem) + env(safe-area-inset-left));
  max-width: 900px;
  margin: 0 auto;
}

/* --- Masthead --- */
/* margin-bottom adds breathing room under the masthead, on top of the grid gap,
   without affecting the spacing of the rows below. */
.masthead { text-align: center; position: relative; margin-bottom: clamp(0.75rem, 2.5vh, 2rem); }

.nameplate {
  font-family: var(--black-letter);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
}
/* "AI" set in sans-serif for the techy contrast */
.nameplate .ai {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}


.masthead-rule {
  font-size: clamp(0.6rem, 1.4vw, 0.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.35rem 0;
}
.masthead-rule:first-child { border-bottom: 1px solid var(--rule); margin-bottom: 0.4rem; }
.masthead-rule--tagline {
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  margin-top: 0.4rem;
  /* Saturated stops only — no light lime/cyan, which blended into the cream paper
     at the light end of the cycle and made the motto disappear. These all hold
     contrast on the background so it stays readable through the whole animation. */
  background: linear-gradient(90deg, var(--electric), var(--hot), var(--accent), var(--hot), var(--electric));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  animation: shimmer 8s linear infinite;
}


@keyframes shimmer {
  to { background-position: 200% center; }
}

/* --- Selector (title with arrows) --- */
.selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}

/* chunky sticker arrow buttons */
.arrow {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  width: clamp(2.6rem, 7vw, 3.4rem);
  height: clamp(2.6rem, 7vw, 3.4rem);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.arrow:hover { background: var(--lime); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.arrow:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* Fixed width (not min-width) + no shrink so the arrows never shift as the name
   changes — the longest name ("Sagittarius") renders ~231px, so this holds it with
   margin while still scaling down on narrow screens. Stacked as a column so the
   "Under the sign of" kicker always sits on its own line ABOVE the name, even for
   short names like "Leo" (otherwise they share a line and the layout shifts). */
.selector-title {
  text-align: center;
  width: clamp(11rem, 46vw, 15.5rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Name + headshot share one centered line ("with the title"). Living inside the
   fixed-width title means the headshot never widens the row, so the astrologer
   picker stays the exact same width as the sign picker. */
.persona-nameline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.5vw, 0.6rem);
}
.persona-face {
  width: clamp(2.6rem, 7vw, 3.4rem);
  height: clamp(2.6rem, 7vw, 3.4rem);
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 rgba(28, 23, 18, 0.18));
}

.selector-kicker {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cyan);
  /* Heavier top than bottom padding: uppercase has no descenders, so equal
     padding leaves the caps looking too high. This optically centers them. */
  line-height: 1;
  padding: 0.42em 0.6em 0.3em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
}

.selector-name {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  line-height: 1.1;
  position: relative;
  margin-top: 0.15em;
  white-space: nowrap;
}
/* highlighter marker swipe behind the name */
.selector-name::before {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  bottom: 0.08em;
  height: 0.45em;
  background: var(--highlighter);
  z-index: -1;
  transform: skewX(-12deg) rotate(-1.5deg);
  border-radius: 2px;
}
/* lift the astrologer selector up ~5% of the viewport off the bottom edge */
.selector--persona { margin-bottom: 5vh; }
.selector--persona .selector-name::before { background: var(--hot); opacity: 0.55; }
.selector--sign .selector-kicker { background: var(--lime); }
.selector--persona .selector-kicker { background: var(--electric); color: var(--paper); }

.selector-sub {
  display: block;
  font-style: italic;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--ink-soft);
}

/* --- Fortune column --- */
.column {
  align-self: center;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(0.5rem, 2vh, 1.5rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2vh, 1.2rem);
}

.column-text { width: 100%; text-align: center; }

/* the zodiac sticker illustration */
.column-art {
  display: grid;
  place-items: center;
}
.column-art img {
  width: auto;
  height: clamp(7rem, 24vh, 13rem);
  object-fit: contain;
  filter: drop-shadow(4px 6px 0 rgba(28, 23, 18, 0.18));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

/* reading entrance — retriggered on every sign/astrologer change */
@keyframes readingIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.column.swap { animation: readingIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

.column-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.15;
}

.column-byline {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

.hairline {
  border: none;
  border-top: 1px solid var(--rule);
  width: 40%;
  margin: 1rem auto;
}

.column-body {
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  line-height: 1.6;
  text-align: justify;
  text-align-last: center;
  min-height: 4.2em;
}
.column-body::first-letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.6em;
  float: left;
  line-height: 0.8;
  padding: 0.05em 0.08em 0 0;
  background: linear-gradient(135deg, var(--hot), var(--electric) 55%, var(--cyan), var(--hot));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}

/* --- Mobile / short viewports --- */
/* The layout never scrolls (overflow: hidden), so on small screens we compact
   spacing and trim the tallest pieces to keep the bottom astrologer selector
   fully on screen instead of clipped. */
@media (max-width: 600px), (max-height: 720px) {
  .paper {
    gap: clamp(0.3rem, 1vh, 0.7rem);
    padding:
      calc(clamp(0.6rem, 2vh, 1rem) + env(safe-area-inset-top))
      calc(1rem + env(safe-area-inset-right))
      calc(clamp(0.6rem, 2vh, 1rem) + env(safe-area-inset-bottom))
      calc(1rem + env(safe-area-inset-left));
  }
  .masthead-rule:first-child { margin-bottom: 0.2rem; }
  .masthead-rule--tagline { margin-top: 0.2rem; }

  .selector { gap: clamp(0.6rem, 4vw, 1.25rem); }

  .column { gap: clamp(0.4rem, 1.4vh, 0.9rem); padding: 0; }
  .column-art img { height: clamp(5.5rem, 18vh, 9rem); }
  .column-body { min-height: 0; }
  .hairline { margin: 0.5rem auto; }

  /* keep the astrologer's headshot from forcing the bottom row taller */
  .persona-face { width: clamp(2.6rem, 11vw, 3.5rem); height: clamp(2.6rem, 11vw, 3.5rem); }
}

/* honor users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .column.swap,
  .column-art img,
  .masthead-rule--tagline,
  .column-body::first-letter { animation: none; }
}