:root{
    --amber:#e3a24a;
    --amber-bright:#ffce85;
    --parchment:#efe8da;
    --parchment-dim:#a49a89;
    --parchment-faint:#7d7568;
    --hair:rgba(239,232,218,0.09);
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}

  body{
    color:var(--parchment);
    font-family:'Newsreader', serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    background-color:#0a0908;
    position:relative;
  }

  /* ---- ONE continuous atmosphere behind everything ---- */
  .atmosphere{
    position:fixed;
    inset:0;
    z-index:-2;
    background-color:#0a0908;
    background-image:url('atmosphere.jpg');
    background-size:cover;
    background-position:top center;
  }
  /* soft warm directional glow that lives above the texture, fixed, so the whole
     page feels lit from one source rather than flatly dark */
  .glow{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(70% 50% at 62% 4%, rgba(227,162,74,0.08), transparent 62%),
      radial-gradient(90% 60% at 50% 120%, rgba(0,0,0,0.5), transparent 70%),
      linear-gradient(180deg, rgba(6,6,7,0.15) 0%, transparent 30%, transparent 72%, rgba(6,6,7,0.45) 100%);
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  a{color:var(--amber-bright);}
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--amber-bright);
    outline-offset:3px;
  }

  .container{ max-width:1140px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); }

  /* ---- label with amber tick ---- */
  .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--amber);
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
  }
  .label::before{
    content:"";
    width:26px; height:1px;
    background:var(--amber);
    opacity:0.8;
  }

  h2.head{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.008em;
    line-height:0.98;
    font-size:clamp(2rem, 4.6vw, 3rem);
    color:var(--parchment);
    margin-top:1rem;
  }

  /* ================= NAV ================= */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.4rem clamp(1.5rem,5vw,4rem);
    transition:background 0.35s ease, backdrop-filter 0.35s ease, padding 0.35s ease;
  }
  .nav.solid{
    background:linear-gradient(180deg, rgba(8,8,9,0.92), rgba(8,8,9,0.6));
    backdrop-filter:blur(8px);
    padding-top:1rem; padding-bottom:1rem;
  }
  .nav-mark{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--parchment);
    text-decoration:none;
  }
  .nav-cta{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--parchment);
    border:1px solid rgba(239,232,218,0.28);
    padding:0.55rem 1.1rem;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .nav-cta:hover{ background:var(--amber); color:#161100; border-color:var(--amber); }

  /* ================= HERO ================= */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero-photo{
    position:absolute; inset:0;
    z-index:-1;
    background-image:url('hero-graded.jpg');
    background-size:cover;
    background-position:center 58%;
    animation:drift 34s ease-in-out infinite alternate;
  }
  /* soft dissolve from the hero photo into the shared background, killing the seam */
  .hero::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:62%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0.25) 40%, rgba(10,9,8,0.55) 70%, rgba(10,9,8,0.78) 100%);
  }
  @keyframes drift{
    0%{ transform:scale(1.02) translateY(0); }
    100%{ transform:scale(1.09) translateY(-1.5%); }
  }

  .hero-inner{
    position:relative; z-index:1;
    width:100%;
    padding-bottom:clamp(3.5rem, 9vh, 7rem);
  }
  .hero .label{
    margin-bottom:1.6rem;
    font-size:clamp(0.85rem, 1.6vw, 1.05rem);
    letter-spacing:0.2em;
  }
  .hero .label::before{ width:34px; }
  .hero-title{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    text-transform:uppercase;
    line-height:0.86;
    letter-spacing:0.005em;
    font-size:clamp(3.4rem, 12vw, 9rem);
    color:var(--parchment);
    margin-bottom:1.6rem;
    text-shadow:0 6px 40px rgba(0,0,0,0.55);
  }
  .hero-title span{ display:block; }
  .hero-title .lit{ color:var(--amber-bright); }
  .hero-sub{
    font-style:italic;
    font-size:clamp(1.1rem, 1.9vw, 1.4rem);
    color:var(--parchment);
    max-width:34ch;
    margin-bottom:2.4rem;
    text-shadow:0 2px 18px rgba(0,0,0,0.6);
  }
  .hero-actions{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; }

  .btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-decoration:none;
    padding:1rem 2rem;
    display:inline-flex; align-items:center; gap:0.6rem;
    background:var(--amber);
    color:#161100;
    font-weight:500;
    border:1px solid var(--amber);
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  .btn:hover{ background:var(--amber-bright); border-color:var(--amber-bright); transform:translateY(-1px); }
  .btn .chev{ transition:transform 0.15s ease; }
  .btn:hover .chev{ transform:translateX(3px); }

  .link-quiet{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--parchment);
    border-bottom:1px solid rgba(227,162,74,0.5);
    padding-bottom:3px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .link-quiet:hover{ color:var(--amber-bright); border-color:var(--amber-bright); }

  /* ================= BLOCKS (no borders, all bleed into shared bg) ================= */
  .block{ position:relative; padding:clamp(5rem,12vh,9rem) 0; }

  /* ---- QUOTE ---- */
  .quote{ text-align:center; padding:clamp(5rem,12vh,9rem) 0 clamp(6rem,15vh,11rem); position:relative; z-index:2; }
  .quote blockquote{
    font-family:'Newsreader', serif;
    font-style:italic;
    font-weight:500;
    line-height:1.12;
    font-size:clamp(2.2rem, 6.5vw, 4.6rem);
    color:var(--parchment);
    max-width:16ch;
    margin:0 auto;
    text-wrap:balance;
  }

  /* ---- INVITATION: two-column editorial ---- */
  .invite-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(2rem,6vw,5rem);
    align-items:start;
  }
  .invite-head h2{ margin-top:1rem; }
  .invite-head .aside{
    margin-top:2rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    line-height:1.9;
    letter-spacing:0.05em;
    color:var(--parchment-faint);
    text-transform:uppercase;
  }
  .invite-body p{
    font-size:1.12rem;
    color:var(--parchment);
    margin-bottom:1.4rem;
  }
  .invite-body p:first-child::first-letter{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:900;
    font-size:3.2rem;
    line-height:0.62;
    float:left;
    padding:0.1rem 0.45rem 0 0;
    color:var(--amber-bright);
  }
  .invite-body .close{ font-style:italic; color:var(--parchment-dim); }
  @media (max-width:820px){
    .invite-grid{ grid-template-columns:1fr; gap:2rem; }
  }

  /* ---- SIGNUP: composed, not a lonely column ---- */
  .signup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,6vw,5rem);
    align-items:end;
  }
  .signup-left .label{ margin-bottom:0; }
  .signup-left p.lede{
    color:var(--parchment-dim);
    font-size:1.05rem;
    margin-top:1.6rem;
    max-width:40ch;
  }
  .signup-left .signup-premiere{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--amber);
    margin-top:1.4rem;
  }
  form#gathering-form{ display:flex; flex-direction:column; gap:1.3rem; }
  .field label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.66rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    margin-bottom:0.55rem;
  }
  .field input{
    width:100%;
    background:rgba(6,6,7,0.5);
    border:none;
    border-bottom:1px solid rgba(239,232,218,0.3);
    color:var(--parchment);
    font-family:'Newsreader', serif;
    font-size:1.1rem;
    padding:0.7rem 0.2rem;
    transition:border-color 0.2s ease;
  }
  .field input:focus{ border-bottom-color:var(--amber); }
  .hp{ display:none; }
  .signup-submit{ margin-top:0.6rem; align-self:flex-start; cursor:pointer; }
  .form-note{
    margin-top:0.4rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    color:var(--parchment-faint);
    letter-spacing:0.03em;
  }
  #form-success{ display:none; }
  #form-success.show{ display:block; }
  #form-success .label{ margin-bottom:1rem; }
  #form-success p{ font-style:italic; font-size:1.3rem; color:var(--parchment); }
  @media (max-width:820px){
    .signup-grid{ grid-template-columns:1fr; gap:2.5rem; align-items:start; }
  }

  /* ---- ARTIST: photo, credit line, brief bio - the "written & performed by" convention ---- */
  .artist-grid{
    display:grid;
    grid-template-columns:minmax(180px,240px) 1fr;
    gap:clamp(2rem,5vw,3.5rem);
    align-items:start;
  }
  .artist-photo{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    filter:grayscale(0.15) contrast(1.03);
    background:#000;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%),
                        linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%),
               linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-composite:intersect;
  }
  .artist-body .credit{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    margin-bottom:1.2rem;
  }
  .artist-body .credit strong{ color:var(--parchment); font-weight:500; }
  .artist-body p.bio{ color:var(--parchment); max-width:58ch; margin-bottom:1.6rem; }
  .artist-link{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase;
    text-decoration:none; color:var(--parchment);
    border-bottom:1px solid rgba(227,162,74,0.5);
    padding-bottom:3px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .artist-link:hover{ color:var(--amber-bright); border-color:var(--amber-bright); }
  .artist-link .arr{ transition:transform 0.15s ease; }
  .artist-link:hover .arr{ transform:translateX(3px); }
  @media (max-width:640px){
    .artist-grid{ grid-template-columns:140px 1fr; }
  }
  @media (max-width:480px){
    .artist-grid{ grid-template-columns:1fr; }
    .artist-photo{ max-width:220px; }
  }

  /* ---- FOOTER ---- */
  footer{ padding:3.5rem 0 3rem; }
  .footer-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem; }
  .footer-mark{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--parchment-dim);
  }
  .footer-fine{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.66rem;
    color:var(--parchment-faint);
    letter-spacing:0.03em;
    max-width:44ch;
    text-align:right;
  }
  .footer-fine a{
    color:var(--parchment-faint);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .footer-fine a:hover{ color:var(--amber-bright); }
  @media (max-width:600px){ .footer-fine{ text-align:left; } }

  /* fade-in on scroll */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.8s ease, transform 0.8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---- OVERTURE SOUND TOGGLE ---- */
  .sound{
    position:fixed;
    right:clamp(1.2rem,3vw,2.2rem);
    bottom:clamp(1.2rem,3vw,2.2rem);
    z-index:120;
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
    padding:0.6rem 1rem 0.6rem 0.85rem;
    background:rgba(10,9,8,0.72);
    border:1px solid rgba(239,232,218,0.2);
    backdrop-filter:blur(8px);
    cursor:pointer;
    transition:border-color 0.25s ease, background 0.25s ease;
  }
  .sound:hover{ border-color:rgba(227,162,74,0.6); background:rgba(10,9,8,0.85); }
  .sound-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.64rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    white-space:nowrap;
  }
  .sound:hover .sound-label{ color:var(--parchment); }
  /* equalizer bars */
  .eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
  .eq span{
    width:2px;
    background:var(--amber);
    height:4px;
    border-radius:1px;
  }
  .sound.playing .eq span{ animation:eqbounce 0.9s ease-in-out infinite; }
  .sound.playing .eq span:nth-child(2){ animation-delay:0.15s; }
  .sound.playing .eq span:nth-child(3){ animation-delay:0.3s; }
  .sound.playing .eq span:nth-child(4){ animation-delay:0.45s; }
  @keyframes eqbounce{
    0%,100%{ height:4px; }
    50%{ height:14px; }
  }
  @media (prefers-reduced-motion: reduce){
    .sound.playing .eq span{ animation:none; height:9px; }
  }