/* Mycelium navigation shared by every page: a trail of knots joined by hand-drawn hyphae, top left; a quiet menu, top right. */
.trailbar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px; position: relative; z-index: 8; }
.trail { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: 13px; }
.trail a, .trail [aria-current] { display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; color: var(--muted); transition: color .2s; }
.trail a:hover, .trail a:focus-visible { color: var(--ink); }
.trail [aria-current] { color: var(--ink); }
.trail .step { display: inline-flex; align-items: center; }
.trail > .step:first-child a { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.trail .knot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc, var(--ink)); flex: none; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.trail > .step:first-child .knot { display: none; }
.trail a:hover .knot, .trail a:focus-visible .knot { transform: scale(1.5); }
.trail svg.hy { margin-inline: 6px; flex: none; overflow: visible; }
.trail svg.hy path { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hy .9s cubic-bezier(.65,0,.25,1) forwards; }
.trail .step:nth-child(3) svg.hy path { animation-delay: .25s; } .trail .step:nth-child(4) svg.hy path { animation-delay: .5s; }
@keyframes hy { to { stroke-dashoffset: 0; } }
.qmenu { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.qmenu a { padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
.qmenu a:hover { color: var(--ink); }
.qmenu a[aria-current="page"] { color: var(--ink); border-color: var(--dc, var(--ink)); }
.qmenu .sep { width: 1px; background: var(--rule); }
.qmenu a[data-d="see"] { --dc: var(--see) } .qmenu a[data-d="build"] { --dc: var(--build) } .qmenu a[data-d="gather"] { --dc: var(--gather) } .qmenu a[data-d="tell"] { --dc: var(--tell) }

/* A living root down the left of a project list: one branch to each project, lit in the door colour on hover */
.rooted { position: relative; padding-left: 34px; }
.rooted svg.root { position: absolute; left: 0; top: 0; width: 34px; height: 100%; overflow: visible; pointer-events: none; }
.rooted svg.root path { fill: none; stroke: var(--rule); stroke-width: 1.2; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.rooted svg.root path.trunk { stroke: var(--muted); opacity: .5; }
.rooted svg.root path.on { stroke: var(--dc, var(--ink)); stroke-width: 1.8; }

/* Pages fade into each other (browsers without view transitions simply navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) { .qmenu { width: 100%; gap: 0 16px; } .qmenu a { padding-block: 10px; } .qmenu .sep { display: none; } .trail a, .trail [aria-current] { padding-block: 10px; } .trail .step.mid { display: none; } .rooted { padding-left: 22px; } .rooted svg.root { width: 22px; } }
@media (prefers-reduced-motion: reduce) { .trail svg.hy path { animation: none; stroke-dashoffset: 0; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Touch screens: every small link gets a comfortable hit area */
@media (pointer: coarse) {
  footer.foot nav a, .reads .more, .facts .sites a, .s-after a, .elsewhere a, .qmenu a, .trail a { display: inline-block; padding-block: 12px; }
  .row ul a, .grows li a { display: inline-block; padding-block: 8px; }
}

/* Smart header: sticks to the top, steps aside on the way down, returns on the way up */
.trailbar.smart { position: sticky; top: 0; z-index: 20; background: var(--paper); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.trailbar.smart.away { transform: translateY(-110%); }
.trailbar.smart.lifted { box-shadow: 0 1px 0 var(--rule); }
.qmenu a.write { color: var(--ink); border-bottom: 1.5px solid var(--mark, #c8322a); }
@media (prefers-reduced-motion: reduce) { .trailbar.smart { transition: none; } }
/* Phones: the header stays one trail line and one swipeable menu line (audit: it took a quarter of the screen) */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .trailbar { padding-block: 6px; gap: 0 16px; }
  .qmenu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; gap: 0 clamp(8px, 2.6vw, 16px); font-size: 12.5px; justify-content: space-between; }
  .qmenu::-webkit-scrollbar { display: none; }
  .qmenu a, .trail a, .trail [aria-current] { padding-block: 11px; }
}

/* landscape phones: trail and menu share one line */
@media (max-height: 500px) and (orientation: landscape) { .trailbar { flex-wrap: nowrap; } .qmenu { width: auto; flex: 1 1 auto; justify-content: flex-end; gap: 0 18px; } .trail .step.mid { display: none; } }