/* ===================================================================
   UNCARVED — shared design system (theme-aware)
   Palette: river-blues + reed-greens; gold is reserved for the
   capstone/certificate surfaces (hardcoded there, not in these vars).
   A contemplative course UI with a DARK default and a LIGHT theme.
   Theming is driven by `html[data-theme="light"|"dark"]` (set by theme.js).
   Everything below reads from semantic CSS variables so both palettes
   stay in sync. Used by index.html, explore.html, lessons.html, flashcards.html.
   (The immersive module-*.html scenes are self-contained dark "cinema".)
   =================================================================== */

:root{
  /* type */
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --r-sm:10px; --r-lg:20px; --maxw:980px;

  /* ---- DARK palette (default) ---- */
  --ink:#eaecf3; --muted:#9aa3b5; --faint:#6b7488; --faintest:#454d61; --lead-ink:#d6dae6;
  --bg:#0b0e16; --bg2:#0e121c; --bg-grad1:#1a2236; --bg-grad2:#1d1a2e;
  --panel:rgba(20,25,37,.74); --panel-solid:#141925;
  --edge:rgba(255,255,255,.08); --edge-hi:rgba(255,255,255,.18);
  --hover:rgba(255,255,255,.06); --track:rgba(255,255,255,.10);
  --nav-bg1:rgba(11,14,22,.92); --nav-bg2:rgba(11,14,22,.62);

  /* brand accents — used as FILLS (button/bar); same hue in both themes */
  --gold:#a8c686; --cyan:#8ab6dc; --rose:#d98a7e; --amber:#d9b06e;
  /* accent INKS — used as TEXT/borders; darkened in light theme for contrast */
  --cyan-ink:#8ab6dc; --gold-ink:#a8c686; --rose-ink:#d98a7e; --amber-ink:#d9b06e;
  /* accent tints — pill/callout/nav backgrounds + lines */
  --cyan-bg:rgba(138,182,220,.08); --cyan-line:rgba(138,182,220,.35); --cyan-soft:rgba(138,182,220,.12);
  --gold-bg:rgba(168,198,134,.08); --gold-line:rgba(168,198,134,.35);
  --rose-bg:rgba(217,138,126,.08); --rose-line:rgba(217,138,126,.35);
  --callout-cyan:rgba(138,182,220,.06); --callout-gold:rgba(168,198,134,.06); --callout-rose:rgba(217,138,126,.06);
  /* stronger accent lines + soft fills — for the hi-fi Journey chrome (buttons, tiers, seals) */
  --cyan-line-2:rgba(138,182,220,.5); --gold-line-2:rgba(168,198,134,.65); --rose-line-2:rgba(217,138,126,.5);
  --cyan-fill:rgba(138,182,220,.10); --gold-fill:rgba(168,198,134,.10); --rose-fill:rgba(217,138,126,.08);
  --gold-shadow:0 8px 30px rgba(168,198,134,.22); --edge-card:rgba(255,255,255,.12); --surface:rgba(255,255,255,.025);

  --fc-front:linear-gradient(160deg,#1820320a,#1a2336);
  --fc-back:linear-gradient(160deg,#15211e,#13201d);
  --shadow:0 24px 60px rgba(0,0,0,.5);
}

/* ---- LIGHT palette ---- */
html[data-theme="light"]{
  --ink:#1c2230; --muted:#54607a; --faint:#5d6679; --faintest:#7c8498; --lead-ink:#2a3242;
  --bg:#f4f1ea; --bg2:#efece4; --bg-grad1:#e7eef3; --bg-grad2:#f1e9ef;
  --panel:rgba(255,255,255,.72); --panel-solid:#ffffff;
  --edge:rgba(22,30,52,.12); --edge-hi:rgba(22,30,52,.26);
  --hover:rgba(22,30,52,.05); --track:rgba(22,30,52,.10);
  --nav-bg1:rgba(248,246,240,.92); --nav-bg2:rgba(248,246,240,.66);

  --cyan-ink:#1d5f8f; --gold-ink:#4f6b2a; --rose-ink:#a8472f; --amber-ink:#6b6b2a;
  --cyan-bg:rgba(29,95,143,.10); --cyan-line:rgba(29,95,143,.30); --cyan-soft:rgba(29,95,143,.14);
  --gold-bg:rgba(90,120,50,.10); --gold-line:rgba(90,120,50,.32);
  --rose-bg:rgba(181,80,63,.10); --rose-line:rgba(181,80,63,.30);
  --callout-cyan:rgba(29,95,143,.08); --callout-gold:rgba(90,120,50,.09); --callout-rose:rgba(181,80,63,.08);
  --cyan-line-2:rgba(29,95,143,.5); --gold-line-2:rgba(90,120,50,.55); --rose-line-2:rgba(181,80,63,.5);
  --cyan-fill:rgba(29,95,143,.12); --gold-fill:rgba(90,120,50,.12); --rose-fill:rgba(181,80,63,.10);
  --gold-shadow:0 8px 30px rgba(90,120,50,.20); --edge-card:rgba(22,30,52,.14); --surface:rgba(22,30,52,.03);

  --fc-front:linear-gradient(160deg,#ffffff,#eef2f6);
  --fc-back:linear-gradient(160deg,#eff7f3,#e4f0eb);
  --shadow:0 18px 50px rgba(40,50,80,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(1200px 680px at 50% -8%, var(--bg-grad1) 0%, transparent 62%),
    radial-gradient(900px 520px at 84% 8%, var(--bg-grad2) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
a{color:var(--cyan-ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:34px 0}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:14px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg,var(--nav-bg1),var(--nav-bg2));
  border-bottom:1px solid var(--edge);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:26px; height:26px; flex:none}
.brand small{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); font-weight:500}
.navlinks{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.navlinks a{
  color:var(--muted); font-size:13.5px; font-weight:500; padding:8px 13px; border-radius:9px;
}
.navlinks a:hover{color:var(--ink); background:var(--hover); text-decoration:none}
.navlinks a.active{color:var(--ink); background:var(--cyan-soft)}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-grid; place-items:center; width:36px; height:36px; flex:none; padding:0;
  border-radius:9px; border:1px solid var(--edge); background:transparent; color:var(--muted);
  cursor:pointer; font-size:15px; line-height:1; transition:.18s ease}
.theme-toggle:hover{color:var(--ink); border-color:var(--edge-hi); background:var(--hover)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan-ink); outline-offset:2px}

/* ---------- type ---------- */
.kicker{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint)}
.display{font-family:var(--serif); font-weight:500; font-size:clamp(28px,5vw,46px); line-height:1.12; letter-spacing:.01em; margin:.2em 0}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.2}
h2.head{font-size:clamp(22px,3.4vw,24px); margin:0 0 4px}
.lead{font-family:var(--serif); font-size:clamp(17px,2.6vw,19px); color:var(--lead-ink); line-height:1.55}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.serif{font-family:var(--serif)}
.center{text-align:center}

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:22px; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:.2s ease;
}
.card.hover:hover{border-color:var(--edge-hi); transform:translateY(-2px); box-shadow:var(--shadow)}
.card.link{cursor:pointer; display:block; color:var(--ink)}
.card.link:hover{text-decoration:none}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--edge); color:var(--muted); white-space:nowrap}
.pill.cyan{color:var(--cyan-ink); border-color:var(--cyan-line); background:var(--cyan-bg)}
.pill.gold{color:var(--gold-ink); border-color:var(--gold-line); background:var(--gold-bg)}
.pill.rose{color:var(--rose-ink); border-color:var(--rose-line); background:var(--rose-bg)}
.badge-far{color:var(--rose-ink)} .badge-near{color:var(--amber-ink)} .badge-center{color:var(--cyan-ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--sans);
  font-size:14px; font-weight:600; padding:12px 22px; border-radius:11px; border:1px solid transparent; transition:.18s ease}
