/* Page styles — start.html
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

/* The one state colour this page spends, lifted verbatim from
   design-system/tokens/colors.css:32. The design system is a reference package —
   no page links it — so the token has to be declared here rather than inherited.
   Rule: "colour is reserved for STATE and DATA" (colors.css:1), and an invalid
   field is the only state on the site that qualifies.
   Measured: 6.93:1 on --paper, 6.40:1 on the --paper-2 field fill. Both clear AA
   as text and as a control boundary. */
:root{--destructive:#96372b}

h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.nav-links a.on{color:var(--ink);border-bottom:1.5px solid var(--ink)}
header{min-height:40svh;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.hero-in{max-width:820px;margin:0 auto;padding:150px 24px 70px;width:100%}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-0.022em;max-width:20ch}
.hero-sub{max-width:56ch;margin-top:22px;font-size:clamp(16px,1.9vw,19px);color:var(--ink-soft)}
.form-wrap{max-width:820px;margin:0 auto;padding:70px 24px 110px}
.q{margin-bottom:56px}
.q .qn{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:12px}
/* The room question is a <legend>, because it labels a group of checkboxes rather
   than any single control. It is styled with the other two so all three questions
   read as peers.

   Weight 400, not 600. Space Mono ships 400 and 700 only (the page loads exactly
   those two at start.html:21), so a declared 600 resolved up to the loaded 700 and
   these rendered bold — the one weight brand rule 4 reserves for figures. Hierarchy
   here comes from size and tracking, which is the whole reason that rule exists.
   site.css:452 already applies the same correction to h1/h2. */
.q label,.q legend{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2.3vw,24px);letter-spacing:-0.015em;display:block;margin-bottom:8px;line-height:1.25}
.q fieldset{border:0;margin:0;padding:0;min-width:0}
.q legend{padding:0}
.q .hint{font-size:14.5px;color:var(--ink-mute);margin-bottom:16px;max-width:58ch}
/* The field is a recessed slot: --paper-2 fill, 2px plate radius, and the 1.5px
   ink underline the page already had. Before this it was --paper on --paper with
   no border but the underline, so a 90px textarea was an invisible region of the
   page with one rule beneath it — nothing said "type here".

   READ THIS BEFORE CHANGING THE FILL. --paper-2 on --paper measures 1.08:1. The
   fill is an affordance, NOT a boundary, and it cannot carry WCAG 1.4.11 on its
   own. The 1.5px ink underline does that, at 17.95:1. If the underline is ever
   dropped in favour of the fill alone, this field stops conforming. */
.q input[type=text],.q input[type=email],.q textarea{width:100%;max-width:640px;background:var(--paper-2);border:none;border-bottom:1.5px solid var(--ink);font-family:var(--body);font-size:17px;color:var(--ink);padding:12px;border-radius:2px}
/* 96px per the design system's .field spec (components.css:151). The measure cap
   above is the same one the rest of the page obeys — every other text block here
   stops between 56ch and 64ch, and the box people type into was the only thing
   running the full 772px column. */
.q textarea{min-height:96px;resize:vertical;line-height:1.6}
/* The only outline:none in the site used to live here, and it beat the shared
   :focus-visible rule on specificity — so the five fields on the one
   conversion page had no keyboard focus indicator at all (WCAG 2.4.7). A
   visible ring is restored alongside the underline.

   Focus lifts the fill out of its recess to the page tone: the slot reads as
   open. This replaces a rule that set border-bottom-width:1.5px on a border
   already declared 1.5px eight lines above — it changed nothing at all.
   :focus and :focus-visible stay separate on purpose. The fill answers a
   pointer as well as a keyboard; the ring is the keyboard indicator and must
   not appear on click.

   The fill rule repeats the type selectors rather than saying `.q input`,
   because `.q input` also matches the four checkboxes in the room question —
   and a background-color on a native checkbox fights the accent-color that
   draws it. The ring rule below deliberately does NOT narrow: a focused
   checkbox should ring like everything else. */
