@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light dark;
  --ink: #17131d;
  --muted: #625c6d;
  --bg: #f7f5fb;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --image-bg: #eee9f7;
  --rule: #ddd6e9;
  --purple: #7629db;
  --purple-strong: #5820a4;
  --purple-soft: #eee2fb;
  --orange: #c74c0b;
  --orange-strong: #953604;
  --orange-soft: #ffeadb;
  --yellow: #8a6200;
  --yellow-strong: #674800;
  --yellow-soft: #fff1bd;
  --green: #167c43;
  --green-strong: #0c6031;
  --green-soft: #dcf4e5;
  --blue: #176eb9;
  --blue-strong: #0d5593;
  --blue-soft: #ddecfa;
  --teal: #087f7b;
  --teal-strong: #05615e;
  --teal-soft: #d8f3f0;
  --smoke: #5d6068;
  --smoke-strong: #41434a;
  --smoke-soft: #e6e7ea;
  --red: #c62d48;
  --red-strong: #941f35;
  --red-soft: #f9dfe5;
  --clear: #5f7184;
  --clear-strong: #405367;
  --clear-soft: #e3e9ee;
  --header-a: #27143d;
  --header-b: #6b22c3;
  --header-c: #9e4de5;
  --success: #177b45;
  --danger: #bf3444;
  --used: #a8600f;
  --shadow: 0 12px 28px rgba(53, 27, 84, .10), 0 2px 6px rgba(53, 27, 84, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4eff9;
    --muted: #c2b9cc;
    --bg: #120f16;
    --surface: #1c1722;
    --surface-raised: #211a29;
    --image-bg: #2a2234;
    --rule: #3d3248;
    --purple: #aa68ec;
    --purple-strong: #c18af3;
    --purple-soft: #352243;
    --orange: #f48740;
    --orange-strong: #ffad73;
    --orange-soft: #472919;
    --yellow: #d4a919;
    --yellow-strong: #f3cf4b;
    --yellow-soft: #403714;
    --green: #4eba7a;
    --green-strong: #75d79b;
    --green-soft: #1b3928;
    --blue: #5da9ec;
    --blue-strong: #8ac6f8;
    --blue-soft: #1d3246;
    --teal: #43c4bd;
    --teal-strong: #78ddd7;
    --teal-soft: #183d3a;
    --smoke: #969ba7;
    --smoke-strong: #c1c5ce;
    --smoke-soft: #303239;
    --red: #f06c82;
    --red-strong: #ff9aab;
    --red-soft: #47242d;
    --clear: #9fb5c9;
    --clear-strong: #c5d8e8;
    --clear-soft: #29343e;
    --header-a: #170e22;
    --header-b: #4b176f;
    --header-c: #7732a8;
    --success: #42a872;
    --danger: #e26672;
    --used: #d99442;
    --shadow: 0 15px 34px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .04);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

