:root {
  --ground: #1a1514;
  --panel: #241d1c;
  --ink: #f1e7da;
  --mute: #9c8b7a;
  --line: rgba(241, 231, 218, .2);
  --accent: #e8571b;
  --display: "Instrument Serif", Georgia, serif;
  --text: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --inset: 64px;
  --radius: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--ground); color-scheme: dark; }
body { color: var(--ink); font: 16px/1.5 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.nav {
  position: fixed;
  top: 20px;
  left: var(--inset);
  right: var(--inset);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 96px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(var(--ground) 65%, rgba(26, 21, 20, 0));
  opacity: var(--nav-shade, 0);
  transition: opacity .4s;
}
.nav .group { display: flex; gap: 24px; }
.nav .right { justify-content: flex-end; }
.pill { font-size: 14.5px; white-space: nowrap; }
.pill:hover { text-decoration: underline; }
.pill.book { color: var(--accent); }
.wordmark { font: 46px/.92 var(--display); }

.hero { height: 270vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow-x: clip; }

.card {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--line);
  background: var(--ground);
}
.ph {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: center;
  color: var(--mute);
}

.enter {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font: italic clamp(22px, 2.2vw, 30px)/1 var(--display);
}

.title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}
.title h1 { font: clamp(48px, 10.5vw, 190px)/.92 var(--display); letter-spacing: -.01em; }
.title h1 .w { display: inline-block; transform-origin: 0 0; }
.title .sub {
  order: -1;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

section { padding: 120px var(--inset); }
h2 { margin-bottom: 48px; font: clamp(40px, 6vw, 96px)/1 var(--display); text-transform: uppercase; }
.lead { font: clamp(28px, 3vw, 42px)/1.2 var(--display); }
.link { border-bottom: 1px solid var(--line); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.squares .ph { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--line); }

footer { display: flex; flex-direction: column; gap: 28px; padding: 40px var(--inset) 48px; }
.request {
  display: flex;
  flex-direction: column;
  height: min(50vh, 460px);
  padding: clamp(28px, 5vw, 72px);
  border: 1px dashed var(--line);
}
.request b { font: clamp(56px, 11vw, 200px)/.9 var(--display); }
.note { margin-top: -12px; font: 13px Arial, Helvetica, sans-serif; color: var(--mute); }

.contact { margin-top: 32px; font-size: 15px; }
.contact a:hover { text-decoration: underline; }
.credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.credit a { color: var(--ink); border-bottom: 1px solid; }

@media (max-width: 720px) {
  :root { --inset: 16px; }
  section { padding: 88px var(--inset); }
  .nav .group { gap: 14px; }
  .nav .right .pill:not(.book) { display: none; }
  .pill { font-size: 13.5px; }
  .wordmark { font-size: 30px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .title h1 { font-size: clamp(36px, 7vh, 48px); }
}

@media (max-width: 380px) {
  .nav { gap: 8px; }
  .pill { font-size: 12.5px; }
  .wordmark { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; }
}