/* ==========================================================================
   Arley Records — Homepage-only styles
   File name matches functions.php's auto-load convention: for
   page-templates/template-homepage.php, it loads assets/css/page-template-homepage.css
   ========================================================================== */

body{ overflow-x:hidden; }
.script{ font-family:var(--font-script); font-weight:700; }
img{ max-width:100%; display:block; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:0.035; z-index:9999;
  background-image:
    repeating-linear-gradient(0deg, #000 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, #000 0px, transparent 1px, transparent 2px);
}

/* ---------- HERO / TICKET ---------- */
.hero{ position:relative; background:var(--navy-dark); color:var(--cream); padding:60px 32px 0; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 15% 20%, rgba(201,144,58,0.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(201,144,58,0.10), transparent 50%); }
.ticket{ position:relative; max-width:760px; margin:0 auto; background:var(--cream); color:var(--navy);
  border-radius:6px; display:grid; grid-template-columns:1fr; box-shadow:0 30px 60px rgba(0,0,0,0.4); overflow:hidden; }
.ticket-main{ padding:48px 48px 44px; position:relative; }
.eyebrow{ font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:16px; }
.hero-logo{ width:210px; margin-bottom:18px; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.15)); }
.hero h1{ font-size:2.2rem; line-height:1.08; margin-bottom:16px; color:var(--navy); }
.hero h1 span{ color:var(--gold); }
.hero p{ font-size:1rem; max-width:440px; color:#374a80; margin-bottom:24px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:760px){ .ticket-main{ padding:40px 28px 32px; } .hero h1{ font-size:1.8rem; } }

/* ---------- MANIFESTO TICKER ---------- */
.ticker-band{ background:var(--gold); color:var(--navy-dark); overflow:hidden; padding:14px 0; border-top:2px solid var(--navy-dark); border-bottom:2px solid var(--navy-dark); }
.ticker-track{ display:flex; white-space:nowrap; width:max-content; animation:ticker 32s linear infinite; }
.ticker-track span{ font-family:var(--font-display); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; padding:0 28px; display:inline-flex; align-items:center; gap:28px; }
.ticker-track span::after{ content:"\2605"; color:var(--navy-dark); font-size:0.7rem; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ---------- DIVIDER ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; padding:26px 32px; background:var(--cream); }
.divider .line{ flex:1; max-width:340px; border-top:2px dashed var(--navy-light); opacity:0.4; }
.divider .star{ color:var(--gold); font-size:1.1rem; }

/* ---------- SHARED SECTION ---------- */
section.block{ padding:76px 32px; }
.block-head{ text-align:center; max-width:660px; margin:0 auto 50px; }
.block-head h2{ font-size:2rem; margin-bottom:14px; }
.block-head p{ color:#4a5573; font-size:1rem; }

/* ---------- FOUNDER ---------- */
.founder{ background:var(--navy-dark); color:var(--cream); }
.founder-inner{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:center; }
.founder-photo{ aspect-ratio:1; background:linear-gradient(145deg,var(--navy),var(--navy-light)); border:3px solid var(--gold); display:flex; align-items:center; justify-content:center; position:relative; }
.founder-photo .star-mark{ font-size:2.4rem; color:var(--gold); }
.founder-copy .block-eyebrow{ text-align:left; }
.founder-copy h2{ font-size:1.9rem; margin-bottom:6px; text-align:left; }
.founder-role{ font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--silver); margin-bottom:20px; }
.founder-copy p{ color:#c3cbe0; margin-bottom:16px; font-size:0.98rem; }
.founder-quote{ font-family:var(--font-script); font-size:1.5rem; color:var(--gold-light); margin-top:20px; line-height:1.3; }
@media (max-width:800px){ .founder-inner{ grid-template-columns:1fr; text-align:center; } .founder-copy h2, .founder-copy .block-eyebrow{ text-align:center; } .founder-photo{ max-width:220px; margin:0 auto; } }

/* ---------- ECOSYSTEM ---------- */
.ecosystem-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; max-width:1180px; margin:0 auto; }
.eco-card{ background:var(--white); border:1.5px solid var(--navy); padding:26px 18px; text-align:center; }
.eco-mark{ width:34px; height:34px; margin:0 auto 14px; border-radius:50%; background:var(--gold); }
.eco-card h3{ font-size:0.9rem; margin-bottom:8px; }
.eco-card p{ font-size:0.82rem; color:#4a5573; }
@media (max-width:900px){ .ecosystem-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- RELEASES ---------- */
.releases{ background:var(--navy-dark); color:var(--cream); }
.releases .block-head p{ color:#b9c2d9; }
.release-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1180px; margin:0 auto; }
.release-card{ background:rgba(244,240,230,0.04); border:1px solid rgba(201,144,58,0.35); overflow:hidden; transition:transform .2s ease; }
.release-card:hover{ transform:translateY(-6px); }
.release-swatch{ height:130px; position:relative; }
.release-swatch.v1{ background:linear-gradient(135deg,#5b3a8f,#C9903A); }
.release-swatch.v2{ background:linear-gradient(135deg,#2b3f7a,#9BA3B2); }
.release-swatch.v3{ background:linear-gradient(135deg,#8a5a1f,#1a1a1a); }
.release-body{ padding:24px 22px 26px; }
.release-vol{ font-family:var(--font-display); font-size:0.68rem; letter-spacing:0.18em; color:var(--gold); margin-bottom:8px; font-weight:700; }
.release-body h3{ font-size:1.15rem; margin-bottom:8px; text-transform:none; letter-spacing:0; }
.release-body p{ font-size:0.88rem; color:#b9c2d9; margin-bottom:12px; }
.release-meta{ font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.08em; color:var(--silver); text-transform:uppercase; }
@media (max-width:900px){ .release-grid{ grid-template-columns:1fr; } }

/* ---------- ARTIST DEAL PRINCIPLES ---------- */
.principles{ background:var(--cream-2); }
.principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto; }
.principle-card{ background:var(--white); border-left:4px solid var(--gold); padding:26px 24px; }
.principle-card h4{ font-family:var(--font-display); font-size:0.92rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.principle-card p{ font-size:0.88rem; color:#4a5573; }
@media (max-width:800px){ .principle-grid{ grid-template-columns:1fr; } }

/* ---------- ARTISTS (3-step) ---------- */
.artists{ background:var(--navy); color:var(--cream); }
.artists .block-head p{ color:#c3cbe0; }
.artist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto; }
.artist-card{ background:rgba(244,240,230,0.05); border:1px solid rgba(201,144,58,0.35); padding:32px 26px; text-align:center; transition:transform .2s ease, background .2s ease; }
.artist-card:hover{ transform:translateY(-6px); background:rgba(244,240,230,0.09); }
.artist-num{ font-family:var(--font-display); color:var(--gold); font-size:0.76rem; letter-spacing:0.15em; margin-bottom:14px; }
.artist-card h3{ font-size:1.02rem; margin-bottom:10px; }
.artist-card p{ font-size:0.9rem; color:#c3cbe0; }
@media (max-width:760px){ .artist-grid{ grid-template-columns:1fr; } }

/* ---------- FAN ZONE TEASER ---------- */
.fanzone{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1100px; margin:0 auto; align-items:center; padding:0 32px 78px; }
.fan-visual{ background:var(--cream-2); border:2px solid var(--navy); padding:34px; position:relative; }
.fan-visual::before{ content:"FAN WALL"; position:absolute; top:-13px; left:20px; background:var(--gold); color:var(--navy-dark); font-family:var(--font-display); font-size:0.66rem; letter-spacing:0.2em; padding:4px 12px; font-weight:700; }
.fan-post{ background:var(--white); padding:15px 18px; margin-bottom:12px; border-left:3px solid var(--gold); font-family:var(--font-body); font-size:0.9rem; color:#374a80; }
.fan-post:last-child{ margin-bottom:0; }
.fan-post .who{ font-family:var(--font-display); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-bottom:4px; font-weight:600; }
.fan-copy h2{ font-size:1.9rem; margin-bottom:16px; }
.fan-copy p{ color:#4a5573; margin-bottom:24px; }
@media (max-width:860px){ .fanzone{ grid-template-columns:1fr; } }

/* ---------- LOCATOR (teaser only — not a real submitted form) ---------- */
.locator{ background:var(--cream-2); }
.locator-inner{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; border:2px solid var(--navy); }
.locator-map{ background:var(--navy); padding:40px; color:var(--cream); position:relative; min-height:300px; }
.pin{ position:absolute; width:12px; height:12px; background:var(--gold); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.locator-map h3{ font-size:1.25rem; margin-bottom:12px; }
.locator-map p{ color:#c3cbe0; font-size:0.9rem; max-width:280px; }
.locator-form{ background:var(--cream); padding:38px; }
.locator-form h3{ font-size:1.02rem; margin-bottom:8px; }
.locator-form p{ font-size:0.86rem; color:#4a5573; margin-bottom:18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-family:var(--font-display); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); margin-bottom:6px; font-weight:600; }
.field input, .field select{ width:100%; padding:11px 12px; border:1.5px solid var(--navy-light); background:var(--white); font-family:var(--font-body); font-size:0.9rem; color:var(--navy); }
@media (max-width:760px){ .locator-inner{ grid-template-columns:1fr; } }

/* ---------- MERCH ---------- */
.merch{ background:var(--navy-dark); color:var(--cream); }
.merch .block-head p{ color:#b9c2d9; }
.merch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1180px; margin:0 auto; }
.merch-card{ background:var(--cream); color:var(--navy); position:relative; overflow:hidden; }
.merch-thumb{ height:145px; position:relative; display:flex; align-items:center; justify-content:center; }
.merch-thumb.v1{ background:linear-gradient(135deg,#5b3a8f,#C9903A); }
.merch-thumb.tee{ background:linear-gradient(135deg,var(--navy-light),var(--navy)); }
.merch-thumb.candle{ background:linear-gradient(135deg,#8a5a1f,#4a3010); }
.merch-thumb.bundle{ background:linear-gradient(135deg,var(--navy),#5b3a8f); }
.merch-thumb .mini-vinyl{ width:66px; height:66px; border-radius:50%; background:repeating-radial-gradient(circle at center, #0a1230 0px,#0a1230 2px, #1B2A5E 3px, #1B2A5E 5px); border:2px solid var(--gold); }
.merch-body{ padding:18px 18px 22px; }
.merch-tag{ font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; font-weight:700; }
.merch-body h4{ font-family:var(--font-display); font-size:0.92rem; text-transform:none; letter-spacing:0; margin-bottom:6px; }
.merch-price{ font-family:var(--font-display); font-size:0.84rem; color:var(--navy-light); font-weight:600; }
@media (max-width:900px){ .merch-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CTA STRIP ---------- */
.cta-strip{ background:var(--gold); color:var(--navy-dark); text-align:center; padding:60px 32px; }
.cta-strip h2{ font-size:1.9rem; margin-bottom:8px; }
.cta-strip .cta-sub{ font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px; color:#3a2c10; }
.cta-strip p{ max-width:480px; margin:0 auto 26px; color:#3a2c10; }
.cta-strip .btn-solid{ background:var(--navy-dark); border-color:var(--navy-dark); }
.cta-strip .btn-solid:hover{ background:var(--white); color:var(--navy-dark); border-color:var(--navy-dark); }

/* ---------- FOOTER TAGLINE (homepage-only addition to shared footer) ---- */
.footer-tagline{ font-family:var(--font-script); font-size:1.2rem; color:var(--gold-light); margin-top:12px; }
.footer-brand p{ font-size:0.86rem; max-width:260px; margin-top:10px; color:#8b98b8; }

/* ---------- INDIEPENDENCE DECLARATION PANEL ---------- */
.final-panel{ position:relative; width:100%; background:var(--white); padding:0; box-shadow:none; border-top:6px solid var(--gold); }
.final-corner-tag{ position:absolute; top:16px; right:16px; width:64px; height:64px; border-radius:50%; box-shadow:0 8px 18px rgba(0,0,0,0.28); z-index:3; overflow:hidden; border:2px solid var(--white); }
.final-corner-tag img{ width:100%; height:100%; object-fit:cover; display:block; }
.final-head{ display:flex; align-items:center; gap:18px; padding:32px 32px 22px; }
.final-seal{ width:80px; height:80px; border-radius:50%; flex-shrink:0; background: conic-gradient(from 180deg, var(--gold-light), var(--gold), #a97a2a, var(--gold), var(--gold-light)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,0.22); padding:4px; }
.final-seal-img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 35%; background:var(--white); border:1.5px solid var(--white); }
.final-head-text .kicker{ font-family:var(--font-display); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--silver); margin-bottom:4px; font-weight:600; }
.final-head-text h2{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-transform:uppercase; letter-spacing:0.01em; color:var(--navy-dark); line-height:1.1; }
.final-head-text h2 span{ color:var(--gold); }
.indie-word{ text-transform:none; display:inline-flex; align-items:baseline; gap:2px; }
.indie-highlight{ color:var(--gold); font-family:var(--font-script); font-weight:700; text-transform:uppercase; letter-spacing:0.01em; font-size:1.4em; }
.pendence-script{ color:var(--gold); font-family:var(--font-script); font-weight:700; font-size:1.5em; text-transform:none; letter-spacing:0; }
.final-divider{ width:100%; height:1px; background:linear-gradient(90deg, transparent, #d7d3c8, transparent); }
.final-body{ padding:24px 32px 8px; }
.final-body p{ font-family:var(--font-body); font-style:italic; font-size:0.94rem; line-height:1.6; color:#3a4a7a; }
.final-hairline{ width:50px; height:2px; background:var(--gold); margin:20px 32px 0; }
.final-footer{ display:flex; justify-content:space-between; align-items:center; padding:20px 32px 30px; margin-top:16px; }
.final-date{ font-family:var(--font-display); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); font-weight:700; }
.final-date span{ display:block; font-size:0.6rem; color:var(--silver); font-weight:500; letter-spacing:0.08em; margin-top:2px; }
.final-cta{ font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--white); background:var(--navy-dark); padding:11px 20px; transition:background .2s ease; }
