/* ================= THE CREW (volunteers): training and the proctored exam ================= */
body[data-theme=crew]{--bg:var(--mist);--accent:var(--olive);--btn:var(--olive);--btn-ink:var(--bone);background:var(--mist);color:var(--ink)}
body[data-theme=crew] .p-top{border-color:var(--ink)}
.burst-crew i{border-radius:50%;background:var(--olive)}
body[data-theme=crew] .label{color:var(--olive)}

.c-hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:clamp(40px,7vw,88px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--ink)}
.c-hero h1{margin-top:14px}
.c-hero h1 em{color:var(--olive)}
.c-lede{margin-top:18px;max-width:46ch;color:var(--soft);font-size:18px}
.c-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.c-roles span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:var(--olive);color:var(--bone)}
/* the call sheet: a clipboard page with their roles on it */
.c-sheet{width:min(230px,42vw);background:var(--bone);padding:30px 20px 22px;display:grid;gap:10px;position:relative;transform:rotate(2deg);box-shadow:0 26px 40px -26px #1D1C1C80;animation:sheet-in .9s cubic-bezier(.2,.8,.2,1) both}
.c-sheet::before{content:"";position:absolute;top:-12px;left:50%;width:74px;height:24px;margin-left:-37px;background:var(--ink);border-radius:6px 6px 3px 3px}
.c-sheet b{font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1}
.c-sheet ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.c-sheet li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px;display:flex;gap:10px;align-items:center}
.c-sheet li::before{content:"";width:12px;height:12px;border:1.5px solid var(--olive);border-radius:2px;flex:none}
.c-sheet .label{font-size:10px}
@keyframes sheet-in{from{transform:rotate(-6deg) translateY(30px);opacity:0}to{transform:rotate(2deg)}}

.c-live{margin-top:32px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--forest);color:var(--bone);padding:24px}
body[data-theme=crew] .c-live .label{color:var(--sage)}
.c-live h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1;margin:6px 0}
.c-live p{color:var(--mist)}
.c-live .rsvp{--btn:var(--sage);--btn-ink:var(--forest)}
.c-pulse{width:14px;height:14px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 var(--sage);animation:c-pulse 1.6s infinite}
@keyframes c-pulse{70%{box-shadow:0 0 0 14px #C2C8AB00}100%{box-shadow:0 0 0 0 #C2C8AB00}}

.c-path{margin-top:48px;display:grid;gap:18px}
.c-path-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.c-sub{color:var(--soft);font-size:15px}
.c-mods{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.c-mod{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--bone);padding:22px;border:1px solid transparent;animation:rise .6s var(--d) cubic-bezier(.2,.8,.2,1) both}
.c-mod.passed{border-color:var(--olive)}
.c-no{font-family:var(--f-display);font-size:56px;line-height:.8;color:var(--olive);align-self:start}
.c-mod h3{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1}
.c-mod-b>p{color:var(--soft);font-size:15px;margin-top:6px}
.c-bar{height:4px;background:var(--stone);margin:14px 0 12px;max-width:420px}
.c-bar i{display:block;height:100%;background:var(--olive);transition:width .6s ease}
.c-steps{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;font-size:14px}
.c-steps div{display:grid;gap:2px}
.c-steps dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mushroom)}
.c-steps dd{margin:0}
.c-steps dd.passed{color:var(--olive);font-weight:600}
.c-steps dd.passed::before{content:"✓︎ "}
.c-steps dd.marking{color:var(--soft)}

.c-how{margin-top:48px;display:grid;grid-template-columns:1fr 1.3fr;gap:32px;padding:28px;border:1px solid var(--ink)}
.c-how h3{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1;margin:10px 0 12px}
.c-how p{color:var(--soft)}
.c-how-list{list-style:none;margin:0;padding:0;counter-reset:h;display:grid;gap:12px}
.c-how-list li{counter-increment:h;position:relative;padding-left:40px;font-size:15px;line-height:1.5}
.c-how-list li::before{content:counter(h,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--f-mono);font-size:12px;color:var(--olive)}

