/* Shervoid reading pages: the same sheets as the windows inside the world, laid out on a candlelit table.
   Sheet styles come from shervoid-ui.css (the page's <main> carries the window's id); this file only sets the table. */
@font-face{font-family:Fell;src:url('./fonts/IMFellEnglish.woff2') format('woff2'),url('./fonts/IMFellEnglish.ttf') format('truetype');font-display:swap}
@font-face{font-family:Terminal;src:url('./fonts/VT323.woff2') format('woff2'),url('./fonts/VT323.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}
/* Moving between the reading pages is one soft crossfade under a still row of tabs, not a blink (Sergey, 25.09: "switching
   tabs lags and reloads; everything should be smooth"). The page under the pointer is prepared ahead (speculation rules).
   The opt-in itself is the first thing in each page head (site-pages.mjs): read from a stylesheet it raced the first frame. */
::view-transition-group(root){animation-duration:.25s}
.site-nav{view-transition-name:site-nav}
body.page{margin:0;min-height:100vh;background:radial-gradient(70% 55% at 50% 22%,#3a220c,#140d07 68%,#080604);color:#ead8b2;font:19px/1.5 Fell,Georgia,serif}
body.page a:focus-visible{outline:2px solid #e2ad5c;outline-offset:3px}

.site-nav{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;align-items:center;padding:24px 16px 4px}
.site-nav a{padding:6px 13px;background:#e0cfa8;color:#221a12;text-decoration:none;font:17px Fell,Georgia,serif;box-shadow:0 2px 0 #000000b3;transform:rotate(-.6deg)}
.site-nav a:nth-child(odd){transform:rotate(.5deg)}
.site-nav a:hover{background:#f0e1bd}
.site-nav a[aria-current="page"]{background:#221a12;color:#ecdcb8;box-shadow:0 2px 0 #000000b3,0 0 0 1px #e0cfa855}
.site-nav .home{margin-right:8px;padding:0;background:none;box-shadow:none;transform:none;color:#e8c47e;font:400 30px/1 Blackletter,Fell,serif;text-shadow:0 0 16px #e2ad5c4d}
.site-nav .home:hover{background:none;color:#f3d493}
.site-nav .enter{background:linear-gradient(#c23b35,#8e2426);color:#f6e7c4}
.site-nav .enter:hover{background:linear-gradient(#cf4841,#9a2a2b)}

/* the windows become sheets in the page flow */
body.page main{display:block;position:static;inset:auto;margin:22px auto 56px;width:calc(100% - 32px);max-height:none;overflow:visible}
body.page #map-dialog{width:min(1200px,calc(100% - 32px));max-width:1200px;max-height:none;overflow:visible}

/* Journal: the ticket line under the pinned traces */
#field-notes .journal-ticket-title{margin:34px 0 6px;font:400 32px/1.1 Blackletter,Fell,Georgia,serif;color:var(--sv-ink)}
#field-notes .journal-ticket{font:19px/1.5 Fell,Georgia,serif;color:var(--sv-ink)}

.page-foot{max-width:700px;margin:0 auto 44px;padding:0 16px;text-align:center;font-size:15px;line-height:1.5;color:#bfa77c}

/* Lore, FAQ, About, Token and the plates of the Story: the world opens the same pages, so their styles live in shervoid-ui.css */
#project-dialog .token-slot span{display:block;margin-bottom:4px;font:italic 15px/1.2 Fell,Georgia,serif;color:var(--sv-ink-soft)}
/* Token leads the row, gilded like the button at the entrance (Sergey, 26.09: the most important tab for people) */
.site-nav a.token-tab{background:linear-gradient(#d2ad68,#96743a);color:#23180a;font:19px/1.05 Terminal,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 2px 0 #000000b3,0 0 16px #e2ad5c4d}
.site-nav a.token-tab:hover{background:linear-gradient(#e0bc76,#a07c40)}
.site-nav a.token-tab[aria-current="page"]{background:#221a12;color:#f3d493;box-shadow:0 2px 0 #000000b3,0 0 0 1.5px #e2ad5c,0 0 16px #e2ad5c4d}

@media(max-width:650px){
  .site-nav{gap:8px;padding-top:16px}
  .site-nav .home{flex-basis:100%;text-align:center;margin:0 0 4px}
  .site-nav a{font-size:16px;padding:5px 10px}
  body.page main{width:calc(100% - 20px);margin-top:16px}
}