/* ============================================================
   GALLERY DOCK — persistent filter dock + Three.js featured ring
   Ported from docs/gallery-filter-dock-prototype.html.
   Scope: body.gallery-modern-page (added via PHP). Tokens are
   namespaced (--gd-*) so they can't leak into the rest of the site.
   ============================================================ */

body.gallery-modern-page {
  --gd-bg-deep:    #060608;
  --gd-bg-card:    rgba(18, 19, 26, 0.85);
  --gd-bg-elev:    rgba(26, 27, 36, 0.95);
  --gd-bg-stone:   #0f1015;
  --gd-line:       rgba(212, 176, 96, 0.10);
  --gd-line-strong: rgba(212, 176, 96, 0.22);
  --gd-ink:        #d4d0c8;
  --gd-ink-soft:   #b0aca4;
  --gd-ink-mute:   #807c74;
  --gd-gold:       #d4b060;
  --gd-gold-soft:  #f0d080;
  --gd-gold-deep:  #a07030;
  --gd-gold-glow:  rgba(212, 176, 96, 0.32);

  --gd-display: 'Cinzel', 'Trajan Pro', serif;
  --gd-body:    'Cormorant Garamond', 'Garamond', serif;
  --gd-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --gd-t-fast: 160ms cubic-bezier(.2, .8, .2, 1);
  --gd-t-med:  340ms cubic-bezier(.2, .8, .2, 1);
}

/* ─── Layout: dock + grid ──────────────────────────────────────── */
.gallery-shell {
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: 32px;
  align-items: start;
}

/* ── DOCK ── */
.dock {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gd-line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26,27,36,0.6), rgba(15,16,21,0.92));
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(212,176,96,0.05);
}
.dock__head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--gd-line);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(212,176,96,0.06), transparent);
}
.dock__title {
  font-family: var(--gd-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-ink);
  display: flex; align-items: center; gap: 10px;
}
.dock__title::before { content: '◆'; color: var(--gd-gold); font-size: 11px; }
.dock__count-badge {
  font-family: var(--gd-mono); font-size: 10px; font-weight: 600;
  color: var(--gd-bg-deep); background: var(--gd-gold);
  padding: 3px 8px; border-radius: 999px; letter-spacing: 0.05em;
}
.dock__count-badge.is-zero { background: var(--gd-ink-mute); }

.dock__body { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.dock__body::-webkit-scrollbar { width: 6px; }
.dock__body::-webkit-scrollbar-thumb { background: var(--gd-line-strong); border-radius: 3px; }

/* Search at top of rail */
.dock-search {
  margin: 16px 20px;
  position: relative; display: flex; align-items: center;
  background: var(--gd-bg-stone); border: 1px solid var(--gd-line);
  border-radius: 10px; padding: 10px 12px;
  transition: border-color var(--gd-t-fast), box-shadow var(--gd-t-fast);
}
.dock-search:focus-within {
  border-color: var(--gd-gold); box-shadow: 0 0 0 3px rgba(212,176,96,0.10);
}
.dock-search svg { width: 15px; height: 15px; color: var(--gd-ink-mute); flex-shrink: 0; }
.dock-search input {
  border: none; background: transparent; outline: none; color: var(--gd-ink);
  font: 500 14px/1 var(--gd-body); flex: 1; padding: 0 10px; min-width: 0;
}
.dock-search input::placeholder { color: var(--gd-ink-mute); font-style: italic; }
.dock-search kbd {
  font-family: var(--gd-mono); font-size: 10px; color: var(--gd-ink-mute);
  border: 1px solid var(--gd-line-strong); padding: 2px 6px; border-radius: 4px;
}

/* Facet group (accordion) */
.facet { border-top: 1px solid var(--gd-line); }
.facet:first-of-type { border-top: none; }
.facet__head {
  width: 100%; background: transparent; border: none; text-align: left;
  padding: 14px 20px; display: flex; align-items: center; gap: 10px;
  font-family: var(--gd-display); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-soft);
  transition: color var(--gd-t-fast), background var(--gd-t-fast);
}
.facet__head:hover { color: var(--gd-ink); background: rgba(212,176,96,0.03); }
.facet__head .glyph { color: var(--gd-gold-deep); font-size: 12px; width: 14px; text-align: center; }
.facet__head .facet__active {
  margin-left: auto; font-family: var(--gd-mono); font-size: 10px;
  color: var(--gd-gold); letter-spacing: 0.04em; text-transform: none;
  opacity: 0; transition: opacity var(--gd-t-fast);
}
.facet.has-active .facet__head .facet__active { opacity: 1; }
.facet__head .chevron {
  margin-left: 8px; transition: transform var(--gd-t-med); color: var(--gd-ink-mute);
}
.facet.is-open .facet__head .facet__active { margin-left: auto; }
.facet.is-open .facet__head .chevron { transform: rotate(180deg); }
.facet:not(.has-active) .facet__head .chevron { margin-left: auto; }

