:root{
  --midnight:#0a1128;
  --twilight:#16224d;
  --aurora:#7fe8b2;
  --aurora-deep:#3dbf8a;
  --starlight:#eef2ff;
  --lamp:#f0a868;
  --ink-dim:#8b96c4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--midnight);
  color:var(--starlight);
  font-family:'Sora',sans-serif;font-weight:300;
  overflow-x:hidden;min-height:100vh;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(61,191,138,.12), transparent),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(22,34,77,.85), transparent);
}
::selection{background:var(--aurora);color:var(--midnight)}
a{color:inherit}
img{display:block;max-width:100%}

/* ---------- stars ---------- */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--starlight);opacity:.4;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.65}}

.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
nav{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 34px;border-bottom:1px solid rgba(139,150,196,.18);
  flex-wrap:wrap;
}
nav .logo{
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:19px;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  color:var(--starlight);
  /* wordmark painted via alpha mask so it inherits theme colour */
  display:block;width:216px;height:40px;
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
  background-image:url('/assets/logo-night.png');
  background-repeat:no-repeat;background-position:left center;background-size:contain;
  transition:color .25s ease;
}
nav .logo:hover,nav .logo:focus-visible{color:var(--aurora)}
nav .logo:focus-visible{outline:2px solid var(--aurora);outline-offset:4px}
@media (max-width:520px){nav .logo{width:162px;height:30px}}
nav .links{display:flex;gap:34px;flex-wrap:wrap}
nav .links a{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;color:var(--starlight);
  padding-bottom:8px;border-bottom:2px solid transparent;
  transition:color .2s ease;
}
nav .links a:hover{color:var(--aurora)}
nav .links a.active{color:var(--aurora);border-bottom-color:var(--aurora)}

/* ---------- hero (home) ---------- */
.hero-home{
  min-height:calc(100vh - 90px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px 100px;position:relative;z-index:1;
}
.hero-home h1{
  font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,9.5vw,104px);line-height:1.04;letter-spacing:.005em;
}
.hero-home h1 .green{color:var(--aurora)}
.hero-home .sub{
  max-width:46ch;margin:34px auto 0;
  font-size:clamp(16px,2.4vw,22px);line-height:1.65;color:var(--ink-dim);
}
.hero-home .cta{margin-top:48px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;
  padding:16px 34px;border-radius:8px;transition:all .25s ease;
}
.btn-solid{background:var(--aurora);color:var(--midnight);font-weight:700}
.btn-solid:hover{background:var(--starlight)}
.btn-ghost{border:1px solid rgba(238,242,255,.35);color:var(--starlight)}
.btn-ghost:hover{border-color:var(--aurora);color:var(--aurora)}
.btn-pill{border-radius:100px;padding:13px 26px;font-size:12px}

