/* ============================================================
   Wise Owl Races — Articles
   Freetrail-inspired: full-width hero banners + image tiles
   with overlaid text. Trail-brand palette (forest/cream/amber).
   ============================================================ */

/* ---------------- Index: category hero banner ---------------- */
.articles-hero {
  position: relative;
  min-height: clamp(240px, 38vh, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--forest-800);
}
.articles-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.articles-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,31,23,.55), rgba(15,31,23,.72));
}
.articles-hero-inner { position: relative; z-index: 1; padding: 40px var(--pad); }
.articles-hero-eyebrow {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 13px;
  color: var(--amber-500);
  margin: 0 0 12px;
}
.articles-hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-weight: 800;
  font-size: clamp(44px, 8vw, 82px);
  line-height: 1;
  margin: 0;
  color: #fff;
}
.articles-hero p {
  margin: 16px auto 0;
  max-width: 620px;
  color: rgba(255,255,255,.86);
  font-size: clamp(15px, 2vw, 18px);
}

/* ---------------- Tile grids ---------------- */
.articles-shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--pad) clamp(56px, 8vw, 100px);
}
/* The lead story spans the full width of the grid below it. */
.articles-lead { margin-bottom: clamp(14px, 1.6vw, 20px); }
.articles-rest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

/* ------------------------------------------------------------
   Article card — cover on top, text on a solid surface below.
   Type is never laid over the photo: a lot of our covers are logo
   art or busy trail shots, and overlaid text was unreadable on
   exactly those.
   ------------------------------------------------------------ */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line-dark);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15,31,23,.13);
  border-color: rgba(20,32,26,.2);
}
.tile-media {
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--forest-700);
}
.tile-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.tile:hover .tile-media img { transform: scale(1.05); }
.tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(16px, 1.7vw, 22px);
}
.tile-meta {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 9px;
}
/* Forest rather than amber: amber-600 on white only reaches ~3:1, which is
   too thin for a label this small. Amber stays as the hover accent. */
.tile-meta .cat { color: var(--forest-600); font-weight: 600; }
.tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.18;
  margin: 0;
  font-size: 20px;
}
.tile-readmore {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 600;
  color: var(--forest-700);
  transition: color .2s;
}
.tile-readmore::after { content: " \2197"; color: var(--amber-600); }
.tile:hover .tile-readmore { color: var(--amber-600); }

/* Featured (lead) card on the index — splits side by side on wide screens
   so it stays dominant without putting type back over the photo. */
.tile.featured .tile-title { font-size: clamp(22px, 2.2vw, 28px); }
.tile-excerpt {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
@media (min-width: 900px) {
  .tile.featured {
    flex-direction: row;
    min-height: clamp(320px, 36vh, 420px);
  }
  .tile.featured .tile-media {
    width: 58%;
    aspect-ratio: auto;
  }
  .tile.featured .tile-body {
    width: 42%;
    justify-content: center;
    padding: clamp(28px, 3.2vw, 48px);
  }
  .tile.featured .tile-meta { font-size: 12.5px; margin-bottom: 12px; }
  .tile.featured .tile-title { font-size: clamp(26px, 2.6vw, 36px); }
  .tile.featured .tile-readmore { margin-top: 22px; padding-top: 0; }
}

.articles-empty {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(48px, 9vw, 96px) var(--pad);
}
.articles-empty-icon {
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  color: var(--amber-500);
}
.articles-empty h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 12px;
}
.articles-empty p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 26px;
}


/* ============================================================
   Single article — Freetrail-style hero with title overlaid
   ============================================================ */
.post-hero {
  position: relative;
  min-height: clamp(340px, 56vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--forest-800);
}
.post-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.post-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,31,23,.45), rgba(15,31,23,.68));
}
.post-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: clamp(48px, 8vw, 96px) var(--pad);
}
.post-meta {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
}
.post-meta .cat { color: var(--amber-500); }
.post-hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 60px);
  line-height: 1.04;
  margin: 0;
  color: #fff;
}
.post-byline {
  margin-top: 20px;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  color: rgba(255,255,255,.8);
}
.post-byline b { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------
   Reading progress — fills across the article body only, so it
   sits at 0 through the hero and hits 100% at the last line.
   ------------------------------------------------------------ */
.post-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.post-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber-500);
  transform-origin: left center;
}

