#blazor-error-ui{display:none}

#screen{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 30%, #1d1409 0%, var(--slate) 60%, #060402 100%);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(10px,3vw,26px);
}
#frame{
  min-height:calc(100% - 2px);
  border:2px solid var(--brass);
  outline:1px solid rgba(138,106,48,.35);
  outline-offset:4px;
  padding:clamp(16px,5vw,42px) clamp(14px,4.5vw,44px) 5rem;
  position:relative;
}
#frame::before,#frame::after{
  content:"";position:absolute;width:14px;height:14px;border:2px solid var(--amber);opacity:.6;
}
#frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
#frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0}

#screen::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.22) 3px 5px);
  box-shadow:inset 0 0 clamp(50px,16vw,190px) rgba(0,0,0,.9);
}

#content{max-width:66ch;margin:0 auto;position:relative;z-index:2}

header{text-align:center;margin-bottom:1.8rem}
.emblem{display:block;margin:0 auto .6rem;width:clamp(34px,9vw,44px);height:auto}
.sign{
  font-family:"Cinzel",Georgia,serif;font-weight:600;
  font-size:clamp(1.05rem,4.6vw,1.5rem);letter-spacing:.12em;color:var(--amber);
  text-shadow:0 0 12px rgba(242,171,53,.3);
}
.breadcrumb{font-size:.78em;letter-spacing:.22em;color:var(--brass);margin-top:.25rem}
.divider{height:1px;background:linear-gradient(to right,transparent,var(--brass),transparent);margin:1rem 0 0}

h2{
  font-family:"Cinzel",Georgia,serif;font-weight:400;
  font-size:clamp(.95rem,3.8vw,1.15rem);letter-spacing:.14em;
  color:var(--amber);margin:1.8rem 0 .3rem;
}
.subtitle{color:var(--bone);font-size:.82em;margin-bottom:1rem}

ul{list-style:none}
li.option{
  min-height:44px;
  padding:.42rem .5rem .42rem 2.1rem;position:relative;cursor:pointer;
  border-bottom:1px solid rgba(138,106,48,.22);
}
li.option[aria-selected="true"]{background:var(--selection);border-left:2px solid var(--red-ink)}
li.option[aria-selected="true"]::before{content:"\25C6";position:absolute;left:.7rem;color:var(--red-ink)}
li.option:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}
li.option .ref{color:var(--brass);font-size:.76em;letter-spacing:.12em}
li.option .entry-title{color:var(--bone)}

.entry-body p{margin:0 0 1rem}
.entry-body p.first-paragraph::first-letter{
  font-family:"Cinzel",Georgia,serif;font-size:2.1em;line-height:.9;
  float:left;margin:.1em .12em 0 0;color:var(--red-ink);
}
.entry-body .date{color:var(--brass);font-size:.8em;letter-spacing:.14em;margin-bottom:1.2rem}
.entry-body pre{
  border:1px solid rgba(138,106,48,.5);border-left:3px solid var(--red-ink);
  padding:.75rem .9rem;margin:0 0 1rem;background:rgba(0,0,0,.35);
  white-space:pre-wrap;font-size:.88em;color:var(--amber);
}
.entry-body ul{margin:0 0 1rem}
.entry-body ul li{padding-left:1.5rem;position:relative;min-height:auto}
.entry-body ul li::before{content:"\2014";position:absolute;left:.2rem;color:var(--brass)}
.tags{color:var(--brass);font-size:.78em;letter-spacing:.1em;margin-top:1.6rem;
  border-top:1px solid rgba(138,106,48,.3);padding-top:.6rem}
.entry-metadata{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem;
  margin:1.2rem 0 0;padding:.7rem 0 0;border-top:1px solid rgba(138,106,48,.3);
  font-size:.8em}
.entry-metadata dt{color:var(--brass);letter-spacing:.1em}
.entry-metadata dd{margin:0;color:var(--bone);overflow-wrap:anywhere}
.entry-metadata-links{display:flex;flex-direction:column;gap:.3rem}
.entry-metadata a{color:var(--amber);text-decoration:underline;text-decoration-color:var(--brass);
  text-underline-offset:.2em}
.entry-metadata a:hover{color:var(--bone)}
.back{margin-top:1.6rem}

.cursor{display:inline-block;width:.55em;height:1em;background:var(--amber);
  vertical-align:-.14em;animation:pulse 1.1s steps(1) infinite}
@keyframes pulse{50%{opacity:0}}

#status-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  padding:.5rem clamp(14px,4vw,40px);
  border-top:1px solid var(--brass);
  background:linear-gradient(to top,#060402,rgba(6,4,2,.9));
  display:flex;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.72em;letter-spacing:.12em;color:var(--bone);
}
#sound-toggle{cursor:pointer;border:none;background:none;color:inherit;font:inherit;letter-spacing:.12em;min-height:44px}

.litany{font-family:"Cinzel",Georgia,serif;color:var(--amber);letter-spacing:.1em}
.red-ink{color:var(--red-ink)}

@media (prefers-reduced-motion:reduce){ .cursor{animation:none} }

@media (max-width:360px){
  .sign{letter-spacing:.08em}
  #status-bar{flex-wrap:wrap;gap:.4rem}
}