/* Public pages (home, start a shortlist): a forest band over cream paper. Brand foundations live in staymies.css. */
:root {
  --forest: var(--brand-forest);
  --cream: var(--brand-cream);
  --meadow: var(--brand-meadow);
  --paper: #FBF9F3;
  --ink: #1B2E26;
  --muted: #5D6A60;
  --muted-on-forest: #BFCDBB;
  --line: #E3DCCB;
  --forest-line: #ffffff24;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, input:focus-visible + label { outline: 3px solid #52744B; outline-offset: 3px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.eyebrow, .kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.quiet { margin-top: 12px; font-size: 13px; color: var(--muted); }

.forest-band { background: var(--forest); color: var(--cream); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--forest-line); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.site-nav a:not(.pill) { text-decoration: none; color: var(--muted-on-forest); }
.site-nav a:not(.pill):hover { color: var(--cream); }
.banner { margin-top: 24px; padding: 14px 18px; border: 1px solid #b7c79a; border-radius: 12px; background: #eef3dc; font-size: 15px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; padding: 72px 0 88px; }
.kicker { color: var(--meadow); margin-bottom: 26px; }
.hero h1 { font: 400 clamp(52px, 6vw, 84px)/1.1 var(--display); letter-spacing: -.025em; }
.hero h1 em { font-style: normal; font-weight: 400; color: var(--meadow); }
.lede { max-width: 30em; margin-top: 28px; font-size: 18px; line-height: 1.65; color: var(--muted-on-forest); }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; }
.text-link { font-size: 15px; font-weight: 600; }
.social { display: flex; align-items: center; gap: 16px; margin-top: 44px; font-size: 14px; line-height: 1.45; color: var(--muted-on-forest); }
.social strong { color: var(--cream); font-weight: 600; }
.hero-art { position: relative; padding: 0 0 36px 28px; }
.arch { position: relative; overflow: hidden; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 20px 20px; background: #163629; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(#0e231b00, #0e231bcc); }
.arch figcaption { position: absolute; left: 28px; right: 28px; bottom: 62px; z-index: 1; font: 400 30px/1.1 var(--display); color: #fff; text-align: right; }
.arch figcaption span { display: block; margin-bottom: 6px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.message { position: absolute; left: 0; bottom: 0; width: min(360px, 86%); display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); color: var(--ink); border-radius: 16px; box-shadow: 0 18px 40px #0b1c1540, 0 2px 6px #0b1c1520; }
.message-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--meadow); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.message p { font-size: 15px; line-height: 1.35; }
.message .message-meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.message-meta strong { color: var(--ink); }
.message-react { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 600; color: #9b5a45; white-space: nowrap; }
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 26px 0 30px; border-top: 1px solid var(--forest-line); font-size: 15px; color: var(--muted-on-forest); scroll-margin-top: 20px; }
.promise b { margin-right: 12px; font: 400 15px var(--display); color: var(--meadow); }

/* Sections */
.section { padding: 96px 0 0; }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head .eyebrow, .consensus .eyebrow { color: #52744B; margin-bottom: 14px; }
.section-head h2 { font: 400 clamp(34px, 3.8vw, 48px)/1.12 var(--display); letter-spacing: -.02em; color: var(--forest); }
.section-head p:last-child { margin-top: 14px; color: var(--muted); }

/* Example vote card (radio buttons, no script) */
.voting-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; }
.vote-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px #1d433510, 0 20px 40px -28px #1d433540; }
.vote-photo { position: relative; aspect-ratio: 16 / 8.5; }
.vote-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 18px; right: 18px; padding: 6px 12px; border-radius: 999px; background: #ffffffe6; font-size: 12px; font-weight: 600; }
.vote-body { padding: 28px 32px 30px; }
.place { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vote-body h3 { margin-top: 8px; font: 400 36px/1.15 var(--display); letter-spacing: -.015em; color: var(--forest); }
.facts { margin-top: 10px; font-size: 15px; color: var(--muted); }
.price { margin-top: 4px; font-size: 15px; font-weight: 600; }
.vote { margin-top: 26px; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); }
.vote legend { float: left; width: 100%; margin-bottom: 14px; padding: 0; font-weight: 600; }
.vote-options { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vote-options input { position: absolute; opacity: 0; pointer-events: none; }
.opt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; min-height: 64px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.opt svg { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--muted); }
.opt strong { font-size: 16px; line-height: 1.2; }
.opt small { grid-column: 2; font-size: 13px; line-height: 1.3; color: var(--muted); }
.opt:hover { border-color: #b9b19c; }
input:checked + .opt.yes { background: var(--forest); border-color: var(--forest); color: var(--meadow); }
input:checked + .opt.maybe { background: var(--brand-sand); border-color: #cfb88c; color: #4a3b1f; }
input:checked + .opt.no { background: var(--brand-clay-soft); border-color: var(--brand-clay); color: #6f2f1f; }
input:checked + .opt.yes small, input:checked + .opt.yes svg { color: #cfdcb0; }
input:checked + .opt.maybe small, input:checked + .opt.maybe svg, input:checked + .opt.no small, input:checked + .opt.no svg { color: inherit; }
.vote-status { min-height: 24px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.vote-status span { display: none; }
.vote:not(:has(:checked)) .s-none, .vote:has(#example-yes:checked) .s-yes, .vote:has(#example-maybe:checked) .s-maybe, .vote:has(#example-no:checked) .s-no { display: inline; }
.vote:has(:checked) .vote-status { color: var(--ink); font-weight: 500; }
.consensus li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.consensus b { color: var(--ink); font-weight: 600; }
.consensus .pill { margin-top: 20px; }

.photo-credit { margin-top: 48px; font-size: 12px; color: var(--muted); }
.photo-credit a { color: inherit; }
.footer-band { margin-top: 96px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 32px 0 40px; font-size: 13px; color: var(--muted-on-forest); }
.site-footer .wordmark { font-size: 24px; }

@media (max-width: 1020px) {
  .hero { gap: 40px; }
  .voting-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 40px); }
  .site-header { padding: 20px 0; }
  .site-nav a:not(.pill) { display: none; }
  .wordmark { font-size: 26px; }
  .hero { grid-template-columns: 1fr; padding: 44px 0 56px; gap: 44px; }
  .hero h1 { font-size: clamp(44px, 12.5vw, 64px); }
  .lede { font-size: 17px; }
  .hero-art { padding: 0 0 44px 0; }
  .arch { aspect-ratio: 4 / 4.4; }
  .arch figcaption { font-size: 26px; left: 22px; right: 22px; bottom: 58px; }
  .message { left: 14px; width: calc(100% - 28px); }
  .promise { grid-template-columns: 1fr; gap: 10px; }
  .section { padding-top: 72px; }
  .vote-body { padding: 22px 20px 24px; }
  .vote-body h3 { font-size: 34px; }
  .vote-options { gap: 8px; }
  .opt { grid-template-columns: 1fr; justify-items: center; row-gap: 2px; min-height: 84px; padding: 12px 6px; text-align: center; }
  .opt svg { grid-row: auto; }
  .opt small { grid-column: auto; font-size: 12px; }
  .footer-band { margin-top: 72px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .pill-ghost { padding: 8px 14px; font-size: 14px; }
  .opt strong { font-size: 15px; }
  .opt small { font-size: 11px; }
}

/* Start a shortlist (/trips/new). Scoped: design/voting/staymies/new-trip.html */
.page-trip-setup { background: #f5f3eb; }
.page-trip-setup .site-header { padding: 26px 0; border-bottom: 0; }
.page-trip-setup .header-tagline { margin: 0 auto 0 28px; font-size: 13px; color: #bfcdbb; }
.page-trip-setup .back-link { font-size: 13px; color: #d5dfcb; text-decoration: none; }
.page-trip-setup .back-link:hover { color: var(--cream); }
.page-trip-setup .footer-band { margin-top: 56px; }

.trip-setup { --setup-line: #dce1d1; --setup-muted: #687663; color: var(--forest); }
.trip-setup a:focus-visible, .trip-setup button:focus-visible, .trip-setup summary:focus-visible { outline: 3px solid #a1834f; outline-offset: 4px; }
.trip-setup [hidden] { display: none !important; }
.trip-setup .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.setup-intro { padding: 42px 0 32px; }
.setup-intro .eyebrow { color: #71835c; }
.setup-intro h1 { margin-top: 13px; font: 400 clamp(32px, 3.7vw, 45px)/1.15 var(--display); letter-spacing: -.03em; }
.setup-intro > p:last-child { margin-top: 14px; font-size: 14px; color: var(--setup-muted); }

.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.trip-form { min-width: 0; padding: 35px 39px 28px; background: #fffdf8; border: 1px solid var(--setup-line); border-radius: 12px; }
.trip-form .form-error { margin-bottom: 24px; padding: 13px 15px; background: #fff2e9; border: 1px solid #cb967c; border-radius: 5px; color: #854a30; font-size: 13px; }
.trip-form .form-error ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.form-section { min-width: 0; margin: 0 0 28px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--setup-line); }
.form-section:last-of-type { margin-bottom: 0; padding-bottom: 25px; border-bottom: 0; }
.form-section legend { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; font: 500 19px/1.4 var(--display); letter-spacing: -.01em; }
.form-section legend > span { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #eef0e3; color: #70855a; font: 400 10px var(--sans); }
.section-note { margin: 8px 0 24px; font-size: 12px; color: #7c8771; }
.trip-setup .field { min-width: 0; margin-bottom: 20px; }
.trip-setup .form-section > .field:last-child { margin-bottom: 0; }
.trip-setup label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.trip-setup .field input, .trip-setup .field select, .trip-setup .budget input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px; background: #fffefa; border: 1px solid #cbd3bf; border-radius: 5px; color: var(--forest); font: 15px/1.4 var(--sans); outline: none; transition: border-color .15s, box-shadow .15s; }
.trip-setup .field input:focus, .trip-setup .field select:focus, .trip-setup .budget input:focus { border-color: #5c7950; box-shadow: 0 0 0 3px #6683401c; }
.trip-setup input::placeholder { color: #909984; }
.trip-setup input[aria-invalid=true] { border-color: #cb967c; }
.trip-setup .field input[type=date] { height: 48px; -webkit-appearance: none; appearance: none; }
.trip-setup .field input[type=date]::-webkit-date-and-time-value { text-align: left; }
.trip-setup .field input[type=number] { font-variant-numeric: tabular-nums; }
.trip-setup .field small, .trip-setup .budget small { display: block; margin-top: 7px; font-size: 11px; line-height: 1.65; color: #7b8771; }
.trip-setup .field-error { margin-top: 7px; font-size: 12px; color: #9a4d2e; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.field-grid .field { margin-bottom: 0; }
.date-hint, .field-hint { margin-top: 10px; font-size: 11px; line-height: 1.7; color: #78866c; }
.date-hint.has-dates { color: #54723d; }
.number-field { position: relative; }
.number-field input { padding-right: 77px !important; }
.number-field > span { position: absolute; right: 28px; top: 14px; font-size: 12px; color: #889479; pointer-events: none; }
.budget { margin-top: 23px; border: 1px solid #e1e5d6; border-radius: 6px; }
.budget summary { display: flex; align-items: center; gap: 9px; padding: 13px 14px; list-style: none; cursor: pointer; font-size: 12px; color: #5c7150; }
.budget summary::-webkit-details-marker { display: none; }
.budget .optional { margin-left: auto; font-size: 10px; color: #8b947f; }
.budget .plus { font-size: 16px; line-height: 1; transition: transform .15s; }
.budget[open] .plus { transform: rotate(45deg); }
.budget-fields { padding: 4px 15px 17px; }
.budget-fields > label { font-size: 12px; }
.money-field { position: relative; max-width: 290px; }
.money-field > span { position: absolute; left: 13px; top: 14px; font-size: 12px; color: #758468; }
.money-field input { padding-left: 52px !important; }
.form-bottom { padding-top: 25px; border-top: 1px solid var(--setup-line); }
.setup-submit { display: flex; align-items: center; justify-content: space-between; gap: 25px; width: 100%; min-height: 50px; padding: 13px 18px; background: var(--forest); border: 1px solid var(--forest); border-radius: 6px; color: var(--cream); font: 600 14px var(--sans); cursor: pointer; }
.setup-submit:hover { background: #2a5541; }
.setup-submit > span:last-child { font-size: 19px; line-height: 1; }
.form-bottom > p { margin-top: 12px; text-align: center; font-size: 11px; color: #76876c; }

.setup-sidebar { position: sticky; top: 25px; min-width: 0; }
.live-preview { overflow: hidden; background: var(--forest); border: 1px solid #d3dbca; border-radius: 10px; color: var(--cream); }
.live-preview > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #ffffff1a; list-style: none; cursor: pointer; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #d7e2c4; }
.live-preview > summary::-webkit-details-marker { display: none; }
.preview-caret { font-size: 16px; line-height: 1; transition: transform .15s; }
.live-preview[open] .preview-caret { transform: rotate(180deg); }
.preview-landscape { position: relative; height: 143px; overflow: hidden; }
.preview-landscape img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; filter: saturate(.72); }
.preview-landscape::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #112c24bb, transparent 85%); }
.preview-landscape > span { position: absolute; left: 22px; bottom: 17px; z-index: 1; font-size: 11px; color: #fbf6e7; }
.preview-content { padding: 27px 23px 22px; }
.preview-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #b2c89d; }
.preview-content h2 { margin-top: 13px; font: 400 29px/1.2 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.preview-content > p:not(.preview-eyebrow):not(.preview-budget) { margin-top: 10px; font-size: 12px; line-height: 1.7; color: #b7caae; overflow-wrap: anywhere; }
.preview-divider { height: 1px; margin: 24px 0 19px; background: #4b6550; }
.preview-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; color: #e0e8d1; }
.preview-row svg { width: 14px; height: 14px; stroke: #aec29c; stroke-width: 1.5; }
.preview-currency { margin-left: auto; padding: 2px 6px; border: 1px solid #516a50; border-radius: 4px; font-size: 10px; color: #bfd0af; }
.preview-budget { margin-top: 19px; padding-top: 15px; border-top: 1px solid #4b6550; font-size: 12px; color: var(--meadow); overflow-wrap: anywhere; }
.preview-photo-note { padding: 0 23px 18px; font-size: 10px; color: #b2c5a6; }
.next-step { padding: 28px 3px 23px; }
.next-step .eyebrow { color: #80906f; }
.next-step h2 { margin-top: 12px; font: 400 20px/1.35 var(--display); letter-spacing: -.01em; }
.next-step > p:not(.eyebrow):not(.next-steps) { max-width: 280px; margin-top: 11px; font-size: 12px; line-height: 1.8; color: #79866d; }
.next-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 21px !important; font-size: 11px; color: #89957f; }
.next-steps i { font-style: normal; color: #a0ac93; }
.next-steps .current { font-weight: 600; color: #47643a; }
.links-help { padding: 18px 3px; border-top: 1px solid #d9e0cf; font-size: 12px; color: #6c7c5e; }
.links-help summary { cursor: pointer; line-height: 1.7; }
.links-help p { margin-top: 12px; font-size: 12px; line-height: 1.8; color: #73846a; }

@media (max-width: 1100px) {
  .setup-layout { grid-template-columns: minmax(0, 1fr) 285px; gap: 30px; }
  .trip-form { padding: 29px; }
  .field-grid { gap: 15px; }
  .preview-content { padding: 23px 20px; }
  .preview-content h2 { font-size: 26px; }
}

@media (max-width: 850px) {
  .setup-layout { grid-template-columns: minmax(0, 1fr) 255px; gap: 23px; }
  .trip-form { padding: 25px 22px; }
  .setup-intro h1 { font-size: 37px; }
  .field-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-section legend { font-size: 18px; }
  .preview-content h2 { font-size: 25px; }
  .preview-content { padding: 22px 18px; }
  .preview-photo-note { padding-inline: 18px; }
  .page-trip-setup .header-tagline { display: none; }
}

@media (max-width: 650px) {
  .page-trip-setup .site-header { padding: 22px 0; }
  .setup-intro { padding: 29px 0 25px; }
  .setup-intro h1 { max-width: 320px; font-size: 34px; line-height: 1.18; }
  .setup-intro > p:last-child { max-width: 320px; font-size: 13px; line-height: 1.8; }
  .setup-layout { grid-template-columns: 1fr; gap: 25px; }
  .trip-form { padding: 27px 22px 23px; }
  .form-section { margin-bottom: 26px; padding-bottom: 26px; }
  .trip-setup .field input, .trip-setup .field select, .trip-setup .budget input { font-size: 16px; }
  .field-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .field-grid input, .field-grid select { padding: 11px 9px !important; }
  .field-grid .number-field input { padding-left: 13px !important; padding-right: 50px !important; }
  .number-field > span { right: 12px; top: 15px; font-size: 11px; }
  .setup-sidebar { position: static; }
  .preview-content { padding: 25px; }
  .preview-content h2 { font-size: 29px; }
  .preview-photo-note { padding: 0 25px 20px; }
  .page-trip-setup .footer-band { margin-top: 32px; }
}

@media (max-width: 380px) {
  .setup-intro h1 { font-size: 32px; }
  .trip-form { padding: 25px 20px; }
  .field-grid { grid-template-columns: 1fr; gap: 19px; }
  .field-grid input, .field-grid select { padding: 12px 13px !important; }
  .field-grid .number-field input { padding-right: 75px !important; }
  .number-field > span { right: 28px; top: 14px; }
}