/* ==========================================================================
   masthead.css — the site logo + wordmark, shared by every page.

   The masthead must be identical on the index and on every post (Loren,
   2026-08-28). This file is its single stylesheet: the homepage (which loads
   index-preview/preview.css), the posts (style.css) and the post-preview
   demos (post.css) all link it after their own stylesheet. The markup is
   likewise one file, _tools/masthead.html (a pandoc partial for posts;
   build-index.mjs stamps it into the hand-authored pages).

   What stays in each page stylesheet is only .site-header-inner — the header's
   placement in that page's layout (the index centers it on --content-width;
   posts have the data-header anchoring axis).
   ========================================================================== */

:root {
    --font-wordmark: "Cardo", Georgia, "Times New Roman", serif;
    /* header sizes — lab-driven (index Size Lab / Font Lab → masthead:v1) */
    --size-wordmark: 20px;
    --size-logomark: 25px; /* base; scale 1.92 => 48px displayed (reconciled 2026-09-08: base-28 and scale-1.8 were two routes to the same size — compounded they would be 50px) */
    /* Shipped wordmark: the "from Simplex" lockup (Loren, 2026-08-31). Only
       the tokens whose var() fallbacks differ need declaring: tagline shown,
       line 1 fully upright, mark scaled to span both lines. */
    --wordmark-tagline: block;
    --wordmark-em-style: normal;
    --wordmark-logo-scale: 1.92; /* 48px box (Loren, 2026-09-09) */
    /* declared (at their fallback values) so the drift panel can read every
       masthead token's shipped value from :root */
    --wordmark-style: normal;
    --wordmark-prefix: none;
    --wordmark-conn-from: inline;
    --wordmark-conn-by: none;
    --wordmark-simplex-weight: 400;
    --wordmark-simplex-style: normal;
}

/* --------------------------------------------------------------------------
   Logo mark + serif wordmark, no rule, no nav (the logo is the way back)
   -------------------------------------------------------------------------- */
.site-header { width: 100%; }

.site-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-wordmark);
    font-size: var(--size-wordmark);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-header .logo-mark {
    width: calc(var(--size-logomark) * var(--wordmark-logo-scale, 1));
    height: calc(var(--size-logomark) * var(--wordmark-logo-scale, 1));
    display: block;
    flex-shrink: 0;
}

/* logo.js / logo-lab.js replace the .logo-mark span with a fixed-size canvas;
   force the display size so --size-logomark keeps working after the swap
   (drag = raster-scaled; re-renders crisp once the canvas is next rebuilt). */
.site-header .logo canvas {
    width: calc(var(--size-logomark) * var(--wordmark-logo-scale, 1)) !important;
    height: calc(var(--size-logomark) * var(--wordmark-logo-scale, 1)) !important;
}

/* Instant first paint for the mark: a prerendered still of the resting cloud
   (regenerate with _tools/make-logo-rest.mjs after logo tuning changes) shows
   before the 644KB point asset arrives; logo.js's canvas replaces the span
   and the background never shows again. */
.site-header .logo-mark {
    background: url(/assets/logo-rest.png) center / contain no-repeat;
}
.site-header .logo canvas.logo-mark { background: none; }

.site-header .logo-text { line-height: 1; font-style: var(--wordmark-style, normal); }
/* "Simplex" prefix — shown only in the wordmark's simplex mode; always
   upright even when the rest of the wordmark is italic. */
.logo-text .wm-prefix { display: var(--wordmark-prefix, none); font-style: normal; }

/* The wordmark's second word ("Updates") is still wrapped in <em> in the
   masthead markup, but the shipped lockup (Loren, 2026-08-31) sets
   --wordmark-em-style: normal in :root, so it renders upright. The wrapper is
   kept only as the hook for the Font Lab's single-line styles ("Belief
   *Updates*", "Simplex *Belief Updates*"), which set the token back to italic
   — a fossil of the 2026-07 "Simplex *Publications*" wordmark. */
.site-header .logo-text em { font-style: var(--wordmark-em-style, italic); }

/* --------------------------------------------------------------------------
   Masthead lockup (Loren, 2026-08-30). The logo is a CONTAINER with two
   links — mark + "Belief Updates" go home; the tagline's "Simplex" goes to
   simplexaisafety.com (anchors can't nest, hence the structure). The tagline
   ("from/by Simplex") shows only in the lockup wordmark styles:
     --wordmark-tagline        none | block (shipped default)
     --wordmark-conn-from/-by  which connective shows (italic)
     --wordmark-simplex-weight 400 | 700
   Line 1 keeps the single-line styles' tokens, so all previous wordmark
   options are untouched.
   -------------------------------------------------------------------------- */
.site-header .logo .logo-home,
.site-header .logo .wm-line1 {
    color: inherit;
    text-decoration: none;
}
.site-header .logo .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.site-header .wm-tagline {
    display: var(--wordmark-tagline, none);
    font-family: var(--font-wordmark);
    font-size: 0.62em;
    line-height: 1.35;
    color: var(--color-text);
}
.site-header .wm-tagline .wm-conn { font-style: italic; }
.site-header .wm-tagline .wm-conn-from { display: var(--wordmark-conn-from, inline); }
.site-header .wm-tagline .wm-conn-by { display: var(--wordmark-conn-by, none); }
.site-header .wm-tagline .wm-simplex {
    color: inherit;
    text-decoration: none;
    font-weight: var(--wordmark-simplex-weight, 400); font-style: var(--wordmark-simplex-style, normal);
    margin-left: 0.28em;
}
/* .wm-simplex-active: applied by logo.js while the hovered mark sits at the
   true geometry — the tagline echoes the hover it is momentarily linked to */
