/* ============================================================
   Canto dei Sass' — Malarazza · Totentanz
   Editorial concert aesthetic: warm ivory, muted saffron accent,
   Fraunces display serif + Archivo grotesk. Calm, refined, inviting.
   Photos © clocatalan
   ============================================================ */

:root, [data-theme="editorial"]{
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --text-lg: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.3rem);
  --text-3xl: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --display: clamp(3rem, 1.4rem + 7.5vw, 7.5rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Editorial palette — warm, muted, refined */
  --ink:#1c1a17;            /* near-black warm charcoal */
  --ink-soft:#3a352e;
  --paper:#f4ecdd;          /* warm ivory (a touch deeper) */
  --paper-warm:#e9ddc6;     /* deeper cream for panels */
  --line:#d3c7ae;           /* hairline / border */
  --saffron:#c8901f;        /* muted saffron accent (calmed from #f5c518) */
  --saffron-soft:#e3b64c;
  --saffron-tint:#ecd8ac;   /* faint wash (slightly stronger) */

  /* Semantic */
  --color-bg:var(--paper);
  --color-text:var(--ink);
  --color-text-muted:#5b5347;

  --radius-sm:.25rem;--radius-md:.4rem;--radius-lg:.75rem;--radius-full:9999px;
  --transition:260ms cubic-bezier(.16,1,.3,1);
  --transition-interactive:200ms cubic-bezier(.16,1,.3,1);

  --content:1120px;--content-narrow:720px;

  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Archivo','Helvetica Neue',sans-serif;
}

html,body{overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);line-height:1.65;}

::selection{background:var(--saffron-tint);color:var(--ink);}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;}

.eyebrow{
  display:inline-block;font-weight:600;text-transform:uppercase;
  font-size:var(--text-xs);letter-spacing:.22em;color:var(--saffron);
  margin-bottom:var(--space-4);
}
.eyebrow--light{color:var(--saffron-soft);}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:oklch(from var(--paper) l c h / .88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  max-width:var(--content);margin-inline:auto;
  padding:var(--space-4) var(--space-6);
  display:flex;align-items:center;gap:var(--space-6);
}
.brand{text-decoration:none;}
.brand__text{
  font-family:var(--font-display);font-size:clamp(1.15rem,1rem+.6vw,1.45rem);
  font-weight:500;letter-spacing:.005em;color:var(--ink);
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(var(--space-4),2.5vw,var(--space-8));}
.nav a{
  text-decoration:none;color:var(--ink);font-weight:500;font-size:var(--text-sm);
  letter-spacing:.02em;
}
.nav a:not(.nav__cta){position:relative;color:var(--color-text-muted);}
.nav a:not(.nav__cta):hover{color:var(--ink);}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--saffron);transition:width var(--transition);}
.nav a:not(.nav__cta):hover::after{width:100%;}
.nav a.nav__cta{
  background:var(--ink);color:var(--paper);
  padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);
  font-weight:600;
}
.nav a.nav__cta:hover{background:var(--saffron);color:var(--ink);}
@media (max-width:680px){
  .nav a:not(.nav__cta){display:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;letter-spacing:.02em;
  font-size:var(--text-sm);text-decoration:none;
  padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);
  border:1.5px solid var(--ink);
}
.btn--solid{background:var(--ink);color:var(--paper);}
.btn--solid:hover{background:var(--saffron);border-color:var(--saffron);color:var(--ink);transform:translateY(-2px);}
.btn--line{background:transparent;color:var(--ink);}
.btn--line:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);}

/* ---------- Inline arrow link ---------- */
.link-arrow{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--saffron);padding-bottom:2px;
  transition:gap var(--transition),color var(--transition);
}
.link-arrow span{color:var(--saffron);transition:transform var(--transition);}
.link-arrow:hover{color:var(--saffron);}
.link-arrow:hover span{transform:translate(2px,-2px);}

/* ---------- Kicker (hero) ---------- */
.kicker{
  display:inline-block;font-weight:600;text-transform:uppercase;
  font-size:var(--text-xs);letter-spacing:.22em;color:var(--saffron);
  margin-bottom:var(--space-6);
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 85% -10%, var(--saffron-tint) 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.hero__inner{
  max-width:var(--content);margin-inline:auto;
  padding:clamp(var(--space-16),9vw,var(--space-32)) var(--space-6) clamp(var(--space-12),6vw,var(--space-24));
  position:relative;z-index:2;
}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  line-height:.98;letter-spacing:-.015em;
  margin:0 0 var(--space-6);
}
.hero__line{display:block;font-size:var(--display);color:var(--ink);}
.hero__amp{
  display:block;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.6rem,1rem+2.4vw,3rem);color:var(--saffron);
  line-height:1;margin:.04em 0 .04em .04em;
}
.hero__line--alt{color:var(--ink-soft);font-style:normal;font-weight:400;}
.hero__band{
  font-weight:600;letter-spacing:.02em;
  font-size:var(--text-lg);margin-bottom:var(--space-6);color:var(--color-text-muted);
}
.hero__lead{
  font-size:var(--text-lg);line-height:1.5;max-width:44ch;
  color:var(--ink-soft);margin-bottom:var(--space-8);
}
.hero__when{
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-8);
  margin-bottom:var(--space-8);
}
.hero__date,.hero__venue{
  font-weight:600;font-size:var(--text-base);color:var(--ink);
  border-top:1.5px solid var(--saffron);padding-top:var(--space-2);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);}

