/* Drawings: gallery of single drawings with their pinned extras, and the sketches grid. */


/* Gallery */

.drawings-gallery {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 40px;
    align-items: end;
}

.drawing-item {
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.5s var(--ease-gallery),
        filter 0.5s var(--ease-gallery),
        opacity 0.5s var(--ease-gallery);
    position: relative;
    z-index: 1;
}

.drawing-item .frame-wrap { cursor: zoom-in; }

/* A4 sheets. */
.drawing-item--portrait .media-frame-inner { aspect-ratio: 1 / var(--a4); }
.drawing-item--landscape .media-frame-inner { aspect-ratio: var(--a4) / 1; }

/* Every other red rectangle tilts the other way and draws a little faster. */
.drawing-item:nth-child(2n) .sketch-rect-svg { transform: rotate(-1.5deg); }
.drawing-item:nth-child(2n) .sketch-rect-path { transition: stroke-dashoffset 1.3s var(--ease-out); }

.drawing-meta { text-align: left; }

.drawing-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 6px;
}

.drawing-detail {
    font-size: 1.3rem;
    color: var(--red);
}

@media (hover: hover) {
    /* The hovered drawing comes forward; the others blur and fade. */
    .drawings-gallery:hover .drawing-item {
        filter: blur(4px) grayscale(50%);
        opacity: 0.5;
    }

    .drawings-gallery .drawing-item:hover {
        filter: none;
        opacity: 1;
        transform: scale(1.08);
        z-index: 20;
    }
}

@media (max-width: 768px) {
    /* Phones: the gallery breaks out of the page margins (title and intro keep their alignment)
       to gain width, and the title sits closer under the drawing. */
    .drawings-gallery {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-left: -28px;
        margin-right: -28px;
    }

    .drawing-item { gap: 10px; }
}


/* Reference photo */

/* Small polaroid pinned to the corner of a drawing, with an arrow pointing at it; both show
   while the drawing is hovered. */
.ref-photo-wrap {
    position: absolute;
    top: -15px;
    right: -110px;
    width: 120px;
    z-index: 5;
    pointer-events: none;
}

.ref-photo {
    width: 100%;
    opacity: 0;
    transform: rotate(15deg) translateY(20px);
    transition: all 0.5s var(--ease-overshoot);
    filter: drop-shadow(0 15px 25px rgb(0 0 0 / 60%));
}

.drawing-item:hover .ref-photo {
    opacity: 1;
    transform: rotate(6deg) translateY(0);
}

/* The white frame takes its height from the photo's aspect-ratio and has padding. With
   height: 100% on the photo, Chrome ignores the padding and Safari includes it; in a flex
   column both engines give the photo exactly the space between the paddings. */
.ref-photo .media-frame-inner {
    padding: 10px 10px 36px;
    background: var(--photo-paper);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}

.ref-photo .media-frame-img {
    aspect-ratio: 1 / 1;
    height: auto;
    flex: 1 1 0;
    min-height: 0;
}

.ref-arrow {
    position: absolute;
    top: -50px;
    left: -40px;
    width: 90px;
    height: 90px;
    overflow: visible;
    opacity: 0;
    transition: opacity var(--dur-base) ease 0.1s;
    transform: rotate(5deg);
    animation: sketch-wobble var(--sketch-timing);
}

.drawing-item:hover .ref-arrow { opacity: 1; }

.ref-arrow-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s ease 0.2s;
}

.drawing-item:hover .ref-arrow-path { stroke-dashoffset: 0; }

@media (min-width: 992px) and (max-width: 1328px) {
    /* Between the desktop and narrow layouts the gallery's right edge is under 110px from the
       screen edge, and the pinned photo would stick out. It is pulled back inside, keeping 8px
       in hand: the photo is tilted, so its painted box is wider than its slot, and the page
       scrollbar takes its share. */
    .ref-photo-wrap { right: max(-110px, min(-38px, calc(562px - 50vw))); }
}

@media (max-width: 991px) {
    /* The desktop offsets would push the photo outside the page, where overflow-x: hidden clips
       it. It is pulled back, keeping the pinned, crooked look. */
    .ref-photo-wrap {
        right: -18px;
        top: -8px;
        width: 96px;
    }

    .ref-photo .media-frame-inner { padding: 7px 7px 24px; }

    /* Real proportions of the source photo. */
    .ref-photo .media-frame-img { aspect-ratio: 3 / 4; }
}

