/* Caveat hub pages (educators, academy, academy-finder, co-op, professional, homeschool-curriculum, elementary, careers):
   image-led storefront layouts on the Observatory system (design/SYSTEM.md). Loaded after ui/caveat.css and ui/app.css.
   Everything here is prefixed hub-; the cards, shelves, covers, doors and hero come from caveat.css (cv-). */

body.hub{padding-top:0;--cv-max:1240px;background:var(--cv-bg)}
body.hub .wrap{max-width:none;padding:0;margin:0}
body.hub .hub-page{background:var(--cv-bg);color:var(--cv-ink)}
body.hub .hub-page .cv-wrap{max-width:var(--cv-max)}
body.hub .wrap>.fine,body.hub .hub-page>.fine{max-width:var(--cv-max);margin:0 auto;padding:0 var(--cv-gutter) 56px;border-top:0}
body.hub .hub-page p{margin:0}
body.hub .hub-page ul,body.hub .hub-page ol{margin:0}

/* ---------- bands ---------- */
.hub-sec{padding:72px 0}
.hub-sec+.hub-sec{padding-top:0}
.hub-sec.cv-dark{padding:64px 0;background:var(--cv-ink);color:#fff}
.hub-sec.cv-dark+.hub-sec{padding-top:72px}
.hub-sec.hub-tight{padding-top:36px;padding-bottom:36px}
.hub-sec .cv-sec-head{margin-bottom:22px}
.hub-sec .cv-sec-head .cv-h2{font-size:clamp(24px,1vw + 18px,30px)}
.hub-stack{display:grid;gap:44px}
@media (max-width:759px){.hub-sec{padding:48px 0}.hub-sec.cv-dark{padding:44px 0}.hub-sec.cv-dark+.hub-sec{padding-top:48px}.hub-stack{gap:32px}}

/* ---------- hero ---------- */
.hub-hero .cv-hero-in{grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:40px}
.hub-hero .cv-hero-copy .cv-display{font-size:clamp(34px,2vw + 18px,50px)}
.hub-hero .cv-hero-copy .cv-lead{max-width:48ch}
.hub-hero-vis{position:relative;min-width:0;z-index:1;will-change:transform}
.hub-hero-fx{position:absolute;left:-30%;right:-40%;top:-30%;bottom:-30%;z-index:-1;pointer-events:none}
.hub-hero-fx .cv-glow{left:55%;top:50%;transform:translate(-50%,-50%);width:min(820px,120%)}
.hub-hero-fx .cv-orbit{left:55%;top:50%}
.hub-hero-fx .cv-orbit-1{width:min(760px,118%);transform:translate(-50%,-50%)}
.hub-hero-fx .cv-orbit-2{width:min(1120px,170%);transform:translate(-46%,-52%)}
/* the branch doorway image */
.hub-door{display:block;position:relative;width:calc(100% + clamp(0px,6vw,96px));max-width:none;border-radius:24px;overflow:hidden;background:var(--cv-ink-2);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1600px) rotateY(-6deg) rotateX(1.5deg);transform-origin:left center;aspect-ratio:4/3;transition:transform .6s var(--cv-ease)}
.hub-door:hover{transform:perspective(1600px) rotateY(-3deg)}
.hub-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a fan of covers */
.hub-fan{position:relative;aspect-ratio:16/11;margin:0 auto;width:min(100%,640px)}
.hub-fan a{position:absolute;bottom:4%;left:50%;width:36%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--cv-ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);transform-origin:50% 120%;transition:transform .35s var(--cv-ease),box-shadow .35s}
.hub-fan a img,.hub-fan a svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hub-fan a img{opacity:0;transition:opacity .25s}.hub-fan a img.cv-ok{opacity:1}
.hub-fan a:nth-child(1){transform:translateX(-50%) rotate(-22deg) translateY(2%);z-index:1}
.hub-fan a:nth-child(2){transform:translateX(-50%) rotate(-11deg) translateY(-4%);z-index:2}
.hub-fan a:nth-child(3){transform:translateX(-50%) rotate(0deg) translateY(-8%);z-index:3}
.hub-fan a:nth-child(4){transform:translateX(-50%) rotate(11deg) translateY(-4%);z-index:4}
.hub-fan a:nth-child(5){transform:translateX(-50%) rotate(22deg) translateY(2%);z-index:5}
.hub-fan a:hover{z-index:6;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.2)}
.hub-fan a:nth-child(1):hover{transform:translateX(-50%) rotate(-22deg) translateY(-2%)}
.hub-fan a:nth-child(2):hover{transform:translateX(-50%) rotate(-11deg) translateY(-8%)}
.hub-fan a:nth-child(3):hover{transform:translateX(-50%) rotate(0deg) translateY(-12%)}
.hub-fan a:nth-child(4):hover{transform:translateX(-50%) rotate(11deg) translateY(-8%)}
.hub-fan a:nth-child(5):hover{transform:translateX(-50%) rotate(22deg) translateY(-2%)}
.hub-hero .cv-float-cover{left:auto;right:-30px;bottom:-30px}
@media (max-width:1023px){.hub-hero .cv-hero-in{grid-template-columns:minmax(0,1fr);gap:44px}.hub-door{width:100%;transform:none}.hub-door:hover{transform:none}.hub-hero-fx .cv-glow,.hub-hero-fx .cv-orbit{left:50%}.hub-hero .cv-float-cover{right:-6px;bottom:-24px}}
@media (max-width:759px){.hub-fan{aspect-ratio:16/12}.hub-fan a{width:40%}.hub-hero .cv-hero-copy .cv-display{font-size:clamp(32px,9vw,40px)}}

