/* ============================================================ Proof — Elevated Design System Tokens from identity-foundation.md — do not override Raised to award-tier craft: crop marks, clip-path reveals, staggered metadata, drawing underlines, optical refinement. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&display=swap'); /* ── Design tokens ─────────────────────────────────────────── */ :root { --ink: #141413; --paper: #FFFFFF; --paper-2: #ECE8DF; --muted: #6E6A63; --line: rgba(20, 20, 19, 0.14); --line-med: rgba(20, 20, 19, 0.22); --accent: #BE3A1E; /* burnt vermillion — single restrained accent, live/sold state + mark only */ --type-face: 'Geist', 'Helvetica Neue', Arial, sans-serif; --type-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ── Free type system (no paid licensing) ─────────────────── Body / grotesque = Geist (var(--type-face)) Technical layer = Geist Mono (var(--type-mono)) — numerals, piece codes, metadata keys/values, status labels. This is the spec-sheet character that makes the metadata read as evidence. The SVG wordmark is outlined vector, independent of any font. */ --weight-regular: 400; --weight-medium: 500; /* Space scale — 8px base */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 104px; /* Easing — weighted, confident, not bouncy */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ── Texture system ───────────────────────────────────────── --grain-opacity: master control for the procedural grain overlay. Set to 0 to disable entirely. Fine paper tooth = 0.028. The grain is static (an SVG feTurbulence filter rendered inline), so it is prefers-reduced-motion safe — no animation involved. Toggle via .no-grain class on or set this var to 0. */ --grain-opacity: 0.028; } /* ── Procedural grain / noise overlay ────────────────────────── Technique: SVG feTurbulence filter encoded as a data URI, applied as a fixed pseudo-element over the entire page. Opacity is controlled by --grain-opacity (default 0.028 — barely perceptible, fine paper tooth effect). Static; no animation. Text contrast is unaffected — pointer-events:none + z-index sits above background but below all interactive elements. To disable: add class="no-grain" to , or set: --grain-opacity: 0; The SVG filter uses feTurbulence (baseFrequency 0.65, octaves 4) which produces a fine isotropic grain pattern without any depicted object, color shift, or legibility impact. ────────────────────────────────────────────────────────────── */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--grain-opacity); /* SVG feTurbulence grain — monochrome, no color, pure noise */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 300px 300px; } /* Opt-out: add class="no-grain" to */ body.no-grain::after { display: none; } /* ── Texture surface swap-in hooks ────────────────────────────── These classes back a section with a real texture image when one is available in prototype/assets/textures/. Without an image the section falls back to its existing token color. Usage: add the class to any section element. Expected asset paths (drop files here to activate): prototype/assets/textures/paper.jpg → .surface--paper prototype/assets/textures/concrete.jpg → .surface--concrete prototype/assets/textures/steel.jpg → .surface--steel The background-image layer sits BELOW the existing background color (via background shorthand ordering), so if the image is missing the fallback color shows with no visual breakage. ────────────────────────────────────────────────────────────── */ .surface--paper { background-image: url('../assets/textures/paper.jpg'); background-size: cover; background-position: center; } .surface--concrete { background-image: url('../assets/textures/concrete.jpg'); background-size: cover; background-position: center; } .surface--steel { background-image: url('../assets/textures/steel.jpg'); background-size: cover; background-position: center; } /* ── Registration mark ────────────────────────────────────────── Printer's registration mark (crosshair-in-circle) — the brand icon. Per identity-foundation.md §1: "Proof's mark is a printer's registration mark (crosshair-in-circle), hairline weight." Rendered as a pure-CSS SVG inline shape; no image dependency. Use: Sizes: default 14px × 14px. Modifier .registration-mark--sm: 10px. Color inherits currentColor. ────────────────────────────────────────────────────────────── */ .registration-mark { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; /* Proof registration mark — real brand asset */ background-image: url("assets/brand/proof-mark.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; } .registration-mark--sm { width: 10px; height: 10px; } /* Muted variant for footer / secondary contexts */ .registration-mark--muted { background-image: url("assets/brand/proof-mark-muted.svg"); } /* ── Concept-comp image slot ───────────────────────────────────── Shared utility for the comp-image-over-placeholder pattern. The sits absolutely inside the existing placeholder wrappers; if the file is missing (onerror fires), the img is hidden and the placeholder gradient shows through. Expected asset paths (drop files here to activate): prototype/assets/comps/p-001-hero.jpg → home hero + detail hero prototype/assets/comps/p-001-front.jpg → detail view thumb #1 prototype/assets/comps/p-001-detail.jpg → detail view thumb #2 prototype/assets/comps/p-001-edge.jpg → detail view thumb #3 prototype/assets/comps/p-001-process.jpg → detail view thumb #4 (mode B) prototype/assets/comps/p-003-thumb.jpg → editions list row P-003 prototype/assets/comps/p-002-thumb.jpg → editions list row P-002 prototype/assets/comps/p-001-thumb.jpg → editions list row P-001 prototype/assets/comps/p-000-thumb.jpg → editions list row P-000 ────────────────────────────────────────────────────────────── */ .comp-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 4; /* above placeholder layers (light-hit is z-index 2, artwork-suggestion z-index 1) */ display: block; } /* When the image fails to load, onerror hides it; placeholder shows through */ .comp-image.is-hidden { display: none; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; text-rendering: optimizeLegibility; /* Reserve the scrollbar gutter so content doesn't shift left when the doorway releases its overflow lock and the scrollbar appears. */ scrollbar-gutter: stable; } body { background: var(--paper); color: var(--ink); font-family: var(--type-face); font-weight: var(--weight-regular); line-height: 1.5; min-height: 100vh; } /* ── Selection ──────────────────────────────────────────────── */ ::selection { background: var(--ink); color: var(--paper); } /* ── Focus visible — accessible, on-brand ──────────────────── */ :focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } /* ── Type helpers ───────────────────────────────────────────── */ .t-display { font-size: clamp(44px, 6.5vw, 72px); line-height: 1.02; letter-spacing: -0.02em; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .t-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.08; letter-spacing: -0.01em; font-weight: var(--weight-medium); } .t-body { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; font-weight: var(--weight-regular); } .t-label { font-family: var(--type-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-medium); } .t-caption { font-size: 13px; line-height: 1.45; letter-spacing: 0.01em; font-weight: var(--weight-regular); } .t-numerals { font-family: var(--type-mono); font-variant-numeric: tabular-nums; } /* ── Crop / registration marks — the brand device ──────────── */ /* Printer's registration marks at image frame corners. The "proof" in "printer's proof" made structural. Four .crop-mark-corner span elements per .crop-frame, each with two hairline arms (H + V) via ::before / ::after. Pure CSS — no JS dependency, degrades gracefully. */ .crop-frame { position: relative; overflow: visible !important; } /* Base corner mark — 10px × 10px positioning anchor */ .crop-mark-corner { position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 20; } .crop-mark-corner::before, .crop-mark-corner::after { content: ''; position: absolute; background: rgba(20, 20, 19, 0.28); } /* Horizontal arm */ .crop-mark-corner::before { width: 10px; height: 1px; } /* Vertical arm */ .crop-mark-corner::after { width: 1px; height: 10px; } /* Positioning logic: Each corner mark sits 14px outside the frame edge. Arms point away from the image (outward). Top-left: horizontal arm at bottom of box (nearest corner), vertical arm at right of box. */ .crop-mark-tl { top: -14px; left: -14px; } .crop-mark-tl::before { top: 9px; left: 0; } .crop-mark-tl::after { top: 0; left: 9px; } /* Top-right: horizontal arm at bottom of box, vertical arm at left of box */ .crop-mark-tr { top: -14px; right: -14px; } .crop-mark-tr::before { top: 9px; left: 0; } .crop-mark-tr::after { top: 0; left: 0; } /* Bottom-left: horizontal arm at top of box, vertical arm at right of box */ .crop-mark-bl { bottom: -14px; left: -14px; } .crop-mark-bl::before { top: 0; left: 0; } .crop-mark-bl::after { top: 0; left: 9px; } /* Bottom-right: horizontal arm at top of box, vertical arm at left of box */ .crop-mark-br { bottom: -14px; right: -14px; } .crop-mark-br::before { top: 0; left: 0; } .crop-mark-br::after { top: 0; left: 0; } /* Crop marks retired site-wide — the little corner "t-shape" ticks are hidden everywhere. Kept in markup as harmless aria-hidden spans. */ .crop-mark-corner { display: none !important; } /* ── Comp image inside view thumbnails (lower z-stack) ─────── */ .view-thumb .comp-image { z-index: 3; /* above view-thumb-inner (no explicit z) but below view-label */ } .view-thumb .comp-image.is-hidden { display: none; } /* ── Editions list thumb comp image ─────────────────────────── */ .edition-row-thumb .comp-image { z-index: 3; /* above thumb-lines (z-index 2) */ } /* ── Primary lockup hairline rule ───────────────────────────── */ /* The wordmark-block uses a hairline rule between "proof" and the sub-caption "EDITIONS · EST. 2026" per the primary lockup spec. .wordmark-rule adds that hairline within the wordmark-block. Uses (not
) since it lives inside an element —
is invalid inside in HTML5. */ .wordmark-rule { display: block; width: 100%; height: 1px; background: var(--line); margin: 2px 0 1px; flex-shrink: 0; border: none; } /* ── Site header ────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); padding: 20px clamp(24px, 5vw, 80px); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); } .wordmark-block { display: flex; flex-direction: row; align-items: center; gap: 9px; text-decoration: none; color: inherit; } .wordmark { font-size: 26px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; color: var(--ink); } /* Wordmark logo (SVG) — rendered as an for maximum reliability. The SVG paints in its own near-black (#1a1a1a ≈ --ink). Resize via --logo-h. */ .wordmark-logo { --logo-h: 26px; display: block; height: var(--logo-h); width: auto; } .wordmark-sub { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); line-height: 1; font-weight: var(--weight-regular); } .site-nav { display: flex; align-items: center; gap: var(--sp-4); list-style: none; } /* Nav links with drawing underline */ .site-nav a { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--muted); text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.2s var(--ease-out); } .site-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } .site-nav a.active { color: var(--ink); } .site-nav a.active::after { transform: scaleX(1); } /* ── Hairline separator ─────────────────────────────────────── */ .rule { border: none; border-top: 1px solid var(--line); margin: 0; } /* ── Site footer — minimal, tagline only ────────────────────── */ /* B. Global footer rework: remove mark+wordmark lockup and nav links. Keep only the studio tagline + optional copyright. Full-width, quiet. */ .site-footer { border-top: 1px solid var(--line); padding: var(--sp-4) clamp(24px, 5vw, 80px); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-6); } .footer-tagline { font-family: var(--type-face); font-size: clamp(13px, 1vw, 15px); line-height: 1.6; color: var(--muted); font-weight: var(--weight-regular); font-style: italic; max-width: 68ch; } .footer-copyright { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.55; order: -1; /* copyright sits left; connect links sit right */ } /* Footer connect links — X · Instagram · Email */ .footer-connect { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .footer-connect-link { color: var(--ink); text-decoration: none; transition: color 0.2s var(--ease-out); } .footer-connect-link:hover, .footer-connect-link:focus-visible { color: var(--muted); } /* Single restrained accent: the live "available runs" count only */ .home-section-head-r b { color: var(--accent); } /* ============================================================ STUDIO PAGE — editorial gallery: photo + text, open space ============================================================ */ .studio-gallery { max-width: none; margin: 0 auto; padding: clamp(72px, 12vh, 180px) clamp(24px, 5vw, 80px) clamp(120px, 20vh, 260px); } .studio-gallery-intro { max-width: 56ch; margin-bottom: clamp(96px, 16vh, 220px); } .studio-gallery-kicker { display: block; font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); } .studio-gallery-lead { margin: 0; font-family: var(--type-face); font-weight: var(--weight-medium); font-size: clamp(28px, 4vw, 54px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } /* Plate — the spacing unit between arrangements */ .studio-plate { margin-bottom: clamp(96px, 16vh, 220px); } .studio-plate:last-child { margin-bottom: 0; } .studio-plate-figure { margin: 0; } .studio-plate-figure img { display: block; width: 100%; background: #e9e6e0; } .studio-plate--full .studio-plate-figure img { aspect-ratio: 16 / 7; object-fit: cover; } /* Process video band — 16:7 cinematic frame, 16:9 iframe cropped to cover */ .studio-video { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: #e9e6e0; } .studio-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; aspect-ratio: 16 / 9; border: 0; pointer-events: none; } /* Full-bleed video band — spans the viewport, keeps its current height (so the 16:9 iframe crops further top/bottom rather than growing taller) */ .studio-plate--bleed { width: 100vw; margin-left: calc(50% - 50vw); } .studio-plate--bleed .studio-video { aspect-ratio: auto; height: clamp(420px, 34vw, 674px); } /* Keep the caption aligned with the editorial gutter, not flush to the edge */ .studio-plate--bleed .studio-cap { padding: 0 clamp(24px, 5vw, 80px); } .studio-plate--offset .studio-plate-figure img { aspect-ratio: 4 / 3; object-fit: cover; } .studio-plate--pair .studio-plate-figure img { aspect-ratio: 3 / 4; object-fit: cover; } /* Offset single — image hugs one side, margin breathes on the other */ .studio-plate--offset { display: flex; } .studio-plate--offset-right { justify-content: flex-end; } .studio-plate--offset .studio-plate-figure { width: min(62%, 720px); } /* Two-up arrangements */ .studio-plate--pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: start; } .studio-plate--pair-asym { grid-template-columns: 1.35fr 1fr; align-items: end; } /* Caption */ .studio-cap { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .studio-cap b { color: var(--ink); font-weight: var(--weight-medium); } /* Text interlude — a single line in a field of space */ .studio-interlude { max-width: 40ch; margin: 0 auto clamp(96px, 16vh, 220px); text-align: center; } .studio-interlude p { margin: 0; font-family: var(--type-face); font-weight: var(--weight-regular); font-size: clamp(20px, 2.6vw, 32px); line-height: 1.38; letter-spacing: -0.01em; color: var(--ink); } @media (max-width: 760px) { .studio-plate--pair, .studio-plate--pair-asym { grid-template-columns: 1fr; gap: var(--sp-4); } .studio-plate--offset .studio-plate-figure { width: 100%; } .studio-plate--offset-right { justify-content: stretch; } } /* These classes kept for the studio page texture variant — no content */ .footer-studio { display: none; } .footer-lockup-row { display: none; } .footer-nav { display: none; } /* ── Mobile overrides — global ──────────────────────────────── */ @media (max-width: 899px) { .site-header { padding: var(--sp-2) clamp(16px, 4vw, 40px); } .site-nav { gap: var(--sp-3); } .site-footer { padding: var(--sp-3) clamp(16px, 4vw, 40px); } } /* ============================================================ Edition detail page — edition-detail.html ============================================================ */ /* ── Page layout ────────────────────────────────────────────── */ .page-edition { max-width: 1800px; margin: 0 auto; padding: var(--sp-5) clamp(24px, 5vw, 80px) var(--sp-5); } /* Breadcrumb / series nav */ .edition-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); } .edition-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .edition-breadcrumb a:hover { color: var(--ink); } .breadcrumb-sep { color: var(--muted); font-size: 11px; letter-spacing: 0.05em; opacity: 0.35; } /* Two-zone asymmetric layout */ .edition-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 900px) { .edition-layout { /* 5-col image zone | 1-col gap | 4-col content zone | 2-col negative space */ grid-template-columns: 5fr 1fr 4fr 1.5fr; grid-template-rows: auto; align-items: start; gap: 0; } .edition-image-zone { grid-column: 1 / 2; position: sticky; top: 88px; } .edition-content-zone { grid-column: 3 / 4; padding-top: 0; } } /* ── Image zone ─────────────────────────────────────────────── */ .edition-image-zone { display: flex; flex-direction: column; gap: var(--sp-2); /* Padding gives crop marks room to bleed outside the image */ padding: 14px; } /* Wrapper for the object frame — holds crop mark corners (overflow:visible). The inner .object-frame clips to its bounds for the reveal animation. */ .object-frame-wrapper { width: 100%; position: relative; aspect-ratio: 297 / 420; } /* Primary object placeholder — A3 portrait ratio (297:420 = 0.707) */ .object-frame { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); } /* Clip-path image reveal — horizontal wipe from left (keyframe in shared section) */ .object-frame { clip-path: none; animation: revealWipe 0.9s var(--ease-out) 0.1s both; } /* The warm-paper holding state — before real photography */ .object-frame-inner { position: absolute; inset: 0; background: radial-gradient( ellipse 80% 60% at 30% 20%, rgba(255, 248, 232, 0.6) 0%, transparent 70% ), linear-gradient( 155deg, #E8E2D6 0%, #D9D2C4 35%, #C8BFA8 65%, #BDB49A 100% ); } /* The plotted artwork placeholder */ .artwork-suggestion { position: absolute; inset: 10% 12% 10% 12%; border: 0.5px solid rgba(20, 20, 19, 0.20); overflow: hidden; z-index: 1; } /* Generative line-work simulation */ .artwork-lines { position: absolute; inset: 0; opacity: 0.55; } .artwork-lines svg { width: 100%; height: 100%; } /* Cast shadow */ .cast-shadow { position: absolute; top: calc(10% + 4%); left: calc(12% + 4%); right: -4%; bottom: -4%; background: linear-gradient( 135deg, rgba(12, 10, 8, 0.28) 0%, rgba(12, 10, 8, 0.12) 40%, transparent 70% ); z-index: 0; pointer-events: none; } .artwork-suggestion { z-index: 1; } /* Key light hot-spot */ .light-hit { position: absolute; top: 0; left: 0; width: 50%; height: 45%; background: radial-gradient( ellipse at 20% 20%, rgba(255, 252, 240, 0.35) 0%, transparent 65% ); z-index: 2; pointer-events: none; } /* Frame caption */ .object-frame-caption { position: absolute; bottom: var(--sp-2); left: var(--sp-2); z-index: 3; color: var(--muted); opacity: 0.5; } /* Views row */ .object-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); } .view-thumb { aspect-ratio: 1 / 1; position: relative; overflow: hidden; cursor: pointer; background: var(--paper-2); } .view-thumb-inner { position: absolute; inset: 0; background: linear-gradient( 150deg, #DEDAD0 0%, #C9C2B2 100% ); transition: opacity 0.25s var(--ease-out); } .view-thumb:hover .view-thumb-inner { opacity: 0.72; } .view-thumb.mode-b .view-thumb-inner { background: linear-gradient( 150deg, #D0CCBF 0%, #B8B0A0 50%, #A89E8C 100% ); } .view-thumb.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--ink); } .view-label { position: absolute; bottom: 5px; left: 6px; color: var(--muted); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.7; z-index: 5; /* above comp-image (z-index 3) */ } /* ── Content zone ───────────────────────────────────────────── */ .edition-content-zone { display: flex; flex-direction: column; gap: var(--sp-4); } /* Edition identity block */ .edition-identity { display: flex; flex-direction: column; gap: var(--sp-2); } .edition-series-label { color: var(--muted); display: flex; align-items: center; gap: 0; } .edition-series-label span + span::before { content: '·'; margin: 0 0.55em; color: var(--muted); opacity: 0.4; } .edition-title { color: var(--ink); } .edition-run-line { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-variant-numeric: tabular-nums; } /* Piece code display — P-001 as catalog anchor, edition detail header */ .edition-piece-code { font-family: var(--type-mono); display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-medium); } .edition-piece-code .piece-num { color: var(--ink); font-variant-numeric: tabular-nums; } /* Piece code column in editions list */ .edition-row-code { font-family: var(--type-mono); grid-area: code; align-self: center; padding-right: var(--sp-1); white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } /* Edition number motif — large tabular numeral pair */ .edition-numeral-motif { font-family: var(--type-mono); display: flex; align-items: baseline; gap: 0.3em; font-size: clamp(13px, 1vw, 15px); font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0.04em; } .edition-numeral-motif .num-current { font-size: clamp(32px, 3.5vw, 44px); line-height: 1; font-weight: var(--weight-medium); color: var(--ink); letter-spacing: -0.02em; } .edition-numeral-motif .num-sep { opacity: 0.3; font-size: 1em; margin: 0 0.15em; } .edition-numeral-motif .num-total { font-size: clamp(18px, 2vw, 24px); line-height: 1; font-weight: var(--weight-regular); color: var(--muted); letter-spacing: -0.01em; } /* ── Metadata block ─────────────────────────────────────────── */ .edition-metadata { display: flex; flex-direction: column; } .meta-row { display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-2); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; /* Stagger animation via nth-child — handled by JS for reduced-motion safety */ } .meta-row:first-child { border-top: 1px solid var(--line); } .meta-key { color: var(--muted); flex-shrink: 0; } .meta-value { color: var(--ink); font-variant-numeric: tabular-nums; } .meta-value.available { color: var(--ink); } .meta-value.muted-val { color: var(--muted); } .remain-count { color: var(--muted); margin-left: 0.4em; } /* ── Variance note ──────────────────────────────────────────── */ .variance-note { padding: var(--sp-3) 0; border-top: 1px solid var(--line); color: var(--muted); } /* ── Process notes ──────────────────────────────────────────── */ .process-notes { display: flex; flex-direction: column; gap: var(--sp-2); } .process-notes-header { color: var(--muted); margin-bottom: var(--sp-1); } .process-notes p { color: var(--ink); } /* ── Acquire / commerce block ───────────────────────────────── */ .commerce-block { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .price-line { display: flex; align-items: baseline; gap: var(--sp-2); } .price-value { font-size: clamp(22px, 2.5vw, 28px); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.01em; } .price-context { color: var(--muted); } /* Acquire button */ .btn-acquire { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px var(--sp-3); background: var(--ink); color: var(--paper); font-family: var(--type-face); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s var(--ease-out); border-radius: 0; line-height: 1; } .btn-acquire:hover { opacity: 0.78; } /* Sold edition — struck price + inactive "Unavailable" button */ .price-value--sold { text-decoration: line-through; opacity: 0.5; } .btn-acquire--sold { background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; pointer-events: none; } .btn-acquire--sold:hover { opacity: 1; } /* Waitlist button */ .btn-waitlist { display: none; align-items: center; justify-content: center; width: 100%; padding: 15px var(--sp-3); background: transparent; color: var(--muted); font-family: var(--type-face); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); border-radius: 0; line-height: 1; } .btn-waitlist:hover { border-color: rgba(20, 20, 19, 0.4); color: var(--ink); } .acquire-note { color: var(--muted); padding-top: var(--sp-1); } /* ── Provenance / COA note ──────────────────────────────────── */ .provenance-note { padding: var(--sp-3) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-1); } .provenance-note p { color: var(--muted); } /* ── Mobile overrides — edition detail ─────────────────────── */ @media (max-width: 899px) { .page-edition { padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-4); } .edition-breadcrumb { margin-bottom: var(--sp-3); } .edition-image-zone { order: 1; } .edition-content-zone { order: 2; } .meta-row { grid-template-columns: 90px 1fr; } } @media (max-width: 479px) { .t-display { font-size: 36px; } .edition-numeral-motif .num-current { font-size: 28px; } } /* ── Edition detail — entrance animations ───────────────────── */ .edition-image-zone { animation: fadeUp 0.6s var(--ease-out) 0.05s both; } /* Content zone children stagger via JS class-based approach */ .edition-content-zone > * { opacity: 0; transform: translateY(10px); /* JS adds .is-visible class which triggers transition */ transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .edition-content-zone > *.is-visible { opacity: 1; transform: translateY(0); } /* Fallback: if JS is disabled / prefers-reduced-motion, show everything */ @media (prefers-reduced-motion: reduce) { .edition-content-zone > * { opacity: 1; transform: none; transition: none; } .object-frame { clip-path: none; animation: none; } } .object-views { animation: fadeUp 0.5s var(--ease-out) 0.2s both; } /* ============================================================ Home page — index.html ============================================================ */ .page-home { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); min-height: calc(100vh - 72px); } .home-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .home-layout { grid-template-columns: 7fr 1fr 4fr 2fr; gap: 0; align-items: end; min-height: 72vh; } .home-image-zone { grid-column: 1 / 2; } .home-identity-zone { grid-column: 3 / 4; padding-bottom: 2px; } } /* ── Home image zone ────────────────────────────────────────── */ .home-image-zone { display: flex; flex-direction: column; gap: var(--sp-2); /* Padding creates room for crop marks to bleed outside */ padding: 14px; } /* Home object frame — crop marks via .crop-frame class */ .home-object-frame { width: 100%; aspect-ratio: 297 / 420; position: relative; overflow: visible; } /* Clip-path reveal — home hero */ .home-object-frame-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.0s var(--ease-out) 0.05s both; } .home-object-frame-inner { position: absolute; inset: 0; background: radial-gradient( ellipse 75% 55% at 28% 18%, rgba(255, 250, 235, 0.65) 0%, transparent 68% ), linear-gradient( 152deg, #EAE3D5 0%, #DDD5C5 38%, #CAC0AB 68%, #BFB49D 100% ); z-index: 1; } .home-cast-shadow { position: absolute; top: calc(0% + 6%); left: calc(0% + 5%); right: -7%; bottom: -7%; background: linear-gradient( 138deg, rgba(10, 8, 6, 0.32) 0%, rgba(10, 8, 6, 0.14) 38%, transparent 65% ); z-index: 0; pointer-events: none; } .home-light-hit { position: absolute; top: 0; left: 0; width: 55%; height: 42%; background: radial-gradient( ellipse at 18% 18%, rgba(255, 253, 242, 0.38) 0%, transparent 62% ); z-index: 2; pointer-events: none; } .home-artwork-suggestion { position: absolute; inset: 10% 12% 10% 12%; border: 0.5px solid rgba(20, 20, 19, 0.20); overflow: hidden; z-index: 1; } .home-artwork-lines { position: absolute; inset: 0; opacity: 0.50; } .home-artwork-lines svg { width: 100%; height: 100%; } .home-frame-caption { display: block; color: var(--muted); opacity: 0.5; margin-top: var(--sp-1); } /* ── Home identity zone ─────────────────────────────────────── */ .home-identity-zone { display: flex; flex-direction: column; gap: var(--sp-3); } .home-series-label { color: var(--muted); display: flex; align-items: center; gap: 0; } .home-series-label span + span::before { content: '·'; margin: 0 0.5em; color: var(--muted); opacity: 0.4; } .home-edition-title { color: var(--ink); margin: 0; } .home-meta-line { color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .home-meta-line span + span::before { content: '·'; margin: 0 0.5em; color: var(--muted); opacity: 0.4; } /* "View edition" link — drawing underline */ .btn-view-edition { display: inline-flex; align-items: center; justify-content: flex-start; padding: 12px 0; background: transparent; color: var(--ink); font-family: var(--type-face); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; border-radius: 0; line-height: 1; width: fit-content; position: relative; } .btn-view-edition::after { content: ''; position: absolute; bottom: 12px; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(1); transform-origin: left center; transition: opacity 0.2s var(--ease-out); } .btn-view-edition:hover::after { opacity: 0.45; } /* Entrance animations — home */ .home-image-zone { animation: fadeUp 0.65s var(--ease-out) 0.04s both; } .home-identity-zone { animation: fadeUp 0.6s var(--ease-out) 0.18s both; } @media (max-width: 899px) { .page-home { padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .home-image-zone, .home-identity-zone { animation: none; } .home-object-frame-clip { clip-path: none; animation: none; } } /* ============================================================ Editions list page — editions.html ============================================================ */ .page-editions { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); } .editions-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); } .editions-page-title { color: var(--ink); } .editions-count { color: var(--muted); white-space: nowrap; } /* ── Editions list ──────────────────────────────────────────── */ .editions-list { list-style: none; } .edition-row { display: grid; grid-template-columns: 64px var(--sp-3) 48px var(--sp-2) 1fr auto auto; grid-template-areas: "thumb . code . title status date" "thumb . code . meta status date"; column-gap: 0; row-gap: 0; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; /* Hover background via pseudo — smooth */ transition: background 0.2s var(--ease-out); } .editions-list li:first-child .edition-row { border-top: 1px solid var(--line); } /* Hover: subtle warm wash + thumbnail scale */ .edition-row:hover { background: rgba(20, 20, 19, 0.025); } .edition-row:hover .edition-row-thumb { transform: scale(1.02); } .edition-row.is-sold-out, .edition-row.is-archive { opacity: 0.68; } /* Thumbnail cell */ .edition-row-thumb { grid-area: thumb; align-self: center; width: 64px; height: 90px; position: relative; overflow: hidden; flex-shrink: 0; transition: transform 0.35s var(--ease-out); } /* Pre-release variant: white card with the brand "?" centered and a real drop shadow. Drop the modifier on release day to expose the real piece. */ .edition-row-thumb--pending { overflow: visible; } .edition-row-thumb--pending .edition-row-thumb-shadow, .edition-row-thumb--pending .edition-row-thumb-lines { display: none; } .edition-row-thumb--pending .edition-row-thumb-inner { background: var(--paper); box-shadow: 0 1px 2px rgba(20, 20, 19, 0.06), 0 4px 12px rgba(20, 20, 19, 0.10); } .edition-row-thumb--pending .comp-image { object-fit: contain; width: 56%; height: auto; inset: 0; margin: auto; opacity: 0.18; } .edition-row-thumb-inner { position: absolute; inset: 0; z-index: 1; } .edition-row-thumb-shadow { position: absolute; top: 3px; left: 3px; right: -2px; bottom: -2px; background: linear-gradient( 135deg, rgba(10, 8, 6, 0.20) 0%, rgba(10, 8, 6, 0.07) 45%, transparent 68% ); z-index: 0; pointer-events: none; } .edition-row-thumb-lines { position: absolute; inset: 0; z-index: 2; overflow: hidden; } .edition-row-thumb-lines svg { width: 100%; height: 100%; } /* Row title area */ .edition-row-title-cell { grid-area: title; padding-right: var(--sp-3); padding-top: 2px; } .edition-row-title { color: var(--ink); line-height: 1.15; font-size: 14px; letter-spacing: 0; } .edition-row.is-sold-out .edition-row-title, .edition-row.is-archive .edition-row-title { color: var(--muted); } /* Row meta */ .edition-row-meta { grid-area: meta; padding-right: var(--sp-3); padding-top: 5px; color: var(--muted); display: flex; align-items: center; gap: 0; } .edition-row-meta span + span::before { content: '·'; margin: 0 0.45em; opacity: 0.4; } /* Status label */ .edition-row-status { grid-area: status; text-align: right; align-self: center; padding-left: var(--sp-3); padding-right: var(--sp-2); white-space: nowrap; } .status-available { color: var(--ink); } .status-sold-out, .status-archive { color: var(--muted); } /* Date column */ .edition-row-date { grid-area: date; text-align: right; align-self: center; color: var(--muted); white-space: nowrap; } /* ── Thumbnail surface variants ─────────────────────────────── */ .thumb-run-01-iii .edition-row-thumb-inner { background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255, 250, 232, 0.5) 0%, transparent 65%), linear-gradient(148deg, #EBE4D4 0%, #DDD5C3 42%, #CEC5B0 72%, #C2B89E 100%); } .thumb-run-01-ii .edition-row-thumb-inner { background: radial-gradient(ellipse 65% 48% at 32% 22%, rgba(255, 248, 228, 0.45) 0%, transparent 62%), linear-gradient(150deg, #E6DFCE 0%, #D8D0BF 40%, #C9C0AA 70%, #BDB397 100%); } .thumb-run-01-i .edition-row-thumb-inner { background: radial-gradient(ellipse 72% 52% at 28% 18%, rgba(255, 248, 230, 0.5) 0%, transparent 66%), linear-gradient(152deg, #E8E2D5 0%, #D9D2C4 38%, #C8BFA8 65%, #BDB49A 100%); } .thumb-field-00 .edition-row-thumb-inner { background: radial-gradient(ellipse 60% 45% at 35% 25%, rgba(245, 240, 220, 0.38) 0%, transparent 58%), linear-gradient(145deg, #DDD7C8 0%, #CFC8B8 42%, #C0B8A5 70%, #B5AA95 100%); } .thumb-untitled .edition-row-thumb-inner { background: radial-gradient(ellipse 55% 42% at 38% 28%, rgba(238, 232, 210, 0.32) 0%, transparent 55%), linear-gradient(144deg, #D6D0C0 0%, #C9C2B2 44%, #BAB2A0 72%, #AEAA94 100%); } /* ── Archive link in editions header ────────────────────────── */ .editions-archive-link { font-size: 10px; letter-spacing: 0.10em; color: var(--muted); text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.2s var(--ease-out); } .editions-archive-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--muted); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out); } .editions-archive-link:hover { color: var(--ink); } .editions-archive-link:hover::after { transform: scaleX(1); } /* ── Empty state ────────────────────────────────────────────── */ .editions-empty { padding: var(--sp-6) 0; color: var(--muted); } /* ── Provenance footnote ─────────────────────────────────────── */ .editions-provenance-note { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--muted); max-width: 480px; } /* ── Mobile — Editions ──────────────────────────────────────── */ @media (max-width: 899px) { .page-editions { padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-4); } .editions-header { margin-bottom: var(--sp-4); } /* Code column hidden on mobile — piece code folds into meta row */ .edition-row { grid-template-columns: 48px var(--sp-2) 1fr auto; grid-template-areas: "thumb . title status" "thumb . meta status"; } .edition-row-code { display: none; } .edition-row-thumb { width: 48px; height: 68px; } .edition-row-date { display: none; } .edition-row-status { padding-left: var(--sp-2); padding-right: 0; } } @media (max-width: 599px) { .edition-row { grid-template-columns: 48px var(--sp-2) 1fr; grid-template-areas: "thumb . title" "thumb . meta" "thumb . status"; } .edition-row-status { text-align: left; padding-left: 0; padding-top: 4px; align-self: start; } } /* ── Editions — entrance animations ────────────────────────── */ .editions-header { animation: fadeUp 0.5s var(--ease-out) 0.04s both; } .editions-list { animation: fadeUp 0.55s var(--ease-out) 0.12s both; } .editions-provenance-note { animation: fadeUp 0.45s var(--ease-out) 0.22s both; } @media (prefers-reduced-motion: reduce) { .editions-header, .editions-list, .editions-provenance-note { animation: none; } } /* ============================================================ Studio page — studio.html Most reductive page on the site. One paragraph, generous space, type and silence do the work. ============================================================ */ .page-studio { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: space-between; } .studio-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } /* Left void: invisible on mobile (single column), present as silence on desktop */ .studio-left-void { display: none; } @media (min-width: 900px) { .studio-layout { /* Deliberate offset: statement in right ~50%, leaves heavy left silence */ grid-template-columns: 1fr 1fr; align-items: start; gap: 0; } .studio-left-void { display: block; /* The left void is pure negative space — no content, no styling */ } .studio-statement-zone { grid-column: 2 / 3; padding-left: var(--sp-4); } } /* Studio statement — long-form body, max-width for comfortable measure */ .studio-statement-zone { display: flex; flex-direction: column; gap: var(--sp-4); } .studio-page-label { color: var(--muted); margin-bottom: var(--sp-2); display: block; } .studio-statement { color: var(--ink); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; font-weight: var(--weight-regular); max-width: 52ch; letter-spacing: 0; } /* Contact invitation — small, below */ .studio-contact-invite { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .studio-contact-invite a { color: var(--muted); text-decoration: none; position: relative; padding-bottom: 1px; transition: color 0.2s var(--ease-out); } .studio-contact-invite a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out); } .studio-contact-invite a:hover { color: var(--ink); } .studio-contact-invite a:hover::after { transform: scaleX(1); } /* Studio entrance */ .studio-statement-zone { animation: fadeUp 0.7s var(--ease-out) 0.18s both; } /* ── Studio image zone ────────────────────────────────────────── Left column on desktop. Full-width on mobile. Contains the studio scene figure with crop marks + clip reveal. ────────────────────────────────────────────────────────────── */ .studio-image-zone { /* Padding provides breathing room for crop marks to bleed outside */ padding: 14px; animation: fadeUp 0.65s var(--ease-out) 0.05s both; } /* Studio scene frame — landscape ratio (wide industrial shot). Uses 16:9 as the landscape studio image ratio. .crop-frame: overflow:visible so corner marks bleed outside. */ .studio-scene-frame { width: 100%; aspect-ratio: 16 / 10; position: relative; overflow: visible; display: block; } /* Clip-path reveal — horizontal wipe from left, slightly slower than hero */ .studio-scene-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.08s both; } /* Studio scene photography — fills the frame entirely */ .studio-scene-img { /* Overrides .comp-image for this context: position + size already set by .comp-image */ object-position: center 40%; /* favour the upper content area of the landscape shot */ } /* Placeholder surface — warm dark tone suggesting a studio space, darker than the paper placeholder used for artwork because the studio scene has hard light + concrete surfaces. */ .studio-scene-placeholder { position: absolute; inset: 0; z-index: 1; /* behind .comp-image (z-index 4) */ } .studio-scene-placeholder-inner { position: absolute; inset: 0; background: radial-gradient( ellipse 60% 45% at 25% 30%, rgba(210, 200, 180, 0.35) 0%, transparent 65% ), linear-gradient( 158deg, #CBBFA8 0%, #B8AB96 30%, #A09385 60%, #8C8074 100% ); } /* ── Studio layout: image left, statement right on desktop ─────── */ @media (min-width: 900px) { .studio-layout { /* Image takes ~55% of width; statement takes ~45% */ grid-template-columns: 55fr 45fr; align-items: start; gap: 0; } .studio-image-zone { grid-column: 1 / 2; /* Align image top with statement label */ padding-top: 14px; } .studio-statement-zone { grid-column: 2 / 3; padding-left: var(--sp-5); padding-top: var(--sp-2); /* Statement zone no longer takes the full right half; it is bounded by the image column next to it */ } } /* ── Cast-pair: subordinate process atmosphere ────────────────── Two cast plaster images below the main studio scene. Framed as studio/process/casting-direction, not purchasable editions. ────────────────────────────────────────────────────────────── */ .studio-cast-pair { margin-top: var(--sp-6); /* JS adds .is-visible for entrance animation */ opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .studio-cast-pair.is-visible { opacity: 1; transform: translateY(0); } .studio-cast-rule { height: 1px; background: var(--line); margin-bottom: var(--sp-4); } .studio-cast-label { display: block; color: var(--muted); margin-bottom: var(--sp-3); } /* Two-image row — equal columns with a gap */ .studio-cast-images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); max-width: 640px; /* Contained — subordinate to the main image */ } .studio-cast-figure { display: block; /* Graceful collapse when image absent AND placeholder: figure remains in layout */ } /* When the cast figure is hidden (both img error AND we explicitly hide the whole figure via JS if desired — but here we just hide the via onerror on closest figure for the cast pair). The placeholder div remains so layout holds. */ .studio-cast-figure.is-hidden { display: none; } /* Cast image frame — square crop, letting the subject fill it */ .studio-cast-frame { width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: var(--paper-2); } /* Cast photography — fills its square frame, sits above placeholder */ .studio-cast-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 1; /* above .studio-cast-placeholder (z-index: 0) */ } /* When onerror fires, hide the img; placeholder below shows through */ .studio-cast-img.is-hidden { display: none; } /* Cast placeholder surfaces — different warm grays to suggest textured plaster / concrete material character */ .studio-cast-placeholder { position: absolute; inset: 0; background: radial-gradient( ellipse 65% 50% at 35% 25%, rgba(215, 205, 188, 0.45) 0%, transparent 62% ), linear-gradient( 145deg, #D2C9B8 0%, #C4BAA8 38%, #B5AA96 68%, #AAA08C 100% ); z-index: 0; } .studio-cast-placeholder--b { background: radial-gradient( ellipse 55% 45% at 40% 35%, rgba(208, 198, 180, 0.40) 0%, transparent 58% ), linear-gradient( 148deg, #C8BEA8 0%, #BAAF9A 40%, #ABA18A 70%, #9E967E 100% ); } /* ── Mobile overrides — studio page ────────────────────────────── */ @media (max-width: 899px) { .page-studio { padding: var(--sp-5) clamp(16px, 4vw, 40px) var(--sp-4); } .studio-cast-images { max-width: 100%; gap: var(--sp-2); } .studio-cast-pair { margin-top: var(--sp-5); } } /* ── Reduced motion — studio ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .studio-statement-zone { animation: none; } .studio-image-zone { animation: none; } .studio-scene-clip { clip-path: none; animation: none; } .studio-cast-pair { opacity: 1; transform: none; transition: none; } } /* ── Concrete texture footer surface — Studio page only ───────── The concrete.jpg texture is applied to the footer on the Studio page via .studio-footer-surface (added alongside .surface--concrete). A scrim overlay ensures --paper / --muted / --ink text stays legible at the intended contrast without reducing the texture to a muddy wash. Technique: position:relative on footer + absolute pseudo scrim rendered as a semi-opaque --paper wash, sitting below the footer text (z-index layering via .studio-footer-scrim div and stacking context). ────────────────────────────────────────────────────────────── */ .studio-footer-surface { position: relative; /* The texture is already set by .surface--concrete (background-image). Override background-color to --paper so the tinted scrim reads correctly when the texture is absent. */ background-color: var(--paper); /* background-blend-mode: luminosity keeps the texture monochrome and prevents it from introducing color cast */ background-blend-mode: luminosity; /* Reduce texture opacity by layering a strong paper wash on top via scrim */ } /* The scrim div: absolute, covers the footer, sits between texture and text. We use a real element (not ::before/::after) because the footer uses grid layout and pseudo-elements don't participate in grid children — this avoids stacking-context issues. */ .studio-footer-scrim { position: absolute; inset: 0; /* Strong paper wash — 82% opacity so texture reads at ~18% through it. At this level the texture is perceptible and intentional without competing with the text. */ background: rgba(244, 241, 234, 0.82); pointer-events: none; z-index: 0; } /* Push footer content above the scrim */ .footer-studio--over-surface { position: relative; z-index: 1; } .studio-footer-surface .footer-nav { position: relative; z-index: 1; } /* ============================================================ Contact / Newsletter page — contact.html Two functions on one page: list signup + inquiry email. Form: hairline underline inputs, on-brand. ============================================================ */ .page-contact { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); min-height: calc(100vh - 72px); } .contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 0; align-items: start; } .contact-list-zone { padding-right: var(--sp-5); } .contact-inquiry-zone { padding-left: var(--sp-5); border-left: 1px solid var(--line); } } /* Shared zone layout */ .contact-zone-label { color: var(--muted); margin-bottom: var(--sp-3); display: block; } .contact-zone-heading { color: var(--ink); margin-bottom: var(--sp-2); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; font-weight: var(--weight-medium); letter-spacing: -0.01em; } .contact-zone-body { color: var(--muted); margin-bottom: var(--sp-4); max-width: 44ch; } /* ── Form elements — hairline underline style ───────────────── */ .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); } .form-label { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-medium); } .form-input { background: transparent; border: none; border-bottom: 1px solid var(--line-med); border-radius: 0; color: var(--ink); font-family: var(--type-face); font-size: 15px; font-weight: var(--weight-regular); letter-spacing: 0; line-height: 1.4; padding: 8px 0 10px; width: 100%; outline: none; transition: border-color 0.2s var(--ease-out); -webkit-appearance: none; } .form-input::placeholder { color: var(--muted); opacity: 0.55; } .form-input:focus { border-bottom-color: var(--ink); } /* Custom focus-visible for inputs */ .form-input:focus-visible { outline: none; border-bottom-color: var(--ink); } /* Textarea */ .form-textarea { background: transparent; border: none; border-bottom: 1px solid var(--line-med); border-radius: 0; color: var(--ink); font-family: var(--type-face); font-size: 15px; font-weight: var(--weight-regular); line-height: 1.6; padding: 8px 0 10px; width: 100%; outline: none; resize: vertical; min-height: 100px; transition: border-color 0.2s var(--ease-out); -webkit-appearance: none; } .form-textarea::placeholder { color: var(--muted); opacity: 0.55; } .form-textarea:focus { border-bottom-color: var(--ink); } .form-textarea:focus-visible { outline: none; border-bottom-color: var(--ink); } /* Submit button — same language as .btn-acquire */ .btn-submit { display: inline-flex; align-items: center; justify-content: center; padding: 14px var(--sp-3); background: var(--ink); color: var(--paper); font-family: var(--type-face); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s var(--ease-out); border-radius: 0; line-height: 1; margin-top: var(--sp-1); } .btn-submit:hover { opacity: 0.78; } /* ── Reserve modal — opens from Reserve buttons on edition pages ─────── Markup is injected by assets/reserve.js; classes match the contact form (.form-field/.form-label/.form-input) for visual consistency. */ .reserve-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); background: rgba(20, 20, 19, 0.45); opacity: 0; transition: opacity 0.25s var(--ease-out); } .reserve-modal[hidden] { display: none !important; } .reserve-modal.is-open { opacity: 1; } .reserve-modal-card { position: relative; background: var(--paper); width: 100%; max-width: 460px; padding: var(--sp-5) var(--sp-4) var(--sp-4); max-height: calc(100svh - 2 * var(--sp-3)); overflow-y: auto; box-shadow: 0 2px 8px rgba(20, 20, 19, 0.08), 0 24px 60px rgba(20, 20, 19, 0.18); transform: translateY(8px); transition: transform 0.3s var(--ease-out); } .reserve-modal.is-open .reserve-modal-card { transform: translateY(0); } .reserve-close { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 32px; height: 32px; border: 0; padding: 0; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.55; transition: opacity 0.15s var(--ease-out); } .reserve-close:hover, .reserve-close:focus-visible { opacity: 1; } .reserve-piece-line { margin: 0 0 var(--sp-1); color: var(--muted); } .reserve-heading { margin: 0 0 var(--sp-1); font-family: var(--type-face); font-size: 24px; font-weight: var(--weight-medium); letter-spacing: -0.005em; color: var(--ink); } .reserve-subtitle { margin: 0 0 var(--sp-3); color: var(--muted); } .reserve-textarea { resize: vertical; min-height: 64px; padding: 8px 0; } .reserve-submit { width: 100%; } .reserve-note { margin-top: var(--sp-2); color: var(--muted); font-style: italic; } .reserve-error { margin-top: var(--sp-2); color: #B0331C; } .reserve-confirmation { padding-top: var(--sp-2); } @media (prefers-reduced-motion: reduce) { .reserve-modal, .reserve-modal-card { transition: none; } } /* Form note — email provider hookup note */ .form-note { color: var(--muted); margin-top: var(--sp-2); font-style: italic; } /* Inquiry zone — just a direct email display */ .contact-email-display { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .contact-email-link { color: var(--ink); text-decoration: none; font-size: clamp(15px, 1.4vw, 18px); font-weight: var(--weight-regular); letter-spacing: 0; position: relative; display: inline-block; padding-bottom: 2px; transition: color 0.2s var(--ease-out); } .contact-email-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out); } .contact-email-link:hover::after { transform: scaleX(1); } /* Contact page entrance */ .contact-list-zone { animation: fadeUp 0.6s var(--ease-out) 0.08s both; } .contact-inquiry-zone { animation: fadeUp 0.6s var(--ease-out) 0.18s both; } @media (max-width: 899px) { .page-contact { padding: var(--sp-5) clamp(16px, 4vw, 40px) var(--sp-4); } .contact-inquiry-zone { border-left: none; border-top: 1px solid var(--line); padding-top: var(--sp-5); padding-left: 0; } .contact-list-zone { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .contact-list-zone, .contact-inquiry-zone { animation: none; } } /* ============================================================ Shared keyframes ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* revealWipe neutralized — sideways image wipe removed per founder. Kept as a no-op so existing `animation: revealWipe` references stay valid. */ @keyframes revealWipe { from { clip-path: none; } to { clip-path: none; } } /* Global reduced-motion override — catch-all */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Specifically ensure clip-path reveals show content */ .home-object-frame-clip, .object-frame { clip-path: none !important; animation: none !important; } } /* ============================================================ GLOBAL EDITORIAL DEVICES Reusable across all pages: section kickers, marginalia, image captions, section dividers, scarcity microcopy, layout utilities, scroll-reveal. Class inventory (stable public API): .section-kicker — numbered mono kicker "01 — LABEL" .marginalia-text — small mono running text for margins .marginalia-sep — hairline separator between marginalia items .img-caption — editorial mono caption below/over images .img-caption-primary — main caption line .img-caption-meta — secondary metadata line .img-caption--overlay — caption positioned over image (bottom-left) .section-divider — hairline rule + optional center mark .section-divider-rule — the hairline arm of a divider .section-divider--compact — tighter vertical margin .scarcity-line — standardized scarcity microcopy .layout-full-bleed — edge-to-edge container (no side padding) .layout-contained — standard contained width with side padding .layout-asymmetric — asymmetric two-column editorial grid .reveal-on-scroll — entrance animation (JS-driven IO, see HTML) ============================================================ */ /* ── Section kicker ───────────────────────────────────────────── Mono uppercase, generously tracked. Numbered movements. Usage:

01 — The Studio

The number and dash are part of the content; styled uniformly. ────────────────────────────────────────────────────────────── */ .section-kicker { font-family: var(--type-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.10em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--muted); margin-bottom: var(--sp-3); display: block; } /* ── Marginalia utilities ──────────────────────────────────────── Small mono codes, coordinates, EST. 2026, registration mark placed in margins/corners as recurring brand texture. Usage:

EST. 2026

The marginalia-sep is a hairline dot between items. ────────────────────────────────────────────────────────────── */ .marginalia-text { font-family: var(--type-mono); font-size: 10px; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-regular); display: block; } /* Horizontal separator between inline marginalia items */ .marginalia-sep { display: inline-block; width: 1px; height: 10px; background: var(--line); vertical-align: middle; margin: 0 8px; flex-shrink: 0; } /* ── Image caption component ──────────────────────────────────── Mono, metadata-style. Magazine discipline: every image gets one. Usage:
Plotting, in one pass. iDraw H SE A3 · archival pigment
Modifier .img-caption--overlay: positioned over image, bottom-left. ────────────────────────────────────────────────────────────── */ .img-caption { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; } .img-caption-primary { font-family: var(--type-mono); font-size: 11px; line-height: 1.35; letter-spacing: 0.04em; color: var(--ink); font-weight: var(--weight-regular); display: block; } .img-caption-meta { font-family: var(--type-mono); font-size: 10px; line-height: 1.3; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--weight-regular); display: block; } /* Overlay variant — sits inside the figure, over the image */ .img-caption--overlay { position: absolute; bottom: var(--sp-3); left: var(--sp-3); z-index: 10; padding-top: 0; /* Subtle scrim behind caption text for legibility */ background: transparent; max-width: 28ch; } .img-caption--overlay .img-caption-primary { color: var(--paper); opacity: 0.9; } .img-caption--overlay .img-caption-meta { color: var(--paper); opacity: 0.6; } /* ── Section divider ──────────────────────────────────────────── Hairline rule + optional centered registration mark. Usage: Or just a rule: ────────────────────────────────────────────────────────────── */ .section-divider { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0; } .section-divider--compact { margin: var(--sp-3) 0; } .section-divider-rule { flex: 1; height: 1px; background: var(--line); display: block; } /* ── Scarcity microcopy ────────────────────────────────────────── Standardized scarcity language across the site. Usage:

Edition of 15 · 12 remain

────────────────────────────────────────────────────────────── */ .scarcity-line { font-family: var(--type-mono); font-size: 11px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; display: block; } /* ── Layout utilities ──────────────────────────────────────────── Full-bleed: edge-to-edge, no side padding. Contained: standard bounded width with side gutters. ────────────────────────────────────────────────────────────── */ .layout-full-bleed { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } .layout-contained { max-width: 1800px; margin-left: auto; margin-right: auto; padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); } @media (max-width: 899px) { .layout-contained { padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); } } /* Asymmetric two-column editorial grid */ .layout-asymmetric { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 900px) { .layout-asymmetric { grid-template-columns: 6fr 4fr; gap: 0; align-items: start; } } /* ── Scroll reveal ─────────────────────────────────────────────── JS adds .is-visible via IntersectionObserver in HTML. Transitions opacity + slight upward lift. prefers-reduced-motion: noscript style and JS guard show all. ────────────────────────────────────────────────────────────── */ .reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } } /* ============================================================ HOME PAGE — editorial sequence Movements 00–05. Replaces the original .page-home block. ============================================================ */ /* ── 00 · HERO — Typographic, image-less ──────────────────────── Full-viewport warm-paper gallery wall. No photograph. The void is the composition. Registration/crop marks frame the negative space. Edition data at display scale does the work. ────────────────────────────────────────────────────────────── */ .home-hero { width: 100%; /* Fills the viewport but GROWS if the type block is taller — never clips */ min-height: calc(100svh - 61px); position: relative; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; justify-content: center; } /* ── Hero background video (Vimeo, full-cover) ─────────────────── */ .home-hero-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--paper); } /* Scale the 16:9 iframe to cover the hero box (cover-fit for iframes) */ .home-hero-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 of viewport width */ min-height: 100%; min-width: 177.78vh; /* 16:9 of viewport height */ border: 0; pointer-events: none; } /* Legibility scrim — paper veil, weighted to the left where the type sits */ .home-hero-video-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.20) 100%); } /* Hero content sits above the video — raise stacking only (keep positioning) */ .home-hero-figure { z-index: 1; } .home-hero-overlay { z-index: 3; } .home-scroll-cue { z-index: 3; } .home-hero-typo-identity { z-index: 2; } /* Reduced motion: drop the video, keep the clean paper hero */ @media (prefers-reduced-motion: reduce) { .home-hero-video { display: none; } } /* The figure fills the full section — now a typographic container */ .home-hero-figure { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; /* .crop-frame sets overflow: visible — restore clip at figure level */ overflow: hidden; } /* Hero clip wrapper — kept for structural compat, no photo inside */ .home-hero-clip { position: absolute; inset: 0; overflow: hidden; /* No clip-path animation — no image to reveal */ } /* Hero photograph — unused in typographic mode, hidden if src missing */ .home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: none; /* typographic hero: no photo */ z-index: 4; } /* ── Typographic hero: hairline frame structure ───────────────── An SVG grid of faint registration lines creates an "empty sheet" compositing surface. The crop marks (via .crop-frame) sit at the outermost corners; these interior hairlines give measured depth. ────────────────────────────────────────────────────────────── */ .home-hero-hairlines { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .home-hero-hairlines svg { width: 100%; height: 100%; display: block; } /* ── Typographic hero: edition identity — center-left, asymmetric */ .home-hero-typo-identity { /* Fills the hero; first line docks top-left, cluster docks bottom-right. */ position: relative; z-index: 10; flex: 1; width: 100%; max-width: none; margin: 0; padding: var(--sp-5) clamp(20px, 3vw, 52px); display: flex; flex-direction: column; justify-content: space-between; /* Entrance is handled per-child by the .hero-anim / .hero-in intro below */ } /* Kicker: P-001 large, mono, top of identity block */ .home-hero-typo-kicker { font-family: var(--type-mono); font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--muted); line-height: 1; display: block; margin-bottom: var(--sp-1); } /* Display title: large, negative-tracked, confident */ .home-hero-typo-title { font-family: var(--type-face); font-size: clamp(56px, 9.5vw, 128px); font-weight: var(--weight-medium); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); margin: 0; /* Optically nudge leftward with negative indent on first line */ } /* Scarcity marginalia: AVAILABLE · EDITION OF 15 · 12 REMAIN */ .home-hero-typo-scarcity { font-family: var(--type-mono); font-size: clamp(10px, 0.85vw, 11px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.3; display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: var(--sp-2); } /* Mono meta line: Seed · Dimensions */ .home-hero-typo-meta { font-family: var(--type-mono); font-size: clamp(10px, 0.85vw, 11px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); opacity: 0.65; line-height: 1.3; margin-top: 4px; } /* CTA: ink-on-paper, drawing underline */ .home-hero-typo-cta { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-family: var(--type-mono); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; position: relative; padding-bottom: 3px; margin-top: var(--sp-3); width: fit-content; transition: opacity 0.2s var(--ease-out); } .home-hero-typo-cta::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(1); transform-origin: left center; transition: opacity 0.2s var(--ease-out); } .home-hero-typo-cta:hover { opacity: 0.6; } /* Placeholder — no longer used in typographic hero; kept as no-op for compat */ .home-hero-placeholder { display: none; } .home-hero-placeholder-inner { display: none; } .home-hero-light-hit { display: none; } /* Line-field — disabled in typographic hero; hidden */ .home-hero-linefield { display: none; } .home-hero-linefield svg { display: none; } /* Scrim — not needed on paper background; hidden */ .home-hero-scrim { display: none; } /* Overlay content wrapper — sits above everything in hero */ .home-hero-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; } /* ── Hero marginalia — top-left (on paper, ink-toned) ─── */ .home-hero-marginalia-tl { position: absolute; top: var(--sp-4); left: var(--sp-4); display: flex; align-items: center; } /* Override: marginalia text now on paper background, use muted ink not paper */ .home-hero-marginalia-tl .marginalia-text { color: var(--muted); } /* ── Easter-egg: the period at the end of "to artifacts." ─────── At rest it's invisible (inherits the headline). Hover / focus runs a gentle bob to invite a click; the click spawns the floating video popover (.home-hero-projection). The video stays visible while the user keeps hovering the period OR the video, and fades out otherwise. */ .hero-egg-period { display: inline-block; cursor: pointer; color: inherit; transition: color 0.25s var(--ease-out); outline: none; } .hero-egg-period:hover, .hero-egg-period:focus-visible { color: var(--accent, currentColor); animation: hero-egg-bob 1.6s ease-in-out infinite; } .hero-egg-period:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; } @keyframes hero-egg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.06em); } } /* ── Floating projection popover for the studio intro video ───── */ .home-hero-projection { position: fixed; z-index: 50; width: clamp(280px, 38vw, 560px); aspect-ratio: 16 / 9; background: var(--paper); box-shadow: 0 2px 8px rgba(20, 20, 19, 0.10), 0 24px 60px rgba(20, 20, 19, 0.22); opacity: 0; pointer-events: none; transform: translateY(6px) scale(0.985); transform-origin: 50% 100%; transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .home-hero-projection[hidden] { display: none !important; } .home-hero-projection.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .home-hero-projection-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--paper); } .home-hero-projection-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: 0; background: rgba(20, 20, 19, 0.45); color: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0.85; transition: opacity 0.15s var(--ease-out), background 0.15s var(--ease-out); } .home-hero-projection-close:hover, .home-hero-projection-close:focus-visible { opacity: 1; background: rgba(20, 20, 19, 0.7); } @media (prefers-reduced-motion: reduce) { .home-hero-projection { transition: none; } .hero-egg-period:hover, .hero-egg-period:focus-visible { animation: none; } } /* ── Hero marginalia — top-right ─── */ .home-hero-marginalia-tr { position: absolute; top: var(--sp-4); right: var(--sp-4); display: flex; align-items: center; gap: 8px; animation: fadeUp 0.6s var(--ease-out) 1.1s both; } /* ── Hero identity — not used in typographic mode (see .home-hero-typo-identity) ─── */ .home-hero-identity { display: none; } .home-hero-code { color: var(--muted); margin-bottom: 6px; letter-spacing: 0.12em; } .home-hero-title { font-family: var(--type-face); font-size: clamp(42px, 7vw, 88px); font-weight: var(--weight-medium); line-height: 1.0; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 var(--sp-3); } .home-hero-cta { display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; letter-spacing: 0.12em; position: relative; padding-bottom: 2px; pointer-events: auto; transition: color 0.2s var(--ease-out); } .home-hero-cta::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--muted); transform: scaleX(1); transform-origin: left center; transition: background 0.2s var(--ease-out); } .home-hero-cta:hover { color: var(--ink); } .home-hero-cta:hover::after { background: var(--ink); } /* ── Hero marginalia — bottom-right ─── */ .home-hero-marginalia-br { position: absolute; bottom: var(--sp-4); right: var(--sp-4); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; animation: fadeUp 0.6s var(--ease-out) 1.15s both; } .home-hero-marginalia-br .marginalia-text { text-align: right; color: var(--muted); opacity: 0.7; } /* ── Scroll cue ─── */ .home-scroll-cue { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: fadeUp 0.6s var(--ease-out) 1.3s both; } .home-scroll-cue .marginalia-text { color: var(--muted); opacity: 0.55; } .home-scroll-line { display: block; width: 1px; height: 32px; background: rgba(20, 20, 19, 0.22); animation: scrollPulse 2s var(--ease-in-out) 1.8s infinite; transform-origin: top center; } @keyframes scrollPulse { 0% { opacity: 0.3; transform: scaleY(1); } 50% { opacity: 0.7; transform: scaleY(1.15); } 100% { opacity: 0.3; transform: scaleY(1); } } /* Hero crop marks — on paper background, use ink at low opacity */ .home-hero-figure .crop-mark-corner::before, .home-hero-figure .crop-mark-corner::after { background: rgba(20, 20, 19, 0.22); } /* Hero is line-free: no hairline grid, no corner crop brackets */ .home-hero-hairlines, .home-hero-figure .crop-mark-corner { display: none; } /* ── Mobile — hero ─── */ @media (max-width: 599px) { .home-hero { height: calc(100svh - 57px); min-height: 460px; } .home-hero-typo-title { font-size: clamp(40px, 11vw, 60px); } .home-hero-marginalia-tr { display: none; } .home-hero-marginalia-br { display: none; } .home-scroll-cue { display: none; } .home-hero-marginalia-tl { left: var(--sp-3); top: var(--sp-3); } } @media (prefers-reduced-motion: reduce) { .home-hero-clip { clip-path: none !important; animation: none !important; } .home-hero-typo-identity, .home-hero-marginalia-tl, .home-hero-marginalia-tr, .home-hero-identity, .home-hero-marginalia-br, .home-scroll-cue, .home-scroll-line { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── 01 · THE THESIS ──────────────────────────────────────────── Big asymmetric Geist statement. Kicker, generous negative space, marginalia in left column (coordinates, EST. 2026, mark). ────────────────────────────────────────────────────────────── */ .home-thesis { padding: var(--sp-6) clamp(24px, 5vw, 80px); max-width: 1800px; margin: 0 auto; } .home-thesis-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .home-thesis-inner { /* Left void ~28% | Right content ~72% — asymmetric */ grid-template-columns: 28fr 72fr; gap: 0; align-items: start; } .home-thesis-void { padding-top: 6px; } .home-thesis-content { padding-left: var(--sp-5); border-left: 1px solid var(--line); } } /* Left void: marginalia column */ .home-thesis-void { display: flex; flex-direction: column; gap: var(--sp-1); } .home-thesis-marginalia { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* On mobile: marginalia hidden (declutter) */ @media (max-width: 899px) { .home-thesis-void { display: none; } } /* Content zone */ .home-thesis-content { display: flex; flex-direction: column; } /* The main statement — large, asymmetric, reading weight */ .home-thesis-statement { font-size: clamp(22px, 2.8vw, 36px); line-height: 1.22; letter-spacing: -0.01em; font-weight: var(--weight-regular); color: var(--ink); max-width: 52ch; margin-bottom: var(--sp-3); } /* Emphasized closing — slightly bolder via weight-medium */ .home-thesis-statement--em { font-weight: var(--weight-medium); color: var(--ink); font-size: clamp(20px, 2.4vw, 30px); } .home-thesis-meta { margin-top: var(--sp-1); } @media (max-width: 599px) { .home-thesis { padding: var(--sp-5) var(--sp-3); } .home-thesis-statement { font-size: clamp(20px, 6.5vw, 28px); } } /* ── 02 · THE EDITION ─────────────────────────────────────────── Feature spread: large image + metadata block. Asymmetric, image-led. ────────────────────────────────────────────────────────────── */ .home-edition { padding: var(--sp-4) clamp(24px, 5vw, 80px) var(--sp-6); max-width: 1800px; margin: 0 auto; } .home-edition-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .home-edition-inner { /* Image ~58% | Content ~38% | margin ~4% */ grid-template-columns: 58fr 4fr 38fr; gap: 0; } .home-edition-image-col { grid-column: 1 / 2; /* Padding for crop marks */ padding: 14px 14px 14px 0; } .home-edition-content-col { grid-column: 3 / 4; padding-top: var(--sp-4); } } /* Image column */ .home-edition-image-col { padding: 14px; } .home-edition-figure { position: relative; display: block; width: 100%; aspect-ratio: 297 / 420; overflow: visible; } /* Cast shadow */ .home-edition-shadow { position: absolute; top: 5%; left: 4%; right: -5%; bottom: -5%; background: linear-gradient( 138deg, rgba(10, 8, 6, 0.26) 0%, rgba(10, 8, 6, 0.10) 42%, transparent 68% ); z-index: 0; pointer-events: none; } /* Clip reveal */ .home-edition-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; transition: clip-path 0.9s var(--ease-out); } /* When parent is visible, trigger clip-path reveal */ .reveal-on-scroll.is-visible .home-edition-clip { clip-path: inset(0 0% 0 0); } .home-edition-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 4; } /* Placeholder */ .home-edition-placeholder { position: absolute; inset: 0; z-index: 1; } .home-edition-placeholder-inner { position: absolute; inset: 0; background: radial-gradient( ellipse 75% 55% at 28% 18%, rgba(255, 250, 235, 0.65) 0%, transparent 68% ), linear-gradient( 152deg, #EAE3D5 0%, #DDD5C5 38%, #CAC0AB 68%, #BFB49D 100% ); } /* Content column */ .home-edition-content-col { display: flex; flex-direction: column; gap: var(--sp-3); } .home-edition-title { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.015em; font-weight: var(--weight-medium); color: var(--ink); margin: 0; } .home-edition-narrative { color: var(--ink); max-width: 44ch; } /* Process note */ .home-edition-process-note { color: var(--muted); font-style: italic; border-top: 1px solid var(--line); padding-top: var(--sp-2); margin-top: var(--sp-1); } @media (max-width: 599px) { .home-edition { padding: var(--sp-3) var(--sp-3) var(--sp-5); } } /* ── 03 · THE PROCESS ─────────────────────────────────────────── studio-01.jpg near-full-bleed + cast-02.jpg detail. Covetable core: make the reader feel in the room. ────────────────────────────────────────────────────────────── */ .home-process { /* No max-width — the primary image breaks to full-bleed */ padding-bottom: var(--sp-6); } .home-process-header { max-width: 1800px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px) var(--sp-3); } /* Primary image: near-full-bleed, extends to page edges on desktop */ .home-process-primary { width: 100%; /* Add 14px each side for crop mark breathing room */ padding: 14px; } .home-process-main-figure { display: block; width: 100%; /* Landscape: wide studio shot. 16:9 ratio. */ aspect-ratio: 16 / 9; position: relative; overflow: visible; } .home-process-main-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; transition: clip-path 1.0s var(--ease-out) 0.1s; } .reveal-on-scroll.is-visible .home-process-main-clip { clip-path: inset(0 0% 0 0); } .home-process-main-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; z-index: 4; } /* Placeholder: dark studio tone */ .home-process-placeholder--studio { position: absolute; inset: 0; z-index: 1; } .home-process-placeholder-inner--studio { position: absolute; inset: 0; background: radial-gradient( ellipse 55% 40% at 25% 28%, rgba(195, 185, 165, 0.38) 0%, transparent 60% ), linear-gradient( 158deg, #C4B8A4 0%, #B0A490 30%, #9C9080 60%, #887C6C 100% ); } /* Secondary row: cast + line-field */ .home-process-secondary { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); max-width: 1800px; margin: var(--sp-3) auto 0; padding: 0 clamp(24px, 5vw, 80px); } @media (min-width: 700px) { .home-process-secondary { grid-template-columns: 1fr 1fr; } } .home-process-secondary-figure { display: block; position: relative; /* Square crop for secondary images */ aspect-ratio: 1 / 1; overflow: visible; /* Padding for crop marks */ padding: 14px; box-sizing: content-box; } .home-process-secondary-clip { position: absolute; /* Inset to account for padding */ inset: 14px; overflow: hidden; clip-path: none; transition: clip-path 0.9s var(--ease-out) 0.2s; } .reveal-on-scroll.is-visible .home-process-secondary-clip { clip-path: inset(0 0% 0 0); } .home-process-secondary-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 4; } /* Cast placeholder */ .home-process-placeholder--cast { position: absolute; inset: 0; z-index: 1; } .home-process-placeholder-inner--cast { position: absolute; inset: 0; background: radial-gradient( ellipse 65% 50% at 35% 25%, rgba(215, 205, 188, 0.45) 0%, transparent 62% ), linear-gradient( 145deg, #D2C9B8 0%, #C4BAA8 38%, #B5AA96 68%, #AAA08C 100% ); } /* Line-field figure: SVG placeholder, no photograph */ .home-process-linefield-figure { overflow: visible; } .home-process-linefield-inner { position: absolute; inset: 14px; overflow: hidden; } .home-process-linefield-inner svg { width: 100%; height: 100%; display: block; } /* Caption below secondary figures */ .home-process-secondary-figure .img-caption { position: absolute; bottom: 0; left: 14px; padding-top: 6px; } @media (max-width: 599px) { .home-process-header { padding: 0 var(--sp-3) var(--sp-3); } .home-process-secondary { padding: 0 var(--sp-3); gap: var(--sp-2); } } /* ── 04 · EDITIONS INDEX ──────────────────────────────────────── 4 editions with status/scarcity. Sold-out proves demand. ────────────────────────────────────────────────────────────── */ .home-editions-index { padding: var(--sp-5) clamp(24px, 5vw, 80px) var(--sp-6); max-width: 1800px; margin: 0 auto; } .home-editions-index-inner { display: flex; flex-direction: column; gap: 0; } .home-editions-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); } .home-editions-header .section-kicker { margin-bottom: 0; } .home-editions-viewall { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.2s var(--ease-out); } .home-editions-viewall::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--muted); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out); } .home-editions-viewall:hover { color: var(--ink); } .home-editions-viewall:hover::after { transform: scaleX(1); } /* Edition rows list */ .home-editions-list { list-style: none; } .home-edition-row { display: grid; /* thumb | gap | code | gap | title area | status */ grid-template-columns: 56px var(--sp-2) 40px var(--sp-2) 1fr auto; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; transition: background 0.18s var(--ease-out); } .home-edition-row:hover { background: rgba(20, 20, 19, 0.025); } .home-edition-row:hover .home-edition-row-thumb { transform: scale(1.03); } /* Sold-out / archive: muted */ .home-edition-row--soldout, .home-edition-row--archive { opacity: 0.6; } /* Thumbnail */ .home-edition-row-thumb { grid-column: 1; width: 56px; height: 80px; position: relative; overflow: hidden; flex-shrink: 0; transition: transform 0.32s var(--ease-out); } .home-edition-row-thumb-inner { position: absolute; inset: 0; } .home-edition-row-thumb-lines { position: absolute; inset: 0; z-index: 2; overflow: hidden; } .home-edition-row-thumb-lines svg { width: 100%; height: 100%; } /* Thumb surface variants for home index */ .thumb-run-01-iii-var { background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255, 250, 232, 0.5) 0%, transparent 65%), linear-gradient(148deg, #EBE4D4 0%, #DDD5C3 42%, #CEC5B0 72%, #C2B89E 100%); } .thumb-run-01-i-var { background: radial-gradient(ellipse 72% 52% at 28% 18%, rgba(255, 248, 230, 0.5) 0%, transparent 66%), linear-gradient(152deg, #E8E2D5 0%, #D9D2C4 38%, #C8BFA8 65%, #BDB49A 100%); } .thumb-run-01-ii-var { background: radial-gradient(ellipse 65% 48% at 32% 22%, rgba(255, 248, 228, 0.45) 0%, transparent 62%), linear-gradient(150deg, #E6DFCE 0%, #D8D0BF 40%, #C9C0AA 70%, #BDB397 100%); } .thumb-field-var { background: radial-gradient(ellipse 60% 45% at 35% 25%, rgba(245, 240, 220, 0.38) 0%, transparent 58%), linear-gradient(145deg, #DDD7C8 0%, #CFC8B8 42%, #C0B8A5 70%, #B5AA95 100%); } /* Code column */ .home-edition-row-code { grid-column: 3; font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.09em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Title cell */ .home-edition-row-title-cell { grid-column: 5; display: flex; flex-direction: column; gap: 3px; padding-right: var(--sp-2); } .home-edition-row-title { font-size: 14px; line-height: 1.2; color: var(--ink); letter-spacing: 0; } .home-edition-row--soldout .home-edition-row-title, .home-edition-row--archive .home-edition-row-title { color: var(--muted); } .home-edition-row-meta { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); } /* Status */ .home-edition-row-status { grid-column: 6; text-align: right; white-space: nowrap; } /* Featured row: thin top border accent */ .home-edition-row--featured { background: rgba(20, 20, 19, 0.018); } /* Provenance note */ .home-editions-provenance { margin-top: var(--sp-3); max-width: 480px; font-style: italic; } /* ── Mobile — Editions index ─── */ @media (max-width: 599px) { .home-editions-index { padding: var(--sp-4) var(--sp-3) var(--sp-5); } .home-edition-row { grid-template-columns: 48px var(--sp-2) 1fr auto; } .home-edition-row-code { display: none; } .home-edition-row-thumb { width: 48px; height: 68px; } } /* ── 05 · THE LIST ────────────────────────────────────────────── Scarcity-framed newsletter capture. Proof voice. ────────────────────────────────────────────────────────────── */ .home-list { border-top: 1px solid var(--line); padding: var(--sp-6) clamp(24px, 5vw, 80px); max-width: 1800px; margin: 0 auto; } .home-list-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .home-list-inner { /* Left void ~28% | Right content ~52% | Trailing space ~20% */ grid-template-columns: 28fr 52fr 20fr; gap: 0; align-items: start; } .home-list-void { display: block; padding-top: 6px; } .home-list-content { grid-column: 2; padding-left: var(--sp-5); border-left: 1px solid var(--line); } } .home-list-void { display: none; } @media (min-width: 900px) { .home-list-void { display: flex; flex-direction: column; gap: var(--sp-1); } } .home-list-marginalia { display: flex; flex-direction: column; gap: 6px; } .home-list-content { display: flex; flex-direction: column; gap: var(--sp-3); } /* Heading: declarative, scarcity-framed */ .home-list-heading { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -0.01em; font-weight: var(--weight-medium); color: var(--ink); max-width: 36ch; margin: 0; } .home-list-body { color: var(--muted); max-width: 42ch; } /* Form */ .home-list-form { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px; } .home-list-field { display: flex; flex-direction: column; gap: 6px; } .home-list-label { color: var(--muted); } .home-list-input { /* Inherits from .form-input */ } .home-list-submit { align-self: flex-start; margin-top: var(--sp-1); } .home-list-note { font-style: italic; } @media (max-width: 599px) { .home-list { padding: var(--sp-5) var(--sp-3); } } /* ── Reduced motion — all home movements ──────────────────────── Catch-all for new animations introduced in this file. ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .home-edition-clip, .home-process-main-clip, .home-process-secondary-clip { clip-path: none !important; transition: none !important; } .home-scroll-line { animation: none !important; } } /* ── 06 · SIGN-OFF — closing signature section ────────────────── The studio's final mark on the scroll journey. Generous vertical space, centered or right-aligned, quiet. Mask-reveal via .reveal-on-scroll (opacity + translateY). ────────────────────────────────────────────────────────────── */ .home-signoff { padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-6); max-width: 1800px; margin: 0 auto; } .home-signoff-inner { display: flex; flex-direction: column; align-items: flex-end; } .home-signoff-rule { width: 100%; height: 1px; background: var(--line); margin-bottom: var(--sp-6); } .home-signoff-content { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); } .home-signoff-signature { display: block; width: clamp(140px, 16vw, 200px); height: auto; opacity: 0.88; /* Clip-path mask reveal on scroll (.reveal-on-scroll parent handles opacity) */ transform-origin: right center; } .home-signoff-meta { display: flex; align-items: center; } @media (max-width: 599px) { .home-signoff { padding: var(--sp-5) var(--sp-3) var(--sp-5); } .home-signoff-inner { align-items: flex-start; } .home-signoff-content { align-items: flex-start; } } /* ── Registration scroll-progress indicator ───────────────────── Fixed bottom-right corner. Hairline vertical track + fill bar + mono percentage readout. Evokes a plotter's registration rail. Hidden until first scroll (JS adds .is-active). ────────────────────────────────────────────────────────────── */ .scroll-progress-indicator { position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); pointer-events: none; } .scroll-progress-indicator.is-active { opacity: 1; transform: translateY(0); } /* The vertical track — hairline, 48px tall */ .scroll-progress-track { width: 1px; height: 48px; background: var(--line-med); position: relative; overflow: hidden; } /* Fill bar — scaleY from bottom, JS sets transform: scaleY(progress) */ .scroll-progress-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--ink); transform: scaleY(0); transform-origin: top center; } /* Mono 3-digit percentage — 000 to 100 */ .scroll-progress-pct { font-family: var(--type-mono); font-size: 9px; line-height: 1; letter-spacing: 0.06em; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0.7; } /* Hide on very small screens — too cramped */ @media (max-width: 399px) { .scroll-progress-indicator { display: none; } } /* ── Metadata row draw-in underline ────────────────────────────── Each .meta-row gets a .meta-row-underline element (hairline rule). JS drives scaleX(0) → scaleX(1) staggered on IO entry. The existing border-bottom is replaced by this animated rule for the home edition section only (border-bottom remains elsewhere). ────────────────────────────────────────────────────────────── */ .home-edition-metadata .meta-row { position: relative; /* Remove static border — replaced by animated underline */ border-bottom: none; } .home-edition-metadata .meta-row:first-child { border-top: none; } .meta-row-underline { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; /* Transition set by JS for stagger control */ } /* First row gets a top hairline — also animated */ .home-edition-metadata .meta-row:first-child::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line); } /* Reduced-motion fallback — show all underlines static */ @media (prefers-reduced-motion: reduce) { .meta-row-underline { transform: scaleX(1) !important; transition: none !important; } .home-edition-metadata .meta-row { border-bottom: 1px solid var(--line); } .home-edition-metadata .meta-row:first-child { border-top: 1px solid var(--line); } } /* ── Plotter draw-on-scroll line-field ─────────────────────────── CSS base for the SVG lines. JS sets strokeDasharray/offset inline. Default (no-JS / reduced-motion): lines fully visible at static opacity. ────────────────────────────────────────────────────────────── */ .plotter-line { opacity: 0.18; /* JS overrides stroke-dasharray and stroke-dashoffset inline */ } .plotter-line--vert { opacity: 0.09; } .plotter-line-diag { opacity: 0.12; } /* Reduced-motion: all lines fully drawn, static */ @media (prefers-reduced-motion: reduce) { .plotter-line { stroke-dashoffset: 0 !important; opacity: 0.18 !important; } .plotter-line--vert { stroke-dashoffset: 0 !important; opacity: 0.09 !important; } .plotter-line-diag { stroke-dashoffset: 0 !important; opacity: 0.12 !important; } } /* ── Parallax image layers — will-change budget ────────────────── Only applied on desktop (non-touch). JS removes will-change after section exits viewport via IO. Mobile: no will-change, no transform. ────────────────────────────────────────────────────────────── */ @media (min-width: 700px) { #hero-parallax-img, #hero-parallax-placeholder { will-change: transform; } #studio-parallax-img { will-change: transform; } } /* Studio image: scale(1.06) gives parallax headroom without cropping */ .home-process-main-img { transform-origin: center center; transform: scale(1.06); } /* Reduced-motion: no parallax transforms */ @media (prefers-reduced-motion: reduce) { #hero-parallax-img, #hero-parallax-placeholder, #studio-parallax-img { will-change: auto !important; transform: none !important; } .home-process-main-img { transform: none !important; } } /* ── Process caption stagger entry ─────────────────────────────── Caption over the studio image — enters after the main clip reveal. .reveal-on-scroll on parent triggers; caption fades in with delay. ────────────────────────────────────────────────────────────── */ .home-process-caption-enter { opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease-out) 0.55s, transform 0.6s var(--ease-out) 0.55s; } .reveal-on-scroll.is-visible .home-process-caption-enter { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .home-process-caption-enter { opacity: 1; transform: none; transition: none; } } /* ── Doorway preloader (home only) ─────────────────────────────── One full-screen warm-paper sheet. The registration mark, a hairline, and the wordmark animate in; the whole sheet then lifts away as a single curtain to reveal the site. Fires on fresh load (JS gate); skipped for reduced-motion / no-JS. */ .preloader { position: fixed; inset: 0; z-index: 9999; background: var(--paper); display: flex; align-items: center; justify-content: center; /* Background holds, then fades (delayed) so the mark fades out first */ transition: opacity 0.6s ease 0.45s; will-change: opacity; } .preloader.is-exiting { opacity: 0; } .preloader-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity 0.5s var(--ease-out); } /* Mark fades out first, before the background sheet begins to fade */ .preloader.is-exiting .preloader-content { opacity: 0; } .preloader-markframe { position: relative; display: inline-block; line-height: 0; } .preloader-mark { display: block; width: min(372px, 62vw); height: auto; } /* The mark draws itself on — pen-plotter style: the stroke traces the path, then fills */ .preloader-mark path { fill: var(--ink); fill-rule: evenodd; stroke: var(--ink); stroke-width: 0.006; stroke-linecap: round; stroke-linejoin: round; fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pmDraw 3s linear forwards, pmFill 1s ease 2.1s forwards; } /* Stop the stroke at ~0.78: the mark's visible outline completes within the first ~22% of the path length; the rest is an invisible/overlapping tail. Animating only the visible portion makes the draw pace even and lets the fill start with no dead pause. */ @keyframes pmDraw { to { stroke-dashoffset: 0.78; } } @keyframes pmFill { to { fill-opacity: 1; } } .no-doorway .preloader { display: none !important; } @media (prefers-reduced-motion: reduce) { .preloader { display: none !important; } } /* ============================================================ HOME PAGE — New movements added in restructured arc These extend the existing home page system (lines 2636+) with CSS for components introduced in the editorial rewrite. ============================================================ */ /* ── Hero thesis paragraph — statement above h1 ───────────────── Sits in .home-hero-typo-identity above .home-hero-typo-title. Smaller than the title; editorial voice, not a headline. ────────────────────────────────────────────────────────────── */ .home-hero-typo-thesis { font-family: var(--type-face); font-size: clamp(13px, 1.1vw, 15px); font-weight: var(--weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--muted); max-width: 42ch; margin-bottom: var(--sp-1); } @media (max-width: 599px) { .home-hero-typo-thesis { font-size: 13px; max-width: 36ch; } } /* ── 02 · HOME PROCESS — new section with linefield-dense primary ─ Primary: near-full-bleed portrait with parallax. Secondary pair: scribble + linefield-warm, two columns. Process thesis: asymmetric text anchor, studio link. ────────────────────────────────────────────────────────────── */ .home-process { padding: 0 0 var(--sp-6); max-width: 1800px; margin: 0 auto; } .home-process-header { padding: var(--sp-5) clamp(24px, 5vw, 80px) var(--sp-3); } /* ── Primary image: linefield-dense — tall, editorial ─── */ .home-process-primary { padding: 0 clamp(24px, 5vw, 80px); margin-bottom: var(--sp-4); } .home-process-main-figure { width: 100%; position: relative; overflow: visible; display: block; /* Portrait: organic plotter work reads better tall */ aspect-ratio: 3 / 4; max-height: 80vh; } .home-process-main-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.3s var(--ease-out) 0.1s both; } .home-process-main-img { object-position: center 30%; transition: transform 0.1s linear; } /* Studio image placeholder — warm paper tone */ .home-process-placeholder--studio { position: absolute; inset: 0; z-index: 1; } .home-process-placeholder-inner--studio { position: absolute; inset: 0; background: radial-gradient( ellipse 55% 50% at 40% 25%, rgba(230, 220, 200, 0.4) 0%, transparent 65% ), linear-gradient(168deg, #E2D9C8 0%, #D0C5B2 40%, #BCB0A0 70%, #A89C8E 100%); } /* Secondary cast placeholder — reused */ .home-process-placeholder--cast { position: absolute; inset: 0; z-index: 1; } .home-process-placeholder-inner--cast { position: absolute; inset: 0; background: linear-gradient(162deg, #DDD6C8 0%, #C8C0B0 50%, #B8AF9C 100%); } /* Caption stagger on process reveal */ .home-process-caption-enter { transition: opacity 0.5s var(--ease-out) 0.6s, transform 0.5s var(--ease-out) 0.6s; opacity: 0; transform: translateY(6px); } .is-visible .home-process-caption-enter { opacity: 1; transform: translateY(0); } /* ── Secondary pair: two figures side by side ─── */ .home-process-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: 0 clamp(24px, 5vw, 80px); margin-bottom: var(--sp-5); } .home-process-secondary-figure { position: relative; overflow: visible; display: block; aspect-ratio: 3 / 4; } .home-process-secondary-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.3s both; } .home-process-secondary-clip:last-of-type { animation-delay: 0.45s; } .home-process-secondary-img { object-position: center center; } /* ── Process thesis: text anchor below image spread ─── */ .home-process-thesis { padding: 0 clamp(24px, 5vw, 80px); } .home-process-thesis-inner { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 680px; /* Offset right on large screens for rhythm against left-dominant images */ margin-left: auto; } .home-process-thesis-text { font-family: var(--type-face); font-size: clamp(16px, 1.5vw, 21px); font-weight: var(--weight-regular); line-height: 1.5; letter-spacing: -0.005em; color: var(--ink); max-width: 50ch; } .home-process-thesis-link { color: var(--muted); text-decoration: none; position: relative; padding-bottom: 2px; display: inline-block; width: fit-content; transition: color 0.2s var(--ease-out); } .home-process-thesis-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out); } .home-process-thesis-link:hover { color: var(--ink); } .home-process-thesis-link:hover::after { transform: scaleX(1); } /* Desktop: thesis shifts right against the left-column images */ @media (min-width: 900px) { .home-process-main-figure { aspect-ratio: unset; height: min(75vh, 820px); max-height: none; } .home-process-secondary { gap: var(--sp-3); } .home-process-thesis-inner { margin-right: 0; } } @media (max-width: 599px) { .home-process-header { padding: var(--sp-4) var(--sp-3) var(--sp-2); } .home-process-primary { padding: 0 var(--sp-3); margin-bottom: var(--sp-3); } .home-process-secondary { gap: var(--sp-2); padding: 0 var(--sp-3); margin-bottom: var(--sp-4); } .home-process-thesis { padding: 0 var(--sp-3); } } @media (prefers-reduced-motion: reduce) { .home-process-main-clip, .home-process-secondary-clip { clip-path: none !important; animation: none !important; } .home-process-caption-enter { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── 03 · HOME STUDIO TEASER — hang-tag artifact + invitation ─── Two-column: image left, content right. hang-tag portrait in crop-frame; content with heading + CTA. ────────────────────────────────────────────────────────────── */ .home-studio-teaser { padding: var(--sp-4) clamp(24px, 5vw, 80px) var(--sp-6); max-width: 1800px; margin: 0 auto; border-top: 1px solid var(--line); } .home-studio-teaser-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .home-studio-teaser-inner { /* Image ~42% | Content ~58% */ grid-template-columns: 42fr 58fr; gap: 0; align-items: center; } } /* ── Teaser image column ─── */ .home-studio-teaser-image { padding: 14px; } .home-studio-teaser-figure { width: 100%; position: relative; overflow: visible; display: block; /* hang-tag is portrait — preserve reading orientation */ aspect-ratio: 2 / 3; max-height: 70vh; } .home-studio-teaser-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.1s both; } .home-studio-teaser-img { object-position: center center; } /* Placeholder: warm plaster tone (hang-tag is on light plaster) */ .home-studio-teaser-placeholder { position: absolute; inset: 0; z-index: 1; background: linear-gradient(155deg, #E8E2D8 0%, #D8D1C4 40%, #CBBFB0 100%); } /* ── Teaser content column ─── */ .home-studio-teaser-content { display: flex; flex-direction: column; gap: var(--sp-2); } @media (min-width: 900px) { .home-studio-teaser-content { padding-left: var(--sp-5); padding-top: var(--sp-2); } } .home-studio-teaser-heading { font-family: var(--type-face); font-size: clamp(22px, 2.6vw, 36px); font-weight: var(--weight-medium); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); max-width: 28ch; margin: 0; } .home-studio-teaser-body { color: var(--muted); max-width: 46ch; } .home-studio-teaser-meta { opacity: 0.7; } @media (max-width: 599px) { .home-studio-teaser { padding: var(--sp-4) var(--sp-3) var(--sp-5); } .home-studio-teaser-image { padding: 10px; } .home-studio-teaser-figure { aspect-ratio: 2 / 3; max-height: 55vh; } } @media (prefers-reduced-motion: reduce) { .home-studio-teaser-clip { clip-path: none !important; animation: none !important; } } /* ============================================================ STUDIO PAGE — Multi-section rewrite (studio.html) The new page has: statement intro, process (01), casting (02), provenance (03), close. These extend the existing .page-studio block (lines 1702–1899) with new component CSS. ============================================================ */ /* ── .page-studio adjustment for multi-section layout ─────────── The original single-block layout used flex/justify-between. The new multi-section layout needs block flow. ────────────────────────────────────────────────────────────── */ .page-studio { /* Override existing flex layout — new page is block sections */ display: block; padding: 0; /* sections manage their own padding */ } /* ── Shared section base ─────────────────────────────────────── */ .studio-section { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px); } /* Hairline rule between sections — drawn as a CSS block */ .studio-cast-rule { width: 100%; height: 1px; background: var(--line); margin-bottom: var(--sp-5); } /* Section header — kicker row */ .studio-section-header { margin-bottom: var(--sp-4); } /* Section headings — editorial, display-scale */ .studio-section-heading { font-family: var(--type-face); font-size: clamp(22px, 2.6vw, 34px); font-weight: var(--weight-medium); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); max-width: 28ch; margin: 0 0 var(--sp-3); } @media (max-width: 599px) { .studio-section { padding: var(--sp-5) var(--sp-3); } } /* ── STATEMENT INTRO — void + statement ───────────────────────── Left void with marginalia; right side with statement paragraph. ────────────────────────────────────────────────────────────── */ .studio-intro { padding-top: var(--sp-5); padding-bottom: var(--sp-6); } .studio-intro-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .studio-intro-inner { /* Left void ~28% | Right content ~72% — matches .home-thesis-inner */ grid-template-columns: 28fr 72fr; gap: 0; align-items: start; } .studio-intro-content { padding-left: var(--sp-5); border-left: 1px solid var(--line); } } /* Left void: registration mark + coordinates */ .studio-intro-void { display: flex; align-items: flex-start; } .studio-intro-marginalia { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* On mobile, hide the void marginalia (reduce noise) */ @media (max-width: 899px) { .studio-intro-void { display: none; } } /* Right content zone */ .studio-intro-content { display: flex; flex-direction: column; gap: var(--sp-3); animation: fadeUp 0.7s var(--ease-out) 0.18s both; } /* ── 01 · PROCESS — Three-image editorial spread ──────────────── linefield-dense primary (tall) + scribble/mark-plot secondary pair. Process narrative below, centered/offset. ────────────────────────────────────────────────────────────── */ .studio-process-section { padding-bottom: var(--sp-6); } /* Three-image grid: primary takes full width, then two below */ .studio-process-images { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); } @media (min-width: 900px) { .studio-process-images { /* Primary left (tall, ~55%) + pair right (~45%, stacked) */ grid-template-columns: 55fr 45fr; gap: var(--sp-3); align-items: start; } } /* Primary figure: linefield-dense — tall portrait, dominant */ .studio-process-fig--primary { position: relative; overflow: visible; display: block; aspect-ratio: 4 / 5; } @media (min-width: 900px) { .studio-process-fig--primary { /* Tall: let it run deep on desktop */ aspect-ratio: unset; height: min(80vh, 900px); } } /* Clip-path reveal for primary */ .studio-process-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.3s var(--ease-out) 0.08s both; } .studio-process-img { object-position: center center; } /* Placeholders */ .studio-process-placeholder { position: absolute; inset: 0; z-index: 1; background: linear-gradient(158deg, #E2D9C8 0%, #C8BCA8 100%); } .studio-process-placeholder--dense { background: radial-gradient(ellipse 55% 45% at 40% 30%, rgba(220, 210, 190, 0.4) 0%, transparent 65%), linear-gradient(168deg, #D8CEBC 0%, #C2B9A8 50%, #AFA59A 100%); } .studio-process-placeholder--b { background: linear-gradient(162deg, #F0EBE0 0%, #DDD6C8 50%, #CCC4B4 100%); } /* Secondary pair: side by side, right column (desktop) or below (mobile) */ .studio-process-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } @media (min-width: 900px) { .studio-process-pair { /* Stack vertically in right column */ grid-template-columns: 1fr; gap: var(--sp-3); } } /* Secondary figures */ .studio-process-fig--secondary { position: relative; overflow: visible; display: block; aspect-ratio: 3 / 4; } @media (min-width: 900px) { .studio-process-fig--secondary { /* Equal height halves in the right column */ aspect-ratio: 4 / 3; } } /* Secondary clip reveal — slight delay for cascade feel */ .studio-process-fig--secondary:first-child .studio-process-clip { animation-delay: 0.22s; } .studio-process-fig--secondary:last-child .studio-process-clip { animation-delay: 0.38s; } /* Process narrative — below image spread, right-offset on desktop */ .studio-process-narrative { display: flex; justify-content: flex-end; } .studio-process-narrative-inner { max-width: 560px; width: 100%; } @media (max-width: 899px) { .studio-process-narrative { justify-content: flex-start; } .studio-process-narrative-inner { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .studio-process-clip { clip-path: none !important; animation: none !important; } } /* ── 02 · CASTING — Two images + narrative ────────────────────── cast-02.jpg (primary, portrait) + concrete.jpg (secondary, square). Content: heading + narrative + direction note. ────────────────────────────────────────────────────────────── */ .studio-casting-section { padding-bottom: var(--sp-6); } .studio-casting-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .studio-casting-layout { /* Images ~48% | Content ~48% | gap ~4% */ grid-template-columns: 48fr 52fr; gap: 0; align-items: start; } .studio-casting-content { padding-left: var(--sp-5); padding-top: var(--sp-2); } } /* Image pair: stacked (cast on top, concrete below) */ .studio-casting-images { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } .studio-casting-fig--primary { position: relative; overflow: visible; display: block; aspect-ratio: 4 / 3; } .studio-casting-fig--secondary { position: relative; overflow: visible; display: block; aspect-ratio: 16 / 9; } .studio-casting-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.1s both; } .studio-casting-fig--secondary .studio-casting-clip { animation-delay: 0.28s; } .studio-casting-img { object-position: center center; } /* Placeholders */ .studio-casting-placeholder { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, #D4CCBE 0%, #BCB4A8 100%); } .studio-casting-placeholder--concrete { background: linear-gradient(162deg, #C4BDB0 0%, #AEA89C 50%, #9C9890 100%); } .studio-casting-content { display: flex; flex-direction: column; } @media (prefers-reduced-motion: reduce) { .studio-casting-clip { clip-path: none !important; animation: none !important; } } /* ── 03 · PROVENANCE — hang-tag + COA artifacts ────────────────── Side-by-side portrait images. Narrative + COA link. ────────────────────────────────────────────────────────────── */ .studio-provenance-section { padding-bottom: var(--sp-6); } .studio-provenance-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .studio-provenance-layout { /* Content ~52% | Artifacts ~44% */ grid-template-columns: 52fr 44fr; gap: 0; align-items: start; } .studio-provenance-artifacts { padding-left: var(--sp-5); } } /* Content column — text first on desktop for provenance page */ .studio-provenance-content { display: flex; flex-direction: column; gap: var(--sp-3); } /* Artifacts column: hang-tag + COA, stacked */ .studio-provenance-artifacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; } @media (min-width: 900px) { .studio-provenance-artifacts { grid-template-columns: 1fr; gap: var(--sp-3); } } .studio-provenance-fig { position: relative; overflow: visible; display: block; aspect-ratio: 2 / 3; } .studio-provenance-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.1s both; } .studio-provenance-fig:last-child .studio-provenance-clip { animation-delay: 0.25s; } .studio-provenance-img { object-position: center center; } /* Placeholders */ .studio-provenance-placeholder { position: absolute; inset: 0; z-index: 1; background: linear-gradient(158deg, #E8E2D8 0%, #D4CBBF 100%); } .studio-provenance-placeholder--coa { background: linear-gradient(162deg, #F0ECE4 0%, #E2DCCE 100%); } /* COA link — provenance anchor */ .studio-provenance-coa-link { color: var(--muted); text-decoration: none; position: relative; display: inline-block; padding-bottom: 2px; transition: color 0.2s var(--ease-out); } .studio-provenance-coa-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s var(--ease-out); } .studio-provenance-coa-link:hover { color: var(--ink); } .studio-provenance-coa-link:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .studio-provenance-clip { clip-path: none !important; animation: none !important; } } /* ── STUDIO CLOSE — CTA pair ───────────────────────────────────── No border-top here — .studio-cast-rule inside the element draws it. Padding is handled by the base .studio-section rule. ────────────────────────────────────────────────────────────── */ .studio-close { /* Inherits padding from .studio-section; no additional top border needed (.studio-cast-rule provides the visual separator internally) */ } .studio-close-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .studio-close-inner { grid-template-columns: 28fr 72fr; gap: 0; align-items: start; } } .studio-close-content { display: flex; flex-direction: column; gap: var(--sp-3); } @media (min-width: 900px) { .studio-close-content { grid-column: 2 / 3; padding-left: var(--sp-5); border-left: 1px solid var(--line); } } .studio-close-heading { font-family: var(--type-face); font-size: clamp(18px, 1.8vw, 24px); font-weight: var(--weight-regular); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); max-width: 36ch; margin: 0; } .studio-close-links { display: flex; flex-direction: column; gap: var(--sp-2); } @media (min-width: 600px) { .studio-close-links { flex-direction: row; gap: var(--sp-3); align-items: center; } } @media (max-width: 599px) { .studio-close { padding: var(--sp-4) var(--sp-3) var(--sp-5); } } /* ── Studio section reveal-on-scroll entrance ─────────────────── Sections use the global .reveal-on-scroll system (IO-based). This is the initial state — visible state set by JS in HTML. ────────────────────────────────────────────────────────────── */ .studio-process-section.reveal-on-scroll, .studio-casting-section.reveal-on-scroll, .studio-provenance-section.reveal-on-scroll, .studio-close.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .studio-process-section.reveal-on-scroll.is-visible, .studio-casting-section.reveal-on-scroll.is-visible, .studio-provenance-section.reveal-on-scroll.is-visible, .studio-close.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .studio-process-section.reveal-on-scroll, .studio-casting-section.reveal-on-scroll, .studio-provenance-section.reveal-on-scroll, .studio-close.reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── t-body utility — body text used in studio narrative blocks ── Prose reading weight. Used inline throughout the new sections. ────────────────────────────────────────────────────────────── */ .t-body { font-family: var(--type-face); font-size: clamp(15px, 1.2vw, 18px); font-weight: var(--weight-regular); line-height: 1.65; letter-spacing: 0; color: var(--ink); } /* ============================================================ CONTACT PAGE — Flesh-out additions Extends the existing contact page CSS (lines 2100–2343) with the new hero band and right-column components. ============================================================ */ /* ── Contact page layout adjustment ───────────────────────────── The page now opens with a hero band above the two-col layout. .page-contact keeps its padding but no longer needs min-height calc from header since hero provides visual anchoring. ────────────────────────────────────────────────────────────── */ .page-contact { padding-top: 0; /* hero handles top breathing room */ } /* ── Contact hero ──────────────────────────────────────────────── Identity-only band (image removed per brief §D). Full-width, generous top breathing room. ────────────────────────────────────────────────────────────── */ .contact-hero { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); animation: fadeUp 0.7s var(--ease-out) 0.08s both; } @media (min-width: 900px) { .contact-hero { padding-bottom: var(--sp-5); } } /* Contact hero figure */ .contact-hero-figure { position: relative; overflow: visible; display: block; /* Landscape: linefield-warm reads as wide/contemplative */ aspect-ratio: 4 / 3; max-height: 480px; padding: 14px; } .contact-hero-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; animation: revealWipe 1.1s var(--ease-out) 0.15s both; } .contact-hero-img { object-position: center center; } /* Placeholder: warm line-field tones */ .contact-hero-placeholder { position: absolute; inset: 0; z-index: 1; } .contact-hero-placeholder-inner { position: absolute; inset: 0; background: radial-gradient( ellipse 60% 50% at 50% 40%, rgba(240, 230, 210, 0.5) 0%, transparent 70% ), linear-gradient(162deg, #E8E2D4 0%, #D8D0C2 40%, #C8BDB0 100%); } /* Registration mark overlay — bottom-left of hero image */ .contact-hero-overlay { position: absolute; bottom: var(--sp-3); left: var(--sp-3); z-index: 10; pointer-events: none; } /* Contact hero identity block */ .contact-hero-identity { display: flex; flex-direction: column; gap: var(--sp-2); } @media (min-width: 900px) { .contact-hero-identity { padding-left: var(--sp-5); } } /* Page label */ .contact-page-label { display: block; } /* Contact hero heading */ .contact-hero-heading { font-family: var(--type-face); font-size: clamp(32px, 4.5vw, 60px); font-weight: var(--weight-medium); line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); margin: 0; } /* Tagline under heading */ .contact-hero-tagline { color: var(--muted); max-width: 40ch; margin-top: var(--sp-1); } /* Contact layout adjustment — now sits below hero */ .contact-layout { margin-top: 0; padding-top: var(--sp-5); padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); max-width: 1800px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--line); } /* Existing grid kept, but right column now spans multiple zones */ .contact-right-col { display: flex; flex-direction: column; animation: fadeUp 0.6s var(--ease-out) 0.18s both; } @media (min-width: 900px) { .contact-right-col { padding-left: var(--sp-5); border-left: 1px solid var(--line); } } /* Override existing contact-inquiry-zone: no border-left/animation when inside right-col */ .contact-right-col .contact-inquiry-zone { padding-left: 0; border-left: none; animation: none; /* right-col handles the entrance animation */ } @media (max-width: 899px) { .contact-right-col { border-left: none; border-top: 1px solid var(--line); padding-top: var(--sp-5); } } /* Update grid columns for new right-col structure */ @media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 0; align-items: start; } } /* ── Shipping info zone ────────────────────────────────────────── Clean tabular list: label/value pairs, hairline between items. ────────────────────────────────────────────────────────────── */ .contact-shipping-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .contact-shipping-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-2); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); } .contact-shipping-item:first-child { border-top: 1px solid var(--line); } .contact-shipping-item .t-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; flex-shrink: 0; } .contact-shipping-item .t-caption { color: var(--ink); font-size: 13px; line-height: 1.45; } /* ── Social zone ───────────────────────────────────────────────── Instagram link with draw-underline hover. ────────────────────────────────────────────────────────────── */ .contact-social-row { display: flex; flex-direction: column; gap: 6px; } .contact-social-link { color: var(--ink); text-decoration: none; font-size: clamp(14px, 1.2vw, 16px); font-weight: var(--weight-regular); letter-spacing: 0; position: relative; display: inline-block; padding-bottom: 2px; width: fit-content; transition: color 0.2s var(--ease-out); } .contact-social-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out); } .contact-social-link:hover::after { transform: scaleX(1); } .contact-social-note { color: var(--muted); font-size: 12px; max-width: 36ch; line-height: 1.5; } /* ── Contact mobile adjustments ─────────────────────────────────── */ @media (max-width: 599px) { .contact-hero { padding: var(--sp-4) var(--sp-3) var(--sp-4); } .contact-hero-figure { max-height: 300px; padding: 10px; } .contact-hero-heading { font-size: clamp(28px, 9vw, 44px); } .page-contact { padding: 0 0 var(--sp-4); } .contact-layout { padding: var(--sp-4) var(--sp-3); } .contact-shipping-item { grid-template-columns: 70px 1fr; gap: var(--sp-1); } } @media (prefers-reduced-motion: reduce) { .contact-hero, .contact-right-col { animation: none !important; opacity: 1 !important; transform: none !important; } .contact-hero-clip { clip-path: none !important; animation: none !important; } } /* ============================================================ HOME PAGE — Restructured sections (2026 rework) E. New home structure: studio-intro hero, runs gallery, editorial studio story, end-section rework. ============================================================ */ /* ── 00 · STUDIO INTRO HERO — full-viewport, typographic ──────── Identity statement for the studio, not a specific run. Retains the crop-mark grid, marginalia, and scroll cue. The h1 becomes the studio positioning statement, large and austere. ────────────────────────────────────────────────────────────── */ /* Override the hero typographic title for the studio-intro mode */ .home-hero--studio-intro .home-hero-typo-title { font-size: clamp(160px, 16vw, 240px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; } /* Diagonal hero: "From algorithms" top-left, "to artifacts." + meta bottom-right */ .home-hero--studio-intro .home-hero-typo-title--top { align-self: flex-start; text-align: left; margin-top: 25vh; } .home-hero-typo-cluster { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--sp-2); margin-top: -4vh; } .home-hero-typo-title--bottom { text-align: right; } /* ── Mobile — studio-intro hero The desktop override above floors the title at 160px, which is wider than a phone viewport. Scale the type down and tighten the vertical margins so both lines fit and stay legible. */ @media (max-width: 599px) { .home-hero--studio-intro .home-hero-typo-title { font-size: clamp(34px, 11vw, 56px); line-height: 0.98; letter-spacing: -0.02em; } .home-hero--studio-intro .home-hero-typo-title--top { margin-top: 6vh; } .home-hero-typo-cluster { margin-top: 0; } } /* ── Hero intro — staggered, premium reveal after the doorway lifts ── Armed by .hero-anim (added pre-paint when motion is allowed) so the elements rest hidden; played by .hero-in (added the moment the curtain lifts). Reduced-motion never gets .hero-anim, so content shows instantly. */ .hero-anim .site-header, .hero-anim .home-hero-typo-title--top, .hero-anim .home-hero-typo-title--bottom, .hero-anim .home-hero-intro-sub, .hero-anim .home-hero-ledger-row, .hero-anim .home-hero-ledger-note, .hero-anim .home-hero-marginalia-tl { opacity: 0; will-change: opacity, transform; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } /* Resting offsets — headline travels furthest, meta the least */ .hero-anim .site-header { transform: translateY(-14px); } .hero-anim .home-hero-typo-title--top, .hero-anim .home-hero-typo-title--bottom { transform: translateY(40px); transition-duration: 1.05s; } .hero-anim .home-hero-intro-sub { transform: translateY(22px); } .hero-anim .home-hero-ledger-row, .hero-anim .home-hero-ledger-note { transform: translateY(16px); } /* marginalia: opacity only (anchored to a corner) */ /* Stagger — relative to the moment .hero-in lands */ .hero-anim .site-header { transition-delay: 0s; } .hero-anim .home-hero-typo-title--top { transition-delay: 0.12s; } .hero-anim .home-hero-typo-title--bottom { transition-delay: 0.26s; } .hero-anim .home-hero-intro-sub { transition-delay: 0.44s; } .hero-anim .home-hero-ledger-row:nth-child(1) { transition-delay: 0.54s; } .hero-anim .home-hero-ledger-row:nth-child(2) { transition-delay: 0.62s; } .hero-anim .home-hero-ledger-row:nth-child(3) { transition-delay: 0.70s; } .hero-anim .home-hero-ledger-note { transition-delay: 0.78s; } .hero-anim .home-hero-marginalia-tl { transition-delay: 0.86s; } /* Played state */ .hero-anim.hero-in .site-header, .hero-anim.hero-in .home-hero-typo-title--top, .hero-anim.hero-in .home-hero-typo-title--bottom, .hero-anim.hero-in .home-hero-intro-sub, .hero-anim.hero-in .home-hero-ledger-row, .hero-anim.hero-in .home-hero-ledger-note, .hero-anim.hero-in .home-hero-marginalia-tl { opacity: 1; transform: none; } /* Studio intro sub-statement — second line below the main declaration */ .home-hero-intro-sub { font-family: var(--type-face); font-size: clamp(14px, 1.3vw, 18px); font-weight: var(--weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--muted); max-width: 46ch; margin-top: var(--sp-2); } @media (max-width: 599px) { .home-hero-intro-sub { font-size: 14px; max-width: 34ch; } } @media (prefers-reduced-motion: reduce) { .home-hero-intro-sub { animation: none; opacity: 1; } } /* ── 01 · RUNS GALLERY — horizontal-scrolling card rail ───────── Scroll-snap, native overflow-x. Full-width with side padding. Cards show: photo, run title, piece code, scarcity. ────────────────────────────────────────────────────────────── */ .home-runs { padding: clamp(180px, 26vh, 320px) 0 clamp(360px, 52vh, 640px); max-width: none; /* full-width rail, no outer cap */ } .home-runs-header { padding: 0 clamp(24px, 5vw, 80px) var(--sp-3); max-width: 1240px; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } /* Responsive grid — reflows by viewport, centered as a group. */ .home-runs-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); max-width: 1240px; margin: 0 auto; padding: 14px clamp(24px, 5vw, 80px) var(--sp-3); } @media (max-width: 899px) { .home-runs-rail { grid-template-columns: repeat(2, 1fr); } } /* Wide enough for all six across — single row, widened to match. */ @media (min-width: 1700px) { .home-runs-header, .home-runs-rail { max-width: 2080px; } .home-runs-rail { grid-template-columns: repeat(6, 1fr); } } /* Individual run card */ .home-run-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0; position: relative; transition: opacity 0.2s var(--ease-out); -webkit-user-drag: none; } /* Grab affordance while scrubbing the rail */ .home-runs-rail.is-dragging { cursor: grabbing; } /* No crop-mark brackets on the carousel images (cleaner gallery) */ .home-run-card .crop-mark-corner { display: none; } .home-run-card-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .home-run-card:hover { opacity: 0.88; } /* Card image frame */ .home-run-card-figure { width: 100%; aspect-ratio: 297 / 420; position: relative; overflow: visible; display: block; box-shadow: 0 1px 2px rgba(20, 20, 19, 0.06), 0 6px 20px rgba(20, 20, 19, 0.08); transition: box-shadow 0.2s var(--ease-out); } .home-run-card:hover .home-run-card-figure { box-shadow: 0 2px 4px rgba(20, 20, 19, 0.08), 0 12px 32px rgba(20, 20, 19, 0.12); } .home-run-card-clip { position: absolute; inset: 0; overflow: hidden; background: var(--paper); } .home-run-card-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s var(--ease-out); } .home-run-card:hover .home-run-card-img { transform: scale(1.025); } .home-run-card-img.is-hidden { display: none; } /* Card placeholder */ .home-run-card-placeholder { position: absolute; inset: 0; z-index: 1; } /* Card body — metadata below image */ .home-run-card-body { padding: var(--sp-2) 0 var(--sp-1); display: flex; flex-direction: column; gap: 6px; } .home-run-card-code { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-medium); } .home-run-card-title { font-family: var(--type-face); font-size: clamp(16px, 1.4vw, 20px); font-weight: var(--weight-medium); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .home-run-card-scarcity { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; margin-top: 2px; } /* Placeholder surface variants for run cards */ .run-card-placeholder--i { background: radial-gradient(ellipse 72% 52% at 28% 18%, rgba(255, 248, 230, 0.5) 0%, transparent 66%), linear-gradient(152deg, #E8E2D5 0%, #D9D2C4 38%, #C8BFA8 65%, #BDB49A 100%); } .run-card-placeholder--ii { background: radial-gradient(ellipse 65% 48% at 32% 22%, rgba(255, 248, 228, 0.45) 0%, transparent 62%), linear-gradient(150deg, #E6DFCE 0%, #D8D0BF 40%, #C9C0AA 70%, #BDB397 100%); } .run-card-placeholder--iii { background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255, 250, 232, 0.5) 0%, transparent 65%), linear-gradient(148deg, #EBE4D4 0%, #DDD5C3 42%, #CEC5B0 72%, #C2B89E 100%); } /* Pre-drop reveal cover — sits over the artwork until 19 June. On drop day, delete the .home-run-card-reveal div from each card to expose the plotted image beneath. */ .home-run-card-reveal { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); text-align: center; background-color: var(--paper); background-image: url("assets/brand/question-mark.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .home-run-card-reveal-label, .home-run-card-reveal-date { position: relative; z-index: 1; } .home-run-card-reveal-label { color: var(--muted); } .home-run-card-reveal-date { color: var(--ink); font-size: 1.05rem; } @media (max-width: 599px) { .home-runs-rail { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .home-run-card-img { transition: none; } } /* ── 02 · EDITORIAL STUDIO STORY ──────────────────────────────── Interleaved images + text as a magazine feature. Multiple alternating rows: image-block then text-block, full-width. ────────────────────────────────────────────────────────────── */ .home-studio-story { border-top: 1px solid var(--line); padding-bottom: var(--sp-6); } .home-studio-story-header { padding: var(--sp-5) clamp(24px, 5vw, 80px) var(--sp-4); max-width: 1800px; margin: 0 auto; } /* Editorial row — alternates image / text */ .home-story-row { max-width: 1800px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: 0 clamp(24px, 5vw, 80px); margin-bottom: var(--sp-5); } @media (min-width: 900px) { .home-story-row { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; margin-bottom: var(--sp-6); } /* Image-first row (default) */ .home-story-row--img-left .home-story-row-image { order: 1; } .home-story-row--img-left .home-story-row-text { order: 2; } /* Text-first row */ .home-story-row--text-left .home-story-row-text { order: 1; } .home-story-row--text-left .home-story-row-image { order: 2; } } /* Story row image */ .home-story-row-image { /* padding for crop marks */ padding: 14px; } .home-story-row-figure { position: relative; overflow: visible; display: block; width: 100%; aspect-ratio: 4 / 3; } .home-story-row-figure--portrait { aspect-ratio: 2 / 3; } .home-story-row-figure--wide { aspect-ratio: 16 / 9; } .home-story-row-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; transition: clip-path 0.9s var(--ease-out) 0.05s; } .reveal-on-scroll.is-visible .home-story-row-clip { clip-path: inset(0 0% 0 0); } .home-story-row-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 4; } .home-story-row-img.is-hidden { display: none; } .home-story-row-placeholder { position: absolute; inset: 0; z-index: 1; } /* Placeholder variants */ .story-placeholder--warm { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(240, 230, 210, 0.5) 0%, transparent 70%), linear-gradient(162deg, #E8E2D4 0%, #D8D0C2 40%, #C8BDB0 100%); } .story-placeholder--dense { background: radial-gradient(ellipse 55% 45% at 40% 30%, rgba(220, 210, 190, 0.4) 0%, transparent 65%), linear-gradient(168deg, #D8CEBC 0%, #C2B9A8 50%, #AFA59A 100%); } .story-placeholder--plot { background: radial-gradient(ellipse 72% 52% at 28% 18%, rgba(255, 248, 230, 0.5) 0%, transparent 66%), linear-gradient(152deg, #E8E2D5 0%, #D9D2C4 38%, #C8BFA8 65%, #BDB49A 100%); } .story-placeholder--ink { background: radial-gradient(ellipse 65% 50% at 35% 25%, rgba(215, 205, 188, 0.45) 0%, transparent 62%), linear-gradient(145deg, #D2C9B8 0%, #C4BAA8 38%, #B5AA96 68%, #AAA08C 100%); } .story-placeholder--ridge { background: linear-gradient(158deg, #D4CCBE 0%, #BCB4A8 100%); } .story-placeholder--scribble { background: radial-gradient(ellipse 55% 42% at 38% 28%, rgba(238, 232, 210, 0.32) 0%, transparent 55%), linear-gradient(144deg, #F0EBE0 0%, #E2DCCE 50%, #D4CCBC 100%); } /* Story row text */ .home-story-row-text { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-2) 0; } .home-story-heading { font-family: var(--type-face); font-size: clamp(22px, 2.4vw, 32px); font-weight: var(--weight-medium); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); max-width: 28ch; margin: 0; } .home-story-body { font-family: var(--type-face); font-size: clamp(15px, 1.2vw, 18px); font-weight: var(--weight-regular); line-height: 1.65; color: var(--ink); max-width: 46ch; } .home-story-body--muted { color: var(--muted); } /* Full-bleed image divider — breaks between text rows */ .home-story-fullbleed { width: 100%; padding: 14px 0; margin-bottom: var(--sp-5); } .home-story-fullbleed-figure { position: relative; overflow: visible; display: block; width: 100%; aspect-ratio: 16 / 7; } .home-story-fullbleed-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; transition: clip-path 1.1s var(--ease-out) 0.05s; } .reveal-on-scroll.is-visible .home-story-fullbleed-clip { clip-path: inset(0 0% 0 0); } .home-story-fullbleed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; z-index: 4; } .home-story-fullbleed-img.is-hidden { display: none; } .home-story-fullbleed-placeholder { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 55% 40% at 25% 28%, rgba(195, 185, 165, 0.38) 0%, transparent 60%), linear-gradient(158deg, #C4B8A4 0%, #B0A490 30%, #9C9080 60%, #887C6C 100%); } /* Studio story close link */ .home-story-studio-link-row { padding: 0 clamp(24px, 5vw, 80px) var(--sp-5); max-width: 1800px; margin: 0 auto; } @media (max-width: 599px) { .home-story-row { padding: 0 clamp(16px, 4vw, 40px); margin-bottom: var(--sp-4); } .home-story-row-text { gap: var(--sp-2); } .home-studio-story-header { padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-3); } .home-story-studio-link-row { padding: 0 clamp(16px, 4vw, 40px) var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .home-story-row-clip, .home-story-fullbleed-clip { clip-path: none !important; transition: none !important; } } /* ── 03 · END SECTION — mailing list + studio sign-off ────────── Reworked end: list form + sign-off in a composed full-width layout. Sign-off integrates as a centered, deliberate close beneath the form. ────────────────────────────────────────────────────────────── */ /* The home-list section already has styles; extend for rework */ .home-list--reworked { border-top: 1px solid var(--line); padding: var(--sp-6) clamp(24px, 5vw, 80px); max-width: 1800px; margin: 0 auto; } .home-list-rework-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 900px) { .home-list-rework-inner { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 80px); align-items: start; } } /* Sign-off integration — centered beneath, quiet */ .home-end-signoff { padding-top: var(--sp-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); } .home-end-signoff-img { display: block; width: clamp(120px, 14vw, 180px); height: auto; opacity: 0.82; } .home-end-signoff-meta { display: flex; align-items: center; gap: 8px; } @media (max-width: 599px) { .home-list--reworked { padding: var(--sp-5) clamp(16px, 4vw, 40px); } } /* ── Contact hero — identity only (no image) ───────────────────── D. Image removed. Identity stands alone, full-width. ────────────────────────────────────────────────────────────── */ .contact-hero--no-image { display: block; } .contact-hero--no-image .contact-hero-identity { padding-left: 0; max-width: 56ch; } /* ── Studio footer: surface classes ────────────────────────────── Keep studio-footer-scrim working even with new footer structure. ────────────────────────────────────────────────────────────── */ .studio-footer-surface { position: relative; background-color: var(--paper); background-blend-mode: luminosity; } .studio-footer-scrim { position: absolute; inset: 0; background: rgba(244, 241, 234, 0.82); pointer-events: none; z-index: 0; } .site-footer .footer-tagline, .site-footer .footer-copyright { position: relative; z-index: 1; } /* ── Mobile small overrides for new sections ────────────────────── */ @media (max-width: 599px) { .home-runs-header { padding: 0 clamp(16px, 4vw, 40px) var(--sp-2); } .home-runs-rail { padding: 14px clamp(16px, 4vw, 40px) var(--sp-2); } .home-studio-story { padding-bottom: var(--sp-5); } } @media (prefers-reduced-motion: reduce) { .home-end-signoff, .home-list--reworked { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================ STUDIO PAGE — Editorial process narrative Six numbered movements. Magazine feature layout. Full-width images, generous negative space, on-voice copy. ============================================================ */ /* ── 00 · Manifesto ───────────────────────────────────────────── Opening statement. Asymmetric: marginalia left, statement right. ────────────────────────────────────────────────────────────── */ .studio-manifesto { padding: var(--sp-6) 0 var(--sp-5); animation: fadeUp 0.7s var(--ease-out) 0.1s both; } .studio-manifesto-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .studio-manifesto-inner { /* Marginalia ~22% | Content ~78% */ grid-template-columns: 22fr 78fr; gap: 0; align-items: start; } .studio-manifesto-content { padding-left: var(--sp-5); border-left: 1px solid var(--line); } } .studio-manifesto-void { display: none; } @media (min-width: 900px) { .studio-manifesto-void { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: 4px; } } .studio-intro-marginalia { display: flex; flex-direction: column; gap: 6px; } .studio-manifesto-content { display: flex; flex-direction: column; gap: var(--sp-3); } .studio-statement { color: var(--ink); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.65; font-weight: var(--weight-regular); max-width: 56ch; letter-spacing: 0; } @media (prefers-reduced-motion: reduce) { .studio-manifesto { animation: none; } } /* ── Perspective ──────────────────────────────────────────────── Between manifesto and 01. Text-led. Two-column asymmetric. ────────────────────────────────────────────────────────────── */ /* Relocated studio statement — ruled, generous vertical air */ .home-statement { max-width: 720px; margin: 0 auto; padding: clamp(140px, 24vh, 300px) clamp(24px, 5vw, 48px); display: flex; flex-direction: column; gap: clamp(52px, 8vh, 96px); } .home-statement-rule { height: 1px; width: 100%; background: var(--line); } .home-statement-body { display: flex; flex-direction: column; gap: clamp(24px, 3.5vh, 44px); } /* Lead: the thesis sentence, large and inked */ .home-statement-lead { margin: 0; font-family: var(--type-face); font-size: clamp(23px, 2.9vw, 38px); font-weight: var(--weight-medium); line-height: 1.16; letter-spacing: -0.025em; color: var(--ink); max-width: 17ch; } /* Supporting body: smaller, muted, deprioritised under the lead */ .home-statement-text { margin: 0; font-family: var(--type-face); font-size: clamp(14px, 1.2vw, 16px); font-weight: var(--weight-regular); line-height: 1.65; letter-spacing: 0; color: var(--muted); max-width: 52ch; margin-left: auto; } .studio-perspective { padding: clamp(80px, 12vh, 150px) 0; } /* ── Manifesto + The studio: full-bleed 50/50, dark | light contrast ── */ .home-split { display: grid; grid-template-columns: 1fr 1fr; } .home-split .home-manifesto, .home-split .studio-perspective { margin: 0; padding: clamp(96px, 16vh, 200px) clamp(36px, 5vw, 96px); display: flex; flex-direction: column; justify-content: center; } .home-split .studio-perspective { background: var(--paper); } .home-split .home-manifesto-inner, .home-split .studio-perspective-inner { max-width: 520px; margin: 0; display: block; } /* Widen just the manifesto column so "Mechanical precision." stays one line */ .home-split .home-manifesto-inner { max-width: 620px; } .home-split .home-manifesto-label { display: block; padding-top: 0; margin-bottom: var(--sp-3); } .home-split .studio-perspective-heading { max-width: none; margin-top: var(--sp-3); } .studio-perspective-note { margin: var(--sp-4) 0 0; max-width: 42ch; font-family: var(--type-face); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.5; color: var(--muted); } @media (max-width: 899px) { .home-split { grid-template-columns: 1fr; } } .studio-perspective-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-4); } /* Body copy cut — heading now stands alone as the section statement. */ .studio-perspective-heading { font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.025em; font-weight: var(--weight-medium); color: var(--ink); max-width: 24ch; } /* ── Marker highlight ──────────────────────────────────────────── A sparse "selected text" treatment — inked block, paper text. Use on a single phrase, never a whole paragraph. box-decoration-break keeps the fill continuous across line wraps. */ .type-mark { --mark: var(--ink); color: var(--paper); /* Band sized shorter than the line box so the highlight is tighter vertically */ background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: 0 62%; background-size: 100% 0.84em; padding: 0 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .studio-perspective-body p + p { margin-top: var(--sp-2); } /* ── Studio movement — shared image/clip system ────────────────── All movements share the .studio-ed-clip and .studio-movement-img pattern. Two clip variants for stagger: .studio-ed-clip — primary images (page-load or first in section) .studio-ed-clip-b — secondary images (slight delay) ────────────────────────────────────────────────────────────── */ /* Clip container — holds overflow, drives reveal */ .studio-ed-clip, .studio-ed-clip-b { position: absolute; inset: 0; overflow: hidden; } /* Primary clip: triggered by .reveal-on-scroll parent becoming .is-visible */ .studio-ed-clip { clip-path: none; transition: clip-path 0.95s var(--ease-out); } .reveal-on-scroll.is-visible .studio-ed-clip { clip-path: inset(0 0% 0 0); } /* Secondary clip: slightly longer delay for visual stagger */ .studio-ed-clip-b { clip-path: none; transition: clip-path 0.95s var(--ease-out) 0.18s; } .reveal-on-scroll.is-visible .studio-ed-clip-b { clip-path: inset(0 0% 0 0); } /* The actual image — z-index 4 sits ABOVE all placeholder layers */ .studio-movement-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 4; /* critical: above placeholder (z-index 1) */ } .studio-movement-img.is-hidden { display: none; } /* Placeholder layers — z-index 1: behind the image */ .studio-movement-placeholder { position: absolute; inset: 0; z-index: 1; /* below .studio-movement-img (z-index 4) */ } /* Placeholder surface variants */ .studio-movement-placeholder--sketch { background: radial-gradient(ellipse 70% 55% at 30% 20%, rgba(255, 252, 240, 0.55) 0%, transparent 65%), linear-gradient(148deg, #F0ECE2 0%, #E4DFD3 40%, #D6D0C4 70%, #CCC6BA 100%); } .studio-movement-placeholder--warm { background: radial-gradient(ellipse 65% 50% at 32% 22%, rgba(255, 248, 228, 0.5) 0%, transparent 62%), linear-gradient(152deg, #EAE4D6 0%, #DDD6C5 40%, #CEC5B2 68%, #C2B8A2 100%); } .studio-movement-placeholder--dense { background: radial-gradient(ellipse 60% 45% at 35% 28%, rgba(245, 240, 220, 0.42) 0%, transparent 58%), linear-gradient(155deg, #E2D9C8 0%, #D3C9B8 42%, #C2B8A5 70%, #B6AA97 100%); } .studio-movement-placeholder--field-a { background: radial-gradient(ellipse 68% 52% at 28% 18%, rgba(255, 250, 232, 0.48) 0%, transparent 64%), linear-gradient(148deg, #E8E2D5 0%, #D9D2C4 38%, #C8BFA8 65%, #BDB49A 100%); } .studio-movement-placeholder--ink { background: radial-gradient(ellipse 55% 42% at 40% 30%, rgba(240, 235, 215, 0.38) 0%, transparent 55%), linear-gradient(144deg, #DEDAD0 0%, #CFC8B8 44%, #C0B8A4 72%, #B4AA94 100%); } .studio-movement-placeholder--mark { background: radial-gradient(ellipse 58% 42% at 35% 25%, rgba(248, 244, 228, 0.45) 0%, transparent 60%), linear-gradient(150deg, #E6E0D2 0%, #D8D0C0 40%, #C8BFAA 68%, #BDB397 100%); } .studio-movement-placeholder--ridge-a { background: radial-gradient(ellipse 62% 48% at 30% 20%, rgba(230, 222, 204, 0.40) 0%, transparent 60%), linear-gradient(145deg, #D8D0C0 0%, #C8BFB0 40%, #B8AFA0 70%, #ACA494 100%); } .studio-movement-placeholder--ridge-b { background: radial-gradient(ellipse 58% 45% at 32% 22%, rgba(222, 214, 196, 0.38) 0%, transparent 58%), linear-gradient(148deg, #D2C9B8 0%, #C4BAA8 40%, #B5AA96 68%, #AAA08C 100%); } .studio-movement-placeholder--cast { background: radial-gradient(ellipse 65% 50% at 35% 25%, rgba(215, 205, 188, 0.45) 0%, transparent 62%), linear-gradient(145deg, #D2C9B8 0%, #C4BAA8 38%, #B5AA96 68%, #AAA08C 100%); } .studio-movement-placeholder--concrete { background: radial-gradient(ellipse 55% 42% at 40% 35%, rgba(205, 197, 180, 0.38) 0%, transparent 55%), linear-gradient(148deg, #C8BEA8 0%, #BAAF9A 40%, #ABA18A 70%, #9E967E 100%); } /* ── Movement sections — shared structure ─────────────────────── Each movement is a
. ────────────────────────────────────────────────────────────── */ .studio-movement { padding-bottom: clamp(110px, 17vh, 210px); } .studio-movement-text { /* layout-contained handles horizontal padding */ } .studio-movement-text-inner { max-width: 1800px; padding-top: clamp(64px, 10vh, 130px); display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 900px) { .studio-movement-text-inner { /* Left column: label + heading + meta (leads). Right column: body. */ grid-template-columns: 42fr 58fr; column-gap: clamp(48px, 6vw, 120px); row-gap: var(--sp-2); align-items: start; } .studio-movement-text-inner .section-kicker { grid-column: 1; grid-row: 1; } .studio-movement-text-inner .studio-movement-heading { grid-column: 1; grid-row: 2; padding-left: 0; } .studio-movement-text-inner .studio-movement-meta { grid-column: 1; grid-row: 3; padding-left: 0; margin-top: var(--sp-3); } .studio-movement-text-inner .studio-movement-body { grid-column: 2; grid-row: 1 / 4; padding-left: 0; } } .studio-movement-heading { font-size: clamp(22px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.015em; font-weight: var(--weight-medium); color: var(--ink); max-width: 34ch; margin-top: var(--sp-2); } .studio-movement-body p + p { margin-top: var(--sp-2); } .studio-movement-meta { margin-top: var(--sp-3); } .studio-section-heading { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.01em; font-weight: var(--weight-medium); color: var(--ink); } .studio-movement-text-lead { padding-top: var(--sp-4); } /* ── Movement image: figure variants ─────────────────────────── .studio-movement-fig: base figure. Aspect-ratio variants below. ────────────────────────────────────────────────────────────── */ .studio-movement-fig { position: relative; display: block; overflow: visible; } /* Portrait — 4:5 for plot output / master prints */ .studio-movement-fig--portrait { width: 100%; aspect-ratio: 4 / 5; } /* Square — 1:1 for detail/macro shots */ .studio-movement-fig--square { width: 100%; aspect-ratio: 1 / 1; } /* Landscape — 16:9 for full-bleed interlude shots */ .studio-movement-fig--landscape { width: 100%; aspect-ratio: 16 / 9; } /* Half — used in two-up full-width spreads */ .studio-movement-fig--half { width: 100%; aspect-ratio: 3 / 4; } /* Casting primary — taller portrait for the cast object hero */ .studio-movement-fig--casting-primary { flex: 1 1 55%; aspect-ratio: 4 / 5; } /* Casting secondary — squares */ .studio-movement-fig--casting-secondary { width: 100%; aspect-ratio: 1 / 1; } /* ── Two-up full-width image spread (01 — Generative) ─────────── Side-by-side images with no padding — true full-bleed. On mobile: stacked single column. ────────────────────────────────────────────────────────────── */ .studio-movement-images--two { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 700px) { .studio-movement-images--two { grid-template-columns: 1fr 1fr; gap: 0; } } /* Full-bleed, edge-to-edge: images meet at the 50% seam so it aligns with the manifesto|studio split directly above. */ .studio-movement-images--two .studio-movement-fig { padding: 0; } .studio-movement-images--two .studio-ed-clip { position: absolute; inset: 0; } /* ── Three-up casting image spread (04 — Casting) ─────────────── Primary tall (left) + secondary pair stacked (right). ────────────────────────────────────────────────────────────── */ .studio-movement-images--three { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); } @media (min-width: 700px) { .studio-movement-images--three { grid-template-columns: 55fr 45fr; gap: var(--sp-1); } } /* Primary fig in casting spread: needs padding for crop marks */ .studio-movement-images--three .studio-movement-fig--casting-primary { padding: 14px; } .studio-movement-images--three .studio-movement-fig--casting-primary .studio-ed-clip { position: absolute; inset: 14px; } /* Secondary pair stacked vertically */ .studio-movement-casting-secondary { display: flex; flex-direction: column; gap: var(--sp-1); } .studio-movement-casting-secondary .studio-movement-fig--casting-secondary { padding: 14px; aspect-ratio: 1 / 1; } .studio-movement-casting-secondary .studio-ed-clip-b { position: absolute; inset: 14px; } /* ── Asymmetric split: image-column + text-column ─────────────── Used in 02 (Plotting) and 03 (Modelling) movements. ────────────────────────────────────────────────────────────── */ .studio-movement-split { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-4); } @media (min-width: 900px) { .studio-movement-split { /* Images ~55% | Text ~45% */ grid-template-columns: 55fr 45fr; gap: 0; align-items: start; } .studio-movement-split-text { padding-left: var(--sp-5); padding-top: var(--sp-2); } /* Reversed: text left, images right */ .studio-movement-split--reversed { grid-template-columns: 45fr 55fr; } .studio-movement-split--reversed .studio-movement-split-text { order: -1; padding-left: 0; padding-right: var(--sp-5); } .studio-movement-split--reversed .studio-movement-split-images { order: 0; } } /* Images column: primary + secondary pair stacked */ .studio-movement-split-images { display: flex; flex-direction: column; gap: var(--sp-2); padding: 14px; } .studio-movement-split-images--stack { display: flex; flex-direction: column; gap: var(--sp-2); padding: 14px; } /* Primary portrait figure inside split */ .studio-movement-split .studio-movement-fig--portrait .studio-ed-clip { position: absolute; inset: 0; } /* Secondary pair in plotting section */ .studio-movement-secondary-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .studio-movement-secondary-pair .studio-movement-fig--square { padding: 14px; box-sizing: content-box; } .studio-movement-secondary-pair .studio-ed-clip-b { position: absolute; inset: 14px; } /* Text column: heading + body */ .studio-movement-split-text { display: flex; flex-direction: column; gap: var(--sp-1); } .studio-movement-split-text--lead { padding-top: 0; } /* Fullbleed interlude within a movement */ .studio-movement-fullbleed-interlude { padding-top: 14px; padding-bottom: 14px; } .studio-movement-fullbleed-interlude .studio-movement-fig--landscape { padding: 14px; } .studio-movement-fullbleed-interlude .studio-movement-fig--landscape .studio-ed-clip { position: absolute; inset: 14px; } /* ── 05 · Provenance ──────────────────────────────────────────── Reuses .studio-provenance-* classes from original. Extended here for the editorial layout. ────────────────────────────────────────────────────────────── */ .studio-provenance-section { padding-bottom: var(--sp-6); } .studio-provenance-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-4); } @media (min-width: 900px) { .studio-provenance-layout { /* Artifacts ~45% | Content ~55% */ grid-template-columns: 45fr 55fr; gap: 0; align-items: start; } .studio-provenance-content { padding-left: var(--sp-5); padding-top: var(--sp-2); } } .studio-provenance-artifacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: 14px; } .studio-provenance-fig { position: relative; overflow: visible; display: block; aspect-ratio: 3 / 4; } .studio-provenance-clip { position: absolute; inset: 0; overflow: hidden; clip-path: none; transition: clip-path 0.95s var(--ease-out); } .reveal-on-scroll.is-visible .studio-provenance-clip { clip-path: inset(0 0% 0 0); } /* Provenance image — z-index 4: above placeholder */ .studio-provenance-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 4; } .studio-provenance-img.is-hidden { display: none; } /* Provenance placeholder — z-index 1: behind image */ .studio-provenance-placeholder { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 65% 50% at 35% 25%, rgba(215, 208, 192, 0.42) 0%, transparent 60%), linear-gradient(150deg, #DEDAD2 0%, #D0CAC0 40%, #C2BAA8 68%, #B8AF9A 100%); } .studio-provenance-placeholder--coa { background: #FFFFFF; } /* CoA shown in FULL (contain) on a framed white card — never cover-cropped */ .studio-provenance-fig--coa { background: #FFFFFF; border: 1px solid var(--line); } .studio-provenance-fig--coa .studio-provenance-img, .coa-static img { object-fit: contain; padding: 7%; } .studio-provenance-content { display: flex; flex-direction: column; gap: var(--sp-2); } /* ── 06 · Studio close ────────────────────────────────────────── Closing statement + signature + CTAs. ────────────────────────────────────────────────────────────── */ .studio-close { padding-bottom: var(--sp-6); } .studio-close-inner { padding-top: var(--sp-4); } .studio-close-content { max-width: 52ch; } .studio-close-heading { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em; font-weight: var(--weight-medium); color: var(--ink); max-width: 34ch; margin-top: var(--sp-2); } .studio-signature-img { display: block; width: clamp(120px, 14vw, 180px); height: auto; opacity: 0.85; margin-top: var(--sp-4); margin-bottom: var(--sp-1); } .studio-close-links { display: flex; align-items: center; gap: 0; margin-top: var(--sp-3); flex-wrap: wrap; } /* ── Mobile overrides — studio editorial ──────────────────────── ────────────────────────────────────────────────────────────── */ @media (max-width: 899px) { .studio-manifesto { padding: var(--sp-5) 0 var(--sp-4); } .studio-movement-split { gap: var(--sp-4); } .studio-movement-split--reversed .studio-movement-split-text { padding-right: 0; } .studio-provenance-artifacts { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .studio-manifesto-inner { gap: var(--sp-3); } .studio-movement-images--two { gap: var(--sp-2); } .studio-movement-secondary-pair { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .studio-movement-split-images, .studio-movement-split-images--stack { padding: 8px; } .studio-movement-secondary-pair .studio-movement-fig--square { padding: 8px; } .studio-movement-secondary-pair .studio-ed-clip-b { inset: 8px; } .studio-provenance-artifacts { padding: 8px; gap: var(--sp-1); } } /* ── Reduced motion — studio editorial ────────────────────────── ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .studio-ed-clip, .studio-ed-clip-b, .studio-provenance-clip { clip-path: none !important; transition: none !important; } .studio-manifesto { animation: none !important; } } /* ============================================================ ARCHIVE PAGE — archive.html Retired / sold-out runs. Same list language as editions.html. ============================================================ */ .page-archive { max-width: 1800px; margin: 0 auto; padding: var(--sp-6) clamp(24px, 5vw, 80px) var(--sp-5); } .archive-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); } .archive-page-title { color: var(--ink); } .archive-count { color: var(--muted); white-space: nowrap; } .archive-caption { color: var(--muted); margin-bottom: var(--sp-5); max-width: 56ch; } /* Archive list — same structure as .editions-list */ .archive-list { list-style: none; } /* Archive provenance note */ .archive-provenance-note { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--muted); max-width: 480px; } /* Entrance animations */ .archive-header { animation: fadeUp 0.5s var(--ease-out) 0.04s both; } .archive-caption { animation: fadeUp 0.5s var(--ease-out) 0.1s both; } .archive-list { animation: fadeUp 0.55s var(--ease-out) 0.16s both; } .archive-provenance-note { animation: fadeUp 0.45s var(--ease-out) 0.24s both; } @media (max-width: 899px) { .page-archive { padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-4); } .archive-header { margin-bottom: var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .archive-header, .archive-caption, .archive-list, .archive-provenance-note { animation: none; } } /* ============================================================ HOME STUDIO TEASER — text-led, no photo Replaces the old editorial story section on the home page. ============================================================ */ .home-studio-teaser { padding: var(--sp-6) clamp(24px, 5vw, 80px); max-width: 1800px; margin: 0 auto; border-top: 1px solid var(--line); } .home-studio-teaser-inner { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 720px; } .home-studio-teaser-heading { font-size: clamp(22px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--weight-medium); color: var(--ink); margin: 0; } .home-studio-teaser-body { color: var(--muted); max-width: 60ch; } @media (max-width: 599px) { .home-studio-teaser { padding: var(--sp-5) clamp(16px, 4vw, 40px); } } /* ── 02 · THE STUDIO — structured editorial grid ───────────────── Full-width, ruled, asymmetric on a clear grid: thesis statement left, body + ruled spec table right. Mono micro-labels frame it. */ .home-process { border-top: 1px solid var(--line); padding: var(--sp-4) clamp(24px, 5vw, 80px) var(--sp-6); max-width: 1800px; margin: 0 auto; } .home-process-labels { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-4); } .home-process-label-r { color: var(--muted); } .home-process-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .home-process-grid { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 110px); } } .home-process-heading { font-family: var(--type-face); font-size: clamp(28px, 4.2vw, 56px); font-weight: var(--weight-medium); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .home-process-cta { display: inline-block; margin-top: var(--sp-4); } .home-process-detail { display: flex; flex-direction: column; gap: var(--sp-4); } @media (min-width: 900px) { .home-process-detail { padding-top: 6px; } } .home-process-body { color: var(--muted); max-width: 52ch; margin: 0; } .home-process-specs { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 0; } .home-process-spec { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-2); padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .home-process-spec-key { color: var(--muted); } .home-process-spec-val { color: var(--ink); font-size: 14px; line-height: 1.45; margin: 0; } /* ════════════════════════════════════════════════════════════════ HOME — MAGAZINE ELEVATION Ref-driven framing: mono masthead, big index numerals, a generative hero companion, a dark full-bleed band, and a metadata footer. ════════════════════════════════════════════════════════════════ */ /* ── Mono masthead — technical document framing under the header ── */ .home-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; padding: 9px clamp(24px, 5vw, 80px); border-bottom: 1px solid var(--line); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--muted); } .home-masthead-l { color: var(--ink); } @media (max-width: 760px) { .home-masthead-mid, .home-masthead-r { display: none; } } /* ── Big ghost index numeral — section markers like the references ── */ .section-index { font-family: var(--type-mono); font-size: clamp(34px, 5vw, 72px); font-weight: var(--weight-medium); line-height: 0.82; letter-spacing: -0.02em; color: rgba(20, 20, 19, 0.11); display: block; } /* ── Hero: type flush-left; technical ledger docked bottom-right ── */ .home-hero-typo-main { display: flex; flex-direction: column; gap: var(--sp-2); max-width: none; } .home-hero-ledger { display: none; } @media (min-width: 940px) { .home-hero-ledger { display: flex; flex-direction: column; gap: var(--sp-3); width: clamp(320px, 30vw, 460px); } } .home-hero-ledger-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .home-hero-ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .home-hero-ledger-key { color: var(--muted); } .home-hero-ledger-val { color: var(--ink); font-variant-numeric: tabular-nums; } .home-hero-ledger-note { margin: var(--sp-2) 0 0; font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; } /* ── Dark full-bleed manifesto band — rhythm + drama ── */ .home-manifesto { background: var(--ink); color: var(--paper); padding: clamp(72px, 12vh, 160px) clamp(24px, 5vw, 80px); } .home-manifesto-inner { max-width: 1800px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 900px) { .home-manifesto-inner { grid-template-columns: auto 1fr; gap: clamp(48px, 6vw, 110px); align-items: start; } } .home-manifesto-label { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 241, 234, 0.5); white-space: nowrap; padding-top: 12px; } .home-manifesto-quote { font-family: var(--type-face); font-size: clamp(28px, 4.4vw, 60px); font-weight: var(--weight-medium); line-height: 1.08; letter-spacing: -0.02em; color: var(--paper); margin: 0; max-width: 20ch; } .home-manifesto-quote .type-mark { --mark: var(--paper); color: var(--ink); } .home-manifesto-foot { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-4); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(244, 241, 234, 0.55); } .home-manifesto-foot .registration-mark { filter: invert(1); opacity: 0.6; } /* ── Section editorial header — big index + label + right stat ── */ .home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); max-width: 1800px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px) var(--sp-3); } .home-section-head-l { display: flex; align-items: flex-end; gap: var(--sp-3); } .home-section-head-titles { display: flex; flex-direction: column; gap: 4px; } .home-section-head-kicker { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-medium); } .home-section-head-title { font-family: var(--type-face); font-size: clamp(20px, 2vw, 30px); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin: 0; } .home-section-head-r { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: right; line-height: 1.5; white-space: nowrap; } .home-section-head-r b { color: var(--ink); font-weight: var(--weight-medium); } .home-section-head-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.2s var(--ease-out); } .home-section-head-link:hover { border-bottom-color: var(--ink); } /* Studio + list label rows reuse the section-head layout */ .home-process-labels { align-items: flex-end; } .home-list-index-row { display: flex; align-items: flex-end; gap: var(--sp-2); margin-bottom: var(--sp-3); } /* Per-card index number on run cards */ .home-run-card-index { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── Metadata footer — masthead-style, like the references ── */ .home-footer-meta { border-top: 1px solid var(--line); max-width: 1800px; margin: 0 auto; padding: var(--sp-3) clamp(24px, 5vw, 80px); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; } .home-footer-meta-cell { display: flex; flex-direction: column; gap: 4px; } .home-footer-meta-key { color: var(--muted); } .home-footer-meta-val { color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .home-footer-meta { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ STANDARD RUN PAGE — edition-detail.html rework Shows run hero image + metadata + editions list (pieces 01..N) with Available / Sold + owner name. ============================================================ */ /* Run page breadcrumb */ .run-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); color: var(--muted); } .run-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .run-breadcrumb a:hover { color: var(--ink); } /* Run page layout — hero image + run data side-by-side on desktop */ .run-page-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 900px) { .run-page-layout { grid-template-columns: 5fr 1fr 5fr; align-items: start; gap: 0; } .run-image-zone { grid-column: 1 / 2; position: sticky; top: 88px; } .run-data-zone { grid-column: 3 / 4; } } /* Run hero image */ .run-image-zone { padding: 14px; } .run-hero-frame-wrapper { width: 100%; position: relative; aspect-ratio: 297 / 420; } .run-hero-frame { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); clip-path: none; animation: revealWipe 0.9s var(--ease-out) 0.1s both; } .run-hero-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .run-hero-img.is-hidden { display: none; } .run-hero-placeholder { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 28% 18%, rgba(240, 240, 240, 0.6) 0%, transparent 68%), linear-gradient(152deg, #E0E0E0 0%, #D0D0D0 38%, #C0C0C0 68%, #B0B0B0 100%); } /* Pre-release variant: white card with the brand "?" SVG as a centered watermark. Drop shadow lifts the white card off the (also white) page background. Drop the modifier on release day to expose the real piece. */ .run-hero-frame--pending { background: var(--paper); box-shadow: 0 1px 2px rgba(20, 20, 19, 0.06), 0 8px 28px rgba(20, 20, 19, 0.10); } .run-hero-frame--pending .run-hero-placeholder { display: none; } .run-hero-frame--pending .run-hero-img { object-fit: contain; width: 38%; height: auto; inset: 0; margin: auto; opacity: 0.16; } /* Run data zone — metadata + editions list */ .run-data-zone { display: flex; flex-direction: column; gap: var(--sp-4); } .run-identity { display: flex; flex-direction: column; gap: var(--sp-2); } .run-label { color: var(--muted); } .run-number { font-family: var(--type-mono); font-size: clamp(32px, 4vw, 48px); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .run-title-line { color: var(--ink); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; font-weight: var(--weight-regular); } /* Run metadata table */ .run-metadata { display: flex; flex-direction: column; } .run-meta-row { display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-2); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .run-meta-row:first-child { border-top: 1px solid var(--line); } .run-meta-key { color: var(--muted); flex-shrink: 0; } .run-meta-value { color: var(--ink); font-variant-numeric: tabular-nums; } /* Editions list within a run */ .run-editions-section { display: flex; flex-direction: column; gap: var(--sp-3); } .run-editions-heading { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--muted); display: block; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); } .run-editions-list { list-style: none; } /* Individual edition piece row */ .run-edition-piece { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; gap: var(--sp-2); } .run-edition-piece:first-child { border-top: 1px solid var(--line); } .run-edition-piece-number { font-family: var(--type-mono); font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .run-edition-piece-owner { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; } .run-edition-piece-status { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-medium); white-space: nowrap; } .run-edition-piece-status--available { color: var(--ink); } .run-edition-piece-status--sold { color: var(--muted); } /* Left cell: number + owner stacked */ .run-edition-piece-left { display: flex; flex-direction: column; gap: 3px; } /* Edition row as link — hover affordance */ a.run-edition-piece { text-decoration: none; color: inherit; transition: padding-left 0.25s var(--ease-out), border-color 0.25s var(--ease-out); } a.run-edition-piece:hover { padding-left: 10px; border-bottom-color: var(--ink); } a.run-edition-piece:hover .run-edition-piece-number { text-decoration: underline; text-underline-offset: 3px; } a.run-edition-piece:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } /* Edition detail page — number "/ 15" suffix */ .run-number-of { color: var(--muted); font-size: 0.55em; letter-spacing: 0; } /* Edition detail page — status pill line */ .edition-status-line { margin-top: calc(-1 * var(--sp-1)); } /* Edition detail page — back-to-run link */ .edition-back-link a { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease-out); } .edition-back-link a:hover { color: var(--ink); } /* Run page entrance animations */ .run-image-zone { animation: fadeUp 0.6s var(--ease-out) 0.05s both; } .run-data-zone > * { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .run-data-zone > *.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .run-hero-frame { clip-path: none; animation: none; } .run-image-zone { animation: none; } .run-data-zone > * { opacity: 1; transform: none; transition: none; } } @media (max-width: 899px) { .run-meta-row { grid-template-columns: 90px 1fr; } } /* ============================================================ CoA STATIC LOCK-DOWN The certificate of authenticity on the studio provenance section must be non-interactive: no click, no download. ============================================================ */ .coa-static { pointer-events: none; user-select: none; -webkit-user-select: none; cursor: default; display: block; position: relative; } .coa-static img { pointer-events: none; user-select: none; -webkit-user-select: none; display: block; width: 100%; height: 100%; object-fit: cover; } /* Remove any print affordances for CoA image */ @media print { .coa-static, .studio-provenance-fig--coa { display: none !important; } } /* CoA figure layout fix — the .coa-static class (position:relative) and its object-fit:cover otherwise defeat the absolute-fill clip pattern and collapse the frame. Restore absolute fill within the figure and show the whole cert. */ .studio-provenance-fig--coa .studio-provenance-clip.coa-static { position: absolute; inset: 0; overflow: hidden; } .studio-provenance-fig--coa .coa-static img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }