/* Book page form as a letter to Dylan (2026-10-06), built by js/book-form.js
   from the plain form in book.html, which is what shows if the script fails.
   Fraunces in ink; every rule is scoped to .fl-sentence. */

/* "I want to book a session / ask a question": the picked one in the answer
   colour, the other scratched out with the site's scribble */
.fl-intent button { position: relative; display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .4s, opacity .4s; }
.fl-intent button:hover { color: var(--fl-answer, var(--ink)); }
.fl-intent button.is-on { color: var(--fl-answer, var(--ink)); font-weight: 600; text-decoration: none; }
.fl-intent.has-pick button:not(.is-on) { color: #A8A8A8; text-decoration: none; }
.fl-intent button::after { content: ''; position: absolute; left: -2%; right: -2%; top: 50%; height: .32em; margin-top: -.12em; background: var(--ink); -webkit-mask: var(--scribble-b) center / 100% 100% no-repeat; mask: var(--scribble-b) center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out); pointer-events: none; }
.fl-intent.has-pick button:not(.is-on)::after { clip-path: inset(0 0 0 0); }
.fl-intent button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
form.is-asking .fl-book-only,
form.is-asking #package-includes,
form.is-asking #light { display: none !important; }
form:not(.is-asking) .fl-ask-only { display: none; }

