/* ═════════════════════════ Live ═════════════════════════ */
.live { container: live / inline-size; }
.live__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); padding-bottom: var(--sp-10); }
.live__top { padding-top: var(--sp-6); }
.live__title { margin: var(--sp-3) 0 0; max-width: 24ch; font: 700 var(--t-h1)/1.02 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.live__dek { margin: var(--sp-4) 0 0; max-width: 52ch; font: 400 var(--t-dek)/1.42 var(--serif); color: var(--text-2); }
.live__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em .9em; margin: var(--sp-5) 0 0;
  font: 600 var(--t-meta)/1.4 var(--sans); color: var(--meta); font-variant-numeric: tabular-nums;
}
.live__status b { display: inline-flex; align-items: center; gap: .4em; color: var(--now); font-weight: 800; }
.live__status .lf { --lf: 15px; }
.live__top .share { margin-top: var(--sp-5); }

.keyev { border-block: 1px solid var(--rule-strong); }
.keyev summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none;
  font: italic 600 1.375rem/1 var(--serif);
}
.keyev summary::-webkit-details-marker { display: none; }
.keyev summary .lf { --lf: 16px; transition: rotate .3s var(--ease); }
.keyev[open] summary .lf { rotate: 180deg; }
.keyev ol { margin: 0; padding: 0 0 var(--sp-4); list-style: none; display: grid; gap: var(--sp-3); }
.keyev li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: var(--sp-3); }
.keyev time { font: 700 var(--t-meta)/1.5 var(--sans); color: var(--meta); font-variant-numeric: tabular-nums; }
.keyev li.is-now time { color: var(--now); }
.keyev a { padding-block: .15em; margin-block: -.15em; font: 600 1rem/1.35 var(--serif); color: var(--text); text-decoration: none; }   /* a 24px target, same rhythm */
.keyev a:hover { text-decoration: underline; text-decoration-color: var(--context); text-underline-offset: .15em; }

.feed { position: relative; display: grid; padding-left: var(--mark-w); }
.feed::before { content: ""; position: absolute; left: calc(var(--mark-w) / 2); top: 0; bottom: 0; width: 1px; translate: -.5px 0; background: var(--stone-300); }
.newbar { position: sticky; top: calc(var(--bar-h) + var(--sp-3)); z-index: 5; display: flex; justify-content: center; margin: 0 0 var(--sp-2); }
.newbar .btn { min-height: 40px; padding-inline: var(--sp-5); }
.post { position: relative; padding-block: var(--sp-6); border-bottom: 1px solid var(--rule); }
.post__leaf { position: absolute; left: calc(-1 * var(--mark-w) / 2); top: calc(var(--sp-6) + .3rem); translate: -50% 0; --lf: calc(var(--mark-w) * .6); color: var(--text); }
.post.is-now .post__leaf { color: var(--now); }
.post__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .8em; margin: 0 0 var(--sp-2); font: 700 var(--t-ui)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.post.is-now .post__head time { color: var(--now); }
.post__head span { font-weight: 500; font-size: var(--t-meta); color: var(--meta); }
.post__title { margin: 0 0 var(--sp-3); font: 600 var(--t-h3)/1.22 var(--serif); letter-spacing: -.006em; text-wrap: balance; }
.post p { margin: 0 0 .9em; max-width: 62ch; font: 400 1.0625rem/1.6 var(--serif); }
.post ul { margin: 0 0 .9em; padding-left: 1.1em; font: 400 1.0625rem/1.55 var(--serif); }
.post li { margin-bottom: .4em; }
.post .photo { aspect-ratio: 3 / 2; margin-top: var(--sp-2); }
.post .caption { margin-bottom: var(--sp-2); }
.post blockquote { margin: 0 0 .9em; padding-left: var(--sp-4); border-left: 2px solid var(--rule-strong); font: italic 500 1.25rem/1.4 var(--serif); }
.post__foot { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font: 600 var(--t-meta)/1 var(--sans); }
.post__foot a, .post__foot button {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--meta); font: inherit; text-decoration: none; cursor: pointer;
}
.post__foot a:hover, .post__foot button:hover { color: var(--context); }
.post__title:focus { outline: none; }
.post__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.post--pinned { margin-bottom: var(--sp-2); padding: var(--sp-5); border: 0; background: var(--surface); }
.post--pinned .post__leaf { left: calc(-1 * var(--mark-w) / 2 - var(--sp-5) + var(--sp-5)); top: calc(var(--sp-5) + .3rem); }
.post__label { display: inline-flex; align-items: center; gap: .4em; margin: 0 0 var(--sp-2); font: 800 var(--t-micro)/1 var(--sans); color: var(--meta); }
.post--context .post__title { color: var(--context); }
.feed__more { padding-top: var(--sp-6); }
.live__side { display: grid; gap: var(--sp-8); align-content: start; }

@container live (min-width: 720px) {
  .live__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); }
  .live__grid > * { grid-column: 1 / -1; }
  .live__top { grid-column: 1 / 8; padding-top: var(--sp-8); }
  .feed { grid-column: 1 / 7; }
}
@container live (min-width: 1100px) {
  .live__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; row-gap: var(--sp-8); }
  .live__top { grid-column: 4 / 13; padding-top: var(--sp-9); }
  .keyev { grid-column: 1 / 4; grid-row: 2; position: sticky; top: calc(var(--bar-h) + var(--sp-5)); border-bottom: 0; padding-right: var(--sp-4); }
  .keyev summary { pointer-events: none; }
  .keyev summary .lf { display: none; }
  .feed { grid-column: 4 / 10; grid-row: 2; }
  .live__side { grid-column: 10 / 13; grid-row: 2; position: sticky; top: calc(var(--bar-h) + var(--sp-5)); padding-left: var(--sp-2); }
}