/* Paulo + Karen — wedding site. Tokens from the couple's printed invitation. */
:root{
--paper:#EFEDE5;--paper-deep:#E6E3D8;--cream:#F6F4EE;
--ink:#33322E;--ink-soft:#57554E;--ink-faint:#8B887D;
--line:#D3D0C5;--line-strong:#B9B6A9;
--sage:#7C8271;--sage-tint:#E9EBE2;--error:#96604F;
--font-script:'WindSong',cursive;--font-script-menu:'Tangerine',cursive;--font-sans:'Montserrat',sans-serif;--font-serif:'Cormorant Garamond',serif;
--track-caps:.32em;--track-caps-tight:.18em;--track-serif:.14em;
--control-h:48px;--hairline:1px solid var(--line);
--shadow-card:0 1px 0 rgba(51,50,46,.06),0 8px 24px rgba(51,50,46,.07);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper) url('assets/paper-texture.png');background-size:280px;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{color:var(--ink-soft)}
img{max-width:100%}

/* type utilities */
.caps{font-weight:600;font-size:13px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.caps-sm{font-weight:600;font-size:12px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft);line-height:2}
.caps-strong{font-weight:700;letter-spacing:var(--track-caps-tight);text-transform:uppercase;color:var(--ink)}
.script{font-family:var(--font-script);font-weight:500;line-height:1.1;color:var(--ink)}
.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:var(--track-serif);color:var(--ink)}

/* layout */
.wrap{max-width:640px;margin:0 auto;padding:0 24px}
section{padding:64px 0}
.section-head{text-align:center;margin-bottom:40px}

/* audience variants — coding agent sets <body data-audience="ceremony|reception"> per invitation */
body[data-audience="reception"] .ceremony-only{display:none!important}
body[data-audience="ceremony"] .reception-only{display:none!important}
/* party variants — <body data-party="solo|plus-one"> */
body[data-party="solo"] .plus-one-only{display:none!important}

/* hero = first page, min one full viewport */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px}

