/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=IBM+Plex+Sans:ital,wdth,wght@0,87.5,100..700;1,87.5,100..700&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

/* ===== THEME ===== */
:root {
  color-scheme: light dark;

  --bg: light-dark(#fbfaf7, #15140f);
  --bg-raised: light-dark(#f3f0e9, #1c1a13);
  --text: light-dark(#000001, #f0ede2);
  --text-dim: light-dark(#4a453a, #b8b2a0);
  --border: light-dark(rgba(20, 18, 10, 0.14), rgba(230, 225, 210, 0.66));
  --border-strong: light-dark(rgba(20, 18, 10, 0.28), rgba(230, 225, 210, 1));
  --shadow: light-dark(rgba(20, 18, 10, 0.18), rgba(0, 0, 0, 0.5));
  --accent: light-dark(#b8452f, #d97a5f);
  --link: light-dark(#1a4a63, #8fc4dd);
  --link-underline: light-dark(rgba(26, 74, 99, 0.3), rgba(143, 196, 221, 0.4));
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: 95%;
  scroll-behavior: smooth;
}

/* ===== BODY = grid, mobile single column ===== */
body {
  margin: 0;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

/* ===== HEADINGS ===== */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
  font-family: "IBM Plex Serif", "Georgia", serif;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.25rem 0;
  padding: 0;
  text-wrap: balance;
  color: var(--text);
}

h2 {
  font-size: 1.5rem
}

h3 {
  font-size: 1.35rem
}

h4 {
  font-size: 1.2rem
}

h5 {
  font-size: 1.1rem
}

h6 {
  font-size: 0.95rem
}

h5+h5 {
  margin-top: 0.75rem
}

/* ===== LINKS ===== */
a {
  text-decoration: none;
  color: var(--link);
  border-bottom: 1px solid transparent;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

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

/* ===== HEADER ===== */
body>header {
  grid-column: 1 / -1;
  text-align: left;
  margin: 0.425rem 0 0.5rem;
  border-top: 0.18rem solid var(--accent);
  padding-top: 1.1rem;
  order: 0;
}

body>header>h2 {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem 0;
}

body>header>h1 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 300;
  font-size: 2.6rem;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
}

body>header>h1>span {
  white-space: pre
}

body>header>h1>span.accent-letter {
  color: var(--accent);
  font-style: italic;
  padding-right: 0.08rem;
}

body>header>.tagline {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0;
  opacity: 1;
  color: var(--text-dim);
  border-top: none;
  padding-top: 0;
  margin: -0.1rem 0 0 8.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  order: 0;
}

/* ===== MAIN CONTENT ZONE =====
   .leftwrap contains .leftcol (quotebin+tweet) and .links, in that
   DOM order -- this nesting is required so that on tablet/desktop,
   the outer grid sees .leftwrap as ONE item per row-track. A
   row-spanning sibling (essay/resources) inflates any row it spans
   to accommodate its own height; if .leftcol and .links were two
   separate single-row siblings, that inflation reappears as a gap
   between them. Nesting them removes that interaction entirely:
   the outer grid only ever sees one item in that column per row.

   Mobile: both .leftwrap and .leftcol collapse via display:contents,
   so every actual content block becomes a direct flow child of body.
   Their natural DOM order is quotebin, tweet, links, essay -- not
   the desired reading order -- so explicit `order` restores
   quotebin -> tweet -> essay -> links -> resources for the single
   mobile column. order has no effect on flow position without a
   flex/grid container, but body is already display:grid, so it
   applies cleanly here. */
.leftwrap,
.leftcol {
  display: contents;
}

article.quotebin {
  order: 1;
}

article.tweet {
  order: 2;
}

article.essay {
  order: 3;
}

article.links {
  order: 4;
}

section.resources {
  order: 5;
}

footer {
  order: 6;
}

/* quote bin */
article.quotebin>h3 {
  margin-top: 0.125rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

.quote q {
  font-size: 1rem;
  font-family: "IBM Plex Serif", serif;
  font-style: italic;
}

.quote cite {
  font-size: 0.85rem;
  font-family: "IBM Plex Sans", sans-serif;
  display: block;
  text-align: right;
  color: var(--text-dim);
}

article.quotebin>ul.quote {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

article.quotebin>ul.quote>li {
  margin-bottom: 0.9rem;
}

/* tweet of the day */
article.tweet>h4 {
  margin-top: 0.125rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.4rem;
}

article.tweet blockquote {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--bg-raised);
  border-left: 2px solid var(--accent);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
}

article.tweet blockquote p {
  margin: 0 0 0.4rem;
}

article.tweet blockquote cite {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* today in liberty history */
article.liberty-history {
  margin-bottom: 0.5rem;
  max-width: 22rem;
}

article.liberty-history h4 {
  margin: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

div.history-entry p {
  margin: 0.3rem 0;
  font-family: "IBM Plex Serif", serif;
  font-size: 0.9rem;
  line-height: 1.3;
  orphans: 2;
  widows: 2;
}

/* link lists */
article.links>h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}

article.links>ul {
  list-style: none;
  margin: 0.4rem 0 1.2rem 0;
  padding: 0;
}

article.links>ul>li {
  margin-bottom: 0.6rem;
  line-height: 1.3;
  text-indent: -0.75rem;
  padding-left: 1.25rem;
  orphans: 2;
  widows: 2;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* essay */
article.essay h3.thisWeek {
  font-family: "IBM Plex Sans", sans-serif;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  color: var(--accent);
  font-weight: 250;
  font-size: 2.3rem;
  line-height: 2rem;
}

article.essay h3 {
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}

article.essay h3.recent {
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--accent);
  font-weight: 250;
  font-size: 1.6rem;
  line-height: 1.4rem;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  margin-top: 2.5rem;
  margin-bottom: 0.25rem;
}

article.essay h5 {
  margin-bottom: 0.6rem;
  line-height: 1.3;
  text-indent: -0.75rem;
  padding-left: 1.25rem;
  orphans: 2;
  widows: 2;
  hyphens: auto;
  overflow-wrap: break-word;
}

article.essay h4 {
  text-wrap: wrap;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 1.4rem;
}

article.essay h4+p {
  margin-top: 0;
}

article.essay,
article.essay p,
article.essay li {
  hyphens: auto;
  overflow-wrap: break-word;
  font-weight: 400;
  font-size: 1rem;
}


/* ===== RESOURCES ===== */
section.resources h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding: 0.4rem 0;
}

section.resources>nav ul,
section>article.entertainment>ul,
ul.hate {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

section.resources>nav ul>li,
section>article.entertainment>ul>li {
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

section>article.entertainment>h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.5rem;
}

ul.hate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.9rem;
}

ul.hate li {
  line-height: 1.4;
}

h4.hate {
  font-family: "IBM Plex Sans", sans-serif;
  font-stretch: 87.5%;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 1.5rem;
}

/* clown-car: hidden on mobile */
.clown-car {
  display: none;
}

/* ===== IMAGES ===== */
img {
  box-shadow: 0.06rem 0.1rem 0.2rem var(--shadow);
  max-width: 100%;
  height: auto;
}

/* ===== FOOTER ===== */
footer {
  grid-column: 1 / -1;
  text-align: center;
  border-top: 1px solid var(--border);
  margin: 1rem auto 0;
  padding: 0.75rem 0.5rem 0.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ===== FIXED JUMP BAR (mobile only) ===== */
body {
  padding-bottom: 3rem;
}

nav.jumpbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 1rem;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-x: auto;
  white-space: nowrap;
}

nav.jumpbar a {
  color: var(--text-dim);
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02rem;
}

nav.jumpbar a:hover,
nav.jumpbar a:focus-visible {
  color: var(--accent);
  border-bottom-color: transparent;
}

/* =========================================================
   TABLET (600-899px): real two-column tier, body's grid directly.
   No row-spanning anywhere -- that's what caused the inflation
   bug (a tall sibling spanning two row-tracks forces those tracks
   to grow even when the OTHER item in them is short, leaving a
   gap). Every row here holds exactly one row's worth of content:
   row 2 holds .leftwrap (a single grid item containing quotebin,
   tweet, and links in normal stacked flow) alongside .essay;
   row 3 holds resources as a full-width band; row 4 is the footer.
   align-items: start keeps leftwrap/essay top-aligned regardless
   of which one is taller.
   ========================================================= */
@media (min-width: 600px) {
  body {
    padding: 1.275rem 2rem;
    padding-bottom: 1.5rem;
    gap: 2.5rem 2rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  body>header {
    grid-column: 1 / -1;
    grid-row: 1;
    border-top-width: 0.22rem;
  }

  footer {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .leftwrap {
    display: grid;
    gap: 2.5rem;
    grid-column: 1;
    grid-row: 2;
  }

  .leftcol {
    display: contents;
  }

  article.essay {
    grid-column: 2;
    grid-row: 2;
  }

  section.resources {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  nav.jumpbar {
    display: none;
  }

  .clown-car {
    display: revert;
  }

  body>header>h1 {
    font-size: 3rem;
  }

  body>header>.tagline {
    margin: -0.175rem 0 0 9.75rem;
    font-size: 0.9rem;
  }
}

/* ===== DESKTOP (900px+): three real columns =====
   Same no-spanning principle as tablet. .leftwrap (one grid item
   holding quotebin, tweet, and links in stacked flow) sits in
   column 1, row 2. .essay sits in column 2, row 2. .resources
   sits in column 3, row 2 -- all three are single-row placements,
   none spans into a second row, so none of them can force another
   column's row-track taller than its own content needs. That's
   what actually fixes the gap: the old version had essay/resources
   spanning rows 2/4 specifically to reach past .links in row 3,
   and a track spanned by a tall item grows even when the sibling
   sharing that track is short. With .links folded inside .leftwrap
   instead of sitting in its own row, there's no second row for
   essay/resources to span into, so the failure mode can't occur.
   align-items: start keeps all three columns top-aligned even
   though their natural heights differ. */
@media (min-width: 900px) {
  body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.7rem 2.5rem;
    gap: 1.75rem 2.5rem;
    align-items: start;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.85fr);
  }

  body>header {
    grid-column: 1 / -1;
    grid-row: 1;
    border-top-width: 0.26rem;
  }

  footer {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .leftwrap {
    grid-column: 1;
    grid-row: 2;
  }

  .leftcol {
    display: contents;
  }

  article.essay {
    grid-column: 2;
    grid-row: 2;
  }

  section.resources {
    grid-column: 3;
    grid-row: 2;
  }

  body>header>h1 {
    font-size: 3.6rem;
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: 1.7rem
  }

  h3 {
    font-size: 1.5rem
  }

  .essay h3.thisWeek {
    font-size: 1.9rem
  }

  article.essay h3 {
    text-align: left;
  }

  body>header>.tagline {
    margin: -0.25rem 0 0 11.7rem;
    font-size: 0.95rem;
  }
}

/* ===== WIDE: extra padding ===== */
@media (min-width: 1280px) {
  body {
    padding: 1.7rem 3rem;
  }

  body>header {
    border-top-width: 0.3rem;
  }

  body>header {
    border-top-width: 0.3rem;
  }

  body>header>.tagline {
    margin: -0.23rem 0 0 11.7rem;
    font-size: 1rem;
  }
}