/* ==========================================================================
   SEEK AND DETECT
   Two themes off one token set. Light is the default; the sun/moon button in
   the nav flips to the neon night theme and remembers the choice.
   ========================================================================== */

:root{
  /* brand colors — identical in both themes */
  --magenta:  #ff2d95;
  --orange:   #ff7a18;
  --cyan:     #12c8e0;
  --gold:     #ffb703;
  --violet:   #7b5cff;

  --sunset:   linear-gradient(100deg, #ff2d95 0%, #ff7a18 48%, #ffb703 100%);
  --electric: linear-gradient(100deg, #12c8e0 0%, #7b5cff 55%, #ff2d95 100%);
  --duotone:  linear-gradient(112deg, #ff2d95 0%, #ff7a18 46%, #12c8e0 100%);

  /* ---------- LIGHT (default) ---------- */
  --bg:        #fdf8f4;
  --bg-2:      #fff1e6;
  --surface:   #ffffff;
  --surface-2: #fff7fb;
  --hairline:  #f0dfe6;
  --text:      #1c1235;
  --muted:     #6f6490;
  --accent-tx: #d1590a;
  --pro:       #1f9d3c;
  --con:       #e01e79;

  --chip-bg:   #ffffff;
  --hero-img:  url('/img/hero.jpg');
  --hero-op:   .34;
  --hero-veil: radial-gradient(ellipse 66% 62% at 50% 45%, rgba(253,248,244,.72), rgba(253,248,244,.3) 70%, transparent);
  --nav-bg:    rgba(253,248,244,.72);
  --nav-stuck: rgba(253,248,244,.93);
  --scrim:     linear-gradient(180deg, rgba(253,248,244,.22), rgba(253,248,244,.55));
  --cta-panel: rgba(255,255,255,.84);
  --band-fade: linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg));

  --blob-op:   .3;
  --blob-blend: multiply;
  --photo-op:  .92;
  --wash:      .1;

  --shadow:    0 22px 50px -26px rgba(70,30,90,.35);
  --glow-m:    0 0 0 1px rgba(255,45,149,.25), 0 16px 40px -16px rgba(255,45,149,.4);
  --glow-c:    0 0 0 1px rgba(18,200,224,.3),  0 16px 40px -16px rgba(18,200,224,.35);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --head: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-h: 68px;
  --max: 1240px;

  color-scheme: light;
}

/* ---------- NIGHT ---------- */
[data-theme="night"]{
  --bg:        #0b0916;
  --bg-2:      #131028;
  --surface:   #191534;
  --surface-2: #211b45;
  --hairline:  #2f2758;
  --text:      #f7f4ff;
  --muted:     #b4aada;
  --accent-tx: #ffc94d;
  --pro:       #9dff3c;
  --con:       #ff5fa8;

  --chip-bg:   rgba(255,255,255,.06);
  --hero-op:   .3;
  --hero-veil: radial-gradient(ellipse 66% 62% at 50% 45%, rgba(11,9,22,.72), rgba(11,9,22,.35) 70%, transparent);
  --nav-bg:    rgba(11,9,22,.6);
  --nav-stuck: rgba(11,9,22,.92);
  --scrim:     linear-gradient(180deg, rgba(11,9,22,.35), rgba(11,9,22,.6));
  --cta-panel: rgba(19,16,40,.8);
  --band-fade: linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg));

  --blob-op:   .5;
  --blob-blend: screen;
  --photo-op:  .62;
  --wash:      .14;

  --shadow:    0 24px 60px -24px rgba(0,0,0,.85);
  --glow-m:    0 0 0 1px rgba(255,45,149,.35), 0 14px 40px -12px rgba(255,45,149,.45);
  --glow-c:    0 0 0 1px rgba(18,200,224,.3),  0 14px 40px -12px rgba(18,200,224,.35);

  color-scheme: dark;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px); }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s, color .35s;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--head); line-height:1.05; margin:0; letter-spacing:-.02em; }
svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
[hidden]{ display:none!important; }

::selection{ background:var(--magenta); color:#fff; }
:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; border-radius:6px; }

.skip{
  position:fixed; top:-60px; left:12px; z-index:200; padding:10px 16px;
  background:var(--magenta); color:#fff; font-weight:700; border-radius:0 0 10px 10px;
  transition:top .2s;
}
.skip:focus{ top:0; }

