:root{
  --bg:#fffaf2;
  --ink:#2f2a23;
  --ink-muted:#4f463c;
  --accent:#b7a37f;
  --accent-strong:#9c8660;
  --radius:16px;
  --shadow:0 3px 12px rgba(0,0,0,.06);
  --gridline: rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body{
  font-family:"Lora",serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{ font-family:"Cinzel",serif; letter-spacing:.03em; }
.wrapper{ max-width:1100px; margin:auto; padding:40px 20px 80px; }
header{ text-align:center; margin-bottom:28px; position:relative; }
header h1{ font-size:clamp(28px,4vw,46px); color:var(--accent-strong); margin:0 0 8px; }
header p{ font-style:italic; color:#6a5f4f; margin:0; }
/* Section grid */
.grid{ display:grid; gap:24px; margin-top:24px; }
@media(min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:#fff;
  border:1px solid var(--gridline);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card h2{
  margin:0;
  color:var(--accent-strong);
  border-left:4px solid var(--accent-strong);
  padding-left:.6rem;
  font-size:1.3rem;
}
/* Tooltip base */
.term{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.1rem .35rem;
  border-radius:10px;
  cursor:help;
  transition: background .2s ease, color .2s ease;
}
.term:hover{ background:rgba(183,163,127,.12); }
.term[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left:0; right:auto;
  top:calc(100% + 8px);
  transform: translateX(-10px);
  min-width:220px;
  max-width:360px;
  background:#222;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  font-size:.9rem;
  line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:10;
  white-space:normal;
}
.term[data-tip]:hover::after{ opacity:1; transform: translateX(0); }
/* Clickable example accordion */
.details{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.details summary{
  list-style:none;
  font-weight:600;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.details summary::-webkit-details-marker{ display:none; }
.details summary::before{
  content:"+";
  display:inline-grid;
  place-items:center;
  width:22px; height:22px;
  border-radius:6px;
  background: rgba(183,163,127,.15);
  color: var(--accent-strong);
  font-weight:700;
  flex-shrink:0;
}
.details[open] summary::before{ content:"–"; }
.details .panel{
  border-top:1px solid rgba(0,0,0,.06);
  padding:14px 14px 16px;
  color: var(--ink-muted);
}
/* Mini live demo block */
.demo{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px;
  background:#fff;
  display:grid;
  gap:10px;
}
.demo .hero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding: clamp(10px, 3vw, 40px);
  text-align:center;
  background:linear-gradient(180deg,#ffffff, #f8f2e6);
}
.demo .hero h1{
  margin:.2rem 0 .6rem;
  font-size: clamp(20px, 3.2vw, 32px);
}
.demo .grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
.demo .card{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:none;
  padding:12px;
  border-radius:12px;
}
.demo .cta{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  background: var(--accent-strong);
  color:#fff; text-decoration:none; font-weight:600;
}
.small{ font-size:.92rem; color:var(--ink-muted); }
/* Footer prompt */
footer{
  background:linear-gradient(180deg,#f9f6f0 0%,#f1ece3 100%);
  border-top:1px solid var(--gridline);
  padding:48px 20px;
  text-align:left;
}
footer .fhead{ color:var(--accent-strong); font-size: 25px; }
footer p{ max-width:77%; margin:0 auto; color:var(--ink-muted); }

/* Mode-aware text swaps */
.swap[data-client]::before{ content: attr(data-client) }
[data-mode="curriculum"] .swap[data-curr]::before{ content: attr(data-curr) }
.label{
  display:inline-block; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  color:var(--accent-strong); margin-bottom:6px;
}
.label.logo{background-image:url('../images/burst4-small.png');background-repeat:no-repeat;background-position:35px 6px}
a:link,
a:visited,
a:hover,
a:active {
  color: inherit; /* Removes default link color and inherits color from parent element */
  text-decoration: none; /* Removes the underline */
}