/* The foot's way to write to the studio, on every page, and the waitlist's
   answer states on the home page (P013, ruling box 4, 2026-10-16).

   One sheet for nine pages so the link and the form read the same wherever
   they open. The pages already define the colors and faces used here
   (--ink, --ink-2, --ink-3, --line-2, --sage-deep, --sans, --serif); the
   fallbacks after each are the same values, for a page that ever drops one. */

/* THE LINK. Sits on its own line under the foot's words. 44 tall at every
   width as a real box, not a reach, so it is an honest tap on a phone and the
   foot grows by what it needs (the foot is the last thing on every page, so
   nothing under it moves). */
.foot-write{display:flex; align-items:center; justify-content:center; min-height:44px;
  width:max-content; max-width:100%; margin:12px auto -14px; padding:0 6px;
  font:500 11px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage-deep, #5E7355); text-decoration:none}
.foot-write:hover{color:var(--ink, #23251E)}
.foot-write:focus-visible{outline:2px solid var(--sage-deep, #5E7355); outline-offset:2px; border-radius:3px}
.foot-write[aria-expanded="true"]{color:var(--ink, #23251E)}
/* In a case study's footer the link reads from the left like the index above it. */
.cs-foot .foot-contact{margin-top:18px}
.cs-foot .foot-write{margin:0 0 0 -6px; justify-content:flex-start}

/* PRIVACY AND TERMS (launch rubric line 9). contact.js adds this link right
   under "Write to the studio" on every page and unfolds the text under it.
   The same 44 tall box as the link above, one step quieter. */
.foot-legal{display:flex; align-items:center; justify-content:center; min-height:44px;
  width:max-content; max-width:100%; margin:14px auto -14px; padding:0 6px;
  font:500 10px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2, #5B5C51); text-decoration:none}
.foot-legal:hover, .foot-legal[aria-expanded="true"]{color:var(--ink, #23251E)}
.foot-legal:focus-visible{outline:2px solid var(--sage-deep, #5E7355); outline-offset:2px; border-radius:3px}
.cs-foot .foot-legal{margin:0 0 0 -6px; justify-content:flex-start}
.legal{max-width:560px; margin:22px auto 4px; text-align:left; text-transform:none; letter-spacing:normal;
  font:400 14px/1.6 var(--sans, 'Inter', system-ui, sans-serif); color:var(--ink-2, #5B5C51)}
.cs-foot .legal{margin-left:0}
.legal[hidden]{display:none}
.legal:focus{outline:none}
.legal h2{margin:18px 0 6px; font:500 10px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3, #8E8D7F)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 10px}

/* THE FORM, opened under the link. Plain case and the page's reading face
   again, because the foot's small capitals are for labels, not for typing. */
.cf{max-width:560px; margin:22px auto 4px; text-align:left; text-transform:none; letter-spacing:normal;
  display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
  font:400 14px/1.5 var(--sans, 'Inter', system-ui, sans-serif); color:var(--ink-2, #5B5C51)}
.cs-foot .cf{margin-left:0}
.cf[hidden]{display:none}
.cf .cf-f{display:flex; flex-direction:column; gap:8px; min-width:0}
.cf .cf-f.wide, .cf .cf-go, .cf .cf-status{grid-column:1/-1}
.cf label{font:500 10px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3, #8E8D7F)}
.cf input, .cf textarea{box-sizing:border-box; width:100%; min-width:0; min-height:44px; border:0; border-bottom:1px solid var(--line-2, rgba(35,37,30,.22));
  background:none; padding:10px 0; font:400 15px/1.5 var(--sans, 'Inter', system-ui, sans-serif); color:var(--ink, #23251E); border-radius:0}
.cf textarea{min-height:96px; resize:vertical}
.cf input:focus, .cf textarea:focus{outline:none; border-color:var(--sage-deep, #5E7355); box-shadow:0 1px 0 var(--sage-deep, #5E7355)}
.cf .cf-go{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cf button{min-height:44px; font:500 11px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink, #23251E); border:1px solid var(--ink, #23251E); border-radius:2px; padding:0 22px; background:none; cursor:pointer}
.cf button:focus-visible{outline:2px solid var(--sage-deep, #5E7355); outline-offset:3px}
.cf button[disabled]{opacity:.5; cursor:default}
.cf .cf-go small{font-size:11.5px; color:var(--ink-3, #8E8D7F)}
@media (max-width:560px){ .cf{grid-template-columns:1fr} }

/* THE HONEYPOT. A field named "website" that no person sees, reaches by Tab,
   or hears (aria-hidden on its wrapper); a form filler that fills every field
   fills it, and the function then answers "sent" and sends nothing. Moved off
   the left edge rather than display:none, because some fillers skip fields
   that are not displayed. Off the left edge adds no sideways scroll. */
.hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* The waitlist's button was 41 tall (14px padding, an 11px line, the border),
   measured on pentinian.com at 390 on 2026-10-16. A real 44 box at every
   width, three pixels taller, the words where they were. */
#waitform .btn-line{min-height:44px}

/* THE ANSWER, for both forms. Spoken by a role="status" region. */
.cf-status{margin:0; font:400 15px/1.6 var(--serif, 'Newsreader', Georgia, serif); color:var(--ink, #23251E)}
.cf-status:empty{display:none}
.cf-status a, .cf-fallback a{display:inline-flex; align-items:center; min-height:44px; color:var(--sage-deep, #5E7355);
  text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.cf-fallback{margin:0}
/* Sent: the fields fold away and the answer stays. */
form[data-state="sent"] > :not(.cf-status){display:none}
/* The home page's waitlist grid, so its answer spans both columns. */
#waitform .cf-status{grid-column:1/-1}