/* ==========================================================================
   poster.css — the redesigned homepage (variants A and B).
   Mark's brief, 31 July: sell above the fold — what it is, what it does,
   what it claims — like a poster. Below the fold: one word at a time,
   claims backed by functionality, five of them. The manual lives in
   tour.html now. Tokens, base and scenes are reused, never overridden.
   ========================================================================== */

/* --- The poster ---------------------------------------------------------- */

.phero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  padding-top: clamp(5rem, 12vh, 8rem);
}

.phero__stage {
  display: grid;
  align-items: end;
  gap: clamp(1.5rem, 3vw, 4rem);
  width: 100%;
  flex: 1;
}
@media (min-width: 900px) {
  .phero__stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.phero__copy { padding-bottom: clamp(1.5rem, 4vh, 3rem); align-self: center; }

.phero__copy h1 { max-width: 12ch; }
.phero__copy h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* What it is — one line, straight after the name. */
.phero__what {
  margin-top: clamp(1.25rem, 2.8vh, 2rem);
  max-width: 34ch;
}

/* What it does — the second, shorter line. */
.phero__does {
  margin-top: 0.75rem;
  font-size: var(--t-body);
  color: var(--chalk-dim);
  max-width: 40ch;
}

.phero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

/* The mascot gets his own column. Never behind a button again. Portrait art:
   width is ~40% of the old square frame for the same standing height. */
.phero__dean {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  width: clamp(175px, 18.75vw, 281px);
  margin-bottom: calc(-2px - var(--fig-lift, 0px));   /* feet on the strip */
}

/* "Feet on the strip" only holds if the file has no empty canvas under the
   shoes, and the poses are not framed alike — guard carries 8.5% of his frame
   below his heels and hovers a clear 34px without this. Each lift is the
   measured bottom padding x (frame height / frame width), in the same vw the
   width clamp uses so it tracks. Re-measure if the artwork is replaced. */
.fig--guard { --fig-lift: clamp(23px, 2.24vw, 34px); }
.fig--flags { --fig-lift: clamp(8px, 0.77vw, 12px); }
.fig--globe { --fig-lift: clamp(5px, 0.47vw, 7px); }
@media (max-width: 899px) {
  .fig--guard { --fig-lift: min(31px, 7.2vw); }
  .fig--flags { --fig-lift: min(11px, 2.5vw); }
  .fig--globe { --fig-lift: min(7px, 1.5vw); }
}
@media (max-width: 899px) {
  .phero__dean { width: min(175px, 40vw); margin-top: 0.5rem; }
  .phero__stage { justify-items: center; text-align: center; }
  .phero__copy h1, .phero__what, .phero__does { margin-inline: auto; }
  .phero__acts { justify-content: center; }
}

/* The credits strip — the five words, above the fold, like a film poster's
   billing block. Each one is the claim's backing, and a way in. */
.fivestrip {
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(1.25rem, 3.5vw, 3.5rem);
  row-gap: 0.25rem;
  padding: clamp(0.875rem, 1.8vh, 1.25rem) clamp(1rem, 4vw, 3rem);
}
.fivestrip a {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  text-decoration: none;
  padding: 0.375rem 0;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.fivestrip a:hover, .fivestrip a:focus-visible { color: var(--violet-lift); }
.fivestrip i {
  color: var(--chalk-faint);
  font-style: normal;
  align-self: center;
}
@media (max-width: 599px) { .fivestrip i { display: none; } }

.phero__fict {
  position: absolute;
  top: calc(var(--navh, 72px) + 1rem);
  right: clamp(1rem, 4vw, 3rem);
  margin: 0;
}
@media (max-width: 899px) { .phero__fict { display: none; } }

/* "Coming soon" marker (Mark, 2026-08-19) — reuses .fict; must stay visible
   on mobile, unlike .phero__fict above. */
.phero__soon { margin: 0 0 1.2rem; }

/* --- Variant B: the billboard --------------------------------------------
   No film (Mark). The billboard is typographic: a giant hairline DEAN ghost
   drifting behind the headline, over two very quiet violet washes. */

.bghost,
.bwash {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* ⚠️ The concierge asset carries its own ink-colour box (the plate compositing
   fix) — decorative strokes and washes must stay OUT of his bottom-right
   corner or the box edge shows. Ghost sits high, washes lean left. */
.bghost {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
}
.bghost span {
  font-size: clamp(10rem, 26vw, 25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196, 178, 255, 0.13);
  white-space: nowrap;
}
@supports not (-webkit-text-stroke: 1px black) {
  .bghost span { color: rgba(196, 178, 255, 0.05); }
}
.bwash {
  background:
    radial-gradient(44% 56% at 22% 86%, var(--violet-wash), transparent 70%),
    radial-gradient(40% 52% at 12% 8%, rgba(139, 92, 246, 0.09), transparent 72%);
}
.phero--b .phero__copy h1 { max-width: none; }
.phero--b .phero__stage { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 899px) { .phero--b .phero__stage { grid-template-columns: 1fr; } }
/* This is the rule the product pages actually get — it out-specifies the base
   .phero__dean above, so the figures were capping at 150px. Up 25% (27 Aug). */
.phero--b .phero__dean { width: clamp(131px, 12.5vw, 188px); }
@media (max-width: 899px) { .phero--b .phero__dean { width: min(175px, 40vw); } }

/* --- The five, one screen at a time (variant A) --------------------------- */

.chap {
  border-top: 1px solid var(--hair);
  padding: clamp(5rem, 16vh, 10rem) 0;
  overflow-x: clip;   /* pre-reveal words slide in from off-column */
}
.chap__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .chap__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .chap--flip .chap__grid > .chap__lede { order: 2; }
  .chap--flip .chap__grid > .chap__facts { order: 1; }
}

.chap__num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--chalk-mute);
  display: block;
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.chap__word {
  font-size: clamp(3rem, 7.4vw, 7rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin: 0;
}
.chap__word i { font-style: normal; color: var(--violet); }

.chap__sent {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--chalk-dim);
  max-width: 26ch;
  text-wrap: balance;
}

.chap__facts { display: flex; flex-direction: column; padding-top: 0.5rem; }
.chap__facts li {
  list-style: none;
  border-top: 1px solid var(--hair);
  padding: clamp(0.875rem, 2vh, 1.25rem) 0;
  font-size: var(--t-body);
  color: var(--chalk-dim);
  max-width: 44ch;
}
.chap__facts li:last-child { border-bottom: 1px solid var(--hair); }
.chap__facts b { font-weight: 560; color: var(--chalk); }

.chap__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-mute);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.chap__go:hover, .chap__go:focus-visible { color: var(--violet-lift); }
.chap__go svg { width: 14px; height: 14px; }

