.masthead nav{display:flex;align-items:center;gap:32px}
.masthead .gallery-nav{font-size:9px;letter-spacing:.08em;padding:12px 0;color:var(--ink)}
.masthead .gallery-nav:hover,.masthead .gallery-nav[aria-current=page]{color:var(--pink)}
.guide-project-name{font-family:Georgia,serif;font-size:clamp(28px,3.6vw,51px);font-weight:400;letter-spacing:-.045em}
.guide-project-name em{font-weight:400}
.guide-project:hover .guide-project-name{color:var(--ink)}
.gallery-view{padding:55px 0 65px}
.gallery-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:36px}
.gallery-topline .back-link{margin:0}
.gallery-topline h1{font-size:9px;font-weight:400;margin:0;color:var(--muted)}
/* Measured collage spacing stays consistent at every screen size. */
.gallery-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:18px 14px;margin:0 24px 45px;isolation:isolate;container-type:inline-size}
.scrap-piece{position:relative;width:100%;z-index:var(--z,1);transform:rotate(clamp(-7deg,var(--r),7deg));box-shadow:0 2px 6px #26131c16,0 10px 22px #26131c12}
.gallery-tile{display:block;padding:0;margin:0;border:0;background:#fff;cursor:zoom-in;transition:transform .2s,box-shadow .2s}
.gallery-tile img{display:block;width:100%;height:auto}
.gallery-tile.taped::after,.scrap-note::before{content:"";position:absolute;width:28%;height:19px;top:-9px;left:35%;background:#ded0bd77;transform:rotate(-7deg);pointer-events:none;box-shadow:0 1px 2px #00000008}
.gallery-tile:hover,.gallery-tile:focus-visible{z-index:30;transform:rotate(0) scale(1.035);box-shadow:0 8px 30px #26131c30}
.gallery-tile:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.scrap-note{box-sizing:border-box;margin:0;padding:25px 23px;background:#fffdf7;color:var(--ink);text-align:center}
.scrap-note p{margin:0;line-height:1.25}
.note-living{font:400 clamp(21px,2.5cqw,36px)/1.2 'Personal Hand',cursive;padding:18px 14px;background:#fff9fc}
.note-living em{font-style:normal;color:var(--pink);white-space:nowrap}
.note-feeling{font:400 clamp(22px,2.7cqw,38px)/1.15 Georgia,serif;padding:20px 15px}
.note-feeling em{color:var(--pink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.note-feeling::before{display:none}
.note-dreams{font:400 clamp(22px,2.4cqw,35px)/1.3 'Personal Hand',cursive;padding:19px 17px;background:#fff}
.note-dreams::before{left:12%;transform:rotate(8deg)}
.art-source{display:block;text-align:center;margin:17px 0 0;font-size:8px;line-height:1.7;letter-spacing:.04em;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
 .gallery-view{padding:35px 0 45px}
 .gallery-topline{margin-bottom:30px}
 .gallery-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px 12px;aspect-ratio:auto;margin:0 8px 35px}
 .scrap-piece{position:relative;left:auto;top:auto;width:100%;transform:rotate(clamp(-5deg,var(--mr),5deg));box-shadow:0 2px 5px #26131c15,0 5px 12px #26131c0a}
 .scrap-note{padding:13px 10px}
 .note-living{font-size:clamp(18px,5.8cqw,30px)}
 .note-feeling{font-size:clamp(16px,4.8cqw,25px)}
 .note-dreams{font-size:clamp(16px,4.8cqw,25px);padding:14px 10px}
 .gallery-tile.taped::after,.scrap-note::before{height:13px;top:-6px}
}
@media(max-width:540px){.masthead .gallery-nav{font-size:8px}.gallery-topline h1{font-size:8px}.guide-project-name{font-size:29px}.guide-project{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.gallery-tile{transition:none}}

/* A few physical details, without putting every clipping in the same frame. */
.scrap-cutout{mix-blend-mode:multiply;background:transparent;box-shadow:none}
.scrap-cutout:hover,.scrap-cutout:focus-visible{box-shadow:none}
.photo-print{padding:5px 5px 13px;box-sizing:border-box}
.paper-edge{clip-path:polygon(1% 1%,98% 0,100% 21%,99% 42%,100% 67%,98% 99%,83% 98%,69% 100%,51% 98.8%,34% 100%,17% 98%,0 99%,1% 74%,0 53%,1% 29%)}
@media(max-width:700px){.photo-print{padding:3px 3px 8px}}

/* Reversible crops preserve the supplied images while framing the relevant detail. */
.image-frame{display:block}
.image-frame.is-cropped{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-ratio)}
.image-frame.is-cropped>img{position:absolute;width:var(--crop-width);height:auto;max-width:none;max-height:none;left:var(--crop-left);top:var(--crop-top);margin:0}
.art-dialog>.image-frame>img{display:block;width:auto;height:auto;max-width:100%;max-height:70dvh;object-fit:contain;margin:auto}
.art-dialog>.image-frame.is-cropped{width:min(100%,calc(70dvh * var(--crop-ratio)));margin:auto}
.art-dialog>.image-frame.is-cropped>img{width:var(--crop-width);max-width:none;max-height:none;position:absolute;margin:0}

/* Transparent jewelry sits naturally over the paper, with no rectangular background. */
.necklace-cutout{mix-blend-mode:normal;filter:drop-shadow(1px 3px 2px #38231824)}

.jewelry-cutout{mix-blend-mode:normal;filter:drop-shadow(1px 3px 2px #38231825)}

/* Small handwritten scraps leave the photographs visible. */
.note-living{font-size:clamp(20px,2.2cqw,30px);padding:12px 10px}
.note-shine,.note-shine:hover,.note-shine:focus-visible{background:transparent;box-shadow:none;filter:drop-shadow(1px 3px 3px #38231820)}
@media(max-width:700px){.note-living{font-size:clamp(16px,5cqw,24px);padding:10px 8px}}

/* Touch interaction never enlarges a clipping over its neighbours. */
@media(max-width:700px){.gallery-tile:hover,.gallery-tile:focus-visible{transform:rotate(clamp(-5deg,var(--mr),5deg))}}

.gallery-board.is-packed{display:block}
.gallery-board.is-packed .scrap-piece{position:absolute;left:var(--packed-left);top:var(--packed-top);width:var(--packed-width)}
@media(min-width:701px) and (max-width:1000px){.gallery-board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:701px){.note-feeling{font-size:clamp(20px,2cqw,27px)}.note-dreams{font-size:clamp(20px,2cqw,27px)}}

.framed-cutout{mix-blend-mode:normal;filter:drop-shadow(1px 3px 2px #38231820)}

/* A loose necklace draped over the mirror photograph. */
.gallery-board [data-layer-on]{z-index:24;filter:drop-shadow(1px 2px 2px #38231832)}