:root {
  /* Inter** Inter* from Google Fonts for alphabetical tabs */
  --champagne: #FFF1D8;
  --peach: #F5A37A;
  --pearl: #F8E8FF;
  --gold: #D9A441;
  --cherry: #1C0D12;
  --cocoa: #3A2018;
  --rose: #C85F6A;
  --display: "Libre Baskerville", Baskerville, Georgia, serif;
  --serif: "Libre Caslon Text", "Times New Roman", serif;
  --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cherry);
  color: var(--cocoa);
  font-family: var(--serif);
  overflow-x: hidden;
}

.wallpaper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(248, 232, 255, .26) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 12%, rgba(217, 164, 65, .32) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 70%, rgba(200, 95, 106, .28) 0 4px, transparent 5px),
    repeating-linear-gradient(135deg, rgba(255, 241, 216, .035) 0 10px, transparent 10px 22px),
    linear-gradient(180deg, #1C0D12 0%, #3A2018 55%, #1C0D12 100%);
  z-index: -2;
}

.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(ellipse at center, transparent 0 45%, rgba(255, 241, 216, .16) 46% 48%, transparent 49%),
    radial-gradient(circle, rgba(248, 232, 255, .18) 0 15%, transparent 16%);
  background-size: 84px 56px, 42px 42px;
}

.flash-fade {
  position: fixed;
  inset: 0;
  background: var(--pearl);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

.flash-fade.flash { animation: flashFade .9s ease-out; }

@keyframes flashFade {
  0% { opacity: 0; }
  20% { opacity: .7; }
  100% { opacity: 0; }
}

.directory-stack { position: relative; }

.drawer {
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-end;
  padding: 7vh 7vw 0;
  transform: translateY(var(--rise, 0px)) scaleY(var(--squash, 1));
  transform-origin: bottom center;
  transition: transform .55s cubic-bezier(.21, 1.4, .36, 1);
}

.drawer-face {
  width: min(1120px, 100%);
  min-height: 76vh;
  margin: 0 auto;
  position: relative;
  border: 2px solid rgba(217, 164, 65, .92);
  border-bottom: 0;
  border-radius: 46px 46px 0 0;
  box-shadow: 0 -18px 80px rgba(28, 13, 18, .48), inset 0 1px 0 rgba(248, 232, 255, .78);
  overflow: hidden;
}

.drawer-face::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: linear-gradient(115deg, transparent 34%, rgba(248, 232, 255, .56) 43%, transparent 51%);
  transform: translateX(-50%) rotate(5deg);
  animation: shine 6.8s linear infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { transform: translateX(-55%) rotate(5deg); }
  100% { transform: translateX(55%) rotate(5deg); }
}

