/*
 * WallpaperCG - Neon Grid theme (revamp, November 2026)
 *
 * Thirteen greys carry the page. Neon marks only what is live: the card under the pointer, the focused
 * field, the open menu, the action you can take. Every class and id here is one the templates already print.
 *
 * Fonts in /assets/fonts (Latin subsets), SIL Open Font License 1.1, https://openfontlicense.org
 *   Orbitron - Copyright 2018 The Orbitron Project Authors (https://github.com/theleagueof/orbitron),
 *              with Reserved Font Name "Orbitron"
 *   Exo 2    - Copyright 2013 The Exo 2 Project Authors (https://github.com/googlefonts/Exo-2.0)
 */

@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Exo 2";
  src: url("fonts/exo2-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  /* thirteen greys, darkest first */
  --g0: #07080a;
  --g1: #0c0e11;
  --g2: #111317;
  --g3: #16191d;
  --g4: #1b1f24;
  --g5: #22262c;
  --g6: #2a2f36;
  --g7: #353b43;
  --g8: #464d56;
  --g9: #5c646e;
  --g10: #7f8791;
  --g11: #a7aeb6;
  --g12: #cdd2d7;
  --g13: #eef0f2;

  /* neon, for highlights only */
  --cyan: #00f0ff;
  --cyan-rgb: 0, 240, 255;
  --magenta: #ff2bd6;
  --magenta-rgb: 255, 43, 214;
  --lime: #b6ff3b;
  --lime-rgb: 182, 255, 59;
  --violet: #a46bff;
  --violet-rgb: 164, 107, 255;
  --ink: #031417; /* text on a neon fill */

  --font-display: "Orbitron", "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Exo 2", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Text sizes. Desktop runs at 90% (see html below), which took the small labels under 10px. Each size carries a pixel
     floor, so nothing meant to be read is under 12px on any screen and running text is at least 15px. */
  --fs-label: max(.75rem, 12px);   /* resolution, Download, counts, row numbers */
  --fs-ui: max(.875rem, 13px);     /* menu, buttons, form labels, list heads */
  --fs-text: max(1rem, 15px);      /* tags, list links, fields, the menu's tiles */

  --page-max: 105rem;
  --gutter: clamp(1rem, 3vw, 3rem);
  --gap: clamp(1.25rem, 2vw, 2rem);      /* between cards */
  --section: clamp(3rem, 6vw, 5.5rem);  /* between sections */
  --header-h: 4rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--g7) var(--g1);
}
/* Desktop screens show the whole site at 90%, as Chrome's 90% zoom does; phones and tablets stay at 100%.
   Sizes in this file are in rem (1rem = 16px at 100%), so this one line scales them all. Hairlines, glows and
   the background grid stay in px. Ads and the reCAPTCHA box are never scaled. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html { font-size: 90%; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--g1);
  color: var(--g12);
  font: 400 1rem/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the grid the whole site sits on, with two faint neon glows */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 6% -12%, rgba(var(--cyan-rgb), .075), transparent 62%),
    radial-gradient(1000px 720px at 104% 112%, rgba(var(--magenta-rgb), .06), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 48px 48px;
}

a {
  color: var(--g13);
  text-decoration: none;
  transition: color .2s, text-shadow .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
a:hover { color: var(--cyan); }

img { max-width: 100%; border: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--g13);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
}
/* Page titles use the reading face. Orbitron's wide, squared letters slow down a long mixed-case name ("Phantom Blade
   Zero (Video Game) Wallpapers"); it stays for the logo, the home banner and the short capital labels. */
h1 { font-family: var(--font-ui); font-weight: 800; letter-spacing: .005em; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::selection { background: var(--cyan); color: var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--g1); }
::-webkit-scrollbar-thumb { background: var(--g7); border: 3px solid var(--g1); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ------------------------------------------------------------------ page frame */
#page { display: flex; flex-direction: column; min-height: 100vh; }
#content { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) .375rem; }
.col-right { width: 100%; }
.col-right-footer { margin-top: auto; }
div.clear { clear: both; }

/* ------------------------------------------------------------------ header */
#headbg {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 14, 17, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--g6);
}
#headbg::after { /* the neon edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan) 18%, var(--magenta) 55%, transparent 92%);
  box-shadow: 0 0 10px rgba(var(--cyan-rgb), .5);
}

#header {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  max-width: var(--page-max);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Wordmark drawn by the logo box; the link keeps its own text for screen readers and covers the box. */
#header .logo { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: .5625rem; height: 2.5rem; }
/* Under the pointer the two words decode out of static, like the names in the category menu: functions.js feeds each
   word through --logo-a / --logo-b while it runs and locks the word's width (--logo-a-w / --logo-b-w), so nothing
   beside the logo moves. */
#header .logo::before {
  content: var(--logo-a, "WALLPAPER");
  width: var(--logo-a-w, auto);
  white-space: nowrap;
  font: 700 1.125rem/1 var(--font-display);
  letter-spacing: .16em;
  color: var(--g13);
  transition: color .35s, text-shadow .35s;
}
#header .logo.decoding::before { color: var(--cyan); text-shadow: 0 0 10px rgba(var(--cyan-rgb), .8); transition: none; }
#header .logo::after {
  content: var(--logo-b, "CG");
  width: var(--logo-b-w, auto);
  white-space: nowrap;
  padding: .375rem .375rem .3125rem .4375rem;
  font: 900 .9375rem/1 var(--font-display);
  letter-spacing: .08em;
  color: var(--cyan);
  border: 1px solid rgba(var(--cyan-rgb), .7);
  text-shadow: 0 0 8px rgba(var(--cyan-rgb), .9), 0 0 20px rgba(var(--cyan-rgb), .5);
  box-shadow: inset 0 0 10px rgba(var(--cyan-rgb), .2), 0 0 14px rgba(var(--cyan-rgb), .3);
  transition: color .25s, border-color .25s, box-shadow .25s, text-shadow .25s;
}
/* the drawn words are decoration to a screen reader, which reads the link; where the "/ alt" form is not understood the
   plain declarations above stand (a var() declaration cannot fall back the usual way) */
@supports (content: "x" / "") {
  #header .logo::before { content: var(--logo-a, "WALLPAPER") / ""; }
  #header .logo::after { content: var(--logo-b, "CG") / ""; }
}
#header .logo a { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: transparent; font-size: 1px; white-space: nowrap; }
#header .logo:hover::after {
  color: var(--magenta);
  border-color: rgba(var(--magenta-rgb), .8);
  text-shadow: 0 0 8px rgba(var(--magenta-rgb), .9), 0 0 20px rgba(var(--magenta-rgb), .5);
  box-shadow: inset 0 0 10px rgba(var(--magenta-rgb), .2), 0 0 14px rgba(var(--magenta-rgb), .35);
}

/* main menu */
nav.primary-navigation { margin-left: auto; height: 100%; }
.primary-navigation > ul { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; }
.primary-navigation > ul > li { position: relative; display: flex; align-items: center; list-style: none; border: 0 !important; /* Home carries an inline divider */ }
.primary-navigation > ul > li + li::before { content: ""; width: 1px; height: 1.125rem; background: var(--g7); }
.primary-navigation > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: 0 1rem;
  font: 600 var(--fs-ui)/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g11);
}
.primary-navigation > ul > li > a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .75rem;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.primary-navigation > ul > li:hover > a,
.primary-navigation > ul > li:focus-within > a { color: var(--g13); }
.primary-navigation > ul > li:hover > a::after,
.primary-navigation > ul > li:focus-within > a::after { transform: scaleX(1); }
/* The pages use three icons: the menu arrow, the back-to-top arrow and Download (further down). They are drawn as masks
   in the text colour, in place of the Font Awesome set: 93 KB of icon fonts were preloaded on every page for three glyphs. */
