/* The booking page's look, lifted from design/booking-page (Main and
   PhoneParchment boards). Desktop values first, the phone's under the media
   query. Two themes the artist picks: Parchment and Blackwork. */

.t-parchment { --bg: #F0E4C8; --glow: #F7EFDA; --shade: #E9DBB8; --card: #FBF4E3; --field: #FBF4E3; --tonal: rgba(26,18,8,0.055); --ink: #201509; --ink2: #5a4a30; --hair2: rgba(26,18,8,0.12); --frame: rgba(201,150,42,0.55); --crimson: #A32B20; --lift: #AE4430; --backdrop: #201509; --sel: #201509; --seltext: #FBF4E3; --shcard: 0 1px 2px rgba(26,18,8,0.05), 0 14px 30px rgba(26,18,8,0.14), inset 0 1px 0 rgba(255,255,255,0.5); --shsm: 0 1px 2px rgba(26,18,8,0.05), 0 8px 18px rgba(26,18,8,0.10), inset 0 1px 0 rgba(255,255,255,0.5); --shbtn: 0 14px 30px rgba(163,43,32,0.4), 0 3px 8px rgba(163,43,32,0.3); }
.t-blackwork { --bg: #15110A; --glow: #1E1810; --shade: #0D0A05; --card: #292014; --field: #2D2416; --tonal: rgba(240,228,200,0.07); --ink: #EDE2C4; --ink2: #C6B893; --hair2: rgba(240,228,200,0.15); --frame: rgba(214,166,60,0.6); --crimson: #BC3B2B; --lift: #C94A36; --backdrop: #0D0A05; --sel: #EDE2C4; --seltext: #15110A; --shcard: 0 0 0 1px rgba(240,228,200,0.35), 0 1px 2px rgba(0,0,0,0.30), 0 14px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(240,228,200,0.06); --shsm: 0 0 0 1px rgba(240,228,200,0.35), 0 1px 2px rgba(0,0,0,0.30), 0 8px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(240,228,200,0.06); --shbtn: 0 14px 30px rgba(0,0,0,0.5), 0 3px 8px rgba(188,59,43,0.35); }

html { background: #F0E4C8; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 32px 0; font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif; color: var(--ink); background-color: var(--bg); background-image: radial-gradient(120% 90% at 50% 0%, var(--glow) 0%, var(--bg) 55%, var(--shade) 100%); -webkit-font-smoothing: antialiased; }
.page p, .page h1, .page h2 { margin: 0; }
.page a { color: var(--ink); text-decoration-color: var(--frame); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.page a:hover { color: var(--crimson); }
button, input, textarea { font: inherit; color: inherit; }

.disp { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.h2-sm { font-size: 30px; }
.mono { font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; }
.lab { font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--ink); }
.hint { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.body { font-size: 17px; line-height: 1.7; color: var(--ink); }

/* Hero */
.hero { position: relative; width: 100%; max-width: 1248px; padding: 96px 64px 88px; border-radius: 6px; background: var(--backdrop); box-shadow: var(--shcard); color: #EDE2C4; }
.gilt-o { position: absolute; top: 18px; right: 18px; bottom: 18px; left: 18px; border: 1px solid rgba(214,166,60,0.6); border-radius: 3px; pointer-events: none; }
.gilt-i { position: absolute; top: 24px; right: 24px; bottom: 24px; left: 24px; border: 1px solid rgba(201,150,42,0.35); border-radius: 2px; pointer-events: none; }
.tick { position: absolute; left: 50%; width: 1px; height: 9px; background: rgba(214,166,60,0.65); }
.tick-top { top: 14px; }
.tick-bot { bottom: 14px; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 96px; align-items: center; }
.hero-in.has-tiles { grid-template-columns: minmax(0, 1fr) 408px; }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.hero-name { font-size: 104px; line-height: 0.95; color: #EDE2C4; overflow-wrap: anywhere; }
.hero-shop { font-style: italic; font-size: 21px; line-height: 1.4; color: #D6A63C; }
.hero-intro { font-size: 18.5px; line-height: 1.8; letter-spacing: 0.005em; color: #EDE2C4; max-width: 31em; white-space: pre-line; }
.status { display: flex; align-items: center; gap: 10px; padding-top: 6px; font-style: italic; font-size: 16px; color: #C6B893; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #62A147; flex: none; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ptile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 4px; border: 1px solid rgba(240,228,200,0.12); background: rgba(240,228,200,0.035); overflow: hidden; }
.ptile img { width: 100%; height: 100%; object-fit: cover; }

/* Form and the request card */
main { width: 100%; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 96px; align-items: start; padding-top: 120px; }
.form { display: flex; flex-direction: column; gap: 96px; }
.sec { display: flex; flex-direction: column; gap: 28px; }
.grp { display: flex; flex-direction: column; gap: 10px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lab-row { display: flex; justify-content: space-between; align-items: baseline; }
.lab-note { font-size: 14px; font-style: italic; }
.field { display: block; width: 100%; min-height: 54px; padding: 14px 18px; border: 0; border-radius: 6px; background: var(--field); box-shadow: var(--shsm); font-size: 17px; line-height: 1.55; color: var(--ink); outline: none; resize: vertical; }
.field:focus { box-shadow: 0 0 0 2px var(--ink), var(--shsm); }
.field::placeholder { color: var(--ink2); font-style: italic; opacity: 1; }
textarea.field { min-height: 120px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tonal); color: var(--ink); font-size: 15.5px; white-space: nowrap; cursor: pointer; }
.chip.on { background: var(--sel); color: var(--seltext); }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 62px; padding: 10px 20px; border: 0; border-radius: 6px; background: var(--field); box-shadow: var(--shsm); text-align: left; cursor: pointer; }
.opt.on { background: linear-gradient(var(--tonal), var(--tonal)), var(--field); box-shadow: 0 0 0 2px var(--ink), var(--shsm); }
.opt .name { font-size: 17px; flex: 1; }
.opt .mono { color: var(--ink2); }
.radio { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--ink2); flex: none; }
.opt.on .radio { border-color: var(--ink); }
.opt.on .radio::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); }
.thumbs { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.thumb { position: relative; width: 92px; height: 92px; border-radius: 6px; background: var(--tonal); overflow: visible; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.rm { position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--backdrop); color: #EDE2C4; box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer; }
.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 92px; height: 92px; border-radius: 6px; border: 1.5px dashed var(--ink2); background: transparent; color: var(--ink2); font-size: 14px; cursor: pointer; }
.policy { padding-top: 36px; border-top: 1px solid var(--hair2); gap: 20px; }
.policy-text { font-size: 17px; line-height: 1.75; color: var(--ink); max-width: 36em; white-space: pre-line; }
.agree { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0; border: 0; background: none; text-align: left; font-size: 17px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.box { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; border: 1.5px solid var(--ink2); flex: none; color: var(--seltext); }
.agree.on .box { background: var(--sel); border-color: var(--sel); }
.agree .box svg { display: none; }
.agree.on .box svg { display: block; }

.card { position: relative; border-radius: 6px; background: var(--card); box-shadow: var(--shcard); }
.card-f { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid var(--frame); border-radius: 3px; pointer-events: none; }
.card-t { position: absolute; top: 20px; left: 50%; width: 1px; height: 9px; background: var(--frame); }
.summary { position: sticky; top: 32px; display: flex; flex-direction: column; padding: 44px 36px 36px; }
.sum-title { position: relative; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.sum-sub { position: relative; margin-top: 10px; font-size: 14.5px; font-style: italic; }
.rows { position: relative; display: flex; flex-direction: column; margin-top: 22px; }
.crow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--hair2); }
.crow .vals { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rl { font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.rv { font-size: 15.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.rv .mono { color: var(--ink2); }
.rv.mono { font-size: 14.5px; color: var(--ink); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.needed { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hair2); color: var(--ink2); }
.needed svg { flex: none; margin-top: 2px; }
.ts { position: relative; margin-top: 14px; min-height: 0; }
.ts:not(:empty) { margin-bottom: 4px; }
.send { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin-top: 14px; border: 0; border-radius: 6px; color: #FFFFFF; font-weight: 700; font-size: 19px; background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%), linear-gradient(155deg, var(--lift) 0%, var(--crimson) 55%); box-shadow: var(--shbtn); cursor: pointer; }
.send:disabled { opacity: 0.55; cursor: default; }
.err { position: relative; margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--crimson); }

/* Closed, sent, missing */
.closed, .sent, .missing { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; align-self: flex-start; }
.closed { margin-top: 64px; }
.closed #closed-trips { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.trips { display: flex; flex-direction: column; border-bottom: 1px solid var(--hair2); }
.trip { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair2); font-size: 17px; }
.trip .mono { color: var(--ink2); white-space: nowrap; }
.sent { padding-top: 88px; gap: 22px; }
.missing { padding-top: 88px; }
.seal { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--backdrop); box-shadow: var(--shcard); color: #D6A63C; }
.seal-ring { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid rgba(214,166,60,0.6); border-radius: 999px; }
.sent-title { font-size: 50px; line-height: 1; }
.sent-card { display: flex; flex-direction: column; margin-top: 18px; padding: 34px 24px 12px; }
.sent-card-title { position: relative; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--ink); }
.sent-card .rows { margin-top: 12px; }
.sent-card .crow { display: flex; flex-direction: column; gap: 4px; }
.back { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; font-size: 16px; }

footer { width: 100%; max-width: 1120px; margin-top: auto; padding: 120px 0 64px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.made { font-size: 13.5px; font-style: italic; color: var(--ink2); }
footer img { display: block; width: 120px; height: auto; }
.t-parchment .wm-dark { display: none; }
.t-blackwork .wm-light { display: none; }
.t-blackwork ~ html { background: #15110A; }

/* Phone */
@media (max-width: 900px) {
  .page { padding: 0 22px; }
  .hero { margin: 12px -10px 0; width: calc(100% + 20px); padding: 60px 32px 44px; }
  .gilt-o { top: 12px; right: 12px; bottom: 12px; left: 12px; }
  .gilt-i { top: 17px; right: 17px; bottom: 17px; left: 17px; }
  .tick-top { top: 10px; }
  .tick-bot { bottom: 10px; }
  .hero-in, .hero-in.has-tiles { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .hero-text { gap: 16px; }
  .hero-name { font-size: 52px; line-height: 0.98; }
  .hero-shop { font-size: 17.5px; }
  .hero-intro { font-size: 16.5px; line-height: 1.75; }
  .status { padding-top: 0; font-size: 15px; }
  .tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 16px -15px 0 0; padding-right: 15px; }
  .ptile { width: 132px; height: 132px; flex: none; scroll-snap-align: start; }
  main { display: flex; flex-direction: column; gap: 72px; padding-top: 72px; }
  .form { gap: 72px; }
  .sec { gap: 26px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .h2 { font-size: 30px; }
  .h2-sm { font-size: 26px; }
  textarea.field { min-height: 150px; }
  .chip { padding: 0 18px; }
  .opt { min-height: 66px; padding: 10px 18px; }
  .opt .name { flex: initial; }
  .opt .txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
  .policy-text { font-size: 16.5px; }
  .card-f { top: 8px; right: 8px; bottom: 8px; left: 8px; }
  .card-t { top: 16px; }
  .summary { position: static; padding: 38px 24px 26px; }
  .sum-title { font-size: 28px; }
  .rows { margin-top: 18px; }
  .crow { display: flex; flex-direction: column; gap: 4px; }
  .closed { margin-top: 64px; }
  .sent, .missing { padding-top: 88px; }
  footer { padding: 96px 0 48px; }
  footer img { width: 112px; }
}
@media (min-width: 901px) {
  .opt .txt { display: contents; }
}