:root {
  color-scheme: light;
  --font-ui: Tahoma, Verdana, Arial, sans-serif;
  --font-mono: "Lucida Console", "Courier New", monospace;
  --font-accent: "Lucida Console", "Courier New", monospace;
  --font-serif: "Times New Roman", Times, serif;
  --paper: #ffffff;
  --paper-gray: #e5ebf4;
  --silver: #c0c0c0;
  --silver-dark: #758096;
  --black: #000000;
  --blue: #003399;
  --navy: #001b64;
  --bright-blue: #0000cc;
  --visited: #551a8b;
  --cyan: #007f9e;
  --green: #006600;
  --yellow: #ffffcc;
  --red: #990000;
  --text: #000000;
}

* { box-sizing: border-box; }

html {
  background: #b8c4d5;
  color: var(--text);
  font-family: var(--font-ui);
}

body {
  min-width: 320px;
  margin: 0;
  background: #b8c4d5;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
}

a { color: var(--bright-blue); text-decoration: underline; }
a:visited { color: var(--visited); }
a:hover, a:focus { color: var(--red); }

.shell {
  width: calc(100vw - 16px);
  max-width: none;
  margin: 8px;
}

.mast {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 10px;
  border: 1px solid #00164b;
  border-top-color: #84b7ff;
  border-left-color: #84b7ff;
  border-bottom: 2px solid #50cde5;
  background: linear-gradient(180deg, #2775df 0%, #0642a0 48%, #001c60 100%);
}

.brand {
  display: block;
  flex: 0 0 auto;
  color: #ffffff;
  font: bold 32px/1.1 "Courier New", monospace;
  letter-spacing: .12em;
  border-bottom: 2px solid #ffffcc;
  padding: 0 3px 3px;
  text-decoration: none;
}

.brand:visited { color: #ffffff; }

.tag {
  max-width: 310px;
  padding: 4px 8px;
  border: 1px outset #c8e0ff;
  background: #07357e;
  color: #ffffff;
  font: 12px/1.25 var(--font-serif);
  text-align: right;
}

.tag strong { color: #b9f3ff; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 27px;
  padding: 2px;
  border: 1px solid var(--black);
  border-top: 0;
  background: #123d83;
}

.nav-links { display: flex; flex-wrap: wrap; gap: 2px; }

.nav a {
  display: inline-block;
  padding: 3px 9px;
  border: 1px outset #e8f1ff;
  background: linear-gradient(180deg, #f8fbff, #c6d4e8);
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.nav a:visited { color: var(--visited); }
.nav a:hover, .nav a:focus { background: var(--yellow); color: var(--navy); }

.home-page, .panel {
  margin-top: 8px;
  border: 1px solid var(--black);
  background: var(--paper);
}

.home-page { overflow: hidden; }
.panel { padding: 10px; }
.page-panel { min-height: 180px; }

.lead-story {
  padding: 9px 11px 11px;
  border-bottom: 1px solid var(--silver-dark);
  background: var(--paper);
}

.section-label {
  display: inline-block;
  margin: 0 0 5px;
  padding: 1px 4px;
  border: 1px solid var(--black);
  background: var(--yellow);
  color: var(--black);
  font: 10px/1.2 var(--font-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--green);
  font: 10px/1.2 var(--font-accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 7px; }
h2 { margin: 12px 0 6px; }
h3 { margin: 9px 0 4px; }

.story-title,
.page-panel > h1,
.record-title {
  color: var(--navy);
  font-family: var(--font-serif);
  font-weight: bold;
}

.story-title { margin: 0 0 5px; font-size: 25px; line-height: 1.08; }
.page-panel > h1, .record-title { font-size: 25px; line-height: 1.1; }
.lead-copy { max-width: 1080px; margin-bottom: 6px; font-size: 15px; }
.meta { color: #444444; font: 11px/1.35 var(--font-mono); }
.last-updated { margin: 4px 0 0; color: #333333; font: 10px var(--font-mono); }

.home-columns {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(200px, 260px);
  align-items: stretch;
}

.home-column {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--silver-dark);
}

.home-column:last-child { border-right: 0; }
.home-column > .section-label { margin-bottom: 6px; }

.project-index, .quick-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-index li, .quick-links li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--silver-dark);
}

.project-index a { font-weight: bold; }
.project-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.project-row .status { float: none; flex: 0 0 auto; }

.headline-list {
  margin: 0;
  padding: 0 0 0 17px;
}

.headline-list li { padding: 3px 0 5px; }
.headline-meta { display: block; color: var(--navy); font: 10px var(--font-accent); }
.headline-list + .section-label { margin-top: 10px; }

.status-box {
  padding: 6px;
  border: 2px inset #ffffff;
  background: #e5effc;
  color: var(--navy);
  font: 11px/1.55 var(--font-mono);
}

.quick-links { margin-bottom: 10px; }
.quick-links li::before { content: "▶ "; color: var(--navy); font-size: 9px; }

.directory-list { border-top: 1px solid var(--silver-dark); }

.project-entry {
  padding: 7px 5px 8px;
  border-bottom: 1px dotted var(--silver-dark);
}

.project-entry:nth-child(odd) { background: #f3f7fc; }
.project-entry:last-child { border-bottom: 0; }
.project-entry h2 { margin: 0 0 3px; font-size: 19px; line-height: 1.15; }
.project-entry p { margin: 0; max-width: 680px; }
.entry-meta { margin: 0 0 4px; }

.record-head { min-height: 30px; }
.record-head .status { margin-top: 2px; }
.page-panel h2 {
  padding: 3px 5px;
  border-bottom: 1px dotted var(--silver-dark);
  border-top: 1px solid #ffffff;
  background: #e5effc;
  color: var(--navy);
  font: bold 12px var(--font-mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.page-panel ul { padding-left: 20px; }
.page-panel hr { margin: 8px 0; border: 0; border-top: 1px solid var(--silver-dark); }
.notice { padding: 7px 9px; border-left: 4px solid var(--blue); background: var(--yellow); }
.error { border-left-color: var(--red); color: var(--red); }

.feed {
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed li {
  padding: 8px 0 9px;
  border-bottom: 1px dotted var(--silver-dark);
}

.feed li:last-child { border-bottom: 0; }
.date { display: block; color: var(--navy); font: 10px/1.25 var(--font-accent); }
.feed code { margin-left: 4px; }
.feed p { margin: 5px 0 0; }
.compact-feed li { padding: 4px 0; }
.compact-feed .date { display: block; }

.status {
  display: inline-block;
  padding: 1px 4px;
  border: 1px solid currentColor;
  background: var(--paper);
  font: 10px/1.2 var(--font-accent);
  white-space: nowrap;
}

.ACTIVE { color: var(--green); }
.WIP { color: #996600; }
.ARCHIVED { color: #555555; }
.STABLE { color: var(--cyan); }
.RESEARCH { color: #800080; }

.footer {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--black);
  background: var(--navy);
  color: #ffffff;
  font: 10px/1.4 var(--font-mono);
}

.footer a, .footer a:visited { color: #ffffff; }
.footer-links { margin: 0 0 3px; }

.field { margin: 8px 0; }
.field label { display: block; margin-bottom: 2px; color: var(--navy); font: 11px var(--font-mono); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 5px;
  border: 2px inset #ffffff;
  background: #ffffe8;
  color: var(--black);
  font: inherit;
}

.field textarea { min-height: 105px; resize: vertical; }

button {
  padding: 3px 8px;
  border: 2px outset #ffffff;
  background: linear-gradient(180deg, #f4f6fa, #b8c4d5);
  color: var(--black);
  cursor: pointer;
  font: inherit;
}

button:hover, button:focus { background: var(--yellow); color: var(--navy); }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 5px; border-bottom: 1px dotted var(--silver-dark); text-align: left; vertical-align: top; }
th { color: var(--navy); font: bold 11px var(--font-mono); }
code { padding: 0 2px; background: var(--yellow); color: var(--navy); font-family: var(--font-mono); }
.table-wrap { overflow-x: auto; }
.inline { display: inline; }
.console-bar { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.console-bar form { margin: 0; }

@media (max-width: 780px) {
  .shell { width: calc(100vw - 8px); max-width: none; margin: 4px; }
  .home-columns { display: block; }
  .home-column { border-right: 0; border-bottom: 1px solid var(--silver-dark); }
  .home-column:last-child { border-bottom: 0; }
}

@media (max-width: 1100px) and (min-width: 781px) {
  .home-columns { grid-template-columns: minmax(190px, 24%) minmax(0, 1fr); }
  .home-column:last-child { grid-column: 1 / -1; border-top: 1px solid var(--silver-dark); border-right: 0; }
}

@media (max-width: 560px) {
  .mast { display: block; }
  .tag { margin-top: 6px; text-align: left; }
  .nav { display: block; }
  .story-title, .page-panel > h1, .record-title { font-size: 22px; }
  .lead-copy { font-size: 14px; }
  .console-bar { display: block; }
  .console-bar form { margin: 6px 0 0; }
}