/* =====================================================================
   NATURAL LIGHT ENHANCED - DOCUMENTATION
   Primary colour is injected from config.js as --primary
   ===================================================================== */

:root{
  --primary:#fbc498;
  --primary-dim:rgba(251,196,152,.14);
  --primary-line:rgba(251,196,152,.32);

  --bg:#0a0908;
  --panel:rgba(16,14,13,.72);
  --panel-solid:#100e0d;
  --line:rgba(255,255,255,.07);
  --line-soft:rgba(255,255,255,.045);

  --text:#e9e4df;
  --text-dim:#a49b93;
  --text-faint:#6f665f;

  --radius:14px;
  --sidebar-w:264px;
  --toc-w:232px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease);}
a:hover{color:#fff;}
::selection{background:var(--primary);color:#181310;}

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:99px;}
*::-webkit-scrollbar-thumb:hover{background:var(--primary-line);}

/* =====================================================================
   BACKGROUND SLIDESHOW
   ===================================================================== */
#bg-stage{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg);}
#bg-stage .bg-slide{
  position:absolute;inset:-2%;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity var(--bg-fade,2.5s) ease-in-out;
  will-change:opacity,transform;
}
#bg-stage .bg-slide.active{
  opacity:1;
  animation:bgDrift var(--bg-drift,26s) linear forwards;
}
@keyframes bgDrift{from{transform:scale(1.06);}to{transform:scale(1.15);}}
#bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 22% 2%,rgba(251,196,152,.10),transparent 62%),
    linear-gradient(180deg,rgba(10,9,8,.24),rgba(10,9,8,.46) 55%,rgba(10,9,8,.62));
  backdrop-filter:blur(var(--bg-blur,2px));
  -webkit-backdrop-filter:blur(var(--bg-blur,2px));
}
#bg-dim{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0a0908;opacity:var(--bg-dim,.86);}

/* =====================================================================
   TOP BAR (mobile only)
   ===================================================================== */