i.fas,
i.fa {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background: currentColor;
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
i.fa-angle-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); }
i.fa-arrow-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.primary-navigation .fa-angle-down { font-size: .8125rem; color: var(--cyan); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .3s; }
.primary-navigation li:hover .fa-angle-down,
.primary-navigation li:focus-within .fa-angle-down { transform: rotate(180deg); filter: drop-shadow(0 0 4px var(--cyan)); }

/* The category panel powers on like a neon sign: the label flickers, a laser runs out from under it along the top edge,
   a scan line drops through the panel and the tiles ignite in a wave from that corner, each in its own neon, while
   functions.js decodes the names out of static and lets a light follow the pointer. Every effect is an animation set on
   the open state only, so it replays on each open. Closing waits a beat (a pointer that slips off for an instant keeps
   the menu) and then fades. */
@property --flash { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --reveal { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

.primary-navigation > ul > li:has(> ul.dropdown):hover > a,
.primary-navigation > ul > li:has(> ul.dropdown):focus-within > a { text-shadow: 0 0 12px rgba(var(--cyan-rgb), .45); animation: cg-flicker .5s linear; }

.primary-navigation ul.dropdown {
  --cols: 5;
  --row-step: .066s; /* the scan line crosses a row in about this time */
  --col-step: .03s;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 120;
  display: none;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: .5rem;
  width: min(55rem, calc(100vw - 2 * var(--gutter)));
  margin: 0;
  padding: 1.25rem;
  list-style: none;
  background:
    radial-gradient(20rem 13rem at var(--mx, 92%) var(--my, 0%), rgba(var(--cyan-rgb), .22), transparent 70%), /* the light at the pointer */
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
    linear-gradient(rgba(17, 19, 23, .97), rgba(17, 19, 23, .97)) 0 0 / 100% var(--reveal) no-repeat; /* the fill, poured in behind the scan line */
  border: 1px solid var(--g7);
  border-top: 2px solid var(--cyan);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .65), 0 -2px 18px rgba(var(--cyan-rgb), .25);
  opacity: 0;
  translate: 0 -.5rem;
  transition: opacity .18s ease .1s, translate .18s ease .1s;
  transition: opacity .18s ease .1s, translate .18s ease .1s, display .28s allow-discrete; /* stays shown while it fades */
}
.primary-navigation li:hover > ul.dropdown,
.primary-navigation li:focus-within > ul.dropdown {
  display: grid;
  opacity: 1;
  translate: none;
  transition-delay: 0s;
  animation: cg-drop .14s linear backwards, cg-fill .46s cubic-bezier(.3, .3, .6, 1) .04s backwards;
}
/* (the open animations fill backwards only: one still holding a value when the menu closes stops Chrome fading it out) */
/* the laser, over the top border */
.primary-navigation ul.dropdown::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  right: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--magenta), #fff 60%, var(--cyan));
  box-shadow: 0 0 10px var(--cyan), 0 0 24px rgba(var(--cyan-rgb), .8);
  transform-origin: right;
  opacity: 0;
}
/* the scan line: a band whose lower edge is the line, grown down the panel so it never leaves it */
.primary-navigation ul.dropdown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent calc(100% - 3rem), rgba(var(--cyan-rgb), .1) calc(100% - 1.25rem), rgba(var(--cyan-rgb), .55) calc(100% - 2px), #fff);
  opacity: 0;
}
.primary-navigation li:hover > ul.dropdown::before,
.primary-navigation li:focus-within > ul.dropdown::before { animation: cg-laser .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.primary-navigation li:hover > ul.dropdown::after,
.primary-navigation li:focus-within > ul.dropdown::after { animation: cg-scan .46s cubic-bezier(.3, .3, .6, 1) .04s backwards; }

.primary-navigation ul.dropdown li {
  list-style: none;
  --acc: var(--cyan);
  --acc-rgb: var(--cyan-rgb);
  /* where the tile sits, counted from the corner under the label (functions.js sets --i, the tile's number) */
  --row: round(down, var(--i) / var(--cols));
  --col: calc(var(--cols) - 1 - mod(var(--i), var(--cols)));
}
.primary-navigation ul.dropdown li:nth-child(4n+2) { --acc: var(--magenta); --acc-rgb: var(--magenta-rgb); }
.primary-navigation ul.dropdown li:nth-child(4n+3) { --acc: var(--lime); --acc-rgb: var(--lime-rgb); }
.primary-navigation ul.dropdown li:nth-child(4n+4) { --acc: var(--violet); --acc-rgb: var(--violet-rgb); }
.primary-navigation li:hover > ul.dropdown > li,
.primary-navigation li:focus-within > ul.dropdown > li {
  animation: cg-ignite .64s linear backwards;
  animation-delay: calc(var(--row) * var(--row-step) + var(--col) * var(--col-step)); /* no script: all at once */
}
.primary-navigation ul.dropdown a {
  position: relative;
  display: block;
  padding: .6875rem .875rem;
  font: 500 var(--fs-text)/1.2 var(--font-ui);
  color: color-mix(in srgb, var(--acc) calc(var(--flash) * 100%), var(--g12));
  background: rgba(22, 25, 29, .86); /* --g3, letting the panel's light through */
  border: 1px solid var(--g5);
  border-left: 2px solid color-mix(in srgb, var(--acc) calc(var(--flash) * 100%), var(--g8));
  box-shadow: 0 0 calc(var(--flash) * 1.25rem) rgba(var(--acc-rgb), calc(var(--flash) * .5));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .2s, border-color .2s, box-shadow .2s; /* not color: the name must be back the instant its static ends */
}
/* a glint that crosses the tile under the pointer */
.primary-navigation ul.dropdown a::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--acc-rgb), .28) 50%, transparent 70%);
  translate: -101% 0;
}
.primary-navigation ul.dropdown a:hover,
.primary-navigation ul.dropdown a:focus-visible {
  color: var(--g13);
  background: var(--g5);
  border-left-color: var(--acc);
  box-shadow: inset 10px 0 16px -12px var(--acc), 0 0 14px rgba(var(--acc-rgb), .18);
  animation: cg-glitch .38s steps(1, end);
}
.primary-navigation ul.dropdown a:hover::before,
.primary-navigation ul.dropdown a:focus-visible::before { translate: 101% 0; transition: translate .6s var(--ease); }
/* while a name decodes, the real text keeps its place (and stays what screen readers read) and the static covers it */
.primary-navigation ul.dropdown a.decoding { color: transparent; }
.primary-navigation ul.dropdown a.decoding::after {
  content: attr(data-scramble);
  content: attr(data-scramble) / "";
  position: absolute;
  top: .6875rem;
  left: .875rem;
  right: .875rem;
  overflow: hidden;
  white-space: nowrap;
  color: var(--acc);
  text-shadow: 0 0 8px rgba(var(--acc-rgb), .8);
}

