:root,
[data-theme="dark"] {
  --bg: #0b0b0c;
  --bg-deep: #070708;
  --fg: #efece7;
  --fg-dim: rgba(239, 236, 231, 0.58);
  --fg-faint: rgba(239, 236, 231, 0.28);
  --accent: #d96254;
  --accent-soft: rgba(217, 98, 84, 0.18);
  --rule: rgba(239, 236, 231, 0.14);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Canvas colors, consumed by script.js */
  --pixel-bg: #070708;
  --pixel-fg: 239, 236, 231;
  --pixel-accent: 217, 98, 84;
}

[data-theme="light"] {
  --bg: #f4f1ec;
  --bg-deep: #ece8e1;
  --fg: #1a1817;
  --fg-dim: rgba(26, 24, 23, 0.62);
  --fg-faint: rgba(26, 24, 23, 0.32);
  --accent: #A0382F;
  --accent-soft: rgba(160, 56, 47, 0.14);
  --rule: rgba(26, 24, 23, 0.14);

  --pixel-bg: #ece8e1;
  --pixel-fg: 26, 24, 23;
  --pixel-accent: 160, 56, 47;
}

/* Custom cursor — 7×7 square, follows theme.
   Hotspot set to the center (3, 3). */
html {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><rect width='7' height='7' fill='%23efece7'/></svg>") 3 3, auto;
}
html[data-theme="light"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><rect width='7' height='7' fill='%23070708'/></svg>") 3 3, auto;
}

a, button, [role="button"], label, input, textarea, select, summary {
  cursor: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  cursor: text;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  padding: clamp(24px, 3.5vw, 44px);
  gap: clamp(48px, 8vh, 96px);
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.6s var(--ease);
}

[data-theme="light"] body::before {
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0.35) 100%);
}

#pixel-wall {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
  background: var(--bg-deep);
  transition: background-color 0.6s var(--ease);
}

/* ---------- Header ---------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  opacity: 0;
  transform: translateY(-8px);
  animation: fadeDown 1.1s var(--ease) 0.1s forwards;
}

.site-header .logo {
  justify-self: start;
}

.site-header .meta {
  justify-self: end;
}

.logo {
  display: inline-flex;
  color: var(--fg);
  text-decoration: none;
  transition: color 0.5s var(--ease), transform 0.5s var(--ease);
}

.logo svg {
  height: 38px;
  width: auto;
  display: block;
}

.logo:hover {
  color: var(--accent);
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
}

.meta__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
  animation: pulse 2.6s var(--ease) infinite;
}

.meta__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.4s var(--ease), gap 0.4s var(--ease);
}

.meta__back:hover {
  color: var(--fg);
  gap: 12px;
}

.meta__arrow {
  transition: transform 0.4s var(--ease);
}

.meta__back:hover .meta__arrow {
  transform: translateX(-3px);
}

/* ---------- Hero ---------- */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 32px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.eyebrow__rule {
  width: 36px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

.headline {
  font-size: clamp(44px, 7.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0;
  color: var(--fg);
}

.headline em {
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
  position: relative;
}

.headline .line {
  display: block;
  overflow: hidden;
  /* Give descenders (g, p, y) room without changing visual line spacing */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}

.headline .line > span {
  display: block;
}

.subline {
  /* Tuned so the line breaks naturally after "interfaces,".
     Adjust in 2ch steps if the break lands at a different word. */
  max-width: 72ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--fg-dim);
  margin: 0;
  font-weight: 300;
}

.cta {
  margin-top: clamp(12px, 2vh, 24px);
}

.button {
  --pad-x: 28px;
  --pad-y: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: var(--pad-y) var(--pad-x);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 400;
  overflow: hidden;
  box-shadow: 0 8px 24px -12px var(--accent-soft);
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  z-index: 0;
}

/* Default content: label + arrow */
.button__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition:
    opacity 0.32s var(--ease),
    transform 0.42s var(--ease),
    filter 0.32s var(--ease);
}

