/* ==========================================================
   WallDrop4K — shared stylesheet (used by every page)
   ========================================================== */

:root {
  /* Colors */
  --bg: #14141a;
  --panel: #1c1c25;
  --border: #2d2d3a;
  --text: #f2f0ea;
  --text-muted: #9c99a8;
  --accent: #e8a33d;
  --accent-hover: #f2b459;

  /* Fonts */
  --font-heading: "Fraunces", serif;
  --font-body: "Sora", sans-serif;

  /* Radii */
  --radius-sm: 12px;
  --radius-lg: 22px;

  /* Layout */
  --max-width: 1240px;
  --nav-height: 86px; /* .site-header's own box height (padding-top + bar height) */
  --nav-gap: 32px;    /* extra breathing room below the floating nav */

  /* Glass — two variants of the same recipe so it always reads as
     one consistent system: "inline" for elements that sit on plain
     background (tags, chips, ad slot, sidebars, pills) and can stay
     subtle, and "float" for elements that hover directly over other
     page content (nav bar, mega menu) and need to stay opaque enough
     to actually read. */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-blur: 20px;

  --glass-float-bg: rgba(20, 20, 26, 0.96);
  --glass-float-border: rgba(255, 255, 255, 0.1);
  --glass-float-highlight: rgba(255, 255, 255, 0.12);
  --glass-float-blur: 40px;
  --glass-float-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.8);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--text);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

.section-inner,
.header-inner,
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ==========================================================
   Buttons
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #14141a;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-large {
  padding: 14px 28px;
  font-size: 1rem;
}

/* ==========================================================
   Header / Nav — floating glass bar
   ========================================================== */
/* This is the ONLY place on the site that uses the frosted-glass
   (backdrop-filter) effect. The .site-header itself is transparent
   and just sticks to the very top; the padding below creates the
   gap so the glass bar always appears to float, even while scrolling. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 24px 0;
}

/* Even though the header is sticky (so it already reserves its own
   space), pages still need a bit more breathing room below it so the
   first section never feels like it's touching the floating bar. */
main {
  padding-top: calc(var(--nav-height) + var(--nav-gap));
}

.header-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
  border-radius: 18px;
}

/* ==========================================================
   Glass utility — one consistent recipe, two variants:
   .glass       — inline elements sitting on plain background
                  (tags, chips, ad slot, sidebars, pills). Can
                  stay subtle since there's no text behind them.
   .glass-solid — floating elements that hover directly over
                  other page content (nav bar, mega menu, the
                  mobile nav panel). Needs to stay opaque enough
                  to always read clearly, with a bigger blur and
                  a soft lift shadow so it feels above the page.
   ========================================================== */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 24px 48px -28px rgba(0, 0, 0, 0.65);
}

