/* ==========================================================================
   wheatfarm.css — shared stylesheet for WheatFarm.com
   Revision: 1.6
   Date:     2026-11-07
   Changelog (newest first):
     1.6  2026-11-07  Thumbnails shown at their real pixel size (they were
                      stretched and looked blurry); archive section photos
                      at 180px on a white mat.
     1.5  2026-11-07  Full-site pieces: single-column layout, text blocks,
                      wide figures, section breaks, stacked sidebar buttons,
                      archive section cards.
     1.4  2026-11-07  Home page pieces: equipment groups, shop intro, footer
                      columns, panel spacing. Fixed .panel--tint (lost in the
                      1.2 rename); six journal tiles fit one row.
     1.3  2026-11-07  Added spec-table group/note rows, .data-table (parts
                      lists), .thumb-grid--small, .journal-intro and spacing
                      helpers for the first converted pages.
     1.2  2026-11-07  Barn red and denim is now the default palette. Color
                      variables renamed to neutral names (--accent, --trim,
                      --secondary, --accent-tint); .panel--green -> .panel--tint.
     1.1  2026-11-07  Logo icon takes the accent color (follows palette files).
     1.0  2026-11-07  First version, built from the "Implement Catalog" canvas
                      design in the implement green and steel palette.
   ==========================================================================

   Contents
     1. Design tokens (colors, type, spacing)
     2. Base elements
     3. Layout helpers
     4. Site header and footer
     5. Page heading (breadcrumb, eyebrow, title, lede)
     6. Buttons
     7. Cards, tiles and panels (home page)
     8. Project log pages (log entries, Update markers, At a glance, pager)
     9. Harvest journals (date grid, entries, photo strips)
    10. Spec sheets
    11. Photo archive (category grid, thumbnail grid)
    12. Long-form articles (prose)
    13. Utilities
    14. Print

   Rules of the palette (barn red and denim)
     - --accent (barn red) is for links, buttons and markers.
     - --trim (denim) is for thin rules and bars; --trim-dark for small labels.
     - Alternate palettes live in css/palette-*.css and override only the
       :root variables; load one after this file to try it.
     - No large solid dark areas. The darkest fills are buttons and the
       small Update markers.
     - Corners are 5px everywhere (--radius).
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
  /* Surfaces */
  --bg:             #F4F2EE;  /* page background */
  --surface:        #FFFFFF;  /* cards */
  --band:           #EAE6DF;  /* alternate bands */
  --tint:           #E6E2DA;  /* placeholder / panel header */
  --accent-tint:    #F2E6E2;  /* Photo Gallery panel */
  --accent-tint-bd: #DEC6BF;

  /* Lines */
  --border:         #DEDAD2;
  --border-soft:    #E8E5DF;
  --border-strong:  #CBC6BD;

  /* Text */
  --text:           #2A2A2A;
  --text-body:      #2E2E2E;
  --text-soft:      #3A3A3A;
  --muted:          #4C4C4C;
  --muted-2:        #585858;
  --faint:          #636363;

  /* Accents */
  --accent:         #8E3B2E;  /* barn red: links, buttons, markers */
  --accent-dark:    #6E2C22;  /* hover */
  --secondary:      #4F6A80;  /* denim */
  --trim:           #4F6A80;  /* trim rules (denim) */
  --trim-dark:      #3E5568;  /* small labels (darker denim) */
  --footer:         #E2DED5;  /* weathered board */

  /* Type */
  --font-head: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Shape and spacing */
  --radius: 5px;
  --wrap:   1120px;
  --gutter: 24px;
}


/* 2. Base elements
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }


/* 3. Layout helpers
   ========================================================================== */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section      { padding-top: 56px; padding-bottom: 56px; }
.section--tight { padding-top: 32px; padding-bottom: 32px; }

