/* ==================================================================
   Eldvara
   Dark, flat, typographic. No panels, no glass, no card backgrounds.
   Structure comes from hairlines, space and side-by-side columns.
   A sibling of the DiamondStar stylesheet, recoloured from the artwork.
   ================================================================== */

:root{
  /* Near black with the storm teal of the cover in it. */
  --ground:#090c0e;
  --ink:#e9ecec;
  --muted:rgba(233,236,236,0.66);
  /* 0.52 is the floor that still clears WCAG AA for small text. */
  --faint:rgba(233,236,236,0.52);
  --rule:rgba(233,236,236,0.14);
  --rule2:rgba(233,236,236,0.08);

  /* The flame in the mark, and the steel it sits on. */
  --ember:#f08a3c;
  --steel:#9fc0c8;

  /* Artwork treatment. The corners are deliberately uneven: one soft, the
     rest nearly square, so covers read as objects rather than tiles. */
  --art-radius:4px 4px 22px 4px;
  --art-shadow:0 28px 64px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.45);

  --max:1280px;
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

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

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Faint film grain. Sits above the background, below everything else. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.wrap{
  position:relative;
  z-index:1;
  display:block;
  max-width:var(--max);
  margin:0 auto;
  padding:0 34px;
}

.kicker{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  margin:0;
}

.skipLink{
  position:absolute;
  top:10px;
  left:10px;
  z-index:9999;
  padding:10px 14px;
  background:var(--ground);
  border:1px solid var(--rule);
  color:var(--ink);
  font-size:12px;
  transform:translateY(-160%);
  transition:transform .12s ease;
}
.skipLink:focus{ transform:translateY(0); }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

/*
 * Overlaid on the hero rather than stacked above it, so the artwork shows
 * through. A gradient instead of a flat panel keeps the nav legible
 * without drawing a hard edge across the image.
 */
.siteHeader{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  background:linear-gradient(180deg, rgba(9,12,14,.82) 0%, rgba(9,12,14,.42) 60%, transparent 100%);
}

.hIn{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 34px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

/* Sized by width with height following, so if the header runs short of
   room the logo scales down whole instead of being squeezed narrower. */
.hIn > a:first-child{ flex:0 1 auto; min-width:0; }
.brandLogo{
  display:block;
  width:180px;
  max-width:100%;
  height:auto;
}

.headerNav{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:auto;
}

.navLink{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.navLink:hover{ color:var(--ink); border-bottom-color:var(--ember); }
.navEmphasis{ color:var(--ember); }

/* Menu button. Hidden until the nav would start crowding the logo. */
.navToggle{
  display:none;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  padding:6px 0;
  cursor:pointer;
  color:var(--muted);
  font-family:inherit;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  transition:color .15s ease;
}
.navToggle:hover{ color:var(--ink); }
.navToggleBars{ display:block; width:20px; }
.navToggleBars span{
  display:block;
  height:1.6px;
  background:currentColor;
  border-radius:2px;
  margin:4px 0;
}
.navToggle[aria-expanded="true"]{ color:var(--ember); }

/* ------------------------------------------------------------------ */
/* Hero: full bleed, content over the image                            */
/* ------------------------------------------------------------------ */

.hero{
  position:relative;
  z-index:1;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(460px,60vh,620px);
  display:flex;
  align-items:flex-end;
}

/*
 * The background carries on past the bottom of the hero and fades into
 * the page behind the About section, so there is no hard edge where the
 * hero ends. The main content paints over the overflow.
 */
.hero .bg,
.hero .veil{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:calc(100% + 360px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 560px), transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 560px), transparent 100%);
}
.hero .bg{
  object-fit:cover;
  /* Anchored low: the sky is the part to lose when the frame crops. */
  object-position:center 82%;
}
/* Side darkening for the text, plus a little at the top for the header.
   The mask does the fade at the bottom. */
