/* Zecca — Champions. Nine banknote chapters that re-rank themselves. Tokens come from styles.css. */

/* subpage nav: always visible, takes the colour of the field it sits on */
.js .nav { opacity: 1; transition: none; }
.nav { color: var(--field-on); }
.nav__links a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ---------- head ---------- */
.head {
  --field: var(--paper); --field-on: var(--ink);
  min-height: 60svh; padding-top: 140px; padding-bottom: 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.head__title { font-size: 11.5vw; line-height: .9; letter-spacing: -.035em; margin-bottom: 36px; }
.head__title span { display: inline-block; }
.head__podium { font-size: var(--step-lead); line-height: 1.3; font-weight: 500; max-width: 34ch; }
.head__note { margin-top: 14px; font-size: var(--step-body); max-width: 46ch; }

/* ---------- period strip ---------- */
.period {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--m); background: var(--ink); color: var(--paper);
}
.period__lbl { margin-right: auto; font-weight: 500; font-size: var(--step-body); }
.period button {
  min-width: 84px; min-height: 48px; padding: 0 18px;
  background: var(--ink-2); color: var(--paper); border: 0; border-radius: 0;
  font-family: var(--display); font-weight: 400; font-size: 1.375rem; letter-spacing: -.01em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.period button:hover { background: #2b3236; transform: translateY(-2px); }
.period button:active { transform: translateY(1px) scale(.97); }
.period button[aria-checked="true"] { background: var(--paper); color: var(--ink); }
.period button:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ---------- league ---------- */
.league { overflow-anchor: none; }
.cur {
  --field: var(--c); --field-on: var(--on);
  min-height: 66svh; padding: 56px var(--m) 40px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  grid-template-rows: auto auto 1fr; align-content: stretch;
  will-change: transform;
}
.cur__fig {
  grid-column: 1 / 9; grid-row: 1;
  font-family: var(--display); font-weight: 300; letter-spacing: -.035em; line-height: .95;
  font-size: clamp(3.25rem, 7.4vw, 7.75rem);
  font-variant-numeric: tabular-nums;
}
.cur__cap { grid-column: 1 / 9; grid-row: 2; margin-top: 10px; font-size: 1.5rem; line-height: 1.3; font-weight: 500; }
.cur__cap span { display: block; }
.cur__name {
  grid-column: 1 / 9; grid-row: 3; align-self: end; margin-top: 40px;
  font-size: 11vw; line-height: .9; letter-spacing: -.04em; text-transform: lowercase;
  overflow-wrap: break-word;
}
.cur__tile {
  grid-column: 9 / 13; grid-row: 1 / 4; align-self: start;
  padding: 24px 24px 12px; background: var(--ink); color: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cur__tile h3 { font-family: var(--display); font-weight: 300; font-size: 1.625rem; letter-spacing: -.015em; line-height: 1.1; margin-bottom: 8px; }
.cur__coins li + li { margin-top: 2px; }
.cur__coin {
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px;
  padding: 12px 8px; margin: 0 -8px; text-decoration: none; color: var(--paper);
  transition: background-color .25s var(--ease), transform .35s var(--ease);
}
.cur__coin:hover, .cur__coin:focus-visible { background: var(--ink-2); transform: translateX(6px); }
.cur__coin:active { transform: translateX(3px) scale(.99); }
.cur__coin b { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; }
.cur__coin b i { flex: none; width: 14px; height: 14px; background: var(--c); }
.cur__px { font-size: 1.125rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.cur__sub { font-size: .9375rem; }
.cur__sub:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .head { min-height: 56svh; padding-top: 112px; padding-bottom: 32px; }
  .head__title { font-size: 15.5vw; margin-bottom: 24px; }
  .head__podium { font-size: 1.375rem; }
  .period { gap: 6px; padding: 8px var(--m); }
  .period__lbl { font-size: 1rem; line-height: 1.2; max-width: 8.5em; }
  .period button { min-width: 64px; padding: 0 12px; }

  .cur { display: flex; flex-direction: column; min-height: 64svh; padding: 40px var(--m) 32px; }
  .cur__fig { order: 1; }
  .cur__cap { order: 2; }
  .cur__tile { order: 3; }
  .cur__name { order: 4; }
  .cur__fig { font-size: 19vw; }
  .cur__cap { font-size: 1.5rem; margin-top: 8px; }
  .cur__name { font-size: 12vw; margin-top: 44px; align-self: flex-start; }
  .cur__tile { margin-top: 28px; padding: 20px 18px 8px; align-self: stretch; }
}

/* phone footer: clocks and sentence get full-width tiles so nothing wraps into a sliver */
@media (max-width: 860px) {
  .ft--time { grid-column: 1 / -1; order: 4; min-height: 150px; }
  .ft--say { grid-column: 1 / -1; order: 5; min-height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .period button:hover, .cur__coin:hover { transform: none; }
}