/* ============================ Canon University — homepage prototype ============================
     Palette sampled from the real crest: royal purple #300070 · magenta-purple #601090 · gold #C6A94E/#E2C877.
     Token-based theming: royal-purple is the native world, cream the light counterpart. Both cared for. */

  :root {
    --crest: url("canon-crest.png");
    /* light (cream) theme — default */
    --ground: #F4F0E6;
    --raised: #FCF9F2;
    --ink: #2A1A52;
    --ink-strong: #250A4E;
    --muted: #655C7D;
    --muted-solid: #655C7D;
    --line: rgba(48, 10, 100, 0.14);
    --gold: #C6A94E;
    --gold-strong: #8A6A1E;
    --gold-bright: #D9BC6A;
    --magenta: #8E2A9C;
    --band: #300070;
    --band-raised: #46199A;
    --band-ink: #F4F0E6;
    --band-muted: #C7B7E4;
    --band-line: rgba(217, 188, 106, 0.26);
    --shadow: 0 1px 2px rgba(37,10,78,.06), 0 12px 32px -18px rgba(37,10,78,.34);
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #1B0940; --raised: #2A1157; --ink: #EEE7D8; --ink-strong: #FBF7EC;
      --muted: #B6A7D6; --muted-solid: #B6A7D6; --line: rgba(217, 188, 106, 0.16);
      --gold: #D9BC6A; --gold-strong: #EAD592; --gold-bright: #EFDCA0; --magenta: #C060C9;
      --band: #150730; --band-raised: #2A1157; --band-ink: #F4F0E6; --band-muted: #C7B7E4;
      --band-line: rgba(217, 188, 106, 0.22);
      --shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 44px -22px rgba(0,0,0,.72);
    }
  }
  :root[data-theme="light"] {
    --ground:#F4F0E6; --raised:#FCF9F2; --ink:#2A1A52; --ink-strong:#250A4E;
    --muted:#655C7D; --muted-solid:#655C7D; --line:rgba(48,10,100,.14);
    --gold:#C6A94E; --gold-strong:#8A6A1E; --gold-bright:#D9BC6A; --magenta:#8E2A9C;
    --band:#300070; --band-raised:#46199A; --band-ink:#F4F0E6; --band-muted:#C7B7E4;
    --band-line:rgba(217,188,106,.26); --shadow:0 1px 2px rgba(37,10,78,.06), 0 12px 32px -18px rgba(37,10,78,.34);
  }
  :root[data-theme="dark"] {
    --ground:#1B0940; --raised:#2A1157; --ink:#EEE7D8; --ink-strong:#FBF7EC;
    --muted:#B6A7D6; --muted-solid:#B6A7D6; --line:rgba(217,188,106,.16);
    --gold:#D9BC6A; --gold-strong:#EAD592; --gold-bright:#EFDCA0; --magenta:#C060C9;
    --band:#150730; --band-raised:#2A1157; --band-ink:#F4F0E6; --band-muted:#C7B7E4;
    --band-line:rgba(217,188,106,.22); --shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 44px -22px rgba(0,0,0,.72);
  }

  * { box-sizing: border-box; }
  body { margin: 0; }
  .cu { background: var(--ground); color: var(--ink); font-family: var(--sans);
    font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  .cu :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
  .wrap { width: min(1140px, 92vw); margin-inline: auto; }
  h1,h2,h3 { font-family: var(--serif); font-weight: 400; color: var(--ink-strong); text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  .eyebrow { font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold-strong); font-weight:600; margin:0 0 .9rem; }
  .lede { color: var(--muted-solid); font-size: 1.12rem; line-height: 1.7; max-width: 60ch; }

  .crest { background-image:var(--crest); background-size:contain; background-position:center; background-repeat:no-repeat; display:inline-block; }

  .btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.95rem;
    font-weight:600; padding:.85rem 1.5rem; border-radius:2px; text-decoration:none; cursor:pointer;
    border:1px solid transparent; transition:transform .15s ease, background .2s ease, border-color .2s ease; }
  .btn-gold { background:var(--gold-bright); color:#2A0A52; }
  .btn-gold:hover { transform:translateY(-2px); background:#E7CE86; }
  .btn-ghost { background:transparent; color:var(--band-ink); border-color:var(--band-line); }
  .btn-ghost:hover { border-color:var(--gold); color:var(--gold-bright); }
  .btn-ink { background:transparent; color:var(--ink-strong); border-color:var(--line); }
  .btn-ink:hover { border-color:var(--gold); color:var(--gold-strong); transform:translateY(-2px); }

  .nav { position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--band) 93%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--band-line); color:var(--band-ink); }
  .nav-in { display:flex; align-items:center; gap:1.4rem; padding:.6rem 0; }
  .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--band-ink); margin-right:auto; }
  .brand .crest { width:44px; height:48px; flex:0 0 auto; }
  .brand b { font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; font-weight:400; }
  .brand small { display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.26em;
    text-transform:uppercase; color:var(--gold-bright); margin-top:1px; }
  .nav-links { display:flex; gap:1.5rem; align-items:center; }
  .nav-links a { text-decoration:none; font-size:.9rem; color:var(--band-ink); opacity:.85; }
  .nav-links a:hover { opacity:1; color:var(--gold-bright); }
  .nav-actions { display:flex; align-items:center; gap:.7rem; }
  .toggle { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:2px;
    background:transparent; border:1px solid var(--band-line); color:var(--band-ink); cursor:pointer; }
  .toggle:hover { border-color:var(--gold); color:var(--gold-bright); }
  .toggle svg { width:18px; height:18px; }

  .hero { position:relative; background-color:var(--band); color:var(--band-ink); overflow:hidden;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
  .hero-bg { position:absolute; inset:0; z-index:0; }
  .hero-slide { position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:0; transition:opacity 1.6s ease; }
  .hero-slide.active { opacity:1; }
  .hero-slide.g1 { background-image:url("gradgen1.jpg"); }
  .hero-slide.g2 { background-image:url("gradgen2.jpg"); }
  .hero-slide.g3 { background-image:url("gradgen3.jpg"); }
  .hero-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(90deg, rgba(18,5,46,.96) 0%, rgba(26,9,64,.9) 32%, rgba(45,12,96,.72) 64%, rgba(48,10,100,.5) 100%),
      radial-gradient(90% 80% at 92% 4%, rgba(217,188,106,.14), transparent 55%); }
  .hero-seal { display:none; }
  .hero-in { position:relative; z-index:2; max-width:41rem; }
  .hero h1 { font-size:clamp(2.6rem, 6vw, 4.35rem); line-height:1.03; letter-spacing:-.015em; color:var(--band-ink); }
  .scripture { font-family:var(--serif); font-style:italic; color:var(--gold-bright);
    font-size:1.12rem; line-height:1.6; margin:1.4rem 0 0; padding-left:1.1rem; border-left:2px solid var(--gold); max-width:34ch; }
  .scripture cite { display:block; font-style:normal; font-family:var(--sans); font-size:.72rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--band-muted); margin-top:.5rem; }
  .hero p.sub { color:var(--band-muted); font-size:1.14rem; line-height:1.7; margin:1.6rem 0 0; max-width:46ch; }
  .hero .cta-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

  .pathways { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3.2rem; position:relative; }
  .pcard { background:var(--band-raised); border:1px solid var(--band-line); border-radius:4px;
    padding:1.4rem 1.3rem; text-decoration:none; color:var(--band-ink); display:flex; flex-direction:column;
    gap:.5rem; transition:transform .18s ease, border-color .2s ease; }
  .pcard:hover { transform:translateY(-4px); border-color:var(--gold); }
  .pcard .k { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-bright); }
  .pcard h3 { color:var(--band-ink); font-size:1.32rem; }
  .pcard p { color:var(--band-muted); font-size:.92rem; line-height:1.55; }
  .pcard .go { margin-top:auto; padding-top:.6rem; color:var(--gold-bright); font-size:.85rem; font-weight:600; }

  .trust { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--raised); }
  .trust-in { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2rem; padding:1.1rem 0; }
  .trust span { font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-solid); font-weight:600; }
  .trust b { color:var(--gold-strong); }
  .trust .dot { color:var(--gold); opacity:.6; }

  section.blk { padding: clamp(3.5rem, 7vw, 6rem) 0; }
  .head { max-width:44rem; margin-bottom:2.6rem; }
  .head h2 { font-size:clamp(1.85rem, 3.6vw, 2.7rem); line-height:1.1; }
  .head p { margin-top:1rem; }

  .ladder { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
  .step { position:relative; background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:1.6rem 1.4rem; }
  .step .num { font-family:var(--serif); font-size:2.4rem; color:var(--gold); line-height:1; }
  .step h3 { font-size:1.28rem; margin:.5rem 0 .5rem; }
  .step p { color:var(--muted-solid); font-size:.95rem; }
  .step::after { content:"→"; position:absolute; right:-.95rem; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.2rem; z-index:2; }
  .ladder .step:last-child::after { display:none; }
  .ladder-note { margin-top:1.4rem; font-size:.9rem; color:var(--muted-solid); }
  .ladder-note b { color:var(--gold-strong); }

  .grid6 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .prog { background:var(--ground); padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.35rem; transition:background .2s ease; }
  .prog:hover { background:var(--raised); }
  .prog .lvl { font-family:var(--serif); font-size:1.3rem; color:var(--ink-strong); }
  .prog .fc { font-size:.9rem; color:var(--muted-solid); }
  .prog .tag { margin-top:.4rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-strong); font-weight:600; }

  .split { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
  .player { position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; border:1px solid var(--band-line);
    background:linear-gradient(160deg,#2E1257,#150730); box-shadow:var(--shadow); color:#F4F0E6; }
  .player .frame { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem; }
  .player .topline { position:absolute; top:1rem; left:1.1rem; right:1.1rem; display:flex; justify-content:space-between;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); }
  .player .play { position:absolute; top:calc(50% - 60px); left:50%; transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%; background:rgba(217,188,106,.16); border:1px solid var(--gold); display:grid; place-items:center; }
  .player .play::after { content:""; border-left:16px solid var(--gold-bright); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
  .quizcard { background:rgba(21,7,48,.74); border:1px solid var(--gold); border-radius:6px; padding:.9rem 1rem; backdrop-filter:blur(3px); }
  .quizcard .q { font-family:var(--serif); font-size:1rem; margin-bottom:.6rem; color:#FBF7EC; }
  .quizcard .opt { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:#D6CBE8; padding:.3rem 0; }
  .quizcard .opt i { width:15px; height:15px; border:1px solid var(--gold); border-radius:50%; display:inline-block; flex:0 0 auto; }
  .quizcard .opt.correct i { background:var(--gold); box-shadow:inset 0 0 0 3px rgba(21,7,48,.74); }
  .quizcard .opt.correct { color:#F4F0E6; }
  .scrub { position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,.14); }
  .scrub::before { content:""; position:absolute; left:0; top:0; bottom:0; width:38%; background:var(--gold); }
  .scrub::after { content:""; position:absolute; left:38%; top:-3px; width:10px; height:10px; border-radius:50%; background:var(--gold-bright); }
  .featlist { list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.9rem; }
  .featlist li { display:flex; gap:.7rem; font-size:.98rem; color:var(--ink); }
  .featlist svg { width:20px; height:20px; flex:0 0 auto; color:var(--gold-strong); margin-top:2px; }

  .faculty { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
  .fac { background:var(--raised); border:1px solid var(--line); border-radius:4px; padding:1.5rem; text-align:left; }
  .mono { width:60px; height:60px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-strong);
    display:grid; place-items:center; font-family:var(--serif); font-size:1.4rem; margin-bottom:1rem;
    background:color-mix(in srgb, var(--gold) 12%, transparent); }
  .fac h3 { font-size:1.12rem; } .fac .role { font-size:.85rem; color:var(--muted-solid); margin-top:.25rem; }

  .vision { background-color:var(--band); color:var(--band-ink); text-align:center; padding: clamp(4rem,8vw,6rem) 0; position:relative; overflow:hidden;
    background-image: linear-gradient(rgba(21,7,48,.85), rgba(16,5,38,.9)), url("chapel.jpg"); background-size:cover; background-position:center; }
  .vision::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% -20%, rgba(217,188,106,.16), transparent 60%); }
  .vision .eyebrow { color:var(--gold-bright); }
  .vision h2 { color:var(--band-ink); font-size:clamp(1.9rem,4vw,2.9rem); max-width:20ch; margin-inline:auto; position:relative; }
  .vision .nums { display:flex; justify-content:center; flex-wrap:wrap; gap:2.5rem; margin-top:2.4rem; position:relative; }
  .vision .stat b { font-family:var(--serif); font-size:2.8rem; color:var(--gold-bright); display:block; line-height:1; }
  .vision .stat span { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); }

  .cta { background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:clamp(2.2rem,4vw,3.2rem);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; box-shadow:var(--shadow); }
  .cta h2 { font-size:clamp(1.7rem,3vw,2.3rem); max-width:18ch; }
  .cta p { color:var(--muted-solid); margin-top:.5rem; max-width:38ch; }

  .foot { background:var(--band); color:var(--band-muted); padding:3.5rem 0 0; }
  .foot .scr { font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:1.15rem;
    max-width:40ch; line-height:1.6; padding-bottom:2.4rem; border-bottom:1px solid var(--band-line); }
  .foot .scr cite { display:block; font-style:normal; font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--band-muted); margin-top:.6rem; }
  .fcols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding:2.6rem 0; }
  .fcols h4 { color:var(--band-ink); font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 1rem; }
  .fcols a { display:block; text-decoration:none; color:var(--band-muted); font-size:.9rem; padding:.28rem 0; }
  .fcols a:hover { color:var(--gold-bright); }
  .fcols .brand { margin:0 0 1rem; }
  .fcols .fabout { font-size:.9rem; line-height:1.6; color:var(--band-muted); max-width:32ch; }
  .credit { border-top:1px solid var(--band-line); padding:1.4rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; font-size:.82rem; color:var(--band-muted); }
  .credit a { color:var(--gold-bright); text-decoration:none; font-weight:600; }
  .credit a:hover { text-decoration:underline; }

  .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity:1; transform:none; }

  @media (max-width:900px){
    .pathways,.ladder,.faculty { grid-template-columns:1fr; }
    .grid6 { grid-template-columns:repeat(2,1fr); }
    .split { grid-template-columns:1fr; }
    .step::after { display:none; }
    .fcols { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:680px){
    .nav-links { display:none; }
    .grid6 { grid-template-columns:1fr; }
    .fcols { grid-template-columns:1fr; }
    .cu { font-size:16px; }
  }
  @media (prefers-reduced-motion: reduce){
    .reveal { opacity:1; transform:none; transition:none; }
    .btn, .pcard, .prog { transition:none; }
  }