that scrolls makes the tab bar a flex child (.app-shell rule) — no fixed element → no strand possible. The lightbox lock now targets the inner root, not the body (photo-lightbox.js getScrollRoot). */ .photos-today-page { background: var(--wind-sky); color: var(--wind-earth); display: flex; flex-direction: column; overflow: hidden; height: 100vh; height: 100dvh; } .photos-today__back { font-size: 0.9rem; color: var(--wind-amber); text-decoration: none; } .photos-today__back:hover { color: var(--wind-amber-hover, var(--wind-amber)); text-decoration: underline; } /* Phase 7e Slice A6 — memory-card chrome per year section. Reuses the .home-hero--adult-photos pattern at :2309-2319: white bg, subtle border, soft shadow, rounded 14px. Polish #7: amber-dot chapter-divider ornament between years (replaces the original solid border-top stripe — reads as hand-stitched not printed). */ .photos-year { background: var(--wind-white); border: 1px solid var(--wind-dune); border-radius: 14px; box-shadow: var(--shadow-subtle); padding: 22px 18px 14px; margin-bottom: 1rem; position: relative; } .photos-year::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--wind-amber); box-shadow: -22px 0 0 -2px var(--wind-dune), 22px 0 0 -2px var(--wind-dune); } .photos-year__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; } .photos-year__year { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--wind-deep); } .photos-year__hint { font-size: var(--text-sm); /* #115 — --wind-earth, not --wind-stone: at 14px on the white card stone measures 3.97:1 (AA wants 4.5:1), earth 7.55:1 — the same adjudication .photos-month__count already records below; this rule was the one the #166 gate missed. Re-measured 2026-09-14 (dark: stone 5.63:1, earth 9.35:1 on #1A1612). */ color: var(--wind-earth); } /* #165 C3 — kid-ages inline in the section header ("· Remy was 10, Charlie was 7"). Italic for the memory "voice"; --wind-earth passes WCAG AA in both themes. */ .photos-year__ages { font-size: var(--text-sm); font-style: italic; color: var(--wind-earth); } /* Phase 7e Slice A5 — hero card at the top of the grid. Anchor of the slice per design audit (pop-per-hour rank #1). Random year selection per Q7 (not oldest); years-ago badge computed from the chosen photo's year. Two-layer overlay for legibility against any photo; year glyph in Fraunces at --text-hero. */ .photos-today__hero { position: relative; display: block; width: 100%; border: 0; padding: 0; background: var(--wind-sand); border-radius: 16px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; margin-bottom: 1.25rem; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; } .photos-today__hero:hover, .photos-today__hero:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); outline: none; } .photos-today__hero:focus-visible { outline: 2px solid var(--wind-amber); outline-offset: 2px; } .photos-today__hero img { display: block; width: 100%; height: 100%; object-fit: cover; } .photos-today__hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 35%, transparent 55% ); pointer-events: none; } .photos-today__hero-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; /* Phase 7e polish #1 — "found polaroid" badge feel. Inner highlight + soft shadow makes it read printed-on, not stamped-on. Fraunces for the emotional weight on the most resonant element on the page. */ background: linear-gradient(180deg, rgb(var(--wind-white-rgb) / 0.92), rgb(var(--wind-white-rgb) / 0.78)); box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 8px 24px rgba(0, 0, 0, 0.18); color: var(--wind-deep); font-family: 'Fraunces', Georgia, serif; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.005em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .photos-today__hero-year { position: absolute; bottom: 12px; left: 18px; /* Phase 7e polish #6 — italic Fraunces at display optical size is exquisite; the slight slant adds movement without motion. */ font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-style: italic; font-variation-settings: "opsz" 144; font-size: var(--text-hero); color: #fff; letter-spacing: -0.02em; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .photos-today__hero:hover .photos-today__hero-year { transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .photos-today__hero-year { transition: none; } .photos-today__hero:hover .photos-today__hero-year { transform: none; } } @media (max-width: 480px) { .photos-today__hero { aspect-ratio: 4 / 3; } .photos-today__hero-year { font-size: var(--text-3xl); bottom: 10px; left: 14px; } } @media (prefers-reduced-motion: reduce) { .photos-today__hero { transition: none; } } .photos-year__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (min-width: 540px) { .photos-year__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 720px) { .photos-year__grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 960px) { .photos-year__grid { grid-template-columns: repeat(6, 1fr); } } /* Single-photo-per-row feed on the "On this day" page (2026-07-09). Scoped to #photos-today-full so the Favorites gallery (#photos-favorites-target) and the home teaser (.photos-teaser__row) keep their compact grids. We mostly view on mobile, where one large photo per row reads far better than a 3-across square grid. ID specificity overrides the min-width breakpoints above. The card keeps a reserved box (aspect-ratio from .photo-card) so a lazy-loaded image can't reflow the feed as it arrives — the manifest carries no per-image dimensions, so an unreserved natural-height box collapses pre-load and shifts scroll position, breaking the #117 inner-scroll restore contract (photo-lightbox.spec.ts:110). object-fit:contain shows the WHOLE photo (no face-cropping); instead of a flat sand letterbox, the margin is a soft, scaled, blurred copy of the photo's OWN colors (--photo, set per-card by photos-today-page.js) — the same immersive backdrop language the lightbox uses. Falls back to --wind-dune when --photo is absent (degraded / pre-JS manifests). #166 — the same single-photo-per-row feed is opted into by the .photos-feed--natural container class, so the Best-of month view on the Favorites page gets it too WITHOUT widening the #photos-today-full rules (which stay exactly as shipped). The two-class descendant form (0,2,0) outranks the bare .photos-year__grid / .photos-month__grid media-query rules (0,1,0) above, which is what the ID was buying here — a single container class would have LOST to them. Favorites only adds the class in month mode; the flat list keeps its compact grid. */ #photos-today-full .photos-year__grid, .photos-feed--natural .photos-month__grid { grid-template-columns: 1fr; gap: 14px; } #photos-today-full .photo-card, .photos-feed--natural .photo-card { position: relative; background: var(--wind-dune); border-radius: 16px; box-shadow: var(--shadow-card); } #photos-today-full .photo-card::before, .photos-feed--natural .photo-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--photo, none); background-size: cover; background-position: center; filter: blur(30px) saturate(1.15) brightness(0.9); transform: scale(1.3); } #photos-today-full .photo-card img, .photos-feed--natural .photo-card img { object-fit: contain; position: relative; z-index: 1; } /* #165 (Phase C1) — natural-aspect cards. When the manifest carries per-image dimensions (Phase B2), photos-today-page.js sets an inline `aspect-ratio` + the .photo-card--natural class, so the card reserves the photo's REAL aspect ratio before the lazy image loads (no CLS) and the photo fills it edge-to-edge — no letterbox, no blurred-fill margin. Ultra-tall images are clamped in JS (<=1.6:1). Cards WITHOUT dims keep the reserved square + object-fit:contain + blur-fill above (graceful degrade / pre-#165 manifests). The contained-card chrome (radius, shadow) is retained — the redesign changes the box shape, not the card. 2026-08-02 — "one photo can't dominate the viewport" was a `max-height: 80vh` cap, and it defeated the entire feature on desktop. The cap binds whenever the card is wider than half the viewport height, and because the natural card is `object-fit: cover`, everything past the cap was CROPPED rather than fitted. Measured at 1000x560: an 800x1200 portrait and a 1600x900 landscape BOTH rendered 930x448 — identical boxes, i.e. no natural aspect at all. It never showed on a phone (the tallest permitted card, 1.6:1, still fits under 80vh at phone widths) and the C1 E2E pinned its viewport to 414x896, so nothing caught it. The cap now applies to WIDTH, derived from the same ratio (--photo-ar, emitted next to the inline aspect-ratio): a card is at most `80dvh * ratio` wide, so its height reaches exactly 80dvh in the limit and never exceeds it — with the true aspect ratio intact and zero cropping. A tall photo gets narrower instead of cropped, and centres in the column. The cap rides on the wrap as well so the heart + caption track the photo's edges rather than the column's. `var(--photo-ar, 100)` = effectively uncapped when the property is absent (no-dims degrade cards, or a stale-cached JS bundle) — the safe direction. ⚠ `width: min(100%, …)`, NOT `max-width` + auto margins. On a grid item an auto margin suppresses the default `justify-self: stretch`, so the item falls back to shrink-to-fit — and since the card's is `width: 100%` of its parent, shrink-to-fit resolves against a lazy image's zero intrinsic width and the whole card collapses. Measured while building this: cards rendered 0x0 (the first, whose image had loaded, rendered 105px wide on a 414px viewport). An explicit width is immune — auto margins then only centre it. */ #photos-today-full .photo-card-wrap, .photos-feed--natural .photo-card-wrap, #photos-today-full .photo-card--natural, .photos-feed--natural .photo-card--natural { width: min(100%, calc(80vh * var(--photo-ar, 100))); width: min(100%, calc(80dvh * var(--photo-ar, 100))); margin-inline: auto; } #photos-today-full .photo-card--natural::before, .photos-feed--natural .photo-card--natural::before { content: none; } #photos-today-full .photo-card--natural img, .photos-feed--natural .photo-card--natural img { object-fit: cover; } /* #165 (Phase C3) — people names under each card (who's in the photo). Sits in the .photo-card-wrap on the feed background; --wind-earth passes WCAG AA on both --wind-sky (light) and the dark canvas (theme-aware token). */ #photos-today-full .photo-card__caption { padding: 8px 6px 2px; font-size: 13px; line-height: 1.35; color: var(--wind-earth); } #photos-today-full .photo-card__video-badge { z-index: 2; } .photos-feed--natural .photo-card__video-badge { z-index: 2; } /* #166 — Best-of month sections on /us/photos/favorites ("By month" toggle). A DELIBERATELY SEPARATE family from .photos-year*, not a rename of it: that one is the year-axis grouping for the On This Day feed (one calendar day across many years), this one is the month-axis grouping of favorites. Reusing a class that literally says "year" to hold "August 2025" is the label/key confusion that rots later (James's call, plan §6.5 #6). Mirrors the .photos-year card/section chrome so the two feeds read as one system. */ .photos-month { background: var(--wind-white); border: 1px solid var(--wind-dune); border-radius: 14px; box-shadow: var(--shadow-subtle); padding: 12px; margin-bottom: 16px; } .photos-month__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 10px; } .photos-month__label { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; } .photos-month__count { font-size: var(--text-sm); /* --wind-earth, not the --wind-stone used by the analogous .photos-year__hint: at 14px, stone measures 3.97:1 on the light card background (WCAG AA wants 4.5:1), earth measures 7.55:1. Verified with getComputedStyle in both themes during the #166 design gate. */ color: var(--wind-earth); } /* Un-dated favorites (hearted before #166, or from a surface with no date in scope) group by heart-date. Say so rather than implying a taken-date we don't have — per plan §3 this is the expected steady state, not an error. */ .photos-month__note { font-size: var(--text-sm); font-style: italic; color: var(--wind-earth); } .photos-month__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (min-width: 720px) { .photos-month__grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 960px) { .photos-month__grid { grid-template-columns: repeat(6, 1fr); } } @media (prefers-reduced-motion: no-preference) { #photos-today-full .photo-card { transition: transform 0.14s ease, box-shadow 0.14s ease; } } .photo-card { border: 0; padding: 0; background: var(--wind-sand); border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 1; transition: transform 0.12s ease, box-shadow 0.12s ease; } .photo-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); outline: none; } .photo-card:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); outline: 2px solid var(--wind-deep); outline-offset: 2px; } .photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Video grid cell — poster + centered ▶ that opens the lightbox (the single