/* ============================================================
   Trio Timia — playful geometric direction
   Cream base, deep navy, coral/teal/gold pops. Rounded shapes.
   ============================================================ */

:root{
  --cream:#F4F0E3;
  --cream-2:#E9E4D2;
  --ink:#1E3327;
  --ink-soft:#4A5F50;
  --coral:#D4B27E;
  --teal:#8FB58E;
  --gold:#D8BC72;
  --line:#DED8C4;
  --slate:#6B9AAB;
  --forest:#8FB58E;
  --sage:#8FB58E;
  --bronze:#D4B27E;
  --sage-deep:#5E8F6E;
  --max:1200px;
  --gut:clamp(24px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Spectral",Georgia,serif;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* ---------- Type ---------- */
h1,h2,h3,.serif{font-family:"Spectral",Georgia,serif}
.sans{font-family:"Archivo",system-ui,sans-serif}
.eyebrow{
  font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:22px;border-radius:50% 48% 52% 50%;background:var(--gold);display:inline-block;flex:none}
.eyebrow.teal{color:var(--slate)}
.eyebrow.teal::before{background:var(--slate)}

/* ---------- Header / nav ---------- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--cream) 90%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:16px var(--gut)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.brand-logo{display:inline-flex;flex:none}
.brand-logo svg{width:32px;height:39px;display:block}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{font-family:"Archivo",sans-serif;font-size:.82rem;letter-spacing:.05em;font-weight:600;text-decoration:none;color:var(--ink-soft);padding:6px 2px;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:3px;transition:.3s}

@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--cream);border-bottom:2px solid var(--ink);max-height:0;overflow:hidden;transition:max-height .35s ease}
  .nav-links.open{max-height:400px}
  .nav-links li{width:100%;border-top:1px solid var(--line)}
  .nav-links a{display:block;padding:16px var(--gut);font-size:.95rem}
  .nav-links a::after{display:none}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;text-decoration:none;padding:14px 28px;border-radius:40px;background:var(--ink);color:var(--cream);border:2px solid var(--ink);transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.btn:hover{transform:translateY(-2px);background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-coral{background:linear-gradient(160deg, #E4D09E 0%, #D8BC72 55%, #C3AA6A 100%);border-color:#CBB176;color:var(--ink);box-shadow:0 2px 9px rgba(160,140,90,.22)}
.btn-coral:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- Hero photo band (interior pages) ---------- */
.photo-head{position:relative;min-height:clamp(300px,46vw,480px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:2px solid var(--ink)}
.photo-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.photo-head:hover img{transform:scale(1.05)}
.photo-head .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,94,72,.12) 0%,rgba(60,94,72,.30) 55%,rgba(60,94,72,.62) 100%)}
/* lighter variant: even less fade */
.photo-head.light .scrim{background:linear-gradient(180deg,rgba(60,94,72,.06) 0%,rgba(60,94,72,.20) 58%,rgba(60,94,72,.52) 100%)}
/* object-position helpers */
.photo-head.pos-up img{object-position:center 25%}
.photo-head.pos-upleft img{object-position:30% 22%}
.photo-head.pos-top img{object-position:center top}
.photo-head .ph-inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(28px,4vw,46px)}
.photo-head h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);font-weight:600;line-height:1;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.photo-head .lead{color:#fff;max-width:48ch;margin-top:16px;font-size:1.1rem;opacity:.95;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.photo-head .eyebrow{color:#fff;margin-bottom:14px}
.photo-head .eyebrow::before{background:var(--gold)}
/* decorative shapes on photo heads */
.ph-circle{position:absolute;border-radius:50%;z-index:1}
/* Art Deco corner ornament */
.deco-corner{position:absolute;width:clamp(64px,8vw,112px);height:clamp(64px,8vw,112px);z-index:5;pointer-events:none;opacity:.92}
.deco-corner svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
.deco-tr{top:18px;right:18px}
.deco-bl{bottom:18px;left:18px;transform:rotate(180deg)}

/* ---------- Footer ---------- */
.site-foot{position:relative;border-top:2px solid var(--ink);margin-top:clamp(50px,8vw,90px);padding:54px 0 40px;background:var(--sage);color:var(--ink);overflow:hidden}
.site-foot .foot-shape{position:absolute;border-radius:50%;opacity:.9}
.foot-grid{position:relative;display:flex;flex-wrap:wrap;gap:36px 50px;justify-content:space-between;align-items:flex-start;z-index:2}
.foot-name{font-size:1.9rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:12px}
.foot-name .fdot{width:18px;height:18px;border-radius:50%;background:var(--gold);flex:none}
.foot-contact{color:var(--ink)}
.foot-contact .ft-label{font-family:"Archivo",sans-serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.foot-contact .ft-label::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold)}
.foot-email{font-family:"Spectral",serif;font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px;transition:color .2s,border-color .2s;display:inline-block}
.foot-email:hover{color:var(--bronze);border-color:var(--ink)}
.foot-contact a:not(.foot-email){color:var(--cream);text-decoration:none}
.socials{display:flex;gap:14px;list-style:none;margin-top:14px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--cream);border:1.5px solid var(--cream);text-decoration:none;transition:background .2s,transform .2s,border-color .2s}
.socials a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:18px;height:18px;fill:var(--ink);transition:fill .2s}
.socials a:hover svg{fill:var(--ink)}
.foot-fine{position:relative;z-index:2;font-family:"Archivo",sans-serif;font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);margin-top:38px}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}html{scroll-behavior:auto}}

