:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --panel: #f3efe8;
  --ink: #111111;
  --muted: #5d5a55;
  --line: #e4dfd6;
  --red: #e5243b;
  --orange: #f47b20;
  --yellow: #f5b400;
  --green: #2fa36b;
  --blue: #1f6fd6;
  --teal: #2bb3a3;
  --purple: #7a55c3;
  --radius: 14px;
  --pill: 999px;
  --display: "Lexend", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --wrap: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.locked { overflow: hidden; }

.logo { font-family: var(--display); font-weight: 600; line-height: .92; letter-spacing: -.02em; display: inline-block; font-size: 25px; }
.logo span { display: block; }
.logo .in { font-size: .9em; }
.logo b { font-weight: 700; font-size: 1.12em; letter-spacing: .01em; }
.c1 { color: var(--red); } .c2 { color: var(--yellow); } .c3 { color: var(--green); } .c4 { color: var(--blue); } .c5 { color: var(--teal); } .c6 { color: var(--purple); } .c7 { color: var(--orange); }

.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250,248,244,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 84px; }
.nav { display: flex; gap: 34px; margin: 0 auto; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav > a, .nav .dd > button { padding: 8px 0; background: none; border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 6px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.dd { position: relative; }
.dd-menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.08); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: block; }
.dd-menu a { display: block; padding: 8px 12px; border-radius: 8px; }
.dd-menu a:hover { background: var(--panel); }
.tools { display: flex; gap: 18px; align-items: center; }
.icon-btn { background: none; border: 0; padding: 6px; cursor: pointer; position: relative; display: inline-flex; }
.icon-btn svg { width: 24px; height: 24px; }
.cart-count { position: absolute; top: -2px; right: -4px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.cart-count[hidden] { display: none; }
.menu-btn { display: none; }
.search-bar { display: none; border-top: 1px solid var(--line); padding: 14px 0; }
.search-bar.open { display: block; }
.search-bar form { display: flex; gap: 10px; }
.search-bar input { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: var(--pill); padding: 12px 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: var(--pill); padding: 15px 34px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); background: #2a2a2a; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover { background: var(--ink); color: #fff; }
.btn.block { width: 100%; }
.btn.sm { padding: 10px 16px; font-size: 12.5px; }
.arrow::after { content: "→"; font-size: 1.2em; line-height: 1; }
.link-arrow { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; display: inline-flex; gap: 8px; }
.link-arrow:hover { color: var(--blue); }

.hero { position: relative; overflow: hidden; background: linear-gradient(90deg, #f6f5f3 0%, #f1f0ee 45%, #d9d9d9 100%); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; min-height: 560px; gap: 20px; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(52px, 7vw, 92px); line-height: .98; letter-spacing: -.035em; margin: 0 0 26px; }
.hero p { font-size: 20px; max-width: 430px; margin: 0 0 32px; color: #222; }
.hero-art { align-self: stretch; position: relative; margin-right: -24px; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }

.cat-strip { background: var(--bg); padding: 28px 0 8px; }
.cat-strip ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; text-align: center; }
.cat-strip a { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 8px; border-radius: 12px; }
.cat-strip a:hover { color: var(--blue); }
.cat-strip svg { width: 52px; height: 52px; stroke-width: 1.6; }

.section { padding: 34px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 16px; }
.eyebrow { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 16px; margin: 0; }

.cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-card { background: var(--panel); border-radius: var(--radius); overflow: hidden; text-align: center; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.cat-card .img { aspect-ratio: 3 / 2; background: #e9e5de; overflow: hidden; }
.cat-card .img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .txt { padding: 22px 20px 26px; }
.cat-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 21px; letter-spacing: .06em; text-transform: uppercase; }
.cat-card p { margin: 0 0 12px; color: var(--muted); }

.banner { position: relative; overflow: hidden; background: #f4f2ee; }
.banner .wrap { position: relative; z-index: 1; min-height: 360px; display: flex; flex-direction: column; justify-content: center; }
.banner h2 { font-family: var(--display); font-size: clamp(42px, 5vw, 64px); line-height: .98; letter-spacing: -.03em; margin: 0 0 18px; }
.banner p { font-size: 18px; max-width: 360px; margin: 0 0 26px; }
.banner img { position: absolute; top: 0; right: 0; height: 100%; width: 70%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }

.values { background: var(--panel); }
.values ul { list-style: none; margin: 0; padding: 30px 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.values li { padding: 4px 18px; border-left: 1px solid #d2ccc2; }
.values li:first-child { border-left: 0; }
.values svg { width: 38px; height: 38px; margin: 0 auto 8px; stroke-width: 1.6; }
.values h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.values p { margin: 0; color: var(--muted); font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.grid.six { grid-template-columns: repeat(6, 1fr); }
.tile { position: relative; display: flex; flex-direction: column; }
.tile .media { display: block; position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #ece8e1; }
.tile .media img { width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .35s, opacity .3s; }
.tile .media .hover { position: absolute; inset: 0; opacity: 0; }
.tile:hover .media img { transform: scale(1.04); }
.tile:hover .media .hover { opacity: 1; }
.tile .name { margin: 12px 0 2px; font-size: 15.5px; font-weight: 500; }
.tile .name a:hover { color: var(--blue); }
.price { font-weight: 500; }
.price s { color: var(--muted); font-weight: 400; margin-left: 6px; }
.small-note { color: var(--muted); font-size: 13px; }
.ribbons { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.ribbon { background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--pill); }
.swatches { display: flex; gap: 5px; margin-top: 6px; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.tile .buy { margin-top: auto; padding-top: 10px; }
.tile .buy .btn { width: 100%; padding: 10px 12px; font-size: 12px; }
.tile .err { color: var(--red); font-size: 13px; margin: 4px 0 0; }
.skeleton { background: linear-gradient(90deg, #ece8e1 0%, #f5f2ec 50%, #ece8e1 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-tile .media { aspect-ratio: 1; }
.sk-line { height: 14px; margin-top: 12px; width: 70%; }
.state { text-align: center; padding: 60px 20px; color: var(--muted); }
.state h3 { color: var(--ink); font-family: var(--display); margin: 0 0 8px; }

.join { background: #0d0d0d; color: #fff; position: relative; overflow: hidden; }
.join::before, .join::after { content: ""; position: absolute; height: 34px; left: -5%; right: -5%; background: repeating-linear-gradient(90deg, #2b2b2b 0 22px, transparent 22px 30px); opacity: .7; }
.join::before { top: 8px; transform: rotate(-2deg); }
.join::after { bottom: 8px; transform: rotate(1.5deg); }
.join .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 30px; justify-content: space-between; padding-top: 48px; padding-bottom: 48px; flex-wrap: wrap; }
.join h2 { font-family: var(--display); font-size: 32px; margin: 0; letter-spacing: -.01em; }
.join p { margin: 4px 0 0; color: #ddd; font-size: 17px; }
.join form { display: flex; gap: 12px; flex: 1; max-width: 540px; min-width: 280px; flex-wrap: wrap; }
.join input { flex: 1; min-width: 0; background: #fff; color: var(--ink); border: 0; border-radius: var(--pill); padding: 15px 22px; }
.join .msg { width: 100%; margin: 8px 0 0; font-size: 15px; }
.join .msg.err { color: #ff8a95; }

.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; padding-bottom: 30px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 0; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer nav a { padding: 0 20px; border-left: 1px solid #bbb; }
.site-footer nav a:first-child { border-left: 0; }
.site-footer small { color: var(--muted); }

.page-head { padding: 44px 0 10px; }
.page-head h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 58px); letter-spacing: -.03em; margin: 0 0 6px; line-height: 1; }
.page-head p { color: var(--muted); margin: 0; font-size: 18px; max-width: 640px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 6px; }
.chip { border: 1.5px solid var(--ink); border-radius: var(--pill); padding: 8px 16px; font-size: 14px; font-weight: 600; background: transparent; cursor: pointer; }
.chip:hover, .chip.on { background: var(--ink); color: #fff; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.toolbar select, .toolbar input[type=search] { border: 1px solid var(--line); background: var(--surface); border-radius: var(--pill); padding: 9px 16px; }
.toolbar .left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 34px; }
.filters h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.filters fieldset { border: 0; padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.filters label { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; font-size: 15px; }
.filters .count { color: var(--muted); font-size: 13px; margin-left: auto; }
.filters .price-row { display: flex; gap: 8px; align-items: center; }
.filters .price-row input { width: 80px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: var(--surface); }
.filters .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.filter-toggle { display: none; }
.results.dim { opacity: .5; transition: opacity .2s; }
.more { text-align: center; margin-top: 30px; }
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.active-chips button { font-size: 13px; padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }

.sheet-scrim, .drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow: auto; background: var(--bg); z-index: 61; border-radius: 18px 18px 0 0; padding: 20px 22px 24px; }
.sheet .sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet .sheet-foot { display: flex; gap: 10px; margin-top: 10px; position: sticky; bottom: -24px; background: var(--bg); padding: 12px 0; }

.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; padding: 28px 0 60px; align-items: start; }
.gallery .main { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #fff; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumbs button { width: 74px; height: 74px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: none; }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.buybox { position: sticky; top: 110px; }
.buybox h1 { font-family: var(--display); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 12px; }
.buybox .price { font-size: 24px; }
.desc { color: #2a2a2a; margin: 20px 0; font-size: 17px; }
.opt { margin: 18px 0; }
.opt-label { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1.5px solid var(--line); background: var(--surface); padding: 9px 16px; border-radius: var(--pill); cursor: pointer; font-weight: 500; }
.pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pill:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.swatch:disabled { opacity: .35; cursor: not-allowed; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--surface); }
.qty button { width: 40px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 18px; }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty span { min-width: 30px; text-align: center; font-weight: 600; }
.buyrow { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.buyrow .btn { flex: 1; }
.guide { color: var(--muted); font-size: 14px; margin: 8px 0 0; min-height: 1.2em; }
.error { color: var(--red); font-size: 14px; margin: 8px 0 0; }
.info details { border-top: 1px solid var(--line); padding: 14px 0; }
.info summary { cursor: pointer; font-weight: 700; }
.mod-input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg); z-index: 61; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,.15); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.drawer-body { flex: 1; overflow: auto; padding: 10px 22px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 22px 22px; }
.line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line img, .line .ph { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; background: #ece8e1; }
.line .top { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; }
.line .sub { color: var(--muted); font-size: 13px; }
.line .row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.line .qty button { width: 32px; height: 32px; font-size: 16px; }
.line .rm { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.sum { display: flex; justify-content: space-between; margin: 4px 0; }
.sum.total { font-weight: 700; font-size: 18px; margin-top: 8px; }
.coupon { display: flex; gap: 8px; margin: 12px 0; }
.coupon input, .note { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); width: 100%; }
.drawer details { margin: 6px 0; font-size: 14px; }
.drawer summary { cursor: pointer; color: var(--muted); }

.prose { max-width: 720px; font-size: 18px; }
.prose h2 { font-family: var(--display); font-size: 30px; margin: 34px 0 10px; }
.palette-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 26px 0; max-width: 720px; }
.palette-bar i { flex: 1; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header .wrap { justify-content: space-between; }
  .nav.open { display: flex; flex-direction: column; gap: 0; position: fixed; top: 84px; left: 0; right: 0; bottom: 0; background: var(--bg); padding: 16px 24px; overflow: auto; z-index: 50; margin: 0; }
  .nav.open > a, .nav.open .dd > button { padding: 16px 0; border-bottom: 1px solid var(--line); width: 100%; font-size: 16px; }
  .nav.open .dd-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 8px 10px; background: transparent; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero-art { height: 300px; margin: 0 -24px; }
  .hero-art img { -webkit-mask-image: none; mask-image: none; }
  .grid.six { grid-template-columns: repeat(3, 1fr); }
  .values ul { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .values li:nth-child(3) { border-left: 0; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-layout .filters.inline { display: none; }
  .filter-toggle { display: inline-flex; }
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .gallery .main { aspect-ratio: auto; max-height: 45vh; }
  .gallery .main img { max-height: 45vh; }
  .buybox { position: static; }
  .banner img { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  .cat-strip svg { width: 36px; height: 36px; }
  .cat-strip a { font-size: 10.5px; letter-spacing: .02em; padding: 4px; }
  .cat-cards { grid-template-columns: 1fr; }
  .grid.six, .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .values ul { grid-template-columns: 1fr; }
  .values li { border-left: 0; }
  .join form { flex-direction: column; }
  .site-footer .wrap { flex-direction: column; text-align: center; }
  .hero p { font-size: 18px; }
}

/* ---------- color stories ---------- */
.story-head{padding:34px 0 10px;text-align:center}
.story-kicker{font:600 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.story-head h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.03em;line-height:1;margin:.35em 0 .3em}
.palette-bar{display:flex;gap:6px;height:64px;max-width:900px;margin:0 auto;border-radius:var(--radius);overflow:hidden}
.palette-bar i{display:block;height:100%}
.palette-bar.sm{height:34px;gap:4px;border-radius:10px}
.story-tagline{font:italic 400 1.25rem/1.5 var(--body);color:var(--ink);margin:22px auto 0;max-width:640px}
.clues{max-width:760px;margin:40px auto 0;background:var(--panel);border-radius:calc(var(--radius) + 6px);padding:26px 26px 30px;text-align:center}
.clues h2{font-family:var(--display);font-size:1.35rem;margin:0 0 4px}
.clues .sub{color:var(--muted);margin:0 0 18px;font-size:.95rem}
.clue-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.clue-tabs button{font:600 .9rem/1 var(--body);padding:12px 22px;border-radius:var(--pill);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.clue-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.clue-tabs button:disabled{opacity:.45;cursor:not-allowed}
.clue-text{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.35;min-height:2.7em;margin:0}
.clue-next{margin-top:18px}
.story-products{padding:56px 0 20px}
.story-products .sec-title{text-align:center;margin-bottom:26px}
.story-products .sec-title h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.story-products .sec-title p{color:var(--muted);margin:.4em 0 0}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:900px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.story-grid{grid-template-columns:1fr}}
.story-type{font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.soon .media{display:grid;place-items:center;background:var(--panel)}
.mini-card{width:62%;aspect-ratio:1.6;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.mini-card i{display:block;flex:var(--w,1)}
.soon .small-note{margin-top:4px}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;padding:10px 0 40px}
.story-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:22px;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.story-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(17,17,17,.08)}
.story-card .story-kicker{display:block;margin-bottom:10px}
.story-card h3{font-family:var(--display);font-size:1.45rem;margin:14px 0 6px}
.story-card p{color:var(--muted);font-style:italic;margin:0 0 12px}
.clue-text:empty{display:none}
.clues .clue-tabs{margin-bottom:0}
.clues .clue-text{margin-top:22px}
.story-products .sec-title h2#pickTitle{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.3;max-width:760px;margin:0 auto}

/* logo: bold rainbow COLOR */
.logo b { font-weight: 800; }
.logo b .c1 { color: #E5243B; } .logo b .c2 { color: #F58220; } .logo b .c3 { color: #F5B400; } .logo b .c4 { color: #2FA36B; } .logo b .c5 { color: #1F6FD6; }

/* outline very light / white stripes so they don't disappear on white */
.palette-bar i.lt, .mini-card i.lt { box-shadow: inset 0 0 0 1.5px #D6D0C5; }


/* ---- color story page v2 (Nov 2026) ---- */
.story-head{padding:30px 0 0}
.story-head h1{margin:.3em 0 .45em}
.palette-bar.xl{height:72px;gap:6px;max-width:760px;border-radius:16px}
.clue-box{max-width:640px;margin:34px auto 0;background:var(--surface);border:1.5px solid #cfcac1;border-radius:22px;box-shadow:0 8px 26px rgba(17,17,17,.06);padding:30px 22px 28px;text-align:center}
.clue-box h2{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,1.7rem);margin:0 0 20px}
.clue-squares{display:flex;gap:14px;justify-content:center}
.clue-squares button{width:118px;height:92px;border-radius:18px;border:1.5px solid #dcd6cc;background:var(--surface);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .15s,border-color .15s,transform .15s}
.clue-squares button span{font:500 .78rem/1 var(--body);color:var(--muted);letter-spacing:.04em}
.clue-squares button b{font:600 1.9rem/1 var(--display)}
.clue-squares button:hover{border-color:var(--ink);transform:translateY(-2px)}
.clue-squares button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.clue-squares button[aria-selected="true"] span{color:#d9d3c8}
.clue-say{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2.8vw,1.65rem);line-height:1.35;min-height:2.7em;margin:24px auto 0;max-width:520px;transition:opacity .2s,transform .2s}
.clue-say.idle{font:400 1rem/1.5 var(--body);color:var(--muted);min-height:0}
.clue-say.fade{opacity:0;transform:translateY(6px)}
.clue-nudge{margin:10px 0 0;color:var(--muted);font-size:.95rem}
.clue-nudge a{color:var(--ink);font-weight:600;border-bottom:1.5px solid currentColor}
.story-shop{padding:46px 0 10px;max-width:900px;margin:0 auto}
.shop-rule{display:flex;align-items:center;gap:16px;margin:0 0 16px;font:600 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.shop-rule::before,.shop-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.shop-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.shop-item{display:block;color:inherit}
.shop-item .th{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;place-items:center;transition:border-color .15s,transform .15s}
.shop-item .th img{width:100%;height:100%;object-fit:contain}
.shop-item .th .mini-card{width:56%}
.shop-item:hover .th{border-color:var(--ink);transform:translateY(-2px)}
.shop-cap{text-align:center;margin-top:7px;font-size:.8rem;line-height:1.3}
.shop-cap span{display:block;color:var(--muted)}
.shop-cap .price{font-size:.85rem}
.shop-cap small{color:var(--muted)}
.story-nav{justify-content:space-between;padding:34px 0 44px}
@media (max-width:720px){
  .palette-bar.xl{height:52px;gap:4px}
  .clue-squares{gap:10px}
  .clue-squares button{width:92px;height:78px}
  .shop-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* answers page: color stories */
.ans-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ans-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;scroll-margin-top:110px;transition:box-shadow .2s,border-color .2s}
.ans-card .palette-bar{height:30px;gap:3px;border-radius:8px;margin:10px 0 10px}
.ans-card h3{font-family:var(--display);font-size:1.1rem;margin:0 0 8px}
.ans-card summary{cursor:pointer;font-weight:600;font-size:.9rem}
.ans-card .who{font-family:var(--display);font-size:1.15rem;font-weight:600;margin:8px 0 2px}
.ans-card.hit{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
/* fun fact card (Nov 2026) */
.fun-fact{max-width:640px;margin:18px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;overflow:hidden;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.fun-fact.show{opacity:1;transform:none}
.fun-fact[hidden]{display:none}
.fun-fact .ff-bar{width:10px;flex:none;display:flex;flex-direction:column}
.fun-fact .ff-bar i{display:block}
.fun-fact .ff-body{padding:18px 22px}
.fun-fact .ff-k{font:600 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fun-fact p{margin:8px 0 0;font-size:1.05rem;line-height:1.55}
/* fun fact: click to reveal */
.fun-fact .ff-body{width:100%}
.ff-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left;font:inherit}
.ff-btn .ff-cta{font:600 .85rem/1 var(--body);color:var(--ink);border:1.5px solid var(--line);border-radius:var(--pill);padding:8px 14px;white-space:nowrap;transition:border-color .15s,background .15s}
.ff-btn:hover .ff-cta{border-color:var(--ink)}
.fun-fact p.ff-text{transition:opacity .3s}
.fun-fact p.ff-text[hidden]{display:none}
.fun-fact.open .ff-cta{display:none}

/* ---- color games (play.html + home teaser), Nov 2026 ---- */
.play-wrap{padding-bottom:50px}
.play-sub{color:var(--muted);margin:6px auto 0;max-width:560px;font-size:1.05rem}
.play-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:980px;margin:34px auto 0}
.play-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px 20px 22px;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.play-card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 10px 28px rgba(17,17,17,.07)}
.play-card h3{font-family:var(--display);font-size:1.3rem;margin:8px 0 0}
.play-card p{color:var(--muted);margin:0 0 6px;font-size:.95rem}
.play-card .btn{margin-top:auto}
.play-best{font:600 .75rem/1 var(--body);letter-spacing:.06em;color:var(--ink);background:var(--panel);border-radius:var(--pill);padding:6px 10px}
.play-art{position:relative;height:120px;width:100%;display:grid;place-items:center}
.play-art .g-pal{height:110px;width:86px}
.play-art .g-cast{width:150px;height:100px}
.play-q{position:absolute;right:calc(50% - 74px);top:2px;font:700 1.6rem/1 var(--display);color:var(--ink)}
.g-pal{display:flex;flex-direction:column;width:130px;height:190px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.g-pal i{display:block}
.g-pal i.lt{box-shadow:inset 0 0 0 1.5px #D6D0C5}
.g-miss{display:grid!important;place-items:center;background:repeating-linear-gradient(45deg,#f3efe8 0 7px,#fff 7px 14px);transition:background .3s}
.g-miss span{font:700 1.4rem/1 var(--display);color:var(--muted)}
.g-cast{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.play-box{max-width:640px;margin:26px auto 0;background:var(--surface);border:1.5px solid #cfcac1;border-radius:22px;box-shadow:0 8px 26px rgba(17,17,17,.06);padding:24px 22px 26px;text-align:center}
.play-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.play-count{font-size:.85rem;color:var(--muted)}
.play-prog{display:flex;gap:5px;margin:14px 0 4px}
.play-prog b{flex:1;height:6px;border-radius:3px;background:var(--line)}
.play-prog b.done{background:var(--ink)}
.play-prog b.now{background:#9a958d}
.play-prompt{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.55rem);margin:16px 0 16px;line-height:1.3}
.play-prompt b{font-weight:700}
.play-visual{min-height:190px;display:grid;place-items:center}
.play-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.play-opts.cols{grid-template-columns:repeat(4,1fr)}
.play-opt{font:600 .98rem/1.25 var(--body);padding:14px 12px;border-radius:14px;border:1.5px solid #dcd6cc;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s}
.play-opt:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}
.play-opt.chip{aspect-ratio:1.6;padding:0;border:3px solid #fff;box-shadow:0 0 0 1.5px #dcd6cc}
.play-opt.ok{background:#E1F5EE;border-color:#1D9E75;color:#085041}
.play-opt.no{background:#FCEBEB;border-color:#E24B4A;color:#791F1F}
.play-opt.chip.ok{background-clip:padding-box;box-shadow:0 0 0 3px #1D9E75}
.play-opt.chip.no{box-shadow:0 0 0 3px #E24B4A;opacity:.8}
.play-opt:disabled{cursor:default}
.play-feedback{min-height:1.6em;margin:16px 0 0;font-size:1.02rem}
.play-feedback.good{color:#0F6E56}
.play-feedback.bad{color:#A32D2D}
.play-next{margin-top:10px;min-height:46px}
.play-score .play-big{font:700 4.4rem/1 var(--display);margin:14px 0 4px;letter-spacing:-.03em}
.play-score .play-big span{font-size:.45em;color:var(--muted)}
.play-score h2{font-family:var(--display);margin:4px 0 0}
.play-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.play-shared{min-height:1.4em;color:var(--muted);font-size:.9rem;margin:10px 0 0;word-break:break-word}
.play-links{max-width:900px;margin:40px auto 0}
.play-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.play-link{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;color:inherit;transition:border-color .15s}
.play-link:hover{border-color:var(--ink)}
.play-link b{font-family:var(--display);font-size:1.1rem}
.play-link span{color:var(--muted)}
.play-link .link-arrow{color:var(--ink);margin-top:6px}
.play-more{text-align:center;color:var(--muted);margin-top:22px}
.play-more a{color:var(--ink);font-weight:600;text-decoration:underline}
.games-teaser .gt-head{text-align:center;margin-bottom:24px}
.games-teaser .gt-head h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;margin:8px 0 6px}
.games-teaser .gt-head p{color:var(--muted);margin:0}
@media (max-width:820px){.play-pick{grid-template-columns:1fr;max-width:420px}}
@media (max-width:520px){.play-opts{grid-template-columns:1fr}.play-opts.cols{grid-template-columns:repeat(2,1fr)}}
.play-next .btn[hidden]{display:none!important}
.play-opt.chip{width:100%;height:auto;min-height:64px;border-radius:14px}

/* games: intro line + play-at-home ads */
.play-intro{margin:-6px auto 12px;color:var(--muted);font-size:.98rem;max-width:460px}
.play-ads{display:grid;gap:16px}
.play-ad{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:10px;background:var(--bg);color:var(--ink);border-radius:24px;padding:28px 30px;min-height:230px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.play-ad:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,17,17,.14)}
.play-ad::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.18)}
.play-ad::after{content:"";position:absolute;left:38%;bottom:-70px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.pa-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pa-k{font:700 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.play-ad b{font:700 clamp(1.4rem,2.8vw,1.9rem)/1.1 var(--display);letter-spacing:-.02em}
.pa-t{font-size:1rem;line-height:1.45;opacity:.92;max-width:300px}
.pa-btn{margin-top:8px;background:var(--ink);color:var(--bg);font:700 .85rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:12px 18px}
.pa-imgs{position:relative;z-index:1;height:200px}
.pa-imgs img{position:absolute;top:50%;left:50%;width:150px;height:150px;object-fit:cover;border-radius:14px;background:#fff;border:4px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.18);transform:translate(calc(-50% + (var(--j) - 1) * 62px),-50%) rotate(calc((var(--j) - 1) * 8deg))}
.pa-imgs img:only-child{transform:translate(-50%,-50%) rotate(-4deg)}
@media (max-width:640px){.play-ad{grid-template-columns:1fr;padding:24px}.pa-imgs{height:170px}.pa-imgs img{width:120px;height:120px;transform:translate(calc(-50% + (var(--j) - 1) * 52px),-50%) rotate(calc((var(--j) - 1) * 8deg))}}

/* games: play-at-home ads, design C (slim) */
.play-ad2{display:grid;grid-template-columns:1.5fr 1fr;border-radius:20px;overflow:hidden;color:var(--ink);min-height:0;transition:transform .2s,box-shadow .2s}
.play-ad2:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(17,17,17,.12)}
.pa2-txt{background:var(--bg);padding:22px 26px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.pa2-k{font:700 .7rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.play-ad2 b{font:700 clamp(1.25rem,2.4vw,1.6rem)/1.1 var(--display);letter-spacing:-.02em}
.pa2-s{font-size:.92rem;opacity:.9}
.pa2-btn{margin-top:6px;background:var(--ink);color:var(--bg);font:700 .78rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:10px 16px}
.pa2-img{background:#fff;display:grid;place-items:center;padding:12px}
.pa2-img img{width:auto;max-width:100%;height:150px;object-fit:contain;border-radius:6px}
@media (max-width:600px){.play-ad2{grid-template-columns:1fr}.pa2-img img{height:130px}}

/* games ads: compact */
.play-links .play-ads{max-width:640px;margin:0 auto;gap:12px}
.play-ad2{grid-template-columns:1fr 160px}
.pa2-txt{padding:18px 22px;gap:5px}
.play-ad2 b{font-size:clamp(1.15rem,2.2vw,1.4rem)}
.pa2-img{padding:0;background:#fff}
.pa2-img img{width:160px;height:100%;min-height:150px;max-height:170px;object-fit:cover;border-radius:0}
@media (max-width:520px){.play-ad2{grid-template-columns:1fr 120px}.pa2-img img{width:120px;min-height:140px}}
.pa2-img{padding:8px}.pa2-img img{width:144px;height:144px;min-height:0;max-height:none;object-fit:contain}
@media (max-width:520px){.pa2-img img{width:104px;height:120px}}
.pa2-txt{align-items:center;text-align:center}
.play-links .shop-rule{font-size:1.05rem;letter-spacing:.14em;margin-bottom:20px}

/* ---- accessibility (Nov 2026) ---- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#111;color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .15s}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid #1f6fd6;outline-offset:3px;border-radius:6px}
.btn:focus-visible,.play-opt:focus-visible,.clue-squares button:focus-visible,.chip:focus-visible{outline:3px solid #1f6fd6;outline-offset:3px}
#main:focus{outline:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== Nov 2026 redesign: dark header, home page, join, footer ===== */
.site-header { background: #111; color: #fff; border-bottom: 1px solid #2a2a2a; backdrop-filter: none; }
.site-header .wrap { height: 78px; }
.site-header .logo { color: #fff; font-size: 22px; }
.site-header .nav { gap: 30px; font-size: 14px; }
.site-header .nav > a { border-bottom: 2px solid transparent; }
.site-header .nav > a:hover, .site-header .nav > a[aria-current="page"] { color: #fff; border-bottom-color: var(--yellow); }
.site-header .icon-btn { color: #fff; border-radius: 50%; }
.site-header .icon-btn:hover { background: #222; }
.dd.shop-all > button { background: var(--yellow); color: #111; border-radius: 999px; padding: 9px 16px; font-weight: 700; }
.dd.shop-all .dd-menu { left: auto; right: 0; top: calc(100% + 10px); min-width: 230px; color: #111; border: 0; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.dd.shop-all .dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.dd-menu .dd-grp { display: block; padding: 8px 12px 2px; font-weight: 600; color: #111; }
.dd-menu a.sub { padding-left: 26px; font-size: 14px; color: #444; }
.search-bar { border-top-color: #2a2a2a; }
.nav.open { top: 78px; background: #111; }
.nav.open > a, .nav.open .dd > button { border-bottom-color: #2a2a2a; }
.nav.open .dd.shop-all > button { background: none; color: var(--yellow); border-radius: 0; padding: 16px 0; }
.nav.open .dd-menu { color: #fff; }
.nav.open .dd-menu a.sub, .nav.open .dd-menu .dd-grp { color: #ddd; }
.nav.open .dd-menu a:hover { background: #222; }
.skip-link:focus { color: #111; }

/* footer */
.site-footer { background: #111; color: #fff; border-top: 1px solid #2a2a2a; }
.site-footer .logo { color: #fff; }
.site-footer nav a { border-left-color: #444; }
.site-footer small { color: #aaa; }
.site-footer .legal { width: 100%; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #bbb; }
.site-footer .legal a:hover, .site-footer nav a:hover { color: var(--yellow); }

/* join (all pages) */
.join { background: #fff; color: #111; text-align: center; border-top: 1px solid var(--line); }
.join::before, .join::after { display: none; }
.join .wrap { display: block; max-width: 680px; padding-top: 64px; padding-bottom: 64px; }
.join .k2 { margin-bottom: 8px; }
.join h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.join form { margin: 22px auto 0; max-width: 560px; justify-content: center; flex-direction: row; }
.join input { border: 2px solid #111; padding: 13px 20px; }
.join form .btn { background: #111; color: #fff; border: 2px solid #111; }
.join .fine { width: 100%; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.join .msg { color: #111; font-weight: 600; }
.join .msg b { background: var(--yellow); padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; }
.join .msg.err { color: #c21f33; }
@media (max-width: 560px) { .join form { flex-direction: column; } }

.k2 { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.k2.y { color: var(--yellow); }

/* home */
.home2 h1, .home2 h2, .home2 h3 { font-family: var(--display); letter-spacing: -.02em; margin: 0; }
.home2 .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 13px 24px; font-weight: 700; border: 2px solid currentColor; }
.home2 .btn.outline { background: none; color: #111; }
.home2 .btn.outline.light { color: #fff; }
.home2 .btn.dark { background: #111; color: #fff; border-color: #111; }
.h-hero { background: #111; color: #fff; padding: 64px 0 0; overflow: hidden; }
.h-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.h-hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1; }
.h-hero h1 .nw { white-space: nowrap; }
.h-hero .lede { font-size: 19px; max-width: 600px; opacity: .9; margin: 20px 0 0; }
.invite { border: 2px solid #333; border-radius: 22px; padding: 26px; background: #1a1a1a; }
.invite h2 { font-size: 26px; line-height: 1.1; margin: 6px 0 8px; }
.invite p { margin: 0 0 16px; color: #bbb; font-size: 15px; }
.inv-dots { display: flex; gap: 8px; margin-bottom: 16px; }
.inv-dots i { width: 30px; height: 30px; border-radius: 50%; background: #333; transition: background .6s; }
.inv-games { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.inv-games a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; background: #242424; font-weight: 700; font-family: var(--display); font-size: 19px; letter-spacing: -.01em; transition: background .2s, transform .2s; }
.inv-games a:hover, .inv-games a:focus-visible { background: #2f2f2f; transform: translateX(4px); }
.inv-games a span:last-child { margin-left: auto; opacity: .6; }
.inv-sw { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.home2 .inv-go { background: var(--yellow); border-color: var(--yellow); color: #111; width: 100%; justify-content: center; }
.home2 .inv-go:hover { background: #ffc928; border-color: #ffc928; }
.strip { margin-top: 48px; background: #000; padding: 16px 0; position: relative; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, #000 0 10px, #2b2b2b 10px 22px); }
.strip::before { top: 3px; } .strip::after { bottom: 3px; }
.reel { display: flex; gap: 14px; width: max-content; animation: reelRoll 60s linear infinite; padding: 10px 0; }
.strip:hover .reel, .strip:focus-within .reel { animation-play-state: paused; }
@keyframes reelRoll { to { transform: translateX(-50%); } }
.frame { width: 190px; height: 130px; border-radius: 6px; overflow: hidden; border: 0; padding: 0; cursor: pointer; position: relative; background: #222; }
.frame .pal, .h-stories .pal { display: flex; height: 100%; }
.frame .pal i, .h-stories .pal i { display: block; height: 100%; }
.frame .lab { position: absolute; inset: 0; background: rgba(0,0,0,.8); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 12px; text-align: left; opacity: 0; transition: opacity .2s; font-size: 13px; }
.frame .lab b { font-family: var(--display); font-size: 15px; }
.frame[aria-pressed="true"] .lab { opacity: 1; }
.h-hero .hint { text-align: center; color: #aaa; font-size: 13px; padding: 12px 0 22px; margin: 0; }
.h-sec { padding: 72px 0; }
.h-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.h-head h2 { font-size: clamp(28px, 3.6vw, 42px); }
.h-head p { margin: 6px 0 0; color: var(--muted); max-width: 520px; }
.h-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h-stories { background: #fff; }
.h-story { display: block; background: #fff; border: 2px solid #111; border-radius: 14px; overflow: hidden; transition: transform .2s; }
.h-story:hover { transform: translateY(-4px); }
.h-story .bar { height: 120px; }
.h-story .t { padding: 14px 16px 18px; }
.h-story small { font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.h-story h3 { font-size: 19px; margin-top: 2px; }
.h-story p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.h-create { background: var(--yellow); color: #111; }
.cr-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.h-create h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1; margin: 8px 0 14px; }
.h-create p { font-size: 17.5px; margin: 0 0 22px; max-width: 480px; }
.cr-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cr-flow li { background: #111; color: #fff; border-radius: 18px; padding: 14px; display: grid; gap: 10px; text-align: center; font-size: 14.5px; position: relative; }
.cr-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 42%; font-weight: 700; font-size: 18px; color: #111; }
.cr-art { border-radius: 10px; overflow: hidden; background: #1d1d1d; }
.cr-art svg { display: block; width: 100%; height: auto; }
.h-feat { background: #111; color: #fff; }
.h-feat .prod { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #1d1d1d; border: 2px solid #2a2a2a; }
.h-feat .prod .im { aspect-ratio: 1; background: #f1eee8; overflow: hidden; }
.h-feat .prod .im > img { width: 100%; height: 100%; object-fit: cover; }
.h-feat .prod .t { padding: 14px 16px 18px; }
.h-feat .prod h3 { font-size: 18px; }
.h-feat .prod p { margin: 3px 0 0; font-size: 14px; color: #aaa; }
.mugset { display: flex; gap: 4px; padding: 10px; width: 100%; height: 100%; align-items: center; }
.mugset img { flex: 1; min-width: 0; object-fit: contain; border-radius: 8px; }
.float-play { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: #111; font-weight: 700; font-family: var(--display); font-size: 14px; padding: 8px 14px 8px 10px; border: 2px solid #111; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .25s; }
.float-play[hidden] { display: none; }
.float-play.in { animation: fpIn .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes fpIn { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.float-play:hover { transform: translateY(-2px); }
.fp-dots { display: flex; }
.fp-dots i { width: 12px; height: 12px; border-radius: 50%; margin-left: -4px; border: 2px solid var(--yellow); }
.fp-dots i:first-child { margin-left: 0; }
@media (max-width: 960px) {
  .h-hero-grid, .cr-grid { grid-template-columns: 1fr; gap: 32px; }
  .h-hero h1 .nw { white-space: normal; }
  .h-grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .cr-flow { grid-template-columns: 1fr; } .cr-flow li::after { display: none; } .h-grid4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reel { animation: none; } .float-play.in { animation: none; } }

.home2 .btn, .join form .btn { text-transform: none; letter-spacing: 0; font-size: 16px; }
.float-play { bottom: 84px; }

.site-footer nav { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
@media (max-width: 560px) { .site-footer nav a { padding: 0 12px; } }

.h-feat .prod .im { background: #fff; display: flex; align-items: center; justify-content: center; }
.h-feat .prod .im > img { object-fit: contain; padding: 14px; }

.float-play { bottom: 24px; }
.h-feat .mugset { padding: 6px; gap: 0; }
.h-feat .mugset img { border-radius: 0; }

.h-feat .mugset { justify-content: center; overflow: hidden; }
.h-feat .mugset img { flex: none; width: 50%; margin: 0 -9%; transform: scale(1.25); }
.h-feat .mugset img:nth-child(2) { position: relative; z-index: 1; }

.h-feat .mugset { display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 0 4%; overflow: hidden; }
.h-feat .mugset img { width: 100%; margin: -12% 0; transform: scale(1.15); }
.h-feat .mugset img:nth-child(3) { grid-column: 1 / 3; width: 50%; }

/* footer disclaimer */
.site-footer .disclaimer{max-width:760px;margin:22px auto 0;padding:16px 20px 0;border-top:1px solid rgba(255,255,255,.18);text-align:center;font-size:.82rem;line-height:1.55;opacity:.85}
.site-footer .disclaimer b{font-weight:700}