/* ==========================================================================
   Code Vault - built on the Stella Social pink/groovy design language
   One file, no build step. Sections are composed from the blocks below:
     .band          a full-width colour band  (.band--blush / --rose / --cream)
     .wave          the scalloped divider that sits BETWEEN two bands
     .flower-frame  photo clipped to a flower, with an offset flower behind it
     .marquee       the scrolling strip
     .card          a code record (vault-only, at the bottom of this file)
   Clip paths live in the hidden <svg id="shapes"> at the top of every page.
   ========================================================================== */

:root {
  --rose:        #c61f52;
  --rose-deep:   #a4143f;
  --blush:       #f7c6d1;
  --blush-soft:  #fbdee5;
  --cream:       #fdf0f3;
  --white:       #ffffff;
  --ink:         #b42b57;   /* body copy on pink */
  --ink-strong:  #8c1b3f;

  --shell:  1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, sans-serif;
  --font-logo:    "Shrikhand", Georgia, serif;
  --font-accent:  "DM Serif Display", Georgia, serif;
  --font-mono:    "Space Mono", ui-monospace, Consolas, monospace;

  /* one accent per shelf, all three sitting inside the raspberry family */
  --sh-rose:  #c61f52;
  --sh-peri:  #9b30c9;
  --sh-blue:  #33628f;
  --sh-sage:  #4a7c59;

  --radius-pill: 999px;
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.03rem);
  line-height: 1.75;
  color: var(--ink);
  background: var(--blush);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem); letter-spacing: 0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

#shapes { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------- type helpers */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.script {
  font-family: var(--font-accent);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
}

.measure { max-width: 46ch; }

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

.btn {
  display: inline-block;
  padding: 0.85em 1.9em;
  border: 2px solid var(--rose);
  border-radius: var(--radius-pill);
  background: var(--rose);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover  { background: var(--rose-deep); border-color: var(--rose-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--rose);
}
.btn--light:hover { background: var(--cream); border-color: var(--cream); color: var(--rose-deep); }

.btn--ghost { background: transparent; color: var(--rose); }
.btn--ghost:hover { background: var(--rose); color: var(--white); }

.btn--sm { padding: 0.7em 1.4em; font-size: 0.64rem; }

/* ------------------------------------------------------- the bloom glyph */

.bloom {
  width: 1em; height: 1em;
  flex: none;
  color: var(--rose);
  vertical-align: -0.12em;
}
.bloom--lg { width: clamp(26px, 3.6vw, 44px); height: clamp(26px, 3.6vw, 44px); }

/* ------------------------------------------------- announcement + header */

.notice {
  background: var(--rose);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.65rem calc(var(--gutter) + 12px);
  position: relative;
}
.notice a { color: inherit; text-underline-offset: 3px; }
.notice[hidden] { display: none; }

.notice__close {
  position: absolute;
  right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: inherit; cursor: pointer;
  font-size: 0.9rem; line-height: 1;
  opacity: 0.75;
}
.notice__close:hover { opacity: 1; }

.masthead { position: relative; z-index: 40; }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(0.9rem, 2vw, 1.5rem);
}

.logo {
  font-family: var(--font-logo);
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.05;
  color: var(--white);
  text-decoration: none;
  margin-right: auto;
}
.logo span { display: block; }
.logo span + span { margin-left: 0.85em; margin-top: -0.2em; }
.logo sup { font-size: 0.4em; vertical-align: super; }

.masthead--onBlush .logo { color: var(--rose); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: currentColor; }
.masthead--onBlush .nav a { color: var(--rose); }

.masthead .btn { margin-left: clamp(0.5rem, 2vw, 1.4rem); }

