:root {
  --shallows: #8EE3D8;
  --lagoon: #2FA4A9;
  --midwater: #17607A;
  --deep: #0D3554;
  --abyss: #071E33;
  --foam: #F1FBF9;
  --sun: #F7D774;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --voice: "Newsreader", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--foam);
  background: linear-gradient(180deg, var(--lagoon) 0%, var(--midwater) 30%, var(--deep) 70%, var(--abyss) 100%);
  min-height: 100vh;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.bar { display: flex; justify-content: space-between; align-items: center; padding-block: 1.25rem; }
.bar .mark { font-weight: 800; font-size: 1.375rem; text-decoration: none; letter-spacing: -0.02em; }
.bar nav { display: flex; gap: 1.25rem; font-size: .875rem; font-weight: 600; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin: 2.5rem 0 1rem; }
h2 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; margin: 2.25rem 0 .75rem; }
.meta { font-size: .875rem; opacity: .8; margin: 0 0 2rem; }
.lede { font-size: 1.3rem; line-height: 1.45; margin: 0 0 2rem; }
article p, article li { max-width: 64ch; }
blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--sun); font-family: var(--voice); font-style: italic; font-size: 1.25rem; }
.posts { list-style: none; padding: 0; margin: 2rem 0 4rem; display: grid; gap: 1.25rem; }
.posts a { display: block; text-decoration: none; padding: 1.25rem 1.5rem; border: 1.5px solid rgba(241,251,249,.3); border-radius: 20px; }
.posts a:hover { border-color: var(--sun); }
.posts h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.posts p { margin: 0; opacity: .85; }
.posts time { display: block; font-size: .8rem; opacity: .7; margin-bottom: .35rem; }
.sources { font-size: .875rem; opacity: .85; margin-top: 3rem; }
footer { padding-block: 3rem; margin-top: 3rem; border-top: 1px solid rgba(241,251,249,.15); font-size: .875rem; opacity: .8; }