/* ERYNDAI Showcase — gate in the house colours, the book in its own world. Works fully offline. */
@font-face{font-family:Cormorant;src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:Cormorant;src:url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:block}

:root{
  /* ERYNDAI */
  --navy:#111f32;--paper:#f3efe5;--paper-deep:#e8e0cf;--gold:#ccad73;--ink:#1a2837;--line:rgba(160,132,83,.32);
  /* the book */
  --night:#15152f;--indigo:#222245;--indigo-2:#2c2c58;--bgold:#e0b55c;--bgold-deep:#b8892f;--sand:#ecd2ae;--sand-2:#d9b383;--teal:#1a7887;--teal-deep:#0f5564;--pearl:#f6f1e6;--mars:#d8623a;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--navy);color:var(--paper);font-family:Cormorant,Georgia,serif;font-weight:500;font-synthesis:none;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
section{position:fixed;inset:0}

/* ═════════════ GATE ═════════════ */
#gate{background:radial-gradient(120% 90% at 72% 46%,#1b2e48 0%,#111f32 46%,#0b1624 100%);display:flex;flex-direction:column;transition:opacity 1.1s var(--ease),transform 1.4s var(--ease),visibility 0s linear 1.4s;z-index:3}
body:not(.at-gate) #gate{opacity:0;transform:scale(1.06);visibility:hidden;pointer-events:none}
body.at-gate #gate{transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.g-top,.g-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:clamp(20px,3.4vh,40px) clamp(24px,5vw,84px)}
.wordmark{font-size:19px;letter-spacing:.62em;color:var(--paper)}
.g-top-right,.eyebrow{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold)}
.g-foot{font-style:italic;font-size:17px;color:rgba(243,239,229,.55);border-top:1px solid var(--line);margin:0 clamp(24px,5vw,84px);padding-left:0;padding-right:0}
.g-main{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;gap:clamp(16px,4vw,72px);padding:0 clamp(24px,5vw,84px);max-width:1560px;width:100%;margin:0 auto}
.g-copy>*{opacity:0;transform:translateY(18px);animation:rise 1.1s var(--ease) forwards}
.g-copy>*:nth-child(1){animation-delay:.15s}.g-copy>*:nth-child(2){animation-delay:.25s}.g-copy>*:nth-child(3){animation-delay:.38s}.g-copy>*:nth-child(4){animation-delay:.5s}.g-copy>*:nth-child(5){animation-delay:.62s}.g-copy>*:nth-child(6){animation-delay:.76s}.g-copy>*:nth-child(7){animation-delay:.9s}
@keyframes rise{to{opacity:1;transform:none}}
.eyebrow{margin-bottom:clamp(14px,2.4vh,26px);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
#g-title{font-weight:500;font-size:clamp(46px,min(6.3vw,10.4vh),108px);line-height:.98;letter-spacing:-.012em;margin:0;color:var(--paper)}
.g-sub{font-style:italic;font-size:clamp(24px,min(2.7vw,4.6vh),44px);color:var(--gold);margin-top:clamp(8px,1.6vh,18px)}
.g-lede{font-size:clamp(17px,min(1.5vw,2.5vh),23px);line-height:1.5;color:rgba(243,239,229,.8);max-width:31em;margin:clamp(14px,2.8vh,30px) 0 0}
.g-facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,44px);padding:0;margin:clamp(16px,3vh,34px) 0 0}
.g-facts li{display:flex;flex-direction:column;gap:4px}
.g-facts b{font-weight:500;font-size:clamp(30px,min(3vw,5vh),46px);line-height:1;color:var(--gold)}
.g-facts span{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:rgba(243,239,229,.62)}
.g-actions{display:flex;align-items:center;gap:22px;margin-top:clamp(20px,3.8vh,44px)}
.cta{display:inline-flex;align-items:center;gap:18px;padding:17px 30px 17px 34px;border:1px solid var(--gold);color:var(--gold);font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .5s var(--ease)}
.cta::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .6s var(--ease)}
.cta span,.cta i{position:relative;font-style:normal}
.cta i{transition:transform .5s var(--ease)}
.cta:hover{color:var(--navy)}.cta:hover::before{transform:none}.cta:hover i{transform:translateX(6px)}
.g-hint{font-style:italic;font-size:16px;color:rgba(243,239,229,.42)}

