/* Rainy Morning
 *
 * Typography is Rachel's, not ours. For 22 years this blog ran the Hemingway
 * theme: Lato for reading, Raleway for labels, on white. These are the very
 * woff2 files that theme served, so the words sit on the page the way she
 * remembers them. Direction from Rachel outranks anything written here.
 *
 * Geometry is Hemingway's too, and it is what settles the argument between
 * text width and picture width: a 1040px frame, a 65% column, a 27.5% sidebar.
 * Prose and photographs share that one column, so neither has to be wrong to
 * make the other right.
 *
 * The coral (#BD444D) and navy (#25354D) are still sampled from the banner
 * photograph — her hand-knit socks and the cushion behind them.
 *
 * Theme follows the OS unless the toggle sets data-theme (kept in localStorage).
 */

@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-v23-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-v23-latin-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-v23-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-v23-latin-700italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway-v27-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway-v27-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #fff;
  --raised: #faf9f7;
  --fg: #444;              /* Hemingway's body colour, exactly */
  --title: #2d2d2d;        /* and its post-title colour */
  /* Hemingway used #767676; that is 4.06:1 on the caption mat, which fails.
     A shade darker is indistinguishable and passes on both grounds. */
  --muted: #6b6b6b;
  --caption: #6b6b6b;
  --accent: #b03e47;
  --accent-soft: #f5e7e6;
  --navy: #25354d;
  --rule: #e6e4e0;

  --body: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  /* Raleway carries every small uppercase label, as it did on her blog. */
  --sans: "Raleway", "Helvetica Neue", sans-serif;

  --wide: 65rem;        /* 1040px — Hemingway's frame */
  --column: 65%;        /* the reading column */
  --rail: 27.5%;        /* the sidebar */
  --gutter: 7.5%;

  --caption-bg: #f4f2ee;
  --photo-shadow: 0 1px 2px rgba(31, 36, 48, 0.07), 0 10px 24px -12px rgba(31, 36, 48, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181a;
    --raised: #202225;
    --fg: #dcdcda;
    --title: #f0efed;
    --muted: #9a9a98;
    --caption: #b8b7b4;
    --accent: #e4737c;
    --accent-soft: #2a2028;
    --navy: #8fa6c4;
    --rule: #2e3033;
    --caption-bg: #232528;
    --photo-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 12px 28px -8px rgba(0,0,0,0.72);
  }
}
:root[data-theme="dark"] {
  --bg: #17181a;
  --raised: #202225;
  --fg: #dcdcda;
  --title: #f0efed;
  --muted: #9a9a98;
  --caption: #b8b7b4;
  --accent: #e4737c;
  --accent-soft: #2a2028;
  --navy: #8fa6c4;
  --rule: #2e3033;
  --caption-bg: #232528;
  --photo-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 12px 28px -8px rgba(0,0,0,0.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1.125rem;      /* 18px, as her blog set it */
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.14em; }

/* ─────────────────────────── masthead ─────────────────────────── */

.site-banner {
  display: block;
  max-width: var(--wide);
  margin: 1.1rem auto 0;
  padding: 0 1rem;
}
.site-banner img {
  width: 100%;
  /* The photograph stays whole and uncropped in spirit, but it behaves as a
     masthead rather than a poster — it no longer eats the first screenful. */
  height: clamp(150px, 30vh, 340px);
  object-fit: cover;
  object-position: center 58%;
  border-radius: 3px;
  display: block;
}

.site-header {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.85rem 1rem 0.9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
/* The one place the banner's coral appears as a flat field rather than a
   hover: the site's own name, sitting directly under the socks it came from. */
.site-title {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;   /* Hemingway's masthead, which is how she knows it */
  line-height: 1.2;
}
.site-title:hover { text-decoration: none; color: var(--fg); }

.site-header nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-header nav a { color: var(--muted); }
.site-header nav a:hover { color: var(--accent); text-decoration: none; }
#theme-toggle {
  border: none; background: none; cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0.15rem;
  color: var(--muted);
}

/* The frame: reading column and sidebar, Hemingway's proportions. Below 900px
   the rail drops underneath rather than squeezing the pictures. */
.shell {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1rem 3.5rem;
  display: grid;
  grid-template-columns: var(--column) var(--rail);
  column-gap: var(--gutter);
  align-items: start;
}
main { min-width: 0; }         /* grid items refuse to shrink without this */
@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar { margin-top: 3rem; }
}

