/* ==========================================================
   Mechy Sound
   Palette and letterforms are taken from the existing logo:
   ink #231F20 and moss #88A83E are sampled straight out of it.
   The ground is that ink pushed toward green – forest floor,
   which is what "mechy" (mosses) means and where the hero
   photograph was taken.
   ========================================================== */

:root {
  --ground:      #14170F;
  --ground-2:    #1C2016;
  --ground-3:    #242A1D;
  --ink:         #231F20;

  --moss:        #88A83E;
  --moss-lit:    #A6C75E;
  --moss-dim:    #5D7329;

  --bone:        #E9EBE0;
  --bone-2:      #B4BAA6;
  --bone-3:      #868D77;

  --rule:        #2E3527;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --band-y: clamp(4.5rem, 11vh, 9rem);
}

/* ── reset-ish ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1.03; }
p { margin: 0 0 1.1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--moss-lit); text-decoration: none; }
a:hover { color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--moss-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--moss); color: var(--ink);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { width: min(78rem, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ── shared type devices ───────────────────────────────── */
.eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--moss);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 1.6rem; height: 1px; margin-right: .7rem;
  background: var(--moss-dim); vertical-align: .32em;
}

.h-sect {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem);
  font-stretch: 82%;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: .55em;
}

.sect-lede {
  max-width: var(--measure);
  color: var(--bone-2);
  font-size: 1.06em;
  margin-bottom: 2.6rem;
}

.band { padding-block: var(--band-y); }
.band + .band { border-top: 1px solid var(--rule); }

/* ── top bar ───────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-block: .85rem;
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, padding .3s;
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  border-bottom-color: var(--rule);
  padding-block: .6rem;
}
.topbar__in {
  width: min(78rem, 100%); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar__mark img { width: clamp(122px, 14vw, 168px); height: auto; }

.topbar__nav { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.7rem); }
.topbar__nav a {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-2);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
}
.topbar__nav a:hover { color: var(--bone); border-bottom-color: var(--moss); }
.topbar__nav a.is-current { color: var(--moss-lit); border-bottom-color: var(--moss); }

.topbar__cta {
  color: var(--ink) !important;
  background: var(--moss);
  padding: .48rem .95rem !important;
  border-bottom: 0 !important;
  font-weight: 600;
}
.topbar__cta:hover { background: var(--moss-lit); }

@media (max-width: 47rem) {
  .topbar__nav a:not(.topbar__cta) { display: none; }
}

/* ── hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: end;
  padding: 7rem 0 clamp(4rem, 12vh, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Slideshow: slides stack, crossfade, and drift slowly (Ken Burns).
   Slide 1 is in the markup for LCP; the rest are injected after load. */
.hero__stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  /* The drift animates THIS wrapper, not the <img>. Safari composites
     transforms on replaced elements with object-fit unreliably, and the
     server-rendered first slide was the one that stayed frozen. */
  transform: scale(1.10);
  will-change: opacity, transform;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide img,
.hero__slide picture {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 42%;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The drift is driven from JS (a fresh random vector per slide) rather
   than fixed keyframes, so no two passes across an image are alike.
   This start scale is baked in so the first paint already matches the
   animation's opening frame -- otherwise the image visibly snaps when
   the drift takes over. KB_START in site.js must match this value. */

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* left scrim: the slideshow cycles through images of very different
       brightness, so the text needs its own dark bed rather than relying
       on any one photograph being dark enough */
    linear-gradient(to right, rgba(20,23,15,.86) 0%, rgba(20,23,15,.66) 32%, rgba(20,23,15,.22) 62%, rgba(20,23,15,0) 88%),
    linear-gradient(to top, var(--ground) 2%, rgba(20,23,15,.74) 34%, rgba(20,23,15,.34) 68%, rgba(20,23,15,.58) 100%),
    radial-gradient(115% 78% at 22% 88%, rgba(136,168,62,.16), transparent 62%);
}

.hero__body { position: relative; width: min(60rem, 100%); min-width: 0; }
.hero__wordmark img { width: min(38rem, 100%); height: auto; }

