/* Theme pages, loaded after hub.css.
   /excuses/ (body.th-excuses): rustic jungle greens + Excuses gold, with soft "memory replay" tech (scan lines,
   a hologram sweep, HUD corners, a replay scrubber). /limits/ (body.th-limits): teal/magenta neon warmed with
   amber, gold glitter leaves and light butterflies. CSS only, no inline styles (CSP). hub.css already switches
   every animation off for prefers-reduced-motion; themes.js keeps the videos off then too. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-normal-500-latin.v1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-normal-500-latin-ext.v1.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Fallback";src:local("Georgia");size-adjust:84%;ascent-override:108%;descent-override:33%;line-gap-override:0%}

/* ================================================================== shared */
.th main{overflow-x:clip}
.th section{padding:0}
.th .th-sec{padding:56px 0}
.th .th-sec+.th-sec{padding-top:8px}
@media (min-width:860px){.th .th-sec{padding:88px 0}.th .th-sec+.th-sec{padding-top:16px}}

/* full-bleed media (still under, video over it once it actually plays) */
.th-hero,.th-band{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.th-media{position:absolute;inset:0;z-index:-3;background:var(--bg)}
.th-media picture{display:contents}
.th-media img,.th-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%)}
.th-media video{opacity:0;transition:opacity 1.2s ease}
.th-media video.is-on{opacity:1}
.th-scrim,.th-fx{position:absolute;inset:0;z-index:-2;pointer-events:none}
.th-fx{z-index:-1}

/* hero: phones = picture in the top ~70%, text underneath on the fade; desktop = picture fills, text on the dark left */
.th-hero{display:flex;align-items:flex-end;min-height:clamp(600px,calc(100svh - 118px),860px)}
.th-hero .th-media{bottom:auto;height:72%}
.th-hero-in{position:relative;padding-top:max(150px,26vh);padding-bottom:34px}
.th-hero-in .lede{max-width:34em}
@media (min-width:860px){
  .th-hero{align-items:center;min-height:clamp(600px,calc(100svh - 66px),900px)}
  .th-hero .th-media{bottom:0;height:auto}
  .th-hero-in{padding-top:96px;padding-bottom:96px}
  .th-hero-in>*{max-width:560px}
}

/* video band further down: phones = picture panel on top, content below; desktop = picture behind the content */
.th-band .th-media{bottom:auto;height:min(340px,92vw)}
.th-band-in{position:relative;padding-top:min(250px,66vw);padding-bottom:56px}
@media (min-width:860px){
  .th-band .th-media{bottom:0;height:auto}
  .th-band-in{padding-top:120px;padding-bottom:120px;min-height:620px}
}

/* HUD corner brackets (reused on cards and frames) */
.th-hud{position:relative}
.th-hud::before{content:"";position:absolute;inset:8px;pointer-events:none;z-index:1;--hc:var(--hud,rgba(72,224,208,.55));--hl:16px;
  background:
    linear-gradient(var(--hc),var(--hc)) top left/var(--hl) 1px no-repeat,
    linear-gradient(var(--hc),var(--hc)) top left/1px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) top right/var(--hl) 1px no-repeat,
    linear-gradient(var(--hc),var(--hc)) top right/1px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) bottom left/var(--hl) 1px no-repeat,
    linear-gradient(var(--hc),var(--hc)) bottom left/1px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) bottom right/var(--hl) 1px no-repeat,
    linear-gradient(var(--hc),var(--hc)) bottom right/1px var(--hl) no-repeat}