.facet__panel {
  max-height: 0; overflow: hidden;
  transition: max-height var(--gd-t-med);
}
.facet.is-open .facet__panel { max-height: 420px; }
.facet__panel-inner { padding: 2px 12px 14px; }

/* inline filter for long lists */
.facet__filter {
  width: 100%; background: var(--gd-bg-stone); border: 1px solid var(--gd-line);
  border-radius: 8px; padding: 7px 10px; margin: 4px 0 8px; color: var(--gd-ink);
  font: 500 12.5px/1 var(--gd-body); outline: none;
}
.facet__filter:focus { border-color: var(--gd-gold); }
.facet__filter::placeholder { color: var(--gd-ink-mute); font-style: italic; }

.facet__options { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.facet__options::-webkit-scrollbar { width: 5px; }
.facet__options::-webkit-scrollbar-thumb { background: var(--gd-line-strong); border-radius: 3px; }

/* Single-select rows = radio behavior, but styled as elegant list */
.opt {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 10px;
  align-items: center; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; user-select: none;
  transition: background var(--gd-t-fast);
  border: 1px solid transparent;
  text-decoration: none;
}
.opt:hover { background: rgba(212,176,96,0.05); }
.opt.is-active { background: rgba(212,176,96,0.10); border-color: var(--gd-line-strong); }
.opt.is-disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; }
.opt.is-disabled:hover { background: transparent; }
.opt__mark {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--gd-line-strong);
  display: grid; place-items: center; transition: all var(--gd-t-fast);
}
.opt.is-active .opt__mark { border-color: var(--gd-gold); }
.opt__mark::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gd-gold); transform: scale(0); transition: transform var(--gd-t-fast);
}
.opt.is-active .opt__mark::after { transform: scale(1); }
.opt__label { font-size: 14px; color: var(--gd-ink); line-height: 1.2; }
.opt.is-active .opt__label { color: var(--gd-gold-soft); }
.opt__count {
  font-family: var(--gd-mono); font-size: 10px; color: var(--gd-ink-mute);
  background: rgba(255,255,255,0.03); padding: 2px 7px; border-radius: 999px;
}
.opt.is-active .opt__count { background: var(--gd-gold-glow); color: var(--gd-gold-soft); }
.opt--any .opt__label { font-style: italic; color: var(--gd-ink-mute); }
.opt--any.is-active .opt__label { color: var(--gd-gold-soft); font-style: normal; }

/* Sort lives in the dock too */
.dock-sort { padding: 14px 20px; border-top: 1px solid var(--gd-line); }
.dock-sort__label {
  font-family: var(--gd-display); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-soft);
  margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.dock-sort__label .glyph { color: var(--gd-gold-deep); font-size: 12px; width: 14px; text-align: center; }
.sort-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sort-seg button, .sort-seg a {
  background: var(--gd-bg-stone); border: 1px solid var(--gd-line);
  border-radius: 8px; padding: 8px 6px; font-family: var(--gd-mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gd-ink-mute); transition: all var(--gd-t-fast);
  text-align: center; text-decoration: none; cursor: pointer;
}
.sort-seg button:hover, .sort-seg a:hover { color: var(--gd-ink-soft); border-color: var(--gd-line-strong); }
.sort-seg button[aria-pressed="true"], .sort-seg a[aria-pressed="true"] {
  background: rgba(212,176,96,0.10); border-color: var(--gd-gold); color: var(--gd-gold-soft);
}

