/* =====================================================================================================================
   pages-live-v3.css: /live/ only (v3 words, 2026-09-30). Linked after site.css, group-d.css, pages-g6.css.
   Built to the /schools/ + /buy-refurbished/ v3 system: ink photo hero carrying the Whatnot channel card, text-led
   heading/body splits, a three-step ruled row on the tint, visible answers, two closing routes (paper + ink).
   Every rule is scoped by an lv- class that exists on /live/ alone. Lime / black / white tokens only.
   Previous page: handoffs/draft4/site-backup-live-pre-v3/
   ===================================================================================================================== */

/* ---------- hero: design run 10-06, the INNER hero (text left on white, the photo card right). Photo plan #11,
   testing benches, 705px source: interim until viral supplies a show still; the card is 445px so the photo is never
   drawn wider than its source. The old full-bleed ink card drew a 700px shelf photo at 1037px. ---------- */
.lv-hero .hero__h1 { font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 15ch; }
.lv-hero .hero__sub { margin-top: var(--s4); max-width: 34rem; text-wrap: balance; } /* 10-07 finish review: pretty left "is on." alone on line three at 1280-1920 (same fix as the 404 sub) */
.lv-hero .hero__photo img { object-position: 50% 66%; }

/* the channel card: the page's one filled button lives here */
.lv-channel { margin-top: var(--s8); width: 100%; max-width: 32rem; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4) var(--s6); padding: var(--s6); border-radius: 24px; background: var(--floor); color: var(--ink); }
.lv-channel__id { display: grid; gap: 2px; min-width: 0; }
.lv-channel__name { font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.lv-channel__handle { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--text-2); }
.lv-channel__at { color: var(--ink); font-weight: 700; }
.lv-channel__btn { gap: 10px; white-space: nowrap; }
.lv-ext { width: 18px; height: 18px; flex: none; }
/* handle line: the typed middle dot is hidden and the handle and the show name stack as two lines (layout, not a glyph;
   the 10-06 side-by-side rule hung at the start of line two when the card narrowed at 1280-1920) */
.lv-channel__handle { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.lv-channel__sep { display: none; }
.lv-hero__shop { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3);
  font-size: 1rem; line-height: 1.45; color: var(--text-2); max-width: 32rem; }
.lv-hero__shoplink { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.lv-hero__shoplink:hover { text-decoration-color: currentColor; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .lv-channel { max-width: 40rem; }
  .lv-hero .hero__photo img { aspect-ratio: 16 / 9; object-position: 50% 62%; }
}
@media (max-width: 29.99rem) {
  .lv-channel { grid-template-columns: minmax(0, 1fr); }
  .lv-channel__btn { width: 100%; }
}
@media (min-width: 64rem) {
  /* (10-07 finish review) flat depth: no radial lime glow (site.css .hero--inner:has(.hero__photo)) round the photo card */
  .hero.hero--inner.lv-hero:has(.hero__photo) { background: var(--paper); }
  .lv-hero .hero__h1 { max-width: 15ch; }
  .lv-hero .hero__sub { max-width: 34rem; }
  .lv-channel { max-width: 32rem; }
  /* one filled lime button per view: the hero's "Follow on Whatnot" is the filled one */
}

/* ---------- shared heading / body split ---------- */
.lv-split { display: grid; gap: var(--s6); }
@media (min-width: 64rem) {
  .lv-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}
.lv-split > .h2 { max-width: 15ch; text-wrap: balance; }
.lv-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 40rem; text-wrap: pretty; }

/* ---------- Why buy from a live show: heading and lead in the left column, the three ruled rows right (design run
   10-06: the section's own lead fills the column that sat empty under the heading at 1280-1920) ---------- */
.lv-why { padding-top: var(--s12); }
/* Tom 10-09 (file_763, "padding is messed up"): 24px under the hero read as a seam; desktop gets a real section gap back */
@media (min-width: 64rem) { .lv-why { padding-top: var(--s16); } }
.lv-why__body { display: contents; }
.lv-why .lv-split { row-gap: var(--s5); }
@media (min-width: 64rem) {
  .lv-why .lv-split { grid-template-areas: "h list" "lead list"; grid-template-rows: auto minmax(0, 1fr); row-gap: var(--s5); }
  .lv-why .lv-split > .h2 { grid-area: h; }
  .lv-why .lv-lead { grid-area: lead; max-width: 28rem; }
  .lv-why__list { grid-area: list; }
}
.lv-why__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--lime); }
.lv-why__list li { padding: var(--s5) 0; border-bottom: 1px solid var(--hairline); font-size: 1.125rem; line-height: 1.55;
  color: var(--text-2); max-width: 40rem; text-wrap: pretty; }
.lv-why__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lv-why__list strong { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
@media (min-width: 64rem) { .lv-why__list li { padding: var(--s6) 0; } }

/* ---------- How does buying live work: tint band, three steps on one ruled row, the shop line under it ---------- */
.lv-steps { counter-reset: lvstep; display: grid; gap: 0; margin: var(--s10) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.lv-steps li { counter-increment: lvstep; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s4); row-gap: 6px;
  padding: var(--s6) 0; border-bottom: 1px solid rgb(18 19 17 / 0.18); }
.lv-steps li::before { content: counter(lvstep); grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.lv-steps__t { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); align-self: center; }
.lv-steps__x { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 34rem; }
@media (min-width: 48rem) {
  .lv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); border-bottom: 1px solid rgb(18 19 17 / 0.18); }
  .lv-steps li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); padding: var(--s8) 0; border-bottom: 0; align-content: start; }
  .lv-steps li::before { grid-row: auto; margin-bottom: var(--s2); }
  .lv-steps__t { align-self: start; }
}
.lv-range { margin-top: var(--s10); display: grid; gap: var(--s5); align-items: center; padding: var(--s6); border-radius: 24px; background: var(--paper); }
.lv-range__text { font-size: 1.125rem; line-height: 1.55; color: var(--ink); max-width: 44rem; text-wrap: pretty; }
@media (min-width: 64rem) {
  .lv-range { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s10); padding: var(--s8) var(--s10); }
}

