@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');

:root {
  color-scheme: light;

  /* Color */
  --calepin-color-background: #ffffff;
  --calepin-color-text: #1f2933;
  --calepin-color-muted: #5f6b7a;
  --calepin-color-border: #d8dee6;
  --calepin-color-accent: #1c9bad;
  --calepin-color-accent-hover: #16808f;
  --calepin-color-accent-soft: rgba(28, 155, 173, 0.12);
  --calepin-color-accent-soft: color-mix(in srgb, var(--calepin-color-accent) 12%, transparent);
  --calepin-color-accent-contrast: #ffffff;
  --calepin-color-link: var(--calepin-color-accent);
  --calepin-color-link-hover: var(--calepin-color-accent-hover);
  --calepin-color-focus: var(--calepin-color-accent);
  --calepin-color-selection: rgba(28, 155, 173, 0.24);
  --calepin-color-selection: color-mix(in srgb, var(--calepin-color-accent) 24%, transparent);
  --calepin-color-info: #1c7ed6;
  --calepin-color-success: #2e7d32;
  --calepin-color-warning: #b26a00;
  --calepin-color-danger: #b3261e;
  --calepin-color-important: #7c3aed;
  --calepin-color-info-soft: rgba(28, 126, 214, 0.12);
  --calepin-color-info-soft: color-mix(in srgb, var(--calepin-color-info) 12%, transparent);
  --calepin-color-success-soft: rgba(46, 125, 50, 0.12);
  --calepin-color-success-soft: color-mix(in srgb, var(--calepin-color-success) 12%, transparent);
  --calepin-color-warning-soft: rgba(178, 106, 0, 0.14);
  --calepin-color-warning-soft: color-mix(in srgb, var(--calepin-color-warning) 14%, transparent);
  --calepin-color-danger-soft: rgba(179, 38, 30, 0.12);
  --calepin-color-danger-soft: color-mix(in srgb, var(--calepin-color-danger) 12%, transparent);
  --calepin-color-important-soft: rgba(124, 58, 237, 0.12);
  --calepin-color-important-soft: color-mix(in srgb, var(--calepin-color-important) 12%, transparent);

  /* Callouts */
  --calepin-callout-note-color: var(--calepin-color-info);
  --calepin-callout-tip-color: var(--calepin-color-success);
  --calepin-callout-warning-color: var(--calepin-color-warning);
  --calepin-callout-caution-color: var(--calepin-color-danger);
  --calepin-callout-important-color: var(--calepin-color-important);

  /* Surfaces */
  --calepin-surface: #ffffff;
  --calepin-surface-muted: #f4f7f9;
  --calepin-surface-raised: #ffffff;
  --calepin-surface-inset: #eef3f6;
  --calepin-surface-code: #f7f7f5;
  --calepin-surface-output: var(--calepin-surface-muted);

  /* Typography */
  --calepin-font-body: var(--pico-font-family);
  --calepin-font-heading: "GFS Didot", Didot, Georgia, "Times New Roman", serif;
  --calepin-font-mono: var(--pico-font-family-monospace);
  --calepin-font-size: 100%;
  --calepin-font-size-sm: 0.875rem;
  --calepin-font-size-aside: 0.84rem;
  --calepin-line-height: 1.65;
  --calepin-line-height-tight: 1.25;
  --calepin-heading-weight: 700;
  --calepin-code-font-size: 0.92em;

  /* Spacing */
  --calepin-space-xs: 0.5rem;
  --calepin-space-sm: 0.75rem;
  --calepin-space-md: 1rem;
  --calepin-space-lg: 1.5rem;
  --calepin-space-xl: 2rem;
  --calepin-space-2xl: 3rem;
  --calepin-block-gap: var(--calepin-space-lg);
  --calepin-inline-gap: var(--calepin-space-md);
  --calepin-section-gap: var(--calepin-space-2xl);

  /* Layout */
  --calepin-content-width: 39rem;
  --calepin-wide-width: 68rem;
  --calepin-page-width: var(--calepin-wide-width);
  --calepin-margin-width: 11.5rem;
  --calepin-margin-gap: 2rem;
  --calepin-page-padding-inline: clamp(1rem, 4vw, 2rem);
  --pico-font-size: 100%;
  --calepin-radius-sm: 0.25rem;
  --calepin-radius-md: 0.5rem;
  --calepin-radius-lg: 0.75rem;
  --calepin-border-width: 1px;
  --calepin-border: var(--calepin-border-width) solid var(--calepin-color-border);
  --calepin-topbar-height: 3.5rem;
  --calepin-sidebar-width: 12rem;
  --calepin-shell-gap: 1.5rem;
  --calepin-shadow-card: 0 10px 30px color-mix(in srgb, var(--calepin-color-text) 8%, transparent);
  --calepin-focus-ring: 0 0 0 3px color-mix(in srgb, var(--calepin-color-focus) 28%, transparent);

  /* Layers */
  --calepin-z-topbar: 20;
  --calepin-z-backdrop: 25;
  --calepin-z-drawer: 30;
  --calepin-z-popover: 40;
  --calepin-z-modal: 50;

}

