/* [HWR] heywillray.com homepage, Blue Night. Page stylesheet.
   Loads after hwr-v3.css (tokens, page base and shell live there, scoped to
   .bn) and after assets/scrollcraft/scrollcraft.css. Contract: vault
   02-Brands/HWR/site-scrollcraft/art-direction.md. This file themes the
   engine and styles the homepage sections. Never restyle .sc-stage or
   [data-sc-*] mechanics. */

/* ---------------------------------------------------------- engine theme */
html.bn {
  --sc-canvas: var(--room);
  --sc-surface: var(--room-3);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--dim);
  --sc-accent: var(--screen);
  --sc-accent-ink: var(--room);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-body);
  --sc-maxw: 1200px;
}

/* Anchors from the old homepage (#playbook, #kit, #letter sit on the offer). */
#story, #playbook { scroll-margin-top: var(--head-h); }

/* ------------------------------------------------------- no-JS gate (B12)
   The engine hides cues, flow reveals and stagger children with no JS check.
   A one-line head script adds .sc-js. Without it, everything shows. */
html:not(.sc-js) [data-sc-cue],
html:not(.sc-js) [data-sc-in],
html:not(.sc-js) [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
html:not(.sc-js) [data-sc-reveal] { clip-path: none !important; }

/* Reduced motion: every line visible, nothing pinned (page JS flattens acts). */
@media (prefers-reduced-motion: reduce) {
  [data-sc-cue], .sc-split__i { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- act 1: the hero */
/* Normal section. Copy left, photo right. M1 loops behind on desktop only.
   Copy sits high so the field M1 draws (74% to 84% down) stays under it. */
.hero2 { position: relative; background: var(--room); overflow: clip; min-height: 100svh; }
.hero2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero2__in { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: calc(var(--head-h) + clamp(var(--s-4), 8vh, 96px)) var(--sc-gutter) var(--s-8); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-6); align-items: start; }
.hero2__copy .btn { margin-top: var(--s-4); }
.hero2__will { justify-self: end; width: min(100%, 500px); -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); }
.hero2__will img { width: 100%; height: auto; }

.hero__h1 {
  font-size: var(--fs-display); font-weight: var(--wght-display);
  line-height: var(--lh-display); letter-spacing: var(--track-display);
  font-variation-settings: "wdth" var(--wdth-display);
  max-width: 9ch;
}
.hero__sub { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; max-width: 30ch; }
.hero__lead { margin-top: var(--s-2); font-size: var(--fs-body); max-width: 40ch; color: var(--ink); }

@media (max-width: 860px) {
  .hero2 { min-height: 0; }
  /* Phones get the plain room, no M1. */
  .hero2__bg { display: none; }
  .hero2__in { grid-template-columns: 1fr; gap: var(--s-4); padding: calc(var(--head-h) + var(--s-4)) var(--gutter) 0; }
  .hero2__copy .btn { margin-top: var(--s-3); }
  .hero2__will { width: min(82vw, 340px); }
  .hero__h1 { max-width: 8ch; }
  .hero__sub { margin-top: var(--s-2); }
}

/* ------------------------------------------------------------ the offer */
.offer { background: var(--room-2); padding-block: var(--s-12); }
.offer__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-gutter); }
.offer .h2 { max-width: 16ch; }
.offer__lead { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 40ch; }
.offer .btn { margin-top: var(--s-4); }
.offer__fine { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--dim); }

/* ------------------------------------------------------- their words */
/* Normal section, lines rise in once. */
.act-stop--flow { background: var(--room-3); padding-block: var(--section-y); }
.stop__in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-gutter); display: grid; grid-template-columns: 1fr minmax(0, 680px); }
.stop__body { grid-column: 2; }
.stop__line { margin-top: var(--s-3); font: 600 var(--fs-lead)/var(--lh-lead) var(--font-body); max-width: 40ch; }
.act-stop--flow .h2 { margin-bottom: var(--s-2); }
.stop__cap { margin-top: var(--s-5); font-size: var(--fs-small); color: var(--dim); }
.stop__last { margin-top: var(--s-2); font-size: var(--fs-body); }
@media (max-width: 860px) {
  .stop__in { grid-template-columns: 1fr; }
  .stop__body { grid-column: 1; }
  .stop__line { margin-top: var(--s-2); font-size: var(--fs-body); line-height: 1.5; }
}