.grad{
  background:var(--sunset); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  padding:.72rem 1.25rem; border-radius:999px; border:1px solid var(--hairline);
  background:var(--chip-bg); color:var(--text);
  font:600 .95rem/1 var(--body); text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s, background .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-big{ padding:.95rem 1.6rem; font-size:1.02rem; }

.btn-sub{
  background:var(--sunset); color:#2b0713; border-color:transparent; font-weight:700;
  box-shadow:0 10px 30px -12px rgba(255,45,149,.65);
}
.btn-sub:hover{ box-shadow:0 18px 44px -14px rgba(255,122,24,.75); }
.btn-sub .yt{ width:20px; height:20px; fill:currentColor; stroke:none; }

.btn-ghost:hover{ border-color:var(--cyan); box-shadow:var(--glow-c); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; gap:1.2rem;
  padding:0 clamp(1rem,3vw,2rem);
  background:var(--nav-bg); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s;
}
.nav.is-stuck{ background:var(--nav-stuck); border-bottom-color:var(--hairline); }

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto; object-fit:cover;
  box-shadow:0 6px 18px -8px rgba(255,45,149,.7), 0 0 0 1px var(--hairline);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-mark{ transform:rotate(-4deg) scale(1.06); }
.brand-text{ font:700 1.18rem/1 var(--head); letter-spacing:-.03em; }
.brand-text em{ font-style:normal; background:var(--sunset); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-text.small{ font-size:1rem; }

.nav-links{ display:flex; gap:.3rem; }
.nav-links a{
  padding:.5rem .8rem; border-radius:999px; text-decoration:none; color:var(--muted);
  font-size:.92rem; font-weight:500; transition:color .18s, background .18s;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,45,149,.1); }
.nav-links a.is-active{ color:var(--text); background:rgba(255,45,149,.16); box-shadow:inset 0 0 0 1px rgba(255,45,149,.4); }

.nav-actions{ display:flex; align-items:center; gap:.55rem; }

.search-trigger, .theme-toggle{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--chip-bg); border:1px solid var(--hairline); color:var(--muted);
  padding:.5rem .7rem .5rem .65rem; border-radius:999px; font:500 .88rem var(--body);
  transition:border-color .18s, color .18s, transform .18s;
}
.search-trigger:hover, .theme-toggle:hover{ border-color:var(--cyan); color:var(--text); }
.search-trigger svg{ width:16px; height:16px; }
.theme-toggle{ padding:.5rem; font-size:1rem; line-height:1; }
.theme-toggle:hover{ transform:rotate(18deg); }
.theme-toggle .t-night{ display:none; }
[data-theme="night"] .theme-toggle .t-night{ display:inline; }
[data-theme="night"] .theme-toggle .t-day{ display:none; }

kbd{
  font:600 .72rem var(--body); background:rgba(127,110,160,.14);
  border:1px solid var(--hairline); border-radius:5px; padding:.1rem .35rem; color:var(--muted);
}

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; margin:4px 0; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:94svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 3rem) 1.25rem 4rem; overflow:hidden; isolation:isolate;
}
.hero-glow{ position:absolute; inset:-20%; z-index:-2; filter:blur(70px); }
.blob{ position:absolute; border-radius:50%; opacity:var(--blob-op); mix-blend-mode:var(--blob-blend); }
.blob-1{ width:52vw; height:52vw; background:#ff2d95; top:-8%; left:-6%;  animation:drift1 22s ease-in-out infinite; }
.blob-2{ width:46vw; height:46vw; background:#ff7a18; top:18%; right:-8%; animation:drift2 26s ease-in-out infinite; }
.blob-3{ width:40vw; height:40vw; background:#12c8e0; bottom:-14%; left:28%; animation:drift3 30s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate(8vw,6vh) scale(1.12) } }
@keyframes drift2{ 50%{ transform:translate(-7vw,9vh) scale(.9) } }
@keyframes drift3{ 50%{ transform:translate(5vw,-8vh) scale(1.15) } }

/* The hero backdrop. Starts as the beach photo; once the video feed loads,
   app.js swaps --hero-img to the newest thumbnail so it changes with the channel. */
.hero-photo{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--hero-img);
  background-size:cover; background-position:center;
  opacity:var(--hero-op);
  filter:blur(2px) saturate(1.15);
  transform:scale(1.04);
  transition:opacity .8s ease, background-image .4s ease;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:var(--hero-veil);
}
@media (max-width:900px){
  :root{ --hero-img: url('/img/hero-sm.jpg'); }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, var(--bg) 100%);
}
.sweep{
  position:absolute; z-index:-1; left:-40%; top:0; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(18,200,224,.16), transparent);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ to{ transform:translateX(360%) } }

