/* Dominika Michalska, v3.
   Plan
   - Ground: pure white. Ink: black. One red, and it only ever means "not built" or "not yet known".
   - Type: the system pair, New York (serif) for reading and SF (sans) for the interface. One scale, one measure.
   - Layout: a margin axis. Section titles live in a narrow left column, content in a measure of about 62 characters.
     On narrow screens the margin collapses into a single column.
   - The one memorable thing: the Not-Built List, set in type with a red strike. Everything else stays quiet. */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --text: #1f1f1f;
  --soft: #595959;      /* 7.0:1 */
  --faint: #6e6e6e;     /* 5.1:1, only for small meta */
  --rule: #e7e7e7;
  --field: #b8b8b8;
  --red: #c42d18;       /* 5.6:1 */
  --mark: #fff0a8;
  --serif: ui-serif, "New York", "Iowan Old Style", "Charter", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --axis: 8.5rem;       /* width of the margin column */
  --gap: 2rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0b0b0b; --ink: #ffffff; --text: #e6e6e3; --soft: #b4b4b0; --faint: #93938f; --rule: #262625; --field: #52524f; --red: #ff7a62; --mark: #4a4210; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0b0b0b; --ink: #ffffff; --text: #e6e6e3; --soft: #b4b4b0; --faint: #93938f; --rule: #262625; --field: #52524f; --red: #ff7a62; --mark: #4a4210; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.1875rem/1.6 var(--serif);               /* 19px */
  font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; hanging-punctuation: first;
}
::selection { background: var(--ink); color: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--bg); padding: .6rem .9rem; border-radius: 6px; font: 500 .9375rem/1 var(--sans); }
.skip:focus { top: .75rem; }

.page { width: 100%; max-width: 47rem; margin: 0 auto; padding: 1.75rem 1.5rem 6rem; }

/* header: wordmark left, navigation right, both on the baseline */
header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 2rem; padding-bottom: 1.25rem; margin-bottom: 4.5rem; font: 400 .9375rem/1.4 var(--sans); }
header .name { font: 600 1.0625rem/1.4 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -.005em; }
header nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
header nav a { color: var(--soft); text-decoration: none; padding-block: .5rem; }
header nav a:hover { color: var(--ink); }
header nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .5em; }

/* type scale: 13 / 15 / 19 / 22 / 28 / 44-68 */
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font: 600 clamp(2.5rem, 7.2vw, 4.25rem)/1.02 var(--serif); letter-spacing: -.028em; margin-bottom: 2rem; }
h2 { font: 600 .9375rem/1.45 var(--sans); letter-spacing: 0; }
h3 { font: 600 1.1875rem/1.35 var(--serif); letter-spacing: -.005em; }
p { margin: 0 0 1.1rem; text-wrap: pretty; }
.lede { font-size: 1.375rem; line-height: 1.5; color: var(--text); letter-spacing: -.005em; }
.small { font: 400 .9375rem/1.5 var(--sans); color: var(--soft); }
.meta { font: 400 .8125rem/1.5 var(--sans); color: var(--faint); }
.prop { font: 400 .8125rem/1 var(--sans); letter-spacing: 0; color: var(--faint); margin-left: .6rem; vertical-align: .15em; white-space: nowrap; }
h1 .prop { display: block; margin: .9rem 0 0; vertical-align: baseline; }
.prop::before { content: "("; } .prop::after { content: ")"; }
mark.todo { background: var(--mark); color: inherit; padding: .05em .3em; border-radius: 2px; }
.note-label { font: 600 .8125rem/1.5 var(--sans); color: var(--soft); display: block; margin-bottom: .1rem; }
.note-label.red { color: var(--red); }
sup, sub { line-height: 0; }

/* the margin axis */
.cols { display: grid; grid-template-columns: var(--axis) minmax(0, 1fr); column-gap: var(--gap); }
.cols > h2, .cols > .margin { padding-top: .35rem; }
.indent { margin-left: calc(var(--axis) + var(--gap)); }
section { margin-top: 4.5rem; }
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .cols > h2, .cols > .margin { padding-top: 0; margin-bottom: .8rem; }
  .indent { margin-left: 0; }
  section { margin-top: 3.5rem; }
  header { margin-bottom: 3rem; }
  header nav { gap: 0 1.25rem; }
  header nav a { padding-block: .7rem; }
}

/* lists: plain rows */
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-top: 1px solid var(--rule); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list a { display: block; padding: 1rem 0 1.05rem; text-decoration: none; }
.list a:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.list p { margin: .1rem 0 0; color: var(--soft); font-size: 1.0625rem; line-height: 1.5; }
.list .meta { margin-top: .15rem; }

/* the example under the hero */
.example { margin-top: 3rem; padding-left: 1.25rem; border-left: 2px solid var(--ink); }
.example p:last-child { margin-bottom: 0; }

