/* ═══ collection — /collection and /collection/rotd ═══════════════════════════
   Loaded after /style.css. Consumes the shared tokens (BRIEF §1); never
   redefines them, never restates a shared component (BRIEF §5.2).

   The collection is the operator's colophon: a register of what we hold and
   when we showed up, not a gallery pitch. Everything below pushes the existing
   .nft-* / .nh-* / .rotd-* markup onto the Institution rules — hairlines over
   boxes, tabular figures, one accent.                                        */

/* ── page head + at-a-glance register ─────────────────────────────────────── */
.nft-head { margin-bottom: var(--s4); }
.nft-head .dek { color: var(--ink-3); }

/* ── jump strip — the page's own contents line ────────────────────────────
   This route is long and it is art first: the register below the fold has to be
   reachable without scrolling past 100 tiles. Toolbar weight, not navigation
   weight — it sits on the shared `.crumb` scale, never sticks, and never
   competes with the masthead above it. */
.nft-jump {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: 0 0 var(--s5); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.nft-jump a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
  padding: .25rem 0;
  border-bottom: 1.5px solid transparent;
}
.nft-jump a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.nft-jump-n {
  font-weight: 600; letter-spacing: .04em; color: var(--ink-4);
  font-variant-numeric: tabular-nums lining-nums;
}

/* one plate: the figures on top, the wallets they were counted from beneath.
   A masthead register — not two floating boxes. */
.nft-plate {
  margin: 0 0 var(--s6);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* the three figures read as a register, not a run-on sentence */
.nft-stats {
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: none; border-radius: 0;
}
.nft-stats .card { padding: var(--s4) var(--s5); border-bottom: none; }
.nft-stats dd { margin: 0; }
.nft-stats dt { margin-top: var(--s2); }
.nft-stats .card:last-child { border-right: none; }

/* at 390px the three cells are ~113px — the tracked label must fit inside its
   own hairline, so the padding and tracking give way, never the third column */
@media (max-width: 560px) {
  .nft-stats .card { padding: var(--s3) var(--s3) .9rem; }
  .nft-stats .card .v { font-size: 1.5rem; }
  .nft-stats .card .k { font-size: .62rem; letter-spacing: .06em; }
}

/* ── wallets: a ruled register, one row per wallet ───────────────────────── */
.nft-wallets {
  margin: 0;
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
  gap: 0;
}
.nft-wallets li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--s2) var(--s4);
  padding: .55rem var(--s5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-data);
}
.nft-wallets li:first-child { border-top: none; }
.nft-wlabel {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.nft-wallets code {
  background: none; border: none; padding: 0;
  color: var(--ink-2); font-size: .8rem; letter-spacing: -.01em;
}
/* chrome links, not prose links — the shared `p a, li a` underline is noise here */
.nft-wlinks { white-space: nowrap; color: var(--ink-4); font-size: .78rem; }
.nft-wlinks a { color: var(--ink-3); text-decoration: none; }
.nft-wlinks a:hover { color: var(--accent-deep); text-decoration: underline; }

@media (max-width: 700px) {
  .nft-wallets li { grid-template-columns: 1fr auto; padding: .6rem var(--s4); }
  .nft-wallets code { grid-column: 1 / -1; font-size: .74rem; }
  .nft-wlinks { grid-row: 1; grid-column: 2; }
}

/* ── on-chain history: a register of record ──────────────────────────────── */
.nh { margin: 0 0 var(--s7); }
.nh-head { font-size: var(--fs-h2); }
.nh-list {
  border-left: none;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}
/* the blurb column is a stated measure, not a max-width inside a 1fr — so the
   channel in front of the proof button is a chosen column, not an accident */
.nh-item {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 58ch) 1fr;
  align-items: start; gap: var(--s2) var(--s5);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--rule);
}
.nh-item:first-child { border-top: none; }
/* the rail runs behind the dots, inside the plate */
.nh-list { position: relative; }
.nh-list::before {
  content: ""; position: absolute;
  left: calc(var(--s5) + 5px); top: 1.9rem; bottom: 1.9rem;
  width: 1px; background: var(--rule-2);
}
.nh-item::before {
  left: calc(var(--s5) + 2px); top: 1.5rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--paper-2);
}
.nh-date {
  flex: none; padding: .12rem 0 0 1.15rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-3); line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.nh-title { font-size: 1.02rem; margin: 0 0 .25rem; }
