/* signaround — site styles.
 *
 * The chrome keeps the Hummingbird bones (BYQ Supply): towering headlines that
 * rise out of a clipped line, full-bleed color blocks, pill buttons, 16–40px
 * radii, depth from color rather than shadow. It is dressed as "party paper":
 * Savate headlines to sit beside the brush-script wordmark, Bricolage Grotesque
 * for the UI and reading, on a warm cream canvas with one saturated block per
 * section — sunshine, mint, cobalt, bubblegum — tomato for the thing to press,
 * and ink to match the logo.
 *
 * Card designs are a separate thing: a design sets the --paper / --ink /
 * --accent family on the card page (see src/catalog.js) and nothing here.
 */

:root {
  /* ---- Palette primitives */
  --c-cream: #fff6e9;
  --c-oat: #f3e6d2;
  --c-white: #ffffff;
  --c-ink: #141013;
  --c-tomato: #ff4f2e;
  --c-sun: #ffc928;
  --c-bubblegum: #ff8ac6;
  --c-cobalt: #2f4bff;
  --c-mint: #34d399;
  /* Sticker brights for the groups strip and its confetti: brighter than the
     paper palette, so line icons hold up on ink. */
  --g-tomato: #ff6a4d;
  --g-sun: #ffc928;
  --g-sky: #4cc9ff;
  --g-bubblegum: #ff8ac6;
  --g-mint: #34d399;
  --g-violet: #b69bff;
  --g-orange: #ff9f40;
  --g-cobalt: #7d8fff;

  /* Savate for headlines; Bricolage Grotesque, quieter, for the UI and reading. */
  --font-ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-brand: 'Savate', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-xl: 40px;
  --r-pill: 9999px;

  --ease-reveal: cubic-bezier(0.2, 0, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-nav: 0 12px 24px -8px rgba(120, 72, 20, 0.16);
  /* The one other shadow: the floating controls over a card's board. */
  --shadow: 0 8px 24px -12px rgba(20, 16, 19, 0.25);
  --max: 1800px;
  --gutter: 32px;

  /* ---- App chrome, mapped onto the palette */
  --bg: var(--c-cream);
  --surface: var(--c-white);
  --surface-2: var(--c-cream);
  --line: var(--c-oat);
  --line-strong: rgba(20, 16, 19, 0.3);
  --text: var(--c-ink);
  /* Secondary text on the cream and white grounds; color blocks swap it
     for --text-2-on-color, so it never goes gray on a saturated field. */
  --text-2: #6b5d52;
  --text-2-on-color: #3d322d;
  --action: var(--c-tomato);
  --focus-color: var(--c-cobalt);
  --danger: #c4221b;
  --ok: #1d7a52;
  --focus: 0 0 0 3px var(--focus-color);

  /* ---- Card design tokens (defaults; a design overrides these on the card page) */
  --paper: #fbf6ee;
  --paper-deep: #efe5d3;
  --ink: #2b2622;
  --accent: #b8542f;
  --accent-deep: #8f3f22;
  --muted: #7a6f66;
  --font-display: var(--font-brand);
  --font-body: var(--font-ui);

  /* The implements in the signing tray (public/js/icons.js). Mixed from the
     card's own ink and paper, so a pen drawn on a midnight-blue design is
     still an object on that paper rather than a hole cut in it. */
  --tool-body: color-mix(in srgb, var(--ink) 84%, var(--paper));
  --tool-body-2: color-mix(in srgb, var(--ink) 94%, var(--paper));
  --tool-metal: color-mix(in srgb, var(--ink) 32%, var(--paper));
  --tool-wood: color-mix(in srgb, #d8a45c 68%, var(--paper));
  --tool-eraser: color-mix(in srgb, #ef93a3 72%, var(--paper));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--c-ink) var(--c-cream);
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--c-sun);
  color: var(--c-ink);
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--text);
  background: var(--bg);
  caret-color: var(--c-tomato);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-brand);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
}
h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}
h3 {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--c-tomato);
}

.muted {
  color: var(--text-2);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* An uppercase tracked caption, the system's section label. */
.label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.16;
  color: var(--text-2);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------- layout */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - 2 * var(--gutter), 720px);
}

.wrap--read {
  width: min(100% - 2 * var(--gutter), 940px);
}

@media (max-width: 479px) {
  :root {
    --gutter: 16px;
  }
}

main {
  padding-block: 120px 96px;
}

.section {
  padding-block: 80px;
}

.section--roomy {
  padding-block: 160px;
}

@media (max-width: 991px) {
  .section--roomy {
    padding-block: 120px;
  }
}
@media (max-width: 479px) {
  .section,
  .section--roomy {
    padding-block: 80px;
  }
}

/* ------------------------------------------------------------- navbar */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: var(--c-cream);
  padding-block: 24px;
  transition: box-shadow 0.3s;
}

.nav.is-scrolled {
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__links {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 40%;
}

.nav__links a,
.nav__menu a {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
}

.nav__links a:hover,
.nav__menu a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-tomato);
}

.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
  transition: transform 0.4s var(--ease-pop);
}

/* A little wiggle, the way a signature leans when you're pleased with it. */
.brand:hover {
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.04);
}

/* The signature wordmark's swashes take up much of its box, so it runs a
   little taller than the typeset name did to keep the x-height readable. */
.brand img {
  display: block;
  height: 44px;
  width: auto;
}

.nav__cta {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
}

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--text);
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  margin: 5px auto;
  transition: transform 0.2s, opacity 0.2s;
}

.nav__menu {
  display: none;
  padding: 8px var(--gutter) 20px;
}

.nav__menu a {
  display: block;
  padding: 12px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The menu's links would otherwise flatten the button into a full-width bar
   with its label against the left edge; keep it a pill, sized to its words. */
.nav__menu .btn {
  display: flex;
  width: fit-content;
  min-height: 52px;
  padding: 10px 28px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav__menu .btn:hover {
  text-decoration: none;
}

@media (max-width: 991px) {
  .nav {
    padding-block: 14px;
  }
  .nav__links,
  .nav__cta .btn {
    display: none;
  }
  .nav__burger {
    display: block;
  }
  .brand {
    position: static;
    transform: none;
    margin-inline: auto;
  }
  .brand:hover {
    transform: rotate(-3deg) scale(1.04);
  }
  .brand img {
    height: 36px;
  }
  .nav.is-open .nav__menu {
    display: block;
  }
  .nav.is-open .nav__burger span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .nav.is-open .nav__burger span:nth-child(2) {
    opacity: 0;
  }
  .nav.is-open .nav__burger span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }
}

/* ------------------------------------------------------------- footer */

/* The footer goes dark, so the wordmarks in its marquee can come out in
   every color of the palette. */
.footer {
  --text: var(--c-cream);
  --text-2: rgba(255, 246, 233, 0.72);
  --focus-color: var(--c-sun);
  background: var(--c-ink);
  color: var(--text);
  padding: 80px 0 32px;
  overflow: hidden;
}

.footer a {
  color: var(--text);
}

.footer__grid {
  display: grid;
  grid-template-columns: auto 2px auto auto;
  gap: 120px;
  justify-content: start;
}

.footer__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__menu a {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.2s;
}

.footer__menu a:nth-child(4n + 1):hover {
  color: var(--c-sun);
}
.footer__menu a:nth-child(4n + 2):hover {
  color: var(--c-bubblegum);
}
.footer__menu a:nth-child(4n + 3):hover {
  color: var(--c-mint);
}
.footer__menu a:nth-child(4n + 4):hover {
  color: var(--c-tomato);
}

.footer__rule {
  background: rgba(255, 246, 233, 0.25);
  width: 2px;
}

.footer__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__block p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.footer__block a {
  text-decoration: none;
}
.footer__block a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-sun);
}

.footer__marquee {
  display: block;
  margin: 120px 0 80px;
}

/* Each wordmark is the SVG used as a mask, filled with a palette color. */
.footer__marquee .marquee__item {
  display: block;
  height: clamp(72px, 13vw, 200px);
  aspect-ratio: 3042 / 724; /* the SVG's viewBox; keep in step with public/brand/wordmark.svg */
  margin-right: 48px;
  background: var(--mark, var(--c-cream));
  -webkit-mask: url('/brand/wordmark.svg') center / contain no-repeat;
  mask: url('/brand/wordmark.svg') center / contain no-repeat;
}

.footer__marquee .marquee__item:nth-child(3n + 1) {
  --mark: var(--c-sun);
}
.footer__marquee .marquee__item:nth-child(3n + 2) {
  --mark: var(--c-bubblegum);
}
.footer__marquee .marquee__item:nth-child(3n + 3) {
  --mark: var(--c-mint);
}

