/* ============================================================
   Empire 1805 — front.css
   The front page: a painting full bleed, the menu on the left as
   capitals on dark bars that fade into the picture. The painting is
   anchored BOTTOM RIGHT so that on a screen wider or taller than
   16:9 the crop comes off the sky and the far edge, not off the
   wordmark in its corner.
   ============================================================ */
body.front{min-height:100vh;overflow:hidden;background:#0b0a08}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fbg{position:fixed;inset:0;background:#0b0a08 right bottom/cover no-repeat;opacity:0;
  transform-origin:right bottom;transition:opacity 1.2s ease;animation:fkb 46s ease-in-out infinite alternate}
body.artready #fbg{opacity:1}
#fbg.out{opacity:0!important;transition:opacity .45s ease}
@keyframes fkb{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){#fbg{animation:none}}
.fshade{position:fixed;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,8,6,.86) 0%,rgba(9,8,6,.62) 26%,rgba(9,8,6,.18) 48%,rgba(9,8,6,0) 62%),
  linear-gradient(180deg,rgba(9,8,6,.7) 0%,rgba(9,8,6,0) 14%),
  linear-gradient(0deg,rgba(9,8,6,.55) 0%,rgba(9,8,6,0) 12%)}

body.front .topnav{position:relative;z-index:3;background:transparent;border-bottom:0}
body.front .topnav .brand{visibility:hidden}
body.front .topnav a.nl{display:none}
body.front #acctSlot{text-shadow:0 1px 3px rgba(0,0,0,.9)}

.fmain{position:fixed;z-index:2;left:clamp(20px,6vw,110px);bottom:clamp(84px,17vh,200px);width:min(520px,calc(100vw - 40px))}
.ftag{margin:0 0 22px;color:var(--smoke);font-size:15px;letter-spacing:.05em;max-width:40ch;text-shadow:0 1px 4px rgba(0,0,0,.9);
  opacity:0;animation:fin .8s .15s ease forwards}
.fmenu{display:flex;flex-direction:column;gap:6px}
.fi{position:relative;display:flex;flex-direction:column;gap:1px;padding:10px 60px 10px 20px;text-decoration:none;color:var(--haze);
  background:linear-gradient(90deg,rgba(6,5,4,.8) 0%,rgba(6,5,4,.62) 55%,rgba(6,5,4,0) 100%);
  border-left:3px solid transparent;opacity:0;transform:translateX(-18px);
  animation:fslide .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.25s + var(--i)*.07s);
  transition:border-color .18s,background .18s,padding .18s}
.fi .fl{white-space:nowrap;font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(22px,2.3vw,31px);letter-spacing:.14em;text-transform:uppercase;line-height:1.15;
  text-shadow:0 2px 6px rgba(0,0,0,.8)}
.fi .fs{font-size:13px;color:var(--brass-lit);letter-spacing:.06em;opacity:.9}
.fi:hover,.fi:focus-visible{outline:none;border-left-color:var(--brass-lit);padding-left:28px;
  background:linear-gradient(90deg,rgba(142,50,39,.55) 0%,rgba(20,14,10,.6) 60%,rgba(6,5,4,0) 100%)}
.fi:hover .fl,.fi:focus-visible .fl{color:#f6e7bf}
.fi.has .fl{color:#f6e7bf}
.fnote{min-height:3em;margin:16px 0 0 23px;max-width:46ch;color:var(--smoke);font-size:14px;line-height:1.5;
  font-style:italic;text-shadow:0 1px 4px rgba(0,0,0,.9);opacity:0;animation:fin .8s .9s ease forwards}
@keyframes fslide{to{opacity:1;transform:none}}
@keyframes fin{to{opacity:1}}

.ffoot{position:fixed;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px clamp(20px,6vw,110px);
  font-size:12px;color:rgba(205,199,186,.72);letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ffoot .fsp{flex:1}
.fnext{background:rgba(0,0,0,.35);border:1px solid rgba(168,133,60,.45);color:var(--smoke);width:26px;height:26px;font-size:14px;line-height:1;cursor:pointer;padding:0}
.fnext:hover{color:var(--brass-lit);border-color:var(--brass-lit)}
/* the wordmark lives in the painting's bottom-right corner; keep the footer's right side clear of it.
   On a tall screen that corner is under the menu, so the logo comes out of the painting and sits on top. */
.flogo{display:none;width:min(360px,78vw);height:auto;margin:0 0 6px -8px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));opacity:0;animation:fin .8s .1s ease forwards}
.fdesk{display:none}

body.plainart #fbg{background-position:60% center}
body.plainart .flogo{display:block}
body.plainart .topnav .brand{display:none}
body.front #acctSlot{margin-left:auto}
@media (max-width:760px){
  .fshade{background:linear-gradient(0deg,rgba(9,8,6,.92) 0%,rgba(9,8,6,.7) 46%,rgba(9,8,6,.1) 75%),linear-gradient(180deg,rgba(9,8,6,.7) 0%,rgba(9,8,6,0) 14%)}
  .fmain{bottom:64px}
  .fi{padding-right:24px}
  .ffoot .fcredit{font-size:11px}
}
@media (max-height:620px){ .ftag{display:none} .fmain{bottom:56px} .fi{padding-top:6px;padding-bottom:6px} }