/* =====================================================================
   The Book of Wonders: the public pages (/ and /next). Oxblood on cream,
   a high-contrast serif for the headings, wide letters on the labels
   (R49): a different room of the house from Five Doors, so nobody
   mistakes one app for the other. Type runs large on purpose.
   ===================================================================== */
:root{
  --ink:#241A17; --ground:#FAF3E7; --surface:#FFFDF8; --line:#E2D6C2; --muted:#6B5C50; --faint:#F3E9D8;
  --ox:#7B1E24; --ox-deep:#5C1219; --gold:#A87C2B; --bad:#A32020; --ok:#2F6B4A; --warn:#8A5B12;
  --on-ox:#FFF8EE; --on-gold:#2A1E08;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:Karla,'Helvetica Neue',system-ui,sans-serif;
  /* The browser must be told which way the page leans, or it draws its own controls
     light while we paint the page dark: a select then reads cream on white. */
  color-scheme: light dark;
  --shadow:0 1px 2px rgba(36,26,23,.07),0 10px 26px rgba(36,26,23,.09);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ink:#F3E7D6; --ground:#17110F; --surface:#211917; --line:#3C2F29; --muted:#B6A493; --faint:#241B18;
    --ox:#E9959A; --ox-deep:#F0B3B6; --gold:#DFB463; --bad:#EFA0A0; --ok:#7FC7A2; --warn:#D9AE62;
    --on-ox:#2A0E11; --on-gold:#2A1E08;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#F3E7D6; --ground:#17110F; --surface:#211917; --line:#3C2F29; --muted:#B6A493; --faint:#241B18;
  --ox:#E9959A; --ox-deep:#F0B3B6; --gold:#DFB463; --bad:#EFA0A0; --ok:#7FC7A2; --warn:#D9AE62;
  --on-ox:#2A0E11; --on-gold:#2A1E08;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;margin:0}
select,input,textarea{background:var(--surface);color:var(--ink)}
option,optgroup{background:var(--surface);color:var(--ink)}

.wrap{max-width:760px;margin:0 auto;padding:0 20px 120px}
a{color:var(--ox)}

/* ---- header and the language switch (R42: bigger and more obvious) ---- */
header.top{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
.top-in{max-width:760px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:700;font-size:25px;color:var(--ox);text-decoration:none;letter-spacing:.01em}
.brand span{display:block;color:var(--muted);font-family:var(--sans);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.2em;margin-top:2px}
.lang{margin-left:auto;display:flex;border:2px solid var(--ox);border-radius:999px;padding:3px;gap:3px;background:var(--surface)}
.lang button{border:0;background:none;font:inherit;font-size:17px;padding:9px 20px;min-height:46px;border-radius:999px;color:var(--ox);cursor:pointer;letter-spacing:.02em}
.lang button b{font-weight:800}
.lang button[aria-pressed="true"]{background:var(--ox);color:var(--on-ox)}
.lang button:hover:not([aria-pressed="true"]){background:var(--faint)}
@media(max-width:420px){.lang{margin-left:0;width:100%}.lang button{flex:1}header.top{position:static}}

.rail{display:flex;gap:4px;padding:0 20px;max-width:760px;margin:0 auto}
.rail i{flex:1;height:4px;border-radius:2px;background:var(--line);margin-top:10px}
.rail i.done{background:var(--gold)} .rail i.now{background:var(--ox)}

.step-no{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:32px 0 8px}
h1{font-family:var(--serif);font-weight:700;font-size:40px;line-height:1.12;margin:0 0 10px;text-wrap:balance;letter-spacing:-.01em}
h1.big{font-size:58px;margin-top:44px}
h2.sec{font-family:var(--serif);font-size:24px;font-weight:700;margin:30px 0 12px}
.lede{color:var(--muted);margin:0 0 26px;font-size:19px;line-height:1.55;max-width:58ch}
.hint{font-size:16px;color:var(--muted);margin:0 0 9px;line-height:1.5}
.fine{font-size:14.5px;color:var(--muted);margin:5px 0 0}
.note{background:var(--faint);border-left:3px solid var(--gold);border-radius:8px;padding:14px 16px;font-size:16.5px;color:var(--muted);margin:16px 0}
.err{font-size:15px;color:var(--bad);margin:6px 0 0;font-weight:700}

/* ---- fields ---- */
.q{margin:0 0 18px}
.q>label,legend{display:block;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;padding:0;color:var(--ink)}
.two{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.two .q{margin-bottom:0}
.two + .q, .two + fieldset{margin-top:18px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input:not([type]),select,textarea{
  width:100%;font:inherit;font-size:18px;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
textarea{min-height:84px;resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 18%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2.5px solid var(--ox);outline-offset:2px}
fieldset{border:0;padding:0;margin:0 0 20px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16.5px;font-weight:600;padding:10px 17px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ox);border-color:var(--ox);color:var(--on-ox)}

/* ---- cards ---- */
.cards{display:grid;gap:12px}
@media(min-width:640px){.cards.three{grid-template-columns:repeat(3,1fr)}.cards.two-up{grid-template-columns:1fr 1fr}}
.card{position:relative;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 18px 16px;cursor:pointer;
  font:inherit;color:inherit;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,box-shadow .15s}
.card:hover:not([disabled]){border-color:var(--muted)}
.card[aria-pressed="true"]{border-color:var(--pick,var(--ox));box-shadow:var(--shadow);outline:1.5px solid var(--pick,var(--ox))}
.card h3{font-family:var(--serif);font-size:23px;font-weight:700;margin:0;padding-right:28px;color:var(--pick,var(--ink))}
.card p{margin:0;font-size:16.5px;color:var(--muted);line-height:1.5}
.card .when{font-size:14.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.card em{font-style:normal;font-size:15px;font-weight:700;margin-top:3px}
.card em.ok{color:var(--ok)} .card em.bad{color:var(--bad)} .card em.warnc{color:var(--warn)}
.card.full{opacity:.6;cursor:not-allowed;background:var(--faint)}
/* ---- space cards (R58): a picture, a description, both capacities, the rate ---- */
.card.space{padding:0 0 16px;overflow:hidden}
.card.space>*:not(.shot):not(.tick){margin-left:18px;margin-right:18px}
.card.space>h3{margin-top:16px}
.card.space:not(:has(.shot))>h3{margin-top:18px}
.card.space .shot{display:block;width:100%;height:150px;object-fit:cover;background:var(--faint);border-bottom:1.5px solid var(--line)}
.card.space .shot[hidden]{display:none}
.card.space.full .shot{filter:grayscale(1)}
.card.space .rate{font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.card.space .tick{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(2px)}
.chips.span{margin-top:10px}
/* R63. The occasion as a tree: six words on the top row, the detail underneath it.
   The top row is heavier so the eye reads six things and stops, and the branch that
   opens is indented and ruled so it plainly belongs to the chip above it. */
.chip.big{font-size:17.5px;font-weight:700;padding:12px 21px}
.chip.big[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.chips.leaves{margin-top:12px;padding-left:14px;border-left:3px solid var(--line)}
.chips.leaves .chip{font-size:16px;padding:8px 15px}
.occ-other{margin-top:12px}
.occ-other .linkish[aria-pressed="true"]{font-weight:800;color:var(--ox)}
.tick{position:absolute;top:14px;right:14px;width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--surface)}
.card[aria-pressed="true"] .tick{background:var(--pick,var(--ox));border-color:var(--pick,var(--ox))}
.door-card{padding:24px 22px 22px;min-height:170px}
/* R64. The headings are two and three words now rather than a sentence, and at thirty
   pixels the longer pair wrapped onto a second line carrying the body's line height
   with it, which put a visible hole between the two halves of "Catering at your
   venue". Tighter leading, and the break falls where the sense does. */
.door-card h3{font-size:29px;color:var(--ox);line-height:1.15;text-wrap:balance}
.door-card .arrow{margin-top:auto;font-size:26px;color:var(--ox);font-weight:700}
.kitchens-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.kitchens-strip span{font-size:14px;font-weight:700;padding:5px 13px;border-radius:999px;border:1.5px solid var(--k);color:var(--k)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kitchens-strip span{color:var(--ink)} }
:root[data-theme="dark"] .kitchens-strip span{color:var(--ink)}

.stack{display:grid;gap:8px}
.shift{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;padding:12px 14px;cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%}
.shift[aria-pressed="true"]{border-color:var(--ox)}
.shift .box{flex:0 0 21px;height:21px;margin-top:3px;border:1.5px solid var(--line);border-radius:5px;display:grid;place-items:center;font-size:13px;color:var(--on-ox)}
.shift[aria-pressed="true"] .box{background:var(--ox);border-color:var(--ox)}
.shift b{display:block;font-size:17px}
.shift small{color:var(--muted);font-size:15.5px;line-height:1.45;display:block}

/* ---- the menu ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.tabs button{border:1.5px solid var(--line);background:var(--surface);font:inherit;font-weight:700;font-size:16px;padding:10px 16px;border-radius:8px;cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{border-color:var(--k,var(--ox));box-shadow:inset 0 -3px 0 var(--k,var(--ox))}
.tabs .n{display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:var(--ox);color:var(--on-ox);font-size:13px;margin-left:5px}
.items{display:grid;gap:8px}
.item{display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.item.on{border-color:var(--ox)}
.item-t{display:grid;gap:2px;min-width:0}
.item-t b{font-size:18px}
.item-t small{color:var(--muted);font-size:15px;line-height:1.4}
.item-t .price{font-size:15.5px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.item-t .warn{color:var(--warn);font-weight:700}
.item .style{margin-top:6px;max-width:260px;font-size:14px;padding:6px 8px}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.stepper button{border:0;background:var(--faint);color:var(--ink);font:inherit;font-size:22px;font-weight:700;width:48px;height:48px;cursor:pointer}
.stepper button[disabled]{opacity:.35;cursor:default}
.stepper input{width:64px;height:48px;border:0;border-radius:0;text-align:center;font-weight:700;font-size:18px;padding:0;font-variant-numeric:tabular-nums}
/* R62. The first press of + jumps to the head count, and the first press of − stepped
   back by one, so undoing a mis-tap on a sixty-guest wedding was sixty presses and
   sixty repaints. One way in, one way out. */
.stepper button.clearq{width:42px;font-size:16px;background:var(--sunk);color:var(--muted);border-left:1.5px solid var(--line)}
.stepper button.clearq:hover{background:var(--stop-bg);color:var(--stop)}

/* ---- summaries and the estimate ---- */
.quote{border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;margin:8px 0 20px;font-size:16.5px;display:grid;gap:7px;background:var(--surface)}
.quote div{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.quote div span:last-child{text-align:right;white-space:nowrap}
.quote small{color:var(--muted)}
.quote i{color:var(--muted);font-style:italic}
.quote .sub{color:var(--muted);border-top:1px solid var(--line);padding-top:7px;margin-top:3px}
.quote .tot{font-weight:700;font-size:20px;font-family:var(--serif)}
.quote .dep{font-weight:700;color:var(--ox)}
.quote .cap{font-size:14.5px;color:var(--muted);display:block}
.quote h4{margin:6px 0 0;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
table.sum{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:17px}
table.sum td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.sum td:first-child{color:var(--muted);width:34%;padding-right:14px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
table.sum small{color:var(--muted)}

.estbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.06);z-index:30}
.estbar-in{max-width:760px;margin:0 auto;padding:10px 20px;display:flex;gap:14px;align-items:center}
.estbar-in span{color:var(--muted);font-size:16px}
.estbar-in b{margin-left:auto;font-variant-numeric:tabular-nums}

.nav{display:flex;gap:12px;align-items:center;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
button.go{background:var(--ox);color:var(--on-ox);border:0;border-radius:8px;font:inherit;font-weight:700;font-size:18px;letter-spacing:.02em;padding:14px 28px;cursor:pointer;margin-left:auto}
button.go[disabled]{opacity:.45;cursor:not-allowed}
button.back{background:none;border:0;color:var(--muted);font:inherit;font-weight:700;font-size:17px;cursor:pointer;padding:13px 4px}
.why{font-size:16px;color:var(--bad);font-weight:700;flex:1 1 200px}

.done-screen{padding-top:40px}
.done-mark{font-family:var(--serif);font-size:52px;color:var(--ox);margin:0 0 6px}
.refbox{display:inline-flex;flex-direction:column;border:1.5px dashed var(--ox);border-radius:10px;padding:12px 20px;margin:8px 0 18px}
.refbox span{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.refbox b{font-size:30px;letter-spacing:.08em;color:var(--ox);font-family:var(--serif)}
/* carrying straight on into round two (R58) */
.carry{margin:26px 0 10px;padding:22px 20px;border:1.5px solid var(--line);border-left:4px solid var(--ox);border-radius:12px;background:var(--surface);text-align:left}
.carry h2{font-family:var(--serif);font-size:24px;margin:0 0 6px;color:var(--ox)}
.carry p{margin:0 0 16px;color:var(--muted);font-size:16.5px;line-height:1.5}
.carry a.go{display:inline-block;text-decoration:none;text-align:center}

/* ---- the who-does-what grid (round two) ---- */
.grid3{display:grid;gap:6px}
.grid3 .row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px}
.grid3 .row small{display:block;color:var(--muted);font-size:15px}
.seg3{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.seg3 button{border:0;background:var(--surface);font:inherit;font-size:16px;font-weight:700;padding:10px 15px;cursor:pointer;color:var(--muted)}
.seg3 button + button{border-left:1.5px solid var(--line)}
.seg3 button[aria-pressed="true"]{background:var(--ox);color:var(--on-ox)}
@media(max-width:560px){.grid3 .row{grid-template-columns:1fr}}

/* ---- the agreement (round three) ---- */
.contract{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:22px 24px;margin:10px 0 20px}
.contract h2{font-family:var(--serif);font-size:27px;margin:0 0 12px}
.contract h3{font-size:16px;margin:18px 0 5px;letter-spacing:.06em;text-transform:uppercase}
.contract p{margin:0;font-size:17px;line-height:1.65}
.sign{display:grid;gap:12px;border:2px solid var(--ox);border-radius:10px;padding:18px 20px;margin-top:12px}
.sign label.tickline{display:flex;gap:12px;align-items:flex-start;font-size:17px;cursor:pointer}
.sign input[type=checkbox]{width:24px;height:24px;margin-top:2px;accent-color:var(--ox)}
.sign .typed{font-family:var(--serif);font-size:26px;font-style:italic}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* =====================================================================
   R55. The calendar, the folded answer, and the door you can change your
   mind about. Two dates in two little boxes was not a calendar, and
   "several days" ought to mean you can see the days and take them.
   ===================================================================== */
.cal{border:1.5px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);max-width:23rem}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:1.05rem}
.calnav{border:1.5px solid var(--line);background:transparent;color:inherit;border-radius:9px;width:2.2rem;height:2.2rem;font-size:1.3rem;line-height:1;cursor:pointer}
.calnav:disabled{opacity:.3;cursor:default}
.caldays,.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.caldays .dn{text-align:center;font-size:.78rem;opacity:.6;text-transform:uppercase;letter-spacing:.04em;padding-bottom:2px}
.cd{border:1.5px solid transparent;background:transparent;color:inherit;border-radius:9px;aspect-ratio:1;font-size:1rem;cursor:pointer;font-variant-numeric:tabular-nums}
.cd:hover:not(:disabled){border-color:var(--line)}
.cd.past{opacity:.28;cursor:default}
.cd.out{visibility:hidden}
.cd.on{background:var(--ox);color:var(--on-ox);font-weight:800}
/* the days between the two ends read as one band, not as seven separate squares */
.cd.mid{background:var(--faint);border-radius:0;border-color:transparent}
@supports (background:color-mix(in srgb,red 20%,transparent)){ .cd.mid{background:color-mix(in srgb,var(--ox) 22%,transparent)} }
.cd.mid:hover{border-color:var(--ox)}
.calnow{margin:8px 0 0}
.calpicked{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--surface)}
.calpicked b{font-size:1.05rem}
.linkish{background:none;border:none;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.swap{margin-top:20px;font-size:.95rem;opacity:.85}
@media (max-width:420px){ .cal{max-width:100%} }

/* R57. Whatever is missing says so where it is, not only at the bottom of the screen. */
.badstep{outline:2px solid var(--bad);outline-offset:6px;border-radius:12px}

/* R57. The three questions, and the folded answers behind them. */
.three-q{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.three-q>li{display:grid;gap:12px}
.three-q h2{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--serif);font-size:1.45rem;font-weight:700}
.three-q h2 i{font-style:normal;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:999px;background:var(--ox);color:var(--on-ox);font-family:var(--sans);font-size:.95rem;font-weight:800;flex:0 0 auto}
.three-q .cal{max-width:23rem}
details.exact>summary{cursor:pointer;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;margin-top:12px}
details.exact>summary::-webkit-details-marker{display:none}
.calpicked .sp{flex:1}

/* R57. The guest count, on the page where every quantity comes from it. */
.guestbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 15px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface)}
.guestbox label{font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.guestbox input{width:6.5rem;padding:9px 11px;font-size:1.1rem;font-variant-numeric:tabular-nums;border:1.5px solid var(--line);border-radius:8px;background:var(--ground);color:inherit}



/* R57. Searching every kitchen at once, because nobody knows which one makes the thing. */
.hunt{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.hunt input{flex:1;max-width:26rem;padding:11px 14px;font:inherit;font-size:1rem;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:inherit}
.hunt input:focus{outline:2px solid var(--ox);outline-offset:1px;border-color:var(--ox)}
.item-t small.whose{display:inline-block;margin:2px 0 0;font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--k,var(--muted))}
.calpick{flex:1;min-width:0;padding:6px 8px;font:inherit;font-size:1rem;font-weight:700;border:1.5px solid transparent;border-radius:8px;background:transparent;color:inherit;text-align:center}
.calpick:hover,.calpick:focus{border-color:var(--line)}
.snapped{grid-column:1/-1;margin:8px 0 0;font-size:.88rem;color:var(--warn)}
.sum tr.jump td.goback{width:1%;white-space:nowrap;text-align:right;vertical-align:top}