/* ========================================================================== 1838 COLLECTIVE — COMING SOON Editorial single-screen frontispiece. Built from the approved reference (Concept A — The Frontispiece). Every position/size below traces back to the 1600×1000 reference canvas. ========================================================================== */ /* ---- Self-hosted fonts — only the two weights actually used on this page. Local files load faster and more privately than a third-party CDN, and can be reliably preloaded (see index.html ). ---- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/eb-garamond-400.woff2') format('woff2'); } :root { /* ---- Colour — exact OKLCH values from the approved reference, with hex fallbacks for browsers without OKLCH support ---- */ --paper: #efeae0; --paper: oklch(0.937 0.014 84); --ink: #312a24; --ink: oklch(0.29 0.014 62); --label-muted: #766d65; /* eyebrow label */ --label-muted: oklch(0.54 0.016 62); --frame-mat: #f9f7f1; /* photograph's mat background */ --frame-mat: oklch(0.976 0.008 88); --frame-border: #d0cbc4; /* photograph's hairline border */ --frame-border: oklch(0.845 0.012 80); --annotation-ink: #403933; /* body statement colour */ --annotation-ink: oklch(0.35 0.014 62); --colophon-muted: #827871; /* place / date line */ --colophon-muted: oklch(0.58 0.016 62); /* ---- Type ---- */ --font-headline: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; /* ---- Reference canvas ---- */ --canvas-w: 1600; --canvas-h: 1000; } /* ========================================================================== Reset (minimal — only what this page needs) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: var(--vh100, 100dvh); /* JS-corrected viewport height on older browsers, see main.js */ } /* Centering via flex is only applied in the poster-mode viewport range (see .stage below). Applying it unconditionally would centre-and-clip the stacked mobile layout whenever its content is taller than the viewport, since flex centring overflows symmetrically on the start side and that side isn't reachable by scrolling. Stacked mode instead relies on normal block flow, which scrolls safely by default. */ @media (min-width: 701px) and (min-height: 501px) { body { display: flex; align-items: center; justify-content: center; } } img { display: block; max-width: 100%; } /* ========================================================================== THE STAGE A single fixed-aspect "sheet" (8:5, matching the 1600×1000 reference) that scales as one locked unit via container query units, so the composition never distorts and never exceeds its approved type scale. ========================================================================== */ .stage { position: relative; aspect-ratio: 8 / 5; width: min(100vw, calc(100dvh * 1.6), 1600px); container-type: size; container-name: stage; } /* ---- Eyebrow label ---- */ .eyebrow { position: absolute; left: 8.25cqw; top: 8.4cqh; margin: 0; font-family: var(--font-mono); font-size: clamp(10px, 0.75cqw, 12px); /* 12px is the reference size; 10px is the legibility floor */ letter-spacing: 0.22em; text-transform: uppercase; color: var(--label-muted); white-space: nowrap; } /* ---- Headline ---- */ .headline { position: absolute; left: 8.25cqw; top: 14.8cqh; width: 40cqw; margin: 0; font-family: var(--font-headline); font-weight: 500; font-size: clamp(20px, 2.125cqw, 34px); /* 34px is the reference size; 20px is the legibility floor */ line-height: 1.4; color: var(--ink); } /* ---- Photograph, presented as a mounted plate ---- */ .plate { position: absolute; left: 8.25cqw; top: 31.6cqh; width: 45cqw; margin: 0; padding: 0.6875cqw; background: var(--frame-mat); border: 1px solid var(--frame-border); } .plate__image { display: block; width: 100%; height: 49.4cqh; object-fit: cover; object-position: 50% 40%; } /* ---- Annotation — sits beside the plate, reads as a marginal note ---- */ .annotation { position: absolute; left: 59.25cqw; top: 51.6cqh; width: 20.625cqw; margin: 0; font-family: var(--font-body); font-size: clamp(14px, 1.0625cqw, 17px); /* 17px is the reference size; 14px is the legibility floor */ line-height: 1.7; color: var(--annotation-ink); text-wrap: pretty; } /* ---- Colophon — place / date + small stamp, bottom right ---- */ .colophon { position: absolute; right: 8cqw; bottom: 6.2cqh; display: flex; align-items: center; gap: 1.375cqw; } .colophon__text { margin: 0; font-family: var(--font-mono); font-size: clamp(10px, 0.71875cqw, 11.5px); /* 11.5px is the reference size; 10px is the legibility floor */ line-height: 1.9; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; color: var(--colophon-muted); white-space: nowrap; } .colophon__mark { width: 5.5cqw; height: 5.5cqw; opacity: 0.92; flex-shrink: 0; } /* ========================================================================== MOBILE / NARROW VIEWPORTS Below this width the locked-aspect composition stops being legible (an 8px headline is not a smaller headline, it's a broken one), so the layout switches to a stacked arrangement instead of scaling further. It keeps the same fonts, colours, frame treatment and hierarchy — the annotation is styled as a marginal note, not a body paragraph, and the colophon stays a small right-aligned block, not a footer bar. ========================================================================== */ @media (max-width: 700px), (max-height: 500px) { .stage { aspect-ratio: auto; width: 100%; max-width: none; container-type: normal; padding: 9vw 6vw 8vw; } .eyebrow, .headline, .plate, .annotation, .colophon { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; } .eyebrow { font-size: 11px; } .headline { margin-top: 1.4rem; font-size: clamp(1.6rem, 5.6vw, 2rem); line-height: 1.3; } .plate { margin-top: 2.2rem; padding: 0.5rem; } .plate__image { height: auto; aspect-ratio: 1600 / 1066; } .annotation { margin-top: 1.6rem; padding-left: 1.1rem; border-left: 1px solid var(--frame-border); font-size: 0.95rem; } .colophon { margin-top: 3rem; justify-content: flex-end; } .colophon__text { font-size: 10px; } .colophon__mark { width: 34px; height: 34px; } } /* ---- Fallback for browsers without container-query support: give them the same safe stacked layout at any width, rather than a broken absolute-position composition. ---- */ @supports not (container-type: size) { .stage { aspect-ratio: auto; width: 100%; max-width: 720px; padding: 6vw; } .eyebrow, .headline, .plate, .annotation, .colophon { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; } .eyebrow { font-size: 11px; margin-bottom: 1.4rem; } .headline { font-size: 1.9rem; line-height: 1.3; } .plate { margin-top: 2.2rem; padding: 0.5rem; } .plate__image { height: auto; aspect-ratio: 1600 / 1066; } .annotation { margin-top: 1.6rem; padding-left: 1.1rem; border-left: 1px solid var(--frame-border); font-size: 0.95rem; } .colophon { margin-top: 3rem; justify-content: flex-end; } .colophon__text { font-size: 10px; } .colophon__mark { width: 34px; height: 34px; } }