.footer__bottom {
  border-top: 2px solid rgba(255, 246, 233, 0.25);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  font-size: 16px;
}

@media (max-width: 991px) {
  .footer__grid {
    grid-template-columns: auto auto;
    gap: 80px;
  }
  .footer__rule {
    display: none;
  }
  .footer__marquee {
    margin: 80px 0 48px;
  }
}
@media (max-width: 767px) {
  .footer {
    padding-top: 64px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 479px) {
  .footer__menu a {
    font-size: 26px;
  }
  .footer__block p {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.35s var(--ease-pop);
  color: var(--c-ink);
  background: var(--c-white);
  border-color: var(--c-ink);
}

.btn:hover {
  background: var(--c-sun);
  transform: rotate(-2deg);
}
.btn:active {
  transform: rotate(-2deg) scale(0.96);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn--primary {
  background: var(--c-tomato);
  border-color: var(--c-tomato);
  color: var(--c-ink);
}
.btn--primary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}

.btn--ink {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}
.btn--ink:hover {
  background: var(--c-tomato);
  border-color: var(--c-tomato);
  color: var(--c-ink);
}

/* For the cobalt block, where tomato would buzz. */
.btn--sun {
  background: var(--c-sun);
  border-color: var(--c-sun);
  color: var(--c-ink);
}
.btn--sun:hover {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-ink);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--c-ink);
  color: var(--text);
}

.btn--danger {
  color: var(--danger);
}

.btn--sm {
  min-height: 36px;
  padding: 4px 14px;
  font-size: 0.95rem;
}

.btn--lg {
  min-height: 58px;
  padding: 12px 30px;
  font-size: 18px;
}

/* The arrow that slides in on hover, from the system's CTA. */
.btn__arrow {
  width: 0;
  overflow: hidden;
  display: inline-flex;
  transition: width 0.2s;
}
.btn:hover .btn__arrow {
  width: 14px;
}

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ------------------------------------------------------------- panels */

.panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 40px;
}

.panel + .panel {
  margin-top: 24px;
}

/* The sunshine panel: the total, and the pay step. */
.panel--sun {
  --text-2: var(--text-2-on-color);
  background: var(--c-sun);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel__head h2 {
  margin: 0;
}

@media (max-width: 479px) {
  .panel {
    padding: 24px;
    border-radius: var(--r-md);
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--c-oat);
  color: var(--c-ink);
}

.status--open {
  background: var(--c-mint);
}
.status--draft {
  background: var(--c-sun);
}
.status--closed {
  background: var(--c-oat);
}

/* --------------------------------------------------------------- form */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.field label,
.field__label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.field__hint {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

.opt {
  font-weight: 450;
  color: var(--text-2);
  font-size: 0.85em;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
textarea,
select {
  width: 100%;
  font: inherit;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--c-cream);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}

::placeholder {
  color: var(--text-2);
  opacity: 1;
}

.panel--sun input[type='text'],
.panel--sun input[type='email'],
.panel--sun input[type='password'],
.panel--sun input[type='date'],
.panel--sun textarea {
  background: var(--c-white);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--c-oat);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--c-ink);
  background: var(--c-white);
}

textarea {
  resize: vertical;
  min-height: 4.5em;
}

.count {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  text-align: right;
}

.formerror {
  color: var(--danger);
  background: #ffe3dc;
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-weight: 550;
}

/* Where Cloudflare's Turnstile draws itself (public/js/turnstile.js). It is invisible
   unless it needs a challenge solved, so the slot takes no room until then. */
.ts-slot {
  margin: 0;
}
.ts-slot.is-shown {
  margin: 0 0 16px;
  min-height: 65px;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.row--split {
  justify-content: space-between;
}

/* A button that carries someone's name ("Mark as sent to …") may wrap rather than widen the page. */
.row .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 24px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Choice tiles: occasions, designs, add-ons. */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  pointer-events: none;
}

.choice__body {
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--c-cream);
  transition: transform 0.35s var(--ease-pop), border-color 0.2s, background 0.2s;
  min-height: 100%;
}

.choice:hover .choice__body {
  transform: scale(1.03) rotate(-1deg);
}

.choice:nth-child(even):hover .choice__body {
  transform: scale(1.03) rotate(1deg);
}

.choice input:checked + .choice__body {
  --text-2: var(--text-2-on-color);
  border-color: var(--c-ink);
  background: var(--c-sun);
}

.choice input:focus-visible + .choice__body {
  box-shadow: var(--focus);
}

.choice__title {
  font-weight: 650;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.choice__desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-2);
}

.choice__price {
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A design swatch: the placeholder art until real designs exist. */
.swatch {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  background: var(--sw-paper, var(--paper));
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.swatch::before {
  content: '';
  position: absolute;
  inset: 8% 8% auto;
  height: 22%;
  background: var(--sw-paper-deep, var(--paper-deep));
  border-radius: 6px;
}

.swatch__name {
  font-family: var(--sw-font, var(--font-display));
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--sw-accent, var(--accent));
  font-size: 1.4rem;
  position: relative;
}

/* A design's cover, inline so it can take the card's color. */
.choices--designs {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.thumb {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

.thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.thumb.is-missing {
  background: var(--line);
}

/* A plain design's border, with the card's words set inside it as on the card. */
.thumb--framed {
  position: relative;
  container-type: inline-size;
}

.thumb__words {
  position: absolute;
  inset: 18% 16%;
  display: grid;
  place-content: center;
  font-family: var(--thumb-font, var(--font-brand));
  /* Most lettering faces come in one weight; set them as drawn, never smeared bold. */
  font-synthesis: none;
  text-align: center;
  line-height: 1.05;
  pointer-events: none;
}

.thumb__for {
  font-size: 5.4cqw;
  color: var(--text-2);
}

.thumb__name {
  font-size: min(12cqw, calc(110cqw / (var(--name-width, 8) * var(--letter-width, 1))));
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--thumb-accent-picked, var(--thumb-accent));
  overflow-wrap: anywhere;
}

/* The favorite-color picker: the design's own colors, presets, anything else. */
.colorfield {
  margin-top: 28px;
}

.colorfield__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.color {
  position: relative;
  cursor: pointer;
}

.color input[type='radio'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.color__dot {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dot, transparent);
  box-shadow: inset 0 0 0 1px rgba(14, 14, 14, 0.15);
  transition: transform 0.15s;
}

.color:hover .color__dot {
  transform: scale(1.08);
}

.color input:checked + .color__dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

.color input:focus-visible + .color__dot {
  outline: 3px solid rgba(14, 14, 14, 0.35);
  outline-offset: 4px;
}

.color--original .color__dot {
  background: conic-gradient(#84978c 0 25%, #fba91c 0 50%, #c2bce2 0 75%, #fb8c66 0);
}

.color--custom .color__dot {
  background: var(--dot, conic-gradient(#e04444, #e2b313, #3e9b55, #1a9c95, #2f6fd6, #8a4fcf, #e0579c, #e04444));
}

.color__pick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* A team: its two colors, split on the diagonal. */
.color--team .color__dot {
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
}

.teams__more {
  margin-top: 12px;
  max-width: 100%;
}

.colors__name {
  margin-left: 6px;
  font-size: 14px;
  color: var(--text-2);
}

.tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1.5px solid currentColor;
  border-radius: 6px;
  padding: 1px 6px;
}

/* A club card found on the landing page. */
.tag--secret {
  color: var(--c-ink);
  background: var(--c-sun);
  border-color: var(--c-ink);
}

/* Summary / totals. */
.summary {
  display: grid;
  gap: 6px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.summary__rows {
  display: contents;
}

.summary__row s {
  text-decoration-thickness: 2px;
}

/* Something the page wants said above everything else: an unpaid card, a payment still settling. */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background: var(--c-sun);
  color: var(--c-ink);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 24px 0 0;
  font-weight: 550;
}

.notice p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.notice a {
  font-weight: 700;
}

.panel--sun .notice {
  background: var(--c-white);
}

/* The copy button, once it has copied. */
.btn.is-copied {
  background: var(--c-mint);
  border-color: var(--c-ink);
}

/* The promo code, under the total. */
.coupon {
  margin-top: 20px;
}

.coupon__row {
  display: flex;
  gap: 8px;
}

.coupon__row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.summary__row--total {
  border-top: 2px solid var(--c-ink);
  padding-top: 10px;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Steps in the create flow. */
.steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--r-pill);
  background: var(--c-white);
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-oat);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--c-ink);
}

.steps li.is-on {
  color: var(--c-ink);
  background: var(--c-sun);
}

.steps li.is-on::before {
  background: var(--c-tomato);
}

/* Copyable links on the manage page. */
.linkbox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}

