/* ---------- background ---------- */
body {
    background-image: url("/assets/images/index/minecraft-planks-dithered.png");
    background-repeat: repeat;
    background-size: 120px auto; /* tile size - the image itself is 720x720 */

    /* content centred and not endlessly wide.
       the wooden background still fills the whole window anyway. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 30px;

    /* content vertically in the middle of the window */
    box-sizing: border-box;
    min-height: 100vh;
    display: grid;
    align-content: center;

    font-family: monospace;
    color: #2b1f16;
}

/* ---------- two columns: letter left, hub right ---------- */
.top {
    display: grid;
    /* minmax(0, 1fr) instead of 1fr: otherwise the column is not allowed to get
       smaller than the widest image inside it and blows up the layout */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
    gap: 50px;
    align-items: center;
}

/* light panel so the text is readable on the wood */
.letter,
.outro {
    background-color: #f3efc2;
    border: 4px double #6b4a2f;
    border-radius: 12px;
    padding: 20px 26px;
    line-height: 1.6;
    filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.25));
}

/* pull the letter to the same height as the sticker column */
.left {
    align-self: stretch;
    display: grid;
}

/* the letter already fills the column height - as a flex column the foot can
   push itself down with margin-top:auto, instead of sticking to the signpost */
.letter {
    display: flex;
    flex-direction: column;
}

.letter h1 {
    font-size: 1.3rem;
    margin-top: 0;
    /* inside a flex container margins no longer collapse. the gap below
       therefore comes from the paragraph underneath alone, otherwise it doubles */
    margin-bottom: 0;
}

/* ---------- signpost: one line per sticker ---------- */
.signpost {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* the whole line is the link, so the hover area and the click area are the same */
.signpost a {
    display: block;
    padding: 4px 8px;
    margin-left: -8px; /* text stays in line with the paragraphs */
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.signpost a::before {
    content: "\2192\00a0"; /* arrow + non-breaking space */
}

.signpost a:hover,
.signpost a:focus {
    background-color: #e6e0a8;
}

.signpost strong {
    text-decoration: underline;
}

.signpost strong::after {
    content: " \2013"; /* en dash, belongs to the label not to the text */
}

/* ---------- mandatory legal links at the foot of the letter ---------- */
/* margin-top:auto pushes them to the bottom edge of the letter, centred.
   quieter than the signpost: findable yes, inviting no. the line
   sets them apart, so they do not come across as one more place */
.legal {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid #cfc79a;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;
}

.legal a {
    color: inherit;
}

/* not built yet - be honest instead of linking into nothing */
.soon {
    font-size: 0.75rem;
    color: #8a6a4a;
    border: 1px solid #8a6a4a;
    border-radius: 4px;
    padding: 0 4px;
    white-space: nowrap;
}

/* right column: a cap on the size, but centred within the column.
   smaller = smaller stickers with more air around them */
.right {
    max-width: 680px;
    margin: 0 auto;
}

/* ---------- heading above the hub ---------- */
h2 {
    margin: 0 0 30px;
    color: #f3efc2;
    text-shadow: 3px 3px 0 #2b1f16;
}

/* ---------- the 5 stickers ---------- */
/* two across, three down. the rows are written out rather than left to the
   implicit grid, because that is the shape the wall is meant to have - the
   fifth sticker sitting alone in the bottom left is on purpose. a sixth would
   fill the gap, a seventh still gets a row of its own. */
.hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 60px 50px;
}

.sticker {
    position: relative; /* so label/note can position against this */
    display: block;
    text-decoration: none;
    /* position and brightness live in variables, so the hover state is defined
       only once and the signpost can trigger it as well */
    transform: rotate(var(--rotate)) scale(var(--zoom, 1));
    transition: transform 0.15s ease-out;
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.25));
}

/* each one sits a little differently, like it was really stuck on */
.hub .sticker:nth-child(1) { --rotate: -2deg; }
.hub .sticker:nth-child(2) { --rotate: 1.5deg; }
.hub .sticker:nth-child(3) { --rotate: 2deg; }
.hub .sticker:nth-child(4) { --rotate: -1deg; }
.hub .sticker:nth-child(5) { --rotate: 1deg; }

/* awake: straighten it, slightly bigger, image darker so the label carries.
   triggered by the sticker itself or by its line in the signpost on the left */
.hub .sticker:hover,
.hub .sticker:focus,
.top:has(.signpost [data-place="feed"]:hover) .hub [data-place="feed"],
.top:has(.signpost [data-place="personal"]:hover) .hub [data-place="personal"],
.top:has(.signpost [data-place="me"]:hover) .hub [data-place="me"],
.top:has(.signpost [data-place="guestbook"]:hover) .hub [data-place="guestbook"],
.top:has(.signpost [data-place="arena"]:hover) .hub [data-place="arena"] {
    --rotate: 0deg;
    --zoom: 1.06;
    --bright: 0.7;
}

/* placeholder for the image - an <img> goes in here later */
.placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background-color: #f3efc2;
    border: 2px dashed #6b4a2f;
    font-size: 0.75rem;
    color: #8a6a4a;
    filter: brightness(var(--bright, 1));
    transition: filter 0.15s ease-out;
}

/* real images in the sticker - same size as the placeholders */
.sticker img {
    display: block;
    width: 100%;
    /* same format as the placeholder boxes.
       to make them taller: e.g. 4 / 5 or 3 / 4 */
    aspect-ratio: 1 / 1;
    /* contain and not cover: they are all cut-outs on a transparent ground,
       so there is no background to fill the square with anyway - cropping
       would only ever eat the subject. the three photos are near square and
       lose nothing by it; the are.na mark is wide and would have lost its two
       outer stars to cover */
    object-fit: contain;
    filter: brightness(var(--bright, 1));
    transition: filter 0.15s ease-out;
}

/* ---------- label, sits at the bottom of the image and is always visible ---------- */
.label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    text-align: center;
    font-size: 1.5rem;
    color: #fff7dd;
    text-shadow: 2px 2px 0 #2b1f16;
    pointer-events: none;
}

/* ---------- bottom ---------- */
.outro {
    margin-top: 60px;
}

.bottom {
    margin-top: 60px;
    text-align: center;
    font-size: 0.75rem;
    color: #f3efc2;
    text-shadow: 2px 2px 0 #2b1f16;
}

.bottom .button-slot {
    display: inline-block;
    width: 88px;
    height: 31px;
    margin: 4px;
    border: 1px dashed #f3efc2;
}

/* ---------- narrow: letter on top, stickers as a 2x2 below ---------- */
@media (max-width: 760px) {
    body {
        padding: 24px 16px;
        /* no longer centred: stacked, the content is taller than the screen,
           and centred it would be pushed out at the top and cut off */
        align-content: start;
    }

    .top {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    /* the letter only pulls itself to track height in the two-column view */
    .left {
        align-self: auto;
    }

    /* stays at 2 columns and 3 rows, only tighter */
    .hub {
        gap: 26px 20px;
    }

    /* otherwise the stickers get huge at tablet width and you scroll forever */
    .right {
        max-width: 520px;
    }

    .label {
        font-size: 1.15rem;
    }

    .letter {
        padding: 16px 18px;
    }
    .letter h1 {
        font-size: 1.1rem;
    }
}