.glass-solid {
  background: var(--glass-float-bg);
  backdrop-filter: blur(var(--glass-float-blur));
  -webkit-backdrop-filter: blur(var(--glass-float-blur));
  border: 1px solid var(--glass-float-border);
  box-shadow: inset 0 1px 0 var(--glass-float-highlight), var(--glass-float-shadow);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.logo-icon {
  flex-shrink: 0;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.logo-accent {
  color: var(--accent);
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-link:hover {
  color: var(--accent);
  background: rgba(232, 163, 61, 0.08);
}

.chevron {
  font-size: 0.65rem;
  margin-top: 1px;
}

.has-dropdown {
  position: relative;
}

/* ============ Mega menu (Desktop / Mobile nav dropdowns) ============ */

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(480px, 90vw);
  border-radius: 18px;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 60;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 36px;
}

.mega-link {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.2s ease, background 0.2s ease;
}

.mega-link:hover {
  color: var(--text);
  background: rgba(232, 163, 61, 0.08);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================
   Mobile nav — a dedicated full-height overlay, built standalone
   rather than reusing the desktop hover mega-menu (.dropdown-menu
   inherits absolute positioning, opacity/visibility transitions and
   a transparent-until-hovered background that only make sense for a
   floating desktop popup — fighting all of that with overrides is
   exactly what produced the broken, see-through mobile menu this
   replaces). Solid background, one column, tap-sized rows, its own
   open/close state.
   ========================================================== */

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav.is-open {
  display: block;
  transform: translateX(0);
}

.mobile-nav-inner {
  min-height: 100%;
  padding: 18px 20px 40px;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}

.mobile-nav-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mobile-nav-body {
  display: flex;
  flex-direction: column;
}

.mobile-accordion {
  border-bottom: 1px solid var(--border);
}

.mobile-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 14px 4px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
}

.mobile-accordion-toggle .chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.mobile-accordion.is-open .mobile-accordion-toggle .chevron {
  transform: rotate(180deg);
}

.mobile-accordion-panel {
  display: none;
  flex-direction: column;
  padding-bottom: 8px;
}

.mobile-accordion.is-open .mobile-accordion-panel {
  display: flex;
}

.mobile-accordion-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.mobile-accordion-link:hover,
.mobile-accordion-link:active {
  color: var(--text);
  background: rgba(232, 163, 61, 0.08);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 4px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

/* Applied to <body> while the mobile nav is open, so the page behind
   it can't scroll. */
.no-scroll {
  overflow: hidden;
}

/* ==========================================================
   Sections
   ========================================================== */

.section {
  padding: 90px 0;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.section-title-row .section-title {
  margin-bottom: 0;
}

.section-title-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.2s ease;
}

.view-all-link:hover {
  gap: 9px;
  color: var(--accent-hover);
}

/* ==========================================================
   Format tabs — Desktop / Mobile switcher reused above the
   Trending and Latest Drops grids. Active tab flips to a solid
   gold pill; switching tabs crossfades the two panels (handled
   in script.js, since display:none can't itself transition).
   ========================================================== */

.format-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  flex-shrink: 0;
}

.format-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.format-tab:hover {
  color: var(--text);
}

.format-tab.is-active {
  background: var(--accent);
  color: #14141a;
}

.tab-panel {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tab-panel.is-active {
  opacity: 1;
}

/* ==========================================================
   Search hero — compact search section below the floating nav
   ========================================================== */

.search-hero {
  padding: 36px 0 54px;
  text-align: center;
}

.search-hero-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.search-hero-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 10px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  margin: 28px auto 0;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-bar-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 0;
}

.search-bar-input::placeholder {
  color: var(--text-muted);
}

.search-bar-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #14141a;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.search-bar-btn:hover {
  background: var(--accent-hover);
}

.search-bar:focus-within {
  border-color: rgba(232, 163, 61, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 4px rgba(232, 163, 61, 0.14);
}

.search-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.search-popular-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ==========================================================
   Scroll / load reveal animation
   (sections fade in on scroll via Intersection Observer in script.js;
   the cards inside them stagger in using nth-child delays)
   ========================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible .fade-item {
  opacity: 1;
  transform: translateY(0);
}

.reveal.is-visible .fade-item:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible .fade-item:nth-child(2) { transition-delay: 0.1s; }
.reveal.is-visible .fade-item:nth-child(3) { transition-delay: 0.15s; }
.reveal.is-visible .fade-item:nth-child(4) { transition-delay: 0.2s; }
.reveal.is-visible .fade-item:nth-child(5) { transition-delay: 0.25s; }
.reveal.is-visible .fade-item:nth-child(6) { transition-delay: 0.3s; }
.reveal.is-visible .fade-item:nth-child(7) { transition-delay: 0.35s; }
.reveal.is-visible .fade-item:nth-child(n+8) { transition-delay: 0.4s; }

/* ==========================================================
   Aspect ratios — every wallpaper on the site is uploaded in
   one of exactly two formats: 16:9 desktop or 9:16 mobile.
   These two utility classes are the single source of truth for
   that, applied to .thumb and .trending-card everywhere.
   ========================================================== */

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-9-16 {
  aspect-ratio: 9 / 16;
}

/* ==========================================================
   Trending now — big immersive showcase
   ========================================================== */

.trending-section {
  padding-top: 24px;
}

.trending-grid-desktop,
.trending-grid-mobile {
  display: grid;
  gap: 20px;
}

.trending-grid-desktop {
  grid-template-columns: repeat(3, 1fr);
}

.trending-grid-mobile {
  grid-template-columns: repeat(5, 1fr);
}

.trending-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.trending-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.trending-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}

.trending-card:hover .trending-bg {
  transform: scale(1.08);
}

.trending-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 26, 0) 45%, rgba(20, 20, 26, 0.85) 100%);
  pointer-events: none;
}

.trending-card .tag {
  z-index: 2;
}

.trending-info {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  transform: translateY(6px);
  transition: transform 0.3s ease;
}

.trending-card:hover .trending-info {
  transform: translateY(-6px);
}

