/* Parham Pourdavood — Art Collection
   Loaded after style.css: reuses its tokens, base styles, theme toggle,
   .pill-link and .site-footer. */

/* ========================
   PAGE SHELL
   ======================== */
/* style.css locks the homepage to one screen on large displays and makes
   body a scroll container on mobile. This page always scrolls the viewport,
   which the sticky toolbar needs. */
html.art-page,
html.art-page body {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
/* Reserve the scrollbar's space so opening the lightbox doesn't shift the page */
html.art-page {
  scrollbar-gutter: stable;
}

/* 1440px wide at most: with four columns that keeps each tile near 320px,
   half the thumbnails' 640px, so they stay sharp on high-density screens. */
.art-wrap {
  --art-pad: clamp(16px, 3vw, 44px);
  flex: 1 0 auto;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--art-pad);
  position: relative;
  z-index: 1;
}

.art-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
}
.art-nav .theme-toggle {
  position: static;
  flex-shrink: 0;
}

/* Shared round icon button: back-to-top and the lightbox controls */
.art-icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.art-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--glow);
}
.art-icon-btn:focus-visible,
.art-shuffle:focus-visible,
.art-artist:focus-visible,
.art-clear:focus-visible,
.art-page .pill-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* The script hides elements with the hidden attribute; keep display rules from undoing it */
.art-page [hidden] {
  display: none !important;
}
/* .pill-link is styled for links; these make it work on <button> too */
button.pill-link {
  background: none;
  font-family: var(--sans);
  cursor: pointer;
}

/* ========================
   HEADER
   ======================== */
.art-head {
  padding: 30px 0 6px;
  text-align: center;
}
.art-title {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 6.5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  background: linear-gradient(
    135deg,
    var(--text) 0%,
    var(--accent) 45%,
    var(--accent-3) 55%,
    var(--text) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both, shimmer 10s linear infinite;
}
/* Second line of the title; opts out of the title's gradient fill */
.art-byline {
  display: block;
  margin-top: 0.2em;
  font-size: 0.4em;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-2);
  -webkit-text-fill-color: var(--text-2);
}
.art-desc {
  font-size: 0.95rem;
  color: var(--text-2);
  margin-top: 16px;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
/* One span per sentence, so a narrow screen breaks between sentences */
.art-desc span {
  display: inline-block;
}
/* "About" sits at the end of the description and opens a short note under it,
   so the header stays tight until someone asks for more. Its slot has no
   width, so the button hangs to the right and the description stays centred
   under the title. */
.art-desc .art-about-slot {
  width: 0;
  white-space: nowrap;
}
.art-about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -6px 0 -6px 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 100px;
  background: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-2);
  opacity: 0.75;
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.art-about-toggle:hover,
.art-about-toggle[aria-expanded="true"] {
  color: var(--accent);
  opacity: 1;
}
.art-about-toggle svg {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-about-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.art-about-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
/* The row goes from 0fr to 1fr, which animates the height without measuring it */
.art-about {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-about.is-open {
  grid-template-rows: 1fr;
}
.art-about-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.5s;
}
.art-about.is-open .art-about-inner {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease 0.12s, visibility 0s;
}
.art-about p {
  max-width: 33em;
  margin: 0 auto;
  padding: 12px 0 8px;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.42;
  color: var(--text);
  text-wrap: balance;
}
/* Attribution and removal contact; shown in the header and again in the lightbox */
.art-rights {
  font-size: 0.72rem;
  color: var(--text-2);
}
.art-rights span {
  display: inline-block;
}
.art-rights a {
  color: inherit;
}
.art-rights a:hover {
  color: var(--accent);
}
.art-head .art-rights {
  margin-top: 6px;
  font-size: 0.78rem;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
.art-lb-info .art-rights {
  margin-top: 14px;
}
/* Piece count, flanked by two hairlines */
.art-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.art-subtitle::before,
.art-subtitle::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent));
  opacity: 0.55;
}
.art-subtitle::after {
  transform: scaleX(-1);
}

/* ========================
   TOOLBAR — search + shuffle
   ======================== */
/* Scrolls away just before the toolbar sticks; tells the script when it has */
.art-tools-sentinel {
  height: 1px;
  margin-top: 20px;
}
.art-tools {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 calc(-1 * var(--art-pad));
  padding: 10px var(--art-pad);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.art-tools.is-stuck {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--border);
}
/* The toolbar gets out of the way while the visitor scrolls down the wall and
   returns as soon as they scroll up. The script adds and removes .is-hidden. */
.art-tools.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* Carries the bar's backdrop upward. Off-screen in most browsers; on iPhones
   whose Safari draws the page under the status bar, it keeps tiles from
   showing through above the bar. */
.art-tools.is-stuck::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
}

