/* The inquiry page, round 8 (run 3, rounds 2 and 3: the homepage's system). One form for a practice or
   business, or for a home. site.css holds the shared form, brief and photo-frame mechanics; this file sets
   the homepage's grounds, type roles and parts on them: a green opening band with the headline and the
   lede (round 3: the P appears once on the site, at the homepage's opening, so none here), the form on
   stone (questions as a Label number and a Title, options as full-bleed rows on hairlines, fields with
   no box, square photo slots, Send as one square ink block), and the brief on paper with its stamp line.
   The colours are fixed, as on the homepage: they don't follow the dark scheme. */

.start-page {
  --c-green: #3e5c59; --c-night: #0f1715; --c-stone: #e8e2d6; --c-stone-2: #dfd8ca; --c-paper: #f5f2eb;
  --c-ink: #151c1a; --c-ink-2: #4a5652; --c-cream: #f3efe6; --c-cream-2: #c9d6d1; --c-mist: #a9b6b1; --c-amber: #eaa640;
  /* site.css components read these. Fixed in both colour schemes. */
  --limestone: var(--c-stone); --limestone-deep: var(--c-stone-2); --paper: var(--c-paper); --ink: var(--c-ink); --ink-2: var(--c-ink-2);
  --error: #9e2a1d; --accent-ink: var(--c-green); --rule: rgb(21 28 26 / .18); --amber-deep: #b87718;
  --ground: var(--c-stone); --fg: var(--c-ink); --fg-2: var(--c-ink-2);
  --m: 20px; --header-h: 64px;
  --gs: 256px;
  color-scheme: light;
  /* The body is green: the header sits on the green band, and every other part of the page lays its
     own ground over this one. */
  background: var(--c-green); color: var(--c-ink);
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
@media (min-resolution: 2dppx) { .start-page { --gs: 128px; } }
@media (min-resolution: 3dppx) { .start-page { --gs: 85.333px; } }
html:has(> body.start-page) { background: var(--c-stone, #e8e2d6); scrollbar-color: #9aa7a2 #e8e2d6; }
.start-page ::selection { background: rgb(234 166 64 / .5); color: #151c1a; }
.start-page { caret-color: var(--c-green); accent-color: var(--c-green); }
/* One width: site.css's shared parts set their own; here they take the page's. */
.start-page :is(.shot-cap b, .shot-how, .shot-add, .btn, .textlink, .linkbtn, .note, .hint, .chip, .error-summary h2, .skip, .brief-shots span) { font-stretch: 100%; }
.pchip { display: inline-block; flex: none; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.pchip--amber { color: var(--c-amber); }
/* The grain: the homepage's tile, under the content as its own layer (so text sits on a plain colour). */
.start-band, .start-body, .start-page .sheet, .start-page .site-footer { position: relative; isolation: isolate; }
.start-band::before, .start-body::before, .start-page .sheet::before, .start-page .site-footer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--g) 0 0 / var(--gs) var(--gs);
}
.start-band { --g: url('/assets/grain-35.png'); }
.start-body, .start-page .sheet { --g: url('/assets/grain-30.png'); }
.start-page .site-footer { --g: url('/assets/grain-40.png'); }

/* ---------- Header: the nameplate and one text link, over the band ---------- */
.start-page .site-header { position: absolute; inset: 0 0 auto 0; z-index: 5; height: 64px; padding: 0 var(--m); color: var(--c-cream); }
.start-page .site-header::before { display: none; }
.start-page .nameplate { height: auto; min-height: 44px; padding: 6px 8px; border-radius: 7px; box-shadow: none; }
.start-page .nameplate img { width: 92px; height: auto; }
.start-page .site-header .nameplate:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; box-shadow: none; }
.hlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--c-cream); text-decoration: none; font-size: 14px; font-weight: 500; }
.hlink:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.hlink .arrow { width: 15px; height: 15px; }
.start-page .site-header .hlink:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; box-shadow: none; }

