/* ==========================================================================
   pages.css — podcast, games, photography, and generic content pages.
   ========================================================================== */

.prose { font-size: 1rem; line-height: 1.7; color: var(--ink-deep); }
.prose p + p { margin-top: 1rem; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  margin: 2rem 0 .75rem;
}

.sectionrule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,74,114,.35), transparent);
  margin: 2.25rem 0;
}

/* ------------------------------------------------------------- PODCAST --- */

.showhead {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 1.25rem 0 .5rem;
}
@media (max-width: 34rem) {
  .showhead { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.showart {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 11rem;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,.5);
}

.showhead__text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.showhead__hosts {
  margin-top: .3rem;
  font-size: .95rem;
  font-style: italic;
  color: var(--ink-soft);
}
.showhead__blurb {
  margin-top: .8rem;
  font-size: .92rem;
  line-height: 1.65;
  color: #40567a;
}

.showlinks {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
  justify-content: inherit;
}
@media (max-width: 34rem) { .showlinks { justify-content: center; } }
.showlinks .btn { font-size: .78rem; padding: .5rem .95rem; }

/* search + count */
.eptools {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.epsearch {
  flex: 1 1 14rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(47,74,114,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  font-size: .92rem;
  color: var(--ink-deep);
}
.epsearch::placeholder { color: var(--ink-soft); }
.epsearch:focus { outline: 3px solid #ffd66b; outline-offset: 2px; }
.epcount {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.feedstatus {
  margin-bottom: .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.feedstatus[data-tone="warn"] { color: #8a5a1e; }

.loadmore { display: block; margin: 1.5rem auto 0; }

/* The sticky player is fixed and about 5.5rem tall. Any page carrying it gets
   extra room at the bottom so it never covers the last card, the Load more
   button, or the footer. */
.has-player .shell { padding-bottom: 9rem; }
.has-player .sitefoot { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }

.episodes { display: grid; gap: .85rem; }

.episode {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .95rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(47,74,114,.14);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.episode[data-current="true"] { border-color: var(--ink); box-shadow: var(--shadow-md); }

.episode__body { min-width: 0; }

/* Episode artwork, spanning the full card above everything else. Because it
   is `hidden` until the notes open, it isn't placed in the grid at all and
   leaves no empty row behind — which is why this uses column spanning rather
   than named template areas. */
.episode__hero {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  background: rgba(47,74,114,.06);
}

.episode__play {
  width: 3rem; height: 3rem;
  border: 0; border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.episode__play:hover { background: var(--ink-deep); transform: scale(1.06); }
.episode__play svg { width: 1.1rem; height: 1.1rem; }

.episode__num {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.episode__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--ink);
  margin: .1rem 0 .3rem;
}
.episode__meta {
  margin-top: .1rem;
  font-size: .74rem;
  color: var(--ink-soft);
  display: flex; gap: .45rem; flex-wrap: wrap;
}

.episode__notestoggle {
  margin-top: .6rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.episode__notestoggle:hover { color: var(--ink-deep); }

.episode__notes {
  margin-top: .6rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(47,74,114,.14);
  font-size: .85rem;
  line-height: 1.65;
  color: #40567a;
}
.episode__notes a { text-decoration: underline; text-underline-offset: 2px; }
.episode__notes p + p { margin-top: .2rem; }

/* clickable chapter timestamps */
.chapter {
  display: inline-block;
  min-width: 3.4rem;
  margin-right: .25rem;
  padding: .1rem .45rem;
  border: 1px solid rgba(47,74,114,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.chapter:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* sticky player */
.player {
  position: fixed;
  left: 50%;
  bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 200%);
  width: min(38rem, calc(100vw - 1.5rem));
  z-index: 80;
  padding: .8rem 1rem .9rem;
  border-radius: 18px;
  background: #21395c;
  color: #eaf1fb;
  box-shadow: var(--shadow-lg);
  transition: transform 380ms var(--ease);
}
.player[data-open="true"] { transform: translate(-50%, 0); }
.player__top { display: flex; align-items: center; gap: .75rem; }
.player__title {
  flex: 1 1 auto;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__btn {
  width: 2.4rem; height: 2.4rem;
  flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: inherit;
  display: grid; place-items: center;
  cursor: pointer;
}
.player__btn:hover { background: rgba(255,255,255,.26); }
.player__btn svg { width: 1rem; height: 1rem; }
.player__btn--main { background: #ffd98a; color: #21395c; }
.player__btn--main:hover { background: #ffe4a8; }
.player__btn--rate {
  width: auto;
  padding: 0 .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.player__bar {
  margin-top: .65rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.player__scrub {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  position: relative;
}
.player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: #ffd98a;
}
.player__knob {
  position: absolute;
  top: 50%; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.emptystate {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.7;
}

/* ------------------------------------------------------- FUN AND GAMES --- */

.subhead {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 1rem;
  text-align: center;
}

/* the standalone apps */
.apps { display: grid; gap: .85rem; }

.appcard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(47,74,114,.14);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
.appcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(47,74,114,.3);
}

.appcard__icon { font-size: 2rem; line-height: 1.1; }
.appcard__body { display: block; min-width: 0; }

.appcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.appcard__desc {
  display: block;
  font-size: .88rem;
  line-height: 1.6;
  color: #40567a;
}
.appcard__host {
  display: inline-block;
  margin-top: .6rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* the little outbound arrow */
.appcard__host::after { content: " \2197"; letter-spacing: 0; }

.gamegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.gamecard {
  display: block;
  padding: 1.25rem;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(47,74,114,.14);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.gamecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gamecard__icon { display: block; font-size: 2rem; line-height: 1; margin-bottom: .6rem; }
.gamecard__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.gamecard__desc { display: block; font-size: .85rem; line-height: 1.55; color: #40567a; }

/* The photograph at the foot of the page. */
.youngster {
  margin: 3rem auto 0;
  max-width: 17rem;
  text-align: center;
}
.youngster img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.youngster figcaption {
  margin-top: .7rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--ink-soft);
}

.gamestage { display: none; }
.gamestage[data-active="true"] { display: block; }

.gamebar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.gamebar__stat {
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
}

/* memory game */
.memgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  max-width: 26rem;
  margin: 0 auto;
}
.memcard {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  perspective: 700px;
}
.memcard__inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 420ms var(--ease);
  transform-style: preserve-3d;
}
.memcard[data-face="up"] .memcard__inner,
.memcard[data-face="done"] .memcard__inner { transform: rotateY(180deg); }
.memcard__front, .memcard__back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.memcard__front {
  background: linear-gradient(160deg, var(--ink), var(--ink-deep));
  color: rgba(255,255,255,.55);
  font-size: 1.4rem;
}
.memcard__back {
  background: #fdfbf5;
  transform: rotateY(180deg);
}
.memcard[data-face="done"] { opacity: .45; cursor: default; }

/* canvas games */
.canvaswrap {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,.65);
  touch-action: none;
}
.canvaswrap canvas { width: 100%; height: auto; display: block; }
.canvasnote {
  text-align: center;
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: .7rem;
}

/* trivia */
.quiz { max-width: 34rem; margin: 0 auto; }
.quiz__q {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 1rem;
  text-align: center;
}
.quiz__opts { display: grid; gap: .55rem; }
.quiz__opt {
  padding: .8rem 1rem;
  border: 1px solid rgba(47,74,114,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  text-align: left;
  font-size: .93rem;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.quiz__opt:hover:not(:disabled) { background: #fff; border-color: var(--ink); }
.quiz__opt[data-state="right"] { background: #d6f0d8; border-color: #3f8b4a; }
.quiz__opt[data-state="wrong"] { background: #f7d9d9; border-color: #a83f3f; }
.quiz__opt:disabled { cursor: default; }
.quiz__after { margin-top: 1rem; text-align: center; min-height: 3rem; }
.quiz__fact { font-size: .87rem; color: #40567a; line-height: 1.6; margin-bottom: .8rem; }

/* ---------------------------------------------------------- PHOTOGRAPHY -- */
.filters {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.filters button {
  padding: .4rem .95rem;
  border: 1px solid rgba(47,74,114,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms var(--ease);
}
.filters button:hover { background: #fff; }
.filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* Masonry, built on grid rather than CSS columns.

   Columns would fill top-to-bottom down column one, then column two — so the
   last photo in the list lands at the bottom of the right-hand column, not at
   the bottom of the gallery. Grid fills left-to-right in rows, which means the
   order in data/photos.js is the order you actually see.

   Nothing is cropped: these are 3:4 portraits and squaring them off would cut
   heads in half. Each frame keeps its proportions and js/gallery.js works out
   how many 8px rows it should span. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  grid-auto-rows: 8px;
  align-items: start;
}
@media (max-width: 46rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 24rem) { .gallery { grid-template-columns: 1fr; } }

.gallery figure {
  position: relative;
  margin: 0;
  /* Sensible span until the image has loaded and been measured; also what a
     visitor with JavaScript off ends up with. */
  grid-row-end: span 34;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  background: rgba(255,255,255,.5);
  transition: box-shadow 240ms var(--ease);
}
.gallery figure:hover { box-shadow: var(--shadow-md); }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 420ms var(--ease);
}
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .7rem .55rem;
  background: linear-gradient(180deg, transparent, rgba(15,28,50,.78));
  color: #fff;
  font-size: .74rem;
  letter-spacing: .02em;
}
/* The empty-search message is a grid item too, and 8px auto-rows would
   otherwise crush it to a sliver. */
.gallery .emptystate {
  grid-column: 1 / -1;
  grid-row: span 20;
}

/* Placeholder tile, for entries added before their file exists. */
.gallery .ph {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg,
      rgba(47,74,114,.06) 0 10px, rgba(47,74,114,.02) 10px 20px);
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(10,20,36,.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 78svh;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  margin-top: .9rem;
  color: #d8e3f2;
  font-size: .85rem;
  text-align: center;
}
.lightbox__x, .lightbox__prev, .lightbox__next {
  position: absolute;
  width: 3rem; height: 3rem;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.3rem;
}
.lightbox__x:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.28); }
.lightbox__x    { top: 1rem; right: 1rem; }
.lightbox__prev { left: .75rem;  top: 50%; margin-top: -1.5rem; }
.lightbox__next { right: .75rem; top: 50%; margin-top: -1.5rem; }