/* ==========================================================================
   SeriesChief — Platform (Core league operations) page, round 2 (condensed)
   Real screens + a spec sheet. Tier accent: timing cyan. Prefix: plat-.
   Builds on assets/css/site.css (tokens, .shot, .phone, .tour, tags).
   ========================================================================== */


.plat-no {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 650; letter-spacing: 0.06em; color: var(--faint);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.plat-hero { border-bottom: 1px solid var(--line); isolation: isolate; }
.plat-hero.page-hero { padding-top: clamp(3rem, 1.5rem + 5vw, 6rem); }
.plat-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 78% 40%, #000 20%, transparent 75%);
}
.plat-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.plat-hero__title { max-width: 12ch; font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6.5rem); }
.plat-hero__title .accent-cyan { color: var(--cyan); }
.plat-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.plat-hero__visual { position: relative; min-width: 0; }

/* Hero entrance: CSS only, opacity stays 1 so the hero paints without JS (LCP) */
@keyframes plat-rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes plat-slide { from { transform: translateX(24px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .plat-hero__copy > * { animation: plat-rise var(--dur) var(--ease) both; }
  .plat-hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .plat-hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .plat-hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .plat-hero__copy > :nth-child(5) { animation-delay: 240ms; }
  .plat-hero__visual { animation: plat-slide var(--dur-2) var(--ease) 120ms both; }
}
@media (max-width: 960px) { .plat-hero__title { max-width: 14ch; } }

/* --------------------------------------------------------------------------
   01 — Season: five one-line stages beside a tabbed tour of real screens
   -------------------------------------------------------------------------- */
.plat-key { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--muted); font-size: var(--step--1); justify-self: end; }
.plat-key > span { display: inline-flex; align-items: center; gap: 0.6rem; }

.plat-season__grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start;
}
.plat-stages { position: relative; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--fg); }
/* the timing line the stage numbers hang from */
.plat-stages::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.6rem; bottom: 1.6rem; width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--teal) 60%, rgb(23 115 110 / 0.25));
}
.plat-row {
  position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 1.1rem; row-gap: 0.35rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.plat-row__num {
  grid-row: span 2; position: relative; z-index: 1; display: grid; place-items: center; align-self: start;
  width: 2.2rem; height: 2.2rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--bg);
  background: var(--cyan); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.plat-row__name {
  margin: 0.15rem 0 0.1rem; font-family: var(--font-display); font-style: italic; font-weight: 840; font-stretch: 72%;
  text-transform: uppercase; font-size: var(--step-1); line-height: 1; color: var(--fg);
}
.plat-row__line { display: flex; align-items: baseline; gap: 0.7rem; font-size: var(--step--1); line-height: 1.45; color: var(--fg-2); }
.plat-row__line .tag { flex: none; min-width: 5.4rem; justify-content: center; padding-block: 0.22rem 0.2rem; }

.plat-tour { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.plat-tour .shot figcaption { gap: 0.3rem 1rem; }

@media (max-width: 1080px) {
  .plat-season__grid { grid-template-columns: 1fr; }
  .plat-tour { position: static; }
  .plat-key { justify-self: start; }
}

/* --------------------------------------------------------------------------
   02 — Everything in Core: top twelve + the full spec sheet in <details>
   -------------------------------------------------------------------------- */
.plat-top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border-top: 2px solid var(--fg);
}
.plat-top li {
  display: grid; align-content: start; gap: 0.3rem; padding: 1.1rem 1.2rem 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.plat-top li:not(:nth-child(4n + 1)) { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.plat-top strong {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem;
  font-family: var(--font-display); font-weight: 720; font-stretch: 88%; font-size: var(--step-0); line-height: 1.2; color: var(--fg);
}
.plat-top li > span:last-child { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
@media (max-width: 1080px) {
  .plat-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat-top li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .plat-top li:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .plat-top li { padding: 0.9rem 0.8rem 1rem 0; gap: 0.25rem; }
  .plat-top li:nth-child(even) { padding-left: 0.8rem; padding-right: 0; }
  .plat-top strong { font-size: var(--step--1); }
  .plat-top li > span:last-child { font-size: 0.8rem; line-height: 1.4; }
}

.plat-all { margin-top: var(--space-4); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--bg); }
.plat-all summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 0.9rem 1.2rem;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-style: italic; font-weight: 820; font-stretch: 74%; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1; color: var(--fg);
}
.plat-all summary::-webkit-details-marker { display: none; }
.plat-all summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--line-2); border-radius: 50%; font-family: var(--font-mono); font-style: normal; font-size: 1rem; color: var(--cyan);
  transition: transform var(--dur-1) var(--ease);
}
.plat-all[open] summary::after { transform: rotate(45deg); }
.plat-all summary:hover { color: var(--cyan); }
.plat-all__hint { margin-left: auto; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.14em; color: var(--faint); }
.plat-all__body { padding: 0 1.2rem 1.2rem; }