.linkbox input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

.linkbox__label {
  grid-column: 1 / -1;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.linkbox__hint {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 14px;
  color: var(--text-2);
}

/* Moderation list. */
.siglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.siglist li {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--c-cream);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}

.siglist li.is-hidden {
  opacity: 0.55;
}

.siglist__ink {
  width: 72px;
  height: 40px;
}

.siglist__ink path {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
}

.siglist__name {
  font-weight: 650;
}

.siglist__meta {
  font-size: 14px;
  color: var(--text-2);
}

/* ------------------------------------------------------- account page */

.account__lead {
  max-width: 34em;
  font-size: 18px;
}

.account__who p {
  margin: 0;
  overflow-wrap: anywhere;
}

.account__who strong {
  color: var(--text);
}

.account__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 8px;
}

.account__switch {
  color: var(--text-2);
}

/* My cards: one row a card, like the moderation list. */
.mycards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mycards__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 16px;
  align-items: center;
  background: var(--c-cream);
  border-radius: var(--r-sm);
  padding: 14px 16px 14px 20px;
}

.mycards__name {
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.mycards__name:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-tomato);
}

.mycards__meta {
  font-size: 14px;
  color: var(--text-2);
}

@media (max-width: 599px) {
  .mycards__item {
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
  }
  .mycards__text {
    grid-column: 1 / -1;
  }
  .mycards__item .status {
    justify-self: start;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  /* Under the nav and out of the way of links and totals, which sit down the page. */
  top: calc(var(--nav-h, 104px) + max(8px, env(safe-area-inset-top)));
  transform: translate(-50%, -20px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  width: max-content;
  background: var(--c-ink);
  color: var(--c-cream);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  transition: transform 0.4s var(--ease-pop), opacity 0.25s;
  z-index: 50;
  max-width: min(92vw, 480px);
  text-align: center;
}

@media (max-width: 991px) {
  .toast {
    --nav-h: 80px;
  }
}

.toast.is-up {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------ reveals */

/* Text that rises out of a clipped line, the system's signature entrance. */
.clip {
  display: block;
  overflow: hidden;
  margin-bottom: -0.12em;
  padding-bottom: 0.12em;
}

.clip > * {
  display: block;
  /* Past the clip's own padding, so no descender or pen stroke peeks out. */
  transform: translateY(calc(100% + 0.3em));
  transition: transform 0.8s var(--ease-reveal);
  transition-delay: var(--delay, 0ms);
}

.is-in .clip > *,
.clip.is-in > * {
  transform: translateY(0);
}

.fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal);
  transition-delay: var(--delay, 0ms);
}

.fade.is-in,
.is-in .fade {
  opacity: 1;
  transform: none;
}

/* A word-by-word sentence: each word in its own clip. */
.words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.24em;
  font-family: var(--font-brand);
  font-weight: 750;
  font-style: italic;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/* Room at the sides too, so the italic's overhang isn't clipped. */
.words .clip {
  margin: 0 -0.15em -0.1em;
  padding: 0 0.15em 0.1em;
}

.words .glyph {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  align-self: center;
}

.words .glyph svg {
  width: 0.9em;
  height: 0.9em;
}

/* ------------------------------------------------------------ marquee */

.marquee {
  overflow: hidden;
  padding-block: 20px;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  gap: 24px;
  padding-right: 24px;
  flex: none;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / 3));
  }
}

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-cream);
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 160px var(--gutter) 96px;
  text-align: center;
}

/* The big sunshine oval the headline sits at the foot of. */
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -40vh;
  width: 140vw;
  height: 110vh;
  transform: translateX(-50%);
  background: var(--c-sun);
  border-radius: 50%;
  pointer-events: none;
}

.hero__title {
  position: relative;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(56px, 10.5vw, 176px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0 0 40px;
}

/* The pen stroke under "signs.", drawn once the headline has risen. */
.scribble {
  position: relative;
  display: inline-block;
}

.hero__title .clip--tail {
  padding-bottom: 0.26em;
  margin-bottom: -0.26em;
}

.scribble__line {
  position: absolute;
  left: -2%;
  width: 104%;
  bottom: -0.2em;
  height: 0.3em;
  overflow: visible;
  pointer-events: none;
}

.scribble__line path {
  fill: none;
  stroke: var(--c-tomato);
  /* In viewBox units, so the stroke scales with the headline. */
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 900ms;
}

.is-in .scribble__line path {
  stroke-dashoffset: 0;
}

.hero__sub {
  position: relative;
  font-size: 20px;
  line-height: 1.5;
  /* About 65 characters a line. */
  max-width: 26em;
  margin: 0 0 32px;
}

.hero__actions {
  position: relative;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Sticker illustrations, stamped onto the page one after another. */
.hero__float {
  position: absolute;
  pointer-events: none;
  width: var(--w, 90px);
  transform: rotate(var(--rot, 0deg));
  color: var(--c-ink);
}

.hero__float svg {
  width: 100%;
  height: auto;
  display: block;
  animation: stamp 0.7s var(--ease-pop) both;
  animation-delay: calc(700ms + var(--i, 0) * 110ms);
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 991px) {
  .hero {
    min-height: 640px;
  }
  .hero__float {
    width: calc(var(--w, 90px) * 0.66);
  }
}
@media (max-width: 767px) {
  .hero__float {
    width: calc(var(--w, 90px) * 0.5);
  }
}
@media (max-width: 479px) {
  .hero {
    min-height: 560px;
    padding-top: 120px;
  }
  /* Stacked on every phone, not just the narrow ones they won't fit across,
     so the pen and hand below always have the same place to sit. */
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
  /* On a phone the headline and buttons fill the hero, so the stickers go
     small and into the margins: the envelope and heart in the corners above
     the headline, the pen and hand beside the buttons. The buttons
     sit at the hero's foot whatever its height, so those two are measured
     from the bottom. The !important beats each sticker's inline desktop
     position. */
  .hero__float {
    display: none;
  }
  .hero__float:nth-of-type(n + 2) {
    display: block;
    width: 40px;
  }
  .hero__float:nth-of-type(2),
  .hero__float:nth-of-type(4) {
    top: 80px !important;
  }
  .hero__float:nth-of-type(2) {
    left: 4% !important;
  }
  .hero__float:nth-of-type(4) {
    right: 4% !important;
  }
  /* The pen beside the lower button, the hand waving beside the upper one.
     (Each drawing sits in the middle of a box about 150px tall.) */
  .hero__float:nth-of-type(3) {
    width: 52px;
    top: auto !important;
    bottom: 51px;
    left: 3% !important;
  }
  .hero__float:nth-of-type(5) {
    width: 60px;
    top: auto !important;
    bottom: 121px;
    right: 3% !important;
  }
}

/* ------------------------------------------------------------ landing */

.intro {
  background: var(--c-cream);
  padding-block: 80px 0;
}

/* The four steps, one color each, dealt slightly askew like cards passed
   round a table. A row of four while there is room for it; two by two, then
   a single stack, as the screen narrows. */
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 104px;
  padding-block: 32px 80px;
}

.step {
  --text-2: var(--text-2-on-color);
  position: relative;
  min-height: 460px;
  padding: 56px 32px;
  border-radius: var(--r-lg);
  background: var(--c-sun);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  text-align: center;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s var(--ease-pop);
}

.step:nth-child(4n + 1) {
  --tilt: -1.5deg;
}
.step:nth-child(4n + 2) {
  --tilt: 1deg;
  background: var(--c-bubblegum);
}
.step:nth-child(4n + 3) {
  --tilt: -1deg;
  background: var(--c-mint);
}
.step:nth-child(4n + 4) {
  --tilt: 1.5deg;
  --text-2: rgba(255, 246, 233, 0.8);
  background: var(--c-cobalt);
  color: var(--c-cream);
}

.step:hover {
  transform: rotate(calc(var(--tilt) * -2)) scale(1.03);
}

.step__n {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.step__title {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 16px 0 0;
}

.step__glyph {
  width: clamp(100px, 9vw, 150px);
  height: clamp(100px, 9vw, 150px);
  color: var(--c-ink);
}

.step__glyph svg {
  width: 100%;
  height: 100%;
}

.step p {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.4;
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin-top: 72px;
  }
  .step {
    min-height: 400px;
  }
}
@media (max-width: 600px) {
  .how-steps {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 56px;
    padding-bottom: 56px;
  }
  .step {
    min-height: 0;
    padding: 36px 24px;
    border-radius: var(--r-md);
  }
  .step__n {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .step__title {
    font-size: 24px;
    margin-top: 10px;
  }
  .step p {
    font-size: 16px;
  }
  .step__glyph {
    width: 84px;
    height: 84px;
  }
}

/* Occasions on mint: a list on the left, a card that answers it on the right. */
.occasions {
  --text-2: var(--text-2-on-color);
  background: var(--c-mint);
}

.occasions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.occasions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.occasions__list li {
  border-top: 2px solid rgba(20, 16, 19, 0.18);
}

.occasions__list li:last-child {
  border-bottom: 2px solid rgba(20, 16, 19, 0.18);
}

.occasions__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.015em;
  transition: transform 0.35s var(--ease-pop);
}

.occasions__list a:hover,
.occasions__list a:focus-visible {
  transform: translateX(16px);
  outline: none;
}

.occasions__list a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.occasions__list svg {
  width: 28px;
  height: 28px;
  flex: none;
  transition: transform 0.35s var(--ease-pop);
}

/* The link slides 16px; the arrow gives most of that back so it only nudges. */
.occasions__list a:focus-visible svg {
  transform: translateX(-16px);
}
.occasions__list a:hover svg {
  transform: translateX(-10px);
}

/* Under the list: every design, by occasion, on the /cards pages. */
.occasions__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 18px;
  font-weight: 650;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.occasions__more svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s var(--ease-pop);
}

