/* davidzgray.com coming-soon page. Look: v4 "Index" theme (paper, ink, Recursive, chamfer, five tabs). */
@font-face {
  font-family: "Recursive";
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/recursive-latin-subset.woff2) format("woff2");
}

:root {
  --paper: #EDEEEA;
  --ink: #15171A;
  --graphite: #4F5358;
  --rule: #C8CAC4;
  --work: #2B4A6F;
  --consult: #3E6B58;
  --lab: #F2A007;
  --studio: #E0402F;
  --games: #22B3C8;
  --margin: clamp(20px, 5vw, 72px);
  --chamfer: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  font-family: "Recursive", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vh, 48px);
  align-content: center;
  padding: clamp(28px, 6vh, 64px) var(--margin);
  max-width: 1680px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .page { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
}

/* Name mark: the chamfer block and the name */
h1 {
  display: flex; align-items: flex-start; gap: 0.28em;
  font-size: clamp(40px, min(11vw, 15vh), 148px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h1 i {
  flex: none; display: block;
  width: 0.34em; height: 0.8em; margin-top: 0.09em;
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 0.12em) 0, 100% 0.12em, 100% 100%, 0 100%);
}
@media (min-width: 640px) { h1 { font-size: clamp(40px, min(7.4vw, 15vh), 132px); } }
@media (min-width: 1100px) { h1 { font-size: clamp(40px, min(6.2vw, 15vh), 116px); } }
@media (min-width: 640px) { h1 span { white-space: nowrap; } }

.role {
  margin-top: clamp(14px, 2.4vh, 24px);
  font-size: clamp(22px, min(2.6vw, 5vh), 44px);
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.soon {
  display: inline-flex; align-items: center;
  margin-top: clamp(20px, 4vh, 40px);
  min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--paper);
  font-size: clamp(17px, 1.05vw, 24px); font-weight: 700; letter-spacing: 0.01em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.contact { margin-top: clamp(14px, 2.4vh, 24px); font-size: clamp(18px, 1.15vw, 26px); }
.contact a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--ink); font-weight: 560;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--rule);
}
.contact a:hover { text-decoration-color: var(--ink); }

/* The five tabs, closed */
.tabs {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  border-left: 3px solid var(--ink);
  padding-left: 0;
}
.tabs li {
  display: flex; align-items: center;
  min-height: 56px;
  padding: 0 22px;
  font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  background: var(--c); color: var(--k);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.tabs li:nth-child(1) { --c: var(--work);    --k: #fff; }
.tabs li:nth-child(2) { --c: var(--consult); --k: #fff; }
.tabs li:nth-child(3) { --c: var(--lab);     --k: var(--ink); }
.tabs li:nth-child(4) { --c: var(--studio);  --k: #fff; }
.tabs li:nth-child(5) { --c: var(--games);   --k: var(--ink); }
@media (min-width: 640px) {
  .tabs { align-self: stretch; justify-content: center; max-height: 640px; }
  .tabs li { flex: 1 1 0; min-height: 52px; max-height: 112px; }
}

/* Calm entrance: tabs slide in one by one. Off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .tabs li { animation: in 520ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--n) * 70ms + 80ms); }
  .tabs li:nth-child(1) { --n: 0; } .tabs li:nth-child(2) { --n: 1; } .tabs li:nth-child(3) { --n: 2; }
  .tabs li:nth-child(4) { --n: 3; } .tabs li:nth-child(5) { --n: 4; }
  @keyframes in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
}

/* 404 */
.nf h1 { font-size: clamp(34px, min(5.2vw, 12vh), 96px); }
.nf .back { font-size: clamp(17px, 1.05vw, 24px); }
.nf .code { font-size: clamp(18px, 1.1vw, 28px); font-weight: 700; margin-bottom: 8px; color: var(--graphite); }
.nf .back {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 0 22px;
  background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}