@font-face {
  font-family: "Field Serif";
  src: local("Iowan Old Style"), local("Baskerville"), local("Times New Roman");
  font-display: swap;
}

:root {
  --bone: #eee4d0;
  --bone-soft: #d2c7b5;
  --ink: #181116;
  --plum: #3d2c36;
  --moss: #26352e;
  --celadon: #a6beb0;
  --line: rgba(238, 228, 208, .28);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  color: var(--bone);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

button:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

.field {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #251b22;
}

.underpainting,
#world,
.grain,
.trace-layer,
.eyelid {
  position: absolute;
  inset: 0;
}

.underpainting {
  z-index: -4;
  background-image:
    linear-gradient(90deg, rgba(11, 18, 15, .2), transparent 44%, rgba(21, 12, 19, .18)),
    url("field-underpainting.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(.76) contrast(1.12) brightness(.72);
  transform: scale(var(--field-scale, 1.035)) translate3d(var(--field-x, 0), var(--field-y, 0), 0) rotate(var(--field-rotate, 0deg));
  transition: transform 2.6s cubic-bezier(.22, .64, .12, 1), filter 2.6s ease;
}

#world {
  z-index: -3;
  width: 100%;
  height: 100%;
}

.grain {
  z-index: 10;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: soft-light;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.masthead {
  position: absolute;
  z-index: 3;
  top: max(28px, env(safe-area-inset-top));
  left: clamp(24px, 4vw, 64px);
}

.eyebrow,
.dialog-kicker,
.return-label {
  margin: 0 0 10px;
  color: var(--celadon);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: "Field Serif", Georgia, serif;
  font-size: clamp(28px, 3.6vw, 62px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .94;
  text-shadow: 0 2px 30px rgba(10, 8, 10, .8);
}

.watching {
  position: absolute;
  z-index: 3;
  top: max(32px, env(safe-area-inset-top));
  right: clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(238, 228, 208, .78);
  font-size: 11px;
  letter-spacing: .08em;
}

.watch-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(238, 228, 208, .8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(24, 17, 22, .85);
  background: var(--celadon);
}

.invitation {
  position: absolute;
  z-index: 6;
  left: clamp(24px, 7vw, 110px);
  bottom: clamp(72px, 12vh, 122px);
  width: min(430px, calc(100% - 48px));
  padding: 26px 0 0;
  text-align: left;
  text-shadow: 0 2px 28px #0d090c, 0 2px 12px #0d090c;
  transition: opacity .8s ease, transform .8s ease, visibility 0s .8s;
}

.invitation::before,
.invitation::after {
  content: "";
  position: absolute;
  left: -40px;
  z-index: -1;
  width: min(560px, calc(100vw - 16px));
  pointer-events: none;
}

.invitation::before {
  top: -58px;
  height: 350px;
  background: radial-gradient(ellipse at 30% 50%, rgba(18, 13, 17, .86), rgba(18, 13, 17, .5) 46%, transparent 72%);
  filter: blur(12px);
}

.invitation::after {
  top: 0;
  width: 56px;
  height: 1px;
  background: var(--celadon);
}

.invitation.is-gone {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.invitation-kicker {
  margin: 0 0 18px;
  color: var(--celadon);
  font-size: 11px;
  letter-spacing: .13em;
}

.invitation h2,
dialog h2 {
  margin: 0;
  font-family: "Field Serif", Georgia, serif;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
}

.invitation-copy {
  max-width: 390px;
  margin: 18px 0 21px;
  color: rgba(238, 228, 208, .72);
  font-family: "Field Serif", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
}

.begin,
.forget {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(238, 228, 208, .55);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}

.begin:hover,
.forget:hover { color: var(--ink); background: var(--bone); }

.eye-dock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s .15s ease, visibility 0s .15s;
}

.is-started .eye-dock { opacity: 1; visibility: visible; }

.eye-instruction {
  margin: 0;
  color: rgba(238, 228, 208, .64);
  font-family: "Field Serif", Georgia, serif;
  font-size: 13px;
  font-style: italic;
}

.eye {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  min-height: 58px;
  padding: 7px 18px 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(238, 228, 208, .4);
  border-radius: 999px;
  color: var(--bone);
  background: rgba(24, 17, 22, .72);
  box-shadow: 0 10px 35px rgba(9, 7, 9, .3);
  backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.eye-shape {
  position: relative;
  display: grid;
  width: 44px;
  height: 26px;
  place-items: center;
  border: 1.5px solid var(--bone);
  border-radius: 80% 20% 80% 20%;
  transform: rotate(45deg);
  transition: transform .35s ease, height .35s ease;
}

.pupil {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--celadon);
  box-shadow: 0 0 0 3px rgba(24, 17, 22, .7);
  transition: transform .35s ease, opacity .35s ease;
}

.eye-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hold-meter {
  position: absolute;
  right: 17px;
  bottom: 8px;
  left: 65px;
  height: 1px;
  background: rgba(238, 228, 208, .16);
}

.hold-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--celadon);
}

.eye.is-holding .eye-shape { height: 4px; transform: rotate(0); }
.eye.is-holding .pupil { opacity: 0; transform: scaleY(.1); }

.eyelid {
  z-index: 20;
  display: grid;
  place-items: center;
  clip-path: inset(50% 0 50% 0);
  background: #100b0f;
  pointer-events: none;
  transition: clip-path .7s cubic-bezier(.72, 0, .2, 1);
}

.eyelid.is-closed { clip-path: inset(0); }

.eyelid p {
  margin: 0;
  text-align: center;
  color: rgba(238, 228, 208, .82);
  font-family: "Field Serif", Georgia, serif;
  font-size: clamp(24px, 4vw, 50px);
  font-style: italic;
  line-height: 1.2;
  opacity: 0;
  transition: opacity .5s .35s ease;
}

.eyelid.is-closed p { opacity: 1; }
.eyelid small { color: rgba(238, 228, 208, .42); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; font-style: normal; letter-spacing: .18em; text-transform: uppercase; }

.trace-layer { z-index: 4; pointer-events: none; }

.trace {
  position: absolute;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.trace::before,
.trace::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.trace::before {
  width: 13px;
  height: 13px;
  background: var(--bone);
  box-shadow: 0 0 0 4px rgba(24, 17, 22, .74), 0 0 22px rgba(238, 228, 208, .5);
}

.trace::after {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(238, 228, 208, .45);
  animation: breathe 2.8s ease-in-out infinite;
}

.return-note {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: clamp(24px, 7vw, 110px);
  display: grid;
  max-width: 330px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 12px));
  transition: opacity .9s ease, transform .9s ease;
  text-shadow: 0 2px 24px rgba(10, 8, 10, .85);
}