/* Sticky footer with clear-all */
.dock__foot {
  padding: 14px 20px; border-top: 1px solid var(--gd-line);
  background: linear-gradient(0deg, rgba(212,176,96,0.05), transparent);
  display: flex; gap: 10px; align-items: center;
}
.dock__foot .clear {
  flex: 1; background: transparent; border: 1px solid var(--gd-line-strong);
  border-radius: 999px; padding: 10px; font-family: var(--gd-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd-ink-soft);
  transition: all var(--gd-t-fast); text-align: center; text-decoration: none; display: block;
}
.dock__foot .clear:hover:not(:disabled):not(.is-disabled) { color: var(--gd-gold); border-color: var(--gd-gold); }
.dock__foot .clear:disabled, .dock__foot .clear.is-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ── RESULTS SIDE ── */
.results { min-width: 0; }
.results__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0 20px; border-bottom: 1px solid var(--gd-line); margin-bottom: 24px;
  flex-wrap: wrap;
}
.results__count { font-family: var(--gd-display); font-size: 18px; font-weight: 500; color: var(--gd-ink-soft); }
.results__count b { color: var(--gd-gold); font-weight: 700; font-size: 24px; margin-right: 4px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gd-bg-elev); border: 1px solid var(--gd-line-strong);
  color: var(--gd-ink); padding: 5px 8px 5px 12px; border-radius: 999px;
  font-size: 13px; transition: all var(--gd-t-fast); text-decoration: none;
}
.chip:hover { border-color: var(--gd-gold); }
.chip__k { font-family: var(--gd-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd-gold); }
.chip__x {
  width: 16px; height: 16px; display: grid; place-items: center;
  background: var(--gd-line-strong); border-radius: 50%; font-size: 10px; line-height: 1;
  transition: background var(--gd-t-fast);
}
.chip:hover .chip__x { background: var(--gd-gold); color: var(--gd-bg-deep); }
.mobile-filter-btn { display: none; }

/* ─── Featured ring (Three.js rotating reliquary) ──────────────── */
.featured {
  position: relative; z-index: 2;
  margin: 8px 0 40px;
  border: 1px solid var(--gd-line-strong); border-radius: 22px;
  background:
    radial-gradient(900px 340px at 50% -25%, rgba(212,176,96,0.10), transparent 62%),
    radial-gradient(600px 400px at 50% 120%, rgba(120,90,40,0.06), transparent 60%),
    linear-gradient(180deg, rgba(26,27,36,0.55), rgba(10,11,15,0.96));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,176,96,0.07);
}
.featured::before, .featured::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 4;
  border: 1px solid rgba(212,176,96,0.28);
}
.featured::before { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.featured::after  { top: 12px; right: 12px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }

.featured__head {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 28px 6px; position: relative; z-index: 4;
}
.featured__title {
  font-family: var(--gd-display); font-weight: 600; font-size: 16px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gd-ink);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
}
.featured__title::before {
  content: '✦'; color: var(--gd-gold); font-size: 13px;
  animation: gdFeatSigil 6s ease-in-out infinite;
}
@keyframes gdFeatSigil { 0%,100% { opacity: .65; transform: rotate(0); } 50% { opacity: 1; transform: rotate(180deg); } }
.featured__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gd-line-strong), transparent 70%); }
.featured__controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.featured__index {
  font-family: var(--gd-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gd-ink-mute);
  font-variant-numeric: tabular-nums;
}
.featured__index b { color: var(--gd-gold); font-weight: 600; }
.featured__play {
  position: relative; width: 36px; height: 36px; border-radius: 50%; padding: 0;
  background: rgba(6,6,8,0.5); border: 1px solid var(--gd-line-strong);
  color: var(--gd-ink-soft); display: grid; place-items: center;
  transition: color var(--gd-t-fast), border-color var(--gd-t-fast), background var(--gd-t-fast);
}
.featured__play:hover { color: var(--gd-gold-soft); border-color: var(--gd-gold); background: rgba(6,6,8,0.8); }
.featured__progress { position: absolute; inset: -1px; width: 38px; height: 38px; transform: rotate(-90deg); pointer-events: none; }
.featured__progress .track { fill: none; stroke: rgba(212,176,96,0.10); stroke-width: 1.5; }
.featured__progress .bar { fill: none; stroke: var(--gd-gold); stroke-width: 1.5; stroke-linecap: round; opacity: 0.9; transition: stroke-dashoffset 80ms linear; }
.featured__play:not(.is-playing) .featured__progress .bar { opacity: 0; }
.featured__play-icon { width: 11px; height: 11px; position: relative; color: currentColor; }
.featured__play:not(.is-playing) .featured__play-icon {
  width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor; margin-left: 3px;
}
.featured__play.is-playing .featured__play-icon::before,
.featured__play.is-playing .featured__play-icon::after {
  content: ''; position: absolute; top: 0; width: 3px; height: 11px; background: currentColor; border-radius: 1px;
}
.featured__play.is-playing .featured__play-icon::before { left: 1px; }
.featured__play.is-playing .featured__play-icon::after  { right: 1px; }