.nh-blurb { font-size: .875rem; margin: 0; max-width: none; }
.nh-proof {
  justify-self: end; align-self: start;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  padding: .3rem .55rem; border: 1px solid var(--rule-2); border-radius: 2px;
  color: var(--ink-3); background: var(--paper-3);
  line-height: 1.3; text-decoration: none;
}
.nh-proof:hover { color: var(--accent-deep); border-color: var(--accent-hair); text-decoration: none; }
.nh-chain { margin-left: .3rem; }

@media (max-width: 760px) {
  .nh-item {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--s4);
    gap: .35rem var(--s3);
  }
  .nh-date { grid-column: 1; grid-row: 1; padding-left: 1.05rem; }
  .nh-proof { grid-column: 2; grid-row: 1; }
  .nh-body { grid-column: 1 / -1; padding-left: 1.05rem; }
  .nh-list::before { left: calc(var(--s4) + 5px); }
  .nh-item::before { left: calc(var(--s4) + 2px); top: 1.32rem; }
}

/* ── quarterly acquisitions figure ───────────────────────────────────────── */
/* columns distribute across the whole plate; the baseline rule under them is the
   axis, so the figure fills the frame it was given instead of hugging the left. */
.nft-tl-plate { margin: 0 0 var(--s6); }
.nft-timeline {
  padding: var(--s3) 0 0;
  gap: 0; justify-content: stretch;
  border-bottom: 1px solid var(--rule-2);
  overscroll-behavior-x: contain;
}
.nft-q {
  flex: 1 1 0; min-width: 3.4rem; gap: 3px;
  padding: 0 .35rem;
}
/* a new year opens with a hairline tick — the axis groups without a second row */
.nft-q.is-year { border-left: 1px dotted var(--rule-2); }
.nft-qcount {
  font-size: .68rem; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.nft-q.is-peak .nft-qcount { color: var(--accent-deep); font-weight: 700; }
.nft-qbar {
  width: 100%; max-width: 44px; border-radius: 1px 1px 0 0;
  background: var(--accent-bright);
}
.nft-q.is-peak .nft-qbar { background: var(--accent); }
/* --ink-4 is only legible at >=0.72rem (BRIEF H3) — this axis is smaller, so it
   steps up to --ink-3 rather than down in size */
.nft-qlabel {
  font-size: .62rem; padding-top: .35rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em;
}

@media (max-width: 760px) {
  /* the strip keeps its own scroll (BRIEF H2); columns stay wide enough for
     "2022-Q1" so the axis cannot collide with itself */
  .nft-q { flex: 0 0 3.6rem; padding: 0 .2rem; }
  .nft-qbar { max-width: 26px; }
}

/* ── chain sections ──────────────────────────────────────────────────────── */
.nft-chain { margin: 0 0 var(--s6); }
/* a section-level empty state is a real production state (a fresh deploy, a
   stalled sync): it fills the section it stands for instead of sitting in a
   68ch prose column half the width of the plate above it */
.nft-empty {
  margin: 0; padding: var(--s5); max-width: none;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-3); color: var(--ink-3);
  font-size: var(--fs-ui);
}

/* A collection is a catalogue entry. Two shapes, chosen by weight:
   — deep catalogue: heading, then the note as a standfirst, then the plates across
     the full measure. The note used to sit in a 17rem margin column, which stole
     two grid columns from every collection that had one (a 17-piece series ran
     4-up over five rows instead of 6-up over three) and stranded an empty 272px
     channel down the side of it.
   — a record of three plates or fewer (`.is-story`): the art on the left, the
     title and its story in the column beside it. One horizontal band the height of
     the art, instead of a heading band over a mostly empty row.
   Below 1000px both stack heading → note → grid, in DOM order. */