/* ─────────────────────────── posts ─────────────────────────── */

.post { padding: 2.6rem 0 1.4rem; }
.post + .post,
.post ~ .post { border-top: 1px solid var(--rule); }

.post-title {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.35rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.35rem;
  color: var(--title);
}
.post-title a { color: var(--title); }
.post-title a:hover { color: var(--accent); text-decoration: none; }

.post-date {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

/* Prose and photographs are both simply the column wide. This is the whole
   point of the sidebar: with the rail taking the slack, there is no longer a
   narrow measure fighting a wide picture. */
.post-body > h2, .post-body > h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 2rem 0 0.5rem;
}

/* Every photograph sits in a mat of the caption tint — with or without a
   caption — and the mat is what lifts off the page. Three markups to cover:
   migrated WordPress (figure.wp-block-image), the poster's gallery items
   (.gallery > figure), and the poster's standalone photos (a bare figure). */
.post-body figure.wp-block-image,
.gallery > figure,
.post-body > figure:not(.wp-block-gallery):not(.gallery) {
  margin: 0;
  background: var(--caption-bg);
  padding: 0.6rem;
  border-radius: 4px;
  box-shadow: var(--photo-shadow);
  width: fit-content;
  max-width: 100%;
}
.gallery > figure { width: auto; }          /* the grid cell governs width */

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
  margin: 0;
}
.post-body > figure.wp-block-gallery { margin: 1.6rem 0; }

.post-body figcaption {
  color: var(--caption);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0.5rem 0.1rem 0.1rem;
}
.post-body iframe { max-width: 100%; }
.post-body blockquote {
  margin: 1.4rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--accent);
  color: var(--caption);
  font-style: italic;
}

.comment-count {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.2rem 0 0;
}

/* migrated WP galleries and new-post galleries — two columns, captions below.
   This is Rachel's preferred layout and the poster wraps to match it. */
.gallery,
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 2rem;
  column-gap: 1.6rem;
  margin: 1.4rem 0;
}
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery, .wp-block-gallery { align-items: start; }
.gallery figure, .wp-block-gallery figure { margin: 0; width: auto; }
/* By default the last photo of an odd group fills the row rather than leaving a
   half-empty one — this is what made 3-photo blocks look unfinished. She can
   override either way per photo (.wide / .narrow). */
.gallery > figure:last-child:nth-child(odd):not(.narrow),
.gallery > figure.wide,
.wp-block-gallery > figure.wide { grid-column: 1 / -1; }
.gallery > figure.narrow { grid-column: auto; }
/* A lone photo is a bare <figure>, not a gallery child, so none of the grid
   rules above can reach it — half/full had no effect on single photos at all.
   Same specificity as the mat rule, so these have to come after it. */
.post-body > figure.wide:not(.wp-block-gallery) { width: 100%; }
.post-body > figure.wide:not(.wp-block-gallery) img { width: 100%; }
.post-body > figure.narrow:not(.wp-block-gallery) { width: calc(50% - 0.8rem); }
.post-body > figure.narrow:not(.wp-block-gallery) img { width: 100%; }
.gallery img, .wp-block-gallery img { width: 100%; object-fit: cover; margin: 0; }
@media (max-width: 540px) {
  .gallery, .wp-block-gallery, .wp-block-gallery.columns-3 { grid-template-columns: 1fr; }
}

.video-embed { aspect-ratio: 16 / 9; margin: 1.4rem 0; }
.video-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 3px; }

/* ─────────────────────────── navigation ─────────────────────────── */

.pagination, .post-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 2rem 0 0.5rem;
  font-family: var(--sans); font-size: 0.78rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
}
.page-num {
  color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem;
}
.post-nav a { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────────────────── comments ─────────────────────────── */

.comments { margin-top: 2.5rem; }
.comments h2 {
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule);
}
.comment {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
  font-size: 1.0625rem;
}
.comment:last-child { border-bottom: 0; }
.comment-meta { margin: 0 0 0.25rem; font-size: 0.95rem; }
.comment-meta strong { font-weight: 700; }
.comment-meta span {
  color: var(--muted); font-family: var(--sans);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin-left: 0.55rem;
}
.comment-body p { margin: 0.3rem 0; }

