/* =========================================================
   Alejandro Boix — Violin | style.css
   ========================================================= */

:root{
  --bg:            #0a0a0b;
  --bg-alt:        #111113;
  --ink:           #f4f2ee;
  --ink-dim:       #c9c6c1;
  --ink-faint:     #8b8884;
  --red:           #b3121e;
  --red-bright:    #d2172a;
  --line:          rgba(244,242,238,0.14);
  --overlay-strong: linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.15) 30%, rgba(6,6,7,.55) 72%, rgba(6,6,7,.94) 100%);
  --overlay-soft:   linear-gradient(180deg, rgba(6,6,7,.15) 0%, rgba(6,6,7,.05) 40%, rgba(6,6,7,.75) 100%);
  --serif: "Playfair Display", "Georgia", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1280px;
  --nav-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 .5em;
}
p{ margin:0 0 1.2em; }
.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--red-bright);
  margin-bottom:1.1em;
}
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; top:-60px; left:0;
  background:var(--red); color:#fff;
  padding:.8em 1.4em; z-index:1000;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 6vw;
}
.section-label{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 5vw;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, height .3s ease;
}
.site-nav.is-scrolled{
  background:rgba(9,9,10,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  height:66px;
}
.site-nav .wrap{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand img{ height:34px; width:auto; }
.brand-text{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--ink);
}
.brand-text em{ color:var(--red-bright); font-style:normal; }

.nav-links{
  display:flex; align-items:center; gap:2.4em;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:.4em 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{
  color:var(--ink);
  border-color:var(--red-bright);
}
.nav-right{ display:flex; align-items:center; gap:1.6em; }
.lang-switch{
  display:flex; gap:.5em;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.lang-switch a{
  color:var(--ink-faint);
  padding:.2em .3em;
}
.lang-switch a[aria-current="true"]{
  color:var(--ink);
  border-bottom:1px solid var(--red-bright);
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:0; cursor:pointer;
  padding:.5em;
}
.nav-toggle span{
  width:24px; height:1.5px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  background-color:#050505;
}
.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:var(--overlay-strong);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding:0 6vw 9vh;
}
.hero-name{
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  line-height:1.02;
  margin-bottom:.18em;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero-name .accent{ color:var(--red-bright); }
.hero-role{
  font-family:var(--sans);
  font-size:clamp(.95rem, 1.6vw, 1.2rem);
  letter-spacing:.08em;
  color:var(--ink-dim);
  max-width:36em;
}
.hero-scroll{
  position:absolute; bottom:3.2vh; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6em;
  color:var(--ink-faint);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  animation:floatY 2.6s ease-in-out infinite;
}
.hero-scroll::after{
  content:"";
  width:1px; height:36px;
  background:linear-gradient(var(--ink-faint), transparent);
}
@keyframes floatY{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}

/* ---------- Split bio section ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  background:var(--bg);
}
.split-media{
  position:relative;
  min-height:60vh;
  overflow:hidden;
}
.split-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
}
.split-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:8vh 6vw;
}
.split-text h2{
  font-size:clamp(2rem, 3.4vw, 2.8rem);
}
.bio-text p{ color:var(--ink-dim); font-size:1rem; }
.bio-text p:first-of-type{
  color:var(--ink);
  font-size:1.12rem;
  line-height:1.7;
}
.bio-text a{
  color:var(--ink);
  border-bottom:1px solid var(--red-bright);
  transition:color .2s ease;
}
.bio-text a:hover, .bio-text a:focus-visible{ color:var(--red-bright); }
.facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4em 2em;
  margin-top:2em;
  padding-top:2em;
  border-top:1px solid var(--line);
  list-style:none;
}
.facts li{ font-size:.86rem; color:var(--ink-faint); }
.facts strong{
  display:block;
  font-family:var(--serif);
  color:var(--ink);
  font-size:1rem;
  margin-bottom:.15em;
}

@media (max-width: 860px){
  .split{ grid-template-columns:1fr; }
  .split-media{ min-height:60vh; }
  .split-text{ padding:7vh 7vw; }
}

/* ---------- Full-bleed photo band (gallery) ---------- */
.photo-band{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.photo-band img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.photo-band::after{
  content:"";
  position:absolute; inset:0;
  background:var(--overlay-soft);
}
.photo-band .caption{
  position:relative; z-index:2;
  padding:0 6vw 6vh;
  max-width:34em;
}
.photo-band .caption h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin-bottom:.25em;
}
.photo-band .caption p{
  color:var(--ink-dim);
  font-size:.95rem;
  margin:0;
}
.photo-band[data-focus="chair"] img{ object-position:50% 22%; }
.photo-band[data-focus="red"] img{ object-position:60% 30%; }
.photo-band[data-focus="piano"] img{ object-position:center 24%; }

.hero-media[data-focus="bw"] img{ object-position:50% 22%; }

/* ---------- Gallery intro ---------- */
.section-intro{
  padding:11vh 6vw 4vh;
  text-align:center;
}
.section-intro h2{ font-size:clamp(2rem,3.6vw,3rem); }
.section-intro p{
  color:var(--ink-faint);
  max-width:36em;
  margin:0 auto;
}

/* ---------- Contact ---------- */
.contact{
  background:var(--bg-alt);
  padding:12vh 6vw 10vh;
  border-top:1px solid var(--line);
}
.contact-grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:6vw;
}
.contact-info h2{ font-size:clamp(2.1rem,3.6vw,3rem); }
.contact-info p{ color:var(--ink-dim); }
.contact-detail{
  margin-top:2.2em;
  display:flex; flex-direction:column; gap:1.2em;
}
.contact-detail a{
  font-size:1.05rem;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:.15em;
  display:inline-block;
  width:fit-content;
  transition:border-color .2s ease, color .2s ease;
}
.contact-detail a:hover{ color:var(--red-bright); border-color:var(--red-bright); }
.contact-detail .label{
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.3em;
}

form.contact-form{ display:flex; flex-direction:column; gap:1.4em; }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.field input,
.field select,
.field textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  padding:.7em .1em;
  outline:none;
  transition:border-color .2s ease;
  border-radius:0;
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%238b8884' d='M5 7l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;
  background-position:right .2em center;
  background-size:16px;
}
.field select option{ background:#141416; color:var(--ink); }
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--red-bright);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }

