/* 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;


  /* 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; }
.notes .blob.b1 { background: var(--blue); }
.notes .blob.b2 { background: var(--pink); }
.notes .blob.b3 { top: 70%; left: 10%; }
.gifts .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); }
.notes { background: var(--blue-t); }
.gifts { 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); }
/* One column on a phone, in source order: heading, aside, the keys photo,
   then the paragraphs. On wide screens the photo moves to a second column
   and spans every row, so the text stays in one block beside it. */
.hero-grid { display: grid; gap: 0; align-items: start; }
.hero-grid > * { min-width: 0; }
.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.75rem 0 2rem 0.5rem; 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(--pink); }

/* 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;
}

/* Gifts. Plain copy, then the form. */
.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; }

/* 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. One amount box with a dollar sign, a name. */
.pay-form { display: grid; gap: 0.35rem; margin-top: 1.75rem; max-width: 24rem; }
.pay-form > 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; }
.money-field { position: relative; }
.money-field span { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); font-weight: 800; font-family: var(--disp); font-size: 1.2rem; }
.pay-form .money-field input { padding-left: 2.2rem; font-weight: 700; font-size: 1.2rem; }
.money-field input::-webkit-outer-spin-button, .money-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money-field input { -moz-appearance: textfield; appearance: textfield; }
.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: 1.5rem 0 0; }
#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) {
  .strip { padding-top: 0.75rem; }
  .strip li { flex-basis: 20rem; }
  .hero-grid { grid-template-columns: 1fr auto; column-gap: 2.5rem; }
  .hero-grid > * { grid-column: 1; }
  .hero-grid .keys { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
  .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; }
  .btn, .shot .frame, .dots span { transition: none; }
  .keys { transform: none; }
  .shot .frame { transform: none; }
}