.th-band h2,.th-hero .kicker{text-shadow:0 1px 12px rgba(0,0,0,.65)}
.th .actions .btn{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ================================================================== EXCUSES */
body.th-excuses{
  --bg:#0e130f; --bg-2:#141b15; --moss:#3d5a32; --fern:#9fb67a; --bark:#221f1a; --char:#22201F;
  --gold-d:#7F6834; --gold:#AA9459; --gold-l:#E0CD9A; --gold-b:#F9F0B6; --holo:#48E0D0;
  --accent:#E0CD9A; --accent-ink:#22201F; --line:#2b3629; --stone:#a9ae99;
  --serif:"Cormorant Garamond","Cormorant Fallback",Georgia,serif;
  background:var(--bg);
}
.th-excuses .top{background:rgba(14,19,15,.88)}
.th-excuses .kicker{color:var(--fern)}
.th-excuses .lede{color:#ddd6c6}
.th-excuses h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-l);font-size:clamp(1.7rem,6.4vw,2.6rem);line-height:1.08}
.th-excuses h3{color:#efe8d6}
.th-excuses .btn-primary{background:linear-gradient(180deg,var(--gold-b),var(--gold-l) 45%,var(--gold));color:var(--char);box-shadow:0 0 0 1px rgba(127,104,52,.6),0 10px 28px -12px rgba(224,205,154,.55)}
.th-excuses .btn-ghost{border-color:rgba(170,148,89,.55);background:rgba(14,19,15,.5);color:#f1ead7}
.th-excuses .btn-ghost:hover{border-color:var(--gold-l)}

/* hero */
.th-excuses .th-hero{--pos:72% 40%}
.th-excuses .th-hero .th-scrim{background:linear-gradient(180deg,rgba(14,19,15,.35) 0%,rgba(14,19,15,0) 16%,rgba(14,19,15,.12) 38%,rgba(14,19,15,.86) 60%,var(--bg) 72%)}
@media (min-width:860px){
  .th-excuses .th-hero{--pos:60% 45%}
  .th-excuses .th-hero .th-scrim{background:
    linear-gradient(90deg,rgba(14,19,15,.94) 0%,rgba(14,19,15,.78) 30%,rgba(14,19,15,.2) 58%,rgba(14,19,15,0) 72%),
    linear-gradient(0deg,var(--bg) 0%,rgba(14,19,15,0) 22%)}
}
.th-title{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.06em;line-height:.98;
  font-size:clamp(2.7rem,12.5vw,5.4rem);margin:0 0 .35em;
  background:linear-gradient(100deg,var(--gold-l) 0%,var(--gold-b) 22%,var(--gold-l) 40%,var(--gold) 70%,var(--gold-l) 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}

/* soft tech: scan lines + a slow hologram sweep, HUD corners, replay scrubber */
.th-scan{background:repeating-linear-gradient(180deg,rgba(72,224,208,.05) 0 1px,transparent 1px 4px);overflow:hidden}
.th-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:28%;transform:translateY(-110%);
  background:linear-gradient(180deg,rgba(72,224,208,0),rgba(72,224,208,.08) 55%,rgba(249,240,182,.05) 70%,rgba(72,224,208,0))}
.th-hero.th-hud::before{inset:12px;--hud:rgba(72,224,208,.42);--hl:22px;z-index:0}
@media (min-width:860px){.th-hero.th-hud::before{inset:24px;--hl:30px}}
.th-scrub{position:absolute;left:var(--gutter);right:var(--gutter);bottom:14px;height:9px;z-index:0;pointer-events:none;opacity:.7;
  background:
    linear-gradient(rgba(224,205,154,.45),rgba(224,205,154,.45)) left 50%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,rgba(224,205,154,.4) 0 1px,transparent 1px 24px) left 50%/100% 5px no-repeat}
.th-scrub::before{content:"";position:absolute;left:61%;top:-2px;width:1px;height:13px;background:var(--holo);box-shadow:0 0 6px var(--holo)}
.th-scrub span{position:absolute;inset:0}
.th-scrub span::before{content:"";position:absolute;top:0;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--gold-b);box-shadow:0 0 10px rgba(249,240,182,.85)}
@media (min-width:860px){.th-scrub{left:max(24px,calc((100% - var(--max)) / 2 + var(--gutter)));right:max(24px,calc((100% - var(--max)) / 2 + var(--gutter)));bottom:22px}}