.occasions__more:hover svg {
  transform: translateX(4px);
}

.occasions__art {
  --blob-a: var(--c-sun);
  --blob-b: var(--c-bubblegum);
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: var(--c-cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.occasions__blob {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: var(--blob-a);
  right: -12%;
  bottom: -18%;
  transition: background 0.5s, transform 0.8s var(--ease-pop);
}

.occasions__blob--b {
  width: 45%;
  background: var(--blob-b);
  left: -10%;
  top: -12%;
  right: auto;
  bottom: auto;
}

.occasions__art.is-swapping .occasions__blob {
  transform: rotate(24deg) scale(1.06);
}

.mini {
  position: relative;
  width: 62%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 18px 40px -22px rgba(20, 16, 19, 0.45);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  transform: rotate(-2deg);
  transition: transform 0.45s var(--ease-pop);
}

.occasions__art:hover .mini {
  transform: rotate(2deg) scale(1.04);
}

.mini__greet {
  display: block;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0;
  color: var(--text-2);
}

.mini__name {
  display: block;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (max-width: 991px) {
  .occasions__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .occasions__art {
    aspect-ratio: 3 / 2;
  }
}

/* "Perfect for your…": the groups, on ink, like a sheet of stickers under a
   blacklight. Two rows of bubbles drift opposite ways; each icon has its own
   bright color, and a bubble that has given up its secret card stays lit. */
.groups {
  --text: var(--c-cream);
  --focus-color: var(--c-sun);
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: 120px 128px;
  overflow: clip;
}

.groups__head {
  margin-bottom: 56px;
}

.groups__title {
  font-size: clamp(48px, 7.4vw, 112px);
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}

/* A Tabler outline icon, at the set's own stroke. */
.ti {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bubbles {
  display: grid;
  gap: 18px;
}

.bubbles__row {
  overflow: hidden;
  /* Room for a bubble's tilt and hop, which the row would otherwise clip. */
  padding-block: 14px;
  margin-block: -14px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bubbles__track {
  display: flex;
  width: max-content;
  animation: bubbles var(--dur, 60s) linear infinite;
}

.bubbles__row--reverse .bubbles__track {
  animation-direction: reverse;
}

/* Hold still while someone is aiming at a bubble. */
.bubbles__row:hover .bubbles__track,
.bubbles__row:focus-within .bubbles__track {
  animation-play-state: paused;
}

.bubbles__group {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  flex: none;
}

@keyframes bubbles {
  to {
    transform: translateX(-50%);
  }
}

.bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px 14px 18px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 246, 233, 0.16);
  background: #221b20;
  color: var(--c-cream);
  font: inherit;
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.4s var(--ease-pop);
}

.bubble__icon {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  color: var(--hue);
  transition: color 0.2s, transform 0.4s var(--ease-pop);
}

.bubble:hover,
.bubble:focus-visible {
  background: var(--hue);
  border-color: var(--hue);
  color: var(--c-ink);
  transform: rotate(calc(var(--tilt, 0deg) * -1.5)) scale(1.06);
  outline: none;
}

.bubble:hover .bubble__icon,
.bubble:focus-visible .bubble__icon {
  color: var(--c-ink);
  transform: rotate(-12deg) scale(1.12);
}

.bubble:focus-visible {
  box-shadow: 0 0 0 3px var(--c-ink), 0 0 0 6px var(--c-cream);
}

/* Found: the bubble keeps a ring of its color and wears a sparkle. */
.bubble.is-found {
  border-color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, #221b20);
}

.bubble.is-found:hover,
.bubble.is-found:focus-visible {
  background: var(--hue);
}

.bubble__found {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 26px;
  height: 26px;
  fill: var(--hue);
  stroke: var(--c-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transform: scale(0) rotate(-90deg);
  transition: transform 0.45s var(--ease-pop);
}

.bubble.is-found .bubble__found {
  transform: scale(1) rotate(0deg);
}

.bubble.is-popping {
  animation: bubble-pop 0.5s var(--ease-pop);
}

@keyframes bubble-pop {
  40% {
    transform: rotate(calc(var(--tilt, 0deg) * -3)) scale(1.16);
  }
}

@media (max-width: 767px) {
  .groups {
    padding-block: 88px 96px;
  }
  .groups__head {
    margin-bottom: 40px;
  }
  .bubble {
    gap: 10px;
    padding: 10px 20px 10px 14px;
  }
}

/* No drifting: the bubbles sit still, wrapped, and the loop's copy goes. */
@media (prefers-reduced-motion: reduce) {
  .bubbles__row {
    mask-image: none;
  }
  .bubbles__track {
    animation: none;
    width: auto;
  }
  .bubbles__group {
    flex-wrap: wrap;
    justify-content: center;
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
    padding-right: 0;
  }
  .bubbles__group[aria-hidden] {
    display: none;
  }
}

/* Confetti from a bubble that has just given up its card. */
.confetti {
  position: fixed;
  z-index: 60;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  pointer-events: none;
}
.confetti--1 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.confetti--2 {
  width: 6px;
  height: 18px;
}

/* The secret card's toast: the card itself, and the way to use it. */
.secret-toast {
  --text: var(--c-cream);
  --focus-color: var(--c-sun);
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100% - 2 * var(--gutter), 520px);
  padding: 16px 48px 16px 16px;
  border-radius: var(--r-md);
  background: var(--c-ink);
  color: var(--c-cream);
  border: 2px solid rgba(255, 246, 233, 0.16);
  box-shadow: 0 24px 48px -20px rgba(20, 16, 19, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px) scale(0.92);
  transition: transform 0.45s var(--ease-pop), opacity 0.25s, visibility 0s 0.45s;
}

.secret-toast.is-up {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: transform 0.45s var(--ease-pop), opacity 0.25s, visibility 0s;
}

.secret-toast__card {
  flex: none;
  width: 150px;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
}

.secret-toast.is-up .secret-toast__card {
  animation: card-deal 0.6s 0.1s var(--ease-pop) both;
}

@keyframes card-deal {
  from {
    transform: rotate(-24deg) translateY(30px) scale(0.6);
  }
}

/* A group with two cards deals both: its character in front, its still life
   peeking out behind. */
.secret-toast__cards {
  flex: none;
  display: grid;
}

.secret-toast__cards > .secret-toast__card {
  grid-area: 1 / 1;
}

.secret-toast__card--behind {
  transform: translate(16px, -10px) rotate(6deg);
}

.secret-toast.is-up .secret-toast__card--behind {
  animation: card-deal-behind 0.6s 0.2s var(--ease-pop) both;
}

@keyframes card-deal-behind {
  from {
    transform: rotate(-10deg) translateY(30px) scale(0.6);
  }
}

.secret-toast__body {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.secret-toast__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sun);
}

.secret-toast__kicker .ti {
  width: 18px;
  height: 18px;
}

.secret-toast__title {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.secret-toast__for {
  font-size: 14px;
  color: rgba(255, 246, 233, 0.72);
}

.secret-toast__go {
  margin-top: 10px;
}

.secret-toast__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 246, 233, 0.72);
  cursor: pointer;
}

.secret-toast__close:hover {
  background: rgba(255, 246, 233, 0.12);
  color: var(--c-cream);
}

.secret-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.secret-toast__close .ti {
  width: 20px;
  height: 20px;
}

@media (max-width: 479px) {
  .secret-toast {
    gap: 14px;
    padding: 12px 40px 12px 12px;
  }
  .secret-toast__card {
    width: 104px;
  }
  .secret-toast__title {
    font-size: 19px;
  }
}

/* The big cobalt CTA. */
.cta {
  --text: var(--c-cream);
  --focus-color: var(--c-sun);
  background: var(--c-cobalt);
  color: var(--c-cream);
  padding-block: 240px;
  text-align: center;
  position: relative;
  overflow: clip;
}

.cta h2 {
  font-size: clamp(52px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 44px;
}

.cta__spark {
  position: absolute;
  width: var(--w, 60px);
  color: var(--c-ink);
  transform: rotate(var(--rot, 0deg));
  pointer-events: none;
}

@media (max-width: 991px) {
  .cta {
    padding-block: 160px;
  }
}
@media (max-width: 479px) {
  .cta {
    padding-block: 112px;
  }
  .cta__spark {
    width: calc(var(--w, 60px) * 0.6);
  }
  /* The sprite's <svg> has no size of its own, so it draws 150px tall
     whatever --w says; on a phone that puts the smile on the button. */
  .cta__spark svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* FAQ on bubblegum. */
.faq {
  --text-2: var(--text-2-on-color);
  background: var(--c-bubblegum);
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.faq__title {
  font-size: clamp(64px, 10vw, 144px);
  line-height: 0.875;
  letter-spacing: -0.035em;
  margin: 0;
}

.faq details {
  padding-bottom: 36px;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.faq summary:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 6px;
  border-radius: 8px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq__plus {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-cream);
  position: relative;
  margin-top: -2px;
  transition: background 0.2s, transform 0.45s var(--ease-pop);
}

.faq summary:hover .faq__plus {
  transform: rotate(90deg);
}

.faq details[open] .faq__plus {
  background: var(--c-sun);
}

.faq__plus::before,
.faq__plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s, opacity 0.3s;
}

.faq__plus::before {
  width: 16px;
  height: 2.5px;
}

.faq__plus::after {
  width: 2.5px;
  height: 16px;
}

.faq details[open] .faq__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq details p {
  margin: 0;
  padding: 24px 0 0 70px;
  max-width: 36em;
  font-size: 20px;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
}
@media (max-width: 479px) {
  .faq summary {
    font-size: 21px;
    gap: 16px;
  }
  .faq details {
    padding-bottom: 24px;
  }
  .faq details p {
    padding-left: 58px;
    font-size: 16px;
  }
}

/* Page heading on app pages. */
.page-head {
  padding-block: 40px 32px;
}

.page-head h1 {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

/* A heading that holds someone's name: a long word breaks rather than push the page sideways. */
.page-head__title {
  flex: 1 1 14rem;
  min-width: 0;
}

.page-head__title h1 {
  font-size: clamp(34px, 7vw, 64px);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------- create page */

/* Their name first, then the card on the table beside the form, filling in as
   it goes. One column on a narrow screen, with the table between the occasion
   and the designs. */
.make {
  width: min(100% - 2 * var(--gutter), 1240px);
  --paper-shadow: 0 1px 1px rgba(20, 16, 19, 0.07), 0 14px 22px -14px rgba(90, 52, 16, 0.42),
    0 36px 56px -36px rgba(90, 52, 16, 0.32);
}

.make__form {
  display: grid;
  gap: 24px;
  max-width: 720px;
  margin-inline: auto;
}

.make__form > .panel {
  margin: 0;
}

@media (min-width: 1024px) {
  .make__form {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .make__form > * {
    grid-column: 1;
  }
  .make__form > .table {
    grid-column: 2;
    grid-row: 1 / span 7;
  }
}

@media (min-width: 1024px) and (min-height: 700px) {
  .make__form > .table {
    position: sticky;
    top: 112px;
  }
}

/* ---- Who's it for? */
.make__head {
  padding-block: 24px 16px;
}

.make__head .steps {
  margin-bottom: 48px;
}

.make__ask {
  margin: 0 0 8px;
}

.make__ask label {
  cursor: text;
}

.namefield {
  position: relative;
  max-width: 640px;
  container-type: inline-size;
}

.namefield__input[type='text'] {
  display: block;
  width: 100%;
  padding: 4px 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-brand);
  font-weight: 800;
  /* Big, and smaller as a long name grows, so all of it stays in view. */
  font-size: max(24px, min(72px, 11cqw, calc(100cqw / (var(--chars, 10) * 0.52))));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  caret-color: var(--c-tomato);
}

.namefield__input[type='text']:hover,
.namefield__input[type='text']:focus-visible {
  border: 0;
  background: transparent;
}

/* Large type, so 3:1 is the floor; the brand's warm gray, lifted. */
.namefield__input::placeholder {
  color: #9a8a7c;
}

/* The line they sign on: drawn once the question has risen, tomato while typing. */
.namefield__line {
  display: block;
  width: 100%;
  height: 14px;
  margin-top: -6px;
  overflow: visible;
}

.namefield__line path {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.35;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 500ms, stroke 0.2s, opacity 0.2s;
}

.is-in .namefield__line path {
  stroke-dashoffset: 0;
}

.namefield:focus-within .namefield__line path {
  stroke: var(--c-tomato);
  opacity: 1;
}

.namefield__hint {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 15px;
  color: var(--text-2);
}

/* ---- The occasions, as the greeting they'll get */
.greetings {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.greetings .choice__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

.greet__what {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.greet__line {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(17px, 1.3vw + 12px, 21px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.greet__name {
  text-decoration: underline;
  text-decoration-color: var(--c-tomato);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.16em;
}

.choice input:checked + .choice__body .greet__name {
  text-decoration-color: var(--c-ink);
}

/* ---- The table: their card, as it stands */
.table {
  scroll-margin-top: 104px;
  border-radius: var(--r-lg);
  padding: 36px 32px 28px;
  background: radial-gradient(120% 80% at 50% 28%, #fbf1e1 0%, var(--c-oat) 72%);
}

@media (max-width: 479px) {
  .table {
    padding: 28px 20px 22px;
    border-radius: var(--r-md);
  }
}

.table__scene {
  perspective: 1400px;
  padding: 4px 6px 22px;
}

.table__scene.is-landing {
  animation: land 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.table__scene.is-flicking {
  animation: flick 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes land {
  from {
    transform: translateY(-16px) rotate(3deg) scale(1.03);
  }
  to {
    transform: none;
  }
}

@keyframes flick {
  from {
    transform: translateX(14px) rotate(2.5deg);
  }
  to {
    transform: none;
  }
}

/* The card: the inside underneath, the front on a flap hinged at the left, as
   on the card page. A design's paper, ink and lettering are set on it. */
.live {
  position: relative;
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.live.is-tilting {
  transition-duration: 0.18s;
}

.live__inside,
.live__front,
.live__back {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  overflow: hidden;
}

.live__inside {
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--paper);
  box-shadow: var(--paper-shadow);
  container-type: size;
  cursor: pointer;
}

.live__flap {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  cursor: pointer;
  /* Closing: the front is back at once, and swings shut. */
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s;
}

/* Opening: it swings past upright and is gone, the way the real card opens. */
.live.is-open .live__flap {
  transform: rotateY(-125deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease 0.45s;
}

.live__front,
.live__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.live__front {
  background: var(--paper);
  container-type: inline-size;
}

.live__front > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Light moving across the paper as the card leans. */
.live__front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.34) 48%, transparent 64%) no-repeat;
  background-size: 260% 100%;
  background-position: var(--sheen, 70%) 0;
  mix-blend-mode: soft-light;
  transition: background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.live.is-tilting .live__front::after {
  transition-duration: 0.18s;
}

.live__back {
  background: var(--paper-deep);
  transform: rotateY(180deg);
}

/* A few signatures ringed around the words, as there will be. */
.live__sigs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.26;
}

.live__words {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 0 14cqw;
}

.live__words p {
  margin: 0;
}

.live__greeting {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 6.2cqw;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.2cqw;
}

.live__greeting,
.live__name {
  font-synthesis: none;
}

.live__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: min(15cqw, calc(135cqw / (var(--name-width, 8) * var(--letter-width, 1))));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  /* Anywhere, not break-word: a very long name has to be able to shrink the box, or it runs off the card. */
  overflow-wrap: anywhere;
  transition: opacity 0.2s;
}

.live__name.is-empty {
  opacity: 0.32;
}

.live__date {
  margin-top: 3cqw !important;
  font-family: var(--font-body);
  font-size: 3.1cqw;
  color: var(--accent-deep);
}

.live__note {
  margin: 2cqw auto 0 !important;
  max-width: 62cqw;
  font-family: var(--font-body);
  font-size: 3.3cqw;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.live__from {
  margin-top: 1.6cqw !important;
  font-family: var(--font-body);
  font-size: 3cqw;
  color: var(--muted);
}

.table__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.table__title {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  min-width: 0;
}

.table__title .tag {
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--text-2-on-color);
}

.table__toggle {
  flex: none;
}

.table .colorfield {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid rgba(20, 16, 19, 0.08);
}

.table .colorfield__title {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-ui);
}

.table .colors {
  gap: 8px;
}

.table .color__dot {
  width: 30px;
  height: 30px;
}

.table .color input:checked + .color__dot {
  box-shadow: 0 0 0 2px var(--c-oat), 0 0 0 4px var(--c-ink);
}

.table .colors__name {
  color: var(--text-2-on-color);
}

/* ---- The deck */
.deckhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.deckhead h2 {
  margin: 0;
}

.deckhead__shuffle svg {
  transition: transform 0.45s var(--ease-pop);
}

.deckhead__shuffle:hover svg {
  transform: rotate(180deg);
}

.deckhead__note {
  max-width: 34em;
}

/* Under the deck: the way to ask for one that isn't there. */
.deckhead__ask {
  margin: 20px 0 0;
  font-size: 15px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 24px;
}

.filter {
  position: relative;
  cursor: pointer;
}

.filter input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.filter > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 36px;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-oat);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter:hover > span {
  border-color: var(--c-ink);
}

.filter__n {
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.filter input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-cream);
}

.filter input:checked + span .filter__n {
  color: var(--c-sun);
}

.filter input:focus-visible + span {
  box-shadow: var(--focus);
}

.deck {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px 14px;
}

/* Two to a row on a phone: the occasions, and the deck. */
@media (max-width: 599px) {
  .greetings,
  .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .greetings .choice__body {
    padding: 12px 12px 14px;
  }
  /* "Congratulations," is the longest word; it has to fit a half-width tile. */
  .greet__line {
    font-size: 15px;
  }
  .deck .choice__body {
    padding: 10px 10px 10px;
  }
  .deck .choice__title {
    font-size: 15px;
    line-height: 1.25;
  }
  .deck .choice__desc {
    font-size: 13px;
  }
  .tick {
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
  }
}

/* A mat for each card; the card lies on it at a slight lean, and sits up straight when picked. */
.deck .choice__body {
  position: relative;
  padding: 16px 14px 12px;
}

.deck .choice:hover .choice__body,
.deck .choice:nth-child(even):hover .choice__body {
  transform: none;
}

.deck .thumb {
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(20, 16, 19, 0.08), 0 10px 16px -10px rgba(90, 52, 16, 0.45);
  transform: rotate(var(--lean, 0deg));
  transition: transform 0.45s var(--ease-pop), box-shadow 0.3s;
}

.deck .choice:hover .thumb,
.deck .choice input:checked + .choice__body .thumb {
  transform: translateY(-3px);
  box-shadow: 0 1px 1px rgba(20, 16, 19, 0.08), 0 16px 22px -12px rgba(90, 52, 16, 0.5);
}

.tick {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-tomato);
  box-shadow: 0 0 0 3px var(--c-sun);
}

.tick svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice input:checked + .choice__body .tick {
  display: grid;
  animation: stamp 0.4s var(--ease-pop);
}

/* Dealt onto the table from the deck's corner, one after another. */
.deck.is-dealing .choice {
  animation: deal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translate(36px, -28px) rotate(8deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Narrow screens: what's picked, once the table has scrolled away */
.picked {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 2 * var(--gutter));
  min-height: 48px;
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-cream);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translate(-50%, calc(100% + 24px));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.picked.is-up {
  transform: translate(-50%, 0);
}

.picked:focus-visible {
  outline: none;
  box-shadow: var(--shadow), var(--focus);
}

.picked__label {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-sun);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.picked__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .picked {
    display: none;
  }
}

/* The glitter add-on's burst, tried out from the card on the table. */
.glitter {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* -------------------------------------------------------- link in bio */

/* /links, the page behind "link in bio": the mark on a sunshine oval, the
   latest post, then the quick starts as big buttons. Phone first; on a wider
   screen it stays a phone-wide column. */
.bio {
  position: relative;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--gutter) 40px;
}

.bio::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -150px;
  width: max(160%, 760px);
  height: 350px;
  transform: translateX(-50%);
  background: var(--c-sun);
  border-radius: 50%;
  pointer-events: none;
}

.bio__head,
.bio__main,
.bio__foot {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
}

.bio__head {
  padding-top: 44px;
  text-align: center;
}

.bio__mark {
  display: inline-block;
  transition: transform 0.4s var(--ease-pop);
}
.bio__mark:hover {
  transform: rotate(-3deg) scale(1.04);
}

.bio__mark img {
  display: block;
  height: 56px;
  width: auto;
}

.bio__tag {
  margin: 14px 0 0;
  font-family: var(--font-brand);
  font-weight: 750;
  font-style: italic;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.bio__main {
  padding: 72px 0 0;
}

.bio__main .label {
  font-family: var(--font-ui);
  text-align: center;
}

/* The newest post, small enough that the starts stay in reach: its picture
   beside its caption, on a white card with a tilt. */
.latest__card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 20px 12px 12px;
  background: var(--c-white);
  border-radius: var(--r-md);
  text-decoration: none;
  transform: rotate(-1deg);
  transition: transform 0.4s var(--ease-pop);
}
a.latest__card:hover {
  transform: rotate(1deg) scale(1.02);
}
a.latest__card:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.latest__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: var(--c-oat);
}

/* A wide picture, like a page's share image, goes across the top instead. */
.latest__card--wide {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 12px 16px;
}
.latest__card--wide img {
  aspect-ratio: 1200 / 630;
}
.latest__card--wide > div {
  padding-inline: 8px;
}

.latest__caption {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}

.latest__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--c-tomato);
  text-underline-offset: 0.2em;
}

.starts {
  margin-top: 48px;
}

.starts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* A full-width button with room for a line under its label. */
.starts__btn {
  width: 100%;
  min-height: 64px;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px 10px 26px;
  text-align: left;
  line-height: 1.2;
}

.starts__btn:hover {
  transform: rotate(-1deg);
}
.starts__btn:active {
  transform: rotate(-1deg) scale(0.98);
}

.starts__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.starts__note {
  font-size: 15px;
  font-weight: 450;
  opacity: 0.8;
}

.starts__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease-pop);
}
.starts__btn:hover .starts__arrow {
  transform: translateX(4px);
}