/* ---------- The opening band (green): the headline and the lede ---------- */
.start-band { background-color: var(--c-green); color: var(--c-cream); padding: 100px var(--m) 40px; }
.start-title { margin: 0; max-width: none; font-size: clamp(34px, 10.3vw, 40px); font-stretch: 100%; font-weight: 600; line-height: .95; letter-spacing: -0.04em; color: var(--c-cream); }
.start-band .lede { margin: 20px 0 0; max-width: 36ch; font-size: 15px; line-height: 1.45; color: var(--c-cream-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .start-band { padding: 120px 40px 48px; }
  .start-title { font-size: 64px; }
  .start-band .lede { font-size: 18px; max-width: 46ch; }
}
/* Desktop: two lines at 88px; the brief's sheet rises into the band at the right (below). */
@media (min-width: 1100px) {
  .start-band { min-height: 520px; padding: 150px max(64px, (100% - 1312px) / 2) 56px; box-sizing: border-box; }
  .start-title { font-size: 88px; }
  .start-band .br-ph { display: none; }
  .start-band .lede { margin-top: 28px; max-width: 520px; font-size: 20px; }
  .start-page .site-header { height: 72px; padding: 0 64px; }
  .start-page .nameplate img { width: 112px; }
}

/* ---------- The form, on stone ---------- */
.start-body { background-color: var(--c-stone); padding: 8px var(--m) 96px; }
.start-page .start { margin-top: 0; }
.start-page .form { counter-reset: q; }
.start-page .group { padding: 36px 0 32px; border-top: 0; }
/* A question: its number as a Label in green, then the question at Title size. */
.start-page .group legend, .start-page .group > .label {
  display: block; margin-bottom: 18px; font-stretch: 100%; font-weight: 600; font-size: 26px; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance;
}
/* The number in the Label register (run 3, round 3): wide, small, tracked, tabular. */
.start-page .group .num { display: block; min-width: 0; margin-bottom: 10px; font-style: normal; font-stretch: 112%; font-weight: 600; font-size: 12px; letter-spacing: .12em; line-height: 1.3; color: var(--c-green); font-variant-numeric: tabular-nums; }
.start-page .group .num::before { counter-increment: q; content: counter(q); }
.start-page .group .optional { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--c-ink-2); }
.start-page .group--for legend { font-size: 26px; font-weight: 600; font-stretch: 100%; letter-spacing: -0.025em; }
.start-page .hint { margin: -6px 0 14px; font-size: 15px; color: var(--c-ink-2); }
/* Options: full-bleed rows on hairlines, the chip at the left; a chosen row darkens a step and its chip
   turns amber. Single and multiple choice, needed or optional, all the same rows. */
