/* I Bought a House. White page, loud colors, phone in one hand. */

:root {
  --ink: #16131F;
  --white: #FFFFFF;

  /* Bright fills. Never text. */
  --pink: #FF3D8A;
  --blue: #2E7CF6;
  --orange: #FF7A1A;
  --red: #F03A2E;

  /* The highlighter. Ink on it is 8.7 to 1, so the accent words in headings
     and the primary button carry ink text on this. */
  --hi: #FF90BE;

  /* Section grounds, pink and blue in three depths each. Ink clears 11 to 1
     on the deepest, muted clears 7.6. */
  --pink-t: #FFE3EE;
  --pink-t2: #FFD0E1;
  --pink-t3: #FFBBD3;
  --blue-t: #E4EEFF;
  --blue-t2: #D2E2FF;
  --blue-t3: #BFD6FF;

  /* The machines step darker as the ladder climbs. Fills only. */
  --pink2: #E0206E;
  --pink3: #B8145A;

  /* Muted text. 7.24 on the worst ground on the page, which is the center
     of a hot pink blob at 45 percent over the pink section. */
  --muted: #2A2733;
  /* Links, 8.05 on pink-t, 9.68 on white. */
  --link: #153F94;
  /* Small print on the ink footer, 10.8. */
  --on-ink-muted: #C9C5D2;

  --disp: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;

  --measure: 40rem;
  --gap: clamp(3rem, 9vw, 5.5rem);
  --radius: 22px;
  /* Side padding that centers a 40rem column on wide screens and leaves
     1.25rem on a phone, so sections can run full bleed with no wrapper. */
  --side: max(1.25rem, calc((100% - var(--measure)) / 2));

  /* Paper grain. Multiply only darkens, so it adds contrast rather than
     spending it. Kept faint. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
/* Author display rules beat the browser's hidden attribute, so pin it. */
[hidden] { display: none !important; }

html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { display: block; }

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  line-height: 1;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 13vw, 5.75rem); line-height: 0.95; }
h2 { font-size: clamp(2rem, 7.5vw, 3rem); }
h3 { font-size: 1.5rem; font-variation-settings: 'wdth' 100, 'opsz' 24; }

/* The italic words. Display size, so 3 to 1 is enough, and they carry the
   color of the section they sit in. */
h1 em, h2 em { font-style: normal; color: inherit; position: relative; z-index: 0; white-space: nowrap; }
h1 em::after, h2 em::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.05em;
  height: 0.32em;
  /* The stroke sits behind the bottom of the letters, so it counts as their
     ground. Highlighter pink keeps ink at 8.7 there. Hot pink would be 5.5. */
  background: var(--hi);
  border-radius: 0.1em;
  transform: rotate(-1.5deg);
  z-index: -1;
}

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

a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--ink); text-decoration-color: var(--hi); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

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

/* Sections. Full bleed, content centered by --side, grain via ::before. */
section, header.hero, footer.foot {
  position: relative;
  padding: var(--gap) var(--side);
  isolation: isolate;
}
section, header.hero { overflow: hidden; }
section::before, header.hero::before, footer.foot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
}