.button__label,
.button__icon {
  display: inline-flex;
  align-items: center;
}

.button__icon {
  width: 16px;
  height: 16px;
  transition: transform 0.5s var(--ease);
}

.button__icon svg {
  width: 100%;
  height: 100%;
}

/* Hover content: mail icon, centered */
.button__mail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition:
    opacity 0.38s var(--ease),
    transform 0.52s var(--ease);
}

.button__mail svg {
  width: 28px;
  height: 28px;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.button__mail-body {
  fill: transparent;
}

.button__mail-flap {
  /* Pivot at the flap's attachment line (the top edges of the V,
     where it meets the envelope). Opening flips the tip upward
     while the flap's ends stay anchored to the envelope body. */
  transform-origin: 12px 7.5px;
  transform: translateY(-2px) scaleY(1);
  opacity: 0;
  transition:
    transform 0.55s var(--ease) 0.12s,
    opacity 0.4s var(--ease) 0.12s;
}

/* Hover states */
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px var(--accent-soft);
}

.button:hover::before {
  opacity: 1;
}

.button:hover .button__content {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}

.button:hover .button__mail {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Envelope flap draws in after the body lands */
.button:hover .button__mail-flap {
  transform: translateY(0) scaleY(1);
  opacity: 1;
}


/* Press: envelope opens — flap flips up around its top edge */
.button:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px -10px var(--accent-soft);
}

.button:active .button__mail-flap {
  transform: translateY(-2px) scaleY(-1);
  transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.4, 1);
}


.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 24px -12px var(--accent-soft);
}

/* ---------- Legal page ---------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vh, 32px);
}

.legal__title {
  font-size: clamp(40px, 5.6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 16px 0;
  color: var(--fg);
}

.legal__section h2 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px 0;
  font-weight: 400;
}

.legal__section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-dim);
  margin: 0;
}

.legal__section a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.legal__section a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding-top: 24px;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 1.1s var(--ease) 1.2s forwards;
}

.foot--left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.foot--right {
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.foot--center {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.foot-link {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}

.foot-link:hover {
  color: var(--fg);
}

.foot-sep {
  color: var(--fg-faint);
}

.tag {
  color: var(--fg-dim);
  position: relative;
  padding-left: 14px;
}

.tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--accent);
  opacity: 0.8;
}

/* ---------- Theme toggle (lightbulb) ----------
   Centered in the header. A bare lightbulb that lights up
   when the site is in light mode. */
.theme-toggle {
  justify-self: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    color 0.5s var(--ease),
    transform 0.5s var(--ease),
    filter 0.5s var(--ease);
}

.theme-toggle:hover {
  color: var(--fg);
  transform: scale(1.06);
}

.theme-toggle:focus-visible {
  outline: none;
  color: var(--fg);
}

.theme-toggle:focus-visible .theme-toggle__icon {
  filter: drop-shadow(0 0 6px var(--accent-soft));
}

