/* ============================================================
   Ticket layout for index.html, loaded after webinar.css.
   Same tokens, fonts and components as the cohort system; new layouts.
   Shared section rules first, then the .tk-* ticket components.
   ============================================================ */

/* ---------- shared ---------- */
.hero{ padding-top: 132px; }
/* grid columns may not grow to fit the pass band's scrolling track */
.hero-copy, .hero-visual{ min-width: 0; }
.mx-title{ font-size: clamp(2.4rem, 4.4vw, 3.9rem); }

/* The shift: one statement, dim half against bright half, then two plain principles */
.shift-h2{ font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.12; max-width: 20ch; }
.shift-h2 .dim{ color: var(--text-dim); }
.shift-h2 em{ display:inline; padding-bottom:.08em; }
.shift .lead{ max-width: 62ch; }
.principles{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; }
.principles > div{ border-top: 1px solid var(--line-on-ink); padding-top: 26px; }
.principles h3{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--signal-2); margin-bottom:.45em; }
.principles p{ color: var(--text-dim); max-width: 44ch; margin:0; }

/* FAQ stays on the dark page: heading left, accordion right */
.faq-split{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items:start; }
.faq-split h2{ font-size: clamp(1.9rem, 3.1vw, 2.7rem); margin:0; }
.on-ink .faq-list, .on-ink .faq-item{ border-color: var(--line-on-ink); }
.on-ink .faq-no{ color: var(--signal-2); }

@media (max-width: 980px){
  .principles, .faq-split{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .hero{ padding-top: 108px; }
}

/* ---------- TICKET ---------- */
.tk-hold{ position:relative; width:100%; max-width: 440px; }
.tk-pass{
  position:relative; z-index:1; background: var(--paper); color: var(--ink-hi);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.tk-photo img{
  width:100%; aspect-ratio: 4/3; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* the khaki band wraps the pass, wider than it, like a paper sleeve band */
.tk-band{
  position:relative; z-index:2; margin: -30px -9% 0; overflow:hidden;
  background: var(--signal-2); color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); padding: 11px 0;
}
.tk-band-track{
  display:flex; gap: 18px; width:max-content; white-space:nowrap;
  font-family: var(--ff-mono); font-weight:700; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  animation: marquee 22s linear infinite;
}
.tk-perf{ position:relative; margin-top: 26px; border-top: 2px dashed var(--line-on-paper); }
.tk-perf::before, .tk-perf::after{
  content:''; position:absolute; top:-14px; width:26px; height:26px; border-radius:50%; background: var(--ink);
}
.tk-perf::before{ left:-13px; } .tk-perf::after{ right:-13px; }
.tk-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin:0; padding: 22px 28px 28px; }
.tk-fields div{ display:flex; flex-direction:column; gap:2px; }
.tk-fields dt{ font-family: var(--ff-mono); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-faint); }
.tk-fields dd{ margin:0; font-family: var(--ff-display); font-weight:600; font-size: 1.35rem; line-height:1.2; }
.tk-fields .tk-price{ flex-direction: column-reverse; }
.tk-fields .tk-price dd{ font-size: 1.9rem; color: var(--ink-signal); }

