/* ============================================================
   J29.CLUB — custom.css  (v2: atmospheric / cinematic)
   Dark, hushed, light-reveals-the-dark. Edit tokens in :root.
   ============================================================ */

:root{
  /* palette */
  --void:#0B0E10;        /* near-black, cold ink hint — base */
  --shadow:#13181B;      /* raised surfaces / nav / section shift */
  --shadow-2:#1B2226;    /* cards on dark */
  --line:#242C30;        /* hairline borders */
  --parchment:#E7DDC6;   /* aged paper — headings / light accents */
  --parchment-2:#F2EBD9;
  --glow:#E0A458;        /* warm candle-amber — primary accent, sparing */
  --glow-dk:#C5872F;
  --ember:#C0392B;       /* deep red — DAILY section only */
  --ember-dk:#9E2C20;
  --mist:#8A938C;        /* muted secondary text */
  --text:#D5D8D1;        /* body text on void — keeps strong contrast */

  /* type */
  --f-display:"Cormorant",Georgia,"Times New Roman",serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-scrawl:"Caveat",ui-rounded,cursive;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-logo:"Bebas Neue",system-ui,sans-serif;   /* the logo lettering — used for wordmark, welcome, menu */

  /* shape */
  --r-lg:12px;
  --r-md:9px;
  --r-sm:5px;

  --shadow-card:0 24px 50px -30px rgba(0,0,0,.9);
  --glow-soft:0 0 0 1px rgba(224,164,88,.6), 0 16px 34px -16px rgba(224,164,88,.45);

  --maxw:1180px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.27,1);
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-weight:400;
  color:var(--text);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.65;
}

/* NOTE: grain + vignette are applied per-section (non-fixed) below, NOT as
   fixed full-viewport overlays. Fixed layers covering the viewport make
   Firefox fall back to synchronous (janky) scrolling — and these were also
   sitting behind the opaque sections (z-index), so they cost perf for nothing. */

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container-x{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
section, header, footer, nav{ position:relative; z-index:2; }

/* ---------- type scale ---------- */
.display-xl{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(3.4rem,9vw,7rem);
  line-height:.96;
  letter-spacing:.005em;
  color:var(--parchment);
}
.display-lg{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--parchment);
  text-wrap:balance;
}
.scrawl{
  font-family:var(--f-scrawl);
  font-weight:700;
  color:var(--glow);
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1;
}
.lede{
  font-family:var(--f-body);
  font-size:clamp(1rem,1.4vw,1.18rem);
  color:var(--mist);
  max-width:54ch;
  text-wrap:pretty;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7rem;
  color:var(--glow);
}
.eyebrow--ember{ color:var(--ember); }
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; opacity:.6; }

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn-glow,.btn-ember,.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  border-radius:var(--r-md); padding:.85rem 1.5rem; cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-glow{ color:#1C1505; background:var(--glow); border:1px solid rgba(0,0,0,.15);
  box-shadow:0 14px 36px -16px rgba(224,164,88,.7); }
.btn-glow:hover{ background:#EBB46B; transform:translateY(-2px); box-shadow:0 20px 44px -16px rgba(224,164,88,.8); }
.btn-glow:active{ transform:translateY(0) scale(.985); }

.btn-ember{ color:#fff; background:var(--ember); border:1px solid rgba(0,0,0,.2);
  box-shadow:0 14px 36px -16px rgba(192,57,43,.7); }
.btn-ember:hover{ background:var(--ember-dk); transform:translateY(-2px); }
.btn-ember:active{ transform:translateY(0) scale(.985); }

.btn-ghost{ color:var(--parchment); background:transparent; border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--glow); color:#fff; transform:translateY(-2px); background:rgba(224,164,88,.06); }
.btn-ghost:active{ transform:translateY(0) scale(.985); }

/* ---------- focus + skip link ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, .chip:focus-visible{
  outline:2px solid var(--glow); outline-offset:3px; border-radius:var(--r-sm);
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1100;
  background:var(--glow); color:#1C1505; padding:.6rem 1rem; border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:.85rem; transition:top .18s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ============================================================
   NAV — transparent over hero, --shadow on scroll
   ============================================================ */
.nav-j29{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  min-height:var(--nav-h);
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
/* opaque bg, no backdrop-filter — a backdrop blur re-blurs the scrolling
   content every frame in Firefox; the opaque dark bar carries the look. */
.nav-j29.nav-scrolled,
.nav-j29:has(.navbar-collapse.show){
  background:rgba(11,14,16,.97);
  border-bottom-color:var(--line);
}
.brand-logo{ display:block; height:56px; width:auto; }
.brand-logo--light{ filter:brightness(0) invert(1); opacity:.96; }
/* text wordmark in the header, set in the logo's lettering style */
.wordmark{
  font-family:var(--f-logo);
  font-weight:400; font-size:2rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--parchment); line-height:1;
}
.wordmark .dot{ color:var(--glow); }
.nav-j29 .nav-link{
  font-family:var(--f-logo); font-weight:400; font-size:1.2rem;
  letter-spacing:.07em; text-transform:uppercase;
  color:#C7CBC4; padding:.4rem .9rem; transition:color .15s var(--ease);
}
.nav-j29 .nav-link:hover{ color:var(--parchment); }
.nav-j29 .navbar-toggler{ border-color:var(--line); }
.nav-j29 .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(224,164,88,.4); }
/* mobile: the collapsed menu drops as a clean full-width panel */
@media (max-width:991.98px){
  .nav-j29 .navbar-collapse{
    margin-top:.6rem; padding-bottom:.7rem;
    border-top:1px solid var(--line);
  }
  .nav-j29 .navbar-nav{ gap:.1rem; }
  .nav-j29 .nav-link{ padding:.55rem .15rem; }
}

