/* ============================================================
   TUEPAC — Page modules (tuepac.org parity)
   hero · sports · studio · article
   ============================================================ */

/* ---------- HERO ---------- */
.hero{ position:relative; background:var(--white); border-bottom:1px solid var(--hairline); overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 88% -10%, rgba(10,49,97,0.05), transparent 55%),
             radial-gradient(70% 60% at 6% 8%, rgba(179,25,66,0.035), transparent 55%); }
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.35fr 0.9fr; gap:clamp(28px,4vw,56px);
  padding-block:clamp(28px,3.5vw,44px) clamp(32px,4vw,52px); }
.hero__lead-col{ min-width:0; }
.hero__kicker-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero h1{ font-size:clamp(1.9rem,3vw,2.9rem); line-height:1.08; letter-spacing:-0.018em; color:var(--blue); margin-top:14px; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero__dek{ margin-top:14px; font-size:var(--fs-body); color:var(--ink-60); max-width:50ch; }
.hero__byline{ margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-60); }
.hero__byline .pub{ color:var(--ink); }
.hero__media{ aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; }
.hero__cta{ margin-top:18px; display:flex; gap:13px; flex-wrap:wrap; }

/* right rail */
.rail{ display:flex; flex-direction:column; }
.rail__head{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--blue); display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:2px solid var(--blue); }
.rail__item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2); }
.rail__item:last-child{ border-bottom:0; }
.rail__rank{ font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--red); line-height:1; flex:none; width:22px; }
.rail__body h4{ font-family:var(--serif); font-size:1.02rem; font-weight:700; line-height:1.25; color:var(--blue); }
.rail__meta{ margin-top:7px; font-size:0.8rem; color:var(--ink-45); display:flex; gap:8px; align-items:center; }
@media (max-width:900px){ .hero__inner{ grid-template-columns:1fr; } }

/* ---------- SPORTS DESK ---------- */
.sports{ background:var(--blue-deep); color:#fff; position:relative; }
.sports .eyebrow{ color:var(--white-72); }
.sports__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.sports__head h2{ font-family:var(--serif); font-size:var(--fs-h2); color:#fff; margin-top:14px; }
.sports__head p{ color:var(--white-72); margin-top:10px; max-width:48ch; font-size:var(--fs-small); }
.sports__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:34px; margin-top:40px; align-items:start; }
@media (max-width:960px){ .sports__grid{ grid-template-columns:1fr; } }

.sports-lead{ border:1px solid var(--white-16); border-radius:var(--r-lg); overflow:hidden; background:rgba(255,255,255,0.03); }
.sports-lead__media{ aspect-ratio:16/9; position:relative; }
.sports-lead__body{ padding:24px 26px 28px; }
.sports-lead__kicker{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#9BC4FF; }
.sports-lead__title{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; line-height:1.16; margin-top:12px; color:#fff; }
.sports-lead__dek{ margin-top:14px; color:var(--white-72); font-size:var(--fs-body); max-width:52ch; }
.sports-lead__foot{ margin-top:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--white-50); }

.scoreboard{ border:1px solid var(--white-16); border-radius:var(--r-lg); overflow:hidden; background:rgba(255,255,255,0.03); }
.scoreboard__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--white-16); }
.scoreboard__head h3{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; }
.score-tabs{ display:flex; gap:4px; }
.score-tab{ font-family:var(--sans); font-size:0.64rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--white-50);
  background:transparent; border:1px solid var(--white-16); border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; }
