/* ===========================================================================
   SILVER PRINT — Global chrome
   ---------------------------------------------------------------------------
   Desktop-first. Everything at 900px and below lives in css/mobile.css.

   Every selector is prefixed with body[data-skin="silver"]. That is not just
   scoping hygiene: assets/css/footer-redesign.css is linked from
   inc/footer.php, i.e. AFTER this file in document order, and it hardens its
   own colours with .sfd .sfd-h (0-2-0) style selectors. The prefix lifts us
   to 0-2-1 or higher so specificity alone wins, with no forced declarations.

   THIS FILE CONTAINS NO FORCED DECLARATIONS AT ALL. Outside
   css/search-page.css the whole skin uses exactly three, each cancelling an
   existing forced declaration or an inline style, and none of them is here:
     1. body background under 600px   — css/mobile.css, counters style.css
     2. .search-hero-banner on phones — css/mobile.css, counters index-page.css
     3. .info-panel on contact.php    — css/contact-page.css, counters an
        inline style written by PHP from an admin setting
   css/search-page.css is the documented exception; its own header explains
   why it has to answer in kind.

   Nothing in this file introduces a hue. Every colour resolves through a
   token from css/tokens.css, and every token there is neutral.
   =========================================================================== */

/* ---- 1. Base ------------------------------------------------------------ */

body[data-skin="silver"] {
  background: var(--s-bg);
  color: var(--s-text);
  font-family: var(--s-font-body);
  font-size: var(--s-fz-base);
  line-height: var(--s-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-skin="silver"] ::selection {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
}

body[data-skin="silver"] .container {
  max-width: var(--s-maxw);
  padding-inline: var(--s-gutter);
}

body[data-skin="silver"] h1,
body[data-skin="silver"] h2,
body[data-skin="silver"] h3,
body[data-skin="silver"] h4 {
  font-family: var(--s-font-display);
  color: var(--s-text-head);
  line-height: var(--s-lh-snug);
  letter-spacing: -.01em;
  text-wrap: pretty;
}

body[data-skin="silver"] h1 {
  font-weight: var(--s-fw-black);
  line-height: var(--s-lh-tight);
}

/* Links carry an underline rather than a hue, because there is no hue to
   carry. The offset is what makes it read as a link and not as emphasis. */
body[data-skin="silver"] a {
  color: var(--s-ink-0);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--s-dur-fast) var(--s-ease),
              text-decoration-thickness var(--s-dur-fast) var(--s-ease);
}

body[data-skin="silver"] a:hover {
  color: var(--s-ink-1);
  text-decoration-thickness: 2px;
}

/* Structural links — nav items, tiles, cards, buttons — are not body copy
   and must not sprout an underline. */
body[data-skin="silver"] .nav-link,
body[data-skin="silver"] .brand a,
body[data-skin="silver"] .gallery-tile,
body[data-skin="silver"] .feed-tile,
body[data-skin="silver"] .feat-card,
body[data-skin="silver"] .btn,
body[data-skin="silver"] .chip,
body[data-skin="silver"] .tag-pill,
body[data-skin="silver"] .footer-link,
body[data-skin="silver"] .footer-logo-wrap {
  text-decoration: none;
}

/* THE focus ring. style.css:~700 sets a blue one on every focusable element;
   this replaces it everywhere in one rule. Two pixels of ink with two pixels
   of paper behind, so it stays visible on white AND on a photograph. */
body[data-skin="silver"] :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--s-ring);
  outline-offset: var(--s-ring-offset);
  border-radius: 0;
}

body[data-skin="silver"] .skip-link {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border-radius: 0;
  box-shadow: var(--s-sh-2);
  font-weight: var(--s-fw-semi);
}

body[data-skin="silver"] hr {
  border: 0;
  height: 1px;
  background: var(--s-line-strong);
}

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


/* ---- 2. Header ---------------------------------------------------------- */

body[data-skin="silver"] .header-wrap {
  background: var(--s-paper-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--s-line);
  box-shadow: none;
  height: var(--s-header-h);
}

body[data-skin="silver"] .header {
  max-width: var(--s-maxw);
  padding-inline: var(--s-gutter);
}

