/* ═══════════════════════════════════════════════════════════
   KAYLA JOSEPHS — I Shouldn't Want It
   Palette sampled directly from the cover artwork.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Ground: the teal-cast black of the artwork's shadows — not a neutral black */
  --void:        #071213;
  --void-2:      #0A1A1B;
  --teal:        #0F2425;
  /* The backdrop */
  --oxblood:     #4E090A;
  --crimson:     #6A2018;
  --bronze:      #753D26;
  /* The signature: a muted champagne, not a yellow gold */
  --champagne:   #9B9287;
  --champagne-2: #C4B9A8;
  --bone:        #E6DED1;

  --serif:  'Bodoni Moda', Didot, 'Times New Roman', serif;
  --sans:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;

  --pad:  clamp(1.5rem, 5.5vw, 5.5rem);
  --bay:  clamp(5.5rem, 14vh, 10rem);
  --max:  78rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,.84,.44,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--champagne-2);
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
h1,h2,p,dl,dd,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--oxblood); color:var(--bone); }

a{ color:inherit; }

:focus-visible{
  outline:1px solid var(--champagne-2);
  outline-offset:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--void); color:var(--bone);
  padding:.75rem 1.25rem; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
}
.skip:focus{ left:0; }

/* ─────────── Shared type ─────────── */

.eyebrow,.sect-label,.date,.countdown,.topbar__mark,.topbar__meta{
  font-family:var(--sans);
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--champagne);
  display:flex; align-items:center; gap:.9rem;
}

.rule{
  display:block; width:clamp(1.75rem,6vw,3.25rem); height:1px;
  background:linear-gradient(90deg,transparent,var(--champagne));
  flex:none;
}

.btn{
  --btn-fg:var(--bone);
  position:relative; display:inline-block;
  padding:1.1rem 2.6rem;
  font-family:var(--sans); font-weight:400;
  font-size:.6875rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--btn-fg); text-decoration:none;
  border:1px solid rgba(155,146,135,.5);
  background:transparent; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease), letter-spacing .5s var(--ease);
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .6s var(--slow);
}
.btn:hover,.btn:focus-visible{ color:var(--void); border-color:var(--bone); letter-spacing:.38em; }
.btn:hover::after,.btn:focus-visible::after{ transform:scaleX(1); transform-origin:left center; }

.btn--solid{ border-color:rgba(230,222,209,.75); }
.btn--wide{ width:100%; text-align:center; }

/* ═══════════════ HERO ═══════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:calc(1.5rem + env(safe-area-inset-top)) var(--pad) clamp(2.5rem,7vh,4.5rem);
  overflow:hidden;
}

/* Backdrop — the artwork itself, blurred on purpose.
   Oversized + scaled so the blur never bleeds a soft edge into the frame. */
.hero__bg{ position:absolute; inset:-8% -8%; z-index:-3; will-change:transform; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:blur(42px) saturate(1.38) brightness(.92);
  transform:scale(1.18);
}

.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(112% 72% at 50% 34%, transparent 40%, rgba(7,18,19,.58) 100%),
    linear-gradient(180deg,
      rgba(7,18,19,.52) 0%,
      rgba(7,18,19,.10) 24%,
      rgba(7,18,19,.22) 58%,
      rgba(7,18,19,.78) 88%,
      var(--void) 100%);
}

/* A whisper of grain — stops the blur from banding and adds print texture */
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.topbar{ display:flex; justify-content:space-between; align-items:center; }
.topbar__mark{ color:var(--bone); letter-spacing:.42em; font-size:.6875rem; }
.topbar__meta{ letter-spacing:.3em; font-size:.625rem; opacity:.75; }

/* Stage: cover + type */
.hero__stage{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.75rem,5vh,2.75rem);
  padding-block:clamp(1.5rem,4vh,3rem);
}

.cover{
  margin:0;
  width:min(100%, 19rem);
  align-self:flex-start;
}
.cover img{
  width:100%; height:auto;
  border:1px solid rgba(155,146,135,.32);
  box-shadow:0 34px 70px -18px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.5);
}

.hero__content{ max-width:min(100%,46rem); }

.title{
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  font-size:clamp(2.9rem,13vw,7.5rem);
  line-height:.9;
  letter-spacing:-.015em;
  color:var(--bone);
  margin:1.1rem 0 1.5rem;
  text-wrap:balance;
}

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem 1.6rem;
  padding-bottom:1.9rem;
  margin-bottom:1.9rem;
  border-bottom:1px solid rgba(155,146,135,.22);
}
.date{ color:var(--bone); }
.date i{ font-style:normal; opacity:.5; margin:0 .35em; }
.countdown{ letter-spacing:.3em; opacity:.8; }

.listen__label{ margin-bottom:1.3rem; }

.listen__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.65rem;
  max-width:30rem;
}

