/* Framework design layer: plain CSS, emitted as theme/styles.css. */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Charter, "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root {
  --color-bg: #fdfcf9;
  --color-fg: #18181b;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-accent: #1d4ed8;
  --color-accent-soft: #eff6ff;
  --color-card: #ffffff;
  --color-code-bg: #f3f4f6;

  --measure: 70ch;
  --sidebar-w: 16rem;
  --toc-w: 14rem;
  --header-h: 3.5rem;
}

:root.dark {
  --color-bg: #0f0f10;
  --color-fg: #e7e5e4;
  --color-muted: #9ca3af;
  --color-border: #2a2a2c;
  --color-accent: #60a5fa;
  --color-accent-soft: #1e3a5f;
  --color-card: #18181b;
  --color-code-bg: #1f1f22;
}

@layer base {
  html {
    color-scheme: light dark;
  }

  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  :not(pre) > code {
    background: var(--color-code-bg);
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }

  pre.highlight {
    background: var(--color-code-bg);
    padding: 0.875rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    line-height: 1.5;
  }
  pre.highlight.numbers .linenos {
    color: var(--color-muted);
    user-select: none;
    margin-right: 1rem;
    display: inline-block;
    text-align: right;
    min-width: 2ch;
  }

  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }
}

/* === Site shell ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1.5rem;
}

.site-title {
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 500;
}
.site-title:hover {
  text-decoration: none;
}
.site-code {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-title-text {
  color: var(--color-muted);
  font-weight: 400;
}

.site-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-control {
  background: transparent;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-control:hover {
  color: var(--color-fg);
  background: var(--color-accent-soft);
}
.site-control:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.site-theme-toggle .icon-sun { display: none; }
.site-theme-toggle .icon-moon { display: inline-block; }
:root.dark .site-theme-toggle .icon-sun { display: inline-block; }
:root.dark .site-theme-toggle .icon-moon { display: none; }

.site-menu-trigger { display: none; }
@media (max-width: 768px) {
  .site-menu-trigger { display: inline-flex; }
}

/* === Search overlay ======================================================= */

.site-search-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 35%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 50;
}
.site-search-overlay[hidden] {
  display: none;
}

.site-search-panel {
  width: min(36rem, 92vw);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.25);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-fg);
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.site-search-status {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
  padding: 0.5rem 0.25rem;
}

.site-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 2rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}
.site-layout:has(.toc-nav) {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
}
@media (max-width: 1100px) {
  .site-layout,
  .site-layout:has(.toc-nav) {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .site-layout,
  .site-layout:has(.toc-nav) {
    grid-template-columns: 1fr;
  }
}

.site-sidebar {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
}
@media (max-width: 768px) {
  .site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(18rem, 80vw);
    max-height: none;
    z-index: 30;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    padding: calc(var(--header-h) + 1rem) 1.25rem 1.25rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px -8px rgba(0, 0, 0, 0.2);
  }
  .is-sidebar-open .site-sidebar {
    transform: translateX(0);
  }
  .is-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.35);
  }
}

.site-main {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  min-width: 0;
  max-width: var(--measure);
}

.site-main .page-subtitle {
  font-family: var(--font-sans);
  color: var(--color-muted);
  font-size: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.site-main h1, .site-main h2, .site-main h3,
.site-main h4, .site-main h5, .site-main h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.site-main h1.page-title {
  font-size: 2rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
/* Content headings: `#` in a source file is a section heading under the
   page title, so it sizes with h2 rather than competing with it. */
.site-main h1 { font-size: 1.5rem; margin-top: 2.5rem; }
.site-main h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.site-main h3 { font-size: 1.25rem; }
.site-main h4 { font-size: 1.0625rem; }
.site-main h5 { font-size: 1rem; }
.site-main h6 { font-size: 1rem; }

.site-main p,
.site-main ul,
.site-main ol,
.site-main dl,
.site-main blockquote,
.site-main pre,
.site-main table,
.site-main figure {
  margin: 0 0 1rem;
}

.site-main ul, .site-main ol {
  padding-left: 1.5rem;
}
.site-main li + li {
  margin-top: 0.25rem;
}

.site-main blockquote {
  border-left: 3px solid var(--color-border);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--color-muted);
  font-style: italic;
}

.site-main table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}
.site-main th,
.site-main td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.site-main th {
  font-family: var(--font-sans);
  font-weight: 600;
  border-bottom-width: 2px;
}