@media (min-width: 48rem) {
  :root {
    --pico-font-size: 106.25%;
  }
}

:root {
  --pico-background-color: var(--calepin-color-background);
  --pico-color: var(--calepin-color-text);
  --pico-muted-color: var(--calepin-color-muted);
  --pico-muted-border-color: var(--calepin-color-border);
  --pico-card-background-color: var(--calepin-surface-raised);
  --pico-card-sectioning-background-color: var(--calepin-surface-muted);
  --pico-code-background-color: var(--calepin-surface-code);
  --pico-code-color: var(--calepin-color-text);
  --pico-primary: var(--calepin-color-accent);
  --pico-primary-background: var(--calepin-color-accent);
  --pico-primary-border: var(--calepin-color-accent);
  --pico-primary-underline: transparent;
  --pico-primary-hover: var(--calepin-color-accent-hover);
  --pico-primary-hover-background: var(--calepin-color-accent-hover);
  --pico-primary-hover-border: var(--calepin-color-accent-hover);
  --pico-primary-hover-underline: transparent;
  --pico-primary-focus: color-mix(in srgb, var(--calepin-color-focus) 40%, transparent);
  --pico-primary-inverse: var(--calepin-color-accent-contrast);
}

html {
  scroll-behavior: smooth;
  background: var(--calepin-color-background);
  color: var(--calepin-color-text);
  font-family: var(--calepin-font-body);
}

body {
  background: var(--calepin-color-background);
  color: var(--calepin-color-text);
  font-family: var(--calepin-font-body);
  font-variant-numeric: oldstyle-nums;
}

a,
a:hover,
a:focus,
a:focus-visible,
a:active,
a:visited {
  color: var(--calepin-color-link);
  text-decoration: none;
}

a:hover,
a:focus,
a:focus-visible,
a:active {
  color: var(--calepin-color-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--calepin-font-heading);
  font-weight: var(--calepin-heading-weight);
  margin-top: 2rem;
}

h1 {
  font-size: 2rem;
  line-height: var(--calepin-line-height-tight);
  margin-bottom: 1.15rem;
}

h2 {
  margin-top: 2.8rem;
  font-size: 1.55rem;
}

h3 {
  margin-top: 2.1rem;
  font-size: 1.2rem;
}

.calepin-content :where(p, li, dd) {
  line-height: var(--calepin-line-height);
}

.calepin-content {
  min-width: 0;
}

.calepin-document-main {
  width: min(100% - 2rem, var(--calepin-content-width));
  margin-inline: auto;
}

.calepin-content > :first-child {
  margin-top: 0;
}

.calepin-content img,
.calepin-content svg,
.calepin-content video,
.calepin-content canvas {
  max-width: 100%;
  height: auto;
}

.calepin-content math[display="block"] {
  margin-block: var(--calepin-block-gap);
}

figure {
  text-align: center;
}