.nav-toggle {
  display: none;
  border: 0; background: none; cursor: pointer;
  padding: 0.4rem; margin-left: auto;
  color: var(--white);
}
.masthead--onBlush .nav-toggle { color: var(--rose); }
.nav-toggle span {
  display: block; width: 26px; height: 2.5px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle span + span { margin-top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .masthead > .shell > .masthead__inner > .btn { display: none; }
  .nav {
    position: absolute;
    inset: calc(100% - 0.4rem) var(--gutter) auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-radius: 22px;
    padding: 0.4rem 1.2rem;
    box-shadow: 0 18px 40px rgba(140, 27, 63, 0.22);
  }
  .nav[hidden] { display: none; }
  .masthead .nav a,
  .masthead--onBlush .nav a {
    color: var(--rose);
    padding-block: 0.8rem;
    border-bottom: 1px solid rgba(198, 31, 82, 0.14);
  }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------- bands */

.band { position: relative; }
.band--blush { background: var(--blush); color: var(--ink); }
.band--soft  { background: var(--blush-soft); color: var(--ink); }
.band--cream { background: var(--cream); color: var(--ink); }
.band--rose  { background: var(--rose); color: var(--white); }
.band--rose h1, .band--rose h2, .band--rose h3 { color: var(--white); }
.band--rose .bloom { color: var(--blush); }

.band__pad      { padding-block: clamp(3.2rem, 8vw, 6.5rem); }
.band__pad--sm  { padding-block: clamp(2.2rem, 5vw, 3.8rem); }

/* -------------------------------------------------------- wave dividers */
/* background = the band above it, path fill = the band below it */

/* SEAM (2026-09-30). Every wave sat on a FRACTIONAL y position - measured 513.86
   and 4900.09 on how.html - and a fractional boundary rounds to a 1px hairline of
   whatever is behind it. Overlapping top and bottom leaves no boundary to round. */
.wave { line-height: 0; margin-top: -1px; margin-bottom: -1px; position: relative; }
.wave > svg {
  display: block;
  width: 100%;
  height: clamp(38px, 6vw, 92px);
}
.wave.from-blush { background: var(--blush); }
.wave.from-soft  { background: var(--blush-soft); }
.wave.from-rose  { background: var(--rose); }
.wave.from-cream { background: var(--cream); }

.wave.to-blush > svg path { fill: var(--blush); }
.wave.to-soft  > svg path { fill: var(--blush-soft); }
.wave.to-rose  > svg path { fill: var(--rose); }
.wave.to-cream > svg path { fill: var(--cream); }

/* The wave that closes the hero. A FLAT colour cannot match it: the hero is a 158deg
   DIAGONAL gradient, so its bottom edge is a different colour on the left than on
   the right, and a flat #f2b6c4 showed as a line across the join. Continue the
   hero's own gradient into the wave - same angle, same stops - anchored to the
   bottom so the two halves stay continuous at any width. */
.wave.from-hero {
  background: linear-gradient(158deg, #e07f95 0%, #e89aac 40%, #eda8b8 72%, #f2b6c4 100%);
  background-size: 100% 2400px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

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

.hero {
  background: linear-gradient(158deg, #e07f95 0%, #e89aac 40%, #eda8b8 72%, #f2b6c4 100%);
  color: var(--white);
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.2rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem);
}
.hero h1 { color: var(--white); max-width: 12ch; }
.hero__sub {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 1.2rem 0 1.9rem;
}
.hero__art { position: relative; }
.hero__art img {
  width: 100%;
  border-radius: 28px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.hero__art--round img { border-radius: 50%; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .hero__art { max-width: 400px; }
}

/* interior page hero: shorter, sentence case */
.hero--page .hero__grid { padding-block: clamp(1.6rem, 4vw, 3rem) clamp(2.6rem, 6vw, 4.4rem); }
.hero--page h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); text-transform: none; max-width: 14ch; }

/* -------------------------------------------------------- flower frames */

.flower-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
.flower-frame__back {
  position: absolute;
  inset: -5%;
  background: var(--rose);
  clip-path: url(#flower8);
  transform: rotate(22.5deg);
  z-index: 0;
}
.flower-frame img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: url(#flower8);
}
.flower-frame--clover .flower-frame__back { clip-path: url(#flower4); transform: rotate(45deg); inset: -7%; }
.flower-frame--clover img { clip-path: url(#flower4); }
.flower-frame--plain .flower-frame__back { display: none; }

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

.marquee {
  overflow: hidden;
  padding-block: clamp(0.5rem, 1.6vw, 1rem);
  --marquee-speed: 26s;
  --marquee-size: clamp(1.4rem, 0.8rem + 2.4vw, 2.6rem);
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  animation: marquee var(--marquee-speed) linear infinite;
}
.marquee__track > * {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--marquee-size);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rose);
}
.marquee--light .marquee__track > * { color: var(--white); }
.marquee__star { line-height: 1; }

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

@media (prefers-reduced-motion: reduce) {
  /* the ribbon keeps scrolling on request; the rest of the motion stands down */
  .marquee__track:not(.marquee--tilt .marquee__track) { animation: none; }
}

/* ------------------------------------------------------------ two-up row */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
.split--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--flip .split__art { order: 2; }

@media (max-width: 820px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__art { order: 0; }
  .split__art { max-width: 340px; }
}

.heading-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.card { text-align: center; }
.card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.4rem;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 0.92rem; }

.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .cards--3 { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

/* --------------------------------------------------------- testimonials */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.quote p { font-size: 0.93rem; }
.quote cite { font-style: normal; font-weight: 700; font-size: 0.85rem; }

/* --------------------------------------------------------- client strip */

.logos {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-snap-type: x mandatory;
  justify-content: center;
  /* the row fits on desktop; on narrow screens it swipes, so the bar is noise */
  scrollbar-width: none;
}
.logos::-webkit-scrollbar { display: none; }
.logos figure { margin: 0; flex: 0 0 clamp(130px, 17vw, 175px); scroll-snap-align: start; }
.logos img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }
.logos figcaption {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ----------------------------------------------------------------- misc */

.centered { text-align: center; }
.centered .measure { margin-inline: auto; }
.stack > * + * { margin-top: clamp(1rem, 2.5vw, 1.6rem); }

.cta-band { text-align: center; }
.cta-band h2 { text-transform: none; }

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.price {
  background: var(--white);
  border-radius: 26px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: 0 16px 34px rgba(140, 27, 63, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.price__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1;
}
.price ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.price li { padding-left: 1.4rem; position: relative; }
.price li + li { margin-top: 0.4rem; }
.price li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
}
.price .btn { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- forms */

.form { display: grid; gap: 1rem; max-width: 34rem; }
.form label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.4rem;
}
.form input, .form textarea, .form select {
  width: 100%;
  font: inherit;
  color: var(--ink-strong);
  padding: 0.8rem 1.1rem;
  border: 2px solid rgba(198, 31, 82, 0.3);
  border-radius: 18px;
  background: var(--white);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 3px solid rgba(198, 31, 82, 0.35);
  outline-offset: 1px;
  border-color: var(--rose);
}
.form__note { font-size: 0.8rem; }

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

.footer { background: var(--rose); color: var(--white); }
.footer a { color: var(--white); }
/* One thin line: logo, then every destination on a wrapping row. The old
   three-column block with headings ran to 327px on a phone. */
.footer__thin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding-block: clamp(1.1rem, 3vw, 1.6rem);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-left: auto;
}
.footer__links a {
  font-size: 0.82rem;
  text-decoration: none;
  opacity: 0.92;
}
.footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
@media (max-width: 560px) {
  .footer__links { margin-left: 0; gap: 0.3rem 0.85rem; }
  .footer__thin { gap: 0.5rem 1rem; }
}
.footer .logo { color: var(--white); margin-right: 0; }
.footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-block: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: space-between;
}

:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 3px; border-radius: 4px; }
.band--rose :focus-visible, .footer :focus-visible, .hero :focus-visible { outline-color: var(--white); }

/* the flower glyph standing in for the asterisk in the logo and marquee */
.logo .bloom { width: 0.34em; height: 0.34em; color: currentColor; vertical-align: 0.1em; }
.marquee__star { display: inline-flex; align-items: center; font-size: var(--marquee-size); }
.marquee__star .bloom { width: 0.66em; height: 0.66em; color: inherit; }

/* .card p sets a small size, so the big step number needs the higher specificity */
.card .price__tag {
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   VAULT PARTS
   The bits that only exist on Code Vault, written in the same pink language:
   rounded, raspberry, soft shadows, flower glyph. A code record is .rec, not
   .card, because .card above is already the centred service card.
   ========================================================================== */

.stamp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dim { opacity: 0.75; }

/* ------------------------------------------------------------ the finder */

.finder {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.35rem 0.35rem 1.4rem;
  box-shadow: 0 16px 34px rgba(140, 27, 63, 0.18);
  max-width: 34rem;
}
.finder svg { width: 20px; height: 20px; flex: none; color: var(--rose); }
.finder input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink-strong);
  padding: 0.75rem 0.4rem;
}
.finder input::placeholder { color: rgba(140, 27, 63, 0.45); }
.finder input:focus { outline: none; }
.finder:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 16px 34px rgba(140, 27, 63, 0.18); }

/* ---------------------------------------------------------- the controls */

.controls {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--blush);
  padding-block: 0.9rem;
  box-shadow: 0 10px 22px -18px rgba(140, 27, 63, 0.7);
}