.veil{
  background:
    linear-gradient(90deg, rgba(9,12,14,.90) 0%, rgba(9,12,14,.68) 40%, rgba(9,12,14,.22) 76%, rgba(9,12,14,.44) 100%),
    linear-gradient(180deg, rgba(9,12,14,.35) 0%, transparent 22%);
}

.heroInner{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:92px 34px 56px;
  width:100%;
}

.heroInner.withArt{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,34vw,480px);
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
.heroArt{ display:block; }
.heroArt img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--art-radius);
  box-shadow:var(--art-shadow);
  transition:transform .25s ease;
}
.heroArt:hover img{ transform:translateY(-3px); }

/* The one solid button on the page, so it reads as the main action. */
.btn{
  display:inline-block;
  margin:0 0 28px;
  padding:15px 26px 14px;
  background:var(--ember);
  color:var(--ground);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:3px 3px 14px 3px;
  box-shadow:0 10px 30px -12px rgba(240,138,60,.6);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{
  background:#f7a562;
  transform:translateY(-1px);
  box-shadow:0 14px 34px -12px rgba(240,138,60,.75);
}
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.comingSoon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.comingSoon .pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 0 4px rgba(240,138,60,.2);
}
.comingSoon .kicker{ color:var(--ember); }

.heroTitle{
  font-size:clamp(46px,8vw,104px);
  font-weight:800;
  font-stretch:88%;
  line-height:.9;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0 0 18px;
}

/* One line on the record itself, between the title and the intro. */
.heroTagline{
  margin:0 0 22px;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--steel);
}

.heroBlurb{
  margin:0 0 30px;
  color:rgba(233,236,236,0.86);
  font-size:15.5px;
  line-height:1.7;
  max-width:44ch;
}

.hLinks{ display:flex; gap:26px; flex-wrap:wrap; }

.lk{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  padding-bottom:5px;
  border-bottom:1px solid var(--rule);
  color:var(--muted);
  transition:color .15s ease, border-color .15s ease;
}
.lk:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.lk.g{ color:var(--ember); border-bottom-color:var(--ember); }

/* ------------------------------------------------------------------ */
/* Section heads: label, rule, optional caption. No boxes.             */
/* ------------------------------------------------------------------ */

.sh{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:30px;
}
.sh .kicker{ color:var(--faint); white-space:nowrap; }
.sh .r{ flex:1; height:1px; background:var(--rule); }

/* The torch from the logo, set into the rule of the About and Follow
   heads. */
.shMark .r{
  position:relative;
  height:40px;
  background:linear-gradient(90deg,
      transparent 0%, rgba(159,192,200,.28) 8%,
      rgba(200,214,218,.7) 50%,
      rgba(159,192,200,.28) 92%, transparent 100%)
    center/100% 1px no-repeat;
}
.shMark .r::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:46px;
  /* The cross arm sits 54.8% of the way down the mark. Hanging it from
     that point puts the arm on the rule, so the line reads as part of
     the emblem. */
  transform:translate(-50%,-54.8%);
  background:url("/images/eldvara-mark.png") center/contain no-repeat;
}

/* ------------------------------------------------------------------ */
/* About: text beside the photo                                        */
/* ------------------------------------------------------------------ */

.aboutSec{ padding:64px 0 0; }

.band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(36px,5vw,72px);
  align-items:center;
}

/* The heading reaches back across the gap and over the edge of the photo,
   so the two columns read as one composition. The shadow keeps it legible
   where it crosses the sky. */
.aboutHeading{
  position:relative;
  z-index:1;
  margin:0 0 26px calc(-1 * clamp(90px,12vw,190px));
  font-size:clamp(34px,5.4vw,76px);
  font-weight:800;
  font-stretch:88%;
  line-height:.94;
  letter-spacing:-.025em;
  text-transform:uppercase;
  max-width:13ch;
  text-shadow:0 2px 26px rgba(9,12,14,.85), 0 1px 3px rgba(9,12,14,.7);
}
.about p{
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  margin:0 0 16px;
  max-width:52ch;
}
.about .hLinks{ margin-top:30px; }
/* Persona disclosure, on its own above the footer. */
.note{
  margin:64px 0 0;
  border-left:2px solid var(--ember);
  padding-left:16px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
  max-width:78ch;
}
/* Fades out to the right, under the heading, so the photo dissolves into
   the page instead of ending on an edge. */
