/* The summit's logo on a screen of its own over the walkthrough (index.html, .logo-screen; logoScreen.js):
   white on pure black, nothing else but the music's controls in the corner (the visit's row with its music
   alone, styles.css), in the middle of the screen at 46% of its shorter side (the logo itself 44%: the drawing
   holds the TBot face too). A click, or a screen of scrolling, turns it into the face and back (logoMorph.js):
   the screen scrolls on its own, two screens tall with the logo held in the middle of the one in view, and no
   scrollbar to show on the black, while the walkthrough under it is held still. It was a page of its own
   (logo.html) until the music had to go on unbroken from it into the walkthrough (the user, 2026-10-28:
   "Make it gapless"). */
.logo-screen {
  position: fixed;
  inset: 0;
  z-index: 8;   /* over the walkthrough and its masthead; the switches over it (styles.css) */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000;
  scrollbar-width: none;
  outline: none;
}
.logo-screen::-webkit-scrollbar { display: none; }
html:not(.on-logo) .logo-screen { display: none; }
.logo-screen__scroll { height: 200%; }   /* the screen in view, and one to scroll: the logo to the face */
.logo-screen__view {
  position: sticky;
  top: 0;
  height: 50%;   /* one screen */
  display: grid;
  place-items: center;
}

.logo-screen__logo {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.logo-screen__logo:focus-visible { outline: 1px solid #ffffff; outline-offset: 12px; }

.logo {
  display: block;
  width: min(46vmin, 550px);
  height: auto;
}

/* the face's parts, until logoMorph.js draws them: the box not drawn yet, the eyes there only once the face is
   whole, the logo's rings, which have become them, then gone */
.logo__box { stroke-dasharray: 0 5000; }
.logo:not(.is-face) .logo__eyes,
.logo.is-face .logo__ring { display: none; }

/* The way home: back to the site (index.html, .logo-home; main.js), in the screen's top corner 12 px in, where
   the music's row ends (styles.css: drawn as its switches are, and the row moved over for it), white on the black,
   there while the screen is, and on the way in over it (access.js). It was the cross that went on past the intro
   (the user, 2026-11-01: "Replace the cross by a home button"). */
.logo-home {
  --fg: #ffffff;
  position: fixed;
  z-index: 9;   /* over the logo screen, as the row is */
  top: 12px;
  right: 12px;
}
html:not(.on-logo) .logo-home { display: none; }