/* Unwrapped: North Pole Tours, the Aurora concierge look (Keith, 2026-11-09), shared by the web controller (homebase) and www. */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #0b1716;
  --slate: #10201e;
  --ink: #eee8dc;
  --dim: #b9c4bf;
  --faint: rgba(238, 232, 220, .55);
  --gold: #d8b56a;
  --gold-hi: #f0d79a;
  --gold-lo: #a9843e;
  --ice: #9fd6e0;
  --ready: #5fd38a;
  --glass: rgba(18, 38, 36, .55);
  --line: rgba(216, 181, 106, .35);
  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--night) url("../img/backdrop-phone.jpg") center top / cover no-repeat fixed;
  color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
body.wide { background-image: url("../img/backdrop-display.jpg"); }
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(8,18,17,.25), rgba(8,18,17,.55) 45%, rgba(8,18,17,.8)); pointer-events: none; z-index: 0; }
main, header, footer { position: relative; z-index: 1; }

.brand { text-align: center; padding: 22px 16px 0; }
.brand .word { font: 600 30px/1 var(--serif); letter-spacing: .14em; color: var(--gold); }
.brand .sub { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font: 500 10px/1 var(--sans); letter-spacing: .32em; color: var(--ink); }
.brand .sub::before, .brand .sub::after { content: ""; width: 22px; height: 1px; background: var(--line); }

.screen { max-width: 460px; margin: 0 auto; padding: 18px 20px 40px; display: flex; flex-direction: column; min-height: calc(100vh - 70px); }
.screen.center { justify-content: center; }
h1 { font: 600 40px/1.08 var(--serif); color: var(--gold); text-align: center; margin: 18px 0 8px; letter-spacing: .01em; }
h2 { font: 600 28px/1.15 var(--serif); color: var(--gold); margin: 0 0 6px; }
p.lead { text-align: center; color: var(--ink); margin: 0 0 18px; font-size: 16px; }
p.small, .small { font-size: 13px; color: var(--dim); }
.center-text { text-align: center; }
.chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font: 500 12px/1 var(--sans); letter-spacing: .28em; color: var(--ink); }
.rule { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.steps { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.steps i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); }
.steps i.on { background: var(--gold); }

.btn { display: block; width: 100%; border: 0; border-radius: 999px; padding: 17px 22px; margin: 10px 0; font: 600 18px/1 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.985); }
.btn.gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: #12201d; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.btn.line { background: rgba(10, 22, 20, .35); color: var(--gold-hi); border: 1px solid var(--gold); }
.btn.quiet { background: none; color: var(--dim); font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.btn[disabled] { filter: grayscale(.6) brightness(.7); cursor: default; }
.spacer { flex: 1; }

.field { margin: 8px 0 4px; }
.field label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.field input { width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(238,232,220,.35); background: rgba(10, 24, 22, .55); color: var(--ink); font: 500 20px/1.2 var(--sans); outline: none; }
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,181,106,.18); }
.error { color: #ffb4a6; text-align: center; min-height: 1.4em; font-size: 14px; margin: 6px 0; }

.panel { background: var(--glass); border: 1px solid rgba(238,232,220,.16); border-radius: 22px; padding: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* camera */
.viewfinder { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 26px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.viewfinder video, .viewfinder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewfinder video.mirror { transform: scaleX(-1); }
.viewfinder .oval { position: absolute; left: 14%; right: 14%; top: 9%; bottom: 17%; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.18); pointer-events: none; }
.viewfinder .hint { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); background: rgba(10,22,20,.6); border: 1px solid rgba(238,232,220,.25); border-radius: 999px; padding: 8px 18px; font-size: 14px; white-space: nowrap; }
.shutter-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 8px 0; }
.round { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(10,22,20,.4); color: var(--gold-hi); font-size: 22px; cursor: pointer; }
.shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid rgba(240,215,154,.6); background: radial-gradient(circle at 40% 35%, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); cursor: pointer; }

/* portraits and tickets */
.portrait-frame { width: 78%; margin: 6px auto 10px; aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: 1px solid var(--gold); position: relative; background: rgba(10,22,20,.5); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,230,160,.45) 50%, transparent 70%); animation: shimmer 1.8s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.progress { height: 3px; border-radius: 3px; background: rgba(238,232,220,.18); overflow: hidden; margin: 16px 10%; }
.progress b { display: block; height: 100%; width: 40%; background: var(--gold); animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.ticket { position: relative; margin: 8px 6px; border-radius: 20px; overflow: hidden; border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(30,52,50,.75), rgba(14,30,28,.9)); box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 30px rgba(216,181,106,.12); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 62%; width: 22px; height: 22px; border-radius: 50%; background: var(--night); border: 1px solid var(--gold); }
.ticket::before { left: -12px; } .ticket::after { right: -12px; }
.ticket img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ticket .info { padding: 14px 18px 18px; text-align: center; }
.ticket .name { font: 600 40px/1 var(--serif); letter-spacing: .08em; color: var(--gold); text-transform: uppercase; margin: 4px 0 6px; }
.ticket .admit { font: 500 11px/1 var(--sans); letter-spacing: .3em; color: var(--ink); }
.ticket .meta { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; font: 600 12px/1.2 var(--sans); letter-spacing: .14em; }
.ticket .barcode { height: 30px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .85; }

.guests { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; margin: 8px 0; }
.guest { width: 84px; text-align: center; font-size: 14px; }
.guest .face { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 6px; overflow: hidden; border: 1px solid var(--gold); background: rgba(10,22,20,.5); }
.guest .face img { width: 100%; height: 100%; object-fit: cover; }
.guest.open .face { border: 1px dashed rgba(238,232,220,.45); background: none; display: grid; place-items: center; color: var(--faint); font-size: 26px; }
.guest .st { font-size: 12px; color: var(--dim); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ready); margin-right: 5px; vertical-align: 1px; }
.dot.wait { background: var(--gold); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.globe { width: 112px; height: 112px; margin: 6px auto 0; display: block; opacity: .9; }
[hidden] { display: none !important; }