/* After the first full show on a page functions.js marks the panel "quick": later opens run in about a quarter of the
   time, with no flicker, and the names are there at once. */
.primary-navigation ul.dropdown.quick { --row-step: .016s; --col-step: .008s; }
.primary-navigation li:hover > ul.dropdown.quick,
.primary-navigation li:focus-within > ul.dropdown.quick { animation-duration: .1s, .2s; animation-delay: 0s, .02s; }
.primary-navigation li:hover > ul.dropdown.quick::before,
.primary-navigation li:focus-within > ul.dropdown.quick::before { animation-duration: .3s; }
.primary-navigation li:hover > ul.dropdown.quick::after,
.primary-navigation li:focus-within > ul.dropdown.quick::after { animation-duration: .2s; animation-delay: .02s; }
.primary-navigation li:hover > ul.dropdown.quick > li,
.primary-navigation li:focus-within > ul.dropdown.quick > li { animation-name: cg-ignite-quick; animation-duration: .3s; animation-timing-function: ease-out; }
@keyframes cg-ignite-quick {
  0%   { opacity: 0; translate: 0 -.25rem; --flash: .85; }
  35%  { opacity: 1; translate: none; }
  100% { opacity: 1; --flash: 0; }
}

@keyframes cg-flicker {
  0%   { color: var(--g9); text-shadow: none; }
  10%  { color: var(--cyan); text-shadow: 0 0 12px rgba(var(--cyan-rgb), .9); }
  16%  { color: var(--g9); text-shadow: none; }
  28%  { color: var(--cyan); text-shadow: 0 0 14px rgba(var(--cyan-rgb), .9); }
  34%  { color: var(--g10); text-shadow: none; }
  50%  { color: var(--cyan); text-shadow: 0 0 16px rgba(var(--cyan-rgb), .9); }
  100% { color: var(--g13); text-shadow: 0 0 12px rgba(var(--cyan-rgb), .45); }
}
@keyframes cg-drop {
  from { opacity: 0; translate: 0 -.5rem; }
}
@keyframes cg-fill {
  from { --reveal: 0%; }
}
@keyframes cg-laser {
  0%   { opacity: 1; transform: scaleX(0); }
  45%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes cg-scan {
  0%   { opacity: 1; height: 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; height: 100%; }
}
@keyframes cg-ignite { /* in, a flash of the tile's neon, two flickers, and it settles */
  0%   { opacity: 0; translate: 0 -.375rem; --flash: 0; }
  14%  { opacity: 1; translate: none; --flash: 1; }
  20%  { opacity: .2; }
  27%  { opacity: 1; }
  34%  { opacity: .5; }
  42%  { opacity: 1; --flash: 1; }
  100% { opacity: 1; --flash: 0; }
}
@keyframes cg-glitch {
  0%   { translate: 2px 0; text-shadow: -2px 0 rgba(var(--magenta-rgb), .9), 2px 0 rgba(var(--cyan-rgb), .9); }
  20%  { translate: -2px 0; text-shadow: 2px 0 rgba(var(--magenta-rgb), .9), -2px 0 rgba(var(--cyan-rgb), .9); }
  40%  { translate: 1px 0; text-shadow: -1px 0 rgba(var(--magenta-rgb), .8), 1px 0 rgba(var(--cyan-rgb), .8); }
  60%  { translate: 0 0; text-shadow: 0 0 10px rgba(var(--acc-rgb), .7); }
  100% { translate: 0 0; text-shadow: none; }
}

/* search */
#form { flex: 0 1 18.75rem; display: flex; justify-content: flex-end; }
#search { position: relative; width: 100%; max-width: 18.75rem; margin: 0; }
#search input.field {
  width: 100%;
  height: 2.375rem;
  padding: 0 2.875rem 0 .875rem;
  font: 400 var(--fs-text)/1 var(--font-ui);
  letter-spacing: .01em;
  color: var(--g13);
  background: var(--g3);
  border: 1px solid var(--g7);
  border-radius: 2px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#search input.field:hover { border-color: var(--g8); }
#search input.field:focus {
  outline: none;
  background: var(--g2);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .14), 0 0 18px rgba(var(--cyan-rgb), .22);
}
/* a hint while the box is empty (the field is required, so empty means invalid) */
#search:has(> input.field:invalid)::before {
  content: "Search wallpapers";
  content: "Search wallpapers" / "";
  position: absolute;
  left: .9375rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-text);
  color: var(--g10); /* --g9 is 2.9:1 on this field; small text needs 4.5:1 */
  pointer-events: none;
}
#search input.button {
  position: absolute;
  top: .1875rem;
  right: .1875rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 0; /* the value "Search" stays its accessible name */
  color: transparent;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  background: var(--g5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transition: background-color .2s, box-shadow .2s;
}
#search input.button:hover { background-color: var(--g7); box-shadow: 0 0 12px rgba(var(--cyan-rgb), .35); }

/* phones: the search box opens in a layer (functions.js moves #search into .search-window) */
div.search-mobile { display: none; }
div.search-window {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  padding: 5.5rem 1rem 0;
  background: rgba(7, 8, 10, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
div.search-window #search { display: block; max-width: 35rem; margin: 0 auto; }
div.search-window #search input.field { height: 3.125rem; font-size: 1.0625rem; padding-right: 3.375rem; border-color: rgba(var(--cyan-rgb), .6); box-shadow: 0 0 22px rgba(var(--cyan-rgb), .2); }
div.search-window #search:has(> input.field:invalid)::before { font-size: 1.0625rem; }
div.search-window #search input.button { top: .3125rem; right: .3125rem; width: 2.5rem; height: 2.5rem; background-size: 1.1875rem; }

/* ------------------------------------------------------------------ heroes: home and every pack/category page */
#intro,
#intro_pack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 clamp(2.25rem, 4.5vw, 4rem);
  background-color: var(--g3);
  border: 1px solid var(--g6);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
#intro::before,
#intro_pack::before { /* grey wash and scanlines over the photo, darkest where the text sits */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(12, 14, 17, .95) 0%, rgba(12, 14, 17, .84) 42%, rgba(12, 14, 17, .46) 76%, rgba(12, 14, 17, .22) 100%);
}
#intro::after,
#intro_pack::after { /* HUD corners */
  content: "";
  position: absolute;
  inset: .625rem;
  pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 1.625rem 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top left / 2px 1.625rem no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 1.625rem 2px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 2px 1.625rem no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--cyan-rgb), .7));
}
#intro_blur,
#intro_blur_pack { position: relative; max-width: 55rem; padding: clamp(1.625rem, 4.6vw, 4.125rem) clamp(1.25rem, 4vw, 3.625rem); }
#intro_blur::before,
#intro_blur_pack::before {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin-bottom: 1.125rem;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(var(--cyan-rgb), .7);
}
#intro h1 { margin: 0; }
p.welcome {
  font: 800 clamp(1.625rem, 4.2vw, 3.375rem)/1.08 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g13);
  text-shadow: 0 0 22px rgba(var(--cyan-rgb), .35);
}
#intro_blur_pack h1 { font-size: clamp(1.5rem, 3.4vw, 2.75rem); line-height: 1.12; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); /* no glow: it blurs the letters */ }
span.welcome_note { display: block; max-width: 72ch; margin-top: 1rem; font-size: max(1.0625rem, 15px); line-height: 1.7; color: var(--g12); }
span.welcome_note a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(var(--cyan-rgb), .45); text-underline-offset: .2em; } /* a link is not told by colour alone */
span.welcome_note a:hover { color: var(--g13); }

