/* Zecca: explore.html. Loads after styles.css and uses only its tokens. */

/* ---------- shared page bits ---------- */
.pg .nav { color: var(--field-on); }
.js .pg .nav { opacity: 1; transition: none; }
.nav__links a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

.mask { display: block; overflow: hidden; padding: .06em .1em .22em; margin: -.06em -.1em -.22em; }
.mask > span { display: block; }
.js .mask > span { transform: translateY(118%); transition: transform 1s var(--ease); }
.js .mask:nth-child(2) > span { transition-delay: .11s; }
.js .is-loaded .mask > span { transform: none; }

/* ======================= HEAD ======================= */
.xhead {
  --field: var(--eur); --field-on: var(--eur-on);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 48px;
  min-height: 92svh; padding-top: 150px; padding-bottom: var(--m);
}
.xhead__title { font-size: clamp(3.25rem, 11.5vw, 11rem); line-height: .98; letter-spacing: -.035em; }
.xhead__row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.xhead__lead { grid-column: 1 / 7; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.xtile {
  grid-column: 9 / 13; min-height: 230px; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--ink); color: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.xtile__fig { font-family: var(--display); font-weight: 300; letter-spacing: -.03em; line-height: 1; font-size: clamp(3.5rem, 5.4vw, 5.75rem); }
.xtile__cap { font-size: 1.0625rem; max-width: 24ch; line-height: 1.35; }

/* ======================= DIRECTORY ======================= */
.xlist { --field: var(--ink); --field-on: var(--paper); --tile: #2b3236; padding: 80px 0 96px; min-height: 100svh; }

.ctl { padding: 0 var(--m); display: grid; gap: 14px; }
.ctl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ctl__lead { min-width: 6.5rem; font-weight: 500; }
.ctl__lead--2 { margin-left: 28px; min-width: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  min-height: 48px; padding: 0 18px;
  background: var(--tile); color: var(--paper);
  border: 0; border-radius: 0; font-weight: 500; font-size: 1.0625rem;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.opt:hover { background: #3a4348; transform: translateY(-2px); }
.opt:active { transform: translateY(1px) scale(.97); }
.opt[aria-pressed="true"] { background: var(--c); color: var(--on); }
.opt:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.xlist__count { padding: 0 var(--m); margin-top: 28px; min-height: 1.5em; font-weight: 500; }

/* the poster lines */
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 24px;
  padding: .03em var(--m);
  color: var(--paper); text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.row__t {
  font-size: clamp(2.75rem, 7vw, 7rem); text-transform: uppercase;
  letter-spacing: -.03em; line-height: .98; transition: transform .45s var(--ease);
}
.row:hover, .row:focus-visible { background: var(--c); color: var(--on); }
.row:hover .row__t, .row:focus-visible .row__t { transform: translateX(.18em); }
.row:active { filter: brightness(.94); }
.row:focus-visible { outline: 4px solid var(--on); outline-offset: -8px; }
.row__f, .xh-f {
  display: grid; align-items: center; gap: 20px;
  grid-template-columns: 200px 64px 160px 110px 84px;
  font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.row__f > :nth-child(5), .xh-f > :nth-child(5) { text-align: right; }
.f-c span { display: inline-block; padding: 4px 10px; background: var(--c); color: var(--on); font-size: 1rem; transition: background-color .25s var(--ease), color .25s var(--ease); }
.row:hover .f-c span, .row:focus-visible .f-c span { background: var(--on); color: var(--c); }
.f-d.up { color: var(--chf); }
.f-d.dn { color: #ff8c7e; }
.row:hover .f-d, .row:focus-visible .f-d { color: inherit; }
.lbl { display: none; }

.xlist__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 28px var(--m) 6px; }
.xh-f { font-weight: 600; font-size: 1rem; }
.xlist__nojs { padding: 40px var(--m); }

.js .row.rv { transform: translateY(18px); }
.js .row.rv.in { transform: none; }
.js .row.rv { transition: opacity .6s var(--ease), transform .6s var(--ease), background-color .25s var(--ease), color .25s var(--ease); transition-delay: calc(var(--d, 0) * 50ms), calc(var(--d, 0) * 50ms), 0s, 0s; }

/* ======================= PICTURES ======================= */
.credits, .coin figcaption, .ft--say small { font-size: 1rem; }
.credits { max-width: 60ch; }
.xpics { --field: var(--paper-2); padding: 0; min-height: 0; }

/* ======================= CLOSE ======================= */
.xend { --field: var(--chf); --field-on: var(--chf-on); min-height: 70svh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding-block: 96px var(--m); }
.xend__title { font-size: clamp(3rem, 9vw, 9rem); line-height: .95; max-width: 11ch; }
.xend__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; }
.xend .btn { font-size: 1.25rem; }
.xend__row p { max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }

/* ======================= TABLET ======================= */
@media (max-width: 1279px) {
  .f-n { display: none; }
  .row__f, .xh-f { grid-template-columns: 64px 150px 110px 84px; }
}

/* ======================= PHONE ======================= */
@media (max-width: 860px) {
  .xhead { padding-top: 112px; gap: 36px; min-height: 0; }
  .xhead__title { font-size: 14vw; }
  .xhead__row { display: block; }
  .xhead__lead { max-width: none; font-size: 1.1875rem; margin-bottom: 32px; }
  .xtile { min-height: 190px; padding: 20px; }
  .xtile__fig { font-size: 15vw; }

  .xlist { padding: 56px 0 72px; }
  .ctl__lead { min-width: 100%; }
  .ctl__lead--2 { margin-left: 0; min-width: 100%; margin-top: 8px; }
  .opt { padding: 0 14px; }

  .xlist__head { display: none; }
  .row { grid-template-columns: 1fr; gap: 6px; padding-block: 14px 20px; }
  .row__t { font-size: 15vw; }
  .row__f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 1.1875rem; }
  .f-c span { font-size: inherit; }
  .f-n { display: block; flex-basis: 100%; }
  .f-c, .f-d { order: -1; }
  .f-n { order: -2; }
  .f-d { text-align: left; }
  .lbl { display: inline; font-weight: 400; }

  .xpics .coins { grid-template-columns: 1fr; }
  .xpics .coin { aspect-ratio: 16 / 11; }
  .xpics .coin img { object-position: 50% 50%; }
  .xend { min-height: 0; padding-block: 144px 72px; gap: 48px; }
  .xend__title { font-size: 14vw; }
}

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  .js .mask > span { transform: none; transition: none; }
  .js .row.rv { transform: none; }
  .opt:hover, .row:hover .row__t, .row:focus-visible .row__t { transform: none; }
}