/* Blog post: "Who's afraid of the big bad wolf?" (shares css/style.css with the home page) */
.post { padding: 40px 0 72px; }
.post-head, .post-media, .transcript { max-width: 760px; }
.post-back { display: inline-block; margin-bottom: 28px; font-weight: 700; font-size: .9rem; color: var(--deep-teal); }
.post-back:hover { text-decoration: underline; }
.post-title { margin-top: 12px; font-size: 2rem; line-height: 1.15; color: var(--ink); }
.post-sub { margin-top: 16px; font-size: 1.1rem; line-height: 1.55; color: var(--text-soft); }

.post-media { margin-top: 32px; }
.player-card { margin: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; }
.player-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.player { padding: 16px 20px 20px; }
.player-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 700; color: var(--ink); }
.player-meta { font-weight: 500; font-size: .9rem; color: var(--text-soft); }
.player audio { display: block; width: 100%; margin-top: 10px; }

.transcript { margin-top: 56px; }
.transcript h2.serif { margin-top: 0; font-size: 1.6rem; }
.transcript-hint { margin-top: 6px; font-size: .9rem; color: var(--text-soft); }
.dialogue { margin-top: 24px; border-top: 1px solid var(--line); }
.turn { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.turn-time { align-self: start; margin-top: 1px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: #7a8784; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.turn-time:hover { color: var(--deep-teal); text-decoration: underline; }
.turn-name { font-weight: 700; font-size: .8rem; line-height: 18px; letter-spacing: .14em; text-transform: uppercase; }
.turn-sarit .turn-name { color: #b5492c; }   /* coral, darkened for small text */
.turn-tab .turn-name { color: var(--deep-teal); }
.turn-body p + p { margin-top: 8px; }
.turn-body p:not(.turn-name) { font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
.turn-name + p { margin-top: 4px; }
.aside { font-style: italic; color: var(--text-soft); }
.turn.is-current { background: var(--mint); box-shadow: -12px 0 0 var(--mint), 12px 0 0 var(--mint); }

.post-cta { margin-top: 40px; padding: 24px; border-radius: 24px; background: var(--mint); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.post-cta p { font-weight: 700; color: var(--ink); }

@media (min-width: 640px) {
  .post { padding: 56px 0 96px; }
  .post-title { font-size: 2.6rem; }
  .player-card img { aspect-ratio: 16 / 10; object-position: 50% 45%; }
  .turn { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
}


/* v3: transcript in a collapsible toggle bar, closed by default (Oct 25) */
.transcript-toggle { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.transcript-toggle > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; background: var(--mint); color: var(--deep-teal); font-family: var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.transcript-toggle > summary::-webkit-details-marker { display: none; }
.transcript-toggle > summary:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: -2px; }
.tt-text { display: flex; flex-direction: column; gap: 2px; }
.tt-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.tt-sub { font-weight: 500; font-size: .85rem; color: var(--text-soft); }
.tt-chev { flex: none; width: 22px; height: 22px; transition: transform .2s ease; }
.transcript-toggle[open] > summary { border-bottom: 1px solid var(--line); }
.transcript-toggle[open] .tt-chev { transform: rotate(180deg); }
.transcript-toggle .dialogue { margin-top: 0; border-top: 0; padding: 0 20px; }
.transcript-toggle .turn:last-child { border-bottom: 0; }
.transcript-toggle .turn.is-current { box-shadow: -20px 0 0 var(--mint), 20px 0 0 var(--mint); }
@media (prefers-reduced-motion: reduce) { .tt-chev { transition: none; } }