:root{--bg:#08080b;--ink:#d8d3d0;--mute:#89848a;--line:#99939c32;--red:#97575c;--gold:#aa8a6d;font-family:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#060608;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:1px solid #d6c3ac;outline-offset:3px}.shell{min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#381f2947,transparent 56%),linear-gradient(130deg,#0d1014,#08080c 62%,#070609)}.shell:before{content:'';pointer-events:none;position:absolute;inset:0;background:repeating-radial-gradient(circle at 60% 48%,transparent 0 150px,#95576412 151px 152px,transparent 153px 300px);opacity:.45}.top{height:70px;background:#070709c9;border-bottom:1px solid #b6abb51e;display:flex;align-items:center;padding:0 clamp(20px,3vw,65px);gap:clamp(20px,4vw,80px);z-index:10;position:relative}.brand{text-decoration:none;color:#d7d2d0;letter-spacing:.21em;font-size:18px;white-space:nowrap}.brand small{display:block;color:#918b91;letter-spacing:.28em;font-size:8px;margin-top:3px}.tabs{display:flex;gap:3px}.tabs button{background:transparent;color:#87838b;border:1px solid transparent;padding:12px clamp(9px,1.5vw,25px);font-size:15px;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%)}.tabs button:hover{color:#eee9e7}.tabs button.active{background:linear-gradient(#e2dfe0,#a9a6aa);color:#171519;box-shadow:0 0 20px #fff2}.menu{display:none;background:none;border:1px solid #ffffff30;color:#ddd;padding:8px 13px}main{position:relative;flex:1;display:grid;min-height:640px}.screen{grid-area:1/1;display:none;position:relative;min-height:640px}.screen.active{display:block}.home{background:radial-gradient(ellipse at 50% 36%,#2c262f9c,transparent 54%),linear-gradient(90deg,#090b0e,#1c141b,#07080b)}.hero-mark{position:absolute;inset:9% 25%;border:1px solid #b79d8810;border-radius:50%;display:grid;place-items:center;font-size:min(34vw,360px);color:#b0937710}.hero-content{position:relative;height:100%;min-height:640px;display:flex;align-items:center;justify-content:center;flex-direction:column}.eyebrow{letter-spacing:.32em;text-transform:uppercase;color:#a39891;font-size:11px}.hero-content h1{font-weight:normal;letter-spacing:.22em;font-size:clamp(60px,12vw,160px);margin:25px 0 0;text-shadow:0 12px 35px #000b;color:#d4d1ce}.ornament{margin:4px 0 45px;color:#b39a75}.enter{background:transparent;border:1px solid #d7c8b947;color:#e0d6cb;padding:15px 34px;letter-spacing:.1em}.enter:hover{background:#ffffff13}.enter span{margin-left:30px}.codex{isolation:isolate}.codex-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 38%,#48232965,transparent 50%),linear-gradient(90deg,#090a0d,#171118,#0a0a0d)}.codex-bg:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 160px 70px #0009;pointer-events:none}.codex.active{display:grid;grid-template-columns:minmax(220px,25%) minmax(270px,37%) minmax(300px,38%);gap:clamp(10px,2vw,32px);padding:7vh clamp(20px,4vw,72px) 5vh;align-items:center}.archive-nav,.art-stage,.entry-panel{position:relative;min-width:0}.archive-nav{align-self:start;padding-top:16px}.archive-nav h2{font-size:31px;font-style:italic;font-weight:400;margin:0 0 24px}.search{display:flex;gap:9px;border:1px solid var(--line);color:#b7aab0;padding:9px 12px;margin-bottom:15px}.search input{background:none;border:none;outline:0;color:var(--ink);width:100%;min-width:0}.group-head{border:0;border-bottom:1px solid var(--line);display:block;width:100%;background:transparent;color:#aaa6ab;padding:13px 6px;text-align:left;font-size:16px}.group-head span{display:inline-block;width:22px}.group-entries{padding:5px 0}.group-entries[hidden]{display:none}.entry-button{display:block;width:100%;border:1px solid transparent;text-align:left;background:transparent;color:#aaa4a8;padding:10px 11px 10px 29px}.entry-button:before{content:'◇';position:absolute;margin-left:-20px;color:#b36e70}.entry-button.active,.entry-button:hover{border-color:#d9c9ce56;background:#ffffff0b;color:#eee}.art-stage{height:min(64vh,580px);perspective:800px;display:grid;place-items:center}.book{width:100%;max-width:530px;height:65%;min-height:300px;display:flex;background:#1b1515;border:9px solid #241c1c;transform:rotate(-5deg) rotateY(-7deg);box-shadow:5px 28px 50px #000a;position:relative}.book:after{content:'';position:absolute;left:48%;height:100%;width:4%;background:linear-gradient(90deg,#0006,#d5c0a238,#0008)}.page-one,.page-two{width:50%;background:linear-gradient(115deg,#958b7c,#bcad92 45%,#928575);box-shadow:inset 0 0 50px #2e231f85;padding:14px;color:#443a37;display:flex;flex-direction:column;justify-content:space-around}.inkmark{font-size:100px;text-align:center;color:#423b3899}.portrait-frame{border:1px solid #5b514c77;background:#7c7166a0;text-align:center;padding:40px 4px;font-size:75px}.inklines{width:78%;height:65px;margin:auto;opacity:.34;background:repeating-linear-gradient(0deg,#534740 0 1px,transparent 1px 12px)}.entry-panel{border:1px solid #b9adb444;background:#09090dd6;min-height:470px;max-height:70vh;overflow:auto;padding:45px clamp(20px,2.6vw,50px);box-shadow:0 0 55px #0006}.panel-top{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#a08c8b}.entry-panel h2{font-weight:400;font-style:italic;font-size:clamp(30px,3vw,43px);margin:16px 0 23px}.entry-content{color:#beb7b8;font-size:clamp(16px,1.25vw,19px);line-height:1.7}.entry-content p{margin:0 0 20px}.secondary{background:radial-gradient(circle at 70% 40%,#40212744,transparent 55%),#090a0d}.secondary-inner{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;flex-direction:column}.secondary h2{font-size:clamp(48px,7vw,95px);font-weight:400;margin:18px}.thin-ornament{font-size:33px;color:#8e7d6d}footer{position:relative;min-height:45px;border-top:1px solid #ffffff19;display:flex;align-items:center;justify-content:center;gap:15px;color:#898285;font-size:10px;letter-spacing:.24em}.footer-star{color:#b29c82}@media(max-width:1050px){.codex.active{grid-template-columns:40% 60%;align-items:start}.art-stage{grid-column:1/-1;grid-row:2;height:400px}.entry-panel{min-height:400px}.top{gap:16px}.tabs button{padding:12px 10px;font-size:13px}}@media(max-width:690px){.top{height:64px;justify-content:space-between}.menu{display:block}.tabs{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:#08080c;border-bottom:1px solid #fff2;padding:8px 15px}.tabs.open{display:flex}.tabs button{clip-path:none;text-align:left;padding:14px}.codex.active{display:flex;flex-direction:column;padding:25px 20px}.archive-nav,.entry-panel,.art-stage{width:100%}.art-stage{order:3;height:320px}.book{height:240px;min-height:0}.entry-panel{min-height:240px}.screen,.hero-content,.secondary-inner{min-height:calc(100dvh - 109px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Concept 10 artwork layer: real image is placed between the atmospheric background and the readable UI.
   The CSS-rendered book remains a fallback until the artwork asset is available. */
.art-stage{isolation:isolate}
.art-stage::before{content:"";position:absolute;inset:-9% -14%;z-index:1;pointer-events:none;background:url("./assets/veloria-codex-book.webp") center center/contain no-repeat;opacity:0;filter:drop-shadow(0 30px 22px #0009);transition:opacity .3s}
.art-stage.has-book-art::before{opacity:1}
.art-stage.has-book-art .book{visibility:hidden}
.art-stage .book{z-index:0}
@media(max-width:690px){.art-stage::before{inset:-12% -4%}}

/* Concept 10 restoration: illustrated art layer and fine gilded panel ornaments. */
.art-stage{background:url("./assets/codex-journal.svg") center center/contain no-repeat;filter:drop-shadow(0 20px 32px #0009)}
.art-stage .book{opacity:0;visibility:hidden}
.codex-bg{background:radial-gradient(ellipse at 60% 42%,rgba(96,35,48,.35),transparent 46%),radial-gradient(circle at 32% 81%,rgba(71,38,41,.2),transparent 33%),repeating-radial-gradient(circle at 58% 49%,transparent 0 152px,rgba(151,70,78,.075) 153px 154px,transparent 155px 300px),linear-gradient(90deg,#07080b,#151017 59%,#09090b)}
.entry-panel{background:linear-gradient(135deg,rgba(17,16,20,.97),rgba(7,8,11,.93));border:1px solid rgba(160,139,117,.34);box-shadow:0 0 0 6px rgba(6,6,9,.4),inset 0 0 0 6px rgba(189,158,128,.035),inset 0 0 0 7px rgba(175,147,124,.22),0 24px 65px #000a;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.entry-panel:before,.entry-panel:after{content:"";position:absolute;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(168,140,113,.55) 12%,rgba(168,140,113,.2) 88%,transparent);pointer-events:none}
.entry-panel:before{top:16px}.entry-panel:after{bottom:16px}
.entry-panel .panel-top{top:9px;font-size:18px;color:#c4a387}
.entry-panel h2{letter-spacing:.014em}
.entry-content{color:#c2b8b7}
@media(max-width:690px){.art-stage{min-height:280px}}

/* Concept 10: refined manuscript framing */
.entry-panel{clip-path:none;border:1px solid #a58d7665;box-shadow:0 0 0 5px #050508a8,inset 0 0 0 7px #08080a,inset 0 0 0 8px #ab90786d,0 30px 65px #000b;padding:60px 42px;min-height:540px}
.entry-panel:before,.entry-panel:after{left:25px;right:25px;background:linear-gradient(90deg,transparent,#c5a38480,transparent)}
.entry-panel h2{font-size:clamp(35px,3vw,49px);font-style:italic;font-weight:400}
.art-stage{background-size:110% auto;min-height:530px;filter:drop-shadow(0 30px 35px #000c)}

.entry-panel{background:radial-gradient(ellipse at 28% 16%,#42303b24,transparent 52%),linear-gradient(145deg,#101015ee,#08080bed)}
.entry-panel .panel-top{font-size:25px;top:9px;color:#c5aa8d}
.entry-panel .eyebrow{letter-spacing:.35em;color:#bda991}
.entry-content{font-size:clamp(17px,1.28vw,20px);color:#c0b9b9;line-height:1.74}
.codex-bg{background:radial-gradient(ellipse at 62% 38%,#51263866,transparent 50%),linear-gradient(100deg,#09090d,#181119 56%,#08090c)}

.entry-panel{outline:1px solid #85726355;outline-offset:-15px}
.entry-panel:before{top:27px;left:38px;right:38px}
.entry-panel:after{bottom:27px;left:38px;right:38px}
.entry-panel h2:after{content:"";display:block;height:1px;margin-top:19px;background:linear-gradient(90deg,#b49a7a88,#b49a7a22,transparent)}
.art-stage:before{content:"";position:absolute;inset:4% 7%;border-radius:50%;background:radial-gradient(circle,#ae7f7250,transparent 65%);filter:blur(45px);pointer-events:none}
@media(max-width:690px){.entry-panel{padding:45px 27px;min-height:310px}.art-stage{background-size:contain;min-height:300px}}
.art-stage:after{content:"";position:absolute;left:59%;top:24%;width:26%;height:40%;background:url("./assets/etched-portrait.svg") center/cover no-repeat;transform:rotate(-5deg);border:4px solid #655644;filter:sepia(.2) brightness(.8);pointer-events:none}