/* ===== Anderson Tombini — site styles ===== */

:root{
  --navy: #182236;
  --navy-deep: #121a2b;
  --navy-light: #24304a;
  --cream: #f2ddc8;
  --cream-soft: #efe9df;
  --paper: #faf7f2;
  --ink: #1c2233;
  --ink-soft: #5b6172;
  --accent: #d98a5e;
  --accent-soft: #e8b98f;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(28,34,51,0.12);
  --radius: 4px;
  --maxw: 1180px;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin:0 0 .4em; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--accent); color:#fff; padding:.6em 1em; z-index:999;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---- Language toggling ---- */
html.lang-pt .lang-en{ display:none; }
html.lang-en .lang-pt{ display:none; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(24,34,54,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 1.5rem;
  gap: 1rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; color:var(--cream); }
.logo-mark{
  font-family:'Oswald'; font-weight:600; font-style:italic; font-size:1.5rem;
  border:1.5px solid var(--cream); border-radius:50%;
  width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-mark.small{ margin:0 auto 1rem; }
.logo-name{ font-family: var(--font-display); font-weight:600; font-size:.85rem; line-height:1.15; letter-spacing:.04em; }

.main-nav ul{ display:flex; gap:1.6rem; }
.main-nav a{
  color: var(--cream-soft); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; padding:.3rem 0; border-bottom:1px solid transparent;
  transition: border-color .2s, color .2s;
}
.main-nav a:hover{ color:var(--accent-soft); border-color: var(--accent-soft); }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.lang-toggle{ display:flex; align-items:center; gap:.35rem; font-family: var(--font-display); font-size:.85rem; color: var(--cream-soft); }
.lang-btn{
  background:none; border:none; color: var(--cream-soft); cursor:pointer;
  font-family: var(--font-display); font-size:.85rem; letter-spacing:.04em; padding:.2rem .25rem;
}
.lang-btn.is-active{ color: var(--accent-soft); font-weight:600; }
.lang-sep{ color: var(--line); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--cream); width:100%; }

/* ===== Hero ===== */
.hero{ position:relative; min-height: 100vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 20%; }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,26,43,0.25) 0%, rgba(18,26,43,0.35) 45%, rgba(18,26,43,0.96) 92%);
}
.hero-content{
  position:relative; z-index:2; color:#fff;
  max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 4.5rem;
  width:100%;
}
.eyebrow-light{ color: var(--accent-soft); }
.eyebrow{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:.78rem; color: var(--accent); font-weight:600; margin-bottom:.6rem;
}
.eyebrow.center{ text-align:center; }
.hero h1{ font-size: clamp(2.8rem, 9vw, 5.5rem); line-height:.95; margin-bottom:.3rem; }
.hero-role{ font-family: var(--font-display); font-size: clamp(1.1rem,3vw,1.5rem); color: var(--cream); text-transform:uppercase; letter-spacing:.03em; margin:0 0 .5rem; }
.hero-tagline{ max-width: 34em; font-size:1.05rem; color: var(--cream-soft); margin:0 0 1.6rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; }