/* the closed hardcover, in 3D */
.g-bookwrap{opacity:0;animation:bookin 1.7s var(--ease) .25s forwards;position:relative;height:100%;display:flex;align-items:center;justify-content:center;perspective:2200px;--S:min(52vh,36vw,560px);--T:calc(var(--S)*.062)}
.g-halo{position:absolute;width:calc(var(--S)*1.9);height:calc(var(--S)*1.9);border-radius:50%;background:radial-gradient(closest-side,rgba(204,173,115,.2),rgba(204,173,115,.06) 46%,transparent 72%);filter:blur(6px)}
.book3d{position:relative;width:var(--S);height:var(--S);transform-style:preserve-3d;transform:rotateX(var(--rx,-13deg)) rotateY(var(--ry,31deg));cursor:pointer;animation:bob 9s ease-in-out 2s infinite;transition:transform .9s var(--ease)}
@keyframes bookin{from{opacity:0;translate:0 46px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.b-face{position:absolute;backface-visibility:hidden;background-size:cover;background-position:center}
.b-front{inset:0;transform:translateZ(calc(var(--T)/2));border-radius:1px 3px 3px 1px;box-shadow:inset 6px 0 9px -6px rgba(0,0,0,.6),inset 14px 0 1px -13px rgba(255,255,255,.18)}
.b-front::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,0) 62%,rgba(0,0,0,.2) 100%);pointer-events:none}
.b-back{inset:0;transform:translateZ(calc(var(--T)/-2)) rotateY(180deg)}
.b-spine{left:0;top:0;width:var(--T);height:100%;transform-origin:left center;transform:translateZ(calc(var(--T)/-2)) rotateY(-90deg);background-size:100% 100%;box-shadow:inset -8px 0 10px -6px rgba(0,0,0,.45),inset 5px 0 8px -5px rgba(0,0,0,.4)}
.b-fore{left:100%;top:1.1%;width:var(--T);height:97.8%;transform-origin:left center;transform:translateX(-1.2px) translateZ(calc(var(--T)/2)) rotateY(90deg);background:linear-gradient(90deg,#222245 0 6%,transparent 6% 94%,#222245 94%),repeating-linear-gradient(90deg,#efe7d6 0 1px,#d9cfba 1px 2px)}
.b-top,.b-bottom{left:0;width:100%;height:var(--T);background:linear-gradient(180deg,#222245 0 6%,transparent 6% 94%,#222245 94%),repeating-linear-gradient(180deg,#efe7d6 0 1px,#d9cfba 1px 2px)}
.b-top{top:0;transform-origin:center top;transform:translateZ(calc(var(--T)/-2)) rotateX(90deg)}
.b-bottom{bottom:0;transform-origin:center bottom;transform:translateZ(calc(var(--T)/-2)) rotateX(-90deg);filter:brightness(.6)}
.g-shadow{position:absolute;top:calc(50% + var(--S)*.56);width:calc(var(--S)*1.05);height:calc(var(--S)*.12);background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(10px);transform:translateX(4%)}

/* ═════════════ WORLD ═════════════ */
#world{--p:0;background:var(--night);opacity:0;visibility:hidden;transition:opacity 1.4s var(--ease) .2s,visibility 0s linear 1.6s;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--pearl)}
body:not(.at-gate) #world{opacity:1;visibility:visible;transition:opacity 1.4s var(--ease) .2s}
.sky{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#0f0f26 0%,#17173a 38%,#222245 72%,#2b2a55 100%)}
#stars{position:absolute;inset:0;width:100%;height:100%;opacity:calc(.55 + var(--p)*.45)}
.glow{position:absolute;left:50%;bottom:-34vh;width:150vw;height:86vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(236,190,120,.42),rgba(214,140,96,.16) 46%,transparent 72%);opacity:calc(1 - var(--p)*.92)}
.mars{position:absolute;right:11vw;top:15vh;width:calc(7px + var(--p)*30px);height:calc(7px + var(--p)*30px);border-radius:50%;background:radial-gradient(circle at 36% 34%,#f09a62,#d8623a 52%,#9c3d22 100%);box-shadow:0 0 calc(10px + var(--p)*46px) rgba(216,98,58,calc(.35 + var(--p)*.35));transition:width 1.6s var(--ease),height 1.6s var(--ease),box-shadow 1.6s var(--ease)}
.dunes{position:absolute;left:0;right:0;bottom:0;width:100%;height:44vh;overflow:visible;transform:translateY(60%);transition:transform 2.2s var(--ease) .3s}
body.in-world .dunes,body.in-passage .dunes{transform:translateY(calc(var(--p)*52%))}
.d{transition:transform 1.8s var(--ease)}
.d1{fill:#e3c08e;filter:drop-shadow(0 -5px 8px rgba(0,0,0,.35));transform:translateY(calc(var(--p)*0px))}
.d2{fill:#c99f6c;filter:drop-shadow(0 -6px 9px rgba(0,0,0,.4));transform:translateY(calc(var(--p)*6px))}
.d3{fill:var(--teal);filter:drop-shadow(0 -6px 9px rgba(0,0,0,.38));transform:translateY(calc(var(--p)*12px))}
.d4{fill:var(--teal-deep);filter:drop-shadow(0 -6px 9px rgba(0,0,0,.34));transform:translateY(calc(var(--p)*20px))}
.d5{fill:#12123a;filter:drop-shadow(0 -5px 8px rgba(0,0,0,.3));transform:translateY(calc(var(--p)*28px))}

/* passage */
#passage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8vw 12vh;text-align:center;z-index:6;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s;cursor:pointer}
body.in-passage #passage{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
#passage-line{margin:0;font-style:italic;font-size:clamp(30px,4.6vw,76px);line-height:1.12;color:var(--bgold);opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.4s var(--ease);text-shadow:0 2px 30px rgba(0,0,0,.5)}
#passage-line.on{opacity:1;transform:none}
.p-skip{position:absolute;bottom:7vh;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,241,230,.36)}

/* chrome */
.w-top,.w-bottom,.stage{position:relative;z-index:3;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
body:not(.in-world) .w-top,body:not(.in-world) .w-bottom{opacity:0;pointer-events:none}
body:not(.in-world) .stage{opacity:0;transform:translateY(26px) scale(.955);pointer-events:none}
.w-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px clamp(16px,2.6vw,40px) 6px;gap:16px}
.w-back{justify-self:start;display:inline-flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.5em;color:rgba(246,241,230,.72);transition:color .4s}
.w-back i{font-style:normal;font-size:24px;letter-spacing:0;color:var(--bgold);transform:translateY(-2px);transition:transform .4s var(--ease)}
.w-back:hover{color:var(--pearl)}.w-back:hover i{transform:translate(-4px,-2px)}
.w-center{text-align:center;min-width:0}
.w-act{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--bgold);min-height:16px;font-variant-numeric:lining-nums}
.w-now{font-style:italic;font-size:19px;color:rgba(246,241,230,.86);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.w-tools{justify-self:end;display:flex;gap:8px}
.w-tools button{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;border:1px solid rgba(224,181,92,.3);border-radius:19px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,230,.8);transition:border-color .4s,color .4s,background .4s}
.w-tools button:hover,.w-tools button.on{border-color:var(--bgold);color:var(--bgold);background:rgba(224,181,92,.08)}
.w-tools svg,.nav svg,.gl-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-pause{display:none}#btn-play.on .ic-pause{display:block}#btn-play.on .ic-play{display:none}

.stage{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,26px);min-height:0;padding:6px 10px}
.nav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(224,181,92,.3);color:var(--bgold);display:flex;align-items:center;justify-content:center;transition:border-color .4s,background .4s,opacity .4s,transform .4s var(--ease)}
.nav:hover{border-color:var(--bgold);background:rgba(224,181,92,.1)}
.nav-prev:hover{transform:translateX(-3px)}.nav-next:hover{transform:translateX(3px)}
.nav[disabled]{opacity:.18;pointer-events:none}
#shell{position:relative;flex:none;transition:transform 1s var(--ease)}
#shell.closed-front{transform:translateX(-25%)}
#shell.closed-back{transform:translateX(25%)}
#shell::before{content:"";position:absolute;left:3%;right:3%;bottom:-5.5%;height:9%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(12px);transition:left 1s var(--ease),right 1s var(--ease)}
#shell.closed-front::before{left:52%}#shell.closed-back::before{right:52%}
.board{position:absolute;inset:-9px -11px;border-radius:5px;background:linear-gradient(90deg,#1c1c3d,#26264e 49.4%,#111127 49.9%,#111127 50.1%,#26264e 50.6%,#1c1c3d);box-shadow:0 30px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(224,181,92,.22);opacity:1;transition:opacity .5s var(--ease) .6s}
.stack{position:absolute;top:0;bottom:0;width:calc(var(--w,0)*1px);background:repeating-linear-gradient(90deg,#efe7d6 0 1px,#cfc5ae 1px 2px);transition:opacity .5s var(--ease) .6s,width .9s var(--ease)}
.stack-l{right:100%;border-radius:2px 0 0 2px;box-shadow:inset 5px 0 6px -4px rgba(0,0,0,.35)}
.stack-r{left:100%;border-radius:0 2px 2px 0;box-shadow:inset -5px 0 6px -4px rgba(0,0,0,.35)}
#shell.closed-front .board,#shell.closed-back .board,#shell.closed-front .stack,#shell.closed-back .stack,#shell.portrait .board,#shell.portrait .stack{opacity:0;transition-delay:0s;transition-duration:.25s}
#book{position:relative;width:100%;height:100%;min-width:0!important;min-height:0!important}
#book,#book .stf__wrapper,#book .stf__block,#book .stf__item{transition:none!important;animation:none!important}
.page{background:var(--pearl) center/cover no-repeat;overflow:hidden}
.page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background-size:cover;background-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.page::after{content:"";position:absolute;inset:0;pointer-events:none}
.page.pg-l::after{background:linear-gradient(270deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.07) 2.2%,rgba(0,0,0,0) 9%),linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,0) 3%)}
.page.pg-r::after{background:linear-gradient(90deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.07) 2.2%,rgba(0,0,0,0) 9%),linear-gradient(270deg,rgba(0,0,0,.05),rgba(0,0,0,0) 3%)}
.page.pg-cover{background:var(--indigo)}
.page.pg-cover::after{background:linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(255,255,255,.1) 1.1%,rgba(0,0,0,.2) 2.4%,rgba(0,0,0,0) 4.2%),linear-gradient(105deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%)}
.page.pg-backcover::after{background:linear-gradient(270deg,rgba(0,0,0,.34) 0,rgba(255,255,255,.1) 1.1%,rgba(0,0,0,.2) 2.4%,rgba(0,0,0,0) 4.2%)}
.open-hint{position:absolute;left:50%;right:0;top:calc(100% + 16px);text-align:center;font-style:italic;font-size:17px;color:rgba(246,241,230,.6);opacity:0;transition:opacity .8s var(--ease);pointer-events:none;animation:breathe 3.2s ease-in-out infinite}
#shell.closed-front .open-hint{opacity:1;transition-delay:1.2s}
#shell.portrait .open-hint{left:0}
@keyframes breathe{50%{color:rgba(224,181,92,.95)}}

/* the journey line: pearls → Mars */
.w-bottom{padding:4px clamp(16px,4vw,72px) 16px;background:linear-gradient(180deg,rgba(14,14,40,0),rgba(14,14,40,.86) 38%,rgba(12,12,34,.96))}
.tl{display:flex;align-items:flex-end;gap:16px;max-width:1280px;margin:0 auto}
.tl-end{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-style:italic;font-size:14px;color:rgba(246,241,230,.7);width:44px}
.tl-end i{width:13px;height:13px;border-radius:50%}
.tl-pearl i{background:radial-gradient(circle at 34% 30%,#fff,#f1e9da 46%,#b9ad98 100%);box-shadow:0 0 12px rgba(255,255,255,.4)}
.tl-mars i{background:radial-gradient(circle at 36% 34%,#f09a62,#d8623a 52%,#9c3d22 100%);box-shadow:0 0 12px rgba(216,98,58,.6)}
.tl-end span{order:-1}
.tl-track{position:relative;flex:1;min-width:0;padding-bottom:5px;cursor:pointer}
.tl-segs{display:flex;gap:7px}
.seg{min-width:0;flex-basis:0}
.seg-name{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,230,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:9px;transition:color .5s;font-variant-numeric:lining-nums}
.seg.on .seg-name{color:var(--bgold)}
.seg-bar{display:block;height:3px;border-radius:2px;background:rgba(246,241,230,.16);position:relative;overflow:hidden}
.seg-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--bgold-deep),var(--bgold));transition:width .9s var(--ease)}
.tl-marker{position:absolute;bottom:-3px;left:0;width:19px;height:19px;margin-left:-9.5px;transition:left .9s var(--ease);pointer-events:none;filter:drop-shadow(0 0 6px rgba(224,181,92,.9))}
.tl-marker svg{width:100%;height:100%;fill:#f5d68c}
.tl-tip{position:absolute;bottom:34px;left:0;transform:translateX(-50%) translateY(6px);display:flex;gap:12px;align-items:center;width:max-content;max-width:330px;padding:8px 14px 8px 8px;background:rgba(18,18,42,.96);border:1px solid rgba(224,181,92,.4);border-radius:4px;box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.tl-tip.on{opacity:1;transform:translateX(-50%)}
.tl-tip img{width:62px;height:62px;object-fit:cover;border-radius:2px;flex:none;background:var(--indigo-2)}
.tl-tip b{display:block;font-weight:500;font-size:17px;line-height:1.14;color:var(--pearl)}
.tl-tip em{display:block;font-size:14px;color:var(--bgold);margin-top:3px;font-variant-numeric:lining-nums}

/* contents drawer */
#scrim{position:absolute;inset:0;background:rgba(8,8,22,.55);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s linear .5s;z-index:7}
body.contents-open #scrim{opacity:1;visibility:visible;transition:opacity .5s}
#contents{position:absolute;top:0;right:0;bottom:0;width:min(520px,94vw);background:linear-gradient(180deg,#17173a,#1d1d42);border-left:1px solid rgba(224,181,92,.3);box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .7s var(--ease);z-index:8;display:flex;flex-direction:column}
body.contents-open #contents{transform:none}
.c-head{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 28px 8px}
.c-eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--bgold)}
.c-head h2{font-weight:500;font-size:40px;line-height:1.05;margin:6px 0 0;font-variant-numeric:lining-nums}
#c-close,.gl-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(224,181,92,.3);font-size:24px;line-height:1;color:var(--bgold);transition:border-color .3s,background .3s}
#c-close:hover,.gl-close:hover{border-color:var(--bgold);background:rgba(224,181,92,.1)}
.c-search{position:relative;padding:12px 28px 14px}
#c-q{width:100%;height:44px;padding:0 70px 0 16px;background:rgba(246,241,230,.06);border:1px solid rgba(224,181,92,.28);border-radius:3px;color:var(--pearl);font:500 18px Cormorant,Georgia,serif;outline:none;transition:border-color .3s}
#c-q::placeholder{color:rgba(246,241,230,.4);font-style:italic}
#c-q:focus{border-color:var(--bgold)}
#c-count{position:absolute;right:42px;top:24px;font-size:14px;font-style:italic;color:rgba(246,241,230,.5);font-variant-numeric:lining-nums}
.c-list{flex:1;overflow-y:auto;padding:0 16px 30px 28px;scrollbar-width:thin;scrollbar-color:rgba(224,181,92,.4) transparent}
.c-act{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 9px;margin-bottom:4px;background:linear-gradient(180deg,#18183c 78%,rgba(24,24,60,0));font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bgold);font-variant-numeric:lining-nums}
.c-act em{font-size:14px;letter-spacing:0;text-transform:none;color:rgba(246,241,230,.5)}
.c-item{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:6px 8px 6px 0;border-radius:3px;transition:background .3s}
.c-item:hover{background:rgba(224,181,92,.08)}
.c-item.cur{background:rgba(224,181,92,.14)}
.c-item img{width:58px;height:58px;object-fit:cover;border-radius:2px;background:var(--indigo-2)}
.c-item b{display:block;font-weight:500;font-size:19px;line-height:1.14;color:var(--pearl)}
.c-item em{display:block;font-size:14.5px;color:rgba(246,241,230,.56);margin-top:3px;font-variant-numeric:lining-nums}
.c-item em i{font-style:normal;color:var(--bgold);margin-right:8px}
.c-item mark{background:none;color:var(--bgold)}
.c-snip{display:block;font-size:14.5px;line-height:1.3;color:rgba(246,241,230,.62);margin-top:4px}
.c-empty{padding:30px 0;font-style:italic;font-size:18px;color:rgba(246,241,230,.55)}
.c-extra{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 4px}
.c-extra button{padding:7px 14px;border:1px solid rgba(224,181,92,.28);border-radius:16px;font-size:15px;font-style:italic;color:rgba(246,241,230,.8);transition:border-color .3s,color .3s}
.c-extra button:hover{border-color:var(--bgold);color:var(--bgold)}

/* artwork gallery */
#gallery{position:absolute;inset:0;z-index:9;background:radial-gradient(90% 90% at 50% 44%,rgba(26,26,58,.97),rgba(8,8,22,.985));display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,34px);padding:26px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
body.gallery-open #gallery{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
#gallery figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;transform:scale(.96);transition:transform .7s var(--ease)}
body.gallery-open #gallery figure{transform:none}
#gl-img{display:block;height:min(calc(100vh - 150px),calc(100vw - 190px));aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(224,181,92,.25);background:var(--indigo-2);transition:opacity .35s}
#gl-img.swap{opacity:0}
#gallery figcaption{text-align:center;max-width:min(900px,86vw);font-variant-numeric:lining-nums}
#gl-no{display:block;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--bgold);margin-bottom:5px}
#gl-title{font-weight:500;font-size:clamp(20px,2.2vw,30px);color:var(--pearl)}
#gl-date{font-size:clamp(16px,1.6vw,21px);color:rgba(246,241,230,.6);margin-left:14px}
.gl-close{position:absolute;top:20px;right:24px}
.gl-nav{flex:none;width:50px;height:50px;border-radius:50%;border:1px solid rgba(224,181,92,.3);color:var(--bgold);display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s}
.gl-nav:hover{border-color:var(--bgold);background:rgba(224,181,92,.1)}
.gl-nav[disabled]{opacity:.18;pointer-events:none}

/* small screens */
@media (max-width:900px){
  .g-main{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:10px}
  .g-bookwrap{order:-1;height:auto;padding:22px 0 30px;--S:min(34vh,56vw)}
  .g-foot span:last-child,.g-hint,.w-tools button span,.tl-end span,.seg-name{display:none}
  .w-tools button{padding:0 11px}
  .nav{display:none}
  .w-now{font-size:16px}
}
@media (max-height:620px){.g-lede{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;transition-duration:.01s!important}}

.still *,.still *::before,.still *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}

/* hardcover note */
.g-soon{display:flex;align-items:center;gap:12px;margin-top:clamp(16px,3vh,34px);padding-top:clamp(12px,2vh,20px);border-top:1px solid var(--line);max-width:31em}
.g-soon svg{width:13px;height:13px;fill:var(--gold);flex:none}
.g-soon span{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold)}
.g-soon em{font-size:18px;color:rgba(243,239,229,.74)}
.end-note{position:absolute;left:0;right:50%;top:calc(100% + 12px);text-align:center;opacity:0;transition:opacity .8s var(--ease);pointer-events:none;line-height:1.25}
#shell.closed-back .end-note{opacity:1;transition-delay:1.1s}
#shell.portrait .end-note{right:0}
.end-note span{display:block;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--bgold)}
.end-note em{display:block;font-size:19px;color:rgba(246,241,230,.82);margin-top:2px}
@media (max-height:620px){.g-soon{display:none}}
/* web edition: make copying harder */
html[data-edition=web] body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-edition=web] img{-webkit-user-drag:none;-webkit-touch-callout:none}
html[data-edition=web] input{-webkit-user-select:text;user-select:text}
#veil{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#12122c;color:var(--pearl);text-align:center;cursor:pointer}
#veil.on{display:flex}
#veil svg{width:22px;height:22px;fill:var(--bgold);margin-bottom:10px}
#veil b{font-weight:500;font-size:20px;letter-spacing:.62em;padding-left:.62em}
#veil span{font-style:italic;font-size:26px;color:var(--bgold)}
#veil em{font-size:16px;color:rgba(246,241,230,.55)}
@media print{html[data-edition=web] body>*{display:none!important}html[data-edition=web] body::after{content:"108 Echoes of the Emirates · ERYNDAI · This edition cannot be printed.";display:block;padding:3cm;font:16pt Georgia,serif;color:#000}}