:root {
  --pd-blue: #2457ed;
  --pd-blue-soft: #edf2ff;
  --pd-bg: #f3f5f8;
  --pd-surface: #ffffff;
  --pd-ink: #121824;
  --pd-muted: #70798b;
  --pd-line: #e2e6ed;
  --pd-orange: #ef8e2f;
}

/* Immersive mobile featured work: larger canvas, complete portrait framing, clearer story card. */
@media (max-width: 760px) {
  .hero {
    width: 100% !important;
    height: clamp(390px, 67vh, 440px) !important;
    min-height: 390px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
    padding: 0 !important;
    border: 1px solid #dbe3d6 !important;
    border-radius: 20px !important;
    background: #dfe5e1 !important;
    box-shadow: 0 20px 50px #1d2b2330 !important;
  }

  .hero-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    background-image: var(--hero-image) !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero-art::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -18px;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: blur(20px) saturate(.82) brightness(.72);
    opacity: .9;
    transform: scale(1.1);
  }

  .hero-image {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 19px !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 14px 28px #0f171044);
  }

  .hero-copy {
    display: none !important;
  }

  .hero::after {
    inset: 58% 0 0 !important;
    border-radius: 0 0 19px 19px;
  }
}

/* Desktop recommendation rail uses vertical panels; mobile keeps the requested parallel layout. */
@media (min-width: 1201px) {
  body #recommendations.recommendations {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 28px !important;
  }
  body #recommendations > .recommend-panel {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Lenscape 2.0 guide cards use an editorial layout instead of photo overlays. */
.gallery.guide-gallery {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  align-items: start;
}

/* Keep parallel recommendation headings compact and readable on narrow screens. */
@media (max-width: 760px) {
  body #recommendations .recommend-head { gap: 5px !important; }
  body #recommendations .recommend-head h2 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    letter-spacing: -.5px !important;
  }
  body #recommendations .ranking-more { flex: 0 0 auto; font-size: 9px !important; }
}

/* Keep guide-list covers compact; guide-detail media remains immersive. */
.gallery.guide-gallery {
  grid-auto-rows: auto !important;
}

.gallery.guide-gallery .guide-card {
  grid-template-columns: minmax(210px, .85fr) minmax(0, 1.15fr) !important;
  grid-template-rows: minmax(300px, auto) !important;
  min-height: 300px !important;
}

@media (max-width: 760px) {
  .gallery.guide-gallery .guide-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: 220px auto !important;
    min-height: 0 !important;
    border-radius: 18px !important;
  }
}

.gallery .guide-card {
  display: grid;
  grid-template-rows: minmax(250px, 1.08fr) auto;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #dfe6db;
  border-radius: 22px !important;
  background: #fff;
  box-shadow: 0 18px 42px #26322214 !important;
  color: #172019;
}

.gallery .guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px #26322220 !important;
}

.guide-card-cover {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #e6ece3;
}

.gallery .guide-card-cover img {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
  transition: transform .45s ease;
}

.gallery .guide-card:hover .guide-card-cover img {
  transform: scale(1.035);
}

.guide-type-badge,
.guide-image-count {
  position: absolute;
  z-index: 2;
  top: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  backdrop-filter: blur(10px);
}

.guide-type-badge {
  left: 16px;
  background: #d9f06fe8;
  color: #1c2918;
}

.guide-image-count {
  right: 16px;
  background: #132019d9;
  color: #fff;
}

.guide-card-content {
  display: grid;
  gap: 12px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #fff, #fbfcf9);
}

.guide-card-kicker {
  margin: 0;
  color: #83907f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.guide-card-content h3 {
  margin: 0;
  color: #172019;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -.04em;
}

.guide-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guide-card-facts span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #f0f4ec;
}

.guide-card-facts small {
  color: #879183;
  font-size: 9px;
}

.guide-card-facts b {
  overflow: hidden;
  color: #344030;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-card-summary {
  display: -webkit-box;
  min-height: 42px;
  overflow: hidden;
  margin: 0;
  color: #657061;
  font-size: 12px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guide-card-content footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid #e8ece5;
}

.guide-author {
  display: grid;
  grid-template-columns: 30px auto;
  min-width: 0;
  color: #243020;
  text-decoration: none;
}

.guide-author > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e6ecdf;
  font-size: 11px;
  font-weight: 800;
}

.guide-author b,
.guide-author small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-author b { font-size: 11px; }
.guide-author small { color: #899286; font-size: 9px; }

.guide-card .card-buttons {
  display: flex !important;
  gap: 6px;
}

.guide-card .like,
.guide-card .save-button {
  position: static !important;
  min-width: 36px;
  height: 32px;
  border: 1px solid #dfe5db !important;
  background: #fff !important;
  color: #4e594b !important;
}

@media (max-width: 760px) {
  .gallery.guide-gallery {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gallery .guide-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-template-rows: 230px auto;
    min-height: 0;
    border-radius: 18px !important;
  }

  .guide-card-content {
    gap: 10px;
    padding: 18px 17px 16px;
  }

  .guide-card-content h3 { font-size: 23px; }
  .guide-card-facts { gap: 6px; }
  .guide-card-facts span { padding: 8px; }
  .guide-card-summary { font-size: 11px; }
}

.recommendation-skeleton {
  border: 0 !important;
  background: linear-gradient(100deg, #e8ede5 20%, #f5f7f2 38%, #e8ede5 56%) !important;
  background-size: 220% 100% !important;
  animation: recommendation-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}
@keyframes recommendation-shimmer { to { background-position-x: -220%; } }

/* Mobile legibility and contrast improvements from the performance audit. */
@media (max-width: 760px) {
  #recommendations .recommend-head .eyebrow { color: #596273 !important; font-size: 10px !important; }
  #recommendations .card-overlay span,
  .gallery .card-overlay span { color: #596273 !important; font-size: 12px !important; }
  #recommendations .ranking-more,
  .page-summary { font-size: 12px !important; }
  .hero .eyebrow { font-size: 11px !important; }
  .mobile-nav a span { font-size: 11px !important; }
}

/* Responsive interaction polish and accessibility-friendly motion. */
button, a, .card, .recommend-card { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.98); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(47, 99, 246, .34); outline-offset: 2px; }
img { transition: opacity .2s ease; }
img:not([src]), img[src=""] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Gallery-like recommendation frames: preserve the complete photograph while
   using a quiet, image-derived backdrop instead of flat empty side gutters. */
.recommend-media { display: contents; }
@media (max-width: 760px) {
  .community-tab { min-height: 58px !important; }
  .community-switcher { top: 64px !important; margin-bottom: 16px !important; }
  .hero {
    height: clamp(330px, 54vw, 390px) !important;
    min-height: 330px !important;
  }
  #recommendations .recommend-media {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    height: 172px;
    overflow: hidden;
    background: #e4e9e2;
  }
  #recommendations .recommend-media::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -14px;
    background-image: var(--recommend-image);
    background-position: center;
    background-size: cover;
    filter: blur(17px) saturate(.78) brightness(.86);
    opacity: .72;
    transform: scale(1.12);
  }
  #recommendations .recommend-media img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 172px !important;
    padding: 5px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: drop-shadow(0 8px 16px rgba(18, 28, 22, .2));
  }
  #recommendations .card-overlay > div:first-child {
    min-width: 0;
    max-width: calc(100% - 64px);
  }
  #recommendations .card-overlay p,
  #recommendations .card-overlay span { max-width: 100% !important; }
}