/* cats artwork — Lottie animation (walk + meet in the middle) over a static SVG fallback */
.cats{position:relative;width:min(320px,80vw);aspect-ratio:1417/555;margin:40px auto 0}
.cats #cats-anim,.cats #cats-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:var(--track-caps-tight);text-transform:uppercase;height:var(--control-h);padding:0 32px;border:1px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;background:var(--ink);color:var(--paper);transition:background .18s ease,color .18s ease}
.btn:hover{background:#45443E;color:var(--paper)}
.btn:active{background:var(--ink-soft)}
.btn:focus-visible{outline:2px solid rgba(51,50,46,.35);outline-offset:2px}
.btn-ghost{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:13px;letter-spacing:var(--track-caps-tight);text-transform:uppercase;background:none;border:0;padding:0 4px;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.btn-ghost:hover{color:var(--ink-soft)}

/* card */
.card{background:var(--cream);border:var(--hairline);border-radius:0;box-shadow:var(--shadow-card);padding:32px 24px}
@media(min-width:600px){.card{padding:48px}}

/* divider motif */
.divider{display:flex;align-items:center;gap:16px}
.divider::before,.divider::after{content:"";flex:1;border-top:var(--hairline)}
.divider span{font-size:15px;color:var(--ink-faint)}

/* form fields */
.field{text-align:left}
.field>label,.field-label{display:block;font-weight:600;font-size:13px;letter-spacing:var(--track-caps-tight);text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
input[type="text"]{display:block;width:100%;height:var(--control-h);padding:0 2px;font-family:var(--font-sans);font-size:16px;color:var(--ink);background:transparent;border:none;outline:none;border-radius:2px;border-bottom:1px solid var(--line-strong);transition:border-color .18s ease,box-shadow .18s ease}
input[type="text"]:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
textarea{display:block;width:100%;min-height:96px;padding:12px 14px;font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:2px;outline:none;resize:vertical;transition:border-color .18s ease}
textarea:focus{border-color:var(--ink)}
::placeholder{color:var(--ink-faint);opacity:1}

/* radios (plain) */
.radio{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio-dot{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s ease}
.radio-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .18s ease}
.radio input:checked~.radio-dot{border-color:var(--ink)}
.radio input:checked~.radio-dot::after{transform:scale(1)}
.radio input:focus-visible~.radio-dot{outline:2px solid rgba(51,50,46,.35);outline-offset:2px}
.radio-label{font-weight:500;font-size:15px;letter-spacing:.04em}
.radio input:checked~.radio-label{font-weight:600}

/* wizard steps */
.step{display:none}
.step.on{display:block;animation:stepfade .2s ease}
@keyframes stepfade{from{opacity:0}to{opacity:1}}
.step-head{text-align:center;margin-bottom:28px}
.wizard-nav{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* dish list — editorial menu rows: image beside script name, alternating sides */
.dish-list{display:flex;flex-direction:column;gap:8px}
.dish{position:relative;display:grid;gap:12px 24px;padding:20px 12px;cursor:pointer;border:1px solid transparent;transition:opacity .2s ease,border-color .18s ease;text-align:center}
.dish:hover{border-color:var(--line)}
.dish input{position:absolute;opacity:0;width:1px;height:1px}
.dish-art{position:relative;display:block;width:min(230px,58vw);margin:0 auto}
.dish img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.dish-info{align-self:center}
.dish-name{display:block;font-family:var(--font-script-menu);font-weight:700;font-size:clamp(34px,8vw,44px);line-height:1.2;color:var(--ink)}
.dish-desc{display:block;margin-top:8px;font-size:14px;letter-spacing:.03em;line-height:1.55;color:var(--ink)}
.dish-chosen{display:block;margin-top:12px;font-weight:700;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--sage);opacity:0;transition:opacity .18s ease}
@media(min-width:600px){
.dish{grid-template-columns:5fr 6fr;text-align:left}
.dish-art{width:100%;margin:0}
.dish:nth-child(even){grid-template-columns:6fr 5fr;text-align:right}
.dish:nth-child(even) .dish-art{order:2}
}
/* once a dish is chosen, mute the rest of that category (classes kept in sync by JS) */
.dish-list.has-pick .dish:not(.picked){opacity:.32}
.dish:has(input:focus-visible){outline:2px solid rgba(51,50,46,.35);outline-offset:2px}
/* selection marker — sage frame + "✓ chosen" */
.dish.picked{border-color:var(--sage)}
.dish.picked .dish-chosen{opacity:1}
/* "none, thank you" row — text only, always centered */
.dish-none{grid-template-columns:1fr!important;text-align:center!important}
.dish-allergens{display:block;margin-top:6px;font-family:var(--font-sans);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* venue photos — toned to sit on the paper palette */
.venue-photo{position:relative;overflow:hidden}
.venue-photo img{display:block;width:100%;max-height:420px;object-fit:contain;object-position:bottom;filter:saturate(.5) sepia(.22) contrast(.92) brightness(1.04)}
.venue-photo::after{content:"";position:absolute;inset:0;background:var(--sage);opacity:.16;mix-blend-mode:color;pointer-events:none}
.venue-photo::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:.12;pointer-events:none;z-index:1}

/* placeholders (venue photos — swap for real images later) */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream);border:var(--hairline);color:var(--ink-soft);font-weight:600;font-size:12px;letter-spacing:var(--track-caps);text-transform:uppercase;text-align:center;line-height:2}
.photo{aspect-ratio:3/2}

/* error slot — empty until JS writes into it */
#form-error{color:var(--error);font-size:14px;font-weight:500;letter-spacing:.04em;text-align:center}
#form-error:empty{display:none}

/* schedule */
.schedule{display:flex;flex-direction:column;text-align:center}
.schedule-item{padding:24px 0}
.schedule-item time{display:block;font-weight:700;font-size:14px;letter-spacing:var(--track-caps-tight);text-transform:uppercase;color:var(--ink)}
.schedule-item .what{display:block;margin-top:6px;font-weight:600;font-size:13px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.schedule-item .note{display:block;margin-top:6px;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--ink-soft)}

/* small top nav on inner pages */
.topbar{text-align:center;padding:28px 24px 0}
.topbar a{font-family:var(--font-script);font-weight:500;font-size:28px;text-decoration:none;color:var(--ink)}

/* footer */
footer{text-align:center;padding:48px 24px 64px}

/* seating diagram — shared by the admin Seating tab and /seats */
.tables-grid{display:grid;gap:24px}
@media(min-width:600px){.tables-grid{grid-template-columns:1fr 1fr}}
.table-card{background:var(--cream);border:var(--hairline);border-radius:0;box-shadow:var(--shadow-card);padding:20px 16px}
.table-head{text-align:center;margin-bottom:12px}
.table-title{margin:0;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:24px;letter-spacing:var(--track-serif);color:var(--ink)}
.table-meta{margin:4px 0 0;font-weight:600;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft)}
.table-note{margin:0 0 12px;text-align:center;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:17px;letter-spacing:.04em;color:var(--ink-soft);white-space:pre-line}
.table-diagram{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}
.table-diagram.is-rectangular{aspect-ratio:2/3}
.table-shape{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border:var(--hairline);background:var(--paper-deep);font-weight:600;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft);text-align:center}
.is-circular .table-shape{width:44%;aspect-ratio:1;border-radius:50%}
.is-rectangular .table-shape{width:34%;height:76%}
.seat{position:absolute;transform:translate(-50%,-50%);width:64px;min-height:40px;padding:4px;border:1px solid var(--line-strong);border-radius:20px;background:var(--cream);font:600 10px/1.25 var(--font-sans);color:var(--ink);text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:default}
.seat-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%}
button.seat{cursor:pointer}
.seat.is-empty{color:var(--ink-faint);border-style:dashed}
.seat.is-occupied{background:var(--sage-tint);border-color:var(--sage)}
.is-dense .seat{width:48px;min-height:32px;font-size:9px;border-radius:16px}
button.seat:focus-visible{outline:2px solid rgba(51,50,46,.35);outline-offset:2px}