figure > img {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

.calepin-content figure {
  margin: var(--calepin-block-gap) 0;
}

.calepin-content figcaption {
  max-width: 34rem;
  margin-top: 0.6rem;
  color: var(--calepin-color-muted);
  font-size: var(--calepin-font-size-sm);
  line-height: 1.45;
}

.calepin-content .fullwidth,
.calepin-content .full-width,
.calepin-content figure.fullwidth,
.calepin-content figure.full-width {
  width: min(100vw - 2rem, var(--calepin-page-width));
  max-width: var(--calepin-page-width);
}

.calepin-content blockquote {
  margin: var(--calepin-block-gap) 0;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 2px solid var(--calepin-color-accent);
  color: var(--calepin-color-muted);
}

.calepin-content .calepin-float-right {
  float: right;
  width: min(32%, 12rem);
  height: auto;
  margin: 0.25rem 0 1rem 1.25rem;
  border-radius: var(--calepin-radius-md);
}

.calepin-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-block: var(--calepin-block-gap);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.calepin-content th,
.calepin-content td {
  padding: 0.45rem 0.65rem;
  border-bottom: var(--calepin-border-width) solid var(--calepin-color-border);
  vertical-align: top;
}

.calepin-content th {
  font-weight: 700;
}

.calepin-landing,
.calepin-landing-page {
  width: 100%;
  margin: 0;
}

.calepin-landing > :first-child,
.calepin-landing-page > :first-child {
  margin-top: 0;
}

.landing-button,
.landing-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.55rem 0.9rem;
  border: var(--calepin-border);
  border-radius: var(--calepin-radius-md);
  color: inherit;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.landing-button-primary,
.landing-button-primary:visited {
  border-color: var(--calepin-color-accent);
  background: var(--calepin-color-accent);
  color: var(--calepin-color-accent-contrast);
}

.landing-button-primary:hover,
.landing-button-primary:focus-visible {
  border-color: var(--calepin-color-accent-hover);
  background: var(--calepin-color-accent-hover);
  color: var(--calepin-color-accent-contrast);
}

.landing-button-secondary,
.landing-button-secondary:visited {
  border-color: var(--calepin-color-border);
  background: var(--calepin-surface);
  color: inherit;
}

.landing-button-secondary:hover,
.landing-button-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--calepin-color-accent) 50%, var(--calepin-color-border));
  color: var(--calepin-color-accent-hover);
}

.landing-command-row,
.landing-cta-row,
.landing-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--calepin-space-sm);
  align-items: center;
}

.landing-command-row code {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: var(--calepin-border);
  border-radius: var(--calepin-radius-md);
  background: var(--calepin-surface-muted);
  color: var(--calepin-color-text);
  font-size: 0.88rem;
  white-space: nowrap;
}

.landing-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--calepin-space-lg);
  margin-block: var(--calepin-section-gap);
}

.landing-panel {
  padding-block: var(--calepin-space-md);
  border-top: var(--calepin-border);
}

.landing-checklist {
  padding-left: 1.1rem;
}

@media (max-width: 48rem) {
  h1 {
    font-size: 1.9rem;
  }

  .landing-two-column {
    grid-template-columns: 1fr;
  }

  .calepin-content .calepin-float-right {
    float: none;
    display: block;
    width: min(100%, 16rem);
    margin: 0.75rem auto 1.2rem;
  }
}

:root {
  --calepin-syntax-foreground: #003b4f;
  --calepin-syntax-background: #f7f7f5;
  --calepin-syntax-border: color-mix(in srgb, var(--calepin-syntax-foreground) 18%, var(--calepin-syntax-background));
  --scope-1-foreground: #4759ab;
  --scope-2-foreground: #ad0000;
  --scope-3-foreground: #5e5e5e;
  --scope-4-foreground: #5e5e5e;
  --scope-5-foreground: #667321;
  --scope-6-foreground: #003b4f;
  --scope-6-font-weight: 700;
  --fallback-7-foreground: #003b4f;
  --fallback-8-foreground: #003b4f;
  --fallback-9-foreground: #ad0000;
  --fallback-10-foreground: #003b4f;
  --fallback-11-foreground: #5e5e5e;
  --fallback-12-foreground: #667321;

}

div.sourceCode,
pre.sourceCode,
.cell-output,
.cell-output-stdout,
.cell-output-stderr {
  position: relative;
  display: flow-root;
}

pre {
  background: var(--calepin-surface-code);
  border-radius: var(--calepin-radius-sm);
  color: var(--calepin-color-text);
  overflow: auto;
  padding: var(--calepin-space-md);
}

pre > code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.sourceCode .calepin-syntax-scope-1,
pre code .calepin-syntax-scope-1 {
  color: var(--scope-1-foreground);
}

.sourceCode .calepin-syntax-scope-2,
pre code .calepin-syntax-scope-2 {
  color: var(--scope-2-foreground);
}

.sourceCode .calepin-syntax-scope-3,
pre code .calepin-syntax-scope-3 {
  color: var(--scope-3-foreground);
}

.sourceCode .calepin-syntax-scope-4,
pre code .calepin-syntax-scope-4 {
  color: var(--scope-4-foreground);
}

.sourceCode .calepin-syntax-scope-5,
pre code .calepin-syntax-scope-5 {
  color: var(--scope-5-foreground);
}

.sourceCode .calepin-syntax-scope-6,
pre code .calepin-syntax-scope-6 {
  color: var(--scope-6-foreground);
  font-weight: var(--scope-6-font-weight);
}

.sourceCode .calepin-syntax-fallback-7,
pre code .calepin-syntax-fallback-7 {
  color: var(--fallback-7-foreground);
}