.hero-drawer { padding-top: 4vh; }
.hero-face { background: linear-gradient(145deg, #FFF1D8 0%, #F5A37A 56%, #C85F6A 130%); min-height: 82vh; }
.rose-face { background: linear-gradient(150deg, #F8E8FF 0%, #FFF1D8 42%, #C85F6A 140%); }
.peach-face { background: linear-gradient(145deg, #F5A37A 0%, #FFF1D8 62%, #D9A441 145%); }
.cream-face { background: linear-gradient(145deg, #FFF1D8 0%, #F8E8FF 58%, #F5A37A 130%); }
.final-face { background: linear-gradient(155deg, #3A2018 0%, #1C0D12 52%, #C85F6A 170%); color: var(--champagne); }

.back-panel {
  position: absolute;
  left: 11vw;
  right: 11vw;
  height: 24vh;
  bottom: 64vh;
  border: 2px solid var(--gold);
  border-radius: 38px 38px 0 0;
  background: linear-gradient(120deg, #F5A37A, #FFF1D8);
  box-shadow: 0 -10px 45px rgba(28, 13, 18, .36);
}
.panel-one { transform: rotate(-2deg) translateY(8vh); opacity: .86; }
.panel-two { transform: rotate(2deg) translateY(15vh); opacity: .72; background: linear-gradient(120deg, #C85F6A, #F8E8FF); }

.elastic-band {
  position: absolute;
  top: 18vh;
  left: 50%;
  width: 18px;
  height: 16vh;
  border-radius: 999px;
  background: linear-gradient(90deg, #C85F6A, #F8E8FF 48%, #C85F6A);
  box-shadow: 0 0 24px rgba(200, 95, 106, .7);
  transform-origin: top center;
  transform: translateX(-50%) scaleY(.15);
}

.elastic-band.stretch { animation: stretchBand 1.6s cubic-bezier(.18, 1.6, .42, 1) forwards; }
@keyframes stretchBand { 0% { transform: translateX(-50%) scaleY(.15); } 62% { transform: translateX(-50%) scaleY(1.18); } 100% { transform: translateX(-50%) scaleY(1); } }

.side-label {
  position: absolute;
  left: 0;
  top: 96px;
  writing-mode: vertical-rl;
  transform: translateX(-1px);
  padding: 18px 10px;
  background: var(--rose);
  color: var(--champagne);
  border: 1px solid var(--gold);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-copy { position: relative; z-index: 2; padding: 20vh 7vw 0; max-width: 900px; }
.wordmark {
  margin: 0;
  color: var(--cherry);
  font-family: var(--display);
  font-size: clamp(52px, 10vw, 132px);
  line-height: .9;
  letter-spacing: -.06em;
  text-shadow: 3px 3px 0 var(--gold), -1px -1px 0 var(--pearl), 0 16px 36px rgba(58, 32, 24, .26);
}
.concierge { max-width: 620px; font-size: clamp(20px, 2vw, 30px); line-height: 1.35; color: var(--cocoa); }

.sticker, .tiny-label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 13px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champagne);
  background: var(--rose);
  border: 1px solid var(--gold);
  border-radius: 6px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(217, 164, 65, .5);
}

.photo-strip { position: absolute; inset: 38px 48px auto auto; display: flex; gap: 16px; z-index: 1; }
.photo-window, .locket {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--gold);
  background: var(--cherry);
  box-shadow: 0 14px 30px rgba(28, 13, 18, .3), inset 0 0 30px rgba(248, 232, 255, .16);
}
.photo-window { width: 150px; height: 210px; border-radius: 24px; transform: translateY(-12px); opacity: 0; transition: .8s cubic-bezier(.21, 1.4, .36, 1); }
.drawer.active .photo-window { transform: translateY(0); opacity: 1; }
.photo-window span, .locket span {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(248, 232, 255, .85) 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255, 241, 216, .7), transparent 36%),
    repeating-linear-gradient(90deg, rgba(217, 164, 65, .25) 0 6px, transparent 6px 14px),
    linear-gradient(145deg, #3A2018, #C85F6A 58%, #F5A37A);
  filter: saturate(1.15) contrast(.98);
}
.lanyard-photo span { background: radial-gradient(circle at 70% 22%, rgba(248,232,255,.9) 0 10%, transparent 11%), repeating-linear-gradient(35deg, #D9A441 0 8px, #1C0D12 8px 15px, #C85F6A 15px 20px); }
.seal-photo span { background: radial-gradient(circle at 50% 52%, #D9A441 0 23%, #FFF1D8 24% 30%, #3A2018 31% 34%, #C85F6A 35% 100%); }
.badge-photo span { background: linear-gradient(160deg, #F8E8FF, #FFF1D8 38%, #D9A441 39% 43%, #3A2018 44%); }
.card-photo span { background: repeating-linear-gradient(0deg, #FFF1D8 0 22px, #F5A37A 22px 27px), radial-gradient(circle at 25% 25%, #D9A441, transparent 25%); }

.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pearl);
  box-shadow: 0 0 8px var(--pearl), 0 0 18px var(--gold);
  opacity: 0;
  animation: wink 1.25s ease-in-out forwards;
}
@keyframes wink { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1.35) rotate(45deg); } }

.seal { position: absolute; right: 6vw; bottom: 7vh; width: 150px; fill: none; stroke: var(--gold); stroke-width: 3; opacity: .78; }
.seal text { fill: var(--gold); stroke: none; font-family: var(--ui); font-size: 15px; letter-spacing: .14em; }

.content-pocket, .laminated-pass, .trail-frame, .final-plate {
  position: relative;
  margin: 13vh 8vw;
  max-width: 660px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(217, 164, 65, .92);
  border-radius: 26px;
  background: rgba(255, 241, 216, .62);
  box-shadow: inset 0 0 35px rgba(248, 232, 255, .45), 0 18px 60px rgba(58, 32, 24, .17);
  backdrop-filter: blur(4px);
}
.final-plate { background: rgba(28, 13, 18, .58); margin-left: auto; text-align: right; }

h2 { margin: 0 0 18px; font-family: var(--display); font-size: clamp(42px, 6.5vw, 86px); line-height: .95; letter-spacing: -.035em; }
p { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; }
blockquote { margin: 32px 0 0; font-family: var(--display); font-style: italic; font-size: clamp(24px, 3.2vw, 42px); color: var(--rose); }

.chain-row, .permission-charms { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 28px 0 0; list-style: none; }
.chain-row span, .permission-charms li {
  padding: 9px 13px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(248, 232, 255, .45);
}

.locket { position: absolute; right: 9vw; top: 18vh; width: 250px; height: 330px; border-radius: 48% 48% 42% 42%; transform: rotate(5deg); animation: tiltLocket 4s ease-in-out infinite; }
.locket figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--champagne); font-family: var(--ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@keyframes tiltLocket { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-8px); } }

.photo-cascade { position: absolute; right: 8vw; top: 17vh; display: grid; gap: 18px; transform: rotate(3deg); }
.scallop { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: radial-gradient(circle at 13px 0, transparent 0 13px, rgba(217,164,65,.75) 14px 15px, transparent 16px) repeat-x; background-size: 28px 28px; }
.chain-border { position: absolute; right: 8vw; bottom: 16vh; width: min(520px, 46vw); stroke: var(--gold); stroke-width: 8; fill: none; opacity: .7; stroke-linecap: round; }
.closed-drawer-line { height: 4px; width: min(760px, 70%); margin: 16vh auto 0; background: linear-gradient(90deg, transparent, #D9A441, #F8E8FF, #D9A441, transparent); box-shadow: 0 0 24px #D9A441; }

.az-rail { position: fixed; z-index: 10; right: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; }
.az-tab {
  width: 42px;
  height: 58px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  color: var(--champagne);
  background: linear-gradient(160deg, rgba(58,32,24,.82), rgba(200,95,106,.72));
  box-shadow: inset 0 0 12px rgba(248,232,255,.18), 0 0 0 rgba(217,164,65,0);
  font-family: var(--ui);
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .38s cubic-bezier(.2, 1.7, .36, 1), box-shadow .38s, background .38s;
}
.az-tab:hover, .az-tab.active { transform: translateX(-8px) scale(1.08); background: linear-gradient(160deg, #C85F6A, #D9A441); box-shadow: 0 0 24px rgba(217,164,65,.8); }

@media (max-width: 820px) {
  .drawer { padding: 5vh 18px 0; }
  .drawer-face { min-height: 82vh; border-radius: 30px 30px 0 0; }
  .hero-copy { padding: 24vh 28px 0; }
  .photo-strip, .locket, .photo-cascade, .seal { opacity: .32; right: 20px; }
  .content-pocket, .laminated-pass, .trail-frame, .final-plate { margin: 16vh 28px; }
  .az-rail { right: 8px; gap: 7px; }
  .az-tab { width: 32px; height: 44px; }
}