/* Shared by every page. Sizes are in rem off a root size that steps down with
   the viewport, so the whole page scales together. */

:root {
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, 0.761);
  --accent: #b6ff1f;
  --accent-ink: #141a05;
  --ground: #181a16;
  --field-border: #c4c4c4;
  --veil: rgba(0, 0, 0, 0.6);
  --gap: 3.5rem;
  --grain: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.21875%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url%28%23noise%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18pt;
  -webkit-text-size-adjust: none;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background-color: var(--ground);
  color: var(--ink);
  font-family: Arial, sans-serif;
  line-height: 1;
}

/* The portrait: fixed behind the text on wide screens, darkened on the left
   where the text column sits. */
body::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-image:
    var(--grain),
    linear-gradient(90deg, rgba(6, 8, 4, 0.66) 18%, rgba(6, 8, 4, 0.08) 54%),
    url("/assets/bg.webp");
  background-size: 512px, cover, cover;
  background-position: center, 0% 0%, top;
}

/* Fade in from black on load. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: #000;
  opacity: 0;
  animation: reveal 0.75s ease-in-out;
}

@keyframes reveal {
  from {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ menu */

/* Pinned to the top-left corner on every page. It needs its own dark backing
   because the portrait and the text both scroll underneath it. */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  gap: 1.5rem;
  padding: 1rem 3rem 0.75rem;
  border-bottom-right-radius: 0.5rem;
  background-color: var(--veil);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.menu a {
  padding-bottom: 0.3rem;
  border-bottom: 3px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.05rem;
  text-decoration: none;
  transition: border-color 0.25s ease;
}

.menu a:hover,
.menu a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------------ page */

.page {
  position: relative;
  width: 33rem;
  max-width: 100%;
  margin-top: 2.5rem;
  padding: 5rem 3rem;
}

.page > * + * {
  margin-top: var(--gap);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.15rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.05rem;
}

/* The short accent rule under every section heading. */
hr {
  width: 2rem;
  height: 3px;
  margin: calc(1.5rem - 1.5px) 0;
  border: 0;
  background-color: var(--accent);
}

p {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.75;
  letter-spacing: -0.025rem;
}

p + p {
  margin-top: 1rem;
}

strong {
  font-weight: bolder;
}

a {
  color: inherit;
  text-decoration: underline;
}

a:hover {
  color: var(--accent);
  text-decoration: none;
}

a:focus-visible,
.contact :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- contact */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 25rem;
  max-width: 100%;
}

p + .contact {
  margin-top: 1.5rem;
}

.contact input,
.contact textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--ink);
  font: 700 1rem Arial, sans-serif;
  letter-spacing: -0.05rem;
  appearance: none;
}

.contact input {
  height: 2.5rem;
  padding: 0 0.875rem;
}

.contact textarea {
  height: 8rem;
  padding: 0.6125rem 0.875rem 0.875rem;
  line-height: 1.5;
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--accent);
}

.contact ::placeholder {
  color: var(--ink);
  opacity: 0.55;
}

/* Off-screen field that only bots fill in. */
.contact .honeypot {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
}

.contact button,
.button {
  height: 2.5rem;
  padding: 0 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 0.5rem;
  background-color: var(--veil);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--accent);
  font: 700 1.5rem Arial, sans-serif;
  letter-spacing: -0.05rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.contact button:hover,
.button:hover {
  background-color: var(--accent);
  color: var(--accent-ink);
}

/* A link dressed as the form's button, for calls to action on sub-pages. */
.button {
  display: inline-block;
  margin-top: 1.5rem;
  line-height: calc(2.5rem - 4px);
  text-decoration: none;
}

.contact button:disabled {
  opacity: 0.35;
  cursor: default;
}

#form-message {
  font-weight: 700;
  line-height: 1.5;
}

#form-message:empty {
  display: none;
}

/* ---------------------------------------------------------------- social */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.social a,
.social svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.social svg {
  fill: var(--ink);
  transition: fill 0.25s ease;
}

.social a:hover svg {
  fill: var(--accent);
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1680px) {
  html {
    font-size: 13pt;
  }
}

/* Stacked: the portrait becomes a banner above a solid text panel. */
@media (max-width: 980px) {
  html {
    font-size: 11pt;
  }

  body::before {
    position: relative;
    display: block;
    width: 100%;
    height: 45vh;
    background-image: var(--grain), url("/assets/bg.webp");
    background-size: 512px, cover;
    background-position: center, top;
  }

  .page {
    width: 75%;
    margin: 0 auto;
  }
}

@media (max-width: 736px) {
  :root {
    --gap: 2.5rem;
  }

  .menu {
    padding-inline: 2rem;
  }

  .page {
    width: 100%;
    padding: 3.5rem 2rem;
  }

  h1 {
    font-size: 3.5rem;
    letter-spacing: -0.13125rem;
  }

  h2 {
    letter-spacing: -0.04375rem;
  }

  p {
    letter-spacing: -0.021875rem;
  }

  .social {
    margin-top: 1.125rem;
  }
}

@media (max-width: 480px) {
  .contact button,
  .button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 360px) {
  :root {
    --gap: 2.1875rem;
  }

  .menu {
    gap: 1rem;
    padding-inline: 1.5rem;
  }

  .page {
    padding: 2.625rem 1.5rem;
  }

  .social {
    gap: 0.75rem;
  }
}