/* ==========================================================================
   COVETED — design tokens
   ========================================================================== */
:root{
  --cream:   #F1F0EC;
  --paper:   #E4E3DE;
  --ink:     #201F1E;
  --stone:   #83807A;
  --line:    #D6D5D0;
  --cobalt:  #3548FF;
  --paleblue: #C7D4F2;
  --green:   #9FE0B8;
  --red:     #E42A2A;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "Fredoka", ui-rounded, system-ui, sans-serif;

  --container: 1180px;
  --edge: clamp(24px, 5vw, 64px);
  --radius-sm: 6px;
  --radius-md: 14px;
}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

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

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

/* ==========================================================================
   Backdrop — faint graph grid, referencing the studio-board look
   ========================================================================== */
.backdrop{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--edge);
  background:linear-gradient(var(--cream) 60%, rgba(246,244,238,0));
}
.nav__mark{
  font-family:var(--serif); font-size:22px; font-weight:600; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.nav__logo{
  width:26px; height:auto; display:block;
}
.footer__mark .nav__logo{ width:22px; }
.nav__dot{ color:var(--cobalt); }
.nav__cta{
  font-size:14px; text-decoration:none; color:var(--ink);
  border:1.5px solid var(--ink); border-radius:999px;
  padding:9px 18px;
  transition:background .18s ease, color .18s ease;
}
.nav__cta:hover{ background:var(--ink); color:var(--cream); }

/* ==========================================================================
   Waitlist (top) — centered, sits between countdown and hero headline
   ========================================================================== */
.waitlist-top{
  max-width:560px;
  margin:40px auto 0;
  padding:0 var(--edge);
  text-align:center;
}
.waitlist-top .hero__kicker{ justify-content:center; }
.waitlist-top .waitlist-form{ margin:20px auto 0; }
.waitlist-top .waitlist-status{ text-align:center; margin-left:auto; margin-right:auto; }
.waitlist-top .hero__count{ justify-content:center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px,520px) 1fr;
  gap:32px;
  align-items:center;
  max-width:var(--container);
  margin:0 auto;
  padding:40px var(--edge) 60px;
  min-height:78vh;
  overflow:visible;
}
.hero__copy{ position:relative; }
.hero__orbs{
  position:absolute; inset:-10% -5%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.6;
}
.orb--blue{
  top:-6%; left:2%;
  width:420px; height:420px;
  background:var(--paleblue);
}
.orb--green{
  top:22%; left:34%;
  width:340px; height:340px;
  background:var(--green);
  opacity:0.55;
}
.orb--ombre{
  top:2%; left:24%;
  width:380px; height:380px;
  background:linear-gradient(135deg, var(--paleblue), var(--green));
  opacity:0.5;
}
@media (max-width:880px){
  .orb{ filter:blur(50px); }
  .orb--blue{ width:280px; height:280px; }
  .orb--green{ width:220px; height:220px; }
  .orb--ombre{ width:250px; height:250px; }
}

.hero__kicker{
  font-size:13px; color:var(--cobalt); font-weight:600;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.hero__kicker::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--cobalt);
}
.hero__title{
  font-size:clamp(42px, 6vw, 74px);
  line-height:0.98;
  color:var(--ink);
}
.hero__title em{ font-style:italic; color:var(--cobalt); }

.hero__sub{
  max-width:46ch;
  margin-top:22px;
  color:var(--stone);
  font-size:16.5px;
  line-height:1.65;
}

.hero__hook{
  margin-top:14px;
  font-size:14px; font-style:italic; color:var(--cobalt); font-weight:500;
}