/* ---------- Photo banner ---------- */
.banner{position:relative;border-bottom:1px solid var(--line);background:var(--ink);}
.banner img{width:100%;height:clamp(300px,44vw,540px);object-fit:cover;display:block;filter:grayscale(.75) contrast(1.02);}
.banner__credit{
  position:absolute;right:var(--space-4);bottom:var(--space-3);
  font-size:var(--text-xs);font-weight:500;color:var(--paper);
  letter-spacing:.06em;opacity:.8;
  text-shadow:0 1px 6px oklch(0 0 0 / .7);
}

/* ---------- Sections ---------- */
.section{
  max-width:var(--content);margin-inline:auto;
  padding-inline:var(--space-6);
  padding-block:clamp(var(--space-20),9vw,var(--space-32));
}
.section__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:var(--space-8);
}

/* ---------- Hook / Programm ---------- */
.hook{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.7rem,1rem+3.6vw,3.4rem);line-height:1.12;letter-spacing:-.01em;
  margin-bottom:var(--space-12);max-width:22ch;
}
.hook__body{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),5vw,var(--space-16));
}
.hook__body p{font-size:var(--text-base);line-height:1.75;color:var(--color-text-muted);max-width:56ch;}
.hook__lead{font-weight:500;color:var(--ink)!important;}
.hook__body em{font-style:italic;color:var(--ink);}
@media (max-width:740px){.hook__body{grid-template-columns:1fr;gap:var(--space-6);}}

/* ---------- Die Lieder / Clash ---------- */
.lieder__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--space-8),5vw,var(--space-16));
  margin-bottom:clamp(var(--space-12),6vw,var(--space-20));
}
.lieder__col{position:relative;padding-top:var(--space-6);border-top:2px solid var(--saffron);}
.lieder__head{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-xl);line-height:1.08;letter-spacing:-.01em;
  margin-bottom:var(--space-5);
}
.lieder__col p{font-size:var(--text-base);line-height:1.75;color:var(--color-text-muted);margin-bottom:var(--space-5);max-width:52ch;}
.lieder__col em{font-style:italic;color:var(--ink);font-weight:500;}
.lieder__notes{max-width:64ch;margin-inline:auto;text-align:center;}
.lieder__notes p{font-size:var(--text-base);line-height:1.8;color:var(--color-text-muted);margin-bottom:var(--space-6);}
.lieder__notes em{font-style:italic;color:var(--ink);font-weight:500;}
.lieder__turn{
  font-family:var(--font-display)!important;font-weight:400;font-style:italic;
  font-size:clamp(1.4rem,1rem+1.8vw,2.2rem)!important;line-height:1.3!important;
  color:var(--ink)!important;
}
@media (max-width:740px){.lieder__grid{grid-template-columns:1fr;gap:var(--space-10);}}

/* ---------- Geschichte / Story ---------- */
.section--story{
  background:var(--paper-warm);max-width:none;
  border-block:1px solid var(--line);
}
.section--story > *{max-width:var(--content);margin-inline:auto;}
.story__grid{
  display:grid;grid-template-columns:0.8fr 1.2fr;
  gap:clamp(var(--space-8),6vw,var(--space-20));align-items:start;
}
.story__intro .section__title{margin-bottom:0;}
.story__quote{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,1rem+1.4vw,1.9rem);line-height:1.35;
  color:var(--ink);border-left:2px solid var(--saffron);
  padding-left:var(--space-6);margin-bottom:var(--space-8);max-width:36ch;
}
.story__body p{font-size:var(--text-base);line-height:1.75;color:var(--color-text-muted);margin-bottom:var(--space-5);max-width:58ch;}
.story__body em{font-style:italic;color:var(--ink);font-weight:500;}
@media (max-width:760px){.story__grid{grid-template-columns:1fr;gap:var(--space-8);}}

