/* =====================================================================
   SITE.CSS  -  shared shell for the bryantclass.com teaching site
   (homepage, CV, study strategies, course landing pages)
   Reuses the exact design tokens established in the MTH 155 section
   so every page of the site feels like one place.
   ===================================================================== */
:root{
  --bg-0:#0f0f11; --bg-1:#18181c; --bg-2:#1f1f25; --bg-3:#26262e;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#e9e9ec; --text-dim:#a3a3ad; --text-faint:#8f8f9b;
  --blue:#4f9dff; --teal:#2bd4c0; --amber:#f5b53d; --coral:#fb6f86; --green:#3ddc91; --violet:#b58cff;
  --blue-t:rgba(79,157,255,.16);
  --radius:14px; --radius-sm:9px; --maxw:1100px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  --font:"Libre Franklin",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg-0);color:var(--text);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(79,157,255,.32)}
h1,h2,h3,h4{line-height:1.18;margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.serif{font-family:var(--serif)}
img{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--blue);color:#06121f;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px}
.skip-link:focus{left:16px}

/* focus visibility (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.course:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(15,15,17,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.headbar{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.brand .bn{display:flex;flex-direction:column;line-height:1.12}
.brand .bn b{font-weight:600;font-size:16px;letter-spacing:.01em;color:var(--text)}
.brand .bn span{font-size:11.5px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase}
.headbar .spacer{flex:1}
.headnav{display:flex;gap:2px}
.headnav a{color:var(--text-dim);font-size:14px;padding:8px 14px;border-radius:8px;text-decoration:none;transition:.15s;white-space:nowrap}
.headnav a:hover{color:var(--text);background:var(--bg-2);text-decoration:none}
.headnav a.here{color:var(--text);background:var(--bg-2)}
.menu-toggle{display:none;background:var(--bg-2);border:1px solid var(--line-strong);color:var(--text);
  width:42px;height:42px;border-radius:9px;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle svg{width:20px;height:20px}
@media(max-width:760px){
  .headnav{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-1);
    border-bottom:1px solid var(--line);padding:8px 18px 16px;display:none}
  .headnav.open{display:flex}
  .headnav a{padding:13px 6px;font-size:16px;border-bottom:1px solid var(--line)}
  .headnav a:last-child{border-bottom:0}
  .menu-toggle{display:inline-flex}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--text);
  cursor:pointer;transition:.16s;text-decoration:none}
.btn:hover{background:var(--bg-3);border-color:var(--text-faint);text-decoration:none;transform:translateY(-1px)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#06121f}
.btn.primary:hover{background:color-mix(in srgb,var(--blue) 88%,white)}

/* ---------- hero ---------- */
.hero{position:relative;padding:80px 0 64px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 100% at 78% 12%,#000,transparent 68%);
  -webkit-mask-image:radial-gradient(120% 100% at 78% 12%,#000,transparent 68%)}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at 80% 0%,rgba(79,157,255,.10),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:8px}.hero{padding:56px 0 48px}}
.hero .eyebrow{color:var(--teal);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(34px,5.2vw,52px);font-weight:700;letter-spacing:-.03em}
.hero .role{font-family:var(--serif);font-size:clamp(18px,2.4vw,22px);color:var(--text);margin-top:8px;font-weight:600}
.hero .org{color:var(--text-dim);font-size:16px;margin-top:2px}
.hero .lede{font-size:18px;color:var(--text-dim);max-width:54ch;margin-top:22px}
.hero .cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
/* hero motif: a small plotted curve card */
.hero-art{position:relative;z-index:1;justify-self:end;width:100%;max-width:330px}
@media(max-width:860px){.hero-art{display:none}}
.hero-art .plot{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.hero-art svg{display:block;width:100%;height:auto}

/* ---------- section scaffolding ---------- */
.section{padding:60px 0}
.section.tight{padding:46px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.02em}
.sec-head .sub{color:var(--text-faint);font-size:15px}
.eyebrow-sm{color:var(--text-faint);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}

/* ---------- course card grid ---------- */
.courses{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:680px){.courses{grid-template-columns:1fr}}
.course{position:relative;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 26px 24px;color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s;box-shadow:var(--shadow);--c:var(--blue)}
.course:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 55%,transparent);background:var(--bg-2);text-decoration:none}
.course::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c);opacity:.9}
.course .code{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--c);text-transform:uppercase;margin-bottom:10px}
.course h3{font-size:20px;margin-bottom:9px;color:var(--text)}
.course p{color:var(--text-dim);font-size:14.5px;line-height:1.58;margin:0}
.course .go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--c);font-size:13.5px;font-weight:600}
.course .go svg{width:15px;height:15px;transition:transform .18s}
.course:hover .go svg{transform:translateX(3px)}
.course .soon{margin-top:16px;font-size:12.5px;color:var(--text-faint);font-weight:500}