/* --- The five as one wordwall (variant B) ------------------------------------- */

.wordwall { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.wordwall__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }

.wordwall ol { margin: 0; padding: 0; }
.wordwall li {
  list-style: none;
  display: grid;
  align-items: baseline;
  gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--hair);
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
}
@media (min-width: 900px) {
  .wordwall li { grid-template-columns: 5ch minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.wordwall li:last-child { border-bottom: 1px solid var(--hair); }

.wordwall__num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--chalk-mute);
}
.wordwall__word {
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.wordwall__word i { font-style: normal; color: var(--violet); }
.wordwall__sent { font-size: var(--t-body); color: var(--chalk-dim); max-width: 46ch; }
.wordwall__sent a { color: var(--chalk-mute); }
.wordwall__sent a:hover { color: var(--violet-lift); }

/* --- The price. Four hairline panels, said plainly (variant B). -----------
   Figures come from the 31 Jul 2026 pricing model — never invent them here. */

.prices { border-top: 1px solid var(--hair); padding: clamp(4rem, 12vh, 8rem) 0; }
.prices__kick { margin-bottom: 1rem; }
.prices__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); max-width: 30ch; }

/* One-pixel joints, not card gutters: the grid's background is the hairline. */
.prices__grid {
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
@media (min-width: 700px)  { .prices__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prices__grid { grid-template-columns: repeat(4, 1fr); } }

.tier {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.tier:hover { background: var(--ink-raise); }
.tier--pro { background: var(--ink-raise); box-shadow: inset 0 2px 0 var(--violet); }
.tier--pro:hover { background: var(--ink-raise-2); }

.tier__flag {
  margin: 0 0 0.875rem;
  font-family: var(--mono);
  font-size: var(--t-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-lift);
}
/* Panels without a flag keep the same first line, so names align. */
.tier > .tier__name:first-child { margin-top: calc(var(--t-nano) * 1.4 + 0.875rem); }

.tier__name {
  margin: 0;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 640;
  letter-spacing: -0.02em;
}
.tier__price {
  margin: 0.625rem 0 0;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tier__price span {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--chalk-mute);
}
.tier__from {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--chalk-mute);
  margin-right: 0.25rem;
}
.tier__for {
  margin: 0.875rem 0 1.25rem;
  font-size: var(--t-small);
  color: var(--chalk-dim);
  max-width: 30ch;
}
.tier__list { margin: auto 0 0; padding: 0; }
.tier__list li {
  list-style: none;
  border-top: 1px solid var(--hair);
  padding: 0.75rem 0;
  font-size: var(--t-small);
  color: var(--chalk-dim);
}

/* The guarantees, as a hairline ledger — same voice as the word-wall. */
.prices__rules {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 700px)  { .prices__rules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prices__rules { grid-template-columns: repeat(3, 1fr); } }
.prices__rules li {
  list-style: none;
  border-top: 1px solid var(--hair);
  padding: 0.875rem 0;
  font-size: var(--t-small);
  color: var(--chalk-dim);
}
.prices__rules b { font-weight: 560; color: var(--chalk); }

/* --- The horizon, one quiet line ------------------------------------------ */

.horiz {
  border-top: 1px solid var(--hair);
  padding: clamp(3.5rem, 10vh, 6rem) 0;
  text-align: center;
}
.horiz p {
  margin: 0.75rem auto 0;
  font-size: var(--t-body);
  color: var(--chalk-dim);
  max-width: 44ch;
  text-wrap: balance;
}

/* ==========================================================================
   Motion. Ashley, 31 July: "as much motion, beauty and wow factor as
   possible" — inside the contract: transform / opacity / filter only,
   the two house easings, everything meaningful without any of it.
   ========================================================================== */

/* The headline arrives one word at a time — pure CSS, so it plays with
   JavaScript blocked and simply *is there* under reduced motion. */
.hw { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hw {
    opacity: 0;
    transform: translateY(0.55em);
    filter: blur(6px);
    animation: hw-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hw:nth-of-type(1) { animation-delay: 0.08s; }
  em .hw:nth-of-type(1) { animation-delay: 0.26s; }
  em .hw:nth-of-type(2) { animation-delay: 0.4s; }
}
@keyframes hw-rise {
  to { opacity: 1; transform: none; filter: none; }
}

/* The mascot hovers. Entrance is data-reveal's; once in, a slow bob. */
@media (prefers-reduced-motion: no-preference) {
  .phero__dean.is-in { animation: dean-float 7s ease-in-out 1.4s infinite; }
  .phero .lockup__mark { animation: mark-breathe 6s ease-in-out infinite; }
}
@keyframes dean-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes mark-breathe {
  0%, 100% { filter: drop-shadow(0 6px 26px rgba(90, 70, 220, 0.28)); }
  50%      { filter: drop-shadow(0 8px 34px rgba(90, 70, 220, 0.46)); }
}

/* The credits strip cascades in, then quietly takes roll-call: each word
   lifts to violet for a moment, one after another, forever. */
@media (prefers-reduced-motion: no-preference) {
  .fivestrip a {
    opacity: 0;
    transform: translateY(0.75rem);
    animation:
      strip-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
      strip-roll 12s ease-in-out infinite;
  }
  .fivestrip a:nth-of-type(1) { animation-delay: 0.7s, 2.4s; }
  .fivestrip a:nth-of-type(2) { animation-delay: 0.8s, 4.4s; }
  .fivestrip a:nth-of-type(3) { animation-delay: 0.9s, 6.4s; }
  .fivestrip a:nth-of-type(4) { animation-delay: 1s, 8.4s; }
  .fivestrip a:nth-of-type(5) { animation-delay: 1.1s, 10.4s; }
}
@keyframes strip-in {
  to { opacity: 1; transform: none; }
}
@keyframes strip-roll {
  0%, 100% { color: var(--chalk-mute); }
  4%       { color: var(--violet-lift); }
  9%       { color: var(--chalk-mute); }
}

/* A hero: a quiet violet pool grounds the concierge. */
.phero--a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 44% at 72% 88%, var(--violet-wash), transparent 70%);
}

