/* 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; }
header.hero { background: var(--pink-t); }
.house { background: var(--white); }
.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; }
.shoutout { margin-top: 1.75rem; font-size: 0.95rem; color: var(--muted); font-weight: 600; max-width: 32rem; }
/* Link blue falls to 6 on a blob over the pink hero, so these are ink with a pink line. */
.shoutout a { color: var(--ink); font-weight: 800; text-decoration-color: var(--pink); }
.shoutout a:hover { text-decoration-color: var(--ink); }
.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 grid. Two across on a phone, the first photo double size on
   wider screens. Six show, the lightbox has all of them. */
.grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.grid li:nth-child(4n+1) .frame { border-color: var(--pink); }
.grid li:nth-child(4n+2) .frame { border-color: var(--blue); }
.grid li:nth-child(4n+3) .frame { border-color: var(--orange); }
.grid li:nth-child(4n+4) .frame { border-color: var(--red); }
.shot {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}
.shot .frame {
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 4px solid var(--pink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 200ms ease;
}
.shot:hover .frame, .shot:focus-visible .frame { transform: scale(1.02); }
.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; }

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


/* 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; }
.notes label .muted { font-weight: 600; }

/* The board. Cards in columns, each a little crooked, like paper on cork. */
.board-status { color: var(--muted); font-weight: 600; margin: 2rem 0 0; }
.board-status[hidden] { display: none; }
.board { list-style: none; margin: 2rem 0 0; padding: 0; columns: 1; column-gap: 1rem; }
.pin {
  break-inside: avoid;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 1rem 1.1rem 0.9rem;
  margin: 0 0 1.1rem;
  transform: rotate(var(--tilt, 0deg));
}
.pin-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; margin: 0 0 0.35rem; font-size: 0.95rem; }
.pin-head strong { font-family: var(--disp); font-weight: 800; font-size: 1.1rem; }
.pin-head span { color: var(--muted); font-weight: 600; white-space: nowrap; }
.pin-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pin-acts { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.heart, .reply {
  font: 700 0.95rem var(--body);
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  line-height: 1.2;
}
.heart span:first-child { font-size: 1.1em; }
.heart.on { background: var(--hi); }
.heart:hover, .reply:hover { background: var(--pink-t); }
.heart.on:hover { background: var(--hi); }
.thread { list-style: none; margin: 0.75rem 0 0; padding: 0.6rem 0 0; border-top: 2px solid var(--pink-t2); display: grid; gap: 0.4rem; font-size: 0.95rem; }
.thread:empty { display: none; }
.thread li { overflow-wrap: anywhere; }
.thread strong { font-weight: 800; }
.comment-form { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid var(--pink-t2); }
.comment-form label { display: grid; gap: 0.25rem; font-weight: 700; font-size: 0.9rem; }
.comment-form input, .comment-form textarea { font: inherit; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 10px; padding: 0.5rem 0.7rem; width: 100%; }
.comment-form textarea { resize: vertical; }
.comment-form .hero-links { margin-top: 0.25rem; gap: 0.5rem; }
.comment-form [role=status]:empty { display: none; }
.btn-small { padding: 0.55rem 1rem; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--ink); }

/* Gifts, folded. The summary is the whole heading. */
.gifts { padding-top: clamp(3rem, 8vw, 4.5rem); padding-bottom: clamp(3rem, 8vw, 4.5rem); }
.gifts details { border: 3px solid var(--ink); border-radius: var(--radius); background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
.gifts summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.gifts summary::-webkit-details-marker { display: none; }
.gifts summary h2 { margin: 0; font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
.fold-hint { font: 800 1.6rem var(--disp); line-height: 1; flex: none; transition: transform 200ms ease; }
.gifts details[open] .fold-hint { transform: rotate(45deg); }
.gifts summary:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; border-radius: var(--radius); }
.fold-body { padding: 0 1.25rem 1.25rem; }

/* 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) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .grid li:first-child { grid-column: span 2; grid-row: span 2; }
  .board { columns: 2; }
  .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 7; 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, .fold-hint { transition: none; }
  .pin { transform: none; }
  .keys { transform: none; }
  .shot .frame { transform: none; }
}