/* ---------------------------------------------------------------- Sentence */
.fl-sentence { --fl-answer: var(--ink); --fl-font: 'Fraunces', Georgia, serif; }
.fl-sentence .fl-note { margin: 0 0 36px; font-family: var(--fl-font); font-size: clamp(1.55rem, 2.8vw, 2.3rem); font-weight: 300; line-height: 1.85; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.fl-sentence .fl-blank { display: inline-block; max-width: 100%; vertical-align: baseline; }
.fl-sentence .fl-pkg-clause[hidden] { display: none; }
.fl-sentence .fl-note .field { display: inline-block; max-width: 100%; margin: 0; padding: 0; vertical-align: baseline; }
.fl-sentence .fl-note .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* What they type: bold, in the answer colour, never wider than the line */
.fl-sentence .fl-note .field input { width: auto; max-width: 100%; box-sizing: border-box; padding: 0 2px 2px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; font: inherit; font-weight: 600; color: var(--fl-answer); line-height: 1.3; text-overflow: ellipsis; }
.fl-sentence .fl-note .field input::placeholder { color: #A8A8A8; font-weight: 300; }
.fl-sentence .fl-note .field input:focus { outline: none; border-bottom: 2px solid var(--fl-answer); }
.fl-sentence .fl-note .select-wrap { position: relative; display: inline-block; max-width: 100%; }
.fl-sentence .fl-note .custom-select { display: inline-flex; align-items: baseline; gap: 10px; width: auto; max-width: 100%; min-height: 0; padding: 0 2px 2px; border: 0; border-bottom: 1px solid var(--ink); background: none; font: inherit; line-height: 1.3; cursor: pointer; white-space: normal; text-align: left; }
.fl-sentence .fl-note .custom-select span { font: inherit; font-weight: 600; color: var(--fl-answer); }
.fl-sentence .fl-note .custom-select span:empty::before { content: attr(data-hint); font-weight: 300; color: #A8A8A8; }
.fl-sentence .fl-note .custom-select:focus-visible { outline: none; border-bottom: 2px solid var(--fl-answer); }
.fl-sentence .fl-note .select-arrow { flex: none; width: 12px; height: auto; transform: translateY(-4px); }
.fl-sentence .fl-note .select-dropdown { left: 0; right: auto; width: max-content; min-width: 260px; max-width: min(420px, calc(100vw - 32px)); font-size: 1rem; line-height: 1.4; letter-spacing: 0; font-weight: 400; }
.fl-sentence .fl-note .date-picker { min-width: 320px; }
.fl-sentence #package-includes { margin: -16px 0 28px; }
.fl-sentence .light-week { margin-bottom: 40px; }
.fl-sentence .field textarea { font-weight: 600; color: var(--fl-answer); }
@media (max-width: 600px) {
  .fl-sentence .fl-note { line-height: 2; }
}

/* award.css sets proxima-nova on every element (*), so hand the sentence font
   to everything inside the note except the dropdown menus */
.fl-sentence .fl-note * { font-family: var(--fl-font); }
.fl-sentence .fl-note .select-dropdown,
.fl-sentence .fl-note .select-dropdown * { font-family: proxima-nova, 'Montserrat', sans-serif; }

/* ---------------------------------------------------------------- Sentence layouts
   Fraunces in ink, three ways of setting it (?look=flow|letter|editorial). */
.fl-sentence .fl-note { text-wrap: pretty; }
.fl-sentence .fl-line { display: inline; }
/* quieter rules under the blanks, solid ink once answered or focused */
.fl-sentence .fl-note .field input,
.fl-sentence .fl-note .custom-select { border-bottom-color: rgba(28,28,28,.28); transition: border-color .3s; }
.fl-sentence .fl-note .field input:not(:placeholder-shown),
.fl-sentence .fl-note .field.has-value .custom-select { border-bottom-color: var(--ink); }
.fl-sentence .fl-note .field input:focus,
.fl-sentence .fl-note .custom-select:focus-visible { border-bottom: 1px solid var(--ink); box-shadow: 0 1px 0 var(--ink); }
.fl-sentence .fl-note .field input::placeholder,
.fl-sentence .fl-note .custom-select span:empty::before { color: #B3B3B3; }
.fl-sentence .fl-note .field input { padding: 0 0 2px; }
.fl-sentence .fl-note .custom-select { padding: 0 0 2px; gap: 8px; }
.fl-sentence .fl-note .select-arrow { width: 10px; opacity: .5; }
.fl-sentence .fl-intent button { text-decoration-color: rgba(28,28,28,.35); }

/* Letter: a short note, one thought per line, like writing to him */
.fl-look-letter .fl-note { font-size: clamp(calc(1.35rem - 2px), calc(2.2vw - 2px), calc(1.75rem - 2px)); font-weight: 300; line-height: 1.65; letter-spacing: -0.01em; }
.fl-look-letter .fl-line,
.fl-look-letter .fl-book-only { display: block; }
.fl-look-letter .fl-line { margin-bottom: .45em; }
.fl-look-letter .fl-hi { margin-bottom: 1em; font-style: italic; }

/* Book or ask is required: unpicked on submit, both options turn red */
.fl-intent.fl-missing button { color: #A3342B; text-decoration-color: #A3342B; text-decoration-thickness: 2px; }
.fl-nb { white-space: nowrap; }

/* Booking runs on from the choice; before a choice (or when asking) the line just ends */
.fl-sentence:not(.is-booking) .fl-book-cont { display: none; }
.fl-sentence.is-booking .fl-stop { display: none; }

/* ---------------------------------------------------------------- Letter, final polish */
/* Name, email, phone: real inputs (so contact AutoFill works), sized to
   their hint or answer by js/book-form.js and never past the end of the line */
.fl-sentence .fl-note .fl-blank .field input { font-weight: 600; color: var(--fl-answer); text-overflow: ellipsis; }
.fl-sentence .fl-note .fl-blank .field input::placeholder { font-weight: 300; }
.fl-sentence .fl-blank.fl-own { display: block; width: fit-content; max-width: 100%; }
.fl-sentence .fl-note .field input.fl-missing { border-bottom: 2px solid #A3342B; }
.fl-sentence .fl-note .field input.fl-missing::placeholder { color: #A3342B; }
/* Safari and Chrome tint autofilled fields; keep the letter clean */
.fl-sentence .fl-note .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--paper) inset; -webkit-text-fill-color: var(--fl-answer); }
.fl-ruler { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: pre; letter-spacing: normal; pointer-events: none; }

/* Dropdowns: a quiet floating card in the same type as the sentence */
.fl-sentence .fl-note .select-dropdown { border: 0; padding: 10px 0; background: var(--paper); box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.05); min-width: 280px; }
.fl-sentence .fl-note .select-dropdown .select-option { position: relative; padding: 9px 24px 9px 34px; border: 0; font-family: var(--fl-font); font-size: 1.2rem; font-weight: 300; letter-spacing: -0.005em; line-height: 1.35; text-transform: none; color: var(--ink); transition: background .2s; }
.fl-sentence .fl-note .select-dropdown .select-option:hover { background: #F6F6F4; }
.fl-sentence .fl-note .select-dropdown .select-option.selected { font-weight: 600; background: none; color: var(--ink); }
.fl-sentence .fl-note .select-dropdown .select-option.selected::before { content: ''; position: absolute; left: 16px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.fl-sentence .fl-note .select-dropdown .opt-incl { display: block !important; margin-top: 3px; font-family: proxima-nova, 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 400; color: var(--stone); line-height: 1.5; }
.fl-sentence .fl-note .select-dropdown .opt-info { display: none !important; }
.fl-sentence .fl-note .select-dropdown .select-option:has(.opt-info) { padding-right: 24px; }
.fl-sentence .fl-note .date-picker { border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.05); padding: 16px; }

/* Message and Submit in the sentence's type */
.fl-sentence .field:has(#cf-message) { display: flex; flex-direction: column; padding-top: 0; margin-bottom: 36px; }
.fl-sentence .field:has(#cf-message) label { order: -1; }
.fl-sentence .field:has(#cf-message) label { position: static; display: block; margin-bottom: 6px; font-family: var(--fl-font); font-size: clamp(calc(1.35rem - 2px), calc(2.2vw - 2px), calc(1.75rem - 2px)); font-weight: 300; letter-spacing: -0.01em; text-transform: none; color: var(--ink); transform: none; }
.fl-sentence #cf-message { font-family: var(--fl-font); font-size: calc(1.15rem - 2px); font-weight: 400; line-height: 1.6; color: var(--ink); border-bottom-color: rgba(28,28,28,.28); }
.fl-sentence #cf-message:focus { border-bottom-color: var(--ink); }
.fl-sentence #cf-message::placeholder { color: #A8A8A8; font-weight: 300; opacity: 1; }
.fl-sentence .submit-btn { font-family: var(--fl-font); font-size: clamp(calc(1.35rem - 2px), calc(2.2vw - 2px), calc(1.75rem - 2px)); font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.fl-sentence #cf-message.fl-missing { border-bottom: 2px solid #A3342B; }
.fl-sentence .field:has(#cf-message.fl-missing) label { color: #A3342B; }
.fl-sentence .fl-note .select-dropdown.fl-times { min-width: 200px; max-height: 300px; overflow-y: auto; }

/* Never wider than the screen; js/book-form.js slides them back inside it */
.fl-sentence .fl-note .select-dropdown { max-width: calc(100vw - 24px); }
.fl-sentence .fl-note .date-picker { min-width: 0; width: min(320px, calc(100vw - 24px)); }
/* Narrow picker: the hint wraps, Done stays on one line */
.fl-sentence .fl-note .dp-foot { gap: 12px; }
.fl-sentence .fl-note .dp-foot span { flex: 1; line-height: 1.4; }
.fl-sentence .fl-note .dp-done { flex: none; white-space: nowrap; }

/* Email, phone and FAQ: one quiet line under Submit (moved out of the hero) */
.book-alt { margin-top: 18px; font-size: 0.8rem; line-height: 1.6; color: var(--ash); }
.book-alt a { color: var(--stone); text-decoration: none; transition: color .2s; }
.book-alt a:hover,
.book-alt a:focus-visible { color: var(--ink); }

/* The letter sits on a soft cool-grey panel. Its left edge lines up with
   the intro paragraph; it reaches out to the right by its padding instead,
   into the gap before the photos, so the text keeps its full width. */
.contact-form-wrap:has(.fl-sentence) { --fl-panel: #F4F4F4; --fl-pad: clamp(18px, 2.2vw, 30px); background: var(--fl-panel); max-width: calc(560px + 2 * var(--fl-pad)); margin-right: calc(-2 * var(--fl-pad)); padding: clamp(26px, 3vw, 40px) var(--fl-pad) clamp(22px, 2.6vw, 34px); }
@media (max-width: 600px) {
  .contact-form-wrap:has(.fl-sentence) { --fl-pad: var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
}
.fl-sentence .fl-note .field input,
.fl-sentence #cf-message { background: transparent; }
.fl-sentence .fl-note .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--fl-panel) inset; }
.fl-sentence .fl-note .select-dropdown .select-option:hover { background: #F6F6F6; }

/* The next blank to fill: a soft highlighter stroke swiped in behind it
   (js/book-form.js moves .fl-next along the letter). */
.fl-sentence .fl-blank,
.fl-sentence .fl-intent button,
.fl-sentence #cf-message,
.fl-sentence .submit-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 8C52 4 122 6.5 196 2.5L199 15C138 19.5 70 15.5 1 19Z' fill='%231C1C1C' fill-opacity='0.13'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 80%;
  background-size: 0% 62%;
  transition: background-size 0.5s cubic-bezier(.22, 1, .36, 1);
}
.fl-sentence #cf-message { background-position: left top; }
.fl-sentence .fl-blank.fl-next,
.fl-sentence .fl-intent.fl-next button,
.fl-sentence .fl-next #cf-message,
.fl-sentence .submit-btn.fl-next { background-size: 100% 62%; }
.fl-sentence .fl-next #cf-message { background-size: 100% 2.4em; }
@media (prefers-reduced-motion: reduce) {
  .fl-sentence .fl-blank, .fl-sentence .fl-intent button, .fl-sentence #cf-message, .fl-sentence .submit-btn { transition: none; }
}

/* Reply-time promise right under Submit; the contact line sits below it */
.book-reply { margin-top: 10px; }
.book-reply + .book-alt { margin-top: 6px; }