/* ------------------------------------------------------------
   Article shell — sticky rail on the left, reading column right.
   ------------------------------------------------------------ */
/* Stacked is the default: the rail's contents sit above the article as a
   compact header. The sticky two-column layout is layered on top of this for
   wide screens only (see the min-width block below). Articles without enough
   headings for a contents list stay stacked at every width — they still get
   the author chip and the share row, just no menu beside them. */
.post-shell {
  max-width: calc(740px + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px) var(--pad) 0;
}
.post-rail-inner {
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}

.rail-label {
  display: block;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Author chip — opens the full bio in a dialog */
.rail-author {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  margin-bottom: 22px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.rail-author.is-static { cursor: default; }
.rail-author-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--bone);
  transition: box-shadow .2s;
}
.rail-author-text { display: block; min-width: 0; }
.rail-author-label {
  display: block;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: var(--muted);
}
.rail-author-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 3px;
}
.rail-author-more {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--forest-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rail-author:hover .rail-author-more { color: var(--amber-600); }
.rail-author:hover .rail-author-avatar { box-shadow: 0 0 0 2px var(--amber-500); }

/* Table of contents. Stacked (the default) it's a tappable chip that
   collapses; beside the article it's a plain always-open list. */
.post-toc { margin-bottom: 22px; }
.post-toc > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  color: var(--forest-700);
}
.post-toc > summary::-webkit-details-marker { display: none; }
.post-toc > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}
.post-toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.post-toc-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-left: 1px solid var(--line-dark);
}
.post-toc-list li { margin: 0; }
.post-toc-list a {
  display: block;
  margin-left: -1px;
  border-left: 2px solid transparent;
  padding: 7px 4px 7px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s, border-color .18s;
}
.post-toc-list li.d1 a { padding-left: 26px; }
.post-toc-list a:hover { color: var(--ink); }
.post-toc-list a.is-active {
  border-left-color: var(--amber-500);
  color: var(--forest-700);
  font-weight: 600;
}

/* Share row */
.rail-share { display: flex; align-items: center; gap: 14px; }
.rail-share .rail-label { margin-bottom: 0; }
.rail-share-links { display: flex; gap: 9px; }
.rail-share-links a {
  display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-dark); border-radius: 50%;
  color: var(--forest-700);
  transition: background .2s, color .2s, border-color .2s;
}
.rail-share-links a:hover { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }

/* ------------------------------------------------------------
   Author bio dialog
   ------------------------------------------------------------ */
.author-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}
.author-modal[hidden] { display: none; }
.author-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,31,23,.62);
  animation: author-fade .2s ease;
}
.author-modal-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 2 * var(--pad));
  overflow-y: auto;
  padding: clamp(28px, 4vw, 36px);
  background: #fff;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15,31,23,.28);
  animation: author-rise .24s cubic-bezier(.2,.7,.2,1);
}
@keyframes author-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes author-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98) }
  to { opacity: 1; transform: none }
}
.author-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.author-modal-close:hover { background: var(--forest-50); color: var(--ink); }
.author-modal-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bone);
  /* Images are display:block sitewide, so the card's text-align can't
     centre this one. */
  margin-inline: auto;
}
.author-modal-eyebrow {
  margin: 16px 0 0;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--muted);
}
.author-modal-name {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}
.author-modal-bio {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.author-modal-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--forest-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.author-modal-link:hover { color: var(--amber-600); }
body.modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   Body. The column already sits at a readable width here; the
   text/media split that widens the page beside the rail lives in
   the min-width block at the end of the file.
   ------------------------------------------------------------ */
.post-body {
  font-size: 18.5px;
  line-height: 1.75;
  color: #26332c;
}
/* The editor writes a bare <br> between blocks; the margins below
   already do that spacing, so the extra gap just makes the rhythm
   uneven. Line breaks *inside* a paragraph are untouched. */
.post-body > br { display: none; }
.post-body > *:first-child { margin-top: 0; }
.post-body :is(h2, h3) { scroll-margin-top: 24px; }
.post-body p { margin: 0 0 1.4em; }
.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  margin: 1.9em 0 .5em;
  color: var(--ink);
}
.post-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 26px);
  margin: 1.6em 0 .4em;
  color: var(--ink);
}
.post-body a { color: var(--forest-600); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--amber-600); }
.post-body ul, .post-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post-body li { margin: .4em 0; }
.post-body blockquote {
  margin: 1.7em 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--amber-500);
  font-family: var(--font-display);
  font-size: 1.2em;
  font-style: italic;
  color: var(--forest-700);
}
.post-body hr { border: none; border-top: 1px solid var(--line-dark); margin: 2.4em 0; }
.post-body figure { margin: 2em 0; }
.post-body figure img, .post-body img { width: 100%; border-radius: 14px; }
.post-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.post-body code { background: var(--forest-50); padding: 2px 6px; border-radius: 6px; font-size: .9em; }