/* B ghost drifts, slowly, forever. */
@media (prefers-reduced-motion: no-preference) {
  .bghost span { animation: ghost-drift 70s ease-in-out infinite alternate; }
}
@keyframes ghost-drift {
  from { transform: translate(-3.5%, -6%); }
  to   { transform: translate(3.5%, -6%); }
}

/* Chapter words enter from their own side; the violet full stop stamps in
   after the word lands. */
@media (prefers-reduced-motion: no-preference) {
  .chap__word[data-reveal]:not(.is-in) { transform: translateX(-3rem); filter: blur(6px); }
  .chap--flip .chap__word[data-reveal]:not(.is-in) { transform: translateX(3rem); }
  .chap__word i { display: inline-block; }
  .chap__word[data-reveal]:not(.is-in) i { opacity: 0; }
  .chap__word.is-in i { animation: period-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; }
}
@keyframes period-pop {
  from { opacity: 0; transform: scale(0.2) translateY(-0.1em); }
  to   { opacity: 1; transform: none; }
}

/* Facts answer the pointer. */
.chap__facts li {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.chap__facts li:hover { transform: translateX(6px); border-top-color: var(--hair-strong); }
.chap__go svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.chap__go:hover svg { transform: translateX(3px); }

/* The word-wall answers too: the row washes violet, the word steps forward. */
.wordwall li { position: relative; }
.wordwall li::before {
  content: '';
  position: absolute;
  inset: 0 -1.25rem;
  border-radius: 12px;
  background: var(--violet-wash);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.wordwall li:hover::before { opacity: 0.55; }
.wordwall__word {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.wordwall li:hover .wordwall__word { transform: translateX(10px); }
.wordwall__word i { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wordwall li.is-in .wordwall__word i { animation: period-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both; }
  .wordwall li[data-reveal]:not(.is-in) .wordwall__word i { opacity: 0; }
}