/* ==========================================================================
   landing.css — shared look for the public pages (index.php, 404.php,
   legal.php). Loaded after app.css, which supplies .stage/.word/.tag/
   .scanline/.noise. Identical copies live in public/assets/css and
   statistics/assets/css (404.php is served on every host); change one,
   copy to the others.
   ========================================================================== */

html {
    background: #f4f1ec;
}

body {
    caret-color: transparent;
    background:
        radial-gradient(circle at 50% 120%, rgba(102, 113, 122, .14), transparent 42rem),
        linear-gradient(rgba(244, 241, 236, .74), rgba(244, 241, 236, .90)),
        url('../img/bg-intro.png') center center / cover no-repeat fixed,
        #f4f1ec;
}

input,
textarea,
[contenteditable="true"] {
    caret-color: auto;
}

.stage {
    background: transparent;
}

/* Corner brand: logo + NGIX on one line. */
.brand {
    display: flex;
    align-items: center;
    gap: .7em;
}

.brand img {
    display: block;
    width: 2.4em;
    height: auto;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 .08em .16em rgba(0, 0, 0, .35));
}

/* Muted line under the centre word (404 path). */
.sub {
    position: absolute;
    z-index: 2;
    top: calc(50% + 2.6em);
    left: 0;
    right: 0;
    padding: 0 1rem;
    overflow: hidden;
    color: #6b6b6b;
    font-size: clamp(9px, .7vw, 11.5px);
    letter-spacing: .2em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bottom-left link block: primary link, then a dot-separated muted row. */
.links {
    position: fixed;
    z-index: 4;
    bottom: clamp(12px, 1.5vw, 26px);
    left: clamp(12px, 1.5vw, 26px);
    max-width: calc(100vw - 9em);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2em;
    font-size: clamp(9px, .7vw, 11.5px);
    line-height: 1;
    letter-spacing: .3em;
}

.links a {
    color: #000;
    text-decoration: none;
}

.links .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: .8em;
}

.links .row a {
    color: #6b6b6b;
}

.links .row a + a::before {
    content: "\00B7";
    content: "\00B7" / "";
    display: inline-block;
    margin: 0 .7em 0 .4em;
    color: #a3a3a3;
    text-decoration: none;
}

.links .row a:hover,
.links .row a:focus-visible,
.links .row a[aria-current="page"] {
    color: #000;
}

.links .portal {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 700;
}

.links .portal svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

.links .portal:hover,
.links .portal:focus-visible {
    color: #6b6b6b;
}

/* --------------------------------------------------------------------------
   Document pages (legal.php): same chrome, but the content scrolls, so the
   corner tags and link block sit in the page flow instead of being fixed.
   -------------------------------------------------------------------------- */
body.doc {
    position: relative;
    min-height: 100%;
    height: auto;
    overflow: auto;
}

body.doc .scanline,
body.doc .noise {
    position: fixed;
}

body.doc .tag {
    position: absolute;
}

.doc-wrap {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(4.5rem, 9vw, 6.5rem) 1.25rem clamp(5rem, 9vw, 7rem);
}

.doc-wrap h1 {
    margin: 0 0 .9rem;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.doc-wrap h2 {
    margin: 2.2rem 0 .7rem;
    font-size: clamp(10px, .8vw, 12px);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.doc-wrap p {
    margin: 0 0 .9rem;
    color: #2b2b2b;
    font-size: clamp(11px, .85vw, 13px);
    line-height: 1.85;
    letter-spacing: .02em;
}

.doc-wrap .muted,
.doc-wrap .meta {
    color: #6b6b6b;
}

.doc-wrap .meta {
    margin-top: 2.6rem;
    overflow-wrap: anywhere;
}

body.doc .links {
    position: static;
    max-width: none;
    margin-top: 3rem;
}