/* ===========================================================================
   SILVER PRINT — index.php  (also loaded on stories.php)
   Overrides assets/css/index-page.css and the inline critical block in
   inc/header.php that defines the same search-command elements.

   Two specificity notes that decide whether this file works at all:

   1. The inline block in inc/header.php is plain class selectors inside a
      style element in the head. Every rule here is prefixed and therefore
      outranks it, and this file is also linked later in the document.

   2. assets/css/index-page.css:518 sets `.gallery-tile.clean-tile
      .tile-img-wrap` — three classes, 0-3-0. The tile rules in the skin's
      global.css are 0-2-1 and LOSE to it. Every tile the site emits carries
      clean-tile, so the caption-below-the-frame treatment has to be restated
      here at 0-4-1. Section 6 is that restatement, and it is not redundant.
   =========================================================================== */

/* ---- 1. The black band above the banner --------------------------------- */

/* This was already pure black in the base sheet. It is one of the few places
   where the old design and this one agree, so it only gets normalised onto
   the token and squared off. */

body[data-skin="silver"] .search-command {
  margin-block: var(--s-s6) var(--s-s8);
}

body[data-skin="silver"] .search-top-bar {
  background: var(--s-ink-0);
  border-radius: 0;
  height: 4px;
}

body[data-skin="silver"] .search-tags-row {
  background: var(--s-ink-0);
  padding: var(--s-s2) var(--s-s4);
  margin-bottom: 0;
  gap: var(--s-s3);
}

body[data-skin="silver"] .search-tag-link {
  color: var(--s-on-ink-muted);
  font-size: var(--s-fz-sm);
  font-weight: var(--s-fw-med);
  letter-spacing: var(--s-tracking-mid);
  text-decoration: none;
}

body[data-skin="silver"] .search-tag-link:hover,
body[data-skin="silver"] .search-tag-link.active {
  color: var(--s-on-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-skin="silver"] .search-tags-sep {
  color: var(--s-on-ink-dim);
}


/* ---- 2. Hero banner ----------------------------------------------------- */

body[data-skin="silver"] .search-hero-banner {
  background-color: var(--s-paper-2);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-height: none;
}

body[data-skin="silver"] .hero-banner-img {
  filter: none;
}

/* The base sheet paints two decorative pseudo-elements over the banner. */
body[data-skin="silver"] .search-hero-banner::before,
body[data-skin="silver"] .search-hero-banner::after {
  display: none;
}


/* ---- 3. Search controls ------------------------------------------------- */

/* One continuous rectangle: field, two selects, button. The dividers are
   hairlines rather than gaps, so the row reads as a single instrument. */

/* The base sheet also insets this wrapper by 32px on each side, which would
   leave the row 64px narrower than the banner even after the cap comes off.
   Measured, not assumed: banner 1520, wrapper content box 1456. */
body[data-skin="silver"] .search-bottom-area {
  margin-top: 0;
  padding-inline: 0;
}

/* max-width 820px with auto margins is what assets/css/index-page.css:163
   gives this row, so it floated as a narrow centred pill under a full-width
   banner. That worked for a rounded dark bar; it does not work here, because
   this skin drops the row's top border to make it read as one instrument
   continuous with the banner above it — and a missing top edge on an element
   narrower than the thing above it just looks like a shelf. Measured on the
   live site: banner 1520px, row 820px. The cap comes off. */
body[data-skin="silver"] .search-controls-row {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
  padding: 0;
  max-width: none;
  margin: 0;
  /* NOT overflow:hidden. The base sheet sets overflow:visible here on
     purpose: the filter dropdowns render their panel as an absolutely
     positioned child of the row, so clipping the row hides the panel and the
     menu stops opening. Squaring the corners needs no clipping. */
  overflow: visible;
}

body[data-skin="silver"] .search-controls-row:focus-within {
  border-color: var(--s-line-heavy);
  box-shadow: none;
}

body[data-skin="silver"] .search-input-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: var(--s-s5);
  min-height: 60px;
}

body[data-skin="silver"] .search-input-wrap .search-icon {
  color: var(--s-text-muted);
}

body[data-skin="silver"] .search-input-wrap:focus-within .search-icon {
  color: var(--s-ink-0);
}

body[data-skin="silver"] .search-hero-input {
  background: transparent;
  color: var(--s-ink-0);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--s-font-body);
  font-size: var(--s-fz-lg);
}

body[data-skin="silver"] .search-hero-input::placeholder {
  color: var(--s-text-muted);
  opacity: 1;
}

body[data-skin="silver"] .search-hero-input:focus,
body[data-skin="silver"] .search-hero-input:focus-visible {
  outline: none;
  box-shadow: none;
}