/* ---------- reading a module ---------- */
.c-lesson{padding:clamp(28px,5vw,56px) 0;display:grid;gap:22px;max-width:760px}
.c-crumbs{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.c-crumbs .undo{padding-left:0}
.c-dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.c-dots button{font:inherit;font-family:var(--f-mono);font-size:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.c-dots button[aria-current=true]{background:var(--ink);color:var(--mist)}
.c-read{background:var(--bone);padding:clamp(22px,4vw,44px);display:grid;gap:14px;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.c-read h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,56px);line-height:1}
.c-intro{border-left:3px solid var(--olive);padding-left:16px;color:var(--soft);display:grid;gap:10px}
.c-body{display:grid;gap:14px;font-size:17px;line-height:1.65}
.c-body h4{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1;margin-top:10px}
.c-body ul,.c-body ol{margin:0;padding-left:22px;display:grid;gap:6px}
.c-body ul.cr-check{list-style:none;padding:0}
.c-body ul.cr-check li{position:relative;padding-left:30px}
.c-body ul.cr-check li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border:1.5px solid var(--olive);border-radius:3px}
.c-body blockquote{margin:0;padding:16px 20px;background:var(--mist);font-family:var(--f-display);font-size:22px;line-height:1.3}
.c-body b{font-weight:600}
.cr-tbl{overflow-x:auto;border:1px solid var(--rule)}
.cr-tbl table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
.cr-tbl th{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:left;background:var(--stone);padding:10px 12px;font-weight:500}
.cr-tbl td{padding:10px 12px;border-top:1px solid var(--rule);vertical-align:top}
.c-next{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.c-next .rsvp{max-width:100%}
.c-qs{list-style:none;margin:0;padding:0;display:grid;gap:24px;counter-reset:q}
.c-qs>li{counter-increment:q;display:grid;gap:10px}
.c-q{font-size:18px;font-weight:500}
.c-q::before{content:counter(q) ". ";color:var(--olive);font-family:var(--f-mono);font-size:13px}
.c-opts{display:grid;gap:8px}
.c-opts button{font:inherit;font-size:16px;text-align:left;padding:12px 14px;background:transparent;border:1px solid var(--ink);color:var(--ink);cursor:pointer;transition:background .2s}
.c-opts button:hover:not(:disabled){background:var(--mist)}
.c-opts button.right{background:var(--olive);color:var(--bone);border-color:var(--olive)}
.c-opts button.wrong{border-style:dashed;opacity:.8}
.c-opts button.dim{opacity:.45}
.c-why{font-size:15px;color:var(--soft);border-left:3px solid var(--olive);padding-left:12px}

/* picking an exam time: the times Talana has put up, like a sign-up sheet on the wall */
.c-book{margin-top:48px;background:var(--bone);padding:28px;display:grid;gap:22px}
.c-book h3{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1;margin-top:10px}
.c-booked{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.c-booked li{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:18px 20px;background:var(--forest);color:var(--bone)}
body[data-theme=crew] .c-booked .label{color:var(--sage)}
.c-booked b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.05;margin:6px 0 4px}
.c-booked p{color:var(--mist);font-size:15px}
.c-booked p a{color:var(--sage)}
.c-booked-a{display:flex;flex-wrap:wrap;gap:6px 18px}
.c-booked-a .undo{color:var(--bone);border-color:var(--sage)}
.c-pick{display:grid;gap:16px}
.c-pick .c-sub b{color:var(--ink)}
.c-pick-for{display:flex;flex-wrap:wrap;gap:8px}
.c-pick-for button{font:inherit;font-size:14px;padding:8px 14px;border-radius:99px;border:1px solid var(--olive);background:transparent;color:var(--olive);cursor:pointer}
.c-pick-for button[aria-checked=true]{background:var(--olive);color:var(--bone)}
.c-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 24px}
.c-day{display:grid;gap:10px;align-content:start;border-top:1px solid var(--ink);padding-top:10px}
.c-times{display:flex;flex-wrap:wrap;gap:8px}
.c-times button{font:inherit;font-family:var(--f-mono);font-size:16px;padding:10px 14px;display:grid;gap:2px;text-align:left;background:var(--mist);border:1px solid transparent;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.c-times button small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.c-times button:hover:not(:disabled){background:var(--olive);color:var(--bone);transform:translateY(-2px)}
.c-times button:hover:not(:disabled) small{color:var(--sage)}
.c-times button:disabled{opacity:.5;cursor:wait}
.c-none{color:var(--soft);font-style:italic}
.c-pick>.undo{justify-self:start}

@media (max-width:820px){
  .c-how{grid-template-columns:1fr}
  .c-mod{grid-template-columns:auto 1fr}
  .c-mod .rsvp{grid-column:1/-1;justify-self:start}
}
@media (max-width:560px){
  .c-hero{grid-template-columns:1fr}
  .c-sheet{order:-1;justify-self:end;width:170px;margin-bottom:-24px}
  .c-sheet b{font-size:30px}
  .c-live{grid-template-columns:auto 1fr}
  .c-live .rsvp{grid-column:1/-1;justify-self:start}
  .c-mod{padding:18px;gap:14px}
  .c-no{font-size:40px}
  .c-how{padding:20px}
  .c-book{padding:20px}
}

/* ---------- the exam: full screen, one question at a time ---------- */
body.in-exam{overflow:hidden}
.cx{position:fixed;inset:0;z-index:100;background:var(--bone) var(--mark) repeat;color:var(--ink);display:grid;grid-template-rows:auto 1fr auto;-webkit-user-select:none;user-select:none}
.cx textarea{-webkit-user-select:text;user-select:text}
.cx-top{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--ink);background:var(--bone)}
.cx-wm{width:76px;aspect-ratio:2937/850;-webkit-mask-image:var(--wm);mask-image:var(--wm);background:currentColor;flex:none}
.cx-title{font-family:var(--f-display);font-size:22px;line-height:1}
.cx-proc{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.cx-proc i{width:9px;height:9px;border-radius:50%;background:#B3362B;animation:c-rec 1.4s ease-in-out infinite}
@keyframes c-rec{50%{opacity:.3}}
.cx-time{font-family:var(--f-mono);font-size:15px;padding:6px 12px;border:1px solid var(--ink);border-radius:99px;min-width:96px;text-align:center}
.cx-time.low{background:var(--ink);color:var(--bone)}
.cx-main{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px);overflow:auto;align-content:start}
.cx-map{display:grid;grid-template-columns:repeat(4,34px);gap:6px;align-content:start}
.cx-map button{font:inherit;font-family:var(--f-mono);font-size:12px;width:34px;height:34px;border:1px solid var(--rule);background:var(--bone);color:var(--ink);cursor:pointer}
.cx-map button.done{background:var(--sage);border-color:var(--sage)}
.cx-map button[aria-current=true]{border:2px solid var(--ink)}
.cx-q{display:grid;gap:18px;max-width:760px;align-content:start}
.cx-qt{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.12}
.cx-star{color:var(--olive)}
.cx-opts{display:grid;gap:10px}
.cx-opts button{font:inherit;font-size:17px;text-align:left;display:flex;gap:14px;align-items:baseline;padding:14px 16px;background:var(--bone);border:1px solid var(--ink);color:var(--ink);cursor:pointer;transition:background .15s}
.cx-opts button:hover{background:var(--mist)}
.cx-opts button[aria-checked=true]{background:var(--olive);color:var(--bone);border-color:var(--olive)}
.cx-l{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;opacity:.7}
.cx textarea{font:inherit;font-size:17px;line-height:1.6;padding:14px;border:1px solid var(--ink);background:var(--bone);color:var(--ink);border-radius:0;resize:vertical;width:100%}
.cx textarea:focus{outline:2px solid var(--olive);outline-offset:1px}
.cx-saved{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);min-height:1.2em}
.cx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px clamp(16px,4vw,40px);border-top:1px solid var(--ink);background:var(--bone)}
.cx-foot .undo:disabled{opacity:.3;cursor:default}
.cx-count{font-family:var(--f-mono);font-size:12px;color:var(--soft)}
.cx-cover{position:absolute;inset:0;z-index:5;background:#1D1C1Cee;color:var(--bone);display:grid;place-items:center;padding:24px;text-align:center}
.cx-cover>div{max-width:480px;display:grid;gap:14px;justify-items:center}
.cx-cover .label{color:var(--sage)}
.cx-cover h2{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.05}
.cx-cover .rsvp{--btn:var(--sage);--btn-ink:var(--forest)}
.cx-end{grid-row:1/-1;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:24px;max-width:560px;margin:auto}
.cx-end h2{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1}
.cx-end p{color:var(--soft)}
.cx-k{width:56px;aspect-ratio:3247/3280;-webkit-mask-image:var(--k);mask-image:var(--k);background:var(--olive)}
.cx-sheet{border:0;padding:0;max-width:min(560px,calc(100% - 32px));background:var(--bone);color:var(--ink);box-shadow:0 30px 60px -30px #000}
.cx-sheet::backdrop{background:#1D1C1Ccc}
.cx-sheet>div{padding:28px;display:grid;gap:14px;justify-items:start}
.cx-sheet h2{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,4vw,40px);line-height:1.05}
.cx-sheet p{color:var(--soft)}
.cx-sheet .label{color:var(--olive)}
.cx-sheet .rsvp{--btn:var(--olive);--btn-ink:var(--bone)}
.cx-rules{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.cx-pledge{display:flex;gap:12px;align-items:flex-start;background:var(--mist);padding:14px;font-size:15px;line-height:1.45}
.cx-pledge input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--olive)}
.cx-code{display:grid;gap:6px;width:100%}
.cx-code input{font-family:var(--f-mono);font-size:28px;letter-spacing:.3em;text-transform:uppercase;padding:10px 0;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);width:100%;border-radius:0}
.cx-code input:focus{outline:none;border-bottom-color:var(--olive)}
.cx-note{min-height:1.4em;font-size:14px;color:#8a3b2b}
@media (max-width:720px){
  .cx-main{grid-template-columns:1fr}
  .cx-map{grid-template-columns:repeat(auto-fill,34px);order:2}
  .cx-proc{display:none}
}
@media (prefers-reduced-motion:reduce){.c-pulse,.cx-proc i,.c-sheet,.c-mod,.c-read{animation:none}}