/* pack and category pages: the pack info is a compact bar, so the wallpapers start near the top of the screen */
#intro_pack { --hx: clamp(1.25rem, 3.2vw, 3rem); --hy: clamp(1.125rem, 2vw, 1.75rem); margin-bottom: clamp(1.5rem, 2.4vw, 2.25rem); }
#intro_pack::before { /* the text runs wider here, so the wash stays dark further across - and dark enough at the far end
                         that a white picture reads as a dim picture, not a pale grey haze */
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(12, 14, 17, .96) 0%, rgba(12, 14, 17, .93) 52%, rgba(12, 14, 17, .76) 80%, rgba(12, 14, 17, .52) 100%);
}
#intro_pack::after { /* the rail takes the place of the top-left corner mark */
  background:
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 1.625rem 2px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 2px 1.625rem no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--magenta-rgb), .7));
}
#intro_blur_pack { max-width: 64rem; padding: var(--hy) var(--hx); }
#intro_blur_pack::before { /* the neon bar turns into a rail beside the text, so it adds no height */
  position: absolute;
  left: calc(var(--hx) - 1rem);
  top: var(--hy);
  bottom: var(--hy);
  width: 3px;
  height: auto;
  margin: 0;
  background: linear-gradient(180deg, var(--cyan), var(--magenta));
}
#intro_blur_pack h1 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.2; }
#intro_blur_pack span.welcome_note { max-width: none; margin-top: .625rem; line-height: 1.6; }

button.note-more { display: none; } /* phones only: see the phone rules */

/* ------------------------------------------------------------------ headings in the page */
.col-right > h1 {
  margin: .25rem 0 clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  line-height: 1.25;
}
.col-right h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--g13);
}
.col-right h2::before {
  content: "";
  flex: 0 0 auto;
  width: .5625rem;
  height: .5625rem;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform: rotate(45deg);
}
.col-right h2::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--g7), transparent); }
/* each heading sits in its own div; every section after the first gets a magenta mark */
.col-right > div ~ div > h2::before { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
/* a form page's heading sits over the form, not at the page edge */
.col-right > h2:has(+ form.form),
.col-right > h2:has(+ p.form-msg) { max-width: 48.75rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ card lists */
div.pics { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap); margin: 0 0 var(--section); }
div.pics:empty { display: none; } /* a search that finds no wallpapers still prints an empty list */

p.wallpapers__item {
  --cols: 3;
  --acc: var(--cyan);
  --acc-rgb: var(--cyan-rgb);
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  margin: 0;
  background: var(--g3);
  border: 1px solid var(--g6);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
p.wallpapers__item:nth-child(4n+2) { --acc: var(--magenta); --acc-rgb: var(--magenta-rgb); }
p.wallpapers__item:nth-child(4n+3) { --acc: var(--lime); --acc-rgb: var(--lime-rgb); }
p.wallpapers__item:nth-child(4n+4) { --acc: var(--violet); --acc-rgb: var(--violet-rgb); }

/* cards per row from 1200px to 1799px (1619px on desktop); the media queries at the end set the rest */
p.wallpapers__item.featured { --cols: 3; }
p.wallpapers__item.big,
p.wallpapers__item.orig { --cols: 3; }
p.wallpapers__item.uwide { --cols: 2; }
p.wallpapers__item.square { --cols: 4; }
p.wallpapers__item.vertical { --cols: 5; }

p.wallpapers__item:hover,
p.wallpapers__item:focus-within {
  z-index: 2;
  border-color: rgba(var(--acc-rgb), .75);
  box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35), 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(var(--acc-rgb), .22);
  transform: translateY(-2px);
}

/* HUD brackets that lock on to the card under the pointer */
p.wallpapers__item::before,
p.wallpapers__item::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: .875rem;
  height: .875rem;
  pointer-events: none;
  border: 0 solid var(--acc);
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--acc));
  transition: opacity .25s, transform .25s var(--ease);
}
p.wallpapers__item::before { top: -.375rem; left: -.375rem; border-width: 2px 0 0 2px; transform: translate(5px, 5px); }
p.wallpapers__item::after { right: -.375rem; bottom: -.375rem; border-width: 0 2px 2px 0; transform: translate(-5px, -5px); }
p.wallpapers__item:hover::before,
p.wallpapers__item:hover::after,
p.wallpapers__item:focus-within::before,
p.wallpapers__item:focus-within::after { opacity: 1; transform: none; }

.wallpapers__canvas { position: relative; display: block; overflow: hidden; background: var(--g2); }
.wallpapers__canvas img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
/* Until a picture arrives its place shimmers in the card's colour. functions.js turns this on (cg-js) and marks each
   picture as it loads, so the shimmer never runs behind a picture that is already there. Only the first pictures on a
   page shimmer: the lazy ones further down start loading long before they scroll into view. */
.cg-js .wallpapers__canvas img:not([loading="lazy"]):not(.is-loaded) {
  background: linear-gradient(100deg, transparent 38%, rgba(var(--acc-rgb, var(--cyan-rgb)), .12) 50%, transparent 62%) 150% 0 / 200% 100% no-repeat;
  animation: cg-shimmer 1.3s linear infinite;
}
@keyframes cg-shimmer { to { background-position: -50% 0; } }
p.wallpapers__item:hover .wallpapers__canvas img { transform: scale(1.035); }

/* even rows where the pack type fixes the shape; .orig and .uwide keep each image's own shape */
p.wallpapers__item.big .wallpapers__canvas img,
p.wallpapers__item.featured .wallpapers__canvas img { aspect-ratio: 16 / 9; object-fit: cover; }
p.wallpapers__item.vertical .wallpapers__canvas img { aspect-ratio: 1 / 2; object-fit: cover; }
p.wallpapers__item.square .wallpapers__canvas img { aspect-ratio: 1 / 1; object-fit: cover; }

/* a light sweep across the picture on hover */
.wallpapers__canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .09) 50%, transparent 62%);
  transform: translateX(-110%);
}
p.wallpapers__item:hover .wallpapers__canvas::after { transform: translateX(110%); transition: transform .9s var(--ease); }

/* wallpaper cards: one slim strip along the bottom of the picture carries the resolution (left) and Download (right),
   so nothing else sits on the picture and the tags keep the full width below it */
p.wallpapers__item:not(.featured) .wallpapers__canvas::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2.5rem;
  pointer-events: none;
  background: rgba(10, 12, 15, .78); /* dark enough that the labels hold 4.5:1 over a white picture */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(var(--acc-rgb), .3);
  transition: border-color .25s;
}
p.wallpapers__item:not(.featured):hover .wallpapers__canvas::before,
p.wallpapers__item:not(.featured):focus-within .wallpapers__canvas::before { border-top-color: rgba(var(--acc-rgb), .8); }
span.origres {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 .75rem;
  font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--g12);
}
span.download { position: absolute; right: 0; bottom: 0; z-index: 2; }
span.download a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.5rem;
  padding: 0 .875rem;
  font: 700 var(--fs-label)/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g13);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
