/* base.css - the shared page shell.
   Loaded FIRST on every page, before that page's own stylesheet, so a
   page can still override anything here.

   These rules used to be copy-pasted into style/index/about/music/
   video.css and the inline block in shop.html. They drifted apart, and
   that drift is what kept knocking the logo out of alignment between
   pages. One definition now. */

/* --- page ground ------------------------------------------------- */
/* font-family is deliberately NOT set here: the homepage uses
   Helvetica and the inner pages use Courier. That difference is real,
   so each page keeps declaring its own. */
body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    overflow-x: hidden;
    touch-action: pan-y;
    /* Reserve the scrollbar's width on every page. Without this, pages
       that happen not to overflow centre their content ~8px differently
       from pages that do. */
    scrollbar-gutter: stable;
}

/* --- header ------------------------------------------------------- */
header {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
    margin-bottom: 4vw;
}

/* --- the DVTE logo ------------------------------------------------ */
.title-image {
    width: 200px;
    height: auto;
    margin: 0;
    padding: 0;
    margin-top: 5vw;
    margin-bottom: 0;
    transition: filter 0.3s;

    /* Optical centring. The artwork's ink runs to both edges of its
       canvas, so its bounding box is symmetric, but its alpha centre of
       mass sits 55px left of centre in a 1418px canvas - 7.76px at the
       200px display width. This nudge puts the visual weight on the
       centreline. Verified by rendering each page and measuring the ink
       centre of mass: identical on all five, within 1px of true centre
       at both 390px and 1440px viewports. */
    position: relative;
    left: 8px;
}

.title-image:hover {
    filter: brightness(1.2);
}