/* page.css — BookiStudios poster build. Engine untouched; theme + composition only. */

/* ---- rebrand: six colours and two faces ---- */
:root {
  --sc-canvas:        #ECEEF0;   /* cold paper */
  --sc-surface:       #E2E5E8;
  --sc-ink:           #13161B;   /* off-black, never #000 */
  --sc-ink-soft:      #59616E;   /* tinted, never flat gray */
  --sc-accent:        #1B4DFF;   /* cobalt. One accent, one role. */
  --sc-accent-ink:    #F4F6FA;
  --sc-font-display:  "Archivo", system-ui, sans-serif;
  --sc-font-text:     "Geist", system-ui, sans-serif;
  --sc-font-mono:     "Geist Mono", ui-monospace, monospace;
}

/* ---- type is the imagery: poster scale, tracking set by scroll ---- */
/* The tracking lock (signature move): every display line starts loose and
   tightens as its act progresses, like type being set. --sc-p is published
   on the act element by the engine and inherited down. */
.poster-wordmark {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 15.5vw, 15.5rem);
  line-height: 0.92;
  /* widest at p = 0, tightest when set: sized so STUDIOS fits even loose */
  letter-spacing: calc(0.005em + (1 - var(--sc-p)) * 0.115em);
  text-wrap: balance;
}
.poster-wordmark__line { display: block; }

.poster-l1 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6.4vw, 6rem);
  line-height: 1.05;
  letter-spacing: calc(0.005em + (1 - var(--sc-p)) * 0.055em);
  text-wrap: balance;
}
.poster-l2 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: calc(0.005em + (1 - var(--sc-p)) * 0.05em);
  text-wrap: balance;
}
.poster-l3 {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: calc(0.005em + (1 - var(--sc-p)) * 0.045em);
  text-wrap: balance;
}

/* ---- stages ---- */
.stage {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sc-3);
  padding-inline: var(--sc-gutter);
  box-sizing: border-box;
}
.stage--center { align-items: center; text-align: center; }
.stage--lead   { align-items: flex-start; text-align: left; }

.hero-sub {
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide);
}

/* ---- act 3: the proof rule under the locked line ---- */
.copy--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.turn-over {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide);
}
.proof-rule {
  display: block;
  width: min(42ch, 100%);
  height: 3px;
  margin-top: var(--sc-5);
  background: var(--sc-accent);
  transform-origin: left center;
  transform: scaleX(clamp(0, (var(--sc-p) - 0.4) / 0.45, 1));
}

/* ---- act 4: the offer, quiet ---- */
.act--offer { padding-top: clamp(3rem, 6vw, 6rem); }  /* after a pin: cut the air */
.offer { display: grid; gap: var(--sc-9); }
.offer__row { display: grid; gap: var(--sc-2); }
.offer__cap {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  color: var(--sc-ink-soft);
  max-width: var(--sc-measure);
}

/* ---- act 5: the flip ---- */
.act--close {
  /* two-stop accent: one hue, two lightnesses, keyed to the dark ground */
  --sc-canvas:     #0E1013;
  --sc-surface:    #16191F;
  --sc-ink:        #F2F3F5;
  --sc-ink-soft:   #9AA1AE;
  --sc-accent:     #7A93FF;
  --sc-accent-ink: #0E1013;
  color: var(--sc-ink);   /* restate color where the token is redefined */
}
/* the stage is already positioned (engine sets sticky), which anchors the
   absolute flip-layer; do NOT set position here or it clobbers the pin.
   The plate would paint above in-flow type, so the close copy is raised. */
.stage--close .copy--center { position: relative; z-index: 2; }
.flip-layer {
  position: absolute;
  inset: 0;
  background: #0E1013;
  /* the lights go down: full dark by p = 0.45, before any type arrives.
     The greeting plate is the ground during entry, so the layer may start
     at zero and the plate keeps full contrast on the paper. */
  opacity: clamp(0, (var(--sc-p) - 0.15) / 0.3, 1);
}
.close-mark {
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: 0.8rem;
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: #545C68;   /* only ever sits on the light paper, before the flip */
}
.close-line {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  text-wrap: balance;
}
.close-cta {
  margin-top: var(--sc-4);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-lg);
  font-weight: 500;
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.32em;
  transition: color 150ms var(--sc-ease-out);
}
.close-cta:hover { color: var(--sc-accent); }
.close-cta:active { transform: translateY(1px); }
.colophon {
  margin: var(--sc-7) 0 0;
  font-family: var(--sc-font-text);
  font-size: 0.75rem;
  color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide);
}

/* ---- the proof rail (signature move, page-local chrome) ---- */
main { padding-bottom: 34px; }
.proof-rail {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  padding: 0 var(--sc-gutter);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid var(--sc-hairline);
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.proof-rail__cursor {
  position: absolute;
  top: -1px; left: 0; bottom: 0;
  width: 100%;
  background: var(--sc-ink);
  transform-origin: left center;
  opacity: 0.55;
}
.proof-rail__cell {
  width: 10px;
  height: 2px;
  margin-bottom: 9px;
  background: var(--sc-ink-soft);
  opacity: 0.18;
  transition: opacity 300ms var(--sc-ease-out);
}
.proof-rail__cell.is-stamped {
  opacity: 1;
  background: var(--sc-accent);
}

/* ---- focus must be visible on every ground it crosses ---- */
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}

/* ---- mobile: the wordmark steps down with the type ramp ---- */
@media (max-width: 700px) {
  .stage { gap: var(--sc-4); }
  .hero-sub { margin-top: var(--sc-4); }
}

/* ---- reduced motion: fewer and gentler, never less meaning ---- */
@media (prefers-reduced-motion: reduce) {
  .proof-rail__cursor { display: none; }
  .poster-wordmark,
  .poster-l1,
  .poster-l2,
  .poster-l3 { letter-spacing: 0.01em; }
  .proof-rule { transform: none; }
  .flip-layer { opacity: 1; }
  .act--close .close-mark { color: var(--sc-ink-soft); }
}