span.download a::before { /* the download arrow, a mask like the other two icons */
  content: "";
  flex: 0 0 auto;
  width: .875rem;
  height: .875rem;
  background: var(--acc, var(--cyan)); /* the card's own neon, like its border and brackets */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .2s;
}
span.download a:hover,
span.download a:focus-visible { color: var(--ink); background: var(--acc, var(--cyan)); border-color: var(--acc, var(--cyan)); box-shadow: 0 0 18px rgba(var(--acc-rgb, var(--cyan-rgb)), .6); }
span.download a:hover::before,
span.download a:focus-visible::before { background: var(--ink); }

/* The tags keep one line in the card, cut with an ellipsis when long. Under the pointer, or after a tap, the line opens
   downward over whatever is below, so the whole list can be read and nothing in the grid moves. The card reserves the
   closed line's height (--tags-h: its padding, one line and its top border), since the line itself is taken out of flow. */
p.wallpapers__item:not(.featured) { --tags-h: calc(1.6875rem + 1.4 * var(--fs-text) + 1px); padding-bottom: var(--tags-h); }
p.wallpapers__item:not(.featured)::after { display: none; } /* no bottom corner mark here: it would float over the opened tags */
span.tags {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--tags-h));
  display: block;
  padding: .8125rem 1rem .875rem;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--g12);
  border-top: 1px solid var(--g6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
p.wallpapers__item:hover span.tags,
p.wallpapers__item:focus-within span.tags {
  left: -1px;
  right: -1px;
  z-index: 3;
  white-space: normal;
  overflow: visible;
  color: var(--g13);
  background: var(--g3);
  border: 1px solid rgba(var(--acc-rgb), .75); /* carries the card's lit border round the opened line */
  border-top-color: var(--g6);
  box-shadow: 0 14px 24px -8px rgba(0, 0, 0, .6);
}

span.authordata {
  position: absolute;
  top: .625rem;
  left: .625rem;
  z-index: 3;
  max-width: calc(100% - 1.25rem);
  padding: .25rem .5rem;
  font: 500 var(--fs-label)/1.3 var(--font-ui);
  background: rgba(12, 14, 17, .78);
  border: 1px solid var(--g7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
span.authordata a { color: var(--g11); }
span.authordata a:hover { color: var(--cyan); }

/* collection and category cards */
a.wallpapers__canvas_image { display: block; color: inherit; }
p.wallpapers__item.featured .wallpapers__canvas::before { /* shade under the caption */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 68%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 12, 15, .95) 0%, rgba(10, 12, 15, .62) 46%, transparent 100%);
}
span.packtitle {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 2.375rem;
  z-index: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding-left: .75rem;
  font: 700 1.0625rem/1.3 var(--font-ui);
  letter-spacing: .02em;
  color: var(--g13);
  transition: color .2s, text-shadow .2s;
}
span.packtitle::before { /* the card's neon tick, beside the last line */
  content: "";
  position: absolute;
  left: 0;
  bottom: .2em;
  width: 3px;
  height: .95em;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
}
span.packtitle.cat { bottom: 1rem; }
span.wallcount {
  position: absolute;
  left: 1.75rem;
  bottom: .9375rem;
  z-index: 2;
  font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g11);
  transition: color .2s;
}
p.wallpapers__item.featured:hover span.packtitle { color: var(--acc); text-shadow: 0 0 10px rgba(var(--acc-rgb), .55); }
p.wallpapers__item.featured:hover span.wallcount { color: var(--g13); }

/* ------------------------------------------------------------------ load more, spinner, ripples */
#load-more-container,
#subcat-load-more-container { display: flex; justify-content: center; margin: calc(var(--section) * -.45) 0 var(--section); }
button.load-more-button,
button.subcat-load-more {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 2.25rem .8125rem;
  font: 700 var(--fs-ui)/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
  cursor: pointer;
  background: rgba(var(--cyan-rgb), .06);
  border: 1px solid rgba(var(--cyan-rgb), .6);
  box-shadow: inset 0 0 18px rgba(var(--cyan-rgb), .08);
  transition: color .2s, background-color .2s, box-shadow .2s;
}
button.load-more-button:hover,
button.subcat-load-more:hover { color: var(--ink); background: var(--cyan); box-shadow: 0 0 26px rgba(var(--cyan-rgb), .55); }
button.subcat-load-more:disabled { color: var(--g10); background: var(--g3); border-color: var(--g7); box-shadow: none; cursor: progress; }

.lds-ring { position: relative; flex: 0 0 100%; height: 4.75rem; }
.lds-ring div {
  position: absolute;
  top: 1rem;
  left: calc(50% - 1.375rem);
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid transparent;
  border-top-color: var(--cyan);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(var(--cyan-rgb), .7));
  animation: cg-spin 1.1s cubic-bezier(.5, 0, .5, 1) infinite;
}
.lds-ring div:nth-child(2) { border-top-color: var(--magenta); animation-delay: -.3s; }
.lds-ring div:nth-child(3) { border-top-color: var(--lime); animation-delay: -.2s; }
.lds-ring div:nth-child(4) { animation-delay: -.1s; }
@keyframes cg-spin { to { transform: rotate(360deg); } }

/* Press feedback: functions.js adds .ripples > .ripplesWave where the element was pressed (--x, --y), with --reach the
   distance to its farthest corner and a run time to suit its size, and removes it when the ring has run. A neon ring,
   white at the core and glowing in the element's own accent - the colour its hover border uses (--acc-rgb, set per card;
   cyan outside a card) - with a faint wake behind it. At the start the ring is a spark at the point pressed. */
@property --ring { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ripples { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ripplesWave {
  --rgb: var(--acc-rgb, var(--cyan-rgb));
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
    transparent calc(var(--ring) - 1.5rem),
    rgba(var(--rgb), .16) calc(var(--ring) - .375rem),
    rgba(var(--rgb), .85) calc(var(--ring) - 2px),
    rgba(255, 255, 255, .95) var(--ring),
    rgba(var(--rgb), .6) calc(var(--ring) + 2px),
    transparent calc(var(--ring) + .5rem));
  animation: cg-ripple .42s cubic-bezier(.2, .65, .3, 1) forwards;
}
@keyframes cg-ripple {
  from { --ring: 0px; }
  60%  { opacity: 1; }
  to   { --ring: var(--reach, 20rem); opacity: 0; }
}

/* ------------------------------------------------------------------ footer: lists */
.table-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; /* Suggested has one to nine rows; it should not stretch to the others' height */
  gap: var(--gap);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: .75rem var(--gutter) var(--section);
}
table.responsive-table {
  --t: var(--cyan);
  --t-rgb: var(--cyan-rgb);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--g2);
  border: 1px solid var(--g6);
  counter-reset: cg-row;
}
table.trending { --t: var(--magenta); --t-rgb: var(--magenta-rgb); }
table.suggested { --t: var(--lime); --t-rgb: var(--lime-rgb); }
.responsive-table th {
  padding: 1.125rem 1.25rem 1rem;
  font: 700 var(--fs-ui)/1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--t);
  text-shadow: 0 0 10px rgba(var(--t-rgb), .55);
  background: linear-gradient(90deg, rgba(var(--t-rgb), .1), transparent 72%);
  border-bottom: 1px solid var(--g6);
}
.responsive-table th::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin: 0 .75rem 1px 0;
  background: var(--t);
  box-shadow: 0 0 8px var(--t);
  transform: rotate(45deg);
}
.responsive-table tbody tr { counter-increment: cg-row; }
.responsive-table td { padding: 0; border-bottom: 1px solid var(--g4); }
.responsive-table tbody tr:last-child td { border-bottom: 0; }
.responsive-table td a {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  padding: .75rem 1.25rem;
  font-size: var(--fs-text);
  color: var(--g12);
}
.responsive-table td a::before {
  content: counter(cg-row, decimal-leading-zero);
  content: counter(cg-row, decimal-leading-zero) / "";
  flex: 0 0 auto;
  min-width: 2ch;
  font: 600 var(--fs-label)/1 var(--font-mono);
  color: var(--g10);
  transition: color .2s;
}
.responsive-table td a:hover,
.responsive-table td a:focus-visible { color: var(--g13); background: var(--g4); box-shadow: inset 2px 0 0 var(--t); }
.responsive-table td a:hover::before,
.responsive-table td a:focus-visible::before { color: var(--t); }

