/* Mask · scroll. First, Mask's own rules as served at /iykyk/mask/ (its dist page.css, with the
   owner's 9:23 PM and 10:57 PM changes), so state A is the Mask gate as it is. */
/* Mask: 12 col, 24px gutter, 40px margin, 8px baseline. On a light ground the wordmark spans
   columns 3 to 10 and is the only window: its own vector paths clip a canvas of real work,
   blurred to ink at rest and sharp under the pointer. Reveal: hover the mark and the window
   decodes: the clip changes from the wordmark's paths to live SVG text that scrambles and
   locks, letter by letter, into IYKYK (Geist 800), still a crisp vector clip with the work
   inside; leave and it scrambles back to SHUR. A square on the baseline in column 11 is
   the door. */
.mk { position: absolute; inset: 0; }
.mk-logo {
  position: absolute;
  left: calc(var(--m) + 2 * (var(--col) + var(--g)));
  top: calc(50% - (8 * var(--col) + 7 * var(--g)) * 344.23 / 754.68 / 2);
  width: calc(8 * var(--col) + 7 * var(--g));
  aspect-ratio: 754.68 / 344.23;
  margin: 0;
}
.mk-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; clip-path: url(#wm-clip); }

.mk-dot {
  position: absolute;
  left: calc(var(--m) + 10 * (var(--col) + var(--g)));
  top: calc(50% + (8 * var(--col) + 7 * var(--g)) * 344.23 / 754.68 / 2 - 24px);
  width: 24px;
  height: 24px;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  cursor: pointer;
  transition: background-color 280ms var(--ease-out);
}
.mk-dot:hover, .mk-dot:focus-visible, .mk-dot[aria-expanded='true'] { background: var(--ground); }

.mk-gate {
  left: calc(var(--m) + 7 * (var(--col) + var(--g)));
  width: calc(3 * var(--col) + 2 * var(--g));
  top: calc(50% + (8 * var(--col) + 7 * var(--g)) * 344.23 / 754.68 / 2 + 32px);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 520ms var(--ease-out);
}
.mk-gate.is-open { clip-path: inset(-8px -12px -8px -12px); }
.mk-ik { font-family: var(--sans); font-weight: 800; letter-spacing: -0.04em; }

/* Owner 9:23 PM: remove the visible corner square; the door stays as an invisible hotspot. */
.mk-dot, .mk-dot:hover, .mk-dot[aria-expanded="true"] { background: transparent; box-shadow: none; }

/* gate round 4 (the owner 10:57 PM rule: no box, band or plate over type; applied by shur-hero at
   firstmate's call): the email and Enter carry no data-inv, so no plate is made; the label eases
   back on hover instead. The 10:59 PM rule: the review switcher is out of the markup. */
.foot .contact-email, .gate button { transition: opacity 280ms var(--ease-out); }
.foot .contact-email:hover, .foot .contact-email:focus-visible, .gate button:hover, .gate button:focus-visible { opacity: 0.6; }

/* ---- Mask · scroll (owner, 2026-10-29 10:18-10:45 AM PT): only Mask's off-white and black, two
   states and nothing in between. A: the off-white gate. B: the black field, Let's talk, its form,
   the footer's line and SHUR cropped hard at the bottom edge. One scroll, swipe or key snaps between
   them: a curved seam (N's horizon) whips across and everything it passes inverts along the curve,
   the cursor's inversion at page scale. The page itself does not scroll. */
.mk { position: fixed; inset: 0; z-index: 1; }
.mk-logo { transform-origin: 0 0; }

/* the black field: everything below the seam, drawn again in the inverse colours; its clip is the
   seam (set by the page), the same curve the window's shader inverts along */
.ms-dark, .ms-end-dark { position: fixed; inset: 0; clip-path: inset(100% 0 0 0); }
.ms-dark { z-index: 2; background: var(--ink); color: var(--ground); pointer-events: none; }
.ms-end-dark { z-index: 3; color: var(--ground); }
.mk-stage { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; display: block; clip-path: url(#ms-clip); pointer-events: none; }
.is-b .ms-dark, .is-b .ms-end-dark { clip-path: none; }

/* A's cue to scroll (owner, 11:08 AM PT: "we indicate scrolling down"): the word and a thin line
   below it at the bottom centre, a short mark running down the line on a slow loop. It goes with
   the snap, and flips with everything else as the seam passes. */
.ms-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 64px;
  margin-left: -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
/* the word knocked back to the palette's stone and faint (owner, 2026-11-03: "much more muted"), barely there */
.ms-cue .label { color: var(--mute); opacity: 0.4; }
.ms-cue i { position: relative; width: 1px; height: 32px; overflow: hidden; background: color-mix(in srgb, currentColor 20%, transparent); }
.ms-cue i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: currentColor; transform: translate3d(0, -12px, 0); animation: ms-cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes ms-cue { 0% { transform: translate3d(0, -12px, 0); } 70%, 100% { transform: translate3d(0, 32px, 0); } }
@media (prefers-reduced-motion: reduce) { .ms-cue i::after { animation: none; transform: translate3d(0, 10px, 0); } }

/* B's type, on the grid; the light copy (in A's layer) flips with it as the seam passes */
.ms-end { position: fixed; inset: 0; pointer-events: none; opacity: 0; font: 400 15px/24px var(--sans); }
.ms-end-light { position: absolute; color: var(--ink); }
.is-b .ms-end-dark :is(a, button, input, textarea, label) { pointer-events: auto; }
.ms-end p { margin: 0; }
/* the address and © ride from A's bottom corners to B's top corners with the sweep (set by the
   page); the links sit under Let's talk, on its left edge */
.ms-c { opacity: 0.6; }
.ms-nav { position: absolute; top: calc(112px + 8.4vw * 0.88 + 24px); left: var(--m); margin: 0; display: flex; gap: var(--g); }
.ms-talk {
  position: absolute;
  top: 112px;
  left: var(--m);
  margin: 0 0 0 -0.05em;
  font-size: 8.4vw;
  line-height: 0.88;
  font-weight: 800;
  letter-spacing: -0.055em;
  white-space: nowrap;
  /* kerned by hand (owner, 12:14 PM PT: "a kerning pass ... it all should be intentional"): each
     letter's spacing is set in the markup, the font's own pair kerning folded into it, so pairs
     are optically even and where letters meet they just touch, never overlap */
  font-kerning: none;
}
.ms-end a { transition: opacity 280ms var(--ease-out); }
.ms-end a:hover, .ms-end a:focus-visible { opacity: 0.6; }

/* the form: hairline underlines only, no boxes or fills; focus brightens the line and the type */
.ms-form {
  position: absolute;
  top: 128px;
  left: calc(var(--m) + 6 * (var(--col) + var(--g)));
  width: calc(6 * var(--col) + 5 * var(--g));
  display: grid;
  /* (owner, 2026-11-03: "the form ... going too far to the right ... not aligning to the grid") the
     three columns share the grid's last six columns and no more: a field's own width (an input's
     ~194px) no longer pushes the third past the right rail */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--g);
  row-gap: 16px;
  margin: 0;
}
.ms-form[hidden] { display: none; }
.ms-field { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-wide, .ms-send { grid-column: 1 / 4; }
.ms-field .label { opacity: 0.6; }
.ms-field input, .ms-field textarea {
  font: 400 16px/24px var(--sans);
  color: var(--ground);
  caret-color: var(--ground);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ground) 35%, transparent);
  border-radius: 0;
  padding: 4px 0;
  outline: none;
  resize: none;
  width: 100%;
  min-width: 0;
  transition: border-color 240ms var(--ease-out);
}
.ms-field input:focus, .ms-field textarea:focus { border-bottom-color: var(--ground); }
.ms-field [aria-invalid='true'] { border-bottom-color: var(--ground); }
.ms-err { min-height: 16px; opacity: 0.8; text-transform: none; letter-spacing: 0; }
.ms-send { margin: 8px 0 0; }
.ms-send button { color: var(--ground); transition: opacity 280ms var(--ease-out); }
.ms-send button:hover, .ms-send button:focus-visible { opacity: 0.6; }
.ms-end-dark :focus-visible { outline-color: var(--ground); }
.ms-thanks {
  position: absolute;
  top: 128px;
  left: calc(var(--m) + 6 * (var(--col) + var(--g)));
  margin: 0;
  font: 400 20px/32px var(--sans);
  outline: none;
}

/* A finger never moves the page (it does not scroll; Mobile Safari panned it regardless, taking over
   the gesture and cancelling the pointer); pinch zoom stays. The message box scrolls its own text. */
html, body { touch-action: pinch-zoom; overscroll-behavior: none; }
.ms-field textarea { touch-action: auto; }

/* ---- On a phone (768px and under; owner, 2026-11-03: "shur needs to be larger and we need the
   iykyk to work with touch"; "the name and form isn't working for mobile"). The rails come in to
   24px and SHUR spans the screen between them (columns 3 to 10 left it a fifth of a phone's
   width); a finger on the mark reveals IYKYK as the cursor does (page.js), and the mark takes the
   touch rather than the page. The door is a finger's size under the mark's right end, its key
   field across the rails under it. Let's talk sets across the rails with the links under it and
   the form one field to a row below, each field a finger's height; 16px type, so a phone does
   not zoom in on focus; no hover state is left on after a tap. Desktop unchanged. */
@media (max-width: 768px), (max-height: 500px) {
  :root { --m: 24px; --g: 16px; --mark-w: calc(100vw - 2 * var(--m)); --mark-h: calc(var(--mark-w) * 344.23 / 754.68); -webkit-tap-highlight-color: transparent; }
  .mk-logo {
    left: calc(50% - var(--mark-w) / 2);
    top: calc(50% - var(--mark-h) / 2);
    width: var(--mark-w);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .mk { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .mk-dot { left: calc(50% + var(--mark-w) / 2 - 44px); top: calc(50% + var(--mark-h) / 2 + 4px); width: 44px; height: 44px; }
  .mk-gate { left: calc(50% - var(--mark-w) / 2); width: var(--mark-w); top: calc(50% + var(--mark-h) / 2 + 56px); }
  .gate input { height: 44px; padding: 0; }
  .gate button { min-height: 44px; }

  /* Let's talk fits the rails on one line at every phone width (owner: "lets talk ... need to be
     large and go across"): its width is 4.07 times its size */
  .ms-end { --talk: calc((100vw - 2 * var(--m)) * 0.246); --talk-top: 64px; }
  .ms-talk { top: var(--talk-top); font-size: var(--talk); }
  .ms-nav { top: calc(var(--talk-top) + var(--talk) * 0.88 + 12px); gap: 24px; }
  .ms-nav a { display: inline-block; padding: 12px 0; }
  .ms-form, .ms-thanks { top: calc(var(--talk-top) + var(--talk) * 0.88 + 76px); left: var(--m); width: var(--mark-w); }
  /* (owner: "we need better spacing with the form") a field's label, its line and the next field
     each with room: 8px from label to field, 16px between fields, Send 16px below the message */
  .ms-form { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .ms-field { gap: 8px; }
  .ms-wide, .ms-send { grid-column: auto; }
  .ms-field input, .ms-field textarea { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; }
  .ms-err:empty { display: none; }
  .ms-send { margin: 16px 0 0; }
  .ms-send button { min-height: 44px; padding: 0 24px 0 0; }
  .ms-thanks { font-size: 18px; line-height: 28px; }
}
/* Let's talk and the form by the height a phone really has, Safari's toolbars showing (a 402 leaves
   714, a 393 leaves 659, an SE 547), in the room SHUR's crop leaves: the row on the rail, Let's talk
   24px under it, the message one line high */
@media (max-width: 768px) and (max-height: 800px) {
  .ms-form, .ms-thanks { top: calc(var(--talk-top) + var(--talk) * 0.88 + 64px); }
  .ms-nav { top: calc(var(--talk-top) + var(--talk) * 0.88 + 4px); }
  .ms-form { row-gap: 12px; }
  .ms-field textarea { height: 44px; }
  .ms-send { margin: 0; }
}
/* under 700: the form closer */
@media (max-width: 768px) and (max-height: 699px) {
  .ms-end { --talk-top: 56px; }
  .ms-form, .ms-thanks { top: calc(var(--talk-top) + var(--talk) * 0.88 + 56px); }
  .ms-form { row-gap: 8px; }
  .ms-field { gap: 4px; }
}
/* under 640 (an SE): the four fields in pairs, with room again */
@media (max-width: 768px) and (max-height: 639px) {
  .ms-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 12px; }
  .ms-field { gap: 8px; }
  .ms-send { grid-column: 1 / -1; }
}
/* a phone on its side (real height about 283): two columns. Let's talk, the links and SHUR's crop on
   the left (page.js places SHUR), the form on the right */
@media (max-height: 500px) {
  .ms-end { --col2: calc((100vw - 2 * var(--m) - var(--g)) / 2); --talk: min(calc(var(--col2) * 0.246), 17vh); --talk-top: 44px; }
  .ms-nav { top: calc(var(--talk-top) + var(--talk) * 0.88); right: auto; }
  .ms-form, .ms-thanks { top: var(--talk-top); left: calc(var(--m) + var(--col2) + var(--g)); width: var(--col2); }
  .ms-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 12px; }
  .ms-field { gap: 4px; }
  .ms-send { grid-column: 1 / -1; margin: 0; }
  .ms-field textarea { height: 44px; }
}
@media (hover: none) {
  .ms-end a:hover, .ms-send button:hover, .gate button:hover, .foot .contact-email:hover { opacity: 1; }
}