/* Proteus site — zine-paper (light) / atlas night-print (dark).
   One chroma anchor (the brand green); surface colors are data channels shared with the
   fleet atlas: notes=ultramarine, tools=signal orange, skills=leaf, instructions=violet. */

:root {
  --bg:#F2EEE3; --panel:#FAF7EF; --ink:#211E17; --soft:#7A7263; --dim:#A8A091;
  --rule:#DCD5C4; --anchor:#2E5D43; --anchor-hi:#3E7A58; --anchor-ink:#F4F1E8;
  --bad:#A8402E;
  --s-notes:#4F6DF5; --s-tools:#E8833A; --s-skills:#3FA96E; --s-instr:#9A7BD6;
  --s-none:#D8D1C0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0B0A09; --panel:#141210; --ink:#F4EFE6; --soft:#9C948A; --dim:#5C564E;
    --rule:#2A2621; --anchor:#7FB598; --anchor-hi:#9CCBB0; --anchor-ink:#10140F;
    --bad:#E86A50;
    --s-none:#3A362F;
  }
}
* { box-sizing:border-box; margin:0 }
body { background:var(--bg); color:var(--ink);
  font:16px/1.65 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased }
.mono { font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums; font-size:13px }
.micro { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); font-family:"SF Mono",ui-monospace,Menlo,monospace }
.wrap { max-width:920px; margin:0 auto; padding:28px 22px }
a { color:var(--anchor); text-decoration:none }
a:hover { text-decoration:underline; text-underline-offset:3px }

header.site { display:flex; align-items:center; gap:14px; padding:16px 22px;
  border-bottom:1px solid var(--rule) }
header.site img { height:30px; background:#fff; padding:2px;
  border:1px solid var(--rule) }
header.site .name { font-weight:400; letter-spacing:.22em; font-size:13px;
  font-family:"SF Mono",ui-monospace,monospace }
header.site nav { margin-left:auto; display:flex; gap:20px }
header.site nav { gap:10px; align-items:center }
header.site nav a { color:var(--soft) }

.hero { text-align:center; padding:11vh 22px 8vh }
.hero .kicker { margin-bottom:26px }
.hero img.logo { width:150px; max-width:46vw; background:#fff; padding:16px;
  border:1px solid var(--rule); box-shadow:0 1px 0 var(--rule) }
.hero h1 { font-size:clamp(30px,4.6vw,52px); font-weight:400; line-height:1.12;
  margin:30px auto 14px; max-width:20ch; text-wrap:balance }
.hero h1 em { font-style:italic; color:var(--anchor-hi) }
.hero .slog { color:var(--soft); font-size:15px; letter-spacing:.05em }
.hero .cta { margin-top:38px; display:flex; gap:14px; justify-content:center;
  flex-wrap:wrap }
.btn { display:inline-block; padding:10px 22px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; font-family:"SF Mono",ui-monospace,monospace;
  border:1px solid var(--anchor); color:var(--anchor) }
.btn.primary { background:var(--anchor); color:var(--anchor-ink) }
.btn:hover { text-decoration:none; background:var(--anchor-hi); color:var(--anchor-ink);
  border-color:var(--anchor-hi) }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px }
.card { border-top:1px solid var(--ink); padding-top:14px }
.card h3 { margin-bottom:10px }
.card p, .card { font-size:14.5px; color:var(--ink) }
h2 { font-size:15px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  font-family:"SF Mono",ui-monospace,monospace; color:var(--soft);
  margin:64px 0 18px; }
h3 { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); font-weight:400;
  font-family:"SF Mono",ui-monospace,monospace }

.print { border:1px solid var(--rule); background:var(--panel); padding:14px }
.print img { display:block; max-width:100%; }

label { display:block; margin:12px 0 5px }
label, .muted { font-size:12px; color:var(--soft);
  font-family:"SF Mono",ui-monospace,monospace; letter-spacing:.04em }
input, select, textarea { width:100%; padding:8px 10px; border:1px solid var(--rule);
  border-radius:0; background:var(--panel); color:var(--ink);
  font:14px/1.5 "SF Mono",ui-monospace,Menlo,monospace }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--anchor) }
textarea { min-height:64px }
.row { display:flex; gap:12px } .row > * { flex:1 }

.formcard { border-top:1px solid var(--ink); padding:14px 0 22px; margin:26px 0 0 }

.tag { display:inline-block; padding:1px 9px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-family:"SF Mono",ui-monospace,monospace;
  border:1px solid var(--rule); color:var(--soft) }
