:root {
  --bg:     #fcfcfa;
  --ink:    #121417;
  --muted:  #767b84;
  --rule:   #e5e4de;
  --accent: #0b7285;
  --serif:  "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
  --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #101113;
    --ink:    #e8e6e1;
    --muted:  #8a8d94;
    --rule:   #26282c;
    --accent: #3fb8b0;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--serif);
  margin: 0;
  padding: 3rem 1.5rem 8rem;
  display: flex;
  justify-content: center;
}

main { width: 100%; max-width: 36rem; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--muted);
}

a:hover { text-decoration-color: var(--ink); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0 0 3rem;
  border-bottom: 1px solid var(--rule);
}

.nav a {
  margin-bottom: -1px;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:hover { color: var(--ink); }

.handle {
  font: 500 19px/1 var(--mono);
  letter-spacing: -0.01em;
  margin: 0;
}

.zero {
  color: var(--accent);
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1;
}

.tagline {
  color: var(--muted);
  margin: 0.65rem 0 0;
}

.intro { margin: 2.25rem 0 0; }

.label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.5rem 0 2rem;
}

.entry {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.25rem;
  margin-bottom: 1.6rem;
}

.designator {
  font: 500 13px/1.9 var(--mono);
  color: var(--muted);
}

.name { margin: 0; font-weight: 600; }

.name-path { font: 500 15px/1.75 var(--mono); }

.desc { margin: 0.15rem 0 0; color: var(--muted); }

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

.links li { margin-bottom: 0.5rem; }

.links .site {
  font: 400 13px/1.9 var(--mono);
  color: var(--muted);
  display: inline-block;
  width: 6.5rem;
}

article { margin-bottom: 3.25rem; }

.byline {
  font-size: 16px;
  color: var(--muted);
  margin: 0.9rem 0 0;
}

.blurb { margin: 1.5rem 0 0; }

.lede { margin: 0 0 3.25rem; }

main > .blurb:first-child { margin-top: 0; }

.recipe {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 0;
}

.recipe th {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding-bottom: 0.7rem;
}

.recipe td { padding: 0.6rem 0; }

.recipe th,
.recipe tr:not(:last-child) td { border-bottom: 1px solid var(--rule); }

.recipe .amount {
  font: 500 14px var(--mono);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.poem {
  font: 400 16px/1.7 var(--serif);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 1rem 0 0;
}

@media (max-width: 34rem) {
  body { padding: 2.5rem 1.25rem 5rem; }
  .entry { grid-template-columns: 1fr; gap: 0.15rem; }
  .designator { line-height: 1.5; }
  .name-path { font-size: 14px; overflow-wrap: anywhere; }
  .links .site { width: auto; margin-right: 0.75rem; }
  .nav { gap: 0.9rem 1.1rem; margin-bottom: 2.5rem; }
  .poem, .byline { font-size: 15px; }

  .recipe .amount { white-space: normal; }
  .nav a { font-size: 11px; letter-spacing: 0.08em; padding-bottom: 0.55rem; }
}