/* Shared styling for course pages — matches Sikder Huq v2 skins */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; }

body.skin-a { --display: 'Fraunces', serif; --bodyfont: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; }
body.skin-a.light { --bg:#faf7f2; --bg-soft:#f1ece3; --ink:#2b2823; --ink-2:#5c564c; --muted:#98917f; --line:#e4ddd0; --accent:#667761; --accent-soft:#eef0ea; }
body.skin-a.dark  { --bg:#171613; --bg-soft:#1f1d19; --ink:#e9e4d8; --ink-2:#b0a996; --muted:#746e5f; --line:#2b2822; --accent:#9db08f; --accent-soft:#23261f; }
body.skin-b { --display: 'Space Grotesk', sans-serif; --bodyfont: 'Space Grotesk', sans-serif; --mono: 'JetBrains Mono', monospace; }
body.skin-b.light { --bg:#f8f9fa; --bg-soft:#eef1f3; --ink:#24282c; --ink-2:#565e66; --muted:#939ca5; --line:#e2e6e9; --accent:#5a7d99; --accent-soft:#eaf0f4; }
body.skin-b.dark  { --bg:#131518; --bg-soft:#1a1d21; --ink:#e4e7ea; --ink-2:#a4abb3; --muted:#666e77; --line:#262a2f; --accent:#8fb0c9; --accent-soft:#1d2329; }

body { background: var(--bg); color: var(--ink); font-family: var(--bodyfont); }
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.course-top a.back, footer.course-foot a { text-decoration: none; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 32px; }

header.course-top {
  position: sticky; top: 0; z-index: 40;
  background: #131210;
  border-bottom: 1px solid #2a2824;
}
.course-top .inner {
  max-width: 900px; min-height: 52px; margin: 0 auto; padding: 12px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.course-top a.back {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: 'Open Sans', sans-serif; font-size: 19px; font-weight: 300;
  text-decoration: none; color: #f0ebe0; letter-spacing: .01em; white-space: nowrap;
}
.course-top a.back:hover, .course-top a.back:focus-visible { color: #f0ebe0; }
.course-top nav.subnav { display: flex; gap: 4px; align-items: center; }
.course-top nav.subnav a {
  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300;
  text-decoration: none; color: rgba(240,235,224,.72);
  padding: 5px 11px; border-radius: 999px; transition: all .15s; cursor: pointer;
}
.course-top nav.subnav a:hover { color: #f0ebe0; background: rgba(255,255,255,.08); }
.course-top .orig {
  font-family: var(--mono); font-size: 11.5px;
}
.course-top .orig a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.course-top .orig a:hover { color: var(--accent); }

.course-top .right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.course-top .theme-btn { color: rgba(240,235,224,.65); }
.course-top .theme-btn:hover { background: rgba(255,255,255,.08); color: #f0ebe0; }
.context-back {
  display: inline-flex; align-items: center; margin-bottom: 13px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .03em; color: var(--accent); text-decoration: none;
}
.context-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.context-links {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--bodyfont); font-size: 13.5px;
}
.context-links a { color: var(--accent); font-weight: 550; }
.context-links a:hover { color: var(--ink); }
.course-burger { display: none; }
.course-mobile-nav {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(10,9,7,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .28s;
}
.course-mobile-nav.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
.course-mobile-nav .sheet {
  position: absolute; inset: 0 auto 0 0; width: min(280px, 80vw);
  padding: 62px 0 20px; display: flex; flex-direction: column; gap: 2px;
  background: #131210; border-right: 1px solid #2a2824;
  box-shadow: 8px 0 32px rgba(0,0,0,.4);
  transform: translateX(-100%); transition: transform .28s ease;
}
.course-mobile-nav.open .sheet { transform: translateX(0); }
.course-mobile-nav .sheet a {
  padding: 12px 22px;
  font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 300;
  color: rgba(240,235,224,.78); text-decoration: none; cursor: pointer;
}
.course-mobile-nav .sheet a:hover,
.course-mobile-nav .sheet a.current {
  color: #f0ebe0; background: rgba(255,255,255,.06);
}
body.course-nav-open { overflow: hidden; }
.theme-btn {
  all: unset; cursor: pointer; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-2); transition: all .15s; flex-shrink: 0;
}
.theme-btn:hover { background: var(--bg-soft); color: var(--ink); }
.theme-btn svg { width: 17px; height: 17px; }

.course-head { padding: 56px 0 8px; }
.course-head .code {
  font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 500;
  letter-spacing: .02em;
}
.course-head h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -.02em; margin: 10px 0 18px; line-height: 1.12;
}
body.skin-a .course-head h1 { font-weight: 350; }

.meta-card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft);
  padding: 20px 24px; margin: 8px 0 8px;
  display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 20px;
  font-size: 14px;
}
.meta-card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.meta-card .v { color: var(--ink-2); }
.meta-card .v strong { color: var(--ink); font-weight: 550; }

.orig-note {
  margin: 16px 0 0; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--accent-soft);
  font-size: 13.5px; color: var(--ink-2);
}
.orig-note a { font-weight: 550; }

main.course-body { padding: 24px 0 96px; }
main.course-body h2 {
  font-family: var(--display); font-weight: 450; font-size: 23px;
  letter-spacing: -.015em; margin: 44px 0 14px; line-height: 1.2;
  padding-top: 28px; border-top: 1px solid var(--line);
}
body.skin-a main.course-body h2 { font-weight: 400; }
main.course-body h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
main.course-body p, main.course-body li { font-size: 15px; color: var(--ink-2); }
main.course-body p strong, main.course-body li strong { color: var(--ink); font-weight: 550; }
main.course-body ul { padding-left: 22px; margin: 10px 0; }
main.course-body li { margin: 6px 0; }
main.course-body .note { font-size: 13.5px; color: var(--muted); font-style: italic; }

.ann-list { list-style: none; padding: 0; margin: 12px 0; }
.ann-list li {
  padding: 9px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; margin: 0;
}
.ann-list li .d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding-top: 3px; white-space: nowrap; }

.week { padding: 16px 0; border-bottom: 1px solid var(--line); }
.week h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.week h3 span { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.week .slides { margin-top: 8px; font-size: 13.5px; }
.week .slides a { margin-right: 14px; }

/* ===== Blog article styles (shared) ===== */
.article-head { padding: 56px 0 12px; }
.article-head .kicker { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
.article-head h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 42px);
  letter-spacing: -.02em; margin: 12px 0 14px; line-height: 1.15; text-wrap: balance;
}
body.skin-a .article-head h1 { font-weight: 350; }
.article-head .dek { font-size: 16.5px; color: var(--ink-2); font-style: italic; max-width: 60ch; margin: 0 0 8px; }
.article-head .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; }
.repo-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); background: var(--bg-soft);
  font-family: var(--bodyfont); font-size: 12.5px; font-weight: 500;
  line-height: 1; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.repo-link svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.repo-link:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

