/* ShopDot Pet — /live + /live-thanks
   "ShopDot Live: The Fall Release", September 29–30 2026
   Page-specific layer. Loads AFTER site.css:
     vendor/shopdot-ds/foundation/colors_and_type.css → site.css → live.css

   Every class is `.lv-` prefixed, same defensive convention as the `.bl-` blog
   layer, so nothing here can collide with site.css chrome.

   ─── The visual brief this implements ──────────────────────────────────────
   From the Notion brief §7 "Visual direction". Reference pages are Apple event
   pages, Canva Create and Adobe MAX. The rules that shape everything below:

     · Single column, centered, full-bleed sections. One idea per screen.
     · Generous vertical space between sections — "more than feels comfortable."
     · One typeface family. Oversized headlines with tight leading, SMALL body.
     · "Size and weight create hierarchy — not color, boxes, or rules."
       → so: no cards, no borders around content, no dividers, no icon grids,
         no badges. If something needs emphasis it gets bigger, not boxed.
     · A deep/dark hero signals *event* rather than *website*.
     · Motion: a subtle fade on scroll, nothing more.

   ─── Two traps this file exists to avoid ───────────────────────────────────
   1. DARK BANDS AND INHERITED COLOUR. The DS foundation sets `color` on the
      `h1` and `p` ELEMENT selectors. An element selector beats a colour
      inherited from a section wrapper, so a bare <h1> or <p> inside a dark band
      renders near-black on near-black. (h2–h5 set no colour, so they inherit
      fine — which makes the bug look random.) That shipped on this page once.
      `.lv-band--dark` and `.lv-hero` below therefore name h1/h2/h3/p
      explicitly. Never rely on inheritance for a dark band.
   2. GRID AUTO-PLACEMENT. Naming the column of only *some* grid items leaves
      the rest to auto-placement, which silently pushes them into the wrong
      cells and spawns implicit rows. Place every grid item explicitly.
   ────────────────────────────────────────────────────────────────────────── */

.page-live {
  /* Page-local type scale. Larger than the standard section scale on purpose —
     the brief asks for oversized display type. Derived from DS size tokens; no
     new brand values are introduced here. */
  --lv-display:     clamp(40px, 6.6vw, 86px);   /* hero h1 */
  --lv-declarative: clamp(27px, 4vw,   54px);   /* the three "what changes" lines */
  --lv-headline:    clamp(27px, 3.3vw, 42px);   /* section h2 */
  --lv-date:        clamp(18px, 1.9vw, 25px);   /* date-as-headline element */
  --lv-lead:        clamp(18px, 1.3vw, 21px);
  --lv-body:        clamp(16px, 1.1vw, 18px);

  /* "More than feels comfortable." */
  --lv-band-y:      clamp(104px, 12vw, 190px);
  --lv-shell-x:     24px;
}

/* ── Reduced-chrome nav ───────────────────────────────────────────────────
   Logo only. `.nav-inner` is a 3-col grid, so the lone logo lands in column 1
   with no override needed. Documented exception to the canonical 6-link nav. */
.lv-nav .nav-inner { grid-template-columns: auto; }

/* ── Shared shell + bands ─────────────────────────────────────────────────── */
.lv-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--lv-shell-x);
}
.lv-shell--narrow { max-width: 760px; }
.lv-shell--form   { max-width: 600px; }

/* ── Colour inheritance: read this before touching any colour below ───────
   Trap #1 from the header, solved once for the whole page.

   Naming the elements defensively (`.lv-band--dark h1, .lv-band--dark p {…}`)
   works, but lands at (0,2,1) and then silently outranks every single-class
   component rule — `.lv-date` at (0,1,0) lost its peach to `.lv-hero p` that
   way. Specificity wars are how the two selectors start cancelling each other.

   Instead: `:where()` contributes ZERO specificity, so the rule below un-sets
   the DS element colour at (0,1,0) and restores ordinary inheritance. Every
   component rule underneath is also (0,1,0) and simply wins on source order.
   Set the tone on the CONTAINER; let the copy inherit it.
   KEEP THIS RULE ABOVE THE COMPONENT RULES. */
.page-live :where(h1, h2, h3, h4, p) { color: inherit; }

