/* ==========================================================================
   Contact: a device that writes the first line.

   Writing to someone starts with a blank page, and the blank page is where
   people stop. So the end of the page is a small device in the top bar's
   material: a dark screen that holds the message, four keys that write a
   first line for you, and one key that opens your own email with it already
   written. The send key stays dull until there is something to send.
   Sending signs the faint fingerprint behind it (scripts/contact.js).

   On wide screens everything sits in the left half, so the fingerprint on the
   right stays whole. Without JS the form is a plain email link.
   ========================================================================== */
.contact {
  --dv-hi: #3f3c35;
  --dv-lo: #282621;
  --dv-edge: rgb(0 0 0 / 0.65);
  --dv-shine: rgb(255 255 255 / 0.1);
  --dv-screw: #4a463e;
  --dv-screw-edge: rgb(0 0 0 / 0.55);
  --dv-shadow:
    0 0 0 1px var(--dv-edge),
    inset 0 1px 0 var(--dv-shine),
    inset 0 -2px 0 rgb(0 0 0 / 0.25),
    0 2px 0 rgb(0 0 0 / 0.3),
    0 24px 48px -20px rgb(0 0 0 / 0.7);
  --dv-key: #26241f;
  --dv-key-lo: #1d1b17;
  --dv-key-base: #050504;
  --dv-key-edge: rgb(0 0 0 / 0.55);
  --dv-key-shine: rgb(255 255 255 / 0.07);
  --dv-led-off: #4a463c;
}
[data-theme="light"] .contact {
  --dv-hi: #ffffff;
  --dv-lo: #e6e5de;
  --dv-edge: rgb(32 34 29 / 0.26);
  --dv-shine: rgb(255 255 255 / 0.9);
  --dv-screw: #d6d4ca;
  --dv-screw-edge: rgb(32 34 29 / 0.35);
  --dv-shadow:
    0 0 0 1px var(--dv-edge),
    inset 0 1px 0 var(--dv-shine),
    0 2px 0 rgb(32 34 29 / 0.1),
    0 24px 48px -24px rgb(32 34 29 / 0.35);
  --dv-key: #ffffff;
  --dv-key-lo: #f1f0ea;
  --dv-key-base: #b9b7ad;
  --dv-key-edge: rgb(32 34 29 / 0.22);
  --dv-key-shine: #ffffff;
  --dv-led-off: #cfcdc3;
}

/* ---------- The words around it ---------- */
.reach--device .reach__title {
  margin-top: 0;
  max-width: 20ch;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: none;
}
.reach__other {
  margin-top: var(--s3);
  font-size: 14px;
  line-height: 22px;
  color: var(--paper-mute);
}
.reach__other a {
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--paper-mute);
  text-underline-offset: 4px;
}
.reach__other a:hover { color: var(--accent-text); }
.reach__copied { color: var(--accent-text); }

/* ---------- The device ---------- */
.device {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  margin-top: var(--s4);
  padding: 36px 32px 32px;
  border-radius: 18px;
  background:
    radial-gradient(circle 4.5px at 16px 16px, var(--dv-screw) 3.4px, var(--dv-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 16px) 16px, var(--dv-screw) 3.4px, var(--dv-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at 16px calc(100% - 16px), var(--dv-screw) 3.4px, var(--dv-screw-edge) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 16px) calc(100% - 16px), var(--dv-screw) 3.4px, var(--dv-screw-edge) 3.6px 4.4px, transparent 4.6px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--dv-hi), var(--dv-lo));
  box-shadow: var(--dv-shadow);
}

