/* v06 content, high-fidelity split-axis composition. All selectors are scoped. */
.sat { --sat-axis: #76836e; --sat-gutter: clamp(4.5rem, 9vw, 8.5rem); }
.sat-heading { margin-bottom: 3.8rem; }
.sat-heading h2 { margin-top: .8rem; font-size: clamp(2.4rem, 4.5vw, 4rem); }
.sat-years { position: relative; isolation: isolate; list-style: none; padding: 0 0 3rem; margin: 0; }
/* The central line is the sole connector; its terminal arrow gives direction. */
.sat-years::before { content: ''; position: absolute; z-index: -1; top: .65rem; bottom: .6rem; left: calc(50% - .5px); width: 1px; background: var(--sat-axis); }
.sat-years::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 6px); width: 12px; height: 12px; border-right: 1px solid var(--sat-axis); border-bottom: 1px solid var(--sat-axis); transform: rotate(45deg); }
.sat-year { padding-bottom: 2.6rem; }
.sat-date { position: relative; width: max-content; margin-left: calc(50% + 1.25rem); padding: .15rem .4rem; background: var(--paper); color: var(--accent); font: 400 1rem/1.5 var(--mono); letter-spacing: -.035em; }
.sat-date::before { content: ''; position: absolute; top: .5rem; left: -1.5rem; width: .5rem; height: .5rem; border: 1px solid var(--sat-axis); border-radius: 50%; background: var(--paper); }
.sat-events { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.sat-event { display: grid; grid-template-columns: minmax(0, 1fr) var(--sat-gutter) minmax(0, 1fr); align-items: center; min-width: 0; break-inside: avoid; }
.sat-copy { grid-column: 1; grid-row: 1; min-width: 0; padding: 1.35rem 1.5rem; background: var(--surface); border: 1px solid #d9ddd1; border-radius: 2px; }
.sat h4 { margin: 0; font: 600 1rem/1.35 var(--sans); letter-spacing: -.02em; }
.sat-copy p { margin-top: .6rem; color: var(--muted); font-size: .84rem; line-height: 1.75; overflow-wrap: anywhere; }
.sat-copy a { display: inline; font-size: .77rem; text-underline-offset: .25em; }
.sat-pills { grid-column: 3; grid-row: 1; display: flex; align-content: center; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; min-width: 0; max-width: 25rem; }
.sat-pills li { flex: 0 1 auto; max-width: 100%; padding: .35rem .7rem; border: 1px solid #bcc6b6; border-radius: 2rem; background: #edf0e6; color: #53604f; font: .72rem/1.5 var(--sans); overflow-wrap: anywhere; }
.sat-reverse .sat-copy { grid-column: 3; }
.sat-reverse .sat-pills { grid-column: 1; justify-content: flex-end; justify-self: end; }
/* Equal tracks and axis-facing pill alignment keep one-pill events balanced.
   Density changes wrapping only; there is no filler, ranking or stretched pill. */
.sat-opening { padding-bottom: 1.8rem; }
.sat-opening .sat-events { margin-top: 1.5rem; }
.sat-light { padding-bottom: 2rem; }
.sat-dense { padding-bottom: 2.4rem; }
.sat-dense .sat-events { gap: 1rem; }
.sat-air { padding-bottom: 3.5rem; }
.sat-air .sat-events { gap: 1.5rem; }
.sat-finale { padding-bottom: 3rem; }
.sat-finale .sat-events { gap: 1.5rem; }
.sat-current { padding-bottom: 0; }
@media (max-width: 760px) {
  .sat-heading { margin-bottom: 2.5rem; }
  .sat-years { padding-left: 1.9rem; }
  .sat-years::before { left: .3rem; }
  .sat-years::after { left: calc(.3rem - 5.5px); }
  .sat-date { margin-left: 0; padding-left: 0; }
  .sat-date::before { left: -1.85rem; }
  .sat-event { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
  .sat-copy { padding: 1.2rem; }
  .sat-pills, .sat-reverse .sat-pills { justify-content: flex-start; max-width: none; padding-inline: .1rem; }
  .sat-events, .sat-dense .sat-events, .sat-air .sat-events, .sat-finale .sat-events { gap: 1.7rem; }
  .sat-year { padding-bottom: 2.3rem; }
  .sat-current { padding-bottom: 0; }
}
@media (max-width: 380px) {
  .sat-copy { padding: 1rem; }
  .sat-pills li { padding-inline: .6rem; }
}
@media (forced-colors: active) {
  .sat-years::before { background: CanvasText; }
  .sat-years::after, .sat-date::before, .sat-copy, .sat-pills li { border-color: CanvasText; }
}
@media print {
  .sat-heading { margin-bottom: 1.5rem; }
  .sat-date { break-after: avoid; }
  .sat-event { break-inside: avoid; }
  .sat-years::before { background: #555; }
}
