/* Get started: the contact form as a sheet in two halves (Xavi, 2 Oct 2026). On the left, on Warm Sand, the copy and the form,
   with no panel; on the right, a picture under the silk, tinted with the warm family and pushed around by the pointer like the
   hero's. The halves rise from the bottom to the top of the view, the picture first and the form a beat behind, and leave the
   other way round; the nav stays over them in its hero state, and a round X drops into its middle to close.
   The fields follow the V5 Forms frame (brand/design-system.md §8): white, a 1 px Coastal Grey edge, padding 16, Book 20, 56 px
   tall; the message below in Medium 14; on focus a 2 px Deep Teal edge plus the 16% ring, the padding stepping down by 1 so
   nothing moves; one primary. Xavi's departures (2 Oct): no radius; the label sits inside the field until it's used, then floats
   above it and stays while the field has a value; the focus is a thicker Dark Gold edge with no ring; everything a step smaller
   than the frame so the sheet fits the view without scrolling; and the form side is set in the brand's warm family, which the
   book keeps for editorial grounds. Sizes scale with the viewport like the rest. The error colour is [OPEN] (§16 #2). */

/* ---------- the sheet and its two halves ---------- */
.sheet,.sheet-x{--sand:#E8D8C4;--stone:#C8B8A6;--gold:#876B46;--amber:#D9A441}                          /* the warm family (design-system §6): Warm Sand, Warm Stone, Dark Gold, Soft Amber */
.sheet{position:fixed;inset:0;z-index:30;overflow:hidden;color:var(--fathom);                          /* the whole view; the nav (z 40) stays over it, in its hero state (below) */
  display:grid;grid-template-columns:1fr 1fr;
  visibility:hidden;transition:visibility 0s .6s}
.sheet.open{visibility:visible;transition:visibility 0s}
.sheet:focus{outline:none}
.sheet-left,.sheet-art{position:relative;min-width:0;min-height:0;transform:translateY(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1)}                                                    /* leaving: quick, eased in; the form first */
.sheet-art{transition-delay:.1s}                                                                        /* then the picture */
.sheet.open .sheet-left,.sheet.open .sheet-art{transform:none;transition:transform .65s cubic-bezier(.2,.7,.2,1)}   /* arriving: the page's soft settle */
.sheet.open .sheet-art{transition-delay:0s}                                                             /* the picture first */
.sheet.open .sheet-left{transition-delay:.14s}                                                          /* the form a beat behind, enough to be seen */
/* the left half: Warm Sand, the family's paper; its content starts under the nav and is sized to fit the view without scrolling,
   which stays as a safety for very short windows; on wide screens it keeps to the page's grid */
.sheet-left{background:var(--sand);overflow-y:auto;overscroll-behavior:contain}
.sheet-body{min-height:100%;max-width:calc(var(--max) / 2);margin-left:auto;
  padding:calc(var(--nav) + clamp(20px,3.5vh,40px)) clamp(24px,5vw,96px) clamp(20px,3.5vh,40px) var(--m);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.2vh,36px)}
.sheet-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sheet-copy .detail{color:var(--gold)}
.sheet-copy .h2{max-width:14ch;font-size:clamp(32px,2.6vw,50px)}                                       /* a step under the section title: 50 at 1920 */
.sheet-copy .lead{font-size:clamp(16px,1.04vw,20px);line-height:1.4;max-width:42ch}
.sheet-left :focus-visible{outline-color:var(--fathom)}
/* the right half: the picture, and the canvas that draws it under the silk once it has (form.js); plain, it's the untreated photo */
.sheet-art{background:var(--sand);overflow:hidden}
.sheet-art img,.sheet-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sheet-art img{object-fit:cover;object-position:50% 50%}
.sheet-art canvas{opacity:0;transition:opacity .6s ease}
.sheet.gl .sheet-art canvas{opacity:1}
.sheet-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--scrim-nav,linear-gradient(180deg,rgba(12,39,60,.7) 0,rgba(12,39,60,.62) 72px,rgba(12,39,60,0) 200px))}   /* the hero's band under the nav, so the white links hold on any picture */
/* the close: a round X in the warm family, centred in the nav's bar, above the nav. It drops in from above once the halves are
   up, with a little give at the end, and goes back up first when the sheet leaves */
