The Colophon
Issue Nº 01 — Production Notes
How this issue was designed & built — a tour behind the gold hairlines.
← Return to the CoverRoom I
Concept & Inspiration
ATELIER imagines Nomadic Owls as Issue Nº 01 of a luxury magazine of record — the kind of quiet-money editorial that runs monumental hairline serifs over duotone photography and trusts white space more than noise. The references are Italiana mastheads, Cormorant Garamond body copy, and the apparatus of print itself: running headers, folio numbers, drop caps, pull quotes, “continued on p.04.”
Of the ten directions, this is the one built like a physical object read in order. The three pillars become cover features with plate numerals; the six disciplines become a services index set like fashion-magazine credits; the six live projects become a horizontal-scroll portfolio spread, Plates I–VI. Motion is expensive restraint — clip-path curtains, a 46-second Ken Burns drift, hairline rules that draw themselves in — never bounce, never a fade that calls attention to itself.
Room II
Palette & Type
Ivory
#f7f4ef
the page — every spread starts on this ground
Ink
#1c1a17
body copy, headlines, the colophon’s reversed field
Gold
#b08d3e
hairlines, kickers, folio numerals — accent only, never a block
Hairline
rgba(28,26,23,.18)
every rule that divides a spread
Italiana — masthead display
Nomadic Owls
Hairline-serif display used only for mastheads, section titles and plate numerals — never for body copy.
Cormorant Garamond — editorial serif
We have ideas — and send them to the Internet.
Body text, drop caps and pull quotes at weights 300–600, roman and italic.
Small caps — kickers & running heads
Issue Nº 01 · The Curiosity Edition · Plate IV
Cormorant at 500–600, uppercase, tracked 0.3–0.45em — the wayfinding voice of the whole issue.
Room III
Techniques
Duotone, not grayscale
The owl photography is already black and white, so the “duotone” is built from the ink→ivory system on top: the .duotone wrapper renders the <img> with grayscale + contrast + brightness filters under mix-blend-mode: screen against an ink ground, then a ::after layer paints a soft ivory→champagne→gold linear-gradient over it with mix-blend-mode: multiply. The result reads as toned fine-art print, not a flat B&W photo — with the gold living only in the highlights.
Curtain reveals — and the self-clipping trap
The first pass animated .curtain with clip-path: inset(0 0 100% 0) → inset(0 0 0 0) directly on the observed element. It looked right in the CSS but never fired: Chromium computes an IntersectionObserver target’s intersection ratio *after* its own clip-path is applied, so an element clipped to nothing reports permanently zero — it can never be seen because it is waiting to be seen. The fix moves the clip off the observed node entirely: a child <span class="curtain-panel"> (an ivory panel, not a pseudo-element, since some containers already use ::before/::after for corners) covers the content and scaleY()s away on .in-view. The container being watched never changes shape, so the observer always sees it — the reveal became reliable the moment it stopped hiding itself.
One shared reveal system, three flavours
A single IntersectionObserver in Base.astro (fired once per element, then unobserved) drives three CSS states: .reveal (opacity/translateY fade-up for text, safe — opacity and small translateY never zero out an element’s box), .curtain (the panel-overlay wipe for imagery, described above) and .rulewipe (a ::after overlay that scaleX(0)→1s for standalone hairlines; .folio dividers, which already use ::before/::after as load-bearing flex rules, fall back to a plain opacity/translate reveal instead). Every page using Base gets this for free — guide.astro included.
Editorial apparatus as reusable primitives
Running headers (.running), folio dividers (.folio) and small-caps kickers (.kicker/.sc) are plain CSS classes in Base.astro, so every “spread” — cover, contents, letter, three features, index, portfolio, notes, correspondence, colophon — carries the same masthead-left / section-right header and a centred “P. 0X” rule at its foot, exactly like a real printed issue with 11 numbered pages.
A running header that actually runs
A fixed .site-nav bar slides in once the cover has scrolled past (an IntersectionObserver watching a #hero-end sentinel). As you scroll, a second observer watches every section’s data-folio attribute and updates a live “P. 0X / 11” counter and underlines the active nav link — the page number genuinely tracks your position, the way a magazine app would.
The Portfolio: horizontal scroll done honestly
Six plates sit in a flex row with scroll-snap-type: x proximity — real native horizontal scrolling, not a scroll-jacked pin, so trackpads, arrow keys and touch all just work. A scroll listener (throttled with requestAnimationFrame) drives a 1px progress rule’s width; two circular buttons call scrollBy() by one plate-width. Because the six client projects have no press photography to show honestly, each plate is typographic — a watermark numeral, not a fabricated screenshot — which fits the “fashion credits” brief better than a fake mockup would.
Reduced motion, still a finished issue
Every animation lives inside @media (prefers-reduced-motion: no-preference) in Base.astro, so under reduced motion all reveals, curtains, rules and the Ken Burns loop render in their end state — nothing is hidden or half-built. The hero video goes further: a matchMedia listener in JS (not just CSS) decides whether to call .play() at all, falling back to the static poster frame when motion is unwanted.
Room IV
Higgsfield Prompts
Two stills (Higgsfield image) and one 5-second loop (Higgsfield video, seeded from the portrait still) were generated for this issue, then duotoned entirely in CSS — no raster grading was baked in.
atelier-owl-portrait.webp — Higgsfield / image
“Dramatic black and white fine-art studio portrait of a barn owl, dark charcoal background, single soft key light from the left, exquisite feather detail, editorial fashion photography style, Hasselblad medium format, timeless, elegant, high contrast, no text”
atelier-owl-profile.webp — Higgsfield / image
“Black and white fine-art photograph of a barn owl in flight against pure black background, wings fully spread mid-beat, motion frozen, dramatic rim lighting, editorial luxury magazine aesthetic, medium format film grain, no text”
atelier-owl-clip.mp4 — Higgsfield / video, from atelier-owl-portrait
“Cinematic slow push-in on the barn owl, it blinks slowly and turns its head slightly, faint studio haze drifts through the key light, black and white, elegant, minimal motion, seamless loop”
Room V
Three Passes of Polish
Pass One
First full build reviewed at five scroll depths and on mobile (390px) — and every .curtain/.rulewipe element on the page was blank: the hero photo, the Letter figure, both feature figures and the entire Correspondence card. Root-caused with a standalone Playwright probe rather than guesswork: Chromium reports a permanent 0 IntersectionObserver ratio for a target that clips/scales itself to nothing, so the reveal could never fire. Rebuilt the reveal system so the observed element never changes shape — a child .curtain-panel or ::after overlay carries the animation instead — then fixed a real legibility bug (oldstyle "100ms" reading as "rooms") and tightened compounding mobile spacing between spreads.
Pass Two
With every reveal now firing correctly, reviewed the full spread sequence again plus this colophon. Corrected the feature-grid’s asymmetric column split on the quote-only spread, tuned the portfolio’s scroll-snap and progress-rule math, added a focus-visible ring pass over the plate arrows, nav links and email CTA, and rewrote this page’s own technique notes to document the real bug instead of the originally-planned approach.
Pass Three
Nitpick sweep — letter-spacing on small caps, contrast of dimmed ink tones, mobile tap targets on the portfolio arrows and sticky nav, widow control in the longer pull quotes and technique copy, and a final zero-console-error verification of both routes at desktop and 390px.