/* case file */
.casefile { padding: 2.25rem 0; border-top: 1px solid var(--rule); margin-top: 0; }
.casefile .margin h3 { font-size: 1.0625rem; }
.casefile .margin .meta { display: block; margin-top: .15rem; }
.casefile dl { margin: 0; }
.casefile dt { font: 600 .8125rem/1.5 var(--sans); color: var(--soft); margin-top: 1.1rem; }
.casefile dt:first-child { margin-top: 0; }
.casefile dt.red { color: var(--red); }
.casefile dd { margin: .1rem 0 0; }
.cf-foot { margin-top: 1.1rem; font: 400 .9375rem/1.5 var(--sans); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.group { margin-top: 5rem; }
.group h2 { margin-bottom: 0; }
.group + .casefile, .group + * { margin-top: 0; }

/* the not-built list: type as the visual */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: 2.5rem 0 2.25rem; border-top: 1px solid var(--rule); }
.ledger .nb { font: 600 clamp(1.5rem, 4.2vw, 2rem)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: .09em; margin: 0 0 1.4rem; text-wrap: balance; }
.ledger .block { margin: 0 0 1rem; }
.ledger .src { font: 400 .9375rem/1.5 var(--sans); margin: 0; }

/* tools */
.step { padding: 2rem 0; border-top: 1px solid var(--rule); margin-top: 0; }
.step .margin { font: 600 .9375rem/1.45 var(--sans); color: var(--ink); }
.step .q { font: 600 1.1875rem/1.35 var(--serif); color: var(--ink); margin-bottom: .6rem; }
.step ul { margin: 0 0 .9rem; padding-left: 1.15rem; }
.step li { margin-bottom: .25rem; padding-left: .1rem; }
.step .hint { color: var(--soft); font-size: 1.0625rem; }
fieldset { border: 0; padding: 0; margin: 1.1rem 0 0; min-width: 0; }
legend, .field label { font: 600 .8125rem/1.5 var(--sans); color: var(--soft); padding: 0; }
.ready { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; margin-top: .2rem; font: 400 .9375rem/1.4 var(--sans); }
.ready label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; cursor: pointer; }
.ready input { accent-color: var(--ink); width: 1.05rem; height: 1.05rem; margin: 0; }
.field { display: grid; gap: .35rem; margin-top: 1.1rem; }
textarea, input[type="text"], input[type="number"], input[type="email"] {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid var(--field); border-radius: 6px;
  background: transparent; color: var(--ink); font: 400 1rem/1.5 var(--sans); }
textarea { min-height: 5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
.output { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.output h2 { margin-bottom: 1rem; }
.output pre { margin: 0 0 1.25rem; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 6px; white-space: pre-wrap; word-break: break-word; font: 400 .8125rem/1.6 var(--mono); color: var(--text); max-height: 22rem; overflow: auto; }
.btn { font: 500 .9375rem/1 var(--sans); min-height: 3rem; padding: 0 1.4rem; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 6px; cursor: pointer; transition: opacity .15s ease; }
.btn:hover { opacity: .82; }
.status { font: 400 .9375rem/1.4 var(--sans); color: var(--soft); min-height: 1.4em; margin: .6rem 0 0; }
.buckets { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-variant-numeric: tabular-nums lining-nums; }
.buckets th { text-align: left; font: 600 .8125rem/1.5 var(--sans); color: var(--soft); padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--ink); }
.buckets td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.buckets td strong { font-weight: 600; color: var(--ink); }
.buckets td small { display: block; margin-top: .15rem; color: var(--soft); font-size: 1rem; line-height: 1.45; }
.buckets td.share { white-space: nowrap; width: 7rem; font-family: var(--sans); }
.buckets td.num { white-space: nowrap; width: 5.5rem; font: 400 1rem/1.5 var(--sans); padding-top: 1.45rem; }
.buckets input { width: 4.25rem; min-height: 2.5rem; padding: .35rem .5rem; display: inline-block; margin-right: .3rem; text-align: right; }
.warn { color: var(--red); font: 400 .9375rem/1.4 var(--sans); min-height: 1.4em; margin: 0 0 1rem; }
.inline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0 0 1rem; font: 400 1rem/1.4 var(--sans); }
.inline input { width: 6rem; }

/* the letter */
.letter p { margin-bottom: .9rem; }
.letter .status { margin: .5rem 0 0; min-height: 1.4em; }
.letter .signup + .status + .small { margin-bottom: 0; }
.signup { display: flex; gap: .5rem; margin: 1.25rem 0 0; max-width: 26rem; }
.signup input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .signup { flex-direction: column; } .signup .btn { align-self: flex-start; } }

figure { margin: 0 0 1.75rem; }
blockquote { margin: 0 0 .5rem; text-wrap: pretty; }
figcaption { font: 400 .875rem/1.4 var(--sans); color: var(--faint); }
dl.facts { margin: 0; } .facts dt { font: 600 .8125rem/1.5 var(--sans); color: var(--soft); margin-top: 1.1rem; } .facts dt:first-child { margin-top: 0; } .facts dd { margin: .1rem 0 0; }
.portrait { width: 6.5rem; border-radius: 6px; margin-bottom: 2rem; }

footer { margin-top: 6rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font: 400 .875rem/1.5 var(--sans); color: var(--faint); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; }
footer a { color: var(--soft); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { header nav, .letter, .skip { display: none; } body { font-size: 11pt; } }