.lv-band {
  padding-block: var(--lv-band-y);
  background: var(--sd-bg);
  color: var(--sd-fg-muted);
}
.lv-band--cream { background: var(--sd-bg-cream); }
.lv-band--dark  { background: var(--sd-neutral-950); color: var(--sd-fg-on-dark-muted); }

/* Body copy inside a band. Small, per the brief — the headlines do the work.
   `:where(p)` for the same reason as the colour rule above: a bare `.lv-band p`
   lands at (0,1,1) and would override the font-size of EVERY single-class
   component inside a band — `.lv-date--final` would silently drop from 25px to
   18px. Keep the element part inside :where(). */
.lv-band :where(p)     { font-size: var(--lv-body); line-height: 1.7; text-wrap: pretty; }
.lv-band :where(p + p) { margin-top: 1.15em; }

.lv-headline {
  margin: 0 0 32px;
  font-size: var(--lv-headline);
  font-weight: var(--sd-fw-bold);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--sd-neutral-950);
  text-wrap: balance;
}
.lv-headline--center { text-align: center; }

/* ── 1. Hero ──────────────────────────────────────────────────────────────
   Type only — no imagery. The brief bans product shots, and the reference
   pages all carry the hero on type alone. */
.lv-hero {
  position: relative;
  padding: clamp(148px, 17vw, 216px) 0 clamp(104px, 12vw, 160px);
  background: var(--sd-neutral-950);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--sd-fg-on-dark-muted);   /* copy inherits; see the note above */
}

/* Two low-opacity warm washes for depth, well under the site's ambient ceiling. */
.lv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 68% at 18% 0%,   rgba(225,84,57,0.20) 0%, rgba(225,84,57,0) 66%),
    radial-gradient(54% 62% at 88% 100%, rgba(164,77,42,0.22) 0%, rgba(164,77,42,0) 70%);
}

.lv-eyebrow {
  margin: 0 0 22px;
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-peach);
}
.lv-hero-title {
  color: var(--sd-fg-on-dark);
  margin: 0 0 26px;
  font-size: var(--lv-display);
  font-weight: var(--sd-fw-bold);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Date treated as a headline element, per the brief — not as metadata. */
.lv-date {
  margin: 0 0 30px;
  font-size: var(--lv-date);
  font-weight: var(--sd-fw-semibold);
  letter-spacing: 0.005em;
  color: var(--sd-peach);
  font-variant-numeric: tabular-nums;
}
.lv-date span { padding-inline: 6px; opacity: 0.6; }

.lv-hero-promise {
  margin: 0 auto 40px;
  max-width: 34ch;
  font-size: var(--lv-lead);
  line-height: 1.55;
  color: var(--sd-fg-on-dark-muted);
  text-wrap: pretty;
}

/* ── 2. The premise ──────────────────────────────────────────────────────── */
.lv-premise :where(p) { font-size: var(--lv-lead); line-height: 1.72; }
/* The line the whole page turns on — weight and colour, no box. */
.lv-premise-turn {
  margin-top: 1.5em;
  font-weight: var(--sd-fw-medium);
  color: var(--sd-neutral-950);
}

/* ── 3. What changes ──────────────────────────────────────────────────────
   Three declaratives. Not a <ul>, not cards — the brief bans both. */
.lv-changes { text-align: center; }
.lv-declarative {
  color: var(--sd-fg-on-dark);
  margin: 0 auto;
  max-width: 20ch;
  font-size: var(--lv-declarative);
  font-weight: var(--sd-fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Space between the declaratives IS the hierarchy — nothing separates them. */
.lv-changes .lv-declarative + .lv-declarative { margin-top: clamp(40px, 5vw, 76px); }
.lv-changes .lv-changes-meta {
  margin-top: clamp(56px, 7vw, 100px);
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sd-fg-on-dark-subtle);
}

/* ── 5. The two days ─────────────────────────────────────────────────────── */
.lv-day + .lv-day { margin-top: clamp(44px, 5vw, 72px); }
.lv-day-date {
  margin: 0 0 8px;
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-primary-text);
}
.lv-day-title {
  margin: 0 0 10px;
  font-size: var(--sd-text-2xl);
  font-weight: var(--sd-fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sd-neutral-950);
}
.lv-days .lv-days-note {
  margin-top: clamp(52px, 6vw, 84px);
  font-weight: var(--sd-fw-medium);
  color: var(--sd-neutral-950);
}

/* ── 6. Who you'll hear from ─────────────────────────────────────────────
   Photos, names, titles. Nothing more — no bios, no cards, no borders. */
.lv-speaker-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 52px);
  max-width: 840px;
  margin-inline: auto;
}
.lv-speaker { text-align: center; }
.lv-speaker-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sd-radius-xl);
  margin-bottom: 18px;
}
/* Pending slot — reads as "not yet supplied", never as a broken image.
   Remove with TODO(event) #4. */