.nft-collection { margin: 0 0 var(--s5); }
@media (min-width: 1000px) {
  .nft-collection.is-story {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* the plates span both rows; without an explicit `1fr` on the second, their
       height is shared between the rows and the note drifts into the middle of an
       empty column. The title row takes what it needs, the story row takes the rest. */
    grid-template-rows: auto 1fr;
    column-gap: var(--s5);
    align-items: start;
  }
  .nft-collection.is-story > .nft-grid {
    grid-column: 1; grid-row: 1 / span 2;
    grid-auto-flow: column; grid-auto-columns: 168px; grid-template-columns: none;
  }
  .nft-collection.is-story > h3 { grid-column: 2; grid-row: 1; margin-bottom: var(--s3); }
  /* a run of records is a register, not a stack of floating bands — one hairline
     between neighbours does the work an extra 2rem of air was failing to do */
  .nft-collection.is-story + .nft-collection.is-story {
    border-top: 1px solid var(--rule);
    padding-top: var(--s4);
  }
  .nft-collection.is-story > .nft-note { grid-column: 2; grid-row: 2; margin: 0; max-width: 58ch; }
}
.nft-collection h3 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-h3);
}
.nft-collection h3 .badge { font-variant-numeric: tabular-nums lining-nums; }

/* ── the era's lead: the comic, as a card with a way in ───────────────────
   The 20 ROTD pages are a book, and the book has a reader one route away. Twenty
   thumbnails of the same title said less than one cover and a door, so the era
   opens on the cover and the pages live in `/collection/rotd`. `--ink` on the top
   edge is the same "this is the lead figure" flag `.record` carries on the landing
   page (BRIEF §1.8). */