/* ---------- page headers ---------- */
.page-head{padding:76px 0 20px;text-align:center}
.page-head .kicker{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--aurora);margin-bottom:20px;
}
.page-head h1{
  font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,6.5vw,58px);line-height:1.05;
}
.page-head h1 .green{color:var(--aurora)}
.page-head .sub{max-width:56ch;margin:22px auto 0;font-size:15px;line-height:1.8;color:#c4cbe8}

.section-tag{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.35em;
  text-transform:uppercase;color:var(--aurora);
  display:flex;align-items:center;gap:16px;margin:56px 0 28px;
}
.section-tag::after{content:'';flex:1;height:1px;background:rgba(139,150,196,.25)}

/* ---------- featured release ---------- */
.featured{
  display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:44px;align-items:center;
  padding:38px;border:1px solid rgba(127,232,178,.25);border-radius:14px;
  background:linear-gradient(150deg,rgba(22,34,77,.65),rgba(10,17,40,.85));
  transition:border-color .3s ease;
}
.featured:hover{border-color:rgba(127,232,178,.5)}
.featured .art{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.featured .art img{width:100%;height:100%;object-fit:cover}
.featured .fmt{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--lamp);margin-bottom:14px}
.featured h2{font-family:'Unbounded',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,4vw,34px);line-height:1.1;margin-bottom:16px}
.featured h2 .green{color:var(--aurora)}
.featured p{font-size:15px;line-height:1.75;color:#c4cbe8;max-width:48ch}
.featured .stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.featured .stats b{color:var(--starlight);font-weight:400}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* ---------- the crate ---------- */
.crate{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;margin-bottom:60px}
.record{
  display:block;text-decoration:none;
  border:1px solid rgba(139,150,196,.22);border-radius:12px;overflow:hidden;
  background:rgba(22,34,77,.35);
  transition:border-color .3s ease, transform .3s ease;
}
.record:hover{border-color:var(--aurora);transform:translateY(-4px)}
.record .sleeve{aspect-ratio:1/1;overflow:hidden;position:relative;background:radial-gradient(circle at center,#15151d 0 18%,transparent 18%),repeating-radial-gradient(circle at center,#15151d 0 3px,#0b0b10 3px 6px)}
.record .sleeve::after{content:'';position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,var(--aurora) 0 30%,var(--aurora-deep) 100%);opacity:.9}
.record .sleeve img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.record .label{padding:18px 18px 20px}
.record .label .fmt{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--aurora);margin-bottom:8px}
.record .label h3{font-family:'Unbounded',sans-serif;font-weight:500;font-size:14px;line-height:1.4;margin-bottom:6px}
.record .label .meta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}

