:root {
  --black: #0d0c0b;
  --panel: rgba(13, 12, 11, 0.92);
  --bone: #e6dfd2;
  --dim: #8c857a;
  --rule: rgba(230, 223, 210, 0.22);
  --red: #c4372c;

  --display: "Chivo", "Helvetica Neue", Arial, sans-serif; /* Londrina Solid is only for the tunnel name */
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* painted contour backgrounds, drawn once by main.js */
.paint-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.hero, .join { position: relative; overflow: hidden; }
.hero { background: var(--black); }
.hero > .panel, .join > .panel { position: relative; z-index: 1; }
.scroll-cue { z-index: 1; }

main, footer { position: relative; z-index: 1; }

section {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 80px 16px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Panels ---------- */

.panel {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: clamp(20px, 4vw, 40px);
}

/* ---------- Hero ---------- */

.hero {
  --title: clamp(40px, 6.5vw, 110px);
  --top: clamp(80px, 11vh, 130px);
  position: relative;
  padding-top: var(--top);
  padding-bottom: 96px;
}
/* no box: title and video as big as fit on one screen */
.hero-panel {
  background: none;
  border: 0;
  padding: 0;
  width: min(100%, calc((100svh - 1.5 * var(--title) - 142px - var(--top)) * 16 / 9));
  min-width: min(100%, 320px);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
  font-size: var(--title);
  margin-bottom: clamp(14px, 2.5vw, 28px);
}
.wordmark > span { display: block; white-space: nowrap; }
.wordmark > span:first-child { font-size: .5em; margin-bottom: .1em; }
.wordmark > span:last-child { color: #fff; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--black);
  color: var(--bone);
  font-family: var(--mono);
  text-decoration: none;
  transition: border-color .2s;
}
.scroll-cue:hover { border-color: var(--bone); }

/* ---------- Video ---------- */


.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-soon {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(-32deg, #000 0 7px, #141312 7px 9px);
}
.video-soon span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: #000;
  padding: 10px 16px;
  border: 1px solid var(--rule);
}

/* ---------- Bio ---------- */

.bio { position: relative; overflow: hidden; }
.shards { position: absolute; inset: 0; width: 100%; height: 100%; }

.bio-panel { max-width: 620px; position: relative; }
.bio-panel p { margin: 0 0 1em; font-size: clamp(15px, 2vw, 17px); }
.bio-panel p:last-child { margin-bottom: 0; color: var(--dim); }

/* ---------- Tunnel header ---------- */

.tunnel { position: relative; padding: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--black); }
.tunnel canvas, .tunnel .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art { object-fit: cover; }

/* wordmarks fade in: the header after load, the painting's when you scroll to it */
#tunnel, .wordmark-canvas, .header-video, .painting picture { opacity: 0; transition: opacity 1.8s ease 0.5s; }
.wordmark-canvas, .header-video, .painting picture { transition-delay: 0.3s; }
#tunnel.shown, .wordmark-canvas.shown, .header-video.shown, .painting picture.shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #tunnel, .wordmark-canvas, .header-video, .painting picture { opacity: 1; transition: none; } }

/* ---------- Painting (experiment) ---------- */

.painting { position: relative; padding: 0; height: 100vh; height: 100lvh; min-height: 560px; overflow: hidden; }
.painting .art, .painting .wordmark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* video in the middle of the header (desktop for now; hidden on phones) */
.header-video {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  width: min(60vw, 60vh * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #000;
  z-index: 2;
}
.header-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (orientation: portrait) {
  /* phones: the section is taller than the screen, so place the video by the visible screen height */
  .header-video { width: 92vw; top: 58vh; top: 58svh; }
}

/* bottom-right link to the Substack */
.keep-in-touch {
  position: fixed;
  bottom: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  right: 26px;
  z-index: 10;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #faf6ee;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.keep-in-touch:hover, .keep-in-touch:focus-visible { border-bottom-color: #faf6ee; outline: none; }
/* subtle dark vignette over the painting (under the wordmark) to tame photo glare at the edges */
.painting picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(13, 12, 11, 0) 50%, rgba(13, 12, 11, 0.28) 78%, rgba(13, 12, 11, 0.55) 100%);
}

/* On upright phones, size the art sections to the portrait images' own shape (600x1300).
   Safari reports a shorter screen than you see (its bar floats over the page),
   so "screen height" left a gap; this way they always fill the phone. */
@media (orientation: portrait) {
  .tunnel, .painting { height: max(100lvh, 216.7vw); }
}

/* ---------- Join ---------- */

.join-panel { max-width: 620px; }

h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 64px);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
.join-panel p { margin: 0; color: var(--dim); }

.signup {
  display: flex;
  margin-top: 24px;
  border: 1px solid var(--bone);
}
.signup input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 16px; /* stops iOS zooming in */
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bone);
}
.signup input::placeholder { color: var(--dim); }
.signup input:focus { outline: none; background: rgba(230,223,210,.06); }
.signup button {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 22px;
  border: 0;
  border-left: 1px solid var(--bone);
  border-radius: 0;
  background: var(--bone);
  color: var(--black);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.signup button:hover { background: var(--red); color: var(--bone); }

.signup-msg { min-height: 1.6em; margin-top: 12px !important; font-size: 13px; }

@media (max-width: 520px) {
  .signup { flex-direction: column; }
  .signup button { border-left: 0; border-top: 1px solid var(--bone); padding: 14px; }
}

/* ---------- Footer ---------- */

footer {
  text-align: center;
  padding: 24px 16px 40px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
footer > span { background: var(--black); padding: 6px 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}