/* The manifest points the brand mark at logo/logofot.png — 31KB instead of
   the 902KB original. It is a bright chromatic gradient, so it is flattened
   to solid ink here. Transparency survives the filter; only visible pixels
   go black. This is why the skin needs no new logo asset. */
body[data-skin="silver"] .brand-logo-img {
  filter: grayscale(1) brightness(0);
  height: 30px;
  max-width: 170px;
}

body[data-skin="silver"] .brand-dot {
  background: var(--s-ink-0);
  border-radius: 0;
}

body[data-skin="silver"] .brand h1,
body[data-skin="silver"] .brand a > span:not(.brand-dot) {
  font-family: var(--s-font-display);
  font-weight: var(--s-fw-black);
  letter-spacing: .04em;
  color: var(--s-ink-0);
}

body[data-skin="silver"] .nav {
  gap: var(--s-s6);
}

body[data-skin="silver"] .nav-link {
  font-family: var(--s-font-body);
  font-size: var(--s-fz-sm);
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-mid);
  color: var(--s-text);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}

body[data-skin="silver"] .nav-link:hover {
  color: var(--s-ink-0);
  border-bottom-color: var(--s-line-strong);
}

body[data-skin="silver"] .nav-link.active {
  color: var(--s-ink-0);
  border-bottom-color: var(--s-ink-0);
}

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

body[data-skin="silver"] .nav-link--lang {
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-wide);
}

body[data-skin="silver"] .menu-btn .icon-bar {
  background: var(--s-ink-0);
  border-radius: 0;
}


/* ---- 3. Buttons --------------------------------------------------------- */

body[data-skin="silver"] .btn {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border: 1px solid var(--s-ink-0);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--s-font-body);
  font-weight: var(--s-fw-semi);
  letter-spacing: .01em;
  transition: background var(--s-dur-fast) var(--s-ease),
              border-color var(--s-dur-fast) var(--s-ease),
              color var(--s-dur-fast) var(--s-ease);
}

body[data-skin="silver"] .btn:hover {
  background: var(--s-ink-1);
  border-color: var(--s-ink-1);
  color: var(--s-paper-0);
  box-shadow: none;
  transform: none;
}

/* The secondary button carries no fill at all. Its hover signal is the
   border going from one pixel to two, plus the paper stepping down a shade —
   geometry and value, never hue. */
body[data-skin="silver"] .btn.light {
  background: var(--s-paper-0);
  color: var(--s-ink-0);
  border: 1px solid var(--s-line-strong);
}

body[data-skin="silver"] .btn.light:hover {
  background: var(--s-paper-2);
  color: var(--s-ink-0);
  border-width: 2px;
  padding-block: calc(.55rem - 1px);
  padding-inline: calc(1.2rem - 1px);
}

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

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

body[data-skin="silver"] .btn.sm {
  font-size: var(--s-fz-sm);
}


/* ---- 4. Forms ----------------------------------------------------------- */

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

body[data-skin="silver"] .form-input,
body[data-skin="silver"] .form-textarea,
body[data-skin="silver"] .modern-select,
body[data-skin="silver"] .search-main-input {
  background: var(--s-paper-2);
  color: var(--s-ink-0);
  border: 1px solid var(--s-line);
  border-radius: 0;
  font-family: var(--s-font-body);
  box-shadow: none;
  transition: background var(--s-dur-fast) var(--s-ease),
              border-color var(--s-dur-fast) var(--s-ease);
}

body[data-skin="silver"] .form-input:hover,
body[data-skin="silver"] .form-textarea:hover,
body[data-skin="silver"] .modern-select:hover {
  border-color: var(--s-line-strong);
}

body[data-skin="silver"] .form-input:focus,
body[data-skin="silver"] .form-textarea:focus {
  background: var(--s-paper-0);
  border-color: var(--s-line-strong);
  box-shadow: none;
  outline: var(--s-ring);
  outline-offset: var(--s-ring-offset);
}

body[data-skin="silver"] .search-btn-hero {
  background: var(--s-ink-0);
  color: var(--s-paper-0);
  border: 1px solid var(--s-ink-0);
  border-radius: 0;
  box-shadow: none;
  font-weight: var(--s-fw-semi);
}

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

body[data-skin="silver"] .search-wrapper,
body[data-skin="silver"] .hero-search {
  background: var(--s-paper-0);
  border-radius: 0;
  box-shadow: none;
}


