:root {
  --ink: #08080a;
  --paper: #f8f6f0;
  --gala-serif: IvyOra, Didot, "Bodoni 72", "Iowan Old Style", "Times New Roman", serif;
  --portrait-ratio: 0.7142857;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--gala-serif); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.editorial-stage {
  position: fixed;
  inset: 0;
  min-width: 0;
  min-height: 100svh;
  overflow: hidden;
  display: block;
  isolation: isolate;
  background: #09090c;
  color: #f8f5ec;
}

.museum-shadow {
  display: none;
}

.chrome-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  aspect-ratio: auto;
  overflow: hidden;
  background: #0a0a0c;
  box-shadow: none;
}

.portrait-envelope,
.envelope-picture,
.envelope-photo,
.note-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.portrait-envelope { overflow: hidden; background: #0a0a0c; }
.envelope-picture { z-index: 2; display: block; transition: opacity .5s ease, transform .65s ease; }
.envelope-photo { display: block; object-fit: cover; }
.envelope-pocket, .portrait-flap { display: none; }

.note-copy {
  z-index: 7;
  text-align: center;
  color: #09090b;
  text-shadow: 0 1px rgba(255,255,255,.4);
  transition: opacity .3s ease, transform .3s ease;
}

.note-copy span,
.note-copy strong,
.note-copy button { position: absolute; left: 50%; transform: translateX(-50%); }
.note-copy span {
  top: 14%;
  width: 86%;
  text-transform: uppercase;
  letter-spacing: .28em;
  font: 400 clamp(9px, 1.1vw, 12px)/1.1 var(--gala-serif);
}
.note-copy strong {
  top: 21%;
  width: 90%;
  text-transform: uppercase;
  letter-spacing: -.045em;
  font: 500 clamp(46px, 6vw, 82px)/.84 var(--gala-serif);
}
.note-copy button {
  top: 73.5%;
  border: 0;
  padding: 8px 4px;
  background: transparent;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: .34em;
  font: 600 clamp(10px, 1vw, 13px)/1 var(--gala-serif);
  cursor: pointer;
}
.note-copy button::before,
.note-copy button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(24px, 3vw, 38px);
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.note-copy button::before { right: calc(100% + 10px); }
.note-copy button::after { left: calc(100% + 8px); }

.portrait-seal {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 86.5%;
  width: clamp(82px, 10vw, 112px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  overflow: visible;
  background: none;
  cursor: pointer;
  transition: opacity .3s ease, transform .35s ease;
}
.seal-wax,
.seal-crest { position: absolute; object-fit: contain; }
.seal-wax {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.6));
}
.seal-crest {
  z-index: 1;
  left: 23%;
  top: 24%;
  width: 54%;
  height: 52%;
  opacity: .82;
  filter: drop-shadow(-1px -1px 0 rgba(255,255,255,.2)) drop-shadow(1px 1px 0 rgba(0,0,0,.95));
}

.editorial-unlock {
  position: absolute;
  z-index: 10;
  left: 25%;
  right: 25%;
  bottom: 5%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid rgba(255,255,255,.7);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.editorial-unlock input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 12px 2px;
  background: transparent;
  color: #f5f0e7;
  text-transform: uppercase;
  letter-spacing: .12em;
  font: 11px var(--gala-serif);
}
.editorial-unlock input::placeholder { color: rgba(245,240,231,.62); }
.editorial-unlock button {
  border: 0;
  padding: 12px 2px;
  background: transparent;
  color: #f5f0e7;
  text-transform: uppercase;
  letter-spacing: .22em;
  font: 500 9px var(--gala-serif);
  cursor: pointer;
}
.editorial-unlock small {
  position: absolute;
  top: 43px;
  left: 0;
  color: #d0a5a5;
  font: 10px Arial, sans-serif;
}

.card-wrap {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100svh * var(--portrait-ratio)));
  aspect-ratio: 5 / 7;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.985);
  pointer-events: none;
  transition: opacity .5s ease .08s, transform .65s cubic-bezier(.2,.75,.15,1) .08s;
}
.save-card { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }

.is-unlocking .editorial-unlock { opacity: 1; transform: none; pointer-events: auto; }
.is-unlocking .note-copy { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.is-unlocking .portrait-seal { transform: translate(-50%, -50%) scale(.93); }

.is-open .envelope-picture,
.is-open .note-copy,
.is-open .portrait-seal,
.is-open .editorial-unlock { opacity: 0; pointer-events: none; }
.is-open .envelope-picture { transform: scale(1.01); }
.is-open .card-wrap,
.is-takeover .card-wrap { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (orientation: portrait) {
  .chrome-frame {
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
    box-shadow: none;
  }
  .note-copy span { top: 15%; font-size: clamp(8px, 2.8vw, 11px); }
  .note-copy strong { top: 21%; font-size: clamp(40px, 13vw, 66px); }
  .note-copy button { top: 56.5%; font-size: clamp(9px, 2.8vw, 11px); }
  .portrait-seal { top: 67.5%; width: clamp(78px, 25vw, 104px); }
  .editorial-unlock {
    top: 45%;
    bottom: auto;
    left: 9%;
    right: 9%;
    padding: 10px 12px;
    background: rgba(8,8,10,.92);
    border: 1px solid rgba(255,255,255,.24);
    border-bottom-color: rgba(255,255,255,.72);
    box-shadow: 0 14px 36px rgba(0,0,0,.42);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .note-copy strong { font-size: clamp(38px, 9svh, 64px); }
  .portrait-seal { width: clamp(68px, 18svh, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}