/* ---------- blog cards ---------- */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;margin-bottom:60px}
.postcard{
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid rgba(139,150,196,.22);border-radius:12px;overflow:hidden;
  background:rgba(22,34,77,.35);
  transition:border-color .3s ease, transform .3s ease;
}
.postcard:hover{border-color:var(--aurora);transform:translateY(-4px)}
.postcard .thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,var(--twilight),#0d1533)}
.postcard .thumb img{width:100%;height:100%;object-fit:cover}
.postcard .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.postcard .cat{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--aurora)}
.postcard h3{font-family:'Unbounded',sans-serif;font-weight:500;font-size:16px;line-height:1.4}
.postcard .excerpt{font-size:14px;line-height:1.7;color:#c4cbe8;flex:1}
.postcard .date{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;color:var(--ink-dim)}

/* ---------- article ---------- */
.article{max-width:720px;margin:0 auto;padding:60px 24px 80px}
.article .cat{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--aurora);margin-bottom:16px}
.article h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(26px,5vw,42px);line-height:1.15;margin-bottom:14px}
.article .date{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:34px}
.article .cover{border-radius:12px;overflow:hidden;margin-bottom:38px}
.article .content{font-size:16.5px;line-height:1.9;color:#d5dbf2}
.article .content p{margin-bottom:22px}
.article .content a{color:var(--aurora)}
.article .content strong{color:var(--starlight);font-weight:600}
.backlink{
  display:inline-block;margin-bottom:30px;text-decoration:none;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);
}
.backlink:hover{color:var(--aurora)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:start;padding:40px 0 70px}
.about-grid .portrait{aspect-ratio:1/1.15;border-radius:12px;overflow:hidden;border:1px solid rgba(127,232,178,.3);background:linear-gradient(160deg,var(--twilight),#0d1533);display:grid;place-items:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-dim);text-align:center;padding:20px}
.about-grid .portrait img{width:100%;height:100%;object-fit:cover}
.about-grid .bio p{font-size:16px;line-height:1.9;color:#d5dbf2;margin-bottom:20px}
.about-grid .bio p strong{color:var(--aurora);font-weight:600}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;
  text-align:center;padding:64px 24px 76px;
  border-top:1px solid rgba(139,150,196,.15);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--ink-dim);line-height:2.5;
}
footer b{color:var(--starlight);font-weight:400}
footer a{color:var(--aurora);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .heart{color:var(--aurora)}

/* ---------- admin ---------- */
.admin{max-width:760px;margin:0 auto;padding:50px 24px 90px}
.admin h1{font-family:'Unbounded',sans-serif;font-size:26px;text-transform:uppercase;margin-bottom:30px}
.admin .card{border:1px solid rgba(139,150,196,.25);border-radius:12px;background:rgba(22,34,77,.4);padding:28px;margin-bottom:26px}
.admin label{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--aurora);margin:18px 0 8px}
.admin input[type=text],.admin input[type=password],.admin input[type=date],.admin select,.admin textarea{
  width:100%;padding:13px 15px;border-radius:8px;
  border:1px solid rgba(139,150,196,.35);background:#0d1533;color:var(--starlight);
  font-family:'Sora',sans-serif;font-size:15px;
}
.admin textarea{min-height:260px;line-height:1.7;resize:vertical}
.admin input:focus,.admin select:focus,.admin textarea:focus{outline:none;border-color:var(--aurora)}
.admin .postrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(139,150,196,.18);flex-wrap:wrap}
.admin .postrow .t{font-size:15px}
.admin .postrow .meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.12em}
.admin .actions{display:flex;gap:10px}
.admin .mini{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;padding:8px 14px;border-radius:6px;border:1px solid rgba(238,242,255,.3);color:var(--starlight);background:none;cursor:pointer}
.admin .mini:hover{border-color:var(--aurora);color:var(--aurora)}
.admin .mini.danger:hover{border-color:#ff7b7b;color:#ff7b7b}
.admin .msg{padding:14px 18px;border-radius:8px;border:1px solid var(--aurora);color:var(--aurora);font-size:14px;margin-bottom:22px}
.admin .hint{font-size:12.5px;color:var(--ink-dim);line-height:1.7;margin-top:8px}

@media (max-width:760px){
  nav{padding:20px 22px;justify-content:center;text-align:center}
  nav .links{gap:20px;justify-content:center}
  .featured{grid-template-columns:1fr;gap:30px;padding:26px}
  .about-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .stars i{animation:none}
  .record,.postcard,.btn,.featured{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- about additions (screenshot layout) ---------- */
.about-h2{font-family:'Unbounded',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(18px,3vw,24px);margin:34px 0 14px}
.about-grid .bio h2:first-child{margin-top:0}
.about-rule{border:none;border-top:1px solid rgba(139,150,196,.3);margin:36px 0}
.connect-row{display:flex;gap:30px;flex-wrap:wrap}
.connect-row a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--starlight);transition:color .2s ease;
}
.connect-row a:hover{color:var(--aurora)}
.connect-row svg{color:var(--aurora)}
.manifesto{
  max-width:820px;margin:30px auto 90px;
  border:1px solid rgba(139,150,196,.25);border-radius:14px;
  background:rgba(22,34,77,.4);padding:56px clamp(26px,6vw,70px);
}
.manifesto h2{font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(24px,4.6vw,38px);text-align:center;margin-bottom:36px}
.manifesto p{font-size:16.5px;line-height:1.9;color:#c4cbe8;margin-bottom:24px}
.manifesto .sig{font-family:'Unbounded',sans-serif;font-weight:700;text-transform:uppercase;text-align:center;font-size:18px;margin-top:38px;letter-spacing:.05em}

/* ---------- footer (screenshot layout) ---------- */
footer{padding:0 24px 40px;border-top:none;text-align:left}
.foot-inner{
  max-width:1180px;margin:0 auto;
  border:1px solid rgba(139,150,196,.2);border-radius:14px;
  background:rgba(13,21,51,.55);padding:44px 46px 30px;
}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot-line{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);line-height:2.1;max-width:60ch}
.foot-icons{display:flex;gap:22px}
.foot-icons a{color:var(--starlight);transition:color .2s ease}
.foot-icons a:hover{color:var(--aurora)}
.foot-bottom{
  border-top:1px solid rgba(139,150,196,.2);margin-top:30px;padding-top:24px;
  display:flex;justify-content:center;gap:44px;flex-wrap:wrap;
}
.foot-bottom a{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
}
.foot-bottom a:hover{color:var(--aurora)}
.foot-bottom a.active{color:var(--aurora)}
@media (max-width:600px){.foot-inner{padding:30px 24px 24px}}

/* ═══════════════════════════════════════════════════════════
   DAY MODE · beach edition
   Night is the default look. When <html data-theme="day"> is set
   (auto by time of day, or via the sun/moon toggle in the nav),
   the site shifts to a sunlit Pacific-coast palette.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="day"]{
  --midnight:#f3eee2;      /* warm sand */
  --twilight:#dfeaf2;      /* sea-haze blue */
  --aurora:#0c8f66;        /* sea glass green (darkened for contrast) */
  --aurora-deep:#0a6e50;
  --starlight:#122a3d;     /* deep ocean ink */
  --lamp:#b96f1f;          /* driftwood amber */
  --ink-dim:#5c6c86;
}
html[data-theme="day"] body{
  background:var(--midnight);
  background-image:
    linear-gradient(180deg,#dff0f7 0%,#eef0e6 34%,#f3eee2 62%,#efe5d0 100%),
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(12,143,102,.10), transparent);
}
html[data-theme="day"] .stars{display:none}
html[data-theme="day"] nav{background:rgba(243,238,226,.75);backdrop-filter:blur(10px);border-bottom-color:rgba(18,42,61,.14)}
html[data-theme="day"] .featured{
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(223,234,242,.65));
  border-color:rgba(12,143,102,.35);
}
html[data-theme="day"] .featured p,
html[data-theme="day"] .page-head .sub,
html[data-theme="day"] .postcard .excerpt,
html[data-theme="day"] .article .content,
html[data-theme="day"] .about-grid .bio p,
html[data-theme="day"] .manifesto p{color:#3c4d63}
html[data-theme="day"] .record,
html[data-theme="day"] .postcard{background:rgba(255,255,255,.66);border-color:rgba(18,42,61,.16)}
html[data-theme="day"] .record:hover,
html[data-theme="day"] .postcard:hover{border-color:var(--aurora)}
html[data-theme="day"] .postcard .thumb{background:linear-gradient(150deg,#dfeaf2,#cfdfe9)}
html[data-theme="day"] .btn-ghost{border-color:rgba(18,42,61,.35);color:var(--starlight)}
html[data-theme="day"] .btn-ghost:hover{border-color:var(--aurora);color:var(--aurora)}
html[data-theme="day"] .btn-solid{color:#fdfcf8}
html[data-theme="day"] .foot-inner{background:rgba(255,255,255,.6);border-color:rgba(18,42,61,.16)}
html[data-theme="day"] .manifesto,
html[data-theme="day"] .admin .card{background:rgba(255,255,255,.66);border-color:rgba(18,42,61,.18)}
html[data-theme="day"] .admin input[type=text],
html[data-theme="day"] .admin input[type=password],
html[data-theme="day"] .admin input[type=date],
html[data-theme="day"] .admin select,
html[data-theme="day"] .admin textarea{background:#fff;color:var(--starlight);border-color:rgba(18,42,61,.3)}
html[data-theme="day"] .home-backdrop{
  background:url(day-backdrop.jpg) center 40%/cover no-repeat;
  filter:blur(26px) saturate(1.1) brightness(1.02);
}
html[data-theme="day"] .home-backdrop::after{
  background:linear-gradient(180deg,rgba(223,240,247,.55) 0%,rgba(243,238,226,.8) 55%,var(--midnight) 100%);
}
html[data-theme="day"] .hero-photo{box-shadow:0 26px 80px rgba(18,42,61,.35), inset 0 0 0 1px rgba(255,255,255,.5)}
html[data-theme="day"] .about-grid .portrait{border-color:rgba(12,143,102,.4);background:linear-gradient(160deg,#dfeaf2,#eef0e6)}

/* theme toggle button (injected by site.js) */
.theme-toggle{
  font-family:'Space Mono',monospace;font-size:15px;line-height:1;
  background:none;border:1px solid rgba(139,150,196,.35);color:var(--starlight);
  border-radius:100px;width:38px;height:38px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.theme-toggle:hover{border-color:var(--aurora);color:var(--aurora)}
html[data-theme="day"] .theme-toggle{border-color:rgba(18,42,61,.3)}

/* crate category chips (Now Playlists) */
.cat-chips{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:34px 0 6px}
.cat-chips a{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--starlight);
  border:1px solid rgba(139,150,196,.35);border-radius:100px;padding:10px 18px;
  transition:all .2s ease;
}
.cat-chips a:hover{border-color:var(--aurora);color:var(--aurora)}
html[data-theme="day"] .cat-chips a{border-color:rgba(18,42,61,.3)}
.crate-empty{
  border:1px dashed rgba(139,150,196,.4);border-radius:12px;padding:38px 24px;
  text-align:center;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:60px;
}

/* ---------- the reel (homepage video strip) ---------- */
.reel{max-width:1120px;margin:0 auto;padding:0 24px 110px;text-align:center}
.reel-head h2{
  font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,4vw,34px);letter-spacing:.02em;color:var(--starlight);margin:0 0 10px;
}
.reel-head p{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 34px;
}
.reel-strip{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
}
.reel-card{
  position:relative;flex:0 0 auto;width:232px;aspect-ratio:2/3;
  padding:0;border:1px solid rgba(139,150,196,.22);border-radius:4px;
  background:var(--twilight);overflow:hidden;cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease;
}
.reel-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.reel-card:hover,.reel-card:focus-visible{transform:translateY(-6px);border-color:var(--aurora)}
.reel-card:hover img,.reel-card:focus-visible img{transform:scale(1.05)}
.reel-card:focus-visible{outline:2px solid var(--aurora);outline-offset:4px}
/* play glyph */
.reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(10,17,40,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(238,242,255,.3);
  transition:background .3s ease,border-color .3s ease;
}
.reel-play::after{
  content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--starlight);
  transition:border-left-color .3s ease;
}
.reel-card:hover .reel-play,.reel-card:focus-visible .reel-play{
  background:var(--aurora);border-color:var(--aurora);
}
.reel-card:hover .reel-play::after,.reel-card:focus-visible .reel-play::after{
  border-left-color:var(--midnight);
}
@media (max-width:900px){.reel-card{width:200px}}
@media (max-width:520px){.reel-card{width:calc(50% - 6px)}.reel-strip{gap:12px}}

/* lightbox */
#reelBox{
  position:fixed;inset:0;z-index:9998;display:grid;place-items:center;
  background:rgba(6,10,24,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:5vh 5vw;
}
#reelBox[hidden]{display:none}
#reelVid{max-height:88vh;max-width:100%;border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);background:#000}
#reelClose{
  position:absolute;top:18px;right:22px;width:44px;height:44px;
  font-size:26px;line-height:1;color:var(--starlight);
  background:rgba(10,17,40,.6);border:1px solid rgba(238,242,255,.22);
  border-radius:50%;cursor:pointer;transition:color .25s,border-color .25s;
}
#reelClose:hover,#reelClose:focus-visible{color:var(--aurora);border-color:var(--aurora)}
#reelClose:focus-visible{outline:2px solid var(--aurora);outline-offset:3px}



/* reel: force centring regardless of inherited alignment */
.reel{text-align:center}
.reel-head h2,.reel-head p{text-align:center}
.reel-strip{
  display:flex;justify-content:center;align-items:flex-start;
  gap:18px;flex-wrap:wrap;margin-inline:auto;width:100%;
}

/* ---------- hero lockup: THE / wordmark / COLLECTION ---------- */
.hero-home h1.hero-mark{
  display:flex;flex-direction:column;align-items:center;
  gap:0;line-height:.86;margin:0;
  width:min(92vw,860px);
}
.hero-mark .hero-the{
  font-family:'Unbounded',sans-serif;font-weight:900;
  font-size:clamp(20px,3.4vw,40px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--starlight);
  margin-bottom:.18em;
}
.hero-mark .hero-logo{
  display:block;width:100%;height:auto;
}
.hero-mark .hero-logo-day{display:none}
html[data-theme="day"] .hero-mark .hero-logo{display:none}
html[data-theme="day"] .hero-mark .hero-logo-day{display:block}
.hero-mark .hero-collection{
  font-family:'Unbounded',sans-serif;font-weight:900;
  font-size:clamp(34px,9.4vw,116px);
  letter-spacing:-.005em;text-transform:uppercase;
  color:var(--aurora);
  margin-top:.02em;
}
/* nav wordmark swaps with the theme too */
html[data-theme="day"] nav .logo{background-image:url('/assets/logo-day.png')}


/* ============ FAQ PAGE ============ */
.faq-intro{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);text-align:center;
  margin:0 auto 54px;max-width:640px;line-height:1.9;
}
.faq-sec{max-width:820px;margin:0 auto 62px}
.faq-h2{
  font-family:'Unbounded',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,2.4vw,19px);letter-spacing:.06em;color:var(--aurora);
  margin:0 0 22px;padding-bottom:12px;
  border-bottom:1px solid rgba(139,150,196,.22);
}
.faq-item{
  border-bottom:1px solid rgba(139,150,196,.16);
  background:none;
}
.faq-item + .faq-item{margin-top:2px}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:26px 60px 26px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{
  font-family:'Sora',sans-serif;font-weight:600;font-style:italic;
  font-size:clamp(15px,2vw,17px);line-height:1.5;
  color:var(--starlight);margin:0;display:inline;
  transition:color .25s ease;
}
.faq-item summary:hover h3,.faq-item[open] summary h3{color:var(--aurora)}
.faq-item summary::after{
  content:"";position:absolute;right:14px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--ink-dim);border-bottom:2px solid var(--ink-dim);
  transform:rotate(45deg);transition:transform .3s ease,border-color .3s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--aurora)}