.lv-speaker-photo--pending {
  position: relative;
  background:
    repeating-linear-gradient(45deg,
      rgba(164,77,42,0.05) 0 10px, rgba(164,77,42,0.015) 10px 20px),
    var(--sd-clay-100);
}
.lv-speaker-photo--pending::after {
  content: "Photo to come";
  position: absolute;
  inset: auto 0 50%;
  transform: translateY(50%);
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-medium);
  letter-spacing: 0.04em;
  color: var(--sd-clay);
  opacity: 0.75;
}
.lv-speakers .lv-speaker-name {
  margin: 0 0 2px;
  font-size: var(--sd-text-md);
  font-weight: var(--sd-fw-semibold);
  color: var(--sd-neutral-950);
}
.lv-speakers .lv-speaker-title {
  margin: 0;
  font-size: var(--sd-text-sm);
  color: var(--sd-fg-muted);
}

/* ── 7. Registration form ────────────────────────────────────────────────── */
.lv-register { text-align: center; }
.lv-register .lv-register-sub {
  margin: -14px 0 40px;
  font-size: var(--lv-body);
  color: var(--sd-fg-muted);
}
.lv-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}
.lv-field--wide { grid-column: 1 / -1; }
.lv-field label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-medium);
  color: var(--sd-neutral-950);
}
.lv-field input,
.lv-field select {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: var(--sd-text-base);
  color: var(--sd-neutral-950);
  background: var(--sd-bg);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-sm);
  transition: border-color var(--sd-dur-base) var(--sd-ease),
              box-shadow   var(--sd-dur-base) var(--sd-ease);
}
.lv-field select { appearance: none; background-image: none; cursor: pointer; }
.lv-field input:hover,
.lv-field select:hover { border-color: var(--sd-neutral-300); }
.lv-field input:focus-visible,
.lv-field select:focus-visible {
  outline: none;
  border-color: var(--sd-primary);
  box-shadow: 0 0 0 3px rgba(225,84,57,0.16);
}
.lv-form .lv-form-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--sd-text-sm);
  line-height: 1.5;
  color: var(--sd-primary-text);
}
.lv-form .btn { grid-column: 1 / -1; justify-self: stretch; margin-top: 6px; }

/* ── 8. Closing CTA ──────────────────────────────────────────────────────── */
.lv-final {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.lv-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 92% at 50% 0%, rgba(225,84,57,0.20) 0%, rgba(225,84,57,0) 72%);
}
.lv-final .lv-date--final { margin-bottom: 32px; }

/* ── Sticky CTA ──────────────────────────────────────────────────────────
   One button, identical wording, per the brief. Hidden while the form is on
   screen so it never competes with the thing it points at. */
.lv-sticky {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.9);
  border-top: 1px solid var(--sd-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--sd-dur-slow) var(--sd-ease-out),
              transform var(--sd-dur-slow) var(--sd-ease-out);
}
.lv-sticky.is-visible { opacity: 1; transform: none; }
.lv-sticky-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lv-sticky .lv-sticky-meta {
  margin: 0;
  font-size: var(--sd-text-sm);
  font-weight: var(--sd-fw-semibold);
  color: var(--sd-neutral-950);
  font-variant-numeric: tabular-nums;
}

/* ── Scroll reveal — "a subtle fade on scroll, nothing more" ─────────────── */
.lv-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--sd-dur-reveal) var(--sd-ease-out),
              transform var(--sd-dur-reveal) var(--sd-ease-out);
}
.lv-reveal.is-in { opacity: 1; transform: none; }

