/* The Pearl Lake v2: the six new sections (js/signature-pearl-lake-v2*.js). Words sit on the Blender stills through
   CSS matrix3d boxes sized in render pixels (the plane scales with the picture); every box keeps a floor size. */
.pl2-section{width:min(100%,1180px);margin:0 auto;padding:0 clamp(0px,2vw,16px);box-sizing:border-box;color:var(--ink)}
.pl2-head{text-align:center;margin:0 auto clamp(8px,2vw,16px);padding:0 16px}
.pl2-head h2{margin:0;font:italic 500 clamp(32px,5vw,54px)/1.08 var(--display);color:var(--ink)}
.pl2-kicker{margin:0 0 6px;font:600 13px/1.35 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pl2-stage{position:relative;width:100%;overflow:hidden;border-radius:clamp(0px,1vw,10px);background:#cfd8ea;isolation:isolate}
.pl2-art,.pl2-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl2-plane{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.pl2-quad{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box;overflow:hidden;pointer-events:auto;display:grid;align-content:center;justify-items:stretch;text-align:center;color:#2a3554;line-height:1.12}
.pl2-quad>*{display:block;min-width:0}   /* (padding below in em: a % would be of the whole render plane) */
/* 09 our people: the silk tags */
.pl2-tag{padding:0 .25em;line-height:1;font-family:var(--serif)}
.pl2-tag .n{font:italic 600 1em/1 var(--display);overflow-wrap:anywhere}
.pl2-tag .r{margin-top:.08em;font:600 max(.8em,var(--role-min,0px))/1 var(--serif);letter-spacing:.02em;text-transform:uppercase;color:#56607a;overflow-wrap:anywhere}
.pl2-photo{border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #f4f1ea,0 0 0 5px #dcd6cc,0 2px 6px #0003}.pl2-photo img{width:100%;height:100%;object-fit:cover}
/* 10 memories */
.pl2-glass{padding:0;border:0;background:#e4e8ec;cursor:zoom-in}.pl2-glass img{width:100%;height:100%;object-fit:cover;filter:sepia(.08) contrast(.96)}
.pl2-plate{font:600 1em/1.1 var(--serif);letter-spacing:.06em;color:#4a3410;padding:0 .2em}
.pl2-lightbox{border:0;padding:12px;max-width:min(94vw,1100px);background:#f7f4ee;border-radius:10px}.pl2-lightbox img{max-width:100%;max-height:78vh;display:block}
.pl2-lightbox p{font:italic 500 18px/1.3 var(--display);margin:8px 0}.pl2-lightbox::backdrop{background:#1b2140b3}
/* 11 questions */
.pl2-qtag{border:0;background:transparent;padding:0 .3em;font:italic 600 1em/1 var(--display);color:#2a3554;cursor:pointer}
.pl2-qtag[aria-pressed="true"]{color:#7a4a1e;text-shadow:0 0 .5em #fff6dc}
.pl2-qtag:focus-visible{outline:3px solid #294858;outline-offset:2px}
.pl2-answer{align-content:start;padding:.6em .7em;font:500 1em/1.24 var(--serif);color:#2b3046}
.pl2-answer .aq{font:italic 600 1.05em/1.1 var(--display);margin:0 0 .5em}.pl2-answer p{margin:0 0 .45em}
.pl2-stage.pluck .pl2-answer{animation:pl2-rise .9s ease both}
@keyframes pl2-rise{from{opacity:0;transform-origin:0 0}to{opacity:1}}
.pl2-more{max-width:640px;margin:14px auto 0;padding:16px 20px;background:#f8f5ee;border-radius:8px;font:500 19px/1.45 var(--serif);color:var(--ink)}
.pl2-more h3{margin:0 0 8px;font:italic 600 24px/1.15 var(--display)}.pl2-more ul{margin:0;padding-left:1.1em}.pl2-more .note{margin:10px 0 0;font-style:italic}
/* 05 menu */
.pl2-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 12px;padding:0 12px}
.pl2-tabs button{min-height:44px;padding:6px 14px 8px;border:1px solid #b9c6dc;border-radius:3px 3px 12px 12px;background:#f6f3ec;font:italic 600 18px/1.1 var(--display);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center}
.pl2-tabs button small{font:600 11px/1.3 var(--serif);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pl2-tabs button[aria-selected="true"]{background:#c6d3e8;border-color:#8ea3c6}
/* the menu fills the runner (V2.fill): everything in em, so the labels, dividers and spacing scale with the type; --gap
   opens the spacing when a short menu would otherwise sit small in the middle of the fabric */
.pl2-runner{align-content:center;padding:.4em .7em;color:#1f2b48;--gap0:.55em}
.pl2-runner ul{list-style:none;margin:0;padding:0;width:100%}
.pl2-runner li{margin:0 0 var(--gap,.55em)}.pl2-runner li:last-child{margin-bottom:0}
.pl2-runner li.t{font:600 .82em/1.2 var(--serif);letter-spacing:.16em;text-transform:uppercase;margin-bottom:calc(var(--gap,.55em) * 1.05)}
.pl2-runner li:not(.t)+li:not(.t)::before{content:"";display:block;width:3.6em;height:.6em;margin:0 auto calc(var(--gap,.55em) * .85);opacity:.9;
 background:radial-gradient(circle at center,#7f91b8 0 .16em,transparent .17em) center/100% 100% no-repeat,linear-gradient(90deg,transparent,#97a7c9 18%,#97a7c9 40%,transparent 41%,transparent 59%,#97a7c9 60%,#97a7c9 82%,transparent) center/100% .09em no-repeat}
.pl2-runner .c{display:block;font:600 .74em/1.25 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:#3c4b6d;margin-bottom:.12em}
.pl2-runner .d{display:block;font:italic 500 1em/1.2 var(--display)}
/* 13 the reply: the rail, the layers and the posting moment */
.pl2-rsvp .pl-rsvp,.pl2-section .pl-rsvp{margin-top:clamp(10px,2vw,18px)}
.pl2-layer{z-index:1;opacity:0}.pl2-layer.in{opacity:1}
.pl2-layer.lock.in:not(.still){animation:pl2-lock .9s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.pl2-layer.charm.in:not(.still){animation:pl2-charm .7s ease var(--d,0s) both}
.pl2-layer.ribbon.in:not(.still){animation:pl2-tie 1.4s ease both}
@keyframes pl2-lock{0%{opacity:0;transform:translateY(-4%)}55%{opacity:1;transform:translateY(.4%)}75%{transform:translateY(-.25%)}100%{opacity:1;transform:none}}
@keyframes pl2-charm{from{opacity:0;transform:translateY(-1.2%)}to{opacity:1;transform:none}}
@keyframes pl2-tie{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.pl2-rail .pl2-plane{z-index:2}
.pl2-engrave{font:italic 600 1em/1.05 var(--display);color:#5c5b66;text-shadow:0 1px 0 #ffffffa0;animation:pl2-fade .8s ease var(--d,0s) both}
.pl2-ribbonwords{font:italic 600 1em/1.1 var(--display);color:#6b6f7f}
@keyframes pl2-fade{from{opacity:0}to{opacity:1}}
.pl2-caption{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:3;margin:0;padding:6px 14px;border-radius:20px;background:#f8f5eecc;font:italic 600 clamp(17px,2.4vw,24px)/1.2 var(--display);color:var(--ink);white-space:nowrap}
.pl2-rail.keydrop::after{content:"";position:absolute;left:54.6%;top:46%;width:.6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#fffbe8,#f2d98a00 70%);z-index:2;animation:pl2-key 1.6s ease-in 1.6s both}
@keyframes pl2-key{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(900%)}}
.pl-rsvp .pl2-events .event-rsvp-choices{border:0;padding:0;margin:8px 0 0}.pl-rsvp .pl2-events legend{font:500 22px/1.1 var(--hand)}
.pl-rsvp .pl2-events label{display:flex;gap:8px;align-items:flex-start;min-height:44px;font:400 21px/1.1 var(--hand)}
.pl-rsvp .pl2-events small{display:block;font:500 14px/1.3 var(--serif);color:#4b5463}
.pl-rsvp .or-field{display:block;margin:6px 0}.pl-rsvp .or-field span{display:block;font:400 20px/1.1 var(--hand)}
.pl-rsvp .or-field select{width:100%;min-height:44px;font:500 17px/1.2 var(--serif);border:0;border-bottom:1px solid #74818a;background:transparent}
.pl-rsvp .song-wrap input{display:block;width:100%;min-height:44px;border:0;border-bottom:1px solid #74818a;background:transparent;font:400 22px/1.1 var(--hand)}
.pl-rsvp .email-wrap{margin:6px 0 0}.pl-rsvp .email-wrap input{display:block;width:100%;max-width:100%;min-height:44px;border:0;border-bottom:1px solid #74818a;border-radius:0;padding:5px 0;background:transparent;color:#1d3545;font:400 22px/1.1 var(--hand)}   /* v250: the email box, as the song line (an email input is not caught by the paper's input:not([type]) rule) */
.pl2-pager{display:flex;justify-content:center;align-items:center;gap:16px;margin:10px auto 0;font:500 17px/1.2 var(--serif)}
.pl2-pager button{min-height:44px;min-width:44px;padding:6px 16px;border:1px solid #b9c6dc;border-radius:22px;background:#f6f3ec;font:italic 600 17px/1 var(--display);color:var(--ink);cursor:pointer}
.pl2-pager button:disabled{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){.pl2-layer,.pl2-engrave,.pl2-stage.pluck .pl2-answer{animation:none!important}.pl2-rail.keydrop::after{display:none}}
.pl2-answer-card{background:linear-gradient(#fbf8f1,#f3ede1);border:1px solid #e3d6b8;box-shadow:0 2px 10px #1b214014}.pl2-answer-card h3{color:#6d4d22}
.pl2-print{padding:.35em;border:0;background:#fbf9f4;box-shadow:0 .15em .5em #1b214040;cursor:zoom-in}.pl2-print img{width:100%;height:100%;object-fit:cover;display:block}
.pl2-print:focus-visible{outline:3px solid #294858;outline-offset:2px}
.pl2-pages{flex-wrap:wrap;gap:8px}.pl2-pages button[aria-current="page"]{background:#c6d3e8;border-color:#8ea3c6}
#opening .moon{opacity:0;transition:opacity 1s ease}body #opening .moon.is-in,body.opening-playing #opening .moon.is-in{opacity:1}   /* beats the v1 rule hiding the opening's words while its film plays */
#opening .moon h1{margin:0;text-align:center}
#opening .moon{display:flex;flex-direction:column;justify-content:flex-end;container-type:size;margin:0}   /* the same box and placement as the hero's names: no jump at the cut */
#opening .pl-moon-names{margin:0;font:italic 600 min(48cqh,31cqw)/.98 var(--display);color:#1c2742;letter-spacing:-.005em;text-align:center}
#opening .pl-moon-names span{display:block;white-space:nowrap}#opening .pl-moon-names span[hidden]{display:none}
/* 13 the reply: floating candles (11 Oct): rendered layers over the lake plate, placed and scaled in % of the stage */
.pl2-fx{position:absolute;inset:0;pointer-events:none}   /* no z-index, overflow or transform here: the glows must blend with the plate, not inside a group of their own */
.pl2-fx img{position:absolute;height:auto;max-width:none;transform:translate(-50%,-50%)}
.pl2-fx img.pl2-glow{mix-blend-mode:screen}   /* a candle's glow and reflection: screened, so a cluster on the bright moon path never sums to glare */
.pl2-caption.wrap{white-space:normal;width:max-content;max-width:min(92%,640px);text-align:center;border-radius:16px;font-size:clamp(16px,2vw,21px)}
.pl2-caption.late{animation:pl2-fade .8s ease both}
.pl2-lake .pl2-plane{z-index:2}
@media (prefers-reduced-motion:reduce){.pl2-caption.late{animation:none}}
/* 05 at our table: the bird's-eye film (once, when the table comes into view), then the still with the menu on the runner */
.pl2-menu .pl2-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s ease}
.pl2-menu.flown .pl2-film{opacity:0;pointer-events:none}
.pl2-menu .pl2-plane{z-index:2;transition:opacity .5s ease}
.pl2-menu.flying .pl2-plane,.pl2-menu.swap .pl2-plane{opacity:0}
.pl2-menu.swap .pl2-plane{transition-duration:.18s}
@media (prefers-reduced-motion:reduce){.pl2-menu .pl2-film{display:none}}
/* 13 the reply: the lantern reply (11 Oct). The sheet rises out of the lantern (clipped at its rim), then opens into the reply
   card over the scene; a large household scrolls inside it; the confirmation card sits below the scene */
.pl2-lr{position:relative}
.pl2-lr-clip{position:absolute;inset:0;z-index:3;pointer-events:none}
.pl2-sheet.pl-rsvp{position:absolute;box-sizing:border-box;width:auto;margin:0;pointer-events:auto;container-type:normal;color:#1d3545;
 background:#f8f3e9 linear-gradient(176deg,#fffdf8 0%,#f7f1e6 55%,#efe6d6 100%);border-radius:3px;overflow:hidden;
 box-shadow:0 18px 44px rgba(16,22,46,.34),0 2px 6px rgba(16,22,46,.22),inset 0 0 0 1px rgba(170,146,110,.18)}
/* v285 (S2-4): at the end of the card the page scrolls on (contain held the wheel, a swipe and the keys in a card
   that had nothing left to scroll, so the page under it stood still) */
.pl2-sheet.open{overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin}
.pl2-sheet[hidden]{display:none}
.pl2-sheet-in{padding:22px 7% 26px;opacity:0;transition:opacity .35s ease}
.pl2-sheet.open .pl2-sheet-in{opacity:1}
.pl2-sheet .paper,.pl2-confirm .paper{padding:0;background:none}
.pl2-confirm.pl-rsvp{margin:clamp(14px,2vw,20px) auto 0;width:min(100%,600px);box-sizing:border-box;padding:24px 7% 26px;border-radius:3px;
 background:#f8f3e9 linear-gradient(176deg,#fffdf8,#f2eadc);box-shadow:0 10px 28px rgba(16,22,46,.16)}
.pl2-lr-stage .pl2-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s ease}
.pl2-lr-stage .pl2-film.on{opacity:1}.pl2-lr-stage .pl2-film.gone{opacity:0;transition-duration:.6s}
.pl2-lr-stage .pl2-plane{z-index:2}
.pl2-lr-name{display:grid;place-items:center;text-align:center;font:italic 600 1em/1.05 var(--display);color:#3b2521;opacity:0;transition:opacity .9s ease}
.pl2-lr-name.in{opacity:.92}.pl2-lr-name.away{opacity:0;transition-duration:.45s}
@media (prefers-reduced-motion:reduce){.pl2-sheet-in,.pl2-lr-name{transition:none}}
.pl2-sheet .preview-note{position:static;padding:14px 0 0;margin:0;background:none}   /* in the flow at the sheet's foot (v1 pins it over its paper) */
.pl2-runner .c{font-size:max(.74em,var(--lab-min,0px))}
.pl2-runner.tight li{margin-bottom:.32em}.pl2-runner.tight li.t{margin-bottom:.45em}
.pl2-runner.tight li:not(.t)+li:not(.t)::before{display:none}
.pl2-runner.tight .d{line-height:1.12}
/* 01 the hero's words (v174, owner 12 Oct: the names only in the moon). The eyebrow sits centred above the names in the
   moon, the date and venue centred below them (wide); on tall screens both sit in the open sky above the gate. Placed and
   sized by js/signature-pearl-lake-v2.js (font-size in px on the block, every line in em, never below 13 px on phones
   or 14 px on larger screens). The closed opening shows the same stack in pearl white where the moon will rise. */
.plh-block{position:absolute;left:0;top:0;z-index:1;margin:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;color:#1c2742;pointer-events:none;visibility:hidden}
.plh-block.placed,.plh-folio-names.placed{visibility:visible}
.plh-block p{margin:0;max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
.plh-block p[hidden]{display:none}
.plh-eyebrow{font:600 .78em/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.14em;padding-left:.14em}
.plh-invite{font:italic 400 1em/1.2 var(--display);margin-top:.12em!important}
.plh-rule{width:3.4em;height:1px;flex:none;margin:.1em auto .5em!important;background:linear-gradient(90deg,transparent,#8f7a5c,transparent);opacity:.75}
.plh-date{font:600 .8em/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.12em;padding-left:.12em}
.plh-venue{font:italic 400 .9em/1.22 var(--display);margin-top:.08em!important}
#hero .plh-block{text-shadow:0 0 .5em rgba(236,241,249,.85),0 0 1.4em rgba(236,241,249,.5)}
#hero .pl-moon-names,#opening .pl-moon-names{transform-origin:50% 50%}
/* the closed opening: pearl white on the dusk sky, gone as soon as the film starts */
.plh-folio{transition:opacity .8s ease}
.plh-folio.plh-block{color:#f7f4ee;text-shadow:0 1px 3px rgba(16,22,46,.55),0 0 1.2em rgba(16,22,46,.4)}
.plh-folio .plh-rule{background:linear-gradient(90deg,transparent,#efe3c8,transparent);opacity:.85}
.plh-folio-names{position:absolute;left:0;top:0;z-index:1;margin:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;container-type:size;pointer-events:none;visibility:hidden}
#opening .plh-folio-names .pl-moon-names{margin:0;text-align:center}
#opening .plh-folio-names .pl-moon-names{color:#f7f4ee;text-shadow:0 2px 6px rgba(16,22,46,.55),0 0 1.4em rgba(16,22,46,.35)}
body.opening-playing .plh-folio{opacity:0}
#opening .pl-moon-names.wrap span{white-space:normal;overflow-wrap:anywhere;text-wrap:balance}

/* v285: "Made with Occasi" at the foot of the reply paper; hidden when the couple turns it off */
.pl2-sheet-in::after{content:'Made with Occasi';display:block;margin-top:18px;text-align:center;font:500 9px/1.4 Georgia,serif;letter-spacing:.18em;text-transform:uppercase;color:#8a7a62}html.oc-made-off .pl2-sheet-in::after{content:none;display:none}
/* v285.1 (owner 2 Nov, caps + 'Up to 12, page 2'): a menu tab holds any event name whole (it wraps); five a row, the sixth
   to the twelfth on the row's page 2 */
.pl2-tabs button{max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.pl2-tabs-more{display:block;margin:-4px auto 10px;min-height:44px;min-width:88px;padding:8px 14px;border:0;background:none;font:italic 600 17px/1.2 var(--display);color:var(--ink);text-decoration:underline;text-decoration-color:#8ea3c6;text-underline-offset:4px;cursor:pointer}
.pl2-tabs-more:focus-visible{outline:2px solid #294858;outline-offset:2px}
/* a silk tag never hides a letter: words that need more than the tag at 10 px (a 30-letter name with a role, at 360) show
   whole rather than cut */
.pl2-tag{overflow:visible}