/* «حكاية عروس» v2 — the bride's story as an open book. Mobile-first, RTL, no dependencies.
 * Sizes derive from --pw (one page's width in px, set by story.js) so the same design runs from 320px phones to desktops. */
:root {
  --desk: #2a1512; --desk-2: #4a2822;
  --paper: #f7eddb; --paper-2: #efdfc2; --paper-edge: #d8c19a;
  --ink: #6b3a3a; --ink-2: #8a6558; --ink-3: #a98b7c;
  --rose: #a85d62; --rose-2: #8e464d; --rose-l: #e9bcb8; --blush: #f3d9d3;
  --gold-1: #f0d9a0; --gold-2: #c9a24e; --gold-3: #8c6526;
  --bronze: linear-gradient(100deg, #6e431f 0%, #b8893e 28%, #8a5a26 52%, #c9a050 76%, #6b4220 100%);
  --foil: linear-gradient(100deg, #b8893e 0%, #f3dc9c 22%, #c9a24e 42%, #8c6526 60%, #ead08f 80%, #a57b34 100%);
  --cloth: #c4948e; --cloth-2: #a9706c; --cloth-d: #8d5552;
  --line: rgba(201, 162, 78, .45); --line-soft: rgba(201, 162, 78, .22);
  --f-display: 'Aref Ruqaa', 'Amiri', serif;
  --f-serif: 'Amiri', 'Aref Ruqaa', serif;
  --f-ui: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --f-num: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cloth-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .15 0 0 0 0 .15 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-cover="mauve"] { --cloth: #a58aa0; --cloth-2: #86687f; --cloth-d: #6a4d64; }
html[data-cover="sage"] { --cloth: #9fb0a0; --cloth-2: #7f937f; --cloth-d: #5d705f; }
html[data-cover="navy"] { --cloth: #5d6f8f; --cloth-2: #43547a; --cloth-d: #2f3d5d; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); background: var(--desk);
  font: 400 16px/1.7 var(--f-ui); overflow: hidden;
  background-image:
    radial-gradient(80% 55% at 50% 42%, rgba(214, 150, 140, .22), transparent 70%),
    radial-gradient(140% 90% at 50% 125%, var(--desk-2), transparent 60%),
    var(--paper-tex);
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nojs { color: var(--gold-1); text-align: center; padding: 40px 20px; }

/* ---------- buttons (also used by the host dashboard) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(168, 93, 98, .45); background: rgba(255, 252, 245, .6);
  color: var(--ink); font: 500 14.5px/1.3 var(--f-ui); text-decoration: none; cursor: pointer;
  transition: background .2s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.btn svg { flex: none; color: var(--rose); }
.btn:active { transform: scale(.98); }
.btn-gold {
  border: 0; color: #2a1e10; font-weight: 600;
  background: linear-gradient(135deg, #f0d898, #c9a24e 55%, #a77c34);
  box-shadow: 0 6px 16px rgba(120, 85, 30, .25), inset 0 1px 0 rgba(255, 245, 210, .6);
}
.btn-gold svg { color: #3a2a12; }
.btn-ghost { background: transparent; }
.btn[disabled] { opacity: .55; cursor: default; }

/* =================================================================== */
/* Gate                                                                */
/* =================================================================== */
.gate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px 16px;
  transition: opacity .6s ease, transform .6s var(--ease);
}
.gate.is-leaving { opacity: 0; transform: scale(1.03); pointer-events: none; }
.gate-card {
  position: relative; width: min(100%, 380px); padding: 58px 26px 30px; text-align: center; color: #fff3e6;
  border-radius: 8px; background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    var(--cloth-tex),
    radial-gradient(120% 80% at 50% 0%, var(--cloth-2), var(--cloth-d));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55); outline: 1px solid var(--line); outline-offset: -11px;
  animation: gateIn .9s var(--ease) both;
}
@keyframes gateIn { from { opacity: 0; transform: translateY(16px); } }
.corner { position: absolute; width: 34px; height: 34px; color: var(--gold-1); opacity: .9; }
.c-tr { top: 8px; right: 8px; }
.c-tl { top: 8px; left: 8px; transform: scaleX(-1); }
.c-br { bottom: 8px; right: 8px; transform: scaleY(-1); }
.c-bl { bottom: 8px; left: 8px; transform: scale(-1); }
.seal {
  position: absolute; top: -30px; left: 50%; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e3a8, #c9a24e 55%, #8a6726 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(255, 236, 170, .35), inset 0 -3px 6px rgba(80, 55, 15, .5);
}
.seal-in {
  position: absolute; inset: 8px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid rgba(80, 55, 15, .55); color: #4a3411; font: 700 18px/1 var(--f-display);
}
.gate-hello { margin: 0; font: 400 18px/1.5 var(--f-serif); color: var(--gold-1); }
.gate-t {
  margin: 2px 0 10px; font: 700 44px/1.35 var(--f-display);
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(60, 20, 20, .45));
}
.gate-s { margin: 0 0 22px; font: 400 15px/1.85 var(--f-ui); color: rgba(255, 243, 230, .92); text-wrap: balance; }
.gate-form { display: grid; gap: 12px; justify-items: center; }
.code { position: relative; display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; }
.code input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; z-index: 2;
  font-size: 16px; letter-spacing: 52px; caret-color: transparent; cursor: text;
}
.cell {
  height: 62px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid rgba(255, 236, 200, .5); background: rgba(60, 20, 22, .22);
  font: 500 28px/1 var(--f-num); color: #fff3e6; transition: border-color .2s, box-shadow .2s, background .2s;
}
.cell.is-on { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(240, 217, 160, .25); }
.cell.is-full { background: rgba(255, 236, 200, .16); }
.code.is-bad { animation: nope .42s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.gate-err { min-height: 1.6em; margin: 0; font-size: 14px; color: #ffe3d0; }
.gate .btn-gold { min-width: 200px; }

/* =================================================================== */
/* Stage                                                               */
/* =================================================================== */
.stage {
  position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.stage.is-in .frame { animation: bookIn 1s var(--ease) both; }
@keyframes bookIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; }
.bar-gap { flex: 1; }
.round {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(42, 21, 18, .6); color: var(--gold-1); cursor: pointer;
}
.mute-slash { position: absolute; width: 24px; height: 1.5px; background: var(--gold-1); border-radius: 2px; transform: rotate(-45deg); }
.round[aria-pressed="true"] .mute-slash { opacity: 0; }
.skip {
  min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(42, 21, 18, .55); color: var(--gold-1); font: 500 14px/1.2 var(--f-ui); cursor: pointer;
}
.credit {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding-bottom: 2px;
  color: rgba(244, 228, 205, .7); font-size: 13px; text-decoration: none;
}
.credit:hover { color: var(--gold-1); }

.book-wrap { display: grid; place-items: center; min-height: 0; padding: 4px 12px; }
.frame { position: relative; width: var(--bw, 340px); height: var(--bh, 560px); transition: transform .9s var(--ease); }
.m-spread .frame.is-closed { transform: translateX(25%); }
.board {
  position: absolute; inset: calc(var(--pad, 8px) * -1); border-radius: 9px; z-index: 0; transition: opacity .5s ease;
  background: var(--cloth-tex), linear-gradient(135deg, #5b3326 0%, #3d2019 55%, #4b2a20 100%);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 220, 180, .14), inset 0 2px 0 rgba(255, 220, 180, .1);
}
.frame.is-closed .board, .frame.is-closed .blk { opacity: 0; }
.book {
  position: absolute; inset: 0; z-index: 1;
  perspective: calc(var(--bw, 340px) * 2.3); perspective-origin: 50% 50%;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.blk { /* page block seen on the outer edges */
  position: absolute; top: 1.2%; bottom: 1.2%; z-index: 0; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #efe2c8 0 1px, #cdb78f 1px 2px);
  transition: width .4s var(--ease);
}
.blk-l { left: 0; width: calc(var(--l, 1) * var(--pad, 8px) * .85); transform: translateX(-100%); }
.blk-r { right: 0; width: calc(var(--r, 0) * var(--pad, 8px) * .85); transform: translateX(100%); }
.m-single .blk-r { display: none; }
.leaf { position: absolute; top: 0; left: 0; height: 100%; width: var(--lw, 50%); transform-origin: right center; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.shade, .ush { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 9; }
.face.front .shade { background: linear-gradient(to left, rgba(50, 25, 15, .55), rgba(50, 25, 15, 0) 70%); }
.face.back .shade { background: linear-gradient(to right, rgba(50, 25, 15, .5), rgba(50, 25, 15, 0) 70%); }
.face.front .ush { background: linear-gradient(to left, rgba(40, 18, 10, .5), rgba(40, 18, 10, 0) 55%); }
.face.back .ush { background: linear-gradient(to right, rgba(40, 18, 10, .45), rgba(40, 18, 10, 0) 55%); }
.m-single .face.back .ush { display: none; }

/* =================================================================== */
/* Paper pages                                                         */
/* =================================================================== */
.pg {
  background-color: var(--paper); background-image: var(--paper-tex);
  box-shadow: inset 0 0 calc(var(--pw) * .16) rgba(170, 120, 60, .3);
}
.pg::before { /* thin gold frame */
  content: ''; position: absolute; inset: calc(var(--pw) * .034); z-index: 1; pointer-events: none;
  border: 1px solid rgba(176, 138, 74, .38); border-radius: 3px;
}
.pg::after { /* gutter shadow toward the spine */
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none;
}
.m-spread .face.front.pg::after { background: linear-gradient(to left, rgba(110, 70, 35, .34), rgba(110, 70, 35, .1) 6%, transparent 15%); }
.m-spread .face.back.pg::after { background: linear-gradient(to right, rgba(110, 70, 35, .34), rgba(110, 70, 35, .1) 6%, transparent 15%); }
.m-single .face.front.pg::after { background: linear-gradient(to left, rgba(110, 70, 35, .3), rgba(110, 70, 35, .08) 4%, transparent 9%); }
.face.blank { background-color: var(--paper-2); background-image: var(--paper-tex); }
.face.blank::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(110, 70, 35, .28), transparent 20%); }

.fl { position: absolute; z-index: 5; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.fl-a { width: calc(var(--pw) * .62); }
.fl-b { width: calc(var(--pw) * .5); }
.pg-l .fl-a { left: calc(var(--pw) * -.1); bottom: calc(var(--pw) * -.12); transform: scaleX(-1); }
.pg-l .fl-b { left: calc(var(--pw) * -.04); top: calc(var(--pw) * -.04); transform: scaleX(-1); }
.pg-r .fl-a { right: calc(var(--pw) * -.1); bottom: calc(var(--pw) * -.12); }
.pg-r .fl-b { right: calc(var(--pw) * -.04); top: calc(var(--pw) * -.04); }
.m-single .fl-a { width: calc(var(--pw) * .5); }
.m-single .fl-b { width: calc(var(--pw) * .4); }
.m-single .pg-one .fl-a { right: calc(var(--pw) * -.08); bottom: calc(var(--pw) * -.1); left: auto; transform: none; }
.m-single .pg-one .fl-b { right: calc(var(--pw) * -.03); top: calc(var(--pw) * -.03); left: auto; transform: none; }

/* ---------- photos ---------- */
.pics { position: absolute; z-index: 2; inset: 5.5% 5% 7% 6%; }
.m-single .pics { position: relative; inset: auto; z-index: 2; flex: none; height: 52%; margin: calc(var(--pw) * .06) calc(var(--pw) * .04) 0; }
.ph {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0;
  transform: rotate(var(--r, 0deg)); padding: calc(var(--pw) * .02);
  background: #fffdf8; border-radius: 2px;
  box-shadow: 0 calc(var(--pw) * .012) calc(var(--pw) * .035) rgba(80, 45, 25, .32), 0 0 0 1px rgba(150, 120, 80, .16);
}
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); background: var(--blush); }
.ph.is-art img { object-position: center; }
/* spread: 3:4 container */
.n1 .ph { --x: 9%; --y: 8%; --w: 82%; --h: 82%; --r: -2deg; }
.n2 .ph:nth-child(1) { --x: 2%; --y: 9%; --w: 53%; --h: 62%; --r: -3deg; }
.n2 .ph:nth-child(2) { --x: 45%; --y: 26%; --w: 53%; --h: 62%; --r: 3.2deg; }
.n3 .ph:nth-child(1) { --x: 3%; --y: 3%; --w: 46%; --h: 46%; --r: -3deg; }
.n3 .ph:nth-child(2) { --x: 51%; --y: 6%; --w: 46%; --h: 46%; --r: 3deg; }
.n3 .ph:nth-child(3) { --x: 13%; --y: 54%; --w: 74%; --h: 40%; --r: -1.6deg; z-index: 2; }
.n4 .ph:nth-child(1) { --x: 3%; --y: 3%; --w: 46%; --h: 45%; --r: -2deg; }
.n4 .ph:nth-child(2) { --x: 51%; --y: 6%; --w: 46%; --h: 43%; --r: 2.5deg; }
.n4 .ph:nth-child(3) { --x: 4%; --y: 51%; --w: 46%; --h: 42%; --r: 2deg; }
.n4 .ph:nth-child(4) { --x: 51%; --y: 53%; --w: 46%; --h: 41%; --r: -2.5deg; }
/* single page: wider, shorter container */
.m-single .n1 .ph { --x: 15%; --y: 3%; --w: 70%; --h: 92%; }
.m-single .n2 .ph:nth-child(1) { --x: 3%; --y: 6%; --w: 50%; --h: 82%; }
.m-single .n2 .ph:nth-child(2) { --x: 47%; --y: 12%; --w: 50%; --h: 82%; }
.m-single .n3 .ph:nth-child(1) { --x: 2%; --y: 1%; --w: 47%; --h: 53%; }
.m-single .n3 .ph:nth-child(2) { --x: 51%; --y: 4%; --w: 47%; --h: 53%; }
.m-single .n3 .ph:nth-child(3) { --x: 12%; --y: 54%; --w: 76%; --h: 44%; }
.m-single .n4 .ph:nth-child(1) { --x: 3%; --y: 1%; --w: 46%; --h: 47%; }
.m-single .n4 .ph:nth-child(2) { --x: 51%; --y: 3%; --w: 46%; --h: 45%; }
.m-single .n4 .ph:nth-child(3) { --x: 3%; --y: 51%; --w: 46%; --h: 46%; }
.m-single .n4 .ph:nth-child(4) { --x: 51%; --y: 52%; --w: 46%; --h: 45%; }
/* full-bleed photo */
.pics.full { inset: 0; }
.m-single .pics.full { margin: 0; height: 56%; }
.pics.full .ph { --x: 0; --y: 0; --w: 100%; --h: 100%; --r: 0deg; padding: 0; border-radius: 0; box-shadow: none; }
.m-single .pics.full .ph img { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.m-single .pics.full .ph { background: none; }
.pics.full .ph img { background: var(--blush); }
/* arched frame */
.pics.arch { inset: 7% 8% 10% 8%; }
.m-single .pics.arch { inset: auto; margin: calc(var(--pw) * .09) calc(var(--pw) * .12) 0; }
.pics.arch .ph {
  --x: 0; --y: 0; --w: 100%; --h: 100%; --r: 0deg; padding: calc(var(--pw) * .016);
  border-radius: 999px 999px calc(var(--pw) * .03) calc(var(--pw) * .03);
  background: linear-gradient(160deg, #f3dc9c, #b8893e 55%, #e9cf8c);
  box-shadow: 0 calc(var(--pw) * .02) calc(var(--pw) * .05) rgba(60, 30, 15, .4);
}
.pics.arch .ph img { border-radius: inherit; border-radius: 999px 999px calc(var(--pw) * .02) calc(var(--pw) * .02); }

/* ---------- text block ---------- */
.m-spread .pg-r { display: flex; flex-direction: column; justify-content: center; padding: 8% 10% 17% 10%; }
.m-single .pg-one { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.m-single .pg-one::-webkit-scrollbar { display: none; }
.txt { position: relative; z-index: 3; text-align: right; }
.m-single .txt { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; padding: calc(var(--pw) * .05) calc(var(--pw) * .1) calc(var(--pw) * .24); }
.kick { margin: 0; font: 400 clamp(17px, calc(var(--pw) * .056), 30px)/1.5 var(--f-display); color: var(--rose-2); }
.ttl { margin: 0; font: 700 clamp(26px, calc(var(--pw) * .1), 58px)/1.38 var(--f-display); color: var(--ink); text-wrap: balance; }
.ttl.sm { font-size: clamp(24px, calc(var(--pw) * .088), 50px); }
.txt .orn { width: calc(var(--pw) * .28); height: auto; aspect-ratio: 160 / 14; margin: calc(var(--pw) * .028) 0 calc(var(--pw) * .02); color: var(--gold-2); }
.m-spread .txt .orn { margin-inline-start: 0; }
.m-single .txt .orn { margin-inline: auto; }
.bod { margin: 0; font: 400 clamp(15px, calc(var(--pw) * .047), 23px)/1.95 var(--f-serif); color: var(--ink-2); text-wrap: balance; }
.note { margin: calc(var(--pw) * .035) 0 0; display: flex; align-items: center; gap: .5em; font: 400 clamp(15px, calc(var(--pw) * .05), 24px)/1.6 var(--f-serif); color: var(--rose-2); }
.note svg { width: .85em; height: .85em; color: var(--rose); flex: none; }
.m-single .note { justify-content: center; }
.closing .ttl { font-size: clamp(34px, calc(var(--pw) * .15), 84px); background: var(--bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* more-content cue for scrolling single pages */
.more { position: absolute; inset: auto 0 calc(var(--pw) * .02) 0; z-index: 9; display: none; text-align: center; pointer-events: none; font: 500 12px/1 var(--f-ui); color: var(--rose-2); }
.m-single .face.has-more .more { display: block; }
.m-single .face.has-more::before { content: ''; }

/* =================================================================== */
/* Cover                                                               */
/* =================================================================== */
.face.cover { cursor: pointer; background: var(--cloth-tex), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 40, 40, .07) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 40% 20%, var(--cloth), var(--cloth-2) 70%, var(--cloth-d)); border-radius: 4px 10px 10px 4px; box-shadow: inset 0 0 0 1px rgba(255, 235, 220, .18), inset 0 calc(var(--pw) * .02) calc(var(--pw) * .1) rgba(255, 235, 220, .12), inset 0 calc(var(--pw) * -.05) calc(var(--pw) * .12) rgba(60, 20, 20, .35); }
.face.cover::after { /* spine groove */
  content: ''; position: absolute; top: 0; bottom: 0; right: calc(var(--pw) * .055); width: calc(var(--pw) * .02); pointer-events: none;
  background: linear-gradient(to right, rgba(255, 235, 220, .22), rgba(60, 20, 20, .4) 55%, rgba(255, 235, 220, .12));
}
.cv { position: absolute; inset: 0; }
.cv-arch { position: absolute; z-index: 2; top: 6%; left: 50%; width: 76%; height: auto; aspect-ratio: 300 / 420; transform: translateX(-50%); filter: drop-shadow(0 1px 0 rgba(255, 230, 200, .35)) drop-shadow(0 2px 2px rgba(70, 25, 25, .45)); }
.cv-text { position: absolute; z-index: 3; top: 18%; left: 12%; right: 12%; bottom: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cv-kick { margin: 0; font: 400 clamp(20px, calc(var(--pw) * .1), 46px)/1.3 var(--f-display); }
.cv-names { margin: -.04em 0 0; font: 700 clamp(46px, calc(var(--pw) * .28), 130px)/1.2 var(--f-display); }
.foil { background: var(--bronze); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 232, 200, .5)) drop-shadow(0 2px 2px rgba(70, 25, 25, .35)); }
.cv-orn { width: calc(var(--pw) * .36); height: auto; aspect-ratio: 160 / 14; margin: calc(var(--pw) * .03) 0; color: #f6e2b0; filter: drop-shadow(0 1px 1px rgba(70, 25, 25, .5)); }
.cv-sub { margin: 0; max-width: 14em; font: 400 clamp(14.5px, calc(var(--pw) * .055), 24px)/1.8 var(--f-serif); color: #fff3e4; text-shadow: 0 1px 2px rgba(80, 30, 30, .5); text-wrap: balance; }
.cv-guest { margin: calc(var(--pw) * .03) 0 0; font: 400 clamp(14.5px, calc(var(--pw) * .05), 22px)/1.6 var(--f-serif); color: #fff3e4; text-shadow: 0 1px 2px rgba(80, 30, 30, .5); }
.cv-guest b { font-weight: 700; color: #fff; }
.cv-open {
  position: absolute; z-index: 4; left: 50%; bottom: 5.5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 1px solid rgba(255, 236, 200, .7); background: rgba(100, 45, 45, .35); color: #fff6ea;
  font: 500 clamp(14px, calc(var(--pw) * .048), 17px)/1.3 var(--f-ui); cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: nudge 2.6s ease-in-out infinite;
}
.cv-open svg { width: 18px; height: 18px; }
@keyframes nudge { 50% { transform: translateX(-50%) translateY(-3px); } }
.cv .fl { z-index: 1; }
.cv .f1 { width: calc(var(--pw) * .66); top: calc(var(--pw) * -.06); right: calc(var(--pw) * -.08); transform: scaleY(-1); }
.cv .f2 { width: calc(var(--pw) * .54); top: calc(var(--pw) * -.04); left: calc(var(--pw) * -.06); transform: scaleX(-1); }
.cv .f3 { width: calc(var(--pw) * .46); bottom: calc(var(--pw) * -.05); left: calc(var(--pw) * -.06); transform: scale(-1, -1); }
.cv .f4 { width: calc(var(--pw) * .44); bottom: calc(var(--pw) * -.1); right: calc(var(--pw) * -.08); }
.face.cover .endpaper { display: none; }

/* =================================================================== */
/* #wide overlay: no longer used by the spread (cards sit on the right  */
/* page — see "Spread card pages" at the end); kept hidden/inert.       */
/* =================================================================== */
.wide {
  position: absolute; z-index: 20; left: 9%; right: 9%; top: 6%; bottom: 12%; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.wide.on { opacity: 1; pointer-events: auto; }
.m-single .wide { display: none; }
.card { width: 100%; max-height: 100%; text-align: center; color: var(--ink); }
.m-single .card { padding: calc(var(--pw) * .07) calc(var(--pw) * .09) calc(var(--pw) * .22); position: relative; z-index: 3; }
.card .orn { width: calc(var(--pw) * .3); height: auto; aspect-ratio: 160 / 14; margin: calc(var(--pw) * .02) auto; color: var(--gold-2); }
.inv-top { margin: 0; font: 400 clamp(19px, calc(var(--pw) * .075), 42px)/1.5 var(--f-display); color: var(--ink); }
.inv-lbl { margin: calc(var(--pw) * .02) 0 0; font: 400 clamp(15px, calc(var(--pw) * .048), 24px)/1.5 var(--f-serif); color: var(--ink-2); }
.inv-name { margin: -.05em 0 0; font: 700 clamp(48px, calc(var(--pw) * .21), 120px)/1.3 var(--f-display); background: var(--bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inv-groom { margin: 0; font: 400 clamp(15px, calc(var(--pw) * .05), 24px)/1.6 var(--f-serif); color: var(--ink-2); }
.inv-host { margin: 0; font: 400 clamp(17px, calc(var(--pw) * .06), 30px)/1.6 var(--f-serif); color: var(--ink); }
.inv-host b { font-weight: 700; }
.facts { list-style: none; margin: calc(var(--pw) * .035) auto 0; padding: 0; display: grid; gap: calc(var(--pw) * .028); width: fit-content; max-width: 100%; text-align: right; }
.facts li { display: flex; align-items: flex-start; gap: calc(var(--pw) * .03); }
.facts svg { flex: none; width: clamp(20px, calc(var(--pw) * .06), 28px); height: clamp(20px, calc(var(--pw) * .06), 28px); margin-top: .12em; color: var(--gold-3); }
.facts span { display: grid; font: 500 clamp(14.5px, calc(var(--pw) * .046), 22px)/1.55 var(--f-ui); color: var(--ink); }
.facts small { font: 400 clamp(14px, calc(var(--pw) * .042), 20px)/1.5 var(--f-ui); color: var(--ink-2); }
.women { margin: calc(var(--pw) * .03) auto 0; padding: .4em .9em; border-radius: 999px; border: 1px dashed var(--line); background: rgba(255, 250, 240, .6); font: 400 clamp(14px, calc(var(--pw) * .042), 19px)/1.6 var(--f-ui); color: var(--ink-2); width: fit-content; max-width: 100%; }

/* venue buttons + countdown */
.acts { display: grid; gap: calc(var(--pw) * .028); margin-top: calc(var(--pw) * .05); width: min(100%, calc(var(--pw) * .66)); }
.m-single .acts { width: min(100%, 300px); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: clamp(44px, calc(var(--pw) * .11), 58px); padding: .35em 1.1em; border-radius: 999px;
  font: 600 clamp(14.5px, calc(var(--pw) * .046), 20px)/1.3 var(--f-ui); text-decoration: none; cursor: pointer; border: 1px solid transparent; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .2s;
}
.pill svg { width: 1.25em; height: 1.25em; flex: none; }
.pill:active { transform: scale(.98); }
.pill-gold { color: #fff8ee; background: linear-gradient(135deg, #c9a060, #a8793a 60%, #8d6128); box-shadow: 0 6px 14px rgba(120, 80, 30, .3), inset 0 1px 0 rgba(255, 240, 200, .4); }
.pill-line { color: var(--ink); background: rgba(255, 252, 244, .85); border-color: rgba(168, 93, 98, .4); }
.pill-line svg { color: var(--rose); }
.gcal { justify-self: center; font: 500 clamp(14px, calc(var(--pw) * .04), 17px)/1.4 var(--f-ui); color: var(--rose-2); text-decoration: underline; text-underline-offset: 4px; padding: 10px 6px; }
.cd-h { margin: calc(var(--pw) * .045) 0 calc(var(--pw) * .012); font: 400 clamp(15px, calc(var(--pw) * .048), 22px)/1.4 var(--f-serif); color: var(--rose-2); }
.countdown { display: flex; gap: calc(var(--pw) * .022); direction: rtl; }
.cd { display: grid; justify-items: center; min-width: calc(var(--pw) * .15); padding: .3em .45em .25em; border-radius: 10px; background: rgba(255, 250, 240, .7); border: 1px solid rgba(176, 138, 74, .35); }
.cd b { font: 500 clamp(18px, calc(var(--pw) * .06), 30px)/1.3 var(--f-num); color: var(--ink); }
.cd span { font: 400 clamp(12px, calc(var(--pw) * .034), 15px)/1.3 var(--f-ui); color: var(--ink-2); }
.cd-msg { margin: .5em 0 0; font: 600 clamp(14.5px, calc(var(--pw) * .045), 20px)/1.6 var(--f-ui); color: var(--rose-2); }

/* RSVP card */
.rsv { width: min(100%, calc(var(--pw) * 1.16)); margin-inline: auto; }
.rsv .inv-top { font-size: clamp(22px, calc(var(--pw) * .08), 46px); }
.rsv-sub { margin: 0; font: 400 clamp(15px, calc(var(--pw) * .05), 25px)/1.6 var(--f-serif); color: var(--ink-2); }
.rsv form { display: grid; gap: calc(var(--pw) * .028); margin-top: calc(var(--pw) * .04); }
.choice-row { display: grid; gap: calc(var(--pw) * .028); }
.opt {
  display: flex; align-items: center; justify-content: center; gap: .6em; width: 100%; min-height: clamp(46px, calc(var(--pw) * .115), 62px); padding: .3em 1em;
  border-radius: 14px; border: 1.5px solid var(--rose); background: rgba(255, 252, 245, .7); color: var(--rose-2);
  font: 600 clamp(15px, calc(var(--pw) * .05), 22px)/1.3 var(--f-ui); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.opt svg { width: 1.15em; height: 1.15em; flex: none; }
.opt:active { transform: scale(.985); }
.opt-yes { color: #fff7f0; background: linear-gradient(180deg, #b36a6e, #98505a); border-color: #98505a; box-shadow: 0 6px 14px rgba(140, 70, 78, .3); }
.rsv[data-pick="no"] .opt-yes { color: var(--rose-2); background: rgba(255, 252, 245, .7); box-shadow: none; border-color: var(--rose); }
.rsv[data-pick="no"] .opt-no { color: #fff7f0; background: linear-gradient(180deg, #b36a6e, #98505a); border-color: #98505a; box-shadow: 0 6px 14px rgba(140, 70, 78, .3); }
.opt[aria-pressed="true"] { outline: 2px solid rgba(201, 162, 78, .7); outline-offset: 2px; }
.comp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 calc(var(--pw) * .02); }
.comp label { font: 500 clamp(14.5px, calc(var(--pw) * .046), 21px)/1.4 var(--f-ui); color: var(--ink); }
.sel { position: relative; width: clamp(84px, calc(var(--pw) * .24), 130px); }
.sel select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px; padding: .2em 1.9em .2em .8em; border-radius: 12px; border: 1px solid rgba(168, 93, 98, .45);
  background: rgba(255, 252, 245, .85); color: var(--ink); font: 500 clamp(15px, calc(var(--pw) * .048), 20px)/1.3 var(--f-num); cursor: pointer;
}
.sel svg { position: absolute; left: .6em; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--rose); pointer-events: none; }
.nm { position: relative; }
.nm svg { position: absolute; right: .9em; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--ink-3); pointer-events: none; }
.nm input {
  width: 100%; min-height: clamp(46px, calc(var(--pw) * .115), 60px); padding: .3em 2.8em .3em 1em; border-radius: 14px; border: 1px solid rgba(168, 93, 98, .4);
  background: rgba(255, 252, 245, .85); color: var(--ink); font: 400 clamp(15px, calc(var(--pw) * .047), 20px)/1.4 var(--f-ui);
}
.nm input::placeholder { color: var(--ink-3); opacity: 1; }
.send { justify-self: center; width: min(100%, calc(var(--pw) * .7)); border-radius: 999px; border: 0; min-height: clamp(46px, calc(var(--pw) * .115), 60px); color: #fff7f0; font: 600 clamp(15px, calc(var(--pw) * .05), 21px)/1.3 var(--f-ui); cursor: pointer; background: linear-gradient(180deg, #c9a060, #a8793a); box-shadow: 0 6px 14px rgba(120, 80, 30, .3); }
.send[disabled] { opacity: .6; }
.error { margin: 0; font: 500 clamp(14px, calc(var(--pw) * .042), 18px)/1.5 var(--f-ui); color: #a3402f; }
.thanks { display: grid; justify-items: center; gap: .4em; padding: calc(var(--pw) * .06) 0; outline: none; }
.thanks-ic { width: calc(var(--pw) * .16); height: calc(var(--pw) * .16); min-width: 48px; min-height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff7f0; background: linear-gradient(180deg, #b36a6e, #98505a); }
.thanks-t { margin: .3em 0 0; font: 700 clamp(22px, calc(var(--pw) * .075), 40px)/1.5 var(--f-display); color: var(--ink); }
.thanks-s { margin: 0; font: 400 clamp(15px, calc(var(--pw) * .048), 22px)/1.8 var(--f-serif); color: var(--ink-2); max-width: 22em; }
.thanks .btn { margin-top: .6em; }

/* RSVP: optional message for the bride; phones: the form block sits in the middle of the page */
.m-single .pg-one > .rsv, .m-single .pg-one > .wsh { margin-block: auto; }
.msg { position: relative; }
.msg textarea {
  display: block; width: 100%; height: calc(3 * 1.6em + 2.4em); padding: .6em 1em 1.8em; resize: none; border-radius: 14px; border: 1px solid rgba(168, 93, 98, .4);
  background: rgba(255, 252, 245, .85); color: var(--ink); font: 400 clamp(15px, calc(var(--pw) * .047), 19px)/1.6 var(--f-ui);
}
.msg textarea::placeholder { color: var(--ink-3); opacity: 1; }
.msg-count { position: absolute; left: .9em; bottom: .55em; font: 500 12px/1 var(--f-num); color: var(--ink-3); pointer-events: none; direction: ltr; unicode-bidi: isolate; }
.msg-count.is-near { color: #a3402f; }
.thanks-m { margin: 0; font: 400 clamp(14.5px, calc(var(--pw) * .045), 20px)/1.7 var(--f-serif); color: var(--rose-2); }
.thanks-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6em; }

/* «دفتر التهاني» — guests' messages, newest first, scrolls inside the card */
.wsh { width: min(100%, calc(var(--pw) * 1.3)); margin-inline: auto; display: flex; flex-direction: column; }
.m-spread .wsh { max-height: calc(var(--bh) * .8); }
.wsh .inv-top { font-size: clamp(22px, calc(var(--pw) * .08), 46px); }
.wsh-list {
  list-style: none; margin: calc(var(--pw) * .02) 0 0; padding: 2px .25em; display: grid; gap: calc(var(--pw) * .025); align-content: start;
  min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; text-align: right; scrollbar-width: thin; scrollbar-color: rgba(168, 93, 98, .45) transparent;
}
.m-single .wsh-list { max-height: calc(var(--bh) * .56); }
.wsh-item { padding: .7em .95em .6em; border-radius: 14px; background: rgba(255, 252, 245, .8); border: 1px solid rgba(201, 162, 78, .38); box-shadow: 0 2px 6px rgba(120, 70, 50, .08); }
.wsh-msg { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font: 400 clamp(15px, calc(var(--pw) * .047), 21px)/1.75 var(--f-serif); color: var(--ink); }
.wsh-name { margin: .2em 0 0; font: 600 clamp(13px, calc(var(--pw) * .04), 16px)/1.4 var(--f-ui); color: var(--rose-2); }
.wsh-name::before { content: '— '; }
.wsh-status { margin: calc(var(--pw) * .03) 0 0; font: 400 clamp(15px, calc(var(--pw) * .048), 21px)/1.8 var(--f-serif); color: var(--ink-2); }
.wsh-status:empty { display: none; }
.wsh-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin-top: .5em; }

/* =================================================================== */
/* Pager (counter + round arrows), drawn over the book                 */
/* =================================================================== */
.pager {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 2.4%; display: flex; align-items: center; gap: 10px; padding: 0 calc(var(--pw) * .06);
  pointer-events: none; transition: opacity .4s ease;
}
.frame.is-closed .pager { opacity: 0; visibility: hidden; }
.pgap { flex: 1; }
.pcount { font: 500 clamp(13px, calc(var(--pw) * .04), 17px)/1 var(--f-num); color: var(--ink-2); direction: ltr; unicode-bidi: isolate; letter-spacing: .02em; }
.pg-btn {
  pointer-events: auto; display: grid; place-items: center; width: clamp(44px, calc(var(--pw) * .1), 56px); height: clamp(44px, calc(var(--pw) * .1), 56px); padding: 0; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .15s, opacity .2s;
}
.pg-next { border: 0; color: #fff7f0; background: radial-gradient(circle at 35% 30%, #c4797c, #98505a 75%); box-shadow: 0 5px 12px rgba(120, 50, 55, .4), inset 0 1px 0 rgba(255, 220, 215, .4); }
.pg-prev { border: 1px solid rgba(168, 93, 98, .5); color: var(--rose-2); background: rgba(255, 250, 242, .75); }
.pg-btn:active { transform: scale(.94); }
.pg-btn[disabled] { opacity: 0; pointer-events: none; }
.pg-next svg, .pg-prev svg { width: 22px; height: 22px; }

/* =================================================================== */
/* Reduced motion                                                      */
/* =================================================================== */
.rm .frame, .rm .board, .rm .wide, .rm .blk { transition: none; }
.rm .book { transition: opacity .16s ease; }
.rm .book.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gate-card, .stage.is-in .frame, .cv-open, .code.is-bad { animation: none; }
  .frame, .board, .wide, .pager { transition: none; }
}
@media (max-width: 360px) { .code { grid-template-columns: repeat(4, 48px); gap: 8px; } .cell { height: 56px; } }

/* =================================================================== */
/* Shared form bits (host dashboard link generator)                    */
/* =================================================================== */
:root { --gold-ink: linear-gradient(100deg, #8c6526 0%, #b8893e 30%, #9a7230 55%, #c49a4a 78%, #7d5a22 100%); }
.form { display: grid; gap: 10px; }
.field { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label { font: 500 14px/1.4 var(--f-ui); color: var(--ink-2); padding: 0; }
.form input[type="text"] {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; font-size: 16px;
  border: 1px solid #d6c39e; background: #fffaf1; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.form input:focus-visible { border-color: #b08540; box-shadow: 0 0 0 3px rgba(201, 162, 78, .2); outline: none; }
.hint { font-size: 12.5px; color: var(--ink-3); }
.pcount { padding: .28em .7em; border-radius: 999px; background: rgba(250, 242, 228, .88); box-shadow: 0 1px 4px rgba(90, 50, 30, .18); pointer-events: none; }
.m-spread .gcal { display: none; }
.venue .acts { margin-top: calc(var(--pw) * .035); }
.venue .cd-h { margin-top: calc(var(--pw) * .03); }
.cd { min-width: calc(var(--pw) * .13); }
.m-spread .venue .bod { line-height: 1.7; }
.m-spread .pg-r { padding-bottom: 15%; }
.rsv { width: min(100%, calc(var(--pw) * 1.3)); }
.m-spread .inv-name { font-size: clamp(48px, calc(var(--pw) * .24), 130px); }
.m-spread .facts span { font-size: clamp(14.5px, calc(var(--pw) * .05), 24px); }
.m-single .cv-arch { aspect-ratio: auto; height: 68%; }
.m-single .cv-text { top: 13%; bottom: 25%; }
.m-single .pics.arch { height: 38%; }
.m-single .pics.arch { height: 33%; }
.m-single .venue .orn { display: none; }
.m-single .venue .acts { margin-top: calc(var(--pw) * .03); }
.m-single .venue .cd-h { margin-top: calc(var(--pw) * .02); }
.m-single .venue .gcal { padding: 2px 6px; }
.m-single .gcal { display: none; }
.m-spread .msg textarea { height: calc(2 * 1.6em + 2.2em); }

/* Floral sprigs never touch a photo (owner 2026-10-21): not drawn over it and not peeking from behind it.
 * Spread: a photo page (album / arch / full) has no sprigs — its facing text page keeps them.
 * Phone: photos sit at the top, so the top sprig goes; the bottom sprig stays under the text, behind it. */
.m-spread .pg-l:has(.pics) .fl,
.m-single .pg-one:has(.pics) .fl-b { display: none; }
.pg:has(.pics) .fl { z-index: 1; }

/* =================================================================== */
/* Spread card pages (invitation / RSVP / wishes): never across the    */
/* spine — the card is on the right page, a supporting page on the left */
/* =================================================================== */
.m-spread .pg-r.has-card { padding: 7% 9% 13%; align-items: center; }
.m-spread .pg-r.has-card > .card { position: relative; z-index: 6; width: 100%; max-height: 100%; min-height: 0; }
.m-spread .pg-r.has-card .fl-a { width: calc(var(--pw) * .4); right: calc(var(--pw) * -.07); bottom: calc(var(--pw) * -.08); }
.m-spread .pg-r.has-card .fl-b { width: calc(var(--pw) * .3); }
/* invitation, right page: the names */
.m-spread .pg-r > .inv .inv-top { font-size: clamp(19px, calc(var(--pw) * .07), 40px); }
.m-spread .pg-r > .inv .inv-name { font-size: clamp(48px, calc(var(--pw) * .26), 150px); margin: .02em 0 .06em; }
.m-spread .pg-r > .inv .inv-host { margin-top: calc(var(--pw) * .02); }
/* RSVP, right page: compact so the whole form fits one page */
.m-spread .pg-r > .rsv .inv-top { font-size: clamp(20px, calc(var(--pw) * .07), 40px); }
.m-spread .pg-r > .rsv .rsv-sub { font-size: clamp(15px, calc(var(--pw) * .044), 22px); }
.m-spread .pg-r > .rsv form { gap: calc(var(--pw) * .022); margin-top: calc(var(--pw) * .03); }
.m-spread .pg-r > .rsv { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(168, 93, 98, .45) transparent; padding: 2px; }
.m-spread .pg-r > .rsv .choice-row { display: flex; flex-wrap: wrap; gap: calc(var(--pw) * .022); }
.m-spread .pg-r > .rsv .opt { flex: 1 1 auto; width: auto; white-space: nowrap; gap: .4em; padding: .3em .55em; font-size: clamp(13.5px, calc(var(--pw) * .037), 19px); min-height: clamp(44px, calc(var(--pw) * .1), 56px); }
.m-spread .pg-r > .rsv .nm input, .m-spread .pg-r > .rsv .send { min-height: clamp(44px, calc(var(--pw) * .1), 56px); }
/* wishes, right page: the list scrolls inside the page */
.m-spread .pg-r > .wsh { max-height: 100%; }

/* left page */
.side { position: absolute; z-index: 3; inset: 7% 11% 12%; display: grid; place-items: center; text-align: center; color: var(--ink); }
.side-arch { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 1px 0 rgba(255, 250, 235, .7)); }
.side-in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 30% 12% 10%; }
.side .orn { width: calc(var(--pw) * .3); height: auto; aspect-ratio: 160 / 14; margin: calc(var(--pw) * .02) auto; color: var(--gold-2); }
.side-inv { inset: 7% 7% 12%; }
.side-inv .side-in { padding: 30% 8% 9%; }
.side-inv .inv-b > .orn { margin-top: 0; margin-bottom: calc(var(--pw) * .045); }
.side-inv .facts { margin-top: 0; gap: calc(var(--pw) * .045); }
.side-inv .facts span { font-size: clamp(13.5px, calc(var(--pw) * .042), 21px); }
.side-inv .facts small { font-size: clamp(13px, calc(var(--pw) * .036), 18px); }
.side-inv .facts svg { width: clamp(18px, calc(var(--pw) * .05), 26px); height: clamp(18px, calc(var(--pw) * .05), 26px); }
.side-name { margin: 0; font: 700 clamp(48px, calc(var(--pw) * .24), 140px)/1.3 var(--f-display); background: var(--bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side-date { margin: calc(var(--pw) * .015) 0 0; font: 500 clamp(15px, calc(var(--pw) * .046), 22px)/1.6 var(--f-ui); color: var(--ink); }
.side-hijri { margin: 0; font: 400 clamp(14px, calc(var(--pw) * .04), 19px)/1.6 var(--f-ui); color: var(--ink-2); }
.pics.side-pics { inset: 7% 9% 11%; }
.m-spread .pg-l.has-side .fl-a { width: calc(var(--pw) * .4); left: calc(var(--pw) * -.07); bottom: calc(var(--pw) * -.08); }
.m-spread .pg-l.has-side .fl-b { width: calc(var(--pw) * .3); }