:root { --cream:#FFF9F3; --white:#fff; --coral:#F36D4A; --coral-deep:#B94A2C; --blush:#F5C8C3; --brown:#292422; --soft:#6B635E; --line:#EADFD4; }
* { box-sizing: border-box; }
body { margin:0; background:var(--cream); color:var(--brown); font:400 17px/1.5 "DM Sans", system-ui, sans-serif; -webkit-text-size-adjust:100%; }
main { max-width:520px; margin:0 auto; padding:20px 16px 40px; }
.wordmark { font:600 1.25rem "Fraunces", Georgia, serif; color:var(--brown); text-decoration:none; }
.card { margin-top:18px; background:var(--white); border-radius:28px; padding:20px; box-shadow:0 8px 30px rgba(41,36,34,.06); }
.photo { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 35%; border-radius:20px; background:var(--blush); }
h1 { margin:22px 0 10px; font:500 clamp(2rem,9vw,2.7rem)/1.1 "Fraunces", Georgia, serif; letter-spacing:-.01em; }
.lede { margin:0 0 6px; color:var(--soft); }
.tag { display:inline-block; margin:0 0 6px; padding:4px 12px; border-radius:999px; background:var(--blush); color:var(--brown); font-weight:700; font-size:.82rem; }
form { display:grid; gap:12px; margin-top:20px; }
form[hidden] { display:none; }
label.field { font-weight:700; }
input[type=email] { width:100%; min-height:56px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--brown); font:inherit; }
input:focus-visible, button:focus-visible { outline:3px solid var(--coral-deep); outline-offset:2px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--soft); }
.consent input { margin-top:3px; width:20px; height:20px; flex:none; accent-color:var(--coral-deep); }
button { min-height:58px; border:0; border-radius:999px; background:var(--coral); color:var(--brown); font:700 1.05rem "DM Sans", system-ui, sans-serif; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.form-trap { position:absolute; left:-9999px; }
.status, .form-feedback { margin:0; font-size:.92rem; color:var(--soft); }
.form-feedback[data-state=success] { color:#2F6B3A; font-weight:700; font-size:1.05rem; }
.form-feedback[data-state=error] { color:var(--coral-deep); font-weight:700; }
.status:has(+ form:not([hidden])) { display:none; }
.fine { margin:16px 4px 0; font-size:.8rem; color:var(--soft); text-align:center; }
.fine a { color:var(--coral-deep); }

[hidden] { display:none !important; }

/* One-page form: questions as tap tiles, then email */
.join-form { gap:14px; margin-top:22px; }
.q { margin:0; padding:18px 16px; border:0; border-radius:22px; background:var(--cream); display:grid; gap:10px; scroll-margin-top:16px; transition:box-shadow .2s ease; }
.q legend { float:left; width:100%; padding:0; font:500 1.3rem/1.2 "Fraunces", Georgia, serif; }
.q legend + * { clear:both; }
.num { display:block; margin-bottom:4px; font:700 .75rem/1 "DM Sans", system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-deep); }
.opt-tag { font:400 .85rem "DM Sans", system-ui, sans-serif; color:var(--soft); }
.q.missing { box-shadow:0 0 0 2px var(--coral-deep); }
.q.missing::after { content:"Please answer this one."; color:var(--coral-deep); font-weight:700; font-size:.88rem; }
h2 { margin:4px 0 0; font:500 clamp(1.6rem,7vw,2rem)/1.15 "Fraunces", Georgia, serif; letter-spacing:-.01em; }
.hint { margin:-4px 0 2px; font-size:.88rem; color:var(--soft); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tiles.compact { grid-template-columns:1fr 1fr; }
.tile { position:relative; min-height:84px; padding:12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
  border:2px solid var(--line); border-radius:18px; background:var(--white); color:var(--brown); font:700 .95rem/1.25 "DM Sans", system-ui, sans-serif;
  cursor:pointer; transition:transform .12s ease, border-color .15s ease, background .15s ease; -webkit-tap-highlight-color:transparent; }
.tiles.compact .tile { min-height:52px; align-items:center; text-align:center; }
.tile input { position:absolute; opacity:0; width:1px; height:1px; }
.tile .icon { font-size:1.6rem; line-height:1; }
.tile:active { transform:scale(.97); }
.tile:has(input:checked) { border-color:var(--coral); background:#FDEEE8; }
.tile:has(input:checked)::after { content:"✓"; position:absolute; top:8px; right:11px; color:var(--coral-deep); font-weight:700; }
.tile:has(input:focus-visible) { outline:3px solid var(--coral-deep); outline-offset:2px; }
.tile:has(input:disabled) { opacity:.45; cursor:default; }
textarea, input[type=text] { width:100%; min-height:54px; padding:14px 18px; border:2px solid var(--line); border-radius:18px; background:var(--white);
  color:var(--brown); font:inherit; }
textarea { min-height:96px; resize:none; }
textarea:focus-visible, input[type=text]:focus-visible, input[type=email]:focus-visible { outline:none; border-color:var(--coral); }
.q-email input[type=email] { border-width:2px; }
.done { padding:8px 0 4px; display:grid; gap:12px; }
.heart { font-size:3rem; line-height:1; animation:pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform:scale(.3); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .heart { animation:none; } .tile, .q { transition:none; } }
@media (max-width:340px) { .tiles { grid-template-columns:1fr; } }
.remove { margin:14px 4px 0; font-size:.88rem; color:var(--soft); }
.remove summary { cursor:pointer; text-align:center; text-decoration:underline; text-underline-offset:3px; min-height:44px; line-height:44px; }
.remove form { margin-top:8px; }
.remove input[type=email] { min-height:52px; }
.ghost { background:var(--white); border:2px solid var(--line); }