/* Orenthis / WorldsEndFriend — shared style */
:root {
  color-scheme: dark;
  --deep:#030714; --navy:#0a1733; --blue:#1f4f9e;
  --glow:#8fc3ff; --star:#eef5ff; --text:#c9dcff;
  --muted:#90a7ca; --line:rgba(151,189,242,.19);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; min-height:100svh;
  background:radial-gradient(ellipse at 50% 115%,#123a7a 0%,var(--navy) 40%,var(--deep) 85%);
  color:var(--text); font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; }
body.gated { overflow:hidden; }
[hidden] { display:none !important; }
button,input { font:inherit; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--glow); outline-offset:4px; }
#sky { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.vignette { position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom,rgba(1,4,14,.13),transparent 40%,rgba(0,1,9,.18)); }
#app,.subpage { position:relative; z-index:1; min-height:100vh; min-height:100svh; }
/* The opening retains the original title, composition, and small secret-word entrance. */
.gate-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; padding:1.5rem; text-align:center; background:transparent; transition:opacity .95s ease, transform .95s ease; }
.gate-screen.leaving { opacity:0; pointer-events:none; transform:scale(1.045); }
.gate-stage { display:flex; flex-direction:column; align-items:center; width:100%; }
.ornament { width:92px; height:25px; margin:0 auto 1.5rem; color:#c9d8ee; opacity:.75; }
.title { color:var(--star); font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; line-height:.94; letter-spacing:.13em; text-indent:.13em; text-shadow:0 0 16px rgba(195,216,245,.29),0 0 55px rgba(90,144,211,.22); animation:breathe 6s ease-in-out infinite; }
.gate-title { display:block; margin:0; padding:0; border:0; background:none; cursor:pointer; font-size:clamp(4rem,15vw,12.25rem); transition:transform .4s ease; }
.gate-title:hover { transform:scale(1.025); }
@keyframes breathe { 0%,100% { text-shadow:0 0 16px rgba(195,216,245,.27),0 0 54px rgba(90,144,211,.20) } 50% {text-shadow:0 0 22px rgba(195,216,245,.46),0 0 75px rgba(90,144,211,.30)} }
.credit { margin:.95rem 0 0; font-size:clamp(1rem,1.55vw,1.35rem); letter-spacing:.15em; color:#b5c9e8; }
.gate-box { max-height:0; opacity:0; overflow:hidden; margin-top:1.5rem; transition:max-height .9s ease,opacity .9s ease; }
.gate-box.open { max-height:250px; opacity:1; }
.gate-form { display:flex; gap:.65rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.gate-form input { width:min(280px,70vw); padding:.72rem 1.25rem; border:1px solid rgba(143,195,255,.35); border-radius:999px; background:rgba(10,23,51,.55); color:var(--star); text-align:center; letter-spacing:.08em; font-size:1.18rem; backdrop-filter:blur(4px); }
.gate-form input::placeholder { color:#99b1d6; font-style:italic; }
.gate-form input:focus { border-color:var(--glow); box-shadow:0 0 18px rgba(143,195,255,.2); outline:none; }
.gate-form button { border:1px solid rgba(143,195,255,.42); color:var(--glow); border-radius:999px; padding:.72rem 1.3rem; background:transparent; font-family:'Cinzel',serif; font-size:.81rem; letter-spacing:.12em; cursor:pointer; }
.gate-form button:hover { border-color:var(--glow); background:rgba(143,195,255,.1); }
.gate-msg { margin:.65rem 0 0; min-height:1.4em; color:var(--muted); font-style:italic; }
.shake { animation:shake .43s ease; }
@keyframes shake { 0%,100% { transform:translateX(0) } 20%,60% {transform:translateX(-7px)} 40%,80% {transform:translateX(7px)} }
/* Top navigation — one page per section, never one long landing-page scroll. */
.site-header { width:100%; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; padding:1.5rem clamp(1.2rem,4vw,3.8rem); position:relative; z-index:3; }
.brand { display:inline-flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--text); font:600 .72rem 'Cinzel',Georgia,serif; letter-spacing:.24em; white-space:nowrap; }
.brand .star-mark { width:13px; height:13px; fill:var(--star); opacity:.78; }
.site-nav { display:flex; justify-content:center; align-items:center; gap:clamp(.6rem,2vw,1.8rem); flex-wrap:wrap; }
.site-nav a { position:relative; display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; color:#aebfdc; font-family:'Cinzel',Georgia,serif; text-transform:uppercase; font-size:.69rem; letter-spacing:.14em; padding:1.18rem .06rem .22rem; white-space:nowrap; transition:color .22s,transform .22s; }
.site-nav a::before { content:''; width:10px; height:10px; top:0; left:calc(50% - 5px); position:absolute; clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%); background:#d1e5ff; filter:drop-shadow(0 0 5px rgba(188,224,255,.8)); opacity:.55; transition:opacity .25s,transform .25s; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:#f0f7ff; transform:translateY(-1px); }
.site-nav a:hover::before,.site-nav a[aria-current="page"]::before { opacity:1; transform:scale(1.25); }
.format-label { white-space:nowrap; color:#aeb9ce; text-transform:uppercase; letter-spacing:.18em; font:400 .67rem 'Cinzel',serif; border:1px solid var(--line); border-radius:999px; padding:.43rem .75rem; }
/* Centered home screen keeps original visual prominence. */
.home { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.home-center { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:420px; padding:2rem 1rem 5rem; }
.home-title { font-size:clamp(4rem,12vw,9.2rem); margin:0; }
.home-end { text-align:center; padding:1rem 1rem 1.25rem; }
.site-footer { font-size:.82rem; letter-spacing:.07em; color:#90a4c4; }
.home-end .footer-detail { color:#859cbe; font-size:.68rem; letter-spacing:.23em; text-transform:uppercase; font-family:'Cinzel',serif; margin:0 0 .6rem; }
/* Interior page layout */
.subpage { display:flex; flex-direction:column; }
.content { width:min(1120px,calc(100% - 3rem)); margin:0 auto; flex:1; padding:clamp(2.5rem,6vh,5rem) 0 5rem; }
.page-heading { text-align:center; margin-bottom:3.1rem; }
.page-heading .ornament { margin-bottom:.9rem; width:70px; height:20px; }
.page-kicker { margin:0 0 .65rem; font:400 .65rem 'Cinzel',serif; letter-spacing:.36em; color:#94b5e4; text-transform:uppercase; }
.page-heading h1 { color:#ecf5ff; font-size:clamp(3rem,7.5vw,5.5rem); font-weight:500; letter-spacing:.12em; line-height:1; margin:0; text-indent:.12em; text-shadow:0 0 26px rgba(144,187,249,.18); }
.page-intro { margin:.9rem auto 0; color:#a5bddf; max-width:55ch; font-size:1.14rem; line-height:1.5; text-align:center; }
.page-footer { margin-top:auto; padding:1.4rem 1rem; text-align:center; }
/* Reusable content elements */
.panel { border:1px solid var(--line); background:linear-gradient(160deg,rgba(27,47,92,.4),rgba(5,9,20,.48)); border-radius:5px; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
.character-card { padding:1rem; transition:transform .25s,border-color .25s; }
.character-card:hover { transform:translateY(-3px); border-color:rgba(191,227,255,.42); }
.portrait { width:100%; aspect-ratio:4/4.2; display:flex; align-items:center; justify-content:center; position:relative; border:1px dashed rgba(145,179,222,.31); border-radius:3px; overflow:hidden; background:radial-gradient(ellipse at 50% 28%,rgba(132,176,229,.14),transparent 58%),linear-gradient(180deg,rgba(18,42,79,.45),rgba(4,9,22,.76)); }
.portrait::before { content:'✦'; position:absolute; color:rgba(208,226,251,.4); font-size:2rem; }
.portrait > span { position:absolute; bottom:.85rem; font-family:'Cinzel',serif; font-size:.58rem; color:#91a7c9; letter-spacing:.17em; text-transform:uppercase; }
.portrait img,.art-tile img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; margin-top:1.1rem; }
.card-head h2 { font:500 1.55rem 'Cormorant Garamond',Georgia,serif; color:#ecf4ff; margin:0; line-height:1.1; }
.faction { color:#a2b1c9; text-transform:uppercase; font:400 .52rem 'Cinzel',Georgia,serif; letter-spacing:.08em; padding-top:.3rem; text-align:right; }
.faction.elk { color:#d5bf93; }.faction.wolf { color:#a8cbff; }
.role { color:#9db7dd; font:.68rem 'Cinzel',serif; letter-spacing:.085em; margin:.45rem 0 .7rem; }
.card-text { font-size:1.03rem; line-height:1.35; margin:0; color:#c5d3e8; }
.lore-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.lore-card { padding:1.6rem 1.6rem 1.65rem; min-height:168px; }
.lore-card .index { font:400 .61rem 'Cinzel',serif; color:#85a8d9; letter-spacing:.16em; }
.lore-card h2 { font-size:1.75rem; font-weight:500; letter-spacing:.045em; color:#e9f3ff; margin:.4rem 0 .55rem; }
.lore-card p { margin:0; line-height:1.45; color:#b8cce8; }
.music-list { display:grid; gap:1rem; max-width:830px; margin:auto; }
.track { display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding:1.4rem 1.6rem; }
.track h2 { font-size:1.55rem; font-weight:500; margin:0; color:#eaf3ff; }
.track p { margin:.35rem 0 0; color:#a3b9da; font-size:1rem; }
.track .track-mark { color:#9ec6f3; font:400 .63rem 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; }
.embed-hint { max-width:830px; margin:2rem auto 0; text-align:center; color:#9eb4d3; font-style:italic; font-size:1rem; }
.art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.art-tile { padding:.65rem; }
.art-frame { position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; border:1px dashed rgba(149,182,234,.24); border-radius:3px; background:linear-gradient(145deg,rgba(39,64,107,.3),rgba(4,10,23,.68)); }
.art-frame::before { content:'✧'; font-size:2.3rem; color:rgba(157,191,232,.48); }
.art-tile figcaption { padding:.8rem .5rem .35rem; color:#cdddf3; letter-spacing:.06em; font-size:1.14rem; }
.journal-list { width:min(760px,100%); margin:0 auto; }
.entry { padding:1.8rem 2rem; }
.entry time { font:400 .6rem 'Cinzel',serif; letter-spacing:.18em; color:#8fb9e5; text-transform:uppercase; }
.entry h2 { color:#edf4ff; font-weight:500; font-size:1.8rem; margin:.4rem 0 .6rem; }
.entry p { color:#bdcee6; line-height:1.5; margin:0; }
.back-link { display:table; text-decoration:none; margin:2.5rem auto 0; font:.68rem 'Cinzel',serif; letter-spacing:.17em; color:#bed8fb; text-transform:uppercase; border-bottom:1px solid rgba(173,204,247,.27); padding-bottom:.4rem; }
.back-link:hover { color:#fff; }
/* Screen sizes */
@media(max-width:1100px) { .site-header { flex-wrap:wrap; justify-content:center; gap:.8rem 1.4rem; }.site-nav { order:3; width:100%; }.card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.lore-grid { grid-template-columns:1fr; }.art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.content { width:min(100% - 2rem,1120px); }.site-header { padding:1.1rem 1rem; }.home-center { padding-bottom:3rem; }.site-nav a { font-size:.62rem; letter-spacing:.075em; } }
@media(max-width:480px) { .gate-title { font-size:clamp(3.15rem,13vw,5.7rem); letter-spacing:.07em; text-indent:.07em; }.home-title { font-size:clamp(3.3rem,13vw,5.7rem); letter-spacing:.07em; text-indent:.07em; }.site-nav { gap:.25rem 1rem; }.site-nav a { font-size:.6rem; }.card-grid,.art-grid { grid-template-columns:1fr; }.portrait { aspect-ratio:4/3; }.card-head h2 { font-size:1.7rem; }.content { padding-top:2rem; }.format-label { font-size:.58rem; }.brand { font-size:.63rem; }.gate-form input { width:min(280px,80vw); }.page-heading { margin-bottom:2rem; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }