/* Top-page atmosphere. Image assets, copy and navigation remain original. */
:root{--dt-ink:#11192f;--dt-plum:#493550;--dt-panel:#24233b;--dt-gold:#c6a568;--dt-light:#f0ddb0;--dt-white:#f2ede5;--dt-rose:#b7798c}
html{background:#11192f;background-image:radial-gradient(ellipse at 88% 28%,#49355066,transparent 48%),linear-gradient(180deg,#11192f,#1c1d36 48%,#11192f)}
body{color:var(--dt-white)}
.sky{background:radial-gradient(ellipse at 50% -12%,#a99ac933,transparent 57%),radial-gradient(ellipse at 10% 65%,#49355055,transparent 60%)}
.dt-atmosphere{position:absolute;inset:0 0 auto;height:660px;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.dt-mist{position:absolute;inset:-12%;background:radial-gradient(ellipse at 15% 45%,#ad83ad16,transparent 43%),radial-gradient(ellipse at 85% 65%,#bdc2eb12,transparent 42%);animation:dtMist 26s ease-in-out infinite alternate}
.dt-orbit{position:absolute;top:20vh;left:50%;width:min(125vw,850px);height:auto;opacity:.13;color:var(--dt-gold);animation:dtOrbit 180s linear infinite;transform-origin:center}
.wrap{position:relative;z-index:1}
.hero-sub{color:#e4dce8;letter-spacing:.1em}
.hero-kicker{color:var(--dt-gold)}
.hero h1{background-image:linear-gradient(115deg,#f0ddb0 15%,#c6a568 48%,#f7edd3 73%,#c6a568);text-shadow:none}
.hero-free{display:table;position:relative;margin:23px auto 0;padding:10px 25px;border:0;border-top:1px solid #c6a56873;border-bottom:1px solid #c6a56873;border-radius:0;background:linear-gradient(90deg,transparent,#c6a5680b,transparent);box-shadow:none;color:var(--dt-white);font-family:"Shippori Mincho B1","Yu Mincho",serif;font-weight:700;font-size:15px;letter-spacing:.2em}
.hero-free::before,.hero-free::after{content:"";position:absolute;width:4px;height:4px;background:var(--dt-gold);top:50%;transform:translateY(-50%) rotate(45deg)}
.hero-free::before{left:0}.hero-free::after{right:0}
.hero-badges{gap:0;margin:13px auto 0;align-items:center}
.hero-badges span{border:0;border-radius:0;background:none;color:#d7cbdc;font-size:11.5px;font-weight:400;padding:0 12px;letter-spacing:.08em}
.hero-badges span+span{border-left:1px solid #c6a56850}
.hero-lead{color:#c4bdcf;line-height:1.95;margin-top:12px}
.hero .wip-note{color:#b7798c}
.flow{margin-top:24px;border-color:#c6a56845;background:linear-gradient(90deg,#11192f,#49355045,#11192f);padding:7px 0}
.flow-group span{color:#e0cfad;font-size:11.5px}
.pick-head{margin:28px 0 20px;color:var(--dt-light);font-size:17px;letter-spacing:.22em}
.pick-head::before,.pick-head::after{max-width:100px;background:linear-gradient(90deg,transparent,#c6a568)}
.pick-head::after{transform:rotate(180deg)}
@keyframes dtMist{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}
@keyframes dtOrbit{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
@keyframes dtSheen{0%,55%{background-position:130% 0}90%,100%{background-position:-50% 0}}
@keyframes dtTap{from{opacity:.8;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-50%) scale(5)}}


/* Unified title, reading, seal and subtitle. */
.hero-kicker{display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px;margin:0 auto 10px;font-size:11px;letter-spacing:.28em;text-indent:0;color:#d6bd91}
.hero-kicker .series-mark{position:static;transform:none;order:-1;flex:none}
.hero-kicker .series-mark img{width:32px;height:32px;filter:drop-shadow(0 2px 5px #05091c88);opacity:.9}
.hero h1{position:relative;margin:4px auto 0;font-size:clamp(25px,7.7vw,34px);line-height:1.65;font-weight:700;letter-spacing:.07em;text-indent:.07em;background-image:linear-gradient(110deg,#c6a568 5%,#f2ede5 32%,#f0ddb0 52%,#c6a568 75%,#f2ede5 95%);background-size:220% 100%;filter:drop-shadow(0 3px 12px #060a1c66);animation:dtTitleLight 18s ease-in-out infinite alternate}
.hero h1::after{display:none}
.hero-sub{position:relative;display:table;margin:12px auto 0;padding:10px 0 0;font-size:clamp(11.5px,3.45vw,14px);line-height:1.85;letter-spacing:.07em;color:#ded6e1}
.hero-sub::before{content:"";position:absolute;top:0;left:calc(50% - 28px);width:56px;height:1px;background:linear-gradient(90deg,transparent,#c6a568,transparent)}
.hero .wip-note b{color:#b7798c;font-weight:400}
@keyframes dtTitleLight{from{background-position:0 50%}to{background-position:100% 50%}}
@media(min-width:920px){.hero-kicker{font-size:12px;margin-bottom:12px;gap:15px}.hero-kicker .series-mark img{width:38px;height:38px}.hero h1{font-size:48px;letter-spacing:.13em;text-indent:.13em}.hero-sub{font-size:16px;margin-top:13px}.hero-badges{gap:0;margin-top:13px}.hero-badges span{padding:0 14px}.dt-atmosphere{height:950px}}
@media(prefers-reduced-motion:reduce){.dt-mist,.dt-orbit,.hero h1{animation:none}}/* The artwork and title form a single moonlit composition. */
.hero{padding-top:clamp(165px,45vw,245px);isolation:isolate}
body.hero2 .hero-art{left:-12%;right:-12%;height:310px;max-height:none}
body.hero2 .hero-art::after{aspect-ratio:2;filter:brightness(1.05) saturate(.96)}
.hero::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:0;right:0;top:140px;height:270px;background:radial-gradient(ellipse at 50% 35%,#c6a56816,transparent 62%),radial-gradient(ellipse at 50% 45%,#9679af29,transparent 70%);animation:dtMoonlight 9s ease-in-out infinite alternate}
.hero-kicker{margin-bottom:3px;min-height:30px;gap:9px}
.hero-kicker .series-mark img{width:26px;height:26px}
.hero h1{display:flex;align-items:baseline;justify-content:center;gap:10px;white-space:nowrap;line-height:1.35;margin:3px auto 0;letter-spacing:.04em;text-indent:0}
.dt-title-main{font-size:clamp(36px,10.8vw,46px);letter-spacing:.1em}
.dt-title-series{font-size:clamp(16px,4.8vw,21px);letter-spacing:.08em}
.hero-sub{margin-top:9px;padding-top:8px}
.hero-free{margin-top:17px;padding:8px 25px}
.hero-badges{margin-top:10px}
.hero .wip-note{margin-top:7px}
.hero-lead{margin-top:9px;line-height:1.8}
.flow{margin-top:17px}
.dt-orbit{opacity:.17}
@keyframes dtMoonlight{from{opacity:.5;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}
@media(min-width:920px){.hero{padding-top:clamp(325px,36vw,455px)}body.hero2 .hero-art{left:calc(50% - 50vw);right:auto;width:100vw;height:570px}.hero::before{top:280px;height:330px}.dt-title-main{font-size:60px}.dt-title-series{font-size:28px}.hero h1{gap:20px}.hero-kicker .series-mark img{width:32px;height:32px}.hero-lead{max-width:590px}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}
/* Readable pigments and a compact introduction. */
body.hero2 .hero-art::before{filter:url(#council-color-tone) brightness(1.23) saturate(1.01)}
body.hero2 .hero-art::after{filter:brightness(1.12) saturate(1.02)}
.hero-free{margin-top:13px;padding-top:7px;padding-bottom:7px}
.hero-badges{margin-top:8px}
.hero .wip-note{margin-top:6px}
.hero-lead{margin-top:7px;line-height:1.72;color:#d2cbd9}
.dt-arrival{position:absolute;inset:0 0 auto;height:290px;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 16%,#f0ddb045,transparent 47%),radial-gradient(ellipse at 50% 36%,#b4a4d034,transparent 68%);mix-blend-mode:screen}
@media(min-width:920px){.dt-arrival{height:530px}}
@media(prefers-reduced-motion:reduce){.dt-arrival{display:none}}
/* More legible painting and a visible, slow celestial movement. */
.dt-title-series{font-size:clamp(19px,5.7vw,25px);letter-spacing:.045em}
body.hero2 .hero-art::before,body.hero2 .hero-art::after{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 77%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 77%,transparent);
}
.dt-orbit{opacity:.24;animation-duration:64s}
.dt-mist{animation-duration:13s;background:radial-gradient(ellipse at 15% 45%,#ad83ad2b,transparent 43%),radial-gradient(ellipse at 85% 65%,#bdc2eb24,transparent 42%)}
.hero::before{animation-duration:6s;background:radial-gradient(ellipse at 50% 35%,#c6a56829,transparent 62%),radial-gradient(ellipse at 50% 45%,#9679af3d,transparent 70%)}
.dt-light-veil{position:absolute;inset:0;pointer-events:none;background:conic-gradient(from 155deg at 50% 0%,transparent 0deg,#d6cef018 12deg,transparent 24deg,#f0ddb01a 36deg,transparent 50deg);transform-origin:50% 0;animation:dtVeil 12s ease-in-out infinite alternate}
.dt-mote{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#f0ddb0;box-shadow:0 0 8px 2px #c6a56866;opacity:0;animation:dtMote 9s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes dtVeil{from{opacity:.35;transform:rotate(-13deg) scale(1.05)}to{opacity:.85;transform:rotate(13deg) scale(1.12)}}
@keyframes dtMote{0%,100%{opacity:0;transform:translate3d(0,25px,0) scale(.6)}30%,65%{opacity:.7}90%{opacity:0;transform:translate3d(16px,-65px,0) scale(1.2)}}
@media(min-width:920px){.dt-title-series{font-size:33px}}
@media(prefers-reduced-motion:reduce){.dt-light-veil,.dt-mote{display:none}.dt-orbit,.dt-mist,.hero::before{animation:none}}
/* Bold celestial motion, confined to the top composition. */
.dt-orbit{opacity:.34;animation-duration:28s}
.dt-orbit-counter{top:12vh;width:min(98vw,670px);opacity:.23;animation-duration:38s;animation-direction:reverse}
.dt-light-veil{background:conic-gradient(from 145deg at 50% 0%,transparent 0deg,#d6cef036 13deg,transparent 26deg,#f0ddb034 39deg,transparent 57deg);animation-duration:7s;mix-blend-mode:screen}
.dt-mist{animation-duration:8s}
.dt-mote{width:4px;height:4px;box-shadow:0 0 10px 3px #c6a56866;animation-duration:6s}
.hero::before{animation-duration:4.8s;background:radial-gradient(ellipse at 50% 35%,#c6a56845,transparent 62%),radial-gradient(ellipse at 50% 45%,#9679af55,transparent 70%)}
.hero h1{animation:dtTitleLight 5.5s ease-in-out infinite alternate,dtTitleRadiance 7s ease-in-out infinite}
.dt-aurora{position:absolute;inset:5% -25% 30%;pointer-events:none;background:radial-gradient(ellipse at 25% 50%,#a385c533,transparent 52%),radial-gradient(ellipse at 72% 42%,#e3c58026,transparent 48%);mix-blend-mode:screen;animation:dtAurora 11s ease-in-out infinite alternate}
.dt-streak{position:absolute;left:-30%;top:var(--streak-top);width:105px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#f0ddb0);box-shadow:0 0 8px #f0ddb080;opacity:0;animation:dtStreak 11s ease-in-out infinite;animation-delay:var(--streak-delay)}
.dt-streak::after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-radius:50%;background:#f2ede5;box-shadow:0 0 9px #f0ddb0}
@keyframes dtAurora{from{transform:translate3d(-7%,2%,0) rotate(-12deg);opacity:.45}to{transform:translate3d(9%,-5%,0) rotate(14deg);opacity:1}}
@keyframes dtStreak{0%,58%,100%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}64%{opacity:.9}82%{opacity:0;transform:translate3d(135vw,100px,0) rotate(18deg)}}
@keyframes dtTitleRadiance{0%,100%{filter:drop-shadow(0 3px 12px #060a1c66)}50%{filter:drop-shadow(0 0 13px #c6a56888)}}
.dt-atmosphere.dt-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.dt-aurora,.dt-streak{display:none}.dt-orbit,.dt-mist,.hero h1,.hero::before{animation:none}}
/* Stable SVG centering on both desktop and mobile; no white wash. */
.dt-light-veil,.dt-aurora,.dt-arrival{display:none}
.dt-mist{background:radial-gradient(ellipse at 20% 45%,#49355033,transparent 60%);animation-duration:25s}
.hero::before{background:radial-gradient(ellipse at 50% 45%,#49355030,transparent 70%);animation-duration:16s}
.dt-orbit{transform-box:border-box;transform-origin:50% 50%;left:50%;top:clamp(270px,70vw,500px);width:min(130vw,850px);opacity:.23;animation:dtOrbitCentered 120s linear infinite}
.dt-orbit-counter{top:clamp(270px,70vw,500px);width:min(102vw,670px);opacity:.16;animation-duration:160s;animation-direction:reverse}
@keyframes dtOrbitCentered{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero h1{flex-direction:column;align-items:center;gap:2px;animation:dtTitleLight 14s ease-in-out infinite alternate}
.dt-title-main{font-size:clamp(38px,11vw,46px)}
.dt-title-series{font-size:clamp(25px,7.2vw,31px);letter-spacing:.12em;line-height:1.45}
.dt-mote{animation-duration:10s}
@media(min-width:920px){.hero h1{flex-direction:row;align-items:baseline;gap:20px}.dt-title-main{font-size:60px}.dt-title-series{font-size:40px}}
@media(prefers-reduced-motion:reduce){.dt-orbit,.dt-mist,.hero::before,.hero h1{animation:none}.dt-orbit{transform:translate(-50%,-50%)}}

.dt-streak{animation-duration:25s}
@keyframes dtStreak{0%,80%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}82%{opacity:.8}90%,100%{opacity:0;transform:translate3d(135vw,100px,0) rotate(18deg)}}
/* Both paintings share one frame and one feathered edge. */
body.hero2 .hero-art::before,body.hero2 .hero-art::after{
  aspect-ratio:2.5;background-size:100% auto;background-position:center 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 64%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 64%,transparent 100%);
}
.flow{margin-top:6px}
.hero{padding-bottom:2px}
.hero h1{filter:drop-shadow(0 2px 1px #080b1b) drop-shadow(0 5px 8px #050814b3)}
.hero-kicker,.hero-sub,.hero-free,.pick-head{ text-shadow:0 2px 2px #060916,0 4px 9px #06091699 }
.flow-group span{text-shadow:0 2px 1px #060916,0 3px 6px #060916aa}
.dt-streak{animation-duration:10s}
/* A short flight, then a quiet interval. */
@keyframes dtStreak{0%,65%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}70%{opacity:.8}88%,100%{opacity:0;transform:translate3d(135vw,100px,0) rotate(18deg)}}
/* Soft indigo side shading behind the upper-page content. */
.dt-atmosphere::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,9,23,.44) 0%,rgba(6,11,27,.17) 17%,transparent 37%,transparent 63%,rgba(6,11,27,.17) 83%,rgba(4,9,23,.44) 100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 73%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 73%,transparent)}
@media(min-width:920px){.dt-atmosphere::after{background:linear-gradient(90deg,rgba(4,9,23,.55),rgba(6,11,27,.22) 20%,transparent 39%,transparent 61%,rgba(6,11,27,.22) 80%,rgba(4,9,23,.55))}}

/* Slow zoom within the original framing, keeping the six faces visible. */
@keyframes sacredHeroDrift{from{transform:scale(.96)}to{transform:scale(1.025)}}
body.hero2 .hero-art::before{animation-duration:26s}
body.hero2 .hero-art::after{animation-duration:26s,24s}
@media(prefers-reduced-motion:reduce){body.hero2 .hero-art::before,body.hero2 .hero-art::after{animation:none;transform:none}}
/* Deep background, diffuse stars, balanced celestial rhythm. */
html{background-color:#0c1325;background-image:radial-gradient(ellipse at 88% 28%,#36264055,transparent 48%),linear-gradient(180deg,#0c1325,#15162a 48%,#0c1325)}
.sky{background:radial-gradient(ellipse at 50% -12%,#81729e1c,transparent 57%),radial-gradient(ellipse at 10% 65%,#36264033,transparent 60%)}
.hero-star{color:transparent!important;text-shadow:none!important;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#e3d5b86b,rgba(202,184,155,.18) 34%,transparent 72%);filter:blur(.7px);animation-name:dtSoftStar;animation-duration:5s}
@keyframes dtSoftStar{0%,100%{opacity:.12;transform:scale(.85)}50%{opacity:.48;transform:scale(1.12)}}
.dt-mote{background:radial-gradient(circle,#e3d5b8aa,transparent 75%);box-shadow:0 0 6px #c6a56833;filter:blur(.45px)}
.dt-orbit{opacity:.3;animation-duration:100s}
.dt-orbit-counter{opacity:.22;animation-duration:135s}
.flow-track{animation-duration:52.5s}
/* Feather the common frame, not each independently zooming image. */
body.hero2 .hero-art{height:auto;aspect-ratio:2.5;max-height:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 67%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 67%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
body.hero2 .hero-art::before,body.hero2 .hero-art::after{inset:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none;background-size:cover;background-position:center 40%}
body.hero2 .hero-art::after{filter:url(#council-color-tone) brightness(1.08) saturate(.98)}
@media(prefers-reduced-motion:reduce){.hero-star,.dt-orbit,.flow-track{animation:none}}
/* Let the six figures breathe; blend the pale room into the page. */
body.hero2 .hero-art{left:-16px;right:-16px}
body.hero2 .hero-art::after{filter:url(#council-color-tone) brightness(.94) saturate(.95)}
body.hero2 .hero-art::before,body.hero2 .hero-art::after{background-position:center 34%}
@keyframes sacredHeroDrift{from{transform:scale(1)}to{transform:scale(1.035)}}
.hero-lead{max-width:34em;margin:9px auto 0;font-size:13px;line-height:1.85;text-wrap:pretty;word-break:normal;overflow-wrap:normal}
.hero-lead .dt-lead-line{display:block}
.hero-lead .dt-phrase{display:inline-block}
@media(min-width:920px){body.hero2 .hero-art{left:calc(50% - 50vw);right:auto;width:100vw}.hero-lead{font-size:14px}}
/* Preserve the painting; only feather its outer edges. */
body.hero2 .hero-art{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 85%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 85%,transparent);
}
body.hero2 .hero-art::after{filter:url(#council-color-tone) brightness(1.07) saturate(1.02)}
.hero-star{color:rgba(230,212,171,.78)!important;text-shadow:0 0 6px rgba(212,191,150,.35)!important;background:none;filter:blur(.3px);animation:dtReadableStar 5.5s ease-in-out infinite}
@keyframes dtReadableStar{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.66;transform:scale(1.04)}}
.dt-streak{background:linear-gradient(90deg,transparent,rgba(218,196,153,.55));box-shadow:0 0 5px #c6a56833}
.dt-streak::after{background:#c6b28c;box-shadow:0 0 6px #c6a56855;width:3px;height:3px}
/* 5.4 seconds of travel instead of 1.8, still once per 10 seconds. */
@keyframes dtStreak{0%,20%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}30%{opacity:.48}74%,100%{opacity:0;transform:translate3d(135vw,100px,0) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.hero-star{animation:none;opacity:.4}}
/* A visible, slow push-in; keep the shared edge mask stationary. */
@keyframes sacredHeroDrift{from{transform:scale(1)}to{transform:scale(1.12)}}
body.hero2 .hero-art::before{animation-duration:12s;animation-timing-function:linear;transform-origin:50% 40%}
body.hero2 .hero-art::after{animation-duration:12s,24s;animation-timing-function:linear,ease-in-out;transform-origin:50% 40%}
@media(prefers-reduced-motion:reduce){body.hero2 .hero-art::before,body.hero2 .hero-art::after{animation:none;transform:none}}
/* Retain the pale watercolor detail now that the source paintings are cleaner. */
body.hero2 .hero-art::before{filter:url(#council-color-tone) brightness(1.04) saturate(1.01)}
body.hero2 .hero-art::after{filter:url(#council-color-tone) brightness(1.04) saturate(1.02)}