/* ============================================================
   HERO — Journal 29, emerging from shadow
   ============================================================ */
.hero{
  min-height:100dvh;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 1.5rem); padding-bottom:clamp(3rem,8vh,6rem);
  background:var(--void);
  overflow:hidden;
}
/* NOTE: the SVG feTurbulence "film grain" was removed. Firefox repaints
   SVG-filter backgrounds during scroll (and the z-index:-1 child blocked the
   section from being a simple cached layer) — that was the remaining jank.
   Atmosphere now comes from the dark palette + the per-section radial glows.
   If grain is wanted back, use a small pre-rendered raster PNG, not feTurbulence. */
/* warm candle glow that reveals the book */
/* the radial gradient is already soft, so no filter:blur (blur + an
   infinite opacity animation = a repaint every frame in Firefox).
   Promote to its own layer so the flicker never repaints siblings. */
.hero-glow{
  position:absolute; z-index:0; right:6%; top:46%;
  transform:translate3d(0,-50%,0);
  width:min(60vw,640px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(224,164,88,.24), rgba(224,164,88,.07) 44%, transparent 66%);
  pointer-events:none; will-change:opacity;
  animation:flicker 8s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{ opacity:.92; } 45%{ opacity:1; } 70%{ opacity:.85; } }
.hero-glow.is-paused{ animation-play-state:paused; }

/* faint cipher glyphs drifting at the edges */
.hero-glyphs{ position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--parchment); opacity:.05; }
.hero-glyphs span{ position:absolute; font-family:var(--f-display); font-size:clamp(2rem,6vw,5rem); }
.hero-glyphs span:nth-child(1){ top:14%; left:4%; }
.hero-glyphs span:nth-child(2){ bottom:16%; left:9%; transform:rotate(-12deg); }
.hero-glyphs span:nth-child(3){ top:22%; right:5%; transform:rotate(8deg); }

.hero .container-x{ position:relative; z-index:2; width:100%; }
.hero h1{ margin:.5rem 0 .2rem; }
.hero .hero-tagline{ margin:0 0 1.1rem; }
.hero .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

.hero-figure{ position:relative; display:flex; justify-content:center; }
.hero-figure img{
  width:min(78%,360px); height:auto; border-radius:var(--r-md);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -20px rgba(224,164,88,.4);
  transition:transform .5s var(--ease);
}
.hero-figure:hover img{ transform:translateY(-6px); }

/* ============================================================
   BOOKS & GAMES — the universe (stays dark)
   ============================================================ */
.books{
  background:linear-gradient(180deg, var(--void), var(--shadow));
  padding-block:clamp(4rem,10vw,7rem);
}
.books .lede{ margin-top:.8rem; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.8rem 0 2.6rem; }
.chip{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--mist); background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1.05rem; cursor:pointer;
  transition:color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.chip:hover{ color:var(--parchment); border-color:var(--glow-dk); }
