/* Planet Coolkee — wallpapers page, home teaser and footer link (2026-11-05). Uses the site.css tokens; no inline styles. */

/* ---------- /wallpapers/ ---------- */
.wp-page .page-hero { padding-bottom: 12px; }
.wp-page .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
.wp-notes { margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .9375rem; max-width: 40rem; }
.wp-notes li { margin: 0 0 4px; padding-left: 22px; position: relative; }
.wp-notes li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 999px; background: var(--teal-bright); }
.wp-gallery { padding: 20px 0 clamp(56px, 8vw, 96px); }
.wp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wp-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-m); box-shadow: var(--shadow); overflow: hidden; }
.wp-shot { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--sky); overflow: hidden; }
.wp-shot img { width: 100%; height: 100%; object-fit: cover; }
.wp-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.wp-body .kicker { margin: 0; }
.wp-body h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 0; }
.wp-dl { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 12px; border-radius: 16px; text-decoration: none;
  background: var(--page); color: var(--ink); border: 1px solid var(--line); line-height: 1.2; transition: transform .18s var(--ease), background-color .18s var(--ease); }
.wp-btn:hover { background: var(--sky); transform: translateY(-2px); }
.wp-btn:active { transform: translateY(0) scale(.97); }
.wp-btn svg { width: 22px; height: 22px; flex: none; }
.wp-btn b { display: block; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.wp-btn small { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.wp-btn.is-main { background: var(--teal); border-color: var(--teal); color: var(--white); }
.wp-btn.is-main:hover { background: var(--teal-hover); }
.wp-btn.is-main small { color: #e3f8fb; }

/* ---------- home teaser ---------- */
.wp-teaser { background: var(--page); }
.wp-strip { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .wp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.wp-strip a { display: block; text-decoration: none; color: var(--ink); border-radius: var(--r-m); }
.wp-strip .wp-shot { border-radius: var(--r-m); box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.wp-strip a:hover .wp-shot { transform: translateY(-3px); }
.wp-strip span.wp-name { display: block; margin-top: 10px; font-weight: 700; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce) {
  .wp-btn, .wp-strip .wp-shot { transition: none; }
  .wp-btn:hover, .wp-strip a:hover .wp-shot { transform: none; }
}

/* Wallpapers glyph subsets (merged by family + unicode-range with the site subsets). */
@font-face { font-family:"Noto Sans SC"; src:url("wallpapers/noto-wp-zh-be755c66a9.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+58C1,U+5BF8,U+5C3A,U+684C; }
@font-face { font-family:"Noto Sans JP"; src:url("wallpapers/noto-wp-ja-a9bd0a71c6.woff2") format("woff2"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+58C1,U+62E1,U+9685; }