/* retiro.ph — Explore, the photo-led source-post discovery page.
   JEV-20261012312, JEV-20261012320. Loaded after tokens.css, site.css and
   scene.css, so it adds the layout only and reuses the site palette (ivory
   paper, forest green, aged gold focus), the type scale and the shared top bar.

   The reading path is short: title, one search, one compact wrapping index of
   plain clickable tag words with counts in parentheses, then two plain links that
   choose how the results are read. Photos is the default and draws one tile a
   row on a phone, two on a tablet and three on a desktop: the source's own
   photograph, whole and large in its frame, with the useful words under it. All
   listings draws the compact text rows. The index has no family headings, no
   boxes and no repeated #; the only other controls are one small
   Dates-and-amounts drawer, closed until asked for, and the closed About and
   Legal details at the foot. A picture is drawn only where a person really
   retrieved that source post and kept its photographs; every other post is the
   compact text row it always was, and no card sits inside a card. */

html {
  background: var(--color-bg);
  scroll-snap-type: none;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  min-height: 100vh;
}

/* The owner asked for one way into the existing game at the top of this
   destination. It is its own class, not the duplicated Explore button an earlier
   review rejected, and it points at the game that is already published. */
.bar-play {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-left: var(--space-3);
  padding: 0.4rem 0.95rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scene-gold-ink);
  background: var(--scene-gold);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
}

.bar-play:hover {
  background: #e0b45c;
}

.exp-main {
  padding-top: calc(var(--bar-h) + var(--space-2));
  padding-bottom: var(--space-8);
}

/* --------------------------------------------------------------- the bar */

.bar-primary {
  margin-left: auto;
}

.bar-primary ul {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-primary a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f4f1e8;
  text-decoration: none;
  white-space: nowrap;
}

.bar-primary a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--scene-gold);
}

.bar-primary a[aria-current="page"] {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--scene-gold);
}

/* The Menu button stays on the wide screen too: the planning links belong
   behind it, not mixed in with Explore and Events. These rules come after
   scene.css, so they are the ones that win. */
.bar .nav-toggle {
  margin-left: var(--space-3);
}

@media (min-width: 1080px) {
  .bar .nav-toggle {
    display: inline-flex;
  }

  .bar .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    margin-left: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: rgba(11, 13, 10, 0.97);
    border-bottom: 1px solid rgba(244, 241, 232, 0.16);
  }

  .bar .site-nav.is-open {
    display: block;
  }

  .bar .site-nav ul {
    display: grid;
    align-items: initial;
    gap: 0;
  }

  .bar .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0.5rem 0;
    font-size: var(--text-base);
    border-bottom: 1px solid rgba(244, 241, 232, 0.1);
  }
}

/* -------------------------------------------------------------- the head */

.exp-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}

/* The title is the heading; the owner removed the redundant lead line under it,
   so the search sits directly below the word Explore. */

/* ---------------------------------------------------------------- search */

.exp-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  max-width: 46rem;
}

.exp-search__input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-md);
}

.exp-search__input:hover {
  border-color: var(--color-fg-muted);
}

.exp-search__input::placeholder {
  color: var(--color-fg-faint);
}