/* ---------- callout (canvas note) ---------- */
.callout-note{display:flex;gap:14px;align-items:flex-start;background:var(--bg-1);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:var(--radius-sm);padding:18px 20px}
.callout-note svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.callout-note p{margin:0;font-size:15px;color:var(--text-dim);line-height:1.6}
.callout-note b{color:var(--text);font-weight:600}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 6%,var(--bg-1)),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 36px}
@media(max-width:680px){.about{grid-template-columns:1fr;gap:22px;padding:28px}}
.about p{font-size:17px;color:var(--text-dim);max-width:62ch;margin:0}
.about p b{color:var(--text);font-weight:600}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:20px;padding:44px 0 40px;background:var(--bg-1)}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start}
@media(max-width:680px){.footgrid{grid-template-columns:1fr;gap:24px}}
.footgrid .who b{font-weight:600;color:var(--text);display:block}
.footgrid .who span{color:var(--text-dim);font-size:15px}
.footgrid .who .org{color:var(--text-faint);font-size:14px}
.foot-contact{margin-top:14px}
.fnav{display:flex;flex-direction:column;gap:9px}
.fnav .fh{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:600;margin-bottom:3px}
.fnav a{color:var(--text-dim);font-size:15px;text-decoration:none;width:fit-content}
.fnav a:hover{color:var(--text)}
.foot-legal{color:var(--text-faint);font-size:13px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- Canvas boundary bar (sits under the header on every page) ---------- */
.canvasbar{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 9%,var(--bg-1)),var(--bg-1));border-bottom:1px solid var(--line)}
.canvasbar .in{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;padding:11px 28px}
.canvasbar .ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line-strong);display:grid;place-items:center}
.canvasbar .ic svg{width:16px;height:16px;color:var(--blue)}
.canvasbar p{flex:1;margin:0;font-size:13.5px;color:var(--text-dim);line-height:1.45}
.canvasbar p b{color:var(--text);font-weight:600}
.canvasbar a.cv-go{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#06121f;font-weight:600;
  font-size:13.5px;padding:8px 15px;border-radius:999px;text-decoration:none;border:1px solid var(--blue);transition:.15s;white-space:nowrap}
.canvasbar a.cv-go:hover{background:color-mix(in srgb,var(--blue) 88%,white);text-decoration:none}
.canvasbar a.cv-go svg{width:14px;height:14px}
@media(max-width:680px){.canvasbar .in{flex-wrap:wrap;gap:10px;padding:11px 20px}.canvasbar p{flex:1 1 100%;order:3}}

/* Canvas link styled distinctly in the top nav */
.headnav a.canvaslink{color:var(--blue);font-weight:600}
.headnav a.canvaslink:hover{background:var(--blue-t);color:var(--blue)}

/* homepage "start here" orientation strip */
.starthere{display:flex;gap:15px;align-items:flex-start;background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 7%,var(--bg-1)),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 8px}
.starthere .ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-strong);display:grid;place-items:center}
.starthere .ic svg{width:19px;height:19px;color:var(--teal)}
.starthere h2{font-size:17px;color:var(--text);margin:0 0 6px}
.starthere ol{margin:0;padding-left:20px;color:var(--text-dim);font-size:14.5px;line-height:1.62}
.starthere ol li{margin-bottom:3px}
.starthere ol li b{color:var(--text);font-weight:600}
.starthere ol li a{font-weight:600}

/* "how this course is taught" descriptor chip on course pages */
.taughtas{display:inline-flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 15px;font-size:13.5px;color:var(--text-dim);margin-top:14px}
.taughtas b{color:var(--text);font-weight:600}
.taughtas svg{width:15px;height:15px;color:var(--blue);flex:none}

/* plain-language subtitle on homepage course cards */
.course .sub{font-size:13px;color:var(--text-faint);margin:-4px 0 9px;font-weight:500}