.featured__stage {
  position: relative; width: 100%; height: 380px;
  cursor: grab; touch-action: pan-y;
}
.featured__stage:active { cursor: grabbing; }
.featured__stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms ease; }
.featured.is-ready .featured__stage canvas { opacity: 1; }
.featured__stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 80% at 50% 36%, transparent 55%, rgba(6,6,8,0.5) 100%);
}
.featured__stage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(8,9,13,0.92));
}

.featured__loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; grid-auto-flow: column; z-index: 3; transition: opacity 400ms ease; }
.featured.is-ready .featured__loading { opacity: 0; pointer-events: none; }
.featured__loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--gd-gold); opacity: .35; animation: gdFeatPulse 1.1s ease-in-out infinite; }
.featured__loading span:nth-child(2) { animation-delay: .18s; }
.featured__loading span:nth-child(3) { animation-delay: .36s; }
@keyframes gdFeatPulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 10px var(--gd-gold-glow); } }

.featured__caption {
  position: absolute; left: 0; right: 0; bottom: 52px;
  text-align: center; pointer-events: none; z-index: 3; padding: 0 20px;
}
.cap-eyebrow {
  font-family: var(--gd-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(212,176,96,0.75); margin-bottom: 9px;
  opacity: 0; transform: translateY(8px);
}
.cap-title {
  font-family: var(--gd-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px);
  color: #f3efe6; margin: 0; letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 30px rgba(212,176,96,0.12);
  opacity: 0; transform: translateY(12px);
}
.cap-rule {
  display: block; width: 0; height: 1px; margin: 12px auto 11px;
  background: linear-gradient(90deg, transparent, var(--gd-gold), transparent);
  opacity: 0;
}
.cap-meta {
  display: inline-flex; gap: 11px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-family: var(--gd-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gd-ink-soft); opacity: 0; transform: translateY(8px);
}
.cap-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gd-gold-deep); }
.cap-meta .likes { color: var(--gd-gold-soft); }
.cap-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; pointer-events: auto;
  font-family: var(--gd-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gd-ink); background: rgba(6,6,8,0.55); border: 1px solid var(--gd-line-strong);
  padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); transition: border-color var(--gd-t-fast), color var(--gd-t-fast), background var(--gd-t-fast);
}
.cap-cta:hover { border-color: var(--gd-gold); color: var(--gd-gold-soft); background: rgba(6,6,8,0.85); }
.cap-cta svg { width: 11px; height: 11px; transition: transform var(--gd-t-fast); }
.cap-cta:hover svg { transform: translateX(3px); }
.featured__caption.is-in .cap-eyebrow { animation: gdCapIn .5s cubic-bezier(.2,.8,.2,1) .02s forwards; }
.featured__caption.is-in .cap-title   { animation: gdCapIn .6s cubic-bezier(.2,.8,.2,1) .08s forwards; }
.featured__caption.is-in .cap-rule    { animation: gdCapRule .6s cubic-bezier(.2,.8,.2,1) .18s forwards; }
.featured__caption.is-in .cap-meta    { animation: gdCapIn .5s cubic-bezier(.2,.8,.2,1) .26s forwards; }
.featured__caption.is-in .cap-cta     { animation: gdCapIn .5s cubic-bezier(.2,.8,.2,1) .34s forwards; }
@keyframes gdCapIn { to { opacity: 1; transform: none; } }
@keyframes gdCapRule { to { opacity: 1; width: 56px; } }

.featured__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(6,6,8,0.55); border: 1px solid var(--gd-line-strong);
  color: var(--gd-ink); display: grid; place-items: center; z-index: 4;
  backdrop-filter: blur(10px); transition: all var(--gd-t-fast);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}
.featured__nav svg { width: 17px; height: 17px; }
.featured__nav:hover { border-color: var(--gd-gold); color: var(--gd-gold-soft); background: rgba(6,6,8,0.88); box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 18px var(--gd-gold-glow); }
.featured__nav:active { transform: translateY(-50%) scale(0.93); }
.featured__nav--prev { left: 20px; }
.featured__nav--next { right: 20px; }

.featured__dots { display: flex; gap: 9px; justify-content: center; align-items: center; padding: 4px 0 20px; position: relative; z-index: 4; }
.featured__dot {
  width: 22px; height: 3px; border-radius: 999px; padding: 0;
  background: var(--gd-line-strong); border: none; transition: all var(--gd-t-med); cursor: pointer;
}
.featured__dot:hover { background: var(--gd-ink-mute); }
.featured__dot.is-active { width: 34px; background: linear-gradient(90deg, var(--gd-gold-deep), var(--gd-gold-soft)); box-shadow: 0 0 10px var(--gd-gold-glow); }

