html[data-argus-theme] .app-frame:has(.projects-page) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  --project-shell: var(--appearance-bg);
  --project-shell-deep: var(--appearance-surface);
  --project-shell-line: var(--appearance-line);
  --project-shell-text: var(--appearance-ink);
  --project-shell-muted: var(--appearance-secondary);
  --project-band: var(--appearance-surface);
  --project-band-text: var(--appearance-ink);
  background: var(--project-shell);
  color: var(--project-shell-text);
  font-family: var(--nov05-font-data);
}

html[data-argus-theme] .app-frame:has(.projects-page) .project-cover-header {
  flex: none;
  position: relative;
  z-index: 30;
  min-height: 58px;
  background: var(--project-shell-deep);
  border-bottom: 1px solid var(--project-shell-line);
  backdrop-filter: none;
}

html[data-argus-theme] .app-frame:has(.projects-page) .projects-page {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  background-color: var(--project-shell);
}

.project-cover-header .project-header-context strong,
.projects-page .project-card .project-name {
  color: var(--project-shell-text);
  font-family: var(--nov05-font-display);
  font-weight: 400;
  font-synthesis: none;
}

.projects-page .projects-heading h1.project-archive-title,
.project-startup .project-archive-title {
  color: var(--project-shell-text);
  font: 600 clamp(17px, 1.55vw, 22px)/1.3 var(--nov05-font-data);
  letter-spacing: .08em;
}

.project-cover-header .project-header-context strong { font-size: 22px; }
.project-cover-header .project-header-context span,
.project-cover-header .project-header-date { font: 13px/1.3 var(--nov05-font-data); }

.project-cover-header .project-header-actions > .icon-button {
  width: 34px;
  height: 34px;
}

.projects-page :is(.project-daily-kicker, .project-daily-note, .projects-heading-aside-head) {
  color: var(--appearance-secondary);
  font: 13px/1.5 var(--nov05-font-data);
  letter-spacing: 0;
}

.projects-page .projects-heading-aside { min-width: min(360px, 100%); }

.projects-page .projects-heading .primary-button {
  min-height: 40px;
  padding-inline: 12px;
  border-color: transparent;
  background: var(--appearance-accent);
  color: var(--appearance-accent-ink);
  font: 600 14px/1.25 var(--nov05-font-data);
}

.projects-page .projects-heading .primary-button:hover { background: var(--appearance-accent-deep); }

.projects-page .project-search {
  min-height: 40px;
  background: var(--appearance-surface);
  border-color: var(--appearance-line);
}

.projects-page .project-search input { font: 14px/1.35 var(--nov05-font-data); }
.projects-page .project-search input::placeholder { color: var(--appearance-muted); opacity: 1; }

.projects-page :is(.project-filters, .project-org-scope) button {
  color: var(--appearance-secondary);
  font: 13px/1.3 var(--nov05-font-data);
}

.projects-page :is(.project-filters, .project-org-scope) button.active {
  color: var(--appearance-ink);
  border-bottom-color: var(--appearance-accent);
}

.projects-page :is(.project-filters, .project-org-scope) button:enabled:hover {
  color: var(--appearance-ink);
  background: var(--appearance-hover);
}

.projects-page .project-status-flyout {
  border-color: var(--appearance-line);
  background: var(--appearance-surface);
}

.projects-page .project-card {
  border: 1px solid var(--appearance-line);
  border-radius: 12px;
  background: var(--appearance-surface);
}

.projects-page .project-card .project-cover-visual {
  border-radius: 11px 11px 0 0;
  background: #d8d8d2;
}
.projects-page .project-card .project-menu-pop { top: 70px; }

.project-cover-visual[data-cover-sheet="01"] { --cover-sheet: url("../assets/project-cover-sketches/classical-01.webp"); }
.project-cover-visual[data-cover-sheet="02"] { --cover-sheet: url("../assets/project-cover-sketches/classical-02.webp"); }

.projects-page .project-cover-visual[data-cover-sheet]::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  box-shadow: none;
  transform: none;
  background: var(--cover-sheet) var(--cover-position) / 300% 300% no-repeat;
  pointer-events: none;
}

.projects-page .project-cover-visual[data-cover-sheet]::after {
  background: #171b1a;
  opacity: 0;
}

.projects-page .project-card:is(:hover, :focus-within, .is-expanded) .project-cover-visual[data-cover-sheet]::after {
  opacity: .87;
}

.projects-page .project-info-band {
  border-top: 1px solid var(--appearance-line);
  border-radius: 0 0 11px 11px;
  background: var(--appearance-surface);
}

.projects-page .project-card .project-state {
  padding: 4px 6px;
  border-radius: 4px;
  background: #272b2a;
  color: #f1f3ed;
}
.projects-page .project-card .project-state > span { background: currentColor; }

.projects-page .project-card .project-name { font-size: 18px; }
.projects-page .project-card .project-meta span,
.projects-page .project-card-index { color: var(--appearance-secondary); font: 12px/1.35 var(--nov05-font-data); }
.projects-page .project-card .project-hover-data { background: var(--appearance-chip); }
.projects-page .project-card .project-hover-data :is(em, strong) { color: var(--appearance-secondary); }

.app-frame:has(.projects-page) > .toast {
  border: 1px solid var(--appearance-line);
  background: var(--appearance-surface);
  color: var(--appearance-ink);
}

.project-cover-header :is(.icon-button, .project-header-context):focus-visible,
.projects-page :is(button, [data-open-project]):focus-visible {
  outline: 2px solid var(--appearance-accent);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  html[data-argus-theme] .app-frame:has(.projects-page) .project-cover-header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 12px;
    height: auto;
    gap: 5px 8px;
  }
  .project-cover-header .project-header-actions { justify-self: end; }
  .projects-page .projects-heading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    padding-top: 22px;
  }
  .projects-page .projects-heading-aside { width: 100%; min-width: 0; }
  .projects-page .project-toolbar { margin-top: 22px; }
}

@media (max-width: 560px) {
  .projects-page :is(.projects-heading, .project-toolbar, .project-grid) { width: 100%; }
  .projects-page .project-grid { grid-template-columns: minmax(0, 1fr); }
  .projects-page .project-org-scope { flex-wrap: wrap; }
  .projects-page .project-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .projects-page .project-search { width: 100%; flex: 0 0 auto; }
  .projects-page .project-search input { font-size: 16px; }
  .projects-page .project-card .project-name { font-size: 19px; }
}

@media (pointer: coarse) {
  .project-cover-header .project-header-actions > .icon-button { width: 44px; height: 44px; }
  .projects-page .projects-heading .primary-button { min-height: 44px; }
  .projects-page .project-card:hover:not(.is-expanded),
  .projects-page .project-card:focus-within:not(.is-expanded) {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .projects-page .project-card:is(:hover, :focus-within, :active, .is-expanded) { transform: none; }
  .projects-page .project-card .project-menu {
    top: 34px;
    right: 6px;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
  }
  .projects-page .project-card .project-menu-pop { top: 81px; }
  .projects-page .project-other-filter:not(.is-touch-open) .project-status-flyout { visibility: hidden; }
  .projects-page .project-other-filter.is-touch-open .project-status-flyout { opacity: 1; visibility: visible; transform: none; }
  .projects-page .project-status-flyout button { min-height: 44px; }
}