/* Where's My Toaster — coming-soon landing. Palette + type from the brand guide. */
:root {
  --red: #E63946;          /* Toaster Red (brand guide) */
  --red-deep: #C42A37;     /* hover / depth */
  --footer-red: #CE2E3B;   /* footer field */
  --coral: #EF7079;        /* script accent */
  --charcoal: #231F20;
  --ink: #151011;
  --cream: #FFF2E6;        /* Warm Cream */
  --tan: #E8D6C8;          /* notify card */
  --soft: #FAF7F3;
  --muted: #6c6266;
  --shadow: 0 20px 44px -22px rgba(35,31,32,.4);
  --font-head: "Bebas Neue", Impact, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-script: "Dancing Script", cursive;
  --font-marker: "Caveat", cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; font-family: var(--font-body); color: var(--charcoal); background: #fff; line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.heart { color: var(--red); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body);
  font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .95rem 1.9rem; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 12px 26px -12px rgba(230,57,70,.7); }
.btn-primary .heart { color: #fff; }
.btn-primary:hover { transform: translateY(-2px); background: var(--red-deep); }
.wave { display: block; width: 100%; height: 70px; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  position: relative; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  max-width: 1240px; margin: 0 auto; padding: 2.8rem clamp(1rem, 4vw, 3rem) .4rem;
}
.brand { display: inline-flex; flex-direction: column; align-items: center; }
.brand-logo { height: clamp(96px, 12vw, 140px); width: auto; }
.brand-tagline {
  font-family: var(--font-script); font-weight: 600; font-size: 1.1rem; color: var(--charcoal);
  margin-top: .3rem; padding-top: .4rem; position: relative; display: inline-flex; align-items: center; gap: .35rem;
}
.brand-tagline::before {
  content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 2px; background: var(--red);
}
.hr-heart { color: var(--red); font-size: .85rem; }
.site-nav { display: flex; align-items: center; gap: .9rem; padding-top: .5rem; }
.socials { display: inline-flex; align-items: center; gap: .5rem; }
.socials svg { width: 20px; height: 20px; }
.socials-header a { color: var(--red); display: inline-flex; padding: .35rem; border-radius: 8px; transition: transform .12s ease; }
.socials-header a:hover { transform: translateY(-2px); }
@media (max-width: 780px){
  .site-header { flex-direction: column; align-items: center; }
  .site-nav { align-items: center; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: visible; min-height: clamp(480px, 52vh, 580px); display: flex; align-items: flex-end; background: #fff; }
.hero-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: clamp(360px, 62%, 900px); height: 100%;
  object-fit: cover; object-position: 46% 56%; z-index: 0;
  /* left-edge fade lives on the image (image-relative) so it always tracks the
     photo's left edge even when the width is capped on very wide viewports */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%);
}
.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 26%),
    linear-gradient(0deg, var(--cream) 2%, rgba(255,255,255,0) 20%);
}
/* Bottom padding clears the hero wave, which is absolutely positioned at the
   hero's base. Reduced along with .wave-hero so the signup card sits close under
   the hero copy (roughly where the old CTA button was) rather than a screen down. */
.hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; padding: 1.4rem clamp(1rem, 4vw, 3rem) 3rem; }
.hero-copy { max-width: 540px; }
.script-accent {
  font-family: "Kaushan Script", var(--font-script); font-weight: 400; font-size: clamp(1.9rem, 4.3vw, 2.9rem);
  color: var(--coral); margin: 0 0 .25rem; line-height: 1.1; white-space: nowrap;
  transform: rotate(-4deg); transform-origin: left bottom;
}
.accent-heart { display: inline-block; width: clamp(22px, 2.8vw, 30px); color: var(--red); vertical-align: -.1em; margin-left: .3rem; transform: rotate(10deg); }
.accent-heart svg { width: 100%; }
.display {
  font-family: var(--font-head); font-weight: 400; font-size: clamp(2.7rem, 5.4vw, 4.2rem);
  line-height: .92; letter-spacing: .01em; color: var(--ink); margin: .1rem 0 1rem; white-space: nowrap;
}
.lede { font-size: .98rem; max-width: 34ch; color: #3f3a3b; margin: 0 0 1rem; }
/* The hero headline is wide; a 34ch subhead under it reads as a stray column.
   Only the hero's copy is widened, so other pages keep the narrower measure. */
.hero .lede { max-width: 42ch; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .42rem; }
.checklist li { position: relative; padding-left: 2rem; font-weight: 500; font-size: .94rem; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; width: 1.35rem; height: 1.35rem;
  border: 2px solid var(--red); color: var(--red); border-radius: 50%; display: grid;
  place-items: center; font-size: .68rem; font-weight: 700;
}
.hero-note {
  position: absolute; z-index: 5; top: -18%; right: 2.5%; width: clamp(156px, 17vw, 221px);
  height: auto; pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(255,255,255,.95));
}
.wave-hero { position: absolute; left: 0; bottom: -1px; z-index: 2; height: 64px; }
.wave-hero path { fill: var(--cream); }
@media (max-width: 720px){
  .hero { min-height: 0; align-items: center; }
  .hero-inner { padding: 1.2rem clamp(1rem,4vw,3rem) 4.5rem; }
  /* mobile: small, faint photo (no white panel) so the copy reads directly over it */
  .hero-bg { width: clamp(300px, 60%, 460px); opacity: .16; object-position: 55% 26%; }
  .hero-fade { background: linear-gradient(180deg,#fff 0%, rgba(255,255,255,0) 16%), linear-gradient(0deg, var(--cream) 4%, rgba(255,255,255,0) 26%); }
  .hero-note { display: none; }
  .hero-copy { max-width: 100%; }
  .hero .lede { font-weight: 600; color: #2a2527; }
  .script-accent { white-space: normal; }
  .display { white-space: normal; font-size: clamp(2.4rem, 11vw, 3.6rem); }
}

/* ---------- how it works ---------- */
.howto { background: var(--cream); text-align: center; padding: .5rem clamp(1rem, 4vw, 3rem) 1.8rem; }
.steps {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left;
}
.step {
  position: relative; background: #fff; border-radius: 16px; padding: 1.6rem 1.3rem 1.3rem;
  box-shadow: 0 14px 28px -20px rgba(35,31,32,.45);
}
.step-n {
  position: absolute; top: -.85rem; left: 1.3rem; width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--red); color: #fff; font-family: var(--font-head); font-size: 1.15rem; line-height: 1;
}
.step-h { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.08rem; color: var(--ink); margin: .2rem 0 .35rem; }
.step p { color: #3f3a3b; font-size: .94rem; margin: 0; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; gap: 1.7rem; } .step { padding-top: 1.8rem; } }

/* ---------- the two prose blocks ---------- */
.story { background: var(--cream); padding: 1.4rem clamp(1rem, 4vw, 3rem) 1.6rem; }
.story-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.story-card { background: #fff; border-radius: 16px; padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 14px 28px -20px rgba(35,31,32,.45); }
.story-card h2 {
  font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--red-deep); margin: 0 0 .5rem; line-height: 1.25;
}
.story-card p { color: #3f3a3b; font-size: .95rem; margin: 0; max-width: 62ch; }
@media (max-width: 820px){ .story-grid { grid-template-columns: 1fr; } }

/* ---------- closing call to action ---------- */
/* The second and last ask. The signup form itself is up under the hero; this
   scrolls back to it, and carries the red wave into the footer, so it must stay
   the final section inside <main>. */
.closer { position: relative; background: var(--cream); text-align: center; padding: .6rem clamp(1rem, 4vw, 3rem) 5.5rem; }
.closer-line { font-family: var(--font-script); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--coral); margin: 0 0 .7rem; }
.closer .btn-primary { display: inline-flex; align-items: center; gap: .4rem; position: relative; z-index: 2; }

/* ---------- FAQ ---------- */
/* Answers are always visible. An accordion would hide text that the FAQPage
   structured data in the head claims is on the page. */
.faq { background: var(--cream); text-align: center; padding: .8rem clamp(1rem, 4vw, 3rem) 2rem; }
.faq-list { max-width: 820px; margin: 0 auto; padding: 0; text-align: left; display: grid; gap: .9rem; }
.faq-item { background: #fff; border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: 0 14px 28px -20px rgba(35,31,32,.45); }
.faq-q { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 0 0 .25rem; }
.faq-a { color: #3f3a3b; font-size: .94rem; margin: 0; max-width: 70ch; }

/* ---------- features ---------- */
.features { background: var(--cream); text-align: center; padding: .5rem 1rem 1.4rem; }
.section-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: .03em; color: var(--ink); margin: 0; }
.rule { display: inline-block; position: relative; width: 170px; max-width: 55%; height: 2px; background: var(--red); margin: .4rem 0 1.3rem; }
.rule .heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--cream); padding: 0 .4rem; font-style: normal; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; max-width: 940px; margin: 0 auto; }
.feature { background: #fff; border-radius: 14px; padding: .95rem .5rem; box-shadow: 0 14px 28px -20px rgba(35,31,32,.45); display: grid; gap: .5rem; justify-items: center; font-weight: 700; font-size: .76rem; line-height: 1.2; }
.feature-icon { color: var(--red); width: 36px; height: 36px; }
.feature-icon svg { width: 100%; height: 100%; }
@media (max-width: 900px){ .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .feature-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- notify ---------- */
.notify { position: relative; background: var(--cream); padding: 0 clamp(1rem, 4vw, 3rem) 4rem; }
.notify-card {
  max-width: 900px; margin: 0 auto; background: #F4ECE3; border-radius: 22px;
  padding: clamp(.8rem, 2vw, 1.3rem) clamp(1.4rem, 4vw, 2.6rem); display: grid;
  grid-template-columns: 168px 1fr; align-items: center; gap: clamp(.8rem, 3vw, 1.8rem); box-shadow: 0 12px 26px -18px rgba(35,31,32,.26);
}
.notify-envelope { width: 100%; max-width: 178px; margin: -1.5rem 0; filter: drop-shadow(0 12px 18px rgba(35,31,32,.18)); }
.notify-body h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: .02em; color: var(--ink); margin: 0 0 .15rem; }
.notify-sub { color: #4a4245; margin: 0 0 .8rem; font-size: .95rem; }
.notify-form { display: flex; gap: .55rem; flex-wrap: wrap; }
.notify-form input { flex: 1 1 220px; padding: .85rem 1.2rem; border-radius: 999px; border: 1px solid rgba(35,31,32,.15); font: inherit; background: #fff; }
.notify-form input:focus { outline: 2px solid var(--red); border-color: var(--red); }
.notify-inline { min-height: 1.2em; margin: .5rem 0 0; font-weight: 600; font-size: .9rem; }
.notify-inline.is-error { color: var(--red-deep); }
.wave-tofooter { position: absolute; left: 0; bottom: -1px; z-index: 1; height: 84px; }
.wave-tofooter path { fill: var(--footer-red); }
@media (max-width: 640px){ .notify-card { grid-template-columns: 1fr; text-align: center; } .notify-envelope { margin: -1.6rem auto 0; max-width: 175px; } .notify-form { justify-content: center; } }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--footer-red); color: #fff; margin-top: 0; padding: .5rem clamp(1rem, 4vw, 3rem) 0; }
.footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 1.2rem; padding: .8rem 0 1rem; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.wordmark { font-family: var(--font-head); font-size: 2rem; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .35rem; color: #fff; line-height: 1; }
.wm-chip { background: #fff; color: var(--footer-red); border-radius: 9px 9px 13px 13px; padding: 0 .38rem; }
.wordmark sup { font-size: .45em; align-self: flex-start; }
.footer-tag { font-family: var(--font-script); font-weight: 600; font-size: 1.15rem; opacity: .96; }
.footer-mission { text-align: center; max-width: 42ch; margin: 0 auto; font-size: .96rem; opacity: .95; }
.footer-mission .heart { color: #fff; margin: 0 .3rem; }
.footer-follow { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.follow-label { font-family: var(--font-head); letter-spacing: .12em; font-size: 1.1rem; }
.socials-footer a { width: 42px; height: 42px; border: 1.6px solid rgba(255,255,255,.85); border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background .15s ease, color .15s ease; }
.socials-footer a:hover { background: #fff; color: var(--footer-red); }
.hashtag { font-weight: 600; opacity: .9; letter-spacing: .02em; font-size: .9rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.25); text-align: center; padding: 1rem; font-size: .82rem; opacity: .92; }
.footer-legal a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.footer-legal a:hover { color: #ffe1e4; }
.footer-legal .sep { margin: 0 .5rem; opacity: .6; }
@media (max-width: 820px){ .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-brand { align-items: center; } }

/* ---------- success popup ---------- */
/* NOTE: the base rule sets display:grid, which overrides the `hidden` attribute's
   UA display:none — so this override is REQUIRED, otherwise the invisible overlay
   sits over the whole page at z-index 100 and eats every click (socials, form). */
.modal-overlay[hidden] { display: none; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(35,31,32,.5); opacity: 0; transition: opacity .28s ease;
}
.modal-overlay.is-open { opacity: 1; }
.modal-card {
  position: relative; overflow: hidden; width: min(100%, 540px); background: #fffdfb;
  border-radius: 26px; padding: 3rem 2.4rem 3.4rem; text-align: center; box-shadow: 0 40px 80px -30px rgba(35,31,32,.6);
  transform: scale(.9) translateY(10px); transition: transform .32s cubic-bezier(.2,.9,.3,1.3);
}
.modal-overlay.is-open .modal-card { transform: scale(1) translateY(0); }
.modal-close { position: absolute; top: .8rem; right: 1.1rem; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; z-index: 2; }
.modal-watermark { position: absolute; top: -1.5rem; right: -1rem; font-size: 12rem; color: rgba(232,214,200,.5); pointer-events: none; line-height: 1; }
.modal-spark { color: var(--red); width: 60px; margin: 0 auto .8rem; position: relative; z-index: 1; }
.modal-spark svg { width: 100%; }
.modal-line1 { font-family: var(--font-script); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3rem); color: var(--coral); margin: 0; position: relative; z-index: 1; line-height: 1.05; }
.modal-line2 { font-family: var(--font-marker); font-weight: 700; font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--charcoal); margin: .1rem 0 .6rem; position: relative; z-index: 1; line-height: 1; }
.modal-heart { color: var(--red); font-size: 2rem; position: relative; z-index: 1; }
.modal-wave { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; }
.modal-wave path { fill: var(--cream); }

/* ---------- legal pages ---------- */
.legal-header { text-align: center; padding: 2rem 1rem 1rem; }
.legal-header .brand-logo { height: 84px; margin: 0 auto; }
.legal { max-width: 780px; margin: 0 auto; padding: 1rem clamp(1.2rem, 4vw, 2rem) 3rem; }
.legal h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: .02em; color: var(--ink); margin: 0 0 .2rem; }
.legal .updated { color: var(--muted); font-size: .9rem; margin: 0 0 2rem; }
.legal h2 { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.3rem; color: var(--red-deep); margin: 2rem 0 .5rem; }
.legal p, .legal li { color: #3f3a3b; font-size: 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--red); }
.legal a:hover { text-decoration: underline; }
.legal-back { display: inline-block; margin-top: 2rem; font-weight: 600; color: var(--red); }
.legal-note { background: var(--cream); border-left: 4px solid var(--red); padding: 1rem 1.2rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0; font-size: .92rem; color: #4a4245; }

/* Honeypot: removed from view for people (and from the a11y tree via
   aria-hidden on the wrapper), still present in the DOM for bots to fill in.
   Deliberately not display:none — some bots skip those. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cloudflare Turnstile widget sits under the signup form */
.cf-turnstile { flex: 1 0 100%; display: flex; justify-content: center; margin: .6rem 0 0; }

/* --- Hero waitlist form -----------------------------------------------------
   The signup input sits in the hero so it is visible without scrolling. It sits
   over the hero artwork, so the field gets a solid background for contrast and
   the whole form is width-capped to stay off the illustration on wide screens. */
.hero-notify { margin-top: 1.4rem; max-width: 520px; align-items: center; }
.hero-notify input[type=email] { flex: 1 1 240px; background: #fff; }
.hero-notify .btn-primary { flex: 0 0 auto; }
.hero-copy .notify-inline { margin-top: .6rem; min-height: 1.2em; }

/* Visually hidden but read by screen readers (the hero field's label). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .hero-notify { max-width: none; }
  .hero-notify input[type=email] { flex: 1 1 100%; }
  .hero-notify .btn-primary { width: 100%; justify-content: center; }
}

/* Turnstile collapses once it has verified the visitor. display:none keeps the
   cf-turnstile-response input in the DOM so the token still submits; the widget
   reappears if the token expires or errors (see wmtCaptchaReset). */
.cf-turnstile.is-verified { display: none; }

/* --- Public registry page (share-sheet destination, wheresmytoaster.com/<slug>) */
.registry-hero { max-width: 780px; margin: 0 auto; padding: .5rem clamp(1.2rem, 4vw, 2rem) 1.5rem; text-align: center; }
.registry-hero h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: .02em; color: var(--ink); margin: .1rem 0 .6rem; }
.registry-badge { display: inline-block; background: var(--cream); color: var(--red-deep); font-weight: 600; font-size: .82rem; letter-spacing: .02em; padding: .3rem .9rem; border-radius: 999px; margin-bottom: .8rem; }
.registry-lede { color: var(--muted); font-size: 1.02rem; max-width: 56ch; margin: 0 auto; }

.registry-items { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.registry-item { position: relative; background: #fff; border: 1px solid #f0e6e0; border-radius: 16px; padding: 1.3rem 1.3rem 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .35rem; }
.item-kind-badge { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red); background: var(--cream); padding: .2rem .6rem; border-radius: 999px; margin-bottom: .3rem; }
.item-image { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--soft); border-radius: 10px; margin-bottom: .5rem; }
.item-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.08rem; color: var(--ink); margin: 0; }
.item-retailer, .item-category { color: var(--muted); font-size: .88rem; margin: 0; }
.item-price, .item-goal { color: var(--charcoal); font-weight: 600; font-size: 1rem; margin: .1rem 0 0; }
.item-raised { color: var(--muted); font-size: .86rem; margin: .1rem 0 0; }
.item-claimed { font-size: .82rem; color: var(--muted); margin: .3rem 0 0; }
.item-claimed.is-full { color: var(--red-deep); font-weight: 600; }
.item-claimed.is-open { color: #7a8a6f; }
.item-cta { margin-top: .7rem; align-self: flex-start; padding: .5rem 1.1rem; font-size: .92rem; }

/* An affiliate item shows no number, because the stored price is the owner's
   estimate and Amazon forbids displaying a stale price. Styled as quiet text,
   not as a price, so it never reads as a figure. */
.item-price-check { color: var(--muted); font-size: .9rem; font-style: italic; margin: .1rem 0 0; }

/* The affiliate disclosure. Required by the FTC on any page carrying these
   links, so it is placed above the items where it is read before anyone
   clicks, and given enough contrast to be legible rather than hidden in fine
   print. Do not shrink or lighten it further. */
.affiliate-disclosure {
  color: var(--muted); font-size: .84rem; line-height: 1.5;
  margin: 0 auto 1.4rem; max-width: 60ch; text-align: center;
}

/* The "did you buy it?" prompt. Amazon never tells us a purchase happened, so
   this is the only thing keeping a registry from being bought twice. */
.claim-card { text-align: left; padding: 1.8rem 1.6rem 1.5rem; max-width: 27rem; }
.claim-lede { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: .4rem 0 1.1rem; }
.claim-item-name { color: var(--ink); font-weight: 600; }
.claim-field { display: block; margin-bottom: 1.1rem; }
.claim-field > span { display: block; font-size: .84rem; color: var(--charcoal); margin-bottom: .3rem; }
.claim-field em { color: var(--muted); font-style: normal; font-weight: 400; }
.claim-field input {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: #fff; border: 1px solid #ddd3d6; border-radius: 8px;
}
.claim-field input:focus { outline: 2px solid var(--red-deep); outline-offset: 1px; border-color: transparent; }
.claim-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-quiet { background: transparent; color: var(--muted); border: 1px solid #ddd3d6; }
.btn-quiet:hover { color: var(--ink); border-color: var(--muted); }
.claim-status { min-height: 1.2em; margin: .8rem 0 0; font-size: .88rem; color: var(--charcoal); }

.progress-bar { width: 100%; height: 9px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: .5rem 0 .1rem; }
.progress-fill { height: 100%; background: var(--red); border-radius: 999px; }

.registry-not-found .registry-hero { padding-top: 2rem; }
.registry-not-found .btn { margin-top: 1rem; }

/* ---------- sponsored placement (partner-paid space) ----------
   ⚠️ THIS MUST NEVER BE MISTAKABLE FOR OUR OWN CONTENT, or for a registry
   item. Everything here exists for that: a muted surface instead of the white
   card an item gets, a dashed outline instead of an item's shadow, the
   disclosure badge ABOVE the creative rather than under it, the words "Paid
   advertisement" spelled out, and a plain text link instead of the red
   .btn-primary every real call to action on this site uses. Do not "tidy" it
   into looking like the item cards.

   Colors come from the site tokens (--soft, --tan, --muted, --ink), the same
   ones the rest of this page uses, so the unit follows the public site's
   single light brand palette rather than defining a second one of its own. */
.sponsored-slot {
  max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 3.2rem;
}
.sponsored-unit {
  max-width: 420px; margin: 0 auto; box-sizing: border-box;
  background: var(--soft);
  border: 1px dashed rgba(35, 31, 32, .35);
  border-radius: 16px; padding: 1rem 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.sponsored-mark {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin: 0 0 .25rem;
}
/* Contrast is deliberate: this is the legally required disclosure, not a
   footnote. Do not shrink or lighten it. */
.sponsored-mark-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--charcoal); background: var(--tan);
  border-radius: 999px; padding: .22rem .6rem; white-space: nowrap;
}
.sponsored-mark-note { font-size: .74rem; color: var(--muted); }
.sponsored-image {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: 10px; margin: .25rem 0 .35rem; background: var(--tan);
}
.sponsored-headline {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.35;
}
.sponsored-body { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.5; }
.sponsored-cta {
  align-self: flex-start; margin-top: .45rem;
  font-size: .86rem; font-weight: 700; color: var(--red-deep); text-decoration: none;
  border-bottom: 2px solid rgba(230, 57, 70, .35); padding-bottom: 1px;
}
.sponsored-cta:hover { border-bottom-color: var(--red); }
.sponsored-cta:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }

/* Sign-in link in the header, next to the socials. Deliberately quiet: the
   marketing page is for people who do not have an account yet, so this serves
   the returning minority without competing with the hero. */
.signin-link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .95rem;
  margin-right: .75rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--charcoal);
  border-radius: 999px;
  white-space: nowrap;
}
.signin-link:hover { background: var(--charcoal); color: var(--cream); }
.signin-link:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px) { .signin-link { margin-right: .4rem; padding: .4rem .75rem; } }

/* The second half of the footer mission is the half that says what this is for,
   so it carries the weight. Kept to one step up in size: the line still has to
   read as one sentence, not as a heading with a preamble. */
.footer-mission .mission-lead { display: block; font-weight: 700; font-size: 1.08em; }

/* The opening heart sits ABOVE the sentence rather than in front of its first
   word, so the line begins with the words. */
.footer-mission .heart-lead { display: block; margin-bottom: .35rem; }

/* ---------- public registry directory (www.wheresmytoaster.com/registries) ----

   ⚠️ THIS PAGE IS LIGHT ONLY, ON PURPOSE. DO NOT ADD A DARK PALETTE BACK.

   It is a considered exception to CLAUDE.md standard #2 ("all UI works in dark
   and light"), not an oversight, and it was asked for by the product owner.
   Every other page on the marketing site is a single light brand palette that
   ignores the system scheme. When this one page followed the system instead, a
   visitor on a dark-mode machine met one black page in a white site and read it
   as a broken page rather than a themed one. Standard #2 exists so a UI is
   never unreadable in one mode; a site that is light everywhere is already
   consistent in both. Uniformity with the rest of www wins here.

   So: the dark redefinitions of the --dir-* tokens were deleted, and
   color-scheme is pinned to light so the search field, its scrollbar and every
   other piece of browser chrome stay light with the page instead of painting
   themselves dark underneath it.

   ⚠️ EVERY COLOR HERE IS A TOKEN, and every token is scoped to
   .page-directory. The rest of this site is a single light brand palette, and
   redefining :root would silently retheme the landing page, the legal pages and
   the public registry page along with it. Scoping keeps the change to the one
   page. The token structure is kept exactly as it was even though there is only
   one palette now, so if the whole marketing site ever gains a dark mode, this
   page rejoins it by adding one block, not by unpicking hardcoded colors. */
.page-directory {
  --dir-bg: #ffffff;
  --dir-band: var(--cream);
  --dir-card: #ffffff;
  --dir-border: #f0e6e0;
  --dir-ink: var(--ink);
  --dir-body: #3f3a3b;
  --dir-muted: var(--muted);
  --dir-accent: var(--red);
  --dir-link: var(--red-deep);
  --dir-chip-bg: var(--cream);
  --dir-field-bg: #ffffff;
  --dir-field-border: rgba(35, 31, 32, .18);
  --dir-shadow: 0 14px 28px -20px rgba(35, 31, 32, .45);
  /* The polaroid frame is a white border with a caption written on it, so it
     needs a surface of its own that does not follow --dir-card: on a card that
     is already white the frame would vanish, and if this page ever gains a dark
     palette a photo print stays a photo print. */
  --dir-polaroid: #fffdfa;
  --dir-polaroid-ink: #4a4446;
  --dir-polaroid-shadow: 0 6px 12px -6px rgba(35, 31, 32, .38);

  /* Pinned to light so the browser paints light form controls and a light
     scrollbar here, whatever the machine's setting. Without it a dark-mode
     browser draws its own dark chrome inside a light page. See the note at the
     top of this block: light only is the decision, not a missing dark mode. */
  color-scheme: light;
  background: var(--dir-bg);
  color: var(--dir-body);
}

/* --- header. The stacked PNG logo is black artwork on transparency, so it
   disappears on a dark ground. The footer's CSS wordmark is the same brand
   mark drawn in text, and it follows the tokens, so this page uses that. */
.dir-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 1.8rem clamp(1rem, 4vw, 3rem) .6rem;
}
.dir-brand .wordmark { color: var(--dir-ink); font-size: clamp(1.5rem, 4vw, 1.9rem); }
/* The chip keeps the fixed brand red with white on it in both modes: it is the
   logo, not a themed surface, and white on Toaster Red is legible on either. */
.dir-brand .wm-chip { background: var(--red); color: #fff; }
.page-directory .signin-link { color: var(--dir-ink); border-color: var(--dir-ink); margin-right: 0; }
.page-directory .signin-link:hover { background: var(--dir-ink); color: var(--dir-bg); }

/* --- intro + search */
.dir-main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 3.5rem; }
.dir-intro { max-width: 44rem; margin: 0 auto 2.4rem; text-align: center; }
.page-directory .script-accent { transform: none; color: var(--dir-accent); font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.page-directory .accent-heart { color: var(--dir-accent); }
.dir-display {
  font-family: var(--font-head); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: .95; letter-spacing: .02em; color: var(--dir-ink); margin: .1rem 0 .7rem;
}
.dir-lede { color: var(--dir-body); font-size: 1.02rem; max-width: 40ch; margin: 0 auto 1.5rem; }

.dir-search { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; max-width: 32rem; margin: 0 auto; }
.dir-search input {
  flex: 1 1 15rem; min-width: 0; padding: .85rem 1.2rem; border-radius: 999px; font: inherit;
  color: var(--dir-ink); background: var(--dir-field-bg); border: 1px solid var(--dir-field-border);
}
.dir-search input::placeholder { color: var(--dir-muted); }
.dir-search input:focus-visible { outline: 2px solid var(--dir-accent); outline-offset: 1px; border-color: transparent; }
.dir-search .btn-primary { flex: 0 0 auto; }

.dir-privacy-note { color: var(--dir-muted); font-size: .86rem; margin: 1rem auto 0; max-width: 42ch; }
.dir-result-count { color: var(--dir-muted); font-size: .9rem; text-align: center; margin: 0 0 1.4rem; }
.dir-result-count a { color: var(--dir-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --- the featured section.
   ⚠️ THE INVERSE OF THE GRID BELOW IT. On a grid card the photo is optional
   and the story is a four-line caption; here the photo leads and the story is
   the content, because an entry only reaches this section by having one. The
   handler picks these (see splitFeatured): people who put their own words, and
   usually their own face, to what they are asking for. So the type here is
   bigger, the story is not clamped, and the call to action is a real button
   rather than the grid card's quiet arrow. */
.dir-featured { margin: 0 0 2.8rem; }
.dir-featured-head { max-width: 46rem; margin: 0 auto 1.5rem; text-align: center; }
.dir-featured-title {
  font-family: var(--font-head); font-weight: 400; letter-spacing: .02em;
  font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--dir-ink); margin: 0 0 .4rem;
}
.dir-featured-lede { color: var(--dir-body); font-size: .98rem; line-height: 1.55; max-width: 48ch; margin: 0 auto; }

/* One card on a phone, and never more than three across: the container caps at
   1180px, so four 20rem tracks cannot fit and auto-fit stops at three. Fewer
   than three featured entries collapse the spare tracks and fill the row, which
   is why this is auto-fit and not a fixed repeat(3, 1fr). */
/* ⚠️ CAPPED, because auto-fit collapses to ONE full-width track when there is a
   single featured registry, and that card then stretched the whole page: a
   short story and three small prints marooned in a field of white. Three
   across still fills a wide screen; one sits at a readable width instead of
   sprawling. */
.dir-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.6rem;
  max-width: 74rem;
  margin-inline: auto;
}
/* One feature on its own is laid out side by side once there is room: the words
   on the left, the photographs filling the space they used to leave empty. */
@media (min-width: 52rem) {
  .dir-featured-grid:has(> .dir-feature:only-child) .dir-feature-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.8rem;
    align-items: start;
  }
  .dir-featured-grid:has(> .dir-feature:only-child) .dir-feature-body > .dir-polaroids {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
  }
}
.dir-feature {
  display: flex; flex-direction: column;
  background: var(--dir-card); color: var(--dir-body);
  border: 1px solid var(--dir-border); border-top: 5px solid var(--dir-accent);
  border-radius: 20px; overflow: hidden; box-shadow: var(--dir-shadow);
}
/* Taller than the grid card's 3/2 and flush to the card edges, so the face is
   the first thing on the card rather than an inset thumbnail. */
/* ⚠️ CAPPED IN HEIGHT AS WELL AS SHAPE. A 4/3 photo on a card that is allowed
   to be a page wide becomes a billboard: the picture filled the screen and the
   words it belongs to were pushed below the fold. The ratio still governs on a
   narrow card; the cap only bites on a wide one. */
.dir-feature-photo {
  width: 100%; aspect-ratio: 4 / 3; max-height: 20rem;
  object-fit: cover; display: block; background: var(--dir-band);
}
.dir-feature-body { display: flex; flex-direction: column; flex: 1; gap: .4rem; padding: 1.4rem clamp(1.2rem, 3vw, 1.7rem) 1.6rem; }
.dir-feature-type {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dir-link); background: var(--dir-chip-bg); border-radius: 999px; padding: .26rem .7rem;
}
.dir-feature-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.32rem; line-height: 1.25; color: var(--dir-ink); margin: .2rem 0 0; }
/* Room to breathe: no line clamp. The API already caps a story at 220 runes, so
   the longest one is a short paragraph, and cutting it again here would waste
   the one thing this section exists to show. */
.dir-feature-story {
  color: var(--dir-body); font-size: 1.02rem; line-height: 1.65; margin: .5rem 0 0;
  border-left: 3px solid var(--dir-border); padding-left: .9rem;
}
.dir-feature-count { color: var(--dir-muted); font-size: .86rem; margin: .9rem 0 0; }
/* Pushed to the bottom so every card in the row ends on its button, however
   long the stories above them run. */
.dir-feature-go { margin: auto 0 0; padding-top: 1.2rem; }
/* Slightly tighter than the hero button: this one sits in a 20rem column. */
.dir-feature-go .btn { padding: .8rem 1.5rem; font-size: .84rem; }

/* --- the cards.
   ⚠️ THE PHOTO IS AN ENHANCEMENT, NOT THE LAYOUT'S BACKBONE. Most listed
   registries have none, so the card is built from the type chip, the title and
   the count, and the image is an inset block that simply is not there when
   there is no photo. Nothing here reserves space for a missing image, and there
   is no placeholder tile pretending one exists. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.3rem; }
.dir-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--dir-card); color: var(--dir-body);
  border: 1px solid var(--dir-border); border-top: 3px solid var(--dir-accent);
  border-radius: 16px; padding: 1.2rem 1.3rem 1.4rem; box-shadow: var(--dir-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.dir-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(0, 0, 0, .55); }
.dir-card:focus-visible { outline: 3px solid var(--dir-accent); outline-offset: 3px; }
.dir-card-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: .55rem; background: var(--dir-band); }
.dir-card-type {
  align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dir-link); background: var(--dir-chip-bg); border-radius: 999px; padding: .22rem .65rem; margin-bottom: .25rem;
}
.dir-card-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--dir-ink); margin: 0; }
.dir-card-story {
  color: var(--dir-body); font-size: .9rem; line-height: 1.5; margin: .15rem 0 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.dir-card-count { color: var(--dir-muted); font-size: .84rem; margin: .45rem 0 0; }
.dir-card-go { margin-top: .7rem; font-size: .86rem; font-weight: 700; color: var(--dir-link); }

/* --- the album, pinned to a card as polaroids.
   The cover photo above is the card's picture; these are the owner's own
   snapshots, and they are drawn as prints rather than as a second image band so
   the two are never mistaken for each other.

   ⚠️ ALMOST EVERY REGISTRY HAS NONE. Nothing here reserves space, sets a
   min-height or draws a frame for a missing photo: the block is absent and the
   card closes up around it. One photo and five photos both have to look
   deliberate, which is why this wraps rather than sitting in fixed columns.

   ⚠️ IT MUST NOT WIDEN ITS CARD. The frames are a fixed 5.4rem and the row
   wraps, so three fit across the narrowest card (about 19rem of content at
   390px) and a fourth would drop to a second line rather than push the grid
   sideways. The container's padding absorbs the tilt, so a rotated frame does
   not overhang the card edge. */
.dir-polaroids {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: .8rem 0 .1rem; padding: .3rem .2rem .45rem;
}
.dir-polaroid {
  /* ⚠️ Larger than they were. At 5.4rem the faces in a photograph were too
     small to read as people, which is the entire point of showing them. */
  display: block; width: 7.6rem; flex: 0 0 auto;
  background: var(--dir-polaroid);
  /* A print's bottom edge is deeper than its other three. That asymmetry is
     most of what makes this read as a photograph rather than a bordered image,
     and the bottom is padded even with no caption so an uncaptioned album still
     reads as prints rather than as bordered thumbnails. */
  padding: .3rem .3rem .5rem;
  border-radius: 2px;
  box-shadow: var(--dir-polaroid-shadow);
  transform: rotate(-2.4deg);
}
/* Three tilts on a repeating cycle, so a row of them does not read as a
   pattern. They are small on purpose: a card of five wonky frames is chaos on a
   page of two dozen cards. */
.dir-polaroid:nth-child(3n + 2) { transform: rotate(1.9deg); }
.dir-polaroid:nth-child(3n) { transform: rotate(-.8deg); }
.dir-polaroid img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--dir-band);
}
.dir-polaroid-caption {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  /* Kaushan Script is already loaded for this page's accent line, so this adds
     no webfont. The fallbacks are real handwriting-ish stacks, not a bare
     cursive keyword, because the caption still has to be legible without it. */
  font-family: "Kaushan Script", "Segoe Script", "Bradley Hand", var(--font-script), cursive;
  font-size: .76rem; line-height: 1.3; text-align: center;
  color: var(--dir-polaroid-ink);
  padding: .3rem .1rem 0;
  overflow-wrap: anywhere;
}
/* Straightening on hover is the whole joke: the pictures settle when you look
   at them. Driven from the card so all three move together.

   ⚠️ THE ENTIRE EFFECT IS INSIDE `no-preference`, rather than being undone
   again under `reduce`. Undoing it there is the version that goes wrong: the
   hover rule still exists and still moves the frames, and a later edit to the
   base rule quietly escapes the override. Here, somebody who asked for less
   motion simply never gets a rule that moves anything.

   The tilt itself stays in both cases. It is a static arrangement, not an
   animation, and taking it away would remove the treatment rather than calm
   it down. */
