/* === KUEH OF THE DAY === */ /* Background is .matte-metal-surface (styles/atoms.css, applied in index.html) instead of the flat --color-surface-tint every other section uses — a deliberate departure for this section specifically, not a system-wide swap. position: relative is for the two .metal-rivet-row-* rows (src/atoms/rivets.js, appended in kueh-of-day.js's init()) — decorative riveted-seam edges along the panel, positioned absolute against this section rather than affecting its layout height. overflow-x: hidden clips those rows cleanly at the section's own edge on narrow viewports (see .metal-rivet-row's own comment, styles/atoms.css, for why they're allowed to run past it) instead of adding page-level horizontal scroll. */ .kueh-of-day-section { position: relative; overflow-x: hidden; padding: 32px 32px 80px; } /* Pinned to the section's own left/right edges (32px inset) — this is what lets .metal-rivet-row's own justify-content: space-between (styles/ atoms.css) spread the dots across the section's *real* width at whatever size it actually renders, with no vw-based guessing that could under/overshoot. That only works while the container has enough room; past the point where it doesn't (see the media query below), the row switches to a centered, fixed-width layout instead so it can overflow both edges symmetrically rather than however space-between degrades once there's no free space left to distribute. */ .metal-rivet-row-top, .metal-rivet-row-bottom { position: absolute; left: 32px; right: 32px; } .metal-rivet-row-top { top: 14px; } .metal-rivet-row-bottom { bottom: 14px; } /* Below the exact width where the row's own minimum content (5 dots at 7px + 4 gaps at .metal-rivet-row's 85px floor = 375px, styles/ atoms.css) plus this container's own 64px inset (32px each side, above) no longer fits, justify-content: space-between has nothing left to distribute and collapses to flex-start — packing everything against the left edge and overflowing one-sided to the right, not the symmetric bleed this is going for. Past that point (375 + 64 = 439px), switch the container itself to a fixed-width, centered box instead — left: 50% + translateX(-50%) centers it regardless of how much wider than the viewport it ends up, so the overflow reads evenly on both sides. The 438px breakpoint isn't an arbitrary design choice; it's solved directly from the row's own numbers above, so if those ever change, this needs to move with them. */ @media (max-width: 438px) { .metal-rivet-row-top, .metal-rivet-row-bottom { left: 50%; right: auto; transform: translateX(-50%); } } /* Two independent floating "windows" (src/atoms/retro-shape.js) side by side, directly on the section's own background — no shared card frame. align-items: start keeps each column sized to its own content instead of CSS Grid's default row-stretch, which used to make .kod-media match .kod-content's height (including growing when the recipe's "see more" expanded it) — the media window now always stays its own natural size. The middle `auto` track is .kod-seam-wrap (buildSeam, kueh-of-day.js) — an explicit column rather than leaving it to fall into an implicit one, so its width is just its own content (a thin metal line + a rivet column) instead of splitting the gap evenly with the other two tracks. The two 24px gaps this creates read as roughly the same total media-to-content spacing the old single 40px gap did, just with the seam now sitting in the middle of it instead of bare space. */ .kod-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: start; gap: 24px; } /* align-self: stretch (overriding .kod-layout's own align-items: start, which every other grid item still uses) is what makes this column's height follow the grid row's own height — set by whichever of .kod-media-column/.kod-content-column renders taller — rather than collapsing to its own near-zero content height. That real height is what .kod-seam-line's own negative top/bottom offsets below measure from to reach the section's actual edges; without it (a near-zero- height box) `bottom` would resolve against a bottom edge sitting right on top of `top`, not the section's real bottom. width: 24px just gives .kod-seam-line/-rivets (both absolutely positioned within it) a horizontal anchor at the grid's actual gap position — this element's own width otherwise plays no visual role. */ .kod-seam-wrap { position: relative; align-self: stretch; width: 24px; } /* The seam line pair itself (.metal-seam/-line, src/atoms/metal-seam.js) — centered in .kod-seam-wrap horizontally, but bled vertically past this row entirely: top/bottom aren't 0, they're negative by exactly .kueh-of-day-section's own top/bottom padding (32px/80px, above), so the lines' actual rendered edges land flush with the *section's* top/bottom edges rather than stopping at this row's. height: auto overrides .metal-seam's own height: 100% — with both top and bottom set, an explicit height would win the box model's over-constrained resolution instead of letting top+bottom imply it, which is what actually produces the full-bleed span. width: 2px is just enough for the pair's own 1px + 1px lines, flush against each other (.metal-seam's gap: 0) — sized here (not left to shrink-to-fit) since this element also needs a known width for left: 50%/translateX(-50%) to center correctly. Crossing behind the top/bottom rivet rows (metal-rivet-row- top/-bottom, near the very edges) is deliberate, not a collision to avoid — a real riveted seam continues underneath a cross-seam, it doesn't stop short of it. */ .kod-seam-line { position: absolute; left: 50%; transform: translateX(-50%); top: -32px; bottom: -80px; height: auto; width: 2px; } /* Deliberately not bled the way .kod-seam-line is — these stay within this row's own bounds (top/bottom insets past 0), which already sits comfortably clear of the top/bottom rivet rows near the section's actual edges (32px/80px of section padding, above, versus those rows' own 14px inset — see .metal-rivet-row-top/-bottom). Left of the line (toward .kod-media-column), offset past the line pair's own 2px width plus a gap rather than centered on it, so line + rivets read as one riveted seam assembly instead of the dots overlapping the line. height: auto overrides .metal-rivet-row-vertical's own height: 100% for the same reason .kod-seam-line overrides .metal-seam's — with top, bottom, AND an explicit height all present, height wins the box model's over-constrained resolution and bottom gets ignored, which would blow this past the 12px bottom inset instead of respecting it. */ .kod-seam-rivets { position: absolute; right: 50%; margin-right: 8px; top: 12px; bottom: 12px; height: auto; } .kod-media-column { display: flex; flex-direction: column; } .kod-tag { display: flex; align-items: center; gap: 6px; align-self: flex-start; /* Top offset isn't the same 16px as the left inset — it's this row's own height (32px, just the icon badge) split against .tab-group-rim's taller box (~47.5px: its own rim padding + .tab- group's padding + .tab's own padding/line-height) so the two boxes' vertical *centers* line up despite starting from the same grid-row top (.kod-layout's align-items: start) — half the height difference, not a matched top margin. */ margin: 8px 0 14px 16px; } /* Unlike every other .section-label (index.html), this one sits directly on .matte-metal-surface, not the --color-surface-tint --color-text-on-surface is calibrated against — that surface is a near-light-gray now (see .matte-metal-surface, styles/atoms.css), so dark text reads reliably across it; --metal-shadow (styles/tokens.css) is the same dark charcoal .rim-matte-inner uses at the dark end of its own gradient, reused here rather than reaching for --color-text-on-surface (calibrated for a different, warmer surface). A faint light drop-shadow reads as a slight etched-into-the-metal recess rather than serving legibility (dark-on-light-gray already has plenty of contrast on its own). The .kod-media-column-scoped selector (not just .kod-tag) is deliberate, not decorative — .section-label's own color rule lives in index.html's inline