/* graveyard.css — the pet graveyard: an album insert tucked under the obi.

   Print, not a panel. One die-cut sheet of card at a fixed trim (1:√2, as wide
   as fits under the obi), printed in two inks: the theme's darkest, and its
   accent darkened until it reads on the card (pet-graveyard.js sets both;
   these are the stand-ins until it does). Fine paper, not the obi's stock:
   the site's grain at a fraction of the obi's, and a little handled. The
   accent runs off its free edge as a band and on over the die-cut tab. The
   whole sheet throws one soft shadow, in the page's light (mostly from above,
   a little from the right).

   On a wide screen it lies under the obi with only its tab out past the obi's
   edge. Click the tab, or take hold of it and pull, and it slides out over the
   stage with the obi's shadow across it; the tab again, a push, or Esc, and it
   goes back under. With no room beside the obi it waits below instead, its
   tab peeking up, and comes up over the page: in a narrow window below the
   foot of the screen; on a phone, where the page scrolls, below the foot of
   the page, its tab at the bottom of the page.

   Every past life is a track on it, set as a tracklist, and how long it lived
   is its time. */

/* Where it comes out: a clip the size of the space it fills, so that tucked
   away it is hidden under the obi's edge (or below the foot of the screen,
   or of the page). */
.gy-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--spine-w) + var(--obi-w));
    right: 0;
    overflow: hidden;
    pointer-events: none;
    /* The obi's layer (99), and before the obi in the page: under the obi,
       over the stage's dust (dust.js pins that at 99 too, earlier still). */
    z-index: 99;
}

.gy-insert {
    --gy-paper: #f8f6f1;
    --gy-ink: var(--ink-900);
    --gy-spot: color-mix(in srgb, var(--obi-accent) 65%, var(--ink-900));
    --gy-rule: color-mix(in srgb, var(--gy-ink) 16%, transparent);
    --gy-mute: color-mix(in srgb, var(--gy-ink) 62%, var(--gy-paper));
    --gy-grain: url("/assets/img/texture/paper-grain.svg");     /* (the obi's, laid on thinner below) */
    --gy-band: 5px;
    /* The trim: never wider than the obi it hides under, 1:√2, and shorter
       only when the window is. */
    --gy-w: min(calc(var(--obi-w) - 64px), calc(100vw - var(--spine-w) - var(--obi-w) - 40px));
    position: absolute;
    top: 26px;
    left: 0;
    width: var(--gy-w);
    height: min(calc(var(--gy-w) * 1.4142), calc(100% - 52px));
    display: flex;
    pointer-events: none;            /* (only the card and its tab take the pointer) */
    /* One sheet, one shadow, in the page's light: mostly from above, shifted
       a little to the right. So a soft shadow just below it, a touch to the
       left. Thin paper lying flat: kept small. */
    filter: drop-shadow(-1px 3px 5px rgba(0, 0, 0, .24));
    transform: translateX(-100%);    /* tucked: all of it under the obi but the tab */
}
.gy-insert.is-out { transform: translateX(0); }
/* It slides only while it is being moved (pulled, pushed, let go, peeked at:
   pet-graveyard.js sets is-moving for the length of the slide). A window
   changing under it puts it straight in its new place. */
.gy-insert.is-moving { transition: transform .55s cubic-bezier(.2, .75, .15, 1); }
.gy-insert.is-dragging { transition: none; }

/* ── the card ── */
.gy-insert__paper {
    position: relative;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 0;
    container-type: inline-size;
    color: var(--gy-ink);
    background:
        linear-gradient(to left, var(--gy-spot) var(--gy-band), transparent var(--gy-band)),   /* (the accent, run off its free edge) */
        var(--gy-paper);
    font-family: "Fira Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.3;
    pointer-events: auto;
    /* Tucked away it is out of sight and out of reach (of the keyboard too),
       once it has slid under. */
    visibility: hidden;
}
.gy-insert.is-moving .gy-insert__paper { transition: visibility 0s linear .55s; }
.gy-insert.is-out .gy-insert__paper,
.gy-insert.is-dragging .gy-insert__paper {
    visibility: visible;
    transition: none;
}
/* It has been handled: a real sheet of paper, crumpled and smoothed out again
   (ambientCG Paper003, CC0; centred on mid-grey, so its lit facets brighten
   and its shaded ones darken), laid over the print as well as the paper.
   Strength: 70%, picked on the proofs (2026-10-16). */
.gy-insert__paper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/img/texture/sheet-handled.webp") 0 0 / 100% 100% no-repeat;
    mix-blend-mode: soft-light;
    opacity: .7;
    pointer-events: none;
}
/* Its grain: the site's, laid on thin, over all of it, print and paper alike
   (as the obi's stamp has it). */
.gy-insert__paper::after,
.gy-insert__tab::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gy-grain) repeat;
    opacity: .4;
    border-radius: inherit;
    pointer-events: none;
}