/* The screen stays dark in both themes, like the dial in the top bar */
.device__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: #0d0d0b;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.85), 0 1px 0 var(--dv-shine);
  color: #ece7dc;
  transition: box-shadow 160ms linear;
}
.device__screen:focus-within { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.85), 0 0 0 2px rgb(198 244 50 / 0.55); }
.device__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.08);
  font: 500 11px/14px var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8a7e;
}
.device__here { display: inline-flex; align-items: center; gap: 8px; }
.device__here time { color: #ece7dc; font-variant-numeric: tabular-nums; }
.device__led {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: #4a463c;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5);
  transition: background-color 200ms linear, box-shadow 200ms linear;
}
.device__led.is-on { background: #c6f432; box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.7); }
.device__text {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  resize: none;
  background: none;
  color: #ece7dc;
  caret-color: #c6f432;
  font: 400 16px/24px var(--f-body);
}
.device__text::placeholder { color: #6f6a5f; }
.device__text:focus { outline: none; }
.device__screen.is-typed .device__text { animation: device-type 360ms var(--ease); }
@keyframes device-type { from { opacity: 0.2; transform: translateY(4px); } }
.device__screen.is-nudge { animation: device-nudge 280ms var(--ease); }
@keyframes device-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.device__bar { height: 2px; margin-top: 8px; border-radius: 1px; background: rgb(255 255 255 / 0.06); overflow: hidden; }
.device__bar span { display: block; height: 100%; background: #c6f432; transform: scaleX(0); transform-origin: left; }
.device__status { min-height: 20px; margin-top: 8px; font-size: 13px; line-height: 20px; color: #8f8a7e; }
.device__status[data-kind="busy"], .device__status[data-kind="done"] { color: #c6f432; }
.device__status[data-kind="empty"] { color: #ece7dc; }

/* Four keys that write a first line */
.device__starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.device__starts[hidden] { display: none; }
.device__start {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 3px;
  padding: 8px 12px;
  border-radius: 9px;
  text-align: left;
  color: var(--paper);
  font: 500 13px/17px var(--f-body);
  background: linear-gradient(180deg, var(--dv-key), var(--dv-key-lo));
  box-shadow: inset 0 1px 0 var(--dv-key-shine), 0 0 0 1px var(--dv-key-edge), 0 3px 0 var(--dv-key-base);
  transition: transform var(--press) var(--ease), box-shadow var(--press) var(--ease), filter var(--press) var(--ease);
}
.device__start:hover { filter: brightness(1.12); }
.device__start:active,
.device__start[aria-pressed="true"] {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 1px var(--dv-key-edge), 0 1px 0 var(--dv-key-base);
}
[data-theme="light"] .device__start:active,
[data-theme="light"] .device__start[aria-pressed="true"] {
  box-shadow: inset 0 1px 2px rgb(32 34 29 / 0.2), 0 0 0 1px var(--dv-key-edge), 0 1px 0 var(--dv-key-base);
}
.device__start-led {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--dv-led-off);
  transition: background-color 120ms linear, box-shadow 120ms linear;
}
.device__start[aria-pressed="true"] .device__start-led { background: #c6f432; box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.75); }
.device__start:focus-visible,
.device__send:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* The one key that sends. Dull until there is something to send. */
.device__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  margin: 4px 0 5px;
  border-radius: 12px;
  font: 600 15px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-mute);
  background: linear-gradient(180deg, var(--dv-key), var(--dv-key-lo));
  box-shadow: inset 0 1px 0 var(--dv-key-shine), 0 0 0 1px var(--dv-key-edge), 0 5px 0 var(--dv-key-base);
  transition: transform 90ms var(--ease), box-shadow 90ms var(--ease), color 200ms linear, filter 120ms linear;
}
.device__send-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dv-led-off);
  transition: background-color 200ms linear;
}
.device.is-ready .device__send {
  color: #141410;
  background: linear-gradient(180deg, #d4fb4e, #b6e223);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 1px rgb(60 80 0 / 0.55), 0 5px 0 #6f8c12, 0 18px 30px -16px rgb(140 180 20 / 0.5);
}
.device.is-ready .device__send-led { background: #141410; opacity: 0.75; }
.device.is-ready .device__send:hover { filter: brightness(1.04); }
.device__send:active,
.device.is-sending .device__send {
  transform: translateY(4px);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.25), 0 0 0 1px var(--dv-key-edge), 0 1px 0 var(--dv-key-base);
  transition-duration: 40ms;
}
.device.is-ready .device__send:active,
.device.is-ready.is-sending .device__send {
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.2), 0 0 0 1px rgb(60 80 0 / 0.55), 0 1px 0 #6f8c12;
}
.device.is-sending .device__send-led { animation: device-blink 300ms steps(2) infinite; }
@keyframes device-blink { 50% { opacity: 0.2; } }

/* ---------- Reveal ----------
   The site's own reveal brings the device up (main.js, .reveal → .is-in).
   Then it switches on, the way a real one would: the screen wakes, its
   light comes on, and the keys rise one after another, 60ms apart like
   everything else on the page. The send key arrives last. */
.js .device.reveal:not(.is-in) .device__top,
.js .device.reveal:not(.is-in) .device__text,
.js .device.reveal:not(.is-in) .device__bar { opacity: 0; }
.js .device.reveal:not(.is-in) .device__screen { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.85), 0 1px 0 var(--dv-shine), inset 0 0 0 999px #050504; }
.js .device.reveal:not(.is-in) .device__led { background: #4a463c; box-shadow: none; }
.js .device.reveal:not(.is-in) .device__start,
.js .device.reveal:not(.is-in) .device__send { opacity: 0; transform: translate3d(0, 12px, 0); }

.device.is-in .device__screen { transition: box-shadow 500ms var(--ease) 120ms; }
.device.is-in .device__top { transition: opacity 300ms linear 220ms; }
.device.is-in .device__text { transition: opacity 300ms linear 320ms; }
.device.is-in .device__bar { transition: opacity 300ms linear 380ms; }
.device.is-in .device__led { transition: background-color 120ms linear 520ms, box-shadow 120ms linear 520ms; }
.device.is-in .device__start,
.device.is-in .device__send {
  transition:
    opacity 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    box-shadow var(--press) var(--ease),
    filter var(--press) var(--ease),
    color 200ms linear;
}
.device.is-in .device__start:nth-child(1) { --d: 260ms; }
.device.is-in .device__start:nth-child(2) { --d: 320ms; }
.device.is-in .device__start:nth-child(3) { --d: 380ms; }
.device.is-in .device__start:nth-child(4) { --d: 440ms; }
.device.is-in .device__send { --d: 540ms; }
/* Once it has settled, keys press at their normal speed again */
.device.is-on .device__start,
.device.is-on .device__send { --d: 0ms; }
.device.is-on .device__start { transition: transform var(--press) var(--ease), box-shadow var(--press) var(--ease), filter var(--press) var(--ease); }
.device.is-on .device__send { transition: transform 90ms var(--ease), box-shadow 90ms var(--ease), color 200ms linear, filter 120ms linear; }

.js.no-motion-lib .device.reveal .device__top,
.js.no-motion-lib .device.reveal .device__text,
.js.no-motion-lib .device.reveal .device__bar,
.js.no-motion-lib .device.reveal .device__start,
.js.no-motion-lib .device.reveal .device__send { opacity: 1; transform: none; }
.js.no-motion-lib .device.reveal .device__screen { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.85), 0 1px 0 var(--dv-shine); }

/* ---------- Wide screens: the left half, so the fingerprint stays whole ---------- */
@media (min-width: 1024px) {
  .contact { padding-top: 112px; }
  .reach--device { width: min(580px, 44vw); }
  .reach--device .reach__title { font-size: clamp(40px, 3.6vw, 52px); }
  .device { margin-top: var(--s3); padding: 28px 24px 24px; gap: 12px; }
  .device__text { min-height: 72px; }
  .device__starts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .device__start { min-height: 48px; padding: 6px 10px; gap: 8px; font-size: 12px; line-height: 15px; }
  .device__send { min-height: 52px; }
  .reach__other { margin-top: var(--s2); }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .device { padding: 28px 16px 20px; gap: 12px; }
  .device__text { min-height: 96px; }
  .device__start { min-height: 44px; padding: 6px 10px; font-size: 12px; line-height: 15px; }
  .device__send { min-height: 54px; font-size: 14px; }
}

/* When no email app answers: one quiet line, same voice as the address line */
.device__alt {
  margin: var(--s2) 0 0;
  color: var(--paper-mute);
  font: 400 var(--label)/var(--label-lh) var(--f-mono);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.device__alt.is-on { opacity: 1; }
.device__alt a,
.device__alt button {
  color: var(--paper-dim);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.device__alt a:hover,
.device__alt button:hover { color: var(--accent-text); }