/* Graceful fallback if WebGL/Three.js unavailable */
.featured.is-fallback .featured__stage { display: flex; gap: 16px; overflow-x: auto; padding: 22px 28px; height: auto; cursor: default; scroll-snap-type: x mandatory; }
.featured.is-fallback .featured__stage::before,
.featured.is-fallback .featured__stage::after,
.featured.is-fallback .featured__nav,
.featured.is-fallback .featured__dots,
.featured.is-fallback .featured__loading,
.featured.is-fallback .featured__caption,
.featured.is-fallback .featured__play { display: none; }
.featured.is-fallback .fb-card {
  flex: 0 0 300px; scroll-snap-align: center; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gd-line-strong); background: var(--gd-bg-elev); position: relative;
  transition: transform var(--gd-t-med), border-color var(--gd-t-fast); text-decoration: none;
}
.featured.is-fallback .fb-card:hover { transform: translateY(-4px); border-color: var(--gd-gold); }
.featured.is-fallback .fb-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.featured.is-fallback .fb-card .fb-cap { padding: 13px 15px; font-family: var(--gd-display); font-size: 17px; color: var(--gd-ink); }

/* ─── Dock collapse toggle ─────────────────────────────────────── */
.dock__toggle {
  width: 26px; height: 26px; border-radius: 7px; padding: 0;
  background: transparent; border: 1px solid var(--gd-line-strong);
  color: var(--gd-ink-soft); display: grid; place-items: center;
  transition: all var(--gd-t-fast); margin-left: 10px; flex-shrink: 0; cursor: pointer;
}
.dock__toggle:hover { color: var(--gd-gold); border-color: var(--gd-gold); }
.dock__toggle svg { transition: transform var(--gd-t-med); }
.gallery-shell.dock-collapsed { grid-template-columns: 54px 1fr; }
.dock.is-collapsed .dock__body,
.dock.is-collapsed .dock__foot,
.dock.is-collapsed .dock__title,
.dock.is-collapsed .dock__count-badge { display: none; }
.dock.is-collapsed .dock__head {
  flex-direction: column; gap: 12px; padding: 14px 0;
  justify-content: center; border-bottom: none;
}
.dock.is-collapsed .dock__toggle svg { transform: rotate(180deg); }
.dock__reopen {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--gd-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gd-ink-soft);
  background: transparent; border: none; padding: 4px; display: none;
  transition: color var(--gd-t-fast); cursor: pointer;
}
.dock__reopen:hover { color: var(--gd-gold); }
.dock.is-collapsed .dock__reopen { display: block; }
.dock__reopen .badge {
  display: block; margin: 10px auto 0; writing-mode: horizontal-tb;
  font-family: var(--gd-mono); font-size: 9px; color: var(--gd-bg-deep);
  background: var(--gd-gold); padding: 2px 6px; border-radius: 999px;
}

/* ─── Mobile: dock collapses to a slide-in ─────────────────────── */
@media (max-width: 900px) {
  .gallery-shell { grid-template-columns: 1fr; }
  .mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gd-bg-elev); border: 1px solid var(--gd-line-strong);
    border-radius: 999px; padding: 10px 18px; color: var(--gd-ink);
    font-family: var(--gd-display); font-weight: 500; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  }
  .mobile-filter-btn .n { font-family: var(--gd-mono); font-size: 10px; background: var(--gd-gold); color: var(--gd-bg-deep); padding: 2px 7px; border-radius: 999px; }
  .dock {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw);
    max-height: none; border-radius: 0; z-index: 1000;
    transform: translateX(-100%); transition: transform var(--gd-t-med);
  }
  .dock.is-open { transform: translateX(0); }
  .dock-backdrop {
    position: fixed; inset: 0; background: rgba(6,8,10,0.7); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity var(--gd-t-med); z-index: 999;
  }
  .dock-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .featured__stage { height: 300px; }
  .featured__head { padding: 18px 18px 4px; gap: 12px; }
  .featured__nav { width: 40px; height: 40px; }
  .featured__nav--prev { left: 10px; } .featured__nav--next { right: 10px; }
}
@media (min-width: 901px) { .dock-backdrop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .featured__title::before { animation: none; }
  .featured__caption.is-in .cap-eyebrow,
  .featured__caption.is-in .cap-title,
  .featured__caption.is-in .cap-meta,
  .featured__caption.is-in .cap-cta { animation: none; opacity: 1; transform: none; }
  .featured__caption.is-in .cap-rule { animation: none; opacity: 1; width: 56px; }
}