@media (prefers-reduced-motion: no-preference) {
  .dir-polaroid { transition: transform .18s ease, box-shadow .18s ease; }
  .dir-card:hover .dir-polaroid,
  .dir-feature:hover .dir-polaroid {
    transform: rotate(0deg);
    box-shadow: 0 10px 18px -8px rgba(35, 31, 32, .42);
  }
}

/* --- the empty state.
   ⚠️ THIS IS THE PAGE MOST VISITORS SEE FIRST. Every registry starts private,
   so on launch day nothing is listed and this is the whole page. It is styled
   as a deliberate panel rather than a stray line of grey text, and its copy
   says what is true instead of apologising for it. */
.dir-empty {
  max-width: 44rem; margin: 0 auto; text-align: center;
  background: var(--dir-band); border: 1px solid var(--dir-border); border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
}
.dir-empty-mark { display: block; width: 74px; margin: 0 auto 1.1rem; color: var(--dir-accent); }
.dir-empty-mark svg { width: 100%; height: auto; }
.dir-empty-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: .02em; color: var(--dir-ink); margin: 0 0 .7rem; }
.dir-empty-copy { color: var(--dir-body); font-size: .98rem; line-height: 1.6; max-width: 46ch; margin: 0 auto .9rem; }
.dir-empty-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; margin: 1.4rem 0 0; }
.dir-empty-secondary { color: var(--dir-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* The footer keeps its fixed red band in both modes: it is a brand field, not a
   themed surface, and white on it reads either way. Only the seam above it
   needs to follow the page. */
.page-directory .site-footer { margin-top: 2rem; }

@media (max-width: 560px) {
  .dir-header { justify-content: center; }
  .dir-search .btn-primary { width: 100%; justify-content: center; }
}


/* --- the album on a registry's own page ---------------------------------- */

/* The same prints as the directory, a size up, because here there is room and
   the person has already chosen to look. */
.registry-story {
  max-width: 46rem; margin: 1.4rem auto 0; padding: 0 0 0 1rem;
  border-left: 3px solid var(--dir-rule, rgba(230, 57, 70, .35));
  color: var(--dir-body, #4a4446); font-size: 1.02rem; line-height: 1.6;
}
.registry-polaroids {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.1rem; margin: 1.6rem auto 0; padding: .4rem;
  max-width: 52rem;
}
.registry-polaroid {
  margin: 0; width: 10.5rem; flex: 0 0 auto;
  background: var(--dir-polaroid, #fffdfa);
  padding: .45rem .45rem .7rem;
  border-radius: 2px;
  box-shadow: var(--dir-polaroid-shadow, 0 6px 12px -6px rgba(35, 31, 32, .38));
  transform: rotate(-2.1deg);
}
.registry-polaroid:nth-child(3n + 2) { transform: rotate(1.7deg); }
.registry-polaroid:nth-child(3n) { transform: rotate(-.7deg); }
.registry-polaroid img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
}
.registry-polaroid figcaption {
  font-family: "Kaushan Script", "Segoe Script", "Bradley Hand", cursive;
  font-size: .85rem; line-height: 1.3; text-align: center;
  color: var(--dir-polaroid-ink, #4a4446);
  padding: .4rem .15rem 0; overflow-wrap: anywhere;
}
/* ⚠️ They settle when you look at them, and not at all for somebody who asked
   for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .registry-polaroid { transition: transform .18s ease; }
  .registry-polaroids:hover .registry-polaroid { transform: rotate(0deg); }
}