a:focus-visible,button:focus-visible{outline:3px solid var(--slate);outline-offset:3px}

/* ---------- Section helpers ---------- */
.section{padding:clamp(50px,8vw,90px) 0}
.divider-dots{display:flex;gap:14px;justify-content:center;padding:clamp(30px,5vw,50px) 0}
.divider-dots span{width:16px;height:16px;border-radius:50%}
.divider-dots span:nth-child(1){background:var(--gold)}
.divider-dots span:nth-child(2){background:var(--gold)}
.divider-dots span:nth-child(3){background:var(--slate)}

/* ---------- Logo-hint divider (echoes the mark) ---------- */
.logo-divider{display:flex;justify-content:center;align-items:center;padding:clamp(30px,5vw,50px) 0}
.logo-divider svg{width:clamp(140px,26vw,200px);height:auto;overflow:visible}
.logo-divider .ld-line{stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;opacity:.55}
.logo-divider .ld-bow{stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;fill:none;opacity:.7}
.logo-divider .ld-dot{fill:var(--gold)}
/* three-dot cluster used as a small accent (echoes the mark's beads) */
.tridot{display:inline-flex;gap:7px;align-items:center}
.tridot span{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tridot span:nth-child(2){background:var(--ink)}

/* ---------- Language toggle ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:22px;font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.06em}
.lang-toggle a{color:var(--ink-soft);text-decoration:none;padding:3px 5px;border-radius:8px;transition:color .2s,background .2s}
.lang-toggle a:hover{color:var(--ink)}
.lang-toggle a.lang-active{color:var(--ink);background:var(--sage)}
.lang-sep{color:var(--ink-soft);opacity:.5}
@media(max-width:960px){
  .lang-toggle{margin-left:0;margin-top:8px;padding:8px var(--gut)}
}


/* ---------- Brand sizing refinements ---------- */
.brand{gap:11px}
.brand-logo svg{width:32px;height:39px}
@media(max-width:820px){
  .brand{font-size:.92rem;letter-spacing:.10em;gap:9px}
  .brand-logo svg{width:30px;height:37px}
  .nav{padding:13px var(--gut)}
}

/* ---------- Keyboard motif (replaces bow+lines+dots decoration) ---------- */
/* Section divider: three piano "keys" with two gold beads; never overlaps text. */
.kb-divider-wrap{display:flex;justify-content:center;align-items:center;padding:clamp(28px,5vw,48px) 0}
.kb-divider-wrap svg{width:clamp(150px,26vw,200px);height:auto;overflow:visible}
.kb-divider line{stroke:var(--gold)}
/* Corner ornament on photo heads: keyboard keys hanging from a short ledge. */
.kb-corner{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.28))}
.deco-corner .kb-corner line{stroke:var(--gold)}
.deco-corner.ink .kb-corner line{stroke:var(--ink)}
.deco-corner.ink .kb-corner circle{fill:var(--ink)}