.chip[aria-pressed="true"]{ color:#1C1505; background:var(--glow); border-color:var(--glow); }

.dossier{
  position:relative;
  display:flex; flex-direction:column; height:100%;
  background:var(--shadow-2); border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* no static box-shadow — 9 large blurred shadows make Firefox's tiled
     scroll-painting slow. Border + slightly-raised bg give the depth; the
     hover glow (::after, opacity) adds elevation only on interaction. */
  /* transform ONLY — animating border-color repaints the whole card every
     frame (the "stepping"). The amber edge on hover comes from the ::after
     glow ring instead, which fades via opacity on its own layer. */
  transition:transform .3s var(--ease);
}
/* The amber glow lives on a pseudo-element and only its OPACITY animates.
   Transitioning box-shadow re-rasterizes the blurred shadow every frame in
   Firefox (the hover jank); fading a pre-rendered shadow is GPU-cheap. */
.dossier::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--glow-soft);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
  will-change:opacity;   /* own layer: paint the glow once, then composite opacity */
}
.dossier:hover{ transform:translate3d(0,-6px,0); }
.dossier:hover::after{ opacity:1; }
/* cover keeps its own clip (for the image zoom) + rounds the card's top */
.dossier .cover{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--void); border-radius:var(--r-lg) var(--r-lg) 0 0; }
/* cover image is fully static on hover (no transform, no opacity change) so the
   card layer never repaints during the lift — that's what keeps it smooth. */
.dossier .cover img{ width:100%; height:100%; object-fit:cover; }
.dossier .body{ display:flex; flex-direction:column; flex:1 1 auto; padding:1.3rem 1.3rem 1.45rem; }
.dossier .kind{ font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--glow); margin-bottom:.55rem; }
.dossier h3{ font-family:var(--f-display); font-weight:600; font-size:1.5rem; line-height:1.1; margin:0 0 .45rem; color:var(--parchment); }
.dossier p{ font-size:.94rem; color:var(--mist); margin:0 0 1.25rem; text-wrap:pretty; }
.dossier .card-cta{ margin-top:auto; }
.dossier .enter{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-body); font-weight:600; font-size:.95rem; color:var(--parchment);
  transition:gap .18s var(--ease), color .18s var(--ease);
}
.dossier .enter svg{ width:15px; height:15px; transition:transform .18s var(--ease); }
.dossier:hover .enter{ color:var(--glow); }
.dossier:hover .enter svg{ transform:translateX(3px); }

/* ============================================================
   WELCOME — intro band (replaces the old hero)
   ============================================================ */
.welcome{
  background:
    radial-gradient(70% 130% at 80% 0%, rgba(224,164,88,.12), transparent 55%),
    var(--void);
  padding-top:calc(var(--nav-h) + clamp(2rem,6vw,4rem));
  padding-bottom:clamp(3rem,7vw,5rem);
  overflow:hidden;
}
.welcome h1{
  margin:.5rem 0 1rem;
  font-family:var(--f-logo); font-weight:400;
  font-size:clamp(3rem,7.5vw,6rem);
  letter-spacing:.015em; line-height:.9;
}
.welcome .lede{ margin-bottom:1.8rem; max-width:60ch; }
.welcome .actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* deduction grid — flat surface (no gradient) */
.section-deduction{ background:var(--shadow); }

/* the daily card reads as the recurring habit */
.dossier--daily{ border-left:3px solid var(--ember); }
.dossier--daily .kind{ color:var(--ember); }
.dossier--daily .countdown{ margin:.2rem 0 .9rem; }
.dossier--daily .trust-row{ margin:0 0 1.1rem; }

/* ============================================================
   THE DAILY — Deductionary (ember, after the grid)
   ============================================================ */
.daily{
  background:
    radial-gradient(70% 120% at 18% 30%, rgba(192,57,43,.16), transparent 55%),
    var(--shadow);
  border-block:1px solid var(--line);
  padding-block:clamp(4rem,10vw,7rem);
}
.daily-panel{
  background:linear-gradient(180deg, #15191B, #101315);
  border:1px solid var(--line); border-left:3px solid var(--ember);
  border-radius:var(--r-lg); padding:clamp(1.8rem,4.5vw,3.2rem);
  box-shadow:var(--shadow-card);
}
.daily-panel .display-lg{ margin:.5rem 0 .85rem; }
.daily-panel p{ color:var(--mist); max-width:54ch; }

.countdown{
  display:inline-flex; align-items:baseline; gap:.65rem;
  background:var(--void); border:1px solid var(--line); border-radius:var(--r-md);
  padding:.7rem 1.15rem; margin:1.5rem 0;
}
.countdown .label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); }
.countdown .time{ font-family:var(--f-mono); font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); font-variant-numeric:tabular-nums; color:var(--parchment); }

.trust-row{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:.4rem 0 1.6rem; font-family:var(--f-mono); font-size:.8rem; color:var(--mist); }
.trust-row span{ display:inline-flex; align-items:center; gap:.45rem; }
.trust-row i{ color:var(--ember); font-size:1.05rem; line-height:1; }