/* ---- 5. Gallery grid and tile ------------------------------------------- */

/* The white between the tiles is part of the design, not an economy: at 4px
   the grid reads as a contact sheet, at 24px each photograph gets its own
   wall. Column count is left exactly as style.css sets it. */
body[data-skin="silver"] .gallery-grid {
  gap: var(--s-s5);
}

/* inc/partials/gallery-tile.php emits .tile-meta on every skin and
   assets/css/style.css:711 hides it visually. Noir promotes it to an overlay
   caption on top of the photograph; this skin puts it on its own line BELOW
   the frame instead, the way a print is captioned on a gallery wall. That
   means the tile stops being a fixed 2/3 box and becomes a column: the frame
   keeps the ratio, the caption sits under it. */
body[data-skin="silver"] .gallery-tile {
  position: relative;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-s3);
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

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

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

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

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

/* Undo every one of the nine declarations that hide it, explicitly, so a
   later change to the base rule cannot half-apply. */
body[data-skin="silver"] .gallery-tile .tile-meta {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-s1);
}

body[data-skin="silver"] .tile-title {
  font-family: var(--s-font-body);
  font-size: .875rem;
  font-weight: var(--s-fw-semi);
  line-height: var(--s-lh-snug);
  color: var(--s-ink-0);
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-skin="silver"] .tile-tags {
  font-size: .75rem;
  font-weight: var(--s-fw-reg);
  line-height: var(--s-lh-snug);
  color: var(--s-text-muted);
  text-align: start;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Legacy overlay markup — still styled so that anything emitting it does not
   render as an unstyled white slab. */
body[data-skin="silver"] .tile-overlay {
  background: var(--s-paper-0);
  border-top: 1px solid var(--s-line-strong);
  border-radius: 0;
}


/* ---- 6. Feed and featured tiles ----------------------------------------- */

body[data-skin="silver"] .feed-tile,
body[data-skin="silver"] .feat-card {
  background: var(--s-paper-2);
  border: 1px solid var(--s-line);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--s-dur-fast) var(--s-ease);
}

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

/* style.css gives this a warm-to-slate gradient. Flat paper instead. */
body[data-skin="silver"] .feed-text-content {
  background: var(--s-paper-1);
  color: var(--s-text);
  border-radius: 0;
}

body[data-skin="silver"] .feed-overlay-text {
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  color: var(--s-paper-0);
}

body[data-skin="silver"] .featured-section {
  border-radius: 0;
}


/* ---- 7. Section titles -------------------------------------------------- */

/* style.css paints the heading with a gradient and clips it to the text.
   Ink, and only ink. background-clip is reset too, because leaving it as
   `text` with a solid background would render the heading invisible. */
body[data-skin="silver"] .modern-section-title h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--s-ink-0);
  font-family: var(--s-font-display);
  font-weight: var(--s-fw-bold);
  letter-spacing: -.01em;
}

body[data-skin="silver"] .modern-section-title {
  border-bottom: 1px solid var(--s-line-strong);
  padding-bottom: var(--s-s4);
}


/* ---- 8. Chips, tags, copy box ------------------------------------------- */

body[data-skin="silver"] .chip,
body[data-skin="silver"] .tag-pill {
  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);
  transition: background var(--s-dur-fast) var(--s-ease),
              color var(--s-dur-fast) var(--s-ease);
}

body[data-skin="silver"] .chip:hover,
body[data-skin="silver"] .tag-pill:hover {
  background: var(--s-paper-2);
  color: var(--s-ink-0);
  border-color: var(--s-line-heavy);
  transform: none;
}

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

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

body[data-skin="silver"] .copy-box code {
  font-family: var(--s-font-mono);
  color: var(--s-ink-0);
  background: transparent;
}

body[data-skin="silver"] .copy-icon,
body[data-skin="silver"] .copy-msg {
  color: var(--s-text-muted);
}

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


/* ---- 9. Colour-discovery strip ------------------------------------------ */

/* The dots here are a colour PICKER: their fill is the thing being chosen,
   so it stays. Only the chrome around them turns monochrome. This is the
   same principle as the swatch grid on search.php. */
body[data-skin="silver"] .color-discovery {
  background: var(--s-paper-1);
  border-block: 1px solid var(--s-line);
  border-radius: 0;
}

