/*
Theme Name: AristoMedia Hub
Theme URI: https://aristomedia.com
Author: The AristoMedia Group
Description: Custom single-page hub theme for The AristoMedia Group — bold retro "gig poster" style with editable divisions, timeline, and copy. Built as a front-page template. Requires a static front page set to a page using the "Front Page" template (front-page.php loads automatically).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: aristomedia-hub
*/


  *{margin:0;padding:0;box-sizing:border-box}
  :root{
    --navy:#141C42; --navy2:#1E2A63; --grape:#3A2A6B; --orange:#FF6B35; --gold:#FFC247;
    --cream:#FBF3E0; --red:#E22A1C; --ink:#16131C; --muted:#6f6a7d;
  }
  html{scroll-behavior:smooth}
  body{background:var(--cream);color:var(--ink);
    font-family:"Figtree","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
  .disp{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
  .wrap{max-width:1180px;margin:0 auto;padding:0 40px}
  @media(max-width:680px){.wrap{padding:0 22px}}
  a{color:inherit}

  /* NAV */
  header.nav{position:absolute;top:0;left:0;right:0;z-index:20}
  .nav-in{display:flex;align-items:center;justify-content:flex-end;height:96px}
  .nav-right{display:flex;align-items:center;gap:14px}
  .nav-link{color:var(--cream);text-decoration:none;font-weight:600;font-size:14px;margin-right:8px;opacity:.9}
  .nav-link:hover{opacity:1}
  .pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:14px;
    padding:11px 20px;border-radius:100px;white-space:nowrap;transition:transform .15s,box-shadow .15s}
  .pill:hover{transform:translateY(-2px)}
  .pill-gold{background:var(--gold);color:var(--ink);box-shadow:0 6px 0 #C8911F}
  .pill-gold:hover{box-shadow:0 8px 0 #C8911F}
  @media(max-width:760px){.nav-link{display:none}}
  @media(max-width:760px){.nav-in{height:96px} .brand img{height:62px}}

  /* HERO */
  .hero{position:relative;overflow:hidden;min-height:880px;display:flex;align-items:center;
    background:#141C42;padding:118px 0 96px}
  .hero .photo{position:absolute;inset:0;z-index:0;
    background-position:center 50%;background-size:cover;background-repeat:no-repeat;will-change:transform;
    filter:contrast(1.11) saturate(1.15) brightness(1.05)}
  .hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg, rgba(10,12,25,.66) 0%, rgba(10,12,25,.52) 32%, rgba(10,12,25,.20) 58%, rgba(10,12,25,.03) 100%)}
  .hero .scrim-b{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
    background:linear-gradient(0deg, rgba(12,16,40,.40) 0%, rgba(12,16,40,0) 100%)}
  /* ambient motion */
  .hero .clouds{position:absolute;top:3%;left:-20%;width:140%;height:46%;z-index:1;pointer-events:none;opacity:.34;
    background:radial-gradient(70px 24px at 12% 40%,rgba(255,246,232,.8),transparent 70%),
      radial-gradient(100px 32px at 42% 24%,rgba(255,238,216,.7),transparent 70%),
      radial-gradient(80px 26px at 72% 50%,rgba(255,243,224,.65),transparent 70%),
      radial-gradient(60px 22px at 90% 30%,rgba(255,238,216,.6),transparent 70%);
    animation:drift 90s linear infinite}
  @keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(8%)}}
  .hero .sunset{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;
    background:linear-gradient(180deg,#ff7a3c 0%,transparent 55%);animation:huey 18s ease-in-out infinite}
  @keyframes huey{0%,100%{filter:hue-rotate(0deg);opacity:.35}50%{filter:hue-rotate(-16deg);opacity:.6}}
  .hero .glow{position:absolute;left:51%;top:66%;width:260px;height:190px;z-index:1;pointer-events:none;
    transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;
    background:radial-gradient(circle,rgba(255,184,92,.5),transparent 70%);animation:flick 6s ease-in-out infinite}
  @keyframes flick{0%,100%{opacity:.5}45%{opacity:.85}70%{opacity:.6}}
  .hero .fly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9a8;
    box-shadow:0 0 8px 2px rgba(255,220,140,.85);z-index:2;pointer-events:none;opacity:0;animation:fly 9s ease-in-out infinite}
  @keyframes fly{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}50%{opacity:.7;transform:translate(20px,-24px)}80%{opacity:1}100%{opacity:0;transform:translate(-10px,-50px)}}
  .f1{left:30%;bottom:23%} .f2{left:46%;bottom:30%;animation-delay:2.4s} .f3{left:62%;bottom:19%;animation-delay:4.1s}
  .f4{left:74%;bottom:33%;animation-delay:6s} .f5{left:38%;bottom:37%;animation-delay:7.5s}
  .hero .vinyl{position:absolute;right:-58px;bottom:-58px;width:210px;height:210px;z-index:2;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%,#000 0 2px,#1d1d1d 2px 4px);
    box-shadow:0 0 0 3px #0a0a0a,0 10px 30px rgba(0,0,0,.5);opacity:.85;animation:spin 12s linear infinite}
  .hero .vinyl::before{content:"";position:absolute;inset:36%;border-radius:50%;
    background:radial-gradient(circle,#caa24a 0 70%,#7c5e1e 71%);box-shadow:0 0 0 2px #000}
  .hero .vinyl::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
    background:#0a0a0a;transform:translate(-50%,-50%)}
  @media(max-width:680px){.hero .vinyl{display:none}}
  /* drifting flock of tiny birds */
  .hero .flock{position:absolute;top:15%;left:0;width:60px;height:30px;z-index:2;pointer-events:none;opacity:.5;
    color:rgba(22,17,28,.7);animation:flydrift 52s linear infinite}
  .hero .flock svg{display:block;width:100%;height:100%;animation:flap 1.3s ease-in-out infinite}
  @keyframes flydrift{0%{transform:translate(-12vw,12px)}100%{transform:translate(118vw,-26px)}}
  @keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
  /* chimney smoke rising from the roofline */
  .hero .smoke{position:absolute;left:35.5%;bottom:47%;width:30px;height:30px;z-index:2;pointer-events:none}
  .hero .smoke span{position:absolute;bottom:0;left:0;width:24px;height:24px;border-radius:50%;
    background:radial-gradient(circle,rgba(222,222,228,.5),transparent 70%);opacity:0;animation:rise 9s ease-in infinite}
  .hero .smoke span:nth-child(2){animation-delay:3s}
  .hero .smoke span:nth-child(3){animation-delay:6s}
  @keyframes rise{0%{opacity:0;transform:translateY(0) scale(.45)}18%{opacity:.45}
    100%{opacity:0;transform:translateY(-130px) translateX(20px) scale(1.9)}}
  /* marquee bulbs pulsing in sequence near the sign */
  .hero .marquee{position:absolute;left:50.5%;top:73%;z-index:2;pointer-events:none;display:flex;gap:12px;
    transform:translateX(-50%)}
  .hero .marquee i{width:6px;height:6px;border-radius:50%;background:#ffd27a;
    box-shadow:0 0 7px 2px rgba(255,196,108,.8);opacity:.4;animation:bulb 1.6s ease-in-out infinite}
  .hero .marquee i:nth-child(2){animation-delay:.2s}
  .hero .marquee i:nth-child(3){animation-delay:.4s}
  .hero .marquee i:nth-child(4){animation-delay:.6s}
  .hero .marquee i:nth-child(5){animation-delay:.8s}
  @keyframes bulb{0%,100%{opacity:.35}50%{opacity:1}}
  @media(max-width:680px){.hero .marquee,.hero .smoke{display:none}}
  @media(prefers-reduced-motion:reduce){.hero *{animation:none!important}}
  .hero-in{position:relative;z-index:5;text-align:left;max-width:none;margin:0;padding-left:5vw}
  .hero-in>*{max-width:520px}
  .kicker{display:inline-block;margin-top:22px;background:var(--red);color:var(--cream);font-weight:800;
    font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:100px;
    transform:rotate(-2deg);box-shadow:0 4px 0 rgba(0,0,0,.18)}
  .hero h1{margin-top:24px;color:var(--cream);font-size:82px;line-height:.92;
    text-shadow:6px 6px 0 var(--red);transform:skewX(-5deg)}
  .hero h1 .l2{color:var(--gold);text-shadow:6px 6px 0 var(--red)}
  .hero h1{animation:hglow 4s ease-in-out infinite}
  @keyframes hglow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,140,60,0))}50%{filter:drop-shadow(0 0 22px rgba(255,140,60,.55))}}
  .hero .tagsub{color:var(--gold);font-weight:800;font-size:21px;margin-top:18px;
    text-shadow:0 2px 8px rgba(0,0,0,.55);transform:skewX(-4deg);letter-spacing:.01em}
  @media(max-width:480px){.hero .tagsub{font-size:17px}}
  .hero .lead{color:var(--cream);font-size:19px;font-weight:500;max-width:52ch;margin:28px 0 0;
    line-height:1.65;text-shadow:0 2px 10px rgba(0,0,0,.55)}
  .hero-actions{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
  .pill-red{background:var(--red);color:var(--cream);box-shadow:0 6px 0 #9E1A10;font-size:15px;padding:15px 28px}
  .pill-red:hover{box-shadow:0 9px 0 #9E1A10}
  .pill-cream{background:var(--cream);color:var(--ink);box-shadow:0 6px 0 #C9BE9C;font-size:15px;padding:15px 28px}
  .pill-cream:hover{box-shadow:0 9px 0 #C9BE9C}
  .addr-tag{position:absolute;right:26px;bottom:22px;z-index:6;color:var(--cream);font-weight:700;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(12,16,40,.45);
    padding:7px 13px;border-radius:100px;border:1px solid rgba(251,243,224,.25);text-shadow:0 1px 4px rgba(0,0,0,.5)}
  @media(max-width:860px){.hero h1{font-size:62px} .hero{padding:120px 0 90px;min-height:600px}
    .hero .scrim{background:linear-gradient(180deg, rgba(12,16,40,.5) 0%, rgba(12,16,40,.8) 100%)}}
  @media(max-width:480px){.hero h1{font-size:46px} .addr-tag{display:none}}

  /* INTRO band */
  .intro{background:var(--cream);padding:74px 0 20px;text-align:center;position:relative;z-index:2}
  .intro .in{max-width:900px;margin:0 auto}
  .intro .lead{font-size:28px;line-height:1.32;font-weight:700;color:var(--ink)}
  .intro .lead b{color:var(--red);font-weight:700}
  .intro p.body{margin-top:22px;font-size:17px;line-height:1.78;color:#4a4550;font-weight:500}
  @media(max-width:680px){.intro{padding:54px 0 12px} .intro .lead{font-size:22px}}

  /* DIVISIONS — emotional scene tiles */
  .divisions{background:var(--cream);padding:54px 0 48px}
  .band-head{text-align:center;margin-bottom:42px}
  .band-head .eye{color:var(--red);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
  .band-head h2{font-size:60px;line-height:.95;margin-top:10px;color:var(--ink);transform:skewX(-5deg)}
  .band-head p{color:var(--muted);font-size:17px;margin-top:16px;font-weight:500}
  .lineup{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:18px 30px;margin-top:34px}
  .lineup .lu{display:inline-flex;align-items:center;opacity:.8;transition:opacity .18s,transform .18s}
  .lineup .lu:hover{opacity:1;transform:translateY(-2px)}
  .lineup .lu img{height:64px;width:auto;display:block}
  @media(max-width:680px){.lineup{flex-wrap:wrap;gap:16px 24px} .lineup .lu img{height:42px}}
  @media(max-width:680px){.band-head h2{font-size:40px}}
  .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .dcard{position:relative;background:#fff;border:2px solid var(--ink);border-radius:14px;
    box-shadow:5px 6px 0 rgba(20,12,4,.14);padding:32px 30px 24px;
    text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
    transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s}
  .dcard::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:7px;
    background:var(--accent);border-radius:13px 13px 0 0}
  .dcard:hover{transform:translateY(-5px);box-shadow:8px 12px 0 var(--accent)}
  .dhead{padding-bottom:18px;margin-bottom:20px;border-bottom:2px solid rgba(27,18,5,.1)}
  .dlogo{height:40px;width:auto;max-width:190px;display:block}
  .demo{display:block;font-size:24px;line-height:.95;color:var(--accent);margin-top:15px;transform:skewX(-4deg)}
  .dhead--other{min-height:42px}
  .dhead--other .demo{margin-top:0;font-size:30px}
  .dsub{display:block;margin-top:10px;font-weight:800;font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;color:#6a5238;transform:none}
  .dserv{list-style:none;margin:0 0 20px;padding:0;flex:1}
  .dserv li{position:relative;padding:6px 0 6px 22px;font-size:16px;font-weight:500;color:#3a3540;line-height:1.45}
  .dserv li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;
    background:var(--accent)}
  .dlink{margin-top:auto;padding-top:16px;border-top:2px solid rgba(27,18,5,.08);
    font-weight:800;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
  .dlink .ar{transition:transform .2s;color:var(--accent)}
  .dcard:hover .dlink .ar{transform:translateX(5px)}
  @media(max-width:980px){.dgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.dgrid{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important}}

  /* page-wide floating dust + fireflies (subtle, alive) */
  .dustfield{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  .dustfield .mote{position:absolute;border-radius:50%;background:rgba(255,228,170,.55);
    box-shadow:0 0 6px 1px rgba(255,206,138,.45);opacity:0;animation-name:floatmote;animation-timing-function:linear;animation-iteration-count:infinite}
  @keyframes floatmote{0%{opacity:0;transform:translateY(0) translateX(0)}12%{opacity:.55}
    50%{opacity:.7}88%{opacity:.4}100%{opacity:0;transform:translateY(-130px) translateX(26px)}}
  @media(prefers-reduced-motion:reduce){.dustfield{display:none}}

  /* subtle cream texture — paper grain + faint vinyl grooves, very low opacity */
  .tex{position:relative}
  .tex::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      repeating-radial-gradient(circle at 50% 130%, rgba(70,46,18,.035) 0 1px, transparent 1px 4px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity:.55;mix-blend-mode:multiply}
  .tex>.wrap{position:relative;z-index:1}

  /* hidden Nashville Easter eggs */
  .egg{position:absolute;z-index:0;pointer-events:none;color:#1b1205;opacity:.05}
  .egg svg{display:block;width:100%;height:100%;fill:currentColor}

  /* LEGACY */
  .legacy{background:var(--cream);padding:34px 0 24px}
  .legacy-head{max-width:780px;margin:0 auto 38px;text-align:center}
  .legacy-head .eye{color:var(--red);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
  .legacy-head h2{font-size:60px;line-height:.95;margin-top:10px;color:var(--ink);transform:skewX(-5deg)}
  .legacy-lead{color:#403c49;font-size:18px;line-height:1.72;margin-top:20px;font-weight:500}
  .legacy-lead em{font-style:italic;color:var(--red)}
  .timeline{text-align:center;font-size:0;margin:0 auto 48px;max-width:1160px}
  .ms{display:inline-block;vertical-align:top;width:104px;margin:7px 6px;background:#fff;border:3px solid var(--ink);
    border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:14px 7px 12px;position:relative;overflow:hidden}
  .ms::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--accent)}
  .ms .yr{display:block;font-family:"Anton",sans-serif;font-size:29px;color:var(--accent);line-height:1;margin-top:4px}
  .ms .ev{display:block;font-size:11.5px;font-weight:700;color:#403c49;margin-top:8px;line-height:1.35}
  .story-panel{max-width:830px;margin:0 auto;background:#fff;border:3px solid var(--ink);border-radius:20px;
    box-shadow:8px 8px 0 var(--ink);padding:46px 52px}
  .story-title{font-size:34px;line-height:1;color:var(--ink);margin-bottom:22px;padding-bottom:18px;
    border-bottom:3px solid var(--red);transform:skewX(-4deg);display:inline-block}
  .story-panel p{color:#33303b;font-size:16px;line-height:1.78;margin-bottom:18px}
  .story-panel p:last-child{margin-bottom:0}
  .story-panel p em{font-style:italic}
  .story-panel .sig{margin-top:28px;padding-top:22px;border-top:2px solid #efe7d2;font-weight:800;color:var(--ink);font-size:16px}
  .story-panel .sig span{display:block;font-weight:600;color:var(--muted);font-size:13.5px;margin-top:3px}
  @media(max-width:680px){.legacy-head h2{font-size:40px} .ms{width:43%} .story-panel{padding:30px 24px}}

  /* STRIPE / STATS */
  .stripe{background:var(--navy);color:var(--cream);margin-top:56px;position:relative;overflow:hidden;
    border-top:5px solid var(--ink);border-bottom:5px solid var(--ink)}
  .stripe .wrap{position:relative;z-index:1}
  .stripe-in{display:flex;flex-wrap:wrap;align-items:center;padding:62px 0}
  .stripe-copy{flex:1 1 340px;padding-right:48px}
  .stripe-copy h3{font-size:44px;line-height:.98;transform:skewX(-5deg);color:var(--gold)}
  .stripe-copy p{margin-top:18px;font-size:16px;color:#D9DAEC;line-height:1.7;max-width:46ch}
  .stat-grid{flex:1 1 340px;font-size:0}
  .stat{display:inline-block;width:50%;vertical-align:top;padding:14px 0}
  .stat .n{font-family:"Anton",sans-serif;font-size:54px;line-height:1;color:var(--cream)}
  .stat .n em{font-style:normal;color:var(--orange)}
  .stat .l{font-size:13px;color:#AEB2D0;margin-top:6px;font-weight:600;letter-spacing:.02em}
  @media(max-width:760px){.stripe-copy{padding-right:0;margin-bottom:30px} .stripe-copy h3{font-size:34px}}

  /* PRESS-RELEASE SIGNUP */
  .signup{background:var(--navy2);color:var(--cream);border-bottom:5px solid var(--ink);padding:42px 0}
  .signup-in{display:flex;align-items:center;justify-content:space-between;gap:22px 34px;flex-wrap:wrap}
  .signup-copy h3{font-size:30px;line-height:1;color:var(--gold);transform:skewX(-4deg)}
  .signup-copy p{margin-top:9px;font-size:15px;color:#D9DAEC;font-weight:500}
  @media(max-width:680px){.signup-copy h3{font-size:23px}}

  /* FOOTER CTA */
  .cta{background:var(--orange);color:var(--ink);border-bottom:6px solid var(--ink);position:relative;overflow:hidden;
    text-align:center;padding:84px 0}
  .cta .wrap{position:relative;z-index:1}
  .cta h2{font-size:66px;line-height:.92;color:var(--cream);text-shadow:5px 5px 0 var(--red);transform:skewX(-5deg)}
  .cta p{font-size:18px;font-weight:600;margin:20px auto 0;max-width:48ch;color:#3a1c12}
  .cta .pill{margin-top:30px}
  @media(max-width:680px){.cta h2{font-size:42px}}
  footer{background:var(--navy);color:var(--cream);padding:60px 0 46px}
  .foot-grid{display:flex;flex-wrap:wrap;gap:26px 30px}
  .foot-grid>div{flex:1 1 190px}
  .c-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800;display:block;margin-bottom:7px}
  .c-val{font-size:15px;color:var(--cream)}
  .foot-grid a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(251,243,224,.3)}
  .foot-grid a:hover{border-color:var(--cream)}
  .foot-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    margin-top:46px;padding-top:24px;border-top:1px solid rgba(251,243,224,.18)}
  .foot-bar img{height:24px;opacity:.95}
  .foot-bar .copy{font-size:12px;color:#AEB2D0}