/* ============================================================
   NEWSLETTER — join the world (no freebie wording)
   ============================================================ */
.newsletter{
  background:
    radial-gradient(70% 120% at 85% 20%, rgba(224,164,88,.14), transparent 55%),
    var(--void);
  border-block:1px solid var(--line);
  padding-block:clamp(4rem,10vw,7rem);
}
.privacy-note{ font-family:var(--f-mono); font-size:.76rem; color:var(--mist); margin-top:1rem; }

/* Brevo form re-skin */
#sib-form-container .sib-form{ background:transparent !important; padding:0 !important; font-family:var(--f-body) !important; }
#sib-form-container #sib-container{ background:transparent !important; border:0 !important; padding:0 !important; max-width:540px; }
#sib-form .entry__field{ background:var(--shadow) !important; border:1px solid var(--line) !important; border-radius:var(--r-md) !important; overflow:hidden; }
#sib-form input#EMAIL{ background:transparent !important; color:var(--parchment) !important; font-family:var(--f-body) !important; font-size:1rem !important; padding:.95rem 1.1rem !important; border:0 !important; }
#sib-form input#EMAIL::placeholder{ color:var(--mist) !important; font-family:var(--f-body) !important; }
#sib-form .sib-form-block__button{
  background:var(--glow) !important; border:1px solid rgba(0,0,0,.15) !important; color:#1C1505 !important;
  font-family:var(--f-body) !important; font-weight:600 !important; font-size:1rem !important;
  padding:.85rem 1.7rem !important; border-radius:var(--r-md) !important;
  transition:transform .2s var(--ease), background-color .2s var(--ease) !important;
  box-shadow:0 14px 36px -16px rgba(224,164,88,.7) !important;
}
#sib-form .sib-form-block__button:hover{ background:#EBB46B !important; transform:translateY(-2px); }
#sib-form-container .sib-form-message-panel{ font-family:var(--f-mono) !important; border-radius:var(--r-md) !important; max-width:540px; margin-bottom:.8rem; }

/* ============================================================
   MERCH — modest strip
   ============================================================ */
.merch{ background:var(--shadow); border-bottom:1px solid var(--line); padding-block:clamp(2.5rem,6vw,4rem); }
.merch .merch-card{
  position:relative;
  display:flex; gap:1.25rem; align-items:center;
  background:var(--shadow-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1rem 1.25rem; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.merch .merch-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--glow-soft); opacity:0; transition:opacity .25s var(--ease); pointer-events:none;
}
.merch .merch-card:hover{ border-color:rgba(224,164,88,.4); transform:translate3d(0,-3px,0); }
.merch .merch-card:hover::after{ opacity:1; }
.merch .merch-card img{ width:92px; height:92px; object-fit:cover; border-radius:var(--r-md); }
.merch .merch-card h3{ font-family:var(--f-display); font-weight:600; font-size:1.35rem; margin:.1rem 0 .25rem; color:var(--parchment); }
.merch .merch-card p{ font-size:.92rem; color:var(--mist); margin:0; }
.merch .kind{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--glow); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-j29{ background:var(--void); padding-block:3.2rem 2.4rem; }
.footer-j29 .footer-logo-img{ height:92px; width:auto; filter:brightness(0) invert(1); opacity:.96; }
.footer-j29 .by{ color:var(--mist); font-size:.95rem; margin-top:.9rem; }
.footer-j29 .socials{ display:flex; gap:.6rem; flex-wrap:wrap; }
.footer-j29 .socials a{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-md); color:#C7CBC4;
  transition:color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.footer-j29 .socials a:hover{ color:var(--glow); border-color:var(--glow); transform:translateY(-2px); }
.footer-j29 .socials i{ font-size:1.05rem; }
.footer-j29 .studio{ font-family:var(--f-mono); font-size:.78rem; color:var(--mist); margin-top:1.9rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.footer-j29 .studio a{ color:var(--glow); }
.footer-j29 .studio a:hover{ text-decoration:underline; }
.footer-j29 .copyright{ font-family:var(--f-mono); font-size:.76rem; color:var(--mist); }

/* ============================================================
   reveal (JS adds .is-in)
   ============================================================ */
/* opacity-only — the cheapest reveal, fully compositor-driven, no transform
   repaints during scroll. */
.reveal{ opacity:0; transition:opacity .6s var(--ease); }
.reveal.is-in{ opacity:1; }

section[id]{ scroll-margin-top:calc(var(--nav-h) + 8px); }

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