.btn.primary{background:var(--cyan); color:#0a1622}
.btn.primary:hover{filter:brightness(1.08); transform:translateY(-1px); text-decoration:none}
.btn.gold{background:var(--gold); color:#16220c}
.btn.gold:hover{filter:brightness(1.07); transform:translateY(-1px); text-decoration:none}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--edge)}
.btn.ghost:hover{color:var(--ink); border-color:var(--edge-hi); text-decoration:none}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}

/* ---------- progress ---------- */
.bar{height:7px; border-radius:5px; background:var(--track); overflow:hidden}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); width:0; transition:width .6s ease}
.dots{display:flex; gap:7px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--track); transition:.4s}
.dot.on{background:var(--cyan); box-shadow:0 0 9px var(--cyan)}

/* ---------- part headers ---------- */
.part-tab{display:flex; align-items:baseline; gap:12px; margin:30px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--edge)}
.part-tab .num{font-family:var(--serif); font-size:30px; color:var(--faintest)}
.part-tab .t{font-family:var(--serif); font-size:21px}
.part-tab .s{color:var(--faint); font-size:13px}

/* ---------- lesson list rows ---------- */
.lrow{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--edge); border-radius:var(--r);
  background:var(--panel); cursor:pointer; transition:.18s ease; color:var(--ink); margin-bottom:10px}