.hero__lede {
  margin: 1.6rem 0 2rem;
  font-size: clamp(1.06rem, 1rem + .55vw, 1.5rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--bone);
  max-width: 44ch;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,.5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 3rem; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--solid { background: var(--moss); color: var(--ink); font-weight: 500; }
.btn--solid:hover { background: var(--moss-lit); color: var(--ink); }
.btn--ghost { border-color: color-mix(in srgb, var(--bone) 34%, transparent); color: var(--bone); }
.btn--ghost:hover { border-color: var(--moss); color: var(--moss-lit); background: rgba(136,168,62,.08); }

.hero__facts { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.6rem); }
.hero__facts dt {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-3); margin-bottom: .28rem;
}
.hero__facts dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800; font-stretch: 78%;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);
  line-height: 1; color: var(--bone);
}
.hero__facts dd span {
  font-family: var(--mono); font-weight: 400; font-stretch: normal;
  font-size: .82rem; letter-spacing: .04em; color: var(--moss);
}

/* the contour wave – signature device, redrawn from the logo */
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(80px, 15vh, 190px); pointer-events: none; }
.hero__wave svg { width: 100%; height: 100%; }

[data-wave] path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ── cards ─────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 34rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--ground); padding: clamp(1.5rem, 3vw, 2.3rem); transition: background .25s; }
.card:hover { background: var(--ground-2); }
.card h3 {
  font-size: 1.16rem; font-stretch: 86%; text-transform: uppercase;
  letter-spacing: .005em; margin-bottom: .7rem; color: var(--bone);
}
.card p { margin: 0; color: var(--bone-2); font-size: .96rem; }

/* ── scale: amplitude encodes audience size ────────────── */
.band--scale { background: var(--ground-2); }
.scale { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 60rem) { .scale { grid-template-columns: repeat(3, 1fr); } }

.scale__step {
  position: relative;
  background: var(--ground-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(5rem, 9vw, 7rem);
  overflow: hidden;
}
.scale__wave { position: absolute; top: 0; left: 0; right: 0; height: clamp(4.4rem, 8vw, 6.2rem); opacity: .85; }
.scale__wave svg { width: 100%; height: 100%; }

.scale__cap {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-3); margin-bottom: .5rem;
}
.scale__num {
  font-family: var(--display); font-weight: 800; font-stretch: 78%;
  font-size: 1.55rem; letter-spacing: -.01em; color: var(--moss-lit);
  margin-right: .38rem; text-transform: none;
}
.scale__step h3 {
  font-size: 1.28rem; font-stretch: 86%; text-transform: uppercase;
  margin-bottom: .7rem;
}
.scale__step p:last-child { margin: 0; color: var(--bone-2); font-size: .95rem; }

/* ── technika ──────────────────────────────────────────── */
.tech { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); }
@media (min-width: 60rem) { .tech { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.tech__text p { max-width: var(--measure); color: var(--bone-2); }
.tech__note {
  border-left: 2px solid var(--moss);
  padding-left: 1rem;
  color: var(--bone) !important;
  font-size: .95rem;
}

.spec { border-top: 1px solid var(--rule); }
.spec__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bone-3);
}
.spec dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-stretch: 84%;
  font-size: 1.22rem; text-transform: uppercase; color: var(--bone);
}
.spec dd span { color: var(--moss); font-weight: 400; }

/* ── bio ───────────────────────────────────────────────── */
.bio { display: grid; gap: clamp(1.4rem, 4vw, 3.6rem); }
@media (min-width: 60rem) { .bio { grid-template-columns: 1fr 1.6fr; align-items: start; } }
.bio__head .h-sect { margin-bottom: 0; }
.bio__text p { max-width: var(--measure); color: var(--bone-2); }
.bio__text p:first-child { color: var(--bone); font-size: 1.08em; }
.bio__text a {
  color: var(--moss-lit);
  text-decoration: underline;
  text-decoration-color: var(--moss-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s, text-decoration-color .2s;
}
.bio__text a:hover { color: var(--bone); text-decoration-color: var(--moss); }

.bio__photo { margin: 2rem 0 0; max-width: 26rem; }
.bio__photo img {
  width: 100%; height: auto;
  filter: saturate(.9) contrast(1.02);
  border-top: 2px solid var(--moss);
}
.bio__photo figcaption {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  color: var(--bone-3); padding-top: .7rem;
}

/* ── galerie ───────────────────────────────────────────── */
.band--gal { padding-bottom: calc(var(--band-y) * .6); }
.gal {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
/* 12 shots: 2 / 3 / 4 columns all divide evenly, so no orphan cells */
@media (min-width: 46rem) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .gal { grid-template-columns: repeat(4, 1fr); } }

.gal li { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ground-2); }
.gal picture { display: block; width: 100%; height: 100%; }
.gal img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88) contrast(1.02);
  transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .35s;
}
.gal li:hover img { transform: scale(1.045); filter: saturate(1.04) contrast(1.02); }

