/* ============================================================ engine.css - the style of everything the engine draws or drives: the base its parts stand on, the carousel, the gallery grid, the lightbox and the drawer, the Latest block, the reveal, the blog stream and its month pages, and the players. Every page links this file first and the host's site.css second, so a host rule wins a tie. The editor injects its own rules into at runtime, after both files, so the editor wins a tie with either. THE THEME. Every color, font, space, shape and motion value here is a token on :root. Section 1 gives each token a default, so a host that sets none still gets a readable engine. A host sets a token in its own :root to change it. The tokens are the contract. A custom property that a part sets on its own element is internal. Rule: do not reorder a block to tidy the file. CSS resolves ties by source order, so a moved block can change the page without changing a single declaration. Sections: 1. FOUNDATION 4. OVERLAYS 2. CAROUSEL 5. LATEST 3. GALLERY 6. REVEAL AND BLOG ============================================================ */ /* ============================================================ 1. FOUNDATION ------------------------------------------------------------ The theme tokens and their defaults, the reset and the base, the shared type, and the edit launcher. ============================================================ */ /* ------------------------------------------------------------ THE THEME TOKENS ------------------------------------------------------------ The defaults. A host sets any of them in its own :root, which loads after this file. */ :root { /* surfaces */ --bg: #16181d; --bg-deep: #101217; --panel: #1e2128; --panel-2: #23262f; --line: rgba(255,255,255,.08); --line-soft: rgba(255,255,255,.05); /* text */ --text: #ebeef4; --text-soft: #c3c9d4; --muted: #969eaa; --dim: #6b7280; /* accent: the one color that marks what acts */ --accent: #4aa5e8; --accent-bright: #6fbcf2; --accent-deep: #2e87cf; --accent-glow: rgba(74,165,232,.35); --accent-faint: rgba(74,165,232,.10); /* staged accents; the editor paints with the yellow and the orange */ --c-orange: #f0883e; --c-yellow: #f2c14e; --c-lime: #b5e853; /* type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* space */ --section-pad: clamp(4rem, 9.5vw, 8rem); --gutter: clamp(1.25rem, 5vw, 3rem); --maxw: 1180px; /* shape and motion */ --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); } /* ------------------------------------------------------------ RESET + BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: clamp(1rem, .55vw + .9rem, 1.125rem); font-feature-settings: "cv05" 1, "ss01" 1, "cv02" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #06121d; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------ SHARED TYPE ------------------------------------------------------------ The eyebrow, the text link and the text sizes. Pages carry them, and the generator and the editor write them too. */ .eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .65rem; } .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--accent); display: inline-block; } /* centered variant — used by the Contact closing CTA */ .eyebrow--center { justify-content: center; } .textlink { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .3s, gap .3s var(--ease), color .3s; width: fit-content; } .textlink:hover { border-bottom-color: var(--accent); gap: .75rem; color: var(--accent-bright); } .textlink svg { width: 1em; height: 1em; } /* text-size utilities — the copy sizes this page already uses, exposed as named classes for inline wraps (the built-in site editor's toolbar inserts these; safe to hand-author anywhere). em-based, so each step is relative to the text it sits inside: xs ≈ chip size (.76rem on body copy) · sm ≈ meta/eyebrow (.85rem) lg ≈ lede step-up (1.15×) · xl ≈ full lede (1.4×) */ .text-xs { font-size: .76em; } .text-sm { font-size: .85em; } .text-lg { font-size: 1.15em; } .text-xl { font-size: 1.4em; } /* ------------------------------------------------------------ THE EDIT LAUNCHER ------------------------------------------------------------ The page corner peels back to show the word underneath. tool.js builds it at load, on every page, so nothing here is authored into a file and nothing here can reach an export. The whole thing is one SVG, and its paint order does the layering: the page under the corner, then the word, then the flap. SVG draws in document order, so the flap covers the word and the curl uncovers it. There is no z-index inside the button. The free edge of the flap is a curve rather than a crease, which is what makes it read as paper that rolled rather than folded. Above everything: the editor's panel is 3100, its scrim 3200, its modal 3300, the composer 3300. The way out of the editor must never be behind the editor. Which corner comes from data-corner, which tool.js sets. The art is drawn for the bottom left and the other three mirror it, so moving it is one word in tool.js and no new path data. */ .amh-edit { position: fixed; z-index: 4000; width: 132px; height: 132px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .34s var(--ease-soft); } .amh-edit[data-corner="bottom-left"] { left: 0; bottom: 0; } .amh-edit[data-corner="bottom-right"] { right: 0; bottom: 0; transform: scaleX(-1); } .amh-edit[data-corner="top-left"] { left: 0; top: 0; transform: scaleY(-1); } .amh-edit[data-corner="top-right"] { right: 0; top: 0; transform: scale(-1); } .amh-edit__art { display: block; width: 100%; height: 100%; overflow: visible; } /* The paper. Both paths scale from the corner itself, so the peel grows out of it rather than sliding in from somewhere else. */ .amh-edit__paper { transform-box: view-box; transform-origin: 0 150px; transform: scale(.30); transition: transform .55s var(--ease); } .amh-edit__hole { fill: url(#amhHole); } .amh-edit__flap { fill: url(#amhFlap); filter: drop-shadow(-4px 4px 9px rgba(0, 0, 0, .72)); } /* The word sits between the two, so it needs no stacking rule of its own, and it is clipped to the hole, so it is drawn only where the page has peeled away. There is no opacity transition: a second animation on a timer could show the word over paper that had not lifted yet, and would reverse at a different rate when the pointer left. One motion drives the paper, the clip and the reveal together. */ .amh-edit__word { fill: var(--accent-bright); font: 700 13px/1 Consolas, "Courier New", monospace; letter-spacing: .24em; } .amh-edit__word--exit { display: none; } .amh-edit.is-on .amh-edit__word--edit { display: none; } .amh-edit.is-on .amh-edit__word--exit { display: block; } .amh-edit:hover, .amh-edit:focus-visible, .amh-edit.is-on { opacity: 1; } .amh-edit:hover .amh-edit__paper, .amh-edit:focus-visible .amh-edit__paper, .amh-edit.is-on .amh-edit__paper { transform: scale(1); } .amh-edit.is-on .amh-edit__word { fill: var(--accent); } /* The button has no box of its own, so the focus ring goes on the art. */ .amh-edit:focus-visible { outline: none; } .amh-edit:focus-visible .amh-edit__flap { filter: drop-shadow(-4px 4px 9px rgba(0, 0, 0, .72)) drop-shadow(0 0 0 2px var(--accent)); } @media (prefers-reduced-motion: reduce) { .amh-edit, .amh-edit__paper { transition: none; } } /* ============================================================ 2. CAROUSEL ------------------------------------------------------------ The image carousel that work.js builds from a plain list of : on a project card, in a deep dive and in a blog post. ============================================================ */ /* ------------------------------------------------------------ PROJECT IMAGE GALLERY Authoring stays simple: each project owns a plain `.gallery` list of tags. JS turns that into a restrained, cinematic image stage with an in-frame HUD, progress timeline, swipe, and lightbox support. ------------------------------------------------------------ */ /* Fallback for a gallery work.js has not built yet, or never will. Show the first image only. All of them would stack down the page. */ .gallery:not(.is-ready) > img { display: none; width: 100%; border-radius: var(--radius); } .gallery:not(.is-ready) > img:first-of-type { display: block; } .gallery.is-ready { display: block; width: 100%; min-width: 0; } /* The holder stacks the view and, when a photo has a caption, the caption strip under it. The frame layer fills the holder behind both: the ambient backdrop, the progress timeline, and the optional preview chip. Its width keeps the view no taller than --gallery-screen of the screen's height, so a tall frame gets narrower and stays centered. work.js writes both numbers: the ratio on the holder, the share of the screen on the body. The vh line stands in for a browser that has no svh. */ .gallery__holder { position: relative; width: 100%; width: min(100%, calc(var(--gallery-screen, .85) * 100vh * var(--gallery-ratio, 1.7778))); width: min(100%, calc(var(--gallery-screen, .85) * 100svh * var(--gallery-ratio, 1.7778))); max-width: 100%; margin-inline: auto; isolation: isolate; cursor: zoom-in; /* the image area opens the lightbox */ touch-action: pan-y; /* vertical scroll stays native; horizontal = swipe */ } /* The view: the photo area, in the frame's shape. work.js works the shape out from the photos or takes the wrapper's data-shape; see its section 5. */ .gallery__view { position: relative; aspect-ratio: var(--gallery-ratio, 16 / 9); } /* Glassy media surface. The active image is also mirrored into a blurred ambience layer, so screenshots/photos color the frame without extra assets. */ .gallery__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 56%), #090c12; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.52), 0 28px 80px -44px rgba(0,0,0,1); } .gallery__frame::before, .gallery__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .gallery__frame::before { z-index: 0; background: radial-gradient(80% 80% at 18% 12%, rgba(74,165,232,.16), rgba(74,165,232,0) 58%), radial-gradient(64% 72% at 88% 88%, rgba(255,255,255,.07), rgba(255,255,255,0) 62%), linear-gradient(120deg, rgba(255,255,255,.055), transparent 28%, transparent 72%, rgba(255,255,255,.035)); } .gallery__frame::after { z-index: 4; background: linear-gradient(180deg, rgba(5,8,12,.16), transparent 28%, transparent 54%, rgba(4,7,12,.66)), linear-gradient(90deg, rgba(0,0,0,.20), transparent 22%, transparent 78%, rgba(0,0,0,.18)); } .gallery__ambient { position: absolute; inset: -16%; width: 132%; height: 132%; object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; filter: blur(34px) saturate(1.16) brightness(.72); transform: scale(1.05); transition: opacity .52s var(--ease), transform .75s var(--ease); } .gallery__ambient.is-active { opacity: .46; transform: scale(1.02); } /* The active work image stays contained and inspectable. */ .gallery__stage { position: absolute; inset: clamp(14px, 2.45%, 26px); z-index: 2; border-radius: 7px; } /* each photo: contained (any ratio fits, never stretched), centered, floating on the holder with a faint drop shadow, cross-faded. */ .gallery__img { position: absolute; inset: 0; margin: auto; /* centered in the stage */ max-width: 100%; max-height: 100%; width: auto; height: auto; /* shrink large photos to fit; never upscale a small one to mush (it stays crisp + centered) */ opacity: 0; pointer-events: none; border-radius: 6px; transform: translateZ(0) scale(.985); transition: opacity .46s var(--ease), transform .5s var(--ease), filter .5s var(--ease); filter: drop-shadow(0 20px 34px rgba(0,0,0,.46)); } .gallery__img.is-active { opacity: 1; transform: translateZ(0) scale(1); } /* Display True Pixel Size. The frame already draws a photo at its own size. Its corners are not rounded, because a rounded corner clips the pixels of a small image. A small photo keeps hard pixel edges where a screen draws it larger than its file; the engine writes data-crisp only on a photo that small. */ .gallery__img[data-truesize] { border-radius: 0; } .gallery__img[data-crisp] { image-rendering: pixelated; } .gallery__hud { position: absolute; inset: clamp(10px, 2.2%, 18px); z-index: 7; pointer-events: none; } /* THE CAPTION STRIP. It sits under the view, on the frame's backdrop, so a caption never covers a photo and never waits for a hover. It holds the label at the left and the arrow rocker at the right. A carousel whose photos have no caption has no strip. The strip takes no pointer: a tap on it falls through to the frame and opens the viewer, as a tap on the photo does, and the rocker asks for the pointer back. */ .gallery__strip { position: relative; z-index: 7; display: flex; align-items: center; gap: .6rem; padding: 0 clamp(10px, 2.2%, 18px) clamp(12px, 2vw, 18px); pointer-events: none; } /* The editorial label: a left rule, a dot, and the caption, always shown. */ .gallery__caption { flex: 0 1 auto; min-width: 0; max-width: min(100%, 36rem); pointer-events: none; /* a quiet label; taps fall through to swipe / lightbox */ display: flex; align-items: center; min-height: 2.18rem; padding: .48rem .78rem; border-left: 2px solid rgba(111,188,242,.76); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(6,9,14,.84), rgba(6,9,14,.54) 74%, rgba(6,9,14,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -30px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); } /* A photo with no caption keeps the label's place, so the strip keeps one height from photo to photo. */ .gallery__caption.is-empty { visibility: hidden; } .gallery__caption::before { content: ""; flex: 0 0 auto; width: .42rem; height: .42rem; margin-right: .52rem; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 18px rgba(74,165,232,.35); } /* One grid cell holds the caption on screen and a hidden copy of every caption in the carousel, so the cell is as tall as the longest caption at its width. A caption takes two lines at most. */ .gallery__caption-cell { display: grid; flex: 1 1 auto; min-width: 0; } .gallery__caption-text, .gallery__caption-sizer { grid-area: 1 / 1; align-self: center; /* a short caption sits in the middle of a tall cell, not at its top */ min-width: 0; text-align: left; color: rgba(235,238,244,.94); font-size: .75rem; font-weight: 780; letter-spacing: 0; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .gallery__caption-sizer { visibility: hidden; } /* the display rule above would otherwise keep a hidden caption on screen */ .gallery__caption-text[hidden] { display: none; } .gallery__counter { position: absolute; top: 0; right: 0; min-width: 3.7rem; padding: .46rem .58rem; text-align: center; color: rgba(235,238,244,.92); font-size: .66rem; font-weight: 900; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; border: 1px solid rgba(255,255,255,.105); border-radius: 999px; background: rgba(8,12,18,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px -28px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); text-shadow: 0 0 16px rgba(74,165,232,.18); pointer-events: none; opacity: 0; transform: translateY(-6px); /* Slow, soft fade so the count glides in on a change and dissolves back out (the JS reveal timer holds it visible in between). */ transition: opacity .62s var(--ease-soft), transform .62s var(--ease-soft); } .gallery__counter.is-visible, .gallery__holder:focus-within .gallery__counter { opacity: 1; transform: translateY(0); } @media (hover: hover) and (pointer: fine) { .gallery__holder:hover .gallery__counter { opacity: 1; transform: translateY(0); } } .gallery__nav-cluster { position: absolute; right: 0; bottom: clamp(12px, 2vw, 18px); pointer-events: auto; display: flex; align-items: center; gap: .18rem; padding: .24rem; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(8,12,18,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 42px -28px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(16px) saturate(1.18); backdrop-filter: blur(16px) saturate(1.18); } .gallery__nav-cluster::before { content: ""; position: absolute; left: 50%; top: .58rem; bottom: .58rem; width: 1px; background: rgba(255,255,255,.09); transform: translateX(-50%); } /* In the strip the rocker is part of the row, at its right end. */ .gallery__strip .gallery__nav-cluster { position: relative; right: auto; bottom: auto; flex: none; margin-left: auto; } /* PREV / NEXT ARROWS — built once per used location (image / bar / dots) and placed there in the DOM; hidden by default and shown for the chosen placement per breakpoint via the body.ga-d- / .ga-m- classes. Base look is a minimal inline-SVG chevron; image mode overrides it below. */ .gallery__nav { display: none; place-items: center; /* becomes grid when shown */ border: 1px solid transparent; background: none; padding: 0; color: var(--muted); cursor: pointer; transition: color .2s, background .25s, border-color .25s, opacity .25s, transform .25s; } .gallery__nav svg { width: 15px; height: 15px; display: block; } .gallery__nav:hover { color: var(--text); } /* show the chosen placement for each breakpoint */ @media (min-width: 881px) { body.ga-d-image .gallery__nav--image { display: grid; } body.ga-d-bar .gallery__nav--bar { display: grid; } body.ga-d-dots .gallery__nav--dots { display: grid; } } @media (max-width: 880px) { body.ga-m-image .gallery__nav--image { display: grid; } body.ga-m-bar .gallery__nav--bar { display: grid; } body.ga-m-dots .gallery__nav--dots { display: grid; } } /* BAR placement: a floating two-button nav rocker. */ .gallery__nav--bar { flex: 0 0 auto; width: 2.18rem; height: 2.18rem; border-radius: 999px; color: rgba(235,238,244,.78); border-color: transparent; background: transparent; } .gallery__nav--bar:hover { color: #fff; background: rgba(74,165,232,.18); border-color: rgba(74,165,232,.20); transform: scale(1.04); } /* DOTS placement: chevrons flanking the centered progress rail if selected. */ .gallery__nav--dots { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 999px; } .gallery__nav--dots.gallery__nav--prev { margin-right: .15rem; } .gallery__nav--dots.gallery__nav--next { margin-left: .15rem; } /* IMAGE placement: circular overlay button on the photo's edges, revealed on hover / focus (and always shown on touch), like the original style. */ .gallery__nav--image { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; z-index: 3; opacity: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(8,12,20,.55); color: var(--text-soft); } .gallery__nav--image.gallery__nav--prev { left: 12px; } .gallery__nav--image.gallery__nav--next { right: 12px; } .gallery__holder:hover .gallery__nav--image, .gallery__nav--image:focus-visible { opacity: 1; } .gallery__nav--image:hover { background: rgba(8,12,20,.85); border-color: var(--accent); color: #fff; } @media (hover: none) { .gallery__nav--image { opacity: 1; } } /* Full-width timeline at the bottom of the frame. Each segment remains a real button, but the visual reads like an integrated media scrub line. */ .gallery__dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; gap: 2px; margin: 0; height: 3px; pointer-events: auto; } .gallery__dot { position: relative; flex: 1 1 0; width: auto; height: 3px; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: rgba(255,255,255,.16); cursor: pointer; opacity: 1; transition: background .25s, box-shadow .25s; } .gallery__dot img { display: none; } .gallery__dot:hover { background: rgba(255,255,255,.34); } .gallery__dot.is-active { background: linear-gradient(90deg, var(--accent-bright), var(--accent-deep)); box-shadow: 0 0 20px rgba(74,165,232,.34); } /* Optional next-image teaser, now a restrained top-right preview chip. */ .gallery__preview { position: absolute; left: clamp(12px, 2.35%, 20px); top: clamp(12px, 2.35%, 20px); width: 19%; max-width: 118px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer; z-index: 7; opacity: .62; border: 1px solid rgba(255,255,255,.18); background: rgba(10,13,18,.62); box-shadow: 0 18px 42px -24px rgba(0,0,0,.95); border-radius: 8px; transform: translateY(-3px) scale(.98); transition: transform .28s var(--ease), border-color .28s, opacity .28s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .gallery__holder:hover .gallery__preview, .gallery__preview:focus-visible { opacity: 1; transform: translateY(0) scale(1); } .gallery__preview:hover { border-color: rgba(74,165,232,.55); } .gallery__preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* keyboard focus rings on the gallery controls (the arrow also reveals itself on focus via the rule above). */ .gallery__nav:focus-visible, .gallery__dot:focus-visible, .gallery__preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* single-image galleries: no arrows, no dots, no preview. */ .gallery--single .gallery__nav, .gallery--single .gallery__dots, .gallery--single .gallery__preview { display: none; } @media (hover: none) { .gallery__preview { opacity: .86; transform: none; } } @media (max-width: 880px) { .gallery__stage { inset: clamp(10px, 2.8%, 18px); } .gallery__hud { inset: 9px; } .gallery__strip { padding: 0 9px 10px; } .gallery__caption { min-height: 2.08rem; padding: .4rem .62rem; } .gallery__caption-text, .gallery__caption-sizer { font-size: .72rem; } .gallery__counter { min-width: 3rem; font-size: .62rem; } .gallery__nav-cluster { padding: .2rem; } .gallery__nav--bar { width: 1.82rem; height: 1.82rem; } .gallery__preview { width: 22%; max-width: 96px; } } @media (max-width: 440px) { .gallery__caption { padding-inline: .54rem; } .gallery__caption::before { width: .34rem; height: .34rem; margin-right: .42rem; } .gallery__caption-text, .gallery__caption-sizer { font-size: .68rem; } .gallery__counter { min-width: 2.72rem; font-size: .58rem; } .gallery__nav--bar { width: 1.66rem; height: 1.66rem; } .gallery__nav--bar svg { width: 13px; height: 13px; } .gallery__preview { width: 25%; } } @media (prefers-reduced-motion: reduce) { .gallery__ambient, .gallery__img, .gallery__media, .gallery__nav, .gallery__preview, .gallery__counter { transition: none; } } /* ============================================================ 3. GALLERY ------------------------------------------------------------ The gallery page's six-column train grid, which gallery.js packs, and its collapse on a narrow screen. ============================================================ */ /* ------------------------------------------------------------ THE SIX-COLUMN TRAIN GRID ------------------------------------------------------------ One project is one train. A train opens with its title band, spanning all six columns and exactly one row tall, and then its tiles. The invariant: every tile is exactly one row tall, and the widths in a row add to exactly six. An interior hole is therefore impossible rather than avoided, which is why the packer in Phase 4 Part 2 is a small problem instead of a large one. Only the last row of a train may be short. The row height is one value for the whole grid. A tile that is wider is more panoramic, not taller, and that is the look. data-span is the width a tile is DRAWN at. data-w, on the same element, is the width the image PREFERS. They are equal in authored markup; the packer changes only the first. */ /* The section number is counted, never typed. A train moved or added by the editor numbers itself, and so does one moved by hand in the source. */ .gal { padding: 0 0 var(--section-pad); counter-reset: train; } .gal-train { display: grid; /* The column count, declared as well as applied. gallery.js reads this rather than counting the computed tracks: once it has written an inline span, a tile wider than the grid creates implicit tracks and the computed value no longer describes the breakpoint. Keep the two in step. */ --gal-cols: 6; grid-template-columns: repeat(6, 1fr); gap: var(--gal-gap, 14px); counter-increment: train; margin-bottom: clamp(2rem, 4vw, 3.2rem); /* One height for every tile in the grid. It is set on the tile and not as grid-auto-rows, because the title band is a grid item too and has to size to its own text: a band a tile tall is a hole with a heading in it. */ --gal-row: clamp(150px, 14vw, 230px); } /* The title band. One row tall, all six columns, hairline under it. */ .gal-train__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1rem; padding: .9rem .25rem; border-bottom: 1px solid var(--line); } .gal-train__n { flex: none; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 700; } /* The counter prints here. It is not hidden from assistive technology: generated content is part of the band's name, and the number is one of the two facts the band carries that nobody types. */ .gal-train__i { font-style: normal; } .gal-train__i::before { content: counter(train, decimal-leading-zero) " / "; } .gal-train__title { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.02em; } .gal-train__rule { flex: 1; height: 1px; background: var(--line); } /* The year and the image count are one phrase, so they sit closer to each other than to the rule. The dot between them is drawn, not typed: the count is written at export and a separator in the markup would be too. */ .gal-train__meta { flex: none; display: flex; align-items: baseline; gap: .45rem; font-size: .72rem; color: var(--muted); letter-spacing: .05em; } .gal-train__count::before { content: "\00B7"; margin-right: .45rem; color: var(--dim); } /* A tile. The figure is the slot; the image fills it. */ .gal-tile { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); height: var(--gal-row); } .gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Display True Pixel Size: the photo at its own size and centered, and contained when it is larger than the tile. gallery.js puts the carousel's blurred backdrop behind it, and the caption stays above both. */ .gal-tile img[data-truesize] { object-fit: scale-down; position: relative; z-index: 1; } /* gallery.js marks a crisp photo is-shrunk while its tile is smaller than it */ .gal-tile img[data-crisp]:not(.is-shrunk) { image-rendering: pixelated; } .gal-tile img.gal-tile__ambient { position: absolute; inset: -16%; width: 132%; height: 132%; object-fit: cover; z-index: 0; pointer-events: none; opacity: .46; filter: blur(34px) saturate(1.16) brightness(.72); } .gal-tile img[data-truesize] ~ .gal-tile__cap { z-index: 2; } .gal-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .75rem .55rem; font-size: .72rem; color: #fff; letter-spacing: .01em; background: linear-gradient(to top, rgba(8, 10, 14, .86), rgba(8, 10, 14, 0)); } /* The widths. Authored as an attribute rather than a class because the packer rewrites one value per tile, and a value is easier to be sure about than a set of classes that must not overlap. */ .gal-tile[data-span="1"] { grid-column: span 1; } .gal-tile[data-span="2"] { grid-column: span 2; } .gal-tile[data-span="3"] { grid-column: span 3; } .gal-tile[data-span="4"] { grid-column: span 4; } .gal-tile[data-span="6"] { grid-column: span 6; } /* A tile opens the shared lightbox. gallery.js gives it the role and the tabindex; these are the two states that go with them. */ .gal-tile { cursor: zoom-in; } .gal-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) { .gal-tile img { transition: transform .5s var(--ease); } .gal-tile:hover img { transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .gal-tile img, .gal-tile:hover img { transition: none; transform: none; } } /* ------------------------------------------------------------ THE COLLAPSE ------------------------------------------------------------ These rules live here, beside the grid, and not in the RESPONSIVE section. A grid whose collapse is written somewhere else cannot be reasoned about, and this one has an invariant to keep. That is a deliberate exception to the one-place-for-responsive rule, and this comment is the record of it. Six columns cannot survive a phone, and the spans cannot be scaled: three columns have no room for an x4. So each width is mapped to a new one explicitly. Mapped widths do not add to the new column count the way the authored ones add to six, so the browser is asked to close the gaps with dense packing. That is the same job the packer does at full width, done by the layout engine, and it needs no script - which is what keeps the page correct with scripting off. */ @media (max-width: 880px) { .gal-train { --gal-cols: 3; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; --gal-row: clamp(140px, 22vw, 200px); } .gal-tile[data-span="1"], .gal-tile[data-span="2"] { grid-column: span 1; } .gal-tile[data-span="3"] { grid-column: span 2; } .gal-tile[data-span="4"], .gal-tile[data-span="6"] { grid-column: span 3; } } @media (max-width: 560px) { .gal-train { --gal-cols: 1; grid-template-columns: 1fr; grid-auto-flow: row; --gal-row: clamp(180px, 52vw, 260px); } .gal-tile[data-span] { grid-column: 1 / -1; } .gal-train__head { flex-wrap: wrap; gap: .35rem .8rem; } .gal-train__rule { display: none; } } /* ============================================================ 4. OVERLAYS ------------------------------------------------------------ The two surfaces that cover the page: the fullscreen lightbox and the deep-dive drawer. Both lock body scroll while open. ============================================================ */ /* ------------------------------------------------------------ LIGHTBOX One reusable fullscreen viewer. Desktop: image fit to the page (no zoom). Touch devices: pinch-zoom + clamped pan + drag-to-change photos (added in the JS). Plus (X) close, prev/next arrows, a lower-left subtitle that glides in then idle-fades, and Esc / backdrop close. Sits above the header (z 1000). ------------------------------------------------------------ */ body.lb-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(4,6,10,.93); animation: lb-fade .25s var(--ease-soft) both; } .lightbox[hidden] { display: none; } @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } } /* the stage centers the image and reserves margins so the photo never collides with the close button, arrows, or caption bar. */ /* explicit inset rectangle (not padding) defines the safe area, so the photo never collides with the close button, arrows, or caption bar, and the box stays symmetric at any width. */ .lightbox__stage { position: absolute; top: clamp(48px, 8vh, 76px); right: clamp(44px, 8vw, 96px); bottom: clamp(52px, 9vh, 84px); left: clamp(44px, 8vw, 96px); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; /* the JS owns touch gestures on mobile */ } /* Two stacked layers: the active image, and an incoming layer revealed beneath it during a touch drag (so the lightbox slides photo-to-photo exactly like the main gallery). Both are absolutely centered + contained. */ .lightbox__img { position: absolute; inset: 0; margin: auto; /* centered within the stage */ max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 22px 50px rgba(0,0,0,.55)); } .lightbox__img--active { z-index: 1; } .lightbox__img--incoming { z-index: 0; opacity: 0; pointer-events: none; } /* hidden until a drag reveals it */ .lightbox__img.is-zoomed { cursor: grab; } /* a photo the engine marked crisp keeps square pixels, in a pinch as well */ .lightbox__img--crisp { image-rendering: pixelated; } .lightbox__close, .lightbox__nav { position: absolute; z-index: 2; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: rgba(12,16,24,.6); color: #fff; cursor: pointer; border-radius: 50%; transition: background .25s, border-color .25s, transform .2s; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(12,16,24,.95); border-color: var(--accent); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lightbox__close { top: 16px; right: 18px; width: 46px; height: 46px; } .lightbox__close svg { width: 20px; height: 20px; } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; } .lightbox__nav svg { width: 22px; height: 22px; } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } .lightbox__nav:hover { transform: translateY(-50%) scale(1.05); } /* Editorial subtitle, mirroring the in-frame gallery caption: a quiet glass chip with an accent dot, anchored near the image's lower-left (not pinned to the very bottom). Hidden at rest; it glides in on an image change / mouse movement (desktop) or a drag (touch), then fades back out. */ .lightbox__caption { position: absolute; left: clamp(20px, 8vw, 96px); bottom: clamp(58px, 10vh, 96px); right: auto; top: auto; z-index: 3; max-width: min(72%, 540px); display: flex; align-items: center; padding: .5rem .9rem; border-left: 2px solid rgba(111,188,242,.78); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(6,9,14,.86), rgba(6,9,14,.5) 76%, rgba(6,9,14,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -30px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); color: rgba(235,238,244,.95); font-size: .9rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; text-shadow: 0 1px 12px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft); } .lightbox__caption::before { content: ""; flex: 0 0 auto; width: .46rem; height: .46rem; margin-right: .55rem; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 18px rgba(74,165,232,.4); } .lightbox__caption.is-empty { display: none; } .lightbox__caption.is-visible { opacity: 1; transform: translateY(0); } /* See original: the file as it came, at the lower right, opposite the caption and at its size. It fades with the caption and returns on the same signals, and a keyboard focus shows it at once. A faded link takes no click, so an empty-looking corner never opens a tab. */ .lightbox__original { position: absolute; right: clamp(20px, 8vw, 96px); bottom: clamp(58px, 10vh, 96px); z-index: 3; max-width: min(40%, 320px); padding: .5rem .9rem; border-right: 2px solid rgba(111,188,242,.78); border-radius: 8px 0 0 8px; background: linear-gradient(270deg, rgba(6,9,14,.86), rgba(6,9,14,.5) 76%, rgba(6,9,14,0)); -webkit-backdrop-filter: blur(14px) saturate(1.14); backdrop-filter: blur(14px) saturate(1.14); color: rgba(235,238,244,.95); font-size: .9rem; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 12px rgba(0,0,0,.5); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft), color .25s, border-color .25s; } .lightbox__original[hidden] { display: none; } .lightbox__original.is-visible, .lightbox__original:focus-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .lightbox__original:hover { color: #fff; border-color: var(--accent-bright); } .lightbox__original:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 560px) { .lightbox__close { width: 42px; height: 42px; top: 10px; right: 10px; } .lightbox__nav { width: 44px; height: 44px; } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } .lightbox__caption { left: clamp(14px, 5vw, 28px); bottom: clamp(64px, 12vh, 96px); max-width: 80%; padding: .42rem .72rem; font-size: .8rem; } .lightbox__caption::before { width: .4rem; height: .4rem; margin-right: .46rem; } /* a phone has no room beside the caption, so the link takes the free corner opposite the close button */ .lightbox__original { top: 10px; left: clamp(14px, 5vw, 28px); right: auto; bottom: auto; max-width: calc(100% - 90px); padding: .42rem .72rem; border-right: 0; border-left: 2px solid rgba(111,188,242,.78); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(6,9,14,.86), rgba(6,9,14,.5) 76%, rgba(6,9,14,0)); font-size: .8rem; } } @media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } .lightbox__nav, .lightbox__close, .lightbox__caption, .lightbox__img, .lightbox__original { transition: none; } } /* ------------------------------------------------------------ DEEP-DIVE DRAWER ("Learn more") A right-side slide-over that swaps in a longer write-up for one project: a few paragraphs, single photos (each opens the shared lightbox on click / Enter for zoom), and bullet-point blocks. Built once in JS and filled from that project's