
/* ELENOA PORTAL 2026 — visual home only. Other 8 pages keep existing design. */
.showcase-home{--gold2:#d3b476;--paper:#fbf9f2;--royal:#06192b;background:var(--paper);overflow:hidden}
.showcase-home :where(h1,h2,h3,p){margin-top:0}
.showcase-home a:focus-visible{outline:3px solid #dbbb70;outline-offset:3px}
.showcase-hero{height:535px;position:relative;isolation:isolate;background:#9cc7df;color:#102c4a}
.showcase-bg,.showcase-figure,.showcase-aqua,.showcase-haze{position:absolute;inset:0;pointer-events:none}
.showcase-bg{z-index:-4;background:url('mystics-aqua-corona-concept.webp') 50% 45%/cover no-repeat;filter:saturate(1.04) contrast(1.02)}
.showcase-figure{z-index:-2;inset:71px auto 0 0;width:min(33vw,490px);background:url('hero-visitor-concept.webp') 40% 50% / cover no-repeat;mask-image:linear-gradient(90deg,#000 0 66%,transparent 100%)}
.showcase-aqua{display:none}
.showcase-haze{z-index:-1;background:linear-gradient(90deg,#0820343d 0%,#e0f5e71e 26%,#eff9f373 37%,#eff9f359 54%,#d9edf100 70%),linear-gradient(0deg,#05192baf 0%,transparent 20%,transparent 86%,#00192c1e 100%)}
.showcase-heading{position:absolute;top:119px;left:26%;width:44%;text-align:center;color:#0b2645;text-shadow:0 0 18px #e6f9f6,0 2px 1px #ffffffb0;isolation:isolate}
.showcase-heading:before{content:"";position:absolute;inset:-29px -26px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#f4fcf1c7 0%,#eff7efe8 24%,#eff8f181 44%,transparent 76%)}
.showcase-heading h1{margin:0;white-space:nowrap;font:600 clamp(39px,4.7vw,70px)/1.25 var(--serif);letter-spacing:.15em}
.showcase-roman{margin:7px 0 4px;font:12px/1.4 Georgia,serif;letter-spacing:.36em}
.showcase-rule{display:block;font:16px Georgia,serif;color:#9e7951;letter-spacing:.1em;margin:4px auto 5px}
.showcase-rule:before,.showcase-rule:after{content:"";display:inline-block;width:63px;height:1px;background:#aa976d;vertical-align:middle;margin:0 13px 5px}
.showcase-tagline{margin:2px 0 13px;font:500 clamp(17px,1.7vw,23px) var(--serif);letter-spacing:.13em}
.showcase-intro{font:500 11px/1.95 var(--serif);letter-spacing:.05em}
.showcase-vertical{position:absolute;top:112px;right:4%;writing-mode:vertical-rl;font:500 14px/1.7 var(--serif);letter-spacing:.22em;color:#102b46;text-shadow:0 1px 14px #fff}
.showcase-locality{position:absolute;right:38px;bottom:110px;font:500 11px var(--serif);color:#fff;text-align:right;letter-spacing:.11em;text-shadow:0 2px 8px #001}.showcase-locality small{display:block;font:10px Georgia,serif;letter-spacing:.17em;margin-top:6px}
.showcase-nav-wrap{position:absolute;left:0;right:0;bottom:-23px;z-index:4;padding:0 clamp(18px,3.8vw,64px)}
.showcase-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;width:100%;max-width:1680px;margin:auto}
.showcase-nav-tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:92px;padding:17px 22px 15px 45%;border:1px solid #d9bd86;color:#fff5eb;background-color:#091e30;overflow:hidden;box-shadow:0 9px 21px #06122075;transition:transform .18s,border-color .18s}
.showcase-nav-tile:before{content:"";position:absolute;inset:0;z-index:0;opacity:.8;background:linear-gradient(90deg,#0a233d0f 0%,#07182e93 48%,#071426ff 100%),var(--tile-img) 30% center/cover no-repeat}
.showcase-nav-tile:after{content:"";position:absolute;inset:5px;border:1px solid #c4a56855;pointer-events:none}
.showcase-nav-tile:hover{transform:translateY(-4px);border-color:#ffe0a0}
.showcase-nav-tile>span{position:relative;z-index:1}
.showcase-nav-tile strong{display:block;font:500 clamp(15px,1.25vw,20px) var(--serif);letter-spacing:.1em;white-space:nowrap}
.showcase-nav-tile small{display:block;margin-top:4px;font:10px Georgia,serif;letter-spacing:.23em;color:#e5c288}
.showcase-nav-arrow{font:30px Georgia,serif;color:#f6dba8;margin-left:5px}
.tile-story{--tile-img:url('nav-concept-story.webp')}.tile-world{--tile-img:url('nav-concept-world.webp')}.tile-characters{--tile-img:url('nav-concept-characters.webp')}.tile-nations{--tile-img:url('nav-concept-nations.webp')}
.showcase-desk{padding:62px clamp(23px,3.8vw,64px) 32px;background:linear-gradient(110deg,#fdfbf7,#f8f5ee 60%,#fdfaf4);position:relative}
.showcase-desk:before{content:"";inset:0;position:absolute;opacity:.35;pointer-events:none;background-image:radial-gradient(#96815a27 .7px,transparent .7px);background-size:7px 7px}
.showcase-desk-grid{position:relative;max-width:1680px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr .85fr;gap:23px}
.desk-col{min-width:0}.desk-col+.desk-col{border-left:1px solid #d5ccc0;padding-left:22px}
.desk-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}
.desk-kicker{font:10px Georgia,serif;letter-spacing:.25em;color:#926b3e;margin:0 0 6px}
.desk-title h2{font:500 clamp(16px,1.45vw,22px)/1.3 var(--serif);letter-spacing:.09em;margin:0;color:#132d46}
.desk-more{color:#1a3753;white-space:nowrap;font:11px var(--serif);padding-bottom:3px;border-bottom:1px solid #b9ab99}
.desk-more span{font-size:17px}.desk-more:hover{color:#8d6539}
.desk-caption{font:10px var(--serif);color:#637180;margin:4px 0 12px}
.showcase-chapter-card{height:165px;display:flex;border:1px solid #d8d0c1;background:#fffdf9;overflow:hidden;box-shadow:0 6px 15px #23323b13}
.showcase-chapter-card .chapter-media{width:41%;background:linear-gradient(0deg,#082c4324,transparent 80%),url('mystics-aqua-corona-concept.webp') 73% 26%/cover no-repeat}
.showcase-chapter-card .chapter-media .episode-roman,.showcase-chapter-card .chapter-media .episode-caption,.showcase-chapter-card .chapter-media .ornament{display:none}
.showcase-chapter-card .chapter-copy{padding:14px 15px;gap:4px;align-items:flex-start;justify-content:center;overflow:hidden}
.showcase-chapter-card .chapter-copy .pill{font:10px var(--serif);color:#6e512b;background:#e8d2ac;padding:4px 8px;border:0}
.showcase-chapter-card .chapter-copy h3{font:500 clamp(15px,1.25vw,20px) var(--serif);letter-spacing:.03em;margin:3px 0}
.showcase-chapter-card .chapter-date{color:#626e79;font:11px Georgia,serif;margin:0}
.showcase-chapter-card .chapter-teaser{font:11px/1.7 var(--serif);color:#4e6272;max-height:39px;overflow:hidden;margin:0}
.showcase-chapter-card .card-action{font:10px var(--serif);border-color:#b6a17e;color:#183a57;margin-top:3px}
.showcase-portraits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:15px}
.showcase-person{text-align:center;min-width:0;border-right:1px solid #d8cbbf;padding-right:3px}
.showcase-person:last-child{border-right:0}
.showcase-person-medallion{display:block;position:relative;aspect-ratio:1/1.1;max-height:139px;width:100%;background-position:center;background-size:cover;background-repeat:no-repeat}
.showcase-person-medallion:after{content:"";position:absolute;inset:5% 11% 17%;border-radius:50%;box-shadow:0 0 0 1px #9871482c;pointer-events:none}
.showcase-person-medallion.rachel{background-image:url('concept-icon-rachel.webp')}
.showcase-person-medallion.clarice{background-image:url('concept-icon-clarice.webp')}
.showcase-person-medallion.eleanor{background-image:url('concept-icon-eleanor.webp')}
.showcase-person-medallion.roderick{background:radial-gradient(circle at center,#163454 0 48%,#d2bb83 49% 50%,#152c40 52% 64%,transparent 65%);}
.showcase-person-medallion.roderick:before{content:"⚓";position:absolute;top:22%;left:0;right:0;font:58px Georgia,serif;color:#e0bb79;text-shadow:0 1px 10px #092234}
.showcase-person-fallback{display:none}
.showcase-person strong{display:block;font:500 13px var(--serif);color:#17364e;white-space:nowrap;letter-spacing:.05em}
.showcase-person small{display:block;font:9px/1.7 var(--serif);color:#596676;white-space:normal}
.showcase-map{display:block;height:166px;margin-top:15px;background:url('world-map-placeholder.webp') center/cover;border:1px solid #bda780;box-shadow:0 2px 12px #1e232b20;position:relative;overflow:hidden}
.showcase-map:before{content:"";position:absolute;inset:5px;border:1px solid #8e744e99}
.map-paper-note{position:absolute;right:10px;bottom:9px;display:flex;flex-direction:column;align-items:flex-end;padding:6px 10px;background:#f5eacfda;color:#354e57;border:1px solid #a38b62}
.map-paper-note strong{font:14px Georgia,serif;letter-spacing:.18em}.map-paper-note small{font:10px var(--serif);letter-spacing:.05em}
.showcase-news{background:linear-gradient(90deg,#051728,#0b233b 61%,#071728);color:#f8f5ef;border-top:1px solid #b8a074;padding:29px clamp(23px,3.8vw,64px) 30px;position:relative}
.showcase-news:before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.38;background:linear-gradient(90deg,#041728f0,#05172a8a 55%,#05192a8a),url('mystics-concept.webp') 65% 63%/cover}
.showcase-news-inner{position:relative;max-width:1680px;margin:auto;display:grid;grid-template-columns:210px minmax(350px,1.15fr) minmax(280px,.9fr);gap:23px;align-items:center}
.showcase-news-label{align-self:center;border-right:1px solid #c3a8787c;padding-right:20px;min-height:109px}
.showcase-news-label p{font:10px Georgia,serif;letter-spacing:.35em;color:#dbc28b;margin:0 0 6px}
.showcase-news-label h2{font:500 20px var(--serif);letter-spacing:.15em;margin-bottom:8px}
.showcase-news-label a{font:11px var(--serif);color:#e3c790}.showcase-news-label a:hover{text-decoration:underline}
.showcase-news-list .news-line{display:grid;grid-template-columns:82px 40px 1fr 20px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #ffffff24;min-height:35px}
.showcase-news-list .news-line time{font:10px Georgia,serif;color:#c3cbd3}
.showcase-news-list .news-type{font:9px var(--serif);color:#dbbe80;border:1px solid #ba9b63;padding:2px 3px;text-align:center}
.showcase-news-list .news-description{font:11px/1.5 var(--serif);color:#e8eaed}
.showcase-news-list .news-arrow{font:17px Georgia,serif;color:#d9bc7b}
.showcase-news-quote{border-left:1px solid #c0a4776a;padding:11px 0 7px 26px;text-align:center;background:radial-gradient(circle at 55% 30%,#1b425639,transparent 78%)}
.showcase-news-quote p{font:500 14px/2 var(--serif);letter-spacing:.1em;margin:0 0 7px}
.showcase-news-quote small{font:9px Georgia,serif;letter-spacing:.28em;color:#bfae84}
.showcase-epilogue{background:#f4f1eb;padding:50px 0}
.epilogue-layout{display:grid;grid-template-columns:.93fr 1.07fr;gap:38px;align-items:center}.epilogue-text h2{font:500 29px var(--serif);margin-bottom:16px}.epilogue-text>p:not(.desk-kicker){font:13px/2.1 var(--serif);color:#44596a}.epilogue-text>a{display:inline-block;border-bottom:1px solid #ad8959;font:14px var(--serif);padding:6px 0}
.epilogue-image{height:250px;background:url('mystics-aqua-corona-concept.webp') center 55%/cover;border:7px solid #fff;box-shadow:0 6px 18px #23354226}
.showcase-concept-note{background:#f4f1eb;margin:0;text-align:center;padding:0 20px 19px;font:10px/1.7 var(--serif);color:#5b7180}
/* homepage-specific header, to stay close to approved luxurious navigation */
body:has(.showcase-home) .site-header{height:73px;background:linear-gradient(90deg,#06192aeF,#0b2137f5 65%,#112943ec)}
body:has(.showcase-home) .header-inner{width:calc(100% - clamp(32px,5.2vw,92px))}
body:has(.showcase-home) .logo{min-width:302px}
body:has(.showcase-home) .logo-symbol{width:50px;height:50px}
body:has(.showcase-home) .logo-text strong{font-size:24px}
body:has(.showcase-home) .nav-items>a{min-width:80px}
body:has(.showcase-home) .nav-items>a.active:after{background:#dfbf82;bottom:2px}
@media(max-width:1280px){
 .showcase-nav-tile{padding-left:36%;padding-right:15px}.showcase-desk-grid{grid-template-columns:1.08fr 1fr .78fr;gap:16px}.desk-col+.desk-col{padding-left:15px}
 .showcase-person strong{font-size:11px}.showcase-news-inner{grid-template-columns:150px minmax(330px,1.1fr) .7fr;gap:15px}
}
@media(max-width:1020px){
 .showcase-hero{height:576px}.showcase-heading{left:30%;width:56%;top:135px}.showcase-heading h1{font-size:47px}
 .showcase-nav-tile{padding-left:27%;gap:5px}.showcase-nav-tile strong{font-size:15px}
 .showcase-desk-grid{grid-template-columns:1fr 1fr}.desk-map{grid-column:1/-1;border:0!important;padding-left:0!important;border-top:1px solid #d4c9b4;padding-top:20px}
 .showcase-map{height:160px}.showcase-news-inner{grid-template-columns:150px 1fr}.showcase-news-quote{grid-column:1/-1;border-left:0;border-top:1px solid #917d5a69;padding-top:18px}
}
@media(max-width:680px){
 .showcase-hero{height:726px}.showcase-bg{background-position:62% 10%;background-size:auto 100%}
 .showcase-figure{inset:75px auto auto -46px;width:66vw;height:355px;opacity:.53}
 .showcase-aqua{display:block;inset:120px -22px auto auto;width:215px;height:195px;background:url('aqua-corona-mobile-concept.webp') center/contain no-repeat;z-index:-1;opacity:.82}
 .showcase-haze{background:linear-gradient(180deg,#f6fbf385 13%,#f4f9eee4 32%,#ecf7ef65 55%,#061a2e7d 80%,#06192bd9 100%)}
 .showcase-heading{left:15px;right:15px;width:auto;top:150px}.showcase-heading:before{inset:-15px -10px;background:radial-gradient(ellipse,#f2faf0dc 0%,#f8fff198 46%,transparent 78%)}
 .showcase-heading h1{font-size:clamp(33px,9vw,44px);letter-spacing:.1em}.showcase-roman{font-size:9px;letter-spacing:.25em}.showcase-tagline{font-size:18px}.showcase-intro{font-size:10px}
 .showcase-vertical{font-size:11px;right:7px;top:104px;letter-spacing:.12em}.showcase-locality{font-size:9px;bottom:270px;right:16px}.showcase-locality small{font-size:8px}
 .showcase-nav-wrap{padding:0 15px;bottom:16px}.showcase-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .showcase-nav-tile{min-height:85px;padding:12px 14px 10px 36%}.showcase-nav-tile strong{font-size:15px}.showcase-nav-tile small{font-size:9px}.showcase-nav-arrow{font-size:25px}
 .showcase-desk{padding:35px 19px 28px}.showcase-desk-grid{display:block}.desk-col+.desk-col{border-left:0;border-top:1px solid #d0c5b1;padding:25px 0 0;margin-top:26px}
 .showcase-chapter-card{height:164px}.showcase-portraits{gap:8px;margin-top:10px}.showcase-person-medallion{max-height:165px}.showcase-person strong{font-size:12px}
 .showcase-news{padding:24px 18px}.showcase-news-inner{display:block}.showcase-news-label{min-height:0;border-right:0;border-bottom:1px solid #d1b58a66;padding-bottom:11px;margin-bottom:10px}
 .showcase-news-label h2{font-size:19px;display:inline;margin-right:16px}.showcase-news-label a{display:inline}
 .showcase-news-quote{margin-top:24px}.showcase-news-list .news-line{grid-template-columns:74px 34px minmax(0,1fr) 14px;gap:4px}.showcase-news-list .news-description{font-size:10px}
 .epilogue-layout{display:block}.epilogue-image{height:225px;margin-top:25px}.epilogue-text h2{font-size:22px}.showcase-epilogue{padding:35px 0}
 body:has(.showcase-home) .site-header{height:72px}body:has(.showcase-home) .logo{min-width:0}
}
@media(max-width:380px){.showcase-nav-tile{padding-left:31%;padding-right:8px}.showcase-nav-tile strong{font-size:13px}.showcase-person strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.showcase-nav-tile{transition:none}}
/* Final pass: keep tiles over the ivory information panel; reveal the Corona above the palace. */
.showcase-hero{z-index:3}
.showcase-bg{background-position:center top;background-size:100% auto}
.showcase-desk{z-index:1}
@media(max-width:680px){
  .showcase-bg{background-size:auto 100%;background-position:60% top}
}

/* 連載予定表の自動表示：トップの小さな補助枠（2026-10-24） */
.showcase-next-release{display:flex;align-items:center;flex-wrap:wrap;gap:7px;border-top:1px solid #dac9ac;margin-top:10px;padding-top:9px;color:#27415a;font:11px/1.65 var(--serif)}
.showcase-next-release .showcase-next-label{background:#15384e;color:#ead6ae;padding:1px 6px;font:10px/1.8 var(--serif)}
.showcase-next-release strong{font-weight:600;color:#193147}
.showcase-next-release time{color:#7c6343}
.showcase-schedule-disclaimer{font:9px/1.5 var(--serif);color:#738391;margin:6px 0 0}
@media(max-width:680px){.showcase-next-release{gap:5px;font-size:10px}.showcase-schedule-disclaimer{font-size:9px}}