.return-note.is-visible { opacity: 1; transform: translateY(-50%); }

.return-note strong {
  font-family: "Field Serif", Georgia, serif;
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .88;
}

.return-note > span:last-child {
  max-width: 260px;
  margin-top: 16px;
  color: rgba(238, 228, 208, .74);
  font-family: "Field Serif", Georgia, serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
}

.visits {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 4vw, 64px);
  bottom: max(31px, env(safe-area-inset-bottom));
  margin: 0;
  color: rgba(238, 228, 208, .56);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-button {
  position: absolute;
  z-index: 6;
  right: clamp(24px, 4vw, 64px);
  top: max(62px, calc(env(safe-area-inset-top) + 30px));
  width: 32px;
  height: 32px;
  border: 1px solid rgba(238, 228, 208, .35);
  border-radius: 50%;
  color: rgba(238, 228, 208, .75);
  background: rgba(24, 17, 22, .25);
  cursor: pointer;
}

dialog {
  width: min(620px, calc(100% - 32px));
  max-height: min(720px, calc(100% - 32px));
  padding: clamp(30px, 5vw, 58px);
  overflow: auto;
  border: 1px solid rgba(238, 228, 208, .3);
  color: var(--bone);
  background: rgba(24, 17, 22, .96);
  box-shadow: 0 30px 100px #080608;
  backdrop-filter: blur(24px);
}

dialog::backdrop { background: rgba(11, 8, 10, .68); backdrop-filter: blur(8px); }

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  color: var(--bone-soft);
  background: transparent;
  cursor: pointer;
  font-family: "Field Serif", Georgia, serif;
  font-size: 30px;
}

.account h2,
.about h2 { max-width: 520px; font-size: clamp(42px, 7vw, 80px); }

.accounts {
  display: grid;
  gap: 0;
  margin-top: 32px;
  counter-reset: account;
}

.accounts p {
  position: relative;
  margin: 0;
  padding: 17px 0 17px 38px;
  border-top: 1px solid rgba(238, 228, 208, .18);
  color: rgba(238, 228, 208, .78);
  font-family: "Field Serif", Georgia, serif;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.38;
  counter-increment: account;
}

.accounts p::before {
  content: counter(account, lower-roman);
  position: absolute;
  left: 0;
  color: var(--celadon);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .1em;
}

.dialog-foot {
  margin: 22px 0 0;
  color: rgba(238, 228, 208, .44);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about p:not(.dialog-kicker) {
  max-width: 500px;
  color: rgba(238, 228, 208, .7);
  font-family: "Field Serif", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.forget { margin-top: 12px; }

.no-script {
  position: fixed;
  z-index: 30;
  inset: auto 20px 20px;
  margin: 0;
  padding: 18px;
  color: var(--bone);
  background: var(--ink);
}

@keyframes breathe {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.82); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@media (max-width: 680px) {
  .field { min-height: 540px; }
  .masthead { top: max(22px, env(safe-area-inset-top)); left: 20px; }
  .eyebrow { margin-bottom: 7px; font-size: 8px; }
  h1 { font-size: 30px; }
  .watching { top: max(27px, env(safe-area-inset-top)); right: 18px; font-size: 9px; }
  .watching span:last-child { display: none; }
  .about-button { top: max(52px, calc(env(safe-area-inset-top) + 30px)); right: 18px; }
  .invitation { left: 22px; bottom: 74px; width: min(330px, calc(100% - 44px)); padding-top: 22px; }
  .invitation::before { left: -34px; top: -46px; height: 300px; }
  .invitation h2 { font-size: 52px; }
  .invitation-copy { font-size: 15px; }
  .return-note { top: 48%; left: 22px; max-width: 275px; }
  .return-note strong { font-size: 46px; }
  .eye-dock { bottom: max(22px, env(safe-area-inset-bottom)); }
  .eye-instruction { font-size: 12px; }
  .eye { min-height: 54px; }
  .visits { right: 16px; bottom: max(94px, calc(env(safe-area-inset-bottom) + 78px)); max-width: 118px; text-align: right; font-size: 8px; }
}

@media (max-height: 680px) and (min-width: 681px) {
  .masthead h1 { font-size: 34px; }
  .invitation { bottom: 72px; padding-top: 20px; }
  .invitation h2 { font-size: 46px; }
  .invitation-copy { margin-block: 15px 18px; }
  .eye-dock { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}