.art-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 16px;
  border-radius: 100px;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: var(--text-3);
  cursor: text;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition);
}
.art-search:hover {
  background: var(--surface-hover);
}
.art-search:focus-within {
  border-color: var(--accent);
  background: var(--surface-hover);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 20px var(--glow);
}
.art-search svg {
  flex-shrink: 0;
}
.art-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
}
.art-search input::placeholder {
  color: var(--text-3);
}
/* The page supplies its own clear button, styled the same in every browser */
.art-search input::-webkit-search-cancel-button,
.art-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
/* "/" shortcut hint */
.art-kbd {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--text-3);
}
.art-search:focus-within .art-kbd,
.art-search.has-value .art-kbd {
  display: none;
}
.art-search-clear {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.art-search.has-value .art-search-clear {
  display: inline-flex;
}
.art-search-clear:hover {
  transform: scale(1.12);
}

.art-shuffle {
  flex-shrink: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 100px;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.art-shuffle svg {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.art-shuffle:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--glow);
}
.art-shuffle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.art-shuffle[aria-pressed="true"] svg {
  transform: rotate(180deg);
}

.art-status {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-2);
}
.art-status:empty {
  display: none;
}
.art-status b {
  color: var(--accent);
  font-weight: 600;
}
.art-clear {
  margin-left: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ========================
   WALL — masonry columns built by the page script
   ======================== */
.art-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--art-gap, 18px);
  margin-top: 18px;
}
.art-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--art-gap, 18px);
}
.art-tile {
  margin: 0;
  min-width: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-tile.is-in {
  opacity: 1;
  transform: none;
}
.art-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
  box-shadow: 0 0 0 1px var(--border);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.art-thumb img.is-loaded {
  opacity: 1;
}
.art-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) {
  .art-tile:hover .art-thumb {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--accent), 0 10px 30px var(--glow-strong);
  }
  .art-tile:hover .art-thumb img {
    transform: scale(1.04);
  }
}
/* Marks pieces whose original post is a video */
.art-reel {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding-left: 1px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.5);
  color: #fff;
  pointer-events: none;
}
.art-label {
  padding: 8px 2px 0;
  min-width: 0;
}
.art-artist {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color var(--transition);
}
.art-artist:hover,
.art-tile:hover .art-artist {
  color: var(--accent);
}
.art-work {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--text-2);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrolled into range, this loads the next batch */
.art-more {
  height: 1px;
}
.art-end {
  display: none;
  padding: 48px 0 4px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--accent);
  opacity: 0.6;
}
.art-end.is-visible {
  display: block;
}

.art-empty {
  max-width: 520px;
  margin: 28px auto;
  padding: 48px 24px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-hover);
  color: var(--text-2);
  font-size: 0.9rem;
  text-align: center;
}
.art-empty-title {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--text);
}
.art-empty .pill-link {
  margin-top: 18px;
}

/* ========================
   BACK TO TOP
   ======================== */
.art-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.art-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.art-top.is-visible:hover {
  transform: translateY(-2px);
}

/* ========================
   FOOTER
   ======================== */
.art-page .site-footer {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  padding: 20px 24px;
  line-height: 1.7;
}
.art-page .site-footer a {
  color: var(--accent);
}

/* ========================
   LIGHTBOX
   ======================== */
/* The box reaches 160px past the top and bottom of the screen. iPhone Safari
   draws the page under its status bar and bottom toolbar, and a backdrop that
   stops at the screen edge leaves the wall showing through in those strips.
   Elsewhere the extra is simply off-screen. .art-lb-scroll is inset by the
   same amount, so the contents stay where they were. */
