@font-face{font-family:Cinzel;font-style:normal;font-weight:600 800;font-display:swap;src:url("assets/fonts/cinzel.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/cormorant-garamond.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/inter.woff2") format("woff2")}
:root{--gold:#e6c683;--cream:#f1e7cf;--ink:#10191f}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--ink);color:var(--cream);font:400 14px/1.6 Inter,Arial,sans-serif}
button{font:inherit}
a{color:inherit}
.link-arrow{display:inline-block;width:1em;height:1em;margin-left:.35em;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
img{display:block;max-width:100%}
h1,p{margin:0}
.wrap{width:min(1360px,calc(100% - 72px));margin-inline:auto}
.skip-link{position:absolute;top:-60px;left:12px;z-index:100;padding:10px 14px;background:#fff;color:#111}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.page{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:#10191f}
.page::before{content:"";position:absolute;z-index:-1;inset:-12px;background:url("assets/wow-landscape.webp") center 48%/cover no-repeat;filter:blur(6px);pointer-events:none}
.site-header{min-height:118px;padding-top:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.brand{position:relative;display:grid;place-items:center;width:70px;height:70px;flex:none;text-decoration:none}
.brand::after{content:"";position:absolute;inset:0;background:url("assets/logo-rim.png") center/contain no-repeat;filter:drop-shadow(0 2px 5px #000b);pointer-events:none}
.brand img{width:59.22px;height:59.22px;object-fit:contain;filter:drop-shadow(0 2px 5px #000b)}
.header-meta{color:#fff;text-align:right;font:600 12px/1.5 Cinzel,Georgia,serif;letter-spacing:.15em;text-shadow:0 1px 3px #000,0 2px 8px #000}
.header-meta b{padding:0 10px;color:#fff;font-size:9.6px}
.header-meta strong{color:#fff;font-weight:800}

.stage{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(28px,5vw,75px);flex:1;padding-block:25px}
.copy{position:relative;z-index:1;max-width:585px;padding-bottom:10px;transform:translateY(-16px)}
.hero-wordmark{display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin:0;color:#f0ebe4;font-family:Cinzel,Georgia,serif;font-weight:700;line-height:.95;text-shadow:0 3px 5px #000,0 0 22px #080d13}
.hero-wordmark span{display:block;width:max-content;max-width:100%}
.wordmark-first{margin-left:2px;font-size:clamp(43px,4.5vw,72px);letter-spacing:.01em}
.wordmark-second{margin-top:-2px;margin-left:22px;font-size:clamp(72px,7.3vw,122px);letter-spacing:-.03em}
.lede{max-width:475px;margin:27px 0 0;color:#e0dbcc;font-size:14px;line-height:1.75;text-shadow:0 2px 5px #000}
.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:32px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;padding:13px 21px;text-decoration:none;text-transform:uppercase;font:700 12px Cinzel,Georgia,serif;letter-spacing:.06em;transition:transform .2s,filter .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.button-gold{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:11px;width:222px;min-height:54px;padding:12px 25px;overflow:hidden;border:1px solid #d6aa57;border-radius:3px;background:linear-gradient(180deg,rgba(244,202,111,.8),rgba(191,128,50,.73) 48%,rgba(107,63,29,.81)),url("assets/main-texture.webp") center 77%/650px auto,#86551f;box-shadow:inset 0 1px rgba(255,235,174,.64),inset 0 -2px rgba(72,38,16,.58),0 5px 13px #0008;color:#fff;font-size:14px;font-weight:800;letter-spacing:.15em}
.button-gold::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,242,185,.25) 0%,rgba(255,234,150,.4) 30%,rgba(255,239,176,.95) 44%,rgba(255,201,73,.65) 52%,transparent 68%);opacity:0;transform:translate(-50%,-50%) scale(0);pointer-events:none}
.button-gold.is-pulsing::before{animation:install-golden-pulse .7s linear}
@keyframes install-golden-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  12%{opacity:.4;transform:translate(-50%,-50%) scale(.12);animation-timing-function:cubic-bezier(.16,.65,.3,1)}
  75%{opacity:.5;transform:translate(-50%,-50%) scale(1.35)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}
}
.download-icon{position:relative;z-index:1;display:block;width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #29170b)}
.button-label{position:relative;z-index:1;text-shadow:0 1px 3px #29170b,0 2px 6px #29170b}
.button-gold.has-version{gap:8px;padding-inline:16px}
.button-version{position:relative;z-index:1;display:inline-block;flex:none;max-width:64px;padding:4px 6px;border-radius:5px;background:#fff;color:#62411d;font:600 10px/1.2 Inter,Arial,sans-serif;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}
.button-version[hidden]{display:none}
.button-gold:hover{transform:translateY(-2px);filter:brightness(1.12)}
.button-gold:active{transform:translateY(1px);filter:brightness(.96)}
.source-link{display:inline-flex;align-items:center;min-height:48px;padding-inline:12px;margin-inline:-12px;color:#e8cc91;text-decoration:none;text-transform:uppercase;font:700 12px Cinzel,Georgia,serif;letter-spacing:.06em;text-shadow:0 2px 4px #000}
.source-link:hover,.site-footer a:hover{color:#fff0c9}

.gallery{width:100%;min-width:0;align-self:center}
.photo-stage{position:relative;width:min(100%,700px);height:clamp(430px,43vw,560px);margin-inline:auto;opacity:0;transition:opacity .2s ease;touch-action:pan-y;user-select:none}
.photo-stage.is-sized{opacity:1}
.photo-card{--parchment-texture:url("assets/parchment-frame.png?v=aged-scroll-1");--card-padding:16px;position:absolute;isolation:isolate;left:50%;top:50%;width:72%;height:auto;margin:0;padding:var(--card-padding);border:1px solid transparent;border-radius:0;-webkit-appearance:none;appearance:none;background:none;box-shadow:none;transform-origin:50% 50%;transition:transform .55s cubic-bezier(.18,.72,.2,1),opacity .32s ease,visibility .32s;cursor:pointer;touch-action:pan-y}
.photo-card[data-paper="2"]{--parchment-texture:url("assets/parchment-frame-2.png?v=aged-scroll-1")}
.photo-card[data-paper="3"]{--parchment-texture:url("assets/parchment-frame-3.png?v=aged-scroll-1")}
.photo-card::before{content:"";position:absolute;z-index:-1;inset:4px;border-radius:4px;box-shadow:0 3px 3px #0006,0 19px 30px #0009;pointer-events:none}
/* The same raster frame, split into eight background tiles. A real overlay layer
   keeps the parchment above inline video without border-image or media effects. */
.parchment-frame{position:absolute;z-index:1;inset:-1px;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;grid-template-rows:28px minmax(0,1fr) 28px;pointer-events:none;transform:translateZ(0)}
.parchment-frame>span{min-width:0;min-height:0;background-image:var(--parchment-texture);background-repeat:no-repeat;background-size:400% 400%}
.parchment-frame>span:nth-child(1){grid-area:1/1;background-position:left top}
.parchment-frame>span:nth-child(2){grid-area:1/2;background-size:200% 400%;background-position:center top}
.parchment-frame>span:nth-child(3){grid-area:1/3;background-position:right top}
.parchment-frame>span:nth-child(4){grid-area:2/1;background-size:400% 200%;background-position:left center}
.parchment-frame>span:nth-child(5){grid-area:2/3;background-size:400% 200%;background-position:right center}
.parchment-frame>span:nth-child(6){grid-area:3/1;background-position:left bottom}
.parchment-frame>span:nth-child(7){grid-area:3/2;background-size:200% 400%;background-position:center bottom}
.parchment-frame>span:nth-child(8){grid-area:3/3;background-position:right bottom}
/* Let the edge strips continue under the corners. Touching tile boundaries
   can reveal subpixel gaps once the whole card is rotated or scaled. */
.parchment-frame>span:nth-child(1),.parchment-frame>span:nth-child(3),.parchment-frame>span:nth-child(6),.parchment-frame>span:nth-child(8){z-index:1}
.parchment-frame>span:nth-child(2),.parchment-frame>span:nth-child(7){margin-inline:-1px}
.parchment-frame>span:nth-child(4),.parchment-frame>span:nth-child(5){margin-block:-1px}
.photo-card img,.photo-card video{position:relative;z-index:0;display:block;width:100%;height:auto;border-radius:0}
.photo-card[data-depth="0"]{z-index:5;opacity:1;visibility:visible;transform:translate(-50%,-50%) rotate(-2deg) scale(1);pointer-events:auto}
.photo-card[data-depth="1"]{z-index:4;opacity:1;visibility:visible;transform:translate(-50%,-50%) translate(29px,-20px) rotate(4deg) scale(.97);pointer-events:none}
.photo-card[data-depth="2"]{z-index:3;opacity:1;visibility:visible;transform:translate(-50%,-50%) translate(54px,-37px) rotate(7deg) scale(.94);pointer-events:none}
.photo-card[data-depth="3"]{z-index:2;opacity:1;visibility:visible;transform:translate(-50%,-50%) translate(75px,-50px) rotate(10deg) scale(.91);pointer-events:none}
.photo-card[data-depth="hidden"]{z-index:1;opacity:0;visibility:hidden;transform:translate(-50%,-50%) translate(90px,-60px) rotate(11deg) scale(.88);pointer-events:none;transition:none}
.photo-card.is-fading-back{z-index:1;visibility:visible;pointer-events:none;transition:none}
.photo-card.is-exiting{z-index:6;pointer-events:none;transition:none}
.photo-card.is-entering,.photo-card.is-retreating,.photo-card.is-restoring{pointer-events:none;transition:none}

.gallery-controls{display:grid;grid-template-columns:auto minmax(120px,1fr) auto auto;align-items:center;gap:13px;width:min(100%,610px);margin:0 auto;padding:10px 12px;border-radius:6px;background:linear-gradient(180deg,rgba(47,31,25,.82),rgba(13,12,20,.93)),url("assets/main-texture.webp") center 73%/cover no-repeat,#1b1719;box-shadow:inset 0 1px rgba(238,198,121,.38),inset 0 -2px rgba(5,4,7,.8),0 12px 28px #0009}
.gallery-arrow,.gallery-play{border:1px solid #ad8549;border-radius:3px;background:linear-gradient(180deg,rgba(181,139,72,.62),rgba(82,54,35,.72) 48%,rgba(29,22,23,.91)),url("assets/main-texture.webp") center 77%/650px auto,#38271e;color:#f8e4af;box-shadow:inset 0 1px rgba(255,228,163,.55),inset 0 -2px rgba(13,7,5,.75),0 3px 0 #151015,0 5px 13px #0008;text-shadow:0 1px 3px #000;cursor:pointer;transition:filter .2s,transform .2s,box-shadow .2s}
.gallery-arrow:hover,.gallery-play:hover{filter:brightness(1.2);transform:translateY(-2px);box-shadow:inset 0 1px rgba(255,236,175,.7),inset 0 -2px rgba(13,7,5,.75),0 5px 0 #151015,0 0 16px rgba(239,183,83,.42)}
.gallery-arrow:active,.gallery-play:active{transform:translateY(2px);box-shadow:inset 0 1px rgba(255,229,156,.3),inset 0 -1px rgba(13,7,5,.7),0 1px 0 #151015}
.gallery-arrow{display:grid;grid-template-columns:22px 1fr;align-items:center;justify-items:center;gap:7px;width:126px;min-height:47px;padding:0 12px;text-transform:uppercase;font:700 10px Cinzel,Georgia,serif;letter-spacing:.08em}
.gallery-arrow>span:not(.arrow-icon){display:flex;align-items:center;justify-content:center;min-height:22px;line-height:1}
#gallery-next,#preview-next{grid-template-columns:1fr 22px}
.arrow-icon{display:grid;place-items:center;width:22px;height:22px;line-height:1}
.arrow-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gallery-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;color:#f0e5ca;text-align:center}
.gallery-label span:first-child{font:600 18px "Cormorant Garamond",Georgia,serif;white-space:nowrap}
.gallery-label span:last-child{color:#d3bb84;font:600 9px Cinzel,Georgia,serif;white-space:nowrap}
.gallery-play{display:grid;place-items:center;width:47px;height:47px;font-size:19px}
.gallery-progress{width:min(100%,535px);height:2px;margin:10px auto 0;background:rgba(226,205,162,.21)}
.gallery-progress span{display:block;width:0;height:100%;background:#edcc84;box-shadow:0 0 7px #e7bf70}
@keyframes fill-progress{from{width:0}to{width:100%}}

body.preview-open{overflow:hidden}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--cream);overflow:hidden}
.lightbox::backdrop{background:rgba(5,4,8,.84);opacity:0;transition:opacity .34s ease}
.lightbox.is-visible::backdrop{opacity:1}
.photo-card.is-preview{z-index:1;opacity:1;visibility:visible;transform:translate(-50%,-50%);pointer-events:auto;transition:none;cursor:default}
.lightbox .gallery-controls{position:absolute;z-index:2;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(610px,calc(100% - 32px));opacity:0;pointer-events:none;transition:opacity .16s ease}
.lightbox.is-visible .gallery-controls{opacity:1;pointer-events:auto;transition:opacity .24s ease .08s}
.lightbox-close svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:65px;border-top:1px solid rgba(225,195,133,.25);color:#d2c8b3;font:600 9px Cinzel,Georgia,serif;letter-spacing:.08em;text-shadow:0 1px 3px #000}
.site-footer nav{grid-column:1;display:flex;gap:22px;justify-self:start;font-size:12px}
.site-footer a{color:#e0c78f;text-decoration:none}
.site-footer small{grid-column:2;justify-self:end;max-width:435px;color:#c1c3b8;text-align:right;font:400 10px/1.55 Inter,Arial,sans-serif;letter-spacing:0}

@media(max-width:1050px){
  .wrap{width:calc(100% - 48px)}
  .stage{gap:12px}
  .wordmark-first{font-size:clamp(43px,5.2vw,64px)}
  .wordmark-second{font-size:clamp(70px,8.6vw,105px)}
  .photo-stage{height:clamp(410px,47vw,510px)}
}
@media(max-width:760px){
  .page::before{background-position:12% center}
  .site-header{flex-direction:column;align-items:center;justify-content:center;padding-bottom:10px}
  .header-meta{text-align:center}
  .stage{grid-template-columns:1fr;gap:10px;padding-top:30px}
  .copy{width:100%;max-width:650px;margin-inline:auto;text-align:center}
  .hero-wordmark{align-items:center;margin-inline:auto}
  .wordmark-first,.wordmark-second{margin-left:0}
  .lede{margin-inline:auto}
  .actions{flex-direction:column;justify-content:center;gap:12px}
  .photo-stage{height:min(92vw,520px)}
  .gallery{margin-top:18px}
  .site-footer{grid-template-columns:1fr;gap:9px;padding-block:17px}
  .site-footer nav{grid-column:1;justify-self:center;justify-content:center}
  .site-footer small{grid-column:1;justify-self:center;text-align:center}
  .site-footer small{max-width:none}
}
@media(max-width:520px){
  .wrap{width:calc(100% - 34px)}
  .site-header{min-height:94px;padding-top:16px;gap:12px}
  .brand{width:52.5px;height:52.5px}
  .brand img{width:42.84px;height:42.84px}
  .header-meta{font-size:9.6px;letter-spacing:.05em}
  .header-meta b{padding:0 4px}
  .stage{padding-top:30px}
  .copy{transform:translateY(-10px)}
  .wordmark-first{font-size:clamp(39px,10.5vw,58px)}
  .wordmark-second{font-size:clamp(67px,18vw,95px)}
  .lede{margin-top:21px;font-size:13px}
  .actions{margin-top:23px;gap:12px}
  .button{min-height:46px;padding:11px 16px;font-size:11px}
  .button-gold{width:200px;min-height:50px;padding:10px 20px;font-size:12px}
  .source-link{font-size:11px}
  .gallery{margin-top:13px}
  .photo-stage{height:94vw;min-height:340px}
  .photo-card{--card-padding:12px}
  .parchment-frame{grid-template-columns:24px minmax(0,1fr) 24px;grid-template-rows:24px minmax(0,1fr) 24px}
  .gallery-controls{gap:8px;padding:8px}
  .gallery-arrow,#gallery-next,#preview-next{grid-template-columns:1fr;width:42px;min-height:42px;padding:0}
  .gallery-arrow span:not([aria-hidden="true"]){display:none}
  .gallery-label span:first-child{font-size:16px}
  .gallery-play{width:42px;height:42px}
  .site-footer nav{font-size:11px}
}
/* Wide tablets need a height-based gallery: width-based sizing can make the
   main row taller than Safari's visible landscape viewport. Equal header and
   footer space keeps that row centered, including when the toolbar changes. */
@media(min-width:761px) and (max-width:1400px) and (orientation:landscape){
  .page{min-height:100svh;min-height:100dvh}
  .site-header,.site-footer{min-height:94px;flex-shrink:0}
  .stage{min-height:0;padding-block:12px}
  .photo-stage{height:clamp(240px,calc(100svh - 291px),560px);height:clamp(240px,calc(100dvh - 291px),560px)}
}
@media(max-width:365px){.header-meta{font-size:8.4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.gallery-arrow,.gallery-play,.photo-card,.photo-stage,.lightbox::backdrop,.lightbox .gallery-controls,.lightbox.is-visible .gallery-controls{transition:none}.gallery-progress span,.button-gold::before{animation:none!important}}
