/* The intelligence builder. A reading room: bone paper, graphite ink, Source Serif for the reading and Plex Mono for the
   apparatus. Two colours carry meaning and nothing else does: verdigris marks what is chosen, copper marks an essential
   type still undecided. Copper carries a signal and holds none of its own; verdigris is what copper becomes in use. */
@font-face { font-family: "Source Serif"; font-weight: 400; font-display: swap; src: url(fonts/Source-Serif-4-400.ttf) format("truetype"); }
@font-face { font-family: "Source Serif"; font-weight: 600; font-display: swap; src: url(fonts/Source-Serif-4-600.ttf) format("truetype"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/IBM-Plex-Mono-400.ttf) format("truetype"); }

:root {
  --paper: #efece3; --paper-2: #e7e3d7; --rule: #cfc9b9; --ink: #1f211e; --ink-2: #5d5f58; --ink-3: #8a8b82;
  --verdigris: #2f7a69; --verdigris-wash: #dfe9e3; --copper: #b4602a;
  --serif: "Source Serif", "Iowan Old Style", Georgia, serif; --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--serif); padding: 0 clamp(16px, 4vw, 56px); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--ink-3); }
a:hover { text-decoration-color: var(--verdigris); }
button { font: inherit; color: inherit; cursor: pointer; }
.mono, .masthead small, nav, .need, .num, .status, .ledger h2, .sources h2, footer, .passages cite, .aside { font-family: var(--mono); }

/* masthead */
.masthead { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 22px 0 18px; border-bottom: 1px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg { height: 46px; width: auto; }
.brand b { display: block; font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.brand small { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); }
nav { margin-left: auto; display: flex; gap: 22px; font-size: 12.5px; letter-spacing: .03em; }
nav a, nav button { border: 0; background: none; padding: 4px 0; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
nav a:hover, nav button:hover, nav a:focus-visible, nav button:focus-visible { color: var(--ink); border-bottom-color: var(--ink); outline: none; }

/* two columns: the types, and the ledger beside them */
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 0 clamp(28px, 4vw, 64px); }
.lede { max-width: 60ch; margin: 26px 0 8px; color: var(--ink-2); }

/* the eight types */
#types { list-style: none; margin: 0; padding: 0; }
.type { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); padding: 22px 0 20px; border-top: 1px solid var(--rule); }
body:not(.ready) .type { animation: rise .5s ease both; }
.type:first-child { border-top-color: var(--ink); }
.num { font-size: 12px; color: var(--ink-3); padding-top: 7px; letter-spacing: .04em; }
.type.open .num { color: var(--copper); }
.type h3 { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.25; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.need { font-size: 11px; font-weight: 400; letter-spacing: .06em; color: var(--ink-3); }
.type .about { margin: 4px 0 12px; color: var(--ink-2); max-width: 60ch; font-size: 16px; }
.els { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.el { position: relative; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; border: 1px solid var(--rule); background: transparent; border-radius: 2px; padding: 11px 14px 12px 34px; transition: border-color .15s, background-color .15s; }
.el::before { content: ""; position: absolute; left: 13px; top: 17px; width: 9px; height: 9px; border: 1px solid var(--ink-3); border-radius: 50%; }
.el[data-several]::before { border-radius: 1px; }
.el b { display: block; font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.el span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.42; color: var(--ink-2); }
.el:hover { border-color: var(--ink-3); background: var(--paper-2); }
.el:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 2px; }
.el[aria-pressed="true"] { border-color: var(--verdigris); background: var(--verdigris-wash); }
.el[aria-pressed="true"]::before { background: var(--verdigris); border-color: var(--verdigris); }

/* the ledger */
.ledger { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; padding: 26px 0 32px clamp(20px, 3vw, 36px); border-left: 1px solid var(--rule); }
.ledger h2, .sources h2 { margin: 0; font-size: 11.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.status { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.status.open { color: var(--copper); }
.status.done { color: var(--verdigris); }
.built { font-size: 21px; line-height: 1.45; margin: 14px 0 6px; }
.built:empty { display: none; }
.passages { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: p; }
.passages li { counter-increment: p; padding: 14px 0 14px 2.2em; border-top: 1px solid var(--rule); position: relative; }
.passages li.new { animation: rise .35s ease both; }
.passages li::before { content: counter(p); position: absolute; left: 0; top: 16px; font: 11.5px var(--mono); color: var(--verdigris); }
.passages blockquote { margin: 0; font-size: 16px; line-height: 1.5; }
.passages blockquote::before { content: "“"; } .passages blockquote::after { content: "”"; }
.passages cite { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

/* sources */
.sources { max-width: 900px; margin: 10px 0 40px; padding-top: 18px; border-top: 1px solid var(--ink); }
.sources ol { margin: 12px 0 0; padding-left: 1.4em; }
.sources li { margin: 0 0 8px; font-size: 16px; }
.sources li i { font-style: italic; }
.aside { font-size: 12px; color: var(--ink-3); max-width: 70ch; margin: 14px 0 0; }

footer { border-top: 1px solid var(--rule); padding: 16px 0 28px; font-size: 11.5px; color: var(--ink-3); }

@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 860px) {
  .sheet { grid-template-columns: 1fr; }
  .ledger { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--ink); padding: 22px 0 28px; }
  nav { margin-left: 0; width: 100%; }
  .type { grid-template-columns: 2.4em minmax(0, 1fr); }
  .els { grid-template-columns: 1fr; }
}