/* ============================================================ FONTS The @font-face declarations for Poffy (display) and Casual Human (handwriting) live in default.hbs , so their URLs use the {{asset}} helper (cache-busting) and Poffy's preload can share the exact same URL. This file just references the families by name. ============================================================ */ /* ============================================================ TOKENS 7 colors. 2 type families. 5 sizes. 5 spacing steps. 1 container. 1 reading column. 1 radius. 6 breakpoints. ============================================================ */ :root { /* COLOR (7) */ --c-cream: #FBFAFF; --c-cream-2: #E9E9EE; --c-ink: #1F1F23; --c-ink-mid: #6B6B75; --c-purple: #8B3DFF; --c-purple-2: #5E4CA9; --c-lavender: #D8CBF0; --c-haze: #EFE9FB; /* TYPE FAMILIES (2) */ --f-display: 'Poffy', 'Arial Black', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, -apple-system, sans-serif; /* TYPE SCALE (5) — fluid */ --t-mega: clamp(2.5rem, 5vw, 5rem); --t-display: clamp(1.5rem, 3vw, 2.75rem); --t-h3: clamp(1.125rem, 1.4vw, 1.5rem); --t-body: clamp(1rem, 0.35vw + 0.85rem, 1.1875rem); --t-small: 0.78125rem; /* SPACING SCALE (5) — fluid */ --s-1: 0.5rem; --s-2: 1rem; --s-3: clamp(1.5rem, 2vw, 2.25rem); --s-4: clamp(2.5rem, 4vw, 4.5rem); --s-5: clamp(4rem, 7vw, 7.5rem); /* LAYOUT */ --container: min(96rem, 100% - 2.5rem); --reading: 62ch; --r: 0; /* BREAKPOINTS — declared for reference */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --bp-ultra: 2048px; } @media (min-width: 2048px) { :root { --container: min(120rem, 100% - 5rem); --t-mega: clamp(2.5rem, 5vw, 7.5rem); --t-display: clamp(1.75rem, 3vw, 4rem); } } /* Small phones (<=360px): trim the display scale a touch so a long single-word second line (e.g. "CATALOGUE.") fits instead of clipping at the edge. Still larger than the pre-bump size — just not the full 40px on tiny screens. */ @media (max-width: 360px) { :root { --t-mega: clamp(2.15rem, 5.5vw, 5rem); } } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Stop horizontal scroll from the intentional edge-bleed of the photo cutouts and the absolutely-positioned hint tooltip. Needs both: html clips the viewport scroll, body `clip` constrains the content without becoming a scroll container (so the sticky nav keeps working). */ html { overflow-x: hidden; } body { overflow-x: clip; } html, body { margin: 0; padding: 0; } body { background: var(--c-cream); color: var(--c-ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } /* Ghost's editor writes width/height attributes onto content images, and those act as presentational hints for the CSS width/height properties. max-width caps the width, but without height:auto the height attribute becomes a fixed pixel height and the image stretches. Themed images (hero, cutouts, logos) set their height via class-based rules, which beat this element selector, so they're unaffected. */ img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } hr { border: 0; height: 1px; background: var(--c-ink); margin: 0; } ::selection { background: var(--c-purple); color: var(--c-cream); } .container { width: var(--container); margin-inline: auto; } /* ============================================================ DISPLAY TYPE (Poffy) Uppercase source. Ligatures only. ============================================================ */ .brk { font-family: var(--f-display); font-feature-settings: "liga" 1, "dlig" 1, "calt" 1; font-weight: 400; font-size: var(--t-mega); line-height: 0.85; letter-spacing: -0.005em; margin: 0; overflow-wrap: break-word; /* safety net: a long word breaks rather than overflowing */ } .brk > span { display: block; } .brk > span.indent { padding-left: 1.5em; } .brk > span.indent-2 { padding-left: 3em; } /* On small phones the bigger heading font + the indent can push a long second-line word (e.g. "CATALOGUE.") off the edge — tame the indent so it wraps in bounds. */ @media (max-width: 480px) { .brk > span.indent { padding-left: 0.6em; } .brk > span.indent-2 { padding-left: 1.2em; } } /* Highlight rectangle BEHIND a chunk of display text. Extends past the word into the gutter for a pasted-on feel. */ .hl { position: relative; display: inline-block; isolation: isolate; padding: 0 0.1em; } .hl::before { content: ""; position: absolute; inset: 14% -0.35em 2% -0.15em; background: var(--c-purple); z-index: -1; } .hl--lavender::before { background: var(--c-lavender); } .hl--mute::before { background: var(--c-purple-2); } .hl--ink::before { background: var(--c-ink); } .hl--cream::before { background: var(--c-cream); } /* Flat colour block sitting BEHIND + slightly ABOVE a heading. Reusable across sections — tune via the --hb-* custom props. Add the class to any heading element. */ .head-box { position: relative; isolation: isolate; } .head-box::before { content: ""; position: absolute; z-index: -1; top: var(--hb-top, -0.32em); left: var(--hb-left, -0.28em); width: var(--hb-w, 4.6em); height: var(--hb-h, 0.82em); background: var(--hb-color, var(--c-lavender)); } /* small caps eyebrow */ .eye { font-family: var(--f-body); text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--t-small); font-weight: 500; margin: 0; color: var(--c-ink); } .eye--mute { color: var(--c-ink-mid); } /* small caption tag — pasted-on rectangle */ .tag { display: inline-block; background: var(--c-purple); color: var(--c-cream); padding: 0.4rem 0.6rem 0.45rem; font-family: var(--f-body); text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--t-small); font-weight: 500; line-height: 1; } .tag--ink { background: var(--c-ink); } .tag--lavender { background: var(--c-lavender); color: var(--c-ink); } .tag--cream { background: var(--c-cream); color: var(--c-ink); } /* editorial drop cap (versal) — large initial on a body paragraph */ .dropcap::first-letter { float: left; font-family: var(--f-display); font-feature-settings: "liga" 1, "dlig" 1, "calt" 1; font-style: normal; /* upright even when the paragraph is italic */ font-size: 3.4em; line-height: 0.62; padding: 0.05em 0.14em 0 0; color: var(--c-purple); } /* magazine pull-quote — a pulled line set large with a spot rule */ .pullquote { position: relative; z-index: 1; /* sit above the comp-c block that spills under it */ font-family: var(--f-display); font-feature-settings: "liga" 1, "dlig" 1, "calt" 1; font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.02; margin: var(--s-3) 0 0; padding-left: 0.7rem; border-left: 3px solid var(--c-purple); max-width: 22ch; } /* ============================================================ SPINE — magazine edge label + connecting rule. A vertical label stacked with a 1px tick. Anchored to the container (.spread__inner) so it tucks against the content column rather than floating in the outer margin. Top-left by default; --br mirrors it to the bottom-right. ============================================================ */ .spine { position: absolute; top: 0.25rem; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; z-index: 2; } .spine__label { writing-mode: vertical-rl; transform: rotate(180deg); /* left edge reads bottom-to-top */ font-family: var(--f-body); text-transform: uppercase; letter-spacing: 0.32em; font-size: var(--t-small); font-weight: 500; color: var(--c-ink-mid); white-space: nowrap; margin: 0; } .spine__line { width: 1px; height: clamp(3rem, 9vw, 7rem); background: var(--c-ink); } /* Apostrophes in the tracked-out vertical labels get equal space on both sides, so they float mid-gap. main.js wraps each apostrophe in .apos; killing its own trailing letter-spacing and pulling it toward the previous glyph closes the gap. */ .spine__label .apos { letter-spacing: 0; margin-inline-start: -0.18em; } /* bottom-right mirror — line above, label below, reads top-to-bottom */ .spine--br { top: auto; left: auto; bottom: 0.25rem; right: 0; flex-direction: column-reverse; } .spine--br .spine__label { transform: none; } /* light variant for dark (purple) sections */ .spine--light .spine__label { color: rgba(251,250,255,0.75); } .spine--light .spine__line { background: rgba(251,250,255,0.55); } /* Mobile: drop the spine labels entirely (they crowd the narrow gutter) and reclaim that space by tightening the spread's side padding. */ @media (max-width: 768px) { .spine { display: none; } .spread__inner { padding-inline: 1.25rem; } } /* base spread — relative so float fragments anchor here */ .spread { position: relative; } .spread__inner { position: relative; /* containing block for the spine */ padding-inline: clamp(2.5rem, 5vw, 5.5rem); } /* ============================================================ BTN-STAMP — the FUN brutalist button. Cream rectangle, chunky offset coloured block behind it, arrow that nudges right on hover. ============================================================ */ .btn-stamp { position: relative; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--f-display); font-feature-settings: "liga" 1, "dlig" 1, "calt" 1; font-size: clamp(1rem, 1.2vw, 1.375rem); line-height: 1; padding: 1.1rem 1.5rem 1.1rem; color: var(--c-ink); background: var(--c-cream); border: 2px solid var(--c-ink); text-decoration: none; box-shadow: 0.55rem 0.55rem 0 var(--c-purple); transition: transform 0.18s cubic-bezier(.2,.7,.3,1), box-shadow 0.18s cubic-bezier(.2,.7,.3,1); } .btn-stamp:hover { transform: translate(-4px, -4px); box-shadow: 0.85rem 0.85rem 0 var(--c-purple); } .btn-stamp:active { transform: translate(3px, 3px); box-shadow: 0.2rem 0.2rem 0 var(--c-purple); } .btn-stamp .arr { font-family: var(--f-body); font-weight: 800; font-size: 1.3em; display: inline-block; transition: transform 0.18s cubic-bezier(.2,.7,.3,1); } .btn-stamp:hover .arr { transform: translateX(4px); } .btn-stamp--lavender { box-shadow: 0.55rem 0.55rem 0 var(--c-lavender); } .btn-stamp--lavender:hover { box-shadow: 0.85rem 0.85rem 0 var(--c-lavender); } .btn-stamp--lavender:active { box-shadow: 0.2rem 0.2rem 0 var(--c-lavender); } .btn-stamp--ink { box-shadow: 0.55rem 0.55rem 0 var(--c-ink); } .btn-stamp--ink:hover { box-shadow: 0.85rem 0.85rem 0 var(--c-ink); } .btn-stamp--ink:active { box-shadow: 0.2rem 0.2rem 0 var(--c-ink); } .btn-stamp--mute { box-shadow: 0.55rem 0.55rem 0 var(--c-lavender); } .btn-stamp--mute:hover { box-shadow: 0.85rem 0.85rem 0 var(--c-lavender); } .btn-stamp--mute:active { box-shadow: 0.2rem 0.2rem 0 var(--c-lavender); } /* compact stamp — for the nav CTA */ .btn-stamp--sm { font-size: clamp(0.8rem, 0.9vw, 0.95rem); padding: 0.5rem 0.85rem; gap: 0.5em; box-shadow: 0.3rem 0.3rem 0 var(--c-purple); } .btn-stamp--sm:hover { transform: translate(-2px, -2px); box-shadow: 0.5rem 0.5rem 0 var(--c-purple); } .btn-stamp--sm:active { transform: translate(2px, 2px); box-shadow: 0.12rem 0.12rem 0 var(--c-purple); } /* ============================================================ MEMBERS PAYWALL CTA Ghost injects