/*
Theme Name: SOMEONE Child
Theme URI: https://someonecreative.cc
Description: Bespoke black & white portfolio child theme for Someone Creative, built on Twenty Twenty-Five. Mobile-first.
Author: Someone Creative
Template: twentytwentyfive
Version: 0.9.41
Requires at least: 6.7
Tested up to: 7.0
Text Domain: someone-child
*/

/* ---- Wordmark ---- */
.someone-wordmark a,
.someone-wordmark .wp-block-site-title { letter-spacing: .22em; font-weight: 500; text-decoration: none; text-transform: uppercase; }

/* ---- Header bar ---- */
/* Keep logo-left / nav-right on EVERY template. Block templates get this from
   WP's auto-generated per-instance flex rule, but the custom PHP templates
   (portfolio/authors/locations) render the header after wp_head() prints those
   rules, so we set the flex layout explicitly here for consistency everywhere. */
.someone-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* ---- Top navigation ---- */
.someone-nav a { text-decoration: none; letter-spacing: .08em; font-size: .8rem; text-transform: uppercase; color: inherit; opacity: .65; transition: opacity .2s ease; }
.someone-nav a:hover { opacity: 1; }

/* ---- Footer: contact buttons (Email + WeChat) + QR popup (CSS-only toggle) ---- */
.sw-wechat { display: inline-flex; }
/* shared button base so Email + WeChat match in size/shape */
.sw-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-width: 5.75rem; padding: .5rem .7rem; border-radius: 6px; border: 1px solid transparent; font-size: .8rem; letter-spacing: .04em; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.sw-cbtn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.sw-cbtn-email { color: #fff; border-color: rgba(255, 255, 255, .32); background: transparent; }
.sw-cbtn-email:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.sw-cbtn-wechat { color: #fff; background: #07c160; }
.sw-cbtn-wechat:hover { background: #06ad56; }
/* WeChat checkbox visually hidden but still focusable (Tab to it, Space opens popup) */
.sw-wechat-cb { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sw-cbtn-email:focus-visible,
.sw-wechat-cb:focus-visible ~ .sw-cbtn-wechat { outline: 2px solid #fff; outline-offset: 2px; }
.sw-wechat-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, .72); cursor: zoom-out; }
.sw-wechat-cb:checked ~ .sw-wechat-modal { display: flex; }
.sw-wechat-modal img { display: block; width: auto; height: auto; max-width: min(84vw, 340px); max-height: 82vh; border-radius: 10px; background: #fff; }

/* ---- Hero ---- */
.someone-hero { overflow: hidden; }
.someone-hero .wp-block-heading { letter-spacing: .2em; }
.someone-hero > .wp-block-cover__inner-container { padding-inline: clamp(1.25rem, 4vw, 4rem); }
/* Keep these single lines on ONE line at any width — scale the font down to fit, never wrap. */
.someone-hero-sub { white-space: nowrap; font-size: clamp(.72rem, 3.4vw, 1.2rem); }
.someone-copyright { white-space: nowrap; font-size: clamp(.6rem, 2.85vw, .8rem); }
/* ICP 备案 (粤ICP备2026083396号) — required footer link to beian.miit.gov.cn */
.someone-beian { white-space: nowrap; font-size: clamp(.58rem, 2.6vw, .76rem); letter-spacing: .02em; }
.someone-beian a { color: inherit; text-decoration: none; opacity: .82; transition: opacity .2s ease, color .2s ease; }
.someone-beian a:hover { color: #fff; opacity: 1; }

/* Links on dark sections inherit the light text colour */
.has-noir-background-color a, .someone-hero a { color: inherit; }

/* ---- Logo (site-logo block) ---- */
/* Header: black logo on white bar */
.someone-logo { margin: 0; }
.someone-logo img { display: block; height: auto; }
/* Hero: same logo inverted to white on the black hero, responsive */
.someone-hero .hero-logo { text-align: center; margin: 0 auto; }
.someone-hero .hero-logo img { filter: invert(1); width: min(82vw, 600px); height: auto; max-width: 100%; display: inline-block; margin: 0 auto; }
@media (max-width: 600px) {
  .someone-logo img { width: 140px; }
}

/* ---- Work grid: responsive, cover-fit thumbs, subtle zoom + label reveal ---- */
.work-grid .wp-block-post-template { gap: clamp(8px, 1.5vw, 14px); }
.work-grid .wp-block-post-featured-image { overflow: hidden; background: #1c1c1c; margin: 0; }
.work-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.work-grid li:hover .wp-block-post-featured-image img { transform: scale(1.045); }
.work-grid .wp-block-post-title { margin-top: .5rem; letter-spacing: .04em; font-weight: 400; }
.work-grid .wp-block-post-title a { text-decoration: none; }
.work-grid .wp-block-post-title a:hover { opacity: .55; }

/* ---- Single work ---- */
.single-work .wp-block-post-featured-image { margin-bottom: 1.25rem; }
.single-work .wp-block-post-featured-image img { width: 100%; height: auto; display: block; }
.single-work .wp-block-image { margin-bottom: 12px; }
.single-work .wp-block-image img { width: 100%; height: auto; }

/* ---- Mobile polish (phone viewing is the majority) ---- */
@media (max-width: 600px) {
  .someone-wordmark a, .someone-wordmark .wp-block-site-title { letter-spacing: .16em; }
  .someone-hero .wp-block-heading { letter-spacing: .12em; }
  .work-grid .wp-block-post-title { margin-top: .4rem; }
}

/* ---- Hero logo effect: random colour-block halo behind the logo ---- */
/* assets/hero-fx.js injects a <canvas> behind the crisp logo; only the soft
   colour bleeding past the letter edges shows (a halo, never over the text). */
.someone-hero .hero-logo { position: relative; }
.someone-hero .hero-logo.hero-fx-on .custom-logo-link,
.someone-hero .hero-logo.hero-fx-on img.custom-logo { position: relative; z-index: 1; }
.someone-hero .hero-logo .hero-fx-canvas { position: absolute; z-index: 0; pointer-events: none; mix-blend-mode: screen; transform-origin: center center; will-change: transform; }

/* ============================================================
   About page (page-id-7): DARK theme — black background, white
   text, and each core member rendered as its own card.
   Page-chrome rules are scoped to body.page-id-7 so the rest of
   the site keeps its light/paper look; the .about/.oc/.cm classes
   only ever appear on this page, so they're styled directly.
   ============================================================ */

/* Paint the whole page dark. The footer is already noir, so we only
   flip the body bg/text and re-tint the header: invert the black
   wordmark to white and soften the divider line (the header's
   border uses var(--wp--preset--color--line), which we redefine
   here so no !important is needed). */
body.page-id-7, body.someone-dark { background-color: #0a0a0a; color: #fff; --wp--preset--color--line: rgba(255, 255, 255, .14); }
body.page-id-7 .someone-logo img, body.someone-dark .someone-logo img { filter: invert(1); }   /* black header wordmark -> white */
body.page-id-7 .someone-nav a, body.someone-dark .someone-nav a { color: #fff; }                /* nav links read on the dark bar */
body.page-id-7 a, body.someone-dark a { color: inherit; }   /* content links (work titles, contact email) read on the dark bg */

/* ---- About page: brand wordmark above the intro text (inverted to white on black) ---- */
.about-brand { display: block; width: min(70vw, 320px); height: auto; margin: 0 0 clamp(1.25rem, 3vw, 2rem); filter: invert(1); }

/* ---- Our Client logo wall — white cards keep the (often dark/coloured) logos legible on the dark page ---- */
.our-client { margin-top: clamp(2.5rem, 7vw, 5rem); }
.oc-head { text-align: center; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.oc-head .oc-en { display: block; font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .04em; color: #fff; }
.oc-head .oc-zh { display: none; } /* Chinese label + its top-border bar removed; English ("Our Client") only */
.oc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.4vw, 14px); }
/* The cell reserves a 3:2 box via aspect-ratio; the logo fills it absolutely.
   Safari does NOT resolve a child's percentage height against an aspect-ratio
   box (it collapses to `auto`), which lets logos overflow and scramble the
   grid. Absolute fill avoids that. */
.oc-cell { position: relative; aspect-ratio: 3 / 2; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: #151515; transition: border-color .2s ease; }
.oc-cell:hover { border-color: rgba(255, 255, 255, .22); }
/* Logos are colour-on-transparent; default shows them white (filter), hover reveals the real colours. */
.oc-cell img { position: absolute; inset: 0; width: 100%; height: 100%; padding: clamp(9px, 1.8vw, 18px); box-sizing: border-box; object-fit: contain; display: block; filter: brightness(0) invert(1); transition: filter .35s ease, transform .3s ease; }
.oc-cell:hover img { filter: none; transform: scale(1.05); }
/* Mobile: 3 cols, and size the logo to the cell (box-relative padding) so it isn't oversized. */
@media (max-width: 700px) { .oc-grid { grid-template-columns: repeat(3, 1fr); } .oc-cell img { padding: 20%; } }

/* ---- Core members — each member is its own elevated dark card (photo + name/role + bio) ---- */
.core-members { margin-top: clamp(2.5rem, 7vw, 5rem); }
.cm-head { text-align: center; margin: 0 auto clamp(2rem, 5vw, 3.25rem); }
.cm-head .cm-en { display: block; font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .04em; color: #fff; }
.cm-head .cm-zh { display: none; } /* Chinese label + its top-border bar removed; English ("Core Member") only */
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
/* The card: photo + name/role + bio grouped in one slightly-elevated dark panel. */
.cm-item { display: flex; flex-direction: column; gap: 1rem; background: #151515; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: clamp(1.25rem, 3.5vw, 2rem); transition: border-color .2s ease, background-color .2s ease; }
.cm-item:hover { border-color: rgba(255, 255, 255, .2); background: #181818; }
.cm-photo { position: relative; width: clamp(128px, 38vw, 168px); aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #242424; flex: none; }
/* Absolute fill: same Safari aspect-ratio caveat as .oc-cell above. */
.cm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.cm-text { min-width: 0; }
.cm-name { margin: 0; font-size: clamp(1.05rem, 4vw, 1.4rem); font-weight: 500; letter-spacing: .01em; color: #fff; display: flex; flex-wrap: nowrap; align-items: baseline; gap: .2rem .6rem; white-space: nowrap; }
.cm-role { font-size: .68em; font-weight: 400; letter-spacing: .06em; color: #9a9a9a; white-space: nowrap; }
.cm-bio { margin: .7rem 0 0; color: #c4c4c4; font-size: .92rem; line-height: 1.85; text-align: justify; text-justify: inter-ideograph; }
@media (min-width: 700px) {
  .cm-item { flex-direction: row; align-items: flex-start; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
  .cm-text { flex: 1; padding-top: .25rem; }
}
/* Mobile: centre the avatar and the name+role; bio text stays left-aligned. */
@media (max-width: 699px) {
  .cm-photo { align-self: center; }
  .cm-name { justify-content: center; text-align: center; }
}

/* ============================================================
   Gallery pages (作者 /authors/ + 地点 /locations/): dark theme
   (shared via body.someone-dark), a picker (author cards / map
   pins) then a masonry works area with click-to-zoom lightbox.
   Image layout is built by assets/gallery.js (shortest-column
   masonry); imgs use native loading=lazy + aspect-ratio.
   ============================================================ */
.sg-main { max-width: 1400px; margin-inline: auto; margin-top: var(--wp--preset--spacing--60, 2.5rem); padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 8vw, 6rem); }
/* Portfolio leads with the filter bar (no page title), so tighten the top gap. */
.sg-portfolio { margin-top: clamp(1.25rem, 4vw, 2rem); padding-top: 0; }
.sg-head { text-align: center; margin: 0 auto clamp(2rem, 5vw, 3.25rem); }
.sg-en { display: block; margin: 0; font-weight: 400; font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .04em; color: #9a9a9a; }
.sg-kicker { display: block; margin-bottom: .5rem; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: #9a9a9a; }   /* term-archive label above the term name */

/* Author cards — simplified: avatar + name + role; click to select */
/* Single swipeable row: avoids the crowding + uneven wrapping when authors are
   many. Centres when the cards fit (auto margins on the ends), scrolls when not. */
.sg-authors { display: flex; flex-wrap: nowrap; gap: clamp(.6rem, 1.5vw, 1rem); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 2px 14px; cursor: grab; user-select: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.sg-authors.is-dragging { cursor: grabbing; }
.sg-authors > .sg-card:first-child { margin-left: auto; }
.sg-authors > .sg-card:last-child { margin-right: auto; }
.sg-authors::-webkit-scrollbar { height: 6px; }
.sg-authors::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; }
.sg-authors::-webkit-scrollbar-track { background: transparent; }
.sg-card { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: clamp(80px, 16vw, 108px); padding: .7rem .55rem .8rem; background: #151515; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; color: inherit; font: inherit; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.sg-card:hover { border-color: rgba(255, 255, 255, .25); background: #181818; }
.sg-card.is-active { border-color: #fff; background: #1c1c1c; }
.sg-ava { width: clamp(54px, 13vw, 78px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #242424; }
.sg-ava img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .2s ease; }
.sg-card:hover .sg-ava img, .sg-card.is-active .sg-ava img { filter: none; }
.sg-name { font-size: .88rem; font-weight: 500; color: #fff; }

/* Location map placeholder banner — pins are the registered 地点 terms */
/* Worldwide hero — full-width dotted-map background with the heading + tags on top */
.sg-hero { position: relative; overflow: hidden; min-height: clamp(380px, 38vw, 560px); display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 4rem); }
.sg-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 3.5vw, 2.25rem); text-align: center; }
.sg-worldmap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 1; filter: blur(1.8px); }
.sg-worldmap-fx { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 700px) { .sg-hero { min-height: clamp(190px, 48vw, 300px); padding: 1.5rem 1.25rem; } }
.sg-map-pins { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.sg-pin { padding: .42rem 1.05rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .9rem; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.sg-pin:hover { background: rgba(255, 255, 255, .14); }
.sg-pin.is-active { background: #fff; color: #0a0a0a; border-color: #fff; }
.sg-map-empty { position: relative; color: #9a9a9a; font-size: .9rem; }

/* Portfolio filters — two separate groups (类别 + 品牌), side by side (wrap to stack
   on mobile); each single-select with a 全部; the groups combine (AND). */
.sg-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(1.25rem, 5vw, 3.5rem); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sg-fgroup { display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.sg-flabel { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #8a8a8a; }
.sg-fpills { display: flex; flex-wrap: nowrap; justify-content: center; justify-content: safe center; align-self: stretch; gap: .5rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sg-fpills::-webkit-scrollbar { display: none; }
.sg-pill { padding: .42rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #cfcfcf; font: inherit; font-size: .85rem; letter-spacing: .04em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.sg-pill:hover { border-color: #fff; color: #fff; }
.sg-pill.is-active { background: #fff; color: #0a0a0a; border-color: #fff; }
.sg-pill:focus { outline: none; }
.sg-pill:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
/* Phones: each group spans full width so its pill row scrolls horizontally; pills stay
   centered when they fit and scroll (start-aligned) when there are too many. */
@media (max-width: 600px) {
  .sg-fgroup { width: 100%; }
  .sg-fpills { gap: .4rem; }
  .sg-pill { padding: .36rem .75rem; font-size: .8rem; letter-spacing: .02em; }
}

/* Works masonry (columns + items built by JS) */
.sg-works { display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 24px); margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.sg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vw, 24px); }
.sg-fig { margin: 0; overflow: hidden; border-radius: 6px; background: #161616; cursor: zoom-in; }
.sg-fig img, .sg-fig video { width: 100%; height: auto; display: block; }
/* Video tiles in the masonry: first-frame poster + centred play badge (badge is click-through). */
.sg-fig.sg-video { position: relative; }
.sg-play { position: absolute; inset: 0; margin: auto; width: clamp(44px, 14%, 62px); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background-color .2s ease; }
.sg-fig.sg-video:hover .sg-play { background: rgba(0, 0, 0, .62); }
.sg-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.sg-empty { text-align: center; color: #8a8a8a; font-size: .95rem; margin: clamp(2.5rem, 6vw, 4rem) 0; }

/* Portfolio covers: each masonry item links to its work (no lightbox); title on hover */
.sg-fig.sg-link { position: relative; display: block; cursor: pointer; }
.sg-fig.sg-link img { transition: transform .5s ease; }
.sg-fig.sg-link:hover img { transform: scale(1.04); }
.sg-cap { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 1.1rem 1rem 1rem; font-size: .9rem; letter-spacing: .03em; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 55%); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); pointer-events: none; }
/* No focus-ring / tap-highlight "box" on covers & pickers when tapped on touch
   (mobile browsers draw one on tap); keyboard users still get a ring via :focus-visible. */
.sg-fig, .sg-card, .sg-pin { -webkit-tap-highlight-color: transparent; }
.sg-fig.sg-link:focus, .sg-card:focus, .sg-pin:focus { outline: none; }
.sg-fig.sg-link:focus-visible, .sg-card:focus-visible, .sg-pin:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }

/* Lightbox (click image to zoom; click anywhere / Esc to close) */
.sg-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2.5rem); background: rgba(0, 0, 0, .93); cursor: zoom-out; }
.sg-lightbox[hidden] { display: none; }
.sg-lightbox img:not([hidden]), .sg-lightbox video:not([hidden]) { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.sg-lb-close { position: absolute; top: clamp(.5rem, 2vw, 1.25rem); right: clamp(.5rem, 2vw, 1.25rem); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .4); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.sg-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .4); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease; }
.sg-lb-nav:hover { background: rgba(0, 0, 0, .75); }
.sg-lb-nav[hidden] { display: none; }
.sg-lb-prev { left: clamp(.4rem, 3vw, 1.5rem); }
.sg-lb-next { right: clamp(.4rem, 3vw, 1.5rem); }
/* Don't let touch gestures on the lightbox pan/scroll the page behind it. */
.sg-lightbox, .sg-lightbox img, .sg-lb-nav, .sg-lb-close { touch-action: none; }
/* Touch devices navigate by swiping — hide the arrows so they don't cover the photo. */
@media (hover: none) { .sg-lb-nav { display: none; } }

/* Single work detail (作品详情): kept title + tag chips, then the work's images as masonry */
.sw-head { text-align: center; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.sw-title { margin: 0; color: #fff; font-weight: 500; font-size: clamp(1.5rem, 4.5vw, 2.4rem); letter-spacing: .02em; }
.sw-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: clamp(.9rem, 2.5vw, 1.4rem); }
.sw-tags .sw-tag { padding: .3rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #cfcfcf; font-size: .8rem; letter-spacing: .04em; text-decoration: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.sw-tags .sw-tag:hover { color: #fff; border-color: rgba(255, 255, 255, .55); background-color: rgba(255, 255, 255, .08); }
.sw-back { text-align: center; margin: clamp(2.5rem, 6vw, 4rem) 0 0; font-size: .9rem; }
.sw-back a { color: #9a9a9a; }
.sw-back a:hover { color: #fff; }