.site-footer {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.site-credits {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.site-byline {
  margin: 0;
}
.site-affiliations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.site-affiliations li + li::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--color-border);
}
.site-affiliations a {
  color: inherit;
}
.site-affiliations a:hover {
  color: var(--color-accent);
}

.site-build-info {
  margin-left: auto;
}
.site-build-info summary {
  list-style: none;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 0.75rem;
  user-select: none;
}
.site-build-info summary::-webkit-details-marker { display: none; }
.site-build-info[open] summary {
  background: var(--color-accent-soft);
}
.site-build-info dl {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.125rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  position: absolute;
  right: 1.25rem;
}
.site-build-info dt {
  color: var(--color-muted);
}
.site-build-info dd {
  margin: 0;
  font-family: var(--font-mono);
}

/* === Navigation =========================================================== */

.site-nav .nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-nav .nav-section {
  margin-top: 1.25rem;
}
.site-nav .nav-section:first-child {
  margin-top: 0;
}

.site-nav .nav-section-label,
.site-nav .nav-section-link {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.25rem 0;
}
.site-nav .nav-section-link {
  color: var(--color-muted);
}
.site-nav .nav-section-link:hover {
  color: var(--color-fg);
  text-decoration: none;
}

.site-nav .nav-children {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-nav .nav-link a {
  display: block;
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  margin-left: -0.75rem;
  color: var(--color-fg);
  border-radius: 0 3px 3px 0;
}
.site-nav .nav-link a:hover {
  background: var(--color-accent-soft);
  text-decoration: none;
}
.site-nav .nav-link[aria-current="page"] a,
.site-nav .nav-link.is-active a {
  border-left-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 500;
}
.site-nav .nav-external a::after {
  content: " ↗";
  color: var(--color-muted);
  font-size: 0.85em;
}

/* === Page list ============================================================ */

.page-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.page-list-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-list-section-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0;
}

.page-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.page-list-item {
  border-bottom: 1px solid var(--color-border);
}
.page-list-item:last-child {
  border-bottom: none;
}

.page-list-item a,
.page-list-item > span {
  display: block;
  padding: 0.6rem 0;
  color: var(--color-fg);
}
.page-list-item a:hover {
  text-decoration: none;
  color: var(--color-accent);
}
.page-list-item[data-state="hidden"] {
  display: none;
}
.page-list-item[data-state="preview"] > * {
  color: var(--color-muted);
  font-style: italic;
}
.page-list-item[data-state="preview"] > *::after {
  content: " (draft)";
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-style: normal;
}

/* === Entry list =========================================================== */

.entry-list-item {
  padding: 0.6rem 0.75rem;
}