.q input[type=text]:focus,.q input[type=email]:focus,.q textarea:focus{background:var(--paper)}
.q input:focus-visible,.q textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* --input (#8a877e, 3.41:1) is the brand's control-BOUNDARY token — 3:1 is the bar for
   a border, not for text. These placeholders carry real instruction ("The number, or
   'help us find it.'"), so they are text and take the muted foreground at 4.92:1. */
.q ::placeholder{color:var(--ink-mute);opacity:1}
/* EXTRAPOLATED. The design system specifies input, select and textarea
   (components.css:148-154) and no checkbox. This used to be extrapolated from
   .card -- a hairline plate with a 2px radius -- which is why review read
   question 03 as a different component from questions 01 and 02. It is now
   extrapolated from the textarea instead, the control it actually sits beside.

   The native <input type=checkbox> stays inside the row and keeps accent-color.
   It remains the thing that satisfies WCAG 1.4.11 and renders in forced-colors;
   the row is a hit target and a grouping device, never a replacement control.
   That is also why :has() failing degrades safely — the row stops showing
   checked state, the box itself does not. */
.room-opts{display:flex;flex-direction:column;gap:12px;margin-top:8px;max-width:640px}
/* These rows are the same control as the fields in questions 01 and 02, and are
   built from the same four declarations line 48 gives a textarea: --paper-2
   fill, no box border, a 1.5px --ink bottom rule, 2px radius. A full --line
   outline was what made question 03 read as a different component -- outlined
   boxes stacked above underlined fields, on one form.

   State follows the fields too. `.q textarea:focus` lifts the fill to --paper
   (line 71), so checked lifts to --paper as well rather than inventing a
   channel. Hover previews that same lift instead of moving a border colour,
   which the fields never do.

   Border width stays 1.5px in every state. State is carried by fill, never by
   geometry: site.css:61-64 is explicit that nothing on this site reflows under
   interaction, and a 1px -> 1.5px swap grows the row and shoves the three
   below it. */
.room-opts label{display:flex;align-items:center;gap:14px;font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:0;margin:0;cursor:pointer;padding:12px;background:var(--paper-2);border:none;border-bottom:1.5px solid var(--ink);border-radius:2px;transition:background .28s var(--ease)}
@media(hover:hover){.room-opts label:hover{background:var(--paper)}}
.room-opts label:has(input:checked){background:var(--paper)}
.room-opts input{width:20px;height:20px;accent-color:var(--ink);flex:none}
@media(prefers-reduced-motion:reduce){.room-opts label{transition:none}}
/* Same 640px cap as the textareas, so the form keeps ONE right edge rather than
   a ragged one. */
.contact-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:640px}
@media(max-width:720px){.contact-row{grid-template-columns:1fr}}
.contact-row .q{margin-bottom:0}
/* These three are field labels and take the instrument voice; the three above are
   the QUESTIONS and take the display voice. Two voices, but a hierarchy rather
   than a conflict. Tracking corrected .08em -> .12em to match the design system's
   label spec (components.css:149). */
.contact-row .q label{font-size:15px;font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.send-row{margin-top:64px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
/* Radius 2px, not the marketing pill. components.css:73: "Marketing CTA only. On
   a product screen use .btn--primary, which stays at 2px." A form submit is a
   control, and the nav's pill CTA is six inches above it.

   The selector needs .btn.primary, not .btn: site.css:471 sets the pill at
   specificity 0,2,0 and loads AFTER this sheet, so a plain `.send-row .btn` ties
   and loses on document order. This is 0,3,0 and wins on specificity, which is
   the only thing that survives the load order here. */
.send-row .btn.primary{border-radius:2px}
/* Both of these were inline style= attributes on start.html. Declarations are
   preserved verbatim: `cursor` because a <button>'s UA default is `default`, not
   pointer, and the body face because site.css:321 would otherwise pull the label
   into the mono button voice. (The uppercasing is site.css:274 and applies either
   way — the inline rule only ever governed the typeface.) */
.send-row .btn{cursor:pointer;font-family:var(--body)}
.send-note{font-family:var(--mono);font-size:12.5px;color:var(--ink-mute)}
.after{margin-top:44px;border-left:1.5px solid var(--ink);padding:4px 0 4px 24px;max-width:60ch}
.after p{font-size:15.5px;color:var(--ink-soft)}
.after p strong{color:var(--ink)}
.antifit{margin-top:24px;font-family:var(--mono);font-size:13px;color:var(--ink-mute);max-width:62ch}

/* Required markers and validation.
   This block used to open "No colour: the palette is two tones, so an error is
   never marked by turning something red." That is a rule the brand does not
   have. design-system/tokens/colors.css:1 is the opposite — two tones for
   IDENTITY, and "colour is reserved for STATE and DATA" — and the system ships
   --destructive and a .field--invalid alongside it. An invalid field is state.

   Colour is never the only channel: the error is a word, a rule and a boundary
   as well, so it survives greyscale, colour-vision deficiency and forced-colors.

   The last rule replaces one that set border-bottom-width:1.5px on a border
   already declared 1.5px, which meant an invalid field had NO visual change on
   the control itself — only the message underneath it appeared. No JS was needed
   to fix that: start-form.js:89 already writes aria-invalid on the control and
   :301 clears it on the next keystroke. */
.req-note{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:44px}
.req{font-family:var(--mono);color:var(--ink)}
.field-error{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--destructive);margin-top:8px;padding-left:12px;border-left:1.5px solid var(--destructive)}
.q [aria-invalid=true]{border-bottom-color:var(--destructive)}
.form-status{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:18px;min-height:1.4em}
/* The fallback mailto: offered when a submission fails has to read as a link, since it
   is the one thing on the line a person is meant to act on. */
.form-status a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* The honeypot. Taken out of the layout rather than display:none'd — a bot that reads
   the stylesheet skips a hidden field, but one that only reads the DOM fills this and
   is caught. aria-hidden and tabindex=-1 keep it away from anyone real. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The state after a send. It replaces the form in place, so the page never loses its
   footing, and it borrows the rule-and-margin of .after rather than inventing a panel. */
.form-done{border-left:1.5px solid var(--ink);padding:6px 0 6px 26px;max-width:56ch}
.form-done:focus{outline:none}
.form-done:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
.form-done .qn{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:14px}
/* Weight 400 for the same reason as the questions above. This selector is 0,1,1
   and so beats site.css:452's bare h2, which is why the success heading was the
   one place on the page still asking Space Mono for a weight it does not have. */
.form-done h2{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-0.02em;margin-bottom:20px;max-width:18ch}
.form-done p{font-size:16px;color:var(--ink-soft);max-width:54ch}