.bio__foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 2px solid var(--c-oat);
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}

.bio__foot p {
  margin: 12px 0 0;
}

.bio__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}

.bio__links a {
  color: var(--text);
  font-weight: 600;
}

/* ------------------------------------------------------ reading pages */

/* Privacy and terms: a page head, then plain reading at a comfortable
   measure. The short version sits in the page's one color block. */
.prose {
  max-width: 40em;
  font-size: 18px;
  line-height: 1.6;
}

.prose h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 64px 0 16px;
}

.prose h3 {
  margin: 32px 0 8px;
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose .panel {
  margin: 8px 0 0;
}

.prose .panel h2 {
  margin-top: 0;
}

.prose .panel > :last-child {
  margin-bottom: 0;
}

.page-head__meta {
  margin: 0;
  color: var(--text-2);
}

@media (max-width: 479px) {
  .prose {
    font-size: 16px;
  }
  .prose h2 {
    margin-top: 48px;
  }
}

/* The small footer on app pages: the year, and the boring links. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* ------------------------------------------------------ request page */

/* Somebody's idea for a card: the form on white, how it goes on bubblegum
   beside it (under it on a narrow screen), and the thanks on mint. */
.ask {
  width: min(100% - 2 * var(--gutter), 1240px);
}

.ask__head {
  padding-block: 24px 40px;
}

.ask__lead {
  max-width: 34em;
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.ask__grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 1024px) {
  .ask__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: clamp(24px, 3vw, 40px);
  }
  .ask__side {
    position: sticky;
    top: 112px;
    transform: rotate(1deg);
  }
}

