/* ========= Pastel Formal Theme (MERGED layout + look) ========= */

/* Design tokens */
:root{
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f1f5fb;

  --ink: #172032;
  --muted: #5b6473;
  --line: #d8e1f0;

  --p1: #93c5fd; /* powder blue */
  --p2: #c4b5fd; /* soft lavender */
  --p3: #a7f3d0; /* mint */

  --radius: 16px;
  --shadow-1: 0 8px 24px rgba(15,23,42,.08);
  --shadow-2: 0 16px 48px rgba(15,23,42,.10);

  --gap: 12px;
  --rot: 0deg; /* animated in site.js */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 650px at 12% 8%, #eef5ff 0%, transparent 62%),
    radial-gradient(1000px 700px at 88% 12%, #f7edff 0%, transparent 60%),
    linear-gradient(#f7f9fc, #f7f9fc);
  background-attachment: fixed;
  overflow-x:hidden;
}

/* Container */
.wrap{width:min(1100px,92%);margin-inline:auto}

/* Header / Nav */
.header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.logo{
  width:40px;height:40px;border-radius:12px;
  background:conic-gradient(from var(--rot), var(--p1), var(--p2), var(--p3), var(--p2), var(--p1));
  display:grid;place-items:center;border:1px solid #e6ecfb;box-shadow:var(--shadow-1)
}
.title{font-weight:700}
.links{display:flex;gap:1rem}
.links a{color:var(--ink);text-decoration:none;font-weight:700;opacity:.92;border-radius:10px;padding:8px 10px}
.links a:hover{background:var(--surface-2)}

/* Hero */
.hero{position:relative;min-height:78vh;display:grid;place-items:center}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.04;letter-spacing:-.01em}
.lead{color:var(--muted);margin-top:10px}
.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.iconbtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);transition:transform .08s,box-shadow .2s}
.iconbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.portrait{width:340px;max-width:100%;aspect-ratio:3/4;border:none;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #eaeef8;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover}

/* Sections */
.section{padding:44px 0}
.section h2{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:12px}

/* Courses rail (compatible with your JS) */
.rail{position:relative;overflow-x:auto;overflow-y:hidden;border-radius:16px;border:1px solid var(--line);background:var(--surface);scrollbar-width:thin;scrollbar-color:#bcd0ff transparent;cursor:grab}
.rail:active{cursor:grabbing}
.track{display:flex;gap:18px;align-items:center;padding:16px;min-width:max-content;animation:move 64s linear infinite}
@keyframes move{to{transform:translateX(-50%)}}
.rail.paused .track{animation-play-state:paused}
.chip{
  position:relative;padding:.9rem 1.15rem;border-radius:14px;
  border:1px solid #e6ecfb;background:#fff;font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.04);white-space:nowrap;
  transition:transform .18s,box-shadow .25s,border-color .2s,background .2s,opacity .2s,filter .2s
}
.rail.paused .chip{opacity:.65;filter:saturate(.9)}
.rail.paused .chip.active{opacity:1;filter:none}
.chip.active{
  transform:translateZ(0) scale(1.08);
  background:linear-gradient(180deg,#fff,#f8faff);
  border-color:#dfe7fb;box-shadow:0 18px 40px rgba(147,197,253,.25)
}

/* Course panel */
.course-info{position:relative;margin-top:16px}
.course-panel{
  display:none;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:var(--shadow-1);padding:16px;animation:fadeIn .22s ease
}
.course-panel.show{display:grid}
.course-title{font-weight:800;font-size:1.15rem;margin-bottom:6px}
.course-desc{color:#465064;font-size:.98rem;line-height:1.45}
.course-bullets{margin-top:8px;color:#5d6880;font-size:.95rem}
.course-bullets li{margin-left:18px;margin-top:4px}
.preview{position:relative;width:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#fafcff,#f2f6ff)}
#courseCanvas{width:100%;height:260px;display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Desmos Gallery + Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{
  border-radius:16px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-1);transform-style:preserve-3d;transition:transform .15s,box-shadow .2s;overflow:hidden
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card img{width:100%;display:block;border-bottom:1px solid var(--line)}
.card a{display:block;padding:14px 16px;color:var(--ink);text-decoration:none;font-weight:700}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.on{opacity:1;transform:none}

/* Notebook */
.notebook{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.note{border-radius:16px;border:1px solid var(--line);background:var(--surface);padding:16px;box-shadow:var(--shadow-1)}
.note a{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);text-decoration:none;font-weight:700}
.badge{
  font-size:.85rem;padding:.28rem .6rem;border-radius:999px;
  background:linear-gradient(135deg,var(--p1),var(--p2));color:#0a0c18;border:1px solid #e6ecfb
}

/* Gallery wrappers (links themselves are cards) */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}

/* Cursor helper */
.cursor{position:fixed;left:0;top:0;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,0,0,.08),rgba(0,0,0,0));mix-blend-mode:multiply;pointer-events:none;z-index:99;transform:translate(-50%,-50%)}

/* Footer */
footer .nav{padding:8px 0 !important}
footer{color:#6b7280}

/* Responsive */
@media (max-width:980px){.hgrid{grid-template-columns:1fr}.portrait{width:60vw}}
@media (max-width:480px){.cursor{display:none}}