/* FORM picker. A bold cream card on the sienna panel: ink text, sienna
   selections, so the choosing is the most visible thing on the page. */
.fp { --fp-paper: var(--paper, #f6f2e8); --fp-ink: var(--ink, #1f1a15); --fp-soft: var(--ink-soft, #4a4540); --fp-mute: var(--ink-mute, #6b655e);
  --fp-rule: var(--rule, #d4cdb8); --fp-accent: var(--accent, #b84e2c); --fp-accent-dk: var(--accent-dk, #8e3a20);
  position: relative; background: #fffdf7; color: var(--fp-ink); font-family: var(--f-body, Georgia, serif); scroll-margin-top: 90px;
  padding: clamp(22px, 4vw, 44px); border-top: 6px solid var(--fp-ink);
  margin-top: 48px;
  box-shadow: 0 30px 70px -20px rgba(31,26,21,.55), 0 0 0 1px rgba(31,26,21,.06); }
.fp::before { content: "Pick up to 3 · Free"; position: absolute; top: -6px; right: clamp(18px, 4vw, 44px); transform: translateY(-100%);
  background: var(--fp-ink); color: var(--fp-paper); font-family: var(--f-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; padding: 8px 12px; }
.fp [hidden] { display: none !important; }
:where(.fp) button { font: inherit; cursor: pointer; }
.fp-label { display: block; font-family: var(--f-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fp-soft); margin: 0 0 10px; }

/* slots */
.fp-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fp-slot { width: 100%; min-height: 70px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px;
  background: var(--fp-paper); color: var(--fp-ink); border: 2px dashed var(--fp-accent); transition: background .25s, border-color .25s; }
.fp-slot:hover { background: #f1eadb; }
.fp-slot-n { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--fp-accent); color: var(--fp-accent); display: grid; place-items: center;
  font-family: var(--f-display, serif); font-style: italic; font-size: 17px; }
.fp-slot-name { flex: 1; font-family: var(--f-body, serif); font-style: italic; font-size: 15px; line-height: 1.25; color: var(--fp-mute); }
.fp-slot-x { opacity: 0; font-family: var(--f-ui, sans-serif); font-size: 18px; }
.fp-slot.is-filled { background: var(--fp-accent); color: var(--fp-paper); border: 2px solid var(--fp-accent); animation: fp-pop .35s var(--ease, ease); }
.fp-slot.is-filled .fp-slot-n { background: var(--fp-paper); border-color: var(--fp-paper); color: var(--fp-accent); }
.fp-slot.is-filled .fp-slot-name { font-family: var(--f-ui, sans-serif); font-style: normal; font-weight: 700; font-size: 15px; color: var(--fp-paper); }
.fp-slot.is-filled .fp-slot-x { opacity: .85; }
@keyframes fp-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.fp-status { margin: 12px 0 28px; font-style: italic; font-size: 15px; color: var(--fp-soft); }
.fp-status.is-flash { animation: fp-shake .45s; color: var(--fp-accent-dk); }
@keyframes fp-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* search */
.fp-search { margin-bottom: 26px; }
.fp-q { width: 100%; box-sizing: border-box; padding: 17px 18px 17px 46px; font-family: var(--f-ui, sans-serif); font-size: 16px; color: var(--fp-ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b84e2c' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") 16px 50% no-repeat;
  border: 2px solid var(--fp-ink); border-radius: 0; -webkit-appearance: none; appearance: none; }
.fp-q::placeholder { color: var(--fp-mute); }
.fp-q:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 2px; }
.fp-try { margin-top: 10px; font-style: italic; font-size: 14px; color: var(--fp-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fp-try button { background: none; border: 0; border-bottom: 1.5px solid var(--fp-accent); color: var(--fp-accent-dk); padding: 0 2px; font-style: normal;
  font-family: var(--f-ui, sans-serif); font-size: 13px; font-weight: 600; margin-left: 4px; }
.fp-results { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fp-results:empty { margin: 0; }
.fp-miss { width: 100%; margin: 4px 0 0; font-size: 16px; }
.fp-miss-sub { width: 100%; margin: 0; font-size: 13px; font-style: italic; color: var(--fp-mute); }
.fp-ask { background: var(--fp-ink); color: var(--fp-paper); border: 0; padding: 10px 14px; font-family: var(--f-ui, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* chips */
.fp-chip, .fp-vote { background: var(--fp-paper); color: var(--fp-ink); border: 1.5px solid var(--fp-rule); padding: 9px 13px;
  font-family: var(--f-ui, sans-serif); font-size: 14px; line-height: 1.2; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.fp-chip:hover, .fp-vote:hover { border-color: var(--fp-accent); color: var(--fp-accent-dk); }
.fp-chip[aria-pressed="true"], .fp-vote[aria-pressed="true"] { background: var(--fp-accent); color: var(--fp-paper); border-color: var(--fp-accent); font-weight: 700; }
.fp-chip[aria-pressed="true"]::before, .fp-vote[aria-pressed="true"]::before { content: "✓ "; }
.fp-chip.is-capped { opacity: .4; }
.fp-chip:focus-visible, .fp-slot:focus-visible, .fp-drawer-btn:focus-visible, .fp-vote:focus-visible, .fp-try button:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 2px; }

/* browse */
.fp-browse { border-top: 1px solid var(--fp-rule); padding-top: 22px; margin-bottom: 30px; }
.fp-drawer-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding: 18px 22px;
  background: var(--fp-ink); color: var(--fp-paper); border: 0; text-align: left; }
.fp-drawer-btn[aria-expanded="true"] { background: var(--fp-accent); color: var(--fp-paper); }
.fp-drawer-name { font-family: var(--f-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.fp-drawer-meta { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: .85; }
.fp-drawer-meta::after { content: " ▾"; }
.fp-drawer-btn[aria-expanded="true"] .fp-drawer-meta::after { content: " ▴"; }
.fp-drawer { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 18px; }
.fp-votes { margin-top: 14px; }
.fp-votes summary { cursor: pointer; font-family: var(--f-ui, sans-serif); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-soft); }
.fp-vote-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.fp-requests { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fp-requests .fp-label { width: 100%; margin: 0; }
.fp-req { display: inline-flex; align-items: center; gap: 6px; background: var(--fp-paper); border: 1.5px solid var(--fp-ink); padding: 5px 5px 5px 12px; font-family: var(--f-ui, sans-serif); font-size: 13px; }
.fp-req-x { background: none; border: 0; color: var(--fp-ink); font-size: 16px; padding: 0 4px; }
.fp-req-note { font-style: italic; font-size: 13px; color: var(--fp-mute); }

/* email */
.fp-form { border-top: 1px solid var(--fp-rule); padding-top: 24px; transition: opacity .35s; }
.fp-form.is-locked { opacity: .45; }
.fp-form.is-locked .fp-label, .fp-form.is-locked .fp-email-row { pointer-events: none; }
.fp-lock-note { display: none; margin: 10px 0 0; font-style: italic; font-size: 14px; }
.fp-form.is-locked .fp-lock-note { display: block; }
.fp-ready { margin: 0; font-family: var(--f-display, serif); font-style: italic; font-size: 28px; line-height: 1.2; color: var(--fp-accent); }
.fp-ready:empty { display: none; }
.fp-form.is-ready .fp-ready { margin-bottom: 14px; animation: fp-rise .5s var(--ease, ease); }
@keyframes fp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fp-email-row { display: flex; gap: 10px; }
.fp-email { flex: 1; min-width: 0; padding: 18px; font-family: var(--f-ui, sans-serif); font-size: 16px; color: var(--fp-ink); background: #fff; border: 2px solid var(--fp-ink); border-radius: 0; }
.fp-email:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 2px; }
.fp-form.is-ready .fp-email { border-color: var(--fp-accent); box-shadow: 0 0 0 3px rgba(184,78,44,.25); }
.fp-send { flex: none; padding: 18px 26px; background: var(--fp-accent); color: var(--fp-paper); border: 0; font-family: var(--f-ui, sans-serif); font-weight: 700;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.fp-send:hover:not(:disabled) { background: var(--fp-accent-dk); }
.fp-send:disabled { cursor: default; background: var(--fp-mute); }
.fp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fp-error { margin: 12px 0 0; padding: 12px 14px; background: var(--fp-ink); color: var(--fp-paper); font-family: var(--f-ui, sans-serif); font-size: 14px; }
.fp-promise { margin: 16px 0 4px; font-family: var(--f-ui, sans-serif); font-size: 13px; font-weight: 600; color: var(--fp-ink); }
.fp-legal { margin: 0; font-size: 13px; font-style: italic; color: var(--fp-soft); }
.fp-legal a, .fp-done a { color: var(--fp-accent-dk); text-underline-offset: 3px; }

/* after signup */
.fp-done { outline: none; }
.fp-done-kicker { font-family: var(--f-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fp-accent); margin: 0 0 8px; }
.fp-done-head { font-family: var(--f-display, serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 22px; }
.fp-steps { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: s; }
.fp-steps li { counter-increment: s; position: relative; padding: 0 0 16px 46px; font-size: 17px; line-height: 1.5; }
.fp-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--fp-accent); color: var(--fp-paper);
  display: grid; place-items: center; font-family: var(--f-display, serif); font-style: italic; font-size: 17px; }
.fp-addr { font-family: var(--f-ui, sans-serif); font-weight: 700; word-break: break-all; }
.fp-mast { display: grid; gap: 6px; background: var(--fp-paper); color: var(--fp-ink); padding: 20px 22px; margin: 0 0 26px; border-top: 4px solid var(--fp-ink); }
.fp-mast-name { font-family: var(--f-display, serif); font-size: 32px; letter-spacing: .02em; }
.fp-mast-date, .fp-mast-week { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-accent-dk); }
.fp-done-sub { font-family: var(--f-ui, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 18px 0 6px; }
.fp-done p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.fp-share-row { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fp-share, .fp-again { background: var(--fp-accent); color: var(--fp-paper); border: 0; padding: 14px 18px; font-family: var(--f-ui, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.fp-share-note { font-size: 14px; font-style: italic; word-break: break-all; }
.fp-help { margin-top: 22px; padding: 16px 18px; border: 1.5px dashed var(--fp-accent); }

@media (max-width: 640px) {
  .fp { padding: 22px 18px; margin: 0 -6px; }
  .fp-slots { grid-template-columns: 1fr; gap: 8px; }
  .fp-slot { min-height: 56px; }
  .fp-email-row { flex-direction: column; }
  .fp-send { padding: 18px; }
  .fp-drawer-btn { padding: 16px 18px; }
  .fp-ready { font-size: 23px; }
}

/* the reel */
.reel { position: relative; height: 340vh; background: var(--ink, #1f1a15); color: var(--paper, #f6f2e8); }
.reel-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 24px; overflow: hidden; }
.reel-kicker { font-family: var(--f-ui, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .7; margin: 0 0 28px; }
.reel-line { margin: 0; font-family: var(--f-display, serif); font-weight: 400; font-size: clamp(40px, 8.5vw, 124px); line-height: 1.02; letter-spacing: -.01em; max-width: 14ch; }
.reel-name { display: inline-block; color: var(--accent-lt, #d47753); font-style: italic; }
.reel-name.is-in { animation: reel-in .45s var(--ease, ease); }
.reel-name em { font-style: italic; color: var(--accent-lt, #d47753); }
@keyframes reel-in { from { opacity: 0; transform: translateY(.18em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.reel-sub { margin: 30px 0 0; font-family: var(--f-body, serif); font-style: italic; font-size: 19px; opacity: 0; transition: opacity .5s; }
.reel.is-yours .reel-sub { opacity: .9; }
.reel-sub a { color: inherit; text-underline-offset: 4px; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(246,242,232,.12); }
.reel-progress span { display: block; height: 100%; background: var(--accent, #b84e2c); transform-origin: left; transform: scaleX(0); }
.reel-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-family: var(--f-ui, sans-serif); font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; opacity: .75; transition: opacity .4s; }
.reel-cue::after { content: "↓"; display: block; text-align: center; font-size: 18px; margin-top: 6px; animation: reel-bob 1.6s ease-in-out infinite; }
@keyframes reel-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.reel.is-started .reel-cue, .reel.is-static .reel-cue, .reel.is-yours .reel-cue { opacity: 0; }
.reel.is-static { height: auto; }
.reel.is-static .reel-pin { position: static; height: auto; padding: 110px 24px; }
.reel.is-static .reel-sub { opacity: .9; }
@media (max-width: 640px) { .reel { height: 240vh; } .reel-sub { font-size: 17px; } }

/* sticky button */
.sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 40; background: var(--accent, #b84e2c); color: var(--paper, #f6f2e8); text-decoration: none;
  font-family: var(--f-ui, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 15px 20px;
  box-shadow: 0 10px 30px rgba(31,26,21,.25); transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease, ease), opacity .3s; }
.sticky-cta.is-shown { transform: none; opacity: 1; }
.sticky-cta.is-shown.is-over-reel { transform: translateY(140%); opacity: 0; }
.sticky-cta:focus-visible { outline: 2px solid var(--ink, #1f1a15); outline-offset: 3px; }
@media (max-width: 640px) { .sticky-cta { left: 16px; right: 16px; bottom: 14px; text-align: center; } }

/* phones: drawer labels and chips sized to fit the narrowest screens */
@media (max-width: 420px) {
  .fp-drawer-btn { flex-wrap: wrap; row-gap: 4px; }
  .fp-drawer-meta { font-size: 10px; letter-spacing: .08em; white-space: normal; }
  .fp-chip, .fp-vote { font-size: 13.5px; padding: 9px 11px; }
  .fp { padding: 20px 16px; }
  .fp-slot-name { font-size: 14px; }
  .reel-line { font-size: clamp(40px, 12vw, 64px); }
  .reel-sub, .reel-about { padding: 0 6px; }
}