/* Search should feel like a focused command surface, not an invisible overlay. */
.search-panel { z-index: 12 !important; padding: 12px max(5vw, 24px) 14px !important; background: rgba(252, 253, 251, .96) !important; box-shadow: 0 18px 38px rgba(22, 31, 24,.12) !important; backdrop-filter: blur(16px); pointer-events: none; visibility: hidden; }
.search-panel.show { pointer-events: auto; visibility: visible; }
.search-field { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 7px !important; max-width: 760px !important; padding: 6px 7px 6px 13px !important; border: 1px solid #dfe5dc; border-radius: 14px !important; background: #f4f7f1 !important; box-shadow: inset 0 1px 0 #fff; }
.search-field input { min-width: 0; height: 40px !important; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer; }
.search-field button[hidden] { display: none !important; }
.search-clear { background: transparent !important; color: #6d786a; font-size: 20px; }
.search-submit { min-width: 56px !important; background: #1c211d !important; color: #fff; font: 700 12px inherit; }
.search-submit:disabled { cursor: wait; opacity: .7; }
.search-close { background: #e8eee5 !important; color: #586354; font-size: 20px; }
.search-field button:hover { filter: brightness(.96); }
.search-field button:focus-visible { outline: 3px solid rgba(78, 112, 246, .3); outline-offset: 2px; }
.search-result-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 4px 0 18px; padding: 16px 18px; border: 1px solid #dfe5dc; border-radius: 15px; background: linear-gradient(120deg, #f8faf6, #f1f5eb); }
.search-result-banner[hidden] { display: none !important; }
.search-result-banner > div { display: grid; min-width: 0; gap: 3px; }
.search-result-banner span { color: #879181; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.search-result-banner strong { overflow: hidden; color: #263025; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-banner small { color: #717c6e; font-size: 11px; }
.search-result-banner button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid #d3dccf; border-radius: 10px; background: #fff; color: #465242; font: 700 11px inherit; cursor: pointer; }
.search-result-banner button:hover { border-color: #a9bd9f; background: #fbfdf8; }
@media (max-width: 520px) {
  .search-panel { padding: 9px 12px 11px !important; }
  .search-field { gap: 4px !important; padding-left: 10px !important; }
  .search-field > span { font-size: 18px !important; }
  .search-field button { min-width: 36px; padding: 0 8px; }
  .search-submit { min-width: 52px !important; }
  .search-result-banner { align-items: stretch; margin-top: 0; padding: 14px; }
  .search-result-banner button { min-width: 88px; }
}

/* Filtered browsing puts the chosen category and its results before discovery modules. */
@media (max-width: 760px) {
  .search-result-banner { order: 5; width: 100%; }
  body:not([data-browse-filter="featured"]) .hero {
    height: clamp(320px, 50vh, 390px) !important;
    min-height: 320px !important;
    margin-bottom: 14px !important;
  }
  body:not([data-browse-filter="featured"]) .topics {
    order: 3 !important;
    margin-bottom: 15px !important;
  }
  body:not([data-browse-filter="featured"]) .gallery { order: 5 !important; }
  body:not([data-browse-filter="featured"]) .pagination { order: 6 !important; }
  body:not([data-browse-filter="featured"]) #recommendations.recommendations {
    order: 4 !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  .topic-list {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }
  .topic { scroll-snap-align: start; }
  .gallery .card > img {
    box-shadow: inset 0 0 0 1px rgba(25,35,28,.04), 0 7px 18px rgba(25,35,28,.08) !important;
  }
  .gallery .card-overlay { padding-top: 10px !important; }
  .gallery .card-overlay p { letter-spacing: -.15px; }
  .recommend-card {
    overflow: hidden;
    box-shadow: 0 7px 18px rgba(25,35,28,.06);
  }
  .recommendation-skeleton,
  .skeleton-card {
    position: relative;
    overflow: hidden;
  }
  .recommendation-skeleton::after,
  .skeleton-card::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.65) 48%, transparent 72%);
    animation: mobile-skeleton-sheen 1.25s ease-in-out infinite;
  }
}

@keyframes mobile-skeleton-sheen { to { transform: translateX(100%); } }

/* Keep mobile hero artwork visible: copy becomes a compact caption instead of a large panel. */
@media (max-width: 760px) {
  .hero .hero-copy {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: 118px;
    padding: 11px 14px 12px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, rgba(10,20,17,.88), rgba(12,24,20,.76)) !important;
    backdrop-filter: blur(9px) !important;
  }
  .hero .hero-copy .eyebrow {
    margin-bottom: 5px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: 1.3px !important;
  }
  .hero .hero-copy h1 {
    display: -webkit-box;
    margin: 0 !important;
    overflow: hidden;
    font-size: clamp(23px, 6.2vw, 28px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .hero .hero-copy .intro { display: none !important; }
}

/* Recommendation panels adapt to real content instead of reserving empty columns. */
#recommendations > .recommend-panel[hidden] { display: none !important; }
@media (max-width: 760px) {
  #recommendations.recommendations.is-single {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #recommendations.recommendations.is-single > .recommend-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 14px !important;
  }
  #recommendations.recommendations.is-single .recommend-head {
    min-height: 54px !important;
  }
  #recommendations.recommendations.is-single .recommend-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #recommendations.recommendations.is-single .recommend-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid #e4e9e1 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }
  #recommendations.recommendations.is-single .recommend-card > img {
    width: 100% !important;
    height: clamp(112px, 20vw, 156px) !important;
    border-radius: 11px 11px 0 0 !important;
    object-fit: contain !important;
  }
  #recommendations.recommendations.is-single .recommend-card .card-overlay {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 66px !important;
    padding: 9px 9px 8px !important;
    background: #fff !important;
    color: var(--pd-text) !important;
  }
  #recommendations.recommendations.is-single .recommend-card .card-overlay p,
  #recommendations.recommendations.is-single .recommend-card .card-overlay span {
    max-width: none !important;
  }
  #recommendations .card-buttons button {
    min-width: 34px;
    min-height: 34px;
  }
}
@media (max-width: 520px) {
  #recommendations.recommendations.is-single .recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #recommendations.recommendations.is-single .recommend-card > img {
    height: 132px !important;
  }
}