/* ---------- Logo intro (draw-on, 2.6s, plays once) ---------- */
#logo-intro{position:fixed;inset:0;z-index:200;background:var(--sage);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .7s ease,visibility .7s ease}
#logo-intro.done{opacity:0;visibility:hidden}
#logo-intro .intro-mark{height:clamp(96px,15vw,140px);width:auto}
#logo-intro .intro-word{font-family:"Spectral",serif;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);letter-spacing:.06em;opacity:0}
@media(prefers-reduced-motion:reduce){#logo-intro{display:none}}


/* ---------- Mobile: keep portrait faces clear of overlaid text ---------- */
@media(max-width:820px){
  /* Hero: anchor the wordmark lower over a darkened base, lift the photo focus
     so faces sit above the text rather than behind it. */
  .hero{align-items:flex-end;min-height:calc(100svh - 64px)}
  /* faces sit high; crop reduces empty space above them */
  .hero-bg{object-position:center 32%}
  .hero-scrim{background:linear-gradient(180deg,rgba(60,94,72,.06) 0%,rgba(60,94,72,.10) 46%,rgba(60,94,72,.62) 78%,rgba(60,94,72,.82) 100%)}
  .hero-inner{padding-bottom:clamp(34px,8vw,60px)}

  /* Interior photo-heads: faces sit high, heading/eyebrow read over a darker base. */
  .photo-head{min-height:clamp(220px,54vw,320px)}
  .photo-head img{object-position:center 12% !important}
  .photo-head .scrim,
  .photo-head.light .scrim{background:linear-gradient(180deg,rgba(60,94,72,.10) 0%,rgba(60,94,72,.34) 46%,rgba(60,94,72,.80) 100%)}
  .photo-head h1{text-shadow:0 2px 20px rgba(0,0,0,.55)}
}


/* Keyboard corner orientation: keys always hang downward. Bottom-left mirrors
   horizontally instead of rotating 180 (which would flip keys upward). */
.deco-bl .kb-corner{transform:scaleX(-1)}
.deco-bl:has(.kb-corner){transform:none}


/* ---------- Past concerts (compact, muted) ---------- */
.past-concerts{padding:0 0 clamp(46px,7vw,80px)}
.past-head{display:flex;align-items:center;gap:14px;margin:clamp(30px,5vw,48px) 0 22px}
.past-head h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:600;white-space:nowrap}
.past-head .ph-rule{flex:1;height:2px;background:var(--line)}
.past-list{display:grid;gap:12px}
.past-item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,32px);align-items:baseline;
  background:transparent;border:1.5px solid var(--line);border-radius:16px;padding:16px clamp(16px,3vw,26px);transition:border-color .2s,background .2s}
.past-item:hover{border-color:var(--sage);background:rgba(143,181,142,.08)}
.past-date{font-family:"Archivo",sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);white-space:nowrap;min-width:118px}
.past-main .pm-title{font-size:1.05rem;font-weight:600;line-height:1.25}
.past-main .pm-place{font-family:"Archivo",sans-serif;font-size:.86rem;color:var(--ink-soft);margin-top:3px}
.past-link{font-family:"Archivo",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sage-deep);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .2s}
.past-link:hover{border-color:var(--sage-deep)}
@media(max-width:640px){
  .past-item{grid-template-columns:1fr;gap:4px}
  .past-date{min-width:0}
  .past-link{margin-top:6px}
}


/* ---------- Contact panel with trio photo (photo band on top, text below) ---------- */
.cs-text.has-photo{justify-content:flex-start;padding-top:0;background:var(--sage)}
.cs-text.has-photo .cs-photo-band{
  position:relative;z-index:1;width:calc(100% + 2 * clamp(36px,6vw,80px));
  margin:0 calc(-1 * clamp(36px,6vw,80px)) clamp(28px,4vw,44px);
  aspect-ratio:829/476;overflow:hidden;
}
.cs-text.has-photo .cs-photo-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.cs-text.has-photo::before{content:none}
.cs-text.has-photo::after{content:none}
.cs-text.has-photo .cs-eyebrow,
.cs-text.has-photo h1,
.cs-text.has-photo .cs-lead,
.cs-text.has-photo .cs-alt{color:var(--ink)}
.cs-text.has-photo .cs-eyebrow::before{background:var(--bronze)}
.cs-text.has-photo .cs-alt a{color:var(--ink);text-decoration-color:var(--bronze)}
.cs-text.has-photo .cs-shape{display:none}
/* On mobile the photo band still shows fully at the top */
@media(max-width:860px){
  .cs-text.has-photo{min-height:auto}
  .cs-text.has-photo .cs-photo-band{margin-bottom:clamp(20px,4vw,30px)}
}


/* ============================================================
   Keyboard motifs (from the logo): two distinct treatments
   - .kb-vert  : vertical hanging keys, used as a corner accent
   - .kb-strip : horizontal keyboard, used as a section divider
   Both are decorative only and are placed to never overlap text/faces.
   ============================================================ */

/* Vertical corner accent */
.kb-vert{position:absolute;z-index:4;pointer-events:none;opacity:.9}
.kb-vert svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.22))}
.kb-vert.ink svg .kbline{stroke:var(--ink)}
.kb-vert.ink svg .kbkey{stroke:var(--ink)}

/* Horizontal section divider */
.kb-strip-wrap{display:flex;justify-content:center;align-items:center;padding:clamp(30px,5vw,52px) 0}
.kb-strip{width:clamp(150px,24vw,190px);height:auto;overflow:visible}


/* Vertical keyboard accent placements (safe zones only) */
.site-foot .kb-vert{top:0;right:clamp(20px,5vw,60px);width:34px;height:96px;opacity:.7}
.hero .kb-vert{top:50%;right:clamp(24px,6vw,80px);transform:translateY(-50%);width:40px;height:150px;opacity:.55;z-index:2}
@media(max-width:820px){
  /* On mobile the hero text spans wider; hide the hero vertical accent to avoid any overlap */
  .hero .kb-vert{display:none}
  .site-foot .kb-vert{right:16px;width:28px;height:80px}
}


/* Visually-hidden but accessible */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}