.gy__head { flex: none; }
.gy__head p { margin: 0; }
.gy__cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--gy-spot);
}
.gy__head h2 {
    margin: 12px 0 0 -2px;
    font: 800 min(92px, 26cqi)/.78 "Sofia Sans Extra Condensed", sans-serif;
    letter-spacing: -.012em;
}
.gy__head h2:focus { outline: none; }
.gy__head .gy__ja {
    margin-top: 10px;
    font: 12px/1 Kosugi, sans-serif;
    letter-spacing: .42em;
    color: var(--gy-spot);
}
.gy__head .gy__sum {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 7px;
    border-top: 5px solid var(--gy-spot);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* The tracks, set as a tracklist: number, picture, name led by dots to its
   time, its dates beneath. Only they scroll; the head and foot stay put. */
.gy__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 14px -24px 0;
    padding: 0 24px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--gy-rule) transparent;
}
.gy__lives { margin: 0; padding: 0; list-style: none; }
.gy__life {
    display: grid;
    grid-template-columns: 3ch 40px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 5px 0;
}
.gy__no { font-weight: 700; color: var(--gy-spot); }
.gy__life canvas { display: block; width: 40px; height: 36px; image-rendering: pixelated; }
.gy__life p { margin: 0; }
.gy__line { display: flex; align-items: baseline; }
.gy__name { min-width: 0; font: 650 13.5px/1.2 Inter, sans-serif; overflow-wrap: break-word; }
.gy__lead { flex: 1; min-width: 12px; margin: 0 7px; border-bottom: 1px dotted var(--gy-mute); transform: translateY(-3px); }
.gy__time { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.gy__life .gy__when { margin-top: 2px; font-size: 9.5px; letter-spacing: .08em; color: var(--gy-mute); }

/* Nobody laid here yet: the first track, blank. */
.gy__lives:empty::before {
    content: "01";
    display: block;
    padding: 12px 0 3px;
    border-bottom: 1px dotted color-mix(in srgb, var(--gy-spot) 50%, var(--gy-paper));
    font-weight: 700;
    color: color-mix(in srgb, var(--gy-spot) 50%, var(--gy-paper));
}

.gy__more {
    all: unset;
    display: block;
    margin: 14px auto 0;
    padding: 5px 14px;
    font: 700 10px/1 "Fira Mono", ui-monospace, monospace;
    letter-spacing: .16em;
    color: var(--gy-spot);
    border: 1px solid var(--gy-spot);
    cursor: pointer;
}
.gy__more[hidden] { display: none; }
.gy__more:focus-visible { outline: 2px solid var(--gy-spot); outline-offset: 2px; }

.gy__foot {
    flex: none;
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 16px;
}
.gy__code {
    width: 53px;
    height: 24px;
    background: var(--gy-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 24'%3E%3Crect x='0' width='2' height='24'/%3E%3Crect x='3' width='1' height='24'/%3E%3Crect x='5' width='1' height='24'/%3E%3Crect x='8' width='3' height='24'/%3E%3Crect x='12' width='1' height='24'/%3E%3Crect x='14' width='2' height='24'/%3E%3Crect x='18' width='1' height='24'/%3E%3Crect x='20' width='1' height='24'/%3E%3Crect x='24' width='2' height='24'/%3E%3Crect x='27' width='1' height='24'/%3E%3Crect x='30' width='1' height='24'/%3E%3Crect x='32' width='3' height='24'/%3E%3Crect x='36' width='1' height='24'/%3E%3Crect x='39' width='2' height='24'/%3E%3Crect x='42' width='1' height='24'/%3E%3Crect x='44' width='2' height='24'/%3E%3Crect x='47' width='1' height='24'/%3E%3Crect x='50' width='3' height='24'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 24'%3E%3Crect x='0' width='2' height='24'/%3E%3Crect x='3' width='1' height='24'/%3E%3Crect x='5' width='1' height='24'/%3E%3Crect x='8' width='3' height='24'/%3E%3Crect x='12' width='1' height='24'/%3E%3Crect x='14' width='2' height='24'/%3E%3Crect x='18' width='1' height='24'/%3E%3Crect x='20' width='1' height='24'/%3E%3Crect x='24' width='2' height='24'/%3E%3Crect x='27' width='1' height='24'/%3E%3Crect x='30' width='1' height='24'/%3E%3Crect x='32' width='3' height='24'/%3E%3Crect x='36' width='1' height='24'/%3E%3Crect x='39' width='2' height='24'/%3E%3Crect x='42' width='1' height='24'/%3E%3Crect x='44' width='2' height='24'/%3E%3Crect x='47' width='1' height='24'/%3E%3Crect x='50' width='3' height='24'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ── its tab: the same sheet, die-cut long on its free edge, sticking out
   from under the obi, the accent band printed on over it. Click it or pull
   it. On it, the graveyard's flower reversed out of the accent, dead centre
   (16 × 24 on 32 × 64). ── */
.gy-insert__tab {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 44px;
    right: -32px;
    width: 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    background: var(--gy-spot);
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;              /* (it is pulled by hand) */
    user-select: none;
    -webkit-user-select: none;
}
.gy-insert__tab .icon { width: 30px; height: 30px; color: var(--gy-paper); }   /* (the 640 box: the flower 16 × 24 in it) */
.icon--flower {
    -webkit-mask-image: url("/assets/icon/grave-flower.svg");
    mask-image: url("/assets/icon/grave-flower.svg");
}
.gy-insert__tab:focus-visible { outline: 2px solid var(--gy-spot); outline-offset: 2px; }

/* A hand on the tab (or the keyboard's focus) draws it out a little. (Only a
   hand that hovers: a finger's tap would leave it peeking.) */
@media (min-width: 1010px) {
    .gy-insert:not(.is-out):has(.gy-insert__tab:focus-visible) {
        transform: translateX(calc(-100% + 10px));
        transition: transform .25s cubic-bezier(.2, .75, .15, 1);
    }
    .gy-insert:has(.gy-insert__tab:focus-visible) .gy-insert__paper { visibility: visible; transition: none; }
}
@media (min-width: 1010px) and (hover: hover) {
    .gy-insert:not(.is-out):has(.gy-insert__tab:hover) {
        transform: translateX(calc(-100% + 10px));
        transition: transform .25s cubic-bezier(.2, .75, .15, 1);
    }
    .gy-insert:has(.gy-insert__tab:hover) .gy-insert__paper { visibility: visible; transition: none; }
}

/* ── no room beside the obi (a narrow window, a phone): it waits below the
   bottom of the screen with its tab peeking up, and comes up over the page,
   on top of everything — so it never passes through the obi. (A phone's page
   scrolls: there it waits below the page's foot instead, below.) Its accent
   band runs along the top edge, where the tab is. ── */
@media (max-width: 1009px) {
    .gy-slot {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;                /* over the obi */
    }
    .gy-insert {
        --gy-w: calc(var(--obi-w) - 20px);
        top: auto;
        bottom: 10px;
        left: calc(var(--spine-w) + 10px);
        height: min(calc(var(--gy-w) * 1.4142), calc(100% - 52px));
        transform: translateY(calc(100% + 10px));      /* below the screen, its tab peeking up */
    }
    .gy-insert.is-out { transform: translateY(0); }
    /* (and up a little, for a hand that hovers or the keyboard's focus) */
    .gy-insert:not(.is-out):has(.gy-insert__tab:focus-visible) {
        transform: translateY(100%);
        transition: transform .25s cubic-bezier(.2, .75, .15, 1);
    }
    .gy-insert:has(.gy-insert__tab:focus-visible) .gy-insert__paper { visibility: visible; transition: none; }
    @media (hover: hover) {
        .gy-insert:not(.is-out):has(.gy-insert__tab:hover) {
            transform: translateY(100%);
            transition: transform .25s cubic-bezier(.2, .75, .15, 1);
        }
        .gy-insert:has(.gy-insert__tab:hover) .gy-insert__paper { visibility: visible; transition: none; }
    }
    .gy-insert__tab {
        top: -32px;
        right: auto;
        left: 50%;
        width: 64px;
        height: 32px;
        margin-left: -32px;
        border-radius: 3px 3px 0 0;
    }
    .gy-insert__paper {
        padding: 22px 18px 0;
        background:
            linear-gradient(to bottom, var(--gy-spot) var(--gy-band), transparent var(--gy-band)),   /* (its free edge here, where the tab is) */
            var(--gy-paper);
    }
    .gy__list { margin: 14px -18px 0; padding: 0 18px 14px; }
}
/* ── a phone: the page scrolls, so the sheet waits below the foot of the page
   (the obi's end; pet-graveyard.js measures it into --gy-foot), not the
   screen's, and its tab is at the bottom of the page, on a strip of the
   obi's paper kept clear for it. Pulled out, it lies at the foot of the
   page, and scrolls with it. ── */
@media (max-width: 768px) {
    .gy-slot {
        position: absolute;
        bottom: auto;
        height: var(--gy-foot, 100%);
    }
    .gy-insert {
        --gy-w: calc(100vw - 20px);
        left: 10px;
        height: min(calc(var(--gy-w) * 1.4142), calc(100dvh - 52px));
    }
    .obi__end { padding-bottom: 52px; }     /* (its 10px, then the tab's 32 and 10 above it) */
}

@media (prefers-reduced-motion: reduce) {
    .gy-insert,
    .gy-insert__paper,
    .gy-insert__tab { transition: none !important; }
}