/* Home intro: a full-screen, still mesh of the topics people feel lost in. It fills the screen with no header;
   scrolling fades it out and brings in the header and the "Go this way" hero. White page, faint notebook grid. */
.page-home {
  background-color: #fff;
  background-image: linear-gradient(to right, rgba(17, 17, 17, .06) 1px, transparent 1px),
                    linear-gradient(rgba(17, 17, 17, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  background-attachment: scroll;
}
.page-home { overflow-x: clip; }
.page-trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.page-home .topbar { position: fixed; left: 0; right: 0; transition: transform .35s ease, opacity .35s ease; }
.intro-on .topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* Once the visitor has scrolled past the mesh it is gone for the rest of the visit (js/landing-intro.js, landing-mesh.js). */
.mesh-seen .mesh { display: none; }
.mesh-seen .intro-on .topbar { transform: none; opacity: 1; pointer-events: auto; }
.page-home main { padding-top: 0; }

.mesh { position: relative; height: 100vh; height: 100svh; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  opacity: calc(1 - var(--p, 0)); touch-action: pan-y; }
.mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mesh-corner { position: absolute; top: 1.1rem; margin: 0; font: 500 .74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--muted); }
.mesh-corner.left { left: 1.4rem; } .mesh-corner.right { right: 1.4rem; }
.mesh-corner span { font: 800 .95rem/1 var(--display); color: var(--fg); letter-spacing: 0; }
.mesh-corner b { color: var(--accent); }
.mesh-copy { position: absolute; left: 50%; top: 50%; width: max-content; max-width: 92vw; transform: translate(-50%, calc(-50% - var(--p, 0) * 60px)); text-align: center; pointer-events: none;
  padding: 2.2rem 3rem; border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 0 0 1.5px #e3edfd; }
.mesh-copy h2 { margin: 0; font: 800 clamp(2.2rem, 6.4vw, 4.6rem)/1.02 var(--display); letter-spacing: -.02em; color: var(--fg); }
.mesh-copy h2 span { color: var(--accent); }
.mesh-copy p { margin: .9rem 0 0; font: 700 clamp(1rem, 2.4vw, 1.3rem)/1.4 var(--display); color: var(--muted); }
.mesh-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem;
  color: var(--fg); text-decoration: none; font: 600 .8rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mesh-arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 0 0 6px rgba(0, 86, 210, .14); animation: nudge 1.8s ease-in-out infinite; transition: transform .15s; }
.mesh-arrow svg { width: 24px; height: 24px; }
.mesh-cue:hover .mesh-arrow, .mesh-cue:focus-visible .mesh-arrow { transform: translateY(3px) scale(1.06); animation: none; }
.mesh-cue:focus-visible { outline: none; }
.mesh-cue:focus-visible .mesh-arrow { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* The hero after the intro fills the screen too. */
.page-home .go { min-height: 100vh; min-height: 100svh; padding-top: 70px; padding-bottom: 4px; box-sizing: border-box; }

@media (max-width: 640px) {
  .mesh-corner.right { display: none; }
  .mesh-copy { padding: 1.6rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mesh-arrow { animation: none; }
  .page-home .topbar { transition: none; }
}