:root {
  --ink: #171717;
  --muted-ink: #6d6d68;
  --paper: #fdfdfb;
  --line: rgba(23, 23, 23, 0.075);
  --accent: #f15a2a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
a { color: inherit; text-decoration: none; }

.landing-shell {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-position: center;
  background-size: 8.333333vw 100%, 100% 96px;
}

.landing-shell::before,
.landing-shell::after {
  position: absolute;
  z-index: -1;

  content: "";
  background: var(--line);
}
.landing-shell::before { top: 0; bottom: 0; left: 6.333333vw; width: 1px; }
.landing-shell::after { top: 96px; right: 6.333333vw; left: 6.333333vw; height: 1px; }

.grain {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.hero {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: 8.333333vw minmax(0, 1fr) 8.333333vw;
  align-items: center;
  padding: clamp(64px, 11vh, 144px) 0 clamp(82px, 13vh, 168px);
}
.hero-content { grid-column: 2; max-width: 980px; padding: 0 5.4vw; }

.email-headline {
  display: block;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  animation: rise-in 850ms 120ms var(--ease-out) both;
  transition: transform 220ms var(--ease-out);
}
.email-headline:hover { transform: translateY(-3px); }
.email-headline:hover .headline-text {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.email-headline:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.email-headline, .email-headline .headline-text {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(42px, 7.15vw, 112px);
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: .91;
  overflow-wrap: anywhere;
}
.email-headline .headline-text { display: block; max-width: 930px; }
.at-symbol { color: var(--accent); font-weight: 400; }
.headline-domain { white-space: nowrap; }

.hero-copy {
  max-width: 440px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  color: var(--muted-ink);
  font-size: 14px;
  line-height: 1.55;
  animation: rise-in 700ms 200ms var(--ease-out) both;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 44px); animation: rise-in 700ms 280ms var(--ease-out) both; }
.cta {
  display: inline-flex;
  min-width: 168px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 17px 16px 19px;
  border: 1px solid var(--ink);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
}
.cta:hover { transform: translateY(-3px); }
.cta:active { transform: scale(.97); }
.cta-primary { background: var(--ink); color: var(--paper); }
.cta-primary:hover { border-color: var(--accent); background: var(--accent); }
.cta-secondary { background: transparent; }
.cta-secondary:hover { background: var(--ink); color: var(--paper); }
.cta-arrow { font-family: "DM Sans", sans-serif; font-size: 16px; }
.cta:hover .cta-arrow { transform: translate(2px, -2px); }

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 30px 8.333333vw;
  border-top: 1px solid var(--line);
  color: var(--muted-ink);
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: rise-in 700ms 350ms var(--ease-out) both;
}
.corner { position: absolute; z-index: 3; width: 12px; height: 12px; border-color: var(--accent); border-style: solid; }
.corner-tl { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.corner-br { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }

.contact-toggle { position: absolute; opacity: 0; pointer-events: none; }
.lightbox-backdrop { display: none; }
.contact-toggle:checked ~ .lightbox-backdrop {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(23, 23, 23, .28);
  backdrop-filter: blur(8px);
  animation: fade-in 180ms ease-out both;
}
.contact-lightbox {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100svh - 48px);
  overflow: auto;
  padding: clamp(30px, 5vw, 52px);
  background: var(--paper);
  box-shadow: 0 24px 80px rgba(23, 23, 23, .2);
  animation: rise-in 260ms var(--ease-out) both;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  cursor: pointer;
  font: 400 24px/1 "DM Sans", sans-serif;
  transition: background 180ms ease, color 180ms ease;
}
.lightbox-close:hover { background: var(--ink); color: var(--paper); }
.lightbox-kicker { margin: 0 0 18px; color: var(--accent); font: 10px "DM Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }
.contact-lightbox h2 { margin: 0 0 34px; font: 500 clamp(42px, 7vw, 72px)/.9 "DM Sans", sans-serif; letter-spacing: -.08em; }
.contact-lightbox h2 em { color: var(--accent); font-style: normal; }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 8px; }
.contact-form label > span { font: 9px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(23,23,23,.22); border-radius: 0; background: transparent; color: var(--ink); font: 14px/1.4 "DM Sans", sans-serif; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9a9a94; }
.contact-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 17px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; font: 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; transition: background 180ms ease, transform 180ms var(--ease-out); }
.contact-submit:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-2px); }

@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
  .landing-shell { background-size: 25vw 100%, 100% 78px; }
  .landing-shell::before { left: 25vw; }
  .landing-shell::after { top: 78px; right: 25vw; left: 25vw; }
  .hero { grid-template-columns: 17vw minmax(0, 1fr); align-items: start; padding: 19vh 0 15vh; }
  .hero-content { grid-column: 2; padding: 0 7.5vw 0 5vw; }
  .email-headline, .email-headline .headline-text { font-size: clamp(40px, 11.7vw, 76px); line-height: .93; }
  .headline-domain { display: block; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .hero-copy { max-width: 260px; font-size: 12px; }
  .cta-row { flex-direction: column; max-width: 220px; }
  .cta { width: 100%; min-width: 0; }
  .site-footer { padding: 23px 7.5vw; font-size: 8px; }
  .contact-toggle:checked ~ .lightbox-backdrop { padding: 16px; }
  .contact-lightbox { max-height: calc(100svh - 32px); padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }