/* One thing per page, sharp corners, one orange accent, and a lot of empty space. */
:root {
  --paper: #EDEFF1;
  --ink: #10151B;
  --muted: #4E5761;
  --line: #8A929B;
  --signal: #E44D17;
  --error: #B4300A;
  --on-signal: #10151B;
  --grid: rgba(16, 21, 27, .055);
  --gutter: clamp(20px, 3vw, 44px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1216;
    --ink: #E8EBEE;
    --muted: #A2ABB5;
    --line: #5F6974;
    --signal: #FF6431;
    --error: #FF8A66;
    --grid: rgba(232, 235, 238, .05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1216;
  --ink: #E8EBEE;
  --muted: #A2ABB5;
  --line: #5F6974;
  --signal: #FF6431;
  --error: #FF8A66;
  --grid: rgba(232, 235, 238, .05);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: center top;
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.top { display: flex; align-items: center; justify-content: space-between; height: 80px; padding-inline: var(--gutter); }
.logo { display: block; }
.mark { display: block; width: 44px; height: 44px; overflow: visible; }
.body { fill: var(--ink); }
.wedge { fill: var(--signal); }
.actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .14s;
}
.theme svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun, .theme[aria-pressed="true"] .moon { display: none; }
.theme[aria-pressed="true"] .sun { display: block; }
.theme:hover { color: var(--signal); }
.theme:focus-visible { outline: 2px solid var(--signal); outline-offset: 0; }
.link {
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 4px;
  background: linear-gradient(var(--signal), var(--signal)) left bottom / 100% 2px no-repeat;
}
.link:hover { color: var(--signal); animation: underline .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes underline { from { background-size: 0 2px; } }

.legal { padding: 0 var(--gutter) 16px; font-size: 13px; color: var(--muted); text-align: right; }

/* Home */
.home { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.home-main { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(14px, 2.4vh, 24px); padding: 0 var(--gutter) 14px; min-width: 0; }
.home h1 { margin: 0; font-size: clamp(22px, 2.5vw, 36px); font-weight: 500; line-height: 1.2; }
.word { display: block; width: 100%; height: auto; overflow: visible; }

/* Contact */
.contact-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.contact-main { width: min(100%, 480px + var(--gutter) * 2); margin-inline: auto; padding: clamp(40px, 10vh, 112px) var(--gutter) var(--gutter); }
.contact-main h1 { margin: 0 0 clamp(32px, 6vh, 52px); font-stretch: 112%; font-size: clamp(36px, 4vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; }
form { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 15px; font-weight: 500; color: var(--muted); }
input, textarea {
  width: 100%;
  padding: 7px 0 9px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--active-line, var(--signal)), var(--active-line, var(--signal))), linear-gradient(var(--rest-line, var(--line)), var(--rest-line, var(--line)));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px, 100% 2px;
  color: var(--ink);
  font: 400 18px/1.35 Archivo, "Helvetica Neue", Arial, sans-serif;
  outline: none;
  transition: background-size .4s cubic-bezier(.16, 1, .3, 1);
}
textarea { display: block; resize: vertical; min-height: 92px; }
input:hover, textarea:hover { --rest-line: var(--ink); }
input:focus, textarea:focus { background-size: 100% 2px, 100% 2px; }
[aria-invalid="true"] { --active-line: var(--error); background-size: 100% 2px, 100% 2px; }
.error-text { font-size: 14px; color: var(--error); }
form button {
  align-self: flex-start;
  padding: 15px 34px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 16px/1 Archivo, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background .14s, color .14s, transform .14s cubic-bezier(.2, .8, .2, 1);
}
form button:hover { background: var(--signal); color: var(--on-signal); transform: translateY(-1px); }
form button:active { transform: translateY(1px) scale(.985); transition-duration: .09s; }
form button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
form button:disabled { opacity: .65; cursor: progress; }
.form-error { margin: 0; font-size: 15px; color: var(--error); overflow-wrap: anywhere; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
h1:focus { outline: none; }
.done p { margin: 0; color: var(--muted); font-size: 18px; }

.crew { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cells { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* Motion. The .js class is only set when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .mark { view-transition-name: mark; }

  .js:not(.go) .word,
  .js:not(.go) h1,
  .js:not(.go) .field,
  .js:not(.go) .big-t .wedge,
  .js:not(.go) .home .actions,
  .js:not(.go) .home .legal,
  .js:not(.go) form button { opacity: 0; }

  .letter, .big-t { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
  .go .letter, .go .big-t { animation: land 1s calc(var(--i, 0) * 65ms + .08s) cubic-bezier(.16, 1, .3, 1) backwards; }
  @media (hover: hover) { .letter:hover, .big-t:hover { transform: translateY(-5px); } }

  .go .big-t .wedge { animation: fall .55s 1.05s cubic-bezier(.55, 0, .9, .35) backwards, wait-hidden 1.05s step-end backwards; }
  .go .word { animation: jolt .32s 1.6s ease-out; }

  .go .home h1 { animation: rise .8s 1.7s cubic-bezier(.16, 1, .3, 1) backwards; }
  .go .home .actions, .go .home .legal { animation: rise .8s 1.8s cubic-bezier(.16, 1, .3, 1) backwards; }
  .go .contact-main h1 { animation: rise .7s .05s cubic-bezier(.16, 1, .3, 1) backwards; }
  .go .field { animation: rise .7s calc(var(--n) * 80ms + .1s) cubic-bezier(.16, 1, .3, 1) backwards; }
  .go form button { animation: rise .7s .42s cubic-bezier(.16, 1, .3, 1) backwards; }
  .go .done { animation: rise .7s cubic-bezier(.16, 1, .3, 1) backwards; }
  .field:nth-of-type(1) { --n: 0; }
  .field:nth-of-type(2) { --n: 1; }
  .field:nth-of-type(3) { --n: 2; }

  @keyframes land { from { transform: translateY(190px); } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes wait-hidden { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fall { from { transform: translateY(var(--fall, -110vh)); } }
  @keyframes jolt { 30% { transform: translateY(4px); } }
}