body[data-color="orange"] { --header-a: #3b1708; --header-b: #a33b08; --header-c: #e87722; }
body[data-color="yellow"] { --header-a: #3b2b04; --header-b: #8b6500; --header-c: #c99c12; }
body[data-color="green"] { --header-a: #092a1a; --header-b: #126237; --header-c: #38a866; }
body[data-color="blue"] { --header-a: #0b2038; --header-b: #12558d; --header-c: #348ad0; }
body[data-color="teal"] { --header-a: #07302e; --header-b: #087873; --header-c: #29b8af; }
body[data-color="smoke"] { --header-a: #202126; --header-b: #555861; --header-c: #898e99; }
body[data-color="red"] { --header-a: #3d0b18; --header-b: #9d1f3b; --header-c: #df526a; }
body[data-color="clear"] { --header-a: #1c2935; --header-b: #50677c; --header-c: #9eb4c7; }

header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(128deg, var(--header-a), var(--header-b) 68%, var(--header-c));
  color: white;
  padding: 3rem max(1.1rem, env(safe-area-inset-left)) 2.7rem;
}
header::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: max(-5rem, calc((100vw - 1180px) / 2 - 5rem));
  bottom: -10rem;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(255,255,255,.045), 0 0 0 64px rgba(255,255,255,.025);
  pointer-events: none;
}
.color-orb {
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-right: .18em;
  border-radius: 50%;
  vertical-align: .04em;
  background: #b56ff2;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 0 0 .12em rgba(255,255,255,.09);
}
body[data-color="orange"] .color-orb { background: #ff8a38; }
body[data-color="yellow"] .color-orb { background: #ffd83d; }
body[data-color="green"] .color-orb { background: #4bd079; }
body[data-color="blue"] .color-orb { background: #58b6ff; }
body[data-color="teal"] .color-orb { background: #38d0c6; }
body[data-color="smoke"] .color-orb { background: #afb3bc; }
body[data-color="red"] .color-orb { background: #ff667d; }
body[data-color="clear"] .color-orb { background: #dce8f1; }

header h1, header p { position: relative; z-index: 1; max-width: 1180px; margin-left: auto; margin-right: auto; }
header p.back { margin: 0 auto .9rem; font-weight: 600; font-size: .92rem; }
header p.back a { color: rgba(255,255,255,.82); text-decoration: none; }
header p.back a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
header h1 {
  margin-top: 0;
  margin-bottom: .35rem;
  font: 800 clamp(2.05rem, 6vw, 4rem)/.98 "Barlow", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
}
header p {
  margin-top: .7rem;
  margin-bottom: 0;
  max-width: 1180px;
  color: rgba(255,255,255,.86);
  font-size: clamp(.98rem, 2.4vw, 1.15rem);
}

.tabs-shell {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: .72rem 1.1rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(12px);
}
.tabs {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: .55rem;
}
.tab {
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: .78rem;
  background: var(--surface);
  color: var(--ink);
  font: 700 .94rem/1 "Barlow", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.tab::before {
  content: "";
  display: inline-block;
  width: .68rem;
  height: .68rem;
  margin-right: .43rem;
  border-radius: 50%;
  vertical-align: -.02rem;
  background: var(--tab-color);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.tab[data-color="purple"] { --tab-color: var(--purple); }
.tab[data-color="orange"] { --tab-color: var(--orange); }
.tab[data-color="yellow"] { --tab-color: var(--yellow); }
.tab[data-color="green"] { --tab-color: var(--green); }
.tab[data-color="blue"] { --tab-color: var(--blue); }
.tab[data-color="teal"] { --tab-color: var(--teal); }
.tab[data-color="smoke"] { --tab-color: var(--smoke); }
.tab[data-color="red"] { --tab-color: var(--red); }
.tab[data-color="clear"] { --tab-color: var(--clear); }
.tab[aria-selected="true"] { background: var(--tab-color); border-color: var(--tab-color); color: white; box-shadow: 0 4px 12px color-mix(in srgb, var(--tab-color) 28%, transparent); }
.tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--tab-color) 45%, white); outline-offset: 2px; }

.wrap { max-width: 1210px; margin: 0 auto; padding: 1.25rem 1.1rem 4.5rem; }
.tab-panel, .swatch { --accent: var(--purple); --accent-strong: var(--purple-strong); --accent-soft: var(--purple-soft); }
.tab-panel[data-color="orange"], .swatch[data-color="orange"] { --accent: var(--orange); --accent-strong: var(--orange-strong); --accent-soft: var(--orange-soft); }
.tab-panel[data-color="yellow"], .swatch[data-color="yellow"] { --accent: var(--yellow); --accent-strong: var(--yellow-strong); --accent-soft: var(--yellow-soft); }
.tab-panel[data-color="green"], .swatch[data-color="green"] { --accent: var(--green); --accent-strong: var(--green-strong); --accent-soft: var(--green-soft); }
.tab-panel[data-color="blue"], .swatch[data-color="blue"] { --accent: var(--blue); --accent-strong: var(--blue-strong); --accent-soft: var(--blue-soft); }
.tab-panel[data-color="teal"], .swatch[data-color="teal"] { --accent: var(--teal); --accent-strong: var(--teal-strong); --accent-soft: var(--teal-soft); }
.tab-panel[data-color="smoke"], .swatch[data-color="smoke"] { --accent: var(--smoke); --accent-strong: var(--smoke-strong); --accent-soft: var(--smoke-soft); }
.tab-panel[data-color="red"], .swatch[data-color="red"] { --accent: var(--red); --accent-strong: var(--red-strong); --accent-soft: var(--red-soft); }
.tab-panel[data-color="clear"], .swatch[data-color="clear"] { --accent: var(--clear); --accent-strong: var(--clear-strong); --accent-soft: var(--clear-soft); }
.tab-panel[hidden] { display: none; }

.section {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin: 2.1rem 0 .9rem;
  font: 800 clamp(1.25rem, 2vw, 1.55rem)/1.1 "Barlow", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.015em;
}
.section:first-of-type { margin-top: .65rem; }
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.65rem;
  padding: 0 .5rem;
  border-radius: .55rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 700 .78rem/1 "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
}
.imgwrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--image-bg);
  border-bottom: 1px solid var(--rule);
}
.imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-gap {
  width: 100%; height: 100%; padding: 1rem;
  display: grid; place-items: center; align-content: center; gap: .55rem;
  color: var(--muted); text-align: center;
}
.image-gap svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.image-gap small { font-weight: 700; font-size: .74rem; }
.image-combo { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.image-combo img { min-width: 0; width: 100%; height: 100%; object-fit: cover; }

.badge {
  position: absolute;
  z-index: 2;
  top: .65rem;
  left: .65rem;
  padding: .28rem .58rem;
  border-radius: 999px;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  font: 700 .67rem/1.1 "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.badge.in { background: var(--accent); }
.badge.out { background: var(--danger); }
.badge.used { background: var(--used); }
.badge.preorder { background: #c05c14; }

.body { flex: 1; display: flex; flex-direction: column; gap: .48rem; padding: .95rem; }
.name { font: 700 1rem/1.25 "Barlow", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.008em; }
.price { color: var(--accent-strong); font: 800 1.12rem/1.15 "Barlow", ui-sans-serif, system-ui, sans-serif; }
.price s { margin-left: .3rem; color: var(--muted); font-weight: 500; font-size: .86rem; }
.note { color: var(--muted); font-size: .82rem; line-height: 1.38; }
.note a { color: var(--accent-strong); font-weight: 700; text-underline-offset: 2px; }
.btn {
  min-height: 2.5rem;
  margin-top: auto;
  padding: .63rem .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  background: var(--accent);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.15;
}
.btn:hover { background: var(--accent-strong); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, white); outline-offset: 2px; }
.btn.disabled { background: #8e8798; color: #f0edf2; cursor: not-allowed; pointer-events: none; }

footer {
  padding: 0 1.1rem calc(2.4rem + env(safe-area-inset-bottom));
  color: var(--muted);
  text-align: center;
  font-size: .84rem;
}

@media (max-width: 930px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  header { padding-top: 2.25rem; padding-bottom: 2.1rem; }
  .tabs-shell { padding: .58rem .8rem; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; }
  .tab { min-height: 2.45rem; border-radius: .62rem; font-size: .79rem; }
  .tab::before { width: .52rem; height: .52rem; margin-right: .27rem; }
  .wrap { padding-left: .8rem; padding-right: .8rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .body { padding: .75rem; }
  .name { font-size: .91rem; }
  .price { font-size: 1rem; }
  .note { font-size: .76rem; }
  .btn { min-height: 2.35rem; padding: .58rem .45rem; font-size: .84rem; }
  .badge { top: .45rem; left: .45rem; font-size: .59rem; padding: .25rem .45rem; }
}
@media (max-width: 360px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .16s ease, box-shadow .16s ease; }
  .card:hover { transform: translateY(-2px); }
}

/* Landing page */
a.tab { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.tab:hover { border-color: var(--tab-color); }
.lede { color: var(--muted); margin: .2rem 0 0; text-wrap: pretty; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.swatch { padding: 1rem; gap: .85rem; }
.swatch-head { display: flex; align-items: center; gap: .9rem; }
.swatch-head img, .swatch-head .glass {
  flex: none;
  width: 4.6rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: .7rem;
  border: 1px solid var(--rule);
}
.swatch-head .glass { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 45%), linear-gradient(140deg, #eef3f7, #c9d6e1 60%, #a9bccc); }
.swatch .name { font-size: 1.35rem; font-weight: 800; }
.swatch .name::before {
  content: "";
  display: inline-block;
  width: .62rem;
  height: .62rem;
  margin-right: .4rem;
  border-radius: 50%;
  vertical-align: .08rem;
  background: var(--accent);
}
.swatch .note { margin-top: .15rem; }
.fav {
  flex: 1;
  padding: .75rem .85rem;
  border-radius: .8rem;
  background: var(--accent-soft);
}
.fav-label { color: var(--accent-strong); font: 700 .72rem/1.2 "Source Sans 3", ui-sans-serif, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.fav-body { margin-top: .3rem; font-weight: 600; }
.fav[data-empty] .fav-body { color: var(--muted); font-weight: 500; font-style: italic; }
@media (max-width: 930px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .swatches { grid-template-columns: 1fr; } }
footer a { color: var(--muted); }
a.fav-body { display: block; margin-top: .3rem; color: var(--ink); font-weight: 700; text-underline-offset: 2px; }
a.fav-body small { display: block; margin-top: .1rem; color: var(--muted); font-weight: 500; font-size: .8rem; }
.badge.fav { left: auto; right: .65rem; background: var(--accent-strong); }
@media (max-width: 680px) { .badge.fav { right: .45rem; } }

/* Handmade NFC tags */
.rainbow-rule { height: 4px; background: linear-gradient(90deg, #df526a, #e87722, #d4c21a, #38a866, #29b8af, #348ad0, #8f4fe0, #898e99); }
.maker {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  margin: .65rem 0 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule));
  background: linear-gradient(120deg, var(--accent-soft), var(--surface-raised) 70%);
}
.maker .rainbow-rule { grid-column: 1 / -1; }
.maker .imgwrap { aspect-ratio: auto; min-height: 9rem; border-bottom: 0; border-right: 1px solid var(--rule); }
.maker .body { justify-content: center; padding: 1.1rem 1.25rem; }
.maker .eyebrow, .tags-eyebrow { color: var(--accent-strong); font: 700 .72rem/1.2 "Source Sans 3", ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.maker .name { font-size: 1.3rem; font-weight: 800; }
.maker .note { font-size: .9rem; }
.maker .btn { margin-top: .35rem; align-self: flex-start; padding-left: 1.1rem; padding-right: 1.1rem; }
.badge.handmade { background: linear-gradient(90deg, #df526a, #e87722 30%, #348ad0 70%, #8f4fe0); }
@media (max-width: 680px) {
  .maker { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .maker .body { padding: .8rem .9rem; }
  .maker .name { font-size: 1.05rem; }
  .maker .note { font-size: .78rem; }
  .maker .btn { align-self: stretch; }
}

.tags-promo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: 1.6rem; --accent: var(--purple); --accent-strong: var(--purple-strong); --accent-soft: var(--purple-soft); }
.tags-promo .rainbow-rule { grid-column: 1 / -1; }
.tags-promo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 14rem; }
.tags-promo .body { justify-content: center; padding: 1.4rem 1.5rem; gap: .6rem; }
.tags-promo .name { font-size: 1.5rem; font-weight: 800; }
.tags-promo .note { font-size: .95rem; }
.tags-promo .btn { align-self: flex-start; padding-left: 1.2rem; padding-right: 1.2rem; }
@media (max-width: 680px) { .tags-promo { grid-template-columns: 1fr; } .tags-promo .btn { align-self: stretch; } }

/* Tags page */
.tags-page { --accent: var(--purple); --accent-strong: var(--purple-strong); --accent-soft: var(--purple-soft); }
.tags-hero { margin-top: .65rem; }
.tags-hero img { width: 100%; height: auto; display: block; }
.tags-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.tags-intro .card { padding: 1.2rem 1.3rem; gap: .55rem; }
.tags-intro h2 { margin: 0; font: 800 1.35rem/1.15 "Barlow", ui-sans-serif, system-ui, sans-serif; }
.tags-intro p, .tags-intro li { margin: 0; color: var(--muted); }
.tags-intro ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; }
.tags-intro .btn { margin-top: .4rem; }
.tags-build { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tags-build figure { margin: 0; }
.tags-build img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.tags-build figcaption { padding: .8rem .95rem; color: var(--muted); font-size: .88rem; }
.tag-colors .card { text-decoration: none; color: inherit; }
.tag-colors .name::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; vertical-align: .06rem; background: var(--accent); }
@media (max-width: 760px) { .tags-intro, .tags-build { grid-template-columns: 1fr; } }
.tags-intro a:not(.btn), .tag-colors .note a { color: var(--accent-strong); font-weight: 700; text-underline-offset: 2px; }
.tags-intro .btn + .btn { margin-top: .5rem; }