.listen__link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:.65rem;
  padding:1rem 1rem;
  border:1px solid rgba(155,146,135,.4);
  color:var(--bone); text-decoration:none;
  font-family:var(--sans); font-weight:400;
  font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase;
  text-align:center;
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease), letter-spacing .45s var(--ease);
}
.listen__link::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bone);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .55s var(--slow);
}
.listen__link:hover,.listen__link:focus-visible{
  color:var(--void); border-color:var(--bone); letter-spacing:.16em;
}
.listen__link:hover::after,.listen__link:focus-visible::after{ transform:scaleX(1); transform-origin:left center; }

.listen__link svg{
  width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}

.scrollcue{ display:flex; justify-content:center; }
.scrollcue i{
  display:block; width:1px; height:clamp(2.25rem,6vh,3.5rem);
  background:linear-gradient(180deg,transparent,var(--champagne));
  transform-origin:top;
  animation:drop 2.8s var(--slow) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); opacity:0 }
  35%{ transform:scaleY(1); opacity:1 }
  75%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(0) translateY(100%); opacity:0 }
}

/* ═══════════════ LINKS ═══════════════ */

.links{ padding:0 var(--pad) var(--bay); }
.links .sect-label{ max-width:var(--max); margin:0 auto 2.5rem; }
.links__inner{ max-width:var(--max); margin:0 auto; display:grid; gap:clamp(2.5rem,6vw,4.5rem); }
.linklist{ border-top:1px solid rgba(155,146,135,.18); align-self:start; }

/* Editorial portrait — desktop only, sized to the link list it sits beside.
   Hidden below the two-column breakpoint; loading="lazy" means phones never fetch it. */
.portrait{ display:none; }

.linklist a{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.1rem;
  padding:1.35rem .25rem;
  border-bottom:1px solid rgba(155,146,135,.18);
  text-decoration:none;
  transition:padding-inline .55s var(--ease);
}
.linklist a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(78,9,10,.85), rgba(78,9,10,0));
  opacity:0; transition:opacity .5s var(--ease);
}
.linklist a:hover,.linklist a:focus-visible{ padding-inline:1rem .25rem; }
.linklist a:hover::before,.linklist a:focus-visible::before{ opacity:1; }

.linklist svg{ width:17px; height:17px; fill:var(--champagne); transition:fill .4s var(--ease); }
.linklist a:hover svg{ fill:var(--bone); }

.ll__name{
  font-size:.6875rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone);
}
.ll__handle{
  font-size:.8125rem; letter-spacing:.06em; color:var(--champagne);
  transition:color .4s var(--ease);
}
.linklist a:hover .ll__handle{ color:var(--champagne-2); }

/* ═══════════════ MERCH TEASER ═══════════════ */

.want{
  position:relative;
  padding:var(--bay) var(--pad);
  background:
    radial-gradient(90% 70% at 22% 40%, rgba(106,32,24,.5), transparent 62%),
    linear-gradient(180deg, var(--void) 0%, #200506 42%, #2A0607 68%, var(--void) 100%);
  border-block:1px solid rgba(155,146,135,.14);
}
.want__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:clamp(3rem,7vw,5rem); align-items:center;
}

.tee{ margin:0; }
.tee svg{ width:100%; max-width:22rem; margin-inline:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }

.want__line{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.1rem,8vw,3.6rem); line-height:1.03;
  color:var(--bone); margin:1.5rem 0 0;
}
/* Script ascenders overflow their line box — hence the generous top margin */
.want__ask{
  font-family:var(--script); font-weight:400;
  font-size:clamp(3.4rem,13vw,5.5rem); line-height:1;
  color:var(--champagne-2);
  margin:1.4rem 0 2.5rem;
}

/* ═══════════════ FOOTER ═══════════════ */

.foot{
  padding:clamp(4rem,10vh,6rem) var(--pad) calc(clamp(2.5rem,6vh,4rem) + env(safe-area-inset-bottom));
  text-align:center;
}
.foot__mark{
  font-family:var(--script); font-size:2.75rem; line-height:1;
  color:var(--champagne-2); margin-bottom:1.5rem;
}
.foot__contact a{
  font-size:.75rem; letter-spacing:.16em; color:var(--bone); text-decoration:none;
  border-bottom:1px solid rgba(155,146,135,.35); padding-bottom:.35rem;
  transition:border-color .4s var(--ease);
}
.foot__contact a:hover{ border-color:var(--bone); }
.foot__legal{
  margin-top:2.5rem;
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--champagne); opacity:.55;
}

/* ═══════════════ EMAIL CAPTURE ═══════════════ */

.veil{
  border:none; padding:0; background:transparent;
  max-width:min(30rem,calc(100vw - 2rem)); width:100%;
  margin:auto; color:var(--champagne-2);
}
.veil::backdrop{ background:rgba(4,10,11,.86); backdrop-filter:blur(6px); }

