/* 817 Running — shared styles for the blog index + all post pages.
   One stylesheet, shared across the blog index and every post.

   Colour, type and spacing come from /assets/tokens.css, which every page
   loads before this file. There is no :root block here on purpose: no raw
   hex outside tokens.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: var(--lh-ui);
  /* Clear the fixed tab bar. Removed at desktop, where the bar is hidden. */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; display: block; }
a { color: var(--ochre); text-decoration: none; }
a:hover { color: var(--ochre-hover); text-decoration: underline; }

/* Quality floor: focus must be visible on every interactive element. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

/* ---- Image slots -------------------------------------------------------
   Placeholders until real photographs exist. --image-well keeps an unloaded
   or absent image a quiet block rather than a hole. Text never sits on top
   of one. */
.media {
  background: var(--image-well);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: var(--t-data);
  letter-spacing: var(--tr-data); color: var(--ink-muted);
}
.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-hero { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--rule); }
.media-card { aspect-ratio: 4 / 3; }

/* ---- Nav ---------------------------------------------------------------
   Phone: wordmark only; the tab bar carries navigation.
   Desktop: horizontal links, tab bar hidden. */
.nav { background: var(--paper); border-bottom: var(--border); }
.nav-inner {
  max-width: 1120px; margin: 0 auto;
  padding: var(--s-2) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap);
}
.nav-logo {
  display: flex; align-items: center;
  color: var(--ink); font-family: var(--font-display);
  font-size: 20px; font-weight: 400;
}
.nav-logo:hover { text-decoration: none; }
.nav-links { display: none; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex;
  border-top: var(--border); background: var(--paper-panel);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; min-height: var(--tabbar-h);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: var(--t-sm); font-weight: 500;
  border-top: 3px solid transparent;
}
.tabbar a:hover { text-decoration: none; color: var(--ink); }
.tabbar a[aria-current="page"] { color: var(--ink); border-top-color: var(--ochre); }

/* ---- Blog index --------------------------------------------------------- */
.blog-hero { padding: var(--s-6) var(--gutter) var(--s-5); }
.blog-hero-inner { max-width: var(--measure); margin: 0 auto; }
.blog-hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1); line-height: var(--lh-h1); margin: 0 0 var(--s-3);
}
.blog-hero p {
  font-family: var(--font-prose);
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-body);
  margin: 0;
}

.post-grid {
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--gutter) var(--s-7);
  display: grid; gap: var(--s-5); grid-template-columns: 1fr;
}
.post-card {
  background: var(--paper-panel); border: 1px solid var(--rule);
  overflow: hidden; display: flex; flex-direction: column;
}
.post-card-image { aspect-ratio: 4 / 3; }
.post-card-cat {
  font-family: var(--font-data); font-size: var(--t-data);
  letter-spacing: var(--tr-data); color: var(--ink-muted);
}
.post-card-body {
  padding: var(--s-4); display: flex; flex-direction: column;
  gap: var(--s-2); flex: 1;
}
.post-card-meta {
  font-family: var(--font-data); font-size: var(--t-data);
  letter-spacing: var(--tr-data); color: var(--ink-muted);
  display: flex; gap: var(--s-2); align-items: center;
}
.post-card-meta .dot::before { content: "·"; }
.post-card-body h3 {
  margin: 0; font-family: var(--font-display);
  font-size: var(--t-h3); line-height: var(--lh-h3);
}
.post-card-body h3 a { color: var(--ink); }
.post-card-body p {
  margin: 0; font-family: var(--font-prose); font-size: var(--t-sm);
  line-height: var(--lh-body); color: var(--ink-body); flex: 1;
}
.btn-ghost {
  display: inline-flex; align-items: center;
  font-weight: 500; color: var(--ochre);
  font-size: var(--t-sm); margin-top: auto;
}
.coming-soon .post-card-image { opacity: .6; }
.coming-soon .btn-ghost { color: var(--ink-muted); }

/* ---- Article ------------------------------------------------------------
   The headline sits below the image slot, never on top of it. */
.article-hero { padding: var(--s-5) var(--gutter) var(--s-4); }
.article-hero-inner { max-width: var(--measure); margin: 0 auto; }
.article-hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1); line-height: var(--lh-h1); margin: 0 0 var(--s-3);
}
.article-hero .dek {
  font-family: var(--font-prose); font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--ink-body); margin: 0;
}
.article-hero .cat {
  display: inline-block; margin-bottom: var(--s-3);
  font-family: var(--font-data); font-size: var(--t-data);
  letter-spacing: var(--tr-data); color: var(--ink-muted);
}

.byline {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  border-top: var(--hairline); border-bottom: var(--hairline);
  display: flex; gap: var(--s-3); align-items: center;
  font-family: var(--font-data); font-size: var(--t-data);
  letter-spacing: var(--tr-data); color: var(--ink-muted);
}
.byline-meta { display: flex; gap: var(--s-2); }