/* numbers inside the hero */
.hub-numbers{margin-top:40px;display:flex;flex-wrap:wrap;gap:0;border-radius:18px;overflow:hidden}
.hub-numbers>div{padding:14px 18px;border-left:1px solid rgba(255,255,255,.12);min-width:120px;flex:1}
.hub-numbers>div:first-child{border-left:0}
.hub-numbers .cv-num{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:4px}
.hub-numbers span{display:block;font-size:13px;color:rgba(255,255,255,.7);line-height:1.3}
@media (max-width:759px){.hub-numbers>div{min-width:50%;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.hub-numbers>div:nth-child(-n+2){border-top:0}.hub-numbers>div:nth-child(2n){border-left:1px solid rgba(255,255,255,.12)}}

/* ---------- shelves and grids ---------- */
.hub-shelf .cv-shelf-head .cv-h2{font-size:clamp(24px,1vw + 18px,30px)}
.hub-shelf .cv-card{flex-basis:232px;width:232px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.hub-grid .cv-card{flex:none;width:auto;scroll-snap-align:none}
.hub-grid-wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.hub-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.hub-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hub-grid-wide,.hub-grid-3{grid-template-columns:minmax(0,1fr)}}
.cv-card .cv-card-short{font-size:13.5px;color:var(--cv-muted);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-dark .cv-card .cv-card-short{color:rgba(255,255,255,.65)}
.cv-card-foot .cv-price:empty{display:none}
/* a richer card (a div, not a link): cover, title, text, a details disclosure and buttons */
.hub-rich{display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:var(--cv-paper);overflow:hidden;color:var(--cv-ink);transition:transform .15s ease-out,box-shadow .15s ease-out}
.hub-rich:hover{transform:translateY(-4px);box-shadow:var(--cv-paper-hi)}
.hub-rich .cv-cover{border-radius:0}
.hub-rich-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.hub-rich-body .cv-h3{font-size:20px}
.hub-rich-body p{font-size:14.5px;color:var(--cv-muted);line-height:1.45;margin:0}
.hub-rich-body details{font-size:14px;color:var(--cv-muted)}
.hub-rich-body summary{cursor:pointer;font-weight:700;color:var(--cv-blue-deep);list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.hub-rich-body summary::-webkit-details-marker{display:none}
.hub-rich-body summary:after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s}
.hub-rich-body details[open] summary:after{transform:rotate(-135deg);margin-top:3px}
.hub-rich-body details ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.hub-rich-body details li{margin:0;line-height:1.4}
.hub-rich-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px;align-items:center}
.hub-rich-acts .cv-price{font-size:18px;font-weight:700;margin-right:auto}
.hub-rich-acts .cv-btn{height:42px;padding:0 16px;font-size:14px}
.hub-rich-acts .cv-btn-secondary{box-shadow:0 0 0 1px var(--cv-line) inset}

/* ---------- small print, notes, text rows ---------- */
.hub-note{font-size:13.5px;color:var(--cv-muted);line-height:1.5;max-width:80ch}
.hub-note a{color:var(--cv-blue-deep);font-weight:600}
.hub-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;line-height:1.5}
.hub-links a{color:var(--cv-blue-deep);font-weight:600}
.hub-links b{color:var(--cv-ink);font-weight:700}
.hub-more{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px}
.hub-more a{color:var(--cv-blue-deep);font-weight:600}
.hub-more b{font-weight:700;color:var(--cv-ink)}
.hub-details{background:#fff;border-radius:20px;box-shadow:var(--cv-paper);padding:4px 22px;margin-top:18px}
.hub-details summary{cursor:pointer;font-weight:700;font-size:16px;min-height:48px;display:flex;align-items:center;gap:10px;list-style:none}
.hub-details summary::-webkit-details-marker{display:none}
.hub-details summary:after{content:"";width:8px;height:8px;border-right:1.8px solid var(--cv-blue);border-bottom:1.8px solid var(--cv-blue);transform:rotate(45deg);margin-left:auto;transition:transform .15s}
.hub-details[open] summary:after{transform:rotate(-135deg)}
.hub-details>div{padding:4px 0 20px;color:var(--cv-muted);font-size:15px;line-height:1.5}
.hub-details>div p{margin:0 0 10px}
.hub-details dl{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 18px;margin:0}
@media (min-width:760px){.hub-details dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-details dt{font-weight:700;color:var(--cv-ink);font-family:var(--cv-display);font-size:16px;letter-spacing:-.01em}
.hub-details dd{margin:2px 0 0;font-size:14.5px}
.hub-details ul{padding-left:20px;display:grid;gap:6px}
.hub-details li{margin:0}
.hub-details li.y{list-style:none;position:relative;margin-left:-20px;padding-left:28px}
.hub-details li.y .cv-mark{position:absolute;left:0;top:3px;width:16px;height:16px}
.hub-details .cv-dark{color:#fff}
.hub-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15.5px;line-height:1.5}
.hub-list li{position:relative;padding-left:28px;margin:0}
.hub-list li .cv-mark{position:absolute;left:0;top:4px;width:16px;height:16px}
/* a paper panel with a headline and a few links */
.hub-panel{background:#fff;border-radius:22px;box-shadow:var(--cv-paper);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.hub-panel .cv-h3{font-size:20px}
.hub-panel p{font-size:15px;color:var(--cv-muted);line-height:1.5}
.hub-panel .cv-actions{margin-top:auto;padding-top:6px}
.hub-panel.cv-dark{background:var(--cv-ink);color:#fff}
.hub-panel.cv-dark p{color:rgba(255,255,255,.75)}
.hub-panel.cv-dark a:not(.cv-btn){color:#fff;font-weight:700}
.hub-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:759px){.hub-split{grid-template-columns:minmax(0,1fr)}}
.hub-tier{display:flex;flex-direction:column;gap:10px;padding:26px 28px}
.hub-tier .cv-h3{font-size:22px}
.hub-tier .hub-price{font-family:var(--cv-display);font-size:clamp(30px,1.4vw + 22px,40px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hub-tier .hub-price small{font-family:var(--cv-text);font-size:15px;font-weight:600;letter-spacing:0;margin-left:6px;opacity:.75}
.hub-tier .hub-list{font-size:14.5px}
.cv-dark .hub-list li .cv-mark .cv-mark-bg{stroke:rgba(255,255,255,.25)}.cv-dark .hub-list li .cv-mark .cv-mark-fg{stroke:#fff}

/* ---------- chips and finders ---------- */
.hub-chips{display:flex;flex-wrap:wrap;gap:8px}
.hub-chips button,body.hub .cx-f button,body.hub .fo button{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:#fff;color:var(--cv-ink);box-shadow:0 0 0 1px var(--cv-line) inset;font-family:var(--cv-text);font-weight:600;font-size:14.5px;line-height:1.2;cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s}
.hub-chips button:hover,body.hub .cx-f button:hover,body.hub .fo button:hover{box-shadow:0 0 0 1px var(--cv-blue) inset;color:var(--cv-blue-deep)}
.hub-chips button[aria-pressed=true],body.hub .cx-f button[aria-pressed=true],body.hub .fo button[aria-pressed=true]{background:var(--cv-blue);color:#fff;box-shadow:none}
body.hub .cx-bar{border:0;padding:0;margin:0 0 6px}
body.hub .cx-search{font:inherit;font-size:16px;width:100%;max-width:560px;border:0;border-radius:999px;padding:0 20px;background:#fff;min-height:50px;box-shadow:var(--cv-paper);font-family:var(--cv-text)}
body.hub .cx-search:focus-visible{outline:0;box-shadow:var(--cv-paper),0 0 0 1px var(--cv-blue),0 0 0 4px var(--cv-soft)}
body.hub .cx-f{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}body.hub .cx-f::-webkit-scrollbar{display:none}
@media (min-width:760px){body.hub .cx-f{flex-wrap:wrap;overflow:visible}}
body.hub .cx-f button{flex:none}
body.hub .cx-lab{font-size:13px;font-weight:700;color:var(--cv-muted);margin:12px 0 0;letter-spacing:0;text-transform:none}
body.hub .cx-n{font-size:14px;color:var(--cv-muted);margin:14px 0 10px}
body.hub .cx-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
@media (max-width:620px){body.hub .cx-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
body.hub .cx-g .cv-card{flex:none;width:auto;scroll-snap-align:none}
body.hub .cx-g .cv-card .hub-card-acts{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
body.hub .cx-g .cv-card .hub-card-acts .cv-price{font-family:var(--cv-display);font-size:16px;font-weight:700}
body.hub .cx-g .cv-card .hub-card-acts span.cv-btn,body.hub .cx-g .cv-card .hub-card-acts a.cv-btn,body.hub .cx-g .cv-card .hub-card-acts button.cv-btn{height:36px;padding:0 13px;font-size:13.5px}
body.hub .cx-g .cv-card .hub-card-acts .cv-btn-secondary{box-shadow:0 0 0 1px var(--cv-line) inset}
body.hub .cx-empty{padding:24px;border-radius:20px;background:#fff;color:var(--cv-muted);font-size:15px}
body.hub .cx-dlg{border:0;border-radius:24px;padding:0;max-width:680px;width:calc(100% - 24px);max-height:85vh;box-shadow:var(--cv-paper-hi);font-family:var(--cv-text);color:var(--cv-ink)}
body.hub .cx-dlg::backdrop{background:rgba(11,16,32,.55);backdrop-filter:blur(6px)}
body.hub .cx-dlg .in{padding:0 0 24px;overflow:auto;max-height:85vh}
body.hub .cx-dlg .in>.cv-cover{border-radius:0;aspect-ratio:21/9}
body.hub .cx-dlg .cx-dlg-body{padding:18px 24px 0}
body.hub .cx-dlg h2{margin:4px 0 8px;font-size:26px;font-family:var(--cv-display);font-weight:700;letter-spacing:-.02em}
body.hub .cx-dlg .cx-tag{font-size:13px;font-weight:700;color:var(--cv-blue-deep)}
body.hub .cx-dlg p{margin:0 0 10px;font-size:15.5px;line-height:1.5}
body.hub .cx-dlg ol{padding-left:20px;font-size:14.5px;color:var(--cv-muted);margin:0 0 14px}
body.hub .cx-dlg li{margin:6px 0}
body.hub .cx-dlg .x{position:absolute;right:12px;top:12px;font:inherit;font-size:22px;border:0;background:rgba(255,255,255,.9);color:var(--cv-ink);cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--cv-paper);z-index:2}
body.hub .cx-dlg .cv-actions{margin-top:4px}
/* finder questions */
.hub-q{background:#fff;border-radius:22px;box-shadow:var(--cv-paper);padding:20px 22px 22px}
.hub-q .cv-h3{font-size:19px;margin:0 0 12px;display:flex;gap:10px;align-items:flex-start}
.hub-q .cv-h3 .cv-mark{margin-top:4px}
.hub-q[hidden]{display:none}
.hub-qs{display:grid;gap:14px}
.hub-fv{background:var(--cv-ink);color:#fff;border-radius:22px;padding:22px 24px;margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.hub-fv b{display:block;font-family:var(--cv-display);font-size:20px;letter-spacing:-.01em;font-weight:700}
.hub-fv p{color:rgba(255,255,255,.75);margin:4px 0 0;font-size:15px;flex:1 1 280px}
.hub-fv .cv-actions{flex:none}
.hub-fv a:not(.cv-btn){color:#fff;font-weight:700}
.hub-fv>div{flex:1 1 320px}

/* ---------- the other branches ---------- */
.hub-branches{padding:56px 0 72px}
.hub-branches .cv-sec-head{margin-bottom:18px}
.hub-branches .cv-sec-head .cv-h2{font-size:22px}
.hub-branches-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hub-branches .cv-door{flex-direction:column}
.hub-branches .cv-door-img{aspect-ratio:16/9;flex:none}
.hub-branches .cv-door-body{flex:1;padding:18px 20px}
.hub-branches .cv-door-body small{color:var(--cv-muted);letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
.hub-branches .cv-door-body .cv-h3{font-size:20px}
.hub-branches .cv-door-body p{font-size:14px}
@media (max-width:1023px){.hub-branches-grid{grid-template-columns:minmax(0,1fr)}.hub-branches .cv-door{flex-direction:row;align-items:stretch}.hub-branches .cv-door-img{aspect-ratio:auto;flex:0 0 38%;min-height:150px}}
@media (max-width:759px){.hub-branches{padding:40px 0 56px}.hub-branches-grid{grid-template-columns:minmax(0,1fr);gap:14px}.hub-branches .cv-door-img{flex-basis:38%;min-height:120px}.hub-branches .cv-door-body{padding:14px 16px}.hub-branches .cv-door-body p{display:none}}

/* ---------- homeschool sample weeks ---------- */
body.hub .hub-weeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
@media (max-width:759px){body.hub .hub-weeks{grid-template-columns:minmax(0,1fr)}}
body.hub .hub-weeks .hw{margin:0;background:var(--cv-bg);box-shadow:none;border-radius:16px;padding:14px 16px}
body.hub .hub-weeks .hw .wk{font-size:13px;font-weight:700;color:var(--cv-blue-deep);letter-spacing:0;text-transform:none}
body.hub .hub-weeks .hw h4{margin:4px 0 6px;font-size:17px}
body.hub .hub-weeks .hw p{margin:4px 0;font-size:14px;color:var(--cv-ink)}
body.hub .hub-weeks .hw ul{margin:4px 0 0;padding-left:18px;font-size:14px;color:var(--cv-muted)}
body.hub .hub-weeks .hw label{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;margin-top:8px;min-height:32px}
body.hub .hub-weeks .hw.done{opacity:.6}

@media (prefers-reduced-motion:reduce){.hub-door,.hub-fan a,.hub-rich,.hub-hero-vis{transition:none!important;animation:none!important}}
@media print{.hub-hero,.hub-branches,.cv-shelf-nav{display:none!important}.cv-shelf-track{flex-wrap:wrap;overflow:visible}}
.hub-grid .cv-card[hidden]{display:none}