.exp-search__go {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.exp-search__go:hover {
  background: color-mix(in oklab, var(--color-accent) 88%, var(--color-fg));
}

/* --------------------------------------------------------- the tag index */

.exp-tags {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

/* One wrapping block of plain tag words. No pill, no box, no family heading:
   the words sit next to each other like words in a sentence, with the count in
   parentheses, and the chosen word keeps its place in the same flow. */
.exp-taglist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* The index of the live page: no row gap, 8px between the words. */
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp-taglist__item {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

.exp-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0;
  /* The index names of the live page: Source Serif 4, 14px on a 1.3 line, normal
     weight, with the chosen scope word the only bold one. */
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
  text-align: left;
}

.exp-link__text {
  overflow-wrap: anywhere;
}

.exp-link:hover {
  text-decoration-color: currentColor;
}

.exp-link[aria-current="true"] {
  color: var(--color-fg);
  font-weight: 600;
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 2px;
}

.exp-link--kind {
  color: var(--color-fg);
}

.exp-link__n {
  font-family: var(--font-mono);
  /* The counts of the live page: IBM Plex Mono, 12px on a 1.3 line. */
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exp-link[aria-current="true"] .exp-link__n {
  color: var(--color-fg);
}

/* ----------------------------------------------------------------- tools */

.exp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  margin-top: var(--space-2);
}

.exp-count {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
}

/* The two plain links that choose how the results are read, each with the count
   that belongs to it. Plain underlined words, no box, no button. */
.exp-modes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.exp-mode {
  min-height: 1.5rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.exp-mode:hover {
  text-decoration-color: currentColor;
}

.exp-mode[aria-current="true"] {
  color: var(--color-fg);
  font-weight: 600;
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 2px;
}

.exp-modes__sep {
  color: var(--color-fg-faint);
}

.exp-reset {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.exp-reset[hidden] {
  display: none;
}

.exp-reset:hover {
  text-decoration-color: currentColor;
}

/* The optional drawer is a small plain text control, not a large outlined
   button: the visible word is Filters and the accessible name says what it
   holds, so the reading path stays the tag words and the rows. */
.exp-drawer-toggle {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.exp-drawer-toggle:hover {
  text-decoration-color: currentColor;
  color: var(--color-accent);
}

.exp-drawer-toggle[aria-expanded="true"] {
  color: var(--color-accent);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------- drawer */

.exp-drawer {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.exp-drawer[hidden] {
  display: none;
}

.exp-drawer__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.exp-drawer__grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .exp-drawer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .exp-drawer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.exp-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.exp-field > label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
}

.exp-field input {
  min-height: var(--tap);
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
}

.exp-field input:hover {
  border-color: var(--color-fg-muted);
}

.exp-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  grid-column: 1 / -1;
}

.exp-check input {
  width: 1.15rem;
  height: 1.15rem;
}

.exp-check label {
  font-size: var(--text-base);
}

.exp-drawer__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.exp-drawer__done {
  margin-left: auto;
}

/* --------------------------------------------------------------- results */

.exp-results {
  display: grid;
  gap: 0;
  margin-top: var(--space-2);
  min-width: 0;
}

/* Two columns of compact rows from 800px up, so a 900px or 1040px window is
   dense rather than one oversized full-width column; 390px stays one column. */
@media (min-width: 800px) {
  .exp-results--rows {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
}

@media (min-width: 1200px) {
  .exp-results--rows {
    column-gap: var(--space-7);
  }
}

/* The photo view: the strip leads and the selected photograph is drawn under it
   in place, so there is no column count to keep and one reading path serves every
   width. */
.exp-results--photos {
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

/* A compact unboxed result: the tag sentence it is known by, then the amount,
   the day and, on one small line, the real See page link to the source and the
   separate optional Details control. No border around a tag, no big row per
   fact. */
.exp-row {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 2px 0 var(--space-1);
  border-bottom: 1px solid var(--color-rule);
}

.exp-row__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: 0;
  min-width: 0;
}

.exp-tag {
  max-width: 100%;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}

.exp-tag:hover {
  text-decoration-color: currentColor;
  color: var(--color-fg);
}

/* A row tag that is already one of the chosen words reads as chosen, the same
   way the index shows it. */
.exp-tag[aria-current="true"] {
  color: var(--color-fg);
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 2px;
}

.exp-row__name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

.exp-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: 0;
  min-width: 0;
}

.exp-row__amount {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
  overflow-wrap: anywhere;
}

.exp-row__amount--none {
  color: var(--color-fg-muted);
}

.exp-row__dot {
  color: var(--color-fg-faint);
}

.exp-row__date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
}

/* The row's primary action, the source itself: one small link, then the separate
   optional Details control. Both sit at the end of the meta line and both stay
   plain underlined text, not a button box. */
.exp-row__see,
.exp-row__details {
  min-height: 1.5rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.exp-row__see {
  margin-left: auto;
}

.exp-row__see:hover,
.exp-row__details:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------- a row with a real capture */

/* In the All listings view the source post a person captured carries its own
   photograph beside the compact text row: the tags still lead, the meta line is
   unchanged, and the picture sits in a small frame at the right. A row without a
   capture is exactly the row it always was. The picture is not itself a control:
   a post's photographs are read in the strip. */
.exp-row--captured {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
}

.exp-row--captured .exp-row__tags {
  grid-column: 1;
  grid-row: 1;
}

.exp-row--captured .exp-row__meta {
  grid-column: 1;
  grid-row: 2;
}

.exp-row--captured .exp-row__thumb {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.exp-row__thumb {
  display: block;
  align-self: center;
  justify-self: end;
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The whole frame, never cropped: whatever shape the source published keeps its
   own shape inside the small frame. */
.exp-row__thumbimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.exp-community {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
}

.exp-community:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* ------------------------------------------- the strip and the selected photo */

/* The default view. Every retrieved photograph of every matching source post is
   one mini picture in one row that scrolls sideways and can be dragged; the one
   selected is drawn whole and large in place under the row, with the source's
   own words and facts under it and the reader's review beside it. Nothing opens
   over the page and nothing is cropped into a square. */
.exp-photos {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.exp-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--color-rule);
  cursor: grab;
}

.exp-strip[data-dragging="1"] {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* One mini photograph: a plain 42x44 control with no box around it, holding a
   32px-high whole picture. The chosen one is marked by being fully drawn and the
   others fade back, so nothing is a bordered tile and nothing carries a caption;
   the accessible name on every control still names the photograph and its post. */
.exp-mini {
  flex: 0 0 auto;
  width: 42px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 0.62;
  cursor: pointer;
  scroll-snap-align: start;
}

.exp-mini:hover,
.exp-mini:focus-visible {
  opacity: 0.85;
}

.exp-mini[aria-pressed="true"] {
  opacity: 1;
}

.exp-mini__img {
  display: block;
  width: 42px;
  height: 32px;
  object-fit: contain;
}

/* The photograph, then the source's own words and facts under it, and the
   review beside it. On a phone the three are one column in that order. */
.exp-v {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.exp-v__grid {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* A phone reads the picture, then the review, then the source's own words and
   facts: one column, in the order the DOM already carries. A desktop keeps the
   picture and its facts in the left column and the review beside them. */
@media (min-width: 900px) {
  .exp-v__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas:
      "photo review"
      "facts review";
    gap: var(--space-5) var(--space-6);
    align-items: start;
  }

  .exp-v__main {
    grid-area: photo;
  }

  .exp-v__side {
    grid-area: review;
  }

  .exp-v__facts {
    grid-area: facts;
  }
}

.exp-v__main,
.exp-v__side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

/* The frame of the selected photograph. The picture inside is positioned and
   sized by the review panel's own geometry, so a quarter turn always leaves the
   whole picture inside this frame, never cropped and never stretched. */
.exp-v__stage {
  position: relative;
  width: 100%;
  height: min(70vh, 34rem);
  min-height: 16rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The picture is placed and sized by the review geometry as soon as its bytes
   load. Until then, and wherever that geometry cannot be read, it still fills the
   frame whole and uncropped. */
.exp-v__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.exp-v__caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

.exp-v__photolink {
  margin-left: var(--space-2);
  color: var(--color-accent);
}

.exp-v__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: var(--space-3) 0 0;
  min-width: 0;
}

.exp-v__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  margin: 0;
  min-width: 0;
}

.exp-v__where {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

/* The post's own words under its picture: a short real excerpt, then, where the
   copy holds more, the whole text behind one plain disclosure. No prose wall is
   ever put above the photographs. */
.exp-full__more {
  margin: 0;
}

.exp-full__summary {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.exp-full__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-fg-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- states */

.exp-state {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-5) 0;
}

.exp-state p {
  margin: 0;
  max-width: var(--measure);
}

.exp-state__note {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.exp-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The one plain link offered when a filter holds no retrieved photograph. */
.exp-more {
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.2em;
}

.exp-more:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* ----------------------------------------------------------------- pager */

.exp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.exp-step {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.exp-step:hover:not(:disabled) {
  border-color: var(--color-fg-muted);
}

.exp-step:disabled {
  opacity: 0.5;
  cursor: default;
}

.exp-pager__at {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg-muted);
}

.exp-pager__size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.exp-pager__size label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.exp-pager__size select {
  min-height: var(--tap);
  padding: 0.35rem 0.55rem;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------- the facts under the picture */

/* The source's own words, what the capture holds and every stored record for
   the post, read in place under the selected photograph. There is no layer over
   the page and no second drawer: this is part of the same column. */
.exp-v__facts {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.exp-record {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.exp-record__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.exp-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  min-width: 0;
}

.exp-fact-row {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.exp-fact-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.exp-fact-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.exp-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  max-width: var(--measure);
  overflow-wrap: anywhere;
}

.exp-note--lead {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.exp-source {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

.exp-source__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.exp-source__url {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

/* ------------------------------------------- the capture inside the details */

/* Everything here belongs to one source ad a person really retrieved: its
   photographs, the post's own full text, who posted it, the source's list of
   what is included, and the direct way back to the original. The full text is
   read after opening, never as a wall on the results. */
.exp-capture {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.exp-capture__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.exp-capture__see {
  margin: 0;
}

.exp-capture__link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.exp-capture__id {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* The ordinary link into the community, where the same approved photograph can
   be opened and replied to. It is a plain same-site link, the same weight as the
   other capture links, and nothing is sent from this page. */
.exp-capture__reply {
  margin: 0;
}

.exp-capture__replylink {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.exp-capture__text {
  margin: 0;
  max-width: var(--measure);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.exp-capture__amenities {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.1rem;
  max-width: var(--measure);
}

.exp-capture__note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* ----------------------------------------------------------- about, notes */

.exp-about {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.exp-about summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
  cursor: pointer;
}

.exp-about ul {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: 1.1rem;
  list-style: disc;
}

.exp-noscript {
  margin-top: var(--space-4);
}

.dir-foot-a {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.dir-foot-b {
  display: grid;
  gap: var(--space-6);
}

/* The long legal writing is closed until it is asked for; the footer links that
   have to be there stay above it, and the site line stays visible. */
.foot-details {
  margin-top: var(--space-1);
}

.foot-details summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
  cursor: pointer;
}

.foot-details p {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
}

/* ----------------------------------------------------------------- focus */

/* Unknown prices add no useful listing information; retain the actual source date. */
.exp-v__meta .exp-row__amount--none,
.exp-v__meta .exp-row__amount--none + .exp-row__dot {
  display: none;
}

.exp-main a:focus-visible,
.exp-main button:focus-visible,
.exp-main input:focus-visible,
.exp-main select:focus-visible,
.exp-main summary:focus-visible,
.exp-main [tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .exp-row__see,
  .exp-row__details,
  .exp-link,
  .exp-tag {
    transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
  }
}

/* A phone: the count line, the two view links and the Filters link share as few
   rows as they can, so four compact text rows still fit above the fold at 390
   without changing the index typography or the row content. */
@media (max-width: 600px) {
  .exp-tags {
    margin-top: 0;
    padding-top: var(--space-1, 0.25rem);
  }

  .exp-results {
    margin-top: 0;
  }

  .exp-row {
    padding-bottom: 0;
  }

  .exp-tools {
    gap: 0 8px;
    margin-top: 0;
  }

  .exp-count {
    flex: 1 1 auto;
  }
}