/* Blobs. Three soft clouds per section, drifting, behind everything. At 45
   percent over the section tint the worst ground under text is the middle of
   the pink blob, and muted ink still clears 7 there. Do not raise the
   opacity without rerunning node _verify/aaa.mjs. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -2;
  animation: drift 26s ease-in-out infinite alternate;
}
.blob.b1 { width: 28rem; height: 28rem; background: var(--pink); top: -8rem; left: -6rem; }
.blob.b2 { width: 22rem; height: 22rem; background: var(--blue); bottom: -6rem; right: -4rem; animation-delay: -9s; }
.blob.b3 { width: 16rem; height: 16rem; background: var(--orange); top: 40%; left: 55%; animation-delay: -17s; }
.gifts .blob.b1 { background: var(--blue); }
.gifts .blob.b2 { background: var(--pink); }
.gifts .blob.b3 { top: 70%; left: 10%; }
.notes .blob.b3 { left: 20%; top: 55%; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6rem, 3rem) scale(1.15); } }
.hero .blob { opacity: 0.3; }
.hero .blob.b1 { left: auto; right: -10rem; top: -10rem; }
.hero .blob.b2 { left: -10rem; right: auto; bottom: -12rem; }
.hero .blob.b3 { left: auto; right: 4rem; top: 55%; }
html.noanim .blob { animation: none; }
.house { background: var(--pink-t); }
.gifts { background: var(--blue-t); }
.notes { background: var(--pink-t); }
.foot { background: var(--ink); color: var(--white); }
.foot h2 { color: var(--white); }
/* White letters need a deep stroke. Berry is 9.1 with white on it. */
.foot h2 em::after { background: #8F0C44; }
.foot .small-print { color: var(--on-ink-muted); }
.foot a { color: var(--white); }

/* Hero. Text left, the keys photo right on wide screens, stacked on a phone. */
.hero { padding-top: clamp(2.5rem, 10vw, 5rem); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.aside { font-weight: 700; color: var(--muted); margin-top: -0.5rem; margin-bottom: 1.25rem; }
.lede { font-size: clamp(1.1rem, 3.8vw, 1.3rem); color: var(--muted); max-width: 32rem; line-height: 1.5; font-weight: 600; }
.hero-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.keys { margin: 0; width: min(60vw, 18rem); justify-self: start; transform: rotate(3deg); }
.keys .frame { border-radius: var(--radius); overflow: hidden; border: 5px solid var(--blue); box-shadow: 6px 6px 0 var(--ink); background: var(--white); }
.keys img { display: block; width: 100%; height: auto; }
.keys figcaption { font-size: 0.95rem; color: var(--muted); margin-top: 0.75rem; font-weight: 600; text-align: center; }

/* Buttons. Pink with ink text, 5.5 to 1. */
.btn {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  line-height: 1.2;
  border: 3px solid var(--ink);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary { background: var(--hi); }
.btn-ghost { background: var(--white); }

/* The house strip. Bleeds to the screen edge on phones so it feels like a
   pile of prints, not a box. Each frame gets its own color. */
.strip {
  list-style: none;
  margin: 1.5rem calc(-1 * var(--side)) 0;
  padding: 0.5rem var(--side) 1.25rem;
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--side);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: 0 0 min(78vw, 22rem); scroll-snap-align: start; }
.strip li:nth-child(4n+1) .frame { border-color: var(--pink); }
.strip li:nth-child(4n+2) .frame { border-color: var(--blue); }
.strip li:nth-child(4n+3) .frame { border-color: var(--orange); }
.strip li:nth-child(4n+4) .frame { border-color: var(--red); }
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}
.shot .frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 5px solid var(--pink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms ease;
}
.shot:hover .frame, .shot:focus-visible .frame { transform: rotate(0deg) scale(1.03); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .plate { width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }
.shot figcaption { font-size: 0.95rem; color: var(--muted); margin-top: 0.75rem; padding: 0 0.25rem; font-weight: 600; }

.strip-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.dots { display: flex; gap: 0.4rem; }
.dots span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); opacity: 0.2; transition: opacity 150ms ease, transform 150ms ease; }
.dots span.on { opacity: 1; transform: scale(1.3); background: var(--pink2); }

/* Placeholder plate, used until real photos land. */
.plate {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(90% 70% at 15% 20%, var(--pink-t), transparent 65%),
    radial-gradient(80% 70% at 90% 85%, var(--blue-t), transparent 65%),
    var(--white);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.5rem;
  text-align: center;
  padding: 1rem;
}

/* The ask. Pink card, the heart of the page. */