body[data-skin="silver"] .color-discovery::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent);
}

body[data-skin="silver"] .color-discovery-heading {
  font-family: var(--s-font-display);
  color: var(--s-ink-0);
}

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

body[data-skin="silver"] .color-chip-label {
  color: var(--s-text-muted);
  font-size: var(--s-fz-xs);
  letter-spacing: var(--s-tracking-mid);
}

body[data-skin="silver"] .color-chip-dot {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

body[data-skin="silver"] .color-chip--white .color-chip-dot {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .22);
}


/* ---- 10. Legacy footer (assets/css/style.css) --------------------------- */

body[data-skin="silver"] .footer {
  background: var(--s-ink-bg);
  color: var(--s-on-ink-muted);
  border-top: 0;
}

body[data-skin="silver"] .footer-logo-img {
  filter: grayscale(1) brightness(0) invert(1);
}

body[data-skin="silver"] .footer-link {
  color: var(--s-on-ink-muted);
}

body[data-skin="silver"] .footer-link:hover {
  color: var(--s-on-ink);
}

body[data-skin="silver"] .footer-dot {
  background: var(--s-on-ink-dim);
}

body[data-skin="silver"] .footer-credit,
body[data-skin="silver"] .footer-credit a {
  color: var(--s-on-ink-dim);
}

body[data-skin="silver"] .footer-credit a:hover {
  color: var(--s-on-ink);
}


/* ---- 11. Site footer, .sfd (assets/css/footer-redesign.css) ------------- */

/* That file is linked from inc/footer.php, i.e. AFTER this one, and it
   repeats its colours a second time through .sfd .sfd-h style selectors
   specifically so a skin cannot win with a single-class rule. Because every
   selector here starts with body[data-skin="silver"], each of these is at
   least 0-2-1 against its 0-2-0, and specificity settles it without a single
   forced declaration. The palette being replaced is warm gold on brown. */

body[data-skin="silver"] .sfd {
  background: var(--s-ink-bg);
  color: var(--s-on-ink-muted);
  border-top: 0;
}

body[data-skin="silver"] .sfd-bg,
body[data-skin="silver"] .sfd-art {
  display: none;
}

body[data-skin="silver"] .sfd-grid > .sfd-col + .sfd-col:not(.sfd-col--quick) {
  border-inline-start: 1px solid var(--s-line-on-ink);
}

body[data-skin="silver"] .sfd .sfd-h {
  color: var(--s-on-ink);
  font-family: var(--s-font-body);
  font-size: var(--s-fz-xs);
  font-weight: var(--s-fw-semi);
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
}

body[data-skin="silver"] .sfd .sfd-list a,
body[data-skin="silver"] .sfd .sfd-quick a {
  color: var(--s-on-ink-muted);
  text-decoration: none;
}

body[data-skin="silver"] .sfd .sfd-list a:hover,
body[data-skin="silver"] .sfd .sfd-quick a:hover {
  color: var(--s-on-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-skin="silver"] .sfd .sfd-list a:focus-visible,
body[data-skin="silver"] .sfd .sfd-quick a:focus-visible,
body[data-skin="silver"] .sfd .sfd-logo-link:focus-visible,
body[data-skin="silver"] .sfd .sfd-social a:focus-visible {
  outline: 2px solid var(--s-paper-0);
  outline-offset: var(--s-ring-offset);
  color: var(--s-on-ink);
}

body[data-skin="silver"] .sfd .sfd-disabled,
body[data-skin="silver"] .sfd .sfd-quick-disabled {
  color: var(--s-on-ink-dim);
}

body[data-skin="silver"] .sfd .sfd-tagline {
  color: var(--s-on-ink-muted);
  max-width: 34ch;
}

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

/* The footer wordmark is the same bright gradient file as the header mark;
   inverted to paper-white here so it reads on the ink band. */
body[data-skin="silver"] .sfd .sfd-logo {
  filter: grayscale(1) brightness(0) invert(1);
}

body[data-skin="silver"] .sfd .sfd-social a,
body[data-skin="silver"] .sfd .sfd-qi {
  color: var(--s-on-ink-muted);
}

body[data-skin="silver"] .sfd .sfd-social a {
  border: 1px solid var(--s-line-on-ink-strong);
  border-radius: 0;
}

body[data-skin="silver"] .sfd .sfd-social a:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--s-on-ink);
  border-color: var(--s-paper-0);
}