.trending-info .card-title {
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.trending-info .card-res {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ==========================================================
   Wallpaper cards (latest drops)
   ========================================================== */

.wallpaper-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.wallpaper-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.thumb-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.3s ease;
}

.wallpaper-card:hover .thumb-bg,
.article-card:hover .thumb-bg {
  transform: scale(1.05);
}

.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  pointer-events: none;
}

/* Purely decorative now — the whole card is the single click target
   (see .wallpaper-card), so this can't intercept a tap/click. */
.download-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(20, 20, 26, 0.7);
  border: 1px solid rgba(242, 240, 234, 0.15);
  color: var(--text);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.wallpaper-card:hover .download-btn {
  opacity: 1;
  transform: translateY(0);
}

.card-info {
  padding: 12px 14px 16px;
}

.card-title {
  font-size: 0.98rem;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
}

.card-res {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.card-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ==========================================================
   Wallpaper grids — desktop (16:9) cards run 3 columns down to
   1, mobile (9:16) cards run 5 columns down to 2, since a tall
   portrait card needs roughly half the width of a landscape one
   to read at a similar size.
   ========================================================== */

.wallpaper-grid-desktop,
.wallpaper-grid-mobile {
  display: grid;
  gap: 20px;
}

.wallpaper-grid-desktop {
  grid-template-columns: repeat(3, 1fr);
}

.wallpaper-grid-mobile {
  grid-template-columns: repeat(5, 1fr);
}

/* ==========================================================
   Journal / articles
   ========================================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.article-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.article-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.article-card .thumb {
  aspect-ratio: 16 / 9;
}

.article-card .card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ==========================================================
   Placeholder gradients (stand-in for real wallpaper images)
   ========================================================== */

.grad-1 { background: linear-gradient(135deg, #f6a24b, #e8663d); }
.grad-2 { background: linear-gradient(135deg, #7b5bf0, #23c6d6); }
.grad-3 { background: linear-gradient(135deg, #2f9e6e, #1c5c46); }
.grad-4 { background: linear-gradient(135deg, #e8455c, #f6a24b); }
.grad-5 { background: linear-gradient(135deg, #f7c6d9, #a679e0); }
.grad-6 { background: linear-gradient(135deg, #1c6ca8, #10233e); }
.grad-7 { background: linear-gradient(135deg, #2b2b3a, #0e0e14); }
.grad-8 { background: linear-gradient(135deg, #ff6fa5, #7b5bf0); }

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
}

/* Stats row */

.footer-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 18px 28px;
  border-radius: 999px;
}

.footer-stat-item {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.footer-stat-sep {
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* 4-column layout */

.footer-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 44px;
}

.footer-brand {
  max-width: 320px;
}

.footer-desc {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-top: 10px;
  line-height: 1.6;
}

.footer-col-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--text-muted);
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--accent);
}

/* Popular tags */

.footer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 40px;
}

.footer-tags .pill {
  background: transparent;
}

.footer-tags a.pill {
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-tags a.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bottom bar */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ==========================================================
   Page intro (category / articles list / about / contact / legal)
   ========================================================== */

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}

.page-intro-section {
  padding: 8px 0 40px;
}

.page-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-desc {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 56ch;
  margin-top: 14px;
}

.page-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 18px;
}

/* ==========================================================
   Filter chips + sort row (category page)
   ========================================================== */

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.chip {
  flex: 0 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chip:hover {
  color: var(--text);
  border-color: var(--accent);
}

.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #14141a;
  font-weight: 600;
}

.sort-select {
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
}

.sort-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ==========================================================
   Pagination
   ========================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.page-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.page-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #14141a;
  font-weight: 600;
}

/* ==========================================================
   Breadcrumb
   ========================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 8px 0 28px;
}

.breadcrumb a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb .current {
  color: var(--text);
}

/* ==========================================================
   Wallpaper detail page
   ========================================================== */

.wallpaper-detail {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Mobile (9:16) wallpaper detail: the preview is tall and narrow
   rather than wide, so it no longer needs the majority of the row —
   flip the ratio and let the sidebar take more of the width. */
.wallpaper-detail-mobile {
  grid-template-columns: 1fr 1.3fr;
}

.preview-panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.preview-media {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.preview-media.ratio-9-16 {
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  margin: 0 auto;
}

.detail-sidebar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: calc(var(--nav-height) + var(--nav-gap));
}

.detail-title {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 10px 0 20px;
}

.btn-block {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

.download-meta {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 24px;
}

.info-rows {
  border-top: 1px solid var(--border);
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.info-row span:first-child {
  color: var(--text-muted);
}

.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.pill {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
}

.pill.glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pill.glass:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.detail-description {
  max-width: 720px;
  margin-top: 56px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.detail-description p + p {
  margin-top: 18px;
}

/* ==========================================================
   Long-form readable content (article body, about, legal pages)
   ========================================================== */

.readable {
  max-width: 750px;
  margin: 0 auto;
}

/* ==========================================================
   Legal pages — table of contents sidebar layout
   (privacy / DMCA / terms)
   ========================================================== */

.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + var(--nav-gap));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
}

.toc-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.legal-toc ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-toc a {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.legal-toc a:hover {
  color: var(--accent);
}

.legal-main .page-title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.last-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 10px;
}

.legal-content section {
  scroll-margin-top: calc(var(--nav-height) + var(--nav-gap) + 16px);
  margin-top: 44px;
}

.legal-content section:first-of-type {
  margin-top: 32px;
}

.legal-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 10px;
}

.legal-content strong {
  color: var(--text);
}

.legal-note {
  background: rgba(232, 163, 61, 0.08);
  border: 1px solid rgba(232, 163, 61, 0.3);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 24px 0;
  color: var(--text);
  font-size: 0.95rem;
}

.article-body,
.legal-content {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
}

.article-body p,
.legal-content p {
  margin-bottom: 20px;
}

.article-body h2,
.legal-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 44px 0 16px;
}

.article-body ul,
.legal-content ul {
  margin: 0 0 20px;
  padding-left: 22px;
  list-style: disc;
}

.article-body li,
.legal-content li {
  margin-bottom: 8px;
}

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 32px 0;
  font-style: italic;
  color: var(--text);
}

/* ==========================================================
   Article header + card meta (articles list / single article)
   ========================================================== */

.article-header {
  text-align: center;
  padding: 8px 0 40px;
}

.article-header .card-eyebrow {
  justify-content: center;
}

.article-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 14px;
}

.featured-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 21 / 9;
  margin-bottom: 48px;
}

.card-excerpt {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.card-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ==========================================================
   Contact form
   ========================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-form {
  max-width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.contact-card + .contact-card {
  margin-top: 20px;
}

.contact-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.contact-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.contact-card a.email-link {
  color: var(--accent);
  font-weight: 600;
  word-break: break-all;
}

.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.faq-answer {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ==========================================================
   About page — feature cards + curation steps
   ========================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
}

.feature-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(232, 163, 61, 0.12);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step-item {
  position: relative;
  padding-top: 8px;
}

.step-item::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 14px;
}

.step-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.step-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==========================================================
   Responsive
   ========================================================== */

/* Tablet: 2-col desktop-format grids, 3-col mobile-format grids */
@media (max-width: 1024px) {
  .wallpaper-grid-desktop,
  .trending-grid-desktop {
    grid-template-columns: repeat(2, 1fr);
  }

  .wallpaper-grid-mobile,
  .trending-grid-mobile {
    grid-template-columns: repeat(3, 1fr);
  }

  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Below 900px: the desktop hover mega-menu (.main-nav) is replaced
   entirely by the dedicated .mobile-nav overlay (see below) — it
   never shows at this width, so none of its floating/hover behavior
   needs to be fought with overrides here. */
@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Only the nav's own "Browse all" button — NOT every .btn-primary
     site-wide. That used to be the bare .btn-primary selector, which
     silently hid the wallpaper download button, the contact form's
     submit button, and the 404/thank-you page buttons below 900px too,
     since they all share the same button class. */
  .nav-browse-btn {
    display: none;
  }

  .wallpaper-detail {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    position: static;
  }
}

/* Mobile: 2-column wallpaper grid */
@media (max-width: 720px) {
  .site-header {
    padding: 14px 16px 0;
  }

  .header-inner {
    height: 60px;
    padding: 0 14px;
  }

  :root {
    --nav-height: 74px;
    --nav-gap: 24px;
  }

  .section {
    padding: 64px 0;
  }

  .search-hero {
    padding: 24px 0 40px;
  }

  .search-bar {
    padding-left: 16px;
  }

  .search-bar-btn {
    padding: 11px 18px;
  }

  .wallpaper-grid-desktop,
  .trending-grid-desktop {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wallpaper-grid-mobile,
  .trending-grid-mobile {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .featured-image {
    aspect-ratio: 4 / 3;
  }

  .footer-columns {
    grid-template-columns: 1fr;
  }

  .footer-stats {
    gap: 10px 16px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .section-inner,
  .footer-inner {
    padding: 0 20px;
  }
}