.score-tab.is-active{ background:#fff; color:var(--blue-deep); border-color:#fff; }
.game{ padding:14px 18px; border-bottom:1px solid var(--white-08); display:grid; grid-template-columns:1fr auto; gap:8px 14px; }
.game:last-child{ border-bottom:0; }
.game__status{ grid-column:1/-1; display:flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--white-50); margin-bottom:2px; }
.game__status .live{ color:#FF6A8A; display:flex; align-items:center; gap:6px; }
.game__status .live i{ width:6px; height:6px; border-radius:50%; background:#FF3B62; animation:blink 1.2s infinite; }
.game__status .final{ color:#9BC4FF; }
.team{ display:flex; align-items:center; gap:10px; }
.team__seed{ font-family:var(--mono); font-size:0.66rem; color:var(--white-50); width:16px; }
.team__name{ font-size:0.95rem; font-weight:600; color:#fff; }
.team.lose .team__name{ color:var(--white-50); }
.team__score{ font-family:var(--serif); font-weight:700; font-size:1.25rem; color:#fff; font-variant-numeric:tabular-nums; }
.team.lose .team__score{ color:var(--white-50); }
.score-foot{ padding:13px 18px; display:flex; align-items:center; justify-content:space-between; }

.standings{ margin-top:24px; border:1px solid var(--white-16); border-radius:var(--r-lg); overflow:hidden; background:rgba(255,255,255,0.03); }
.standings__head{ padding:13px 18px; border-bottom:1px solid var(--white-16); font-family:var(--sans);
  font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; }
.stand-row{ display:grid; grid-template-columns:22px 1fr 54px 54px; align-items:center; gap:10px;
  padding:11px 18px; border-bottom:1px solid var(--white-08); font-size:0.9rem; }
.stand-row:last-child{ border-bottom:0; }
.stand-row.th{ font-family:var(--sans); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--white-50); padding-block:9px; }
.stand-row .pos{ font-family:var(--mono); color:#9BC4FF; font-size:0.8rem; }
.stand-row .club{ color:#fff; font-weight:600; display:flex; align-items:center; gap:9px; }
.stand-row .club .seedchip{ width:7px; height:14px; border-radius:1px; }
.stand-row .rec{ font-variant-numeric:tabular-nums; color:var(--white-72); text-align:right; }
.stand-row .pct{ font-variant-numeric:tabular-nums; color:#fff; text-align:right; }

.sports-more{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:34px;
  background:var(--white-16); border:1px solid var(--white-16); border-radius:var(--r-lg); overflow:hidden; }
.sports-more__item{ background:var(--blue-deep); padding:20px 22px; display:flex; flex-direction:column; gap:9px; }
.sports-more__item .k{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#9BC4FF; }
.sports-more__item h4{ font-family:var(--serif); font-size:1.1rem; font-weight:700; color:#fff; line-height:1.25; }
.sports-more__item .m{ font-size:0.8rem; color:var(--white-50); margin-top:auto; }
@media (max-width:760px){ .sports-more{ grid-template-columns:1fr; } }

/* ---------- STUDIO TEASER ---------- */
.studio-teaser{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.studio-teaser__copy h2{ font-size:var(--fs-h2); color:var(--blue); margin-top:18px; }
.studio-teaser__copy .lead{ margin-top:16px; color:var(--ink-60); font-size:var(--fs-body-lg); max-width:44ch; }
.studio-steps{ margin-top:26px; display:flex; flex-direction:column; gap:2px; }
.studio-step{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--hairline); }
.studio-step:last-child{ border-bottom:1px solid var(--hairline); }
.studio-step__n{ font-family:var(--sans); font-size:0.85rem; color:var(--red); font-weight:700; width:34px; flex:none; padding-top:2px; }
.studio-step b{ font-family:var(--sans); font-weight:700; color:var(--blue); }
.studio-step span{ display:block; color:var(--ink-60); font-size:var(--fs-small); margin-top:3px; }
.studio-preview{ border:1px solid var(--mist); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-3); background:var(--white); }
.studio-preview__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--hairline); background:var(--off); }
.studio-preview__bar i{ width:10px; height:10px; border-radius:50%; background:var(--mist); }
.studio-preview__bar span{ margin-left:8px; font-family:var(--mono); font-size:0.72rem; color:var(--ink-45); letter-spacing:0.04em; }
.studio-preview__body{ padding:22px 24px 26px; }
@media (max-width:900px){ .studio-teaser{ grid-template-columns:1fr; } }

/* ---------- STUDIO APP ---------- */
.studio{ display:grid; grid-template-columns:340px 1fr; min-height:calc(100vh - 75px); }
.studio__panel{ border-right:1px solid var(--hairline); background:var(--off); padding:28px 26px; overflow-y:auto;
  position:sticky; top:75px; height:calc(100vh - 75px); }
.studio__canvas{ background:var(--white); overflow-y:auto; }
.field{ margin-top:20px; }
.field > label{ display:block; font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-60); margin-bottom:8px; }
.field input[type=text], .field textarea, .field select{ width:100%; font-family:var(--sans); font-size:var(--fs-small);
  color:var(--ink); background:var(--white); border:1.5px solid var(--mist); border-radius:var(--r); padding:12px 14px; }
.field textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--blue); }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-family:var(--sans); font-size:0.82rem; font-weight:600; color:var(--ink); background:var(--white);
  border:1.5px solid var(--mist); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer; transition:.14s; }
.chip:hover{ border-color:var(--blue); }
.chip.is-active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.chip.is-active.tone-red{ background:var(--red); border-color:var(--red); }

.studio-doc{ max-width:760px; margin-inline:auto; padding:clamp(28px,4vw,56px) clamp(20px,4vw,40px) 100px; }
.studio-doc__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.studio-doc [contenteditable]{ outline:none; border-radius:var(--r); transition:background .15s, box-shadow .15s; }
.studio-doc [contenteditable]:hover{ background:var(--off); }
.studio-doc [contenteditable]:focus{ background:#fff; box-shadow:0 0 0 2px rgba(10,49,97,0.18); }
.studio-doc__kicker{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); padding:3px 6px; }
.studio-doc__head{ font-family:var(--serif); font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:700; line-height:1.1;
  letter-spacing:-0.02em; color:var(--blue); margin-top:12px; padding:4px 6px; }
.studio-doc__dek{ font-family:var(--serif); font-size:var(--fs-body-lg); font-style:italic; color:var(--ink-60); margin-top:14px; line-height:1.5; padding:4px 6px; }
.studio-doc__byline{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hairline); display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-60); }
.studio-doc__body{ margin-top:26px; }
.studio-doc__body p{ font-size:var(--fs-body-lg); line-height:1.72; color:var(--ink); margin:0 0 1.1em; padding:2px 6px; }
.studio-doc__body h3{ font-family:var(--serif); font-size:1.4rem; color:var(--blue); margin:1.6em 0 0.5em; padding:2px 6px; }

