/* ==========================================================================
   XTR DIRECT — the orientation strip
   --------------------------------------------------------------------------
   The problem this solves: the site had good pages that nobody could place. An
   h1 of "Projects" or "About" says what the page is called, not what it is for
   or what to do on it. Eight of eleven pages had no primary action at all.

   DIRECT answers three questions above the fold, in one line, on every page:

     WHERE AM I      Navigator / Projects
     WHAT IS THIS    one sentence naming the page's actual job
     WHAT NEXT       the single best action from here

   It is static markup emitted by scripts/build-direct.py, so it survives
   JavaScript being disabled. It is not an overlay and not dismissible — it is
   the page's own opening sentence.

   Visible on MOBILE ONLY. See the note on .direct below for why. It stays in
   the DOM for machines even where it is hidden for people.
   ========================================================================== */

/* MOBILE ONLY. You asked for this to not appear on a desktop: a bar that tells
   you where to go next reads as hand-holding once you are already oriented,
   and on a wide screen it is a whole line of chrome above content that does
   not need it.

   It stays in the markup, hidden with CSS rather than removed, because it is
   still useful to anything reading the document: an agent or a crawler gets
   the page's purpose and its primary route as plain text. Machines get the
   orientation; a desktop visitor does not see it.

   Below the breakpoint it is the whole orientation affordance, so it stacks:
   where, then what, then the action last, under the thumb. */
.direct {
    display: none;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0 0 30px;
    padding: 11px 14px;
    border-left: 2px solid var(--red);
    background: var(--surface-1);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.direct__where {
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
}
.direct__where a { color: var(--text-3); text-decoration: none; }
.direct__where a:hover { color: var(--red); }

/* The sentence that says what this page is actually for. */
.direct__what {
    flex: 1 1 320px;
    min-width: 0;
    color: var(--text-2);
}

/* Exactly one primary action. If a page has two, one of them is secondary. */
.direct__next {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--red-dim);
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.direct__next:hover,
.direct__next:focus-visible {
    background: var(--red);
    color: #fff;
}
.direct__next::after { content: "→"; }

/* On a phone the strip stacks: where, then what, then the action last so it
   lands under the thumb rather than beside the text. */
@media (max-width: 768px) {
    .direct {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        padding: 12px 13px;
        font-size: 0.76rem;
    }
    .direct__what { flex: 1 1 auto; }
    .direct__next {
        justify-content: center;
        min-height: 44px;   /* WCAG 2.2 target size */
    }
}

/* The h1 gains a qualifier so "Projects" becomes "Every system, and what state
   it is in" — the page names its own job before the reader scrolls. */
.direct-title { margin-bottom: 10px; }