b-mozz/reflow

1:root {2  --ink: #111;3  --paper: #f6f1e7;4  --rule: #111;5  --muted: #555;6}7 8* { box-sizing: border-box; }9 10html, body {11  background: var(--paper);12  color: var(--ink);13}14 15body {16  font-family: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;17  max-width: 640px;18  margin: 3rem auto 4rem;19  padding: 0 1.5rem;20  line-height: 1.5;21}22 23.masthead {24  border-top: 6px double var(--rule);25  border-bottom: 1px solid var(--rule);26  padding: 0.75rem 0 0.5rem;27  text-align: center;28}29 30.masthead h1 {31  font-family: "Didot", "Bodoni 72", "Playfair Display", "Georgia", serif;32  font-size: 3rem;33  font-weight: 900;34  letter-spacing: -0.02em;35  margin: 0;36  line-height: 1;37}38 39.masthead .dateline {40  font-variant: small-caps;41  letter-spacing: 0.18em;42  font-size: 0.78rem;43  color: var(--muted);44  margin-top: 0.4rem;45}46 47.lede {48  text-align: center;49  font-style: italic;50  color: var(--muted);51  margin: 1.25rem 0 2rem;52  font-size: 1rem;53}54.lede::before,55.lede::after { content: "—"; padding: 0 0.5rem; }56 57section.field {58  border-bottom: 1px solid var(--rule);59  padding: 0.9rem 0;60}61section.field:last-of-type { border-bottom: none; }62 63.label {64  font-variant: small-caps;65  letter-spacing: 0.14em;66  font-size: 0.75rem;67  color: var(--muted);68  margin-bottom: 0.35rem;69}70 71input[type="file"],72input[type="number"] {73  font: inherit;74  color: var(--ink);75  background: transparent;76  border: 0;77  padding: 0.2rem 0;78}79 80input[type="number"] {81  border-bottom: 1px solid var(--rule);82  width: 4em;83  text-align: center;84}85 86input[type="file"]::file-selector-button {87  font: inherit;88  background: transparent;89  border: 1px solid var(--rule);90  padding: 0.3rem 0.8rem;91  margin-right: 0.6rem;92  cursor: pointer;93  color: var(--ink);94}95 96button.primary {97  display: block;98  margin: 2rem auto 0;99  font: inherit;100  font-size: 1rem;101  font-variant: small-caps;102  letter-spacing: 0.18em;103  background: var(--ink);104  color: var(--paper);105  border: 0;106  padding: 0.7rem 2.5rem;107  cursor: pointer;108}109button.primary[disabled] { opacity: 0.5; cursor: progress; }110 111.progress {112  margin-top: 1.5rem;113  text-align: center;114  font-variant: small-caps;115  letter-spacing: 0.14em;116  font-size: 0.8rem;117  color: var(--muted);118}119 120.rule {121  height: 1px;122  background: var(--ink);123  width: 0;124  transition: width 120ms linear;125  margin-top: 0.4rem;126}127.rule.indeterminate {128  width: 100% !important;129  background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 24px);130  animation: march 1.2s linear infinite;131}132@keyframes march {133  from { background-position: 0 0; }134  to   { background-position: 24px 0; }135}136 137.hidden { display: none; }138 139footer {140  margin-top: 3rem;141  padding-top: 1rem;142  border-top: 1px solid var(--rule);143  text-align: center;144  font-size: 0.78rem;145  color: var(--muted);146  font-variant: small-caps;147  letter-spacing: 0.18em;148}149 150@media (prefers-color-scheme: dark) {151  :root {152    --ink: #e8e3d6;153    --paper: #14110d;154    --rule: #e8e3d6;155    --muted: #aaa39a;156  }157}158