.waitlist-form{
  margin-top:32px;
  display:flex;
  background:var(--ink);
  border-radius:999px;
  padding:6px;
  max-width:440px;
  gap:6px;
}
.waitlist-form input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color:var(--cream);
  font-family:var(--sans);
  font-size:15px;
  padding:12px 18px;
}
.waitlist-form input::placeholder{ color:#8b8878; }
.waitlist-form button{
  position:relative;
  background:var(--cream); color:var(--ink);
  border:none; border-radius:999px;
  padding:12px 22px;
  font-size:14.5px; font-weight:600;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
  white-space:nowrap;
}
.waitlist-form button:hover{ background:var(--paleblue); }
.waitlist-form button:active{ transform:scale(0.97); }
.waitlist-form.is-loading .btn-label{ visibility:hidden; }
.waitlist-form.is-loading .btn-spinner{ display:inline-block; }
.btn-spinner{
  display:none; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2px solid rgba(0,0,0,0.15); border-top-color:var(--ink); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.waitlist-status{
  min-height:20px; margin-top:10px; font-size:13.5px; color:var(--stone);
  max-width:440px;
}
.waitlist-status.is-success{ color:#1E8A4C; }
.waitlist-status.is-error{ color:var(--red); }

.hero__count{
  margin-top:26px; font-size:13.5px; color:var(--stone);
  display:flex; align-items:center; gap:8px;
}
/* explicit — the display:flex above otherwise beats the UA [hidden] rule,
   so JS setting row.hidden wouldn't take effect without this */
.hero__count[hidden]{ display:none; }
.hero__count-dot{
  width:7px; height:7px; border-radius:50%; background:#1E8A4C;
  box-shadow:0 0 0 3px rgba(30,138,76,0.18);
}
#waitlist-count{ color:var(--ink); font-weight:600; }

/* --- garment rack --- */
.rack-wrap{
  position:relative;
  overflow:hidden;
  padding-top:44px;
}
.rack-hint{
  position:absolute; top:0; right:6px;
  margin:0 !important; font-size:11px;
}
.rack{
  position:relative;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  overflow-x:hidden;
}
.rack:active{ cursor:grabbing; }
.rack__pole{
  position:absolute; top:38px; left:-40px; right:-40px; height:6px;
  background:var(--ink); border-radius:4px;
  box-shadow:0 3px 0 rgba(0,0,0,0.06);
}
.rack__pole::before,.rack__pole::after{
  content:""; position:absolute; top:-9px; width:6px; height:24px; background:var(--ink); border-radius:3px;
}
.rack__pole::before{ left:6%; }
.rack__pole::after{ right:6%; }

.rack__track{
  display:flex;
  gap:6px;
  padding:70px 10px 10px;
  will-change:transform;
}
.garment{
  flex:0 0 auto;
  width:150px;
    display:flex; flex-direction:column; align-items:center;
  padding-top:6px;
  transform:rotate(var(--sway,0deg));
  transition:transform .25s ease;
}
.garment svg{ width:118px; height:150px; overflow:visible; pointer-events:none; }
.garment__tag{
  margin-top:2px;
  background:var(--cream);
  border:1.3px solid var(--ink);
  border-radius:5px;
  padding:4px 9px;
  font-size:11px;
  text-align:center;
  line-height:1.3;
  transform:rotate(-2deg);
}
.garment__tag b{ display:block; font-size:11.5px; }

/* ==========================================================================
   Swipe demo — Tinder-style draggable card stack, mirrors the app onboarding
   ========================================================================== */
.swipe-demo{
  max-width:var(--container);
  margin:60px auto 0;
  padding:0 var(--edge);
  text-align:center;
}
.swipe-demo__title{ font-size:clamp(28px,3.4vw,40px); margin-top:8px; }
.swipe-demo__sub{ color:var(--stone); margin-top:12px; font-size:14.5px; max-width:48ch; margin-left:auto; margin-right:auto; }

.swipe-demo__stack{
  position:relative;
  width:280px; height:380px;
  margin:40px auto 0;
}
.swipe-card{
  position:absolute; inset:0;
  background:var(--cream);
  border:1.5px solid var(--ink);
  border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  cursor:grab;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  box-shadow:0 14px 30px rgba(32,31,30,0.12);
}
.swipe-card:active{ cursor:grabbing; }
.swipe-card svg{ width:60%; height:auto; margin-bottom:20px; pointer-events:none; }
.swipe-card__brand{ font-size:12px; color:var(--stone); font-weight:600; }
.swipe-card__name{ font-family:var(--serif); font-size:20px; margin-top:4px; }
.swipe-card__price{ font-size:14px; color:var(--cobalt); font-weight:700; margin-top:6px; }

.swipe-card__stamp{
  position:absolute; top:26px;
  border:3px solid; border-radius:8px;
  padding:4px 14px;
  font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  opacity:0;
  transform:rotate(-14deg);
}
.swipe-card__stamp--add{ left:20px; color:var(--cobalt); border-color:var(--cobalt); }
.swipe-card__stamp--skip{ right:20px; color:var(--red); border-color:var(--red); transform:rotate(14deg); }

.swipe-demo__hint{ margin-top:32px; }

@media (max-width:400px){
  .swipe-demo__stack{ width:240px; height:340px; }
}

/* ==========================================================================
   Countdown — split-flap board counting down to launch
   ========================================================================== */
.countdown{
  max-width:var(--container);
  margin:20px auto 0;
  padding:56px var(--edge);
  text-align:center;
}
.countdown__title{ font-size:clamp(32px,4.4vw,52px); margin-top:8px; }
.countdown__sub{ color:var(--stone); margin-top:12px; font-size:14.5px; }

.countdown__board{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  margin-top:40px;
  flex-wrap:wrap;
}
.countdown__group{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.countdown__digits{ display:flex; gap:4px; }
.countdown__label{
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--stone);
}
.countdown__colon{
  font-family:var(--serif); font-size:clamp(28px,3.2vw,44px);
  color:var(--line); margin:0 2px 26px;
}

.flip{
  position:relative;
  width:clamp(46px, 6vw, 64px);
  height:clamp(62px, 8vw, 86px);
  perspective:300px;
}
.flip__card{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.flip.is-flipping .flip__card{ transform:rotateX(-180deg); }
.flip__face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--cream);
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px, 4vw, 42px);
  border-radius:8px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.flip__face::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,0.35);
}
.flip__face--back{ transform:rotateX(180deg); }

