/* Calm and premium with a groovy streak. See research/premium-playful.md.
   Roughly 90% white and light gray, soft tints behind the photos, and full-strength color only
   in small details: dots, badges, wavy lines, one groovy shape at a time. */
:root {
  --paper: #ffffff;
  --alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: #d2d2d7;

  /* Accents named after real glass rod colors (research/glass-colors.md). */
  --sangre: #c8321f;
  --rubino: #a8265e;
  --coral: #f2674a;
  --uranium: #e4dd3b;
  --emerald: #0f6b45;
  --turquoise: #1fb5c9;
  --cobalt: #1f3fa8;
  --orchid: #8a4fbf;

  --serif: 'Bagel Fat One', 'Cooper Black', Georgia, serif;   /* fat, candy-like 70s headlines */
  --sans: 'Fredoka', system-ui, sans-serif;   /* rounded, friendly text that reads at small sizes */
  --label: 'Fredoka', system-ui, sans-serif;
  --logo: 'Shrikhand', Georgia, serif;

  --gutter: clamp(20px, 4vw, 56px);
  --radius: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Any element with --accent gets a soft tint and a darker text shade of that color. */
* { --tint: color-mix(in srgb, var(--accent, var(--ink)) 11%, #fff); --deep: color-mix(in srgb, var(--accent, var(--ink)) 62%, #1d1d1f); }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 12px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.04; }
h1 { font-size: clamp(46px, 5.6vw, 78px); }
h2 { font-size: clamp(34px, 4.2vw, 56px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
.eyebrow { font: 600 12px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* Small details that carry the color */
.dots { display: inline-flex; gap: 8px; }
.dot-c { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.badge {
  display: inline-block; justify-self: start; align-self: flex-start;
  font: 600 12px var(--label); letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: var(--tint); color: var(--deep);
}

/* Groovy divider: three wavy stripes in glass colors. */
.groove { height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30' fill='none' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M0 6 Q18 0 36 6 T72 6' stroke='%23f2674a'/%3E%3Cpath d='M0 15 Q18 9 36 15 T72 15' stroke='%23e4dd3b'/%3E%3Cpath d='M0 24 Q18 18 36 24 T72 24' stroke='%231fb5c9'/%3E%3C/svg%3E") center / 72px 30px repeat-x; }

/* Photo tiles: a pale tint of the necklace's color with a crisp glass-color splash behind the cutout photo.
   The body covers most of the splash, so it shows around the neck and over the shoulders. */
.tile { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--tile-bg, color-mix(in srgb, var(--accent, var(--ink)) 6%, #fff)); }
/* The groovy shape sweeps across the whole tile, over its tinted background: two-tone, no white. */
.tile .splash { position: absolute; z-index: 0; left: 50%; top: 34%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.tile .splash svg { display: block; width: 100%; height: 100%; }
.shot { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; transition: transform .35s var(--ease); }

/* One small glass-shaped accent peeking from behind a tile corner. */
.accent-shape { position: absolute; z-index: 0; width: 132px; aspect-ratio: 1; pointer-events: none; }
.accent-shape svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Header (Brittany's drawing): the name big and black at the top left, the menu to its right.
   The header bar itself stays slim; the big name hangs below it and shrinks into the bar once you scroll,
   using a transform so nothing on the page moves. */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 32px; height: 64px;
  padding: 0 var(--gutter); background: transparent; transition: background .25s, box-shadow .25s;
}
.top.small { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--line); }
.logo { font-family: var(--serif); font-size: 28px; line-height: 1; text-decoration: none; color: var(--ink); }
.top .logo { align-self: flex-start; margin-top: 12px; white-space: nowrap; font-size: clamp(42px, 8vw, 112px); transform-origin: 0 0; transition: transform .35s var(--ease); }
.top.small .logo { transform: translateY(-3px) scale(var(--logo-small, .3)); }
.logo .i { position: relative; display: inline-block; }
/* The logo uses a dotless ı; this bead is its dot. shop.js measures where the font draws the real dot. */
.logo .dot { position: absolute; left: var(--dot-left, .06em); top: var(--dot-top, .02em); width: var(--dot-size, .26em); height: var(--dot-size, .26em); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--coral) 34%, color-mix(in srgb, var(--coral) 60%, #000) 100%); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 17px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--ink); }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu { position: relative; }
.menu-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; cursor: pointer; background: none; border: 0; font: inherit; }
.menu-btn::after { content: ''; width: 7px; height: 7px; border-right: 2px solid; border-bottom: 2px solid; rotate: 45deg; translate: 0 -2px; transition: rotate .2s var(--ease), translate .2s; }
.menu-btn[aria-expanded="true"]::after { rotate: 225deg; translate: 0 2px; }
.menu-list { position: absolute; top: 100%; left: -16px; margin-top: 12px; list-style: none; min-width: 200px; padding: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--coral); transform-origin: 24px 0; animation: pop-open .22s var(--ease); }
.menu-list::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }  /* keeps hover alive across the gap */
/* A little yellow daisy peeking over the top corner. */
.menu-list::after { content: ''; position: absolute; top: -13px; right: -12px; width: 30px; height: 30px; rotate: 14deg; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23e4dd3b' stroke='%231d1d1f' stroke-width='1.6'%3E%3Cellipse cx='20' cy='10' rx='6.2' ry='8.6'/%3E%3Cellipse cx='20' cy='10' rx='6.2' ry='8.6' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='6.2' ry='8.6' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='6.2' ry='8.6' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='6.2' ry='8.6' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5' fill='%23f2674a' stroke='%231d1d1f' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu-list a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; transition: background .15s; }
/* Each row gets a glass bead in its own color; it swells on hover and the row takes a soft wash of that color. */
.menu-list a::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--c) 38%, color-mix(in srgb, var(--c) 70%, #000) 100%); transition: scale .2s var(--ease); }
.menu-list li:nth-child(5n+1) { --c: var(--coral); }
.menu-list li:nth-child(5n+2) { --c: var(--turquoise); }
.menu-list li:nth-child(5n+3) { --c: var(--uranium); }
.menu-list li:nth-child(5n+4) { --c: var(--orchid); }
.menu-list li:nth-child(5n+5) { --c: var(--emerald); }
.menu-small { display: none; }  /* About and Markets, in the menu on phones where the bar has no room for them */
.menu-list li:not(.menu-small) + .menu-small { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.menu-list a:hover, .menu-list a:focus-visible { background: color-mix(in srgb, var(--c) 16%, #fff); text-decoration: none; }
.menu-list a:hover::before, .menu-list a:focus-visible::before { scale: 1.45; }
@keyframes pop-open { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
/* The bag: a groovy flower (play.js bounces the bead on it and into the middle on add-to-bag). */
.bag-btn { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; cursor: pointer; background: none; border: 0; border-radius: 50%; }
.bag-flower { width: 100%; height: 100%; overflow: visible; }
.bag-flower .petals { stroke: var(--ink); stroke-width: 3.4; transform-origin: 50px 50px; transition: rotate .6s var(--ease); }
.bag-btn:hover .petals { rotate: 45deg; }
.bag-flower .middle { fill: var(--uranium); stroke: var(--ink); stroke-width: 3.4; transition: fill .3s; }
.bag-btn .count { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 11px var(--label); box-shadow: 0 0 0 2px #fff; }
.bag-btn.bump .count { animation: bump .35s var(--ease); }
@keyframes bump { 50% { transform: scale(1.3); background: var(--cobalt); } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 500 17px var(--sans); background: var(--ink); color: #fff;
  border: 0; border-radius: 999px; padding: 13px 26px; transition: background .2s var(--ease);
}
.btn:hover { background: var(--cobalt); }
.btn-block { width: 100%; }
.more { color: var(--cobalt); text-decoration: none; font-weight: 500; }
.more::after { content: ' ›'; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--cobalt); font-weight: 500; }

/* Hero (Brittany's drawing): mostly the picture. The chest shot sits at the bottom of a wide board with no card
   around it, the layered splash big behind it wrapping around the shoulders, and both cut off flat at the photo's
   bottom edge. The tagline sits big and black below, and everything fits on the first screen.
   The photo is 56.25% of the board's width; --tag is the room kept for the tagline. */
.hero { --over: clamp(8px, calc(8vw - 44px), 72px); --tag-size: clamp(40px, 5.4vw, 84px); --tag: calc(var(--tag-size) * .95 + 24px);
  overflow: hidden; padding: var(--over) 0 20px; }  /* --over: room for the big name hanging below the 64px bar */
.stage { position: relative; width: min(100%, calc((100svh - 64px - var(--over) - var(--tag) - 20px) * 1.6), 1600px); aspect-ratio: 8 / 5; margin: 0 auto;
  cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  clip-path: inset(-100vh -100vw 0 -100vw); }  /* cut the splash off flat at the photo's bottom edge, nowhere else */
.hero-splash { position: absolute; left: 50%; top: 66%; width: 112%; aspect-ratio: 75 / 56; translate: -50% -50%; pointer-events: none; }
.hero-splash svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stage .shot { position: absolute; left: 50%; bottom: 0; width: 56.25%; aspect-ratio: 3 / 2; translate: -50% 0; }
.tagline { position: relative; z-index: 2; margin: 18px auto 0; padding: 0 var(--gutter); text-align: center; font-size: var(--tag-size); line-height: .95; color: var(--ink); }
/* The drawn "!": the real character stays for search and screen readers but is invisible; a stem and a bead dot
   are drawn in its place. play.js hides the dot (.bang.waiting) while the bead bounces in to become it. */
/* The rotating words: one in place, the outgoing one fading up and away on top of it; the width eases so the "!" glides. */
.rot { position: relative; display: inline-block; white-space: nowrap; }
.rot-word { display: inline-block; }
.rot-word .ch { display: inline-block; white-space: pre; transform-origin: 50% 80%; }  /* one per letter, typed in by play.js */
.bang { position: relative; display: inline-block; color: transparent; }
.bang::before { content: ''; position: absolute; left: 50%; top: .08em; width: .19em; height: .5em; translate: -50% 0; border-radius: .1em; background: var(--ink); rotate: 6deg; }
.bang::after { content: ''; position: absolute; left: 50%; top: .64em; width: var(--bead, .22em); height: var(--bead, .22em); translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--coral) 34%, color-mix(in srgb, var(--coral) 60%, #000) 100%); }
.bang.waiting::after { visibility: hidden; }
@media (max-width: 760px) {
  /* Phones: a square board (the splash's sides are trimmed), photo bigger. */
  .hero { --tag-size: clamp(40px, 12vw, 60px); }
  .stage { width: 100%; aspect-ratio: 1; }
  .stage .shot { width: 90%; }
  .hero-splash { width: 150%; top: 64%; }
}

/* Section heads from the drawings: three wavy pen lines and a hand-lettered caps title. */
.collections, .colors { padding-top: clamp(64px, 8vw, 112px); }
.lines-head { max-width: 1240px; margin: 0 auto 28px; padding: 0 var(--gutter); }
.lines { display: block; width: 100%; height: 40px; }
.lines path { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.lines-head h2 { margin-top: 14px; font: 500 clamp(22px, 2.6vw, 34px)/1.1 var(--label); letter-spacing: .14em; text-transform: uppercase; }

/* Shop by collection: three tall color panels, each with the photo in a window of its own shape. */
.panels { list-style: none; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel { background: var(--panel); border: 2.5px solid var(--ink); }
.panel + .panel { border-left: 0; }
.panel:first-child { border-radius: 28px 0 0 28px; }
.panel:last-child { border-radius: 0 28px 28px 0; }
.panel button { display: grid; grid-template-rows: auto 1fr; gap: 28px; width: 100%; height: 100%; padding: clamp(22px, 3vw, 40px); background: none; border: 0; cursor: pointer; text-align: center; }
.window { display: block; width: 100%; height: auto; overflow: visible; transition: transform .35s var(--ease); }
.win-edge > * { fill: var(--ink); stroke: var(--ink); stroke-width: 9; }
.panel button:hover .window { transform: rotate(-3deg) scale(1.03); }
.charm { transform-origin: 100px 50px; transition: transform .5s var(--ease); }
.panel button:hover .charm { transform: rotate(6deg); }
.panel-label { display: grid; align-content: center; gap: 6px; min-height: 9.5em; padding: 18px 16px; background: #fff; border: 2.5px solid var(--ink); }
.panel-name { font: 400 clamp(26px, 2.7vw, 40px)/.95 var(--serif); color: #fff; paint-order: stroke fill; -webkit-text-stroke: .12em var(--ink); text-shadow: .07em .07em 0 var(--panel); text-transform: uppercase; }
.panel-blurb { font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .panels { grid-template-columns: 1fr; }
  .panel + .panel { border-left: 2.5px solid var(--ink); border-top: 0; }
  .panel:first-child { border-radius: 28px 28px 0 0; }
  .panel:last-child { border-radius: 0 0 28px 28px; }
  .panel button { gap: 20px; }
  .window { width: min(100%, 240px); justify-self: center; }
  .panel-label { min-height: 0; }
}

/* Shop by color: full-width wavy bands, one color each, with its name in big stacked letters (stack.js). */
.bands { margin-top: 8px; }
.band { position: relative; isolation: isolate; margin-top: -48px; padding: clamp(72px, 8vw, 104px) var(--gutter) clamp(88px, 10vw, 128px); }
.band:first-child { margin-top: 0; }
.band-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.band-fill { fill: var(--band); }
.band-edge { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.band-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.band.flip .band-photo { order: 2; rotate: 2deg; }
.band-photo { display: block; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--tile-bg); border: 4px solid var(--ink); border-radius: 36px; rotate: -2deg; transition: transform .35s var(--ease); }
.band-photo:hover { transform: scale(1.03); }
.band-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band-words { display: grid; justify-items: center; gap: 14px; }
.stack { position: relative; width: 100%; height: clamp(170px, 21vw, 290px); font: 400 calc(clamp(76px, 10.5vw, 156px) * var(--fit, 1))/1 var(--serif); margin-bottom: .2em; cursor: pointer; user-select: none; -webkit-user-select: none; }
.stack .ch { position: absolute; left: 0; top: 0; display: grid; place-items: center; line-height: 1; padding-bottom: .13em;  /* Bagel's caps sit low in the line; this centers them in their box */
  color: #fff; paint-order: stroke fill; -webkit-text-stroke: .09em var(--ink); text-shadow: .045em .055em 0 var(--ink); will-change: transform; }
.stack .ch.up { z-index: 1; }  /* wedged letters sit in front of the ones holding them up */
.stack.waiting .ch { visibility: hidden; }
.shades { font: 600 15px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-align: center; }
.band-go { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 16px var(--sans); background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 9px 10px 9px 20px; box-shadow: 3px 3px 0 var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.band-go:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.band-go .n { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
@media (max-width: 760px) {
  .band-inner { grid-template-columns: 1fr; }
  .band.flip .band-photo { order: 0; }
  .band-photo { width: min(78%, 320px); justify-self: center; }
}

/* Shop */
.shop { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.filter-by { display: inline-grid; grid-template-columns: repeat(4, auto); margin-top: 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 40px; }
.chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 14px 8px 10px; background: var(--alt); border: 0; border-radius: 999px; transition: background .2s var(--ease); }
.chip:hover { background: #ebebef; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chip .n { color: var(--ink-2); font-size: 12px; }
.chip[aria-pressed="true"] .n { color: #b8b8be; }

.grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
.card-btn { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.card-btn:hover .shot { transform: scale(1.03); }
.card .badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.92); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.card-name { font-weight: 600; font-size: 19px; }
.card-price { font-size: 16px; }
.card-sub { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.card.sold .shot { filter: saturate(.25); opacity: .85; }
.card.sold .tile { background: var(--alt); }
.card.sold .splash { filter: grayscale(1); opacity: .35; }
.empty { color: var(--ink-2); }
.found { margin-top: clamp(64px, 8vw, 104px); }
.found .grid { margin-top: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.found .card-name { font-size: 17px; }

/* The bottom of the page picks up the top's colors (Brittany's drawings): wavy bands with a pen-line edge
   (story, signup, footer) and outlined color cards (perks), with the necklace grid above kept white. */
.band-heading { color: #fff; paint-order: stroke fill; -webkit-text-stroke: .1em var(--ink); text-shadow: .05em .06em 0 var(--ink); }

/* Story: a yellow band, the bead strand across its top */
.story { --band: #f7d94a; padding: 36px var(--gutter) clamp(96px, 10vw, 140px); }
.strand { width: 100%; height: 210px; }
.story-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 88px); align-items: end; }
.story h2 { font-size: clamp(44px, 6vw, 84px); }
.story p { font-size: 19px; max-width: 34ch; color: var(--ink); }
.story .sig { font-family: var(--logo); font-size: 30px; color: var(--cobalt); margin-top: 20px; }

/* Perks: outlined color cards, like the collection panels */
.perks { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perk { background: var(--card, var(--alt)); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); padding: 30px 30px 32px; }
.perk-dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); margin-bottom: 28px; }
.perk h3 { margin-bottom: 6px; }
.perk p { color: var(--ink); }

/* Signup: a pink band */
.signup { --band: #f58aa8; position: relative; overflow: hidden; text-align: center; padding: clamp(88px, 10vw, 136px) var(--gutter) clamp(72px, 9vw, 120px); }
.signup > :not(.accent-shape):not(.gbead):not(.band-bg) { position: relative; z-index: 1; }
.signup h2 { font-size: clamp(38px, 5vw, 64px); }
.signup-shape { width: 92px; top: 18%; left: calc(50% - 560px); }
.signup form { display: flex; gap: 10px; max-width: 480px; margin: 28px auto 0; }
.signup input, .ask input, .ask textarea { flex: 1; min-width: 0; font: 17px var(--sans); padding: 13px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.signup input { border: 2px solid var(--ink); }
.signup .thanks { margin-top: 18px; font-weight: 600; }

/* Footer: a cobalt band, everything in white */
footer { --band: #1f3fa8; margin-top: -40px; padding: 88px var(--gutter) 32px; font-size: 13px; color: rgba(255,255,255,.78); }
.foot { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; }
footer .logo { font-size: clamp(56px, 7vw, 84px); color: #fff; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer nav a { display: inline-block; padding: 12px 0; text-decoration: none; }
footer nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
footer .fine { max-width: 1240px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25); }

/* Quick view */
dialog { border: 0; padding: 0; color: var(--ink); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(29, 29, 31, .42); backdrop-filter: blur(6px); }
.qv { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; background: #fff; border-radius: 32px; overflow: auto; }
.qv[open] { animation: rise .3s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.qv-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.qv-media { padding: 24px; }
.qv-viewer { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.qv-hint { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 12px; pointer-events: none; transition: opacity .4s; }
.qv-hint.gone { opacity: 0; }
.qv-thumbs { display: grid; grid-template-columns: repeat(var(--n, 7), calc((100% - 48px) / 7));  /* same thumbnail size however many angles */ gap: 8px; margin-top: 12px; }
.qv-thumbs button { padding: 0; aspect-ratio: 1; overflow: hidden; cursor: pointer; border: 0; border-radius: 12px; background: var(--tile-bg, var(--tint)); transition: box-shadow .2s; }
.qv-thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.qv-thumbs canvas { width: 100%; height: 100%; }
.qv-angle { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-2); }

.qv-info { position: relative; padding: 40px 40px 36px 16px; display: flex; flex-direction: column; gap: 14px; }
.close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 36px; height: 36px; cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; background: var(--alt); border: 0; border-radius: 50%; color: var(--ink-2); }
.close:hover { background: #e8e8ed; color: var(--ink); }
.qv h2 { font-size: clamp(36px, 4vw, 52px); margin-top: 4px; }
.qv-price { font-size: 19px; }
.qv-desc { color: #3a3a3c; }
.qv-details { display: grid; grid-template-columns: auto 1fr; margin-top: 6px; border-top: 1px solid var(--line); font-size: 15px; }
.qv-details dt, .qv-details dd { padding: 11px 0; border-bottom: 1px solid var(--line); }
.qv-details dt { color: var(--ink-2); padding-right: 28px; }
.qv-add-wrap { margin-top: 8px; }
.qv-notes { list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.qv-notes li { display: flex; gap: 10px; align-items: center; }
.qv-notes li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* "Ask for one like it" link: letters wave one at a time, lighting up in glass colors. */
.ask-link { display: inline-flex; align-items: center; gap: 2px; padding: 6px 2px; cursor: pointer; background: none; border: 0; font: 600 13px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.ask-link .ch { display: inline-block; }
.ask-daisy { display: inline-block; width: 18px; margin-right: 6px; transition: rotate .4s var(--ease); }
.ask-daisy svg { display: block; width: 100%; height: auto; }
.ask-link:hover .ch { text-decoration: underline; text-underline-offset: 4px; }
.ask-link.waving .ch { animation: letterwave .7s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 38ms); }
.ask-link.waving .ask-daisy { rotate: 180deg; }
@keyframes letterwave { 0%, 100% { transform: none; color: var(--cobalt); } 35% { transform: translateY(-5px) rotate(-5deg); color: var(--lc); } }

/* Ask popup */
.ask { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; background: #fff; border-radius: 32px; overflow: auto; }
.ask[open] { animation: rise .3s var(--ease); }
.ask-form, .ask-done { padding: 40px 40px 34px; display: grid; gap: 14px; }
.ask h2 { font-size: clamp(32px, 4vw, 44px); padding-right: 40px; }
.ask-sub { color: var(--ink-2); margin-top: -6px; }
.ask fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ask-label { display: block; font: 600 12px var(--label); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 8px; }
.ask-label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ask textarea { width: 100%; resize: vertical; border-radius: 18px; font: 16px/1.4 var(--sans); }
.ask-panel { display: grid; gap: 6px; }
.ask .seg { grid-template-columns: 1fr 1fr; }
.seg { display: grid; gap: 4px; padding: 4px; background: var(--alt); border-radius: 999px; margin: 6px 0 4px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 10px 12px; font: 500 15px var(--sans); cursor: pointer; color: var(--ink-2); transition: background .2s var(--ease), color .2s; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.sold-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sold-card { position: relative; display: grid; gap: 2px; cursor: pointer; }
.sold-card input { position: absolute; opacity: 0; }
.sold-card .tile { border-radius: 20px; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.sold-card .shot { filter: saturate(.6); transition: filter .2s; }
.sold-card:hover .shot, .sold-card input:checked ~ .tile .shot { filter: none; }
.sold-card input:checked ~ .tile { outline-color: var(--accent); }
.sold-card input:focus-visible ~ .tile { outline-color: var(--cobalt); }
.sc-name { font-weight: 600; margin-top: 6px; }
.sc-sub { font-size: 13px; color: var(--ink-2); }
.ask-empty { color: var(--ink-2); }

.ask-preview { width: 100%; height: 130px; display: block; background: var(--alt); border-radius: 20px; }
.swatch-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.swatch { display: grid; justify-items: center; gap: 4px; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.swatch input { position: absolute; opacity: 0; }
.sw-dot { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 10%, rgba(255,255,255,0) 26%), var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); outline: 2px solid transparent; outline-offset: 3px; transition: transform .2s var(--ease), outline-color .2s; }
.swatch:hover .sw-dot { transform: scale(1.08); }
.swatch input:checked + .sw-dot { outline-color: var(--ink); transform: scale(1.08); }
.swatch input:checked ~ .sw-name { color: var(--ink); font-weight: 600; }
.swatch input:disabled ~ * { opacity: .35; cursor: not-allowed; }
.swatch input:focus-visible + .sw-dot { outline-color: var(--cobalt); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { cursor: pointer; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--alt); font-size: 14px; font-weight: 500; transition: background .2s var(--ease), color .2s; }
.pick input:checked + span { background: var(--ink); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.ask-you { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.ask-you input { width: 100%; }
.ask-done { position: relative; text-align: center; justify-items: center; padding-block: 56px 48px; }
.ask-done h2 { padding: 0; }
.ask-done p { color: var(--ink-2); }

/* Bag drawer */
.bag { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 100vw); height: 100dvh; background: #fff; box-shadow: -1px 0 0 var(--line); }
.bag[open] { display: flex; flex-direction: column; animation: slide .3s var(--ease); }
@keyframes slide { from { transform: translateX(100%); } }
.bag::before { content: ''; flex: none; height: 6px; background: linear-gradient(90deg, var(--coral) 0 20%, var(--uranium) 0 40%, var(--turquoise) 0 60%, var(--orchid) 0 80%, var(--emerald) 0); }
.bag-head { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); overflow: hidden; }
/* A soft wash of color tucked into the corner behind the heading. */
.bag-head::before { content: ''; position: absolute; left: -40px; top: -70px; width: 220px; height: 150px; border-radius: 47% 53% 62% 38% / 55% 44% 56% 45%; background: color-mix(in srgb, var(--uranium) 28%, #fff); rotate: -8deg; z-index: -1; }
.bag-head h2 { position: relative; font-size: 30px; display: flex; align-items: center; gap: 10px; }
.bag-head h2::after { content: ''; width: 24px; height: 24px; rotate: -12deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f2674a'%3E%3Cellipse cx='20' cy='9.5' rx='6.2' ry='9'/%3E%3Cellipse cx='20' cy='9.5' rx='6.2' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='9.5' rx='6.2' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='9.5' rx='6.2' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='9.5' rx='6.2' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5.2' fill='%23e4dd3b'/%3E%3C/svg%3E") center / contain no-repeat; }
.bag-head .close:hover { background: color-mix(in srgb, var(--coral) 18%, #fff); color: var(--ink); }
.bag-head .close { position: static; }
.bag-items { list-style: none; flex: 1; overflow: auto; padding: 4px 24px; }
.bag-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bag-item canvas { width: 76px; height: 76px; border-radius: 14px; background: var(--tile-bg, var(--tint)); }
.bag-item .name { font-weight: 600; }
.bag-item .link-btn { font-size: 13px; }
.bag-empty { padding: 48px 0; text-align: center; }
.bag-empty p { font-family: var(--serif); font-size: 26px; margin-bottom: 16px; }
/* Three loose beads above "Nothing here yet." */
.bag-empty::before { content: ''; display: block; width: 74px; height: 22px; margin: 0 auto 14px;
  background: radial-gradient(circle at 11px 11px, var(--coral) 0 9px, transparent 9.5px), radial-gradient(circle at 37px 11px, var(--uranium) 0 9px, transparent 9.5px), radial-gradient(circle at 63px 11px, var(--turquoise) 0 9px, transparent 9.5px); }
.bag-foot { position: relative; padding: 20px 24px 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; background: color-mix(in srgb, var(--turquoise) 7%, #fff); }
.bag-row { display: flex; justify-content: space-between; font-weight: 600; font-size: 18px; }
.bag-note { font-size: 13px; color: var(--ink-2); }
.bag-foot .btn { margin-top: 8px; }

/* ---------- Wavy ribbons in the page background (play.js) ---------- */
/* Each section is its own stacking layer, so ribbons sit above its background but behind its content.
   Ribbons span the full window width, centered on the section. */
.hero, .collections, .colors, .shop, .story, .perks, .signup, footer { position: relative; isolation: isolate; }
.ribbon { position: absolute; left: 50%; width: 130vw; translate: -50% 0; rotate: var(--angle, 0deg); z-index: -1; pointer-events: none; overflow: hidden; }
.ribbon svg { display: block; }

/* ---------- Play: sprinkles and two small bead moments (play.js) ---------- */
.hero, .section-head, .story, .perks, footer { position: relative; }
.sprinkle { position: absolute; z-index: 1; display: block; cursor: pointer; transition: transform .3s var(--ease); }
.sprinkle svg { display: block; width: 100%; height: auto; overflow: visible; }
.sprinkle:hover { transform: rotate(-14deg) scale(1.15); }

/* A glass bead: outer moves sideways, inner moves up and down, ball squashes; dots spin, highlight stays. */
.gbead { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.gbead-y, .gbead-ball { display: block; width: 100%; height: 100%; }
.gbead-ball {
  position: relative; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--c) 52%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), 0 3px 4px rgba(29,29,31,.16);
}
.gbead-ball svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gbead-ball::after { content: ''; position: absolute; left: 22%; top: 14%; width: 34%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-30deg); }
.gbead.resting { pointer-events: auto; cursor: pointer; }

/* Hero moment: two daisies on the first screen that a bead bounces down; play.js places them and sets the height. */
.moment-hero { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none; }
.moment-hero .gbead { pointer-events: auto; cursor: pointer; }
.moment-flower { position: absolute; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; transform-origin: 50% 85%; }
.moment-flower svg { display: block; width: 100%; height: auto; }

@media (max-width: 920px) {
  .grid, .found .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-inner, .perks { grid-template-columns: 1fr; }
  .qv-body { grid-template-columns: 1fr; }
  .qv-info { padding: 8px 24px 32px; }
  .accent-shape { display: none; }
}
@media (max-width: 640px) {
  .nav > a { display: none; }
  .menu-small { display: block; }
  .menu-list { left: auto; right: -70px; }
  .top { gap: 16px; }
  /* Sized so the name, Shop and the bag flower all fit across a phone (the name used to push the bag off the edge). */
  .top .logo { --logo-small: .62; font-size: clamp(24px, 15vw - 28px, 48px); }
  .grid { gap: 32px 14px; }
  .card-name { font-size: 16px; }
  .card .badge { top: 10px; left: 10px; font-size: 10px; }
  .qv { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .qv-media { padding: 16px; }
  .qv .close { position: fixed; top: 24px; right: 24px; background: rgba(255,255,255,.9); }
  .qv-thumbs { gap: 5px; }
  .qv-add-wrap { position: sticky; bottom: 0; background: #fff; padding: 10px 0; }
  .ask { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .ask-form, .ask-done { padding: 28px 20px 24px; }
  .ask-you { grid-template-columns: 1fr; }
  .signup form { flex-direction: column; }
  .hide-small { display: none; }
  .ribbon { rotate: calc(var(--angle, 0deg) * 2); }
}
@media (max-width: 460px) {
  .top .logo { --logo-small: .85; }  /* already small on narrow phones, so it barely shrinks on scroll */
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}