.entry-list-item-heading {
  margin: 0 0 0.3rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

/* Structured listings, not prose: markers are the component's choice.
   (`.page-list-items` already declared this; the entry list relied on a
   global reset stripping every list, which the baseline no longer does.) */
.entry-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list-item-entries {
  list-style: none;
  margin: 0;
  padding-left: 1.4rem;
}

.entry-list-item[data-state="preview"] {
  opacity: 0.45;
}

/* === Current marking ====================================================== */

/* The theme script sets `data-current` on the latest element whose
   `data-current-when` instant is at or before the viewer's clock.
   Layout-neutral on purpose: marking must not shift siblings. */
[data-current] {
  background: var(--color-accent-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* === Schedule ============================================================= */

.schedule {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.schedule-unscheduled {
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.schedule-unscheduled-heading {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

.schedule-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.schedule-group-empty {
  opacity: 0.55;
}

.schedule-group-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.25rem;
}

.schedule-day {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.35rem 0;
}

.schedule-day-label {
  margin: 0.6rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.schedule-day .schedule-items {
  min-width: 0;
}

.schedule-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.schedule-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.schedule-item:last-child {
  border-bottom: none;
}

.schedule-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: var(--color-border);
  color: var(--color-fg);
  white-space: nowrap;
}
/* Kind palette: solid chips (the courses' shared schedule template palette). */
.schedule-label-lecture    { background: #5B8DEF; color: white; }
.schedule-label-homework   { background: #F5615C; color: white; }
.schedule-label-reading    { background: #52C41A; color: white; }
.schedule-label-discussion { background: #52C41A; color: white; }
.schedule-label-handout    { background: #52C41A; color: white; }
.schedule-label-demo       { background: #B37FEB; color: white; }
.schedule-label-quiz       { background: #FFA940; color: white; }
.schedule-label-exam       { background: #FFA940; color: white; }
.schedule-label-project    { background: #FF85C0; color: white; }
.schedule-label-holiday    { background: #8C8C8C; color: white; }
.schedule-label-default    { background: #BFBFBF; color: white; }

.schedule-item-link,
.schedule-item-text {
  color: var(--color-fg);
}
.schedule-item-link:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.schedule-attachments {
  grid-column: 2;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.875rem;
}
.schedule-attachment {
  color: var(--color-muted);
}
.schedule-attachment a {
  color: var(--color-muted);
}
.schedule-attachment a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.schedule-state-preview .schedule-item-text,
.schedule-state-preview .schedule-item-link {
  color: var(--color-muted);
  font-style: italic;
}
.schedule-state-hidden {
  display: none;
}

/* === Callouts ============================================================= */

.callout {
  margin: 1.25rem 0;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-card);
  border-radius: 0 4px 4px 0;
}
.callout-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
  color: var(--color-muted);
}
.callout-title p { margin: 0; }
.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }

.callout-note   { --c: #6b7280; }
.callout-info   { --c: #2563eb; }
.callout-tip    { --c: #059669; }
.callout-warning{ --c: #d97706; }
.callout-important { --c: #7c3aed; }
.callout-danger { --c: #dc2626; }

.callout-note,
.callout-info,
.callout-tip,
.callout-warning,
.callout-important,
.callout-danger {
  border-left-color: var(--c);
  background: color-mix(in srgb, var(--c) 6%, var(--color-bg));
}
.callout-note .callout-title,
.callout-info .callout-title,
.callout-tip .callout-title,
.callout-warning .callout-title,
.callout-important .callout-title,
.callout-danger .callout-title {
  color: var(--c);
}

/* === Figures ============================================================== */

figure.figure {
  margin: 1.5rem 0;
  text-align: center;
}
figure.figure img,
figure.figure video {
  display: inline-block;
  border-radius: 4px;
}
figure.figure figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* === Staff cards ========================================================== */

.staff-listing {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.staff-listing-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-listing-section-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0;
}

.staff-listing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.875rem;
}

.staff-listing-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.staff-listing-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

.staff-listing-role {
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.25rem;
}

.staff-listing-email,
.staff-listing-office,
.staff-listing-office-hours,
.staff-listing-zoom {
  margin: 0;
  font-size: 0.875rem;
}
.staff-listing-email a,
.staff-listing-zoom a {
  color: var(--color-accent);
}

.staff-listing-office,
.staff-listing-office-hours {
  color: var(--color-muted);
}

.staff-listing-hours {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  font-size: 0.875rem;
}
.staff-listing-hours li {
  padding: 0.1rem 0;
}

.staff-listing-bio {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* === Math display ========================================================= */

.math.display {
  display: block;
  text-align: center;
  margin: 1rem 0;
  overflow-x: auto;
}

/* === Table of contents ==================================================== */

.toc-nav {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}
@media (max-width: 1100px) {
  .toc-nav { display: none; }
}

.toc-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

.toc-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.toc-nav ul ul {
  margin-left: 0.75rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.5rem;
}

.toc-nav li {
  margin: 0;
}
.toc-nav li > a {
  display: block;
  padding: 0.2rem 0;
  color: var(--color-muted);
  line-height: 1.35;
}
.toc-nav li > a:hover {
  color: var(--color-fg);
  text-decoration: none;
}
.toc-nav li.is-active > a {
  color: var(--color-accent);
  font-weight: 500;
}

.toc-nav[data-max-depth="2"] ul ul             { display: none; }
.toc-nav[data-max-depth="3"] ul ul ul          { display: none; }
.toc-nav[data-max-depth="4"] ul ul ul ul       { display: none; }
.toc-nav[data-max-depth="5"] ul ul ul ul ul    { display: none; }

/* === Home links ========================================================== */

/* `course.yaml links:` on the framework home page; `kind` picks the color. */

.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.home-link {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  background: var(--color-accent);
  color: white;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
}
.home-link:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.home-link-usc         { background: maroon; }
.home-link-brightspace { background: gold; color: #333; }
.home-link-gradescope  { background: purple; }

/* === Page notice ========================================================= */

.page-notice {
  border-left: 3px solid #d97706;
  background: color-mix(in srgb, #d97706 8%, var(--color-bg));
  border-radius: 0 4px 4px 0;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
}
.page-notice p {
  margin: 0;
  font-weight: 600;
}