/* Yesterday's Monterey Dive Conditions Today.
   Type: Fraunces (display) + Newsreader (text) + Inter (labels), all bundled in assets/fonts/ under
   the SIL OFL — see assets/fonts/OFL.txt and provenance.json. No third-party requests are made.
   Bump ASSET_V in deploy/generate.py when this file changes: the stylesheet URL carries it. */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #14181b;
  --ink-soft: #4c545a;
  --ink-faint: #8a9198;
  --rule: #e4e7e9;
  --accent: #0c6a62;          /* kelp: the second header and links, nowhere else */
  --bg: #fffdf9;              /* not quite printer white */
  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --text: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --label: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.2rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) 1.35rem 4rem;
}

/* ---------- masthead: the blog's own name, which is the joke, so it gets to be big ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.3rem;
  margin-bottom: 2.6rem;
}

.wordmark {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.95rem, 6.2vw, 2.95rem);
  font-weight: 800;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.03;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-decoration: none;
  text-wrap: balance;
}

.wordmark:hover { color: var(--accent); }

.topnav {
  margin-top: 1.15rem;
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.topnav a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.topnav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- the entry ---------- */

.dateline {
  margin: 0 0 2.4rem;
  font-family: var(--label);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

section { margin: 0 0 3.75rem; }

h1.big {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.45rem, 9vw, 4.5rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 0.95;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.s2 h1.big { color: var(--accent); }

section p { margin: 0 0 1.1rem; max-width: 34rem; text-wrap: pretty; }
section p:last-child { margin-bottom: 0; }

/* A drop cap on the first paragraph of the first section: it makes a two-paragraph page look set
   rather than dumped. Nothing else gets one. */
.s1 > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.055em 0 0;    /* any wider and the drop cap reads as a stray letter */
  color: var(--accent);
}

/* ---------- archive ---------- */

h2 {
  margin: 2.75rem 0 0.85rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

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

ul.list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

ul.list time {
  display: block;
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

ul.list .lead { display: block; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- word around the bay: other people's words, not ours ---------- */

.word {
  margin: 2.1rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--rule);
}

.word h2 {
  margin: 0 0 .9rem;
  font-family: var(--label);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.word blockquote { margin: 0 0 1.05rem; }
.word blockquote:last-child { margin-bottom: 0; }

.word blockquote p {
  margin: 0;
  font-family: var(--text);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 34rem;
}

.word blockquote footer {
  margin: .35rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

/* The date on an older report must not be the quietest thing on the page next to a quote about water. */
.word blockquote footer em {
  font-style: normal;
  color: var(--ink-soft);
}

.word-note {
  margin: .75rem 0 0;
  max-width: 34rem;
  font-family: var(--label);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- footer ---------- */

footer {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.print {
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

@media (max-width: 34rem) {
  body { font-size: 1.14rem; }
  .s1 > p:first-of-type::first-letter { font-size: 3em; }
}

/* No dark scheme on purpose: the brief is a white page. If that ever changes, the variables at the
   top are the whole theme. */