@media (max-width:640px){
  .countdown__board{ gap:6px; }
  .countdown__colon{ margin:0 0 22px; font-size:22px; }
}
@media (max-width:400px){
  .countdown{ padding-left:12px; padding-right:12px; }
  .countdown__board{ gap:4px; }
  .countdown__digits{ gap:2px; }
  .flip{ width:34px; height:48px; }
  .flip__face{ font-size:19px; border-radius:6px; }
  .countdown__colon{ margin:0 0 20px; font-size:16px; }
  .countdown__label{ font-size:9px; }
}

/* ==========================================================================
   Accordion — click a strip, it opens full width
   ========================================================================== */
.accordion{
  --strip: 64px;
  display:flex;
  align-items:stretch;
  height:560px;
  max-width:var(--container);
  margin:20px auto 0;
  padding:0 var(--edge);
  gap:4px;
}
.accordion__panel{
  position:relative;
  flex:0 0 var(--strip);
  min-width:var(--strip);
  border:none;
  border-radius:10px;
  cursor:pointer;
  overflow:hidden;
  padding:0;
  text-align:left;
  transition:flex-basis .55s cubic-bezier(.16,.85,.3,1), flex-grow .55s cubic-bezier(.16,.85,.3,1);
  color:var(--ink);
}
.accordion__panel[data-color="cobalt"]{ background:var(--cobalt); color:var(--cream); }
.accordion__panel[data-color="red"]{ background:var(--red); color:var(--cream); }
.accordion__panel[data-color="paleblue"]{ background:var(--paleblue); color:var(--ink); }

.accordion__panel.is-active{ flex:1 1 auto; }

.accordion__label{
  position:absolute; top:22px; left:0; width:var(--strip);
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:13.5px; letter-spacing:0.02em; font-weight:600;
  height:calc(100% - 44px);
}
.accordion__panel.is-active .accordion__label{ justify-content:flex-start; padding-top:6px; }

.accordion__body{
  position:absolute; inset:0;
  padding:56px 40px 40px calc(var(--strip) + 20px);
  display:flex; flex-direction:column;
  opacity:0;
  transition:opacity .3s ease .05s;
  white-space:normal;
}
.accordion__panel.is-active .accordion__body{ opacity:1; }

.accordion__icon{ width:44px; height:44px; opacity:0.9; margin-bottom:auto; }
.accordion__icon svg{ width:100%; height:100%; }