.faq-item summary:focus-visible{outline:2px solid var(--aurora);outline-offset:3px;border-radius:3px}
.faq-a{padding:2px 60px 30px 0}
.faq-a p{
  font-family:'Sora',sans-serif;font-weight:300;
  font-size:15px;line-height:1.85;color:var(--ink-dim);margin:0;
}
.faq-a a{color:var(--aurora);text-decoration:none;border-bottom:1px solid rgba(139,150,196,.4)}
.faq-a a:hover{border-bottom-color:var(--aurora)}
.faq-cta{text-align:center;padding:26px 0 130px;margin-top:18px}
.faq-cta p{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-dim);margin:0 0 40px;
}
.faq-cta .btn{margin-top:6px}
@media (max-width:520px){
  .faq-item summary{padding:22px 44px 22px 0}
  .faq-a{padding:2px 12px 26px 0}
  .faq-cta p{margin-bottom:32px}
}

/* ============ NO SKIPS CLUB ============ */
.club-wrap{max-width:560px;margin:0 auto;padding-bottom:120px}

.club-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(139,150,196,.22);
  border-radius:18px;padding:38px 36px;
}
.club-card + .club-perks-block{margin-top:44px}

.club-label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);margin:24px 0 9px}
.club-label:first-of-type{margin-top:0}
.club-label .req{color:var(--aurora)}
.club-label .opt{text-transform:none;letter-spacing:.03em;opacity:.65;font-size:10.5px}

