@font-face { font-family: 'Flapjack'; src: url('../fonts/WMFLAPJACKVF.woff2') format('woff2'); font-weight: 100 990; font-style: normal; font-display: swap; /* Variable axes — wght: 100–990 | FLIP: 0–100 | FLOP: 0–100 */ font-variation-settings: 'wght' 100, 'FLIP' 0, 'FLOP' 0; } @font-face { font-family: 'CalSans'; src: url('../fonts/CalSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'CalSansUI'; src: url('../fonts/CalSansUI-VariableFont 1.721 [opsz,wght,GEOM,YTAS,SHRP].woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; /* Variable axes — opsz: 10–10.1 | wght: 400–700 | GEOM: 0–100 | YTAS: 720–800 | SHRP: 0–100 */ font-variation-settings: 'opsz' 10, 'wght' 400, 'GEOM' 0, 'YTAS' 720, 'SHRP' 0; } @font-face { font-family: 'Ambulia Text'; src: url('../fonts/AmbuliaTextVF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Anglev1'; src: url('../fonts/anglev1-Regularv17.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gaussian'; src: url('../fonts/GaussianVF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Horizon'; src: url('../fonts/HorizonVF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Pang Serif'; src: url('../fonts/PangSerifVF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── colour tokens, respects data-theme on ────── */ :root, [data-theme="auto"] { color-scheme: light dark; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* dark defaults */ :root { --bg: #242424; --ink: #ffffff; --muted: rgba(255,255,255,0.42); --r: 10px; } /* light override */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: #f2f0eb; --ink: #111111; --muted: rgba(17,17,17,0.45); } } [data-theme="light"] { --bg: #f2f0eb; --ink: #111111; --muted: rgba(17,17,17,0.45); } html { scroll-behavior: smooth; overflow-x: clip; } body { background: var(--bg); color: var(--ink); font-family: 'CalSansUI', -apple-system, sans-serif; font-variation-settings: 'wght' 400; -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background 0.25s, color 0.25s; } /* ═══ HERO ═════════════════════════════════════════════ */ #hero { display: grid; width: 100%; overflow: hidden; } #flapjack-canvas { grid-area: 1 / 1; display: block; margin: 0 auto; background: var(--bg); transition: background 0.25s; cursor: crosshair; } /* Flapjack text overlay — absolutely positioned over the canvas so it always aligns to the canvas height (not the full hero grid cell). */ #hero { position: relative; } #flapjack-text { position: absolute; top: 0; left: -2vw; right: -2vw; height: var(--fj-ch, 300px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 5%; gap: 0.04em; pointer-events: none; overflow: visible; cursor: crosshair; } .fj-line { font-family: 'Flapjack', -apple-system, sans-serif; font-size: clamp(80px, min(32vw, 42vh), 500px); line-height: 0.76; letter-spacing: 0; color: var(--ink); display: flex; justify-content: center; position: relative; font-variation-settings: 'wght' 100, 'FLIP' 0, 'FLOP' 0; } .fj-letter { display: inline-block; position: relative; z-index: var(--lz, 3); } /* per-wave canvases — absolutely fill the text container, sorted by --wzi */ .fj-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--wzi); pointer-events: none; } .hero-text { grid-area: 1 / 1; align-self: start; margin-top: 66.6vh; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 24px 60px; } .hero-headline { font-family: 'CalSans', sans-serif; font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--ink); line-height: 1.1; } .hero-sub { font-variation-settings: 'wght' 400; font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 520px; margin-top: 38px; } .hero-cta { display: flex; align-items: center; gap: 10px; } .hero-pill { display: inline-flex; align-items: center; font-family: 'CalSans', sans-serif; font-weight: 700; font-size: clamp(22px, 3vw, 34px); line-height: 1.1; color: var(--bg); background: var(--ink); padding: 0.22em 0.65em 0.38em; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color 0.25s, opacity 0.15s; } .hero-pill:hover { background-image: url('../links/pill-gradient.svg'); background-size: 800% 100%; background-repeat: no-repeat; background-color: transparent; color: #fff; opacity: 1; } .hero-pill-arrow { font-family: 'CalSansUI', -apple-system, sans-serif; font-variation-settings: 'wght' 700; position: relative; top: 0.08em; } /* height ≈ pill: font-size × (line-height + 2×padding-em) = font-size × 1.66 */ .hero-avatar { width: clamp(38px, 5vw, 58px); height: clamp(38px, 5vw, 58px); border-radius: 50%; overflow: hidden; background: rgba(127,127,127,0.1); flex-shrink: 0; } .hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ═══ DARK / LIGHT / AUTO TOGGLE ═══════════════════════ */ #theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; background: var(--bg); border: 1px solid var(--muted); border-radius: 999px; padding: 2px; gap: 1px; opacity: 0.6; transition: opacity 0.15s; } #theme-toggle:hover { opacity: 1; } #theme-toggle button { font-family: 'CalSansUI', -apple-system, sans-serif; font-variation-settings: 'wght' 400; font-size: 8px; letter-spacing: 0.04em; color: var(--muted); background: none; border: none; border-radius: 999px; padding: 2px 6px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } #theme-toggle button.active { background: var(--ink); color: var(--bg); } /* ═══ WORK ══════════════════════════════════════════════ */ #work { padding: 0; } /* mobile-first: single column by default, 3-col only on desktop */ .work-item { display: grid; grid-template-columns: 1fr; padding: 0 clamp(20px, 5vw, 40px); gap: 24px; align-items: start; } .work-copy { padding-top: 0; padding-bottom: clamp(48px, 8vw, 80px); } @media (min-width: 681px) { .work-item { /* 3/8 copy | 1/8 caption | 4/8 image */ grid-template-columns: 3fr 1fr 4fr; min-height: 100vh; padding: 0 clamp(32px, 7vw, 112px); gap: clamp(32px, 5vw, 80px); } .work-copy { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); } } .work-headline { font-family: 'CalSans', sans-serif; font-weight: 700; font-size: clamp(22px, 2.8vw, 36px); line-height: 1.08; color: var(--ink); margin-bottom: 28px; text-wrap: balance; } .para { font-variation-settings: 'wght' 400; font-size: 15px; line-height: 1.72; color: var(--muted); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; max-width: 38ch; } /* figure wrapper — takes the right-column slot, handles sticky + slide-in */ /* ── figcaption layout tokens ───────────────────────────────────── */ :root { --fig-shape-size: 11px; /* diameter of the morphing shape */ --fig-shape-inset: 20px; /* inset from image corner */ --fig-text-gap: 12px; /* gap between fig-header and text */ } /* ── mobile-first figure defaults ──────────────────────────────── */ .work-fig { display: flex; flex-direction: column; order: -1; /* figure above copy in single-col grid */ width: 100%; overflow: visible; /* rule must escape work-img upward on mobile */ } /* mobile: figcaption above image — text indented past the rule + gap */ .work-figcaption { padding-left: calc(var(--fig-shape-inset) + var(--fig-shape-size) / 2 + 10px); padding-right: 20%; padding-bottom: 8px; order: -1; } .fig-header { display: none; } /* empty on mobile */ .fig-text { flex: 1; } /* ── desktop override (3-col layout) ────────────────────────────── */ @media (min-width: 681px) { .work-fig { grid-column: 2 / -1; position: sticky; top: clamp(24px, 5vw, 56px); align-self: start; flex-direction: row; align-items: start; order: 0; width: auto; gap: 0; margin-block: 16px; transform: translateX(48px); opacity: 0; transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease; } .work-fig.visible { transform: translateX(0); opacity: 1; } /* caption takes 1/5 of figure; padding-top puts text below the rule line */ .work-figcaption { display: block; flex: 1; width: auto; padding-left: 0; padding-right: 0; padding-top: calc(var(--fig-shape-inset) + var(--fig-shape-size) / 2 - 0.5px + 17px); order: 0; } .fig-text { order: 0; font-size: 14px; margin-right: 5px; } .fig-header { display: block; /* spacer — empty div, just provides margin-bottom */ margin-bottom: var(--fig-text-gap); } } /* shape: absolutely positioned in image top-left corner */ .work-shape { position: absolute; top: var(--fig-shape-inset); left: var(--fig-shape-inset); z-index: 2; width: var(--fig-shape-size); height: var(--fig-shape-size); background: var(--ink); border-radius: 50%; /* single animation: morph + 90° rotation, quartic easing, pauses at each pole */ animation: shape-cycle 5s linear infinite; } /* Quartic ease-in: circle→square cubic-bezier(0.895, 0.03, 0.685, 0.22) Quartic ease-out: square→circle cubic-bezier(0.165, 0.84, 0.44, 1.0) Rotation: clockwise only. 0°→90° (to square) then continues to 180°→circle. Circle at 180° = circle at 0° (symmetric), so hard loop is seamless. */ @keyframes shape-cycle { 0% { border-radius: 50%; transform: rotate(0deg); } 25% { border-radius: 50%; transform: rotate(0deg); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } 50% { border-radius: 1px; transform: rotate(90deg); } 75% { border-radius: 1px; transform: rotate(90deg); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1.0); } 100% { border-radius: 50%; transform: rotate(180deg); } } /* rule inside .work-img; work-img overflow:visible lets it escape to figcaption */ .fig-rule { position: absolute; z-index: 3; background: var(--ink); /* mobile: top/height set by JS to match figcaption height exactly */ left: calc(var(--fig-shape-inset) + var(--fig-shape-size) / 2 - 0.5px); top: 0; width: 1px; height: calc(var(--fig-shape-inset) + var(--fig-shape-size) / 2); /* JS overrides this */ transform-origin: bottom; /* animates upward from shape */ transform: scaleY(0); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s; } .work-fig.visible .fig-rule { transform: scaleY(1); } @media (min-width: 681px) { /* shape shifts down 5px on desktop — override must come after the base .work-shape rule */ .work-shape { top: calc(var(--fig-shape-inset) + 12px); } /* desktop: horizontal rule — reuses fig-rule, now horizontal, extending left from shape. figcaption flex:1 and work-img flex:4 → figcaption = 25% of work-img width. overflow:visible on work-img lets the rule escape leftward into the figcaption column. */ .fig-rule { top: calc(var(--fig-shape-inset) + var(--fig-shape-size) / 2 - 0.5px + 12px); left: -25%; width: calc(25% + var(--fig-shape-inset) + var(--fig-shape-size) / 2); height: 1px; transform-origin: right center; transform: scaleX(0); } .work-fig.visible .fig-rule { transform: scaleX(1); } } .fig-text { font-family: 'CalSansUI', sans-serif; font-variation-settings: 'wght' 400; font-size: 14px; line-height: 1.65; color: var(--muted); font-weight: 400; opacity: 0; transform: translateX(5px); transition: opacity 0.7s ease 1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1s; } .work-fig.visible .fig-text { opacity: 1; transform: translateX(0); } /* image container — 4/5 of figure (= 4/8 of work-item) */ .work-img { position: relative; /* contains the absolutely-positioned .work-shape */ flex: 4; min-width: 0; border-radius: var(--r); overflow: visible; /* rule must be able to break out toward the figcaption */ background: rgba(127,127,127,0.07); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .work-img img { width: 58%; height: auto; display: block; } /* full-bleed photo treatment — border-radius clips the image since work-img overflow is visible */ .work-img img.fill { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); } /* theme-switching image pair (cal-ui) Specificity must beat .work-img img.fill (0,1,1) so use (0,2,1) */ .work-img img.theme-img--light { display: none; } [data-theme="light"] .work-img img.theme-img--light { display: block; } [data-theme="light"] .work-img img.theme-img--dark { display: none; } @media (prefers-color-scheme: light) { [data-theme="auto"] .work-img img.theme-img--light { display: block; } [data-theme="auto"] .work-img img.theme-img--dark { display: none; } } /* ═══ DEK ════════════════════════════════════════════════ */ #dek { width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; margin-top: 6.25vh; /* 1/16 vh */ overflow: visible; } #dek-wrap { position: relative; width: 100%; overflow: visible; } #dek-canvas { display: block; width: 100%; background: var(--bg); transition: background 0.25s; } #dek-header { font-family: 'CalSansUI', sans-serif; font-variation-settings: 'wght' 400; line-height: 1.28; color: var(--ink); box-sizing: border-box; text-wrap: balance; hyphens: auto; position: relative; z-index: 1; /* sits above canvas */ transform: translateY(1.5vh); } #dek-annot { /* visually hidden — drawn on canvas; kept in DOM for a11y */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ═══ CAROUSEL ══════════════════════════════════════════ */ #logos { padding-top: 88px; overflow: hidden; } .logos-header { padding: 0 clamp(32px, 7vw, 112px) 52px; } .logos-headline { font-family: 'CalSans', sans-serif; font-weight: 700; font-size: clamp(20px, 2.6vw, 32px); color: var(--ink); } .track-wrap { overflow: hidden; width: 100%; cursor: grab; } .track-wrap:active { cursor: grabbing; } .track { display: flex; align-items: center; width: max-content; padding: 20px 0; } .logo-slide { flex: 0 0 auto; padding: 0 48px; display: flex; align-items: center; } .logo-slide img, .logo-slide svg { display: block; height: 12vh; width: auto; /* dark mode: render logo white */ filter: brightness(0) invert(1); } /* light mode: render logo dark */ [data-theme="light"] .logo-slide img, [data-theme="light"] .logo-slide svg { filter: brightness(0); } @media (prefers-color-scheme: light) { [data-theme="auto"] .logo-slide img, [data-theme="auto"] .logo-slide svg { filter: brightness(0); } } /* ═══ CONTACT ═══════════════════════════════════════════ */ #contact { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(48px, 8vw, 120px) clamp(32px, 7vw, 112px); } .contact-inner { display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); max-width: 560px; width: 100%; } .contact-photo { flex: 0 0 clamp(64px, 10vw, 96px); width: clamp(64px, 10vw, 96px); height: clamp(64px, 10vw, 96px); border-radius: 50%; overflow: hidden; background: rgba(127,127,127,0.1); align-self: flex-start; margin-top: 4px; } .contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-copy { flex: 1; } .contact-name { font-family: 'CalSans', sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); color: var(--ink); margin-bottom: 6px; } .contact-role { font-variation-settings: 'wght' 400; font-size: 13px; color: var(--muted); margin-bottom: 20px; } .contact-cta { display: inline-block; font-family: 'CalSansUI', -apple-system, sans-serif; font-variation-settings: 'wght' 700; font-size: 14px; letter-spacing: 0; color: var(--bg); background: var(--ink); padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: opacity 0.15s; margin-bottom: 20px; } .contact-cta:hover { opacity: 0.75; } /* staggered social links — 4-col grid, left-aligned in each track */ .contact-links { display: grid; grid-template-columns: 2.5ch 3.5ch 2.5ch 1fr; gap: 0 2ch; align-items: baseline; } .contact-links a { font-variation-settings: 'wght' 400; font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.12s; white-space: nowrap; } .contact-links a:hover { color: var(--ink); } /* ═══ FOOTER ════════════════════════════════════════════ */ footer { position: relative; z-index: 2; padding: 10vh clamp(32px, 7vw, 112px) 36px; display: flex; flex-direction: column; gap: 12px; } .footer-row { display: grid; /* ig/tw/in fill left half (3×1fr = 50%); email starts exactly at centre (3fr = 50%) */ grid-template-columns: 1fr 1fr 1fr 3fr; align-items: baseline; } .footer-brand { font-family: 'CalSans', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); } /* Let nav children sit directly in the parent grid */ .footer-links { display: contents; } .footer-links a { font-variation-settings: 'wght' 400; font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.12s; white-space: nowrap; } .footer-links a:hover { color: var(--ink); } .footer-credit { font-variation-settings: 'wght' 400; font-size: 14px; color: var(--ink); opacity: 0.2; } .footer-credit a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ═══ FOOTER LETTERBOX ══════════════════════════════════ */ #footer-letterbox { width: 100%; background: var(--bg); transition: background 0.25s; position: relative; z-index: 1; /* footer z-index:2 paints on top */ } #lb-footer { display: block; margin: 0 auto; background: var(--bg); transition: background 0.25s; cursor: crosshair; } /* ═══ MOBILE ════════════════════════════════════════════ At ≤680px: • Canvas words reflow to 2-col × 4-row (WO/RD/MA/RK) via CONFIG override applied in JS • Work items collapse to single column, caption+rule above image • Images become static (position:sticky needs overflow parent; single-col flow breaks that contract) • Contact stacks vertically • Footer links wrap to 2 cols ══════════════════════════════════════════════════════ */ @media (max-width: 680px) { .work-item { grid-template-columns: 1fr; min-height: auto; padding: 0 clamp(20px, 5vw, 40px); gap: 24px; } .work-img { width: 100%; order: 1; } /* caption+rule above, image below */ .work-figcaption { order: -1; } /* ensure caption is above image */ .fig-text { font-size: 10px; } .work-copy { padding-bottom: clamp(48px, 8vw, 80px); } .contact-inner { flex-direction: column; align-items: flex-start; gap: 24px; } .contact-photo { align-self: auto; } .footer-links a:last-child { text-align: left; } #logos { padding-top: 56px; } .logos-header { padding: 0 clamp(20px, 5vw, 40px) 36px; } /* Dek: text block on top, canvas block on bottom */ #dek-wrap { display: flex; flex-direction: column; } #dek-header { position: static !important; left: auto !important; top: auto !important; width: auto !important; align-self: stretch; font-size: clamp(20px, 5.5vw, 36px); padding: 0 clamp(20px, 5vw, 40px) 28px !important; order: 0; } #dek-canvas { order: 1; } } @media (min-width: 768px) { footer { padding-bottom: clamp(60px, 8vw, 100px); } } /* ═══ STICKERS ══════════════════════════════════════════════ */ #sticker-layer { position: absolute; top: 0; left: 0; width: 100%; overflow-x: hidden; /* prevent horizontal scroll from thrown stickers */ overflow-y: visible; /* stickers below fold must not be clipped */ pointer-events: none; z-index: 99; } .sticker { position: absolute; /* in document flow — scrolls with page */ pointer-events: auto; /* re-enable interaction on each sticker */ padding: 9px 18px; border-radius: 50px; color: #fff; font-family: 'CalSansUI', sans-serif; font-variation-settings: 'wght' 700; font-size: 13px; white-space: nowrap; cursor: grab; user-select: none; will-change: transform; transform: scale(0); opacity: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.18); } @keyframes sticker-pop { 0% { transform: scale(0) rotate(var(--rot)); opacity: 0; } 60% { transform: scale(1.14) rotate(calc(var(--rot) * -0.35)); opacity: 1; } 80% { transform: scale(0.94) rotate(calc(var(--rot) * 0.12)); } 100% { transform: scale(1) rotate(var(--rot)); opacity: 1; } } @keyframes sticker-wiggle { 0%, 100% { transform: rotate(var(--rot)) scale(1); } 30% { transform: rotate(calc(var(--rot) + 2.5deg)) scale(1.03); } 70% { transform: rotate(calc(var(--rot) - 2.5deg)) scale(1.03); } } .sticker--visible { opacity: 1; animation: sticker-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .sticker--settled { opacity: 1; } .sticker--wiggling { animation: sticker-wiggle 0.18s ease-in-out infinite; } .sticker--dragging { cursor: grabbing; box-shadow: 0 6px 24px rgba(0,0,0,0.28); transform: scale(0.95) !important; animation: none !important; }