/* The board is a second scene above the invitation, with a camera-style pan. */
body.camera-moving,body.profile-open{overflow:hidden}
.view-arriving{position:fixed!important;inset:0;max-height:100svh;overflow:hidden!important;z-index:30;will-change:transform}
.view-from-above{animation:pan-from-above 1150ms cubic-bezier(.76,0,.24,1) both}
.view-from-below{animation:pan-from-below 1150ms cubic-bezier(.76,0,.24,1) both}
.view-to-below{animation:pan-to-below 1150ms cubic-bezier(.76,0,.24,1) both;will-change:transform}
.view-to-above{animation:pan-to-above 1150ms cubic-bezier(.76,0,.24,1) both;will-change:transform}
@keyframes pan-from-above{from{transform:translateY(-100svh)}to{transform:translateY(0)}}
@keyframes pan-from-below{from{transform:translateY(100svh)}to{transform:translateY(0)}}
@keyframes pan-to-below{from{transform:translateY(0)}to{transform:translateY(100svh)}}
@keyframes pan-to-above{from{transform:translateY(0)}to{transform:translateY(-100svh)}}
.board-view{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 12%,#681431 0,#610f2d 55%,#490b23 100%);padding-bottom:20px}
.board-view:after{content:"";position:absolute;inset:0;background-image:url('assets/grain.svg');opacity:.06;pointer-events:none;z-index:0}
.board-view .harlequin{width:30px;background-size:65px 116px}
.board-masthead{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:0 auto;padding:30px 72px 0}
.board-return{background:none;border:0;color:#f0c3d4;min-height:44px;padding:10px 0;font-size:17px;font-style:italic}
.board-return span{display:inline-block;font-style:normal;margin-right:9px}
.board-return:hover{color:var(--paper)}
.board-main{position:relative;z-index:1;padding:0 64px}
.board-heading{text-align:center;padding:36px 0 36px}
.board-heading .eyebrow{color:var(--pink);font-size:10px;letter-spacing:3px;margin-bottom:18px}
.board-heading h1{font-size:clamp(48px,4.7vw,76px);letter-spacing:0;line-height:1.02}
.board-heading h1>span{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:.5em;font-weight:400;display:block;letter-spacing:0;margin-bottom:8px}
.board-instruction{font-size:clamp(20px,1.9vw,30px);font-style:italic;line-height:1.4;color:var(--pink);margin:18px 0 0}
.board-instruction span{font-size:inherit;color:inherit}
.bulletin-frame{position:relative;max-width:1440px;margin:0 auto;padding:14px;background:linear-gradient(135deg,#74521e 0,#c4a456 9%,#edce87 12%,#9d7832 25%,#6c471b 49%,#bf9a49 70%,#e9c982 86%,#82602a 100%);border:1px solid #bc9a51;box-shadow:0 22px 55px #28000e70,inset 0 0 0 3px #58341b,inset 0 0 0 5px #ba9347}
.bulletin-frame:before{content:"";position:absolute;inset:7px;border:1px solid #ecd89980;pointer-events:none}
.bulletin-board{position:relative;padding:61px 35px 30px;background-color:#4b2835;background-image:linear-gradient(0deg,#220e1680,#43243200 40%),repeating-linear-gradient(0deg,#dbb3bb09 0,#dbb3bb09 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,#1d0b1626 0,#1d0b1626 1px,transparent 1px,transparent 3px);box-shadow:inset 0 0 24px #170710b0;border:1px solid #3e1f1c;isolation:isolate}
.bulletin-board:before{content:"";position:absolute;inset:0;background:url('assets/grain.svg');opacity:.17;pointer-events:none;z-index:-1}
.board-corner{position:absolute;color:#dec07e;font-size:23px;z-index:2;line-height:1}
.corner-tl{top:14px;left:14px}.corner-tr{top:14px;right:14px}.corner-bl{bottom:14px;left:14px}.corner-br{bottom:14px;right:14px}
.board-lace{position:absolute;width:250px;height:288px;background:url('assets/lace.svg') center/contain no-repeat;opacity:.18;z-index:-1;pointer-events:none}
.board-lace-left{left:-28px;top:24px;transform:rotate(-28deg)}
.board-lace-right{right:-25px;bottom:15px;transform:rotate(25deg)}
.board-label{position:absolute;top:14px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--paper);color:var(--wine);padding:7px 23px 8px;box-shadow:1px 3px 5px #210e1850;white-space:nowrap;font-style:italic;font-size:17px}
.board-label span{font-style:normal;font-size:9px;letter-spacing:1.8px;margin-right:7px}
.polaroid-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:38px 26px;position:relative;z-index:1}
.polaroid-slot{flex:0 0 calc((100% - 104px)/5);min-width:0;position:relative;perspective:1200px;z-index:1}
.polaroid-slot:hover,.polaroid-slot:focus-within{z-index:3}
.polaroid{display:block;width:100%;padding:0;background:none;border:0;color:var(--paper);position:relative;transform:rotate(var(--tilt));transform-origin:50% 10px;text-align:center;transition:transform .25s;isolation:isolate}
.polaroid:hover,.polaroid:focus-visible{transform:rotate(0deg) translateY(-3px)}
.polaroid:focus-visible{outline-color:#f8d580;outline-offset:10px}
.polaroid-paper{display:block;background:#ed75ad;border:1px solid #ca668a;padding:10px;box-shadow:3px 6px 8px #150a1480,inset 0 0 0 1px #f093b02b;position:relative}
.polaroid-paper:after{content:"";position:absolute;inset:0;opacity:.045;background:url('assets/grain.svg');pointer-events:none}
.polaroid-photo{display:block;position:relative;aspect-ratio:1.05;overflow:hidden;background:#63213e;border:1px solid #dd91a657;box-shadow:inset 0 0 18px #250b2560}
.polaroid-photo>img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--portrait-position,50% 50%);transform:scale(var(--portrait-zoom,1));transform-origin:var(--portrait-position,50% 50%);filter:grayscale(1) contrast(.96) brightness(1.08)}
.polaroid-photo.has-portrait{background:#e6e6e6}
.polaroid-photo.has-portrait:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url('assets/grain.svg');opacity:.11;box-shadow:inset 0 0 18px #00000050;mix-blend-mode:multiply}
.photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 48% 42%,#8b425f,#612139);color:#e8ba91}
.photo-placeholder:before{content:"";position:absolute;inset:8px;border:1px solid #c3929273;outline:1px solid #c3929240;outline-offset:3px}
.photo-placeholder svg{width:16px;height:16px;margin-bottom:10px;color:#debdb1}
.photo-monogram{font-family:Pirata,Georgia,serif;font-size:clamp(31px,3vw,48px);line-height:1.1;font-weight:400;letter-spacing:2px;color:#efc7c1}
.photo-pending{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;margin-top:15px;color:#e1b4bc}
.polaroid-caption{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff8e9;min-height:76px;margin-top:9px;padding:8px 3px 10px;line-height:1.08}
.foil-name{display:block;width:100%;color:#9b732a;background:linear-gradient(112deg,#785116 0%,#af852f 17%,#73531e 33%,#d5b767 46%,#fae3a0 49%,#a87725 53%,#674719 73%,#bc9746 89%,#866022 100%);background-size:230% 100%;background-position:10% 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.2s ease}
.polaroid:hover .foil-name,.polaroid:focus-visible .foil-name{background-position:90% 50%}
.name-first,.name-last{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:clamp(20px,2vw,29px);font-weight:500;letter-spacing:0;overflow-wrap:anywhere}
.name-last{margin-top:2px}
.thumbtack{position:absolute;left:50%;top:-10px;width:22px;height:22px;transform:translateX(-50%) rotate(-12deg);transition:transform .25s ease,filter .25s ease;z-index:4;filter:drop-shadow(2px 4px 2px #200e1880)}
.thumbtack:before{content:"";position:absolute;width:18px;height:18px;left:1px;top:0;border-radius:50%;border:1px solid #7f531c;background:radial-gradient(circle at 31% 26%,#fff0bd 0,#ead194 12%,#c7a255 35%,#8f6325 67%,#dbc17c 83%,#6d4518 100%);box-shadow:inset 1px 1px 2px #fff6ca85;z-index:2}
.thumbtack:after{content:"";position:absolute;left:13px;top:12px;width:3px;height:13px;background:linear-gradient(90deg,#ded6c4,#887b68);transform:rotate(-28deg);border-radius:0 0 50% 50%;z-index:1}
.polaroid.is-unpinned .thumbtack{transform:translate(0,-34px) rotate(-38deg) scale(1.18);filter:drop-shadow(10px 16px 5px #200e1870)}
.polaroid.is-unpinned .polaroid-paper{transition:opacity .18s .22s;opacity:.32}
.board-seal{display:flex;align-items:center;justify-content:center;gap:8px;color:#c8a46a;font-family:Pirata,Georgia,serif;font-size:30px;margin-top:33px;opacity:.8}
.board-seal svg{height:18px;width:18px}
.board-footnote{text-align:center;font-style:italic;font-size:20px;color:#e4c8be;margin:26px 0 20px}
/* A lifted photograph becomes the full-size, double-sided profile card. */
.profile-dialog{border:0;padding:20px;margin:0;max-width:none;max-height:none;width:100%;height:100dvh;overflow:auto;background:none;color:var(--wine)}
.profile-dialog[open]{display:grid;place-items:center}
.profile-dialog::backdrop{background:#270a1fd9;backdrop-filter:blur(4px)}
.profile-viewer{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%}
.profile-stage{width:min(460px,calc(100vw - 48px));height:min(640px,calc(100dvh - 150px));min-height:470px;perspective:1600px;flex-shrink:0}
.profile-turner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg)}
.profile-turner.is-turning{animation:lift-and-turn .85s cubic-bezier(.2,.7,.25,1) both}
.profile-front,.profile-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:6px 16px 28px #16071370}
.profile-front{transform:rotateY(0deg);background:#ed75ad}
.profile-front .polaroid-paper{width:100%;height:100%;padding:17px}
.profile-front .polaroid-photo{height:calc(100% - 123px);aspect-ratio:auto}
.profile-front .polaroid-photo>img{object-fit:contain;object-position:center;transform:none}
.profile-front .polaroid-caption{min-height:110px;margin-top:13px}
.profile-front .name-first,.profile-front .name-last{font-size:34px}
.profile-front .photo-monogram{font-size:76px}.profile-front .photo-pending{font-size:12px}
.profile-front .photo-placeholder svg{width:25px;height:25px}
.profile-back{transform:rotateY(180deg);background:#ed75ad;border:1px solid #d47a9b;padding:17px;overflow:hidden}
.profile-back-inner{position:relative;background:#fff8e9;width:100%;height:100%;padding:22px 26px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto;overscroll-behavior:contain;box-shadow:inset 0 0 18px #d9cfc15c}
.profile-back-inner>*{flex-shrink:0;max-width:100%}
.profile-back-inner:focus-visible{outline:2px solid #a78239;outline-offset:3px}
.profile-back-inner:before{content:"";position:absolute;inset:8px;border:1px solid #bea16066;pointer-events:none}
.profile-file{font-size:10px;letter-spacing:1.7px;line-height:1.5;margin:0}
.profile-star{width:17px;height:17px;color:#b08c41;margin:10px 0;flex-shrink:0}
.profile-back h2{font-family:Pirata,Georgia,serif;font-size:36px;line-height:1.06;letter-spacing:0;margin:0;overflow-wrap:anywhere}
.profile-back h2 span{display:block;font:inherit;letter-spacing:inherit}
.profile-field-label{font-size:10px;letter-spacing:1.8px;line-height:1.4;font-weight:600;color:#87682e;margin:0 0 6px}
.profile-code-label{margin:14px 0 3px}
.profile-code-name{font-size:27px;font-style:italic;line-height:1.1;color:#946e29;margin:0}
.profile-rule{height:1px;background:#bd984c7a;width:60px;margin:15px 0 13px;flex-shrink:0}
.profile-details{font-size:20px;line-height:1.3;margin:0;white-space:pre-line}
.profile-superpower-label{margin-top:17px}
.profile-superpower{font-size:20px;font-style:italic;line-height:1.25;margin:0}
.profile-signoff{font-style:italic;font-size:17px;margin:auto 0 0;padding-top:17px}
.pin-back-button{color:var(--paper);background:none;border:1px solid #cba46285;border-radius:30px;font-size:20px;font-style:italic;padding:12px 28px;margin-top:18px;min-height:48px}
.pin-back-button span{font-style:normal;margin-right:7px}
.pin-back-button:hover{background:#cba4621c}
.profile-dismiss-hint{color:#d5b5bd;font-size:13px;margin:9px 0 0}
@keyframes lift-and-turn{0%{transform:scale(.94) rotateY(0deg)}30%{transform:scale(1) rotateY(0deg)}100%{transform:scale(1) rotateY(180deg)}}
@media(min-width:1600px){.board-main{padding:0 88px}.board-heading{padding-top:48px;padding-bottom:45px}.bulletin-board{padding:68px 46px 30px}.polaroid-grid{gap:42px 30px}.polaroid-slot{flex-basis:calc((100% - 120px)/5)}}
@media(max-width:1100px){.board-main{padding:0 49px}.board-masthead{padding:27px 52px 0}.bulletin-board{padding:62px 28px 27px}.polaroid-grid{gap:34px 22px}.polaroid-slot{flex-basis:calc((100% - 88px)/5)}.name-first,.name-last{font-size:22px}}
@media(max-width:900px) and (min-width:801px){.polaroid-slot{flex-basis:calc((100% - 66px)/4)}}
@media(max-width:800px){.board-view .harlequin{width:18px}.board-main{padding:0 32px}.board-masthead{padding:24px 36px 0}.board-return{font-size:14px}.board-heading h1{font-size:50px}.board-instruction{font-size:21px}.bulletin-frame{padding:10px}.bulletin-board{padding:61px 26px 25px}.polaroid-slot{flex-basis:calc((100% - 44px)/3)}.name-first,.name-last{font-size:25px}.photo-monogram{font-size:43px}}
@media(max-width:520px){.board-main{padding:0 22px}.board-masthead{padding:20px 27px 0;flex-direction:column;gap:10px}.board-return{min-height:40px}.board-heading{padding:19px 0 26px}.board-heading h1{font-size:43px}.board-heading .eyebrow{font-size:9px;letter-spacing:2px}.board-instruction{font-size:19px}.board-instruction span{font-size:inherit}.board-view .harlequin{width:10px}.bulletin-frame{padding:8px}.bulletin-board{padding:65px 17px 23px}.polaroid-grid{gap:29px 17px}.polaroid-slot{flex-basis:calc((100% - 17px)/2)}.polaroid-paper{padding:7px}.polaroid-caption{min-height:73px;margin-top:7px}.name-first,.name-last{font-size:22px}.photo-pending{font-size:7px;letter-spacing:.7px}.photo-monogram{font-size:37px}.board-label{padding:7px 16px;font-size:16px}.board-label span{font-size:7px}.board-corner{font-size:16px}.board-footnote{font-size:18px}.profile-back{padding:12px}.profile-back h2{font-size:32px}.profile-back-inner{padding:21px 20px 19px}.profile-front .name-first,.profile-front .name-last{font-size:29px}.profile-code-name{font-size:25px}}
@media(prefers-reduced-motion:reduce){.view-arriving,.view-to-below,.view-to-above,.profile-turner.is-turning{animation:none!important}.profile-turner{transform:rotateY(180deg)}.thumbtack,.foil-name{transition:none!important}}

/* Keep captions on their card face during the 3D flip. */
.profile-front .polaroid-caption{position:relative;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.profile-front .foil-name{background:none;-webkit-text-fill-color:currentColor;color:#9b732a;transition:none}
.profile-back h2{width:100%;position:relative;text-align:center}