.prose {
  max-width: var(--measure); margin: var(--s-5) auto;
  padding: 0 var(--gutter);
  font-family: var(--font-prose); font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--ink-body);
}
.prose h2 {
  font-family: var(--font-display); font-size: var(--t-h2);
  line-height: var(--lh-h2); color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2); border-bottom: var(--border);
}
.prose h3 {
  font-family: var(--font-display); font-size: var(--t-h3);
  line-height: var(--lh-h3); color: var(--ink); margin: var(--s-5) 0 var(--s-2);
}

.stat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule); margin: var(--s-5) 0;
}
.stat-card {
  background: var(--paper-panel); padding: var(--s-3);
  border-right: 1px solid var(--rule-faint);
  border-bottom: 1px solid var(--rule-faint);
}
.stat-card .num {
  font-family: var(--font-data); font-size: var(--t-h3); color: var(--ink);
}
.stat-card .label {
  font-size: var(--t-data); color: var(--ink-muted); margin-top: var(--s-1);
}

.chart, .flow {
  background: var(--paper-panel); border: 1px solid var(--rule);
  padding: var(--s-4); margin: var(--s-5) 0;
}
.chart-title { font-family: var(--font-ui); font-weight: 500; color: var(--ink); }
.chart-sub { color: var(--ink-muted); font-size: var(--t-sm); margin-bottom: var(--s-2); }
.chart-source { font-size: var(--t-data); color: var(--ink-muted); margin-top: var(--s-2); }

.figure { margin: var(--s-5) 0; }
.figure figcaption { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--s-2); }
.figure .credit { display: block; }

.callout {
  background: var(--paper-panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--ochre);
  padding: var(--s-4); margin: var(--s-5) 0;
}
.callout h4 {
  font-family: var(--font-ui); font-size: var(--t-ui);
  margin: 0 0 var(--s-2); color: var(--ink);
}
.callout ul { margin: 0; padding-left: var(--s-4); }

.pullquote {
  font-family: var(--font-display); font-size: var(--t-h3);
  line-height: var(--lh-h3); color: var(--ink);
  margin: var(--s-6) 0; padding-left: var(--s-4);
  border-left: 3px solid var(--rule);
}
.pullquote cite {
  display: block; font-family: var(--font-ui); font-size: var(--t-sm);
  font-style: normal; color: var(--ink-muted); margin-top: var(--s-2);
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto; margin: var(--s-4) 0;
  /* The table scrolls inside this box. The page body never scrolls sideways. */
  -webkit-overflow-scrolling: touch;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--hairline); text-align: left;
}
.data-table th {
  font-family: var(--font-ui); font-weight: 500;
  border-bottom: var(--border);
}
.data-table .num { text-align: right; font-family: var(--font-data); }
.table-source { font-size: var(--t-data); color: var(--ink-muted); }

.tip {
  background: var(--paper-panel); border: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4); margin: var(--s-5) 0; font-size: var(--t-sm);
}

.back-link { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) var(--s-3); }

.cta-band {
  border-top: var(--border); background: var(--paper-panel);
  padding: var(--s-6) var(--gutter);
}
.cta-band-inner { max-width: var(--measure); margin: 0 auto; }
.cta-band h3 {
  font-family: var(--font-display); font-size: var(--t-h2);
  line-height: var(--lh-h2); margin: 0 0 var(--s-3);
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s-5);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: var(--t-ui); font-weight: 500;
  border: var(--border); margin-top: var(--s-3);
}
.btn-primary:hover { background: var(--ink-body); color: var(--paper); text-decoration: none; }

.related { max-width: 1120px; margin: 0 auto; padding: var(--s-6) var(--gutter); }
.related h2 {
  font-family: var(--font-display); font-size: var(--t-h2);
  padding-bottom: var(--s-2); border-bottom: var(--border);
}
.related-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-4); }

/* ---- Footer (shared across the whole site) ------------------------------ */
.footer {
  border-top: var(--border); background: var(--paper);
  color: var(--ink-muted);
  padding: var(--s-6) var(--gutter) var(--s-5);
}
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-top { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-bottom: var(--s-5); }
.footer-brand {
  font-family: var(--font-display); font-size: 20px;
  color: var(--ink); margin-bottom: var(--s-2);
}
.footer-tagline { font-family: var(--font-prose); font-size: var(--t-sm); line-height: var(--lh-body); }
.footer h4 {
  color: var(--ink); font-family: var(--font-ui);
  font-size: var(--t-sm); font-weight: 500; margin: 0 0 var(--s-2);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer li a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--t-sm); }
.footer-bottom {
  border-top: var(--hairline); padding-top: var(--s-4);
  font-size: var(--t-data); line-height: var(--lh-body);
}

/* ---- Desktop ------------------------------------------------------------
   Phone is the base. This is the only breakpoint, and it matches the one in
   tokens.css. */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .nav-links { display: flex; align-items: center; gap: var(--s-5); }
  .nav-links a { color: var(--ink); font-size: var(--t-ui); }
  .nav-links a.active { border-bottom: 2px solid var(--ochre); }
  .nav-logo { font-size: 25px; }

  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}