/* ============================================================
   John von Seggern - ambient works
   Single dark theme. One accent. No build step.
   ============================================================ */

:root{
  /* ground runs slightly cold so the single accent has something to
     push against. Never pure black. */
  --ground:      #07080b;
  --ground-2:    #0b0d12;
  --ground-3:    #101319;

  --bone:        #e8e4dc;
  --bone-dim:    #a29e96;
  --muted:       #84817a;   /* 5.1:1 on --ground, keeps the 10px caps legible */

  /* sampled from the PRS stage photo: the projection-screen blue behind
     the silhouette. Cool, not warm, on purpose. */
  --accent:      #7fa3ab;
  --accent-hot:  #a3c5cc;

  --line:        rgba(232,228,220,.12);
  --line-soft:   rgba(232,228,220,.055);

  --pad:         clamp(20px, 4vw, 72px);
  --nav-h:       72px;
  --maxw:        1440px;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  /* one radius system: everything sharp except pill CTAs */
  --r-pill:      999px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:Onest, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--ground); }

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

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  padding:10px 16px; background:var(--bone); color:var(--ground);
  transform:translateY(-160%);
}
.skip:focus{ transform:none; }

/* ── atmosphere ─────────────────────────────────────────────
   All three layers are fixed + pointer-events:none so they never
   sit inside a scrolling container (GPU repaint killer on mobile). */

#fog{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.85;
  /* backing store is 1/10 scale; the blur hides the upscale seams */
  filter:blur(22px);
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 0%, transparent 30%, rgba(3,4,6,.72) 100%),
    radial-gradient(100% 60% at 50% 100%, transparent 40%, rgba(3,4,6,.6) 100%);
}
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(2%,3%)}   100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

main, .nav, .foot, .rail{ position:relative; z-index:3; }

/* ── nav ────────────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(7,8,11,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
@media (prefers-reduced-transparency: reduce){
  .nav.stuck{ background:var(--ground); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.brand{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{ font-size:14px; font-weight:500; letter-spacing:.02em; }
.brand-sub{ font-size:10px; color:var(--muted); letter-spacing:.22em; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav-links a{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a[aria-current="page"]{
  color:var(--bone);
  border-bottom:1px solid var(--accent);
  padding-bottom:4px;
}
.nav-cta{ color:var(--accent) !important; }
.nav-cta:hover{ color:var(--accent-hot) !important; }

/* mobile: the nav is real navigation between pages now, so the links
   must survive. Two compact rows; the contact CTA lives on every page. */
@media (max-width:760px){
  .nav{
    flex-wrap:wrap; height:auto;
    padding-top:12px; padding-bottom:12px;
    row-gap:6px;
  }
  .brand-sub{ display:none; }
  .nav-links{ width:100%; gap:18px; }
  .nav-links a{ font-size:10px; letter-spacing:.12em; }
  .nav-cta{ display:none; }
}

/* scroll progress rail */
.rail{
  position:fixed; right:0; top:0; bottom:0; width:1px;
  background:var(--line-soft); z-index:99;
}
.rail i{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg, transparent, var(--accent));
}
@media (max-width:760px){ .rail{ display:none; } }

/* ── shared type ────────────────────────────────────────────── */

.eyebrow{
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin:0 0 22px;
}

.h2{
  font-size:clamp(30px, 4.4vw, 60px);
  font-weight:300; line-height:1.06; letter-spacing:-.025em;
  margin:0 0 28px;
}
.h2.big{ font-size:clamp(48px, 10vw, 140px); letter-spacing:-.04em; }

.lede{
  font-size:clamp(17px, 1.5vw, 21px); line-height:1.62;
  color:var(--bone); max-width:60ch; margin:0 0 22px; font-weight:300;
}
.body{
  font-size:15.5px; line-height:1.75; color:var(--bone-dim);
  max-width:62ch; margin:0 0 18px;
}

.todo{
  color:var(--accent); font-size:.92em; letter-spacing:.04em;
  border-bottom:1px dashed rgba(127,163,171,.4);
}