.tabs { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.tab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1.25em;
  border: 2px solid var(--rose);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--rose);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.tab:hover { transform: translateY(-2px); }
.tab[aria-pressed="true"] { background: var(--rose); color: var(--white); }
.tab[data-accent="peri"]  { border-color: var(--sh-peri);  color: var(--sh-peri); }
.tab[data-accent="blue"] { border-color: var(--sh-blue); color: var(--sh-blue); }
.tab[data-accent="peri"][aria-pressed="true"]  { background: var(--sh-peri);  color: var(--white); }
.tab[data-accent="blue"][aria-pressed="true"] { background: var(--sh-blue); color: var(--white); }
.tab[data-accent="sage"]  { border-color: var(--sh-sage);  color: var(--sh-sage); }
.tab[data-accent="sage"][aria-pressed="true"]  { background: var(--sh-sage);  color: var(--white); }

.controls__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.tagbar { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tagbar button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 0.34em 0.8em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.tagbar button:hover { background: var(--cream); }
.tagbar button[aria-pressed="true"] { background: var(--rose); color: var(--white); }

.count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------- the board */
/* CSS columns rather than grid, so the cards stagger like a Pinterest board */

.board {
  columns: 4 265px;
  column-gap: clamp(0.9rem, 2vw, 1.3rem);
}

.rec {
  break-inside: avoid;
  margin-bottom: clamp(0.9rem, 2vw, 1.3rem);
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(140, 27, 63, 0.13);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rec:hover { transform: translateY(-4px); box-shadow: 0 20px 36px rgba(140, 27, 63, 0.2); }

/* the tinted panel doubles as a preview of the code set on a pin */
.rec__swatch {
  display: grid;
  place-items: center;
  padding: 1.2rem;
  text-align: center;
  background: var(--tint);
  color: var(--accent);
}
.rec__swatch span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.88rem, 0.78rem + 0.4vw, 1.05rem);
  line-height: 1.4;
  word-break: break-word;
}
.rec[data-h="1"] .rec__swatch { min-height: 118px; }
.rec[data-h="2"] .rec__swatch { min-height: 152px; }
.rec[data-h="3"] .rec__swatch { min-height: 188px; }
.rec[data-h="4"] .rec__swatch { min-height: 224px; }