.scroll-cue{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  width:1px; height:40px; background: rgba(255,255,255,0.5); z-index:2;
}
.scroll-cue::after{
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--accent-soft);
  animation: cue 1.8s infinite;
}
@keyframes cue{ 0%{ bottom:0; opacity:1;} 100%{ bottom:36px; opacity:0;} }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:.85rem; font-weight:600; padding: .9rem 1.8rem; border-radius: var(--radius);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s;
  border: 1.5px solid transparent;
}
.btn-primary{ background: var(--accent); color:#1c1207; }
.btn-primary:hover{ transform: translateY(-2px); background: var(--accent-soft); }
.btn-ghost{ border-color: rgba(255,255,255,0.55); color:#fff; }
.btn-ghost:hover{ background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ===== Sections ===== */
.section{ padding: 5.5rem 1.5rem; }
.section-inner{ max-width: var(--maxw); margin:0 auto; }
.section-dark{ background: var(--navy); color: var(--cream-soft); }
.section-dark h2{ color:#fff; }
.section-dark .lead{ color: var(--cream-soft); }

.split{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 3.5rem; align-items:center; }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split-media{ position:relative; }
.split-media img{ width:100%; border-radius: var(--radius); box-shadow: 0 30px 60px -25px rgba(0,0,0,0.4); }
.media-tag{
  position:absolute; bottom:-.9rem; left:1.2rem; background:var(--accent); color:#1c1207;
  font-family: var(--font-display); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.5rem .9rem; border-radius: var(--radius); font-weight:600;
}

h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 .year{ color: var(--accent); }
.lead{ font-size:1.08rem; color: var(--ink-soft); max-width: 40em; margin: 0 0 1.4rem; }
.lead.center{ margin-left:auto; margin-right:auto; }
.center{ text-align:center; }

/* ---- Accordion ---- */
.accordion{ border-top:1px solid var(--line-dark); margin-top:1.2rem; }
.accordion + .accordion{ border-top:none; }
.accordion summary{
  cursor:pointer; padding: 1rem 0; font-family: var(--font-display);
  text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; list-style:none;
  border-bottom:1px solid var(--line-dark);
  color: var(--ink);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:'+'; font-size:1.3rem; font-weight:400; color: var(--accent); margin-left:1rem; flex-shrink:0;
}
.accordion[open] summary::after{ content:'\2212'; }
.accordion-body{ padding: 1.2rem 0 .4rem; }
.accordion-body p{ margin:0 0 1em; color: var(--ink-soft); }
.accordion-body p:last-child{ margin-bottom:0; }

.accordion-light summary{ color:#fff; border-bottom-color: var(--line); }
.accordion-light{ border-top-color: var(--line); }
.accordion-light .accordion-body p{ color: var(--cream-soft); }

.fine-print{ font-size:.85rem; color: var(--ink-soft); margin-top:1rem; }
.fine-print.center{ text-align:center; max-width: 44em; margin-left:auto; margin-right:auto; }
.section-dark .fine-print{ color: rgba(239,233,223,0.65); }

/* ---- Fact grid (album) ---- */
.fact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; margin: 1.6rem 0; }
.fact-grid li{ border-left:2px solid var(--accent); padding: .1rem 0 .1rem .9rem; }
.fact-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--accent-soft); font-family: var(--font-display); margin-bottom:.15rem; }
.fact-value{ display:block; font-size:.98rem; color:#fff; }
.fact-value em{ font-style:normal; opacity:.75; font-size:.85em; }

/* ---- Tracklist ---- */
.tracklist{ counter-reset: track; display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 2rem; }
.tracklist li{
  counter-increment: track; position:relative; padding-left: 2.1rem;
  color:#fff; font-size:.95rem; border-bottom:1px dashed var(--line); padding-bottom:.5rem;
}
.tracklist li::before{
  content: counter(track); position:absolute; left:0; top:0;
  color: var(--accent); font-family: var(--font-display); font-weight:600;
}

/* ---- Credit list (vinyl) ---- */
.credit-list li{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; padding:.65rem 0; border-bottom:1px solid var(--line-dark); align-items:baseline; }
.credit-name{ font-family: var(--font-display); font-weight:600; min-width:11em; color: var(--ink); }
.credit-role{ color: var(--ink-soft); font-size:.94rem; }

/* ===== Carousel ===== */
.carousel{ position:relative; margin: 2.4rem 0 1.6rem; overflow:hidden; border-radius: var(--radius); }
.carousel-track{ display:flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.carousel-slide{ min-width:100%; aspect-ratio: 16/9; background:#0d1420; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(18,26,43,0.55); color:#fff; border:none; width:2.6rem; height:2.6rem;
  border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.carousel-arrow:hover{ background: var(--accent); color:#1c1207; }
.carousel-arrow.prev{ left:1rem; }
.carousel-arrow.next{ right:1rem; }
.carousel-dots{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; }
.carousel-dots button{
  width:.5rem; height:.5rem; border-radius:50%; border:none; background: rgba(255,255,255,0.45); cursor:pointer; padding:0;
}
.carousel-dots button.is-active{ background: var(--accent); }

/* ---- Tour dates ---- */
.tour-dates{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; max-width: 900px; margin: 0 auto 1rem; }
.tour-date{
  border: 1px solid var(--line); border-radius: var(--radius); padding:1.3rem 1.4rem;
  display:flex; flex-direction:column; gap:.25rem;
}
.tour-date-date{ font-family: var(--font-display); font-size:1.3rem; color: var(--accent-soft); font-weight:600; }
.tour-date-place{ color:#fff; font-size:1rem; }
.tour-date-tag{ font-size:.8rem; color: rgba(239,233,223,0.6); text-transform:uppercase; letter-spacing:.05em; }

/* ===== Streaming ===== */
.streaming-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin: 2.2rem 0 1rem;
}
.streaming-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  border:1.5px solid var(--line-dark); border-radius: var(--radius);
  padding: 1rem 1rem; font-family: var(--font-display); text-transform:uppercase;
  letter-spacing:.03em; font-size:.85rem; font-weight:600; color: var(--ink);
  transition: border-color .2s, transform .2s, background .2s;
  background: #fff;
}
.streaming-btn:hover{ border-color: var(--accent); transform: translateY(-2px); background: var(--cream-soft); }
.streaming-icon{ width:1.2rem; height:1.2rem; border-radius:50%; background: var(--accent); flex-shrink:0; display:inline-block; position:relative; }
.streaming-icon::after{ content:'\266B'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; }

/* ===== Instagram gallery ===== */
.ig-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:.6rem; margin: 2.2rem 0 2rem; }
.ig-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius: var(--radius); display:block; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.ig-tile:hover img{ transform: scale(1.08); }
.ig-icon{
  position:absolute; inset:0; background: rgba(18,26,43,0);
  transition: background .25s ease;
}
.ig-tile:hover .ig-icon{ background: rgba(18,26,43,0.35); }
.ig-icon::after{
  content:'\2665'; position:absolute; top:.6rem; right:.7rem; color:#fff; font-size:.9rem; opacity:0; transition: opacity .25s;
}
.ig-tile:hover .ig-icon::after{ opacity:1; }
.ig-cta{ text-align:center; }

/* ===== Contact ===== */
.contact-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line-dark); font-size:1rem; }
.contact-label{ font-family: var(--font-display); text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; color: var(--ink-soft); }
.contact-list a:hover{ color: var(--accent); }

/* ===== Footer ===== */
.site-footer{ background: var(--navy-deep); color: rgba(239,233,223,0.55); text-align:center; padding: 2.6rem 1.5rem; }
.footer-inner p{ font-size:.82rem; margin:0; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .main-nav{
    position:fixed; top: 4.2rem; right:0; bottom:0; left:0; height: calc(100vh - 4.2rem);
    background: var(--navy-deep); overflow-y:auto;
    transform: translateY(-120%); transition: transform .3s ease; padding: 1.5rem;
    z-index:90; pointer-events:none;
  }
  .main-nav.is-open{ pointer-events:auto; }
  .main-nav.is-open{ transform: translateY(0); }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav a{ display:block; padding: 1rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav-toggle{ display:flex; }

  .split{ grid-template-columns: 1fr; gap:2rem; }
  .split.reverse{ direction:ltr; }
  .fact-grid{ grid-template-columns: 1fr 1fr; }
  .tracklist{ grid-template-columns: 1fr; }
  .streaming-grid{ grid-template-columns: repeat(2, 1fr); }
  .ig-grid{ grid-template-columns: repeat(3, 1fr); }
  .tour-dates{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .section{ padding: 3.6rem 1.2rem; }
  .fact-grid{ grid-template-columns: 1fr; }
  .credit-name{ min-width:100%; }
  .hero-content{ padding: 2rem 1.2rem 3.2rem; }
}