/* Her own pages: five rooms in the same night, opened from the shelf on the
 * home screen. The chunk vocabulary (note / photo / …) is rendered by the
 * same function the parcel desk uses — everything here is about how those
 * chunks SIT, never about what they are. */

.pageview {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgb(23 26 46 / 0.95), rgb(32 36 63 / 0.98));
  animation: page-in var(--t-slow) var(--ease);
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.pageview .sheetwrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-4)
           calc(var(--sp-16) + env(safe-area-inset-bottom));
}

.pageview .page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--paper);
  text-align: center;
  margin: var(--sp-4) 0 var(--sp-8);
}

.pageview .waiting {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--moon-soft);
}

.pageview .pagefoot {
  margin-top: var(--sp-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--moon-soft);
}

/* Every page can be empty, and an empty room should still feel furnished. */
.pageview .empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  border: 1px dashed rgb(255 255 255 / 0.12);
  border-radius: var(--radius-card);
}

.pageview .empty .mark {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: var(--brass);
  opacity: 0.7;
  margin-bottom: var(--sp-4);
}

.pageview .empty p {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--moon-soft);
}

/* --------------------------------------------------------- welcome */

.pageview .replay {
  display: block;
  margin: var(--sp-8) auto 0;
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-6);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--moon-soft);
  background: none;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  cursor: pointer;
}

.pageview .replay:hover,
.pageview .replay:focus-visible { color: var(--brass); border-color: var(--brass-soft); }

/* --------------------------------------------------------- gallery */

.pageview .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--sp-3);
}

.pageview .tile {
  padding: 0.35rem 0.35rem 0.6rem;
  border: none;
  background: #fdfcf8;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  cursor: zoom-in;
  transition: transform var(--t-fast) var(--ease);
}

.pageview .tile:hover,
.pageview .tile:focus-visible { transform: translateY(-2px); }

.pageview .tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper-edge);
}

/* one photograph, held up to the light */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4)
           calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: rgb(12 13 24 / 0.97);
  animation: fade-only var(--t-slow) var(--ease);
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 74svh;
  margin: 0 auto;
  object-fit: contain;
  cursor: pointer;
}

.lightbox .caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--moon-soft);
}

.lightbox .overlay-close {
  position: static;
  margin: 0 auto;
}

/* ----------------------------------------------------------- lists */

/* Scans of paper, stacked large and read the way they were written. */
.pageview .scans {
  display: grid;
  gap: var(--sp-8);
}

.pageview .scans .photo {
  background: #fdfcf8;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.4);
}

.pageview .scans .photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-edge);
}

.pageview .scans .photo figcaption {
  padding-top: var(--sp-2);
  text-align: center;
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: var(--text-sm);
  color: #6b6250;
}

.pageview .scans .note {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--moon-soft);
  text-align: center;
}

/* ------------------------------------------------------- open when */

.pageview .openwhen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--sp-3);
  align-items: start;
}

.owcard {
  background: var(--paper);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* an opened envelope takes the whole row — its note is the point now */
.owcard.open { grid-column: 1 / -1; }

.owcard .lid {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: var(--sp-3);
  border: none;
  background: linear-gradient(170deg, #f7f0e2, var(--paper) 65%, var(--paper-edge));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 700px;
}

.owcard.open .lid { aspect-ratio: auto; }

.owcard .lid .flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  background: linear-gradient(180deg, #f2ead8, var(--paper-edge));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}

.owcard.open .lid .flap {
  transform: rotateX(-166deg);
  filter: brightness(0.94);
}

.owcard .lid .wax {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1.35rem;
  height: 1.35rem;
  margin: -0.675rem 0 0 -0.675rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--wax-bright), var(--wax) 72%);
  box-shadow: inset 0 0 5px rgb(0 0 0 / 0.35);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-slow) var(--ease);
}

.owcard.open .lid .wax {
  opacity: 0;
  transform: scale(0.6) rotate(-24deg);
}

.owcard .lid .title {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.2;
  color: var(--ink);
}

.owcard.open .lid .title {
  position: static;
  display: block;
  padding-top: 2.4rem;              /* room for the flap standing open */
  font-size: var(--text-lg);
  color: var(--ink);
}

.owcard .inside {
  display: none;
  padding: 0 var(--sp-4) var(--sp-6);
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
}

.owcard.open .inside {
  display: block;
  animation: unfold var(--t-slow) var(--ease);
}

.owcard .inside p { margin: 0 0 0.6em; }
.owcard .inside p:last-child { margin-bottom: 0; }
.owcard .inside img { max-width: 100%; height: auto; }

@keyframes unfold {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .owcard .lid .flap,
  .owcard .lid .wax { transition: none; }
  .owcard.open .inside { animation: none; }
  .pageview { animation: none; }
  .lightbox { animation: none; }
  .pageview .tile { transition: none; }
}

/* -------------------------------------------------------- countdown */

.countdown {
  text-align: center;
  padding: var(--sp-10) var(--sp-2) var(--sp-8);
  background: radial-gradient(60% 40% at 50% 34%, rgb(184 134 59 / 0.12), transparent 70%);
}

.countdown .days {
  margin: 0;
  line-height: 1;
}

.countdown .days strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: lining-nums tabular-nums;
}

.countdown .days span {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
}

.countdown .soon {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--paper);
}

.countdown .line {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--moon-soft);
}

.countdown .on {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
}