.theme-toggle__icon {
  width: 40px;
  height: 40px;
  display: block;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.theme-toggle:hover .theme-toggle__icon {
  transform: translateY(-1px);
}

/* Rays — hidden when dark, visible when light */
.theme-toggle__rays {
  opacity: 0;
  transform-origin: 12px 12px;
  transform: scale(0.7) rotate(-30deg);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.theme-toggle__bulb {
  transition: fill 0.5s var(--ease), stroke 0.5s var(--ease);
  fill: transparent;
}

/* Light mode: bulb glows + rays appear */
[data-theme="light"] .theme-toggle {
  color: var(--accent);
}

[data-theme="light"] .theme-toggle__icon {
  filter: drop-shadow(0 0 10px var(--accent-soft));
}

[data-theme="light"] .theme-toggle__rays {
  opacity: 1;
  transform: scale(1) rotate(0);
}

[data-theme="light"] .theme-toggle__bulb {
  fill: var(--accent-soft);
}

/* ---------- Modal / Contact form ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  /* Light vignette only — keeps the HELLO pixels clearly visible behind */
  background: radial-gradient(
    120% 90% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

[data-theme="light"] .modal__backdrop {
  background: radial-gradient(
    120% 90% at 50% 50%,
    rgba(244, 241, 236, 0.1) 0%,
    rgba(244, 241, 236, 0.35) 100%
  );
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.55s var(--ease) 0.1s,
    transform 0.65s var(--ease) 0.1s;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .modal__card {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
  }
}

[data-theme="light"] .modal__card {
  box-shadow: 0 30px 80px -20px rgba(26, 24, 23, 0.25);
}

.modal.is-open .modal__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--fg-dim);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.modal__close svg { width: 18px; height: 18px; }

.modal__close:hover {
  color: var(--fg);
  background: var(--rule);
  transform: rotate(90deg);
}

.modal__eyebrow {
  margin-bottom: 14px;
}

.modal__title {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 10px 0;
}

.modal__subtitle {
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 26px 0;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.field__label em {
  font-style: normal;
  color: var(--fg);
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  margin-left: 4px;
}

.field input,
.field textarea {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.35s var(--ease);
  border-radius: 0;
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

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

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--accent);
}

.field--captcha input {
  max-width: 120px;
}

/* Honeypot — hidden from real users, visible to bots */
.field--honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.modal__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.modal__error {
  margin: 0;
  min-height: 1.2em;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.modal__error.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.modal__actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

.modal__submit {
  border: 1px solid var(--accent);
  cursor: pointer;
  font-family: inherit;
}

/* Success state */
.modal__success {
  display: none;
  text-align: left;
  animation: successIn 0.6s var(--ease);
}

.modal__success.is-shown {
  display: block;
}

/* When a submission has landed, hide the header copy so only the
   success message is shown inside the card. */
.modal.is-sent .modal__eyebrow,
.modal.is-sent .modal__title,
.modal.is-sent .modal__subtitle {
  display: none;
}

.modal__success-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.modal__success-icon svg { width: 22px; height: 22px; }

.modal__success h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 8px 0;
}

.modal__success p {
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@keyframes successIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
  .modal__close { top: 10px; right: 10px; }
  .field--captcha input { max-width: 100px; }
}

/* Lock body scroll while modal is open */
body.modal-open { overflow: hidden; }

/* Curtain: fade out the page chrome before the HELLO flash.
   !important is required to override CSS animations with
   animation-fill-mode: forwards on .site-header / .site-footer —
   those animated end-state values sit above normal declarations
   in the cascade, so without !important the elements would
   otherwise stay visible. */
.site-header,
.hero,
.site-footer {
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease),
    filter 0.5s var(--ease),
    visibility 0s linear 0s;
}

body.is-curtain .site-header,
body.is-curtain .hero,
body.is-curtain .site-footer {
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  filter: blur(3px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease),
    filter 0.5s var(--ease),
    visibility 0s linear 0.5s; /* fully remove from rendering after fade-out */
}

body.is-curtain .hero { transform: translateY(6px) !important; }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease),
    filter 1s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.headline .line[data-reveal] > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
}

.headline .line[data-reveal].is-in {
  filter: blur(0);
  opacity: 1;
  transform: none;
}

.headline .line[data-reveal].is-in > span {
  transform: translateY(0);
}

/* ---------- Animations ---------- */
@keyframes fadeDown {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  /* Header: logo left, bulb right, hide meta */
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .site-header .meta { display: none; }
  .theme-toggle { justify-self: end; }

  /* Footer: stack copyright + imprint on mobile */
  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .foot--left { justify-self: center; text-align: center; }
  .foot--right { justify-content: center; text-align: center; }

  .meta__text { display: none; }
  .logo svg { height: 32px; }
  .theme-toggle__icon { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}