@media (max-width: 768px) {
    .ref-photo-wrap {
        width: 116px;
        right: -10px;
        top: -12px;
    }
}

@media (max-width: 480px) {
    .ref-photo-wrap {
        width: 104px;
        right: -6px;
    }
}


/* Map pin */

/* Pin and place name dropped on the map drawing while it is hovered. */
.map-pin-wrap {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    z-index: 15;
    pointer-events: none;
}

.map-pin-icon {
    width: 32px;
    height: 48px;
    position: absolute;
    top: 26px;
    left: 84px;
    opacity: 0;
    transform: translateY(-40px) scale(1.2);
    transition: all 0.5s var(--ease-back);
    filter: drop-shadow(0 8px 10px rgb(0 0 0 / 50%));
    animation: sketch-wobble var(--sketch-timing);
}

.drawing-item:hover .map-pin-icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.map-pin-text {
    font-size: 2.8rem;
    color: var(--red);
    position: absolute;
    top: -20px;
    left: -20px;
    transform: rotate(-15deg) scale(0.8);
    opacity: 0;
    transition: all 0.4s ease 0.2s;
    text-shadow: 2px 2px 5px rgb(0 0 0 / 40%);
    letter-spacing: 2px;
}

.drawing-item:hover .map-pin-text {
    opacity: 1;
    transform: rotate(-15deg) scale(1);
}


/* Touch */

@media (hover: none), (pointer: coarse) {
    /* Each drawing rises on its own when it scrolls into view. */
    .drawing-item {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }

    .drawing-item.is-in-view {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered entrance. */
    .drawing-item:nth-child(1) { transition-delay: 0s; }
    .drawing-item:nth-child(2) { transition-delay: 0.1s; }
    .drawing-item:nth-child(3) { transition-delay: 0.2s; }

    /* No blur on the neighbours, no zoom: a hover left by a tap would stay. */
    .drawings-gallery:hover .drawing-item {
        filter: none;
        opacity: 1;
        transform: none;
    }

    .drawings-gallery .drawing-item:hover {
        transform: none;
        filter: none;
    }

    /* The extras drop in once their drawing is in view. The resting and in-view rules weigh as
       much as the hover rules above and come after them, so a hover left by a tap changes
       nothing. */
    .ref-photo,
    .ref-arrow {
        transition: all 0.6s var(--ease-back) 0.8s;
    }

    .drawing-item:not(.is-in-view) .ref-photo { transform: translateY(-40px) scale(1.2); }
    .ref-arrow { transform: translateY(-40px) scale(1.2); }

    .drawing-item.is-in-view .ref-photo {
        opacity: 1;
        transform: rotate(15deg) translateY(0) scale(1);
    }

    .drawing-item.is-in-view .ref-arrow {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .drawing-item.is-in-view .ref-arrow-path {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 0.6s var(--ease-out) 0.8s;
    }

    .drawing-item.is-in-view .map-pin-icon {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 0.8s;
    }

    .drawing-item.is-in-view .map-pin-text {
        opacity: 1;
        transform: rotate(-15deg) scale(1);
        transition-delay: 0.9s;
    }

    /* Before that, a hover left by a tap must not reveal them. */
    .drawing-item:not(.is-in-view):hover .ref-photo,
    .drawing-item:not(.is-in-view):hover .ref-arrow,
    .drawing-item:not(.is-in-view):hover .map-pin-icon,
    .drawing-item:not(.is-in-view):hover .map-pin-text {
        opacity: 0;
    }
}


/* Sketches */

/* Freehand sketches from the school years, small, many to a row, read row by row in the order
   of the viewer: the whole set fits in a few screens. Upright sheets take one column, wide ones
   two, and every sheet has the same height, so the rows stay level. Under the mouse a sheet
   grows, with its caption and its red frame; the zoom is a transform alone, which the browser
   composites without repainting, and no blur on the neighbours: it would weigh on every move
   from sheet to sheet. The layer that grows lets the mouse through, so the cell under the
   pointer decides: a neighbour stays within reach under a grown sheet. sketchbook.js follows
   the pointer, marks the sheet that grows and picks the corner it grows from. */
.sketchbook { margin-top: 120px; }

.sketchbook-heading {
    text-align: center;
    margin-bottom: 48px;
}

.sketchbook-kicker {
    display: inline-block;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--white);
    transform: rotate(-4deg);
}

.sketchbook-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 6.5rem);
    font-weight: bold;
    line-height: 0.85;
    color: var(--red);
}