.ask__set {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  min-width: 0;
}

.ask__set legend {
  padding: 0;
  margin-bottom: 10px;
}

.ask__occasions {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.ask__occasions .choice__body {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 479px) {
  .ask__occasions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ask__under {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ask__under .count {
  flex: none;
}

.ask__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 4px;
  padding-top: 24px;
  border-top: 2px solid var(--c-oat);
}

.ask__promise {
  flex: 1 1 280px;
  max-width: 32em;
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
}

.ask__promise strong {
  color: var(--text);
  font-weight: 650;
}

.ask__side {
  --text-2: var(--text-2-on-color);
  background: var(--c-bubblegum);
}

.ask__side h2 {
  margin-bottom: 20px;
}

/* Numbered like the create flow's steps, as stickers leaning in turn. */
.ask__steps {
  list-style: none;
  counter-reset: ask;
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
}

.ask__steps li {
  counter-increment: ask;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: baseline;
  line-height: 1.4;
}

.ask__steps li::before {
  content: counter(ask);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-cream);
  font-weight: 800;
  font-size: 15px;
  transform: rotate(-4deg);
}

.ask__steps li:nth-child(even)::before {
  transform: rotate(4deg);
}

.ask__steps strong {
  font-weight: 650;
}

.ask__small {
  margin: 0;
  font-size: 15px;
  color: var(--text-2);
}

.ask__done {
  --text-2: var(--text-2-on-color);
  max-width: 880px;
  background: var(--c-mint);
}

.ask__done:focus {
  outline: none;
}

.ask__done strong {
  overflow-wrap: anywhere;
}

.ask__done h2 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.ask__done .ask__lead {
  margin-bottom: 28px;
}

.ask__steps--row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 24px;
}

