.hero {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 3rem 1rem 2rem;
    text-align: center;
}
.hero-inner { max-width: 36rem; margin: 0 auto; }
.hero-photo {
    position: relative;
    width: 14rem;
    height: 14rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--envelope);
    box-shadow: var(--shadow);
    border: 4px solid var(--paper);
}
.hero-photo-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    max-width: none;
}
/* Once JS has read data-* and sized the image, it sets width/height/left/top
   directly and toggles this class — at which point we stop the default cover. */
.hero-photo.hero-cropped .hero-photo-img {
    width: auto;
    height: auto;
    object-fit: fill;
}
.hero-name {
    font-family: var(--font-serif);
    font-size: 3.2rem;
    font-weight: 400;
    margin: 0 0 .25rem;
    color: var(--ink);
    font-style: italic;
}
.hero-dates {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
}
.hero-dates .dash { margin: 0 .5rem; }
.hero-dedication {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.55;
}

.wall {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.wall-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed rgba(107, 81, 55, 0.2);
    margin-bottom: 1.5rem;
}
.wall-controls label { margin: 0; display: inline-flex; gap: .4rem; align-items: baseline; font-size: .85rem; }
.wall-controls select, .wall-controls input {
    font: inherit;
    padding: .35rem .5rem;
    border: 1px solid rgba(107, 81, 55, 0.25);
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius);
    margin: 0;
    width: auto;
}
.wall-controls .spacer { flex: 1; }
.wall-controls .btn { padding: .4rem .9rem; font-size: .9rem; }

.envelope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem;
}

.envelope {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--envelope);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(107, 81, 55, 0.14);
    transition: transform .2s ease, box-shadow .2s ease;
    text-align: left;
    font: inherit;
    color: inherit;
    perspective: 700px;
}
.envelope:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.envelope:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 3px;
}

.envelope-flap {
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, var(--envelope-dark) 0%, var(--envelope) 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    opacity: .92;
    transform-origin: top center;
    transition: transform .24s ease-out, opacity .24s ease-out;
    pointer-events: none;
}
.envelope:hover .envelope-flap { opacity: 1; }
.envelope.opening {
    transform: translateY(-4px) scale(1.015);
    box-shadow: var(--shadow);
}
.envelope.opening .envelope-flap {
    transform: rotateX(-168deg);
    opacity: .7;
}

.envelope-stamp {
    position: absolute;
    top: .55rem;
    right: .55rem;
    width: 2rem;
    height: 2.4rem;
    background: var(--paper);
    border: 1px dashed var(--ink-soft);
    border-radius: 2px;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent-dark);
    font-size: 1rem;
    transform: rotate(-4deg);
    z-index: 1;
    pointer-events: none;
}

.envelope-meta {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    font-family: var(--font-serif);
    color: var(--ink);
    z-index: 1;
}

/* Photo/video collage for envelopes whose letter has attached media.
   2x2 grid at most; 5+ items show as 3 tiles + a "+N" chip. Sits in the
   top-right where the heart stamp used to be (stamp is hidden when the
   collage is present). Decorative — aria-hidden in the markup. */
.envelope-collage {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 3px;
    justify-items: end;
    z-index: 2;
    pointer-events: none;
}
.collage-thumb, .collage-more {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 2px solid var(--paper);
    box-shadow: 0 2px 4px rgba(107, 81, 55, 0.28);
    background: var(--envelope-dark);
    display: block;
}
.collage-thumb { object-fit: cover; }
.collage-thumb.is-video { border-color: var(--accent); }
.collage-more {
    display: grid;
    place-items: center;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
}

/* Hide the heart stamp on envelopes that carry a collage. */
.envelope:has(.envelope-collage) .envelope-stamp { display: none; }

/* Scale down on shorter envelopes so the 2x2 grid stays clear of the
   "Dear Zoe," meta line. Container queries let each envelope size itself
   based on its own dimensions in the grid. */
.envelope { container-type: size; container-name: env; }

@container env (max-height: 200px) {
    .collage-thumb, .collage-more { width: 36px; height: 36px; }
    .collage-more { font-size: .72rem; }
}
@container env (max-height: 160px) {
    .collage-thumb, .collage-more { width: 30px; height: 30px; }
    .collage-more { font-size: .66rem; }
}

@media (max-width: 520px) {
    .envelope-collage { top: .5rem; right: .5rem; gap: 2px; }
}
.envelope-meta .to {
    font-style: italic;
    font-size: 1.15rem;
    margin-bottom: .1rem;
}
.envelope-meta .from {
    font-size: .95rem;
    color: var(--ink-soft);
}
.envelope-meta .date {
    font-size: .72rem;
    color: var(--ink-soft);
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
}

.wall-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-style: italic;
}

@media (max-width: 520px) {
    .hero-name { font-size: 2.4rem; }
    .envelope-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}