.rec__body { padding: 1rem 1.1rem 1.15rem; }

.rec__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.rec__top .bloom { width: 0.85em; height: 0.85em; color: var(--accent); }
.rec__status {
  margin-left: auto;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.05em 0.55em;
  opacity: 0.7;
}

.rec__note { font-size: 0.86rem; line-height: 1.55; margin: 0 0 0.75rem; }

.rec__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.9rem; }
.rec__tags span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: 0.16em 0.6em;
}

.rec__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rec__actions .btn { padding: 0.55em 1.05em; font-size: 0.6rem; letter-spacing: 0.1em; }
.btn--copied { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--pick[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--white); }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- the tray */

.tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--rose);
  color: var(--white);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}
.tray[data-open="true"] { transform: none; }
.tray__inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding-block: 0.8rem;
}
.tray p {
  margin: 0 auto 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tray .btn { background: var(--white); border-color: var(--white); color: var(--rose); }
.tray .btn:hover { background: var(--cream); border-color: var(--cream); color: var(--rose-deep); }
.tray .btn--ghost { background: transparent; border-color: var(--white); color: var(--white); }
.tray .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); color: var(--white); }

/* ------------------------------------------------------------- the builder */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) { .builder { grid-template-columns: 1fr; } }

.panel {
  background: var(--white);
  border-radius: 26px;
  padding: clamp(1.3rem, 3vw, 1.8rem);
  box-shadow: 0 16px 34px rgba(140, 27, 63, 0.14);
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.field input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-strong);
  padding: 0.7rem 1rem;
  border: 2px solid rgba(198, 31, 82, 0.28);
  border-radius: var(--radius-pill);
  background: var(--cream);
}
.field input:focus { outline: 3px solid rgba(198, 31, 82, 0.3); outline-offset: 1px; border-color: var(--rose); }

