/* XXL Wallpapers — the pages. The components are the design system's
   bundle.css and the tokens its tokens.css, both served as they are; this
   file arranges those components on a page and adds no colour of its own. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
html[data-theme="light"] { color-scheme: light; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
a { color: var(--link); }
[hidden] { display: none !important; }
/* The one ring, for whatever the bundle does not already give it to. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

#page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; padding-bottom: var(--space-8); }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 200; padding: var(--space-3) var(--space-4); background: var(--surface-2); color: var(--ink); border: var(--stroke-control) solid var(--line-strong); border-radius: var(--radius-md); font-weight: 600; }
.skip:focus { top: var(--space-2); }

/* Content is 1440px wide and centred; the side padding is outside it. */
.wrap { width: 100%; max-width: calc(1440px + 2 * var(--space-4)); margin-inline: auto; padding-inline: var(--space-4); }
.section { margin-top: var(--space-7); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* One 32:9 card per row, two from 1024px. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* ---------- Nav ---------- */
/* The bar is full width; its content lines up with the page's. */
.xxl-nav { position: relative; padding-inline: max(var(--space-4), calc((100% - 1440px) / 2)); }
.nav-menu { display: none; margin-left: auto; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu__list { position: absolute; right: var(--space-4); top: calc(100% + var(--space-2)); z-index: 50; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
/* The six links need 942px beside the logo: under 960px they become the Categories button. */
@media (max-width: 959px) {
  .xxl-nav__links { display: none; }
  .nav-menu { display: block; }
}

/* ---------- Home ---------- */
.hero { display: grid; gap: var(--space-6); align-items: center; margin-top: var(--space-5); padding: var(--space-8) var(--space-5); background: var(--surface-1); border-radius: var(--radius-xl); }
.hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hero__title .xxl-wordmark { font-size: clamp(40px, 10.5vw, 96px); }
.hero__lede { max-width: 56ch; margin-top: var(--space-5); }
.hero__lede .spec { white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: inherit; gap: var(--space-3); margin-top: var(--space-5); }
.hero__mascot { display: block; width: 100%; min-width: 240px; max-width: 560px; margin-inline: auto; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
/* The outline is drawn for the hero size; under it the letters would drown. */
@media (max-width: 639px) {
  .hero__title .xxl-wordmark { --stroke-outline-lg: 3px; }
}

/* ---------- Cards on a page ---------- */
/* A card leads to its wallpaper: the title's link is stretched over the card,
   and the card's own controls stay above it. */
.xxl-card__title a { color: inherit; text-decoration: none; }
.xxl-card__title a::after { content: ""; position: absolute; inset: 0; }
.xxl-card .xxl-chip, .xxl-card .xxl-btn { position: relative; z-index: 1; }
.xxl-card__title a:focus-visible { outline: none; }
.xxl-card:has(.xxl-card__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Two tiers in one badge are wider than a phone's card: there each tier
   takes its own line, and the dot between them has nothing to separate. */
@media (max-width: 439px) {
  .xxl-res { display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px var(--space-2); height: auto; min-height: 28px; padding-block: var(--space-1); }
  .xxl-res__native { justify-self: start; }
  .xxl-res__native + .xxl-res__tier::before { content: none; }
  .xxl-res__ratio { grid-column: 3; grid-row: 1 / span 2; }
}

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) 0; text-align: center; }
.empty img { width: 320px; }

/* ---------- Category ---------- */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-7) 0 var(--space-6); }
.page-head__blurb { max-width: 68ch; }
.display, .title-xl { overflow-wrap: break-word; }
@media (max-width: 639px) {
  .display { font-size: 40px; }
  .title-xl { font-size: 28px; }
}

/* ---------- A wallpaper's page ---------- */
/* The preview is the 1280px thumbnail and is never shown wider than it is. */
.wallpaper { padding-top: var(--space-5); }
.preview { max-width: 1280px; margin-inline: auto; overflow: hidden; background: var(--surface-2); border: var(--stroke-outline) solid var(--outline); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.wallpaper__info { display: grid; gap: var(--space-6); max-width: 1280px; margin: var(--space-6) auto 0; }
.wallpaper__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.wallpaper__meta, .wallpaper__licence, .wallpaper__download .spec-sm { color: var(--ink-muted); }
.wallpaper__download { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); scroll-margin-top: var(--space-5); }
.wallpaper .section { max-width: 1280px; margin-inline: auto; }

/* The FormatPicker a card opens. The scrim dims the page behind it. */
.dialog { width: min(440px, calc(100vw - 2 * var(--space-4))); max-width: none; padding: 0; overflow: visible; background: transparent; color: inherit; border: 0; }
.dialog::backdrop { background: var(--scrim); }

/* ---------- WallyView ---------- */
/* Its Close sits on whatever the background is: a control on a surface-1 panel. */
.xxl-wally-view { overflow: auto; }
.xxl-wally-view__close { background: var(--surface-1); }
body:has(.xxl-wally-view) { overflow: hidden; }

/* ---------- About, Licence ---------- */
.prose { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 68ch; padding-top: var(--space-7); }
.prose h2 { margin-top: var(--space-5); }
.prose ul { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }
.prose__mascot { width: 100%; max-width: 480px; }
.prose__nowrap { white-space: nowrap; }
.sizes { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: baseline; }

/* ---------- Footer ---------- */
.footer { padding: var(--space-6) 0; background: var(--surface-1); border-top: var(--stroke-hairline) solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.footer__logo img { display: block; width: 192px; }
.footer__links { display: flex; gap: var(--space-5); }
.footer__links a { color: var(--ink); text-decoration: none; }
.footer__links a:hover { color: var(--link); }
.footer__inner .xxl-btn { margin-left: auto; }
.footer__line { flex-basis: 100%; color: var(--ink-muted); }

/* ---------- The secret page ---------- */
/* Its three permissions: panic above the fold, the PanicButton as the hero,
   the footer line in pixel under the 16-bit logo. */
.secret { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-top: var(--space-5); padding: var(--space-8) var(--space-4); text-align: center; background: var(--panic); color: var(--on-panic); border: var(--stroke-outline) solid var(--outline); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
.secret__served { width: 100%; max-width: 720px; text-align: left; }
.secret__exit { display: flex; justify-content: center; margin-top: var(--space-7); }
.secret__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 0 var(--space-4) var(--space-7); text-align: center; }
.secret__sign { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); }
.secret__sign img { width: 320px; }

@media (min-width: 900px) {
  .wallpaper__info { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: start; }
  .wallpaper__download { align-items: stretch; }
}
@media (min-width: 1024px) {
  .wrap { max-width: calc(1440px + 2 * var(--space-5)); padding-inline: var(--space-5); }
  .xxl-nav { padding-inline: max(var(--space-5), calc((100% - 1440px) / 2)); }
  .nav-menu__list { right: var(--space-5); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); padding: var(--space-9) var(--space-8); }
  .hero__title .xxl-wordmark { font-size: clamp(56px, 6.2vw, 96px); }
}