.feature-codex{position:relative;isolation:isolate;overflow:hidden;padding:40px 0 58px;background:radial-gradient(ellipse at 75% 45%,#431b2225,transparent 70%)}
.feature-codex:before{content:'';position:absolute;inset:20% auto 0 -100px;width:350px;background:url('assets/filigree.svg') 0 0/100% auto no-repeat;opacity:.06;pointer-events:none;z-index:-1}
.codex-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:32px}
.codex-heading .eyebrow{margin-bottom:13px}
.codex-heading h2{font-size:clamp(30px,3vw,43px)}
.codex-heading>p{font-size:13px;line-height:1.8;max-width:290px;padding-bottom:7px}
.codex-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 0 13px;position:relative}
.codex-tabs button{position:relative;min-height:58px;padding:13px 22px;display:flex;align-items:center;gap:15px;text-align:left;font:500 15px/1.3 var(--serif);letter-spacing:.5px;color:#c7b295;border:1px solid #8b65424a;background:linear-gradient(105deg,#151014ed,#211117),url('assets/filigree.svg') left center/70px no-repeat;box-shadow:inset 0 0 0 3px #09070b,inset 0 0 0 4px #a485512b;transition:color .25s,border-color .35s,background-color .35s,box-shadow .35s;overflow:hidden}
.codex-tabs button:before{content:'';position:absolute;inset:4px;background:url('assets/filigree.svg') left top/58px no-repeat,url('assets/filigree.svg') right bottom/58px no-repeat;opacity:.25;pointer-events:none}
.codex-tabs button:after{content:'';position:absolute;left:8%;right:8%;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,#d49d68,transparent);transform:scaleX(0);transition:transform .5s var(--ease)}
.codex-tabs button:hover{color:#f3dac1;border-color:#a48259;box-shadow:inset 0 0 0 3px #09070b,inset 0 0 0 4px #a4855166,0 3px 20px #98273613}
.codex-tabs button[aria-selected=true]{color:#fff0d6;border-color:#a4715f;background:radial-gradient(ellipse at 50% 120%,#a4384b59,transparent 90%),linear-gradient(105deg,#381621,#571d2d);box-shadow:inset 0 0 0 3px #160a11,inset 0 0 0 4px #c18e5c77,0 0 20px #87172e1f}
.codex-tabs button[aria-selected=true]:after{transform:scaleX(1)}
.codex-tab-numeral{font:11px var(--serif);color:#aa715b;min-width:18px}
.codex-tabs button[aria-selected=true] .codex-tab-numeral{color:#e5b782}
.codex-tab-gem{width:5px;height:5px;background:#835b47;transform:rotate(45deg);margin-left:auto;box-shadow:0 0 0 3px #9e6e4521;transition:background .35s,box-shadow .35s}
.codex-tabs button[aria-selected=true] .codex-tab-gem{background:#e7b480;box-shadow:0 0 10px #e1a46660,0 0 0 3px #b37b4055}
.codex-book{padding:6px;border:1px solid #9b775449;background:linear-gradient(135deg,#49332229,transparent 25%,#30141f20);box-shadow:0 20px 45px #0003}
.codex-page{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.6fr);min-height:426px;position:relative;gap:0;background:linear-gradient(100deg,#110c11,#171017 75%,#1b1018)}
.codex-page[hidden]{display:none}
.codex-portrait{position:relative;margin:0;overflow:hidden;min-height:426px;border:1px solid #68443266;background:#160a10;isolation:isolate}
.codex-portrait>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:50% center;transition:transform 1.2s var(--ease)}
.codex-portrait:hover>img{transform:scale(1.025)}
.codex-portrait:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,#0c070ce8,transparent 42%);box-shadow:inset 0 0 45px #09060935}
.codex-photo-corner{position:absolute;width:90px;height:90px;z-index:2;background:url('assets/filigree.svg') center/contain no-repeat;opacity:.8;pointer-events:none}
.codex-photo-corner-tl{top:7px;left:7px}
.codex-photo-corner-br{bottom:7px;right:7px;transform:rotate(180deg)}
.codex-portrait figcaption{position:absolute;z-index:2;bottom:30px;left:28px;right:20px;display:flex;flex-direction:column;gap:5px}
.codex-portrait figcaption strong{font:500 15px/1.4 var(--serif);letter-spacing:1px;color:#edd6b7}
.codex-portrait figcaption span{font:8px/1.5 var(--sans);letter-spacing:1.5px;color:#b29278}
.codex-writing{padding:27px 32px 24px;position:relative}
.codex-writing:after{content:'';position:absolute;right:12px;top:12px;width:70px;height:70px;background:url('assets/filigree.svg') center/contain no-repeat;transform:rotate(90deg);opacity:.13;pointer-events:none}
.codex-kicker{font:8px/1.5 var(--sans);letter-spacing:2.3px;color:#b87666;margin-bottom:8px}
.codex-writing>h3{font:400 clamp(21px,2vw,27px)/1.35 var(--serif);color:#eee0cc;max-width:510px;padding-right:10px}
.codex-introduction{font-size:12px;line-height:1.85;max-width:640px;margin-top:12px;color:#b6a7a4}
.codex-entries{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:19px;margin-top:23px}
.codex-entries article{display:flex;align-items:flex-start;gap:10px;border-top:1px solid #8e69463c;padding-top:14px}
.codex-entry-index{font:10px/1.6 var(--serif);color:#9b6654;flex-shrink:0;margin-top:15px}
.codex-entries .codex-entry-category{font:7px/1.4 var(--sans);letter-spacing:1.4px;color:#b18169;margin-bottom:5px}
.codex-entries h4{font:400 15px/1.4 var(--serif);color:#e2c7a5;margin:0 0 6px}
.codex-entries p:not(.codex-entry-category){font-size:11px;line-height:1.8;color:#b1a3a1;margin:0}
.codex-margin-note{font:italic 16px/1.5 Fell,Georgia,serif;color:#ba9475;margin-top:20px}
.codex-postscript{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:17px;font:8px/1.6 var(--sans);letter-spacing:1.5px;color:#9e897a;text-align:center}
.codex-postscript>span{font-size:6px;color:#ad695a}
@media(min-width:1500px){.codex-page{min-height:430px}.codex-writing{padding:30px 36px}.codex-introduction{font-size:13px}.codex-entries p:not(.codex-entry-category){font-size:12px}}
@media(max-width:1000px){.codex-page{grid-template-columns:1fr 1.8fr}.codex-writing{padding:24px}.codex-entries{gap:16px}.codex-tabs button{padding:14px 17px;font-size:13px;gap:9px}.codex-portrait figcaption{left:20px}.codex-entries h4{font-size:14px}}
@media(max-width:760px){.feature-codex{padding:15px 0 45px}.codex-heading{display:block;margin-bottom:24px}.codex-heading h2{font-size:34px}.codex-heading>p{margin-top:19px;max-width:400px}.codex-tabs{gap:4px}.codex-tabs button{padding:13px 7px;min-height:62px;text-align:center;display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:0}.codex-tab-numeral{font-size:9px;min-width:0}.codex-tab-gem{display:none}.codex-tabs button:before{background-size:35px;opacity:.2}.codex-page{grid-template-columns:1fr}.codex-portrait{min-height:0;height:240px}.codex-portrait>img{object-position:50% 49%}.codex-portrait figcaption{bottom:22px}.codex-writing{padding:24px 19px}.codex-writing>h3{font-size:25px}.codex-introduction{font-size:12px}.codex-entries{column-gap:18px;row-gap:20px}.codex-entry-index{display:none}.codex-entries h4{font-size:14px}.codex-entries p:not(.codex-entry-category){font-size:11px}.codex-margin-note{font-size:16px}.codex-postscript{font-size:7px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.codex-tabs button,.codex-tabs button:after,.codex-tab-gem,.codex-portrait>img{transition:none}.codex-portrait:hover>img{transform:none}}