.ask__done .ask__small {
  margin-bottom: 24px;
}

/* ----------------------------------------------- requests desk (admin) */

.admin {
  width: min(100% - 2 * var(--gutter), 1100px);
}

.admin__head {
  padding-block: 24px 16px;
}

.admin__head h1 {
  margin-bottom: 12px;
}

.admin__lead {
  max-width: 44em;
  margin: 0;
}

.admin__token {
  max-width: 560px;
}

.admin__filters {
  margin-top: 0;
}

.reqs {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.req {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: 104px;
}

/* The one a text or an email linked to. */
.req.is-focus {
  border-color: var(--c-ink);
}

.req__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
}

.req__what {
  margin: 0;
  font-weight: 650;
}

.req__when {
  font-weight: 450;
  color: var(--text-2);
}

.req__idea {
  margin: 6px 0 0;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.req__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.req__facts dt {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.req__facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.req__notes {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--c-cream);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.req__form {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(160px, 1fr) minmax(200px, 2fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 16px;
  border-top: 2px solid var(--c-oat);
}

.req__form .field {
  margin: 0;
}

.req__form label {
  font-size: 14px;
}

.req__form input,
.req__form select {
  height: 46px;
  padding-block: 0;
}

@media (max-width: 767px) {
  .req {
    padding: 20px;
    border-radius: var(--r-md);
  }
  .req__top {
    flex-direction: column-reverse;
  }
  .req__form {
    grid-template-columns: 1fr 1fr;
  }
  .req__note,
  .req__form > .btn {
    grid-column: 1 / -1;
  }
}

.req__more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.req__decline {
  flex: 1 1 320px;
}

.req__decline summary {
  list-style: none;
  width: max-content;
}

.req__decline summary::-webkit-details-marker {
  display: none;
}

.req__decline form {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: #ffe3dc;
  max-width: 520px;
}

.req__decline input[type='text'] {
  background: var(--c-white);
}

.req__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-weight: 600;
  cursor: pointer;
}

.req__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-ink);
}

/* Where a request is up to. */
.status--new {
  background: var(--c-sun);
}
.status--drafting {
  background: var(--c-oat);
}
.status--review {
  background: var(--c-bubblegum);
}
.status--approved {
  background: var(--c-cobalt);
  color: var(--c-cream);
}
.status--live {
  background: var(--c-mint);
}
.status--declined {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-oat);
  color: var(--text-2);
}

/* ------------------------------------------------------ the /cards pages */

/* One page per occasion and per club, built by tools/build-pages.mjs from the
   landing page's parts: the headline on sun, the covers dealt as tiles, the
   step cards, the occasion list on mint, the bubbles on ink, the FAQ and the
   cobalt CTA. */

.browse-title {
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

.browse-head {
  --text-2: var(--text-2-on-color);
  background: var(--c-sun);
  padding-block: 168px 112px;
  overflow: clip;
}

.browse-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.crumbs {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 20px;
}


.crumbs a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.crumbs a:hover {
  color: var(--c-ink);
}

.browse-head__title {
  font-size: clamp(52px, 7.6vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
}

.browse-head__lede {
  font-size: 20px;
  line-height: 1.4;
  max-width: 34em;
  margin: 0 0 36px;
}

.browse-head__deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -12px 0 32px;
  font-size: 17px;
}

/* The covers, fanned out on the table the way you'd spread a few to choose. */
.fan {
  position: relative;
  aspect-ratio: 5 / 4;
}

.fan img {
  position: absolute;
  width: 70%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 18px 40px -22px rgba(20, 16, 19, 0.45);
  transition: transform 0.45s var(--ease-pop);
}

.fan img:nth-child(1) {
  left: 0;
  top: 4%;
  transform: rotate(-7deg);
}
.fan img:nth-child(2) {
  right: 0;
  top: 18%;
  transform: rotate(5deg);
}
.fan img:nth-child(3) {
  left: 13%;
  bottom: 2%;
  transform: rotate(-1.5deg);
}

.fan:hover img:nth-child(1) {
  transform: rotate(-10deg) translateX(-4%);
}
.fan:hover img:nth-child(2) {
  transform: rotate(8deg) translateX(4%);
}

.fan--1 img {
  position: relative;
  width: 100%;
  inset: auto;
  transform: rotate(-2deg);
}

/* A collection's page (and its feature on /cards) in the collection's own
   color, set inline as --collection: bubblegum for the pink cards, mint for the
   pastor's. The fan and tiles are as everywhere. */
.browse-head--collection,
.browse-feature {
  --text-2: var(--text-2-on-color);
  background: var(--collection, var(--c-bubblegum));
}

.browse-designs__sub--first {
  margin-top: 0;
}

.browse-feature {
  padding-block: 120px;
  overflow: clip;
}

.browse-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.browse-feature .browse-title {
  margin: 12px 0 24px;
}

.browse-feature .browse-related__intro {
  margin: 0 0 36px;
  color: var(--text-2);
}

.browse-feature__fan {
  display: block;
}

/* A club's sticker: its Tabler icon, big, in its bright, on an ink disc. */
.browse-head--club .browse-head__grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.browse-head__sticker {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--hue, var(--g-tomato));
  transform: rotate(-6deg);
}

.browse-head__sticker > .ti {
  width: 58%;
  height: 58%;
  stroke-width: 1.6;
}

.browse-head__found {
  position: absolute;
  bottom: 6%;
  right: -4%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-ink);
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(10deg);
}

.browse-head__found .ti {
  width: 18px;
  height: 18px;
}

/* ---- The designs, as tiles */
.browse-designs {
  padding-block: 120px 80px;
}

.browse-designs__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
  margin-bottom: 56px;
}

.browse-designs__count {
  margin: 0;
  max-width: 24em;
  font-size: 18px;
  color: var(--text-2);
}

.browse-designs__sub {
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -0.015em;
  margin: 96px 0 8px;
}

.browse-designs__note {
  margin: 0 0 40px;
  font-size: 18px;
  color: var(--text-2);
}

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 48px 32px;
}

.tiles--few {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}

.tile a {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
}

.tile a:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 8px;
}

.tile__card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(20, 16, 19, 0.08);
  container-type: inline-size;
  transform: rotate(var(--lean, 0deg));
  transition: transform 0.4s var(--ease-pop);
}

.tile__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile a:hover .tile__card,
.tile a:focus-visible .tile__card {
  transform: rotate(calc(var(--lean, 0deg) * -1.5 + 1deg)) scale(1.04);
}

/* A plain border's words, set in the middle the way the card sets them. */
.tile__words {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.2em;
  padding: 14%;
  text-align: center;
  line-height: 1;
  color: var(--words-ink, var(--c-ink));
}