.club-input{width:100%;box-sizing:border-box;
  background:rgba(10,17,40,.5);
  border:1px solid rgba(139,150,196,.32);
  border-radius:10px;padding:14px 15px;
  font-family:'Sora',sans-serif;font-size:15px;color:var(--starlight);
  transition:border-color .2s ease,background .2s ease}
.club-input::placeholder{color:rgba(139,150,196,.7)}
.club-input:focus{outline:none;border-color:var(--aurora);background:rgba(10,17,40,.72)}
.club-input.err{border-color:#e2725b}
select.club-input{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.club-bday{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.club-err{font-family:'Sora',sans-serif;font-size:12.5px;color:#e2725b;margin-top:7px}

.club-consent{display:flex;gap:12px;align-items:flex-start;margin:28px 0 0;cursor:pointer}
.club-consent input{margin-top:2px;accent-color:var(--aurora);width:17px;height:17px;flex:none}
.club-consent span{font-family:'Sora',sans-serif;font-weight:300;font-size:13px;line-height:1.65;color:var(--ink-dim)}
.club-submit{width:100%;margin-top:28px;justify-content:center;text-align:center}
.club-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.club-alert{background:rgba(226,114,91,.12);border:1px solid rgba(226,114,91,.4);border-radius:10px;
  padding:13px 16px;font-family:'Sora',sans-serif;font-size:13.5px;color:#f0b4a6;margin:0 0 24px}
.club-alert.ok{background:rgba(127,232,178,.1);border-color:rgba(127,232,178,.4);color:var(--aurora)}

/* perks as a quiet 2x2 grid under the card, not a bulleted list beside it */
.club-perks-block{border-top:1px solid rgba(139,150,196,.16);padding-top:34px}
.club-perks-h{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);text-align:center;margin:0 0 26px}
.club-perks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.club-perks li{font-family:'Sora',sans-serif;font-weight:300;font-size:13.5px;line-height:1.7;color:var(--ink-dim);margin:0}
.club-perks strong{display:block;color:var(--starlight);font-weight:600;font-size:14px;margin-bottom:5px}
.club-fineprint{font-family:'Sora',sans-serif;font-weight:300;font-size:12px;line-height:1.8;
  color:var(--ink-dim);opacity:.85;margin:34px 0 0;text-align:center}
.club-fineprint a{color:var(--aurora);text-decoration:none;border-bottom:1px solid rgba(139,150,196,.4)}

.club-done{text-align:center;max-width:520px;margin:0 auto;padding-bottom:130px}
.club-done-mark{width:64px;height:64px;line-height:64px;margin:0 auto 26px;border-radius:50%;
  background:rgba(127,232,178,.14);border:1px solid var(--aurora);color:var(--aurora);font-size:27px}
.club-done h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(20px,3vw,26px);
  color:var(--starlight);margin:0 0 14px}
.club-done p{font-family:'Sora',sans-serif;font-weight:300;font-size:15px;line-height:1.8;color:var(--ink-dim);margin:0}

@media (max-width:560px){
  .club-card{padding:28px 22px;border-radius:14px}
  .club-perks{grid-template-columns:1fr;gap:22px}
  .club-bday{grid-template-columns:1fr 1fr}
}

/* ---- day mode ---- */
html[data-theme="day"] .club-card{background:rgba(255,255,255,.66);border-color:rgba(18,42,61,.16)}
html[data-theme="day"] .club-input{background:rgba(255,255,255,.9);border-color:rgba(18,42,61,.22);color:#16202e}
html[data-theme="day"] .club-input::placeholder{color:#8a97a8}
html[data-theme="day"] .club-input:focus{background:#fff;border-color:var(--aurora)}
html[data-theme="day"] select.club-input{
  background-image:linear-gradient(45deg,transparent 50%,#5b6b80 50%),linear-gradient(135deg,#5b6b80 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
html[data-theme="day"] .club-label,
html[data-theme="day"] .club-consent span,
html[data-theme="day"] .club-perks li,
html[data-theme="day"] .club-perks-h,
html[data-theme="day"] .club-fineprint,
html[data-theme="day"] .club-done p{color:#3c4d63}
html[data-theme="day"] .club-perks strong,
html[data-theme="day"] .club-done h2{color:#122a3d}
html[data-theme="day"] .club-perks-block{border-top-color:rgba(18,42,61,.14)}

/* ============ CLUB CRM ============ */
.crm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;padding:54px 0 26px;border-bottom:1px solid rgba(139,150,196,.2)}
.crm-title{font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,3vw,27px);color:var(--starlight);margin:0}
.crm-sub{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);margin:9px 0 0}
.crm-headbtns{display:flex;gap:10px;flex-wrap:wrap}
.crm-login{max-width:340px;margin:0 auto;padding-bottom:140px}

.crm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
.crm-stat{background:rgba(255,255,255,.035);border:1px solid rgba(139,150,196,.18);
  border-radius:12px;padding:20px 18px;text-align:center}
.crm-stat .n{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:26px;color:var(--aurora)}
.crm-stat .l{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:8px;line-height:1.5}

.crm-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.crm-filters .club-input{width:auto;flex:1;min-width:170px;padding:11px 13px;font-size:14px}
.crm-clear{font-family:'Sora',sans-serif;font-size:13px;color:var(--ink-dim);text-decoration:none}
.crm-clear:hover{color:var(--aurora)}

.crm-tablewrap{overflow-x:auto;border:1px solid rgba(139,150,196,.18);border-radius:12px}
.crm-table{width:100%;border-collapse:collapse;font-family:'Sora',sans-serif;font-size:13.5px;min-width:820px}
.crm-table th{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);text-align:left;padding:14px 14px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(139,150,196,.2);white-space:nowrap}
.crm-table td{padding:13px 14px;border-bottom:1px solid rgba(139,150,196,.1);color:var(--ink-dim);vertical-align:middle}
.crm-table tr:last-child td{border-bottom:none}
.crm-table tr:hover td{background:rgba(255,255,255,.02)}
.crm-table strong{color:var(--starlight);font-weight:600}
.crm-table a{color:var(--aurora);text-decoration:none}
.crm-table a:hover{text-decoration:underline}
.crm-table .muted{opacity:.4}
.crm-note input{width:150px;background:transparent;border:1px solid transparent;border-radius:6px;
  padding:6px 8px;font-family:'Sora',sans-serif;font-size:13px;color:var(--starlight)}
.crm-note input:hover{border-color:rgba(139,150,196,.25)}
.crm-note input:focus{outline:none;border-color:var(--aurora);background:rgba(10,17,40,.5)}
.crm-del{background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);padding:6px 4px}
.crm-del:hover{color:#e2725b}
.crm-empty,.crm-foot{font-family:'Sora',sans-serif;font-weight:300;font-size:13.5px;
  color:var(--ink-dim);text-align:center;padding:30px 0 120px}
.crm-foot{padding:20px 0 120px;font-size:12.5px}

@media (max-width:760px){
  .crm-stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- contributor byline ---- */
.byline-contrib{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:-6px 0 4px}
.byline-tag{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aurora);border:1px solid rgba(127,232,178,.45);border-radius:20px;padding:4px 11px;line-height:1}
.byline-name{font-family:'Sora',sans-serif;font-weight:300;font-style:italic;font-size:13.5px;color:var(--ink-dim)}
.card-contrib{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aurora);border:1px solid rgba(127,232,178,.4);border-radius:20px;padding:3px 9px;margin-left:9px;line-height:1}
html[data-theme="day"] .byline-name{color:#3c4d63}

/* ---- contributor toggle in the blog admin ---- */
.contrib-toggle{display:flex!important;align-items:center;gap:10px;cursor:pointer;
  margin:22px 0 4px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important}
.contrib-toggle input{width:17px;height:17px;accent-color:var(--aurora);margin:0;flex:none}
.contrib-toggle span{font-family:'Sora',sans-serif;font-size:14px;color:var(--ink-dim)}

/* ---- formatting buttons above the blog body box ---- */
.fmt-bar{display:flex;gap:8px;margin:0 0 8px}
.fmt-bar button{font-family:'Sora',sans-serif;font-size:13px;color:var(--starlight);background:transparent;
  border:1px solid rgba(127,232,178,.4);border-radius:8px;padding:6px 13px;cursor:pointer;line-height:1.2}
.fmt-bar button:hover{border-color:var(--aurora);color:var(--aurora)}
html[data-theme="day"] .fmt-bar button{border-color:rgba(18,42,61,.3)}