/* ----------------------------------------------------- the send (pinned) */
.act-send { background: var(--room); }
.send { background: var(--room); }
.send__grid {
  height: 100%; max-width: 1280px; margin: 0 auto;
  padding: calc(var(--head-h) + var(--s-2)) var(--sc-gutter) var(--s-4);
  display: grid; grid-template-columns: 1fr minmax(320px, 380px) 1fr; gap: clamp(var(--s-4), 4vw, var(--s-8));
  align-items: center;
}
.send__intro .h2 { max-width: 12ch; }
.send__intro p { margin-top: var(--s-2); max-width: 30ch; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.send__after { display: grid; gap: var(--s-2); }
.send__after p { max-width: 32ch; }
.send__after .send__line { margin-top: var(--s-2); font: 700 var(--fs-h3)/1.15 var(--font-display); letter-spacing: var(--track-heading); max-width: 16ch; font-variation-settings: "wdth" 96; }

.send__solo { position: absolute; left: 50%; top: 50%; font-size: 2rem; translate: -50% -50%; opacity: 0; pointer-events: none; }

/* The phone. DOM + CSS, no device chrome. */
.phone {
  position: relative; width: 100%; max-width: var(--phone-max);
  height: min(600px, calc(100svh - var(--head-h) - 96px));
  background: var(--room-3); border: 1px solid var(--line); border-radius: var(--r-phone);
  display: flex; flex-direction: column; overflow: hidden;
}
.phone__head { padding: var(--s-4) var(--s-3) var(--s-2); text-align: center; font-size: var(--fs-micro); color: var(--dim); border-bottom: 1px solid var(--line); }
.phone__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-3) var(--s-2) var(--s-1); min-height: 0; }
.phone__sent { position: relative; align-self: flex-end; max-width: 86%; }
.phone__spill { position: absolute; inset: -24px; border-radius: 40px; background: radial-gradient(closest-side, var(--screen), transparent); opacity: 0.18; filter: blur(40px); pointer-events: none; }
.bubble { position: relative; margin: 0; padding: 12px 16px; background: var(--screen-deep); color: var(--on-bubble); font: 400 var(--fs-message)/1.45 var(--font-body); border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble-tail) var(--r-bubble); transform-origin: 100% 100%; }
.phone__delivered { margin-top: 6px; text-align: right; font-size: var(--fs-micro); color: var(--dim); }
.phone__compose { display: flex; align-items: flex-end; gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-3); }
.phone__field { flex: 1; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 22px; font: 400 var(--fs-message)/1.45 var(--font-body); color: var(--ink); }
.phone__field .caret { margin-left: 1px; }
.phone__send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.phone__send svg { width: 26px; height: 26px; overflow: visible; }
.phone__send .arrow-lit { opacity: 0; }

/* Static state (no JS, reduced motion): the message is sent, the field empty. */
html:not(.sc-js) .phone__typed { display: none; }

@media (max-width: 860px) {
  .send__grid { grid-template-columns: 1fr; gap: var(--s-3); align-content: start; padding-top: calc(var(--head-h) + var(--s-2)); }
  .send__phone { order: 1; justify-self: center; width: 100%; max-width: var(--phone-max); }
  .send__intro { order: 2; }
  .send__after { order: 3; }
  .phone { height: auto; min-height: 400px; }
  .send__intro .h2 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem); max-width: none; }
  .send__intro p { font-size: var(--fs-body); }
  /* Pinned on a phone: intro and after share one slot under the phone. */
  .send.is-live .send__intro, .send.is-live .send__after { grid-area: slot; }
  .send.is-live .send__grid { grid-template-areas: "phone" "slot"; }
  .send.is-live .send__phone { grid-area: phone; }
  .send.is-live .phone { height: min(440px, 54svh); min-height: 0; }
  .send__after .send__line { font-size: 1.375rem; }
}

/* ------------------------------------------------------------ message two */
.next { background: var(--room); padding-block: var(--s-4) var(--s-12); }
.next__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-gutter); }
.next__line { font: 700 var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--track-heading); max-width: 24ch; font-variation-settings: "wdth" 96; }
.next .btn { margin-top: var(--s-3); }