/* ------------------------------------------------------------------ footer: links and apps */
#footer {
  position: relative;
  padding: 1.875rem var(--gutter) 2.25rem;
  text-align: center;
  background: var(--g0);
  border-top: 1px solid var(--g6);
}
#footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta) 30%, var(--cyan) 70%, transparent);
  opacity: .7;
}
#footer p.info { max-width: var(--page-max); margin: 0 auto; font-size: var(--fs-text); line-height: 2.3; color: var(--g8); }
#footer p.info a { padding: 0 .375rem; color: var(--g11); }
#footer p.info a:hover { color: var(--cyan); }
#footer span.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; margin-bottom: 1rem; }
#footer span.stores a { padding: 0; line-height: 0; }
#footer img.store_img { display: block; width: 9.375rem; height: auto; transition: transform .2s, filter .2s; }
#footer span.stores a:hover img.store_img { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(var(--cyan-rgb), .35)); }
#footer p.footer {
  margin-top: .625rem;
  font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g10);
}

/* back to top: custom.js shows it after 500px */
button.scrollToTopBtn {
  display: none;
  position: fixed;
  right: 1.125rem;
  bottom: 1.125rem;
  z-index: 90;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  color: var(--cyan);
  cursor: pointer;
  background: rgba(12, 14, 17, .88);
  border: 1px solid rgba(var(--cyan-rgb), .6);
  box-shadow: 0 0 16px rgba(var(--cyan-rgb), .25);
  transition: color .2s, background-color .2s, box-shadow .2s;
}
button.scrollToTopBtn .fa-2x { font-size: 1.125rem; }
button.scrollToTopBtn:hover { color: var(--ink); background: var(--cyan); box-shadow: 0 0 24px rgba(var(--cyan-rgb), .6); }

/* ------------------------------------------------------------------ forms (contact, report) */
form.form {
  position: relative;
  max-width: 48.75rem;
  margin: 0 auto 2.25rem;
  padding: 1.75rem clamp(1rem, 3vw, 2.125rem) 1.5rem;
  background: var(--g2);
  border: 1px solid var(--g6);
}
form.form::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  box-shadow: 0 0 12px rgba(var(--magenta-rgb), .5);
}
form.form p.field,
form.form p.area,
form.form p.file,
form.form p.select {
  display: grid;
  grid-template-columns: 13.75rem minmax(0, 1fr) .75rem;
  align-items: center;
  column-gap: .625rem;
  margin: 0 0 .875rem;
}
form.form p.area { align-items: start; }
form.form label {
  font: 600 var(--fs-ui)/1.35 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--g11);
}
form.form p.area label { padding-top: .75rem; }
form.form input.field,
form.form textarea.area,
form.form select {
  width: 100%;
  padding: .6875rem .8125rem;
  font: 400 var(--fs-text)/1.4 var(--font-ui); /* 16px on phones: an iPhone zooms the page in on any smaller field */
  color: var(--g13);
  background: var(--g1);
  border: 1px solid var(--g7);
  border-radius: 2px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
form.form textarea.area { min-height: 8.25rem; resize: vertical; }
form.form input.field:hover,
form.form textarea.area:hover { border-color: var(--g8); }
form.form input.field:focus,
form.form textarea.area:focus,
form.form select:focus {
  outline: none;
  background: var(--g0);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .14), 0 0 16px rgba(var(--cyan-rgb), .2);
}
form.form .error { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(var(--magenta-rgb), .16); }
form.form span.asterisk::after { content: "*"; content: "*" / ""; font-weight: 700; color: var(--magenta); text-shadow: 0 0 8px rgba(var(--magenta-rgb), .7); }
/* reCAPTCHA and the send button line up with the fields (the form guard's own style sets this from 1000px up) */
#content form.form .g-recaptcha,
#content form.form p.button { margin-left: 14.375rem; }
form.form p.button { margin-top: .375rem; }
form.form input.button {
  padding: .8125rem 2.25rem .75rem;
  font: 700 var(--fs-ui)/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #19000f;
  cursor: pointer;
  background: var(--magenta);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(var(--magenta-rgb), .45);
  transition: box-shadow .2s, filter .2s;
}
form.form input.button:hover { box-shadow: 0 0 30px rgba(var(--magenta-rgb), .7); filter: brightness(1.08); }
form.form input.button:disabled { color: var(--g10); background: var(--g6); box-shadow: none; cursor: not-allowed; filter: none; }
p.form-msg {
  max-width: 48.75rem;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  color: var(--g13);
  background: var(--g2);
  border: 1px solid rgba(var(--cyan-rgb), .5);
  box-shadow: 0 0 18px rgba(var(--cyan-rgb), .15);
}
form.form p.form-msg { margin: 0 0 1.125rem; }

/* ------------------------------------------------------------------ text pages (privacy, terms, copyright) */
div.content-text {
  max-width: 52rem; /* about 85 characters a line */
  margin: 0 auto 2.5rem;
  padding: 1.875rem clamp(1rem, 3.4vw, 2.75rem);
  font-size: max(1.0625rem, 16px);
  line-height: 1.75;
  color: var(--g12);
  background: var(--g2);
  border: 1px solid var(--g6);
}
div.content-text h1 { margin-bottom: 1.125rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
div.content-text strong { color: var(--g13); }
div.content-text a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(var(--cyan-rgb), .45); text-underline-offset: .2em; }
div.content-text a:hover { color: var(--g13); }

/* ------------------------------------------------------------------ search: Google's results when no pack matches */
/* Google's search element brings its own stylesheet plus the colours chosen in its control panel. These rules put it in
   the site's greys and neon and let the results use the full width. Google's branding and its ads are left as Google
   draws them. (The suggestions list hangs off <body>, so its rules are not under #content.) */
#content .gsc-control-cse {
  margin: 0 0 var(--section);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  font-family: var(--font-ui);
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--g12);
  background: linear-gradient(90deg, var(--cyan), var(--magenta)) top / 100% 2px no-repeat, var(--g2);
  border: 1px solid var(--g6);
}
#content .gsc-control-cse .gsc-table-result { font-family: var(--font-ui); }

/* the search field, matching the one in the header */
#content .gsc-control-cse form.gsc-search-box { max-width: 48rem; margin: 0; }
#content .gsc-control-cse .gsc-input-box {
  background: var(--g1);
  border: 1px solid var(--g7);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