/* Pull quote — big centered callout (distinct from a normal quote) */
.post-body blockquote.pullquote {
  border: none;
  padding: 0;
  margin: 1.8em 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.25;
  color: var(--forest-700);
  position: relative;
}
.post-body blockquote.pullquote::before {
  content: "\201C";
  display: block;
  font-size: 2em;
  line-height: .6;
  color: var(--amber-500);
  margin-bottom: 8px;
}

/* Embeds (YouTube / Vimeo / Strava / Instagram) */
.wo-embed { margin: 2em 0; }
.wo-embed-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.wo-embed-frame.r-16x9 { aspect-ratio: 16 / 9; }
.wo-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wo-embed .instagram-media, .wo-embed .strava-embed-placeholder { margin: 0 auto !important; }
.wo-embed > a { color: var(--forest-600); text-decoration: underline; word-break: break-all; }

.post-back {
  margin: clamp(30px, 4vw, 46px) 0 clamp(56px, 8vw, 96px);
}
.post-back a {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  color: var(--forest-700);
}
.post-back a::before { content: "\2190  "; }

.post-related {
  max-width: var(--max);
  margin: clamp(56px, 8vw, 96px) auto 0;
  /* Bottom padding matters: without it the cards ran straight into the
     footer. */
  padding: clamp(40px, 5vw, 64px) var(--pad) clamp(64px, 9vw, 110px);
  border-top: 1px solid var(--line-dark);
}
.post-related h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  text-align: center;
  margin: 0 0 clamp(28px, 4vw, 44px);
  color: var(--ink);
}
.post-related .articles-rest { max-width: 100%; }

/* ------------------------------------------------------------
   Wide screens — an article with a contents list gets the sticky
   rail beside it. Everything else keeps the stacked layout above.
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .post.has-rail .post-shell {
    max-width: var(--max);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(40px, 4.5vw, 64px);
    /* No `align-items: start` here: the rail column has to stretch to the
       full row height, otherwise the sticky element inside it can only
       travel as far as its own content box and scrolls away partway down
       the article. */
  }
  .post.has-rail .post-rail-inner {
    position: sticky;
    top: 28px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .post.has-rail .rail-author {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-dark);
  }
  /* Beside the article the list is always open, so the chip affordance
     goes away and the summary becomes a plain label. */
  .post.has-rail .post-toc > summary {
    display: block;
    padding: 0;
    background: none;
    border: none;
    color: var(--muted);
    cursor: default;
  }
  .post.has-rail .post-toc > summary::after { display: none; }
  .post.has-rail .post-toc-list { margin-top: 12px; }
  .post.has-rail .rail-share {
    display: block;
    padding-top: 20px;
    border-top: 1px solid var(--line-dark);
  }
  .post.has-rail .rail-share .rail-label { margin-bottom: 12px; }

  /* Text keeps a comfortable measure; media breaks out to the full
     content column so the page reads wide without a punishing line
     length. */
  .post.has-rail .post-body > * { max-width: 740px; }
  .post.has-rail .post-body > figure,
  .post.has-rail .post-body > img,
  .post.has-rail .post-body > .wo-embed,
  .post.has-rail .post-body > hr,
  .post.has-rail .post-body > blockquote.pullquote { max-width: 100%; }
}

@media (max-width: 640px) {
  .post-body { font-size: 17.5px; }
}