/* ============================================================
   Home — page rules on top of golden.css.
   ============================================================ */

/* ---------- Fridays: the live poster, with the schedule, the call and earlier sessions beside it ---------- */
.fridays-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-32);align-items:start}
.fridays .live-embed{border:1px solid var(--border)}
.fridays-rail{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16)}
.fridays-earlier-h{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);letter-spacing:var(--fs-label-ls);text-transform:uppercase;color:var(--clay);margin-top:14px}
.fridays-earlier{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-16);width:100%}
.fr-row{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--space-16);align-items:center}
.fr-row .thumb{border:1px solid var(--border)}
.fr-row .thumb .play{width:34px;height:34px}
.fr-row .thumb .play svg{width:14px;height:14px;margin-left:2px}
.fr-row:hover .play{background:rgba(22,20,18,.52);border-color:rgba(255,255,255,.6)}
.fr-date{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--fs-meta-ls);color:var(--muted)}
/* Meta spec: mono 12, muted. The schedule and the run-card hook were ink, and the schedule was button-sized. */
.run-card .meta,.live-when{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:var(--fs-meta-ls);color:var(--muted)}
.fr-title{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-body);line-height:1.3;color:var(--ink);margin-top:4px}
.fr-row:hover .fr-title{color:var(--clay)}
@media (max-width:980px){.fridays-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-24)}}

/* ---------- vertical rhythm ---------- */
/* One rhythm: --space-section between sections, --space-block inside one. The intro and the run grid
   it leads into are one section. */
.intro{padding:var(--space-section) 0 var(--space-block)}
.run,.fridays,.clips{padding:0 0 var(--space-section)}
/* Honey and clay only. The shared mesh still includes amber and brick; this page does not. */
.run-card .mesh{background-image:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 44%),radial-gradient(58% 58% at 18% 20%,rgba(199,122,26,.74),transparent 62%),radial-gradient(56% 56% at 84% 18%,rgba(199,122,26,.45),transparent 62%),radial-gradient(60% 60% at 74% 88%,rgba(168,83,28,.7),transparent 60%),radial-gradient(52% 52% at 20% 84%,rgba(168,83,28,.45),transparent 60%)}
/* Include the clip focus outline in its scroll snap area. */
.c-card{scroll-margin:var(--space-4)}
/* One pixel covers the browsers' rounded scroll limit at the fractional last card. */
.clip-item:last-child .c-card{margin-inline-end:1px}

/* SYSTEM-CANDIDATE: keep keyboard indicators above adjacent run-card faces. */
.run-card:focus-within{z-index:6}
/* SYSTEM-CANDIDATE: section heads share wrapping and mobile link reach. */
.sec-head-row{flex-wrap:wrap;align-items:baseline}
@media (max-width:680px){.see-all{display:inline-flex;align-items:center;min-width:44px;min-height:44px}}
/* SYSTEM-CANDIDATE: the poster scrim covers its label and centred play mark. */
.live-poster .scrim{background:linear-gradient(to top,var(--scrim-strong) 55%,transparent)}
.hero .reassure{color:var(--clay)}
.hero .field-error:not(:empty){margin-top:var(--space-16)}
/* SYSTEM-CANDIDATE: this page's reduced-motion gate includes colour fades. */
@media (prefers-reduced-motion:reduce){body *,body *::before,body *::after{transition:none!important;animation:none!important}}

/* SYSTEM-CANDIDATE: mobile sheet actions sit outside the scrolling body. */
@media (max-width:680px){
  .drawer-header{height:72px}
  .drawer>.sheet-actions{flex:0 0 auto;max-width:720px;width:100%;margin:auto auto 0;padding:var(--space-16) var(--space-32);border-top:1px solid var(--hair);background:var(--paper)}
}

/* SYSTEM-CANDIDATE: section actions wrap together beneath the heading. */
.sec-head-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-8) var(--space-24)}

/* SYSTEM-CANDIDATE: native list items preserve the clip cards' flex sizing. */
.clips-row{margin:0;list-style:none}
.clip-item{display:flex;flex:0 0 auto}
/* SYSTEM-CANDIDATE: the end fade shows only while there's more to pan, so it never covers the last card's focus ring. */
.clips-fade{transition:opacity .16s}
.clips-wrap:has(.clip-nav.next[disabled]) .clips-fade.r{opacity:0}