.picked { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.picked li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(198, 31, 82, 0.14);
}
.picked li span { flex: 1; word-break: break-all; }
.picked button {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  cursor: pointer;
}
.picked button:hover { background: var(--rose); color: var(--white); }

.canvas-wrap {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(140, 27, 63, 0.18);
  background: var(--white);
}
.canvas-wrap canvas { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- prose */

.prose h2 { margin-top: 2.4rem; margin-bottom: 0.7rem; }
.prose h2:first-child { margin-top: 0; }
.prose ol, .prose ul { margin: 0 0 1.1em; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--white);
  border-radius: 8px;
  padding: 0.1em 0.4em;
}
.prose .note {
  background: var(--white);
  border-radius: 20px;
  padding: 1rem 1.3rem;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  box-shadow: 0 10px 22px rgba(140, 27, 63, 0.1);
}

/* -------------------------------------------------------------- ad slots */
/* Paste the ad code inside. An empty slot takes up no space. */

.ad-slot { margin-block: clamp(1.2rem, 3vw, 2rem); text-align: center; }
.ad-slot:empty { display: none; }

/* room under the last band so the tray never covers the final row */
.band--last { padding-bottom: clamp(4.5rem, 9vw, 7rem); }

/* centred hero used on the vault pages: the search is the main event */
.hero--solo .hero__grid { grid-template-columns: 1fr; text-align: center; padding-bottom: clamp(2.4rem, 6vw, 4rem); }
.hero--solo h1 { max-width: 18ch; margin-inline: auto; }
.hero--solo .finder { margin-inline: auto; }
.hero--solo .hero__sub { margin-inline: auto; max-width: 48ch; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; margin-top: 1.4rem; opacity: 0.9; }

/* the evidence ladder, weakest first. Set in codes.js, shown on every card. */
.rec__status[data-status="thumb"]   { border-style: dashed; opacity: 0.5; }
.rec__status[data-status="seed"]    { opacity: 0.7; }
.rec__status[data-status="read"]    { background: var(--accent); border-color: var(--accent); color: var(--white); opacity: 1; }
.rec__status[data-status="checked"] { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--white); opacity: 1; }
.rec__status[data-status="dead"]    { border-color: currentColor; text-decoration: line-through; opacity: 0.55; }

/* a font card shows the family set in its own face instead of the code text */
.rec__swatch--img { padding: 1.3rem 1.1rem; }
.rec__preview {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* the marquee as a diagonal ribbon rather than a flat strip.
   The wrapper clips it, and the strip is drawn wider than the viewport so the
   rotated ends never leave a triangle of background showing at the corners. */
.marquee-wrap {
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.4rem);
}
.marquee--tilt {
  background: var(--rose);
  width: 116%;
  margin-left: -8%;
  transform: rotate(-3.5deg);
  box-shadow: 0 10px 26px rgba(140, 27, 63, 0.22);
  padding-block: clamp(0.45rem, 1.4vw, 0.85rem);
}
.marquee--tilt .marquee__track > * { color: var(--white); }
.marquee--tilt .marquee__star .bloom { color: var(--blush); }

/* The ribbon scrolls right to left, continuously, on every browser. It is
   deliberately exempt from the reduced-motion rule above: it was asked for.
   To hand the choice back, add
     @media (prefers-reduced-motion: reduce) {
       .marquee--tilt .marquee__track { animation: none; }
     }
   Speed lives on .marquee as --marquee-speed. */