body {
  background: var(--pd-bg) !important;
  color: var(--pd-ink) !important;
}

.topbar {
  height: 72px !important;
  padding: 0 32px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--pd-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
.hero-art[role="button"] { cursor: zoom-in; }
.hero-art[role="button"]:focus-visible { outline: 3px solid rgba(36, 87, 237, .5); outline-offset: 4px; border-radius: 16px; }
.hero-art[role="button"] .hero-image { transition: opacity .2s ease, transform .22s ease; }
.hero-art[role="button"]:hover .hero-image { transform: scale(1.012); }

.logo { color: var(--pd-ink) !important; }
.logo-mark { background: var(--pd-ink) !important; color: #fff !important; }
.topbar nav { margin-left: 80px !important; }
.topbar nav a.active { color: var(--pd-blue) !important; }
.upload-button {
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #3568f2, #1f4ed8) !important;
  color: #fff;
  box-shadow: 0 9px 22px rgba(36,87,237,.26), inset 0 1px rgba(255,255,255,.28);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.upload-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.upload-button:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 13px 28px rgba(36,87,237,.33), inset 0 1px rgba(255,255,255,.32); }
.upload-button:hover svg { transform: scale(1.05); }
.upload-button:active { transform: translateY(0) scale(.96); }
.upload-button:focus-visible { outline: 3px solid rgba(36,87,237,.28); outline-offset: 3px; }
.avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pd-line); }

main {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 22px 30px 72px !important;
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) 286px !important;
  grid-template-areas:
    "channels hero recommendations"
    "channels topics recommendations"
    "channels gallery recommendations"
    "channels more recommendations" !important;
  gap: 18px 28px !important;
  align-items: start !important;
}

.community-switcher {
  grid-area: channels !important;
  position: sticky !important;
  top: 94px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid var(--pd-line) !important;
}

.community-switcher::before {
  content: "内容频道";
  display: block;
  margin: 0 0 10px;
  color: #969eac;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.community-tab {
  position: relative !important;
  min-height: 112px !important;
  padding: 18px 16px 16px 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .2s, color .2s !important;
}

.community-tab::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -1px !important;
  width: 3px !important;
  height: auto !important;
  border-radius: 0 3px 3px 0 !important;
  background: transparent !important;
}

