/* URILGA Studio 2.0 · seven vertically scrolling invitation sections */
.story-invite{width:100%;height:auto;aspect-ratio:auto!important;display:flex;flex-direction:column;overflow:hidden;background:var(--inv-paper);color:var(--inv-accent);font:400 14px/1.55 Georgia,'Times New Roman',serif;isolation:isolate;position:relative;border-radius:18px;box-sizing:border-box}
.story-invite *{box-sizing:border-box}
.story-progress{height:37px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font:700 9px/1.2 Arial,sans-serif;letter-spacing:1.2px;background:#231e29;color:#fbf0e7}
.story-progress span{font-size:10px;color:#f0bdc3}
.story-scroll{height:min(650px,76vh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-snap-type:y proximity;scroll-behavior:smooth;scrollbar-color:#b6a4b1 #f6eee9;scrollbar-width:thin;position:relative;background:var(--inv-paper)}
.story-invite:not(.is-open) .story-scroll{overflow-y:hidden}
.story-panel{position:relative;scroll-snap-align:start;min-height:620px;padding:72px 29px 67px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--inv-paper);color:var(--inv-accent);box-shadow:inset 0 -1px #b396892c}
.story-panel:before{content:'✦';position:absolute;top:36px;left:26px;font:12px Georgia;opacity:.4}
.story-page-index{position:absolute;top:32px;right:24px;font:600 10px Arial,sans-serif;letter-spacing:2px;opacity:.53;display:flex;align-items:center;gap:8px}
.story-page-index i{height:1px;width:22px;background:currentColor;opacity:.6}
.story-panel h1,.story-panel h2,.story-panel h3{margin:0;color:inherit;overflow-wrap:anywhere}
.story-panel h2{font:italic 34px/1.12 Georgia,serif;margin:18px 0 24px;letter-spacing:-.7px}
.story-panel .story-upper{font:800 10px/1.5 Arial,sans-serif;letter-spacing:3.4px;margin:0;color:var(--inv-accent);opacity:.8}
.story-panel .story-body{font:400 14px/1.9 Georgia,serif;max-width:285px;margin:12px auto 20px}
.story-line-art{font-size:15px;letter-spacing:7px;margin:0 auto 21px;opacity:.65}
.story-watermark{position:absolute;top:51%;left:50%;transform:translate(-50%,-50%) rotate(-29deg);width:max-content;max-width:95%;white-space:nowrap;font:bold 11px/1.3 Arial,sans-serif;letter-spacing:2px;padding:9px 12px;border:1px solid #965f6999;background:#fff7f2cf;color:#7f4456cc;box-shadow:0 0 0 4px #fff7f255;pointer-events:none;z-index:11}
/* Hero layer is STATIC. Doors/curtains are separate foreground elements. */
.story-panel.story-cover-panel{padding:0;min-height:620px;background:radial-gradient(ellipse at 52% 23%,var(--inv-paper),var(--inv-bg));justify-content:flex-start}
.story-cover-back{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 44%,#fffefdaf,transparent 48%),linear-gradient(150deg,var(--inv-bg),var(--inv-paper) 45%,var(--inv-bg));overflow:hidden}
.story-cover-back.cover-wedding{background:linear-gradient(0deg,#e6c8bb33,#fff6ee47),url('assets/wedding-stage.webp') center/cover no-repeat}
.story-cover-panel:after{content:' ';position:absolute;inset:15px;border:1px solid var(--inv-accent);opacity:.22;pointer-events:none}
.story-cover-panel .story-hero-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;padding:66px 27px 90px;min-height:600px;max-width:95%;margin:0 auto;text-shadow:0 1px 11px var(--inv-paper);color:var(--inv-accent)}
.story-cover-panel .story-hero-text:before{content:'';position:absolute;inset:63px 10px 74px;border:1px solid var(--inv-accent);opacity:.21;z-index:-1;border-radius:120px 120px 24px 24px}
.story-cover-panel .story-eyebrow{font:bold 10px/1.3 Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.story-cover-panel .story-hairline{width:53px;height:1px;background:var(--inv-accent);opacity:.55}
.story-cover-panel .story-hero-symbol{font:38px Georgia,serif}
.story-cover-panel h1{font:700 21px/1.35 Georgia,serif;letter-spacing:4px}
.story-cover-panel .story-hero-names{font:italic 31px/1.2 Georgia,serif;max-width:92%}
.story-cover-panel .story-hero-date{font:700 12px/1.5 Arial,sans-serif;letter-spacing:.4px}
.story-cover-panel .story-hero-text p{font:12px/1.8 Georgia,serif;max-width:250px;margin:0}
.story-floral-corner{position:absolute;bottom:32px;font:100px Georgia,serif;opacity:.34;z-index:1;line-height:1}
.story-flora-l{left:-16px;transform:rotate(-27deg)}.story-flora-r{right:-16px;transform:rotate(27deg)}
.story-swipe-prompt{position:absolute;z-index:3;bottom:26px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 9px Arial,sans-serif;letter-spacing:1.8px;background:#fff9f2c8;padding:9px 12px;border-radius:50px;transition:opacity .5s}
.story-swipe-prompt b{font-size:18px;margin-left:6px}
/* Opening foreground panels. Main visual background never splits. */
.story-opening{position:absolute;inset:0;z-index:20;overflow:hidden;cursor:pointer;isolation:isolate}
.opening-panel{position:absolute;top:0;bottom:0;width:50.2%;z-index:1;display:flex;align-items:center;justify-content:center;color:#f9e3b5;overflow:hidden;transition:transform 1.8s cubic-bezier(.16,.79,.13,1);will-change:transform}
.opening-left{left:0;transform-origin:left center}.opening-right{right:0;transform-origin:right center}
.opening-curtain .opening-panel{background:repeating-linear-gradient(90deg,#ffffff22 0 7px,#00000019 17px 27px,#ffffff16 39px 47px),linear-gradient(110deg,#8e4560,var(--inv-bg) 43%,#aa6f81);border-inline:1px solid #f7e9d4b0;box-shadow:inset 0 0 25px #3b15223d}
.opening-curtain .opening-panel:before{content:'';position:absolute;top:-20px;left:-10%;width:120%;height:30%;border-radius:0 0 51% 52%;background:linear-gradient(#fff8e369,#ebbeca,#bb8398);border-bottom:8px dotted #fff0c9;box-shadow:0 9px 18px #5c293e33}
.opening-curtain .opening-panel:after{content:'';position:absolute;bottom:0;left:14%;height:47%;width:70%;border-inline:2px solid #fff5eb4d;border-radius:50% 50% 0 0;opacity:.7}
.opening-panel .opening-inner-symbol{position:absolute;font-size:62px;opacity:.12;top:35%;filter:drop-shadow(0 2px 4px #fff6e8)}
.opening-left .opening-inner-symbol{right:11%}.opening-right .opening-inner-symbol{left:11%}
.opening-panel .door-panel-ornament{position:absolute;bottom:20%;font:48px Georgia;opacity:.2}
.opening-curtain .door-panel-ornament{display:none}
.opening-door .opening-panel,.opening-ger .opening-panel{background:repeating-linear-gradient(90deg,#3f18132b 0 9px,#efc99a15 10px 27px),linear-gradient(125deg,#955d44,var(--inv-accent) 40%,#58362f);border:7px double #e4be82;outline:1px solid #422621;outline-offset:-14px;box-shadow:inset 0 0 0 16px #412d3044,inset 0 0 0 19px #dfba8255}
.opening-door .opening-panel:before,.opening-ger .opening-panel:before{content:'❖';position:absolute;inset:17% 13%;border:3px double #f6d39a99;display:flex;align-items:center;justify-content:center;font-size:36px;text-shadow:0 0 5px #5a3228}
.opening-door .opening-panel:after,.opening-ger .opening-panel:after{content:'';position:absolute;top:53%;width:14px;height:30px;border-radius:100%;background:radial-gradient(circle,#fff8da,#b9894f 65%,#785837);box-shadow:0 1px 10px #27150c96;border:2px solid #fff1bb9c}
.opening-door .opening-left:after,.opening-ger .opening-left:after{right:7%}.opening-door .opening-right:after,.opening-ger .opening-right:after{left:7%}
.opening-ger{border:13px solid #82402d;border-radius:85px 85px 14px 14px;box-shadow:inset 0 0 0 6px #e7b66d;background:#712d24}
.opening-ger .opening-panel{border-color:#d8a35c;background:repeating-linear-gradient(0deg,transparent 0 37px,#edb26e24 38px 42px),linear-gradient(90deg,#8e3225,#b74e37 50%,#7a3228)}
.opening-ger .opening-panel:before{content:'⌑  ❖  ⌑';inset:20% 9% 17%;font-size:22px;line-height:2;letter-spacing:2px;border:4px double #e5ab53;box-shadow:inset 0 0 0 7px #8c2c20}
.opening-ger .opening-panel .opening-inner-symbol{font-size:85px;top:40%;opacity:.6;color:#f4d38e}
.opening-ger .door-panel-ornament{opacity:.55;color:#fbe0a1}
.ger-top{position:absolute;z-index:4;top:0;left:0;right:0;height:69px;display:grid;place-items:center;background:linear-gradient(#b85e33,#86362a);border-bottom:7px double #ecbb65;color:#ffe1a4;font:bold 12px Georgia;letter-spacing:3px;box-shadow:0 4px 16px #2f0e0f65}
.opening-envelope .opening-panel{background:linear-gradient(145deg,#fff9ed,#dfb7b4 53%,var(--inv-bg));border:2px solid #cba79a}
.opening-envelope .opening-panel:before{content:'';position:absolute;inset:0;background:linear-gradient(143deg,transparent 49.6%,#b7848199 50%,transparent 51%),linear-gradient(35deg,transparent 49.6%,#ffffffa9 50%,transparent 51%)}
.opening-envelope .opening-panel:after{content:'✉';position:absolute;top:20%;font-size:60px;color:var(--inv-accent);opacity:.2}
.opening-ribbon .opening-panel{background:repeating-linear-gradient(45deg,#ffffff33 0 18px,#0000000b 19px 24px),linear-gradient(150deg,#ffecbe,var(--inv-bg) 40%,var(--inv-accent))}
.opening-ribbon .opening-panel:before{content:'✷';position:absolute;font:100px Georgia;color:#fff3d6d1;top:13%;opacity:.9}
.opening-ribbon .opening-panel:after{content:'';position:absolute;top:46%;height:62px;width:100%;background:linear-gradient(#fff8ed99,#fff3c333,#fff8eb99);border-block:2px solid #fff0bb}
/* Styling choices are intentionally different for individual template families */
.opening-variant-velvet .opening-panel,.opening-variant-neon .opening-panel,.opening-variant-black .opening-panel,.opening-variant-gala .opening-panel,.opening-variant-space .opening-panel{background:repeating-linear-gradient(90deg,#ffffff10 0 7px,#00000023 19px 34px),linear-gradient(120deg,#17152d,#403456,#131325);color:#dfc391}
.opening-variant-rose .opening-panel,.opening-variant-bow .opening-panel,.opening-variant-bloom .opening-panel,.opening-variant-teddy .opening-panel{filter:saturate(.7) brightness(1.1)}
.opening-variant-royal .opening-panel,.opening-variant-gold .opening-panel,.opening-variant-palace .opening-panel{box-shadow:inset 0 0 0 24px #dab78444,inset 0 0 0 29px #f7e8be77}
.opening-variant-rainbow .opening-panel,.opening-variant-candy .opening-panel{background:repeating-linear-gradient(90deg,#fbc2dfbb 0 25px,#baddfbbb 26px 50px,#e5d2ffbb 51px 78px,#f7efb1bb 79px 105px)}
.opening-variant-stage .opening-panel:before,.opening-variant-party .opening-panel:before{height:39%}
.opening-seal{position:absolute;z-index:7;top:51%;left:50%;transform:translate(-50%,-50%);border:5px double #eac898;background:radial-gradient(circle at 35% 28%,#f6d7b9,#9c5d50 76%);box-shadow:0 4px 19px #45232799,inset 0 0 0 5px #a87558;width:84px;height:84px;border-radius:50%;font:38px Georgia,serif;color:#fcebc6;cursor:pointer;transition:opacity .4s,transform .5s;animation:story-seal-glow 2.7s ease-in-out infinite}
.opening-ger .opening-seal{color:#fbe9aa;background:radial-gradient(circle,#d7a250,#77301e);width:64px;height:64px}
.opening-hint{position:absolute;z-index:7;top:calc(51% + 68px);left:50%;transform:translateX(-50%);width:max-content;max-width:95%;border-radius:22px;padding:9px 13px;background:#fcf6e9e8;color:#62384c;font:800 11px Arial,sans-serif;box-shadow:0 4px 15px #301a2945}
.story-invite.is-open .opening-left{transform:translateX(-102%) scaleX(.73)}.story-invite.is-open .opening-right{transform:translateX(102%) scaleX(.73)}
.story-invite.is-open .opening-seal,.story-invite.is-open .opening-hint,.story-invite.is-open .ger-top{opacity:0;pointer-events:none;animation:none}
.story-invite.is-open .story-opening{pointer-events:none}
/* Hinged wooden doors swing outward; fabric curtains glide sideways. */
.story-invite.is-open .opening-door .opening-left,.story-invite.is-open .opening-ger .opening-left{transform:perspective(900px) rotateY(-105deg)}
.story-invite.is-open .opening-door .opening-right,.story-invite.is-open .opening-ger .opening-right{transform:perspective(900px) rotateY(105deg)}
@keyframes story-seal-glow{50%{filter:brightness(1.14);transform:translate(-50%,-50%) scale(1.04)}}
/* 2 - Story */
.story-story-panel{background:linear-gradient(180deg,var(--inv-paper),var(--inv-bg))}
.story-petal{position:absolute;top:60px;left:50%;font:35px Georgia;opacity:.13;transform:translateX(-50%)}
.story-photo{width:190px;height:160px;margin:0 auto 16px;padding:7px;background:#fff;border:1px solid #e8d3bf;transform:rotate(-3deg);box-shadow:0 13px 23px #39222b22}
.story-photo img{width:100%;height:100%;object-fit:cover}
.story-illustration{height:162px;width:194px;display:grid;align-content:center;gap:8px;background:radial-gradient(ellipse at 49% 45%,#ffffffd6,var(--inv-bg));border:1px solid #d4ad9888;border-radius:105px 105px 13px 13px;margin:0 auto 16px}
.story-illustration span{font:80px/1 Georgia;opacity:.52}.story-illustration small{font:italic 11px Georgia}
.story-story-panel blockquote{font:italic 16px/1.5 Georgia,serif;margin:13px 0 0;padding:0 11px}
.story-story-panel cite{display:block;font:10px Arial,sans-serif;letter-spacing:1.4px;margin-top:14px;opacity:.65}
/* 3 - event */
.story-event-panel{background:linear-gradient(165deg,var(--inv-paper),var(--inv-bg) 60%,var(--inv-paper))}
.story-giant-day{font:italic 112px/.95 Georgia,serif;letter-spacing:-5px;margin:5px auto 0}
.story-full-date{font:700 12px Arial,sans-serif;letter-spacing:1px;margin:5px auto 11px}
.story-detail-card{width:100%;max-width:270px;border-top:1px solid #c8ae9a80;padding:16px 8px;display:flex;align-items:start;text-align:left;gap:17px}
.story-detail-card>span{font:27px Georgia;min-width:29px}.story-detail-card div{display:grid;gap:3px}
.story-detail-card small{font:700 10px Arial,sans-serif;letter-spacing:1.8px;opacity:.62}
.story-detail-card strong{font:700 16px Georgia}.story-detail-card p{font:12px Arial,sans-serif;margin:0;opacity:.78}
.story-pill-button{display:inline-flex;align-items:center;justify-content:center;min-height:41px;text-decoration:none;border:1px solid var(--inv-accent);color:var(--inv-paper);background:var(--inv-accent);border-radius:40px;font:700 11px Arial,sans-serif;padding:10px 21px;cursor:pointer;max-width:100%}
.story-countdown-wrapper{margin-top:12px;max-width:100%}.story-countdown-wrapper .countdown{margin-top:9px}.story-countdown-wrapper .countdown div{background:#ffffff8a;border:1px solid #b7968655;min-width:54px}
/* 4 - itinerary */
.story-program-panel{background:var(--inv-paper)}
.story-program-panel:after{content:'✦';position:absolute;z-index:0;font:240px Georgia;bottom:-100px;right:-50px;opacity:.035}
.story-timeline{position:relative;width:100%;max-width:282px;margin:20px auto 13px;text-align:left}
.story-timeline:before{content:'';position:absolute;top:0;bottom:0;left:72px;width:1px;background:var(--inv-accent);opacity:.25}
.story-time-row{min-height:61px;display:grid;grid-template-columns:63px 1fr 18px;gap:13px;align-items:center;font:14px Georgia;border-bottom:1px solid #ab8e7830}
.story-time{font:700 12px Arial,sans-serif;letter-spacing:1px}.story-timeline-dot{font-size:16px;opacity:.5}.story-program-footer{font:italic 12px Georgia;margin-top:22px}
.story-center-note{text-align:center}
/* 5 - guidance */
.story-guide-panel{background:linear-gradient(170deg,var(--inv-bg),var(--inv-paper) 50%,var(--inv-bg))}
.story-guide-card{width:100%;max-width:286px;border:1px solid #cdaea083;background:#fffdfb77;padding:17px 18px;margin:5px auto 11px;text-align:center}
.story-guide-icon{font:20px Georgia}.story-guide-card small{font:800 9px Arial,sans-serif;letter-spacing:2.2px;display:block;margin:5px 0 10px}
.story-guide-card h3{font:italic 18px Georgia}.story-guide-card p{font:12px/1.7 Georgia;margin:0}
.story-swatches{display:flex;justify-content:center;gap:8px;margin-top:14px}.story-swatches i{border:1px solid #a882768a;width:21px;height:21px;border-radius:50%;background:#d7b9a5}.story-swatches i:nth-child(2){background:#ede6d1}.story-swatches i:nth-child(3){background:#8d9b84}.story-swatches i:nth-child(4){background:#bca0b2}
/* 6 - photo collage */
.story-gallery-panel{background:var(--inv-paper)}
.story-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:168px 110px;gap:8px;width:100%;max-width:280px;transform:rotate(-2deg);margin:15px 0 22px}
.story-gallery-tile{border:6px solid #fff8ee;background:radial-gradient(circle at 45% 38%,var(--inv-paper),var(--inv-bg));box-shadow:0 8px 20px #3c1c2c21;display:grid;place-items:center;overflow:hidden}
.story-gallery-tile.main{grid-column:1/3}.story-gallery-tile img{width:100%;height:100%;object-fit:cover}.story-gallery-tile span{font:70px Georgia;opacity:.43}.story-gallery-tile.side span{font-size:50px}.story-gallery-tile.two{transform:rotate(3deg)}
.story-quote-small{font:italic 16px Georgia;max-width:260px}.story-fineprint{font:10px/1.6 Arial,sans-serif;letter-spacing:.2px;opacity:.72;max-width:275px;margin-top:20px}
/* 7 - RSVP */
.story-rsvp-panel{background:radial-gradient(ellipse at 50% 50%,var(--inv-paper),var(--inv-bg))}
.story-final-symbol{font:65px Georgia,serif;margin-bottom:35px}.story-final-name{font:italic 26px Georgia;margin:15px auto 10px}.story-final-line{width:60px;height:1px;background:var(--inv-accent);margin:10px auto 23px;opacity:.55}.story-final-when{font:12px/2 Georgia;margin-bottom:26px}.story-rsvp-button{margin-top:7px}.story-last-ornament{margin-top:24px;opacity:.56;font-size:18px;letter-spacing:9px}
.story-invite.layout-editorial .story-panel h2,.story-invite.layout-editorial .story-hero-names,.story-invite.font-bold .story-panel h2{font-style:normal;font-family:Arial,sans-serif;font-weight:800;letter-spacing:-1.1px}
.story-invite.layout-night .story-panel{color:#edddb5}.story-invite.layout-night .story-story-panel,.story-invite.layout-night .story-event-panel,.story-invite.layout-night .story-program-panel,.story-invite.layout-night .story-guide-panel,.story-invite.layout-night .story-gallery-panel,.story-invite.layout-night .story-rsvp-panel{background:linear-gradient(150deg,#1b2039,var(--inv-paper) 60%,#23223e)}
.story-invite.layout-heritage .story-panel:not(.story-cover-panel):before{content:'❖';font-size:25px}
.story-invite.layout-disco .story-panel h2,.story-invite.layout-retro .story-panel h2{font-family:Arial,sans-serif;font-style:normal;font-weight:900;text-transform:uppercase}
/* Demo settings and native scroll in the true public invitation */
#public-invite{width:min(420px,100%)!important}
.public-bg .story-invite{width:100%;border-radius:19px;box-shadow:0 22px 65px #2d172b39}
.public-bg .story-scroll{height:auto;max-height:none;overflow:visible;scroll-snap-type:none;overscroll-behavior:auto}
.public-bg .story-invite:not(.is-open) .story-scroll{overflow:visible}
.public-bg .story-invite:not(.is-open) .story-panel:not(:first-child){display:none}
.public-bg .story-invite .story-panel{min-height:min(720px,93svh)}
.public-bg .story-progress{position:sticky;top:0;z-index:16}
.public-bg .story-swipe-prompt{bottom:22px}
/* Preview remains a real scrollable phone, not a static postcard. */
#editor-preview-root .story-invite .story-scroll{scrollbar-width:thin}
.story-inspector-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:20px}
.story-inspector-jump button{border:1px solid #e7dbef;border-radius:8px;padding:9px;background:#f9f5fb;font:700 11px Arial,sans-serif;color:#79559c;text-align:left;cursor:pointer}
.editor-right h4{margin:22px 0 12px;font:700 13px Arial,sans-serif;color:#634b78;border-top:1px solid #ece5ee;padding-top:15px}
@media(max-width:720px){.story-scroll{height:min(68svh,625px)}.story-panel{min-height:590px;padding-inline:26px}.story-panel h2{font-size:30px}.story-cover-panel .story-hero-text{min-height:580px}.public-bg .story-invite .story-panel{min-height:92svh}.phone-frame{max-width:400px}.editor-center{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.opening-panel,.story-invite.is-open .opening-left,.story-invite.is-open .opening-right,.opening-seal,.story-scroll{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* V3: mongolian yurt interior is a single stationary image below the opening layer. */
.story-cover-back.cover-ger-interior{background:linear-gradient(180deg,#fff3df66 0%,#f8e5cbba 25%,#fff8e7eb 56%,#f4e3cb9e 100%),url('assets/mongolian-ger-interior.svg') center/cover no-repeat;background-position:center center}
.story-cover-panel:has(.opening-ger-slide) .story-hero-text{margin:0 16px;max-width:calc(100% - 32px);width:100%;z-index:2;min-height:610px;gap:14px;text-shadow:0 1px 9px #fffaf3,0 0 18px #fffaf3}
.story-cover-panel:has(.opening-ger-slide) .story-hero-text:before{border:2px solid #9e553e66;background:linear-gradient(180deg,#fff7e8aa,#fff6e2bb);border-radius:120px 120px 18px 18px;inset:65px 8px 58px;box-shadow:0 5px 40px #3b1e1426}
.story-cover-panel:has(.opening-ger-slide) .story-floral-corner{font-size:62px;opacity:.47}
.ger-furniture-card{width:100%;max-width:237px;margin:4px auto 10px;padding:7px 7px 12px;background:#fff9ed;border:1px solid #b87b4e7a;border-radius:115px 115px 11px 11px;box-shadow:0 10px 30px #583b2722;overflow:hidden}
.ger-furniture-card img{width:100%;height:165px;object-fit:cover;object-position:50% 76%;border-radius:105px 105px 4px 4px;display:block}
.ger-furniture-card small{display:block;text-align:center;font:10px Georgia,serif;letter-spacing:1px;color:#864d39;margin-top:10px}
/* One complete painted Mongolian ger door glides LEFT. It never splits in the middle. */
.story-opening.opening-ger-slide{inset:0;background:transparent;overflow:hidden;border:10px solid #89402c;border-radius:110px 110px 12px 12px;box-shadow:inset 0 0 0 7px #d5a061;isolation:isolate}
.ger-interior-frame{position:absolute;inset:0;z-index:0;border:12px solid #b56c3c;border-radius:94px 94px 6px 6px;box-shadow:inset 0 0 0 5px #f2cb7f,inset 0 0 0 10px #7a332c;pointer-events:none}
.ger-interior-frame:before{content:'';position:absolute;left:10%;right:10%;top:9px;height:31px;border:5px double #e3a956;border-radius:70% 70% 5px 5px}
.ger-interior-frame span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f5d7a0;font:700 9px Georgia;letter-spacing:3px;background:#7c3429;padding:5px 10px;border-radius:20px}
.opening-ger-slide .opening-panel.opening-left{position:absolute;inset:0;width:100%;border:10px double #e8b66a;border-radius:96px 96px 4px 4px;background:repeating-linear-gradient(90deg,#fff6dd0c 0 26px,#33120e2b 27px 34px,#eaa36e13 35px 44px),linear-gradient(105deg,#60291f 0%,#ad5030 17%,#b35a36 52%,#793225 85%,#5d211c 100%);box-shadow:inset 0 0 0 15px #813825,inset 0 0 0 19px #dfa869,inset 0 0 0 27px #753022,0 16px 32px #35190b86;transform:translateX(0);transition:transform 2.25s cubic-bezier(.2,.75,.16,1),box-shadow .5s;will-change:transform}
.opening-ger-slide .opening-panel.opening-right{display:none}
.opening-ger-slide .ger-single-door:before{content:'';position:absolute;inset:76px 40px 66px;border:7px double #f3c579;border-radius:48% 48% 11px 11px;box-shadow:inset 0 0 0 6px #753021,inset 0 0 0 11px #e1a05b,inset 0 0 0 17px #8e3828}
.opening-ger-slide .ger-single-door:after{content:'';position:absolute;inset:112px 68px 112px;border:3px solid #f6c67d;border-radius:36% 36% 5px 5px;box-shadow:inset 0 0 0 4px #a54631,inset 0 0 0 7px #efc17a}
.opening-ger-slide .ger-door-crown{position:absolute;top:28px;left:0;right:0;text-align:center;color:#fbe1a3;font:30px Georgia,serif;letter-spacing:15px;text-shadow:0 3px #502719;z-index:2}
.opening-ger-slide .ger-door-motif{position:absolute;top:37%;width:100%;left:0;text-align:center;color:#f4cb83;text-shadow:0 2px 0 #50271c;z-index:2;font:58px Georgia,serif;display:flex;gap:10px;justify-content:center;align-items:center}
.opening-ger-slide .ger-door-motif i{font:normal 74px Georgia}
.opening-ger-slide .ger-door-foot{position:absolute;bottom:84px;left:0;right:0;text-align:center;color:#f5c981;font:32px Georgia;letter-spacing:13px;z-index:2}
.opening-ger-slide .ger-door-knob{position:absolute;z-index:3;right:14px;top:54%;width:25px;height:37px;border-radius:55%;border:3px solid #fff0bf;background:radial-gradient(circle at 35% 30%,#f9e4ae,#be7e3c 62%,#744023);box-shadow:0 3px 11px #34160caa}
.opening-ger-slide .opening-seal{background:radial-gradient(circle,#e6b46b,#85412d);border-color:#f5d796;color:#fff0b3;width:75px;height:75px;box-shadow:0 4px 17px #2c140daa,inset 0 0 0 4px #9d5e39;top:52%}
.opening-ger-slide .opening-hint{background:#fff8e8;color:#7c4631;top:calc(52% + 61px);z-index:9}
.story-invite.is-open .opening-ger-slide .opening-panel.opening-left{transform:translateX(-105%)!important;box-shadow:inset 0 0 0 15px #813825,0 12px 35px #35190b2a}
.story-invite.is-open .opening-ger-slide .ger-interior-frame{opacity:0;transition:opacity 1s 1.7s}
/* Catalog thumbnails: miniature painted ger entry so its category is visible at a glance. */
.template-card:has(a[href^="#/new/haircut-"]) .template-thumb .inv-bg{background-image:linear-gradient(135deg,#fff6eaa9,#f2dfbead),url('assets/mongolian-ger-interior.svg');background-position:center;background-size:cover}
.template-card:has(a[href^="#/new/haircut-"]) .template-thumb .inv-border{border-radius:48% 48% 12px 12px;box-shadow:inset 0 0 0 4px #9953375c}
@media(max-width:500px){.opening-ger-slide .ger-single-door:before{inset:70px 23px 53px}.opening-ger-slide .ger-single-door:after{inset:115px 50px 100px}.opening-ger-slide .ger-door-crown{letter-spacing:10px;font-size:23px}.opening-ger-slide .ger-door-motif{font-size:38px}.opening-ger-slide .ger-door-motif i{font-size:58px}}
@media(prefers-reduced-motion:reduce){.opening-ger-slide .opening-panel.opening-left{transition:none!important}}
/* Keep the tap target stationary; pulsing scale interferes with reliable touch / automated tapping. */
.opening-ger-slide .opening-seal{animation:ger-seal-light 2.6s ease-in-out infinite}
@keyframes ger-seal-light{50%{filter:brightness(1.17);box-shadow:0 4px 22px #2c140d,inset 0 0 0 4px #9d5e39}}

/* Five balanced categories on desktop; keep the existing 2-column tablet layout. */
@media(min-width:901px){.categories{grid-template-columns:repeat(5,minmax(0,1fr))}.category-card{padding:23px 18px}}