/* thisisdavekim.com
   Timeless type on a twelve-column grid: the Serif's Text cut for reading, set in its Book weight (the Text cut
   has no italics, so the display Serif lends its own); the Serif for titles, deks and display italics; the Grotesk for
   labels and navigation. The big uppercase titles stay in Jost.
   White paper and ink, and the Sea glass accents: cerulean links, sea-green notes, raspberry key phrases, brass signals.
   Dark mode follows the device. */

@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskRegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskSemibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskSemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("/assets/fonts/timeless/TimelessSans-GroteskBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("/assets/fonts/timeless/TimelessSerif-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-TextLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-TextBook.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-TextMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-TextSemibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-TextBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-BookItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Text"; src: url("/assets/fonts/timeless/TimelessSerif-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --sheet: #ffffff;          /* the Notebook and the home page's footer: the same white by day, a step lighter at night */
  --tint: #f1f1f0;
  --ink: #121212;
  --ink-2: #2a2a28;
  --soft: #444340;
  --muted: #67655f;          /* 5.8:1 on the paper */
  --rule: #e4e4e2;
  --link: #0f6a8f;           /* cerulean: links, underlines, hover, focus, the current page and tab */
  --note: #2c7a4b;           /* sea green: the Note label, section numbers and quote bars in notes */
  --key: #9b2c5f;            /* raspberry: key phrases on the Now page */
  --signal: #866a00;         /* brass: signals */
  /* the Penpals band and the principles */
  --band: #121212;
  --on-band: #ffffff;
  --on-band-2: #c9c7c1;
  --on-band-muted: #8c8a85;
  --band-label: #f2c230;
  --dim: #4a4743;
  --bubble: #ffffff;

  --text: "Timeless Text", Georgia, serif;
  --serif: "Timeless Serif", Georgia, serif;
  --sans: "Timeless Grotesk", system-ui, sans-serif;
  --display: "Jost", system-ui, sans-serif;

  --gut: clamp(20px, 3.4vw, 48px);
  --gap: clamp(16px, 1.7vw, 24px);
  --max: 1344px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --sheet: #181817;
    --tint: #1a1a19;
    --ink: #f2f0ea;
    --ink-2: #dad7cf;
    --soft: #b9b6ae;
    --muted: #9a978f;
    --rule: #2b2a28;
    --link: #6cc3e8;
    --note: #6fd09a;
    --key: #f28cb8;
    --signal: #e2c446;
    --band: #1f1f1e;
    --on-band: #f2f0ea;
    --on-band-2: #a9a69e;
    --on-band-muted: #8f8c85;
    --dim: #3a3936;
    --bubble: #242423;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/31px var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--link); }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
main:focus { outline: none; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 8px 12px; background: var(--ink); color: var(--paper); font: 500 13px/20px var(--sans); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.label { font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
a.label { text-decoration: none; }
a.label:hover { color: var(--link); }
.more { color: var(--ink) !important; text-decoration: none; padding-bottom: 4px; box-shadow: inset 0 -1px 0 var(--link); }
.more:hover { color: var(--link) !important; }
.dek { margin: 0; font: italic 400 25px/35px var(--serif); color: var(--ink-2); }
.sheet { background: var(--sheet); }
.nb-note-ink { color: var(--note); font-weight: 500; }
.nb-signal-ink { color: var(--signal); }

/* rows that sit on the page's own grid */
.rows { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; list-style: none; }
.rows > li, .rows > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- the running head */
.site-head { position: relative; z-index: 30; }
.site-head-row { display: flex; align-items: center; gap: 24px; min-height: 64px; border-bottom: 1px solid var(--rule); font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.site-head-left { display: flex; gap: 20px; align-items: center; min-width: 0; }
.site-name { color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 500; letter-spacing: .38em; }
.sky-line { min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: .16em; text-transform: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.sky-line { cursor: pointer; }
button.sky-line:hover { color: var(--link); }
.site-nav { margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2vw, 28px); }
.site-nav a { padding-block: 4px; color: var(--ink); text-decoration: none; }  /* every link has room for the underline, so the current one doesn't shift */
.site-nav a:hover { color: var(--link); }
.site-nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--link); }
.site-nav .nav-penpals { padding: 9px 14px; background: var(--ink); color: var(--paper); font-weight: 500; }
.site-nav .nav-penpals:hover { background: var(--link); color: #fff; }
.menu-button { display: none; }
.menu { display: none; }

/* ---------------------------------------------------------------- names and page titles: Jost, spaced out */
.home-hero, .page-hero { align-items: end; row-gap: 16px; padding-block: 48px; }
.home-title, .page-title { margin: 0 -.1em 0 0; font: 300 clamp(34px, 7.6vw, 112px)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }  /* the right margin takes back the last letter's tracking */
.home-title { grid-column: 1 / span 8; }
.home-dek { grid-column: 9 / -1; padding-bottom: 6px; }
.page-title { grid-column: 1 / -1; font-size: clamp(32px, 7vw, 104px); }
.page-hero > .dek, .page-hero-side { grid-column: 1 / span 8; }
.page-hero-side { display: flex; flex-direction: column; gap: 8px; }
.page-title + .dek, .page-title + .page-hero-side { margin-top: 16px; }
.page-hero + .split { padding-top: 0; }  /* every page title sits the same distance above what follows it */

/* ---------------------------------------------------------------- the seawall */
.seawall { position: relative; height: clamp(420px, min(42vw, calc(100svh - 200px)), 900px); background: #20242a; }
.seawall-frame { display: block; width: 100%; height: 100%; border: 0; }
.quiet-toggle { position: absolute; top: 24px; right: var(--gut); z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px; border: 0; background: #ffffff; color: #121212; font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.quiet-toggle:hover { color: #0e7a53; }
.seawall-quiet { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--gut); background: var(--tint); }
.seawall-quiet p { margin: 0; font: italic 400 20px/28px var(--serif); color: var(--ink-2); }
.quiet .seawall { height: 140px; background: var(--tint); }
.quiet .seawall-frame { display: none; }
.quiet .quiet-toggle { top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- the Notebook */
.nb-home { padding-block: 96px 112px; }
.nb-head { align-items: end; row-gap: 12px; }
.section-title { grid-column: 1 / span 8; margin: 0; font: italic 400 52px/60px var(--serif); letter-spacing: -.01em; }
.nb-bar { align-items: end; row-gap: 12px; margin-block: 28px 22px; }
.nb-bar .tabs { grid-column: 1 / span 9; }
.nb-random, .nb-tools { grid-column: 10 / -1; justify-self: end; padding-bottom: 12px; }
.nb-tools { display: flex; gap: 28px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.tabs a { padding-bottom: 12px; color: var(--muted); text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--link); }
.tabs b { margin-left: 8px; font-weight: 400; letter-spacing: .08em; color: var(--muted); }
.nb-group { align-items: start; }
.nb-ml { grid-column: 1 / span 2; padding-top: 24px; border-top: 1px solid var(--ink); }
.nb-ml h3 { margin: 0; color: var(--ink); }
.nb-rows { grid-column: 3 / -1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.nb-rows li + li { border-top: 1px solid var(--rule); }
.nb-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 150px 110px 16px; column-gap: 16px; align-items: baseline; padding: 20px 0 19px; color: var(--ink); text-decoration: none; }
.nb-kind { color: var(--muted); }
.nb-note .nb-kind { color: color-mix(in oklab, var(--note) 45%, var(--muted)); }    /* a hint of the ink, mostly grey */
.nb-signal .nb-kind { color: color-mix(in oklab, var(--signal) 45%, var(--muted)); }
.nb-note .nb-title { font: 400 25px/32px var(--serif); text-wrap: pretty; }
.nb-signal .nb-title { font: italic 400 20px/28px var(--serif); color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-arrow { font: 400 16px/16px var(--sans); color: var(--muted); transition: transform .2s ease; }
.nb-row:hover .nb-title { color: var(--link); }
.nb-row:hover .nb-arrow { color: var(--link); transform: translateX(3px); }
.nb-group + .nb-group { margin-top: 0; }
.nb-hero { padding-bottom: 0; }
.nb-defs { row-gap: 32px; margin-top: 48px; padding-block: 40px 44px;
  background: linear-gradient(var(--ink), var(--ink)) 50% 0 / calc(100% - 2 * var(--gut)) 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 50% 100% / calc(100% - 2 * var(--gut)) 1px no-repeat; }
.nb-def { grid-column: span 6; display: block; color: var(--ink); text-decoration: none; transition: color .2s ease; }
.nb-def + .nb-def { padding-left: var(--gap); border-left: 1px solid var(--rule); }
.nb-def-kind { display: inline-flex; align-items: baseline; gap: 6px; padding-bottom: 8px; }
.nb-def-kind span { color: var(--muted); font-weight: 400; }
.nb-def-cue { font-style: normal; color: var(--muted); opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; }
.nb-def:hover .nb-def-cue, .nb-def:focus-visible .nb-def-cue, .nb-def.is-on .nb-def-cue { opacity: 1; transform: none; }
.nb-def.is-on .nb-def-cue { color: inherit; }
.nb-def.is-on .nb-def-kind { box-shadow: inset 0 -2px 0 currentColor; }
.nb-dd { display: block; margin: 8px 0 0; max-width: 540px; font: 400 27px/40px var(--serif); text-wrap: pretty; }
.nb-def:hover .nb-dd { color: var(--link); }
.nb-defs:has(.is-on) .nb-def:not(.is-on) { color: var(--muted); }
.nb-index { margin-bottom: 120px; }
.nb-index[data-show="note"] .nb-li-signal, .nb-index[data-show="signal"] .nb-li-note,
.nb-index[data-show="note"] .nb-group:not(.has-note), .nb-index[data-show="signal"] .nb-group:not(.has-signal) { display: none; }
.nb-index[data-show="note"] .nb-li-note:not(.nb-li-note ~ .nb-li-note),
.nb-index[data-show="signal"] .nb-li-signal:not(.nb-li-signal ~ .nb-li-signal) { border-top: 0; }  /* the first row shown sits on the month's rule */
.nb-featured .nb-rows { grid-column: 1 / -1; }
.nb-bar--page { margin-top: 88px; }

/* ---------------------------------------------------------------- Penpals, the one ask */
.penpals { margin-top: 120px; padding-block: 60px; background: var(--band); color: var(--on-band); }
.penpals:focus { outline: none; }
.sheet + .penpals, .seawall + .penpals, .page-hero + .penpals { margin-top: 0; }
.penpals-grid { row-gap: 24px; align-items: end; }
.penpals-copy .penpals-label { margin: 0; font: 400 11px/16px var(--sans); color: var(--band-label); }
.penpals-copy { grid-column: 1 / span 6; }
.penpals-note { align-items: start; margin-block: 72px 120px; scroll-margin-top: 24px; }
.penpals-note:focus { outline: 0; }
.penpals-note-label { grid-column: 1 / span 2; margin: 0; padding-top: 24px; border-top: 1px solid var(--ink); color: var(--ink); }
.penpals-note-body { grid-column: 3 / span 8; padding-top: 20px; border-top: 1px solid var(--ink); }
.penpals-note-lead { margin: 0; font: italic 400 clamp(28px, 2.8vw, 38px)/1.3 var(--serif); color: var(--ink); text-wrap: pretty; }
.penpals-note-lead a { text-decoration-color: var(--link); text-underline-offset: .12em; }
.penpals-note-text { margin: 20px 0 0; max-width: 34em; font: 400 20px/31px var(--text); color: var(--ink-2); }
.penpals-note-form { display: flex; align-items: flex-end; gap: 16px; max-width: 560px; margin-top: 32px; }
.penpals-note-form input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font: italic 400 19px/24px var(--serif); color: var(--ink); }
.penpals-note-form input::placeholder { color: var(--muted); }
.penpals-note-form input:focus-visible { outline: 0; border-bottom-width: 2px; }
.penpals-note-form button { height: 48px; padding: 0 22px; border: 0; background: var(--ink); color: var(--paper); font: 500 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.penpals-note-form button:hover { background: var(--link); }
.penpals-note-sign { margin: 32px 0 0; font: italic 400 26px/1.3 var(--serif); color: var(--ink); }
.penpals-note-sign::before { content: "— "; }

.penpals-copy h2 { margin: 14px 0 12px; font: italic 400 clamp(34px, 3.5vw, 50px)/1.16 var(--serif); }
.penpals-copy p { margin: 0; font: 300 18px/28px var(--sans); color: var(--on-band-2); max-width: 560px; }
.penpals-form { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 6px; }
.penpals-row { display: flex; align-items: flex-end; gap: 16px; }
.penpals-row input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--on-band); border-radius: 0; background: transparent; font: italic 400 19px/24px var(--serif); color: var(--on-band); }
.penpals-row input::placeholder { color: var(--on-band-muted); }
.penpals-row input:focus-visible { outline: 0; border-bottom-width: 2px; }
.penpals-row button { height: 48px; padding: 0 22px; border: 0; background: var(--on-band); color: var(--band); font: 500 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.penpals-row button:hover { background: var(--band-label); color: #121212; }

/* ---------------------------------------------------------------- a note, and a signal */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 28px auto 0; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.note-head, .signal-head { row-gap: 24px; padding-block: 56px; align-items: start; }
.note-meta { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.note-meta p { margin: 0; }
.note-meta .label:first-child { color: var(--ink); }
.note-headline { grid-column: 4 / span 7; }
.note-title { margin: 0; font: italic 400 clamp(44px, 5.6vw, 80px)/1.05 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.note-stand { margin: 24px 0 0; font: 300 clamp(19px, 1.7vw, 24px)/1.46 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.note-hero { margin: 0; }
.note-hero img { width: 100%; height: clamp(300px, 39vw, 640px); object-fit: cover; background: var(--tint); }
.note-body { align-items: start; padding-top: 56px; }
.toc { grid-column: 1 / span 2; position: sticky; top: 24px; display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid var(--ink); }
.toc .label { margin: 0 0 12px; }
.toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--rule); color: var(--soft); text-decoration: none; font: 400 17px/24px var(--serif); }
.toc a:hover { color: var(--ink); border-left-color: var(--link); }
.prose { grid-column: 4 / span 6; min-width: 0; font-family: var(--text); counter-reset: section; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; overflow-wrap: break-word; font-variant-numeric: oldstyle-nums proportional-nums; color: var(--ink-2); }
.prose > * { margin-block: 0 17px; }
.prose a { text-decoration-color: var(--link); }
.prose h2 { display: flex; align-items: baseline; gap: 18px; margin: 56px 0 22px; font: italic 400 40px/48px var(--serif); color: var(--ink); scroll-margin-top: 24px; }
.prose h2::before { counter-increment: section; content: counter(section, decimal-leading-zero); font: 400 11px/16px var(--sans); letter-spacing: .24em; color: var(--note); font-style: normal; }
.prose h3 { margin: 32px 0 12px; font: 600 20px/28px var(--serif); color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: 10px; }
.prose li > p { margin: 0 0 10px; }
.prose blockquote { margin: 32px 0; padding-left: 22px; border-left: 2px solid var(--note); font: italic 400 23px/34px var(--serif); color: var(--ink); }
.prose blockquote p { margin: 0 0 16px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { width: 48px; height: 1px; margin: 40px 0; border: 0; background: var(--ink); }
.prose figure { margin: 32px 0; }
.prose figcaption { margin-top: 8px; font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.prose img { margin-inline: auto; }
.prose iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.prose .video-embed { position: relative; aspect-ratio: 16 / 9; }
.prose .video-embed iframe { position: absolute; inset: 0; height: 100%; }
.prose code { font-size: .9em; }
.prose sup { line-height: 0; }
.prose .footnotes-sep { width: 48px; margin-top: 56px; }
.prose .footnotes { font: 400 15px/23px var(--serif); color: var(--soft); }
.prose .footnotes-list { padding-left: 1.25em; }
.prose .footnote-backref { text-decoration: none; }
/* the text messages in "The Million Dollar Question" */
.prose .imessage { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--tint); }
.prose .imessage-bubble { max-width: 62%; padding: 14px 18px; font: 400 17px/25px var(--sans); hyphens: none; }
.prose .imessage-bubble.received { align-self: flex-start; background: var(--bubble); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.prose .imessage-bubble.sent { align-self: flex-end; background: var(--ink); color: var(--paper); }
/* marginalia: a later thought, out in the right-hand margin beside the paragraph it comes before */
.marginalia { float: right; clear: right; width: calc((100% - 5 * var(--gap)) / 6 * 3 + 2 * var(--gap)); margin: 6px calc(-1 * ((100% - 5 * var(--gap)) / 6 * 3 + 3 * var(--gap))) 24px 0; padding-top: 14px; border-top: 1px solid var(--ink); font: italic 400 17px/26px var(--serif); color: var(--soft); hyphens: none; }
.marginalia p { margin: 10px 0 0; }
.marginalia .marginalia-label { margin: 0; font: 400 11px/16px var(--sans); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.note-end { grid-column: 4 / span 6; display: flex; justify-content: space-between; gap: 16px; margin: 48px 0 0; padding-top: 18px; border-top: 1px solid var(--ink); color: var(--ink); }
.note + .penpals, .signal + .penpals { margin-top: 104px; }
.pager { row-gap: 24px; padding-top: 96px; }
.pager a { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.pager a:hover .pager-title { color: var(--link); }
.pager-newer { grid-column: 1 / span 6; }
.pager-older { grid-column: 7 / -1; align-items: flex-end; text-align: right; }
.pager-title { font: 400 30px/38px var(--serif); text-wrap: balance; }
.pager-signal { font: italic 400 22px/31px var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.signal-link { grid-column: 4 / span 7; margin: -8px 0 0; overflow-wrap: anywhere; }
.signal-link a { text-decoration-color: var(--link); }
.signal-text { grid-column: 4 / span 7; margin: 0; font: italic 400 clamp(30px, 3.4vw, 46px)/1.25 var(--serif); letter-spacing: -.005em; text-wrap: pretty; overflow-wrap: break-word; }
.signal-body { padding-top: 0; }

/* ---------------------------------------------------------------- a label on the left, the rows on the right */
.split { padding-top: 72px; }
.split-label { grid-column: 1 / span 3; margin: 0; padding-top: 16px; border-top: 1px solid var(--ink); }
.split-body { grid-column: 4 / -1; margin: 0; border-top: 1px solid var(--ink); }
.split-body.rows > :first-child .row, .split-body.rows > .row:first-child { border-top: 0; }
.glance .row, .parts .row, .credits .row { border-top: 0; border-bottom: 1px solid var(--rule); }
.glance .row > :first-child { grid-column: span 2; line-height: 31px; }
.glance .row > :last-child { grid-column: span 7; margin: 0; }
.glance a { text-decoration-color: var(--link); }
.questions { padding: 0; list-style: none; }
.questions li { display: grid; grid-template-columns: minmax(0, 34em); padding-block: 18px 20px; border-bottom: 1px solid var(--rule); font: 400 24px/34px var(--serif); color: var(--ink); text-wrap: pretty; }
.parts .row dt { grid-column: span 2; font: italic 400 21px/31px var(--serif); }
.parts .row dd { grid-column: span 6; margin: 0; color: var(--ink-2); }
.credits .row { font: 400 15px/23px var(--serif); }
.credits .row dt { grid-column: span 3; line-height: 23px; }
.credits .row dd { grid-column: span 4; margin: 0; }
.credits .row .credits-licence { grid-column: span 2; color: var(--muted); }
p.split-body { padding-top: 16px; }
.now-season { display: flex; flex-direction: column; gap: 22px; padding-top: 16px; font: 400 32px/44px var(--serif); letter-spacing: -.005em; }
.now-season p { margin: 0; }
.now-season b, .now-season strong { font-weight: 400; font-style: italic; color: var(--key); }
.contact-email { display: inline-block; padding-top: 16px; font: italic 400 clamp(32px, 3.6vw, 52px)/1.15 var(--serif); text-decoration-color: var(--link); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- about */
.about-bio { row-gap: 24px; align-items: start; }
.about-side { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 20px; }
.about-photo { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tint); }
.about-text { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 24px; }
.about-text p { margin: 0; max-width: 40em; color: var(--ink-2); }
.about-text .about-lead { max-width: none; font: italic 400 32px/44px var(--serif); color: var(--ink); }
.about-head { max-width: 26em; margin: 24px 0 -8px; font: 400 26px/34px var(--serif); color: var(--ink); text-wrap: balance; }
.experience-row { align-items: center; }
.experience-org { grid-column: span 4; font: 400 25px/32px var(--serif); }
.experience-what { grid-column: span 3; font: 300 15px/22px var(--sans); color: var(--ink-2); }
.experience-years { grid-column: span 2; justify-self: end; text-align: right; }
.experience .row { border-top: 0; border-bottom: 1px solid var(--rule); }
/* the principles, as on the old site: each line fills in as you scroll */
.principles { margin-top: 96px; padding-block: 120px; background: var(--band); color: var(--on-band); }
.principles-title { grid-column: 1 / -1; margin: 0 0 64px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .2); text-align: center; font: 300 24px/32px var(--sans); letter-spacing: .36em; text-transform: uppercase; }
.principles-list { grid-column: 3 / span 8; display: flex; flex-direction: column; gap: 64px; text-align: center; }
.principle { margin: 0; font: italic 400 clamp(26px, 2.8vw, 40px)/1.45 var(--serif); }
.js-fill .principle span { background: linear-gradient(to right, var(--on-band) 50%, var(--dim) 50%); background-size: 200% 100%; background-position: calc(100% - var(--fill, 0) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.principles + .penpals { margin-top: 0; }

/* ---------------------------------------------------------------- footer */
.site-foot { padding-block: 96px 44px; }
.site-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--rule); font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.site-foot a { color: var(--muted); text-underline-offset: 5px; }
.site-foot a:hover, .site-foot a[aria-current] { color: var(--ink); }
.home .site-foot { background: var(--sheet); }



/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .toc { display: none; }
  .prose, .note-end { grid-column: 2 / span 9; }
  .marginalia { float: none; width: auto; margin: 0 0 24px; }
  .note-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; padding-top: 0; }
  .note-headline, .signal-text, .signal-link { grid-column: 1 / span 10; }
  /* stacked, a month is one faint rule and some air; only the first month shown keeps the ink rule */
  .nb-ml { grid-column: 1 / -1; padding: 40px 0 4px; border-top-color: var(--rule); }
  .nb-index[data-show="all"] .nb-group:first-child .nb-ml,
  .nb-index[data-show="note"] .has-note:not(.has-note ~ .has-note) .nb-ml,
  .nb-index[data-show="signal"] .has-signal:not(.has-signal ~ .has-signal) .nb-ml { border-top-color: var(--ink); }
  .nb-rows { grid-column: 1 / -1; }
  .nb-index .nb-rows { border-top: 0; }
  .penpals-note-label { grid-column: 1 / -1; padding: 14px 0 12px; }
  .penpals-note-body { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .home-title, .home-dek { grid-column: 1 / -1; }
  .home-dek { padding-bottom: 0; }
  .penpals-copy, .penpals-form { grid-column: 1 / -1; }
  .prose, .note-end { grid-column: 1 / -1; max-width: 680px; }
  .split-label, .split-body { grid-column: 1 / -1; }
  .split-body { border-top: 0; }
  .about-side { grid-column: 1 / -1; max-width: 480px; }
  .about-text { grid-column: 1 / -1; }
  .principles { padding-block: 72px; }
  .principles-list { grid-column: 1 / -1; gap: 48px; }
  .section-title { grid-column: 1 / -1; }
  .nb-bar .tabs, .nb-random, .nb-tools { grid-column: 1 / -1; justify-self: start; }
  .nb-def { grid-column: 1 / -1; }
  .nb-def + .nb-def { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .site-head-row { min-height: 56px; }
  .site-nav { display: none; }
  .menu-button { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .menu-button .icon-close { display: none; }
  .menu-button[aria-expanded="true"] .icon-open { display: none; }
  .menu-button[aria-expanded="true"] .icon-close { display: block; }
  /* inner pages keep "Dave Kim"; the sky's line moves into the menu */
  .site-name + .sky-line { display: none; }
  .menu:not([hidden]) { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; padding: 76px var(--gut) 32px; overflow-y: auto; background: var(--paper); }
  .menu-open, .menu-open body { overflow: hidden; }
  .site-head-row { position: relative; background: var(--paper); }
  .menu-sky { margin: 0 0 8px; }
  .menu-links { display: flex; flex-direction: column; }
  .menu-links a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: italic 400 36px/44px var(--serif); }
  .menu-links a[aria-current] { color: var(--link); }
  .menu-links span { font: 400 11px/16px var(--sans); font-style: normal; letter-spacing: .24em; color: var(--muted); }
  .menu-penpals { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 28px; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
  .menu-elsewhere { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font: 400 11px/16px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
  .menu-elsewhere a { color: var(--muted); }
}
@media (max-width: 700px) {
  body { font-size: 17px; line-height: 28px; }
  .dek { font-size: 21px; line-height: 30px; }
  .home-hero, .page-hero { padding-block: 32px; }
  .home-title, .page-title { letter-spacing: .08em; margin-right: -.08em; }
  .seawall { height: 64svh; min-height: 400px; max-height: 620px; }
  .quiet-toggle { top: auto; bottom: 44px; right: var(--gut); min-height: 44px; }
  .quiet .quiet-toggle { bottom: auto; }
  .nb-home { padding-block: 64px 72px; }
  .section-title { font-size: 40px; line-height: 48px; }
  .nb-row { grid-template-columns: auto 1fr auto; grid-template-areas: "kind date arrow" "title title title"; row-gap: 6px; padding: 16px 0; }
  .nb-kind { grid-area: kind; }
  .nb-date { grid-area: date; justify-self: end; }
  .nb-arrow { grid-area: arrow; margin-left: 12px; }
  .nb-title { grid-area: title; }
  .nb-topic { display: none; }
  .nb-note .nb-title { font-size: 22px; line-height: 29px; }
  .nb-signal .nb-title { font-size: 18px; line-height: 26px; }
  .nb-defs { margin-top: 0; padding-block: 28px; }
  .nb-dd { font-size: 22px; line-height: 32px; }
  .nb-bar--page { margin-top: 48px; }
  .penpals { padding-block: 40px 44px; }
  .penpals-row { flex-direction: column; align-items: stretch; }
  .penpals-row input { flex: none; width: 100%; }
  .penpals-note { margin-block: 48px 72px; }
  .questions li { font-size: 21px; line-height: 30px; }
  .penpals-note-form { flex-direction: column; align-items: stretch; }
  .penpals-note-form input { flex: none; width: 100%; }
  .note-head, .signal-head { padding-block: 32px; }
  .note-body { padding-top: 32px; }
  .prose h2 { font-size: 30px; line-height: 38px; }
  .prose .imessage { padding: 18px; }
  .prose .imessage-bubble { max-width: 85%; }
  .note-end { flex-direction: column; }
  .pager-newer, .pager-older { grid-column: 1 / -1; }
  .pager { padding-top: 64px; }
  .pager-title { font-size: 24px; line-height: 31px; }
  .experience-years { align-self: flex-start; text-align: left; }
  .parts .row dt { font-size: 19px; }
  .row { display: flex; flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nb-arrow { transition: none; }
}
@media print {
  .site-head, .seawall, .penpals, .pager, .site-foot, .toc { display: none; }
  .prose { grid-column: 1 / -1; }
}