/* adamzuckerman.com - one stylesheet. Tokens first, then layout, then components.
   ---------------------------------------------------------------------------
   THE DIRECTION, so a later change knows what it is changing (Adam, 10 Sep 2026):
   modelled on tobi.lutke.com. One narrow centred column. No navigation bar: the
   name at the top is plain text, and the list of pages lives in the body of the
   home page and again, quietly, in the footer. No cards, no shadows, no logo
   images. Things that are lists are typeset as lists, with the fixed fact in a
   left column and the sentence on the right.

   If you find yourself adding a border-radius, a box-shadow or a second accent
   colour, you are leaving the direction rather than extending it.
   --------------------------------------------------------------------------- */
:root {
  --ground: #fcfcfa;   /* warm off-white, a touch of the navy's opposite */
  --ink:    #16181d;
  --muted:  #6b6f7a;
  --rule:   #e4e2dc;
  --link:   #14213d;   /* the brand navy, carrying links rather than headings */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col: 34rem;        /* about 65 characters at the body size */
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1115;
    --ink:    #e8e6e1;
    --muted:  #969aa5;
    --rule:   #262932;
    --link:   #9db8ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--sans);
  padding-inline: 1.25rem;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
p { margin: 0; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ground); padding: .75rem 1rem; }
.skip:focus { left: 1rem; z-index: 10; }

/* ---- the column ----------------------------------------------------------
   Every page is this one shape. Vertical rhythm comes from the flex gap, so a
   block never has to remember its own margins and two blocks never collapse
   into each other. */
.sheet {
  max-width: var(--col);
  margin: 0 auto;
  padding-block: 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

/* ---- masthead. Plain text, not a wordmark. ------------------------------- */
.name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
.name a { color: var(--ink); text-decoration: none; }
.name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.name em { display: block; font-style: normal; font-weight: 400; color: var(--muted); }

/* ---- prose --------------------------------------------------------------- */
.prose { display: flex; flex-direction: column; gap: 1.15rem; }
.prose > h2 { margin-top: 1.6rem; }
.prose > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.15rem; }
.prose li { margin-bottom: .35em; }
.prose li:last-child { margin-bottom: 0; }
.prose img { display: block; margin: .5rem 0; }
.prose blockquote { margin: 0; padding-left: 1.15rem; border-left: 2px solid var(--rule); color: var(--muted); }
.lede { font-size: 1.1875rem; line-height: 1.5; }

h1 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
/* Section labels, not headlines. The page has one voice and the labels stay out
   of its way, which is what lets the column read as one piece of writing. */
h2, h3 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  text-wrap: balance;
}

/* ---- a block: a label with things under it -------------------------------- */
.block { display: flex; flex-direction: column; gap: 1.15rem; }

/* ---- dated rows ----------------------------------------------------------
   The fixed fact on the left, the sentence on the right. This is what turns a
   run of bold paragraphs into something you can run your eye down. */
.rows { display: flex; flex-direction: column; margin: 0; }
.row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: .95rem;
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row dt {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  padding-top: .28em;
  font-variant-numeric: tabular-nums;
}
.row dd { margin: 0; }
.row dd b { font-weight: 600; }
.row dd span { display: block; color: var(--muted); font-size: .9375rem; margin-top: .1rem; }
@media (max-width: 32rem) {
  .row { grid-template-columns: 1fr; gap: .15rem; }
  .row dt { padding-top: 0; }
}

/* ---- the site index. This replaces the navigation bar. ------------------- */
.index { display: flex; flex-direction: column; }
.index a {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: .8rem;      /* two lines plus this clears the 44px floor */
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.index a:last-child { border-bottom: 1px solid var(--rule); }
.index a:hover b { text-decoration: underline; text-underline-offset: .18em; }
.index b { font-weight: 500; }
.index span { color: var(--muted); font-size: .9375rem; }
@media (max-width: 32rem) {
  .index a { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---- named lists. What used to be the logo wall. -------------------------
   Adam's call, 10 Sep 2026: names, not marks. A grid of logos invites the
   reader to assume the most flattering relationship for every one of them, and
   the headings in data/logos.yml say what each actually was. Set as text, the
   heading and the names read as one sentence and the claim stays honest. */
.names { color: var(--muted); }
.names b { font-weight: 400; color: var(--ink); }

/* ---- quotes -------------------------------------------------------------- */
.quote { margin: 0; padding-left: 1.15rem; border-left: 2px solid var(--rule); }
.quote p { font-size: 1rem; }
.quote cite {
  display: block; margin-top: .55rem; font-style: normal;
  font-size: .875rem; color: var(--muted);
}
.quotes { display: flex; flex-direction: column; gap: 1.6rem; }

/* ---- the book's facts ---------------------------------------------------- */
.factlist { margin: 0; }
.factlist > div {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1.5rem;
  padding-block: .8rem; border-top: 1px solid var(--rule);
}
.factlist > div:last-child { border-bottom: 1px solid var(--rule); }
.factlist dt {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--muted); padding-top: .2em;
}
.factlist dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 32rem) {
  .factlist > div { grid-template-columns: 1fr; gap: .15rem; }
  .factlist dt { padding-top: 0; }
}

/* ---- writing list -------------------------------------------------------- */
.postlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.postlist li { border-top: 1px solid var(--rule); }
.postlist li:last-child { border-bottom: 1px solid var(--rule); }
.postlist a {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: .8rem; color: var(--ink); text-decoration: none;
}
.postlist a:hover { text-decoration: underline; text-underline-offset: .18em; }
.postlist time { color: var(--muted); font-size: .875rem; font-family: var(--mono); white-space: nowrap; }

/* ---- footer -------------------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--muted);
}
/* Inline-block with vertical padding, so a link in the footer is a target a
   finger can actually hit. Sized by the pointer floor, not by a breakpoint. */
.foot a { color: var(--muted); display: inline-block; padding-block: .65rem; }
.foot p { padding-block: .65rem; }

.back { font-size: .9375rem; }

/* ---- the book's subtitle -------------------------------------------------
   The only serif on the site, and it is here because the object is a book.
   Do not spread it to other pages: the plainness elsewhere is the point. */
.book__sub {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--muted);
  max-width: 22ch;
}