/* ═══════════════════════════════════════════════════════════════════
   rowing.css — Competitive Rowing (first light, dawn amber)
   The river at 5:30, instruments on the footplate, a record lit from
   the top. Every colour is a token; both themes are defined here.
   ═════════════════════════════════════════════════════════════════ */

/* page tokens: medal metals and the pace verdicts, night then day */
:root {
  --m-gold: var(--w-record);
  --m-silver: #c8d0de;
  --m-bronze: #e3a172;
  --pace-fast-rgb: 74, 222, 128;
  --pace-slow-rgb: 248, 113, 113;
}
[data-theme="light"] {
  --m-silver: #5d6679;
  --m-bronze: #9a5222;
  --pace-fast-rgb: 21, 128, 61;
  --pace-slow-rgb: 190, 36, 36;
}

/* ── hero: the title stands in the dawn sky, the figures on the water ── */
/* "Competitive" is one long word: size it to the measure it has */
.phero-title { font-size: min(var(--step-5), calc((100vw - 2 * var(--mx)) / 7.6)); }
html[lang="zh-CN"] .phero-title { font-size: var(--step-5); }
.phero .phero-sub, .phero .hstat-lbl { text-shadow: 0 1px 18px color-mix(in srgb, var(--bg) 70%, transparent); }

/* two plates, one height */
.row-plates { align-items: stretch; }
.row-plates .frame:last-child { aspect-ratio: auto; }
.plates .frame figcaption, .ph-caption { font: 500 12px/1.45 var(--f-mono); letter-spacing: 0.04em; }
@media (max-width: 760px) { .row-plates .frame:last-child { aspect-ratio: 16 / 10; } }

/* ── chapter one: training, read like the stroke coach ───────────── */
.gauges {
  margin-top: clamp(64px, 8vw, 120px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-2); border-radius: 0; overflow: hidden;
  background:
    radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--bg-raise);
  box-shadow: var(--shadow);
}
.gauge { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3vw, 44px); }
.gauge + .gauge { border-left: 1px solid var(--line); }
.gauge::before {
  content: ''; position: absolute; top: 0; left: clamp(26px, 3vw, 44px); width: 28px; height: 2px;
  background: var(--accent);
}
.gauge-top { display: flex; align-items: center; gap: 12px; }
.gauge-ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 0;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.gauge-ic svg { width: 20px; height: 20px; }
.gauge-k { font: 500 var(--step--1)/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
.gauge-v {
  margin-top: 10px;
  font: 700 clamp(32px, 1rem + 2vw, 54px)/1 var(--f-disp); letter-spacing: -0.04em;
  color: var(--text); text-wrap: balance;
}
.gauge-s { color: var(--text-2); font-size: 15px; line-height: 1.55; max-width: 30ch; }
/* a live scale under each readout: decoration, it claims no value */
.gauge-scale {
  position: relative; height: 12px; margin-top: 12px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.gauge-scale::after {
  content: ''; position: absolute; bottom: 0; left: 58%; width: 2px; height: 12px; border-radius: 1px;
  background: var(--accent);
  animation: needle 6.5s ease-in-out infinite alternate;
}
.gauge + .gauge .gauge-scale::after { animation-delay: -2.2s; }
.gauge + .gauge + .gauge .gauge-scale::after { animation-delay: -4.1s; }
@keyframes needle { from { transform: translateX(-26px); } to { transform: translateX(22px); } }
html[lang="zh-CN"] :is(.gauge-k, .si-event, .tl-when, .medal-cat, .pace-input-label, .pace-dist-label, .pace-canvas-label, .pace-pr-label) { letter-spacing: 0.04em; }
html[lang="zh-CN"] .gauge-v { letter-spacing: 0; line-height: 1.2; }
@media (max-width: 860px) {
  .gauges { grid-template-columns: minmax(0, 1fr); }
  .gauge + .gauge { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── interlude: race day, edge to edge ───────────────────────────── */
.cine { height: clamp(360px, 44vw, 780px); border-inline: 0; background: var(--bg-deep); }
.cine img { object-position: center 10%; transition: transform 2.8s var(--ease-img), filter 0.8s var(--ease); }
.can-reveal .cine:not(.is-in) img { transform: scale(1.1); }
.cine > .cine-cap {
  display: flex; align-items: center; gap: 14px;
  padding: 120px var(--mx) clamp(22px, 3vw, 40px);
  font-size: 12.5px; letter-spacing: 0.005em; 
}
.cine > .cine-cap::before { content: ''; flex: none; width: 28px; height: 1px; background: var(--accent); }
html[lang="zh-CN"] .cine > .cine-cap { letter-spacing: 0.04em; }
@media (max-width: 760px) { .cine { height: auto; aspect-ratio: 4 / 5; } .cine img { object-position: 80% center; } }

/* ── chapter two: three splits, read off the monitor ─────────────── */
.splits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.split-inst {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 20px; align-content: start;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--line-2); border-radius: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    var(--bg-raise);
  box-shadow: var(--shadow);
  transition: border-color 0.6s var(--ease);
}
.split-inst:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.si-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.si-event { font: 500 var(--step--1)/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
.si-rank { min-height: 26px; font-size: 11px; }
/* the monitor face: a dark well with faint scan lines */
.si-screen {
  container-type: inline-size;
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
  border-radius: 0; border: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--bg-deep), color-mix(in srgb, var(--bg-deep) 70%, var(--bg-raise)));
  box-shadow: inset 0 22px 44px -28px color-mix(in srgb, var(--accent) 40%, transparent);
}
.si-time {
  font: 700 clamp(44px, 1.1rem + 3.4vw, 92px)/0.92 var(--f-disp);
  font-size: clamp(44px, 24cqi, 116px);
  letter-spacing: -0.05em; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;

}
/* the course: 2000 m in 250 m ticks, lit as far as the piece went */
.si-track {
  position: relative; height: 18px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 100% 100% / 1px 8px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12.5%) 0 100% / 100% 8px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.si-track::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--dist, 1) * 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), var(--accent));

  transform-origin: left; transition: transform 1.6s var(--ease) 0.35s;
}
.si-track::after {
  content: ''; position: absolute; bottom: -3px; left: calc(var(--dist, 1) * 100%); width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 14px var(--accent);
  transition: left 1.6s var(--ease) 0.35s;
}
.can-reveal .split-inst:not(.is-in) .si-track::before { transform: scaleX(0); }
.can-reveal .split-inst:not(.is-in) .si-track::after { left: 0; }
.si-ctx { font: 500 13px/1.5 var(--f-mono); letter-spacing: 0.02em; color: var(--text-3); }
@media (max-width: 900px) {
  .splits { grid-template-columns: minmax(0, 1fr); }
  .si-time { font-size: clamp(44px, 18cqi, 96px); }
}

