/* One quiet text field and one separate photographic field. */
[data-shrine-page]{--shrine-header:90px;--shrine-topline:34px}
[data-shrine-page] .site-header{height:var(--shrine-header);margin-bottom:calc(-1 * var(--shrine-header));background:rgba(35,43,34,.66);color:#eee8d9;border-bottom:1px solid #e6e1cf25;backdrop-filter:blur(22px) saturate(115%);-webkit-backdrop-filter:blur(22px) saturate(115%);box-shadow:0 1px 0 #10120f18;transition:background .3s,border-color .3s}
[data-shrine-page] .site-header.scrolled{background:rgba(35,43,34,.84);border-color:#e6e1cf35}
[data-shrine-page] .site-header .brand small{color:#c1c5b4;border-color:#d4d3c638}
[data-shrine-page] .site-header .brand-dot{background:#eee8d9}
[data-shrine-page] .site-header nav>a:hover{color:#f8ecd0}
.shrine-hero{--night:#10120f;--image-start:32%;--copy-field:44%;display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:8px;min-height:0;height:calc(100svh - var(--shrine-topline));max-height:none;padding:calc(var(--shrine-header) + 12px) 0 6px;background:var(--night);color:#eee8d9;isolation:isolate}
.shrine-stage{position:absolute;inset:var(--shrine-header) 0 0 var(--image-start);overflow:hidden;isolation:isolate;z-index:-1}
.shrine-slide{position:absolute;inset:0;opacity:0;will-change:opacity;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 95%,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 95%,#000)}
.shrine-slide.is-current{opacity:1}
.shrine-slide img{position:absolute;max-width:none;object-fit:cover;display:block}
.shrine-slide[data-photo="asuka"] img{width:auto;height:100%;left:50%;top:4%;transform:translateX(-55%);filter:brightness(.86) saturate(.82);mask-image:radial-gradient(ellipse 31% 62% at 55% 52%,#000 57%,#000c 72%,transparent 100%)}
.shrine-slide[data-photo="heian"] img{width:100%;height:235%;top:-18%;right:0;object-position:57% 0%;filter:brightness(.72) sepia(.12)}
.shrine-slide[data-photo="jowo"] img{width:auto;height:108%;left:55%;top:-16%;transform:translateX(-50%);filter:brightness(.88) saturate(.82);mask-image:radial-gradient(ellipse 69% 67% at 49% 53%,#000 58%,transparent 100%)}
.shrine-slide[data-photo="ascetic"] img{width:auto;height:112%;left:55%;top:1%;transform:translateX(-50%);filter:brightness(.88) saturate(.78);mask-image:radial-gradient(ellipse 53% 57% at 50% 48%,#000 59%,transparent 100%)}
.shrine-slide[data-photo="bagan"] img{width:auto;height:135%;left:54%;top:-10%;transform:translateX(-50%);filter:brightness(.78) saturate(.88);mask-image:radial-gradient(ellipse 37% 55% at 49% 48%,#000 48%,#000b 65%,transparent 100%)}
.shrine-edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#10120f,transparent 25%),linear-gradient(0deg,#10120f,transparent 24%),linear-gradient(180deg,#10120f88,transparent 22%)}
.shrine-atmosphere{position:absolute;inset:-6%;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 24%);mix-blend-mode:screen}
.shrine-atmosphere span{position:absolute;inset:0;background:radial-gradient(ellipse at 76% 18%,#dcc39820,transparent 48%);animation:shrine-light 17s ease-in-out infinite alternate;opacity:.2;will-change:transform,opacity}
.shrine-atmosphere span+span{background:radial-gradient(ellipse at 87% 85%,#d6b37716,transparent 48%);animation-duration:23s;animation-delay:-8s}
@keyframes shrine-light{from{opacity:.16;transform:translate3d(2%,1%,0)}to{opacity:.65;transform:translate3d(-3%,-2%,0)}}
[data-still] .shrine-atmosphere span{animation-play-state:paused}
.shrine-hero .hero-copy{position:relative;left:auto;top:auto;width:var(--copy-field);height:100%;min-width:0;min-height:0;padding-inline:20px;z-index:2;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;container-type:size;text-align:center}
.shrine-prelude{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0}
.shrine-heading{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.95vw,29px);line-height:1.35;letter-spacing:.12em;color:#e5decb;white-space:nowrap}
.shrine-seal{width:112px;height:auto;max-width:none;display:block}
.shrine-hero h1{flex-shrink:0;font-size:clamp(26px,min(4.4vw,calc((100cqh - 184px)/6.5)),62px);line-height:1.38;letter-spacing:.08em;gap:14px;margin:clamp(8px,2.5cqh,18px) 0 0}
.shrine-hero .hero-deity{position:static;writing-mode:horizontal-tb;flex-shrink:0;font-size:14px;line-height:1.5;letter-spacing:.14em;margin-top:clamp(8px,2.2cqh,14px);color:#b4b6a3}
.shrine-schedule{flex-shrink:0;margin-top:10px;font-family:var(--sans);font-size:14px;letter-spacing:.05em;color:#e5dfd0}
.shrine-schedule p{line-height:1.6}
.shrine-schedule p>span{display:block;margin-top:4px;font-size:13px;color:#b9bfaa;letter-spacing:.02em}
.shrine-schedule .attendance-copy,.shrine-schedule .offering-copy{display:inline}
.shrine-schedule .offering-copy::before{content:'・'}
.shrine-footer{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:48px;column-gap:24px;align-items:center;z-index:3;min-width:0;width:92%;justify-self:center}
.shrine-credits{grid-column:2;grid-row:1;justify-self:end;max-width:100%;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;font:12px/1.7 system-ui,sans-serif;letter-spacing:0;color:#aeb39e}
.shrine-credit{display:block;white-space:nowrap}
.shrine-credit[hidden]{display:none}
.shrine-credit a{display:inline-block;padding-block:3px;text-decoration:underline;text-decoration-color:#aeb39e55;text-underline-offset:3px}
.shrine-credit .statue-caption{color:#d8d7c5;text-decoration:none}
.shrine-credit a:hover{color:#eee8d9}
.shrine-controls{position:static;grid-column:1;grid-row:1;justify-self:start;transform:none;display:flex;align-items:center;gap:12px;z-index:3}
.shrine-controls[hidden]{display:none}
.shrine-options{display:flex;gap:3px}
.shrine-controls button{appearance:none;border:0;background:transparent;color:#a5a893;min-width:44px;min-height:44px;padding:10px 8px;font:12px/1.4 system-ui,sans-serif;cursor:pointer}
.shrine-options button span{position:relative;display:block;padding-block:5px}
.shrine-options button span::after{content:'';height:1px;position:absolute;left:2px;right:2px;bottom:0;background:currentColor;transform:scaleX(.3);opacity:.35;transition:transform .15s ease-out,opacity .15s ease-out}
.shrine-options button[aria-pressed="true"]{color:#f4edda}
.shrine-options button[aria-pressed="true"] span::after{transform:scaleX(1);opacity:1}
.shrine-controls .shrine-pause{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid #aeb39e38;border-radius:50%;margin-left:3px;color:#d7dac9}
.shrine-controls .shrine-pause:not(:disabled):hover{background:#e6e1cf0a;border-color:#aeb39e70}
.shrine-controls button:focus-visible,.shrine-footer a:focus-visible{outline:1px solid #e2d6b3;outline-offset:3px}
.shrine-pause .play-icon,.shrine-pause .pause-icon{display:block;transform-box:fill-box;transform-origin:center;transition:opacity .15s cubic-bezier(.2,0,0,1),transform .15s cubic-bezier(.2,0,0,1),filter .15s cubic-bezier(.2,0,0,1)}
.shrine-pause .play-icon{opacity:0;transform:scale(.25);filter:blur(4px)}
.shrine-pause .pause-icon,.shrine-pause[data-paused="true"] .play-icon{opacity:1;transform:scale(1);filter:blur(0)}
.shrine-pause[data-paused="true"] .pause-icon{opacity:0;transform:scale(.25);filter:blur(4px)}
[data-shrine-page] .footer small{font-family:system-ui,sans-serif}
@media(max-width:1050px) and (min-width:701px){.shrine-hero{--image-start:35%;--copy-field:45%}[data-shrine-page] .site-header nav{gap:20px}.shrine-heading{font-size:23px}}
@media(max-width:700px){
 [data-shrine-page]{--shrine-header:72px;--shrine-topline:28px}
 [data-shrine-page] .site-header{gap:12px;padding-inline:6%}
 .shrine-hero{--image-start:43%;--copy-field:46%;padding-top:calc(var(--shrine-header) + 12px);padding-bottom:4px;row-gap:8px}
 .shrine-hero .hero-copy{padding-inline:8px}
 .shrine-heading{font-size:clamp(18px,4.7vw,22px);line-height:1.35;letter-spacing:.025em}
 .shrine-prelude{gap:6px}
 .shrine-seal{width:92px}
 .shrine-hero h1{font-size:clamp(25px,min(10vw,calc((100cqh - 176px)/6.4)),43px);line-height:1.35;letter-spacing:.06em;gap:7px}
 .shrine-hero .hero-deity{font-size:12px;line-height:1.5;letter-spacing:.02em;margin-top:10px;white-space:nowrap}
 .shrine-schedule{margin-top:12px;font-size:13px;letter-spacing:0;white-space:nowrap}
 .shrine-schedule p>span{font-size:12px;letter-spacing:0;line-height:1.6}
 .shrine-schedule .attendance-copy,.shrine-schedule .offering-copy{display:block}
 .shrine-schedule .offering-copy::before{content:none}
 .shrine-slide{mask-image:linear-gradient(90deg,transparent,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%)}
 .shrine-slide[data-photo="asuka"] img{width:auto;height:55%;left:50%;top:22%;transform:translateX(-55%)}
 .shrine-slide[data-photo="heian"] img{width:100%;height:190%;top:-5%;object-position:57% 0%}
 .shrine-slide[data-photo="jowo"] img{width:auto;height:74%;left:55%;top:5%}
 .shrine-slide[data-photo="ascetic"] img{width:auto;height:90%;left:52%;top:16%}
 .shrine-slide[data-photo="bagan"] img{width:auto;height:125%;left:53%;top:8%}
 .shrine-edge{background:linear-gradient(90deg,#10120f,transparent 17%),linear-gradient(0deg,#10120f,transparent 29%),linear-gradient(180deg,#10120f99,transparent 24%)}
 .shrine-footer{width:94%;column-gap:12px}
 .shrine-credits{justify-self:end}
 .shrine-controls{grid-column:1;gap:4px}
 .shrine-controls button{min-width:40px;padding-inline:6px}
 .shrine-controls .shrine-pause{min-width:40px;width:40px;height:40px;min-height:40px}
 .shrine-atmosphere{inset:-3%}
}
@media(max-width:360px){.shrine-hero{--image-start:45%;--copy-field:48%}[data-shrine-page] .site-header{padding-inline:5%}.shrine-heading{font-size:18px;letter-spacing:0}.shrine-controls{gap:2px}.shrine-options{gap:0}.shrine-controls button{min-width:38px}.shrine-footer{width:96%}}
@media(max-height:600px){[data-shrine-page]{--shrine-header:64px}.shrine-hero{padding-top:calc(var(--shrine-header) + 6px)}.shrine-heading{font-size:19px}.shrine-seal{width:78px}.shrine-prelude{gap:3px}.shrine-hero h1{font-size:clamp(19px,calc((100cqh - 148px)/6.4),34px);margin-top:5px}.shrine-hero .hero-deity{margin-top:6px;font-size:12px}.shrine-schedule{margin-top:6px;font-size:12px}.shrine-schedule p>span{font-size:12px}.shrine-footer{row-gap:0}.shrine-credit a{padding-block:1px}}
@media(prefers-reduced-motion:reduce){.shrine-atmosphere span{animation:none!important}.shrine-options button span::after,[data-shrine-page] .site-header,[data-shrine-page] .participation-cta{transition:none}.shrine-slide{will-change:auto}}

/* The caption and photo controls share one baseline at every width. */
.shrine-photo-picker{display:none}
.nav-sections{display:flex;align-items:center;gap:clamp(16px,1.6vw,26px);white-space:nowrap}
.nav-sections>a{padding-block:16px}
.nav-sections>a:hover{color:#b36850}
[data-shrine-page] .nav-sections>a:hover{color:#f8ecd0}
@media(max-width:1150px){[data-shrine-page] .brand small{display:none}[data-shrine-page] .site-header{padding-inline:4%}[data-shrine-page] .site-header nav{gap:16px}.nav-sections{gap:16px;font-size:13px}}
@media(max-width:1000px){
 html{scroll-padding-top:132px}
 [data-shrine-page]{--shrine-header:116px}
 [data-shrine-page] .site-header{padding-bottom:44px;padding-inline:5%}
 [data-shrine-page] .site-header nav{display:contents}
 [data-shrine-page] .nav-sections{position:absolute;bottom:0;left:5%;right:5%;height:44px;overflow-x:auto;scrollbar-width:none;gap:24px;justify-content:flex-start;border-top:1px solid #e6e1cf20;font-size:13px}
 [data-shrine-page] .nav-sections>a{display:block;flex-shrink:0;padding-block:12px}
 [data-shrine-page] .nav-sections::-webkit-scrollbar{display:none}
}
@media(max-width:700px){
 .shrine-options{display:none}
 .shrine-photo-picker{display:block;appearance:auto;max-width:68px;min-height:44px;border:0;border-radius:0;background:transparent;color:#f4edda;font:12px/1.4 system-ui,sans-serif;cursor:pointer}
 .shrine-photo-picker option{background:#20261d;color:#f4edda}
 .shrine-photo-picker:focus-visible{outline:1px solid #e2d6b3;outline-offset:2px}
 .shrine-credits{overflow-x:auto;scrollbar-width:none}
}

/* Three vertical columns keep the new audience line inside the text field. */
.shrine-hero h1 span:nth-child(2){padding-top:.5em}
.shrine-hero h1 span:last-child{padding-top:1em}
@media(max-width:700px){
 .shrine-hero h1{font-size:clamp(24px,min(8vw,calc((100cqh - 176px)/6.4)),34px);gap:7px}
}
@media(max-height:600px){
 .shrine-hero h1{font-size:clamp(19px,min(8vw,calc((100cqh - 148px)/6.4)),34px)}
}

/* Keep photo controls responsive without changing the image cross-fade. */
.shrine-controls button{transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,transform .15s ease-out}
.shrine-controls button:not(:disabled):active{transform:scale(.96)}
.shrine-controls button:disabled{opacity:.4;cursor:default}
@media(prefers-reduced-motion:reduce){.shrine-controls button:not(:disabled):active{transform:none}}