/* ───────────────────────────────────────────────────────────────────────── Oyestore Originals — Season 01. Scoped under .bl (same aliased-token pattern as brands.css: every color here is --bl-navy/--bl-cream/ --bl-burgundy, which are themselves aliases for this site's own --color-midnight/--color-pearl/--color-accent-red - no new palette). Reuses .bl-nav/.bl__container/.bl-section/.bl-kicker/.bl-btn/.bl-hero/ .site-footer/.bl-float from brands.css directly - this file only adds the genuinely new components: date-first discovery (.orig-when), the Original cards themselves (.orig-chapter-card - the actual product, given the most visual attention on the page), the compact Explore-by-Destination/Format lists (.orig-explore-*, deliberately secondary, deliberately not ten oversized cards - see the IA-rebuild pass's own comments throughout this file), and the individual Original's own detail page. Format accent colors: 10 CSS custom properties, one per format, assigned in originals-data.js - a controlled variation within the existing --bl-burgundy/--bl-cream/sticker-accent range, not a new palette. Used sparingly now (the individual Original's own detail- page hero/sections only) rather than tinting every card/list row a different colour - the IA-rebuild pass's explicit instruction was to use burgundy as the one consistent accent everywhere else. ───────────────────────────────────────────────────────────────────────── */ /* .bl-nav is fixed - anchor-jump targets need their own clearance so a "#orig-formats"-style link doesn't land partially under it. */ #orig-formats, #orig-playground, #orig-calendar, #orig-when, #orig-destrail { scroll-margin-top: 90px; } .bl { --orig-accent-01: var(--sticker-sky); --orig-accent-02: var(--bl-burgundy-bright); --orig-accent-03: var(--sticker-lime); --orig-accent-04: var(--sticker-yellow); --orig-accent-05: #b98cff; --orig-accent-06: var(--bl-burgundy); --orig-accent-07: var(--sticker-pink); --orig-accent-08: #ff9f6b; --orig-accent-09: #6bd0a8; --orig-accent-10: #ffd166; } /* ── Light mode ────────────────────────────────────────────────────────── originals.html now also loads journal.css (the site's real light-mode repaint - see its own header comment), which already redefines every *shared* token this page's components read (--card/--muted-foreground/ --glass-border-dark/--color-ember/etc.) to light-paper values, plus --bl-cream itself via journal.css's own generic `.bl { --bl-cream: var(--color-ink) }` rule. The one thing journal.css's `.bl` block deliberately does NOT touch is --bl-navy/--bl-navy-deep - brands.css locked those to literal hex specifically so brands.html/creators.html/ deck.html could stay their original dark-navy selves regardless of the site's light/dark toggle (see brands.css's own "LOCKED" comment). Since THIS page has to get a real light mode, only .orig (present on this page's alongside .bl, absent on brands/creators/deck) gets those two finished off here - the other three .bl pages are completely untouched by this block. `:not([data-theme="dark"])` is required, not decorative: dark-mode.css's own `[data-theme="dark"] .bl` block never touches --bl-navy/-navy-deep either (only --bl-cream) - there's no rule anywhere else in the cascade that would otherwise "win back" the real locked navy for dark mode, so without this guard toggling dark mode on this page would show --color-midnight's DARK value (#00021e) instead of the actual locked --bl-navy (#000329) for the background - close enough to look like a dark background either way, but a real, measured regression (verified live, then fixed) from the exact value every other .bl page keeps. */ :root:not([data-theme="dark"]) .orig.bl { --bl-navy: var(--color-midnight); --bl-navy-deep: var(--card); } /* Genuinely dark, photo-backed surfaces that must stay light/cream text even on the light page - the individual Original's own full-bleed hero photo, and the Destination Playground cards (photo + scrim, name/line/chapter-count text laid straight over it). .bl-hero (the hub's own hero) already gets this same treatment from journal.css's shared exception list; these are this page's own additions, following the identical pattern (re-scope --bl-cream/-dim/-faint to pearl locally, !important on color for the same .bl-a-inherits-before-a- more-specific-class reason journal.css's own comment on .bl-hero explains). `:not([data-theme="dark"])` matters here for a subtler reason than the --bl-navy guard above: dark-mode.css's `[data-theme="dark"] .bl` reassertion only ever runs on the actual .bl element (body) - custom properties don't get "won back" by a higher-specificity rule on an ancestor for a DIFFERENT element further down the tree that already has its own direct (lower-specificity but more local) declaration. Verified live: without this guard, toggling dark mode left these two showing --color-pearl's dark-mode value (#f8f9fb) instead of the real locked cream (#fffdd0) - close enough to look right at a glance, but a real, measured mismatch from every other cream text on the page. */ :root:not([data-theme="dark"]) .orig-chapter-hero { --bl-cream: var(--color-pearl); --bl-cream-dim: rgb(251 245 230 / 78%); --bl-cream-faint: rgb(251 245 230 / 45%); color: var(--bl-cream) !important; } /* --_accent (set inline per format's own detail-page hero - see originals.js's chapterPageHTML()) reads --orig-accent-01..10, which for 01/02/03/04/07 alias the shared --sticker-sky/-lime/-yellow/ -pink/--color-ember tokens - journal.css correctly darkens those for use as TEXT ON LIGHT PAPER, which makes them nearly illegible in their other real job here: an eyebrow label sitting directly on a photo + dark scrim (measured ~2:1, well under WCAG's 4.5:1). Dark mode is untouched (still per-format-tinted, via the exact same --_accent chain as before) - only this one photo-sitting label drops the tint in light mode and goes a fixed, always-legible cream. */ :root:not([data-theme="dark"]) .orig-chapter-hero__eyebrow { color: var(--color-pearl); } /* ── Season hero ─────────────────────────────────────────────────────── */ .orig-hero__stats { margin-top: 28px; } .orig-hero__season-line { font-family: var(--font-display); font-weight: 800; font-size: clamp(13px, 2vw, 16px); letter-spacing: 0.03em; color: var(--bl-burgundy-bright); margin: 10px 0 0; } /* ── Hero retro accents (doodle/tape/handwritten note) ────────────────── .bl-hero is bottom-anchored (justify-content: flex-end - see brands.css) - the real title/tagline/CTAs only ever occupy the lower portion, so the top and right of the hero stay genuinely empty on anything taller than a phone. Every accent below lives in that empty band, well clear of the text block, and stays purely decorative (aria-hidden, pointer-events: none, no effect on real content layout) - same rule the homepage's own doodles follow. */ .bl-hero__doodle { color: var(--bl-cream); opacity: 0.18; z-index: 1; } .bl-hero__doodle--compass { top: 110px; right: 6%; width: 84px; height: 70px; } .bl-hero__note { position: absolute; z-index: 1; top: 22%; right: 7%; max-width: 180px; font-family: var(--font-caveat); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--bl-cream-dim); rotate: -4deg; text-align: right; pointer-events: none; } .bl-hero__tape { position: absolute; z-index: 1; top: 19%; right: 12%; rotate: -4deg; } @media (max-width: 900px) { /* The empty top/right band this whole set relies on shrinks fast on phones - .bl-hero__content can grow tall enough there to reach it, so all four hide rather than risk sitting on top of real text. */ .bl-hero__doodle, .bl-hero__note, .bl-hero__tape { display: none; } } /* ── When Are You Free? (date-first discovery, PRIMARY) ──────────────── Deliberately built from the exact same idioms already on this page (.bl-kicker, a pill shape, --bl-burgundy active state) rather than a new visual language - an editorial calendar that happens to filter, not a booking-engine date picker. No underlines anywhere in here; the active state is colour AND a filled dot/border-weight change, never colour alone (see .orig-when-chip below) - so it stays legible to a screen reader and doesn't rely on colour perception. */ .orig-when { padding-top: clamp(28px, 5vh, 48px); padding-bottom: clamp(28px, 5vh, 48px); } .orig-when__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 4.4vw, 42px); text-transform: uppercase; line-height: 1.05; margin: 0 0 18px; } /* "All Of " used to be its own full-width row, set apart from the chips below it - folded in as that row's own first chip instead (one fewer stacked block on the page), kept distinct only by a slightly bolder border so it still reads as "the way out" rather than just another date. */ .orig-when-chip--all { border-width: 2px; font-weight: 800; } /* Editorial month stepper - one compact control (‹ OCTOBER 2026 ›) replacing what used to be a whole row of 3-4 equal-weight tab buttons. That row sat directly above the date-chip row and, being built from the same pill/button language, read as a second copy of it rather than a clearly senior control - this is deliberately a different shape (a big centered label with arrows either side, no pill, no fill) so the hierarchy is unmistakable: this is the one real decision, the chips below are a reference list. */ .orig-when__stepper { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 40px); margin-bottom: 14px; } .orig-when__stepper-label { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: 0.02em; text-align: center; min-width: 12ch; } .orig-when__arrow { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--bl-line); background: none; color: var(--bl-cream); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, opacity 0.15s ease; } .orig-when__arrow:hover:not(:disabled) { border-color: var(--bl-burgundy-bright); } .orig-when__arrow:focus-visible { outline: 2px solid var(--bl-burgundy-bright); outline-offset: 2px; } .orig-when__arrow:disabled { opacity: 0.25; cursor: default; } /* The quiet "there are N of these, and a direct jump" indicator the old tab row's own labels used to carry - a row of small dots instead of a row of small buttons, so it reads as a position indicator (like a carousel) rather than a third control competing for attention. */ .orig-when__dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; } .orig-when__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--bl-line); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } /* An 8px dot is a carousel indicator, not a real touch target - this pad gives it one (~40px) without inflating the dot itself, which would throw off the tight row of them. */ .orig-when__dot::before { content: ""; position: absolute; inset: -16px; } .orig-when__dot:hover { transform: scale(1.3); } .orig-when__dot:focus-visible { outline: 2px solid var(--bl-burgundy-bright); outline-offset: 3px; } .orig-when__dot.is-active { background: var(--bl-burgundy-bright); transform: scale(1.3); } .orig-when__body { min-height: 40px; } .orig-when__tba-note { color: var(--bl-cream-dim); font-size: 14px; margin: 0; text-align: center; } .orig-when__windows { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } /* Deliberately quiet now - no fill, no card background, a hairline border - so 6-7 of these in a row read as a reference list to scan, not a wall of equally loud buttons all asking to be picked. Only the active one (still burgundy fill, unchanged) earns the visual weight. */ .orig-when-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 7px 13px; min-height: 34px; border-radius: 999px; border: 1px solid var(--bl-line); background: none; color: var(--bl-cream-faint); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .orig-when-chip:hover { border-color: var(--bl-burgundy-bright); color: var(--bl-cream); } .orig-when-chip:focus-visible { outline: 2px solid var(--bl-burgundy-bright); outline-offset: 2px; } /* :active has no :hover to fall back on for touch - without its own press state a tap here (and on the other filter/card controls below) gave zero feedback on a phone until the state actually changed. */ .orig-when-chip:active { transform: scale(0.96); } /* Active state = burgundy fill/border (colour) AND the mark fills in (shape) - never colour as the only signal. */ .orig-when-chip.is-active { background: var(--bl-burgundy); border-color: var(--bl-burgundy); font-weight: 800; } .orig-when-chip__mark { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--bl-cream-faint); flex-shrink: 0; } .orig-when-chip.is-active .orig-when-chip__mark { background: var(--bl-cream); border-color: var(--bl-cream); } /* --bl-burgundy itself is a locked literal maroon (#800020, unchanged between themes) - safe as a fill. But the text sitting on it here just inherits --bl-cream, which in light mode resolves to --color-ink (journal.css's `.bl { --bl-cream: var(--color-ink) }`, correct for body text on light paper elsewhere, wrong here) - measured ~1.77:1, a severe WCAG fail on .orig-when-chip.is-active (this covers the folded-in "All Of " chip too - it shares this same class). Same fix pattern as the --color-ember fills elsewhere on the site: pin to pearl in light mode only, dark mode's already-correct literal cream stays untouched. */ :root:not([data-theme="dark"]) .orig-when-chip.is-active { color: var(--color-pearl); } :root:not([data-theme="dark"]) .orig-when-chip.is-active .orig-when-chip__mark { background: var(--color-pearl); border-color: var(--color-pearl); } /* ── Result header (shown when a specific date window is selected) ───── */ .orig-result-header { margin-bottom: 26px; } .orig-result-header__date { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-burgundy-bright); margin: 0 0 6px; } .orig-result-header__count { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 3.4vw, 30px); text-transform: uppercase; margin: 0; } .orig-result-header__active { margin-top: 10px; font-size: 13px; color: var(--bl-cream-faint); } .orig-result-header__clear { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--bl-burgundy-bright); background: none; border: none; padding: 0; margin-left: 6px; cursor: pointer; text-decoration: none; } .orig-result-header__clear:hover { color: var(--bl-cream); } .orig-empty-state { padding: clamp(36px, 8vh, 64px) 20px; text-align: center; border: 1.5px dashed var(--bl-line); border-radius: var(--radius-2xl); } .orig-empty-state__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2.6vw, 24px); text-transform: uppercase; margin: 0 0 8px; } .orig-empty-state__body { color: var(--bl-cream-dim); margin: 0; } /* ── Browse by (3-axis quick access) ─────────────────────────────────── Sits directly under the hero, before WHEN even starts, so all three real discovery axes (WHEN/WHERE/WHAT) are established together up front - one visitor glance, then any of the three is a single jump away without first scrolling past 49 Original cards. Built from the exact idiom already used everywhere else on this page (.bl-kicker eyebrow rhythm, pill shape, burgundy active state, no underlines), not a new visual language. */ .orig-axisbar { padding-top: clamp(20px, 4vh, 34px); padding-bottom: clamp(8px, 1.5vh, 14px); } .orig-axisbar__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .orig-axisbar-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1.5px solid var(--bl-line); background: var(--card); text-decoration: none; color: var(--bl-cream); transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .orig-axisbar-item:hover { border-color: var(--bl-burgundy-bright); transform: translateY(-1px); } .orig-axisbar-item:focus-visible { outline: 2px solid var(--bl-burgundy-bright); outline-offset: 2px; } .orig-axisbar-item:active { transform: scale(0.98); } .orig-axisbar-item__icon { font-size: 19px; line-height: 1; flex-shrink: 0; } .orig-axisbar-item__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .orig-axisbar-item__label { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-cream-faint); } .orig-axisbar-item__value { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--bl-cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Active = the identical burgundy-fill language every other filter control on this page already uses (.orig-when-chip.is-active etc.) - same locked --bl-burgundy literal, so the light-mode pearl-text override below is the same fix, not a new one. */ .orig-axisbar-item.is-active { border-color: var(--bl-burgundy); background: var(--bl-burgundy); } .orig-axisbar-item.is-active .orig-axisbar-item__label, .orig-axisbar-item.is-active .orig-axisbar-item__value { color: var(--bl-cream); } :root:not([data-theme="dark"]) .orig-axisbar-item.is-active .orig-axisbar-item__label, :root:not([data-theme="dark"]) .orig-axisbar-item.is-active .orig-axisbar-item__value { color: var(--color-pearl); } /* The visible "this is a real dropdown" signal - without it, WHERE/WHAT read as inert stat labels (that was the actual complaint: they look identical to WHEN's plain jump-link tile, nothing on screen suggests they're clickable pickers). Sits at the tile's far right, same slot the clear (×) button takes over once a value is picked - never both at once. */ .orig-axisbar-item__chevron { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--bl-burgundy-bright); } .orig-axisbar-item__clear { position: relative; z-index: 2; margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgb(255 255 255 / 12%); color: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .orig-axisbar-item__clear:hover { background: rgb(255 255 255 / 22%); } .orig-axisbar-item__clear:active { transform: scale(0.9); } /* Same invisible-pad trick as .theme-toggle - the visible 22px circle stays put, but the actual tappable area is a proper ~44px square around it, since this sits in the same corner a thumb reaches for. */ .orig-axisbar-item__clear::before { content: ""; position: absolute; inset: -11px; } /* WHERE/WHAT are real covering WHERE/WHAT is untouched), not a redesign of the control, just its size on a phone. */ .orig-axisbar__row { display: flex; grid-template-columns: unset; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .orig-axisbar__row::-webkit-scrollbar { display: none; } .orig-axisbar-item { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; } .orig-axisbar-item__icon { font-size: 14px; } /* The stacked uppercase label ("WHEN"/"WHERE"/"WHAT") above the value is what a full-width tile needs to read at a glance - a pill this size just needs the current value itself (icon already carries which axis it is), same information Swiggy's own compact pills give with one line of text. */ .orig-axisbar-item__label { display: none; } .orig-axisbar-item__value { font-size: 12.5px; white-space: nowrap; } .orig-axisbar-item__chevron { font-size: 11px; } } /* ── Destination rail (mobile quick-access, food-app category row) ───── Circular photo + name, horizontally swipeable, tapping one jumps straight to filtered results - the exact "Pizzas / Cakes / Burgers" pattern a food-delivery app uses so a category is a one-tap reach, not a line item you have to read in a dropdown first. Mobile-only: above ~900px (the same point .bl-hero__doodle/.bl-hero__note already hide at - originals.css:164) Explore by Destination further down does this same job at reading pace, so showing both would just be the same 7 destinations listed twice on one screen. */ .orig-destrail { display: none; } @media (max-width: 900px) { /* overflow-x:hidden here, not relying on body's own overflow-x:hidden to catch it - .orig-destrail__row's negative-margin breakout below pokes its own box out past this section's edges on purpose (the full-bleed scroll technique), and without a clip right at this level that inflated document.body.scrollWidth measurably (410px vs a 387px viewport, confirmed via getBoundingClientRect, not a guess) even though body's own overflow-x:hidden still kept it from being visibly scrollable - better to not depend on that. */ .orig-destrail { display: block; padding-top: 18px; overflow-x: hidden; } .orig-destrail__row { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Same margin/padding cancel-out as the calendar carousel (originals.css ~1040) - true edge-to-edge scroll, first/last item still gets the page's own clamp() breathing room. */ margin: 0 calc(-1 * clamp(20px, 6vw, 80px)); padding: 2px clamp(20px, 6vw, 80px) 6px; } .orig-destrail__row::-webkit-scrollbar { display: none; } } .orig-destrail__item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 66px; border: none; background: none; padding: 0; cursor: pointer; } .orig-destrail__item:active { transform: scale(0.94); } .orig-destrail__photo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bl-line); background: var(--card); transition: border-color 0.15s ease; } .orig-destrail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .orig-destrail__fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; } .orig-destrail__name { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--bl-cream-dim); text-align: center; line-height: 1.2; } /* Active = a filled burgundy ring around the photo, same colour/shape language .orig-when-chip.is-active already uses elsewhere on this page - not a new signal. */ .orig-destrail__item.is-active .orig-destrail__photo { border-color: var(--bl-burgundy-bright); border-width: 3px; } .orig-destrail__item.is-active .orig-destrail__name { color: var(--bl-burgundy-bright); font-weight: 800; } /* ── Explore by Format / Explore by Destination ─────────────────────── Rebuilt from ten oversized cards into one compact editorial list - secondary to date discovery, so it stays quiet: a small kicker-style title, then plain rows (name + count), no borders/pills/numbering/ per-item colour, no repeated CTA. The row itself is the click target; its own colour/weight shift on hover/active is the only affordance - never an underline. Presented as a pair (see .orig-explore-pair__grid below) - WHERE and WHAT are peers, not "primary explorer then an afterthought," so each list stays one column here (there's already two panes side by side) rather than the old single-list two-column layout. */ .orig-explore-pair__grid { display: grid; grid-template-columns: 1fr; gap: 8px 56px; } @media (min-width: 780px) { .orig-explore-pair__grid { grid-template-columns: 1fr 1fr; } } .orig-explore { padding-top: clamp(20px, 4vh, 36px); padding-bottom: clamp(20px, 4vh, 36px); } .orig-explore__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-burgundy-bright); margin: 0 0 6px; } .orig-explore__title { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-cream-faint); margin: 0 0 14px; } .orig-explore-list { display: grid; grid-template-columns: 1fr; column-gap: 32px; } @media (min-width: 1180px) { .orig-explore-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .orig-explore-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--bl-line); background: none; border-left: none; border-right: none; border-top: none; font-family: var(--font-body); text-align: left; cursor: pointer; color: var(--bl-cream-dim); transition: color 0.15s ease; } .orig-explore-row__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: inherit; } .orig-explore-row__count { font-size: 12.5px; font-weight: 600; color: var(--bl-cream-faint); flex-shrink: 0; } .orig-explore-row:hover { color: var(--bl-cream); } .orig-explore-row:hover .orig-explore-row__count { color: var(--bl-cream-dim); } .orig-explore-row.is-active { color: var(--bl-burgundy-bright); border-color: var(--bl-burgundy-bright); } .orig-explore-row.is-active .orig-explore-row__name { font-weight: 800; } .orig-explore-row.is-active .orig-explore-row__count { color: var(--bl-burgundy-bright); } .orig-explore-row:focus-visible { outline: 2px solid var(--bl-burgundy-bright); outline-offset: 2px; } /* align-items: start is the actual fix for "massive empty areas inside cards" - CSS Grid's own default (stretch) was forcing every card in a row to the height of the tallest one, so a card with a one-line description sat inside a box sized for its longest-description neighbour. Content determines each card's own height now. */ /* Flexbox, not CSS Grid - a real leftover/trailing row (e.g. 4 cards at 3-per-row leaves 1 alone on row 2) needs to center INDEPENDENTLY of whatever's above it, and CSS Grid can't do that: grid tracks are shared down the whole grid, so `justify-content: center` on a grid only ever centers the grid as a single block, not each wrapped line on its own - confirmed on real multi-row filtered results, not a guess. Flexbox's `flex-wrap` genuinely creates independent lines, each centered on its own via the same `justify-content: center`. Cards get a fixed basis (not `flex-grow`), so a lone leftover card sits at a normal card width instead of stretching to fill the row. */ .orig-calendar-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; align-items: flex-start; } /* Card hierarchy, top to bottom: date -> title -> destination/theme -> short description -> duration+price (quiet) / CTA. One restrained accent (burgundy) throughout, not a colour per format - the photo carries no overlaid label any more (the metadata line below already says destination + format, once, clearly). Border/radius pulled back from the old --radius-2xl/1.5px treatment - editorial, not a bubbly app-card. */ .orig-chapter-card { position: relative; display: flex; flex-direction: column; /* Fixed basis, not flex-grow: mirrors the old grid's minmax(280px, 340px) track so a lone leftover card sits at a normal card width instead of stretching to fill its own centered row. shrink allowed so narrow viewports (above the mobile breakpoint below) can still fit it. */ flex: 0 1 340px; min-width: 280px; max-width: 340px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--bl-line); background: var(--card); cursor: pointer; text-align: left; /* No-op on the