.gifts > p { font-size: 1.1rem; }
.gifts > p:first-of-type { font-size: clamp(1.25rem, 4.5vw, 1.5rem); font-weight: 700; line-height: 1.35; }
/* Sub headings inside the one gifts section. */
.sub { font-size: clamp(1.6rem, 5.5vw, 2.1rem); margin-top: var(--gap); margin-bottom: 0.75rem; }

/* Progress. One bar, four marks, a ladder under it. */
.status { color: var(--muted); font-size: 0.95rem; min-height: 1.5em; font-weight: 600; }
.status[hidden] { display: none; }

.pile { margin: 1.5rem 0 0; padding: 1.4rem 1.4rem 1.6rem; border-radius: var(--radius); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--white); }
.pile-nums { margin: 0 0 0.25rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.pile-nums strong { color: var(--ink); font-weight: 800; font-size: 2rem; font-family: var(--disp); line-height: 1; margin-right: 0.35rem; }

.track {
  position: relative;
  height: 1.6rem;
  background: var(--white);
  border-radius: 999px;
  margin: 1.5rem 0 2.6rem;
  border: 3px solid var(--ink);
}
.fill {
  height: 100%;
  background: var(--pink);
  border-radius: 999px;
  transition: width 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.marks { position: absolute; inset: 0; }
/* Each mark sits on its threshold, its color matching its rung. */
.mark {
  position: absolute;
  top: 50%;
  width: 2rem;
  height: 2rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font: 800 0.9rem var(--disp);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 120ms ease;
}
.mark:hover { transform: translate(-50%, -50%) scale(1.15); }
.mark[data-rung="grinder"] { width: 1.1rem; height: 1.1rem; background: var(--blue); box-shadow: none; }
.mark.reached { background: var(--ink); color: var(--white); }
.mark[data-rung="solo"].reached { border-color: var(--pink); }
.mark[data-rung="jump"].reached { border-color: var(--pink2); }
.mark[data-rung="bianca"].reached { border-color: var(--pink3); }
/* The last mark is at 100 percent, keep it inside the rounded end. */
.mark[data-rung="bianca"] { transform: translate(-70%, -50%); }
.mark[data-rung="bianca"]:hover { transform: translate(-70%, -50%) scale(1.15); }

.verdict { margin: 0; font-weight: 700; font-size: 1.1rem; }
.thanks { margin: 0.35rem 0 0; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.thanks:empty { display: none; }

.ladder-intro { color: var(--muted); font-weight: 600; margin-bottom: 1.25rem; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rung {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.75rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.rung:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.rung img { width: 4.25rem; height: 4.25rem; object-fit: cover; border-radius: 12px; background: var(--white); }
.rung-text { display: grid; gap: 0.1rem; min-width: 0; }
.rung-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.rung-name { font-family: var(--disp); font-weight: 800; font-size: 1.2rem; line-height: 1.1; }
.rung-at { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.rung-state { font-weight: 800; font-size: 0.85rem; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); }
li[data-rung="grinder"] .rung { background: var(--blue-t3); }
li[data-rung="solo"] .rung { background: var(--pink-t); }
li[data-rung="jump"] .rung { background: var(--pink-t2); }
li[data-rung="bianca"] .rung { background: var(--pink-t3); }
li.reached .rung-state { background: var(--ink); color: var(--white); }
li.reached .rung-state::before { content: '\2713  '; }

/* Tier popup */
.tier {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 0;
  width: min(100vw - 2rem, 44rem);
  max-height: calc(100dvh - 2rem);
  background: var(--white);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.tier::backdrop { background: rgba(22, 19, 31, 0.6); }
.tier .lb-close { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; width: 2.5rem; height: 2.5rem; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.tier .lb-close:hover { background: var(--hi); }
.tier-body { display: grid; }
.tier img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 3px solid var(--ink); }
.tier[data-rung="grinder"] img { background: var(--blue-t); }
.tier[data-rung="solo"] img { background: var(--pink-t); }
.tier[data-rung="jump"] img { background: var(--pink-t2); }
.tier[data-rung="bianca"] img { background: var(--pink-t3); }
.tier-text { padding: 1.4rem; }
.tier-rung { margin: 0 0 0.25rem; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.tier-text h3 { font-size: 1.9rem; margin-bottom: 0.25rem; }
.tier-text .price { margin-bottom: 1rem; font-size: 1.15rem; }
.tier-text p { font-size: 1rem; }
.tier-where { margin-top: 1rem; font-size: 0.95rem; }

/* Contribute */

.pay { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.75rem; }
.or { margin-top: 1.75rem; font-weight: 700; }

/* The card form. Chips for the amount, a name, a checkbox. */
.pay-form { display: grid; gap: 0.35rem; margin-top: 1rem; }
.pay-form fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; min-width: 0; }
.pay-form legend { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.5rem; padding: 0; }
.pay-form > label, .pay-form .other label { font-weight: 700; font-size: 0.95rem; margin-top: 0.75rem; }
.pay-form input[type="text"], .pay-form input[type="number"] {
  font: inherit; color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: 14px; padding: 0.75rem 0.9rem; width: 100%;
}
.pay-form input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: block; text-align: center; padding: 0.8rem 0.5rem; border-radius: 999px;
  border: 3px solid var(--ink); background: var(--white); font-weight: 800; font-family: var(--disp); cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.chip input:checked + span { background: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
.other { display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; margin-top: 0.75rem; }
.check input { width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--ink); flex: none; }
.thanks-banner { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 0.9rem 1.1rem; font-weight: 700; box-shadow: 4px 4px 0 var(--ink); margin: 0 0 1.25rem; }
#pay-status:empty { display: none; }
.pay .btn { text-align: center; font-size: 1.15rem; padding: 1.1rem 1rem; }
.note { font-size: 0.95rem; color: var(--muted); font-weight: 600; }

/* Love notes */
.notes form { display: grid; gap: 0.35rem; margin-top: 1.5rem; }
.notes label { font-weight: 700; font-size: 0.95rem; margin-top: 0.75rem; }
.notes input, .notes textarea {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.notes textarea { resize: vertical; min-height: 8rem; }
.notes input:focus-visible, .notes textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.notes .hero-links { margin-top: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#note-status:empty { display: none; }

/* Footer */
.foot { padding-bottom: clamp(3rem, 12vw, 6rem); }
.small-print { font-size: 0.85rem; margin-top: 1.5rem; }

/* Lightbox */
.lb {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--ink);
  color: var(--white);
  display: none;
  place-items: center;
}
.lb[open] { display: grid; }
.lb::backdrop { background: rgba(22, 19, 31, 0.94); }
.lb figure { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3.5rem 0.75rem 1.25rem; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.lb figcaption { padding-top: 0.75rem; font-size: 1rem; text-align: center; font-weight: 600; }
.lb-count { color: var(--pink-t); }
.lb button {
  position: absolute;
  background: var(--white);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lb button:hover { background: var(--hi); }
.lb-close { top: 0.75rem; right: 0.75rem; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 2.25rem; }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }

/* Wider screens */
@media (min-width: 640px) {
  .tier-body { grid-template-columns: 2fr 3fr; }
  .tier img { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 3px solid var(--ink); }
  .strip { padding-top: 0.75rem; }
  .strip li { flex-basis: 20rem; }
  .hero-grid { grid-template-columns: 1fr auto; gap: 2.5rem; }
  .pay { grid-template-columns: repeat(2, 1fr); max-width: 24rem; }
  .keys { justify-self: end; width: 12.5rem; }
  .hero h1 { font-size: clamp(3rem, 6.5vw, 4.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob { animation: none; }
  .fill, .btn, .shot .frame, .mark, .rung, .dots span { transition: none; }
  .keys { transform: none; }
  .shot .frame { transform: none; }
}