.captcha-row{
  display:flex; align-items:center; gap:1em;
  background:rgba(244,242,238,0.04);
  border:1px solid var(--line);
  padding:1em 1.2em;
}
.captcha-row label{
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.captcha-question{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--ink);
  min-width:6.5em;
}
.captcha-row input{
  width:5.5em;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:1rem;
  padding:.4em .2em;
  outline:none;
}
.captcha-row input:focus{ border-color:var(--red-bright); }
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  background:var(--red);
  color:#fff;
  border:1px solid var(--red);
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:1em 2em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  width:fit-content;
}
.btn:hover, .btn:focus-visible{
  background:transparent;
  color:var(--red-bright);
  border-color:var(--red-bright);
}
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.form-note{
  font-size:.78rem;
  color:var(--ink-faint);
}
.form-error{
  font-size:.82rem;
  color:var(--red-bright);
  min-height:1.2em;
}

@media (max-width: 860px){
  .contact-grid{ grid-template-columns:1fr; gap:5vh; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:5vh 6vw;
  display:flex; flex-wrap:wrap; gap:1.5em;
  align-items:center; justify-content:space-between;
}
.site-footer .brand img{ height:26px; opacity:.85; }
.footer-meta{
  font-size:.76rem;
  color:var(--ink-faint);
  display:flex; gap:1.6em; flex-wrap:wrap;
}
.footer-meta a:hover{ color:var(--ink); }

/* ---------- Mobile nav ---------- */
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0;
    top:66px;
    background:rgba(6,6,7,.98);
    flex-direction:column;
    justify-content:flex-start;
    padding:6vh 8vw;
    gap:1.6em;
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .nav-right{ gap:1em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-scroll{ animation:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}