.plat-sheet {
  columns: 3 19rem; column-gap: clamp(1.5rem, 0.8rem + 2.4vw, 3.25rem);
  column-rule: 1px solid var(--line); border-top: 1px solid var(--line-2); padding-top: 0.4rem;
}
.plat-group { padding: 1.2rem 0 1.4rem; }
.plat-group__title {
  display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-2); break-after: avoid;
  font-family: var(--font-display); font-style: italic; font-weight: 820; font-stretch: 72%;
  text-transform: uppercase; font-size: var(--step-1); line-height: 1; color: var(--fg);
}
.plat-group__code {
  flex: none; font-family: var(--font-mono); font-style: normal; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--bg); background: var(--cyan); padding: 0.18rem 0.42rem 0.14rem; transform: translateY(-0.12em);
}
.plat-group dl { margin: 0; display: grid; }
.plat-item {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.4rem;
  padding: 0.62rem 0; border-bottom: 1px dashed var(--line); break-inside: avoid;
}
.plat-item:last-child { border-bottom: 0; }
.plat-item dt { grid-column: 2; font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: var(--step-0); line-height: 1.25; color: var(--fg); }
.plat-item dt .plat-no { float: left; width: 2.2rem; margin-left: -2.6rem; padding-top: 0.2em; }
.plat-item dd { grid-column: 2; margin: 0.15rem 0 0; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

/* --------------------------------------------------------------------------
   03 — Drivers: real phone screen + three one-line points
   -------------------------------------------------------------------------- */
.plat-drivers__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.plat-drivers__copy { display: grid; gap: 1.2rem; align-content: center; }
.plat-points { margin: 0.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); max-width: 560px; }
.plat-points li { display: grid; gap: 0.2rem; padding: 1rem 0 1rem 1.1rem; border-bottom: 1px solid var(--line); position: relative; }
.plat-points li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 4px; height: 1.1rem; background: var(--cyan); transform: skewX(var(--lean)); }
.plat-points strong { font-family: var(--font-display); font-weight: 760; font-stretch: 85%; font-size: var(--step-1); line-height: 1.15; }
.plat-points span { color: var(--muted); font-size: var(--step--1); }
.plat-phone { justify-self: center; width: min(100%, 290px); }
.plat-all__note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.plat-all__note .link-arrow { min-height: 44px; color: var(--amber); }
.plat-all__note .link-arrow:hover { color: var(--fg); }
@media (max-width: 860px) {
  .plat-drivers__grid { grid-template-columns: 1fr; }
  .plat-phone { width: min(70vw, 270px); }
}

/* CTA band */
.plat-cta .display { max-width: 14ch; }
.plat-cta p a { color: inherit; text-decoration-thickness: 2px; }
.plat-cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 960px) { .plat-hero .shot--tilt .shot__frame { transform: none; } }
@media (max-width: 380px) { .plat-tour .tour__tab { padding-inline: 0.85rem; font-size: 0.88rem; } }
/* Calendar month shot: crop to the filled weeks */
.plat-shot--crop .shot__img { aspect-ratio: 900 / 563; object-fit: cover; object-position: 50% 90%; }