.sourceCode .calepin-syntax-fallback-8,
pre code .calepin-syntax-fallback-8 {
  color: var(--fallback-8-foreground);
}

.sourceCode .calepin-syntax-fallback-9,
pre code .calepin-syntax-fallback-9 {
  color: var(--fallback-9-foreground);
}

.sourceCode .calepin-syntax-fallback-10,
pre code .calepin-syntax-fallback-10 {
  color: var(--fallback-10-foreground);
}

.sourceCode .calepin-syntax-fallback-11,
pre code .calepin-syntax-fallback-11 {
  color: var(--fallback-11-foreground);
}

.sourceCode .calepin-syntax-fallback-12,
pre code .calepin-syntax-fallback-12 {
  color: var(--fallback-12-foreground);
}



pre.numberSource code > span > a:first-child::before {
  color: #aaa;
  font-size: 0.8rem;
}

:is(.cell-output, .cell-output-stdout, .cell-output-stderr) pre {
  border-left: var(--calepin-border-width) solid var(--calepin-color-border);
}

.calepin-copy-code {
  appearance: none;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--calepin-radius-sm);
  background: rgba(31, 41, 51, 0.07);
  color: rgba(31, 41, 51, 0.58);
  box-shadow: none;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

div.sourceCode:hover .calepin-copy-code,
.cell-output:hover .calepin-copy-code,
.cell-output-stdout:hover .calepin-copy-code,
.cell-output-stderr:hover .calepin-copy-code,
.calepin-copy-code:focus-visible {
  background: rgba(31, 41, 51, 0.12);
  color: rgba(31, 41, 51, 0.82);
  opacity: 1;
}

.calepin-copy-code svg {
  width: 0.78rem;
  height: 0.78rem;
}

.calepin-copy-code.copied {
  background: rgba(31, 122, 77, 0.12);
  color: #1f7a4d;
  opacity: 1;
}

.calepin-nav-toggle {
  min-width: 0;
  border: 0;
  border-radius: var(--calepin-radius-sm);
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 0.82rem;
}

.calepin-nav-toggle:hover,
.calepin-nav-toggle:focus,
.calepin-nav-toggle:active {
  border: 0;
  background: var(--calepin-color-accent-soft);
  box-shadow: none;
  color: inherit;
}

.calepin-nav-toggle:focus-visible {
  outline: 2px solid var(--calepin-color-focus);
  outline-offset: 2px;
}

.calepin-nav-icon {
  display: inline-flex;
  align-items: center;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

.calepin-nav-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

a:has(.calepin-nav-icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.calepin-site-topbar {
  position: sticky;
  top: 0;
  z-index: var(--calepin-z-topbar);
  min-height: var(--calepin-topbar-height);
  border-bottom: var(--calepin-border);
  background: color-mix(in srgb, var(--calepin-color-background) 94%, transparent);
  backdrop-filter: blur(10px);
}

.calepin-site-nav {
  min-height: var(--calepin-topbar-height);
  gap: 1rem;
}

.calepin-site-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit;
  font-family: var(--calepin-font-heading);
  font-weight: var(--calepin-heading-weight);
  text-decoration: none;
}

.calepin-site-logo {
  display: block;
  width: auto;
  max-height: 1.8rem;
}

.calepin-site-topbar a,
.calepin-site-topbar a:hover,
.calepin-site-topbar a:focus,
.calepin-site-topbar a:focus-visible,
.calepin-site-topbar a:active,
.calepin-site-topbar a:visited,
.calepin-site-topbar a.active,
.calepin-site-topbar a[aria-current] {
  color: inherit;
  text-decoration: none;
}

.calepin-site-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.1rem 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: 0.92rem;
}

.calepin-site-menu a:hover,
.calepin-site-menu a:focus-visible,
.calepin-site-menu a.active,
.calepin-site-menu a[aria-current] {
  border-bottom-color: var(--calepin-color-accent);
  color: inherit;
}

.calepin-nav-toggle {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  place-items: center;
  gap: 0.22rem;
}

.calepin-nav-toggle span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.calepin-language-picker.dropdown {
  margin: 0;
  width: max-content;
}

.calepin-language-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: max-content;
  max-width: none;
  border: 0;
  padding-inline: 0.65rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  white-space: nowrap;
}

.calepin-language-picker-button:hover,
.calepin-language-picker-button:focus,
.calepin-language-picker-button:active {
  border: 0;
  background: color-mix(in srgb, var(--calepin-color-muted) 10%, transparent);
  box-shadow: none;
  color: inherit;
}

.calepin-language-picker-button::after {
  display: none;
}