.sec{
  padding:clamp(96px, 15vh, 190px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
}

/* ── buttons ────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;                    /* CTA labels never wrap */
  padding:14px 30px; border-radius:var(--r-pill);
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .18s var(--ease), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.985); }

.btn-primary{
  background:var(--accent); color:#120c04; font-weight:500;  /* 7.2:1 */
  border:1px solid var(--accent);
}
.btn-primary:hover{ background:var(--accent-hot); border-color:var(--accent-hot); }

.btn-ghost{
  background:rgba(232,228,220,.03);
  border:1px solid var(--line);
  color:var(--bone);                                        /* 14:1 on ground */
}
.btn-ghost:hover{ border-color:var(--bone-dim); background:rgba(232,228,220,.07); }

/* ── 01 hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  /* bottom padding reserves the lower band for the wordmark so the CTA row
     never lands on top of the letterforms */
  padding:calc(var(--nav-h) + 24px) var(--pad) clamp(120px, 21vh, 250px);
  overflow:hidden;
}

/* photograph layer: light-trail strings, kept dim so type stays first */
.hero-bg{
  position:absolute; inset:-12% 0; z-index:-2; pointer-events:none;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.34;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
}

.hero-inner{ max-width:min(980px, 94%); margin:0 auto; width:100%; }

.hero-h{
  font-size:clamp(34px, 5.2vw, 68px);
  font-weight:200; line-height:1.08; letter-spacing:-.035em;
  margin:0 0 26px;
}
.hero-sub{
  font-size:clamp(15px, 1.35vw, 18px); line-height:1.65;
  color:var(--bone-dim); max-width:48ch; margin:0 0 38px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* floating video tile, Kage-style: bottom right, above the wordmark */
.hero-tile{
  position:absolute; right:var(--pad); bottom:clamp(90px, 16vh, 190px);
  width:clamp(150px, 15vw, 230px);
  z-index:4;
  text-align:left;
  border:1px solid var(--line);
  background:var(--ground-2);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.hero-tile:hover{ border-color:var(--bone-dim); transform:translateY(-3px); }
.hero-tile video{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  opacity:.85;
}
.hero-tile-label{
  display:block; padding:10px 12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:900px){ .hero-tile{ display:none; } }

/* giant wordmark, bleeding both edges, parallax on scroll */
.wordmark{
  position:absolute; left:0; right:0; bottom:-2.5vw;
  pointer-events:none; user-select:none;
  z-index:-1;
  overflow:hidden;
}
.wordmark span{
  display:block;
  font-size:13.5vw; font-weight:800; line-height:.78;
  letter-spacing:-.045em;
  text-align:center;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,228,220,.16);
  will-change:transform;
}
@supports not (-webkit-text-stroke: 1px black){
  .wordmark span{ color:rgba(232,228,220,.07); }
}

/* ── 02/03 albums ─ full-bleed photographic sections ────────── */

.album{
  position:relative;
  overflow:hidden;   /* clips the oversized parallax image */
  padding:clamp(110px, 18vh, 220px) var(--pad);
}

/* photograph sits taller than the section and drifts as it scrolls through */
.album-bg{
  position:absolute; inset:-18% 0; z-index:-1; pointer-events:none;
}
.album-bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.38;
  will-change:transform;
}
/* darken toward the edges so copy always sits on quiet ground */
.album-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--ground) 0%, transparent 22%, transparent 74%, var(--ground) 100%),
    radial-gradient(110% 90% at 30% 50%, rgba(7,8,11,.62), transparent 70%);
}

.album-inner{ max-width:var(--maxw); margin:0 auto; }

.album-status{
  display:inline-block;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(127,163,171,.35);
  padding:8px 16px; border-radius:var(--r-pill);
  margin:0 0 26px;
}

.album-grid{
  display:grid; gap:clamp(40px, 6vw, 96px);
  grid-template-columns:1fr;
  align-items:start;
  margin-top:clamp(20px, 3vh, 42px);
}
@media (min-width:940px){
  .album-grid{ grid-template-columns:1.45fr .95fr; }
  .album-grid-flip{ grid-template-columns:.95fr 1.45fr; }
}
/* on small screens the cover follows the copy, whichever side it lives on */
@media (max-width:939px){
  .album-grid-flip .album-art{ order:2; }
}

