/* ========================================================================== Atla — Mobile galleries (the editorial MASONRY wall) -------------------------------------------------------------------------- The mobile surface, restyled to the approved editorial redesign: a near-black canvas, a Fraunces display hero with an italic accent, Inter for UI/meta, a fine film grain, monochrome tiles that bloom to full colour + caption on hover/focus, theme filter chips, and a masonry/uniform layout toggle. Loaded AFTER styles.css so it inherits the shared design tokens (--bg, --ink, --ink-dim, --ink-mute, --hair, --container, --gutter, the --step-* fluid scale, --dur, --ease) and the editorial font families the styles.css owner adds (--font-display = Fraunces, --font-ui = Inter). Strict CSP: stylesheet only — no inline styles, no @import, no external URLs. Per-tile accent colours and the focal point are passed from JS via the CSSOM (element.style.setProperty("--tile-c" / "--focal-x" / "--focal-y", ...)), which CSP allows. The grain texture is a self-contained data: URI (no fetch). FONT-FAMILY RESILIENCE: we prefer the shared editorial tokens but fall back to the literal family names + system stacks so this page still reads correctly even if the token names land slightly differently. The @font-face declarations themselves live in styles.css per the contract. ========================================================================== */ /* ---- Page accent (wine / rose-earth) + editorial family fallbacks ------ */ .galleries-page--mobile { --accent: #7c3b2d; /* Resolve the editorial families, defaulting to the literal names if the shared tokens are not present. Authored as locally-scoped fallbacks so the page never renders in a bare system font by mistake. */ --tiles-display: var(--font-display, "Fraunces", Georgia, "Times New Roman", serif); --tiles-ui: var(--font-ui, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); } /* The mobile page leans on Inter for body/UI text (the editorial UI family). */ .galleries-page--mobile { font-family: var(--tiles-ui); } /* ---- Inline icon sprite + the .icon helper ----------------------------- */ /* The sprite hidden; these rules keep it out of flow and give every -referenced icon a consistent, themeable size. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { inline-size: 1.15em; block-size: 1.15em; fill: none; stroke: currentColor; vertical-align: -0.15em; flex: none; } /* ---- Film-grain overlay (fixed, decorative, self-contained) ------------ */ .grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Custom "View" cursor (fine-pointer devices only) ------------------ */ /* A small dot that swells to an oversized "View" pill over a tile. Hidden by default and for coarse/touch pointers; JS adds .is-view on tile hover. The real cursor is hidden over the grid only where this enhancement is active. */ .cursor { display: none; } @media (pointer: fine) { .cursor { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 90; display: grid; place-items: center; inline-size: 12px; block-size: 12px; border-radius: 999px; background: var(--ink); mix-blend-mode: difference; pointer-events: none; transition: inline-size 0.3s var(--ease), block-size 0.3s var(--ease), background-color 0.3s var(--ease); } .cursor__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity 0.25s var(--ease); } .cursor.is-view { inline-size: 78px; block-size: 78px; } .cursor.is-view .cursor__label { opacity: 1; } /* Hide the native pointer over the interactive grid while the custom cursor is driving. JS adds .has-cursor to only once it is wired. */ .has-cursor .tiles-grid, .has-cursor .tile { cursor: none; } } /* ---- Hero: editorial Fraunces display, dark canvas + grain (no flat bar) */ .tiles-hero { position: relative; isolation: isolate; color: var(--ink); background: var(--bg); padding-block-start: clamp(7rem, 16vh, 12rem); } /* A soft, off-screen wine glow gives the dark hero a hint of the page accent without breaking AA on the cream display text. */ .tiles-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 58%); pointer-events: none; } .tiles-hero__inner { max-inline-size: var(--container); margin-inline: auto; padding-block: 0 clamp(2rem, 5vh, 3.5rem); padding-inline: var(--gutter); display: flex; flex-direction: column; gap: clamp(0.8rem, 0.4rem + 1vw, 1.5rem); } .tiles-hero .kicker { font-family: var(--font-mono); letter-spacing: 0.3em; color: var(--ink-dim); } .tiles-hero__title { font-family: var(--tiles-display); font-weight: 300; font-optical-sizing: auto; font-size: var(--step-title); line-height: 0.92; letter-spacing: -0.02em; max-inline-size: 16ch; } /* The italic accent word(s) the editorial look calls for. */ .tiles-hero__title em { font-style: italic; font-weight: 400; color: color-mix(in oklab, var(--ink) 78%, var(--accent)); } .tiles-hero__lead { font-size: var(--step-1); max-inline-size: 48ch; color: var(--ink-dim); } /* ---- Back / cross links ----------------------------------------------- */ .tiles-back { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-block-start: clamp(0.4rem, 1vw, 1rem); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; } .tiles-back__link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-dim); text-decoration: none; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .tiles-back__link .icon { inline-size: 1em; block-size: 1em; } .tiles-back__link:hover, .tiles-back__link:focus-visible { color: var(--ink); transform: translateX(-2px); } /* ---- Toolbar: theme filter chips + layout toggle ----------------------- */ /* A sticky blurred bar so chips and the layout toggle stay reachable as the wall scrolls beneath. */ .tiles-toolbar { position: sticky; inset-block-start: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-block: 1px solid var(--hair); } .tiles-toolbar__inner { max-inline-size: var(--container); margin-inline: auto; padding-block: clamp(0.6rem, 1.4vw, 1rem); padding-inline: var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; } .tiles-filters__row { display: flex; flex-wrap: wrap; gap: 0.55rem 0.6rem; margin-inline-end: auto; } .tiles-chip { --chip-c: var(--accent); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--hair); background: rgb(255 255 255 / 0.04); color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .tiles-chip__count { font-size: 0.82em; opacity: 0.7; font-variant-numeric: tabular-nums; } .tiles-chip:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 40%, transparent); } .tiles-chip:active { transform: translateY(1px); } /* Pressed = active filter: flood with that chip's accent, cream ink (AA). */ .tiles-chip[aria-pressed="true"] { background: var(--chip-c); border-color: color-mix(in oklab, var(--chip-c) 70%, #fff 30%); color: var(--on-color); } .tiles-chip[aria-pressed="true"] .tiles-chip__count { opacity: 0.85; } /* Layout toggle (masonry / uniform grid). Icon-only real