#content .gsc-control-cse .gsc-input-box:hover { border-color: var(--g8); }
#content .gsc-control-cse .gsc-input-box:focus-within,
#content .gsc-control-cse .gsc-input-box-focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .14), 0 0 18px rgba(var(--cyan-rgb), .22); }
#content .gsc-control-cse .gsib_a {
  vertical-align: middle;
  padding: .25rem .625rem .25rem 3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") 1rem 50% / 1.125rem no-repeat;
}
#content .gsc-control-cse .gsib_a::before { width: 3rem; }
#content .gsc-control-cse input.gsc-input {
  height: 2.375rem !important; /* Google sets the field's height and white background on the element itself */
  background: transparent !important;
  color: var(--g13);
  font: 400 1rem/1.5 var(--font-ui);
}
#content .gsc-control-cse input.gsc-input::placeholder { color: var(--g10); }
#content .gsc-control-cse .gsib_b { width: 2.75rem; height: auto; padding: 0; vertical-align: middle; }
#content .gsc-control-cse .gscb_a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8791' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
}
#content .gsc-control-cse .gsst_a:hover .gscb_a,
#content .gsc-control-cse .gsst_a:focus .gscb_a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}

/* Web / Image tabs */
#content .gsc-control-cse .gsc-tabsArea { margin-top: 1.25rem; border-bottom: 1px solid var(--g6); }
#content .gsc-control-cse .gsc-tabHeader {
  margin: 0 1.75rem -1px 0;
  padding: .875rem 0 .8125rem;
  font: 600 var(--fs-ui)/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color .2s;
}
#content .gsc-control-cse .gsc-tabHeader.gsc-tabhInactive { color: var(--g10); background: transparent; cursor: pointer; }
#content .gsc-control-cse .gsc-tabHeader.gsc-tabhInactive:hover { color: var(--g13); }
#content .gsc-control-cse .gsc-tabHeader.gsc-tabhActive {
  color: var(--g13);
  background: transparent;
  border-bottom-color: var(--cyan);
  box-shadow: 0 8px 14px -10px rgba(var(--cyan-rgb), .9);
}
#content .gsc-control-cse .gsc-refinementsGradient { background: linear-gradient(to left, var(--g2), rgba(17, 19, 23, 0)); }

/* "About 2,160 results", and the full width Google caps at 700px */
#content .gsc-control-cse .gsc-wrapper,
#content .gsc-control-cse .gsc-above-wrapper-area { max-width: none; }
#content .gsc-control-cse table.gsc-above-wrapper-area-container { margin: 1rem 0 .875rem; }
#content .gsc-control-cse .gsc-result-info { padding: 0; font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .04em; color: var(--g10); }

/* image results: an even grid of tiles in place of Google's ragged 180px rows */
#content .gsc-control-cse .gsc-imageResult > .gsc-expansionArea {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: .875rem;
}
#content .gsc-control-cse .gsc-results .gsc-imageResult { width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; }
#content .gsc-control-cse .gsc-imageResult .gs-imageResult-popup {
  overflow: hidden;
  background: var(--g3);
  border: 1px solid var(--g6);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
#content .gsc-control-cse .gsc-imageResult .gs-imageResult-popup:hover,
#content .gsc-control-cse .gsc-imageResult .gs-imageResult-popup:focus-visible {
  border-color: rgba(var(--cyan-rgb), .75);
  box-shadow: 0 0 0 1px rgba(var(--cyan-rgb), .35), 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(var(--cyan-rgb), .22);
  transform: translateY(-2px);
}
#content .gsc-control-cse .gs-imageResult-popup .gs-image-thumbnail-box { padding: 0; }
#content .gsc-control-cse .gs-imageResult-popup .gs-image-box { width: 100%; }
#content .gsc-control-cse .gs-image-thumbnail-box a.gs-image { display: block; height: auto; }
#content .gsc-control-cse .gs-image-thumbnail-box img.gs-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
#content .gsc-control-cse .gs-imageResult-popup:hover img.gs-image { transform: scale(1.035); }
#content .gsc-control-cse .gs-imageResult-popup .gs-image-popup-box { /* the caption Google shows under the pointer */
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  padding: .5rem .75rem .5625rem;
  background: rgba(10, 12, 15, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(var(--cyan-rgb), .5);
}
#content .gsc-control-cse .gs-image-popup-box .gs-snippet { font-size: var(--fs-ui); color: var(--g13); }
#content .gsc-control-cse .gs-image-popup-box .gs-size { font: 600 var(--fs-label)/1.5 var(--font-mono); color: var(--lime); }
#content .gsc-control-cse .gs-image-popup-box .gs-visibleUrl { font-size: var(--fs-label); color: var(--g11); }
#content .gsc-control-cse .gs-imagePreviewArea { background: var(--g0); border-block: 1px solid var(--g7); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
#content .gsc-control-cse .gs-previewLink,
#content .gsc-control-cse .gs-previewTitle,
#content .gsc-control-cse .gs-previewUrl { color: var(--g13); }
#content .gsc-control-cse .gs-previewSize { font-family: var(--font-mono); color: var(--lime); }
#content .gsc-control-cse .gs-previewDescription { color: var(--g11); }

/* web results */
#content .gsc-control-cse .gsc-webResult.gsc-result,
#content .gsc-control-cse .gsc-webResult.gsc-result:hover { padding: 1rem 0 1.125rem; background: transparent; border: 0; border-bottom: 1px solid var(--g5); }
#content .gsc-control-cse .gs-result .gs-title,
#content .gsc-control-cse .gs-result .gs-title * { font: 600 1.0625rem/1.4 var(--font-ui); color: var(--g13); }
#content .gsc-control-cse .gs-result a.gs-title:hover,
#content .gsc-control-cse .gs-result a.gs-title:hover * { color: var(--cyan); text-decoration: none; }
#content .gsc-control-cse .gs-webResult .gs-snippet { max-width: 90ch; font-size: var(--fs-text); line-height: 1.55; color: var(--g11); }
#content .gsc-control-cse .gs-webResult .gs-snippet b { color: var(--g13); }
#content .gsc-control-cse .gs-webResult div.gs-visibleUrl { font: 500 var(--fs-label)/1.6 var(--font-mono); color: var(--g10); }
#content .gsc-control-cse .gs-web-image-box .gs-image { border-radius: 2px; }

/* nothing found */
#content .gsc-control-cse .gs-no-results-result .gs-snippet {
  display: block;
  margin: 0;
  padding: 1rem 1.25rem;
  text-align: left;
  color: var(--g12);
  background: var(--g3);
  border: 1px solid var(--g6);
  border-left: 2px solid var(--magenta);
}

/* page numbers */
#content .gsc-control-cse .gsc-results .gsc-cursor-box { margin: 1.75rem 0 .5rem; border: 0; }
#content .gsc-control-cse .gsc-results .gsc-cursor-box .gsc-cursor-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0 .375rem .375rem 0;
  padding: 0 .5rem;
  font: 600 var(--fs-ui)/1 var(--font-mono);
  color: var(--g11);
  text-decoration: none;
  background: var(--g3);
  border: 1px solid var(--g6);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