.hero-inner{ max-width:920px; text-align:center; }

.hero-badge{
  width:88px; height:88px; border-radius:22px; margin:0 auto 1.5rem;
  box-shadow:0 18px 44px -18px rgba(255,45,149,.75), 0 0 0 1px var(--hairline);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 50%{ transform:translateY(-8px) } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1.3rem;
  font:600 .78rem/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:var(--chip-bg); border:1px solid var(--hairline);
  padding:.5rem .9rem; border-radius:999px;
}
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--magenta); box-shadow:0 0 10px var(--magenta); animation:blink 1.8s infinite; }
@keyframes blink{ 50%{ opacity:.25 } }

.hero h1{ font-size:clamp(2.8rem, 9vw, 6.2rem); font-weight:700; }
.hero-sub{
  max-width:44ch; margin:1.4rem auto 0; color:var(--muted);
  font-size:clamp(1.02rem,2.2vw,1.2rem);
}
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

.hero-stats{
  display:flex; gap:clamp(1.2rem,5vw,3.4rem); justify-content:center; flex-wrap:wrap;
  list-style:none; padding:0; margin:3rem 0 0;
}
.hero-stats li{ display:flex; flex-direction:column; gap:.25rem; }
.hero-stats b{ font:700 clamp(1.6rem,4vw,2.2rem)/1 var(--head); background:var(--electric);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-stats span{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.scroll-hint{
  position:absolute; bottom:1.4rem; left:50%; translate:-50% 0; color:var(--muted);
  text-decoration:none; font-size:.8rem; animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(7px) } }

/* ==========================================================================
   PHOTO BAND  (the channel banner, duotoned into the palette)
   ========================================================================== */
.band{ position:relative; overflow:hidden; isolation:isolate; background:var(--bg); }
.band-img{
  height:clamp(140px,24vw,280px);
  background-image:var(--duotone), image-set(url('/img/banner.jpg') 1x);
  background-image:var(--duotone), url('/img/banner.jpg');
  background-blend-mode:color;
  background-size:cover; background-position:center;
  opacity:var(--photo-op);
  transform:scale(1.02);
}
.band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--band-fade);
}
@media (max-width:800px){
  .band-img{ background-image:var(--duotone), url('/img/banner-sm.jpg'); }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{ max-width:var(--max); margin:0 auto; padding:clamp(3.4rem,8vw,6rem) clamp(1rem,4vw,2rem); }
.section-alt{
  max-width:none;
  background:
    radial-gradient(1200px 500px at 12% -10%, rgba(255,45,149,var(--wash)), transparent 62%),
    radial-gradient(900px 480px at 88% 110%, rgba(18,200,224,var(--wash)), transparent 62%),
    var(--bg-2);
  border-block:1px solid var(--hairline);
}
.section-alt > *{ max-width:var(--max); margin-inline:auto; }

.section-head{ max-width:62ch; margin-bottom:2.4rem; }
.section-head h2{ font-size:clamp(1.9rem,5vw,3rem); display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.section-head .num{
  font:700 .8rem/1 var(--body); letter-spacing:.2em; color:#fff;
  background:var(--sunset); padding:.4rem .6rem; border-radius:7px;
}
.section-head p{ color:var(--muted); margin:1rem 0 0; font-size:1.04rem; }
.section-head em{ color:var(--accent-tx); font-style:normal; font-weight:600; }
.section-foot{ margin-top:2rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

.fineprint{ color:var(--muted); font-size:.84rem; margin-top:1.6rem; }
.fineprint.center{ text-align:center; }
.fineprint a{ color:var(--accent-tx); font-weight:600; }

/* ==========================================================================
   VIDEOS
   ========================================================================== */
.video-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }

.vcard{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface);
  border:1px solid var(--hairline); text-decoration:none; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.vcard:hover{ transform:translateY(-5px); border-color:rgba(255,45,149,.55); box-shadow:var(--glow-m); }
.vcard .thumb{ position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; display:block; }
.vcard .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s, filter .3s; }
.vcard:hover .thumb img{ transform:scale(1.05); filter:saturate(1.2); }
.vcard .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 55%, rgba(0,0,0,.05), rgba(0,0,0,.35));
}
.vcard .play i{
  width:56px; height:56px; border-radius:50%; background:var(--sunset);
  display:grid; place-items:center; color:#fff; font-style:normal;
  box-shadow:0 10px 30px -8px rgba(255,45,149,.8); transition:transform .22s;
}
.vcard:hover .play i{ transform:scale(1.12); }
.vcard .meta{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.vcard h3{ font-size:1.02rem; line-height:1.3; }
.vcard .vmeta{ display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.8rem; margin-top:auto; }
.vcard .vmeta .dot{ opacity:.5; }
.vcard iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

.skeleton{
  aspect-ratio:16/10; border-radius:var(--r); border:1px solid var(--hairline);
  background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size:220% 100%; animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{ to{ background-position:-120% 0 } }

.empty-note{
  grid-column:1/-1; text-align:center; padding:2.6rem 1rem; color:var(--muted);
  border:1px dashed var(--hairline); border-radius:var(--r);
}

/* ==========================================================================
   FILTER CHIPS
   ========================================================================== */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.chip{
  cursor:pointer; border:1px solid var(--hairline); background:var(--chip-bg);
  color:var(--muted); padding:.5rem .95rem; border-radius:999px;
  font:600 .87rem var(--body); transition:.18s; display:inline-flex; align-items:center; gap:.4rem;
}
.chip:hover{ color:var(--text); border-color:var(--cyan); }
.chip.is-on{
  color:#fff; background:var(--sunset); border-color:transparent;
  box-shadow:0 8px 24px -10px rgba(255,45,149,.7);
}

/* ==========================================================================
   CALENDAR
   ========================================================================== */
.cal-shell{ display:grid; grid-template-columns:1.45fr 1fr; gap:1.4rem; align-items:start; }
.cal-main{
  border-radius:var(--r-lg); border:1px solid var(--hairline); background:var(--surface);
  padding:1.3rem; box-shadow:var(--shadow);
}
.cal-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.cal-top h3{ font-size:1.25rem; flex:1; text-align:center; }
.cal-nav{
  width:36px; height:36px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  background:var(--chip-bg); border:1px solid var(--hairline); color:var(--text);
  font-size:1.2rem; line-height:1; transition:.18s;
}
.cal-nav:hover{ border-color:var(--magenta); color:var(--magenta); }
.cal-today{
  cursor:pointer; background:var(--chip-bg); border:1px solid var(--hairline); color:var(--muted);
  border-radius:999px; padding:.35rem .7rem; font:600 .78rem var(--body); transition:.18s;
}
.cal-today:hover{ color:var(--text); border-color:var(--cyan); }

.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; margin-bottom:.4rem; }
.cal-dow span{ text-align:center; font:600 .7rem var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.cal-cell{
  position:relative; aspect-ratio:1; border-radius:12px; cursor:pointer;
  border:1px solid var(--hairline); background:var(--surface-2); color:var(--text);
  font-family:var(--body); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; padding:0;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cal-cell:hover{ transform:translateY(-2px); box-shadow:var(--shadow); z-index:2; }
.cal-cell.blank{ border:0; background:none; cursor:default; }
.cal-cell .d{ font:700 .95rem var(--head); }
.cal-cell .m{ font-size:.78rem; line-height:1; opacity:.9; }
.cal-cell.is-today{ outline:2px solid var(--cyan); outline-offset:1px; }
.cal-cell.is-sel{ box-shadow:0 0 0 2px var(--text) inset; }
.cal-cell.past{ opacity:.45; }

.s5{ background:linear-gradient(150deg, #ff2d95, #ff7a18); border-color:transparent; color:#fff; }
.s4{ background:linear-gradient(150deg, rgba(255,122,24,.85), rgba(255,183,3,.75)); border-color:transparent; color:#3b1500; }
.s3{ background:rgba(255,183,3,.28); border-color:transparent; }
.s2{ background:rgba(18,200,224,.2); border-color:transparent; }
.s1{ background:rgba(123,92,255,.18); border-color:transparent; }
[data-theme="night"] .s4{ color:#2b1400; }
[data-theme="night"] .s3, [data-theme="night"] .s2, [data-theme="night"] .s1{ color:var(--text); }

.cal-legend{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1.1rem; }
.lg{ font:600 .74rem var(--body); padding:.3rem .6rem; border-radius:999px; color:#3b1500; }
.lg-5{ background:linear-gradient(100deg,#ff2d95,#ff7a18); color:#fff; }
.lg-4{ background:linear-gradient(100deg,#ff7a18,#ffb703); }
.lg-3{ background:rgba(255,183,3,.45); }
.lg-2{ background:rgba(18,200,224,.3); color:#023c46; }
.lg-1{ background:rgba(123,92,255,.28); color:#241452; }
[data-theme="night"] .lg-3{ background:rgba(255,183,3,.8); }
[data-theme="night"] .lg-2{ color:#d6fbff; }
[data-theme="night"] .lg-1{ color:#e8e2ff; }

.cal-side{ display:flex; flex-direction:column; gap:1.1rem; }
.day-card{
  border-radius:var(--r-lg); border:1px solid var(--hairline); background:var(--surface);
  padding:1.3rem; box-shadow:var(--shadow);
}
.day-card .dc-date{ color:var(--muted); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
.day-card .dc-score{ display:flex; align-items:center; gap:.7rem; margin:.6rem 0 1rem; }
.day-card .dc-moon{ font-size:2.3rem; line-height:1; }
.day-card .dc-label{ font:700 1.45rem/1.1 var(--head); }
.day-card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; font-size:.9rem; }
.day-card dt{ color:var(--muted); }
.day-card dd{ margin:0; font-weight:600; }
.day-card .dc-tip{ margin:1rem 0 0; font-size:.9rem; color:var(--muted); }

.prime-list{ border-radius:var(--r-lg); border:1px solid var(--hairline); background:var(--surface); padding:1.2rem 1.3rem; box-shadow:var(--shadow); }
.prime-list h4{ font:700 .74rem var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--magenta); margin-bottom:.8rem; }
.prime-list ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.prime-list li{ display:flex; align-items:baseline; gap:.6rem; font-size:.92rem; }
.prime-list .pl-when{ font-weight:700; font-family:var(--head); }
.prime-list .pl-why{ color:var(--muted); font-size:.84rem; }
.prime-list .pl-in{ margin-left:auto; color:var(--accent-tx); font-size:.8rem; font-weight:600; white-space:nowrap; }

/* ==========================================================================
   GEAR
   ========================================================================== */
.gear-bar{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.sorter{ color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1.6rem; }
.sorter select{
  background:var(--surface); color:var(--text); border:1px solid var(--hairline);
  border-radius:999px; padding:.45rem .8rem; font:600 .85rem var(--body); cursor:pointer;
}

.gear-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fill,minmax(282px,1fr)); }
.gcard{
  position:relative; border-radius:var(--r-lg); border:1px solid var(--hairline);
  background:var(--surface); box-shadow:var(--shadow);
  padding:1.4rem; display:flex; flex-direction:column; gap:.7rem;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s;
}
.gcard::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--sunset); opacity:0; transition:opacity .22s;
}
.gcard:hover{ transform:translateY(-5px); border-color:rgba(255,122,24,.55); box-shadow:0 20px 50px -22px rgba(255,122,24,.55); }
.gcard:hover::before{ opacity:1; }
.gcard .badge{
  position:absolute; top:-11px; left:1.2rem; font:700 .68rem/1 var(--body);
  letter-spacing:.1em; text-transform:uppercase; padding:.42rem .65rem; border-radius:999px;
  background:var(--sunset); color:#fff; box-shadow:0 8px 20px -8px rgba(255,45,149,.8);
}
.gcard .g-brand{ color:var(--muted); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.gcard h3{ font-size:1.32rem; }
.gcard .g-price{ font:700 1.1rem var(--head); color:var(--accent-tx); }
.gcard .g-price small{ color:var(--muted); font-weight:500; font-size:.72rem; letter-spacing:.06em; }
.gcard .g-best{ font-size:.92rem; color:var(--muted); }
.gcard .g-verdict{
  margin:.2rem 0; padding:.7rem .9rem; border-left:3px solid var(--gold);
  background:rgba(255,183,3,.12); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--text); font-size:.9rem; font-style:italic;
}
.gcard dl{ margin:.3rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:.84rem; }
.gcard dt{ color:var(--muted); }
.gcard dd{ margin:0; font-weight:600; }
.gcard .g-actions{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; padding-top:.4rem; }
.gcard .g-watch{ display:flex; align-items:center; gap:.7rem; text-decoration:none;
  padding:.7rem .85rem; border-radius:var(--r-sm); border:1px solid var(--hairline);
  background:var(--surface-2); transition:.18s;
}
.gcard .g-watch:hover{ border-color:var(--magenta); background:rgba(255,45,149,.08); transform:translateX(3px); }
.gcard .g-watch-ic{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--sunset);
  color:#fff; display:grid; place-items:center; font-size:.72rem;
  box-shadow:0 6px 16px -6px rgba(255,45,149,.8);
}
.gcard .g-watch-tx{ min-width:0; display:flex; flex-direction:column; }
.gcard .g-watch-tx b{ font-size:.86rem; }
.gcard .g-watch-tx small{
  color:var(--muted); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gcard .g-buy{
  display:flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none;
  padding:.62rem 1rem; border-radius:999px; background:var(--sunset); color:#2b0713;
  font:700 .87rem var(--body); box-shadow:0 8px 22px -10px rgba(255,45,149,.7);
  transition:transform .18s, box-shadow .18s;
}
.gcard .g-buy:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(255,122,24,.8); }
.gcard .g-code{
  font:700 .72rem var(--body); letter-spacing:.06em; background:rgba(0,0,0,.18);
  color:#fff; padding:.18rem .45rem; border-radius:6px;
}
.gcard .g-lists{ display:grid; gap:.5rem; margin-top:.6rem; font-size:.86rem; }
.gcard .g-lists ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.2rem; }
.gcard .g-pros li{ list-style:disc; }
.gcard .g-cons li{ list-style:disc; }
.gcard .g-pros li::marker{ content:'+ '; color:var(--pro); font-weight:700; }
.gcard .g-cons li::marker{ content:'– '; color:var(--con); font-weight:700; }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.events{ display:grid; gap:.9rem; }
.ev{
  display:grid; grid-template-columns:96px 1fr auto; gap:1.2rem; align-items:center;
  border-radius:var(--r); border:1px solid var(--hairline); background:var(--surface);
  padding:1.1rem 1.3rem; box-shadow:var(--shadow); transition:.2s;
}
.ev:hover{ border-color:var(--cyan); transform:translateX(4px); }
.ev-date{ text-align:center; border-right:1px solid var(--hairline); padding-right:1rem; }
.ev-date b{ display:block; font:700 1.7rem/1 var(--head); background:var(--electric);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ev-date span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ev h3{ font-size:1.08rem; }
.ev p{ margin:.3rem 0 0; color:var(--muted); font-size:.88rem; }
.ev .ev-kind{ font:700 .7rem var(--body); letter-spacing:.12em; text-transform:uppercase;
  padding:.35rem .6rem; border-radius:999px; border:1px solid var(--hairline); color:var(--cyan); }

.ev-empty{
  text-align:center; padding:3rem 1.5rem; border-radius:var(--r-lg);
  border:1px dashed var(--hairline); background:var(--surface);
}
.ev-empty .ee-icon{ font-size:2.4rem; display:block; margin-bottom:.6rem; }
.ev-empty h3{ font-size:1.3rem; margin-bottom:.5rem; }
.ev-empty p{ color:var(--muted); margin:0 auto; max-width:46ch; }

/* ==========================================================================
   CODE
   ========================================================================== */
.code-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); }
.ccard{
  border-radius:var(--r); border:1px solid var(--hairline); background:var(--surface);
  padding:1.3rem; box-shadow:var(--shadow); transition:.2s;
}
.ccard:hover{ border-color:var(--magenta); transform:translateY(-3px); }
.ccard .ic{ font-size:1.7rem; display:block; margin-bottom:.6rem; }
.ccard h3{ font-size:1.06rem; margin-bottom:.4rem; }
.ccard p{ margin:0; color:var(--muted); font-size:.9rem; }

/* ==========================================================================
   CTA (banner photo) + FOOTER
   ========================================================================== */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(4rem,10vw,7rem) 1.5rem; text-align:center;
  border-block:1px solid var(--hairline);
}
.cta-photo{
  position:absolute; inset:0; z-index:-2;
  background-image:var(--duotone), url('/img/banner.jpg');
  background-blend-mode:color;
  background-size:cover; background-position:center;
  opacity:var(--photo-op);
}
.cta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--scrim);
}
.cta-inner{
  max-width:760px; margin:0 auto; padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--cta-panel); backdrop-filter:blur(10px) saturate(120%);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(40,10,60,.45);
}
.cta h2{ font-size:clamp(1.9rem,6vw,3.4rem); }
.cta p{ color:var(--text); opacity:.78; margin:1.1rem 0 2rem; font-weight:500; }
.cta-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

.footer{
  border-top:1px solid var(--hairline); background:var(--bg-2);
  padding:2.4rem clamp(1rem,4vw,2rem); display:grid; gap:1.4rem;
  grid-template-columns:1fr auto; align-items:center; max-width:none;
}
.foot-brand{ display:flex; align-items:center; gap:.7rem; }
.foot-brand img{ width:44px; height:44px; border-radius:12px; box-shadow:0 0 0 1px var(--hairline); }
.footer p{ margin:.35rem 0 0; color:var(--muted); font-size:.88rem; }
.footer nav{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.footer nav a{ color:var(--muted); text-decoration:none; font-size:.88rem; }
.footer nav a:hover{ color:var(--magenta); }
.footer .copy{ grid-column:1/-1; font-size:.8rem; color:var(--muted); opacity:.8; }

/* ==========================================================================
   SEARCH MODAL
   ========================================================================== */
.search-modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:start center; padding:10vh 1rem 1rem; }
.search-modal[hidden]{ display:none; }
.search-backdrop{ position:absolute; inset:0; background:rgba(28,18,53,.45); backdrop-filter:blur(7px); }
[data-theme="night"] .search-backdrop{ background:rgba(4,3,10,.7); }
.search-box{
  position:relative; width:min(640px,100%); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--hairline); box-shadow:0 40px 90px -30px rgba(40,10,60,.5);
  overflow:hidden; animation:pop .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{ from{ transform:translateY(-10px) scale(.98); opacity:0 } }
.search-field{ display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid var(--hairline); }
.search-field svg{ width:19px; height:19px; color:var(--muted); flex:0 0 auto; }
.search-field input{
  flex:1; background:none; border:0; color:var(--text); font:500 1.05rem var(--body); outline:none;
}
.search-field input::placeholder{ color:var(--muted); opacity:.8; }
.search-close{ cursor:pointer; background:var(--chip-bg); border:1px solid var(--hairline);
  color:var(--muted); border-radius:6px; padding:.2rem .45rem; font:600 .72rem var(--body); }

.search-results{ list-style:none; margin:0; padding:.5rem; max-height:52vh; overflow:auto; }
.search-results li + li{ margin-top:2px; }
.sr{
  width:100%; display:flex; align-items:center; gap:.8rem; cursor:pointer; text-align:left;
  background:none; border:0; color:inherit; padding:.7rem .8rem; border-radius:10px;
  font-family:var(--body); transition:background .12s;
}
.sr:hover, .sr.is-cur{ background:rgba(255,45,149,.12); }
.sr .sr-ic{ font-size:1.1rem; width:1.6rem; text-align:center; flex:0 0 auto; }
.sr .sr-main{ flex:1; min-width:0; }
.sr strong{ display:block; font-size:.95rem; }
.sr small{ color:var(--muted); font-size:.8rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr .sr-kind{ font:700 .66rem var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--magenta); }
.sr mark{ background:rgba(255,183,3,.35); color:var(--text); border-radius:3px; }
.sr-none{ padding:2rem 1rem; text-align:center; color:var(--muted); }
.search-foot{ padding:.7rem 1.1rem; border-top:1px solid var(--hairline); color:var(--muted); font-size:.76rem; display:flex; gap:.45rem; align-items:center; }

/* ==========================================================================
   REVEAL + RESPONSIVE
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:1000px){
  .cal-shell{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:.2rem;
    background:var(--nav-stuck); backdrop-filter:blur(16px); padding:1rem;
    border-bottom:1px solid var(--hairline); transform:translateY(-130%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .nav-links.is-open{ transform:none; }
  .nav-links a{ padding:.8rem 1rem; font-size:1rem; }
  .nav-toggle{ display:block; }
  .search-trigger span, .search-trigger kbd{ display:none; }
  .search-trigger{ padding:.55rem; }
  .nav-actions .btn-sub{ padding:.6rem 1rem; font-size:.88rem; }
  .brand-text{ display:none; }
  .ev{ grid-template-columns:1fr; gap:.7rem; }
  .ev-date{ display:flex; align-items:baseline; gap:.5rem; text-align:left; border-right:0; border-bottom:1px solid var(--hairline); padding:0 0 .6rem; }
  .ev-date b{ font-size:1.3rem; }
  .footer{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.4rem 2rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}