/* ── Trimmed footer ──────────────────────────────────────────────────────
   Documented exception to the canonical 4-column footer: the Explore/Company
   columns are exits and the Kit newsletter form would be a second, competing
   email ask on a registration page. `.footer-bottom` is reused verbatim from
   site.css so the legal line stays identical to every other page. */
.lv-foot {
  background: var(--sd-bg);
  border-top: 1px solid var(--sd-border);
  padding: 40px 0 0;
}
.lv-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 32px;
}
.lv-foot-logo { height: 40px; width: auto; }
.lv-foot-socials { margin-top: 0; }
/* The sticky bar overlaps the page bottom — keep the legal line clear of it. */
.lv-foot .footer-bottom { padding-bottom: 84px; }

/* ── Interactive states ──────────────────────────────────────────────────── */
.lv-hero .btn:focus-visible,
.lv-final .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lv-foot a:focus-visible,
.lv-nav a:focus-visible,
.lv-sticky a:focus-visible,
.lv-hold .btn:focus-visible,
.lv-register .btn:focus-visible {
  outline: 2px solid var(--sd-primary);
  outline-offset: 3px;
  border-radius: var(--sd-radius-sm);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lv-speaker-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
  /* Odd one out centres itself rather than hugging the left. */
  .lv-speaker:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}

@media (max-width: 560px) {
  .lv-hero-promise { max-width: none; }
  .lv-declarative  { max-width: none; }
  .lv-hero .btn, .lv-final .btn { width: 100%; }
  .lv-form { grid-template-columns: minmax(0, 1fr); }
  .lv-sticky-inner { gap: 12px; }
  .lv-sticky .lv-sticky-meta { display: none; }   /* button keeps the full bar */
  .lv-sticky .btn { width: 100%; }
  .lv-foot-inner { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lv-reveal { opacity: 1; transform: none; transition: none; }
  .lv-sticky { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /live-thanks — post-registration confirmation
   ══════════════════════════════════════════════════════════════════════════
   Not a second stylesheet: live-thanks.html carries `page-live page-thanks`, so
   it inherits the whole layer above and only the deltas live down here. If a
   rule below would help /live too, move it up rather than duplicating it.

   These rules sit AFTER everything above deliberately. `.page-thanks` is a
   single class (0,1,0), the same weight as the component rules it adjusts, so
   source order is what makes it win — do not "tidy" this block upward. */

/* Shorter bands. The page is three sections long; /live's 104-190px rhythm was
   sized for an eight-section scroll and reads as dead air over this much less
   content. */
.page-thanks { --lv-band-y: clamp(88px, 9vw, 140px); }

/* Shorter hero too — no eyebrow and no button, so the same padding would leave
   the headline floating. */
.page-thanks .lv-hero {
  padding: clamp(140px, 15vw, 190px) 0 clamp(88px, 10vw, 132px);
}
/* `.lv-hero-promise`'s 40px bottom margin exists to clear the CTA under it on
   /live. Nothing follows it here, so it stacked with the hero's bottom padding
   and left ~172px of empty dark below the last line. */
.page-thanks .lv-hero-promise { margin-bottom: 0; }

/* No sticky bar on this page, so the legal line needs no clearance for one.
   Overrides `.lv-foot .footer-bottom` (0,2,0) — hence the three-class selector. */
.page-thanks .lv-foot .footer-bottom { padding-bottom: 32px; }

/* ── Hold the time ───────────────────────────────────────────────────────── */
.lv-hold { text-align: center; }
.lv-hold .lv-hold-lead {
  margin: 0 auto 34px;
  max-width: 46ch;
  font-size: var(--lv-lead);
}
.lv-hold .btn svg { width: 18px; height: 18px; }
/* Utility text, not body copy — deliberately the quietest thing on the page. */
.lv-hold .lv-hold-note {
  margin: 30px auto 0;
  max-width: 48ch;
  font-size: var(--sd-text-sm);
  color: var(--sd-fg-muted);
}

@media (max-width: 560px) {
  .lv-hold .btn { width: 100%; }
}