.accordion__eyebrow{
  font-size:13px; font-weight:600; opacity:0.75; margin-top:24px;
}
.accordion__title{
  font-family:var(--serif); font-size:clamp(24px,2.6vw,34px); line-height:1.15;
  margin-top:10px; max-width:20ch; display:block;
}
.accordion__copy{
  display:block; margin-top:16px; max-width:46ch; font-size:14.5px; line-height:1.6; opacity:0.92;
}
.accordion__list{
  display:flex; flex-direction:column; gap:10px; margin-top:24px;
}
.accordion__list span{
  position:relative; padding-left:20px; font-size:13.5px; font-weight:500;
}
.accordion__list span::before{
  content:""; position:absolute; left:0; top:6px; width:7px; height:7px;
  border-radius:2px; background:currentColor; opacity:0.7;
}

/* ==========================================================================
   Product preview — a framed "browser window" showing the app itself
   ========================================================================== */
.preview{
  max-width:var(--container);
  margin:70px auto 0;
  padding:0 var(--edge);
}
.preview__head{ margin-bottom:32px; }
.preview__title{ font-size:clamp(28px,3.4vw,40px); margin-top:8px; }

.preview__window{
  border:1.5px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(32,31,30,0.12);
}

.preview__chrome{
  display:flex; align-items:center; gap:18px;
  padding:12px 16px;
  background:var(--paper);
  border-bottom:1.5px solid var(--ink);
}
.preview__dots{ display:flex; gap:6px; flex:0 0 auto; }
.preview__dot{ width:10px; height:10px; border-radius:50%; }
.preview__dot[data-c="cobalt"]{ background:var(--cobalt); }
.preview__dot[data-c="red"]{ background:var(--red); }
.preview__dot[data-c="paleblue"]{ background:var(--paleblue); }
.preview__url{
  flex:0 1 auto;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  font-size:12px; color:var(--stone);
}
.preview__tabs{
  display:flex; gap:18px; margin-left:auto;
  font-size:12px; color:var(--stone);
}
.preview__tabs .is-active{ color:var(--ink); font-weight:700; }

.preview__body{
  background:var(--cream);
  padding:36px;
}
.preview__storehead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1.3px solid var(--line);
}
.preview__storehead h3{ font-size:clamp(24px,2.6vw,32px); }
.preview__storehead p{ font-size:13px; color:var(--stone); margin-top:8px; }
.preview__storehead strong{ color:var(--red); }
.preview__follow{
  background:var(--ink); color:var(--cream);
  border:none; border-radius:999px;
  padding:10px 22px;
  font-family:var(--sans); font-size:13px; font-weight:700;
  cursor:pointer;
  transition:background .18s ease;
}
.preview__follow:hover{ background:var(--cobalt); }

.preview__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:20px;
}
.preview__item{
  border:1.3px solid var(--line);
  border-radius:10px;
  padding:16px 12px 14px;
  text-align:center;
  transition:border-color .18s ease, transform .18s ease;
}
.preview__item:hover{ border-color:var(--ink); transform:translateY(-3px); }
.preview__item svg{ width:70%; height:auto; margin:0 auto; }
.preview__item span{
  display:block; margin-top:10px; font-size:12.5px; font-weight:700;
}
.preview__item span b{ display:block; font-weight:400; color:var(--stone); margin-top:2px; }
.preview__item--soldout{ opacity:0.5; }
.preview__item--soldout span b{ color:var(--red); }

@media (max-width:640px){
  .preview__tabs span:not(.is-active){ display:none; }
  .preview__body{ padding:24px 20px; }
}

.preview__video-block{
  text-align:center;
  margin-top:44px;
}
.preview__video-block .stamp-tag{ margin-top:0; margin-bottom:20px; }
.preview__phone{
  width:230px;
  aspect-ratio:444 / 960;
  margin:0 auto;
  border:8px solid var(--ink);
  border-radius:34px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(32,31,30,0.16);
  background:var(--ink);
}
.preview__video{ width:100%; height:100%; object-fit:cover; display:block; }


/* ==========================================================================
   Brand wall — featured row + expandable bunched "cloud" of the rest
   ========================================================================== */