body[data-skin="silver"] .search-count-badge {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border-radius: 0;
  font-family: var(--s-font-mono);
  font-size: var(--s-fz-xs);
  letter-spacing: .04em;
}

body[data-skin="silver"] .search-controls-row .search-divider {
  background: var(--s-line);
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0;
}

body[data-skin="silver"] .search-filter-select {
  background-color: var(--s-paper-0);
  color: var(--s-text);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--s-font-body);
  font-size: var(--s-fz-sm);
  min-height: 60px;
  padding-inline: var(--s-s5);
  transition: background var(--s-dur-fast) var(--s-ease);
}

body[data-skin="silver"] .search-filter-select:hover {
  background-color: var(--s-paper-2);
}

body[data-skin="silver"] .search-filter-select:focus {
  outline: var(--s-ring);
  outline-offset: calc(var(--s-ring-offset) * -1);
  box-shadow: none;
}

/* Native popup rows. Left explicitly light so the OS cannot decide for us. */
body[data-skin="silver"] .search-filter-select option {
  background: var(--s-paper-0);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .search-discover-btn {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--s-font-body);
  font-weight: var(--s-fw-semi);
  letter-spacing: .01em;
  min-height: 60px;
  padding-inline: var(--s-s7);
}

body[data-skin="silver"] .search-discover-btn:hover {
  background: var(--s-ink-1);
}

body[data-skin="silver"] .search-discover-btn:active {
  background: var(--s-ink-0);
}

body[data-skin="silver"] .search-discover-btn svg {
  color: currentColor;
  stroke: currentColor;
}


/* ---- 4. Active filter chips --------------------------------------------- */

body[data-skin="silver"] .search-active-filters {
  gap: var(--s-s2);
  margin-top: var(--s-s4);
}