.sheet-x{position:fixed;z-index:45;top:calc((var(--nav) - 44px) / 2);left:50%;width:44px;height:44px;margin-left:calc(-22px - var(--sbw,0px) / 2);
  display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--stone);color:var(--fathom);cursor:pointer;
  visibility:hidden;transform:translateY(calc(-100% - var(--nav)));
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s .3s,background-color .25s,color .25s}
.sheet-x.open{visibility:visible;transform:none;transition:transform .55s cubic-bezier(.3,1.3,.5,1) .45s,visibility 0s .45s,background-color .25s,color .25s}
.sheet-x:hover{background:var(--gold);color:var(--white)}
.sheet-x:focus-visible{outline-color:var(--fathom)}
.sheet-x svg{display:block}
@media (max-width:760px){.sheet-x{left:auto;right:var(--m);margin-left:0;top:calc(var(--nav) + 12px)}}   /* a phone's bar has the lockup in its middle: the X sits under the bar at the right, over the picture 
/* the nav over the sheet: its hero state, clear and without "Get started" (form.js keeps it out of .solid while the sheet is up).
   The hero state's ink is white, and the lockup sits over the sand, so there it shows in Fathom, the nav's own swap; the links
   sit over the picture, under the band above. Stacked, below 900 px, everything is over the picture and stays white */
@media (min-width:901px){html.sheet-open .nav .logo .lt{display:none}html.sheet-open .nav .logo .dk{display:block}}
html.sheet-open{overflow:hidden}                                                                        /* the page holds still underneath */
/* while the sheet is up, a classic scrollbar's width stays reserved (--sbw, measured in form.js, as the intro does), so neither the
   page nor the nav shift when it goes and comes back; with overlay scrollbars it's 0 */
html.sheet-open body{padding-right:var(--sbw,0px)}
html.sheet-open .nav{right:var(--sbw,0px)}
html.sheet-open .badge{margin-right:var(--sbw,0px)}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open,.sheet-left,.sheet-art,.sheet.open .sheet-left,.sheet.open .sheet-art,.sheet-x,.sheet-x.open{transition:none}}
@media (max-height:760px){.sheet-body{gap:16px}.sheet-copy{gap:10px}.cf-fields{gap:10px}}            /* short windows: tighter still before it has to scroll */
@media (max-width:900px){                                                                               /* stacked: the picture as a band above the form */
  .sheet{grid-template-columns:1fr;grid-template-rows:calc(var(--nav) + 22vh) minmax(0,1fr)}
  .sheet-art{order:-1}
  .sheet-body{justify-content:flex-start;padding:24px var(--m) 32px}
  /* stacked, the two don't rise: the picture slides in from the left and the form from the right, together, and they leave
     the way they came (Xavi, 6 Oct 2026: rising one after the other "felt off" on a phone). Side by side, above this width,
     nothing changes */
  .sheet-art{transform:translateX(-100%)}
  .sheet-left{transform:translateX(100%)}
  .sheet-art,.sheet.open .sheet-art,.sheet.open .sheet-left{transition-delay:0s}
}

/* ---------- the form, in the warm family: Warm Sand fields with a Warm Stone edge, Dark Gold for the labels, Fathom for what's typed ---------- */
.contact-form{display:flex;flex-direction:column;gap:24px;max-width:520px;
  --cf-h:clamp(44px,2.5vw,48px);               /* the field's height: 48 at 1920 (the frame's 56, a step down, Xavi's "smaller") */
  --cf-t:clamp(15px,.9375vw,18px);             /* its type: 18 at 1920 */
  --cf-room:22px;                              /* the label's room above the field, once it floats */
  --cf-edge:var(--stone);--cf-focus:var(--gold);--cf-focus-w:3px;   /* focus: the edge turns Dark Gold and grows by two pixels; no ring */
  --cf-error:var(--fathom)}                    /* [OPEN #2] Fathom for now; Muted Coral if Julian and Tomi confirm the book's call */