/* Full-width alternate band (journals strip, journal intro) */
.band {
  background: var(--band);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Main column plus sidebar. The sidebar drops below on narrow screens. */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 64px;
}
.layout__main  { flex: 999 1 560px; min-width: 0; }
.layout__aside { flex: 1 1 280px;   min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Journals put the date list first (on the left) */
.layout--journal { gap: 56px; padding-top: 48px; }
.layout--journal .layout__aside { flex-basis: 200px; }
.layout--journal .layout__main  { max-width: 720px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}
.section-head h2 { margin: 0; }
.section-head p  { margin: 0; color: var(--muted-2); font-size: 16px; }

/* Group heading with the accent-color rule (Tractors & Crawlers, etc.) */
.group-title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-size: 21px;
}


/* 4. Site header and footer
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--surface);
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.skip-link:focus { left: 8px; }

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand svg { flex: 0 0 auto; color: var(--accent); }  /* icon uses stroke="currentColor" */
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.brand__tag  { font-size: 14px; color: var(--muted-2); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  font-size: 16px;
  font-weight: 600;
}
.site-nav a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--trim); }

.site-footer {
  background: var(--footer);
  color: var(--text);
  border-top: 3px solid var(--trim);
  font-size: 15px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}
.site-footer--full .site-footer__inner { padding-top: 44px; padding-bottom: 44px; }
.site-footer a { color: var(--accent-dark); }
.site-footer__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.site-footer__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }


/* 5. Page heading
   ========================================================================== */
.page-head { padding-top: 40px; }
.band .page-head { padding-top: 44px; padding-bottom: 40px; }

.breadcrumb {
  font-size: 15px;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: var(--faint); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--trim-dark);
}

.page-title { margin: 0 0 10px; }

.lede {
  margin: 0;
  font-size: 19px;
  color: var(--muted);
  max-width: 38em;
}

.meta {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--faint);
}


/* 6. Buttons
   ========================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #FFFFFF; }

.btn--outline { background: transparent; color: var(--accent); }
.btn--outline:hover { background: var(--surface); color: var(--accent-dark); }

/* Small white buttons (previous/next year, etc.) */
.btn--quiet {
  min-height: 44px;
  padding: 0 16px;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--accent);
  font-size: 15px;
}
.btn--quiet:hover { background: var(--surface); border-color: var(--accent); color: var(--accent-dark); }

.btn--block { display: flex; width: 100%; }


/* 7. Cards, tiles and panels
   ========================================================================== */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 56px;
}
.hero__text   { flex: 1 1 480px; min-width: 0; }
.hero .btn    { padding: 0 18px; }
.hero__text h1 { font-size: clamp(34px, 5.4vw, 46px); margin-bottom: 20px; }
.hero__text p { color: var(--muted); max-width: 34em; margin-bottom: 28px; }
.hero__figure { flex: 1 1 460px; min-width: 0; margin: 0; }
.hero__figure img { width: 100%; border-radius: var(--radius); }
.hero__figure figcaption { margin-top: 10px; font-size: 14px; font-style: italic; color: var(--muted-2); }

/* Grid of equipment cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}
a.card:hover { border-color: var(--accent); color: var(--text); }
a.card:hover .card__title { color: var(--accent-dark); }
.card__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--tint);
}
.card__body  { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; padding: 16px 18px 18px; }
.card__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.25; }
.card__text  { font-size: 15px; line-height: 1.45; color: var(--muted); }
.card__meta  { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--faint); }

/* Year tiles (Harvest Journals strip) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
a.tile:hover { border-color: var(--accent); color: var(--text); }
.tile__year { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); }
.tile__kind { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--trim-dark); }
.tile__text { font-size: 15px; line-height: 1.45; color: var(--muted); }

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 28px;
  font-size: 16px;
}
.link-row__label { font-weight: 600; color: var(--muted); }

/* Home page: equipment groups and spacing */
.shop-intro   { max-width: 40em; margin: 0 0 40px; }
.equip-group  { margin-bottom: 48px; }
.equip-group:last-child { margin-bottom: 0; }
.home-panels  { padding-bottom: 64px; }
.footer-about { flex: 1 1 260px; }
.footer-links-block { flex: 2 1 420px; }

