/* Faizan & Momina — Departures, Lahore */
@font-face { font-family: "Bodoni"; src: url(/assets/fonts/bodoni.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Bodoni"; src: url(/assets/fonts/bodoni-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0026; }
@font-face { font-family: "Archivo"; src: url(/assets/fonts/archivo.woff2) format("woff2"); font-weight: 400 700; font-stretch: 62% 100%; font-display: swap; }

:root {
  /* surfaces */
  --velvet: #161C38;
  --velvet-2: #1C2345;
  --paper: #FAF8F3;
  --paper-2: #F1EDE4;
  /* text */
  --silk: #EFEADF;
  --silk-dim: #BDBACB;
  --ink: #161C38;
  --ink-soft: #57534B;
  --label: #6B655A;
  --rule: #DDD6C8;
  /* gold: one on dark, one on light */
  --zari: #D2B06E;
  --zari-deep: #7A5D22;
  /* the board is airport vernacular */
  --flap-text: #EEE8DA;
  --amber: #F2B441;
  /* one token per event (band/stamp/pin) + a text-safe tone for small type on paper */
  --nikkah: #9C7A36;  --nikkah-t: #7A5D22;
  --mehndi: #C27C0E;  --mehndi-t: #8F5A00;
  --barat: #9A1E33;   --barat-t: #9A1E33;
  --walima: #4C6C8A;  --walima-t: #3F5F7C;
  /* type scale */
  --t-label: 11px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: clamp(26px, 8vw, 32px); --t-xxl: 40px;
  /* radii */
  --r-s: 4px; --r-m: 12px;
  --gutter: 20px;
  --col: min(100vw - 2 * var(--gutter), 440px);
  --serif: "Bodoni", "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--velvet); }
body {
  margin: 0; min-height: 100svh; background: var(--velvet); color: var(--silk);
  font-family: var(--sans); font-size: var(--t-m); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--zari); outline-offset: 3px; border-radius: var(--r-s); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }
html.gate-on body { overflow: hidden; }
.wrap { width: var(--col); margin-inline: auto; }

/* ---------- Gate ---------------------------------------------------- */
.gate {
  position: fixed; inset: 0; z-index: 50; display: none;
  grid-template-rows: auto 1fr auto; align-items: center; justify-items: center;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) max(22px, env(safe-area-inset-bottom));
  touch-action: manipulation; background: var(--velvet);
}
html.js .gate { display: grid; }
html.js.opened .gate { display: none; }
html.veil-ready .gate { background: transparent; }
.gate__veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gate__veil path { fill: var(--velvet); }
.gate__top, .gate__bottom, .gate__stage { position: relative; z-index: 1; }
.gate__top { text-align: center; padding-top: 6px; min-height: 66px; }
.gate__small { margin: 0; font-size: var(--t-s); color: var(--silk-dim); }
.gate__name { margin: 2px 0 0; font-family: var(--serif); font-size: clamp(26px, 7.4vw, 32px); font-weight: 500; font-variation-settings: "opsz" 60; line-height: 1.15; }
.gate__stage {
  --fw: min(90vw, calc((100svh - 200px) * 2 / 3), 440px);
  width: var(--fw); aspect-ratio: 2 / 3; perspective: 1300px; perspective-origin: 50% 58%; cursor: pointer;
}
.gate__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.gate__door { position: absolute; left: 22.656%; top: 11.003%; width: 54.688%; height: 85.352%; transform-style: preserve-3d; }
.gate__glow { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 55%, rgba(255, 226, 160, .95), rgba(240, 180, 90, .45) 45%, rgba(120, 70, 20, 0) 80%); }
.gate__leaf { position: absolute; top: 0; width: 50%; height: 100%; transition: transform 1.5s cubic-bezier(.55, 0, .2, 1), filter 1.5s ease; will-change: transform; }
.gate__leaf--l { left: 0; transform-origin: 0 50%; }
.gate__leaf--r { right: 0; transform-origin: 100% 50%; }
.gate__seam { position: absolute; left: 50%; top: 62%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none; z-index: 3; }
.gate__seam::before, .gate__seam::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 228, 170, .7); animation: knock 2.8s var(--ease-out) infinite; }
.gate__seam::after { animation-delay: 1.4s; }
@keyframes knock { 0% { transform: scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.gate__bottom { text-align: center; }
.gate__btn {
  appearance: none; border: 1px solid var(--zari); background: rgba(22, 28, 56, .6); color: var(--silk);
  min-height: 50px; padding: 0 28px; border-radius: 999px; font-size: var(--t-m); font-weight: 500; cursor: pointer; transition: background .3s, color .3s;
}
.gate__btn:active { background: var(--zari); color: var(--velvet); }
html.opening .gate__leaf--l { transform: rotateY(84deg); filter: brightness(.32); }
html.opening .gate__leaf--r { transform: rotateY(-84deg); filter: brightness(.32); }
html.opening .gate__glow { animation: glow 1.5s ease-out forwards; }
html.opening .gate__seam { display: none; }
html.opening .gate__top, html.opening .gate__bottom { transition: opacity .45s; opacity: 0; }
@keyframes glow { 0% { opacity: 0; } 30% { opacity: .85; } 100% { opacity: 0; } }
@media (orientation: landscape) and (max-height: 560px) {
  .gate { grid-template-rows: 1fr; grid-template-columns: 1fr auto 1fr; gap: 16px; }
  .gate__top { grid-column: 1; grid-row: 1; text-align: right; min-height: 0; }
  .gate__stage { grid-column: 2; grid-row: 1; --fw: min(60vw, calc((100svh - 40px) * 2 / 3)); }
  .gate__bottom { grid-column: 3; grid-row: 1; justify-self: start; }
}

/* ---------- Hero ---------------------------------------------------- */
.hero { position: relative; text-align: center; padding: calc(60px + env(safe-area-inset-top)) var(--gutter) 0; overflow: hidden; }
.hero__bism { width: min(64vw, 250px); margin: 0 auto; }
.hero__lede { margin: 30px auto 12px; max-width: 26em; font-size: var(--t-m); color: var(--silk-dim); text-wrap: balance; }
.hero__names { margin: 0; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 96; line-height: 1.06; letter-spacing: -.01em;
  font-size: min(calc((100vw - 2 * var(--gutter)) / 8.7), 54px); white-space: nowrap; }
.hero__names span { display: block; }
.hero__names:focus { outline: none; }
.hero__names .amp { font-style: italic; font-weight: 400; color: var(--zari); font-size: .9em; margin: .1em 0 .12em; line-height: 1; }
.hero__urdu { width: min(48vw, 180px); margin: 28px auto 0; }
.hero__dates { margin: 24px 0 0; font-family: var(--serif); font-size: var(--t-l); font-variation-settings: "opsz" 24; line-height: 1.4; }
.hero__dates small { display: block; font-family: var(--sans); font-size: var(--t-s); color: var(--silk-dim); margin-top: 2px; }
.hero__horizon { margin: 34px calc(-1 * var(--gutter)) 0; }
.hero__mosque { width: 112%; max-width: 640px; margin: 0 auto; transform: translateX(-5.4%); opacity: .92;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 99%); mask-image: linear-gradient(#000 62%, transparent 99%); }
@media (min-width: 560px) { .hero__mosque { width: 100%; transform: none; } }

/* ---------- Sections ------------------------------------------------ */
.sec { padding: 64px 0 0; }
.sec__title { margin: 0; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 72; font-size: var(--t-xl); line-height: 1.12; text-wrap: balance; }
.sec__text { margin: 10px 0 0; color: var(--silk-dim); font-size: var(--t-m); max-width: 34em; text-wrap: pretty; }

/* ---------- Departures board --------------------------------------- */
.board { margin-top: 22px; background: #111217; border-radius: var(--r-m); padding: 12px 10px 4px;
  box-shadow: 0 0 0 1px #2B2D36, 0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); }
.board__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; border-bottom: 1px solid #23252D; }
.board__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-stretch: 75%; font-size: 18px; letter-spacing: .02em; color: var(--flap-text); }
.board__title svg { width: 22px; height: 22px; color: var(--amber); }
.board__clock { font-stretch: 75%; font-weight: 600; font-size: var(--t-m); color: var(--amber); font-variant-numeric: tabular-nums; }
.board__clock small { color: #9A98A4; font-weight: 500; margin-right: 6px; font-size: var(--t-s); }
.board__rows { list-style: none; margin: 0; padding: 0; }
.board__row + .board__row { border-top: 1px solid #1E2027; }
.board__link { display: block; padding: 12px 4px; text-decoration: none; border-radius: var(--r-s); }
.board__link:active { background: #17181E; }
.flaps { --n: 14; --cell: calc((var(--col) - 20px - 8px - (var(--n) - 1) * 2px) / var(--n)); display: flex; gap: 2px; }
.flaps .gap { width: calc(var(--cell) * .55); flex: none; }
.cell { position: relative; flex: none; width: var(--cell); height: calc(var(--cell) * 1.42);
  font-weight: 700; font-stretch: 70%; font-size: calc(var(--cell) * 1.22); line-height: 1; color: var(--flap-text); border-radius: 2px; perspective: 200px; }
.cell > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; display: block; }
.cell > span > i { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font-style: normal; }
.cell .u, .cell .fu { top: 0; border-radius: 2px 2px 0 0; background: linear-gradient(#2A2B33, #23242B); }
.cell .l, .cell .fl { bottom: 0; border-radius: 0 0 2px 2px; background: linear-gradient(#1F2026, #1A1B21); }
.cell .u > i, .cell .fu > i { top: 0; }
.cell .l > i, .cell .fl > i { bottom: 0; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #0B0B0E; z-index: 3; }
.cell .fu { transform-origin: 50% 100%; z-index: 2; backface-visibility: hidden; }
.cell .fl { transform-origin: 50% 0; z-index: 2; backface-visibility: hidden; transform: rotateX(90deg); }
.cell.flip .fu { animation: fu .07s ease-in forwards; }
.cell.flip .fl { animation: fl .07s .07s ease-out forwards; }
@keyframes fu { to { transform: rotateX(-90deg); } }
@keyframes fl { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.board__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 8px; font-size: var(--t-s); line-height: 1.4; color: #BCB9C6; }
.board__meta b { color: var(--flap-text); font-weight: 500; }
.board__status { flex: none; color: var(--amber); font-weight: 600; font-stretch: 80%; text-align: right; }

/* ---------- LED gate screen --------------------------------------- */
.screen { margin: 22px 0 0; }
.screen__body { position: relative; aspect-ratio: 4 / 5; background: #050608; border-radius: var(--r-s); overflow: hidden;
  box-shadow: 0 0 0 6px #0B0C10, 0 0 0 7px #2A2C35, 0 40px 60px -30px rgba(0,0,0,.9); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.screen__media, .screen__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen__media { object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.screen__media.on { opacity: 1; }
.screen__canvas { transition: opacity .8s ease; }
.screen__canvas.off { opacity: 0; }
.screen__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2;
  background: radial-gradient(circle at 50% 50%, transparent 50%, #000 66%) 0 0 / 4px 4px; }
.screen__ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); font-stretch: 72%; font-weight: 700; font-size: var(--t-s); letter-spacing: .06em; color: var(--amber);
  text-shadow: 0 0 8px rgba(242, 180, 65, .55); text-transform: uppercase; pointer-events: none; }
.screen__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.screen__cap { font-family: var(--serif); font-size: var(--t-l); line-height: 1.3; font-variation-settings: "opsz" 24; }
.screen__cap small { display: block; font-family: var(--sans); font-size: var(--t-s); color: var(--silk-dim); margin-top: 2px; }
.screen__btns { display: flex; gap: 8px; flex: none; }
.iconbtn { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3A4064; background: transparent; display: grid; place-items: center; cursor: pointer; }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:active { background: var(--velvet-2); }

/* ---------- Boarding passes --------------------------------------- */
.passes { display: grid; gap: 30px; margin-top: 26px; }
.pass { --ev: var(--nikkah); --evt: var(--nikkah-t);
  position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-m); overflow: hidden; scroll-margin-top: 24px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 24px 50px -24px rgba(0,0,0,.75); }
.pass[data-ev="m"] { --ev: var(--mehndi); --evt: var(--mehndi-t); }
.pass[data-ev="b"] { --ev: var(--barat); --evt: var(--barat-t); }
.pass[data-ev="w"] { --ev: var(--walima); --evt: var(--walima-t); }
.pass__band { height: 6px; background: var(--ev); }
.pass__head { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: center; padding: 18px 18px 14px; }
.pass__emblem { width: 80px; height: 80px; }
.pass__kicker { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-label); font-weight: 600; font-stretch: 85%; letter-spacing: .08em; color: var(--evt); text-transform: uppercase; }
.pass__name { margin: 2px 0 0; font-family: var(--serif); font-weight: 600; font-variation-settings: "opsz" 72; font-size: var(--t-xxl); line-height: 1; }
.pass__date { margin: 6px 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.pass__body { padding: 4px 18px 18px; border-top: 1px solid var(--rule); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 14px 0 0; }
.field { margin: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field dt { font-size: var(--t-label); font-weight: 600; font-stretch: 82%; letter-spacing: .09em; text-transform: uppercase; color: var(--label); }
.field dd { margin: 2px 0 0; font-size: var(--t-m); line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.field dd.big { font-size: 24px; font-weight: 600; font-stretch: 88%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.field dd small { display: block; font-size: var(--t-s); font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.conn { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--paper-2); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.conn svg { width: 22px; height: 22px; color: var(--evt); grid-row: span 2; margin-top: 2px; }
.conn b { font-size: var(--t-m); font-weight: 600; }
.conn span { font-size: var(--t-s); color: var(--ink-soft); }
.perf { position: relative; height: 22px; margin-top: 6px; }
.perf::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dotted #CFC7B6; }
.perf i { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--velvet); }
.perf i:first-child { left: -11px; } .perf i:last-child { right: -11px; }
.pass__map { margin: 4px 18px 0; border-radius: var(--r-s); overflow: hidden; background: #F3EFE6; aspect-ratio: 1000 / 860; box-shadow: 0 0 0 1px var(--rule); }
.pass__map svg { width: 100%; height: 100%; }
.pass__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px 0; }
.pass__actions .btn { flex: 1 1 auto; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: var(--r-m);
  text-decoration: none; font-weight: 600; font-size: var(--t-m); cursor: pointer; border: 1px solid transparent; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--line { background: transparent; color: var(--ink); border-color: #CFC7B6; }
.btn--ink:active { background: #262E57; }
.btn--line:active { background: var(--paper-2); }
.stub { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin-top: 18px; padding: 14px 18px 18px; border-top: 1px dashed #D5CDBD; }
.stub__qr { width: 88px; height: 88px; }
.stub__qr svg { width: 100%; height: 100%; }
.stub p { margin: 0; font-size: var(--t-s); line-height: 1.45; color: var(--ink-soft); }
.stub p b { display: block; color: var(--ink); font-weight: 600; }
.allcal { margin-top: 24px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.allcal p { margin: 0; font-size: var(--t-s); color: var(--silk-dim); }
.allcal a:not(.btn) { color: var(--silk); text-underline-offset: 3px; }
.btn--gold { background: transparent; color: var(--silk); border-color: var(--zari); border-radius: 999px; padding: 0 22px; }
.btn--gold:active { background: var(--zari); color: var(--velvet); }

/* ---------- Map art -------------------------------------------------- */
.mapart .m-bg { fill: #F3EFE6; }
.mapart .m-park { fill: #E3E5D3; }
.mapart .m-golf { fill: #DCE2CB; } .mapart .m-dot { fill: #BAC6A3; }
.mapart .m-golf-edge { fill: none; stroke: #C6CFB1; stroke-width: 1.5; }
.mapart .m-water { fill: #CDDBE1; }
.mapart .m-canal { fill: none; stroke: #A9C2CE; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.mapart .m-bldg { fill: #E7E0D1; }
.mapart .r-res { fill: none; stroke: #E0D9C9; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mapart .r-sec { fill: none; stroke: #D1C8B4; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.mapart .r-pri-case { fill: none; stroke: #C7BCA4; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.mapart .r-pri { fill: none; stroke: #FFFDF8; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.mapart .r-mwl-case { fill: none; stroke: #8E94AE; stroke-width: 9; } .mapart .r-mwl { fill: none; stroke: #F3EFE6; stroke-width: 5; }
.mapart .r-mw-case { fill: none; stroke: #161C38; stroke-width: 22; stroke-linecap: round; }
.mapart .r-mw { fill: none; stroke: #F3EFE6; stroke-width: 13; stroke-linecap: round; }
.mapart .m-venue-fp { fill: var(--ev, #9C7A36); fill-opacity: .22; stroke: var(--ev, #9C7A36); stroke-width: 3; }
.mapart text { font-family: var(--sans); }
.mapart .m-rlabel { font-size: 36px; font-weight: 600; font-stretch: 78%; fill: #5E584B; paint-order: stroke; stroke: #F3EFE6; stroke-width: 6px; stroke-linejoin: round; }
.mapart .m-rlabel-r-mw { fill: #161C38; }
.mapart .m-lm { color: #161C38; }
.mapart .m-lmlabel { font-size: 36px; font-weight: 600; font-stretch: 85%; fill: #161C38; paint-order: stroke; stroke: #F3EFE6; stroke-width: 8px; stroke-linejoin: round; }
.mapart .m-edge-a { fill: none; stroke: #5E584B; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mapart .m-edgelabel { font-size: 32px; font-weight: 600; font-stretch: 78%; fill: #5E584B; paint-order: stroke; stroke: #F3EFE6; stroke-width: 7px; stroke-linejoin: round; }
.mapart .m-pin .m-pulse { fill: var(--ev, #9C7A36); opacity: .2; transform-box: fill-box; transform-origin: center; animation: pinpulse 2.4s var(--ease-out) infinite; }
.mapart .m-pin .m-ring { fill: #FFFDF8; stroke: var(--ev, #9C7A36); stroke-width: 5; }
.mapart .m-pin .m-core { fill: var(--ev, #9C7A36); }
.mapart .m-pin-second .m-ring { stroke: #161C38; } .mapart .m-pin-second .m-core { fill: #161C38; } .mapart .m-pin-second .m-pulse { fill: #161C38; opacity: .1; }
.mapart .m-vlabel { font-family: var(--serif); font-weight: 600; font-size: 50px; fill: #161C38; paint-order: stroke; stroke: #F3EFE6; stroke-width: 12px; stroke-linejoin: round; }
.mapart .m-vsub { font-size: 34px; font-weight: 500; fill: #57534B; paint-order: stroke; stroke: #F3EFE6; stroke-width: 9px; stroke-linejoin: round; }
.mapart .m-north-c { fill: #FFFDF8; stroke: #161C38; stroke-width: 2; } .mapart .m-north-a { fill: #161C38; } .mapart .m-north-t { font-size: 24px; font-weight: 700; fill: #161C38; }
.mapart .m-scale-l { stroke: #161C38; stroke-width: 3; fill: none; } .mapart .m-scale-t { font-size: 28px; font-weight: 600; fill: #161C38; }
@keyframes pinpulse { 0% { transform: scale(.55); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Passport (closing) -------------------------------------- */
.closing { padding: 72px 0 0; text-align: center; }
.pp { margin: 24px auto 0; background: #F4F1EA; color: var(--ink); border-radius: var(--r-m); overflow: hidden; text-align: left;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.8); }
.pp__in { position: relative; padding: 16px 16px 14px; overflow: hidden; }
.pp__bg { position: absolute; inset: 0; width: 100%; height: 100%; color: #A9BACB; opacity: .5; pointer-events: none; }
.pp__in > :not(canvas) { position: relative; }
.pp__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--t-label); font-weight: 600; font-stretch: 82%; letter-spacing: .09em; text-transform: uppercase; color: var(--label); }
.pp__top b { font-family: var(--serif); font-size: var(--t-m); letter-spacing: .01em; text-transform: none; color: var(--ink); font-weight: 600; }
.pp__grid { display: grid; grid-template-columns: 44% 1fr; gap: 14px; margin-top: 12px; align-items: start; }
.pp__photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; filter: grayscale(1) contrast(1.06); mix-blend-mode: multiply; }
.pp__fields { display: grid; gap: 7px; align-content: start; margin: 0; }
.pp__fields .field dd { font-size: var(--t-s); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%; }
.pp__mrz { margin-top: 14px; font-family: "OCR B", "OCR-B", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: min(11.5px, calc((var(--col) - 32px) / 27)); line-height: 1.5; color: #2B2F40; white-space: pre; overflow: hidden; }
.visas { background: #F4F1EA; border-top: 1px dashed #CBC3B2; padding: 14px 16px 18px; }
.visas__title { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-label); font-weight: 600; font-stretch: 82%; letter-spacing: .09em; text-transform: uppercase; color: var(--label); }
#visaFor { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.stamps > .stamp { flex: 0 1 calc(50% - 5px); }
.stamp { width: 100%; max-width: 170px; height: auto; opacity: 0; transform: scale(1.5) rotate(var(--r, 0deg)); }
.stamps.in .stamp { animation: stamp .42s var(--d, 0s) cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6) rotate(var(--r)); } 60% { opacity: .95; } 100% { opacity: .92; transform: scale(1) rotate(var(--r)); } }
.closing__crest { width: 104px; margin: 56px auto 0; }
.closing__urdu { width: min(86vw, 360px); margin: 22px auto 0; }
.closing__line { margin: 16px 0 0; font-family: var(--serif); font-size: var(--t-xl); line-height: 1.15; font-variation-settings: "opsz" 72; font-weight: 500; text-wrap: balance; }
.closing__sign { margin: 14px 0 0; color: var(--silk-dim); line-height: 1.5; }
.closing__sign b { display: block; color: var(--silk); font-weight: 500; font-family: var(--serif); font-size: var(--t-l); margin-top: 2px; }
.foot { text-align: center; padding: 40px var(--gutter) calc(30px + env(safe-area-inset-bottom)); font-size: var(--t-s); color: #A3A1B5; }

/* ---------- Sound toggle -------------------------------------------- */
.sound { position: fixed; z-index: 40; top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(210,176,110,.5); background: rgba(22,28,56,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; place-items: center; cursor: pointer; color: var(--zari); transition: opacity .3s, visibility .3s; }
html.opened .sound { display: grid; }
.sound.away { opacity: 0; visibility: hidden; }
.sound svg { width: 18px; height: 18px; }
.sound .off { display: none; }
.sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="false"] .off { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 700px) {
  :root { --col: 460px; }
}