.brand-wall{
  max-width:var(--container);
  margin:60px auto 0;
  padding:60px var(--edge) 0;
  border-top:1.5px solid var(--line);
  text-align:center;
}
.brand-wall__head{ margin-bottom:32px; }
.brand-wall__title{ font-size:clamp(28px,3.4vw,40px); margin-top:8px; }

.brand-chip{
  display:inline-flex;
  align-items:center;
  border:1.3px solid var(--ink);
  border-radius:999px;
  background:var(--cream);
  padding:8px 18px;
  font-family:var(--serif);
  cursor:default;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
}
.brand-chip:hover{
  transform:scale(1.16) rotate(0deg) !important;
  background:var(--ink);
  color:var(--cream);
  box-shadow:0 8px 20px rgba(23,21,15,0.15);
  z-index:2;
  position:relative;
}

.brand-wall__featured{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  list-style:none; padding:0; margin:0;
}
.brand-wall__featured .brand-chip{ font-size:19px; font-weight:500; padding:11px 24px; }

.brand-wall__toggle{
  margin:28px auto 0;
  display:block;
  background:none; border:none;
  font-size:13.5px; font-weight:600; color:var(--stone);
  cursor:pointer;
  padding:8px;
  transition:color .18s ease;
}
.brand-wall__toggle:hover{ color:var(--ink); }

.brand-wall__cloud{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 2px;
  list-style:none; padding:28px 0 4px; margin:0;
  max-width:820px;
  margin-left:auto; margin-right:auto;
}
.brand-wall__cloud .brand-chip{
  font-size:var(--fs, 15px);
  transform:rotate(var(--tilt, 0deg));
  margin:2px;
  padding:6px 16px;
  border-color:var(--line);
}
.brand-wall__cloud[hidden]{ display:none; }

/* Shared "stamp" tag — black box, uppercase white text, matches the boxed
   labels in the moodboard references ("TRACKLIST", "FLASHBACKS", etc.) */
.stamp-tag{
  display:inline-block;
  background:var(--ink); color:var(--cream);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
  padding:6px 12px;
  margin-top:32px;
}
.brand-wall .stamp-tag{ margin-bottom:20px; }

/* ==========================================================================
   Press / articles carousel
   ========================================================================== */
.press{
  max-width:var(--container);
  margin:60px auto 20px;
  padding:60px var(--edge) 20px;
  border-top:1.5px solid var(--line);
}
.press__head{ margin-bottom:36px; }
.press__title{ font-size:clamp(28px,3.4vw,40px); margin-top:8px; }

.press-carousel{ position:relative; }
.press-carousel__track{
  display:flex; gap:26px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:14px 8px 26px;
  cursor:grab;
  scrollbar-width:none;
}
.press-carousel__track::-webkit-scrollbar{ display:none; }
.press-carousel__track:active{ cursor:grabbing; }