.calepin-language-picker-button span,
.calepin-language-picker-menu a span {
  overflow: visible;
  text-overflow: clip;
}

.calepin-language-picker-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: max-content;
  color: inherit;
  white-space: nowrap;
}

.calepin-language-picker-menu {
  min-width: 100%;
  width: max-content;
}

.calepin-language-picker-menu a[aria-current="true"] {
  background: var(--calepin-surface-muted);
}

:root {
  --calepin-page-width: calc(var(--calepin-content-width) + var(--calepin-margin-gap) + var(--calepin-margin-width));
  --calepin-margin-width: 16rem;
}

.academic-topbar {
  transition: transform 180ms ease;
  will-change: transform;
}

.academic-topbar.is-hidden {
  transform: translateY(-100%);
}

.academic-document-controls {
  display: flex;
  justify-content: flex-end;
  width: min(100% - 2rem, var(--calepin-content-width));
  margin: 1rem auto 0;
}

.academic-nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: min(100% - 2rem, var(--calepin-page-width));
  margin-inline: auto;
}

.academic-brand {
  font-size: 1.2rem;
}

.academic-menu {
  display: contents;
}

.academic-language-picker {
  width: auto;
  min-width: 7rem;
  margin: 0;
  padding: 0.3rem 1.8rem 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.academic-page {
  width: min(100% - 2rem, var(--calepin-content-width));
  margin-inline: auto;
  padding-block: 3.2rem 4rem;
}

.academic-main {
  width: min(100%, var(--calepin-content-width));
}

.academic-document-main {
  width: min(100% - 2rem, var(--calepin-content-width));
  margin-inline: auto;
  padding-block: 2.4rem 4rem;
}

body:has(.academic-document-main .calepin-sidenote) .academic-document-main,
body:has(.academic-document-main .calepin-sidefigure) .academic-document-main {
  width: min(100% - 2rem, var(--calepin-page-width));
}

.academic-document-main > :not(.fullwidth):not(.full-width):not(.calepin-figure-grid) {
  max-width: var(--calepin-content-width);
}

.academic-document-main > .calepin-figure-width {
  margin-inline: 0 auto !important;
  max-width: var(--calepin-content-width) !important;
}

.calepin-sidenote,
.calepin-sidefigure {
  display: block;
  float: right;
  clear: right;
  width: var(--calepin-margin-width);
  color: var(--calepin-color-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  scroll-margin-top: calc(var(--calepin-topbar-height) + 1rem);
}

.calepin-sidenote {
  margin: 0.25rem calc(-1 * (var(--calepin-margin-width) + var(--calepin-margin-gap))) 1rem var(--calepin-margin-gap);
}

.calepin-sidenote p,
.calepin-sidefigure figcaption {
  margin: 0 0 0.7rem;
  line-height: inherit;
}

.calepin-sidenote-numbered::before {
  content: "[" attr(data-sidenote-number) "]";
  display: inline-block;
  margin-right: 0.28rem;
  color: var(--calepin-color-accent);
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1;
}

/* In-text marker for a numbered sidenote. The number is emitted by the sidenote
   element; CSS only renders it as a superscript. */
[role="doc-noteref"] {
  color: var(--calepin-color-accent);
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
}

/* A figure, table, or code output placed in the margin. */
.calepin-sidefigure {
  margin: 0.4rem 0 1rem var(--calepin-margin-gap);
}

.calepin-sidefigure figure,
.calepin-sidefigure img,
.calepin-sidefigure svg,
.calepin-sidefigure table {
  width: 100%;
  margin: 0;
}

.calepin-sidefigure table {
  font-size: 0.8rem;
}

.academic-page-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100% - 2rem, var(--calepin-page-width));
  margin: 0 auto 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--calepin-color-border);
}

.academic-page-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.academic-page-nav-link-next {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

.academic-page-nav-link:hover,
.academic-page-nav-link:focus-visible {
  color: var(--calepin-color-accent);
}

.academic-landing {
  width: min(100% - 2rem, var(--calepin-page-width));
  margin-inline: auto;
  padding-block: 3rem 5rem;
}

.academic-landing .landing-hero {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  max-width: var(--calepin-content-width);
  min-height: min(52vh, 32rem);
  border-bottom: 1px solid var(--calepin-color-border);
}

.academic-landing .landing-hero h1,
.academic-landing .landing-hero h2 {
  margin: 0;
}

@media (max-width: calc(39rem + 16rem + 2rem + 2rem)) {
  .calepin-sidenote,
  .calepin-sidefigure {
    display: block;
    float: none;
    width: auto;
    margin: 0.75rem 0 1.2rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--calepin-color-border);
    border-radius: var(--calepin-radius-sm);
    background: var(--calepin-surface-muted);
  }
}