.sketchbook-intro {
    max-width: 38rem;
    margin: 18px auto 0;
    font-weight: 300;
    line-height: 1.6;
    color: var(--muted);
}

.sketchbook-grid {
    --sketch-cols: 8;
    --sketch-gap: 14px;
    --sketch-zoom: 2.15;
    --sketch-zoom-wide: 1.6;

    display: grid;
    grid-template-columns: repeat(var(--sketch-cols), minmax(0, 1fr));
    gap: 14px var(--sketch-gap);

    /* The script measures the sheets from the grid. */
    position: relative;
}

.sketch-item { gap: 0; }

/* The sheet and its red frame grow as one: the layer is always their containing block. */
.sketch-zoom { position: relative; }

/* A wide sheet already spans two cells: it grows less, and leaves its neighbours in view. */
.sketch-item--wide {
    --sketch-zoom: var(--sketch-zoom-wide);

    grid-column: span 2;
}

/* .plan-img shows the whole sheet on white (frame.css): nothing of the drawing is cropped. */
.sketch-item .media-frame-inner { aspect-ratio: 4 / 5; }
.sketch-item--wide .media-frame-inner { aspect-ratio: 8 / 5; }

/* At those ratios a wide sheet still comes out a little taller, since its width takes in the
   column gap. Where container units exist, every sheet gets the height of an upright one,
   measured on the grid itself. */
@supports (height: 1cqw) {
    .sketchbook-grid { container-type: inline-size; }

    .sketch-item .media-frame-inner,
    .sketch-item--wide .media-frame-inner {
        aspect-ratio: auto;
        height: calc((100cqw - (var(--sketch-cols) - 1) * var(--sketch-gap)) / var(--sketch-cols) * 1.25);
    }
}

/* The caption hangs under its sheet and only shows on the grown sheet: it is set small, and the
   zoom brings it to a readable size. Screen readers have it all along. */
.sketch-caption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
    padding: 3px 4px;
    border-radius: 3px;
    background: rgb(17 17 17 / 88%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out);
}

.sketch-caption-title {
    font-size: 0.43rem;
    line-height: 1.35;
    color: var(--white);
}

.sketch-caption-date {
    flex-shrink: 0;
    font-size: 0.55rem;
    color: var(--red);
}

/* The zoom, for a mouse on a screen wide enough to leave it room. The sheet grows in 0.45s and
   shrinks back a little faster, so that crossing the grid never leaves two sheets large. The
   caption grows from the same point as its sheet (both set by sketchbook.js). */
@media (hover: hover) and (min-width: 769px) {
    .sketch-zoom,
    .sketch-caption {
        pointer-events: none;
        transition: transform 0.38s var(--ease-out), opacity 0.25s var(--ease-out);
    }

    .sketch-zoom { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
    .sketch-caption { transform-origin: var(--zoom-x, 50%) var(--zoom-cap-y, 0); }

    .sketch-item.is-zoomed .sketch-zoom,
    .sketch-item.is-zoomed .sketch-caption {
        transform: scale(var(--sketch-zoom));
        transition-duration: 0.45s, 0.25s;
    }

    .sketch-item.is-zoomed .sketch-caption {
        opacity: 1;
        transition-delay: 0s, 0.15s;
    }

    /* The red frame draws around the grown sheet only. */
    .sketch-item.is-zoomed .sketch-rect-svg { opacity: 1; }
    .sketch-item.is-zoomed .sketch-rect-path { stroke-dashoffset: 0; }
}

/* Between a tablet and a small laptop, eight columns would be too small: four, and a smaller
   zoom. */
@media (min-width: 769px) and (max-width: 1100px) {
    .sketchbook-grid {
        --sketch-cols: 4;
        --sketch-gap: 22px;
        --sketch-zoom: 1.6;
        --sketch-zoom-wide: 1.3;
    }

    .sketch-caption-title { font-size: 0.6rem; }
    .sketch-caption-date { font-size: 0.72rem; }
}

@media (max-width: 768px) {
    .sketchbook { margin-top: 80px; }

    /* Phones: four small columns, like the rows of the larger grid, and no zoom; a tap opens the
       sheet in the viewer. The grid breaks out of the page margins, like the gallery above. */
    .sketchbook-grid {
        --sketch-cols: 4;
        --sketch-gap: 8px;

        row-gap: 8px;
        margin-left: -28px;
        margin-right: -28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sketch-zoom,
    .sketch-caption { transition: none; }
}