body[data-skin="silver"] .filter-chip {
  background: var(--s-ink-0);
  border: 1px solid var(--s-ink-0);
  border-radius: 0;
  color: var(--s-paper-0);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .filter-chip:hover {
  background: var(--s-ink-1);
  border-color: var(--s-ink-1);
  color: var(--s-paper-0);
}

body[data-skin="silver"] .filter-chip .chip-label {
  color: inherit;
}

body[data-skin="silver"] .chip-dismiss {
  background: transparent;
  color: var(--s-on-ink-muted);
  border-radius: 0;
}

body[data-skin="silver"] .chip-dismiss:hover {
  background: transparent;
  color: var(--s-paper-0);
}

body[data-skin="silver"] .filter-clear-all {
  background: var(--s-paper-0);
  color: var(--s-text);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .filter-clear-all:hover {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  color: var(--s-ink-0);
}


/* ---- 5. Colour dropdown ------------------------------------------------- */

/* The dots inside are the thing being picked, so their fills stay. Only the
   panel, the trigger and the selection state turn monochrome — a selected
   row is marked by an ink fill, which also guarantees it reads for anyone
   who cannot tell the dots apart. */

/* THE TWO FILTER DROPDOWNS ARE NOT THE SELECTS THEY LOOK LIKE.
   Measured on the live site: both `select.search-filter-select` inside the
   controls row compute to display:none, and JavaScript puts a .cd-dropdown
   with a .cd-trigger in front of each one. Styling the native select — which
   the first pass did — therefore styles nothing a visitor can see.

   The visible trigger came out 47px tall inside a 60px row, with a border of
   its own, so the two of them floated as little boxes inside the bar instead
   of being part of it. Stretching them to the row height and dropping their
   border is what makes the bar read as one instrument; the hairline dividers
   already separate the segments. */

body[data-skin="silver"] .search-controls-row .cd-dropdown {
  align-self: stretch;
  display: flex;
}

body[data-skin="silver"] .search-controls-row .cd-trigger {
  min-height: 60px;
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding-block: 0;
  background: var(--s-paper-0);
  color: var(--s-text);
  font-family: var(--s-font-body);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .cd-trigger {
  background: var(--s-paper-0);
  color: var(--s-text);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  font-family: var(--s-font-body);
}

body[data-skin="silver"] .cd-trigger:hover,
body[data-skin="silver"] .cd-trigger:focus,
body[data-skin="silver"] .search-controls-row .cd-trigger:hover,
body[data-skin="silver"] .search-controls-row .cd-trigger:focus {
  background: var(--s-paper-2);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .search-controls-row .cd-trigger:focus-visible {
  outline: var(--s-ring);
  outline-offset: calc(var(--s-ring-offset) * -1);
}

body[data-skin="silver"] .cd-chevron {
  color: var(--s-text-muted);
}

body[data-skin="silver"] .cd-panel {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: var(--s-sh-2);
}

body[data-skin="silver"] .cd-option {
  color: var(--s-text);
  border-radius: 0;
}

body[data-skin="silver"] .cd-option:hover,
body[data-skin="silver"] .cd-option.cd-option--focused {
  background: var(--s-paper-2);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .cd-option.cd-option--selected,
body[data-skin="silver"] .cd-option.cd-option--selected:hover,
body[data-skin="silver"] .cd-option.cd-option--selected.cd-option--focused {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
}

body[data-skin="silver"] .cd-panel::-webkit-scrollbar-track {
  background: var(--s-paper-2);
}

body[data-skin="silver"] .cd-panel::-webkit-scrollbar-thumb {
  background: var(--s-ink-2);
  border-radius: 0;
}

body[data-skin="silver"] .cd-panel::-webkit-scrollbar-thumb:hover {
  background: var(--s-ink-2);
}


/* ---- 6. The tile, restated at clean-tile specificity -------------------- */

/* See note 2 in the file header. Without this block the frame stays
   absolutely positioned inside a 2/3 box and the caption has nowhere to go. */

body[data-skin="silver"] .gallery-tile.clean-tile {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-s3);
  isolation: auto;
}

body[data-skin="silver"] .gallery-tile.clean-tile:hover {
  box-shadow: none;
  border-color: transparent;
}

body[data-skin="silver"] .gallery-tile.clean-tile .tile-img-wrap {
  position: relative;
  inset: auto;
  aspect-ratio: 2 / 3;
  border-radius: 0;
  overflow: hidden;
  background: var(--s-paper-2);
}

body[data-skin="silver"] .gallery-tile.clean-tile img {
  transition: transform var(--s-dur-slow) var(--s-ease-emph);
}

body[data-skin="silver"] .gallery-tile.clean-tile:hover img {
  transform: scale(1.02);
}


/* ---- 7. Featured strip and banners -------------------------------------- */

body[data-skin="silver"] .featured-section,
body[data-skin="silver"] .featured-section:not(.behind-section) {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
  padding-top: var(--s-s6);
}

body[data-skin="silver"] .feat-grid {
  gap: var(--s-s5);
}

body[data-skin="silver"] .feat-card {
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-skin="silver"] .top-banner,
body[data-skin="silver"] .top-banner-inner {
  background: var(--s-paper-1);
  border: 1px solid var(--s-line);
  border-radius: 0;
  box-shadow: none;
}

body[data-skin="silver"] .top-banner-inner img {
  border-radius: 0;
}


/* ---- 8. Spinner and pager ----------------------------------------------- */

body[data-skin="silver"] .spinner {
  border: 2px solid var(--s-line-strong);
  border-top-color: var(--s-ink-0);
  border-radius: 50%;
}

body[data-skin="silver"] .pager-btn {
  background: var(--s-paper-0);
  color: var(--s-text);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  font-family: var(--s-font-body);
}

body[data-skin="silver"] .pager-btn:hover:not(.active):not(:disabled) {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .pager-btn.active {
  background: var(--s-ink-0);
  border-color: var(--s-ink-0);
  color: var(--s-paper-0);
}


/* ---- 9. The story-behind section ---------------------------------------- */

/* Found by measuring the live page rather than by reading the stylesheet:
   .behind-hero was still painting #f8fafc, a slate-tinted white, because this
   whole family hard-codes its surfaces instead of reading a token. It is the
   one block the first pass missed. */

body[data-skin="silver"] .behind-section {
  margin-bottom: var(--s-s7);
}

body[data-skin="silver"] .behind-hero {
  background: var(--s-paper-1);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
}

body[data-skin="silver"] .behind-hero h2 {
  font-family: var(--s-font-display);
  font-weight: var(--s-fw-bold);
  color: var(--s-ink-0);
  letter-spacing: -.01em;
}

body[data-skin="silver"] .behind-hero .behind-kicker {
  font-size: var(--s-fz-xs);
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-wide);
  color: var(--s-text-muted);
}

body[data-skin="silver"] .behind-hero p,
body[data-skin="silver"] .behind-excerpt {
  color: var(--s-text);
}

body[data-skin="silver"] .behind-grid {
  gap: var(--s-s5);
}

body[data-skin="silver"] .behind-card {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
}

body[data-skin="silver"] .behind-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--s-line-heavy);
}

body[data-skin="silver"] .behind-media {
  background: var(--s-paper-2);
}

body[data-skin="silver"] .behind-card:hover .behind-media img {
  transform: scale(1.02);
}

body[data-skin="silver"] .behind-title {
  font-family: var(--s-font-body);
  font-weight: var(--s-fw-semi);
  color: var(--s-ink-0);
}

body[data-skin="silver"] .behind-actions .btn {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  color: var(--s-ink-0);
}

body[data-skin="silver"] .behind-actions .btn:hover {
  background: var(--s-paper-2);
  border-color: var(--s-line-heavy);
  color: var(--s-ink-0);
}