/* ============================================================
   Ismael Nascimento — Site Stylesheet
   Shared across all pages. Same visual language as the press kit.
   ============================================================ */

:root{
  --bg: #0A0D0B;
  --bg-raised: #10140F;
  --green-deep: #1F4A38;
  --green-bright: #5FAE82;
  --gold: #C9A227;
  --off-white: #F3F1E8;
  --slate: #8B9490;
  --hairline: rgba(243,241,232,0.14);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--off-white);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
}

::selection{ background:var(--gold); color:var(--bg); }

a{ color:inherit; }

img{ max-width:100%; display:block; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 32px; }

/* ---------- EDITORIAL GRID SYSTEM ---------- */
.egrid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:24px; align-items:start; }
.egrid.middle{ align-items:center; }
.c3{ grid-column:span 3; }
.c4{ grid-column:span 4; }
.c5{ grid-column:span 5; }
.c6{ grid-column:span 6; }
.c7{ grid-column:span 7; }
.c8{ grid-column:span 8; }
.c12{ grid-column:span 12; }
@media (max-width: 860px){
  .egrid > [class^="c"]{ grid-column:span 12 !important; }
}

/* ---------- NAV ---------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,13,11,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  padding-bottom:20px;
}
.nav-name{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:-0.01em;
  text-decoration:none;
  color:var(--off-white);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
}
.nav-links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--slate);
  transition:color 0.2s ease;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{ color:var(--green-bright); }
.lang-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--off-white);
  padding:6px 12px;
  border-radius:2px;
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.lang-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.nav-toggle-btn{
  display:none;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--off-white);
  padding:8px 10px;
  border-radius:2px;
  cursor:pointer;
}

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-header{
  padding:72px 0 56px;
  border-bottom:1px solid var(--hairline);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin-bottom:16px;
}
.page-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.02;
  letter-spacing:-0.01em;
}
.page-title em{ font-style:italic; color:var(--green-bright); }
.page-lead{
  margin-top:18px;
  max-width:640px;
  font-size:1.05rem;
  color:var(--slate);
  font-weight:300;
}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  min-height:92svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#000;
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 20%;
  filter:saturate(1.05) contrast(1.05);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,13,11,0.05) 0%, rgba(10,13,11,0.2) 45%, rgba(10,13,11,0.97) 92%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding:0 32px 72px;
}
h1.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.8rem, 8vw, 5.5rem);
  line-height:0.97;
  letter-spacing:-0.01em;
  max-width:900px;
}
.hero-role{
  margin-top:20px;
  font-size:clamp(1rem, 2vw, 1.25rem);
  color:var(--slate);
  max-width:680px;
  font-weight:300;
}
.hero-role strong{ color:var(--off-white); font-weight:500; }
.hero-links{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.hero-credentials{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
  display:flex;
  flex-wrap:wrap;
  gap:8px 32px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--slate);
}
.link-quiet{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--off-white);
  border-bottom:1px solid var(--hairline);
  padding-bottom:2px;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.link-quiet:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- SECTION SHELL ---------- */
section.block{ padding:88px 0; border-top:1px solid var(--hairline); }
.section-head{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin-bottom:40px;
}
.section-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--gold);
}
.section-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
}

/* ---------- BIO HERO (text left / photo right) ---------- */
.bio-hero-grid{ display:flex; align-items:stretch; min-height:calc(100svh - 78px); }
.bio-text{ flex:0 0 56%; padding:64px 60px 64px 40px; }
.bio-text .eyebrow{ margin-bottom:24px; }
.bio-photo{ flex:0 0 44%; position:relative; min-height:520px; }
.bio-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 25%; }

@media (max-width:900px){
  .bio-hero-grid{ flex-direction:column; min-height:auto; }
  .bio-text{ flex:none; padding:40px 24px; order:2; }
  .bio-photo{ flex:none; height:60vh; order:1; }
}

/* ---------- BIO / TEXT ---------- */
.prose p{
  font-size:1.08rem;
  font-weight:300;
  color:#DEDCD1;
  margin-bottom:22px;
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  -webkit-hyphens:none;
}
.prose p:last-child{ margin-bottom:0; }
.prose em{ font-style:italic; color:var(--off-white); }

.credentials{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.credential{ border-top:1px solid var(--hairline); padding-top:16px; }
.credential .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin-bottom:8px;
}
.credential .value{ font-size:0.98rem; color:var(--off-white); font-weight:400; }