.studio-empty{ max-width:520px; margin:0 auto; padding:14vh 24px; text-align:center; }
.studio-empty__mark{ width:64px; height:64px; border-radius:14px; margin:0 auto 26px; overflow:hidden;
  background:var(--blue) var(--keystone) center / 44px no-repeat; box-shadow:var(--shadow-2); }
.studio-empty__mark i{ display:none; }
.studio-empty h2{ font-size:var(--fs-h3); color:var(--blue); }
.studio-empty p{ margin-top:12px; color:var(--ink-60); }

.gen-line{ height:14px; border-radius:4px; margin:11px 0;
  background:linear-gradient(90deg,var(--off) 25%, #e6ebf2 50%, var(--off) 75%); background-size:200% 100%;
  animation:shimmer 1.3s infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.toolbar{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px clamp(20px,4vw,40px); }
.toolbar__left{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-60); }
.toolbar__right{ display:flex; align-items:center; gap:10px; }

.spin{ width:15px; height:15px; border:2px solid var(--white-50); border-top-color:#fff; border-radius:50%; animation:rot .7s linear infinite; }
.spin.dark{ border-color:var(--mist); border-top-color:var(--red); }
@keyframes rot{ to{ transform:rotate(360deg); } }

/* ---------- ARTICLE READING ---------- */
.article{ padding-block:clamp(36px,5vw,64px); }
.article__head{ max-width:var(--container-narrow); margin-inline:auto; }
.article__kicker{ font-family:var(--sans); font-size:var(--fs-overline); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); }
.article h1{ font-size:var(--fs-h1); color:var(--blue); margin-top:14px; max-width:24ch; }
.article__dek{ font-family:var(--serif); font-style:italic; font-size:var(--fs-body-lg); color:var(--ink-60); margin-top:16px; max-width:54ch; }
.article__byline{ margin-top:22px; padding-block:16px; border-block:1px solid var(--hairline); display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--ink-60); }
.article__body{ max-width:var(--container-narrow); margin:32px auto 0; }
.article__body p{ font-size:var(--fs-body-lg); line-height:1.74; margin:0 0 1.15em; }
.article__body p.drop:first-letter{ font-family:var(--serif); font-size:3.4em; line-height:0.8; float:left; padding:6px 10px 0 0; color:var(--red); }