/* ============================================================================
   A door.

   Blog, Tools, Incubator and About are not finished, so rather than show a
   half-built page behind frosted glass they are a single dark screen: the one
   thing worth doing (leave an email), the two things that are actually open
   (the front page, the guestbook), and Quester wandering through underneath.

   Tokens come from ds-page.css. Nothing is redefined here.
   ========================================================================== */

body.door{
  min-height:100dvh;display:flex;flex-direction:column;
  font-family:var(--serif)}

/* --- the bar ---------------------------------------------------------------- */
.door-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:22px clamp(20px,5vw,52px) 0}
.door-top .word{font-family:var(--display);font-weight:800;font-size:1.28rem;line-height:1;
  letter-spacing:-.01em;color:#f3f3f7;text-decoration:none;text-shadow:2px 2px 0 var(--shadow)}
.door-top .word:visited{color:#f3f3f7}
.door-top .word em{font-style:normal;color:var(--accent)}
.door-top .word:hover{color:#f3f3f7}
.door-top .where{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted)}
.door-top .where b{color:var(--hit);font-weight:700}
/* The same bracketed nav the front page runs, so a door is recognisably a page of
   this site rather than a stranded screen. It takes the whole row on its own line:
   the wordmark and the "you are at" stamp are an identity line, the nav is a
   different job, and running them together made the bar read as one long sentence.
   The current section is pressed in rather than linked, same as the masthead. */
.door-top .door-nav{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:12px;
  font-family:var(--mono);font-size:.8rem}
/* 44px, per the minimum tap target in Mobile & desktop -- these are the densest
   controls on a door and they are the first thing a thumb reaches for. */
.door-nav a{color:var(--link);text-decoration:none;padding:6px 2px;min-height:44px;
  display:inline-flex;align-items:center}
.door-nav a::before{content:"[ "}
.door-nav a::after{content:" ]"}
.door-nav a:visited{color:var(--link)}
.door-nav a:hover{color:var(--accent);text-decoration:underline}
.door-nav a:focus-visible{outline:2px solid var(--hit);outline-offset:2px}
.door-nav a[aria-current]{background:var(--sink);box-shadow:var(--well);color:var(--ink);
  cursor:default;padding-left:6px;padding-right:6px}
.door-nav a[aria-current]:hover{color:var(--ink);text-decoration:none}
.door-nav a.nav-cta{font-size:.76rem;padding:4px 9px;margin:0;line-height:1.2;letter-spacing:.04em;
  color:#0a1a0e!important;background:#43e07a;font-weight:700;
  box-shadow:0 0 0 1px rgba(4,6,15,.75),0 0 10px 1px rgba(67,224,122,.42);animation:door-cta-glow 2.6s ease-in-out infinite}
.door-nav a.nav-cta::before,.door-nav a.nav-cta::after{content:none}
.door-nav a.nav-cta:hover{color:#0a1a0e!important;filter:brightness(1.06);text-decoration:none}
@keyframes door-cta-glow{0%,100%{background:#43e07a}50%{background:#f0a828}}
@media(prefers-reduced-motion:reduce){.door-nav a.nav-cta{animation:none}}

/* --- the middle ------------------------------------------------------------- */
.door-main{flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  padding:40px clamp(20px,5vw,52px) 30px}
.door-card{width:100%;max-width:620px}
.door-card h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5.6vw,3.2rem);line-height:1;letter-spacing:-.008em;margin:0 0 18px;
  color:#f3f3f7;text-wrap:balance;
  text-shadow:-1px 0 0 var(--sink),1px 0 0 var(--sink),0 -1px 0 var(--sink),0 1px 0 var(--sink),3px 3px 0 #000}
.door-card h1 em{font-style:normal;color:var(--accent)}
.door-card .sub{font-size:1.02rem;line-height:1.62;color:var(--ink2);margin:0 0 26px;max-width:52ch}

/* The gate is a raised panel on a door, not bare type on the ground. beta.css
   puts the padding on .beta-gate__body, which a door does not have -- its h1 and
   form are direct children -- so without this the panel draws with zero padding
   and the headline sits on its own edge. */
.door-card .beta-gate{margin:0;padding:clamp(22px,4.2vw,34px)}
.door-card .beta-gate h1:first-child{margin-top:0}

/* the form re-uses .beta-form / .beta-msg / .beta-done from beta.css */
.door-card .beta-form{margin-bottom:10px}
.door-card .beta-fine{margin-bottom:0!important}

/* --- what is actually open -------------------------------------------------- */
.door-open{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--shadow);
  box-shadow:inset 0 1px 0 var(--bevel)}
.door-open .cap{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.door-open ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.door-open a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 13px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-decoration:none;
  color:var(--ink);background:var(--panel);box-shadow:var(--raise);
  transition:transform .1s,box-shadow .1s,color .1s}
.door-open a:visited{color:var(--ink)}
.door-open a:hover{color:var(--accent);transform:translate(-1px,-1px)}
.door-open a:active{box-shadow:var(--well);transform:translate(2px,2px)}
.door-open a .go{color:var(--hit)}

/* --- the strip he walks through --------------------------------------------- */
/* No box. A bordered band with a grid in it announces itself as a container, so
   the 23%% of the time he is off-screen you are looking at an empty shelf. With
   the chrome gone he simply walks along the bottom of the page, and empty reads
   as the page ending rather than as something missing. */
.stroll{position:relative;flex:0 0 auto;height:150px;overflow:hidden}
/* a hairline of ground so he is standing on something rather than floating */
.stroll::after{content:"";position:absolute;left:0;right:0;bottom:35px;height:1px;
  background:var(--bevel);opacity:.22}
.qs-actor{position:absolute;bottom:18px;left:0;width:112px;height:112px;
  will-change:transform;transform:translateX(-140px)}
.qs-actor.flip{scale:-1 1}
.qs-sprite{width:100%;height:100%;display:block;image-rendering:pixelated}
.qs-note{animation:qsnote 1.5s ease-out infinite}
/* wheels: the spokes strobe rather than rotate, because rotating pixel art is
   the one thing the mascot rules will not have */
.qs-spin{animation:qsspin .13s steps(2,end) infinite}
@keyframes qsspin{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.qs-ball{animation:qsball .34s steps(2,end) infinite}
@keyframes qsball{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.qs-ball,.qs-spin{transform-box:fill-box}
@keyframes qsnote{
  0%{opacity:0;transform:translate(0,4px)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(5px,-16px)}}
/* he lands on whole pixels, like the one on the front page */
.qs-actor.bob{animation:qsbob .34s steps(1,end) infinite}
@keyframes qsbob{0%,100%{margin-bottom:0}50%{margin-bottom:3px}}

@media(max-width:680px){
  .stroll{height:118px}
  .qs-actor{width:88px;height:88px;bottom:14px}
  .stroll::after{bottom:28px}
}
@media(prefers-reduced-motion:reduce){
  .qs-actor,.qs-note{animation:none!important;transition:none!important}
}