/* ---------- Ensemble ---------- */
.section--ensemble{background:var(--ink);color:var(--paper);max-width:none;}
.section--ensemble > *{max-width:var(--content);margin-inline:auto;}
.section--ensemble .section__title{color:var(--paper);}
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-6),3vw,var(--space-10));list-style:none;padding:0;}
.member{display:flex;flex-direction:column;}
.member__photo{
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-md);
  background:var(--ink-soft);margin-bottom:var(--space-5);
}
.member__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03) brightness(.97);transition:filter var(--transition),transform .6s cubic-bezier(.16,1,.3,1);}
.member:hover .member__photo img{filter:grayscale(1) contrast(1.06) brightness(1.04);transform:scale(1.03);}
.member__name{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--text-lg);line-height:1.1;margin-bottom:var(--space-2);color:var(--paper);
}
.member__role{font-size:var(--text-sm);font-weight:500;color:var(--saffron-soft);letter-spacing:.02em;margin-bottom:var(--space-3);}
.member__bio{font-size:var(--text-sm);line-height:1.6;color:#b8b1a3;}
.member__more{margin-top:var(--space-4);border-top:1px solid rgba(227,182,76,.25);padding-top:var(--space-3);}
.member__more summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.4em;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--saffron-soft);transition:color var(--transition);
}
.member__more summary::-webkit-details-marker{display:none;}
.member__more summary::after{content:"+";font-size:1.1em;line-height:1;font-weight:400;}
.member__more[open] summary::after{content:"–";}
.member__more summary:hover{color:var(--saffron);}
.member__long{padding-top:var(--space-4);}
.member__long p{font-size:var(--text-sm);line-height:1.7;color:#c5beb0;margin-bottom:var(--space-4);}
.member__long p:last-child{margin-bottom:0;}
.member__long a{color:var(--saffron-soft);text-decoration:none;border-bottom:1px solid rgba(227,182,76,.4);}
.member__long a:hover{color:var(--saffron);}
@media (max-width:680px){.members{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:var(--space-10);}}

/* ---------- Full-bleed ---------- */
.bleed{border-block:1px solid var(--line);background:var(--ink);}
.bleed img{width:100%;height:clamp(280px,40vw,500px);object-fit:cover;display:block;filter:grayscale(.7) contrast(1.02);}

/* ---------- Termine / Tickets ---------- */
.event{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-10);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),4vw,var(--space-10));
  margin-bottom:var(--space-5);
}
.event::before{content:"";display:block;position:absolute;}
.event{position:relative;overflow:hidden;}
.event::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--saffron);}
.event--alt{background:var(--paper-warm);}
.event--alt::after{background:var(--line);}
.event--outlook{background:transparent;border-style:dashed;}
.event--outlook::after{background:var(--saffron-soft);opacity:.5;}
.event--outlook .event__venue{color:var(--ink-soft);}
.event__date{font-weight:600;letter-spacing:.02em;font-size:var(--text-sm);color:var(--saffron);margin-bottom:var(--space-2);}
.event__venue{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-xl);line-height:1.05;margin-bottom:var(--space-2);
}
.event__city{font-weight:500;font-size:var(--text-base);margin-bottom:var(--space-5);color:var(--color-text-muted);}
.event__facts{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--line);padding-top:var(--space-5);}
.event__facts li{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;}
.event__facts span{display:inline-block;min-width:92px;font-weight:600;color:var(--ink);letter-spacing:.02em;}
.event__cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);}
.event__note{font-size:var(--text-xs);color:var(--color-text-muted);max-width:22ch;}
.event__soon{font-weight:500;letter-spacing:.02em;font-size:var(--text-sm);color:var(--color-text-muted);}
@media (max-width:680px){
  .event{grid-template-columns:1fr;gap:var(--space-6);}
  .event__cta{align-items:stretch;}
  .event__cta .btn{width:100%;}
}

/* ---------- Contact ---------- */
.section--contact{
  background:
    radial-gradient(120% 90% at 15% 110%, var(--saffron-tint) 0%, transparent 55%),
    var(--paper-warm);
  color:var(--ink);max-width:none;text-align:center;border-top:1px solid var(--line);
}
.section--contact > *{max-width:var(--content-narrow);margin-inline:auto;}
.contact__title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.01em;margin-bottom:var(--space-5);
}
.contact__text{font-size:var(--text-lg);margin-bottom:var(--space-8);color:var(--color-text-muted);line-height:1.6;}
.contact__text em{font-style:italic;color:var(--ink);}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--paper);}
.footer__inner{
  max-width:var(--content);margin-inline:auto;padding:var(--space-10) var(--space-6);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;
}
.footer__brand{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:var(--paper);}
.footer__links a{color:var(--saffron-soft);text-decoration:none;font-size:var(--text-sm);font-weight:500;border-bottom:1px solid transparent;transition:border-color var(--transition);}
.footer__links a:hover{border-color:var(--saffron-soft);}
.footer__copy{font-size:var(--text-sm);color:#9a9384;}
@media (max-width:680px){.footer__inner{justify-content:flex-start;gap:var(--space-3);}}