article.post { width: 100%; min-width: 0; padding: 20px 0 80px; max-width: 680px; }
article.post .in-brief {
  margin: 2px 0 30px; padding: 17px 20px 15px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0; background: var(--accent-soft);
}
article.post .in-brief h2 {
  margin: 0 0 9px; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
article.post .in-brief ul { margin: 0; padding-left: 19px; }
article.post .in-brief li {
  margin: 5px 0; color: var(--ink-2); font-size: 14px; line-height: 1.55;
}
article.post h2 {
  font-family: var(--display); font-weight: 450; font-size: 24px;
  letter-spacing: -.015em; margin: 44px 0 12px; line-height: 1.25;
}
body.skin-a article.post h2 { font-weight: 400; }
article.post h3 { font-size: 17px; font-weight: 600; margin: 30px 0 10px; }
article.post p { font-size: 15.5px; color: var(--ink-2); line-height: 1.72; margin: 14px 0; }
article.post p strong, article.post li strong { color: var(--ink); font-weight: 600; }
article.post ul { padding-left: 22px; margin: 12px 0; }
article.post li { font-size: 15.5px; color: var(--ink-2); line-height: 1.65; margin: 8px 0; }
article.post blockquote {
  margin: 18px 0; padding: 12px 20px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 8px 8px 0;
}
article.post blockquote p { margin: 0; color: var(--ink); }
article.post pre {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; margin: 18px 0;
}
article.post pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--ink); background: none; padding: 0; }
article.post code { font-family: var(--mono); font-size: 13px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--ink); }
article.post figure.post-figure { margin: 28px 0 34px; }
article.post figure.post-figure img {
  display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--line); background: #080808;
}
article.post figure.post-figure figcaption {
  margin-top: 9px; font-family: var(--mono); font-size: 11px;
  line-height: 1.5; color: var(--muted);
}
article.post figure.post-figure figcaption strong { color: var(--ink-2); }
article.post .related-posts {
  margin-top: 42px; font-size: 14px; color: var(--muted);
}
.post-pagination {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
}
.post-pagination-link {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  color: var(--ink); text-decoration: none;
}
.post-pagination-link.next { grid-column: 2; text-align: right; }
.post-pagination-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.post-pagination-title { font-size: 14px; font-weight: 600; line-height: 1.45; }
.post-pagination-link:hover .post-pagination-title { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.related-posts + .post-pagination { margin-top: 28px; }
.post-pagination + .context-links { margin-top: 22px; padding-top: 0; border-top: 0; }

footer.course-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
footer.course-foot .inner {
  max-width: 760px; margin: 0 auto; padding: 0 32px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
footer.course-foot a { color: var(--muted); }
footer.course-foot a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .post-pagination { grid-template-columns: 1fr; gap: 20px; }
  .post-pagination-link.next { grid-column: 1; text-align: left; }
  .course-top .inner {
    min-height: 52px; padding: 8px clamp(16px, 4vw, 28px);
    justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: nowrap;
  }
  body.course-nav-ready .course-top nav.subnav { display: none; }
  .course-top a.back {
    display: inline-flex; align-items: center; line-height: 1; font-size: 17px;
  }
  .course-top .right { margin-left: auto; gap: 2px; flex-shrink: 0; }
  .course-burger {
    all: unset; box-sizing: border-box; cursor: pointer;
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 50%; color: rgba(240,235,224,.85); flex-shrink: 0;
  }
  .course-burger:hover { background: rgba(255,255,255,.08); }
  .course-burger:focus-visible { outline: 2px solid #f0ebe0; outline-offset: 2px; }
  .course-burger svg { display: block; width: 22px; height: 22px; }
  .course-burger .bline {
    transition: transform .28s ease, opacity .2s ease;
    transform-origin: 12px 12px;
  }
  body.course-nav-open .course-burger .bl1 { transform: rotate(45deg) translateY(5px); }
  body.course-nav-open .course-burger .bl2 { opacity: 0; }
  body.course-nav-open .course-burger .bl3 { transform: rotate(-45deg) translateY(-5px); }
}