#content .gsc-control-cse .gsc-results .gsc-cursor-box .gsc-cursor-page:hover { color: var(--g13); border-color: rgba(var(--cyan-rgb), .6); }
#content .gsc-control-cse .gsc-results .gsc-cursor-box .gsc-cursor-current-page,
#content .gsc-control-cse .gsc-results .gsc-cursor-box .gsc-cursor-current-page:hover {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(var(--cyan-rgb), .45);
}

/* the suggestions list under Google's field */
.gsc-completion-container { font-family: var(--font-ui); color: var(--g12); background: var(--g2); border: 1px solid var(--g7); border-top: 0; border-radius: 0 0 2px 2px; }
.gssb_c .gssb_e { border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.gssb_c .gssb_m { color: var(--g12); background: var(--g2); }
.gssb_c .gssb_i,
.gsc-completion-container .gsc-completion-selected { background: var(--g4); }
.gsc-completion-container .gsc-completion-title { color: var(--g13); }
.gsc-completion-container .gsc-completion-snippet { color: var(--g10); }

/* ------------------------------------------------------------------ 404: the quick links */
div.col-left { width: 100%; margin: 0 0 1.375rem; }
#left-menu ul.cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#left-menu ul.cats li { list-style: none; }
#left-menu ul.cats a {
  display: block;
  padding: .5625rem .875rem .5rem;
  font: 600 var(--fs-ui)/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g12);
  background: var(--g3);
  border: 1px solid var(--g7);
}
#left-menu ul.cats a:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(var(--cyan-rgb), .3); }
#left-menu .mmtg { display: none; }

/* ------------------------------------------------------------------ wide screens (1620px on desktop = 1800px at 90%) */
@media (min-width: 1800px), (min-width: 1620px) and (hover: hover) and (pointer: fine) {
  p.wallpapers__item.featured { --cols: 4; }
  p.wallpapers__item.big,
  p.wallpapers__item.orig { --cols: 4; }
  p.wallpapers__item.square { --cols: 5; }
  p.wallpapers__item.vertical { --cols: 6; }
}

/* ------------------------------------------------------------------ laptops and tablets */
@media (max-width: 1199px) {
  p.wallpapers__item.big,
  p.wallpapers__item.orig { --cols: 2; }
  p.wallpapers__item.square { --cols: 3; }
  p.wallpapers__item.vertical { --cols: 4; }
}

@media (max-width: 999px) {
  p.wallpapers__item.featured { --cols: 2; }
}

@media (max-width: 899px) {
  p.wallpapers__item.uwide { --cols: 1; }
  p.wallpapers__item.square { --cols: 2; }
  p.wallpapers__item.vertical { --cols: 3; }
  .table-container { grid-template-columns: minmax(0, 1fr); }
  #content form.form .g-recaptcha,
  #content form.form p.button { margin-left: 0; }
  form.form p.field,
  form.form p.area,
  form.form p.file,
  form.form p.select { grid-template-columns: minmax(0, 1fr) .75rem; row-gap: .375rem; }
  form.form label { grid-column: 1 / -1; text-align: left; }
  form.form p.area label { padding-top: 0; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 767px) {
  :root { --header-h: 3.5rem; --gap: 1rem; --section: 3rem; }
  #header { gap: .75rem; }
  /* the header slides away while the page is scrolled down (functions.js sets is-tucked) and stays while it is in use */
  #headbg { transition: transform .28s var(--ease); }
  #headbg.is-tucked:not(:hover):not(:focus-within) { transform: translateY(calc(-100% - 2px)); }
  /* a pack's intro shows three lines until "Read more" is tapped; the whole text is in the page either way */
  #intro_blur_pack span.welcome_note.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  button.note-more {
    display: inline-flex;
    margin: .375rem 0 0;
    padding: .5rem 0 .25rem;
    font: 700 var(--fs-ui)/1 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    cursor: pointer;
    background: none;
    border: 0;
  }
  button.note-more[hidden] { display: none; }
  #header .logo { gap: .4375rem; }
  #header .logo::before { font-size: .875rem; letter-spacing: .12em; }
  #header .logo::after { padding: .3125rem .3125rem .25rem .375rem; font-size: .75rem; }
  .primary-navigation > ul > li:first-child { display: none; }
  .primary-navigation > ul > li + li::before { display: none; }
  .primary-navigation > ul > li { position: static; }
  .primary-navigation > ul > li > a { padding: 0 .625rem; font-size: .75rem; letter-spacing: .14em; }
  .primary-navigation > ul > li > a::after { left: .625rem; right: .625rem; bottom: .625rem; }
  .primary-navigation ul.dropdown {
    --cols: 2;
    --row-step: .043s;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: .75rem;
  }
  /* the panel scrolls here, and a scroller clips what lies outside its padding box: the laser runs just inside it */
  .primary-navigation ul.dropdown::before { top: 0; left: 0; right: 0; }
  .primary-navigation li:hover > ul.dropdown,
  .primary-navigation li:focus-within > ul.dropdown { animation-duration: .14s, .7s; } /* a taller panel: a slower pour */
  .primary-navigation li:hover > ul.dropdown::after,
  .primary-navigation li:focus-within > ul.dropdown::after { animation-duration: .7s; }
  #form { flex: 0 0 auto; }
  #form #search { display: none; }
  div.search-mobile {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    border: 1px solid var(--g7);
    background: var(--g3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / 1.125rem no-repeat;
  }
  #content { padding-top: 1rem; }
  #intro, #intro_pack { margin-bottom: 1.375rem; }
  #intro::before,
  #intro_pack::before { /* text runs the full width here, so the wash is even */
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, rgba(12, 14, 17, .92), rgba(12, 14, 17, .86));
  }
  span.welcome_note { font-size: .9375rem; }
  #intro_pack { --hx: 1.125rem; --hy: 1rem; }
  #intro_blur_pack span.welcome_note { line-height: 1.55; }
  p.wallpapers__item.vertical { --cols: 2; }
  span.packtitle { left: .75rem; right: .75rem; bottom: 1.9375rem; padding-left: .625rem; font-size: .875rem; }
  span.packtitle.cat { bottom: .8125rem; }
  span.wallcount { left: 1.375rem; bottom: .75rem; }
  #footer img.store_img { width: 8.75rem; }
}

@media (max-width: 599px) {
  /* one card per row on phones: titles at full size, clear of the picture's own lettering */
  p.wallpapers__item.big,
  p.wallpapers__item.orig,
  p.wallpapers__item.featured { --cols: 1; }
  span.packtitle { left: .875rem; right: .875rem; bottom: 2.1875rem; padding-left: .6875rem; font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
  span.packtitle.cat { bottom: .875rem; }
  span.wallcount { left: 1.5625rem; bottom: .875rem; }
  #content .gsc-control-cse .gsc-imageResult > .gsc-expansionArea { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  #content .gsc-control-cse .gsc-tabHeader { margin-right: 1.25rem; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important; /* still ends, so functions.js removes each ripple */
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* the category panel simply appears (its tiles wait out a delay, which a short duration alone would keep) */
  .primary-navigation > ul > li > a,
  .primary-navigation ul.dropdown,
  .primary-navigation ul.dropdown::before,
  .primary-navigation ul.dropdown::after,
  .primary-navigation ul.dropdown li,
  .primary-navigation ul.dropdown a,
  .cg-js .wallpapers__canvas img:not([loading="lazy"]):not(.is-loaded) { animation: none !important; }
}