.community-tab:hover { transform: none !important; background: #eef1f6 !important; }
.community-tab.is-active { background: var(--pd-blue-soft) !important; }
.community-tab.is-active::before { background: var(--pd-blue) !important; }
.community-tab[data-community="invite"].is-active::before { background: #7357d9 !important; }
.community-tab[data-community="brand"].is-active::before { background: var(--pd-orange) !important; }
.community-tab span { color: #8a93a3 !important; font-size: 9px !important; }
.community-tab strong { color: var(--pd-ink); font-size: 18px !important; }
.community-tab small { margin-top: 8px !important; color: var(--pd-muted) !important; line-height: 1.55; }
.community-tab em {
  display: block;
  margin-top: 9px;
  color: #9aa2b0;
  font-size: 11px;
  font-style: normal;
}

.hero {
  grid-area: hero !important;
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  height: 500px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #1b2431 !important;
}

.hero-art { position: absolute !important; inset: 0 !important; height: 100% !important; }
.hero-image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  background: #dfe4eb !important;
  box-shadow: none !important;
  filter: saturate(.9) contrast(1.02) brightness(.78);
}
.arch, .stamp, .image-note { display: none !important; }

.hero-copy {
  position: absolute !important;
  z-index: 2 !important;
  inset: auto 0 0 !important;
  padding: 92px 34px 30px !important;
  color: #fff !important;
  background: linear-gradient(transparent, rgba(9, 14, 22, .88)) !important;
  pointer-events: none;
}
.hero-copy .eyebrow { color: #dce5ff !important; }
.hero h1 {
  max-width: 620px !important;
  margin-bottom: 10px !important;
  color: #fff !important;
  font-size: clamp(35px, 3.8vw, 54px) !important;
  line-height: 1.14 !important;
  letter-spacing: -2.5px !important;
}
.hero .intro { max-width: 560px !important; color: rgba(255,255,255,.78) !important; line-height: 1.65 !important; }
.hero-actions { margin-top: 22px !important; pointer-events: auto; }
.hero-actions .primary { background: var(--pd-blue) !important; }
.round-play, .watch { display: none !important; }
.stats {
  position: absolute !important;
  right: 32px !important;
  bottom: 31px !important;
  z-index: 3 !important;
  display: flex !important;
  margin: 0 !important;
  color: #fff !important;
}
.stats span { color: rgba(255,255,255,.65) !important; }

.recommendations {
  grid-area: recommendations !important;
  position: sticky !important;
  top: 94px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  padding: 0 !important;
  border: 0 !important;
}
.recommend-panel {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.recommend-head { padding: 0 0 12px !important; border-bottom: 1px solid var(--pd-line) !important; }
.recommend-head h2 { font-size: 17px !important; letter-spacing: -.4px !important; }
.recommend-head > span { display: none !important; }
.recommend-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 4px 0 0 !important;
}
.recommend-card {
  height: 88px !important;
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--pd-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.recommend-card img { width: 104px !important; height: 68px !important; padding: 0 !important; border-radius: 7px !important; object-fit: cover !important; }
.recommend-card .card-overlay {
  position: static !important;
  min-width: 0;
  padding: 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  color: var(--pd-ink) !important;
  background: none !important;
}
.recommend-card .card-overlay p { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recommend-card .card-overlay span { color: var(--pd-muted) !important; }
.recommend-card .card-buttons { display: flex; gap: 4px; }
.recommend-card .like, .recommend-card .save-button { padding: 3px 5px !important; background: transparent !important; }
.recommend-card .rank-badge { left: -4px !important; top: 6px !important; }

.topics { grid-area: topics !important; padding: 8px 0 0 !important; border: 0 !important; }
.section-heading h2 { font-size: 24px !important; }
.topic-list { margin-top: 16px !important; }
.topic { border-color: var(--pd-line) !important; background: var(--pd-surface) !important; }
.topic.selected { border-color: var(--pd-blue) !important; background: var(--pd-blue) !important; }

.gallery {
  grid-area: gallery !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 250px !important;
  grid-template-rows: none !important;
  gap: 14px !important;
  padding-bottom: 0 !important;
}
.gallery .card, .gallery .card.tall, .gallery .card.wide {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  background: var(--pd-surface) !important;
  box-shadow: 0 1px 0 rgba(23,30,43,.05) !important;
}
.gallery .card img { padding: 0 !important; object-fit: cover !important; }
.gallery .category-badge.venue-badge {
  display: inline-flex !important;
  background: rgba(255, 239, 218, .94) !important;
  color: #8a4c13 !important;
}
.gallery .category-badge.travel-guide-badge {
  display: inline-flex !important;
  background: rgba(232, 242, 255, .94) !important;
  color: #315e96 !important;
}
.gallery .venue-card .guide-image-count { background: rgba(126, 70, 18, .82) !important; }
.gallery .card-overlay { padding: 52px 13px 12px !important; }
.category-badge { top: 10px !important; left: 10px !important; }
.pagination { grid-area: more; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 4px; }
.pagination[hidden] { display: none; }
.pagination button { min-width: 40px; height: 40px; padding: 0 13px; border: 1px solid var(--pd-line); border-radius: 9px; background: var(--pd-surface); color: var(--pd-text); font: 600 12px inherit; cursor: pointer; }
.pagination button:hover:not(:disabled), .pagination button.active { border-color: var(--pd-blue); background: var(--pd-blue); color: #fff; }
.pagination button:disabled { opacity: .42; cursor: not-allowed; }
.page-numbers { display: flex; gap: 6px; }
.page-summary { margin: 0 6px; color: var(--pd-muted); font-size: 11px; white-space: nowrap; }

.feed-section { grid-column: 1 / -1; }

@media (max-width: 1120px) {
  main {
    grid-template-columns: 210px minmax(0, 1fr) !important;
    grid-template-areas:
      "channels hero"
      "channels recommendations"
      "channels topics"
      "channels gallery"
      "channels more" !important;
  }
  .recommendations { position: static !important; display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .recommend-card { grid-template-columns: 96px 1fr !important; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .topbar { height: 64px !important; padding: 0 16px !important; }
  main {
    display: block !important;
    padding: 14px 16px 92px !important;
  }
  .community-switcher {
    position: static !important;
    margin: 0 0 14px !important;
    padding: 0 0 4px !important;
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82% !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }
  .community-switcher::before { display: none; }
  .community-tab { min-height: 104px !important; scroll-snap-align: start; }
  .hero { height: 430px !important; margin-bottom: 18px !important; }
  .hero-copy { padding: 72px 22px 22px !important; }
  .hero h1 { font-size: 36px !important; }
  .stats { display: none !important; }
  .recommendations { display: block !important; margin-bottom: 26px; }
  .recommend-panel + .recommend-panel { margin-top: 24px; }
  .topics { margin-bottom: 18px; }
  .gallery { grid-template-columns: 1fr !important; grid-auto-rows: 310px !important; }
  .pagination { flex-wrap: wrap; padding-top: 20px; }
  .page-summary { order: -1; width: 100%; text-align: center; margin-bottom: 2px; }
  .pagination > button { flex: 1; max-width: 120px; }
}

/* Mobile direction 3: efficient browse grid */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; background: #fff !important; }
  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 20;
    height: 64px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #e8ebf0 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(14px);
  }
  .topbar .logo { font-size: 20px !important; }
  .topbar .actions { gap: 8px !important; }
  .topbar .upload-button { width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; }
  .topbar .upload-button svg { width: 23px; height: 23px; }

  main {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    max-width: none !important;
    padding: 0 14px 28px !important;
  }
  .community-switcher {
    order: 1;
    position: sticky !important;
    top: 64px !important;
    z-index: 15;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    width: calc(100% + 28px);
    margin: 0 -14px 14px !important;
    padding: 0 14px !important;
    overflow: visible !important;
    border-bottom: 1px solid #e7eaf0 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px);
  }
  .community-tab {
    position: relative;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 0 4px !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-align: none;
  }
  .community-tab::before { display: none !important; }
  .community-tab::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
  }
  .community-tab.is-active::after { background: var(--pd-blue); }
  .community-tab span, .community-tab small, .community-tab em { display: none !important; }
  .community-tab strong { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.3px !important; white-space: nowrap; }
  .community-tab.is-active strong { color: var(--pd-blue) !important; }

  .hero {
    order: 2;
    position: relative !important;
    display: block !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 13px !important;
    background: #dfe5ea !important;
  }
  .hero-art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
  .hero-image { width: 100% !important; height: 100% !important; max-width: none !important; border-radius: 0 !important; object-fit: cover !important; box-shadow: none !important; }
  .hero::after { content: ""; position: absolute; inset: 38% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(9,17,28,.78)); pointer-events: none; }
  .hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 !important;
    padding: 20px 20px 18px !important;
    color: #fff !important;
    pointer-events: none;
  }
  .hero .eyebrow { margin: 0 0 8px !important; color: #fff !important; font-size: 10px !important; letter-spacing: 1.5px !important; }
  .hero h1 { margin: 0 0 5px !important; color: #fff !important; font-size: clamp(27px, 8vw, 32px) !important; line-height: 1.12 !important; letter-spacing: -1.2px !important; }
  .hero .intro { max-width: 90% !important; margin: 0 !important; color: rgba(255,255,255,.82) !important; font-size: 13px !important; line-height: 1.45 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-actions, .hero .stats, .image-note, .stamp, .arch { display: none !important; }

  .topics { order: 4; width: 100%; min-width: 0; max-width: 100%; margin: 0 0 14px !important; padding: 0 !important; overflow: hidden; }
  .topics .section-heading { display: none !important; }
  .topic-list { display: flex !important; flex-wrap: nowrap !important; width: 100%; min-width: 0; max-width: 100%; gap: 8px !important; margin: 0 !important; padding: 1px 0 4px !important; overflow-x: auto; scrollbar-width: none; }
  .topic-list::-webkit-scrollbar { display: none; }
  .topic { flex: 0 0 auto; min-height: 38px !important; padding: 0 16px !important; border: 1px solid #e3e7ed !important; border-radius: 999px !important; background: #fff !important; color: #68707c !important; font-size: 13px !important; white-space: nowrap; }
  .topic span { display: none !important; }
  .topic.selected { border-color: var(--pd-blue) !important; background: #fff !important; color: var(--pd-blue) !important; box-shadow: inset 0 0 0 1px var(--pd-blue); }

  .gallery {
    order: 5;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 20px 12px !important;
    padding: 0 !important;
  }
  .gallery .card, .gallery .card.tall, .gallery .card.wide {
    display: grid !important;
    grid-template-rows: auto auto;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .gallery .card > img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 11px !important; object-fit: cover !important; }
  .gallery .card-overlay {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 5px;
    min-height: 54px;
    padding: 9px 2px 0 !important;
    background: none !important;
    color: var(--pd-text) !important;
  }
  .gallery .card-overlay p { margin: 0 0 3px !important; overflow: hidden; color: var(--pd-text) !important; font-size: 14px !important; font-weight: 600 !important; text-overflow: ellipsis; white-space: nowrap; }
  .gallery .card-overlay span { color: var(--pd-muted) !important; font-size: 11px !important; }
  .gallery .card-buttons { align-items: center; }
  .gallery .like { padding: 3px 0 !important; color: #7d8490 !important; font-size: 13px !important; background: transparent !important; }
  .gallery .save-button, .gallery .category-badge:not(.venue-badge):not(.travel-guide-badge) { display: none !important; }
  .gallery .category-badge.venue-badge,
  .gallery .category-badge.travel-guide-badge { top: 8px; left: 8px; min-height: 24px; padding: 4px 8px; font-size: 9px; }
  .gallery .card:hover img { transform: none !important; }

  .pagination { order: 6; padding: 24px 0 4px !important; }
  .recommendations { display: contents !important; }
  .recommendations > .recommend-panel:first-child { order: 3; width: 100%; min-width: 0; margin: 0 0 22px !important; }
  .recommendations > .daily-panel { order: 3; width: 100%; min-width: 0; margin: 0 0 22px !important; }
  .recommendations > .recommend-panel:first-child .recommend-grid, .recommendations > .daily-panel .recommend-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; padding-top: 14px !important; }
  .recommendations > .recommend-panel:first-child .recommend-card, .recommendations > .daily-panel .recommend-card { grid-template-columns: 62px minmax(0, 1fr) !important; height: 64px !important; min-height: 64px !important; }
  .recommendations > .recommend-panel:first-child .recommend-card img, .recommendations > .daily-panel .recommend-card img { width: 62px !important; height: 64px !important; }
  .recommendations > .recommend-panel:first-child .card-overlay, .recommendations > .daily-panel .card-overlay { padding: 5px 3px 5px 8px !important; }
  .recommendations > .recommend-panel:first-child .card-overlay p, .recommendations > .daily-panel .card-overlay p { max-width: 80px !important; font-size: 12px !important; }
  .recommendations > .recommend-panel:first-child .card-overlay span, .recommendations > .daily-panel .card-overlay span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-section { order: 8; }

  .mobile-nav {
    z-index: 30 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(66px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom);
    margin: 0 !important;
    gap: 0 !important;
    border-top-color: #e7eaf0 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(16px);
    width: auto !important;
    max-width: none !important;
  }
  .mobile-nav a { min-width: 54px; color: #727986 !important; }
  .mobile-nav a.active { color: var(--pd-blue) !important; }
  .mobile-nav button { width: 50px !important; height: 50px !important; box-shadow: 0 8px 24px rgba(17,24,39,.2); }
}

/* Mobile work cards: preserve readable metadata without covering the image. */
@media (max-width: 760px) {
  .gallery { gap: 20px 12px !important; padding: 0 0 24px !important; }
  .gallery .card { grid-template-rows: auto minmax(58px, auto) !important; }
  .gallery .card-overlay { align-items: start !important; min-height: 58px !important; padding: 10px 2px 0 !important; }
  .gallery .card-overlay > div:first-child { min-width: 0; }
  .gallery .card-overlay p { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3 !important; white-space: normal !important; }
  .gallery .card-overlay span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gallery .card-buttons { align-self: start; padding-top: 1px; }
  .gallery .like { min-width: 32px; }
}

/* Keep the mobile comment submit action visible above the modal edge. */
@media (max-width: 760px) {
  .photo-modal { z-index: 40 !important; }

  .photo-content .comment-form {
    position: fixed !important;
    z-index: 41;
    right: 16px;
    bottom: 12px !important;
    left: 16px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid #dfe5db;
    border-radius: 12px;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .18);
  }

  .photo-content .photo-info { padding-bottom: 112px !important; }

  .photo-content .comment-form textarea {
    min-height: 64px !important;
  }

  .photo-content .comment-form .secondary {
    min-width: 64px;
    min-height: 42px;
    padding: 10px 12px;
  }
}

/* Keep mobile pagination centered regardless of its page controls. */
@media (max-width: 760px) {
  #pagination.pagination {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    width: 100% !important;
    margin: 0 auto !important;
    padding: 24px 0 8px !important;
  }

  #pagination .page-summary {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    margin: 0 0 8px !important;
  }

  #pagination #prevPage { grid-column: 1; justify-self: end; }
  #pagination .page-numbers { grid-column: 2; justify-self: center; }
  #pagination #nextPage { grid-column: 3; justify-self: start; }
}

/* Let the complete upload form fit and scroll safely on small screens. */
@media (max-width: 560px) {
  .modal:has(.upload-dialog) { z-index: 50 !important; padding: 8px !important; }
  .upload-dialog {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .upload-dialog .upload-dialog-heading { padding-right: 30px; }
  .upload-dialog .upload-intro { margin: 8px 0 0; }
  .upload-dialog .upload-form { gap: 10px; margin-top: 12px; }
  .upload-dialog .file-drop {
    min-height: 86px !important;
    padding: 13px 12px !important;
    text-align: center;
  }
  .upload-dialog .file-drop strong {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .upload-dialog .file-drop small {
    display: block;
    max-width: 100%;
    line-height: 1.55;
  }
  .upload-dialog .upload-preview { height: 108px !important; }
  .upload-dialog .upload-submit {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    margin: 4px 0 0 !important;
    border: 0 !important;
    box-shadow: 0 8px 18px #94b54138;
  }
}

/* Show the complete featured photograph on mobile instead of cropping portraits. */
@media (max-width: 760px) {
  .hero { background: #111827 !important; }
  .hero-image { object-fit: contain !important; object-position: center !important; }
}

/* Destructive actions stay explicit and usable on touch screens. */
.upload-preview { position: relative; }
.upload-remove {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  border: 1px solid rgba(153, 54, 46, .24);
  border-radius: 8px;
  background: rgba(255, 247, 246, .94);
  color: #9b3f38;
  padding: 7px 10px;
  font: 600 11px inherit;
  cursor: pointer;
}
.detail-actions .detail-delete {
  grid-column: 1 / -1;
  min-height: 40px;
  border: 1px solid #e5c9c5;
  border-radius: 9px;
  background: #fff8f7;
  color: #a3433c;
  font: 600 12px inherit;
  cursor: pointer;
}
#downloadPhoto { white-space: nowrap; }
.upload-remove:disabled,
.detail-delete:disabled { opacity: .58; cursor: wait; }

/* Keep mobile recommendation rows readable instead of squeezing two mini cards per row. */
@media (max-width: 519px) {
  .recommendations > .recommend-panel:first-child .recommend-grid,
  .recommendations > .daily-panel .recommend-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .recommendations > .recommend-panel:first-child .recommend-card,
  .recommendations > .daily-panel .recommend-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    min-height: 86px !important;
    height: 86px !important;
    gap: 12px !important;
    padding: 7px 0 !important;
  }

  .recommendations > .recommend-panel:first-child .recommend-card img,
  .recommendations > .daily-panel .recommend-card img {
    width: 96px !important;
    height: 72px !important;
    border-radius: 9px !important;
  }

  .recommendations > .recommend-panel:first-child .card-overlay,
  .recommendations > .daily-panel .card-overlay {
    min-width: 0;
    padding: 7px 4px 7px 0 !important;
  }

  .recommendations > .recommend-panel:first-child .card-overlay p,
  .recommendations > .daily-panel .card-overlay p,
  .recommendations > .recommend-panel:first-child .card-overlay span,
  .recommendations > .daily-panel .card-overlay span {
    max-width: none !important;
  }

  .recommend-card .rank-badge {
    left: -5px !important;
    top: 9px !important;
  }
}

/* Mobile recommendations: keep ranking and today's picks parallel, with
   portrait-friendly artwork frames that never crop the original image. */
@media (max-width: 760px) {
  #recommendations.recommendations {
    order: 3;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 12px !important;
    width: 100%;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #recommendations > .recommend-panel,
  #recommendations > .recommend-panel:first-child,
  #recommendations > .daily-panel {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #e5e9e2 !important;
    border-radius: 14px !important;
    background: #fbfcfa !important;
  }

  #recommendations .recommend-head {
    min-height: 66px;
    align-items: start !important;
    padding: 0 0 10px !important;
  }

  #recommendations .recommend-head .eyebrow {
    font-size: 8px !important;
    letter-spacing: .8px !important;
  }

  #recommendations .recommend-head h2 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #recommendations .ranking-more {
    padding: 2px 0 !important;
    font-size: 10px !important;
  }

  #recommendations .recommend-grid,
  #recommendations > .recommend-panel:first-child .recommend-grid,
  #recommendations > .daily-panel .recommend-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-top: 12px !important;
  }

  #recommendations .recommend-card,
  #recommendations > .recommend-panel:first-child .recommend-card,
  #recommendations > .daily-panel .recommend-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 172px auto !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 226px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e6eae3;
    border-radius: 11px !important;
    background: #eef2eb !important;
  }

  #recommendations .recommend-card img,
  #recommendations > .recommend-panel:first-child .recommend-card img,
  #recommendations > .daily-panel .recommend-card img {
    display: block;
    width: 100% !important;
    height: 172px !important;
    padding: 4px !important;
    border-radius: 10px 10px 0 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #e8ede5 !important;
  }

  #recommendations .card-overlay,
  #recommendations > .recommend-panel:first-child .card-overlay,
  #recommendations > .daily-panel .card-overlay {
    position: static !important;
    min-width: 0;
    min-height: 53px;
    padding: 8px !important;
    background: #fff !important;
    color: var(--pd-text) !important;
  }

  #recommendations .card-overlay p,
  #recommendations .card-overlay span {
    display: block;
    max-width: 88px !important;
    overflow: hidden;
    color: var(--pd-text) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #recommendations .card-overlay span {
    color: var(--pd-muted) !important;
  }

  #recommendations .rank-badge {
    top: 8px !important;
    left: 8px !important;
  }
}