@media (prefers-reduced-motion:no-preference){
  .th-scan::after{animation:th-sweep 9s linear 1.5s infinite}
  .th-title{animation:th-sheen 9s ease-in-out 1.2s infinite,th-fork 1s steps(1,end) .6s 1 both}
  .th-scrub span{animation:th-play 16s linear infinite}
}
@keyframes th-sweep{to{transform:translateY(420%)}}
@keyframes th-sheen{0%,62%{background-position:100% 0}88%,100%{background-position:0 0}}
@keyframes th-fork{
  0%{transform:none}
  25%{transform:translateX(5px);filter:drop-shadow(-5px 0 0 rgba(72,224,208,.6)) drop-shadow(0 2px 14px rgba(0,0,0,.55))}
  38%{transform:translateX(-3px);filter:drop-shadow(4px 0 0 rgba(249,240,182,.6)) drop-shadow(0 2px 14px rgba(0,0,0,.55))}
  50%,100%{transform:none}
}
@keyframes th-play{0%{transform:translateX(0);opacity:0}4%{opacity:1}58%{transform:translateX(61%)}61%{transform:translateX(61%);opacity:1}63%{transform:translateX(61%);opacity:0}100%{transform:translateX(61%);opacity:0}}

/* stone / paper surfaces */
.th-stone{background:url(/assets/img/themes/grain.svg?v=20261106m),linear-gradient(160deg,#1c2219 0%,#151a14 55%,#1b1913 100%);border:1px solid var(--line);border-radius:16px}
.th-paper{background:url(/assets/img/themes/grain.svg?v=20261106m),radial-gradient(120% 90% at 0% 0%,rgba(127,104,52,.22),rgba(127,104,52,0) 60%),linear-gradient(170deg,#211f19,#171611);border:1px solid #3a3426;border-radius:16px}

/* episode 1: a "memory" card */
.th-memory{display:grid;gap:22px;align-items:center;padding:14px 14px 24px}
.th-memory-txt{padding:0 6px}
.th-memory-txt h2{margin-bottom:.4em}
.th-memory-art{margin:0;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--char)}
.th-memory-art img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.9)}
.th-memory-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(72,224,208,.07) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,rgba(14,19,15,0) 55%,rgba(14,19,15,.7))}
.th-memory-art.th-hud::before{--hud:rgba(72,224,208,.6)}
@media (min-width:760px){.th-memory{grid-template-columns:.95fr 1.05fr;gap:34px;padding:22px 30px 22px 22px}}

/* how the fork works: a timeline that branches once */
.th-fork{list-style:none;margin:26px 0 0;padding:0 0 0 30px;display:grid;gap:16px;position:relative}
.th-fork::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold-l),var(--gold) 50%,var(--gold-d))}
.th-step{position:relative;padding:18px 18px 18px}
.th-step h3{margin-bottom:.35em}
.th-step p{margin:0;color:#d4cdbb}
.th-step::before{content:"";position:absolute;left:-27px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--gold-l);box-shadow:0 0 0 4px var(--bg)}
.th-n{display:block;font:600 .74rem/1 var(--font);letter-spacing:.24em;color:var(--gold);margin-bottom:10px}
.th-step-ai{margin-left:18px;background:linear-gradient(160deg,rgba(72,224,208,.07),rgba(72,224,208,.02));border:1px dashed rgba(72,224,208,.5);border-radius:16px}
.th-step-ai .th-n{color:var(--holo)}
.th-step-ai::before{left:-45px;border-color:var(--holo);box-shadow:0 0 0 4px var(--bg),0 0 12px rgba(72,224,208,.6)}
.th-step-ai::after{content:"";position:absolute;left:-33px;top:28px;width:32px;border-top:1.5px dashed rgba(72,224,208,.7)}
@media (min-width:760px){
  .th-fork{grid-template-columns:repeat(3,1fr);gap:18px;padding:30px 0 0}
  .th-fork::before{left:0;right:0;top:9px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--gold-l),var(--gold) 50%,var(--gold-d))}
  .th-step::before{left:18px;top:-27px}
  .th-step-ai{margin:26px 0 0}
  .th-step-ai::before{left:18px;top:-53px}
  .th-step-ai::after{left:23px;top:-41px;width:0;height:40px;border-top:0;border-left:1.5px dashed rgba(72,224,208,.7)}
}