/* ---------- module / section sub-bar (sticky, under the header) ---------- */
.appbar{position:sticky;top:68px;z-index:40;background:rgba(24,24,28,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.appbar .in{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;padding:9px 28px}
.modnav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.modnav a{color:var(--text-dim);font-size:13.5px;padding:7px 12px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:.13s}
.modnav a:hover{color:var(--text);background:var(--bg-2);text-decoration:none}
.modnav .ab-label{color:var(--text-faint);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-right:4px}
.appbar .ab-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.namechip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line-strong);color:var(--text);font:inherit;font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.namechip:hover{background:var(--bg-3);border-color:var(--text-faint)}
.namechip svg{width:15px;height:15px;color:var(--text-dim)}
.namechip b{font-weight:600}
.progbtn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);border:1px solid var(--blue);color:#06121f;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.15s;text-decoration:none}
.progbtn:hover{background:color-mix(in srgb,var(--blue) 88%,white);text-decoration:none}
.progbtn svg{width:15px;height:15px}
@media(max-width:680px){.namechip span.lbl{display:none}.namechip{padding:7px 10px}}
@media(max-width:760px){.appbar{top:0;position:static}.appbar .in{flex-wrap:wrap;padding:9px 18px;gap:8px}.modnav{gap:1px}.modnav a{padding:6px 9px;font-size:12.5px}}
@media print{.appbar{display:none!important}}

/* ---------- generic content page (CV, study strategies, placeholders) ---------- */
.page-head{padding:54px 0 10px}
.page-head .kicker{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.page-head h1{font-size:clamp(30px,4.2vw,44px);font-weight:700;letter-spacing:-.025em}
.page-head .lede{font-size:18px;color:var(--text-dim);max-width:68ch;margin-top:16px}
.backhome{display:inline-flex;align-items:center;gap:7px;color:var(--text-dim);font-size:13.5px;font-weight:500;margin-bottom:22px;text-decoration:none}
.backhome:hover{color:var(--text);text-decoration:none}
.backhome svg{width:15px;height:15px}
.prose{max-width:72ch}
.prose h2{font-size:22px;margin:36px 0 12px}
.prose h3{font-size:17px;margin:24px 0 8px;color:var(--text)}
.prose p{color:var(--text-dim);font-size:16.5px;line-height:1.72}
.prose ul{color:var(--text-dim);font-size:16.5px;line-height:1.72;padding-left:22px;margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose li b{color:var(--text)}
.divider{height:1px;background:var(--line);border:0;margin:8px 0}

/* ---------- course-page orientation banner ---------- */
.howto{display:flex;gap:15px;align-items:flex-start;background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 7%,var(--bg-1)),var(--bg-1));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:6px 0 8px}
.howto .ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-strong);display:grid;place-items:center}
.howto .ic svg{width:19px;height:19px;color:var(--blue)}
.howto h2{font-size:16px;color:var(--text);margin:0 0 7px}
.howto ol{margin:0;padding-left:20px;color:var(--text-dim);font-size:14.5px;line-height:1.6}
.howto ol li{margin-bottom:3px}
.howto ol li b{color:var(--text);font-weight:600}
.howto .practice{margin:9px 0 0;font-size:13.5px;color:var(--text-faint);line-height:1.55}
.howto .practice a{font-weight:600}

/* inline "jump to" link under a section heading */
.jumplink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap}
.jumplink:hover{text-decoration:underline}
.jumplink svg{width:15px;height:15px}

/* per-demo related-lesson chip */
.demo-rel{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;color:var(--text-faint)}
.demo-rel a{color:var(--text-dim);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--text-faint)}
.demo-rel a:hover{color:var(--text)}
.demo-rel svg{width:14px;height:14px;color:var(--blue);flex:none}

/* ---------- "what's next" footer card on course pages ---------- */
.whatsnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:42px 0 8px}
@media(max-width:680px){.whatsnext{grid-template-columns:1fr}}
.wn-card{display:flex;flex-direction:column;gap:5px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  border-left:3px solid var(--wn,var(--blue));padding:18px 20px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:.16s}
.wn-card:hover{background:var(--bg-2);border-color:var(--text-faint);text-decoration:none;transform:translateY(-2px)}
.wn-card .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.wn-card .t{font-size:16.5px;color:var(--text);font-weight:600;display:flex;align-items:center;gap:7px}
.wn-card .t svg{width:16px;height:16px;color:var(--wn,var(--blue))}
.wn-card .d{font-size:13.5px;color:var(--text-dim);line-height:1.5}