/* ---------- SETLIST (awards/performances) ---------- */
.setlist{ background:var(--bg-raised); border:1px solid var(--hairline); border-radius:2px; padding:8px 0; }
.setlist-row{
  display:grid;
  grid-template-columns:76px 108px 1fr auto;
  align-items:baseline;
  gap:20px;
  padding:20px 28px;
  border-bottom:1px dashed var(--hairline);
}
.setlist-row:last-child{ border-bottom:none; }
.setlist-year{ font-family:'IBM Plex Mono', monospace; font-size:0.95rem; color:var(--gold); }
.setlist-kind{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:2px;
  width:fit-content;
  white-space:nowrap;
}
.kind-award{ color:var(--gold); border:1px solid rgba(201,162,39,0.4); background:rgba(201,162,39,0.08); }
.kind-show{ color:var(--green-bright); border:1px solid rgba(95,174,130,0.4); background:rgba(95,174,130,0.08); }
.setlist-award{ font-size:1.02rem; color:var(--off-white); font-weight:400; }
.setlist-loc{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--slate);
  text-transform:uppercase;
  letter-spacing:0.06em;
  justify-self:end;
}

/* ---------- PUBLICATIONS LIST ---------- */
.pub-list{ border-top:1px solid var(--hairline); }
.pub-item{
  display:grid;
  grid-template-columns:10rem minmax(0,1fr);
  gap:32px;
  padding:44px 0;
  border-bottom:1px solid var(--hairline);
}
@media (max-width: 860px){ .pub-item{ grid-template-columns:1fr; gap:12px; } }
.pub-type{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.pub-title{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  line-height:1.3;
  margin-bottom:12px;
}
.pub-title a{ text-decoration:none; color:var(--off-white); border-bottom:1px solid var(--hairline); }
.pub-title a:hover{ color:var(--gold); border-color:var(--gold); }
.pub-cite{ font-size:0.85rem; font-style:italic; color:var(--slate); margin-bottom:16px; }
.pub-abs{ font-size:0.98rem; color:#DEDCD1; margin-bottom:18px; max-width:640px; }
.pub-tag{
  display:inline-block;
  border:1px solid var(--hairline);
  padding:4px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.65rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-right:10px;
}
.pub-read{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
}

/* ---------- ALBUM / MUSIC CARD ---------- */
.album-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  background:linear-gradient(135deg, var(--green-deep), var(--bg-raised));
  border:1px solid var(--hairline);
  padding:32px;
  border-radius:2px;
  margin-bottom:24px;
}
.album-card .album-name{ font-family:'Fraunces', serif; font-size:1.8rem; font-weight:500; }
.album-card .album-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  color:var(--green-bright);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:8px;
}
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--gold);
  padding:14px 24px;
  border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
  border:none;
  cursor:pointer;
}

.embed-frame{ border-radius:2px; overflow:hidden; }
.embed-frame iframe{ display:block; border:0; width:100%; }

.video-frame{ position:relative; width:100%; padding-top:56.25%; background:var(--bg-raised); border:1px solid var(--hairline); cursor:pointer; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; }
.video-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.play-button{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease; }
.video-frame:hover .play-button{ transform:scale(1.08); }
.play-button svg{ filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }

/* ---------- PHOTO GRID ---------- */
.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.photo-item{ display:block; overflow:hidden; border:1px solid var(--hairline); aspect-ratio:4/5; }
.photo-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.photo-item:hover img{ transform:scale(1.03); }

/* ---------- THREE-COLUMN (teaching) ---------- */
.col-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.col-3 .col-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:16px;
}
.col-3 p.body{ font-size:1.02rem; color:#DEDCD1; line-height:1.65; }
.col-3 .cta{ margin-top:20px; }

/* ---------- PLACEHOLDER STATE ---------- */
.placeholder-block{
  border:1px dashed var(--hairline);
  padding:48px;
  text-align:center;
  color:var(--slate);
  font-style:italic;
  font-family:'Fraunces', serif;
  font-size:1.2rem;
}

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.contact-item .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:10px;
}
.contact-item .value{ font-size:1.15rem; color:var(--off-white); font-weight:400; }
.contact-item a{ color:var(--off-white); text-decoration:none; border-bottom:1px solid var(--hairline); }
.contact-item a:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- FOOTER ---------- */
.site-footer{ border-top:1px solid var(--hairline); padding:40px 0; }
.site-footer .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.footer-links{ display:flex; gap:24px; list-style:none; }
.footer-links a{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  color:var(--slate);
}
.footer-links a:hover{ color:var(--green-bright); }
.footer-copy{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--slate); }

/* ---------- LANGUAGE TOGGLE LOGIC ---------- */
[data-lang="pt"] [lang-en], [data-lang="en"] [lang-pt]{ display:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .nav-links{
    position:fixed; top:65px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 32px 20px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; padding:12px 0; border-bottom:1px solid var(--hairline); }
  .nav-toggle-btn{ display:block; }
  .credentials{ grid-template-columns:1fr; }
  .col-3{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .photo-grid{ grid-template-columns:1fr; }
  .setlist-row{ grid-template-columns:56px 1fr; row-gap:8px; }
  .setlist-kind{ grid-column:2; justify-self:start; }
  .setlist-award{ grid-column:1 / -1; }
  .setlist-loc{ grid-column:1 / -1; justify-self:start; }
  section.block{ padding:64px 0; }
  .album-card{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }

/* ---------- FOCUS STATES ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}