.art-lightbox {
  position: fixed;
  inset: -160px 0;
  z-index: 200;
  display: none;
  overflow: hidden;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.art-lightbox.open {
  display: block;
  animation: fadeIn 0.3s ease both;
}
/* Focus moves here when a piece opens; the box itself needs no ring */
.art-lightbox:focus {
  outline: none;
}
/* The piece itself, blurred out of recognition, tints the whole backdrop.
   There are two layers so the tint cross-fades from one piece to the next. */
.art-lb-ambient {
  position: absolute;
  inset: -12%;
  background: center / cover no-repeat;
  filter: blur(80px) saturate(1.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.art-lb-ambient.is-on {
  opacity: 0.38;
}
[data-theme="dark"] .art-lb-ambient.is-on {
  opacity: 0.5;
}
.art-lb-scroll {
  position: absolute;
  inset: 160px 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* Vertical scrolling is the browser's; sideways drags go to the slide strip */
  touch-action: pan-y;
}
.art-lb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(16px, 3vw, 28px) 8px;
}
.art-lb-pager {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The counter-side arrows are for phones only (see RESPONSIVE) */
.art-lb-step-top {
  display: none;
  width: 38px;
  height: 38px;
}
.art-lb-count {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
/* The stage takes whatever height is left between the top bar and the
   details below, and is a size container so the image can be sized from that
   room (see .art-lb-img). Without this a tall piece on a phone spilled over
   the bars above and below it. On very short screens the stage keeps a
   minimum height and the lightbox scrolls instead. */
.art-lb-stage {
  --stage-pad: clamp(16px, 7vw, 104px);
  position: relative;
  container-type: size;
  min-height: min(40vh, 280px);
}
/* A strip of three slides (previous, current, next) that the script slides
   sideways, following the finger on touch screens */
.art-lb-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.art-lb-track.is-settling {
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.art-lb-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--stage-pad);
}
.art-lb-prev,
.art-lb-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  margin-top: -22px;
}
.art-lb-prev {
  left: clamp(8px, 2vw, 28px);
}
.art-lb-next {
  right: clamp(8px, 2vw, 28px);
}
/* --w / --h are the thumbnail's pixel size, set by the script. The height is
   the smallest of: the stage's height, a hard cap, 1.6x the source (which
   only wide pieces and the few thumbnails under 640px wide come up against),
   and what the stage's width allows, each less the slide's padding. The
   first height line is for browsers without container units. */
.art-lb-img {
  display: block;
  width: auto;
  height: min(50vh, 680px, calc(var(--h, 320) * 1.6px), calc((100vw - 2 * var(--stage-pad)) * var(--h, 320) / var(--w, 320)));
  height: min(100cqh - 16px, 680px, calc(var(--h, 320) * 1.6px), calc((100cqw - 2 * var(--stage-pad)) * var(--h, 320) / var(--w, 320)));
  aspect-ratio: var(--w, 320) / var(--h, 320);
  border-radius: 12px;
  background: var(--border);
  box-shadow: 0 0 0 1px var(--border), 0 24px 70px rgba(0, 0, 0, 0.28);
  -webkit-user-drag: none;
  user-select: none;
}
/* Only the piece in view takes part in the open/close transition */
.art-lb-slide.is-current .art-lb-img {
  view-transition-name: art-piece;
}
.art-lb-info {
  padding: 18px 24px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  transition: opacity 0.25s ease;
}
/* Dims while the strip slides, then returns with the new piece's details */
.art-lb-info.is-changing {
  opacity: 0;
  transition-duration: 0.12s;
}
.art-lb-artist {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.art-lb-work {
  margin-top: 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.art-lb-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: 560px;
  margin: 8px auto 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.art-lb-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.art-lb-actions .pill-link {
  opacity: 0.85;
}
.art-lb-actions .pill-link.is-primary {
  background: var(--accent);
  color: #fff !important;
  opacity: 1;
}

/* The clicked tile grows into the lightbox image, and shrinks back on close */
::view-transition-group(art-piece) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 12px;
  overflow: clip;
}
::view-transition-old(art-piece),
::view-transition-new(art-piece) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 900px) {
  .art-nav {
    padding-top: 16px;
  }
  .art-head {
    padding-top: 22px;
  }
  /* Entrance animations are off on mobile, as on the homepage */
  .art-title,
  .art-desc,
  .art-head .art-rights,
  .art-subtitle {
    animation: none;
    opacity: 1;
  }
  /* 16px keeps iOS from zooming the page when the field is focused */
  .art-search input {
    font-size: 16px;
  }
  .art-kbd {
    display: none;
  }
  /* Nothing of the wall shows around an open piece (the script sets
     .art-viewing on <html> while the lightbox is open) */
  .art-viewing .art-wrap,
  .art-viewing .site-footer,
  .art-viewing .art-top {
    visibility: hidden;
  }
}

@media (max-width: 640px) {
  .art-desc {
    font-size: 0.9rem;
  }
  /* No room to hang beside a full-width line here, so it takes its place in the text */
  .art-desc .art-about-slot {
    width: auto;
  }
  /* A taller target for a thumb; the negative margin keeps the line where it was */
  .art-about-toggle {
    margin: -12px 0 -12px 2px;
    padding: 12px 10px;
  }
  .art-about p {
    font-size: 1.12rem;
  }
  /* Icon-only shuffle leaves the search field room to breathe */
  .art-shuffle {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .art-shuffle span {
    display: none;
  }
  .art-thumb {
    border-radius: 8px;
  }
  .art-artist {
    font-size: 0.74rem;
  }
  .art-work {
    font-size: 0.86rem;
  }
  /* On a phone the image takes nearly the full width, so arrows beside it
     would sit on top of the artwork. They move up next to the counter. */
  .art-lb-prev,
  .art-lb-next {
    display: none;
  }
  .art-lb-step-top {
    display: inline-flex;
  }
  .art-lb-stage {
    --stage-pad: 16px;
  }
  /* "All 14 pieces" without "from @name", so both buttons share one row and
     the image gets the height back */
  .art-lb-from {
    display: none;
  }
  .art-lb-info {
    padding-top: 14px;
  }
  .art-lb-artist {
    font-size: 1.45rem;
  }
  .art-lb-work {
    font-size: 1.05rem;
  }
}

/* Short screens (a phone on its side): keep the details compact */
@media (max-height: 560px) {
  .art-lb-caption {
    -webkit-line-clamp: 2;
  }
}

@media (hover: none) {
  .art-kbd {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-title,
  .art-desc,
  .art-head .art-rights,
  .art-subtitle {
    animation: none;
    opacity: 1;
  }
  .art-tile {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .art-thumb,
  .art-thumb img,
  .art-lb-track,
  .art-lb-info,
  .art-lb-ambient,
  .art-icon-btn,
  .art-shuffle,
  .art-shuffle svg,
  .art-about,
  .art-about-inner,
  .art-about-toggle svg {
    transition: none;
  }
  .art-lightbox.open {
    animation: none;
  }
}