.veil__box{
  position:relative;
  padding:clamp(2rem,7vw,3rem);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(78,9,10,.55), transparent 60%),
    var(--void-2);
  border:1px solid rgba(155,146,135,.28);
}
.veil[open] .veil__box{ animation:rise .6s var(--slow) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.veil__close{
  position:absolute; top:.85rem; right:1rem;
  background:none; border:none; color:var(--champagne);
  font-size:1.5rem; line-height:1; cursor:pointer; padding:.35rem;
  transition:color .3s var(--ease);
}
.veil__close:hover{ color:var(--bone); }

.veil__eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-size:.625rem; letter-spacing:.32em; text-transform:uppercase; color:var(--champagne);
}
.veil__title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2rem,8vw,2.75rem); line-height:1; color:var(--bone);
  margin:1.25rem 0 1rem;
}
.veil__body{ font-size:.875rem; line-height:1.7; color:var(--champagne-2); margin-bottom:2rem; }
.veil__body--center{ text-align:center; margin-bottom:2rem; }
.veil__script{
  font-family:var(--script); font-size:3.5rem; line-height:1;
  color:var(--bone); text-align:center; margin:.5rem 0 1rem;
}

.field{ display:block; margin-bottom:1.25rem; }
.field__label{
  display:block; margin-bottom:.7rem;
  font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne);
}
.field__input{
  width:100%; padding:1rem 0;
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--bone);
  background:transparent; border:none; border-bottom:1px solid rgba(155,146,135,.4);
  border-radius:0;
  transition:border-color .4s var(--ease);
}
.field__input::placeholder{ color:rgba(155,146,135,.5); }
.field__input:focus{ outline:none; border-bottom-color:var(--bone); }
.field__input:focus-visible{ outline:none; }

.hp{ display:none !important; }

.veil__error{
  margin:-.35rem 0 1rem;
  font-size:.75rem; letter-spacing:.04em; color:#E0857A;
}
.veil__fine{
  margin-top:1.25rem; text-align:center;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--champagne); opacity:.6;
}
[data-submit][aria-busy="true"]{ opacity:.5; pointer-events:none; }

/* ═══════════════ REVEAL ═══════════════ */

/* Guarded on .js — without JavaScript everything stays visible */
.js .reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--slow), transform 1.1s var(--slow);
}
.js .reveal.in[data-delay="1"]{ transition-delay:.11s }
.js .reveal.in[data-delay="2"]{ transition-delay:.22s }
.js .reveal.in[data-delay="3"]{ transition-delay:.33s }
.js .reveal.in[data-delay="4"]{ transition-delay:.44s }

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (min-width:48rem){
  .hero{ padding-bottom:clamp(3rem,8vh,5rem); }
  .hero__stage{
    flex-direction:row; align-items:center;
    gap:clamp(3rem,6vw,5.5rem);
    max-width:var(--max); width:100%; margin-inline:auto;
  }
  .cover{ width:min(38%,26rem); flex:none; align-self:center; }
  .hero__content{ flex:1; }

  /* Beside the cover the title must scale to its column, not the viewport */
  .title{ font-size:clamp(2.6rem,6.2vw,7.5rem); }
  .linklist a{ grid-template-columns:auto 12rem 1fr; gap:1.5rem; }
}

@media (min-width:56rem){
  .links__inner{ grid-template-columns:1fr .62fr; align-items:stretch; }
  /* Absolute image so the row height comes from the list, not the photo */
  .portrait{
    position:relative;
    display:block; height:100%; min-height:0; margin:0;
    background-color:#170406;
    background-image:url('/assets/portrait-800.jpg?v=2');
    background-image:image-set(url('/assets/portrait-800.jpg?v=2') 1x,
                               url('/assets/portrait-1200.jpg?v=2') 2x);
    background-size:cover;
    background-position:50% 22%;
    border:1px solid rgba(155,146,135,.2);
    box-shadow:0 34px 70px -22px rgba(0,0,0,.85);
  }
  .portrait__credit{
    position:absolute; right:1rem; bottom:.85rem;
    font-family:var(--sans); font-size:.5625rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--bone); opacity:.6;
    text-shadow:0 1px 4px rgba(0,0,0,.7);
  }
  .want__inner{ grid-template-columns:.85fr 1fr; }
  .tee svg{ max-width:26rem; }
  .foot{ text-align:left; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
  .foot__mark{ margin-bottom:0; }
  .foot__legal{ margin-top:0; }
}

@media (min-width:72rem){
  .title{ font-size:clamp(5rem,8.5vw,8.5rem); }
  .listen__grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    max-width:none;
    gap:.5rem;
  }
  .listen__link{ padding:.95rem .6rem; font-size:.625rem; letter-spacing:.09em; }
  .listen__link:hover,.listen__link:focus-visible{ letter-spacing:.12em; }
}

/* Landscape phones: don't let the hero type crowd the image */
@media (max-height:34rem) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:1.75rem; }
  .hero__stage{ flex-direction:row; align-items:center; gap:2rem; }
  .cover{ width:min(32%,13rem); align-self:center; }
  .title{ font-size:clamp(2rem,6vw,3.2rem); margin:.75rem 0 1rem; }
  .hero__meta{ padding-bottom:1.1rem; margin-bottom:1.1rem; }
  .scrollcue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .hero__bg{ transform:none !important; }
}