/* Nicole Cardoza — pages set on a photo. Her pictures sit in the photo's frames,
   and the words sit beside them. room.js does the positioning. */
html { scroll-behavior: smooth; }
body.room-page {
  background: #060504;
  color: #EDE6D4;
  margin: 0;
  min-height: 100svh;
}

/* ---------- The photo stays still while the words scroll ---------- */
.room {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.room__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.room__photo { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.room__photo, .frame { filter: brightness(var(--dim, 1)); }

.frame {
  position: absolute; left: 0; top: 0;
  width: 600px; height: 600px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #111;
}
.frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--look, sepia(.22) saturate(.8) contrast(1.04) brightness(.8));
}
/* A little shadow from the frame, so the picture sits behind glass */
.frame::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,.55);
  background: linear-gradient(125deg, rgba(255,250,235,.07), transparent 40%);
}

/* Darkens the side of the room the words sit on */
.room__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent var(--shade-from, 46%), rgba(6,5,4,.86) var(--shade-to, 63%), #060504 100%);
}

/* ---------- The words ---------- */
.back {
  position: fixed; left: 28px; top: 22px; z-index: 5;
  font: 1.05rem/1 'Forum', Georgia, serif;
  color: #F0DFA8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-shadow: 0 0 8px #000;
}
.back:hover, .back:focus-visible { color: #fff; }

.words {
  position: relative; z-index: 2;
  width: min(460px, 38vw);
  margin-left: auto;
  margin-right: clamp(28px, 5vw, 90px);
  min-height: 100svh;
  padding: clamp(48px, 9vh, 100px) 0;
  display: flex; flex-direction: column; justify-content: center;
}
.words h1 {
  font: 400 clamp(2rem, 3.1vw, 3rem)/1.1 'Romie', Georgia, serif;
  color: #F0DFA8;
  margin: 0 0 .7em;
}
.words p {
  font: 300 1.14rem/1.5 'Newsreader', Georgia, serif;
  margin: 0 0 1em;
}
.words .btn { align-self: flex-start; margin-top: .6em; }

/* ---------- The form ---------- */
.words .form-grid { gap: 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.words .field input, .words .field select { width: 100%; min-width: 0; }
.words .field label { color: #EDE6D4; opacity: 1; font-size: .74rem; }
.words .field input,
.words .field select,
.words .field textarea { color: #EDE6D4; font-size: 1.08rem; border-color: rgba(237,230,212,.45); }
.words .field input:focus,
.words .field select:focus,
.words .field textarea:focus { border-color: #E1BD65; }
.words .field select option { color: #111; }
.words .field textarea { min-height: 84px; }
.words .field input[type="date"] { color-scheme: dark; }

/* ---------- Phones: frames first, then the words below them ---------- */
@media (max-width: 1100px) {
  .room { position: absolute; height: var(--room-end, 50svh); }
  .room__shade {
    background: linear-gradient(to bottom, transparent 72%, #060504 100%);
  }
  .back { position: absolute; left: 16px; top: 16px; }
  .words {
    width: auto;
    margin: 0;
    padding: calc(var(--room-end, 50svh) + 12px) 16px 56px;
    display: block;
  }
  .words h1 { font-size: 2.1rem; }
  .words > * { max-width: 680px; }
  .words .form-grid { grid-template-columns: minmax(0, 1fr); }
}