.nft-feature {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  margin: 0 0 var(--s6);
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.nft-feature-cover {
  width: 100%; height: 100%; min-height: 200px;
  object-fit: cover; object-position: top center;
  display: block; background: var(--paper-3);
  border-right: 1px solid var(--rule);
}
.nft-feature-body { padding: var(--s4) var(--s5) var(--s4) var(--s5); }
.nft-feature-title { margin: .35rem 0 0; font-size: var(--fs-h2); }
.nft-feature-count {
  margin: .3rem 0 0; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.nft-feature-note {
  margin: var(--s3) 0 0; max-width: 62ch;
  font-size: .875rem; line-height: 1.55; color: var(--ink-2);
}
/* the pages after the cover, in order — the card reads as a sequence, not a tile.
   Plates on their own hairlines at page proportions, closing on the live count of
   what the strip did not show. */
.nft-feature-strip {
  display: flex; align-items: stretch; gap: .3rem;
  margin-top: var(--s4);
}
.nft-feature-strip img {
  width: 40px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  display: block; background: var(--paper-3);
  border: 1px solid var(--rule); border-radius: 2px;
}
.nft-feature-more {
  display: flex; align-items: center; padding-left: .35rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums;
}
.nft-feature-cta {
  display: inline-block; margin-top: var(--s4);
  font-size: var(--fs-ui); font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.nft-feature-cta:hover { color: var(--accent-deep); text-decoration: underline; }
/* the whole plate is the target; the link stays the single focusable control so
   the card has one accessible name and one tab stop, not two */
.nft-feature-cta::after { content: ""; position: absolute; inset: 0; }
.nft-feature:focus-within { border-color: var(--rule-2); }

@media (max-width: 700px) {
  .nft-feature { grid-template-columns: minmax(0, 1fr); }
  .nft-feature-cover {
    min-height: 0; aspect-ratio: 16 / 9; height: auto;
    border-right: none; border-bottom: 1px solid var(--rule);
  }
  .nft-feature-body { padding: var(--s4); }
}

/* ── the long tail: one strip per era ─────────────────────────────────────
   A one-piece series does not earn a heading, a story column and a grid of its
   own — nineteen of them turned the page into a corridor of near-empty rooms.
   They collapse into a single continuous index: the art at ~60% plate size, the
   piece on one line, its series underneath in the tracked micro label. Each tile
   is still a lightbox control, so nothing became unreachable. */
.nft-smaller { margin: 0 0 var(--s5); }
.nft-smaller-head { margin-bottom: var(--s4); }
.nft-smaller-head > h3 {
  margin: 0; padding: 0; border: none;
  font-size: var(--fs-h3);
}
.nft-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--s3) var(--s2);
}
.nft-tile figcaption {
  padding: .35rem .4rem .4rem;
  gap: .1rem; line-height: 1.3;
}
.nft-tname {
  font-size: .72rem; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nft-tseries {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── the piece grid — index cards, not floating tiles ────────────────────── */
.nft-grid { gap: var(--s4) var(--s3); }
/* three plates or fewer: a short row of fixed-width plates, not one card
   stranded in a field of empty auto-fill tracks.
   Desktop only. `auto-fill` counts repetitions against the track's *max* sizing
   function when that is definite, so 210px meant exactly one 210px column at
   390px — a three-piece collection ran one-up down half an empty phone screen.
   Below 700px the grid keeps the plain `minmax(150px, 1fr)` two-up reflow. */
@media (min-width: 700px) {
  .nft-grid:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(auto-fill, minmax(150px, 210px));
    justify-content: start;
  }
}
.nft-card {
  display: flex; flex-direction: column;
  transition: border-color var(--motion-fast) ease;
}
.nft-card:hover { border-color: var(--rule-2); }
.nft-card .nft-media { border-bottom: 1px solid var(--rule); }
.nft-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the caption is the catalogue line, not a second plate: at 166px of art, 99px of
   chrome under it was 37% of the tile. Same three facts, tighter leading. */
.nft-card figcaption {
  padding: .4rem .6rem .45rem;
  gap: .1rem; font-size: .78rem; line-height: 1.32;
  flex: 1 1 auto;
}
.nft-cname { display: flex; align-items: baseline; gap: .4rem; justify-content: space-between; }
.nft-cid { flex: none; }
/* the name wraps to two lines before it truncates — a catalogue caption may lose
   its line breaks, never its identifier */
.nft-cname strong {
  font-size: .82rem; font-weight: 600; line-height: 1.35;
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.nft-cid, .nft-cheld {
  font-size: .68rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.nft-card figcaption a {
  margin-top: auto; padding-top: .3rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.nft-card figcaption a:hover { color: var(--accent-deep); text-decoration: none; }

/* ── per-collection story caption ────────────────────────────────────────── */
.nft-note {
  border-left-width: 3px; border-left-color: var(--accent);
  padding: .1rem 0 .1rem .8rem; max-width: 66ch;
}

/* ── previously held ─────────────────────────────────────────────────────── */
.nft-departed {
  margin: var(--s6) 0 0;
  border-top: 1px solid var(--rule-ink); padding-top: var(--s3);
}
.nft-departed summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .3rem 0;
}
.nft-departed summary::-webkit-details-marker { display: none; }
.nft-departed summary::before {
  content: "+"; display: inline-block; width: 1em;
  color: var(--accent); font-weight: 700;
}
.nft-departed[open] summary::before { content: "−"; }
.nft-departed summary:hover { color: var(--ink); }
.nft-departed ul { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: 52rem; }
.nft-departed li {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: .42rem 0; border-top: 1px solid var(--rule);
  font-size: var(--fs-data); color: var(--ink-2);
}
.nft-dwhen {
  color: var(--ink-4); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── soft delegate CTA — footnote weight, once, at the bottom ──────────────
   The tail is one block: a --rule-ink break opens "previously held", a hairline
   closes it under the footnote CTA. Two rules, not three, and no dead bands. The
   CTA itself is the shared `.soft-cta` in style.css — this page only sets the
   distance to the block above it. */
.nft-page > .soft-cta { margin-top: var(--s5); }

/* ── lightbox — a viewing surface, dark in both themes ───────────────────── */
.nft-lb-close {
  top: .9rem; right: 1rem;
  width: 40px; height: 40px; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
  background: rgba(255,255,255,.06); color: #fff; opacity: 1;
}
.nft-lb-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.nft-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nft-lb-media { border-radius: 2px; box-shadow: 0 10px 60px rgba(0,0,0,.55); }

/* ═══ /collection/rotd — the comic reader ═════════════════════════════════ */
/* the reader's own chrome: the live page counter, on the line above the stage.
   The masthead is the shared `.crumb` + `.page-head` every other page uses. */
.rotd-bar { display: flex; justify-content: flex-end; margin-bottom: var(--s3); }
.rotd-count {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--paper-3); padding: .3rem .6rem;
  font-variant-numeric: tabular-nums lining-nums;
}

/* the neutral empty state fills the measure the reader would have filled, so the
   route does not end on ~150px of dead canvas above the footer. `.nft-empty` (the
   same treatment an unsynced chain gets on /collection) states it; the paragraph
   under it explains and offers the way back. */
.rotd-none { max-width: none; margin-bottom: var(--s5); }
/* the panel stands where the book would have stood: full measure, and deep enough
   to read as the reader's own surface rather than as a thin strip with a page of
   empty canvas under it */
.rotd-none .nft-empty {
  margin: 0 0 var(--s4);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.rotd-none > p:last-child {
  margin: 0; max-width: var(--measure);
  font-size: 0.92rem; color: var(--ink-3);
}

/* side gutters: the page-turn controls live beside the book, never on top of it */
.rotd-stage { min-height: 46vh; padding: var(--s4) 72px; }
.rotd-stage.spread .rotd-book { box-shadow: var(--shadow-lift); }
.rotd-stage.spread .rotd-book::after { background: rgba(22,20,15,.22); }
.rotd-img { max-height: 78vh; }

/* the hit zone is the gutter; the chevron is a visible control centred in it */
.rotd-nav {
  display: flex; align-items: center; justify-content: center;
  width: 72px; padding: 0; opacity: 1;
  z-index: 2;
}
.rotd-next { justify-content: center; padding: 0; }
.rotd-nav > span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--paper-2);
  color: var(--ink); font-size: 1.5rem; line-height: 1;
  box-shadow: var(--shadow-card);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.rotd-nav:hover:not(:disabled) > span { border-color: var(--ink); background: var(--paper-2); }
.rotd-nav:disabled { opacity: 1; }
.rotd-nav:disabled > span { opacity: .3; }
.rotd-nav:focus-visible { outline: none; }
.rotd-nav:focus-visible > span { outline: 2px solid var(--accent); outline-offset: 2px; }

.rotd-foot {
  margin-top: var(--s3);
  padding: .55rem var(--s4);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
  gap: var(--s3);
}
.rotd-end {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums;
}
.rotd-range { min-width: 0; }
.rotd-explorer {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding-left: var(--s3); border-left: 1px solid var(--rule);
}
.rotd-explorer:hover { color: var(--accent-deep); text-decoration: none; }

@media (max-width: 760px) {
  /* 88px of gutter is a quarter of a 390px viewport, and the page is the point of
     the route — so the controls leave the sides and take a rail along the bottom
     of the stage, where the vertical room is free and the thumb already is. The
     side zones stay live above the rail (transparent), so tapping the left or
     right edge of the page still turns it. */
  .rotd-stage { min-height: 40vh; padding: var(--s3) var(--s3) 58px; }
  .rotd-img { max-height: 58vh; }
  .rotd-nav {
    width: 38%; top: 0; bottom: 0;
    align-items: flex-end; padding-bottom: 9px;
  }
  .rotd-prev { justify-content: flex-start; padding-left: var(--s3); }
  .rotd-next { justify-content: flex-end; padding-right: var(--s3); }
  .rotd-nav > span { width: 40px; height: 40px; font-size: 1.35rem; }
  .rotd-foot { flex-wrap: wrap; }
  .rotd-explorer {
    order: 4; flex-basis: 100%; padding-left: 0;
    border-left: none; border-top: 1px solid var(--rule);
    padding-top: .5rem; margin-top: .2rem; text-align: center;
  }
}