.marquee--tilt .marquee__track {
  animation: marquee var(--marquee-speed) linear infinite;
  will-change: transform;
}

/* The codes that were tested and failed. Struck through because the code is
   real text somebody might otherwise copy straight off the page. */
.debunk { list-style: none; margin: 1.1rem 0 1.3rem; padding: 0; }
.debunk li {
  background: var(--white);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.55rem;
  box-shadow: 0 6px 16px rgba(140, 27, 63, 0.08);
}
.debunk b {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--rose);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.debunk span { display: block; margin-top: 0.3rem; font-size: 0.85rem; }
.debunk span em { font-style: normal; font-weight: 600; color: var(--ink-strong); }

/* The code as text, so it can be read and selected rather than only copied.
   Wraps rather than truncates: a truncated code is a broken code. */
.rec__code {
  margin: 0.15rem 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent, var(--rose));
  overflow-wrap: anywhere;
}

/* Advert rows. The height is reserved up front so the page does not jump when
   a unit mounts, and each row centres whatever size the loader settles on. */
.ad-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: clamp(1.4rem, 4vw, 2.4rem) auto;
  width: 100%;
}
.ad-row[hidden] { display: none; }
.ad-slot { overflow: hidden; }
.h-lb   { min-height: 90px; }
.h-rect { min-height: 250px; }
.h-mid  { min-height: 60px; }
@media (max-width: 759px) {
  .h-lb { min-height: 250px; }   /* an lb steps down to a 300x250 here */
}

/* Space kept clear for the pack tray while it is open, so the foot of the page
   stays reachable instead of living under a fixed bar. */
body.has-tray { padding-bottom: calc(var(--tray-h, 5.5rem) + 14px); }

/* The tray is a fixed bar: every pixel of it is taken off the page for as long
   as it is open, so it is built to the same weight as the footer's base strip
   rather than to button size. One row, never wrapping, at every width. */
.tray__inner {
  gap: 0.55rem;
  padding-block: 0.45rem;
  flex-wrap: nowrap;
}
.tray p {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.tray .btn {
  padding: 0.55em 1.2em;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .tray__inner { gap: 0.4rem; }
  .tray p { font-size: 0.58rem; letter-spacing: 0.04em; }
  .tray .btn { padding: 0.5em 0.85em; font-size: 0.6rem; }
}

/* ── the front page: categories, and nothing to scroll past to reach them ──
   Cards carry a real preview from their own shelf rather than a coloured box
   with a word on it, because the whole pitch of the site is that you can see
   what a code returns before you copy it. */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
  margin-top: 1.4rem;
}
.cat {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(140, 27, 63, 0.10);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cat:hover, .cat:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(140, 27, 63, 0.18);
}
.cat__shot {
  aspect-ratio: 4 / 3;
  background: var(--blush-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cat__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cat__body { padding: 0.95rem 1.1rem 1.15rem; }
.cat__body h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent, var(--rose));
}
.cat__count {
  display: inline-block;
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--rose));
  opacity: 0.85;
}
.cat__body p { margin: 0; font-size: 0.85rem; line-height: 1.5; }

/* the looks, as a plain wrapping row - they are a shortcut, not a second grid */
.cats--tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(140, 27, 63, 0.08);
}
.cat-tag span {
  font-size: 0.66rem;
  color: var(--rose);
  opacity: 0.75;
}
.cat-tag:hover, .cat-tag:focus-visible { background: var(--cream); color: var(--rose); }

.btn--sm { padding: 0.6em 1.3em; font-size: 0.66rem; }

.cat__shot--wide { padding: 0.9rem 1rem; }
.cat__shot--wide img { object-fit: contain; height: auto; }

/* ── thumbs ────────────────────────────────────────────────────────────────
   Measured on a phone: the card buttons came out 31px tall and the tag chips
   26px. Copy is the whole point of the site and nearly all of its traffic
   arrives from Pinterest on a phone, so the main action was the smallest thing
   on the card. WCAG asks 44px for AAA.

   Scoped to a coarse pointer so a mouse still gets the tighter layout - on
   desktop these sizes are fine and growing them would just spread the card. */
