/* ======================================================
   Sayonara_Alice.exe — v94_alice_codex.css
   alice.html — her dedicated space and the entrance to the
   Visual Codex.
   ------------------------------------------------------
   Depends on v92_pages_shell.css for tokens, image frame,
   opening and bridge. Namespaced .alice-* and touching no
   existing selector.

   Where story.html is a reading, this page is a record: more
   monospace, more grid, more precision. The Codex structure
   is prepared and honest — fourteen marks on an archive
   ruler, no invented plate, no fake thumbnail.
====================================================== */

/* ------------------------------------------------------
   1. Opening
   The hero artwork already carries its own title lockup
   ("ALICE / VISUAL CODEX"), so the page chrome underneath
   stays deliberately quiet and never competes with it.
------------------------------------------------------ */

.alice-page .page-hero .page-figure {
  --figure-ratio: 16 / 9;
}

.alice-page .page-hero-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(1rem, 2.6vw, 2.2rem);
  max-width: min(var(--page-max), 100%);
}

.alice-page .page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: .04em;
}

.alice-page .page-hero-node {
  grid-column: 1 / -1;
  margin: 0 0 .7rem;
  color: rgba(158, 244, 255, .62);
  font: 700 .68rem/1 var(--page-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.alice-page .page-hero-sub {
  align-self: center;
  margin-top: 0;
  padding-left: clamp(1rem, 2.4vw, 1.8rem);
  border-left: 1px solid rgba(0, 220, 255, .22);
}

/* ------------------------------------------------------
   2. Threshold — the short authored introduction
------------------------------------------------------ */

.alice-threshold {
  width: min(var(--page-max), 100%);
  margin: clamp(2.6rem, 6vw, 4.6rem) auto 0;
  padding-inline: clamp(1.1rem, 5vw, 4rem);
}

.alice-threshold-inner {
  position: relative;
  max-width: var(--page-measure);
  padding-left: clamp(1rem, 2.4vw, 2rem);
}

.alice-threshold-inner::before {
  content: "";
  position: absolute;
  inset: .35rem auto .35rem 0;
  width: 1px;
  background: linear-gradient(180deg, var(--page-hair-strong), rgba(64, 114, 255, .1));
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform 1.1s var(--page-ease) .1s;
}

.alice-threshold.v71-reveal-pending .alice-threshold-inner::before {
  transform: scaleY(0);
}

.alice-threshold p {
  margin: 0 0 1.35em;
  color: var(--page-ink-soft);
  font-family: var(--page-serif);
  font-size: clamp(1.04rem, 1.15vw, 1.2rem);
  line-height: 1.82;
}

.alice-threshold p:first-child {
  color: var(--page-ink);
  font-size: clamp(1.16rem, 1.6vw, 1.4rem);
  line-height: 1.6;
}

.alice-threshold p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------
   3. Visual Codex — prepared structure
   Fourteen marks on an archive ruler. It states what will
   live here without pretending the plates already exist.
------------------------------------------------------ */

.alice-codex {
  position: relative;
  isolation: isolate;
  width: min(var(--page-max), 100%);
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  /* The panel drawn by ::before starts at the page gutter, so the text
     has to clear the gutter *and* add its own inner padding — otherwise
     it spills outside the rounded border. */
  padding: clamp(1.8rem, 4vw, 3.2rem)
           calc(clamp(1.1rem, 5vw, 4rem) + clamp(1.1rem, 2.4vw, 2.2rem));
}

.alice-codex::before {
  content: "";
  position: absolute;
  inset: 0 clamp(1.1rem, 5vw, 4rem);
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(0, 220, 255, .14);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 120% at 20% 0%, rgba(0, 190, 255, .07), transparent 66%),
    linear-gradient(150deg, rgba(0, 24, 34, .4), rgba(0, 0, 0, .22));
}

/* Label and title share one baseline grid: the kicker sits directly
   above the heading instead of floating beside it. */
.alice-codex-head {
  display: grid;
  gap: .55rem;
  margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
}

.alice-codex-kicker {
  margin: 0;
  color: #8ff4ff;
  font: 800 .72rem/1.2 var(--page-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0, 220, 255, .42);
}

.alice-codex h2 {
  margin: 0;
  color: var(--sa-text, #effcff);
  font-family: var(--page-serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.15;
}

/* The counter and the fourteen marks now live in the live progress bar
   of v95_codex_plates.css, which tracks the real reading position. */

.alice-codex-note {
  margin: 0;
  max-width: var(--page-measure);
  color: var(--page-ink-soft);
  font-family: var(--page-serif);
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  line-height: 1.7;
}

/* ------------------------------------------------------
   4. Responsive
------------------------------------------------------ */

@media (max-width: 1024px) {
  .alice-page .page-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .9rem;
  }

  .alice-page .page-hero-sub {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .alice-threshold {
    padding-inline: 1.15rem;
  }

  .alice-codex {
    padding-inline: calc(1.15rem + 1.1rem);
  }

  .alice-threshold-inner {
    padding-left: .95rem;
  }

  /* The panel keeps the page gutter on a phone too: only its radius
     tightens. Content padding above already clears gutter + interior. */
  .alice-codex::before {
    border-radius: 14px;
  }

  .alice-codex-head {
    gap: .45rem;
  }
}

/* ------------------------------------------------------
   5. Reduced motion
------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .alice-threshold-inner::before {
    transition: none !important;
    transform: none !important;
  }
}