.start-page .options, .start-page .pills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 calc(-1 * var(--m)); border-top: 1px solid var(--rule); }
.start-page .option span, .start-page .pill span {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px var(--m); box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--c-ink); transition: background-color .15s var(--ease-out);
}
.start-page .option span::before, .start-page .pill span::before {
  content: ''; flex: none; width: 9px; height: 10px; border: 0; border-radius: 0; box-shadow: none;
  background: rgb(21 28 26 / .32); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.start-page .option input:checked + span, .start-page .pill input:checked + span { background: var(--c-stone-2); border-color: var(--rule); color: var(--c-ink); font-weight: 600; }
.start-page .option input:checked + span::before, .start-page .pill input:checked + span::before { background: var(--c-amber); transform: scale(1.25); }
.start-page .option--check input:checked + span::before { background: var(--c-amber); box-shadow: none; }
.start-page .option input:hover + span, .start-page .pill input:hover + span { border-color: var(--rule); background: rgb(223 216 202 / .55); }
.start-page .option input:checked:hover + span, .start-page .pill input:checked:hover + span { background: var(--c-stone-2); }
.start-page .option input:focus-visible + span, .start-page .pill input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: -3px; }
.start-page .options--for .option span { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; min-height: 72px; height: auto; font-size: 17px; font-weight: 600; }
.start-page .options--for .option span::before { grid-row: span 2; align-self: center; }
.start-page .option small { font-size: 14px; font-weight: 450; color: var(--c-ink-2); }
.pill { position: relative; display: block; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mini-q { display: grid; gap: 8px; }
.start-page .mini-q + .mini-q { margin-top: 28px; }
.start-page .mini-label { margin-bottom: 4px; font-size: 17px; font-weight: 600; }
.start-page .hint--q { margin: -2px 0 10px; }
/* Text fields: no box, a 1.5px ink rule under them that turns 2px green on focus. */
.start-page :is(.input, .textarea) {
  min-height: 48px; padding: 10px 0 8px; border: 0; border-bottom: 1.5px solid var(--c-ink); border-radius: 0; background: transparent;
  font-size: 17px; color: var(--c-ink); transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.start-page .textarea { min-height: 128px; }
.start-page :is(.input, .textarea):focus { outline: none; border-bottom-color: var(--c-green); box-shadow: 0 1.5px 0 0 var(--c-green); }
.start-page :is(.input, .textarea):focus-visible { outline: none; box-shadow: 0 1.5px 0 0 var(--c-green); }
.start-page :is(.input, .textarea)::placeholder { color: #555f5b; font-style: normal; font-stretch: 100%; }
.start-page :is(.input, .textarea)[aria-invalid='true'] { border-bottom-color: var(--error); box-shadow: 0 1.5px 0 0 var(--error); }
.start-page .field label { font-size: 15px; font-weight: 600; }
.start-page select.input { padding-right: 32px; background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; }
.role-field { margin-top: 22px; }
.role-field label .optional { font-weight: 450; color: var(--fg-2); font-size: .9rem; margin-left: .3em; }
select.input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.start-page .reply-field { margin-top: 20px; }
/* The visitor's photos: square slots with a dashed rule, the sketch of the view inside. */
.start-page .shots { gap: 8px; }
.start-page .shot-frame { aspect-ratio: 1 / 1; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.5px transparent; border: 1.5px dashed rgb(21 28 26 / .34); color: rgb(21 28 26 / .55); }
.start-page .shot-frame:hover { border-color: var(--c-ink); }
.start-page .shot-sketch { top: 14%; height: 50%; }
.start-page .shot-add { border-radius: 0; background: var(--c-paper); box-shadow: none; font-stretch: 100%; }
.start-page .has-photo .shot-frame { border-style: solid; border-color: transparent; }
.start-page .shot-n { border-radius: 0; box-shadow: none; width: auto; height: auto; color: var(--c-green); font-size: 13px; font-weight: 600; transform: none; }
.start-page .has-photo .shot-n { background: none; color: var(--c-green); }
.start-page .shot-how { padding-left: 16px; }
.start-page .shot-remove { border-radius: 0; }
/* The optional questions come after the ones the inquiry needs, under a plain note. */
.start-page .form-more { padding-top: 40px; margin-top: 8px; border-top: 1px solid var(--c-ink); display: grid; gap: 8px; }
.start-page .form-more-title { font-stretch: 100%; font-weight: 600; font-size: 26px; line-height: 1.08; letter-spacing: -0.025em; }
.form-more[hidden] { display: none; }
.skip-send { display: inline-block; margin-top: 4px; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; padding: 11px 0; }
/* Send: one square ink block. */
.start-page .submit-row { padding-top: 32px; border-top: 1px solid var(--c-ink); }
.start-page .submit-row .btn[type='submit'] {
  justify-content: space-between; gap: 16px; width: min(100%, 350px); min-height: 56px; padding: 0 20px; border-radius: 0; box-shadow: none;
  background: var(--c-ink); color: var(--c-cream); font-stretch: 100%; font-size: 17px; font-weight: 600;
}
.start-page .submit-row .btn[type='submit']::before { content: ''; flex: none; width: 9px; height: 10px; background: var(--c-amber); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.start-page .submit-row .btn[type='submit'] .arrow { margin-left: auto; }
.start-page .submit-row .btn[type='submit']:hover { transform: none; box-shadow: none; }
.start-page .submit-row .btn[type='submit']:active { transform: translateY(1px); }
.start-page .submit-row .btn[type='submit']:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; box-shadow: none; }
.send-note { max-width: 46ch; }
.start-page .note { font-stretch: 100%; font-size: 14px; color: var(--c-ink-2); }
.send-status { margin-top: 16px; padding: 14px 16px; background: var(--c-stone-2); font-weight: 600; }
.send-status.is-error { background: var(--c-paper); border: 2px solid var(--error); color: var(--error); }
.send-status[hidden] { display: none; }
/* Errors: square, the error red, named and linked. */
.start-page .error-summary { border-radius: 0; background: var(--c-paper); }
.start-page .error-summary h2 { font-stretch: 100%; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
@media (max-width: 767px) { .error-summary a { font-weight: 500; } }
/* A field people never see: bots fill it in. */
.trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The homepage's choices, arrived: a small night stub above the form. */
.ticket-stub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 24px 0 8px; padding: 14px 18px; background: var(--c-night); color: var(--c-cream); }
.ticket-stub .pchip { grid-row: span 2; }
.ticket-stub-line { font-size: 16px; font-weight: 600; line-height: 1.3; }
.ticket-stub-note { grid-column: 2; font-size: 14px; color: rgb(243 239 230 / .78); }

/* Before anyone chooses, only the first question shows; the brief appears with the first choice. */
.start:has(.form[data-for='']) .brief-col, .start:has(.form[data-for='']) .brief-peek { display: none !important; }

/* Once sent, the form is locked (inert) until "Start another"; its text keeps full contrast. The
   answers the visitor chose keep their own marks. */
.form.is-sent .input, .form.is-sent .textarea, .form.is-sent .option span, .form.is-sent .pill input:not(:checked) + span { background: transparent; }
.start-page .form.is-sent .option input:checked + span, .start-page .form.is-sent .pill input:checked + span { background: var(--c-stone-2); }
.start-page .form.is-sent .btn[type='submit']:disabled { opacity: 1; background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); cursor: default; }
.form.is-sent .btn[type='submit'] .arrow { display: none; }

/* ---------- The brief, on paper ---------- */
.start-page .brief-col { margin: 40px calc(-1 * var(--m)) 0; }
.start-page .sheet { background-color: var(--c-paper); color: var(--c-ink); border-radius: 0; box-shadow: none; border-top: 1px solid var(--c-ink); padding: 28px var(--m) 32px; }
.start-page .sheet.is-done { box-shadow: none; }
/* The head: "Project brief" in Display 2, who it is for under it. */
.start-page .sheet-head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'for'; align-items: start; gap: 10px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--c-ink); }
.start-page .sheet-head h2 { grid-area: title; font-stretch: 100%; font-weight: 600; font-size: clamp(34px, 10.3vw, 40px); line-height: .95; letter-spacing: -0.04em; }
.start-page .sheet-head .sheet-for { grid-area: for; text-align: left; white-space: normal; }
.start-page .subject { font-stretch: 100%; font-size: 15px; }
/* The stamp line: no panel; the chip, "Sent to Patton.", the note under it. */
.start-page .stamp { margin: 18px 0 6px; padding: 0; border: 0; border-radius: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
.start-page .stamp::before { content: ''; width: 9px; height: 10px; margin-top: 6px; background: var(--c-amber); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.start-page .stamp strong { font-stretch: 100%; font-weight: 600; font-size: 17px; }
.start-page .stamp .note { grid-column: 2; font-size: 13px; }
.start-page .stamp:not([hidden]) { animation: stamp-in .5s var(--ease-out) both; }
@keyframes stamp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The two actions become text links. */
.start-page .sheet-actions { gap: 4px 24px; margin: 8px 0 10px; }
.start-page .sheet-actions .btn { min-height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-ink); font-stretch: 100%; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.start-page .sheet-actions .btn:hover { transform: none; box-shadow: none; background: none; text-decoration-color: transparent; }
/* The rows: Building, The work and Where as the homepage's three-column spec row; the rest as label and
   value rows on hairlines. */
.start-page .sheet dl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.start-page .sheet dl > div { grid-column: 1 / -1; grid-template-columns: 7rem minmax(0, 1fr); }
.start-page .sheet dl > .cell { grid-column: auto; grid-row: 1; display: block; padding: 10px 0 14px; border-top: 1px solid var(--c-ink); border-bottom: 0; }
.start-page .sheet dl > .cell--where { order: -1; grid-column: 3; }
.start-page .sheet dl > .cell dt { margin-bottom: 4px; }
.start-page .sheet dt { font-stretch: 112%; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.start-page .sheet dd { font-size: 15px; }
.start-page .sheet dd.empty { font-style: normal; color: var(--c-ink-2); }
.start-page .sheet-foot { margin: 12px var(--m) 0; }
/* The brief's photos: square, no prints. */
.start-page .brief-shots li { background: none; padding: 0; border-radius: 0; box-shadow: none; transform: none; }
/* Phones: a square ink block shows the brief filling in below the form, and takes you to it. */
.start-page .brief-peek { border-radius: 0; background: var(--c-ink); }
.start-page .chip { border-radius: 0; background: var(--c-stone-2); }

/* ---------- Footer, on night ---------- */
.start-page .site-footer { background-color: var(--c-night); color: var(--c-cream); border: 0; --fg: var(--c-cream); --fg-2: var(--c-mist); --rule: rgb(243 239 230 / .16); }
.start-page .site-footer .body, .start-page .site-footer .note { color: var(--c-mist); }
.start-page .site-footer .body strong { color: var(--c-cream); }
.start-page .site-footer a { color: var(--c-cream); }
.start-page .footer-plate { border-radius: 7px; }
.start-page .site-footer :focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; box-shadow: none; }

@media (min-width: 768px) {
  .start-body { padding: 24px 40px 120px; }
  .start-page .options, .start-page .pills { margin: 0; }
  .start-page .brief-col { margin: 48px 0 0; }
  .start-page .sheet { padding: 28px 28px 32px; }
}
/* Desktop: the form in columns 1-7 on stone; the brief, a paper sheet in columns 9-12, starting up on
   the green band and running down onto the stone, sticky under the top. */
@media (min-width: 1100px) {
  .start-body { padding: 24px 64px 140px; }
  .start-page .start { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .start-page .form-col { grid-column: 1 / 8; }
  .start-page .brief-col { grid-column: 9 / 13; position: sticky; top: 96px; margin: -404px 0 0; z-index: 4; }
  .start-page .sheet-head h2 { font-size: 40px; }
  .start-page .group legend, .start-page .group > .label, .start-page .form-more-title { font-size: 32px; }
}
@media (max-width: 960px) and (min-width: 768px) { .start-page .brief-col { position: static; } }

/* Phones: hints at full reading size, and Send across the column. */
@media (max-width: 767px) {
  .start-page .submit-row .btn[type='submit'] { width: 100%; }
}

/* When the form's script can't run: a plain way to reach Patton, shown above the first question. */
.form-fallback { margin: 24px 0; padding: 14px 16px; background: var(--c-stone-2); font-weight: 500; }
.form-fallback a { font-weight: 650; }
.no-form [data-form-fallback] { display: block !important; }
/* Without its script the form can't send, so only the email way is shown. */
.no-form .form, .no-form .brief-col, .no-form .brief-peek { display: none !important; }

/* The homepage's work ticket glides into the brief sheet here (wide screens; a cross-page view
   transition, plain navigation everywhere else). */
@view-transition { navigation: auto; }
@media (min-width: 901px) { .sheet { view-transition-name: ticket; } }

@media print {
  .start-band, .start-body::before, .start-page .sheet::before { display: none !important; }
  .start-page .sheet { border-top: 0; }
}