.tile__words span {
  font-size: 6.5cqi;
}

.tile__words strong {
  font-size: 13cqi;
  font-weight: inherit;
  color: var(--words-accent, var(--c-ink));
  overflow-wrap: anywhere;
}

.tile__name {
  display: block;
  margin-top: 18px;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tile__desc {
  display: block;
  font-size: 15px;
  color: var(--text-2);
}

/* ---- How it works: the landing's step cards, three in a row */
.browse-how {
  padding-block: 40px 140px;
}

.browse-how .browse-title {
  margin-bottom: 56px;
}

.steps-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.steps-row .step {
  width: auto;
  height: auto;
  flex: 1 1 300px;
  max-width: 440px;
  min-height: 480px;
  gap: 24px;
}

/* ---- More occasions on mint; more clubs on ink */
.browse-related {
  padding-block: 120px;
}

.browse-related.occasions .browse-title {
  margin-bottom: 48px;
}

.occasions__list--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
}

.occasions__list--grid li,
.occasions__list--grid li:last-child {
  border-top: 0;
  border-bottom: 2px solid rgba(20, 16, 19, 0.18);
}

.occasions__list--grid li:nth-child(-n + 2) {
  border-top: 2px solid rgba(20, 16, 19, 0.18);
}

.browse-related__intro {
  max-width: 34em;
  margin: -24px 0 48px;
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 246, 233, 0.8);
}

.browse-related__more {
  margin: 48px 0 0;
  font-size: 20px;
  line-height: 1.4;
}

.browse-related__more a {
  color: inherit;
  font-weight: 650;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.groups.browse-related .groups__title {
  margin-bottom: 48px;
}

/* The bubbles sitting still and wrapping, rather than drifting in a loop. */
.bubbles--wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
}

.bubbles--wrap .bubble {
  max-width: 100%;
  white-space: normal;
  text-decoration: none;
}

@media (max-width: 991px) {
  .browse-head {
    padding-block: 128px 88px;
  }
  .browse-head__grid,
  .browse-head--club .browse-head__grid,
  .browse-feature__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .browse-feature {
    padding-block: 96px;
  }
  .fan {
    width: min(100%, 560px);
    justify-self: center;
  }
  .browse-head__sticker {
    width: min(70%, 280px);
  }
  .browse-related {
    padding-block: 96px;
  }
}

@media (max-width: 767px) {
  .occasions__list--grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .occasions__list--grid li:nth-child(2) {
    border-top: 0;
  }
}

@media (max-width: 599px) {
  /* Two to a row on a phone, like the create page's deck. */
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }
  .tiles--few {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile__name {
    margin-top: 12px;
    font-size: 16px;
  }
  .tile__desc {
    font-size: 13px;
  }
}

@media (max-width: 479px) {
  .browse-head {
    padding-block: 112px 72px;
  }
  .browse-head__lede,
  .browse-related__intro,
  .browse-related__more {
    font-size: 18px;
  }
  .browse-designs {
    padding-block: 80px 56px;
  }
  .browse-designs__head {
    margin-bottom: 40px;
  }
  .browse-designs__count,
  .browse-designs__note {
    font-size: 16px;
  }
  .browse-designs__sub {
    margin-top: 64px;
  }
  .browse-how {
    padding-block: 24px 96px;
  }
  .browse-how .browse-title {
    margin-bottom: 40px;
  }
  .steps-row .step {
    min-height: 0;
    flex-basis: 100%;
  }
  .browse-related {
    padding-block: 80px;
  }
  .browse-head__found {
    font-size: 13px;
    right: -8%;
  }
}

/* ------------------------------------------------------------ dialogs */

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}

dialog::backdrop {
  background: rgba(20, 16, 19, 0.5);
}

/* The blade: more to say than fits under a setting, slid in from the right
   (the manage page's "What always gets filtered out"). Up from the bottom on
   a phone. Clicking the shade closes it. */
.blade {
  width: min(460px, 100vw);
  height: 100dvh;
  margin: 0 0 0 auto;
  color: var(--text);
  font-family: var(--font-ui);
}

.blade[open] {
  animation: blade-in 0.4s var(--ease-reveal);
}

.blade[open]::backdrop {
  animation: blade-shade 0.4s var(--ease-reveal);
}

.blade__inner {
  height: 100%;
  overflow-y: auto;
  padding: 32px;
  background: var(--surface);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.blade__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.blade__head h2 {
  margin: 0;
}

.blade__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}

.blade__close:hover {
  background: var(--line);
}

.blade__close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.blade__close svg {
  width: 22px;
  height: 22px;
}

@keyframes blade-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes blade-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes blade-shade {
  from {
    opacity: 0;
  }
}

@media (max-width: 599px) {
  .blade {
    width: 100vw;
    height: auto;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
  }
  .blade[open] {
    animation-name: blade-up;
  }
  .blade__inner {
    max-height: calc(100dvh - 24px);
    padding: 24px;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}

/* What every card turns away, in the blade: a sticker dot per kind. */
.filtered {
  display: grid;
  gap: 18px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.filtered li {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 30px;
}

.filtered li::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-tomato);
}

.filtered li:nth-child(2)::before {
  background: var(--c-sun);
}

.filtered li:nth-child(3)::before {
  background: var(--c-cobalt);
}

.filtered li:nth-child(4)::before {
  background: var(--c-bubblegum);
}

.filtered strong {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.filtered span {
  color: var(--text-2);
}

.filtered__extra {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  background: var(--c-sun);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .clip > *,
  .fade {
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------- switch
   An on/off choice that isn't a tile: the GIF switch under Photos on the
   create page, and again on the manage page. Sun when on, like a picked tile. */

.switch {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.switch__track {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin-top: 1px;
  border: 2px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-cream);
  transition: background 0.2s;
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-ink);
  transition: transform 0.35s var(--ease-pop);
}

.switch input:checked + .switch__track {
  background: var(--c-sun);
}

.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch__track {
  box-shadow: var(--focus);
}

.switch input:disabled + .switch__track {
  opacity: 0.55;
}

.switch__text {
  display: grid;
  gap: 2px;
}

.switch__title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.switch__desc {
  font-size: 14px;
  color: var(--text-2);
}

/* ------------------------------------------------- the JBMF banner (cause.js) */

/* JBMF's own light pink, from its style sheet; a strip above the fixed navbar. */
.promo {
  --c-jbmf-blush: #f6a3b7;
  position: fixed;
  inset: 0 0 auto;
  z-index: 45;
  background: var(--c-jbmf-blush);
  color: var(--c-ink);
  padding: 9px 52px 9px 16px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  text-align: center;
}

.promo__text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.promo__link {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.promo__link::after {
  content: ' \2192';
}

.promo__short {
  display: none;
}

.promo__close {
  position: absolute;
  right: 8px;
  bottom: 50%;
  transform: translateY(50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font: 600 22px/1 var(--font-ui);
  cursor: pointer;
}

.promo__close:hover {
  background: rgba(20, 16, 19, 0.08);
}

.promo__link:focus-visible,
.promo__close:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.promo__close:focus-visible {
  border-radius: 50%;
}

body.has-promo {
  padding-top: var(--promo-h, 0px);
}

body.has-promo .nav {
  top: var(--promo-h, 0px);
}

body.has-promo .toast {
  top: calc(var(--nav-h, 104px) + var(--promo-h, 0px) + 8px);
}

@media (max-width: 640px) {
  .promo__long {
    display: none;
  }

  .promo__short {
    display: inline;
  }

  .promo__text {
    font-size: 14px;
  }
}

/* ---------------------------------- the JBMF blurb on the cancer support pages */

.cause {
  padding-block: 48px 0;
}

.cause__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
  background: #fde4eb;
  border-radius: var(--r-lg);
  padding: 32px 36px;
}

.cause__logo {
  flex: none;
  width: 260px;
  max-width: 100%;
  height: auto;
  background: var(--c-white);
  border-radius: var(--r-sm);
  padding: 16px 20px;
}

.cause__text {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cause__title {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cause__body {
  margin: 0;
  font-size: 17px;
  max-width: 64ch;
}

.cause__fine {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  max-width: 80ch;
}

.cause__fine a {
  color: inherit;
  font-weight: 650;
}

.tag--cause {
  color: var(--c-ink);
  background: #f6a3b7;
  border-color: var(--c-ink);
}

@media (max-width: 640px) {
  .cause__inner {
    padding: 24px 20px;
  }
}