/* ═══════════════════════════════════════════════════════════════════
   Thank-you pages: /embody-u-course-thank-you and /lilith-thank-you.
   Loaded after shared/ephemeris.css by both.

   Rebuilt to mirror her live Squarespace pages, at her request, after a
   first version invented its own card layout. The live shape is:

     1. A dark full-bleed hero: "You're In!", the program's own
        logotype, the welcome copy in white, a long thin arrow down.
        Embody U runs its workbook photo behind the whole band; Lilith
        runs a black-moon eclipse over black, flanked by her huntress
        collages and silver stars.
     2. A light band: the product photo in a white frame on the left,
        the numbered steps on the right, each step opened by a solid
        chip reading STEP n. Embody's chips are indigo, Lilith's
        oxblood, exactly as live.

   Only the chrome (topbar, rail, footer, fonts) is the new site's,
   because these pages live on the new site.
   ═══════════════════════════════════════════════════════════════════ */

body {
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:background .35s, color .35s;
}

/* ── 1 · The dark hero ────────────────────────────────────────── */
.ty-hero {
  position:relative; max-width:none; overflow:hidden;
  text-align:center; color:#f5f1e8;
  padding:clamp(3.4rem,7vw,5.6rem) var(--gutter) clamp(2.6rem,5vw,4rem);
}
.ty-hero > * { position:relative; z-index:3; }

/* Embody U: the shadowed workbook photo IS the band, exactly as live.
   A leftward gradient keeps the type on its darkest region. */
.ty-hero--embody { background:#181008; }
.ty-hero--embody::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:url('/embody-u-course-thank-you/images/hero-dark.webp') center 40% / cover no-repeat;
  opacity:.9;
}
.ty-hero--embody::after {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(16,10,5,.78) 0%, rgba(16,10,5,.45) 45%, rgba(16,10,5,.12) 100%);
}

/* Lilith: solid black, as live. The eclipse, flanks and stars are
   real <img>s so they can be placed and mirrored individually. */
.ty-hero--lilith { background:#050505; }

/* the black moon, half-risen behind the kicker */
.ty-eclipse {
  position:absolute; left:50%; top:0; z-index:1;
  width:clamp(15rem,26vw,21rem); transform:translate(-50%,-46%);
  pointer-events:none;
}

/* huntress collages hugging the edges, a silver star tucked behind
   each. Decoration only, and gone below 1100px where they would sit
   on the copy. */
.ty-flank, .ty-flankstar { position:absolute; z-index:1; pointer-events:none; }
.ty-flank--l     { left:0;  bottom:0; width:clamp(14rem,23vw,19rem); }
.ty-flank--r     { right:0; bottom:0; width:clamp(14rem,23vw,19rem); }
.ty-flankstar--l { left:-2%;  top:14%; width:clamp(8rem,13vw,11rem); opacity:.9; }
.ty-flankstar--r { right:-2%; top:14%; width:clamp(8rem,13vw,11rem); opacity:.9; }
@media (max-width:1100px) { .ty-flank, .ty-flankstar { display:none; } }

.ty-kicker {
  margin:0; font-family:var(--display); font-kerning:none;
  font-size:clamp(1.25rem,2.2vw,1.6rem); color:#fff;
}
.ty-hero--lilith .ty-kicker { margin-top:clamp(2.2rem,5vw,3.6rem); }

.ty-logotype {
  display:block; margin:clamp(1.2rem,2.6vw,1.8rem) auto;
  width:min(30rem,78%); height:auto;
}
.ty-hero--lilith .ty-logotype { width:min(15rem,60%); }

.ty-hero p {
  max-width:33rem; margin:0 auto 1rem;
  font-size:var(--step-0); line-height:1.6; color:#efe9dd;
}
.ty-hero p a { color:#fff; text-decoration:underline; text-underline-offset:.18em; }
.ty-hero p a:hover { color:var(--lilac); }

/* the long thin arrow down, drawn not typed */
.ty-arrow { display:block; margin:clamp(1.4rem,3vw,2rem) auto 0; width:12px; height:58px; }
.ty-arrow path { fill:none; stroke:#efe9dd; stroke-width:1.4; }

/* ── 2 · Photo left, steps right ──────────────────────────────── */
.ty-body { padding-block:clamp(3rem,6.5vw,5rem); }

.ty-grid {
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(2rem,4.5vw,3.6rem); align-items:start;
  max-width:var(--shell); margin-inline:auto; text-align:left;
}

/* the white frame around the photo, like a print laid on the table */
.ty-photo {
  margin:0; background:#fff; padding:clamp(.8rem,1.6vw,1.1rem);
  box-shadow:0 18px 44px -18px rgba(40,32,30,.35);
}
.ty-photo img { display:block; width:100%; height:auto; }

.ty-step + .ty-step { margin-top:clamp(1.8rem,3.6vw,2.6rem); }

/* the STEP chip. Indigo for Embody U, oxblood for Lilith, per page. */
.ty-chip {
  display:inline-block; padding:.68rem 1.5rem;
  background:var(--ty-chip,#312d64); color:#fff;
  font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.3em; text-transform:uppercase;
}
.ty-page--lilith .ty-step { --ty-chip:#4a2129; }

.ty-step h2 {
  margin:.9rem 0 .45rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.12; font-kerning:none;
}
.ty-step p { margin:0 0 .85rem; max-width:34rem; }
.ty-step p:last-child { margin-bottom:0; }
.ty-step a { color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }
.ty-step a:hover { color:var(--violet); }

@media (max-width:820px) {
  .ty-grid { grid-template-columns:1fr; }
  .ty-photo { max-width:26rem; margin-inline:auto; }
}

/* Nocturnal: the hero is already night. The photo keeps its white
   frame, because a print is an object with its own paper, the same
   ruling as the plaque on the home page. */
html[data-sect="nocturnal"] .ty-photo { box-shadow:0 18px 44px -18px rgba(0,0,0,.7); }

/* ── Responsive chrome, same block every page carries ─────────── */
@media (max-width:900px) {
  .foot-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .seal { width:150px; height:150px; right:-1rem; bottom:-1rem; }
  .foot-inner { grid-template-columns:1fr; }
}