/* A single fold of recent videos; the full collection has its own page. */
.recent-videos { width: 100%; max-width: 1280px; margin: 0 auto; }
.recent-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.recent-heading h3 { margin: 0; font: 600 16px/1.2 var(--reading); }
.see-all { display: inline-flex; gap: 20px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--cobalt); }
.see-all:hover { color: var(--cobalt); }
.recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.video-card { display: block; min-width: 0; }
.video-card:hover h3 { color: var(--cobalt); }
.video-thumbnail { position: relative; aspect-ratio: 16 / 9; }
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.video-thumbnail > span { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.4; }
.video-copy { padding-top: 14px; }
.video-copy .feed-meta { color: var(--cobalt); font-size: 11px; letter-spacing: .1em; margin: 0 0 8px; }
.video-copy h3 { margin: 0; font: 700 clamp(27px, 3vw, 42px)/1.02 var(--editorial); letter-spacing: -.025em; }
.story-ready .story-learn { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.story-ready .story-learn .learn-head { flex: none; }
.story-ready .recent-videos { flex: none; padding-bottom: 16px; }
.story-ready .learn-head { padding-block: 8px 16px; }
.story-ready .learn-head { --learn-size: clamp(70px, min(9vw, 12dvh), 136px); }
.story-ready .reading-cat { width: clamp(160px, 19dvh, 260px); }
.story-ready .recent-grid { max-width: 1040px; margin-inline: auto; }
.story-ready .recent-heading { max-width: 1040px; margin-inline: auto; }

.archive-page { height: 100dvh; min-height: 0; overflow: hidden; }
.archive-page .site-header { flex: none; }
.archive-main { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto; scroll-behavior: auto; }
.archive-shell { max-width: 1000px; margin: 0 auto; padding: 36px var(--gutter) 60px; }
.back-to-learn { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.archive-intro .page-title { font-size: clamp(64px, 9vw, 120px); margin-top: 16px; }
.archive-intro > p { font-size: 17px; margin: 24px 0 32px; }
.archive-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 18px; border-block: 1px solid var(--ink); font-size: 14px; font-weight: 600; }
.archive-toolbar label { display: flex; align-items: center; gap: 12px; }
.archive-toolbar input { width: 240px; max-width: 100%; min-height: 44px; border: 1px solid var(--ink-muted); border-radius: 0; background: transparent; padding: 8px 12px; font: 400 16px var(--reading); color: var(--ink); }
.archive-notice { color: var(--ink-muted); font-size: 13px; margin: 20px 0 0; }
.archive-entry { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; align-items: start; padding-block: 34px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); scroll-margin-top: 24px; }
.archive-entry[hidden] { display: none; }
.archive-entry h2 { font: 700 clamp(28px, 3.3vw, 40px)/1.04 var(--editorial); letter-spacing: -.025em; margin: 0; }
.archive-entry p:not(.feed-meta) { font-size: 16px; margin: 14px 0 0; }
.archive-entry .feed-meta { font-size: 11px; color: var(--cobalt); margin-bottom: 12px; }
.archive-entry > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.archive-results { min-height: 1.5em; font-size: 13px; color: var(--ink-muted); }
.archive-page .persistent-footer { flex: none; margin-top: 0; }

@media (min-width: 821px) and (max-height: 850px) {
  .story-ready .learn-head { --learn-size: 78px; }
  .story-ready .reading-cat { width: 150px; }
  .story-ready .learn-head { padding-block: 4px 8px; }
}
/* First published video, 25 September 2026: a stacked card ran its title below the band on 900px-tall desktops,
   so desktop cards always sit side by side (thumbnail left, title right). */
@media (min-width: 821px) {
  .story-ready .video-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: start; gap: 18px; }
  .story-ready .video-copy { padding-top: 0; }
  .story-ready .video-copy h3 { font-size: clamp(24px, 2.6vw, 32px); }
}
@media (max-width: 820px) {
  .recent-grid { grid-template-columns: 1fr; gap: 20px; }
  .video-card { display: grid; grid-template-columns: 36% minmax(0, 1fr); align-items: start; gap: 16px; }
  .video-copy { padding: 0; }
  .video-copy h3 { font-size: clamp(23px, 6vw, 32px); }
  .video-copy .feed-meta { font-size: 10px; letter-spacing: .06em; margin-bottom: 7px; }
  .story-ready .learn-head { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px; padding: 0 var(--gutter) 24px; }
  .story-ready .learn-head { --learn-size: clamp(56px, 16vw, 92px); }
  .story-ready .learn-head h2 { width: auto; }
  .story-ready .reading-cat { width: 34%; max-width: 180px; margin: 0; }
  .recent-heading { margin-bottom: 20px; }
  .recent-heading h3 { font-size: 14px; }
  .see-all { font-size: 14px; gap: 12px; }
  .archive-shell { padding-top: 18px; }
  .archive-toolbar { gap: 16px; }
  .archive-toolbar label { display: block; font-size: 0; }
  .archive-toolbar input { width: 190px; }
  /* Round 12: on phones the thumbnail leads at full width and the title follows at a calmer size, instead of a
     postage-stamp image beside a four-line headline. */
  .archive-entry { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 22px; }
  .archive-entry > img { order: -1; border-radius: 3px; }
  .archive-entry h2 { font-size: 24px; line-height: 1.06; }
  .archive-entry .feed-meta { font-size: 10px; letter-spacing: .05em; }
  .archive-entry p:not(.feed-meta) { font-size: 14px; }
}
@media (max-width: 820px) and (max-height: 740px) {
  .story-ready .learn-head { padding-bottom: 8px; }
  .story-ready .reading-cat { max-width: 94px; }
  .story-ready .learn-head { --learn-size: 54px; }
  .story-ready .recent-heading { margin-bottom: 12px; }
  .story-ready .recent-grid { gap: 16px; }
  .story-ready .video-copy h3 { font-size: 22px; }
  .story-ready .video-thumbnail > span { font-size: 10px; padding: 1px 4px; right: 4px; bottom: 4px; }
}
.videos-empty { grid-column: 1 / -1; padding-block: 28px; border-block: 1px solid var(--ink); }
.videos-empty h3 { margin: 0; font: 700 clamp(28px, 4vw, 44px)/1.05 var(--editorial); }
.videos-empty p { margin: 16px 0; font-size: 16px; }
.videos-empty a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cobalt); font-size: 14px; }
.archive-notice a { color: var(--cobalt); display: inline-flex; min-height: 44px; align-items: center; }
.archive-entry h2 a:hover { color: var(--cobalt); }
@media (max-height: 740px) { .story-ready .videos-empty { padding-block: 12px; } }

@media (min-width: 821px) {
  .story-ready .story-learn { justify-content: flex-start; }
  .story-ready .story-learn .learn-head { padding-bottom: clamp(20px, 3dvh, 40px); }
}

@media (max-width: 820px) {
  .story-ready .story-learn .learn-head { padding-bottom: 20px; }
}

/* The heading's caps sit on the shared title line (styles.css), so the heading,
   not the taller cat, sets the row's top. Hoji is centred on the heading's line
   box, then raised 8% for the optical alignment. */
.story-ready .story-learn .learn-head {
  align-items: start;
  overflow: visible;
  padding-top: calc(var(--title-line) - var(--ceiling) + var(--learn-size) * (.51 - var(--learn-lh) / 2));
}
.story-ready .story-learn .reading-cat { translate: 0 calc(var(--learn-size) * var(--learn-lh) / 2 - 58%); }