/* ── chapter three: a record lit from the top ─────────────────────── */
.tline {
  --tl-pad: clamp(30px, 3vw, 44px);
  --tl-row: clamp(24px, 2.6vw, 34px);
  position: relative; padding-left: var(--tl-pad);
  border-top: 1px solid var(--line-2);
  view-timeline-name: --tline;
}
.tline::before, .tline::after { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; pointer-events: none; }
.tline::before { background: var(--line-2); }
.tline::after {
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent) 70%, transparent);

  transform-origin: top;
}
/* where scroll-driven animation exists, the light follows the reader down */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tline::after {
      background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent));
      animation: tl-fill linear both;
      animation-timeline: --tline;
      animation-range: cover 50vh cover calc(100% - 50vh);
    }
  }
}
@keyframes tl-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.tl-item {
  position: relative;
  display: grid; grid-template-columns: minmax(78px, 104px) minmax(0, 1fr) auto;
  gap: 10px clamp(18px, 2.4vw, 36px); align-items: start;
  padding: var(--tl-row) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.5s var(--ease);
}
.tl-item::before {
  content: ''; position: absolute; top: calc(var(--tl-row) + 5px); left: calc(1px - var(--tl-pad));
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.tl-item.lit::before { background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 18px var(--accent); }
.tl-item.medal::before { background: var(--m-gold); border-color: var(--m-gold); box-shadow: 0 0 0 4px var(--bg), 0 0 18px var(--m-gold); }
.tl-item.medal { background: linear-gradient(90deg, color-mix(in srgb, var(--m-gold) 7%, transparent), transparent 55%); }
.tl-when { padding-top: 3px; font: 500 12.5px/1.4 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
.tl-info { display: grid; gap: 6px; min-width: 0; }
.tl-badge { justify-self: start; min-height: 26px; font-size: 11px; margin-bottom: 4px; }
.tl-name { font: 650 clamp(17px, 0.9rem + 0.5vw, 22px)/1.3 var(--f-sans); letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.tl-detail { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.tl-result {
  justify-self: end; text-align: right; white-space: nowrap;
  font: 700 clamp(22px, 1rem + 1.2vw, 34px)/1 var(--f-disp); letter-spacing: -0.035em; color: var(--text);
}
.tl-result small {
  display: block; margin-top: 10px;
  font: 500 11px/1.35 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3);
}
.tl-item.lit .tl-result { color: var(--accent); }
.tl-item.medal .tl-result { color: var(--m-gold); }
html[lang="zh-CN"] .tl-result small { letter-spacing: 0.04em; }

/* medals: a struck disc, then the event */
/* two medals side by side, one above the other when the column is narrow */
.medals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 184px), 1fr)); gap: 10px; margin-top: 14px; }
.medal {
  --metal: var(--m-gold);
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center;
  padding: 14px 16px; border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--metal) 32%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--metal) 11%, transparent), transparent 62%), var(--bg-raise);
}
.medal.silver { --metal: var(--m-silver); }
.medal.bronze { --metal: var(--m-bronze); }
.medal::before {
  content: ''; grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--metal), color-mix(in srgb, var(--metal) 45%, var(--bg-deep)) 78%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--metal) 60%, transparent), 0 0 18px color-mix(in srgb, var(--metal) 38%, transparent);
}
.medal-pos { font: 700 15px/1.1 var(--f-disp); letter-spacing: -0.01em; color: var(--metal); }
.medal-event { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.medal-cat { font: 500 11px/1.35 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
@media (hover: hover) { .tl-item:not(.medal):hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); } }
@media (max-width: 640px) {
  .tl-item { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-info { grid-column: 1 / -1; }
  .tl-result { grid-row: 1; grid-column: 2; }
  .tl-result small { margin-top: 6px; }
}

/* ── archive ─────────────────────────────────────────────────────── */
.row-gallery { gap: clamp(8px, 1vw, 14px); }

/* ── takeaway: three skills on one line ──────────────────────────── */
.takeaway .chapter-body { align-self: end; }
.skills-3 { margin-top: clamp(56px, 7vw, 104px); }
.skill-card { gap: 16px; border-radius: 0; padding: clamp(24px, 2.6vw, 38px); }
.skill-card::after {
  content: ''; position: absolute; top: -1px; left: clamp(24px, 2.6vw, 38px); width: 28px; height: 2px;
  background: var(--accent);
}

/* ── rowinglab: the sport crosses into software, lit in volt ─────── */
.rlc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.rlc-step { border-radius: 0; min-height: 100%; }
.rlc-step-p { font-size: 15px; }
.rlc-close {
  max-width: 58ch; margin-top: clamp(18px, 2vw, 28px);
  padding-left: 1.1em; border-left: 1px solid var(--accent);
  font: italic 400 var(--step-1)/1.5 var(--f-serif); color: var(--text); text-wrap: pretty;
}
html[lang="zh-CN"] .rlc-close { font-style: normal; }
.rlc-tags { margin-top: 4px; }

/* ── pace lab: an erg monitor you can drive (legacy demo, restyled) ── */
.pace { background: radial-gradient(60% 45% at 50% 78%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); }
.pace .sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.pace-input-row { flex-wrap: wrap; gap: 14px 18px; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 32px); }
.pace-input-label { font: 500 12px/1.2 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); cursor: pointer; }
.pace-input {
  width: calc(7.4ch + 30px); min-height: 56px; padding: 0 14px;
  font: 600 clamp(26px, 1rem + 1.1vw, 34px)/1 var(--f-mono); letter-spacing: 0.02em; text-align: center;
  color: var(--text); background: var(--bg-deep);
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}
.pace-input::placeholder { color: var(--text-3); }
.pace-input:hover { border-color: var(--text-3); }
.pace-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 24%, transparent); }
.pace-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pace-per { font: 500 12px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--text-3); }
.pace-watts-badge { margin-left: auto; display: flex; align-items: baseline; gap: 7px; font: 700 clamp(28px, 1rem + 1.4vw, 42px)/1 var(--f-disp); letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.pace-watts-unit { font: 500 12px/1 var(--f-mono); letter-spacing: 0.1em; color: var(--accent); }

.pace-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.pace-result-col { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 32px); }
.pace-result-col + .pace-result-col { border-left: 1px solid var(--line); }
.pace-dist-label { font: 500 11.5px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
.pace-time-val {
  font: 700 clamp(34px, 1.1rem + 2.2vw, 58px)/1 var(--f-disp); letter-spacing: -0.04em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 0.3s, text-shadow 0.3s;
}
.pace-time-val.faster { color: rgb(var(--pace-fast-rgb)); }
.pace-time-val.slower { color: rgb(var(--pace-slow-rgb)); }
.pace-delta { min-height: 1.3em; font: 500 12.5px/1.3 var(--f-mono); color: var(--text-3); }
.pace-delta.faster { color: rgb(var(--pace-fast-rgb)); }
.pace-delta.slower { color: rgb(var(--pace-slow-rgb)); }
.pace-pr-row { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.pace-pr-label { font: 500 11px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--accent); }
.pace-pr-val { font: 500 13px/1 var(--f-mono); color: var(--text-2); }

.pace-canvas-wrap { padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--line); }
.pace-canvas-label {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 16px;
  font: 500 12px/1.4 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-2);
}
.pace-canvas-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pace-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); }
.pace-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pace-leg-dot.fast { background: rgb(var(--pace-fast-rgb)); }
.pace-leg-dot.on { background: var(--accent); }
.pace-leg-dot.slow { background: rgb(var(--pace-slow-rgb)); }
#pacingCanvas {
  display: block; width: 100%; height: 180px; border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 75%, transparent), transparent);
}
.pace-note { padding: 16px clamp(18px, 2.4vw, 32px) 20px; font: 500 12px/1.6 var(--f-mono); color: var(--text-3); }
.pace-note strong { font-weight: 600; color: rgb(var(--pace-fast-rgb)); }
@media (max-width: 720px) {
  .pace-results { grid-template-columns: minmax(0, 1fr); }
  .pace-result-col + .pace-result-col { border-left: 0; border-top: 1px solid var(--line); }
  .pace-watts-badge { margin-left: 0; }
  #pacingCanvas { height: 160px; }
}