/* ==========================================================================
   Lóránt Najbauer — site stylesheet
   Design: matched to the original site's portrait hero — charcoal ink,
   a warm gold accent, and a concrete-grey/black palette. Edit the CSS
   custom properties below to retheme the whole site from one place.
   ========================================================================== */

:root {
  --ink: #201e1a;
  --paper: #f3f1ec;
  --paper-dim: #e8e4db;
  --wine: #8a6a2f;
  --brass: #c6a463;
  --slate: #55524c;
  --concrete: #8f8b83;
  --charcoal: #171613;
  --rule: rgba(32, 30, 26, 0.16);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "Jost", "Helvetica Neue", Arial, sans-serif;

  --max: 46rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--wine);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 47, 0.35);
}
a:hover, a:focus-visible { border-bottom-color: var(--wine); color: var(--slate); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Staff-line motif: five engraved rules, the site's signature element */
.staff {
  width: 100%;
  max-width: 220px;
  margin: 1.1rem 0 1.6rem;
}
.staff div { height: 1px; background: var(--rule); margin: 6px 0; }
.staff div:nth-child(3) { background: var(--brass); opacity: 0.8; }

/* ---- Header / nav ---- */
header.site {
  background: var(--charcoal);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: none;
  color: #f3f1ec;
}
.wordmark b { color: var(--brass); font-weight: 500; }
nav.primary ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav.primary a {
  border-bottom: 1px solid transparent;
  color: #ece9e2;
}
nav.primary a:hover, nav.primary a[aria-current="page"] {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* ---- Hero ---- */
.hero {
  max-width: 62rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 2.5rem;
}

/* Homepage hero: full-width portrait band, matching the original site.
   background-size is tied to height (not "cover") so the zoom level stays
   consistent as the window gets wider — a portrait photo scaled by width
   alone would zoom in further on wide screens. Swap the background-image
   below for a different photo if needed. */
.hero-photo {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-color: #918d85;
  background-image:
    linear-gradient(180deg, rgba(20,19,17,0.05), rgba(20,19,17,0.45) 100%),
    url("assets/photos/hero.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center 15%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35) 100%);
}
@media (max-width: 40rem) {
  /* On narrow phone screens, height-based sizing can leave the photo too
     narrow to fill the width — cover looks better here instead. */
  .hero-photo { background-size: cover; background-position: center 12%; }
}
.hero-photo-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  display: flex;
  justify-content: flex-end;
}
.hero-photo h1 {
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  text-align: right;
  color: #f4f2ec;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
  margin: 0;
}
.hero-photo h1 span {
  display: block;
  color: var(--brass);
  letter-spacing: 0.16em;
}

/* About page: same portrait-band treatment, shorter, with body copy below */
.hero-about {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  background-color: #3a3733;
  background-image:
    linear-gradient(180deg, rgba(20,19,17,0.15), rgba(15,14,12,0.55) 100%),
    url("assets/photos/about-bg.jpg");
  background-size: cover;
  background-position: center 25%;
}
.hero-about-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 2.25rem;
}
.hero-about .eyebrow { color: var(--brass); }
.hero-about h1 {
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  color: #f4f2ec;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
  margin: 0.3em 0 0;
}
.hero h1 {
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  text-align: right;
}
.hero h1 span { display: block; color: var(--brass); font-style: normal; letter-spacing: 0.14em; }
.hero .tagline {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  text-transform: uppercase;
  max-width: 34rem;
}

/* ---- Sections / containers ---- */
main { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 5rem; }
.wide { max-width: 62rem; }
section { padding: 2.25rem 0; border-top: 1px solid var(--rule); }
section:first-child { border-top: none; }

/* ---- Programme-style list (concerts) ---- */
details.year {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
}
details.year summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
details.year summary::-webkit-details-marker { display: none; }
details.year summary::before {
  content: "+";
  color: var(--brass);
  font-family: var(--mono);
  width: 1rem;
}
details.year[open] summary::before { content: "–"; }
details.year summary .count {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  text-transform: uppercase;
}

.programme { margin: 0.9rem 0 0.2rem; }
.entry {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-top: 1px dotted var(--rule);
}
.entry:first-child { border-top: none; }
.entry .date {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--brass);
  padding-top: 0.15rem;
}
.entry .what { font-weight: 600; }
.entry .where { color: var(--slate); font-size: 0.94rem; }

.upcoming-note {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--slate);
  border: 1px dashed var(--rule);
  padding: 1rem 1.1rem;
  border-radius: 2px;
}

/* Homepage "Recent & upcoming" highlight boxes — filled in by JS at load
   time from concerts.html, based on the visitor's current date. */
.highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
@media (min-width: 40rem) {
  .highlight-grid { grid-template-columns: 1fr 1fr; }
}
.highlight-box {
  border: 1px solid var(--rule);
  padding: 1.1rem 1.25rem;
}
.highlight-box .eyebrow { margin-bottom: 0.5rem; }
.highlight-body .hb-date {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.25rem;
}
.highlight-body .hb-what {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
}
.highlight-body .hb-where { color: var(--slate); font-size: 0.92rem; margin-top: 0.1rem; }
.highlight-body p { margin: 0; font-family: var(--mono); font-size: 0.85rem; color: var(--slate); }

/* "Show more" nested disclosure used within the upcoming list and
   within a year's programme once it goes past the first ~10 entries */
details.more { margin-top: 0.2rem; }
details.more > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
  padding: 0.7rem 0;
  border-top: 1px dotted var(--rule);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--brass); }
details.more > summary::after { content: " ↓"; }
details.more[open] > summary::after { content: " ↑"; }
details.more[open] > summary { margin-bottom: 0.2rem; }

/* ---- Bio / CV ---- */
.cv-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ink);
}
.cv-cta:hover { background: var(--ink); color: var(--paper); }

figure.cv-page { margin: 1.5rem 0; }
figure.cv-page img { border: 1px solid var(--rule); }
figure.cv-page figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  margin-top: 0.4rem;
}

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 40rem) {
  .contact-grid { grid-template-columns: 1.1fr 1fr; }
}
.contact-photo img { border: 1px solid var(--rule); }

form.contact {
  display: grid;
  gap: 1rem;
}
form.contact label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  display: block;
  margin-bottom: 0.35rem;
}
form.contact input,
form.contact textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
}
form.contact button {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.8rem 1.4rem;
  background: var(--wine);
  color: var(--paper);
  border: none;
  cursor: pointer;
}
form.contact button:hover { background: var(--ink); }
.contact-alt { margin-top: 1.5rem; font-size: 0.95rem; color: var(--slate); }

/* ---- Placeholder blocks (music/photos to be filled with real media) ---- */
.placeholder {
  border: 1px dashed var(--rule);
  padding: 1.5rem;
  color: var(--slate);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* ---- Footer ---- */
footer.site {
  background: var(--charcoal);
  padding: 2rem 1.25rem;
  text-align: center;
  font-family: var(--mono);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #b8b4ab;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}