.aboutArt{
  width:100%;
  height:auto;
  border-radius:4px 0 0 4px;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}

/* ------------------------------------------------------------------ */
/* Video                                                               */
/* ------------------------------------------------------------------ */

.videoSec{ padding:70px 0 0; }
.videoRatio{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}
.videoRatio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ------------------------------------------------------------------ */
/* Social                                                              */
/* ------------------------------------------------------------------ */

/* Compact icon row in the header. */
.socialRow{
  display:flex;
  align-items:center;
  gap:14px;
}

.socialLink{
  display:block;
  color:var(--muted);
  transition:color .15s ease, transform .15s ease;
}
.socialLink svg{ width:20px; height:20px; display:block; }
.socialLink:hover{ color:var(--ember); transform:translateY(-1px); }

/* Labelled row, for people actually looking to follow. */
.followSec{ padding:70px 0 0; }

.followRow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px 30px;
}
.followSec .sh{ margin-bottom:10px; }

.follow{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 0;
  color:var(--ink);
  transition:color .15s ease;
}
.follow svg{ width:26px; height:26px; flex:0 0 auto; color:var(--muted); transition:color .15s ease; }
.follow span{ font-size:14px; font-weight:600; }
.follow:hover{ color:var(--ember); }
.follow:hover svg{ color:var(--ember); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.siteFooter{
  margin-top:48px;
  border-top:1px solid var(--rule);
  padding:24px 0 54px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  font-weight:600;
}
.siteFooter a:hover{ color:var(--ember); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width:1000px){
  .heroInner.withArt{ grid-template-columns:minmax(0,1fr) 280px; gap:36px; }
  .followRow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px){
  .navToggle{ display:flex; }

  .headerNav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:4px 20px 16px;
    background:var(--ground);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .headerNav.open{ display:flex; }

  .navLink{
    padding:15px 2px;
    font-size:12px;
    border-bottom:1px solid var(--rule2);
  }
  .navLink:last-child{ border-bottom:0; }
  .navLink:hover{ color:var(--ember); border-bottom-color:var(--rule2); }

  .wrap, .hIn, .heroInner{ padding-left:20px; padding-right:20px; }
  .hIn{ gap:16px; }
  .socialRow{ gap:16px; margin-left:auto; }
  .navToggleText{ display:none; }
  .brandLogo{ width:132px; }

  /* Stacked and centred, with the cover leading: on a phone the artwork
     is the first thing worth seeing. */
  .hero{ min-height:auto; }
  .heroInner{ padding-top:84px; padding-bottom:44px; text-align:center; }
  .heroInner.withArt{ grid-template-columns:1fr; gap:34px; }
  .heroArt{ order:-1; width:min(100%,320px); margin:0 auto; }
  .heroBlurb{ margin-left:auto; margin-right:auto; }
  .hero .hLinks{ justify-content:center; }

  .aboutSec{ padding-top:48px; }
  /* Stacked, the heading rides up over the foot of the photo instead. */
  .band{ grid-template-columns:1fr; gap:0; }
  .aboutHeading{ margin:-34px 0 22px; padding:0 14px 0 0; }
  /* Stacked, the fade runs down into the heading instead of sideways. */
  .aboutArt{
    border-radius:4px 4px 0 0;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  .about p{ font-size:15px; }
  .note{ margin-top:48px; }

  /* Section captions are decoration; on a phone they push past the edge. */
  .sh .r ~ .kicker{ display:none; }
  .siteFooter{ justify-content:center; text-align:center; }
}