/* Final mobile hero override must follow the responsive card system above. */
@media (max-width: 760px) {
  .hero {
    width: 100% !important;
    height: clamp(390px, 67vh, 440px) !important;
    min-height: 390px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin-bottom: 22px !important;
    padding: 0 !important;
    border: 1px solid #dbe3d6 !important;
    border-radius: 20px !important;
    background: #dfe5e1 !important;
    box-shadow: 0 20px 50px #1d2b2330 !important;
  }

  .hero-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    background-image: var(--hero-image) !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero-art::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -18px;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: blur(20px) saturate(.82) brightness(.72);
    opacity: .9;
    transform: scale(1.1);
  }

  .hero-image {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: 19px !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 14px 28px #0f171044);
  }

  .hero-copy {
    position: absolute !important;
    z-index: 3 !important;
    inset: auto 12px 12px !important;
    width: auto !important;
    padding: 15px 16px !important;
    border: 1px solid #ffffff38 !important;
    border-radius: 14px !important;
    background: #101a17cc !important;
    box-shadow: 0 15px 35px #0b120c55 !important;
    backdrop-filter: blur(12px);
  }

  .hero::after {
    inset: 45% 0 0 !important;
    border-radius: 0 0 19px 19px;
  }
}
/* 2026-08 visual and interaction polish */
:where(button, a, [role="button"], input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}
:where(button, a, [role="button"]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pd-blue) 32%, transparent);
  outline-offset: 3px;
}
.card[role="link"], .recommend-card[role="link"] { cursor: pointer; }
.card[role="link"]:focus-visible, .recommend-card[role="link"]:focus-visible {
  outline: 3px solid rgba(47, 99, 246, .38);
  outline-offset: 4px;
  box-shadow: 0 16px 38px rgba(32, 48, 84, .16) !important;
}
:where(button, .card, .recommend-card, .community-tab, .topic) {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
:where(button, .card, .recommend-card, .community-tab, .topic):active {
  transform: scale(.975);
}
.hero-art.image-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 48%, transparent 66%);
  animation: hero-loading-sheen 1.25s ease-in-out infinite;
  pointer-events: none;
}
.hero-art.image-error,
.hero-art:not([data-photo-id]),
.hero-art[data-photo-id=""] {
  background:
    radial-gradient(circle at 78% 22%, rgba(199,240,76,.5), transparent 30%),
    radial-gradient(circle at 20% 78%, rgba(68,94,225,.28), transparent 34%),
    linear-gradient(145deg, #dce9d5, #d9e0f2 55%, #eef2ea) !important;
}
.upload-submit:disabled,
.primary:disabled {
  cursor: wait;
  opacity: .72;
  box-shadow: none !important;
}
@keyframes hero-loading-sheen { 50% { transform: translateX(12%); } }
@media (hover: hover) {
  .card:hover,
  .recommend-card:hover { transform: translateY(-3px); }
  .topbar button:hover { box-shadow: 0 8px 24px rgba(28,33,29,.12); }
}
@media (max-width: 760px) {
  .hero { box-shadow: 0 12px 30px rgba(19,28,21,.13) !important; }
  .hero-copy { display: none !important; }
  .community-tab,
  .topic,
  .bottom-nav a,
  .bottom-nav button { touch-action: manipulation; }
  .bottom-nav { box-shadow: 0 -8px 28px rgba(22,31,24,.08); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Work cards and pagination finishing: clearer actions, quieter one-page state. */
.pagination.single-page > button,
.pagination.single-page .page-numbers { display: none !important; }
.pagination.is-empty { display: none !important; }
.pagination.single-page {
  min-height: 54px;
  padding: 16px 0 2px !important;
}
.pagination.single-page .page-summary {
  width: auto !important;
  margin: 0 !important;
  padding: 7px 12px;
  border: 1px solid #e3e8e0;
  border-radius: 999px;
  background: #f8faf6;
  color: #737d70;
}
@media (max-width: 760px) {
  .gallery .card > img { border-radius: 14px !important; }
  .gallery .card-overlay {
    min-height: 64px !important;
    align-items: center !important;
    padding: 10px 2px 2px !important;
  }
  .gallery .card-overlay p {
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  .gallery .card-overlay span {
    display: block;
    max-width: 220px;
    overflow: hidden;
    font-size: 11px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gallery .card-buttons { gap: 2px !important; }
  .gallery .card-buttons button {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    margin: -5px -5px -5px 0;
    border-radius: 999px !important;
  }
  .gallery .card-buttons button:active { background: #eef3ea !important; }
}

/* Final compact mobile rhythm; this intentionally follows every legacy
   responsive block so cached-era overrides cannot make the header oversized. */
@media (max-width: 760px) {
  html body main .community-switcher .community-tab { min-height: 58px !important; }
  html body main .community-switcher { margin-bottom: 16px !important; }
  html body main .hero {
    height: clamp(330px, 54vw, 390px) !important;
    min-height: 330px !important;
  }
}

.search-panel-status {
  display: block;
  max-width: 650px;
  margin: 7px auto 0;
  padding: 0 4px;
  color: #7c8679;
  font-size: 10px;
  line-height: 1.4;
}
.search-panel[aria-busy="true"] .search-panel-status {
  color: #4f6f26;
  font-weight: 700;
}

/* Channel-aware hero and gallery states prevent stale artwork and blank space. */
.hero-art.channel-fallback {
  cursor: default !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(199, 240, 76, .62), transparent 29%),
    radial-gradient(circle at 18% 78%, rgba(76, 105, 230, .34), transparent 33%),
    linear-gradient(145deg, #dce9d5, #d9e0f2 56%, #eef2ea) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 24px 58px rgba(34,48,37,.16) !important;
}
.hero-art.channel-fallback[data-channel="invite"] {
  background:
    radial-gradient(circle at 78% 18%, rgba(194, 170, 255, .72), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(84, 104, 226, .3), transparent 34%),
    linear-gradient(145deg, #e8e2f4, #dce3f4 55%, #eef1ea) !important;
}
.hero-art.channel-fallback[data-channel="brand"] {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 194, 112, .72), transparent 29%),
    radial-gradient(circle at 18% 78%, rgba(192, 109, 67, .28), transparent 34%),
    linear-gradient(145deg, #f1e5d4, #e8ddd5 55%, #eef0e8) !important;
}
.hero-art.channel-fallback::before {
  inset: 0 !important;
  background:
    linear-gradient(110deg, transparent 48%, rgba(255,255,255,.23) 48.5%, rgba(255,255,255,.23) 49.5%, transparent 50%),
    repeating-radial-gradient(circle at 72% 32%, transparent 0 29px, rgba(255,255,255,.34) 30px 31px) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-art.channel-fallback::after {
  content: "LENS / CAPE";
  position: absolute;
  z-index: 1;
  right: clamp(20px, 5vw, 58px);
  bottom: clamp(20px, 4vw, 48px);
  color: rgba(26, 38, 30, .54);
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 800;
  letter-spacing: .24em;
}
.hero-art.channel-fallback .hero-image,
.hero-art.channel-fallback .image-note,
.hero-art.channel-fallback .stamp { display: none !important; }
.hero-art.channel-fallback:hover { transform: none !important; }

.discover-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  min-height: 300px;
  padding: 52px 24px;
  border: 1px dashed #ced8ca;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(199,240,76,.16), transparent 42%),
    linear-gradient(145deg, #fbfcfa, #f4f7f1);
  color: #6e786b;
  text-align: center;
}
.discover-empty-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border: 1px solid #d7dfd2;
  border-radius: 50%;
  background: #fff;
  color: #41503e;
  font-size: 25px;
  box-shadow: 0 12px 28px rgba(42,55,39,.1);
}
.discover-empty .eyebrow { margin: 0 0 8px; color: #899384; }
.discover-empty h3 { margin: 0; color: #202920; font-size: clamp(21px, 2.4vw, 30px); }
.discover-empty > p:not(.eyebrow) { max-width: 480px; margin: 11px 0 22px; font-size: 13px; line-height: 1.75; }
.discover-empty button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #1d251e;
  color: #fff;
  font: 700 12px inherit;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(27,38,29,.18);
}
.discover-empty button:hover { background: #2b372d; transform: translateY(-1px); }
@media (max-width: 760px) {
  .hero .hero-art { height: 100% !important; }
  .discover-empty { min-height: 250px; padding: 38px 20px; border-radius: 18px; }
}
@media (max-width: 760px) {
  .search-panel-status {
    margin-top: 6px;
    padding: 0 2px;
    font-size: 9px;
  }
}

/* Mobile hero shows only a compact work caption; channel marketing copy stays in the tabs. */
@media (max-width: 900px) {
  .hero-copy { display: none !important; }
  .hero .image-note { display: flex !important; }
}

@media (max-width: 760px) {
  .mobile-nav .mobile-upload-link {
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    background: #172019;
    color: #c7f04c !important;
    font-size: 27px !important;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(17,24,39,.2);
  }
  .mobile-nav .mobile-upload-link:active { transform: scale(.95); }
}

/* 2026 visual refinement: a calmer editorial canvas with clearer depth. */
body:not([data-page="upload"]) {
  background:
    radial-gradient(circle at 8% 5%, rgba(77,111,241,.055), transparent 27rem),
    radial-gradient(circle at 94% 18%, rgba(199,240,76,.075), transparent 25rem),
    #f5f7fb !important;
}
.topbar {
  border-bottom-color: rgba(218,224,234,.82) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 8px 30px rgba(25,35,55,.055) !important;
}
.topbar .logo { letter-spacing: -.045em; }
.topbar nav a { position: relative; transition: color .18s ease; }
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2457ed;
  opacity: 0;
  transform: translate(-50%,4px);
  transition: opacity .18s ease, transform .18s ease;
}
.topbar nav a.active::after { opacity: 1; transform: translate(-50%,0); }
.community-switcher { gap: 12px !important; }
.community-tab {
  overflow: hidden;
  border-color: rgba(218,224,234,.92) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 28px rgba(34,45,67,.045) !important;
  backdrop-filter: blur(12px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.community-tab::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -38px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,87,237,.09), transparent 68%);
  pointer-events: none;
}
.community-tab.is-active {
  border-color: rgba(36,87,237,.23) !important;
  background: linear-gradient(145deg,#fff,#f7f9ff) !important;
  box-shadow: 0 16px 36px rgba(36,87,237,.09) !important;
}
.community-tab strong { letter-spacing: -.035em; }
.section-heading h2 { letter-spacing: -.055em !important; }
.topics .section-heading { align-items: center; }
.topic-list { gap: 9px !important; }
.topic {
  min-height: 40px;
  border-color: #e0e5ed !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 5px 15px rgba(32,43,65,.035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.topic:hover { transform: translateY(-1px); border-color: #bdc9e6 !important; box-shadow: 0 9px 20px rgba(36,55,94,.07); }
.topic.selected {
  border-color: #2457ed !important;
  background: linear-gradient(135deg,#3268f3,#2457ed) !important;
  box-shadow: 0 10px 24px rgba(36,87,237,.22) !important;
}
.topic.selected span { background: rgba(255,255,255,.92) !important; color: #2457ed !important; }
.gallery { gap: 18px !important; }
.gallery .card {
  border: 1px solid rgba(215,222,232,.92);
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(26,38,60,.085) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}
.gallery .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.5);
  pointer-events: none;
}
.gallery .card:hover {
  border-color: rgba(36,87,237,.28);
  box-shadow: 0 20px 45px rgba(26,38,60,.15) !important;
  transform: translateY(-5px) !important;
}
.gallery .category-badge,
.gallery .guide-image-count { backdrop-filter: blur(10px); }
.pagination.single-page .page-summary {
  border-color: rgba(215,222,232,.9);
  background: rgba(255,255,255,.76);
  box-shadow: 0 5px 16px rgba(32,43,65,.04);
}
.site-compliance {
  border-top-color: rgba(218,224,234,.8) !important;
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(12px);
}
@media (hover: hover) {
  .community-tab:hover { transform: translateY(-2px) !important; border-color: #ccd5e5 !important; box-shadow: 0 16px 34px rgba(34,45,67,.09) !important; }
}
@media (max-width: 760px) {
  body:not([data-page="upload"]) { background: #f7f9fc !important; }
  .topbar { box-shadow: 0 6px 22px rgba(25,35,55,.07) !important; }
  .topbar nav a::after { display: none; }
  .community-switcher { gap: 8px !important; }
  html body main .community-switcher .community-tab {
    border-radius: 14px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 7px 20px rgba(31,43,65,.05) !important;
  }
  html body main .community-switcher .community-tab::after {
    left: 22% !important;
    right: 22% !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
  }
  html body main .community-switcher .community-tab.is-active {
    border-color: rgba(36,87,237,.2) !important;
    background: #fff !important;
    box-shadow: 0 9px 22px rgba(36,87,237,.075) !important;
  }
  html body main .community-switcher .community-tab.is-active::after { background: #2457ed !important; }
  html body main .community-switcher .community-tab.is-active strong { color: #20283a !important; }
  .topics { padding-top: 28px !important; }
  .topic-list {
    margin-left: -14px;
    margin-right: -14px;
    padding: 2px 14px 8px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .topic-list::-webkit-scrollbar { display: none; }
  .topic { position: relative; flex: 0 0 auto; min-height: 38px; scroll-snap-align: start; }
  .topic.selected {
    padding-left: 29px !important;
    border-color: rgba(36,87,237,.42) !important;
    background: #fff !important;
    color: #2457ed !important;
    box-shadow: 0 7px 18px rgba(36,87,237,.09) !important;
  }
  .topic.selected::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2457ed;
    box-shadow: 0 0 0 4px rgba(36,87,237,.1);
    transform: translateY(-50%);
  }
  .gallery { gap: 12px !important; }
  .gallery .card { border-radius: 15px !important; box-shadow: 0 9px 24px rgba(26,38,60,.075) !important; }
  .gallery .card:hover { transform: none !important; }
}