/* seasons over the canyon: a trail of waypoints */
.th-excuses .th-band{--pos:62% 50%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.th-excuses .th-band .th-scrim{background:linear-gradient(180deg,rgba(14,19,15,.2) 0,rgba(14,19,15,0) 90px,rgba(14,19,15,.78) min(230px,62vw),var(--bg) min(340px,92vw))}
@media (min-width:860px){
  .th-excuses .th-band{--pos:60% 50%}
  .th-excuses .th-band .th-scrim{background:linear-gradient(90deg,rgba(14,19,15,.92) 0%,rgba(14,19,15,.72) 32%,rgba(14,19,15,.1) 62%,rgba(14,19,15,0) 75%)}
}
.th-trail{list-style:none;margin:18px 0 0;padding:0;max-width:420px}
.th-trail li{position:relative;padding:11px 0 11px 34px;font-weight:600;font-size:1.06rem;color:#f1ead7}
.th-trail li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:11px;border-radius:50%;border:2px solid var(--gold-l);background:var(--bg)}
.th-trail li::after{content:"";position:absolute;left:9px;top:33px;bottom:-15px;border-left:1.5px dashed rgba(224,205,154,.45)}
.th-trail li:last-child::after{display:none}
.th-trail li:last-child{color:var(--gold-b)}
.th-trail li:last-child::before{border-color:var(--holo);box-shadow:0 0 0 4px rgba(72,224,208,.15),0 0 14px rgba(72,224,208,.7)}
.th-trail li span{display:block;font-size:.86rem;font-weight:400;color:var(--holo);letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){.th-trail li:last-child::before{animation:th-ping 2.6s ease-out infinite}}
@keyframes th-ping{0%{box-shadow:0 0 0 0 rgba(72,224,208,.5),0 0 14px rgba(72,224,208,.7)}80%,100%{box-shadow:0 0 0 12px rgba(72,224,208,0),0 0 14px rgba(72,224,208,.7)}}

/* shorts */
.th-shorts{padding:24px 20px 26px}
.th-shorts h2{margin-bottom:.35em}
@media (min-width:760px){.th-shorts{padding:36px 40px}}

/* ================================================================== LIMITS */
body.th-limits{
  --bg:#07080d; --bg-2:#0d0f18; --teal:#48E0D0; --mag:#E83EC8; --amber:#F2A541; --gold-l:#E0CD9A; --gold-b:#F9F0B6;
  --accent:#48E0D0; --accent-ink:#03201c; --line:#1d2232; --stone:#9ca5b8;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  background:var(--bg);
}
.th-limits .top{background:rgba(7,8,13,.86)}
.th-limits .kicker{font-family:var(--mono);font-weight:500;letter-spacing:.2em;color:var(--teal);display:flex;align-items:center;gap:10px}
.th-limits .kicker::before{content:"";width:22px;height:1px;flex:none;background:linear-gradient(90deg,var(--teal),var(--mag));box-shadow:0 0 6px rgba(72,224,208,.8)}
.th-limits .lede{color:#d9d8e3}
.th-limits h2{letter-spacing:-.015em}
.th-limits .btn-primary{background:linear-gradient(180deg,#6ff0e2,var(--teal));color:var(--accent-ink);box-shadow:0 0 0 1px rgba(72,224,208,.7),0 10px 30px -10px rgba(72,224,208,.6),0 0 44px -14px rgba(242,165,65,.55)}
.th-limits .btn-ghost{border-color:rgba(232,62,200,.5);background:rgba(7,8,13,.5);color:#f3eefa}
.th-limits .btn-ghost:hover{border-color:var(--mag);box-shadow:0 0 18px -6px rgba(232,62,200,.7)}

/* hero */
.th-limits .th-hero{--pos:70% 50%}
.th-limits .th-hero .th-scrim{background:
  radial-gradient(60% 40% at 20% 100%,rgba(242,165,65,.14),rgba(242,165,65,0)),
  linear-gradient(180deg,rgba(7,8,13,.25) 0%,rgba(7,8,13,0) 18%,rgba(7,8,13,.1) 38%,rgba(7,8,13,.86) 60%,var(--bg) 72%)}
@media (min-width:860px){
  .th-limits .th-hero{--pos:62% 50%}
  .th-limits .th-hero .th-scrim{background:
    radial-gradient(40% 50% at 10% 90%,rgba(242,165,65,.12),rgba(242,165,65,0)),
    linear-gradient(90deg,rgba(7,8,13,.92) 0%,rgba(7,8,13,.7) 30%,rgba(7,8,13,.1) 58%,rgba(7,8,13,0) 70%),
    linear-gradient(0deg,var(--bg) 0%,rgba(7,8,13,0) 20%)}
}
.th-limits .limits-logo{width:100%;max-width:min(400px,82vw);margin:0 0 14px;filter:drop-shadow(0 0 18px rgba(72,224,208,.25)) drop-shadow(0 0 30px rgba(232,62,200,.18))}
.th-limits .th-hero h1{margin:0}
.th-limits .th-hero.th-hud::before{--hud:rgba(232,62,200,.45)}

/* neon floor grid along the bottom of the hero */
.th-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:120px;z-index:-1;pointer-events:none;opacity:.35;
  background:
    repeating-linear-gradient(90deg,rgba(72,224,208,.55) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(72,224,208,.55) 0 1px,transparent 1px 24px);
  transform:perspective(220px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}

/* glitter leaves: tiny gold leaves that twinkle and drift */
.th-glitter{position:absolute;inset:0 0 auto;height:72%;z-index:-1;pointer-events:none}
@media (min-width:860px){.th-glitter{height:100%}}
.th-glitter i{position:absolute;width:10px;height:10px;background:url(/assets/img/themes/leaf.svg?v=20261106m) center/contain no-repeat;opacity:.85;
  filter:drop-shadow(0 0 4px rgba(249,240,182,.85));rotate:20deg}
.th-glitter i:nth-child(1){left:52%;top:14%}
.th-glitter i:nth-child(2){left:64%;top:30%;width:7px;height:7px;rotate:-40deg}
.th-glitter i:nth-child(3){left:78%;top:12%;width:12px;height:12px}
.th-glitter i:nth-child(4){left:88%;top:44%;width:8px;height:8px;rotate:110deg}
.th-glitter i:nth-child(5){left:58%;top:56%;width:9px;height:9px;rotate:-80deg}
.th-glitter i:nth-child(6){left:71%;top:68%;width:6px;height:6px}
.th-glitter i:nth-child(7){left:93%;top:22%;width:11px;height:11px;rotate:150deg}
.th-glitter i:nth-child(8){left:46%;top:38%;width:6px;height:6px;rotate:60deg}
.th-glitter i:nth-child(9){left:83%;top:76%;width:9px;height:9px;rotate:-20deg}
.th-glitter i:nth-child(10){left:36%;top:22%;width:5px;height:5px;opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .th-glitter i{animation:th-twinkle 4.6s ease-in-out infinite,th-fall 18s linear infinite}
  .th-glitter i:nth-child(2n){animation-duration:3.8s,22s;animation-delay:-1.2s,-6s}
  .th-glitter i:nth-child(3n){animation-duration:5.4s,26s;animation-delay:-2.5s,-11s}
  .th-glitter i:nth-child(5n){animation-delay:-3.4s,-15s}
}
@keyframes th-twinkle{0%,100%{opacity:.25;scale:.75}45%{opacity:1;scale:1.15}60%{opacity:.7;scale:1}}
@keyframes th-fall{0%{translate:0 -10px}50%{translate:-14px 26px}100%{translate:6px 60px}}

/* light butterflies: two wings from one SVG, folding on a pivot */
.th-fly{position:absolute;width:30px;height:26px;z-index:-1;pointer-events:none;perspective:160px;filter:drop-shadow(0 0 7px rgba(255,190,90,.85))}
.th-fly i{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;background:url(/assets/img/themes/wing.svg?v=20261106m) left center/contain no-repeat}
.th-fly i:first-child{transform:scaleX(-1)}
.th-fly::before{content:"";position:absolute;left:calc(50% - 1px);top:30%;width:2px;height:46%;border-radius:2px;background:#fff1c4}
.th-fly-a{left:64%;top:20%;width:36px;height:30px;rotate:-14deg}
.th-fly-b{left:84%;top:52%;width:20px;height:17px;rotate:10deg;opacity:.85}
@media (min-width:860px){.th-fly-a{left:60%;top:32%;width:46px;height:40px}.th-fly-b{left:82%;top:58%}}
@media (prefers-reduced-motion:no-preference){
  .th-fly i:first-child{animation:th-flap-l 2.4s ease-in-out infinite}
  .th-fly i:last-child{animation:th-flap-r 2.4s ease-in-out infinite}
  .th-fly-a{animation:th-path-a 24s ease-in-out infinite alternate}
  .th-fly-b{animation:th-path-b 30s ease-in-out -8s infinite alternate}
  .th-fly-b i{animation-delay:-.9s!important}
  .th-fly-c i{animation-duration:4.8s!important}
}
@keyframes th-flap-l{0%,40%,100%{transform:scaleX(-1) rotateY(0)}10%,30%{transform:scaleX(-1) rotateY(64deg)}20%{transform:scaleX(-1) rotateY(10deg)}}
@keyframes th-flap-r{0%,40%,100%{transform:rotateY(0)}10%,30%{transform:rotateY(64deg)}20%{transform:rotateY(10deg)}}
@keyframes th-path-a{0%{translate:0 0}30%{translate:-40px -22px}60%{translate:-90px 8px}100%{translate:-30px 34px}}
@keyframes th-path-b{0%{translate:0 0}50%{translate:-36px -30px}100%{translate:-70px 6px}}

/* how to watch in 360, over the butterfly-on-the-chip band */
.th-limits .th-band{--pos:68% 50%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.th-limits .th-band .th-scrim{background:linear-gradient(180deg,rgba(7,8,13,.15) 0,rgba(7,8,13,0) 90px,rgba(7,8,13,.8) min(230px,62vw),var(--bg) min(340px,92vw))}
@media (min-width:860px){
  .th-limits .th-band{--pos:60% 50%}
  .th-limits .th-band .th-scrim{background:
    linear-gradient(90deg,rgba(7,8,13,.9) 0%,rgba(7,8,13,.55) 34%,rgba(7,8,13,0) 62%),
    linear-gradient(0deg,rgba(7,8,13,.92) 0%,rgba(7,8,13,.4) 34%,rgba(7,8,13,0) 55%)}
  .th-limits .th-band-in{display:flex;flex-direction:column;justify-content:space-between;min-height:680px}
}
.th-watch{display:grid;gap:12px;margin-top:20px}
@media (min-width:760px){.th-watch{grid-template-columns:repeat(3,1fr);gap:16px}}
.th-glass{position:relative;padding:18px 18px 18px;border-radius:14px;background:rgba(10,12,20,.78);border:1px solid rgba(72,224,208,.18)}
.th-glass::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:linear-gradient(90deg,var(--teal),var(--mag) 60%,rgba(242,165,65,.8))}
@media (min-width:860px){.th-glass{background:rgba(10,12,20,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.th-glass h3{display:flex;align-items:center;gap:10px;margin-bottom:.4em}
.th-glass p{margin:0;color:#d3d3de}
.th-ico{width:22px;height:22px;flex:none;color:var(--amber);filter:drop-shadow(0 0 6px rgba(242,165,65,.6))}

/* pitch a guest: the old chrome sting as a lit monitor */
.th-pitch{position:relative;background:
  radial-gradient(50% 60% at 0% 100%,rgba(242,165,65,.12),rgba(242,165,65,0)),
  radial-gradient(45% 55% at 100% 0%,rgba(232,62,200,.12),rgba(232,62,200,0)),var(--bg)}
.th-pitch-grid{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.th-pitch-grid{grid-template-columns:1.05fr .95fr;gap:56px}}
.th-monitor{position:relative;margin:0;border-radius:14px;overflow:visible}
.th-monitor img{border-radius:14px;border:1px solid rgba(72,224,208,.3);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 20px 60px -20px rgba(232,62,200,.45),0 0 60px -20px rgba(242,165,65,.4)}
.th-monitor::after{content:"";position:absolute;inset:1px;border-radius:13px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.th-monitor .th-fly-c{left:auto;right:-10px;top:-20px;width:40px;height:34px;rotate:18deg;z-index:2}