@media (max-width: 48rem) {
  .academic-nav {
    position: relative;
  }

  .academic-nav-toggle {
    display: inline-grid;
    margin-left: auto;
  }

  .academic-menu {
    position: absolute;
    inset: calc(var(--calepin-topbar-height) - 0.35rem) 0 auto auto;
    display: none;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem;
    border: 1px solid var(--calepin-color-border);
    border-radius: var(--calepin-radius-sm);
    background: var(--calepin-color-background);
    box-shadow: var(--calepin-shadow-card);
  }

  .academic-menu.is-open {
    display: grid;
    gap: 0.25rem;
    justify-items: stretch;
  }

  .academic-menu a {
    display: flex;
    min-height: 2.35rem;
    padding: 0.25rem 0.2rem;
    border-bottom: 0;
  }

  .academic-page,
  .academic-document-controls,
  .academic-document-main,
  .academic-landing {
    width: min(100% - 1.25rem, var(--calepin-content-width));
  }

  .academic-page,
  .academic-document-main,
  .academic-landing {
    padding-block: 2rem 3rem;
  }

  .academic-page-nav {
    grid-template-columns: 1fr;
    width: min(100% - 1.25rem, var(--calepin-content-width));
  }

  .academic-page-nav-link-next {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .academic-topbar {
    transition: none;
  }
}

/* =============================================================================
   Brand overlay for the Calepin replica of benstanley.eu.

   Loads AFTER the built-in `academic` theme CSS, so it only needs to override
   the public --calepin-* design tokens plus a few navbar/footer rules to
   reproduce the look of the original Quarto site:
     - typeface   : Jost across the whole site (loaded from Google Fonts)
     - links/accent: dark red (#8B0000) with pink (#A52C60) highlights
     - top navbar : solid dark-red bar with white links
   ============================================================================= */

/* Jost is used throughout the site (body and headings). It's loaded via a
   <link> in the theme head (themes/site-theme/partials/site-head.html). An
   @import can't be used here: Calepin bundles all CSS into one file, so a
   mid-bundle @import is ignored. */

/* ---- Design tokens (brand hues; site is light-mode only) ----------------- */
:root {
  --calepin-font-body: "Jost", system-ui, -apple-system, sans-serif;
  --calepin-font-heading: "Jost", system-ui, -apple-system, sans-serif;

  --calepin-color-accent: #a52c60;        /* pink — primary accent  */
  --calepin-color-accent-hover: #8b0000;  /* dark red on hover      */
  --calepin-color-link: #8b0000;          /* dark-red links         */
  --calepin-color-link-hover: #495057;    /* muted grey on hover    */
  --calepin-color-heading: #374151;       /* slate grey — headings  */
  --calepin-heading-weight: 600;
}

/* Reading text: bring the body size down so it sits in proportion to the
   (Jost) nav bar, with a slightly tighter line height. */
.calepin-content {
  font-size: 0.92rem;
}
.calepin-content :where(p, li, dd) {
  line-height: 1.55;
}

/* Headings: bold and in a slate grey (Jost), compact scale above body. */
.calepin-content h1,
.calepin-content h2,
.calepin-content h3,
.calepin-content h4 {
  font-family: var(--calepin-font-heading);
  font-weight: 700;
  color: var(--calepin-color-heading);
  line-height: 1.2;
}
.calepin-content h1 { font-size: 1.25rem; }   /* page title (#title) */
.calepin-content h2 { font-size: 1.08rem; }   /* section headings    */
.calepin-content h3 { font-size: 0.98rem; }
.calepin-content h4 { font-size: 0.92rem; }
/* Home-page name stays a touch larger than section headings. */
.hero-portrait h1 { font-size: 1.3rem; }

/* ---- Top navigation: solid dark-red bar with white text, set in Jost ----- */
.academic-topbar,
.calepin-site-topbar {
  background: #8b0000;
  font-family: "Jost", system-ui, -apple-system, sans-serif;
}
/* Explicitly set Jost on the brand + links too (the brand is the site title). */
.academic-brand,
.calepin-site-brand,
.academic-menu a,
.academic-nav a {
  font-family: "Jost", system-ui, -apple-system, sans-serif;
}
/* Sit the larger "Ben Stanley" brand on the same baseline as the smaller nav
   links so their text bottoms are flush, while keeping the whole row centered in
   the bar. The nav sizes to its (baseline-aligned) content instead of filling the
   bar's height — otherwise baseline items pack to the top — and the topbar centers
   that content-height nav vertically. Icons have no text baseline, so keep them
   centered. */
.academic-topbar.calepin-site-topbar {
  display: flex;
  align-items: center;
}
.academic-nav.calepin-site-nav {
  align-items: baseline;
  min-height: auto;
}
.academic-nav.calepin-site-nav a:has(.calepin-nav-icon) {
  align-self: center;
}

/* ---- Roomier top nav (desktop only; the <=48rem dropdown is left intact) -- */
@media (min-width: 48.01rem) {
  /* Let the bar use most of the viewport instead of the narrow reading width,
     so the links + icons have room and never wrap mid-word. */
  .academic-nav {
    width: min(100% - 3rem, 1400px);
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.95rem;
  }
  .academic-brand {
    white-space: nowrap;
    font-size: 1.15rem;
  }
  /* Re-form the flattened menu into its own flex group that starts right after
     the brand, with each label kept on a single line. (Landscape pushes the
     CV + icon cluster back to the right; see the landscape block below.) */
  .academic-menu {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem 0.9rem;
    margin-left: 1.25rem;
  }
  .academic-menu a {
    white-space: nowrap;
  }
}

/* ---- Wide landscape (desktop / landscape tablet): CV + icons to the right --- */
/* The page links (main menu) start immediately after "Ben Stanley"; give the CV
   entry an auto left margin so it and everything after it (the social icons) are
   pushed to the right edge, all on the brand's row. Only above 64rem, where there
   is room for the whole row — narrower landscape viewports stack instead (below). */
@media (min-width: 64.01rem) and (orientation: landscape) {
  .academic-menu a[href$="cv/cv.pdf"] {
    margin-left: auto;
  }
}

/* The before-CV break is hidden in every mode except the narrow-landscape range
   immediately below; it must precede that rule so the show wins the cascade. */
.academic-menu-break-social {
  display: none;
}

/* ---- Narrow landscape (a phone held sideways, <=64rem): CV + icons drop below */
/* There isn't room for the links + CV + ten icons across, so the right-aligned
   cluster would wrap into a ragged second/third row. Instead drop the whole
   CV + social-icon cluster onto a row of its own, beneath the page links, by
   switching on the full-width break span injected before CV in
   partials/site-nav.html. (No auto margin here, so the cluster sits at the left.) */
@media (min-width: 48.01rem) and (max-width: 64rem) and (orientation: landscape) {
  .academic-menu-break-social {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* ---- Portrait: text links on one line, icons + search centred below ------- */
/* Above the hamburger breakpoint but in a portrait viewport (a tablet held
   upright, or a tall/narrow desktop window), stack the bar so the text links
   stay on their own line and everything after CV — the social icons, the
   search trigger and the theme toggle — drops onto a second, centred line.
   The wrap is forced by an empty full-width flex item injected right after the
   CV entry (partials/site-nav.html); it is display:none in every other mode. */
.academic-menu-break {
  display: none;
}
@media (orientation: portrait) and (min-width: 48.01rem) {
  .academic-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
  }
  .academic-menu {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .academic-menu-break {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}
.academic-nav a,
.academic-brand,
.calepin-site-brand,
.academic-menu a {
  color: #ffffff !important;
}
.academic-menu a:hover,
.academic-nav a:hover {
  text-decoration: underline;
}
.academic-menu a.active {
  font-weight: 600;
}
/* Drop the theme's pink underline bar on the active/hovered nav item (it looks
   out of place on the dark-red bar). The active page is still marked by its
   bold weight; the transparent border keeps the 1px so nothing shifts. */
.academic-menu a:hover,
.academic-menu a:focus-visible,
.academic-menu a.active,
.academic-menu a[aria-current] {
  border-bottom-color: transparent;
}
/* Keep the mobile hamburger button legible on the red bar. */
.academic-topbar button {
  color: #ffffff;
}
.academic-nav-toggle span { background: #ffffff; }

/* ---- Mobile dropdown menu: match the dark-red bar ------------------------- */
/* At <=48rem the theme turns the nav into a pop-over panel whose background is
   the (white) page colour. The brand rules above paint every nav link white and
   the social-icon SVGs draw with `currentColor`, so on a white panel the whole
   menu is invisible — it reads as an empty box. Give the pop-over the same
   dark-red as the bar (and a faint light border) so the white links + icons show
   through, matching the desktop bar. */
@media (max-width: 48rem) {
  .academic-menu {
    background: #8b0000;
    border-color: rgba(255, 255, 255, 0.25);
  }
}

/* ---- Sticky footer: keep it pinned to the bottom of the viewport on short
   pages (e.g. the home page), while still sitting after the content on long
   pages. The body is a flex column; the content region grows to fill. -------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.academic-page,
.academic-landing {
  flex: 1 0 auto;
}

/* ---- Footer (added to the local theme via partials/site-footer.html) ----- */
.calepin-site-footer {
  flex-shrink: 0;
  background: #8b0000;
  color: #ffffff;
  margin-top: 3rem;
  padding: 1.3rem 1rem;
  font-family: var(--calepin-font-heading);
  font-size: 0.9rem;
}
.calepin-site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  width: min(100% - 2rem, var(--calepin-content-width));
  margin-inline: auto;
}
.calepin-site-footer-item:only-child,
.calepin-site-footer-inner:has(.calepin-site-footer-item:only-child) {
  justify-content: center;
}
.calepin-site-footer a {
  color: #ffffff;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .calepin-site-footer-inner { justify-content: center; text-align: center; }
}

/* ---- Home-page hero (trestles-style: portrait beside the bio) ----------- */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* bio starts level with the top of the photo */
  gap: 2rem;
  margin-block: 1rem 2rem;
}
.hero-portrait {
  flex: 0 0 240px;
  max-width: 240px;
  margin-inline: auto;
}
.hero-portrait img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.hero-bio {
  flex: 1 1 320px;
  min-width: 280px;
}

/* Two-column book layout on the "Good Change" page, with a divider that
   mirrors the original .columns separator. */
.gc-columns { align-items: start; }
@media (min-width: 768px) {
  .gc-columns > div:first-child {
    border-right: 1px solid var(--calepin-color-border);
    padding-right: 1.5rem;
  }
}

/* Research projects — mirrors the CV's `timeline` layout (academicv): the date
   sits in a right-aligned left column, a vertical line divides it from the body,
   then bold title / italic funder / smaller details stack on the right.
   (see pages/research-projects.typ) */
.proj {
  display: grid;
  grid-template-columns: 7em 1fr;
  column-gap: 1em;
  margin-bottom: 1.1em;
}
.proj-date {
  text-align: right;
  white-space: nowrap;
}
.proj-body {
  border-left: 1px solid var(--calepin-color-border);
  padding-left: 0.7em;
}
.proj-title strong {
  font-weight: 700;
}
.proj-funder {
  font-style: italic;
}
.proj-detail {
  font-size: 0.85em;
  color: var(--calepin-color-muted);
}

/* "Pooling the Poles" embed — break out of the narrow reading column to give the
   Shiny app a bit more room (centred on the viewport, capped width). */
.embed-frame {
  width: min(92vw, 900px);
  max-width: none;
  height: 1200px;
  border: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Teaching: landing (Andrew-Heiss-style course rows) ------------------ */
/* Grouped by academic year (h2). Each course is a row: hexsticker on the left,
   then name (links to the per-course page on this site) / code | university /
   description / term badges. Generated by scripts/sync-teaching.py. */
.course-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0.8rem 0 2.6rem;
}
.course-row {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}
.course-hex {
  flex: 0 0 4.3rem;
  width: 4.3rem;
  height: auto;
  display: block;
}
.course-body {
  flex: 1 1 auto;
  min-width: 0;
}
.course-name {
  display: inline-block;
  font-size: 1.08rem;   /* match the h2 section headings on other pages */
  font-weight: 600;
  line-height: 1.25;
  color: var(--calepin-color-heading) !important;
  text-decoration: none;
}
.course-name:hover,
.course-name:focus-visible {
  text-decoration: underline;
}
.course-meta {
  margin-top: 0.15rem;
  color: var(--calepin-color-muted);
  font-size: 0.85rem;
}
.course-desc {
  margin-top: 0.5rem;
  line-height: 1.5;
}
.course-terms {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.course-term {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 0.35rem;
  background: #8b0000;
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.4;
}
@media (max-width: 34rem) {
  .course-row { flex-direction: column; gap: 0.8rem; }
  .course-hex { flex-basis: 5rem; width: 5rem; }
}

/* ---- Teaching: per-course pages ------------------------------------------ */
/* "← All courses" back-link above the course title. */
.teaching-back {
  margin-bottom: 0.4rem;
  font-size: 0.85em;
}
.teaching-back a {
  color: var(--calepin-color-muted) !important;
  text-decoration: none;
}
.teaching-back a:hover {
  color: var(--calepin-color-link) !important;
  text-decoration: underline;
}