#topbar{
  display:none;
  position:sticky;top:0;z-index:60;
  align-items:center;gap:14px;
  padding:12px 18px;
  background:rgba(10,9,8,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
#topbar .brand-name{font-weight:700;letter-spacing:.06em;font-size:13px;text-transform:uppercase;}
#menu-toggle{
  background:transparent;border:1px solid var(--line);color:var(--text);
  width:38px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
#menu-toggle:hover{border-color:var(--primary-line);color:var(--primary);}

/* =====================================================================
   LAYOUT
   ===================================================================== */
#layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}

/* =====================================================================
   SIDEBAR
   ===================================================================== */
#sidebar{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,10,9,.93),rgba(9,8,7,.96));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-right:1px solid var(--line);
  z-index:50;
}
.sb-brand{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line-soft);
}
.sb-brand img{height:42px;width:auto;display:block;}
.sb-brand .fallback{
  font-weight:800;font-style:italic;letter-spacing:.02em;font-size:16px;
  color:var(--primary);line-height:1.15;
}
.sb-brand .fallback span{display:block;font-style:normal;font-weight:800;color:#fff;letter-spacing:.16em;font-size:11px;}

.sb-search{padding:12px 16px 4px;}
.sb-search input{
  width:100%;padding:7px 11px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:9px;color:var(--text);font-size:13px;font-family:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.sb-search input::placeholder{color:var(--text-faint);}
.sb-search input:focus{outline:none;border-color:var(--primary-line);background:rgba(251,196,152,.05);}

.sb-nav{flex:1;overflow-y:auto;padding:6px 10px 16px;}
.sb-group{margin:14px 0 3px;padding:0 10px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;
}
.sb-link{
  display:block;position:relative;
  padding:5px 11px;margin:0;
  border-radius:8px;
  color:var(--text-dim);font-size:13.5px;line-height:1.45;
  text-decoration:none;
  transition:color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.sb-link::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:0;border-radius:2px;background:var(--primary);
  transition:height .22s var(--ease);
}
.sb-link:hover{color:var(--primary);background:var(--primary-dim);transform:translateX(2px);}
.sb-link.active{color:var(--primary);background:var(--primary-dim);font-weight:600;}
.sb-link.active::before{height:60%;}
.sb-link.hidden{display:none;}
.sb-empty{padding:10px 12px;color:var(--text-faint);font-size:13px;}

.sb-footer{
  border-top:1px solid var(--line-soft);
  padding:10px 16px 14px;
  display:flex;flex-direction:column;gap:1px;
}
.sb-footer a{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;border-radius:8px;
  color:var(--text-dim);font-size:13px;
  transition:color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.sb-footer a:hover{color:var(--primary);background:var(--primary-dim);transform:translateX(2px);}
.sb-footer svg{width:15px;height:15px;flex:none;fill:currentColor;}
.sb-credit{
  margin-top:6px;padding:0 10px;
  font-size:11px;color:var(--text-faint);letter-spacing:.02em;
}

/* =====================================================================
   MAIN
   ===================================================================== */
#main{min-width:0;display:flex;flex-direction:column;}

/* Soft scrim behind the reading column: keeps text crisp while the
   background photo stays visible around and through it. */
.main-inner{position:relative;}
.main-inner::before{
  content:"";
  position:absolute;z-index:-1;
  inset:-30px -70px;
  pointer-events:none;
  background:radial-gradient(130% 105% at 50% 45%,
    rgba(8,7,6,.66) 0%,
    rgba(8,7,6,.60) 62%,
    rgba(8,7,6,.28) 88%,
    rgba(8,7,6,0) 100%);
}
.main-inner{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--toc-w);
  gap:56px;
  max-width:1220px;width:100%;
  margin:0 auto;
  padding:60px 52px 40px;
}
#article{min-width:0;}

/* ---------- page transition ---------- */
@keyframes pageIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
#article.enter{animation:pageIn .5s var(--ease) both;}
#article.leaving{opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease;}

/* ---------- header ---------- */
.doc-eyebrow{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);font-weight:700;margin-bottom:12px;
}
.doc-title{
  font-size:clamp(30px,4vw,42px);line-height:1.12;
  font-weight:800;letter-spacing:-.02em;margin:0 0 10px;color:#fff;
}
.doc-sub{color:var(--text-dim);font-size:17px;margin:0 0 12px;}
.doc-rule{height:1px;background:linear-gradient(90deg,var(--primary-line),transparent);margin:26px 0 34px;}

/* ---------- body typography ---------- */
.doc-body h2{
  font-size:23px;font-weight:700;letter-spacing:-.01em;color:#fff;
  margin:46px 0 14px;scroll-margin-top:90px;
}
.doc-body h3{font-size:17px;font-weight:700;color:#fff;margin:30px 0 10px;}
.doc-body p{margin:0 0 16px;color:var(--text);}
.doc-body,.doc-title,.doc-sub,.doc-eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.55);}
.doc-body ul,.doc-body ol{margin:0 0 18px;padding-left:22px;}
.doc-body li{margin:6px 0;}
.doc-body ul li::marker{color:var(--primary);}
.doc-body strong{color:#fff;font-weight:650;}
.doc-body em{color:var(--text);}

.doc-body code{
  font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
  font-size:.86em;
  background:rgba(251,196,152,.09);
  border:1px solid rgba(251,196,152,.16);
  color:var(--primary);
  padding:.12em .42em;border-radius:6px;
}
.doc-body pre{
  background:rgba(0,0,0,.62);
  border:1px solid var(--line);
  border-left:2px solid var(--primary);
  border-radius:12px;
  padding:16px 18px;margin:0 0 20px;
  overflow-x:auto;
}
.doc-body pre code{background:none;border:none;color:var(--text);padding:0;font-size:13.5px;}

.kbd{
  display:inline-block;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;
  padding:2px 7px;border-radius:6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-bottom-width:2px;
  color:#fff;
}

/* ---------- ordered steps ---------- */
ol.steps{list-style:none;counter-reset:step;padding-left:0;margin:0 0 22px;}
ol.steps li{
  counter-increment:step;position:relative;
  padding:2px 0 2px 44px;margin:0 0 14px;
  transition:transform .2s var(--ease);
}
ol.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:700;
  color:var(--primary);
  background:var(--primary-dim);
  border:1px solid var(--primary-line);
  transition:background .2s var(--ease),color .2s var(--ease);
}
ol.steps li:hover::before{background:var(--primary);color:#1a1310;}

/* ---------- callouts ---------- */
.callout{
  position:relative;
  border:1px solid var(--line);
  border-left:2px solid var(--primary);
  background:rgba(12,10,9,.62);
  border-radius:12px;
  padding:15px 18px;margin:0 0 22px;
  color:var(--text-dim);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.callout strong{color:#fff;}
.callout:hover{background:rgba(30,22,17,.66);border-left-color:var(--primary);}
.callout.note{border-left-color:#7aa7ff;}
.callout.tip{border-left-color:var(--primary);}
.callout.warn{border-left-color:#e0a25c;background:rgba(38,26,16,.66);}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:12px;background:rgba(12,10,9,.62);}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
thead th{
  text-align:left;padding:12px 16px;
  background:rgba(255,255,255,.05);
  color:#fff;font-weight:650;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line-soft);color:var(--text-dim);vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .18s var(--ease);}
tbody tr:hover{background:var(--primary-dim);}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 28px;}
.card{
  position:relative;display:block;
  padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(12,10,9,.62);
  color:var(--text-dim);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{
  border-color:var(--primary-line);
  background:rgba(34,25,19,.7);
  transform:translateY(-3px);
  box-shadow:0 12px 30px -18px rgba(251,196,152,.55);
}
.card h3{margin:6px 0 6px;font-size:15.5px;color:#fff;font-weight:650;}
.card:hover h3{color:var(--primary);}
.card p{margin:0;font-size:13.5px;line-height:1.6;}
.card-step{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--primary);opacity:.7;}

/* ---------- pricing tiers ---------- */
.card.tier{text-align:left;}
.card.tier:hover{transform:translateY(-3px);}
.tier-price{
  margin:8px 0 2px!important;
  font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1;
}
.tier-price span{font-size:13px;font-weight:500;color:var(--text-dim);letter-spacing:0;}
.card.tier:hover .tier-price{color:var(--primary);}

/* ---------- FAQ index ---------- */
.faq-index{display:flex;flex-direction:column;gap:8px;margin:0 0 26px;}
.faq-index a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border:1px solid var(--line);border-radius:11px;
  background:rgba(12,10,9,.62);color:var(--text);font-size:14.5px;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease),color .22s var(--ease);
}
.faq-index a::after{content:"→";color:var(--primary);opacity:0;transform:translateX(-6px);transition:all .22s var(--ease);}
.faq-index a:hover{border-color:var(--primary-line);background:rgba(34,25,19,.7);color:var(--primary);transform:translateX(3px);}
.faq-index a:hover::after{opacity:1;transform:none;}

/* ---------- video ---------- */
.video-embed{
  position:relative;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#000;margin:0 0 26px;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.video-embed:hover{border-color:var(--primary-line);box-shadow:0 26px 60px -30px rgba(251,196,152,.35);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.next-hint{color:var(--text-dim);font-size:14.5px;}

/* =====================================================================
   PREV / NEXT
   ===================================================================== */
.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:56px 0 0;}
.pagenav a{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(12,10,9,.62);
  transition:border-color .24s var(--ease),background .24s var(--ease),transform .24s var(--ease);
}
.pagenav a:hover{border-color:var(--primary-line);background:rgba(34,25,19,.7);transform:translateY(-2px);}
.pagenav .pn-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);font-weight:700;}
.pagenav .pn-title{color:var(--text);font-size:15px;font-weight:600;}
.pagenav a:hover .pn-title{color:#fff;}
.pagenav .next{text-align:right;align-items:flex-end;}
.pagenav .spacer{border:1px dashed var(--line-soft);border-radius:var(--radius);opacity:.35;}

/* =====================================================================
   ON THIS PAGE
   ===================================================================== */
#toc{position:sticky;top:60px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto;padding-bottom:30px;}
#toc .toc-head{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;margin-bottom:12px;
}
#toc .toc-head,#toc a{text-shadow:0 1px 3px rgba(0,0,0,.6);}
#toc a{
  display:block;padding:5px 0 5px 13px;
  border-left:1px solid var(--line);
  color:var(--text-dim);font-size:13.5px;line-height:1.5;
  transition:color .2s var(--ease),border-color .2s var(--ease),padding-left .2s var(--ease);
}
#toc a:hover{color:var(--primary);border-left-color:var(--primary-line);padding-left:16px;}
#toc a.active{color:var(--primary);border-left-color:var(--primary);}

/* =====================================================================
   FOOTER
   ===================================================================== */
#footer{
  border-top:1px solid var(--line);
  background:rgba(10,9,8,.8);
  backdrop-filter:blur(10px);
}
.footer-inner{
  max-width:1220px;margin:0 auto;
  padding:22px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--text-faint);
}
.footer-inner .made{transition:color .25s var(--ease);}
.footer-inner .made:hover{color:var(--primary);}
.footer-inner .copy{text-align:right;}

