/* T.I. 25th Anniversary — flyer-styled event site. Mobile first. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0a0806;
  --panel:rgba(18,14,10,.84);
  --line:rgba(212,175,55,.28);
  --gold:#d4af37;
  --gold-hi:#f6df8c;
  --gold-lo:#8d6c17;
  --cream:#f4ecdc;
  --muted:#b7a98d;
  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --display:'Bebas Neue','Oswald',Impact,sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gutter:16px;
  --radius:6px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:1rem;line-height:1.6;min-height:100vh;overflow-x:hidden}
/* Ambient backdrop: the flyer itself, blurred and dimmed, like a flyer on a lounge table */
body::before{content:'';position:fixed;inset:-10%;z-index:-2;background:url(flyer-blur.jpg) center/cover no-repeat;opacity:.95}
body::after{content:'';position:fixed;inset:0;z-index:-1;background:
  radial-gradient(70% 45% at 50% 0%,rgba(212,175,55,.16),transparent 70%),
  linear-gradient(180deg,rgba(7,6,5,.70) 0%,rgba(7,6,5,.86) 60%,rgba(7,6,5,.94) 100%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Gold foil text */
.gold{background:linear-gradient(180deg,#fff3c0 0%,#f1d27a 26%,#d4af37 50%,#8d6c17 62%,#e9c75f 82%,#fff3c0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Top bar */
.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px var(--gutter);border-bottom:1px solid var(--line);background:rgba(7,6,5,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.presenters{margin:0;font-family:var(--serif);font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);text-align:center;line-height:1.6}
.presenters .sep{color:var(--gold-lo);margin:0 .35em}
.presenters small{display:block;font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.55em;color:var(--muted);margin-top:1px;padding-left:.55em}
.topbar .btn{display:none}

/* Layout */
.page{max-width:800px;margin:0 auto;padding:8px var(--gutter) 24px}

/* ---------- Hero scene: the flyer rebuilt from separate layers ----------
   --sy is the page scroll offset (set by site.js). Each layer multiplies it by its own
   depth factor: positive = lags behind (background), negative = lifts ahead (foreground). */
.hero{position:relative;background:#070605}
.scene{position:relative;overflow:hidden;background:#070605;--sy:0}
.stage{position:absolute;left:0;right:0;top:-28%;height:150%;z-index:0;pointer-events:none}
.stage img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.95;transform:translate3d(0,calc(var(--sy) * .5px),0);will-change:transform}
.scene-fade{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(180deg,rgba(7,6,5,0) 0%,rgba(7,6,5,.75) 55%,#070605 100%);pointer-events:none}
.scene-inner{position:relative;z-index:2;width:min(100%,640px);margin:0 auto;aspect-ratio:1002/1610;container-type:inline-size}
.layer{position:absolute;will-change:transform;backface-visibility:hidden;animation:layer-in .9s ease both}
@keyframes layer-in{from{opacity:0}to{opacity:1}}
/* Album wall (decorative; the interactive catalog lives further down the page) */
.wall{list-style:none;margin:0;z-index:1;top:1.5cqw;left:3cqw;right:3cqw;padding:2.8cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;background:rgba(9,7,5,.9);border:1px solid rgba(212,175,55,.14);box-shadow:0 20px 50px rgba(0,0,0,.55);transform:translate3d(0,calc(var(--sy) * .42px),0) scale(calc(1 - var(--sy) * .0002));animation-delay:.05s}
.wall li{aspect-ratio:1;overflow:hidden;background:#000;box-shadow:0 2px 10px rgba(0,0,0,.6);transform:translate3d(calc(var(--sy) * var(--dx,0) * 1px),calc(var(--sy) * var(--dy,0) * 1px),0);will-change:transform}
.wall li:nth-child(4n+1){--dx:-.14}
.wall li:nth-child(4n+2){--dx:-.05}
.wall li:nth-child(4n+3){--dx:.05}
.wall li:nth-child(4n+4){--dx:.14}
.wall li:nth-child(-n+4){--dy:-.1}
.wall li:nth-child(n+9){--dy:.1}
.wall img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.9)}
/* Side table, behind the chair */
.table{z-index:2;top:96cqw;left:-4cqw;width:27cqw;transform:translate3d(calc(var(--sy) * -.12px),calc(var(--sy) * .22px),0);animation-delay:.3s}
.table img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
/* T.I. — the anchor layer, almost no drift */
.artist{z-index:3;top:27cqw;left:4cqw;width:92cqw;transform:translate3d(0,calc(var(--sy) * .06px),0);animation-delay:.15s}
.artist img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px rgba(0,0,0,.55));user-select:none;-webkit-user-drag:none}
/* Lettering lifts ahead of the portrait */
.copy{z-index:4;top:83cqw;left:8cqw;right:8cqw;text-align:center;transform:translate3d(0,calc(var(--sy) * -.26px),0) scale(calc(1 + var(--sy) * .0003));animation-delay:.45s}
.copy::before{content:'';position:absolute;inset:-16cqw -8cqw -10cqw;z-index:-1;background:radial-gradient(ellipse at 50% 50%,rgba(5,4,3,.85) 0%,rgba(5,4,3,.55) 45%,rgba(5,4,3,0) 72%);pointer-events:none}
.lockup{display:block;width:74%;height:auto;margin:0 auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 16px rgba(0,0,0,.85))}
.billing{margin:2cqw 0 0;display:flex;flex-direction:column;gap:.5cqw;font-family:var(--serif);font-weight:700;text-transform:uppercase;line-height:1.2;text-shadow:0 2px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85)}
.billing .bt{font-size:3.2cqw;letter-spacing:.22em;color:var(--cream)}
.billing .on{font-size:3.9cqw;letter-spacing:.08em;color:var(--gold-hi)}
.billing .sg{font-size:3.9cqw;letter-spacing:.08em;color:var(--cream)}
.billing .sg em{font-style:normal;color:#e8242f}
/* Date plaque holds its ground; the venue lags slightly, so gaps between the text layers open up on scroll */
.date{z-index:4;top:126.5cqw;left:13cqw;width:74cqw;aspect-ratio:1000/174;display:grid;place-items:center;background:url(date-plaque.svg) center/100% 100% no-repeat;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));transform:translate3d(0,calc(var(--sy) * -.06px),0);animation-delay:.6s}
.date-txt{font-family:var(--display);font-size:8.8cqw;letter-spacing:.06em;line-height:1;padding-top:.5cqw}
.venue{z-index:4;top:141cqw;left:0;right:0;text-align:center;animation-delay:.75s}
.venue img{display:block;width:36cqw;height:auto;margin:0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.venue .addr{display:block;margin-top:1.2cqw;font-size:2.6cqw;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.95)}
/* Tablet / desktop: landscape stage fitted to full width, fading into black */
@media (min-width:760px){
  .stage{top:-6%;height:auto}
  .stage img{height:auto;object-fit:contain;object-position:center top;transform:translate3d(0,calc(var(--sy) * .35px),0);-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%)}
  .scene-fade{height:42%}
}
.hero-cta-wrap{max-width:560px;margin:0 auto;padding:0 var(--gutter)}
.hero-cta{display:grid;gap:12px;margin-top:18px}
.hero-note{margin:14px 0 0;text-align:center;font-size:.76rem;color:var(--muted);letter-spacing:.04em}
.hero-note a{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--line)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:4px;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-gold{color:#1b1304;background:linear-gradient(180deg,#f8e49a 0%,#d4af37 55%,#b58d26 100%);border-color:#f6df8c;box-shadow:0 10px 30px -8px rgba(212,175,55,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 34px -8px rgba(212,175,55,.8),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-outline{color:var(--gold-hi);background:rgba(212,175,55,.07);border-color:var(--gold)}
.btn-outline:hover{background:rgba(212,175,55,.15)}
.btn:active{transform:translateY(1px)}

/* Sections */
.content{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
.section{position:relative;min-width:0;max-width:100%;padding:26px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.section::before{content:'';position:absolute;inset:5px;border:1px solid rgba(212,175,55,.13);border-radius:3px;pointer-events:none}
.eyebrow{margin:0 0 6px;font-size:.62rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
h2{margin:0 0 18px;font-family:var(--serif);font-weight:700;font-size:1.4rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.rule{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:.6rem;margin:0 0 14px}
.rule::before,.rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* Countdown */
.countdown{text-align:center}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px}
.cd-cell{padding:12px 4px 10px;border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.4)}
.cd-num{display:block;font-family:var(--display);font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cd-lbl{display:block;margin-top:5px;font-size:.56rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);padding-left:.32em}
.cd-sub{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countdown.live .cd-sub{color:var(--gold-hi)}

/* Details list */
.details{list-style:none;margin:0;padding:0}
.details li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:14px 0;border-top:1px solid rgba(212,175,55,.14)}
.details li:first-child{border-top:0;padding-top:0}
.details .ic{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold-hi);background:rgba(212,175,55,.07)}
.details .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.details .k{display:block;font-size:.58rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.details .v{display:block;font-family:var(--serif);font-weight:700;font-size:.98rem;letter-spacing:.02em;line-height:1.35;color:var(--cream)}
.details .s{display:block;font-size:.84rem;color:var(--muted);margin-top:3px}
.details a.lnk{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--gold-hi);border-bottom:1px solid var(--line);display:inline-block;margin-top:8px;padding-bottom:1px}
.cal-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.cal-row .btn{min-height:46px;font-size:.66rem;padding:0 10px;letter-spacing:.14em}

/* About */
.lede{margin:0;font-size:1rem;line-height:1.8;color:var(--cream)}
.lede strong{color:var(--gold-hi);font-weight:600}
.lede em{font-style:italic;color:#fff}
.note{margin:16px 0 0;padding:14px 16px;border-left:2px solid var(--gold);background:rgba(212,175,55,.06);font-size:.86rem;line-height:1.6;color:var(--muted)}

/* Catalog timeline */
.catalog{list-style:none;display:flex;gap:10px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent;-webkit-overflow-scrolling:touch}
.catalog>li{flex:0 0 150px;scroll-snap-align:start;min-width:0}
.album{height:100%;position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;background:#000;overflow:hidden;box-shadow:0 14px 30px -12px rgba(0,0,0,.9);text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.album:hover,.album:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 34px -12px rgba(0,0,0,.95),0 0 24px -8px rgba(212,175,55,.5)}
.album .play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-32px 0 0 -22px;border-radius:50%;display:grid;place-items:center;color:#1b1304;background:linear-gradient(180deg,#f8e49a,#d4af37 60%,#b58d26);box-shadow:0 6px 18px rgba(0,0,0,.6);opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.album .play svg{width:18px;height:18px;margin-left:2px;fill:currentColor}
.album:hover .play,.album:focus-visible .play{opacity:1;transform:scale(1)}
.listen-hint{margin:4px 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-align:center}
.listen-hint strong{color:var(--gold-hi);font-weight:600}
.album picture,.album img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.album .yr{position:absolute;top:8px;left:8px;font-family:var(--display);font-size:.95rem;line-height:1;letter-spacing:.08em;padding:4px 7px 3px 8px;color:var(--gold-hi);background:rgba(7,6,5,.82);border:1px solid rgba(212,175,55,.45);border-radius:2px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.album .ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;padding:9px 10px 10px;font-family:var(--serif);font-weight:700;font-size:.62rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);background:linear-gradient(180deg,rgba(18,14,10,.96),rgba(10,8,6,1));border-top:1px solid rgba(212,175,55,.18)}
.album.new{border-color:var(--gold);box-shadow:0 0 24px -6px rgba(212,175,55,.5)}
.album.new .ti{color:var(--gold-hi)}
.album .tag{position:absolute;top:8px;right:8px;font-size:.5rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#1b1304;background:var(--gold);padding:4px 6px 3px 7px;border-radius:2px;line-height:1}

/* Partners */
.partners{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;padding:14px 12px;background:#000;border-radius:4px;border:1px solid var(--line)}
.partners img{height:54px;width:auto;flex:none}
@media (min-width:720px){.partners img{height:64px}}
.sponsors-line{margin:14px 0 0;text-align:center;font-family:var(--serif);font-weight:700;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}

/* Contact */
.contact{text-align:center}
.contact h2{margin-bottom:8px}
.phone{display:block;font-family:var(--display);font-size:2.9rem;letter-spacing:.06em;line-height:1;text-decoration:none;margin:4px 0 16px}
.contact .btn{width:100%}
.contact-sub{margin:14px 0 0;font-size:.8rem;color:var(--muted)}
.contact-sub a{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid var(--line)}

/* Footer */
footer{padding:28px var(--gutter) calc(170px + env(safe-area-inset-bottom));text-align:center;font-size:.66rem;letter-spacing:.08em;color:var(--muted);line-height:1.9}
footer .site{font-family:var(--serif);font-weight:900;font-size:1.05rem;letter-spacing:.3em;margin-bottom:6px;padding-left:.3em}

/* Sticky mobile action bar */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(7,6,5,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s ease}
.stickybar.show{transform:none}
.stickybar .btn{min-height:50px;font-size:.72rem;padding:0 8px;letter-spacing:.14em}

/* Mini audio player (docked above the sticky bar on phones, bottom-right on desktop) */
.player{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:12px;padding:7px 16px 7px 7px;background:rgba(7,6,5,.93);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 34px -10px rgba(0,0,0,.9),0 0 30px -12px rgba(212,175,55,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:bottom .35s ease}
body.has-bar .player{bottom:calc(84px + env(safe-area-inset-bottom))}
.player-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #f6df8c;background:linear-gradient(180deg,#f8e49a,#d4af37 60%,#b58d26);color:#1b1304;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 6px 16px -6px rgba(212,175,55,.7);-webkit-tap-highlight-color:transparent}
.player-btn svg{width:20px;height:20px;fill:currentColor}
.player-btn .ico-play{margin-left:2px}
.player-btn .ico-pause{display:none}
.player[data-state="playing"] .ico-play{display:none}
.player[data-state="playing"] .ico-pause{display:block}
.player-meta{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.2}
.player-title{font-family:var(--serif);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap}
.player[data-state="playing"] .player-sub{color:var(--gold)}
.eq{flex:none;display:flex;align-items:flex-end;gap:2px;height:16px}
.eq i{display:block;width:3px;height:4px;border-radius:1px;background:var(--gold);opacity:.35}
.player[data-state="playing"] .eq i{opacity:1;animation:eq .9s ease-in-out infinite alternate}
.player[data-state="playing"] .eq i:nth-child(2){animation-delay:-.3s}
.player[data-state="playing"] .eq i:nth-child(3){animation-delay:-.6s}
.player[data-state="playing"] .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:4px}to{height:16px}}
.player-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(212,175,55,.15)}
.player-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Tablet */
@media (min-width:720px){
  :root{--gutter:28px}
  .hero-cta{grid-template-columns:1fr 1fr}
  .cd-num{font-size:3.2rem}
  .album{flex-basis:150px}
  .contact .btn{width:auto;min-width:320px}
  h2{font-size:1.55rem}
}
/* Desktop: flyer pinned left, details scroll on the right */
@media (min-width:1024px){
  .topbar{justify-content:space-between;padding:14px 36px}
  .presenters{text-align:left}
  .presenters small{display:inline;margin-left:14px}
  .topbar .btn{display:inline-flex;min-height:44px;font-size:.7rem;padding:0 18px}
  .page{padding-top:16px;padding-bottom:60px}
  .catalog{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
  .album{flex:none}
  .stickybar{display:none}
  footer{padding-bottom:110px}
  .player,body.has-bar .player{left:auto;right:24px;bottom:24px;width:340px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .btn,.stickybar,.player{transition:none}
  .player[data-state="playing"] .eq i{animation:none;height:10px}
}