/* Homepage-only layout, modelled on gijsidema.com:
   white page, centred artist name in caps, nav links directly underneath,
   monospace type, large photo, minimal lines. Loaded after styles.css by
   index.html only, so the other pages keep their current look. */

body.home{
  --bg:#ffffff;
  --bg-raised:#ffffff;
  --bg-raised-2:#ffffff;
  --hairline:rgba(0,0,0,0.14);
  --ink:#000000;
  --ink-soft:#000000;
  --muted:#575757;
  --accent:#000000;
  --accent-soft:transparent;
  --accent-dim:#000000;
  --display:'Roboto Mono', ui-monospace, Consolas, monospace;
  --body:'Roboto Mono', ui-monospace, Consolas, monospace;
  --mono:'Roboto Mono', ui-monospace, Consolas, monospace;
  font-size:14px;
  font-weight:300;
  line-height:1.8;
}
.home h1,.home h2,.home h3{ font-weight:400; }

/* ---------- Header: name on top, nav directly below ---------- */
.home .nav{
  position:relative; z-index:20;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:none;
}
.home .nav-inner{
  flex-direction:column; justify-content:center; align-items:center;
  gap:22px;
  padding-block:clamp(36px,6vw,60px) 12px;
  position:relative;
}
.home .wordmark{
  font-family:var(--display);
  font-weight:400;
  font-size:42px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#575757;
  line-height:1.15;
  text-align:center;
}
.home .nav-right{ flex-direction:column; gap:0; align-items:center; }
.home .nav-links{
  justify-content:center; flex-wrap:wrap;
  gap:8px calc(10px + 2vw);
  font-size:14px; font-weight:400; letter-spacing:0.05em;
}
.home .nav-links a{ color:#000; border-bottom:1px solid transparent; padding-block:2px; }
.home .nav-links a:hover, .home .nav-links a:focus-visible{ color:#000; border-color:#000; }

.home .lang-switch{ position:absolute; top:14px; right:0; }
.home .lang-btn{ border-radius:0; font-size:0.72rem; color:#575757; }
.home .lang-btn.active{ background:transparent; border-color:#000; color:#000; }

/* ---------- Hero: text left, photo right (as before) ---------- */
.home .hero{
  padding-block:clamp(28px,5vw,48px) clamp(36px,6vw,64px);
}
.home .hero h1{
  font-size:clamp(1.9rem, 3.6vw, 3.2rem);
  line-height:1.12;
  text-wrap:normal;
}
/* three deliberate lines; the middle one never breaks */
.home .hero h1 .hl{ display:block; white-space:nowrap; }
.home .hero h1 em.hl{ margin-block:0.04em; }
@media (max-width:760px){
  .home .hero h1{ font-size:min(7.6vw, 2.6rem); }
}
.home .hero h1 em{ font-style:normal; color:inherit; }
.home .hero-sub{ margin-top:20px; max-width:46ch; font-size:14px; }
.home .hero-photo-wrap{
  border:none; border-radius:0; box-shadow:none;
  aspect-ratio:auto;
}
.home .hero-photo-wrap::after{ display:none; }
.home .hero-photo{ height:auto; }

/* ---------- Sections: no rules, uppercase headings ---------- */
.home section{ border-top:none; }
.home .section-head{ justify-content:center; text-align:center; flex-direction:column; align-items:center; gap:6px; }
.home .section-head h2{
  font-size:16px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase;
}
.home .section-num{ font-size:12px; text-transform:uppercase; }
.home .about-text{ max-width:60ch; margin-inline:auto; text-align:center; }
.home .about-text p{ font-size:14px; max-width:none; }
.home .tags{ justify-content:center; }
.home .tag{ border-radius:0; border-color:#000; color:#000; font-size:12px; text-transform:uppercase; }
.home .genre-pill{ border-radius:0; }

/* ---------- Contact form: square corners ---------- */
.home .form-field input,
.home .form-field textarea,
.home .form-submit,
.home .form-status{ border-radius:0; }

/* ---------- Archive photos: larger thumbs, plain square lightbox controls ---------- */
.home .listing-photos{ gap:12px; margin-top:20px; }
.home .photo-thumb{
  width:clamp(220px, 34vw, 340px);
  border-radius:0; border:none;
}
.home .photo-thumb img{ transition:opacity .2s ease; }
.home .photo-thumb:hover img, .home .photo-thumb:focus-visible img{ transform:none; opacity:0.85; }
.home .listing-photos{ scrollbar-color:#000 transparent; scrollbar-width:thin; }
.home .listing-photos::-webkit-scrollbar-thumb{ border-radius:0; background:#000; }

dialog#lightbox{ max-width:min(1100px, 94vw); }
dialog#lightbox::backdrop{ background:rgba(255,255,255,0.97); }
dialog#lightbox img{ border-radius:0; max-height:82vh; }
.home .lightbox-caption{ color:#575757; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; }
.home .lightbox-close,
.home .lightbox-nav{
  width:auto; height:auto; padding:8px 14px;
  border:none; border-radius:0; background:transparent;
  color:#fff; text-shadow:0 0 8px rgba(0,0,0,0.65);
}
.home .lightbox-close{ top:6px; right:6px; font-size:1.3rem; }
.home .lightbox-nav{ font-size:2.4rem; font-weight:300; }
.home .lightbox-prev{ left:0; }
.home .lightbox-next{ right:0; }
.home .lightbox-close:hover, .home .lightbox-close:focus-visible,
.home .lightbox-nav:hover, .home .lightbox-nav:focus-visible{ background:transparent; opacity:0.55; }
.home .lightbox-close:focus-visible,
.home .lightbox-nav:focus-visible{ outline:none; opacity:0.55; }

/* ---------- Small screens ---------- */
@media (max-width:900px){ .home .wordmark{ font-size:36px; } }
@media (max-width:680px){
  .home .wordmark{ font-size:24px; }
  .home .nav-inner{ gap:14px; padding-top:32px; }
  .home .nav-right{ flex-direction:row; gap:10px; }
  .home .lang-switch{ position:static; }
  .home .nav-toggle{ border-radius:0; border-color:#000; color:#000; }
  .home .nav-links{ background:#fff; top:100%; border-bottom:none; }
  .home .nav-links a{ border-bottom:none; }
  .home .nav-links a{ text-align:center; }
}

/* ---------- Live: show only recent performances, rest behind a button ---------- */
.home .listing-body a.ticket + a.ticket{ margin-left:18px; }
.home .show-more{
  display:block; margin:28px auto 0; padding:8px 18px; cursor:pointer;
  background:#fff; color:#000; border:1px solid #000; border-radius:0;
  font:inherit; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
}
.home .show-more:hover, .home .show-more:focus-visible{ background:#000; color:#fff; }
.home .listing-item[hidden]{ display:none; }

/* ---------- About: text left, portrait right ---------- */
.home .about-grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,5vw,64px); align-items:center;
}
.home .about-grid .about-text{ margin-inline:0; text-align:left; max-width:none; }
.home .about-grid .tags{ justify-content:flex-start; }
.home .about-photo{ display:block; width:100%; height:auto; max-width:370px; justify-self:center; }
@media (max-width:700px){
  .home .about-grid{ grid-template-columns:minmax(0,1fr); }
  .home .about-photo{ max-width:320px; }
}

/* ---------- Hero photo: soft feathered edge + muted colour to sit with the About illustration ---------- */
.home .hero-photo{
  filter:saturate(0.8) contrast(0.96);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite:intersect;
}