/* agenda: a stack of torn ticket strips */
.tk-agenda{ background: var(--ink-soft); }
.tk-stubs{ display:flex; flex-direction:column; gap: 22px; max-width: 1080px; margin-top: 48px; }
.tk-strip{
  --notch: var(--ink-soft); --d: 0s; --tilt: -1.4deg;
  position:relative; display:grid; grid-template-columns: 190px 1fr;
  background: var(--paper); color: var(--ink-hi); border-radius: 16px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.7);
}
.tk-strip:nth-child(2){ --d: .08s; --tilt: 1.4deg; }
.tk-strip:nth-child(3){ --d: .16s; }
/* reveal slides in on `transform`; hover tilt uses `rotate`/`translate` so each keeps its own timing */
.tk-strip.reveal{
  transform: translateX(-48px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--d), transform .8s cubic-bezier(.16,1,.3,1) var(--d),
    rotate .5s cubic-bezier(.34,1.56,.64,1), translate .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
}
.tk-strip.reveal.in{ transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .tk-strip:hover{ rotate: var(--tilt); translate: 0 -6px; box-shadow: 0 34px 60px -26px rgba(0,0,0,.8); }
}
/* touch screens: each strip enters tilted and settles straight as it scrolls into view */
@keyframes tk-settle{ from{ rotate: calc(var(--tilt) * -2.5); translate: 0 36px; scale: .95; } to{ rotate: 0deg; translate: 0 0; scale: 1; } }
@supports (animation-timeline: view()){
  @media (hover: none) and (prefers-reduced-motion: no-preference){
    .tk-strip.reveal, .tk-strip.reveal.in{ transform: none; }
    .tk-strip{ animation: tk-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
.tk-strip::before, .tk-strip::after{
  content:''; position:absolute; left: 177px; width:26px; height:26px; border-radius:50%; background: var(--notch);
}
.tk-strip::before{ top:-13px; } .tk-strip::after{ bottom:-13px; }
.tk-strip-stub{
  padding: 30px 26px; border-right: 2px dashed var(--line-on-paper);
  display:flex; flex-direction:column; justify-content:space-between; gap: 18px;
}
.tk-part{ font-family: var(--ff-mono); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-signal); }
.tk-part b{ display:block; font-family: var(--ff-display); font-weight:600; font-size: 3rem; line-height:1; letter-spacing:-.01em; margin-top:6px; }
.tk-strip-body{ padding: 30px 34px; }
.tk-strip-body h3{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 18px; }
.tk-strip-body ul{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }
.tk-strip-body li{ position:relative; padding-left: 20px; font-size:.97rem; opacity:.85; }
.tk-strip-body li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background: var(--ink-signal); }
.tk-agenda .hero-ctas{ margin: 48px 0 0; }

/* register pass: the stub tears away along the perforation */
.tk-tear{ background: transparent; box-shadow:none; overflow: visible; }
.tk-tear .pass-copy{ background: var(--paper); border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow-lg); }
.tk-tear .pass-stub{ border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-lg); transition: transform 1s cubic-bezier(.16,1,.3,1) .25s; }
.tk-tear.torn .pass-stub{ transform: translate(22px, 0); }

@media (max-width: 980px){
  .tk-hold{ margin: 0 auto; }
  .tk-band{ margin-left:-5%; margin-right:-5%; }
  .tk-tear .pass-copy{ border-radius: var(--radius) var(--radius) 0 0; }
  .tk-tear .pass-stub{ border-radius: 0 0 var(--radius) var(--radius); }
  .tk-tear.torn .pass-stub{ transform: translate(0, 16px); }
}
@media (max-width: 640px){
  .tk-strip{ grid-template-columns: 1fr; }
  .tk-strip::before, .tk-strip::after{ display:none; }
  .tk-strip-stub{ flex-direction:row; align-items:center; border-right:none; border-bottom: 2px dashed var(--line-on-paper); padding: 22px 22px 18px; }
  .tk-part b{ font-size: 2.2rem; }
  .tk-strip-body{ padding: 22px 22px 26px; }
  .tk-strip-body ul{ grid-template-columns: 1fr; }
  .tk-fields{ padding: 20px 22px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .tk-band-track{ animation:none; }
  .tk-strip.reveal, .tk-strip.reveal.in{ transform: none; }
  .tk-tear .pass-stub{ transition:none; }
}

/* profile captures: columns follow each capture's width (700 and 849) so their text matches in size */
@media (min-width: 981px){ .proof-row{ grid-template-columns: 700fr 849fr; } }

/* wordmark only: name above the workshop line, with a little air between them */
.brand-text{ gap: 5px; }