/* ─────────────────────────── archive ─────────────────────────── */

.archive-head { padding: 2.4rem 0 0; }
.archive-head h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.4rem;
}
.archive-intro {
  font-family: var(--sans); font-size: 0.82rem; color: var(--muted);
  margin: 0 0 1.4rem;
}

/* the jump index — 22 years reachable without scrolling through 2,000 posts */
.year-index {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0 0 1.6rem; margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}
.year-index li { margin: 0; }
.year-index a {
  display: block;
  font-family: var(--sans); font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--muted);
}
.year-index a:hover {
  text-decoration: none;
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}
.year-index .count { opacity: 0.65; margin-left: 0.3rem; font-size: 0.9em; }

.archive-year { padding-top: 0.4rem; }
.archive-year h2 {
  position: sticky; top: 0; z-index: 2;
  margin: 1.8rem 0 0.6rem;
  padding: 0.5rem 0 0.4rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  scroll-margin-top: 0;
}
.archive-year h2 .count {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-left: 0.6rem;
}
.archive-year h2 a.top {
  float: right;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

.archive-list { list-style: none; padding: 0; margin: 0; }
/* Two columns, and only when a column is actually wide enough to hold them —
   the reading column is ~655px now, so this is a width test, not a viewport one. */
@media (min-width: 620px) { .archive-list { columns: 2; column-gap: 2.2rem; } }
.archive-list li {
  padding: 0.16rem 0;
  break-inside: avoid;
  font-size: 1.03rem;
  line-height: 1.45;
}
.archive-list time {
  color: var(--muted);
  font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.archive-list a { color: var(--fg); }
.archive-list a:hover { color: var(--accent); }

.month-mark {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.4rem;
  scroll-margin-top: 3.5rem;      /* clear of the sticky year heading */
}
.month-mark .count {
  margin-left: 0.5rem; font-weight: 400; opacity: 0.7;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}

/* ─────────────────────────── sidebar ─────────────────────────── */

.sidebar { font-size: 0.95rem; line-height: 1.5; }
.widget { margin: 0 0 2.4rem; }
.widget:last-child { margin-bottom: 0; }
.widget-title {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--title);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 0.26rem 0; }
.widget a { color: var(--fg); }
.widget a:hover { color: var(--accent); text-decoration: none; }
.widget .count {
  font-family: var(--sans); font-size: 0.66rem;
  color: var(--muted); margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.widget-note {
  font-family: var(--sans); font-size: 0.7rem;
  color: var(--muted); margin: 0.7rem 0 0;
}

#site-search {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.65rem;
  color: var(--fg);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
#site-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-results { margin-top: 0.7rem !important; }
.search-results li { display: flex; justify-content: space-between; gap: 0.5rem; }

/* Years open to months. Closed years cost nothing, which is what makes 22
   years of archive fit in a rail. */
.arch-year > summary {
  display: flex; justify-content: space-between; align-items: baseline;
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
}
.arch-year > summary::-webkit-details-marker { display: none; }
.arch-year > summary::before {
  content: "▸";
  font-size: 0.7em;
  color: var(--muted);
  margin-right: 0.45rem;
  flex: none;
}
.arch-year[open] > summary::before { content: "▾"; }
.arch-year > summary a { font-variant-numeric: tabular-nums; }
.arch-year > summary .count { margin-left: auto; }
.arch-months { padding-left: 1.15rem !important; }
.arch-months li { display: flex; justify-content: space-between; padding: 0.16rem 0; }
.arch-months a { color: var(--muted); }

/* ─────────────────────────── footer ─────────────────────────── */

.site-footer {
  max-width: var(--wide); margin: 0 auto;
  padding: 1.4rem 1rem 2.5rem;
  color: var(--muted);
  font-family: var(--sans); font-size: 0.74rem;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--rule);
}
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}