/* =====================================================================
   MUSIC PLAYER
   ===================================================================== */
#player{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;align-items:center;gap:12px;
  padding:9px 16px 9px 12px;
  background:rgba(12,11,10,.9);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.95);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),opacity .4s var(--ease);
  animation:playerIn .6s var(--ease) both .3s;
}
@keyframes playerIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
#player:hover{border-color:var(--primary-line);box-shadow:0 18px 44px -20px rgba(251,196,152,.3);}
#player button{
  background:none;border:none;cursor:pointer;color:var(--text-dim);
  display:grid;place-items:center;padding:4px;border-radius:8px;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
#player button:hover{color:var(--primary);transform:scale(1.12);}
#player button svg{width:14px;height:14px;fill:currentColor;display:block;}
#player .pp svg{width:17px;height:17px;}
#player .pp{color:var(--primary);}
#pl-title{
  font-size:13px;font-weight:650;color:var(--text);
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
#pl-dot{width:5px;height:5px;border-radius:50%;background:var(--text-faint);flex:none;transition:background .3s var(--ease);}
#player.playing #pl-dot{background:var(--primary);animation:pulse 1.9s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(251,196,152,.5);}50%{opacity:.55;box-shadow:0 0 0 5px rgba(251,196,152,0);}}
#pl-vol-wrap{display:flex;align-items:center;gap:8px;}
#pl-vol{
  width:0;opacity:0;pointer-events:none;
  transition:width .3s var(--ease),opacity .3s var(--ease);
  accent-color:var(--primary);height:3px;
}
#pl-vol-wrap:hover #pl-vol,#pl-vol:focus{width:64px;opacity:1;pointer-events:auto;}

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(16px);}
.reveal.in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease);}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .main-inner{grid-template-columns:minmax(0,1fr);gap:0;padding:52px 40px 36px;}
  #toc{display:none;}
}
@media (max-width:900px){
  #topbar{display:flex;}
  #layout{grid-template-columns:minmax(0,1fr);}
  #sidebar{
    position:fixed;top:0;left:0;width:min(320px,84vw);
    transform:translateX(-102%);
    transition:transform .32s var(--ease);
    box-shadow:0 0 60px rgba(0,0,0,.7);
  }
  #sidebar.open{transform:none;}
  #scrim{
    position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  #scrim.show{opacity:1;pointer-events:auto;}
  .main-inner{padding:34px 22px 30px;}
  .footer-inner{padding:20px 22px;flex-direction:column;align-items:flex-start;}
  .footer-inner .copy{text-align:left;}
  .pagenav{grid-template-columns:1fr;}
  #player{left:14px;right:14px;bottom:14px;justify-content:center;}
  #pl-title{max-width:none;}
}

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