.site-header .wm-tagline .wm-simplex:hover,
.site-header .wm-tagline .wm-simplex.wm-simplex-active { text-decoration-line: underline; text-decoration-style: dotted; /* longhands: Safari drops the unprefixed multi-value shorthand */ text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   The conditioned wordmark (wordmark.js): hovering the home link turns
   "Belief" into a categorical distribution — each letter fronts a prism in
   the index's projection (same recipe: edge 0.5, faces 0.13/0.22) whose depth
   follows the pointer. Letters are static and unspread; only the faces behind
   them grow. The transparent border is compensated by a negative margin so
   wrapping the letters never widens the masthead.
   -------------------------------------------------------------------------- */
.logo-text .wm {
    display: inline-flex;
    gap: 0;
    transition: gap 260ms cubic-bezier(.25, .6, .25, 1);
}
/* 4px gap minus the slabs' -1px border-compensation margins = 2px of real
   air between open slabs. At 2px the adjacent 1px borders TOUCHED (net 0),
   landing on fractional positions, so every seam rendered differently —
   doubled lines, slivers, "edges that don't line up". */
.logo-text .wm.open { gap: 4px; }
.logo-text .wm-lt {
    --d: 0px;
    position: relative;
    /* a slab, not an outlined glyph: the box is taller than the type with the
       letter centered in it (identity-page proportions, slightly tightened) */
    display: inline-flex; align-items: center; justify-content: center;
    height: 1.3em;
    /* transparent at rest: with the boxes stacked right-over-left (for the
       down-right view), an opaque box would shave the previous glyph's
       overhang (Cardo's S). Backgrounds are only needed while the slabs have
       volume — .solid, managed by wordmark.js — when the open-state spread
       gives every glyph room anyway. */
    background: transparent;
    border: 1px solid transparent;
    margin: -1px;
    /* the slab's side air arrives with the spread — at rest the letters keep
       normal text spacing */
    transition: border-color 160ms, padding 260ms cubic-bezier(.25, .6, .25, 1);
}
/* integer px: em padding (1.2px at 20px) put borders on half-pixels. --oh-l/-r
   are the glyph's ink overhang past its advance width, measured by wordmark.js
   (Cardo's "f" hooks ~3px to the right), so the slab's face covers the whole
   letter instead of clipping the hook. */
.logo-text .wm.open .wm-lt { padding: 0 calc(1px + var(--oh-r, 0px)) 0 calc(1px + var(--oh-l, 0px)); }
/* color-mix against --color-bg, not bare rgba() (Loren, 2026-09-09): true rgba()
   transparency composites with whatever is behind it, including an ADJACENT
   letter's overlapping face once several slabs are open at once, so the
   prisms read as "open" on top. color-mix gives the same apparent alpha
   against the page background while painting fully opaque. The --edge-a /
   --face-b-a / --face-r-a tokens are style.css's prism tokens (0.5 / 0.13 /
   0.22); the homepage stylesheet does not define them, hence the fallbacks. */
.logo-text .wm.open .wm-lt { border-color: color-mix(in srgb, black calc(var(--edge-a, 0.5) * 100%), var(--color-bg)); }
.logo-text .wm.solid .wm-lt { background: var(--color-bg); }
.logo-text .wm-lt::before, .logo-text .wm-lt::after {
    content: ""; position: absolute; pointer-events: none;
    /* explicit: preview.css's universal box-sizing rule is bare `*`, which
       never matches pseudo-elements — content-box faces grow 2px past the
       stated size from their own borders and protrude past the seam */
    box-sizing: border-box;
}
/* Faces anchor to the BORDER box: percentage offsets on abspos children
   resolve against the padding box, which sits 1px inside the slab's border —
   that shifted each face a pixel down/right of the front face's outer edges
   (the right face visibly "too low"). The 1px terms below are the border.
   Viewpoint: from ABOVE and to the right (Eric, 2026-09-08) — the slabs recede
   up-and-right into the page, into the header's top padding, instead of
   down-and-right into the "from Simplex" tagline beneath the wordmark. */
.logo-text .wm-lt::before {   /* top face */
    left: -1px; bottom: calc(100% + 1px); width: calc(100% + 2px); height: var(--d);
    background: color-mix(in srgb, rgb(26, 24, 20) calc(var(--face-b-a, 0.13) * 100%), var(--color-bg));
    border: 1px solid color-mix(in srgb, black calc(var(--edge-a, 0.5) * 100%), var(--color-bg)); border-bottom: none;
    transform: skewX(-45deg); transform-origin: bottom left;
}
.logo-text .wm-lt::after {    /* right face */
    left: calc(100% + 1px); top: -1px; width: var(--d); height: calc(100% + 2px);
    background: color-mix(in srgb, rgb(26, 24, 20) calc(var(--face-r-a, 0.22) * 100%), var(--color-bg));
    border: 1px solid color-mix(in srgb, black calc(var(--edge-a, 0.5) * 100%), var(--color-bg)); border-left: none;
    transform: skewY(-45deg); transform-origin: bottom left;
}
.logo-text .wm-lt.flat::before, .logo-text .wm-lt.flat::after { display: none; }