/* ------------------------------------------------- not my words (quotes) */
/* Text in columns on desktop, a swipe row on phones. No cards. */
.proof2 { background: var(--room-2); padding-block: var(--section-y); }
.proof2__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-gutter); }
.proof2__rail { margin-top: var(--s-6); columns: 3 17rem; column-gap: var(--s-6); }
.proof2 .quote { margin: 0 0 var(--s-6); padding: 0; background: none; border-radius: 0; break-inside: avoid; }
.quote blockquote { margin: 0; }
.quote p { font: 600 var(--fs-lead)/var(--lh-lead) var(--font-body); }
.quote figcaption { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--dim); }
html.bn .proof2__rail:focus-visible { outline-offset: 8px; }
.proof2__btn { margin-top: var(--s-2); }
@media (max-width: 860px) {
  .proof2__rail { columns: auto; display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .proof2__rail::-webkit-scrollbar { display: none; }
  .proof2 .quote { flex: none; width: 76vw; margin: 0; scroll-snap-align: start; }
  .quote p { font-size: var(--fs-body); line-height: 1.55; }
}

/* ------------------------------------------------------------ the story */
.story2 { background: var(--room-3); padding-block: var(--s-12); }
.story2__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sc-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.story2__chapters { display: grid; gap: var(--s-5); }
.chapter h2 { font-size: var(--fs-h2); font-weight: 700; max-width: 16ch; }
.chapter h3 { font-size: var(--fs-h3); font-weight: 650; }
.chapter p { margin-top: var(--s-2); max-width: var(--measure-body); }
.chapter h2 + p { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.story2 .life { padding: 0; display: grid; gap: var(--s-3); }
.life p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 52ch; }

/* The chapter wipe: clip-path left to right, --dur-4, once. Room is left on
   both axes so descenders and the H2 overshoot are never cut. */
@media (prefers-reduced-motion: no-preference) {
  .sc-js [data-wipe] > * { clip-path: inset(-20% 100% -20% -2%); }
  .sc-js [data-wipe].is-in > * { clip-path: inset(-20% -2% -20% -2%); transition: clip-path var(--dur-4) var(--ease-out); }
  .sc-js [data-wipe].is-in > * + * { transition-delay: 90ms; }
}

/* ------------------------------------------------------------- the close */
.act-close { background: var(--room); }
.close { max-width: 1200px; margin: 0 auto; padding: var(--s-12) var(--sc-gutter) 30svh; }
.close__in { max-width: 40rem; }
.close .h2 { max-width: 14ch; }
.close .btn { margin-top: var(--s-5); }
.close__fine { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--dim); }
.close__more { margin-top: var(--s-5); max-width: 44ch; }
.close__sign { margin-top: var(--s-5); font-size: var(--fs-lead); font-weight: 600; }

/* ----------------------------------------------------------- phone sizes */
@media (max-width: 860px) {
  .offer, .story2 { padding-block: var(--s-10); }
  .offer .btn, .next .btn, .proof2__btn, .close .btn { width: 100%; }
  .story2__in { grid-template-columns: 1fr; gap: var(--s-6); }
  .next__line { font-size: 1.375rem; }
}

/* ------------------------------------------- flat acts: no JS, reduced motion
   Without the engine a stage is a plain block, so give it a body. */
html:not(.sc-js) [data-sc-stage], .is-flat > [data-sc-stage] { position: relative; min-height: 100svh; overflow: clip; }
html:not(.sc-js) .send, .act-send.is-flat .send { min-height: 0; }
html:not(.sc-js) .send__grid, .act-send.is-flat .send__grid { height: auto; padding-block: var(--s-12); }
html:not(.sc-js) .send__solo, .act-send.is-flat .send__solo { display: none; }
html:not(.sc-js) .phone__compose .caret { display: none; }

/* --------------------------------------------------------- /newsletter
   The one other Blue Night page in Phase 4. Same room, one form. */
.newsletter { background: var(--room); min-height: 70svh; }
.newsletter__in { max-width: 1200px; margin: 0 auto; padding: calc(var(--head-h) + var(--s-12)) var(--sc-gutter) var(--s-12); }
.newsletter__h1 { font-size: var(--fs-h2); font-weight: 700; max-width: 16ch; }
.newsletter__lead { margin-top: var(--s-3); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 42ch; }
.newsletter .news { max-width: 40rem; margin-top: var(--s-5); }
@media (max-width: 860px) { .newsletter__in { padding-top: calc(var(--head-h) + var(--s-6)); } }