/* pill link: ink pill with a lime arrow (bv-door--lead anatomy), never a second lime-filled button */
.lv-pill { justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 22px;
  border-radius: 999px; background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; }
.lv-pill > span:first-child { padding-top: 3px; } /* optical centre: the face reserves descender space (Tom 10-05) */
.lv-pill__arrow { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink);
  transition: transform var(--dur) var(--ease); }
.lv-pill__arrow svg { width: 18px; height: 18px; }
.lv-pill--on-ink { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .lv-pill:hover .lv-pill__arrow { transform: translateX(3px); } }
.lv-pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: none; }
.lv-pill--on-ink:focus-visible { outline-color: var(--lime); }

/* ---------- Questions about buying live: visible answers (shared .faq), a quiet link under two of them ---------- */
.lv-faq { padding-bottom: var(--section-y); }
.lv-faq .faq__grid > .h2 { max-width: 12ch; }
.lv-faq .qa__a > .lv-qa__more { margin-top: var(--s1); }
/* design run 10-07: three answers become one row of three under the heading at 64rem (the 5/7 split left the heading
   column blank for ~560px at 1920); 2px ink rule over each, as the steps row above; q and a rows level (subgrid) */
@media (min-width: 64rem) {
  .lv-faq .faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s10); }
  .lv-faq .faq__grid > .h2 { position: static; max-width: 24ch; }
  .lv-faq .faq__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s8); border-top: 0; }
  .lv-faq .qa { grid-row: span 2; grid-template-rows: subgrid; align-content: start; padding: var(--s6) 0 0; border-bottom: 0; border-top: 2px solid var(--ink); }
}
.lv-textlink { display: inline-block; padding-block: 10px; line-height: 24px; color: var(--ink); font-weight: 700; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
/* the arrow is an icon (masked SVG in currentColor), not a typed glyph (design run 10-06, Move 4) */
.lv-textlink::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease); }
.lv-textlink:hover { text-decoration-color: currentColor; }
/* Tom 10-09 (file_764): bulk-order route inside the ink stock band */
.lv-range__body { display: grid; gap: var(--s2); justify-items: start; }
.lv-range--ink .lv-textlink { color: var(--on-dark); }
.lv-range--ink .lv-textlink:focus-visible { outline-color: var(--lime); }
@media (hover: hover) { .lv-textlink:hover::after { transform: translateX(3px); } }
.lv-textlink:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; box-shadow: none; }

/* ---------- Not here for a show? two routes: bulk on paper, retire on ink ---------- */
.lv-more { padding-top: 0; }
.lv-more__h2 { margin-bottom: var(--s8); }
.lv-routes { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .lv-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.lv-route { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s6); padding: var(--s8) var(--s6); border-radius: 24px;
  background: var(--floor); }
@media (min-width: 64rem) { .lv-route { padding: var(--s10); } }
.lv-route__text { font-size: 1.125rem; line-height: 1.55; color: var(--text-2); max-width: 32rem; text-wrap: pretty; }
.lv-route__q { display: block; margin-bottom: var(--s2); font-size: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5rem); line-height: 1.3; font-weight: 700;
  letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.lv-route .lv-pill { margin-top: auto; }
.lv-route--ink { background: var(--ink); } /* no shadow at rest (DESIGN.md shadow vocabulary) */
.lv-route--ink .lv-route__text { color: var(--on-ink-2); }
.lv-route--ink .lv-route__q { color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  .lv-pill__arrow, .lv-textlink::after { transition: none; }
  .lv-pill:hover .lv-pill__arrow, .lv-textlink:hover::after { transform: none; }
}
/* Tom 10-09 (file_653): the stock container on /live/ goes black, not white. Texture comes from the --ink-tex list in site.css. */
.lv-range--ink { background-color: var(--ink); }
.lv-range--ink .lv-range__text { color: var(--on-dark); }
/* Tom 10-09 (file_671, "show more of the original image"): the square hat photo zoomed in on wide screens. Desktop slot capped at
   720px wide so it stays near-square and the banner, hat and desk all show. */
/* Tom 10-09 (NeonGreenGadgetStudioSetup.png): his full-size studio original has the left fade baked in, so at 64rem+ it runs
   full-bleed behind the text like /higher-education/ (fade neutralised to ink, experiments/lv_hero_1009.py); never scaled past
   its native 1672px (right-anchored). Phones and tablets get the 4:3 photo-side crop. */
@media (min-width: 64rem) {
  .sv-hero.lv-hero .hero__photo { left: 0; right: 0; width: auto; aspect-ratio: auto; }
  .sv-hero.lv-hero .hero__photo::after { background: linear-gradient(0deg, rgb(18 19 17 / 0.32) 0%, rgb(18 19 17 / 0) 34%); }
  .sv-hero.lv-hero .hero__photo picture { display: flex; justify-content: flex-end; height: 100%; }
  .sv-hero.lv-hero .hero__photo img { width: min(100%, 1672px); height: 100%; object-position: 100% 80%; }
}
/* past 1672px the image's left edge sits on the page ink: feather it so no seam shows. y 80% (Tom 10-09: "more of the table and less of the back wall") */
@media (min-width: 104.5rem) {
  .sv-hero.lv-hero .hero__photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}