body[data-skin="silver"] .sfd .sfd-col--quick {
  border: 1px solid var(--s-line-on-ink-strong);
  border-radius: 0;
}

body[data-skin="silver"] .sfd .sfd-quick > li + li {
  border-top: 1px solid var(--s-line-on-ink);
}

body[data-skin="silver"] .sfd .sfd-quick-disabled .sfd-qi {
  color: rgba(255, 255, 255, .30);
}

body[data-skin="silver"] .sfd .sfd-quick a::after {
  color: var(--s-on-ink-muted);
}

body[data-skin="silver"] .sfd .sfd-base {
  border-top: 1px solid var(--s-line-on-ink);
}


/* ---- 12. Colour-search header, .csh (same file) ------------------------- */

/* A cream card deck on a warm background in the base sheet. The swatches
   inside it are the control being operated, so their fills survive; the
   frame, the type and the buttons go monochrome. */

body[data-skin="silver"] .csh {
  background: var(--s-paper-1);
  border-block: 1px solid var(--s-line);
}

body[data-skin="silver"] .csh-frame {
  border-color: var(--s-line-strong);
  border-radius: 0;
}

body[data-skin="silver"] .csh-corner {
  color: var(--s-ink-3);
}

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

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

/* The card is an <a>, and the label inside it is a bare <span>. If anything
   ever stops the .csh-label rule from landing — a half-loaded stylesheet, a
   cached older global.css — the span falls back to inheriting the link
   colour, and the browser default is blue for unvisited and purple for
   visited. That is what "the colours are trampled" looks like: twelve labels
   in a scatter of blues and purples that reads, wrongly, like each word is
   painted in the colour it names. Setting the colour on the card as well
   means the span inherits ink no matter which of the two rules survives. */
body[data-skin="silver"] .csh-card {
  background: var(--s-paper-0);
  border: 1px solid var(--s-line-strong);
  border-radius: 0;
  box-shadow: none;
  color: var(--s-ink-0);
}

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

body[data-skin="silver"] .csh-card:focus-visible,
body[data-skin="silver"] .csh-cta:focus-visible {
  outline: var(--s-ring);
  outline-offset: var(--s-ring-offset);
}

/* The swatch shows a representative photograph, so its own background is
   only what sits behind that image while it loads. The base leaves it at a
   warm off-white (245,245,240) — the one non-neutral value still reaching
   the page from outside the skin. Measured on the live site. */
body[data-skin="silver"] .csh-swatch,
body[data-skin="silver"] .csh-swatch--solid {
  background-color: var(--s-paper-2);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

body[data-skin="silver"] .csh-label {
  color: var(--s-ink-0);
  font-size: var(--s-fz-sm);
}

body[data-skin="silver"] .csh-radio {
  border: 1.5px solid var(--s-line-heavy);
  border-radius: 0;
}

body[data-skin="silver"] .csh-cta {
  background: var(--s-ink-0);
  border: 1px solid var(--s-ink-0);
  color: var(--s-paper-0);
  border-radius: 0;
  box-shadow: none;
  font-weight: var(--s-fw-semi);
}

body[data-skin="silver"] .csh-cta:hover {
  background: var(--s-ink-1);
  border-color: var(--s-ink-1);
  box-shadow: none;
}

body[data-skin="silver"] .csh-cta-icon {
  color: currentColor;
}


/* ---- 13. Motion and print ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body[data-skin="silver"] *,
  body[data-skin="silver"] *::before,
  body[data-skin="silver"] *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
  body[data-skin="silver"] .gallery-tile:hover img { transform: none; }
}

/* The skin is already ink on paper, so printing is close to free. What is
   left is dropping the chrome that has no meaning on a sheet of paper. */
@media print {
  body[data-skin="silver"] .header-wrap,
  body[data-skin="silver"] .sfd,
  body[data-skin="silver"] .csh,
  body[data-skin="silver"] .footer,
  body[data-skin="silver"] .color-discovery,
  body[data-skin="silver"] .skip-link { display: none; }

  body[data-skin="silver"] { padding-top: 0; }
  body[data-skin="silver"] .gallery-tile { break-inside: avoid; }
}