/* Quiet Cosmos: order flow pages (intake, confirm, thanks, contact, privacy). */
.flow-shell, .flow-review, .flow-complete, .flow-contact, .flow-privacy { --flow-paper: #fbf8f2; --flow-soft: #efeee4; }
.flow-shell *, .flow-review *, .flow-complete *, .flow-contact *, .flow-privacy * { box-sizing: border-box; }
.flow-shell [hidden], .flow-review [hidden] { display: none !important; }
.flow-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.flow-shell { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(40px,7vw,100px); padding-top: 45px; padding-bottom: 90px; }
.flow-intro, .flow-form-panel { min-width: 0; }
.flow-back-link { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; font-size: 12px; }
.flow-back-link:hover { color: var(--rust); }
.flow-intro-copy { margin-top: 67px; }
.flow-intro h1, .flow-centered-head h1, .flow-complete h1, .flow-contact h1, .flow-privacy h1 { font-family: var(--serif); font-weight: 400; line-height: .95; letter-spacing: -.035em; font-size: clamp(54px,5.6vw,82px); margin: 22px 0 26px; }
.flow-intro h1 em, .flow-centered-head h1 em, .flow-complete h1 em, .flow-contact h1 em, .flow-privacy h1 em { font-weight: 400; color: var(--rust); }
.flow-intro-copy > p:not(.eyebrow) { max-width: 380px; color: var(--muted); line-height: 1.85; font-size: 14px; }
/* The orbit lives inside the copy block, which is only as wide as its
   words, so "centred" means centred under the heading at every width. */
.flow-intro-copy { width: fit-content; max-width: 100%; }
.flow-orbit { width: 258px; margin: 28px auto 32px; text-align: center; }
.flow-orbit svg { margin-inline: auto; }
.flow-orbit svg { width: 240px; height: 240px; stroke: #a3a78d; stroke-width: .8; }
.flow-orbit svg path { fill: var(--rust); stroke: none; }
.flow-orbit-dot { fill: var(--rust); stroke: none; }
.flow-orbit > span { display: block; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); }
.flow-intro-note { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--line); padding-top: 24px; max-width: 375px; }
.flow-intro-note > span { font-size: 33px; color: var(--rust); flex-shrink: 0; }
.flow-intro-note p { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 0; }
.flow-form-panel { align-self: start; background: var(--flow-paper); border: 1px solid var(--line); padding: 32px 38px 24px; }
.flow-progress { padding: 0 0 26px; margin: 0 0 33px; list-style: none; display: flex; justify-content: space-between; gap: 9px; border-bottom: 1px solid var(--line); }
.flow-progress li { color: var(--muted); display: flex; gap: 7px; align-items: center; font-size: 10px; white-space: nowrap; }
.flow-progress li > span { height: 22px; width: 22px; border: 1px solid var(--line); display: grid; place-items: center; border-radius: 50%; font-size: 9px; }
.flow-progress li.is-current { color: var(--ink); }
.flow-progress li.is-current > span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.flow-progress li.is-done > span { color: var(--rust); border-color: var(--rust); }
.flow-step { border: 0; min-width: 0; padding: 0; margin: 0; }
.flow-step-label { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--rust); margin: 0 0 12px; }
.flow-step h2 { font-family: var(--serif); font-size: clamp(33px,3.1vw,44px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 12px; }
.flow-step h2:focus { outline: none; }
.flow-step-description { color: var(--muted); line-height: 1.75; font-size: 12px; margin: 0 0 30px; }
.flow-field { min-width: 0; margin-bottom: 22px; }
.flow-field > label { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 11px; font-weight: 500; margin-bottom: 9px; }
.flow-field > label > span { color: var(--muted); font-size: 9px; font-weight: 400; }
.flow-field input, .flow-field textarea, .flow-field select { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid #d5d7ca; border-radius: 0; color: var(--ink); background: transparent; padding: 12px 13px; font-family: var(--sans); font-size: 12px; font-weight: 400; transition: background .2s,border-color .2s,box-shadow .2s; }
.flow-field textarea { resize: vertical; min-height: 103px; line-height: 1.7; }
.flow-field input::placeholder, .flow-field textarea::placeholder { color: #797e74; opacity: 1; }
.flow-field input:focus, .flow-field textarea:focus, .flow-field select:focus { outline: 2px solid var(--rust); outline-offset: 3px; background: #fffdf8; border-color: var(--rust); }
.flow-field input:disabled { opacity: .5; background: #e9e9e0; cursor: not-allowed; }
.flow-field input:user-invalid { border-color: #a34f3d; }
.flow-hint { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }
.flow-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.flow-checkbox { display: flex; gap: 10px; align-items: center; font-size: 11px; margin: -3px 0 27px; cursor: pointer; }
.flow-checkbox input { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); }
.flow-checkbox input:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.flow-notice { background: var(--flow-soft); border-left: 2px solid #a1a88e; padding: 16px; font-size: 11px; line-height: 1.75; color: var(--muted); margin: 0 0 24px; }
.flow-notice p { margin: 0 0 15px; }
.flow-notice .flow-field { margin-bottom: 0; }
.flow-notice .flow-field > label { display: block; }
.flow-notice .flow-field > label > span { margin-left: 5px; }
.flow-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 27px; }
.flow-focus { position: relative; cursor: pointer; }
.flow-focus > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flow-focus-content { display: flex; flex-direction: column; padding: 15px 30px 15px 13px; border: 1px solid var(--line); min-height: 74px; transition: background .2s,border-color .2s; }
.flow-focus-content strong { font-size: 10px; font-weight: 500; }
.flow-focus-content small { font-size: 9px; color: var(--muted); margin-top: 7px; }
.flow-focus-mark { position: absolute; right: 11px; top: 15px; width: 13px; height: 13px; display: grid; place-items: center; font-size: 14px; color: #818875; }
.flow-focus input:checked + .flow-focus-content { background: #e9ecdf; border-color: #8b9579; }
.flow-focus input:checked + .flow-focus-content .flow-focus-mark { color: var(--ink); transform: rotate(45deg); }
.flow-focus input:focus-visible + .flow-focus-content { outline: 2px solid var(--rust); outline-offset: 3px; }
.flow-form-actions { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 29px; }
.flow-back-button { color: var(--muted); background: none; border: 0; padding: 12px 0; cursor: pointer; font-family: var(--sans); font-size: 11px; white-space: nowrap; }
.flow-back-button span { margin-right: 7px; }
.flow-next-button { display: flex !important; align-items: center; justify-content: space-between; flex: 1; min-height: 50px; }
.flow-demo-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 22px 0 13px; }
.flow-sample-button, .flow-clear-button { border: 0; padding: 4px 0; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 10px; text-decoration: underline; text-underline-offset: 4px; color: var(--rust); }
.flow-clear-button { color: var(--muted); }
.flow-preview-note { font-size: 9px; color: var(--muted); line-height: 1.7; text-align: center; margin: 12px 0 0; }
.flow-status { min-height: 15px; font-size: 10px; line-height: 1.6; color: var(--rust); text-align: center; margin: 8px 0 0; }
.flow-back-button:focus-visible, .flow-sample-button:focus-visible, .flow-clear-button:focus-visible { outline: 2px solid var(--rust); outline-offset: 5px; }

.flow-review { padding-top: 65px; padding-bottom: 86px; }
.flow-centered-head { text-align: center; margin-bottom: 48px; }
.flow-centered-head h1 { font-size: clamp(58px,6vw,78px); margin: 18px 0 24px; }
.flow-centered-head > p:last-child { font-size: 13px; line-height: 1.85; color: var(--muted); }
.flow-review-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; max-width: 1000px; margin: 0 auto; align-items: start; }
.flow-details-card { background: var(--flow-paper); border: 1px solid var(--line); padding: 32px; }
.flow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.flow-card-head h2 { font-family: var(--serif); font-size: 29px; font-weight: 400; margin: 0; letter-spacing: -.025em; }
.flow-card-head .text-link { font-size: 10px; flex-shrink: 0; }
.flow-card-head-sub { padding-top: 28px; margin-top: 27px; border-top: 1px solid var(--line); }
.flow-details { margin: 0; }
.flow-details > div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; font-size: 11px; line-height: 1.7; }
.flow-details dt { color: var(--muted); flex: 0 0 41%; }
.flow-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.flow-review-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-review-tags span { padding: 8px 12px; font-size: 10px; background: #eceee3; color: #536047; }
.flow-review-note { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.5; color: var(--muted); margin: 18px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flow-order-card { text-align: center; }
.flow-mini-book { width: 177px; aspect-ratio: .72; margin: 3px auto 30px; background: #46523e; padding: 14px; box-shadow: -3px 0 0 #32412e, 4px 3px 0 #d3cebb, 7px 5px 0 #e8e2d5, 10px 9px 0 #c4bfae, 16px 19px 25px #2e352d15; transform: rotate(-5deg); }
.flow-mini-book-inner { height: 100%; border: 1px solid #a7a28577; display: flex; align-items: center; flex-direction: column; padding: 13px 8px 10px; color: #f0e8ce; }
.flow-book-brand { font-size: 5px; letter-spacing: .27em; }
.flow-book-star { font-size: 30px; line-height: 1; color: #d6b589; margin: 14px 0 11px; }
.flow-book-title { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.flow-book-title em { font-weight: 400; }
.flow-book-subtitle { font-size: 5px; margin-top: 11px; letter-spacing: .05em; }
.flow-book-name { border-top: 1px solid #a7a28577; margin-top: auto; padding-top: 9px; width: 90%; font-family: var(--serif); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-order-card > .eyebrow { margin: 0 0 12px; }
.flow-order-card > h2 { font-family: var(--serif); font-size: 37px; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 26px; }
.flow-order-line { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 17px 0; font-size: 12px; text-align: left; }
.flow-order-line strong { font-size: 17px; font-weight: 400; }
.flow-order-line strong small { font-size: 9px; color: var(--muted); margin-left: 2px; }
.flow-inclusions { padding: 0; margin: 21px 0 26px; list-style: none; text-align: left; }
.flow-inclusions li { font-size: 11px; color: var(--muted); line-height: 1.7; padding: 5px 0 5px 21px; position: relative; }
.flow-inclusions li:before { content: '✓'; position: absolute; left: 0; color: #738164; font-size: 11px; }
.flow-full-button { width: 100%; display: flex !important; justify-content: space-between; gap: 10px; }
.flow-review-foot { text-align: center; font-size: 10px; color: var(--muted); margin: 36px 0 0; }

.flow-complete { text-align: center; padding-top: 60px; padding-bottom: 80px; }
.flow-complete-star { width: 77px; height: 77px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--rust); font-size: 46px; margin: 0 auto 26px; }
.flow-complete h1 { font-size: clamp(64px,7vw,98px); margin: 22px 0 26px; }
.flow-complete-lede { color: var(--muted); font-size: 13px; line-height: 1.9; }
.flow-complete-notice { display: flex; align-items: center; justify-content: center; gap: 18px; background: #e9ecdf; border: 1px solid #d7ddca; max-width: 520px; padding: 18px 24px; margin: 32px auto 53px; text-align: left; }
.flow-complete-notice > span { font-size: 28px; color: #72805f; }
.flow-complete-notice p { color: #58634d; font-size: 10px; line-height: 1.85; margin: 0; }
.flow-complete-notice strong { font-weight: 500; }
.flow-next-chapters { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px; list-style: none; padding: 35px 0 0; margin: 0 auto 50px; max-width: 950px; border-top: 1px solid var(--line); text-align: left; }
.flow-chapter-number { color: var(--rust); font-size: 10px; letter-spacing: .1em; }
.flow-next-chapters h2 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin: 15px 0 12px; letter-spacing: -.025em; }
.flow-next-chapters p { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 270px; }
.flow-complete-actions { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.flow-complete-actions > .text-link { font-size: 11px; }
.flow-complete-footer { font-size: 11px; color: var(--muted); margin: 28px 0 0; }
.flow-complete-footer a { color: var(--ink); text-underline-offset: 3px; }

.flow-contact { padding-top: 93px; padding-bottom: 100px; }
.flow-contact h1 { font-size: clamp(40px,4.6vw,58px); margin: 16px 0 14px; }
.flow-letter-card { position: relative; background: var(--flow-paper); border: 1px solid var(--line); padding: 40px 35px 32px; margin: 0 0 35px; }
.flow-letter-card:after { content: ''; position: absolute; left: 8px; right: -8px; top: 8px; bottom: -8px; border: 1px solid var(--line); z-index: -1; }
.flow-letter-card > h2 { font-family: var(--serif); font-size: 37px; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; margin: 18px 0 12px; }
.flow-letter-card > p:not(.eyebrow):not(.flow-hint) { color: var(--muted); line-height: 1.8; font-size: 12px; }
.flow-email-link { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--rust); text-decoration: none; border-bottom: 1px solid #d9bca9; padding: 18px 0 13px; margin-top: 12px; overflow-wrap: anywhere; }
.flow-email-link:hover { color: var(--ink); }
.flow-letter-signoff { display: block; margin-top: 29px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.flow-letter-signoff em { font-family: var(--serif); font-size: 26px; color: var(--ink); }
.flow-contact-topic { display: flex; gap: 21px; padding: 24px 0; border-top: 1px solid var(--line); }
.flow-contact-topic > span { font-size: 10px; color: var(--rust); margin-top: 4px; }
.flow-contact-topic h2, .flow-contact-topic h3 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 0 0 8px; }
.flow-contact-topic p { color: var(--muted); font-size: 11px; line-height: 1.85; margin: 0; }
.flow-contact-topic p a { color: var(--ink); text-underline-offset: 3px; }

.flow-privacy { padding-top: 76px; padding-bottom: 88px; }
.flow-privacy-heading { padding-bottom: 43px; border-bottom: 1px solid var(--line); }
.flow-privacy h1 { font-size: clamp(60px,6.5vw,89px); margin: 23px 0 26px; }
.flow-privacy-heading > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; }
.flow-policy-date { display: block; font-size: 9px; color: var(--muted); margin-top: 24px; letter-spacing: .03em; }
.flow-privacy-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 100px; padding-top: 46px; }
.flow-privacy-aside { align-self: start; }
.flow-privacy-aside > span { color: var(--rust); font-size: 42px; }
.flow-privacy-aside > p { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 29px; line-height: 1.2; margin: 19px 0 24px; }
.flow-privacy-aside > a { font-size: 10px; }
.flow-privacy-preview { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 22px; max-width: 240px; }
.flow-privacy-preview strong { color: var(--ink); font-size: 10px; font-weight: 500; }
.flow-privacy-preview p { color: var(--muted); font-size: 10px; line-height: 1.85; }
.flow-policy-content { max-width: 620px; }
.flow-policy-content > section { padding: 0 0 32px; margin-bottom: 31px; border-bottom: 1px solid var(--line); }
.flow-policy-number { color: var(--rust); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.flow-policy-content h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; margin: 14px 0 18px; letter-spacing: -.02em; }
.flow-policy-content p { color: var(--muted); font-size: 12px; line-height: 1.95; margin: 12px 0; }
.flow-policy-list { color: var(--muted); font-size: 12px; line-height: 1.95; margin: 12px 0; padding-left: 18px; }
.flow-policy-list li { margin: 0 0 6px; }
.flow-policy-list strong { color: var(--ink); font-weight: 500; }
.flow-policy-content p a { color: var(--ink); text-underline-offset: 3px; }
.flow-policy-content .text-link { font-size: 11px; display: inline-flex; gap: 12px; margin-top: 7px; }
.flow-policy-content .flow-policy-original { font-size: 10px; }
.flow-policy-original a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .flow-shell { gap: 35px; grid-template-columns: .85fr 1.15fr; }
  .flow-form-panel { padding: 27px 25px 20px; }
  .flow-intro h1 { font-size: 61px; }
  .flow-intro-copy { margin-top: 60px; }
  .flow-review-grid { gap: 30px; }
  .flow-contact { gap: 50px; }
  .flow-letter-card { padding: 31px 27px; }
  .flow-privacy-layout { gap: 55px; }
}
@media (max-width: 760px) {
  .flow-shell { grid-template-columns: 1fr; gap: 28px; padding-top: 27px; padding-bottom: 48px; }
  .flow-intro-copy { margin-top: 29px; }
  .flow-intro h1 { font-size: 57px; margin: 18px 0 20px; }
  .flow-intro h1 br { display: none; }
  .flow-intro-copy > p:not(.eyebrow) { font-size: 12px; max-width: none; margin-bottom: 0; }
  .flow-intro-copy > p:not(.eyebrow) br { display: none; }
  .flow-orbit, .flow-intro-note { display: none; }
  .flow-form-panel { padding: 25px 23px 19px; }
  .flow-progress { margin-bottom: 27px; padding-bottom: 23px; }
  .flow-step h2 { font-size: 37px; }
  .flow-step-description { margin-bottom: 25px; }
  .flow-field input, .flow-field textarea, .flow-field select { font-size: 16px; }
  .flow-field input::placeholder, .flow-field textarea::placeholder { font-size: 12px; }
  .flow-review { padding-top: 40px; padding-bottom: 48px; }
  .flow-centered-head { margin-bottom: 30px; }
  .flow-centered-head h1 { font-size: 60px; }
  .flow-review-grid { grid-template-columns: 1fr; gap: 45px; max-width: 540px; }
  .flow-details-card { padding: 27px 23px; }
  .flow-order-card { max-width: 420px; width: 100%; margin: auto; }
  .flow-order-card > h2 { font-size: 40px; }
  .flow-order-card > h2 br { display: none; }
  .flow-mini-book { margin-bottom: 32px; }
  .flow-complete { padding-top: 42px; padding-bottom: 50px; }
  .flow-complete h1 { font-size: 69px; }
  .flow-complete-lede { font-size: 12px; }
  .flow-complete-lede br { display: none; }
  .flow-complete-notice { padding: 17px; gap: 13px; margin-bottom: 35px; }
  .flow-next-chapters { grid-template-columns: 1fr; gap: 25px; padding-top: 28px; margin-bottom: 30px; }
  .flow-next-chapters li { position: relative; padding-left: 41px; }
  .flow-chapter-number { position: absolute; left: 0; top: 5px; }
  .flow-next-chapters h2 { margin-top: 0; font-size: 29px; }
  .flow-next-chapters p { max-width: none; margin-bottom: 0; }
  .flow-complete-actions { flex-direction: column; gap: 22px; }
  .flow-contact { grid-template-columns: 1fr; gap: 30px; padding-top: 42px; padding-bottom: 47px; }
  .flow-contact h1 { font-size: 65px; }
.flow-letter-card { margin-bottom: 33px; }
  .flow-privacy { padding-top: 40px; padding-bottom: 47px; }
  .flow-privacy h1 { font-size: 69px; }
  .flow-privacy-heading { padding-bottom: 28px; }
  .flow-privacy-layout { grid-template-columns: 1fr; gap: 33px; padding-top: 30px; }
  .flow-privacy-aside > span, .flow-privacy-aside > p, .flow-privacy-aside > a { display: none; }
  .flow-privacy-preview { border-top: 0; margin: 0; padding: 18px 20px; max-width: none; background: var(--flow-soft); }
  .flow-privacy-preview p { margin-bottom: 0; }
  .flow-policy-content > section { margin-bottom: 25px; padding-bottom: 25px; }
  .flow-policy-content h2 { font-size: 34px; }
}
@media (max-width: 390px) {
  .flow-form-panel { padding-left: 17px; padding-right: 17px; }
  .flow-progress li { gap: 4px; font-size: 9px; }
  .flow-progress li > span { width: 19px; height: 19px; font-size: 8px; }
  .flow-focus-grid { grid-template-columns: 1fr; }
  .flow-focus-content { min-height: 62px; padding-top: 12px; padding-bottom: 12px; }
  .flow-field-row { grid-template-columns: 1fr; gap: 0; }
  .flow-field > label { font-size: 10px; }
  .flow-field > label > span { font-size: 8px; }
  .flow-intro h1 { font-size: 50px; }
  .flow-email-link { font-size: 13px; }
  .flow-details > div { gap: 15px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-field input, .flow-field textarea, .flow-field select, .flow-focus-content { transition: none; }
}

/* ---- production intake: errors, the city picker, confirmation states ---- */
.errbox { border: 1px solid #c98a76; background: #f8ece6; padding: 18px 22px; margin: 0 0 28px; }
.errbox-head { font-weight: 600; margin: 0 0 8px; }
.errbox ul { margin: 0; padding-left: 20px; }
.errbox li { margin: 4px 0; }
.flow-field.has-error > label { color: #8b4c37; }
.flow-field.has-error input, .flow-field.has-error select, .flow-field.has-error textarea { border-color: #a95f45; }
.flow-field .err { color: #8b4c37; font-size: 16px; line-height: 1.5; margin: 8px 0 0; }
.place-wrap { position: relative; }
/* In the flow, not floating over the form. Floating meant the list covered
   the Continue button, and a press aimed at Continue landed on a suggestion
   and silently chose a city the customer never picked, which computes the
   whole chart for the wrong place. Taking real space moves Continue down
   instead, so nothing can be pressed by accident. */
/* Fixed height, not max-height. The list takes its space from the first
   keystroke and never changes size again, so Continue is where the customer
   saw it when they started reaching for it. Growing from one "Searching..."
   row to six results used to push Continue 280px down between the aim and
   the press, leaving a suggestion under the pixels they meant, and that
   press confirmed a city they never chose. */
/* And the space is reserved from the moment the field is touched, not from
   the moment the first two letters are typed: a customer typing heads down
   would otherwise look up to a Continue button that had moved while they
   were not watching the screen. Reserved only while the picker is in use
   and no city is confirmed yet. */
.place-wrap:not(.place-picked):has(.place-list[hidden]) { padding-bottom: calc(min(200px, 38vh) + 4px); }
/* and the held space says what it is for, rather than reading as a gap the
   page failed to fill. The same sentence as the hint above the field, so a
   reader that announces generated content repeats nothing new. */
.place-wrap:not(.place-picked):has(.place-list[hidden])::after {
  content: "Your matching cities appear here."; position: absolute; left: 0; right: 0; bottom: 0;
  height: min(200px, 38vh); display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); padding: 0 20px; text-align: center;
  color: var(--muted); font-size: 15px;
}
.flow-field:has(.place-wrap:not(.place-picked)) .place-pending[hidden] { display: block !important; visibility: hidden; }
.place-list { margin-top: 4px; background: var(--white, #fbf8f1); border: 1px solid var(--line); box-shadow: 0 14px 40px #2e352d1f; height: min(200px, 38vh); overflow-y: auto; }
.place-option { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; font: inherit; color: var(--ink); cursor: pointer; }
.place-option:last-child { border-bottom: 0; }
.place-option:hover { background: #ece9df; }
.place-option:focus-visible { background: #ece9df; outline: 2px solid var(--rust); outline-offset: -2px; }
.place-note { color: var(--muted); cursor: default; }
.place-confirmed { color: #4c6a3f; font-size: 16px; margin: 10px 0 0; }
.place-pending { color: #8b4c37; font-size: 16px; margin: 10px 0 0; }
.flow-form-actions { display: flex; align-items: center; gap: 18px; }
.flow-form-actions .flow-back-button { margin-right: auto; }
.flow-form-actions .flow-next-button { flex: 1; }
.flow-form-actions .flow-back-button[hidden] + .flow-next-button { flex: 1; }
.flow-progress li.is-done { color: var(--muted); }
.flow-notice > p strong { font-weight: 600; }
@media (max-width: 700px) {
  .flow-form-actions { flex-wrap: wrap; }
  .flow-form-actions .flow-back-button { order: 2; margin: 0 auto; }
  .flow-form-actions .flow-next-button { order: 1; flex-basis: 100%; }
}

/* ---- production refinements ---- */
.flow-card-head .text-link { font-size: 16px; }
.flow-details dt { font-size: 15px; }
.flow-details dd { font-size: 17px; }
.flow-inclusions li { font-size: 16px; }
.flow-preview-note { font-size: 15px; }
.flow-notice-wide { margin: 0 auto 32px; max-width: 720px; }
.flow-form-narrow { max-width: 420px; margin: 28px auto 0; text-align: left; }
.flow-form-narrow .flow-full-button { margin-top: 18px; }
.flow-complete-detail { color: var(--muted); }
@media (max-width: 700px) {
  .flow-progress { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 700px) {
  .flow-progress li { font-size: 15px; }
  .flow-progress { justify-content: flex-start; column-gap: 16px; }
}
.flow-contact-topic p { font-size: 17px; line-height: 1.6; }

/* The keepsake mock-up cut a long name mid-word with nothing to show it had
   ("Alexandrina Konstan"), while the real cover fits it. The preview was
   telling the customer something untrue about their own book. */
.flow-book-name { white-space: normal; overflow-wrap: break-word; line-height: 1.2; }


/* One centred column. The page lost its left hand column, and a single
   column of left aligned blocks floating in the middle of a wide page
   reads as something that failed to load. Centred, with the measure held
   well under the column so the lines still have an edge to come back to. */
.flow-contact-content { max-width: 620px; margin-inline: auto; text-align: center; }
.flow-contact-content .eyebrow { display: block; }
.flow-letter-card { padding: 46px 42px 38px; }
.flow-letter-card > p:not(.eyebrow):not(.flow-hint) { font-size: 15px; max-width: 40ch; margin-inline: auto; }
.flow-email-link { justify-content: center; }
.flow-contact-topic { display: block; padding: 30px 0 0; }
.flow-contact-topic h2, .flow-contact-topic h3 { font-size: 27px; }
.flow-contact-topic p { font-size: 15px; line-height: 1.7; max-width: 52ch; margin-inline: auto; text-wrap: pretty; }
@media (max-width: 700px) {
  .flow-contact { padding-top: 54px; padding-bottom: 62px; }
  .flow-letter-card { padding: 32px 24px 28px; }
  .flow-contact-topic h2, .flow-contact-topic h3 { font-size: 24px; }
}

/* ==================================================================
   The four steps as four phases of one Moon. The reading waxes as the
   form is filled: a crescent for "You", a half Moon for the beginning,
   a gibbous for the focus, a full Moon for the last look. A done step
   is lit brass, the current one breathes a halo, the rest wait as dark
   discs; between them a dotted orbit turns solid as each step is
   passed. The tick that used to follow a done step is gone: the lit
   Moon says it.
   ================================================================== */
body.stellar .flow-progress { display: flex; align-items: center; gap: 0; padding: 0 0 24px; margin: 0 0 30px; border-bottom: 1px solid var(--line); }
body.stellar .flow-progress li { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .15px; color: var(--muted); white-space: nowrap; transition: color .5s; }
body.stellar .flow-progress li:last-child { flex: 0 0 auto; }
body.stellar .flow-progress li::after { content: ""; flex: 1 1 8px; min-width: 8px; height: 0; margin: 0 8px; border-top: 1px dashed #4b4566; transition: border-color .6s; }
body.stellar .flow-progress li:last-child::after { display: none; }
body.stellar .flow-progress li.is-done::after { border-top-style: solid; border-color: var(--rust); }
body.stellar .flow-progress li.is-done { color: #cdc2da; }
body.stellar .flow-progress li.is-current { color: var(--ink); }
body.stellar .step-moon { width: 22px; height: 22px; flex-shrink: 0; overflow: visible; }
body.stellar .step-moon-dark { fill: #1b1830; }
body.stellar .step-moon-lit { fill: var(--rust); opacity: 0; transition: opacity .6s; }
body.stellar .step-moon-limb { fill: none; stroke: #5d5677; stroke-width: 1; transition: stroke .6s; }
body.stellar .step-moon-halo { fill: none; stroke: var(--rust); stroke-width: .8; opacity: 0; transform-origin: 50% 50%; transform: scale(.7); transition: opacity .6s, transform .6s; }
body.stellar .flow-progress li.is-current .step-moon-lit, body.stellar .flow-progress li.is-done .step-moon-lit { opacity: 1; }
body.stellar .flow-progress li.is-current .step-moon-limb, body.stellar .flow-progress li.is-done .step-moon-limb { stroke: var(--rust); }
body.stellar .flow-progress li.is-current .step-moon-halo { opacity: .9; transform: scale(1.35); animation: step-halo 2.8s ease-in-out infinite; }
@keyframes step-halo { 0%, 100% { transform: scale(1.35); opacity: .9; } 50% { transform: scale(1.6); opacity: .25; } }
@media (max-width: 1150px) {
  body.stellar .flow-progress { flex-wrap: wrap; row-gap: 10px; column-gap: 18px; }
  body.stellar .flow-progress li { flex: 0 0 auto; }
  body.stellar .flow-progress li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.stellar .flow-progress li.is-current .step-moon-halo { animation: none; } }
/* The label is a label again. An older rule shaped every span in a step
   into a 22px numbered circle; the Moon has taken that job. */
body.stellar .flow-progress li > .step-label { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
body.stellar .flow-progress li.is-current > .step-label { color: var(--ink); background: none; border: 0; }
body.stellar .flow-progress li.is-done > .step-label { color: inherit; border: 0; }

/* On a phone the four Moons wrapped three and one, leaving "One last
   look" alone on a second row. Two by two keeps reading order and gives
   every step the same footing. The last thing in a step no longer adds
   its own bottom margin on top of the divider's, so the space above the
   divider matches the space below it. */
@media (max-width: 560px) {
  body.stellar .flow-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
}
body.stellar .flow-step > :last-child { margin-bottom: 0; }