.album-art{ margin:0; }
.album-art img{
  width:100%;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(3,4,6,.6);
}
.album-art figcaption{
  margin-top:14px; font-size:12px; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase;
}

.album-meta{ margin:26px 0 0; border-top:1px solid var(--line); max-width:56ch; }
.album-meta > div{
  display:grid; grid-template-columns:1fr; gap:4px;
  padding:16px 0; border-bottom:1px solid var(--line-soft);
}
.album-meta dt{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.album-meta dd{ margin:0; font-size:14.5px; color:var(--bone); line-height:1.5; }

/* ── subpage head ─ full-bleed photographic opener ──────────── */

.page-head{
  position:relative; overflow:hidden;
  min-height:72dvh;
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(56px, 9vh, 110px);
}
.page-head-inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.page-title{ margin-bottom:20px; }
.page-head .hero-sub{ margin-bottom:0; }

/* ── releases grid (home) ─ the shelf of past records ────────── */

.rel-grid{
  display:grid; gap:clamp(16px, 2.2vw, 30px);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .rel-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .rel-grid{ grid-template-columns:repeat(4, 1fr); } }

.rel{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  background:var(--ground-2);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
a.rel:hover{ border-color:var(--bone-dim); transform:translateY(-4px); }

.rel-art{
  aspect-ratio:1/1; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.rel-art img{
  width:100%; height:100%; object-fit:cover;
  opacity:.9;
  transition:opacity .4s var(--ease), transform .6s var(--ease);
}
a.rel:hover .rel-art img{ opacity:1; transform:scale(1.02); }
.rel-art-empty{
  display:grid; place-items:center;
  background:var(--ground-3);
}

.rel-meta{
  display:flex; flex-direction:column; gap:6px;
  padding:16px 18px 20px;
}
.rel-artist{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.rel-title{
  font-size:16.5px; font-weight:400; line-height:1.3; letter-spacing:-.01em;
  color:var(--bone);
}
.rel-role{
  font-size:12.5px; color:var(--bone-dim); letter-spacing:.03em;
}
.rel-line{
  font-size:13px; line-height:1.6; color:var(--bone-dim);
  margin-top:2px;
}

/* ── history timeline (home) ────────────────────────────────── */

.timeline{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
  max-width:900px;
}
.era{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:28px 0; border-bottom:1px solid var(--line-soft);
}
@media (min-width:700px){
  .era{ grid-template-columns:150px 1fr; gap:28px; }
}
.era-when{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); padding-top:5px;
  font-variant-numeric:tabular-nums;
}
.era-what h3{
  margin:0 0 8px; font-size:17px; font-weight:400; letter-spacing:-.01em;
}
.era-what p{
  margin:0; font-size:14.5px; line-height:1.7; color:var(--bone-dim);
  max-width:58ch;
}
.era-what em{ font-style:italic; }

/* ── story (fourth world) ───────────────────────────────────── */

.story-body{ max-width:66ch; }

.room-quote{ text-align:center; }
.room-quote .manifesto{ margin-bottom:0; }

/* ── demo slot (prs) ────────────────────────────────────────── */

.demo-slot{
  border:1px dashed rgba(127,163,171,.4);
  padding:clamp(28px, 5vh, 54px) clamp(18px, 3vw, 40px);
  text-align:center;
  max-width:720px;
}

/* ── 04 visions ─ clickable video tiles ─────────────────────── */

.visions-sub{
  margin:-6px 0 46px;
  font-size:15px; color:var(--bone-dim); max-width:52ch;
}

.tiles{
  display:grid; gap:clamp(16px, 2.2vw, 30px);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .tiles{ grid-template-columns:repeat(3, 1fr); } }

.tile{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line);
  background:var(--ground-2);
  text-align:left;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.tile:hover{ border-color:var(--bone-dim); transform:translateY(-4px); }
.tile video{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover;
  opacity:.85;
  transition:opacity .4s var(--ease), transform .6s var(--ease);
}
.tile:hover video{ opacity:1; transform:scale(1.025); }
/* the color desert clip joins the monochrome world non-destructively */
.tile-mono video{ filter:grayscale(1) contrast(1.05); }

.tile-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:36px 16px 14px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone);
  background:linear-gradient(180deg, transparent, rgba(3,4,6,.82));
  pointer-events:none;
}

/* ── 05 lineage ─────────────────────────────────────────────── */

.lineage{ text-align:center; }

.lineage-figure{
  margin:0 auto clamp(48px, 8vh, 90px);
  max-width:520px;
}
.lineage-figure img{
  width:100%;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(3,4,6,.6);
}

.manifesto{
  margin:0 auto clamp(56px, 9vh, 110px);
  max-width:24ch;
  font-size:clamp(28px, 4.6vw, 62px);
  font-weight:200; line-height:1.14; letter-spacing:-.03em;
  color:var(--bone);
}

.credits{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
  text-align:left;
  max-width:1100px; margin:0 auto;
}
@media (min-width:860px){
  .credits{ grid-template-columns:repeat(3, 1fr); }
}
.credit{ border-top:1px solid var(--line); padding-top:20px; }
.credit h3{
  margin:0 0 8px; font-size:16px; font-weight:400; letter-spacing:-.01em;
}
.credit p{ margin:0; font-size:14px; color:var(--bone-dim); line-height:1.65; }

/* ── 06 listen ──────────────────────────────────────────────── */

.listen{ text-align:center; padding-bottom:clamp(110px,18vh,220px); }
.listen-sub{
  max-width:46ch; margin:0 auto 40px;
  font-size:clamp(15px,1.4vw,18px); color:var(--bone-dim);
}
.listen-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ── footer ─────────────────────────────────────────────────── */

.foot{
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:space-between; align-items:center;
  padding:28px var(--pad); border-top:1px solid var(--line-soft);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.foot nav{ display:flex; gap:22px; }
.foot a:hover{ color:var(--bone); }
.foot-icons{ align-items:center; }
.foot-icons a{ display:block; padding:4px; }
.foot-icons svg{ display:block; }

/* ── lightbox ───────────────────────────────────────────────── */

.lightbox{
  border:0; padding:0; margin:auto;
  background:transparent;
  max-width:min(92vw, 560px);
  width:100%;
}
.lightbox::backdrop{
  background:rgba(3,4,6,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lightbox video{
  display:block; width:100%; max-height:80dvh;
  border:1px solid var(--line);
  background:var(--ground);
}
.lightbox-title{
  margin:14px 0 0;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim); text-align:center;
}
.lightbox-close{
  position:absolute; top:-44px; right:0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); padding:8px 0;
}
.lightbox-close:hover{ color:var(--bone); }

/* ── scroll-driven animation ────────────────────────────────
   Native CSS scroll timelines. No scroll event listeners anywhere in
   this project. Where unsupported, these elements simply sit at their
   start state, which is why all of them are decorative only. */

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){

    /* right-edge progress rail */
    .rail i{
      height:100%;
      transform-origin:top;
      animation:railgrow linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes railgrow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

    /* wordmark drifts up as the hero leaves. Communicates depth between
       the type plane and the copy plane. */
    .wordmark span{
      animation:wmdrift linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes wmdrift{
      from{ transform:translateY(0) }
      to  { transform:translateY(-22%) }
    }

    /* hero photograph drifts against the type on the way out */
    .hero-bg img{
      animation:herodrift linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes herodrift{
      from{ transform:translateY(0) scale(1) }
      to  { transform:translateY(6%) scale(1.04) }
    }

    /* album photographs travel slower than the page: the layered,
       animated background John asked for, at CSS cost only */
    .album-bg img{
      animation:albumdrift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes albumdrift{
      from{ transform:translateY(-7%) scale(1.06) }
      to  { transform:translateY(7%)  scale(1.06) }
    }
  }
}

/* ── reveal on scroll (IntersectionObserver driven) ─────────── */

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out) var(--d,0s),
             transform .9s var(--ease-out) var(--d,0s);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
  .tile, .hero-tile{ transition:none; }
}