/* Photo archive section cards: the 180px section photos are shown at
   their real size, centered on a white mat, so they stay sharp. */
.card-grid--archive { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); }
.card-grid--archive .card__title { font-size: 17px; }
.card__photo {
  display: block;
  max-width: calc(100% - 24px);
  height: auto;
  margin: 12px auto 0;
  border-radius: 3px;
}

/* Large link panels (Photo Gallery / Archive) */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}
.panel--tint { background: var(--accent-tint); border-color: var(--accent-tint-bd); }
a.panel:hover { border-color: var(--accent); color: var(--text); }
.panel__title { font-family: var(--font-head); font-size: 24px; font-weight: 700; }
.panel__text  { font-size: 16px; color: var(--muted); }
.panel__cta   { margin-top: 6px; font-weight: 600; color: var(--accent); }


/* 8. Project log pages
   ========================================================================== */
.log { display: flex; flex-direction: column; }

/* One photo + text row */
.log-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.log-entry__photo { flex: 0 0 260px; max-width: 100%; }
.log-entry__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tint);
}
.log-entry__photo:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }
.log-entry__body { flex: 1 1 280px; min-width: 0; }
.log-entry__body h2,
.log-entry__title { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.log-entry__body p { margin: 0 0 .8em; color: var(--text-soft); }
.log-entry__body p:last-child { margin-bottom: 0; }

/* Entries with no photo use the full width */
.log-entry--text .log-entry__body { flex-basis: 100%; }

/* Pages without a sidebar */
.layout--single .layout__main { max-width: 900px; }

/* Intro or running text between photos */
.text-block { padding: 20px 0 8px; max-width: 46em; }
.text-block p { color: var(--text-soft); }
.text-block + .thumb-grid,
.text-block + .figure-wide { margin-top: 8px; }

/* A single photo shown large (diagrams, factory shots) */
.figure-wide { margin: 16px 0 8px; }
.figure-wide img { width: 100%; max-width: 760px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }

/* Divider between sections of a page */
.section-break { border: 0; border-top: 2px solid var(--border); margin: 36px 0 12px; }
.log > .thumb-grid { margin: 8px 0 16px; }

/* "Update · 7/4/2000" marker */
.update-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 6px;
}
.update-marker__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  background: var(--accent);
  padding: 4px 12px;
  border-radius: var(--radius);
}
.update-marker::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--border-strong);
}

/* "At a glance" box */
.glance {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.glance__head {
  margin: 0;
  padding: 14px 20px;
  background: var(--tint);
  border-bottom: 3px solid var(--trim);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
}
.glance dl { margin: 0; padding: 8px 20px 16px; font-size: 15px; }
.glance dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.glance dt { color: var(--muted-2); }
.glance dd { margin: 0; font-weight: 600; text-align: right; }
.glance__foot { padding: 0 20px 20px; }
.glance__foot .btn { width: 100%; min-height: 44px; padding: 8px 14px; font-size: 15px; }
.glance__foot--stack { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }

/* Small grey note box (parts that worked, etc.) */
.note {
  background: var(--band);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 15px;
  color: var(--muted);
}
.note__title { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.note p:last-child { margin-bottom: 0; }

/* Previous / next project */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}
.pager a {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}
.pager a:hover { border-color: var(--accent); }
.pager__dir   { font-size: 13px; color: var(--faint); }
.pager__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.pager__next  { align-items: flex-end; text-align: right; margin-left: auto; }


/* 9. Harvest journals
   ========================================================================== */
.journal { font-size: 18px; line-height: 1.65; }

.date-grid-title { margin: 0 0 12px; font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.date-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.date-grid a:hover { border-color: var(--accent); }

.entry {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 16px;
}
.entry:target .entry__date { text-decoration: underline; text-decoration-color: var(--trim); text-underline-offset: 6px; }
.entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.entry__date { margin: 0; font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--accent); }
.entry__day  { font-size: 15px; color: var(--faint); }
.entry p     { color: var(--text-body); }
.back-to-top { font-size: 15px; }

/* Small grid of captioned photos inside an entry */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.photo-strip figure { margin: 0; }
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tint);
}
.photo-strip a:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-strip figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted-2); }