/* ── lightbox ──────────────────────────────────────────── */
.gal button {
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit;
}
.gal button:focus-visible { outline: 2px solid var(--moss-lit); outline-offset: -3px; }

.lb[hidden] { display: none !important; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(10,12,8,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem clamp(.9rem, 3vw, 1.8rem);
}
.lb__count {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--bone-3);
}
.lb__x {
  background: none; border: 0; cursor: pointer; padding: .5rem;
  color: var(--bone-2); line-height: 0;
}
.lb__x:hover { color: var(--bone); }
.lb__x svg { width: 22px; height: 22px; }

.lb__stage { position: relative; min-height: 0; }
/* the grid child is <picture> (display:block from the reset), so it has
   to carry the size cap too -- capping only the <img> lets the wrapper
   grow and push the caption off-screen */
/* Size the frame by geometry rather than percentages: top/bottom pin it
   to the row, so the box is definite and object-fit letterboxes the photo
   inside it. Percentage max-heights here resolve against an indefinite
   parent and silently do nothing. */
.lb__stage picture {
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(.5rem, 4vw, 4.5rem);
  right: clamp(.5rem, 4vw, 4.5rem);
  display: block;
}
.lb__stage picture img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(20,23,15,.55); border: 1px solid var(--rule);
  color: var(--bone); cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.lb__nav:hover { background: var(--moss); border-color: var(--moss); color: var(--ink); }
.lb__nav svg { width: 18px; height: 18px; }
.lb__prev { left: clamp(.4rem, 1.5vw, 1.2rem); }
.lb__next { right: clamp(.4rem, 1.5vw, 1.2rem); }

.lb__cap {
  padding: .9rem clamp(.9rem, 3vw, 1.8rem) 1.4rem;
  color: var(--bone-2); font-size: .93rem; text-align: center;
  min-height: 3.2rem;
}
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .lb { animation: lb-in .22s ease-out; }
  .lb__stage img { animation: lb-img .28s ease-out; }
}
@keyframes lb-in  { from { opacity: 0; } }
@keyframes lb-img { from { opacity: 0; transform: scale(.985); } }

/* ── kontakt ───────────────────────────────────────────── */
.band--contact { background: var(--ground-2); }
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 60rem) { .contact { grid-template-columns: 1fr 1fr; align-items: center; } }
.contact__lede { color: var(--bone-2); max-width: 34ch; }

.contact__list { border-top: 1px solid var(--rule); }
.contact__list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--rule);
}
.contact__list span {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bone-3);
}
.contact__list a {
  font-family: var(--display); font-weight: 700; font-stretch: 84%;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.32rem);
  text-align: right;
}
.contact__list b {
  font-family: var(--display); font-weight: 700; font-stretch: 84%;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.32rem);
  color: var(--bone); text-align: right;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* ── foot ──────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); padding-top: 3.2rem; }
.foot__grid {
  display: grid; gap: 2.2rem;
  padding-bottom: 2.6rem;
}
@media (min-width: 54rem) {
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
}
.foot__brand img { width: 150px; height: auto; opacity: .9; }
.foot__brand p {
  margin: 1rem 0 0; font-size: .9rem; color: var(--bone-3); line-height: 1.6;
}
.foot__nav, .foot__social { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.foot__nav a, .foot__social a {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone-2);
  border-bottom: 1px solid transparent; padding-bottom: .1rem;
}
.foot__social a[href^="mailto"] { text-transform: none; }
.foot__nav a:hover, .foot__social a:hover { color: var(--moss-lit); border-bottom-color: var(--moss-dim); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-block: 1.6rem;
}
.foot__base p { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; color: var(--bone-3); }
.foot__moss { color: var(--moss-dim) !important; }

/* ── entrance ──────────────────────────────────────────── */
[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  [data-rise], [data-rise].is-in { opacity: 1; transform: none; transition: none; }
  .gal img, .gal li:hover img { transition: none; transform: none; }
}