.lrow:hover{border-color:var(--edge-hi); transform:translateX(3px); text-decoration:none}
.lrow .chk{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--faint); flex:none; display:grid; place-items:center; font-size:13px; color:var(--cyan-ink)}
.lrow.done .chk{border-color:var(--cyan-line); background:var(--cyan-bg); color:var(--cyan-ink)}
.lrow .ix{font-family:var(--serif); color:var(--faint); width:26px; text-align:center}
.lrow .ti{flex:1; min-width:0} .lrow .ti b{font-weight:600; font-size:15.5px} .lrow .ti div{font-size:12.5px; color:var(--faint)}

/* ---------- callout (lesson body) ---------- */
.callout{border-left:3px solid var(--cyan-ink); background:var(--callout-cyan); padding:14px 18px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:16px 0}
.callout.gold{border-color:var(--gold-ink); background:var(--callout-gold)}
.callout.rose{border-color:var(--rose-ink); background:var(--callout-rose)}
.callout .lab{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.ditches{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0}
@media(max-width:620px){.ditches{grid-template-columns:1fr}}
.ditch{border:1px solid var(--edge); border-radius:var(--r-sm); padding:13px 15px}
.ditch .h{font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:5px}

/* ---------- flashcard ---------- */
.fc-scene{perspective:1600px; max-width:560px; margin:0 auto}
.fc{position:relative; width:100%; aspect-ratio:3/2; cursor:pointer; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.fc.flip{transform:rotateY(180deg)}
.fc-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r-lg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:30px; border:1px solid var(--edge); box-shadow:var(--shadow)}
.fc-front{background:var(--fc-front)}
.fc-back{background:var(--fc-back); transform:rotateY(180deg)}
.fc-face .cat{position:absolute; top:16px; left:0; right:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.fc-front .q{font-family:var(--serif); font-size:clamp(21px,4vw,26px); line-height:1.3; color:var(--ink)}
.fc-back .a{font-size:16px; line-height:1.55; color:var(--lead-ink)} .fc-back .a b{color:var(--ink)}
.fc-hint{position:absolute; bottom:14px; left:0; right:0; font-size:11px; color:var(--faintest); letter-spacing:.1em}

/* ---------- misc ---------- */
.divider{height:1px; background:var(--edge); margin:26px 0; border:0}
.tag-src{font-size:12px; color:var(--faint); font-style:italic}
footer.site{border-top:1px solid var(--edge); margin-top:40px; padding:26px 0; color:var(--faint); font-size:12.5px; text-align:center; line-height:1.7}
.hidden{display:none!important}
.fade-in{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)}to{opacity:1}}
.eyebrow-quote{font-family:var(--serif); font-style:italic; color:var(--lead-ink); font-size:17px; line-height:1.6}

/* ---------- mobile ---------- */
@media(max-width:620px){
  .wrap{padding:0 15px}
  .section{padding:26px 0}
  body{background-attachment:scroll}
  .nav .wrap{min-height:54px}
  .navlinks a{padding:8px 9px; font-size:12.5px}
  .brand small{display:none}
  .theme-toggle{width:34px; height:34px}
}
@media(prefers-reduced-motion:reduce){
  body, .card, .lrow, .btn, .dot, .bar > i{transition:none}
  .fade-in{animation:none}
}