/* 10. Spec sheets
   ========================================================================== */
.spec-section { margin-bottom: 32px; max-width: 820px; }
.spec-section h2 {
  font-size: 19px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}
.spec-table {
  width: 100%;
  border-collapse: separate;   /* "separate" lets the rounded corners show */
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 16px;
}
.spec-table th,
.spec-table td {
  padding: 10px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 45%; font-weight: 400; color: var(--muted-2); }
.spec-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.spec-table .sub th { padding-left: 32px; }  /* indented sub-items (To hood, To seat…) */
.spec-table .group th {
  padding-top: 14px;
  background: var(--band);
  color: var(--text);
  font-weight: 600;
}
.spec-table .spec-note { padding-left: 32px; font-size: 15px; font-weight: 400; color: var(--muted-2); font-style: italic; }

/* Plain data table (parts lists inside articles) */
.table-scroll { overflow-x: auto; margin: 0 0 1.2em; }
.data-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.45;
}
.data-table th,
.data-table td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.data-table thead th { background: var(--tint); border-bottom: 2px solid var(--trim); font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }


/* 11. Photo archive
   ========================================================================== */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.thumb-grid figure { margin: 0; }
.thumb-grid a { display: block; }
.thumb-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--tint);
}
.thumb-grid a:hover img { border-color: var(--accent); outline: 1px solid var(--accent); }
.thumb-grid figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted-2); }

/* Small thumbnails (archive, crawler, lathe pages) are shown at their real
   pixel size (width/height come from the original pages) so they stay sharp. */
.thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.thumb-row figure { margin: 0; flex: 0 0 auto; }
.thumb-row a { display: block; }
.thumb-row img {
  box-sizing: content-box;   /* border sits outside, photo keeps every pixel */
  max-width: calc(100% - 2px);
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tint);
}
.thumb-row a:hover img { border-color: var(--accent); outline: 1px solid var(--accent); }
.log > .thumb-row { margin: 8px 0 16px; }


/* 12. Long-form articles
   ========================================================================== */
.prose { max-width: 42em; font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: 26px; margin-top: 1.6em; }
.prose h3 { font-size: 21px; margin-top: 1.4em; }
.prose p, .prose ul, .prose ol { color: var(--text-body); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose figure { margin: 1.6em 0; }
.prose figure img { border-radius: var(--radius); }
.prose figcaption { margin-top: 8px; font-size: 15px; color: var(--muted-2); }
.prose .dateline-head {
  margin-top: 1.8em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  color: var(--text);
}
.prose h2:first-child { margin-top: 0; }

/* Journal intro text inside the band */
.journal-intro { max-width: 40em; margin: 16px 0 22px; color: var(--text-soft); }
.journal-intro p:last-child { margin-bottom: 0; }
.prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--trim);
  color: var(--muted);
}
.prose .dateline {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent);
}
.disclaimer {
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--band);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--muted);
}


/* 13. Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.muted   { color: var(--muted-2); }
.small   { font-size: 15px; }
.mt-0    { margin-top: 0; }
.mt-2    { margin-top: 32px; }
.mb-0    { margin-bottom: 0; }

@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .site-header__inner { padding-top: 16px; padding-bottom: 16px; }
  .site-nav { gap: 4px 18px; font-size: 15px; }
  .hero { padding-top: 36px; gap: 28px; }
  .log-entry__photo { flex-basis: 100%; }
  .pager a { min-width: 0; flex: 1 1 100%; }
  .pager__next { align-items: flex-start; text-align: left; }
}


/* 14. Print
   ========================================================================== */
@media print {
  body { background: #FFFFFF; font-size: 11pt; }
  .site-nav, .skip-link, .pager, .date-grid, .btn-row { display: none; }
  .site-footer { background: none; border-top: 1px solid #999; }
  a { color: inherit; text-decoration: none; }
  .log-entry, .entry { break-inside: avoid; }
}