.tag.done { color:var(--anchor); border-color:var(--anchor) }
.tag.bad { color:var(--bad); border-color:var(--bad) }

table { width:100%; border-collapse:collapse }
th,td { text-align:left; padding:9px 12px; border-top:1px solid var(--rule);
  font-variant-numeric:tabular-nums; font-size:14px }
th { border-top:1px solid var(--ink); color:var(--soft); font-weight:400; font-size:11px;
  text-transform:uppercase; letter-spacing:.14em;
  font-family:"SF Mono",ui-monospace,monospace }
td.mono, td .mono { font-size:12.5px }

.bar { height:4px; background:var(--rule); min-width:100px }
.bar i { display:block; height:4px; background:var(--anchor) }
.bar.err i { background:var(--bad) }

/* identity fabric: one cell per episode, colored by the surface grown most */
.fabric { display:flex; gap:2px; align-items:center }
.fabric i { width:12px; height:16px; background:var(--s-none); display:block }
.legend { display:flex; gap:14px 18px; margin:14px 0 6px; align-items:center;
  flex-wrap:wrap }
.legend .cap { flex-basis:100% }
.tblwrap { overflow-x:auto }
.legend .sw { display:inline-block; width:10px; height:10px; margin-right:6px;
  vertical-align:baseline }

pre.cmd { background:var(--panel); border:1px solid var(--rule); padding:16px;
  overflow-x:auto; font:12.5px/1.6 "SF Mono",ui-monospace,Menlo,monospace }
.banner { border-left:2px solid var(--anchor); padding:8px 14px; margin:14px 0;
  font-size:12.5px; color:var(--soft);
  font-family:"SF Mono",ui-monospace,monospace }
.banner.bad { border-left-color:var(--bad); color:var(--bad) }

footer.site { color:var(--dim); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-family:"SF Mono",ui-monospace,monospace;
  text-align:center; padding:44px 0 30px; border-top:1px solid var(--rule);
  margin-top:72px }
footer.site a { color:var(--dim) }
footer.site .site-counter { display:block; width:max-content; margin:14px auto 0;
  line-height:0; opacity:.9 }
footer.site .site-counter:hover { opacity:1; text-decoration:none }
footer.site .site-counter img { display:block; height:20px; width:auto }

/* explicit theme choice overrides the OS preference, both ways */
:root[data-theme="dark"] {
  --bg:#0B0A09; --panel:#141210; --ink:#F4EFE6; --soft:#9C948A; --dim:#5C564E;
  --rule:#2A2621; --anchor:#7FB598; --anchor-hi:#9CCBB0; --anchor-ink:#10140F;
  --bad:#E86A50; --s-none:#3A362F;
}
:root[data-theme="light"] {
  --bg:#F2EEE3; --panel:#FAF7EF; --ink:#211E17; --soft:#7A7263; --dim:#A8A091;
  --rule:#DCD5C4; --anchor:#2E5D43; --anchor-hi:#3E7A58; --anchor-ink:#F4F1E8;
  --bad:#A8402E; --s-none:#D8D1C0;
}
:root { --logo-accent: var(--anchor-hi) }

/* phones: the header's mark + name + three nav pills need 404px in one row, so let it
   wrap rather than push the page sideways */
@media (max-width:760px) {
  header.site { flex-wrap:wrap; gap:10px; padding:12px 16px }
  header.site .name { font-size:12px; letter-spacing:.16em }
  .wrap { padding:22px 16px }
  .row { flex-wrap:wrap }
  h2 { margin-top:44px }
}

/* the mark is a vector that inherits ink colour — no plate, no white box */
.mark { color: var(--ink); display: block; overflow: visible }
header.site .mark { height: 26px; width: auto }
.hero .mark, .hero-sec .mark { height: 116px; width: auto; margin: 0 auto }
.hero-sec .mark.lockup, .hero .mark.lockup { height: 150px }

/* theme toggle */
/* every nav control — links and the theme switch — wears the same pill */
#theme-btn, header.site nav a, #corner-nav a {
  background: none; border: 1px solid var(--rule); color: var(--soft);
  font: 11px/1 "SF Mono", ui-monospace, monospace; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 10px; cursor: pointer;
  text-decoration: none; display: inline-block }
#theme-btn:hover, header.site nav a:hover, #corner-nav a:hover {
  color: var(--anchor); border-color: var(--anchor); text-decoration: none }