@media (pointer: coarse) {
  .rec__actions .btn,
  .tray .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tagbar button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .footer__links a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .cat-tag { min-height: 42px; }
  /* the builder's Remove buttons sat at 23px - the smallest control anywhere,
     and the one that throws away work if you miss and hit the wrong row */
  .picked button {
    min-height: 40px;
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── text cannot be selected ───────────────────────────────────────────────
   Asked for deliberately. Two things this does NOT do, so nobody is surprised
   later: it does not stop view-source, devtools or reader mode, and it does not
   stop the codes being taken - the Copy button still writes them to the
   clipboard, which is the site's whole purpose.

   Form fields are exempt. Without that exemption you cannot select what you
   typed in the search box or fix a typo in the pin title, which breaks the
   builder rather than protecting anything. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* iOS otherwise pops its own callout on a long press */
body { -webkit-touch-callout: none; }

/* ── the empty panels ──────────────────────────────────────────────────────
   The data-h ladder above gives each swatch a random min-height of 118-224px.
   That existed to give the masonry some rhythm back when a swatch held code
   TEXT and every card was otherwise the same height.

   Every swatch now holds a real preview, and the pictures supply that rhythm
   themselves - a Canva grid is portrait, a Pinterest grid is landscape, a font
   specimen is a 6:1 strip. Measured across the board, the grids were 11-17%
   empty (that is just padding) while the 73 font cards were 69% empty: 119px
   of blank around 53px of picture, because the ladder was holding them open.

   So a swatch that has a picture in it is sized by the picture. */
.rec[data-h] .rec__swatch--img { min-height: 0; }

/* ADVERT ALIGNMENT (2026-09-30, owner: "u broke the alignment"). MEASURED on how.html at
   1280px: the prose column sat at left 99 width 476, the advert at left 399 - 300px out.
   .measure is max-width:46ch with no auto margin, so the column hugs the left of the
   shell, while .ad-row is width:100% justify-content:center and centred in the whole
   shell. Cap the row to the same 46ch and start it at the shell's left edge so the advert
   lines up with the text it sits above. On a phone 46ch is wider than the screen, so the
   row still spans the width and the unit stays centred - nothing changes there. */
.shell:has(> .measure) > .ad-row:first-child { justify-content: flex-start; }
/* :first-child ONLY (2026-09-30, owner: "in footer above section of ads put in
   middle"). A LEAD advert opens the band and should line up with the text column
   underneath it. An advert further down closes the section and belongs in the
   middle of the full width, which is where the design already put every other
   unit. Without the :first-child this rule dragged those to the left too. */
/* NOT max-width:46ch. Capping the ROW to 476px was the first attempt and it made
   things worse: ads.js sizes a unit from the width available to it, and pick()
   drops a 'mid' to a 320x50 below 500px - so a 476px row silently downgraded the
   468x60 to a mobile banner on a 1280px desktop. Left-aligning the row instead
   leaves the full shell width available, so the 468 still mounts, and its left
   edge lands on the prose column's left edge. */

/* AN ADVERT THAT OPENS A BAND (2026-09-30, owner: "space remove"). The band's own
   padding-block and the row's own margin stacked ~90px of empty colour between the wave
   and the advert. When the row is the FIRST thing in a band both collapse to one small
   breathing gap, so the advert sits directly under the wave as intended. */
.band > .shell > .ad-row:first-child { margin-top: 0; }
.band:has(> .shell > .ad-row:first-child) { padding-top: clamp(0.7rem, 2vw, 1.1rem); }

/* R5 (2026-09-30). The shell gutter is clamp(20px,5vw,56px), so on a 320px phone the
   content box is only 280 - narrower than the narrowest advert (300) and far narrower
   than the 320x50 the loader wants, which is why the unit was cropped. The row is let
   out of the gutter below 375px so the unit has the full viewport width to sit in. */
@media (max-width: 374px) {
  .ad-row { margin-inline: calc(var(--gutter) * -1); width: 100vw; max-width: 100vw; }
}