.clipping{
  flex:0 0 auto;
  width:270px;
  min-height:230px;
  background:var(--cream);
  border:1.3px solid var(--ink);
  border-radius:2px;
  padding:0;
  scroll-snap-align:start;
  transform:rotate(var(--tilt,0deg));
  position:relative;
  box-shadow:6px 6px 0 rgba(23,21,15,0.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.clipping:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:8px 10px 0 rgba(23,21,15,0.1); }
.clipping__link{
  display:block;
  color:inherit;
  text-decoration:none;
  padding:26px 22px 22px;
  height:100%;
}
.clipping__tape{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:56px; height:20px; background:rgba(166,156,142,0.55);
  border:1px solid rgba(23,21,15,0.15);
}
.clipping__pub{
  font-family:var(--serif); font-size:13px; font-weight:600; color:var(--cobalt); text-transform:uppercase; letter-spacing:0.03em;
}
.clipping__headline{
  font-family:var(--serif); font-size:19px; line-height:1.32; margin-top:14px; color:var(--ink);
}
.clipping__meta{
  margin-top:18px; font-size:12px; color:var(--stone);
}

.press-carousel__arrow{
  position:absolute; top:50%; translate:0 -50%;
  width:40px; height:40px; border-radius:50%;
  background:var(--cream); border:1.3px solid var(--ink);
  font-size:18px; cursor:pointer; z-index:2;
  transition:background .18s ease, color .18s ease;
}
.press-carousel__arrow:hover{ background:var(--ink); color:var(--cream); }
.press-carousel__arrow--left{ left:-8px; }
.press-carousel__arrow--right{ right:-8px; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta{
  max-width:720px;
  margin:80px auto 40px;
  padding:0 var(--edge);
  text-align:center;
}
.cta__title{ font-size:clamp(32px,4.6vw,52px); }
.cta__sub{ color:var(--stone); margin-top:16px; font-size:15.5px; }
.waitlist-form--cta{ margin:28px auto 0; }
#waitlist-status-2{ text-align:center; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  max-width:var(--container);
  margin:60px auto 0;
  padding:40px var(--edge) 140px;
  border-top:1.5px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
}
.footer__mark{ font-family:var(--serif); font-size:20px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.footer__line{ color:var(--stone); font-size:13.5px; }
.footer__socials{ display:flex; gap:18px; margin-left:auto; font-size:13.5px; }
.footer__socials a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; }
.footer__socials a:hover{ border-color:var(--ink); }
.footer__copy{ width:100%; font-size:12px; color:var(--stone); margin-top:8px; }

/* ==========================================================================
   CD / ambient music player
   ========================================================================== */
.cd-player{
  position:fixed; left:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--cream);
  border:none; border-radius:999px;
  padding:7px 16px 7px 7px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:padding .2s ease, background .2s ease;
}
.cd-player:hover{ background:#241f14; }
.cd-player__disc{
  width:34px; height:34px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 4px, transparent 4.5px),
    conic-gradient(from 0deg, #cfcabb, #8f8a79 15%, #cfcabb 30%, #8f8a79 45%, #cfcabb 60%, #8f8a79 75%, #cfcabb 90%, #8f8a79 100%);
  display:flex; align-items:center; justify-content:center;
  animation-name:spin-disc; animation-duration:2.4s; animation-timing-function:linear; animation-iteration-count:infinite;
  animation-play-state:paused;
  flex:0 0 auto;
}
.cd-player__disc-inner{ width:10px; height:10px; border-radius:50%; background:var(--cream); }
.cd-player.is-playing .cd-player__disc{ animation-play-state:running; }
@keyframes spin-disc{ to{ transform:rotate(360deg); } }
.cd-player__label{ font-size:12.5px; letter-spacing:0.01em; white-space:nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; padding-top:20px; }
  .rack-wrap{ order:-1; }

  /* accordion becomes vertical: each strip is a horizontal bar instead of a column */
  .accordion{
    flex-direction:column;
    height:auto;
    --strip: 52px;
  }
  .accordion__panel{ flex:0 0 var(--strip); min-width:0; width:100%; }
  .accordion__panel.is-active{ flex:0 0 420px; }
  .accordion__label{
    writing-mode:horizontal-tb;
    position:absolute; top:0; left:0; width:100%; height:var(--strip);
    padding:0 20px;
    justify-content:flex-start;
  }
  .accordion__panel.is-active .accordion__label{ padding-top:0; }
  .accordion__body{ padding:70px 22px 26px; }

  .cd-player__label{ display:none; }
  .cd-player{ padding:7px; }
}
@media (max-width: 520px){
  .waitlist-form{ flex-direction:column; background:transparent; padding:0; gap:10px; }
  .waitlist-form input{
    background:var(--ink); color:var(--cream); border-radius:999px; padding:13px 18px;
  }
  .waitlist-form button{ width:100%; padding:13px; }
}

/* keyboard focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2.5px solid var(--cobalt); outline-offset:2px;
}
/* ==========================================================================
   Coming-soon mode — hides everything but hero, countdown, and footer.
   Nothing below this point deletes any section, it only hides them while
   body has class="coming-soon". Remove that class from <body> in index.html
   to bring the full site back instantly.
   ========================================================================== */
body.coming-soon .swipe-demo,
body.coming-soon .accordion,
body.coming-soon .preview,
body.coming-soon .brand-wall,
body.coming-soon .press,
body.coming-soon .cta{
  display:none;
}
body.coming-soon .footer{
  margin-top:60px;
}