.cf-fields{display:flex;flex-direction:column;gap:12px}
.cf-field{position:relative;display:flex;flex-direction:column;padding-top:var(--cf-room)}
.cf-input{width:100%;height:var(--cf-h);margin:0;padding:0 16px;border:1px solid var(--cf-edge);border-radius:0;background:var(--sand);color:var(--fathom);
  font:400 var(--cf-t)/1.2 var(--font);-webkit-appearance:none;appearance:none}
textarea.cf-input{height:auto;min-height:calc(var(--cf-h) * 1.75);padding:13px 16px;line-height:1.3;resize:vertical}
.cf-input:focus-visible{outline:none;border:var(--cf-focus-w) solid var(--cf-focus);padding-inline:calc(16px - (var(--cf-focus-w) - 1px))}   /* the padding steps down by what the edge grows, so nothing moves */
textarea.cf-input:focus-visible{padding:calc(13px - (var(--cf-focus-w) - 1px)) calc(16px - (var(--cf-focus-w) - 1px))}
/* the label: inside the field, where a placeholder would sit; on focus, or while the field has a value, it floats to the room
   above, smaller, and stays. Book and Dark Gold in both states, so nothing snaps on the way */
.cf-label{position:absolute;left:0;top:0;height:var(--cf-room);display:flex;align-items:center;pointer-events:none;white-space:nowrap;
  font:400 var(--cf-t)/1 var(--font);color:var(--gold);transform-origin:0 50%;
  transform:translate(17px,calc(var(--cf-room) + (var(--cf-h) - var(--cf-room)) / 2));
  transition:transform .22s cubic-bezier(.2,.7,.2,1),font-size .22s ease,letter-spacing .22s ease}
.cf-area .cf-label{transform:translate(17px,calc(var(--cf-room) + 12px))}                              /* on the textarea's first line */
.cf-field:focus-within .cf-label,.cf-input:not(:placeholder-shown) ~ .cf-label,.cf-input:-webkit-autofill ~ .cf-label{
  transform:none;font-size:13px;letter-spacing:.02em}
.cf-opt{position:absolute;right:0;top:0;height:var(--cf-room);display:flex;align-items:center;font-size:13px;letter-spacing:.02em;color:var(--gold)}   /* the optional mark, above the field at the right */
.cf-field.err .cf-input{border-color:var(--cf-error)}
/* what's wrong with a field sits in the room above it, at the right, where "Optional" sits on the last one: the label floats
   at the left of the same room, so the two never meet. The frame puts the message under the field; there it added a line to
   the form each time, and the whole block, centred in its half, jumped as the messages came (the audit of 6 Oct 2026). Here
   nothing moves: the message eases in, and takes no room of its own. It gives way with an ellipsis before it could reach a
   long label on a very narrow screen */
.cf-msg{position:absolute;right:0;top:0;height:var(--cf-room);max-width:62%;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:13px;font-weight:500;line-height:var(--cf-room);letter-spacing:.02em;color:var(--cf-error)}
.cf-msg:empty{display:none}
@keyframes cf-msg-in{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){.cf-msg{animation:cf-msg-in .25s cubic-bezier(.2,.7,.2,1)}}
.cf-input:disabled{color:var(--n400);border-color:var(--stone)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cf-note{color:var(--gold)}
.sheet .btn.warm{background:var(--stone);border-color:var(--stone);color:var(--fathom)}                 /* the primary in the warm family: Warm Stone, Fathom text (Xavi, 2 Oct) */
.sheet .btn.warm:hover{background:var(--gold);border-color:var(--gold);color:var(--white)}              /* Dark Gold on hover */
.contact-form[aria-busy=true] .btn{cursor:progress}          /* busy keeps its label; no spinner */
.contact-form.done .cf-fields,.contact-form.done .cf-actions{display:none}
.cf-done{display:flex;flex-direction:column;gap:12px;outline:none}
.cf-done .detail,.cf-done .small{color:var(--gold)}
.cf-done[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.cf-input{transition:border-color .2s}}
/* where a finger types, the field's type is 16 px or more: under that an iPhone's Safari zooms the page as the field takes
   focus, and leaves it zoomed (the audit of 6 Oct 2026; it was 15). Stacked, or on any touch screen */
@media (max-width:900px),(pointer:coarse){.contact-form{--cf-t:clamp(16px,.9375vw,18px)}}
@media (prefers-reduced-motion:reduce){.cf-label{transition:none}}