/* University harmony v1 — full width, companion-grade chrome */
:root{
  --cu-gold:#d4b45a;
  --cu-gold-soft:rgba(212,180,90,.18);
  --cu-green:#1e7d5e;
  --cu-green-deep:#0f3d2e;
  --cu-ink:#e8efe9;
  --cu-muted:rgba(232,239,233,.72);
  --cu-card:rgba(18,28,24,.94);
  --cu-line:rgba(184,166,135,.38);
  --cu-max:none;
}
html[data-theme=light]{
  --cu-ink:#1a2420;
  --cu-muted:rgba(26,36,32,.72);
  --cu-card:#fffef8;
  --cu-line:rgba(30,125,94,.22);
}

html,body.cu-page{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--cu-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(30,125,94,.18), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(212,180,90,.08), transparent 50%),
    #0b1210;
}
html[data-theme=light] body.cu-page{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(30,125,94,.08), transparent 55%),
    #f6f3ea;
}

/* Top utility strip — companion-like */
.cu-topstrip{
  width:100%;
  box-sizing:border-box;
  padding:.35rem clamp(.75rem,2.5vw,1.25rem);
  font-size:.72rem;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#0a1612,#10241c 50%,#0a1612);
  border-bottom:1px solid var(--cu-line);
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center;justify-content:space-between;
}
.cu-topstrip a{color:var(--cu-gold);text-decoration:none;font-weight:600}
.cu-topstrip a:hover{text-decoration:underline}
.cu-topstrip .cu-top-links{display:flex;flex-wrap:wrap;gap:.5rem .85rem}

/* Banner */
.cu-banner{
  width:100%;
  box-sizing:border-box;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;
  padding:.7rem clamp(.75rem,2.5vw,1.5rem);
  background:linear-gradient(180deg,rgba(16,36,28,.98),rgba(12,22,18,.96));
  border-bottom:1px solid var(--cu-line);
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(10px);
}
html[data-theme=light] .cu-banner{
  background:linear-gradient(180deg,#fffef9,#f3efe4);
}
.cu-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit}
.cu-brand small{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.cu-brand strong{display:block;font-size:1.15rem;font-weight:800;color:var(--cu-gold);letter-spacing:.01em}
.cu-banner-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.cu-main-link,.cu-theme-pill{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;
  border:1px solid var(--cu-line);background:rgba(255,255,255,.04);color:inherit;text-decoration:none;cursor:pointer;
}
.cu-main-link:hover,.cu-theme-pill:hover{border-color:var(--cu-gold);color:var(--cu-gold)}

/* Full-bleed wrap */
.cu-wrap,main.cu-wrap,.cu-stage{
  width:100%;
  max-width:var(--cu-max);
  box-sizing:border-box;
  margin:0 auto;
  padding:0.85rem clamp(.75rem,2.5vw,1.75rem) 2.5rem;
}

/* Pills — larger, richer */
nav.cu-pills,.cu-pills{
  display:flex;flex-wrap:wrap;gap:.4rem;
  width:100%;
  box-sizing:border-box;
  padding:.55rem clamp(.75rem,2.5vw,1.25rem);
  margin:0 0 .85rem;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(22,40,34,.95),rgba(14,24,20,.92));
  border:1px solid var(--cu-line);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
html[data-theme=light] nav.cu-pills,html[data-theme=light] .cu-pills{
  background:linear-gradient(180deg,#fffef9,#f0ebe0);
}
.cu-pills a{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem 1rem;
  border-radius:999px;
  font-size:.88rem;font-weight:800;
  text-decoration:none;color:var(--cu-ink);
  border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .12s;
}
.cu-pills a:hover{border-color:var(--cu-line);transform:translateY(-1px)}
.cu-pills a.here{
  background:var(--cu-green);
  color:#fff !important;
  border-color:var(--cu-green);
  box-shadow:0 0 0 1px rgba(30,125,94,.35),0 6px 16px rgba(30,125,94,.25);
}

/* Headings */
h1,.cu-h1{font-size:clamp(1.45rem,3.2vw,2rem);font-weight:800;color:var(--cu-gold);letter-spacing:-.01em;margin:.35rem 0 .6rem;line-height:1.2}
h2,.cu-h2{font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:800;color:var(--cu-gold);margin:.85rem 0 .45rem}
h3,.cu-h3{font-size:1.05rem;font-weight:800;margin:.6rem 0 .35rem}
.cu-lead{font-size:clamp(.95rem,1.6vw,1.05rem);line-height:1.55;color:var(--cu-muted);max-width:52rem}

/* Cards / grid full width */
.cu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));
  gap:.75rem;
  width:100%;
  margin:.5rem 0 1.1rem;
}
.cu-card{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1rem 1.1rem;
  border-radius:16px;
  border:1px solid var(--cu-line);
  background:var(--cu-card);
  text-decoration:none;color:inherit;
  min-height:6.5rem;
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.cu-card:hover{border-color:var(--cu-gold);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.cu-card strong{font-size:1.05rem;color:var(--cu-gold)}
.cu-card .desc{font-size:.88rem;line-height:1.4;color:var(--cu-muted)}
.cu-badge{display:inline-block;font-size:.68rem;font-weight:800;padding:.18rem .5rem;border-radius:999px;width:max-content;letter-spacing:.04em;text-transform:uppercase}
.cu-badge.open{background:var(--cu-green);color:#fff}
.cu-badge.locked{background:rgba(255,255,255,.08);opacity:.8}

.cu-continue{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;
  width:100%;box-sizing:border-box;
  padding:1rem 1.15rem;margin:.35rem 0 1rem;
  border-radius:16px;border:1px solid var(--cu-line);
  background:linear-gradient(135deg,rgba(30,125,94,.2),rgba(18,28,24,.95));
}
.cu-continue a{font-weight:800;color:var(--cu-gold);font-size:1rem;text-decoration:none}

.cu-foot{
  width:100%;box-sizing:border-box;
  padding:1rem clamp(.75rem,2.5vw,1.5rem) 2rem;
  font-size:.75rem;opacity:.75;text-align:center;
  border-top:1px solid var(--cu-line);
}

/* Phase / junior curriculum readability boost */
.cu-stage,#cu-stage,.junior-lesson{width:100%;max-width:none}
#cu-stage h1,#cu-stage h2,.junior-lesson h2{font-size:clamp(1.2rem,2.5vw,1.55rem)!important;color:var(--cu-gold)!important}

@media (min-width:900px){
  .cu-pills a{font-size:.92rem;padding:.55rem 1.15rem}
}