@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dmmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dmmono-500.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Azeret Mono";
  src: url("/fonts/azeretmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
:root {
  color-scheme: dark;
  --bg:      #000000;
  --fg:      #ffffff;
  --muted:   #9a9a95;
  --line:    #1f1f1f;
  --line-2:  #333333;
  --accent:  #ffffff;
  --sel:     #ffffff26;
  --display: "Azeret Mono", "DM Mono", ui-monospace, monospace;
  --mono: "DM Mono", ui-monospace, "SF Mono", SFMono-Regular,
          "Menlo", "Consolas", monospace;
  --arr-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 6h1v1H1zM2 5h1v1H2zM3 4h1v1H3zM4 3h1v1H4zM5 2h1v1H5zM3 1h4v1H3zM6 2h1v1H6zM6 3h1v1H6z'/%3E%3C/svg%3E");
  --arr-s:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 1h2v4H3zM1 4h1v1H1zM2 5h1v1H2zM5 5h1v1H5zM6 4h1v1H6zM3 6h2v1H3z'/%3E%3C/svg%3E");
  --rule: 2px;
  --pad-box: clamp(22px, 3vw, 34px);
  --h1: clamp(32px, 9.5vw, 60px);
  --open: .6s;
  --breath: .46s;
  --pad: clamp(22px, 6vw, 72px);
  --max: 1180px;
  --img: 1600px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overscroll-behavior-x: none; }
body {
  margin: 0;
  color: var(--fg);
  background-color: var(--bg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sel); }
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sep { color: var(--line-2); margin: 0 .55em; }
.arr {
  display: inline-block;
  color: var(--fg);
  width: 10px; height: 10px;
  margin-left: .6em;
  font-size: 0;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--arr-ne) no-repeat center / contain;
          mask: var(--arr-ne) no-repeat center / contain;
}
main { overflow-x: clip; }
.intro {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(34px, 6vw, 76px) var(--pad) clamp(56px, 9vw, 108px);
}
@media (max-width: 860px) {
  .intro { padding-top: 26px; padding-bottom: 30px; }
  .index { --w-gap: 22px; }
}
.intro h1 {
  margin: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--h1);
  line-height: .96;
  letter-spacing: .01em;
}
.js [data-in] { opacity: 0; }
.js [data-in].in {
  animation: soft-in .45s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--d, 0ms);
}
.js [data-in="hold"].in,
.js [data-in].in.boot {
  animation: glitch-in .32s steps(1, end) both;
  animation-delay: var(--d, 0ms);
}
@keyframes soft-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glitch-in {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  30%  { opacity: 0; }
  46%  { opacity: 1; }
  62%  { opacity: 0; }
  78%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
.js.locked, .js.locked body { overflow: hidden; }
.js .box {
  width: var(--shut);
  height: var(--shut);
  transition: width var(--open) cubic-bezier(.22, .61, .36, 1),
              height var(--open) cubic-bezier(.22, .61, .36, 1);
}
.js .intro__row.open .box,
.js .intro__row.done .box { width: 100%; height: 100%; }
.intro__mark { display: none; }
.js .intro__mark {
  display: block;
  position: absolute;
  right: calc((var(--shut) - var(--mark-w) * var(--mark-up)) / 2);
  bottom: calc((var(--shut) - var(--mark-h) * var(--mark-up)) / 2);
  width: calc(var(--mark-w) * var(--mark-up));
  height: calc(var(--mark-h) * var(--mark-up));
  background: currentColor;
  -webkit-mask: url("/img/logo-mark.svg") no-repeat center / contain;
          mask: url("/img/logo-mark.svg") no-repeat center / contain;
  color: var(--fg);
  transition: right var(--open) cubic-bezier(.22, .61, .36, 1),
              bottom var(--open) cubic-bezier(.22, .61, .36, 1),
              width var(--open) cubic-bezier(.22, .61, .36, 1),
              height var(--open) cubic-bezier(.22, .61, .36, 1),
              color var(--open) linear;
}
.js .intro__row.open .intro__mark,
.js .intro__row.done .intro__mark {
  right: var(--mark-off);
  bottom: var(--mark-off);
  width: var(--mark-w);
  height: var(--mark-h);
  color: var(--line-2);
}
.js.ready .intro__mark { animation: mark-breathe var(--breath) ease-in-out 2; }
@keyframes mark-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .26; }
}
.js .nameplate { opacity: 0; }
.js.ready .nameplate { opacity: 1; transition: opacity .3s linear; }
.frame {
  --unit: var(--rule);
  --arm: 18px;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / var(--arm) var(--unit),
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / var(--unit) var(--arm),
    linear-gradient(var(--line-2), var(--line-2)) 100% 0 / var(--arm) var(--unit),
    linear-gradient(var(--line-2), var(--line-2)) 100% 0 / var(--unit) var(--arm),
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / var(--arm) var(--unit),
    linear-gradient(var(--line-2), var(--line-2)) 0 100% / var(--unit) var(--arm),
    linear-gradient(var(--line-2), var(--line-2)) 100% 100% / var(--arm) var(--unit),
    linear-gradient(var(--line-2), var(--line-2)) 100% 100% / var(--unit) var(--arm);
  background-repeat: no-repeat;
}
.box {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.nameplate {
  padding: var(--pad-box);
  margin-top: clamp(20px, 2.4vw, 30px);
}
.hatch { color: var(--line-2); }
.js .hb { opacity: 0; transition: opacity .12s linear; }
.js.named .hb { opacity: 1; }
.intro__row {
  --shut: 108px;
  --mark-off: 10px;
  --mark-w: 18px;
  --mark-h: 12px;
  --mark-up: 3.1;
  --pad-bot: calc(var(--pad-box) + var(--mark-off) + var(--mark-h));
  padding: var(--pad-box) var(--pad-box) var(--pad-bot);
  position: relative;
  --lede-gap: 9px;
  display: grid;
  gap: var(--lede-gap);
  margin-top: clamp(26px, 3vw, 38px);
}
.intro__row .lede { margin-top: 0; max-width: 62ch; font-size: 16px; }
.intro__row .lede + .lede { margin-top: var(--lede-gap); }
@media (max-width: 860px) {
  .intro__b .lede { line-height: 1.72; }
}
.lede {
  max-width: 54ch;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.75;
}
.lede b { color: var(--fg); font-weight: 500; }
.nb { white-space: nowrap; }
.lede--lead {
  color: var(--fg);
  max-width: 52ch;
}
.index {
  --w-gap: clamp(32px, 5vw, 64px);
  display: grid;
  gap: var(--w-gap);
}
.w + .w::before {
  content: "";
  display: block;
  width: min(var(--max), calc(100% - var(--pad) * 2));
  margin: 0 auto var(--w-gap);
  border-top: var(--rule) solid var(--line);
}
.index__k {
  width: min(var(--max), calc(100% - var(--pad) * 2));
  margin: 0 auto;
  padding: 0 0 12px;
  border-bottom: var(--rule) solid var(--line);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}
.w { display: block; }
.w__img {
  display: block;
  contain: layout paint;
  position: relative;
  width: min(var(--max), calc(100% - var(--pad) * 2));
  margin: 0 auto;
  overflow: hidden;
  background: #0a0a0a;
}
.w__img picture { display: block; }
.w__img picture { display: block; }
.w__img img {
  display: block; width: 100%; height: auto;
  max-height: 62vh; object-fit: cover; object-position: center;
}
@media (max-width: 860px) {
  .w__img img { max-height: none; }
}
.w__txt {
  max-width: var(--max); margin: 0 auto;
  padding: 24px var(--pad) 0;
  display: grid; gap: 12px;
}
.w__meta {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0;
  font-size: 12.5px; letter-spacing: .16em;
  color: var(--fg); font-weight: 500;
}
.yr {
  color: var(--accent);
  font-size: 12.5px; letter-spacing: .12em; font-weight: 500;
}
.w h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: .015em;
  transition: color .25s ease;
}
@media (hover: hover) { .w:hover h3 { color: var(--accent); } }
.w__sum {
  margin: 0; max-width: 58ch;
  color: var(--muted); line-height: 1.8;
  font-size: clamp(16px, 1.45vw, 18px);
}
.w__sum em { font-style: normal; color: var(--fg); }
.w__link { margin: 6px 0 0; font-size: 11px; letter-spacing: .16em; }
.w__link a {
  position: relative;
  padding-bottom: 6px;
  color: var(--fg);
}
.w__link a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule);
  background: var(--line-2);
}
.w__link a:hover::after { background: var(--accent); }
.soon { color: var(--muted); }
.contact {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 12vw, 132px) var(--pad) clamp(40px, 6vw, 64px);
}
.pair {
  display: flex;
  gap: 0;
  margin: 0 0 28px;
}
.pair img { display: block; width: 84px; height: 84px; }
@media (max-width: 860px) {
  .pair img { width: 72px; height: 72px; }
}
.mail {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(18px, 5.8vw, 58px);
  letter-spacing: -.035em; font-weight: 200;
}
.mail a {
  position: relative;
  padding-bottom: 8px;
}
.mail a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule);
  background: var(--line-2);
}
.mail a:hover::after { background: var(--accent); }
.social {
  display: flex; flex-wrap: wrap; gap: 26px; margin: 34px 0 0;
  font-size: 11px; letter-spacing: .16em; color: var(--muted);
}
.social a { transition: color .2s ease; }
.social a:hover { color: var(--accent); }
.foot {
  display: flex; justify-content: space-between; gap: 20px;
  max-width: var(--max); margin: 0 auto;
  padding: 26px var(--pad) 48px;
  border-top: var(--rule) solid var(--line);
  font-size: 10px; letter-spacing: .16em; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js [data-in], .js .nameplate { opacity: 1 !important; transform: none !important; }
.js.locked, .js.locked body { overflow: hidden; }
.js .box { width: 100%; height: 100%; }
  .js .intro__mark {
    right: var(--mark-off); bottom: var(--mark-off);
    width: var(--mark-w); height: var(--mark-h);
  }
}