/* ========================================================================== Ilgullo — main stylesheet. Tokens are documented in /DESIGN.md. ========================================================================== */ /* ---------- FONTS ---------- */ @font-face { font-family: "General Sans"; src: url("../fonts/general-sans.woff2") format("woff2"); font-weight: 200 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } /* ---------- TOKENS ---------- */ :root { --bg: #F3F2EE; --bg-2: #EAE9E4; --surface: #FBFBF9; --ink: #141413; --ink-2: #4A4A46; --ink-3: #7C7B76; --line: rgba(20, 20, 19, .14); --accent: #FF5A36; --on-accent: #141413; --media-bg: #DEDCD6; --f-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: clamp(3rem, 8.4vw, 9.5rem); --fs-h1: clamp(2.5rem, 5.6vw, 6rem); --fs-h2: clamp(2rem, 3.8vw, 4rem); --fs-h3: clamp(1.4rem, 2vw, 2.1rem); --fs-intro: clamp(1.2rem, 1.7vw, 1.65rem); --fs-body: clamp(1rem, 1.05vw, 1.125rem); --fs-small: .875rem; --fs-micro: .6875rem; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 220px; --gutter: clamp(16px, 4vw, 72px); --section: clamp(96px, 14vw, 220px); --max: 1600px; --header-h: 64px; --r-media: 14px; --r-card: 22px; --r-pill: 999px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-editorial: cubic-bezier(.22, 1, .36, 1); --ease-image: cubic-bezier(.76, 0, .24, 1); --d-fast: 220ms; --d-base: 480ms; --d-slow: 900ms; --d-cine: 1200ms; color-scheme: light; } :root[data-theme="dark"] { --bg: #0D0D0C; --bg-2: #151514; --surface: #1B1B19; --ink: #F0EEE8; --ink-2: #B9B7B0; --ink-3: #85847E; --line: rgba(240, 238, 232, .14); --media-bg: #222220; color-scheme: dark; } /* ---------- RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } img, video, svg, picture { display: block; max-width: 100%; height: auto; } img { -webkit-user-drag: none; user-select: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--ink); color: var(--bg); border-radius: var(--r-pill); } /* ---------- LAYOUT ---------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(64px, 9vw, 128px); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 1.6vw, 24px); } @media (max-width: 1023px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 639px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- TYPOGRAPHY ---------- */ .t-display, .t-h1, .t-h2, .t-h3 { font-weight: 400; text-wrap: balance; } .t-display { font-size: var(--fs-display); line-height: .92; letter-spacing: -.045em; } .t-h1 { font-size: var(--fs-h1); line-height: .96; letter-spacing: -.035em; } .t-h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.03em; } .t-h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; } .t-intro { font-size: var(--fs-intro); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; } .t-body { max-width: 62ch; color: var(--ink-2); text-wrap: pretty; } .t-body p + p { margin-top: 1em; } .t-small { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); } .t-micro, .label { font-family: var(--f-mono); font-size: var(--fs-micro); line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } /* Serif italic accent: any inside a heading. Optical size compensation + descender clearance. */ .t-display em, .t-h1 em, .t-h2 em, .t-h3 em, .serif, .entry h2 em, .entry h3 em, .entry blockquote { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.01em; line-height: inherit; padding-right: .04em; } .t-display, .t-h1, .t-h2 { padding-bottom: .06em; } .accent { color: var(--accent); } .label { display: inline-flex; gap: 10px; align-items: center; } .label__num { color: var(--ink); } .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .label--plain::before { display: none; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; white-space: nowrap; transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); } .btn:hover { border-color: var(--ink); } .btn:active { transform: scale(.98); } .btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn .arrow { display: inline-block; transition: transform var(--d-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .link-line { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-base) var(--ease-editorial); } .link-line:hover, .link-line:focus-visible { background-size: 100% 1px; } /* ---------- HEADER ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); display: flex; align-items: center; transition: transform var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out); } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); opacity: 0; transition: opacity var(--d-base) var(--ease-out); border-bottom: 1px solid var(--line); } .site-header.is-scrolled::before { opacity: .94; } .site-header.is-hidden { transform: translateY(-100%); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; align-items: baseline; gap: 2px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; } .logo em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.12em; } .logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 3px; align-self: center; transform: translateY(3px); } .nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); } .nav__list { display: flex; gap: clamp(16px, 2.2vw, 32px); list-style: none; padding: 0; margin: 0; } .nav__list a { font-size: .9375rem; letter-spacing: -.01em; color: var(--ink-2); transition: color var(--d-fast) var(--ease-out); } .nav__list a:hover, .nav__list .is-current a, .nav__list .current-menu-item a { color: var(--ink); } .nav__list .is-current a, .nav__list .current-menu-item a { background-size: 100% 1px; } .nav__tools { display: flex; align-items: center; gap: 8px; } .lang-switch { display: flex; gap: 2px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; } .lang-switch a { padding: 6px 6px; color: var(--ink-3); border-radius: var(--r-pill); } .lang-switch a[aria-current="true"], .lang-switch a:hover { color: var(--ink); } /* Touch screens: 44px targets for language and theme (same look, bigger hit area). */ @media (pointer: coarse) { .lang-switch a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; } .nav__tools .theme-toggle { width: 44px; height: 44px; } } .theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; } .theme-toggle span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); transition: transform var(--d-base) var(--ease-editorial); } :root[data-theme="dark"] .theme-toggle span { transform: rotate(180deg); } .menu-toggle { display: none; min-height: 44px; padding: 0 4px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 49; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 32px) var(--gutter) 32px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 700ms var(--ease-image), visibility 0s 700ms; } .mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 700ms var(--ease-image); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-menu li { overflow: hidden; } .mobile-menu li a { display: block; font-size: clamp(2.6rem, 12vw, 4.5rem); line-height: 1.05; letter-spacing: -.04em; padding-block: 4px; transform: translateY(105%); transition: transform 800ms var(--ease-editorial); } .mobile-menu.is-open li a { transform: none; } .mobile-menu li:nth-child(2) a { transition-delay: 60ms; } .mobile-menu li:nth-child(3) a { transition-delay: 120ms; } .mobile-menu li:nth-child(4) a { transition-delay: 180ms; } .mobile-menu li:nth-child(5) a { transition-delay: 240ms; } .mobile-menu__foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; } @media (max-width: 899px) { .nav__list { display: none; } .menu-toggle { display: inline-flex; align-items: center; } } /* ---------- HOME: HERO ---------- */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: var(--header-h); overflow: clip; isolation: isolate; } .hero__media { position: absolute; inset: var(--header-h) var(--gutter) clamp(96px, 16vh, 168px); z-index: -1; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.62) 100%); } .hero__content { align-self: end; padding: 0 calc(var(--gutter) + clamp(16px, 2.4vw, 40px)) clamp(128px, 20vh, 208px); color: #F6F5F1; max-width: 1200px; } .hero__title { text-shadow: 0 1px 24px rgba(0,0,0,.18); font-size: clamp(2.4rem, 5.6vw, 6rem); line-height: .98; letter-spacing: -.04em; font-weight: 400; text-wrap: balance; } .hero__title em { font-family: var(--f-serif); font-style: italic; font-size: 1.08em; letter-spacing: -.01em; } .hero__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--gutter) clamp(28px, 4vh, 44px); } .hero__bar .t-micro { color: var(--ink-3); } .hero__bar .t-micro strong { color: var(--ink); font-weight: 400; } .scroll-cue { display: inline-flex; align-items: center; gap: 10px; } .scroll-cue i { width: 1px; height: 28px; background: var(--line); position: relative; overflow: hidden; } .scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: cue 2.4s var(--ease-image) infinite; } @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } .hero__sound { position: absolute; right: calc(var(--gutter) + 20px); bottom: calc(clamp(96px, 16vh, 168px) + 20px); color: #F6F5F1; border-color: rgba(246,245,241,.4); } .hero__sound:hover { border-color: #F6F5F1; } @media (max-width: 639px) { .hero__media { inset: var(--header-h) 0 clamp(96px, 16vh, 168px); border-radius: 0; } .hero__content { padding-inline: var(--gutter); } .hero__sound { right: var(--gutter); } } /* Home showreel: opens full screen under a white header, then, while scrolling, shrinks into a framed print and the page carries on. The stage is sticky inside a taller section; the shrink is a scroll-driven clip-path (no JS, no scroll listeners). */ .hero--reel { display: block; min-height: 0; height: 100svh; padding-top: 0; overflow: visible; } .hero--reel .hero__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: clip; isolation: isolate; } .hero--reel .hero__media { inset: 0; border-radius: 0; } .hero--reel .hero__media::after { background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.6) 100%); } .hero--reel .hero__content { padding-bottom: clamp(32px, 6vh, 72px); } .hero--reel .hero__bar { padding-inline: calc(var(--gutter) + clamp(16px, 2.4vw, 40px)); } .hero--reel .hero__bar .t-micro, .hero--reel .scroll-cue { color: rgba(246,245,241,.72); } .hero--reel .hero__bar .t-micro strong { color: #F6F5F1; } .hero--reel .scroll-cue i { background: rgba(246,245,241,.3); } .hero--reel .scroll-cue i::after { background: #F6F5F1; } html.js .hero--reel .hero__media { clip-path: none; transition: none; } @media (prefers-reduced-motion: no-preference) { .js .hero--reel .hero__media > :is(video, img) { scale: 1.06; transition: scale var(--d-cine) var(--ease-image); } .js .is-loaded .hero--reel .hero__media > :is(video, img), .js.intro-seen .hero--reel .hero__media > :is(video, img) { scale: 1; } } @media (max-width: 639px) { .hero--reel .scroll-cue { display: none; } } /* Pause / play for the autoplaying reel (WCAG 2.2.2). Stays inside the frame once it has shrunk. */ .hero__pause { position: absolute; z-index: 2; right: calc(var(--gutter) + clamp(16px, 2.4vw, 40px)); bottom: calc(9svh + clamp(20px, 3vh, 32px)); gap: 10px; color: #F6F5F1; border-color: rgba(246,245,241,.45); background: rgba(20,20,19,.25); } .hero__pause:hover, .hero__pause:focus-visible { border-color: #F6F5F1; } .hero__pause i { position: relative; width: 8px; height: 10px; border-inline: 2px solid currentColor; box-sizing: border-box; } .hero__pause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-block: 5.5px solid transparent; } @media (max-width: 639px) { .hero__pause { right: var(--gutter); top: calc(var(--header-h) + 16px); bottom: auto; } } /* White header while it sits on the video (not once scrolled, not with the menu open). */ .home:not(:has(.mobile-menu.is-open)) .site-header:not(.is-scrolled) { --ink: #F6F5F1; --ink-3: rgba(246,245,241,.7); --line: rgba(246,245,241,.3); color: #F6F5F1; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .hero--reel { height: 190svh; } .hero--reel .hero__media { animation: reel-shrink linear both; animation-timeline: scroll(root); animation-range: 0 85svh; } .hero--reel .hero__content, .hero--reel .hero__bar { animation: reel-text linear both; animation-timeline: scroll(root); animation-range: 0 55svh; } } @keyframes reel-shrink { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(calc(var(--header-h) + 3svh) var(--gutter) 9svh round var(--r-media)); } } @keyframes reel-text { to { opacity: 0; translate: 0 -6svh; } } } /* ---------- HOME: POINT OF VIEW ---------- */ .pov__statement { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; max-width: 18ch; } .pov__statement em { font-family: var(--f-serif); font-style: italic; font-size: 1.08em; letter-spacing: -.01em; } .pov__inline { display: inline-block; width: 1.6em; height: .82em; vertical-align: -.04em; margin-inline: .08em; border-radius: 3px; overflow: hidden; background: var(--media-bg); } .pov__inline img { width: 100%; height: 100%; object-fit: cover; } .pov__body { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .pov__body .t-body { grid-column: 6 / span 5; } .pov__body .btn { grid-column: 6 / span 5; justify-self: start; } @media (max-width: 899px) { .pov__body .t-body, .pov__body .btn { grid-column: 1 / -1; } } /* ---------- SECTION HEAD ---------- */ .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); flex-wrap: wrap; } .section-head .t-h2 { max-width: 16ch; } /* ---------- PROJECT CARD (print) ---------- */ .card { position: relative; display: block; } .card__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--d-base) var(--ease-out); } .card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1100ms var(--ease-editorial); } .card__media video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-base) var(--ease-out); } .card:hover .card__media img { transform: scale(1.035); } .card.is-previewing .card__media video { opacity: 1; } .card__placeholder { position: absolute; inset: 0; display: grid; place-items: end start; padding: 24px; background: var(--bg-2); font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -.02em; } .card__meta { display: flex; gap: 12px; margin-top: 16px; } .card__meta span + span::before { content: "/"; margin-right: 12px; color: var(--line); } .card__title { margin-top: 8px; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -.025em; font-weight: 400; transition: transform var(--d-base) var(--ease-out); text-wrap: balance; } .card__title em { font-family: var(--f-serif); font-style: italic; font-size: 1.08em; } .card:hover .card__title { transform: translateX(6px); } .card__rule { display: block; height: 1px; margin-top: 16px; background: var(--line); position: relative; overflow: hidden; } .card__rule::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-editorial); } .card:hover .card__rule::after { transform: scaleX(1); } /* ---------- HOME: PROJECT RAIL ---------- */ .rail { position: relative; } .rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 460px); gap: clamp(16px, 2.4vw, 40px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 24px; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; } .rail__track::-webkit-scrollbar { display: none; } .rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .rail__track.is-dragging a { pointer-events: none; } .rail__item { scroll-snap-align: start; } .rail__item:nth-child(3n+2) { padding-top: clamp(24px, 5vw, 80px); } .rail__item--wide { grid-column: span 1; } .rail__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px var(--gutter) 0; } .rail__progress { flex: 1; max-width: 320px; height: 1px; background: var(--line); position: relative; overflow: hidden; } .rail__progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform 300ms var(--ease-out); } .rail__arrows { display: flex; gap: 8px; } .rail__arrows .btn { width: 44px; padding: 0; justify-content: center; } .rail__count { font-variant-numeric: tabular-nums; } /* Scroll-driven entrance per card (off main thread where supported). */ @supports (animation-timeline: view()) { .js .rail__item .card { animation: rail-in linear both; animation-timeline: view(inline); animation-range: entry 0% cover 40%; } @keyframes rail-in { from { opacity: .25; transform: scale(.92) rotate(var(--tilt, 1.2deg)); } to { opacity: 1; transform: none; } } .rail__item:nth-child(even) .card { --tilt: -1.2deg; } } /* ---------- HOME: WHAT MATTERS ---------- */ .matters { position: relative; } .matters__list { list-style: none; padding: 0; margin: 0; } .matters__item { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.035em; padding-block: clamp(12px, 2vw, 28px); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; } .matters__item:last-child { border-bottom: 1px solid var(--line); } .matters__item .t-micro { transform: translateY(-.6em); } .matters__item em { font-family: var(--f-serif); font-style: italic; font-size: 1.08em; letter-spacing: -.01em; } /* ---------- HOME: FRAMES COLLAGE ---------- */ .collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(40px, 5vw, 80px); gap: clamp(12px, 1.6vw, 24px); } .collage__item { position: relative; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .collage__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-editorial); } .collage__item:hover img { transform: scale(1.04); } .collage__item:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 6; } .collage__item:nth-child(2) { grid-column: 6 / span 3; grid-row: 2 / span 4; } .collage__item:nth-child(3) { grid-column: 10 / span 3; grid-row: 1 / span 5; } .collage__item:nth-child(4) { grid-column: 5 / span 5; grid-row: 7 / span 4; } .collage__item:nth-child(5) { grid-column: 2 / span 3; grid-row: 8 / span 4; } .collage__item:nth-child(6) { grid-column: 10 / span 3; grid-row: 7 / span 5; } .collage__caption { grid-column: 1 / span 4; grid-row: 13; align-self: start; } @media (max-width: 767px) { .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; } .collage__item:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 5; } .collage__item:nth-child(2) { grid-column: 3 / span 2; grid-row: 5 / span 3; } .collage__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 7 / span 4; } .collage__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 9 / span 3; } .collage__item:nth-child(n+5) { display: none; } .collage__caption { grid-column: 1 / -1; grid-row: 12; } } /* ---------- HOME: CLIENTS ---------- */ .clients { border-block: 1px solid var(--line); padding-block: clamp(28px, 3vw, 44px); overflow: hidden; } .clients__track { display: flex; width: max-content; gap: clamp(32px, 4vw, 72px); animation: marquee 48s linear infinite; } .clients:hover .clients__track { animation-play-state: paused; } .clients__track span { font-size: clamp(1.4rem, 2.4vw, 2.4rem); letter-spacing: -.03em; color: var(--ink-3); white-space: nowrap; transition: color var(--d-fast); } .clients__track span:hover { color: var(--ink); } .clients__track span:nth-child(3n+2) { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.55rem, 2.6vw, 2.6rem); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- HOME: LAB ---------- */ .lab-feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; } .lab-feature__media { grid-column: 1 / span 7; aspect-ratio: 3 / 2; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .lab-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-editorial); } .lab-feature:hover .lab-feature__media img { transform: scale(1.03); } .lab-feature__text { grid-column: 9 / span 4; display: grid; gap: 16px; } @media (max-width: 899px) { .lab-feature__media, .lab-feature__text { grid-column: 1 / -1; } } /* ---------- CONTACT CTA (single colour block per page) ---------- */ .cta { background: var(--accent); color: var(--on-accent); position: relative; overflow: clip; padding-block: clamp(96px, 14vw, 200px); } .cta .t-display em { font-size: 1.06em; } .cta__row { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: var(--s-8); flex-wrap: wrap; } .cta .t-micro { color: var(--on-accent); opacity: .7; } .cta .btn { border-color: rgba(20,20,19,.35); color: var(--on-accent); } .cta .btn--solid { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); } .cta .btn--solid:hover { background: #F6F5F1; color: var(--on-accent); border-color: #F6F5F1; } .cta__mail { font-size: var(--fs-h3); letter-spacing: -.02em; } @supports (animation-timeline: view()) { .js .cta { animation: cta-open linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } @keyframes cta-open { from { clip-path: inset(8% 4% 0 4% round 8px); } to { clip-path: inset(0 0 0 0 round 0); } } } /* ---------- FOOTER ---------- */ .site-footer { padding-block: 48px 32px; border-top: 1px solid var(--line); } .cta + .site-footer { border-top: 0; } .site-footer__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; } .site-footer__brand { grid-column: 1 / span 5; display: grid; gap: 12px; } .site-footer__col { grid-column: span 2; display: grid; gap: 8px; align-content: start; font-size: .9375rem; } .site-footer__col a { color: var(--ink-2); } .site-footer__col a:hover { color: var(--ink); } .site-footer__legal { margin-top: 48px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } @media (max-width: 899px) { .site-footer__brand { grid-column: 1 / -1; } .site-footer__col { grid-column: span 3; } } /* ---------- PAGE HERO (archives, pages) ---------- */ .page-hero { padding-top: calc(var(--header-h) + clamp(64px, 10vw, 160px)); padding-bottom: clamp(48px, 6vw, 96px); } .page-hero .t-h1 { max-width: 16ch; } .page-hero__sub { margin-top: 24px; max-width: 46ch; } .page-hero__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; } /* ---------- FILTERS ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filters button { min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); } .filters button:hover { border-color: var(--ink); color: var(--ink); } .filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filters sup { font-size: .8em; margin-left: 4px; opacity: .6; } /* ---------- PROJECTS ARCHIVE ---------- */ .view-switch { display: flex; gap: 4px; } .projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 4vw, 64px); } .projects-grid > .card { grid-column: span 4; } .projects-grid > .card .card__media { aspect-ratio: 4 / 3; } .projects-grid > .card.is-hidden { display: none; } @media (max-width: 899px) { .projects-grid { grid-template-columns: 1fr 1fr; } .projects-grid > .card, .projects-grid > .card:nth-child(n) { grid-column: span 1; margin-top: 0; } .projects-grid > .card:nth-child(3n+1) { grid-column: 1 / -1; } .projects-grid > .card:nth-child(3n+1) .card__media { aspect-ratio: 4 / 3; } .projects-grid > .card:nth-child(3n+3) { margin-top: 48px; } } @media (max-width: 539px) { .projects-grid { grid-template-columns: 1fr; row-gap: 56px; } .projects-grid > .card:nth-child(n) { grid-column: 1; margin-top: 0; } } /* Index view */ .projects-index { display: none; border-top: 1px solid var(--line); } [data-view="index"] .projects-grid { display: none; } [data-view="index"] .projects-index { display: block; } .index-row { display: grid; grid-template-columns: 64px 1fr 220px 180px 80px; gap: 24px; align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--line); position: relative; } .index-row__title { font-size: var(--fs-h3); letter-spacing: -.025em; line-height: 1.1; transition: transform var(--d-base) var(--ease-out); } .index-row:hover .index-row__title { transform: translateX(10px); } .index-row.is-hidden { display: none; } .index-preview { position: fixed; z-index: 40; width: 300px; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-base) var(--ease-out); left: 0; top: 0; } .index-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .index-preview img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 899px) { .index-row { grid-template-columns: 40px 1fr; } .index-row > :nth-child(n+3) { display: none; } .index-preview { display: none; } } /* ---------- SINGLE PROJECT ---------- */ .p-hero { position: relative; padding-top: var(--header-h); } .p-hero__media { position: relative; height: calc(100svh - var(--header-h) - 120px); min-height: 420px; margin-inline: var(--gutter); border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .p-hero__media img, .p-hero__media video { width: 100%; height: 100%; object-fit: cover; } .p-hero__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-block: 32px 0; align-items: end; } .p-hero__title { grid-column: 1 / span 9; } .p-hero__corner { grid-column: 10 / span 3; justify-self: end; text-align: right; display: grid; gap: 4px; } @media (max-width: 899px) { .p-hero__media { margin-inline: 0; border-radius: 0; height: 70svh; } .p-hero__title, .p-hero__corner { grid-column: 1 / -1; justify-self: start; text-align: left; } } .p-info { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-block: clamp(64px, 9vw, 140px); border-bottom: 1px solid var(--line); } .p-info__lead { grid-column: 1 / span 7; } .p-info__facts { grid-column: 9 / span 4; display: grid; gap: 0; align-content: start; } .fact { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); font-size: .9375rem; } .fact:last-child { border-bottom: 1px solid var(--line); } .fact dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; } .fact dd { margin: 0; color: var(--ink); } @media (max-width: 899px) { .p-info__lead, .p-info__facts { grid-column: 1 / -1; } } /* Editorial body (Gutenberg content) */ .entry { padding-block: clamp(64px, 9vw, 140px); } .entry > * { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .entry > p, .entry > ul, .entry > ol, .entry > h2, .entry > h3, .entry > h4, .entry > blockquote { max-width: calc(760px + 2 * var(--gutter)); } .entry > p, .entry li { color: var(--ink-2); text-wrap: pretty; } .entry > p + p { margin-top: 1em; } .entry > h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.03em; font-weight: 400; margin-top: clamp(64px, 8vw, 128px); margin-bottom: 24px; text-wrap: balance; } .entry > h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; margin-top: 48px; margin-bottom: 16px; } .entry > *:first-child { margin-top: 0; } .entry blockquote { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.01em; margin-block: clamp(64px, 8vw, 128px); color: var(--ink); border: 0; } .entry blockquote p { font: inherit; } .entry blockquote cite { display: block; margin-top: 24px; font-family: var(--f-mono); font-style: normal; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .entry figure { margin-block: clamp(48px, 6vw, 96px); } .entry figure img, .entry figure video { border-radius: var(--r-media); width: 100%; } .entry figcaption, .wp-element-caption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-3); } .entry .alignwide { max-width: var(--max); } .entry .alignfull { max-width: none; padding-inline: 0; } .entry .alignfull img { border-radius: 0; } .entry .wp-block-image:not(.alignwide):not(.alignfull) { max-width: calc(1100px + 2 * var(--gutter)); } /* Classic themes wrap group contents; let children join the parent grid. */ .entry .wp-block-group__inner-container { display: contents; } .t-intro p + p { margin-top: .8em; } /* Chapter: core/group with style "capitolo". Children may sit in an inner container. */ .entry .is-style-capitolo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 0; margin-block: clamp(80px, 10vw, 160px); } .entry .is-style-capitolo > *, .entry .is-style-capitolo > :where(.wp-block-group__inner-container) > * { grid-column: 6 / span 6; margin: 0; } .entry .is-style-capitolo :is(h2, h3) { grid-column: 1 / span 4; grid-row: 1 / span 20; align-self: start; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.03em; font-weight: 400; text-wrap: balance; } .entry .is-style-capitolo p { color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; } .entry .is-style-capitolo p + p { margin-top: 1em; } @media (max-width: 899px) { .entry .is-style-capitolo > *, .entry .is-style-capitolo > :where(.wp-block-group__inner-container) > *, .entry .is-style-capitolo :is(h2, h3) { grid-column: 1 / -1; grid-row: auto; } .entry .is-style-capitolo :is(h2, h3) { margin-bottom: 20px; } } /* Sticky story: core/columns with style "sticky" — first column pinned */ .entry .is-style-sticky { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 72px); align-items: start; margin-block: clamp(80px, 10vw, 160px); } .entry .is-style-sticky > .wp-block-column:first-child { position: sticky; top: calc(var(--header-h) + 32px); } .entry .is-style-sticky > .wp-block-column:last-child { display: grid; gap: clamp(24px, 3vw, 48px); } .entry .is-style-sticky figure { margin: 0; } @media (max-width: 899px) { .entry .is-style-sticky { grid-template-columns: 1fr; } .entry .is-style-sticky > .wp-block-column:first-child { position: static; } } /* Adaptive gallery: core/gallery (all styles). Layout follows orientation, never crops. */ .entry .wp-block-gallery { max-width: var(--max); display: grid !important; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 24px); margin-block: clamp(64px, 8vw, 128px); align-items: start; } .entry .wp-block-gallery figure.wp-block-image { margin: 0 !important; width: auto !important; grid-column: span 6; } .entry .wp-block-gallery figure.wp-block-image img { height: auto !important; width: 100%; object-fit: contain !important; border-radius: var(--r-media); background: var(--media-bg); } .entry .wp-block-gallery figure.is-landscape { grid-column: span 12; } .entry .wp-block-gallery figure.is-wide { grid-column: 1 / -1; } .entry .wp-block-gallery figure.is-portrait { grid-column: span 6; } .entry .wp-block-gallery figure.is-portrait.is-solo { grid-column: 4 / span 6; } .entry .wp-block-gallery figure.is-landscape.is-inset { grid-column: 3 / span 8; } .entry .wp-block-gallery figure.is-portrait.is-offset { margin-top: clamp(48px, 8vw, 140px) !important; } @media (max-width: 639px) { .entry .wp-block-gallery figure.wp-block-image:nth-child(n) { grid-column: 1 / -1; margin-top: 0 !important; } } /* Films inside the story: full width, never taller than the screen, vertical cuts letterboxed. */ .entry .wp-block-video { max-width: calc(1280px + 2 * var(--gutter)); margin-block: clamp(48px, 6vw, 96px); } .entry .wp-block-video video { display: block; width: 100%; max-height: 86svh; background: #0D0D0C; border-radius: var(--r-media); } .entry .wp-block-video + .wp-block-video { margin-top: clamp(24px, 3vw, 48px); } /* Credits */ .credits { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-block: clamp(64px, 8vw, 128px); border-top: 1px solid var(--line); } .credits__title { grid-column: 1 / span 4; } .credits__list { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0; } .credits__list div { display: contents; } .credits__list dt, .credits__list dd { padding-block: 10px; border-top: 1px solid var(--line); margin: 0; } .credits__list dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 13px; } @media (max-width: 899px) { .credits__title, .credits__list { grid-column: 1 / -1; } } /* Next project outro */ .next { display: block; position: relative; padding-block: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--line); } .next__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; } .next__media { height: clamp(260px, 46vw, 640px); margin-inline: var(--gutter); border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); clip-path: inset(0 12% 0 12% round 4px); transition: clip-path 1100ms var(--ease-image); } .next:hover .next__media { clip-path: inset(0 0 0 0 round 4px); } .next__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1400ms var(--ease-editorial); } .next:hover .next__media img { transform: scale(1); } @supports (animation-timeline: view()) { .js .next__media { animation: next-open linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; } @keyframes next-open { from { clip-path: inset(0 18% 0 18% round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } } } /* ---------- FRAMES ---------- */ .frames-grid { columns: 4 260px; column-gap: clamp(12px, 1.6vw, 24px); } .frame-tile { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 24px); display: block; width: 100%; text-align: left; } .frame-tile__media { border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .frame-tile__media img { width: 100%; height: auto; transition: transform 1100ms var(--ease-editorial), opacity var(--d-base); } .frame-tile:hover img { transform: scale(1.03); } .frame-tile__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; opacity: 0; transition: opacity var(--d-fast); } .frame-tile:hover .frame-tile__cap, .frame-tile:focus-visible .frame-tile__cap { opacity: 1; } .frame-tile.is-hidden { display: none; } @media (hover: none) { .frame-tile__cap { opacity: 1; } } .lightbox { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); } .lightbox::backdrop { background: transparent; } .lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; } .lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); } .lightbox__stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; } .lightbox__stage img { max-height: calc(100svh - 160px); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--r-media); } .lightbox__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--gutter) 24px; } .lightbox__nav { display: flex; gap: 8px; } .lightbox__nav .btn { width: 44px; padding: 0; justify-content: center; } /* ---------- LAB ---------- */ .lab-list { border-top: 1px solid var(--line); } .lab-row { display: grid; grid-template-columns: 64px 160px 1fr 140px; gap: 24px; align-items: baseline; padding-block: clamp(20px, 2.4vw, 36px); border-bottom: 1px solid var(--line); } .lab-row__title { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.025em; transition: transform var(--d-base) var(--ease-out); } .lab-row:hover .lab-row__title { transform: translateX(10px); } .lab-row__date { text-align: right; } @media (max-width: 767px) { .lab-row { grid-template-columns: 1fr; gap: 8px; } .lab-row__date { text-align: left; } } .article-hero__media { margin-top: clamp(40px, 5vw, 72px); aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .article-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* ---------- ABOUT ---------- */ .about-hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; padding-top: calc(var(--header-h) + clamp(64px, 10vw, 160px)); } .about-hero__title { grid-column: 1 / span 8; } .about-hero__portrait { grid-column: 10 / span 3; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; } .about-bio { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .about-bio__lead { grid-column: 1 / span 6; } .about-bio__text { grid-column: 8 / span 5; } .compass { counter-reset: q; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .compass li { list-style: none; padding-top: 24px; border-top: 1px solid var(--ink); } .compass li::before { counter-increment: q; content: "0" counter(q); display: block; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--ink-3); margin-bottom: 40px; } .compass em, .disciplines em { font-family: var(--f-serif); font-style: italic; font-size: 1.08em; } .compass p { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.02em; } .disciplines { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .disciplines__item { grid-column: span 4; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; } @media (max-width: 899px) { .about-hero__title, .about-bio__lead, .about-bio__text { grid-column: 1 / -1; } .about-hero__portrait { grid-column: 1 / span 4; grid-row: 1; max-width: 240px; } .compass { grid-template-columns: 1fr; } .disciplines__item { grid-column: 1 / -1; } } /* ---------- CONTACT ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .contact-grid__info { grid-column: 1 / span 4; display: grid; gap: 32px; align-content: start; } .contact-grid__form { grid-column: 6 / span 7; } .contact-line { display: grid; gap: 6px; } .contact-line a { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.15; } @media (max-width: 899px) { .contact-grid__info, .contact-grid__form { grid-column: 1 / -1; } } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; } .form .field { display: grid; gap: 8px; } .form .field--full { grid-column: 1 / -1; } .form label { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .form input, .form select, .form textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0 12px; min-height: 44px; transition: border-color var(--d-fast); } .form textarea { min-height: 140px; resize: vertical; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); } .form .help { font-size: var(--fs-small); color: var(--ink-3); } .form .check { display: flex; gap: 12px; align-items: start; font-size: var(--fs-small); color: var(--ink-2); text-transform: none; letter-spacing: 0; font-family: var(--f-sans); } .form .check input { min-height: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); } .form .hp { position: absolute; left: -9999px; } .form-notice { grid-column: 1 / -1; padding: 16px 20px; border-radius: var(--r-media); background: var(--bg-2); } .form-notice--ok { display: flex; align-items: center; gap: 14px; } .form-notice--error { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--ink); } @media (max-width: 639px) { .form { grid-template-columns: 1fr; } } /* ---------- 404 ---------- */ .notfound { min-height: 80svh; display: grid; align-content: center; gap: 32px; padding-top: var(--header-h); } /* ---------- CURSOR ---------- */ .cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; opacity: 0; transition: width var(--d-base) var(--ease-out), height var(--d-base) var(--ease-out), margin var(--d-base) var(--ease-out), opacity var(--d-fast), background-color var(--d-fast); } .cursor span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity var(--d-fast); white-space: nowrap; } .cursor.is-visible { opacity: 1; } .cursor.has-label { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .cursor.has-label span { opacity: 1; } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* ---------- REVEALS (only when JS is on) ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); transition-delay: var(--delay, 0ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal="media"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-image); } .js [data-reveal="media"] img, .js [data-reveal="media"] video { transform: scale(1.08); transition: transform 1600ms var(--ease-editorial); } .js [data-reveal="media"].is-in { clip-path: inset(0 0 0 0); } .js [data-reveal="media"].is-in img, .js [data-reveal="media"].is-in video { transform: none; } .js [data-split] .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .js [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1000ms var(--ease-editorial); transition-delay: calc(var(--i) * 40ms + var(--extra, 0ms)); } .js [data-split] em .w > span { --extra: 120ms; } .js [data-split].is-in .w > span { transform: none; } /* Intro: hero media opens once per session */ .js .hero__media { clip-path: inset(6% 6% 6% 6% round 4px); transition: clip-path var(--d-cine) var(--ease-image); } .js .is-loaded .hero__media, .js.intro-seen .hero__media { clip-path: inset(0 0 0 0 round 4px); } /* ---------- VIEW TRANSITIONS (cross-document) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } ::view-transition-old(root) { animation-name: vt-out; } ::view-transition-new(root) { animation-name: vt-in; } @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } } ::view-transition-group(project-media) { animation-duration: 700ms; animation-timing-function: cubic-bezier(.76, 0, .24, 1); } ::view-transition-old(project-media), ::view-transition-new(project-media) { height: 100%; object-fit: cover; } ::view-transition-group(site-header) { animation: none; } .site-header { view-transition-name: site-header; } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } @view-transition { navigation: none; } .js [data-reveal], .js [data-reveal="media"], .js [data-split] .w > span, .js [data-reveal="media"] img, .js [data-reveal="media"] video { opacity: 1 !important; transform: none !important; clip-path: none !important; } .js .hero__media { clip-path: none; } .clients__track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gutter); row-gap: 8px; } .clients__track span[aria-hidden] { display: none; } .js .rail__item .card, .js .matters__item > span:nth-child(2), .js .cta, .js .next__media { animation: none !important; opacity: 1; filter: none; clip-path: none; transform: none; } .cursor { display: none; } } /* ---------- CAREER ---------- */ .btn--light { color: #F6F5F1; border-color: rgba(246,245,241,.45); } .btn--light:hover { border-color: #F6F5F1; } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--accent:hover { background: #F6F5F1; border-color: #F6F5F1; color: #141413; } .hero--career .hero__media { inset: var(--header-h) 0 0; border-radius: 0; } .hero--career .hero__media::after { background: linear-gradient(90deg, rgba(10,10,9,.72) 0%, rgba(10,10,9,.38) 42%, rgba(10,10,9,0) 70%), linear-gradient(0deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 40%); } .hero--career .hero__bar .t-micro, .hero--career .scroll-cue { color: rgba(246,245,241,.78); } .hero--career .scroll-cue i { background: rgba(246,245,241,.3); } .hero--career .scroll-cue i::after { background: #F6F5F1; } .career-hero { max-width: 1100px; padding-bottom: clamp(64px, 12vh, 140px); } .career-hero__kicker { color: rgba(246,245,241,.8); } .career-hero__title { margin-top: 20px; font-size: clamp(2.6rem, 7vw, 7rem); line-height: .95; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; } .career-hero__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; } .career-hero__sub { margin-top: 24px; max-width: 46ch; font-size: var(--fs-intro); line-height: 1.35; color: rgba(246,245,241,.9); } .career-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .career-profile__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; } .career-profile__media { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .career-profile__media img { width: 100%; height: 100%; object-fit: cover; } .career-profile__text { grid-column: 7 / span 6; display: grid; gap: 32px; } .career-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid var(--line); padding-top: 20px; color: var(--ink-2); } .career-facts span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; } .career-journey > .wrap > .label { margin-bottom: clamp(48px, 6vw, 96px); } .career-primary { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 24px; padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--ink); } .career-primary__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 16px; } .career-primary__name { font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.045em; font-weight: 500; } .career-primary__role { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.15; color: var(--ink-2); } .career-primary__media { grid-column: 6 / span 7; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); } .career-primary__media img, .career-primary__media video { width: 100%; height: 100%; object-fit: cover; } .career-primary__body { grid-column: 6 / span 6; display: grid; gap: 20px; justify-items: start; } .career-primary.is-flip .career-primary__media { grid-column: 6 / span 7; } .career-takeaway { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.8rem); line-height: 1.2; color: var(--ink); padding-left: 20px; border-left: 2px solid var(--accent); max-width: 40ch; } .career-clients { max-width: 60ch; } .career-projects { grid-column: 1 / -1; display: grid; gap: 20px; margin-top: clamp(24px, 3vw, 48px); } .career-projects__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; align-items: start; } .career-projects__grid .card:first-child .card__media { aspect-ratio: 4 / 5; } .career-rows { border-top: 1px solid var(--ink); } .career-row { border-bottom: 1px solid var(--line); } .career-row summary { list-style: none; display: grid; grid-template-columns: 2fr 4fr 5fr 40px; gap: 24px; align-items: baseline; padding-block: 28px; cursor: pointer; } .career-row summary::-webkit-details-marker { display: none; } .career-row__name { font-size: var(--fs-h3); letter-spacing: -.025em; line-height: 1.1; } .career-row__role { color: var(--ink-2); } .career-row__toggle { justify-self: end; font-size: 1.5rem; line-height: 1; transition: transform var(--d-fast) var(--ease-out); } .career-row[open] .career-row__toggle { transform: rotate(45deg); color: var(--accent); } .career-row summary:hover .career-row__name { color: var(--accent); } .career-row__body { display: grid; gap: 14px; padding: 0 0 32px; margin-left: calc((100% - 72px) * 2 / 11 + 24px); max-width: 62ch; color: var(--ink-2); } .career-now { background: var(--bg-2); } .career-now__title { margin-top: 40px; max-width: 18ch; } .career-now__text { margin-top: 24px; max-width: 44ch; color: var(--ink-2); } .career-index { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: clamp(56px, 7vw, 112px); } .career-index__list { grid-column: 1 / span 5; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .career-index__item { width: 100%; display: flex; gap: 20px; align-items: baseline; text-align: left; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; font: inherit; } .career-index__name { font-size: clamp(1.6rem, 3vw, 3rem); letter-spacing: -.035em; line-height: 1; transition: color var(--d-fast), transform var(--d-base) var(--ease-out); } .career-index__item:hover .career-index__name { color: var(--ink-2); } .career-index__item.is-active .career-index__name { color: var(--ink); transform: translateX(12px); } .career-index__item.is-active .t-micro { color: var(--accent); } .career-index__panels { grid-column: 7 / span 6; } .career-index__panel[hidden] { display: none; } .career-index__panel { display: grid; gap: 28px; animation: panel-in var(--d-base) var(--ease-out); } .career-index__projects { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; } @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .career-kit__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .career-kit__grid > :first-child { grid-column: 1 / span 6; } .career-kit__grid > :last-child { grid-column: 8 / span 5; padding-top: 6px; } .career-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); } .career-list li { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--line); } .career-list strong { font-weight: 500; } .career-list--big li { font-size: clamp(1.4rem, 2.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; padding-block: 14px; } .career-tools li { grid-template-columns: 1fr 1.2fr; align-items: baseline; gap: 16px; } .career-tools__name { display: inline-flex; align-items: center; gap: 10px; } .career-tools__icon { width: 20px; height: 20px; object-fit: contain; } .career-more summary { list-style: none; cursor: pointer; margin-top: 20px; display: inline-block; color: var(--ink-2); } .career-more summary::-webkit-details-marker { display: none; } .career-more .career-list { margin-top: 16px; } .career-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; border-top: 1px solid var(--ink); padding-top: 48px; } .career-info .career-list { margin-top: 24px; } .career-cv { background: #141413; color: #F0EEE8; padding-block: var(--section); --ink: #F0EEE8; --ink-2: #B9B7B0; --ink-3: #85847E; --line: rgba(240,238,232,.16); } .career-cv__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; } .career-cv__grid > div { grid-column: 1 / span 7; } .career-cv__title { max-width: 13ch; margin-bottom: 32px; } .career-cv .t-intro { color: var(--ink-2); max-width: 40ch; } .career-cv .cta__row { justify-content: start; } .career-cv .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .career-cv .btn--solid:hover { background: #F0EEE8; border-color: #F0EEE8; color: #141413; } .career-cv__sheet { grid-column: 9 / span 4; margin: 0; perspective: 1200px; } .career-cv__paper { display: grid; grid-template-columns: 38% 1fr; gap: 8%; aspect-ratio: 210 / 297; padding: 9%; background: #F6F5F1; border-radius: 2px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform: rotate(-4deg); transition: transform var(--d-slow) var(--ease-out); } .career-cv__sheet:hover .career-cv__paper { transform: rotate(0deg) translateY(-6px); } .career-cv__paper img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .career-cv__lines { display: grid; align-content: start; gap: 10px; color: #141413; font-size: .8rem; } .career-cv__lines i { display: block; height: 4px; background: #DEDCD6; } .career-cv__lines i:nth-child(2) { background: var(--accent); width: 40%; } .career-cv__lines i:nth-child(4), .career-cv__lines i:nth-child(7) { width: 70%; } .career-cv__rows { grid-column: 1 / -1; display: grid; gap: 9px; margin-top: 6%; } .career-cv__rows i { display: block; height: 4px; background: #E6E4DE; } .career-cv__rows i:nth-child(4n+1) { background: #C9C7C1; width: 30%; margin-top: 8px; } .about-career { margin-top: 40px; } @media (max-width: 899px) { .career-profile__media { grid-column: 1 / -1; max-width: 420px; } .career-profile__text, .career-primary__head, .career-primary__media, .career-primary__body, .career-primary.is-flip .career-primary__media, .career-index__list, .career-index__panels, .career-kit__grid > :first-child, .career-kit__grid > :last-child, .career-cv__grid > div { grid-column: 1 / -1; } .career-primary__head { position: static; } .career-projects__grid { grid-template-columns: 1fr 1fr; } .career-row summary { grid-template-columns: 1fr 32px; gap: 6px 16px; } .career-row__date, .career-row__name, .career-row__role { grid-column: 1; } .career-row__toggle { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .career-row__body { margin-left: 0; } .career-info { grid-template-columns: 1fr; } .career-cv__sheet { grid-column: 1 / -1; max-width: 260px; } .career-index__projects { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .career-index__panel { animation: none; } .career-cv__paper { transform: none; transition: none; } } /* ---------- CLIENT LOGOS (single-colour masks, tinted by theme) ---------- */ .logo-cell { display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: color var(--d-base) var(--ease-out); } .logo-mark { display: block; width: var(--w, 50%); max-height: 52%; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: transform var(--d-base) var(--ease-out); } .logo-word { font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.1; padding-inline: 12%; } a.logo-cell:hover, a.logo-cell:focus-visible { color: var(--ink); } a.logo-cell:hover .logo-mark { transform: scale(1.04); } .client-wall { background: var(--bg-2); } .client-wall__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); } .client-wall__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .client-wall__grid .logo-cell { aspect-ratio: 3 / 2; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } @media (max-width: 1099px) { .client-wall__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 639px) { .client-wall__grid { grid-template-columns: repeat(2, 1fr); } } .clients--logos { background: var(--bg-2); border-block: 0; border-top: 1px solid var(--line); padding-block: clamp(36px, 4vw, 56px); } .clients--logos .clients__track { gap: 0; animation-duration: 70s; } .clients__set { display: flex; align-items: center; flex-shrink: 0; } .clients--logos .logo-cell { flex: none; width: clamp(160px, 14vw, 230px); height: clamp(64px, 6vw, 88px); } .clients--logos .logo-word { font-size: clamp(.85rem, 1vw, 1.05rem); white-space: nowrap; padding-inline: 0; } .clients--logos .logo-mark { max-height: 70%; } @media (prefers-reduced-motion: reduce) { .clients--logos .clients__track { flex-wrap: nowrap; overflow-x: auto; padding-inline: 0; } .clients__set[aria-hidden] { display: none; } } /* ---------- POLAROID TABLE (Frames + home) ---------- Without JS (or on touch / reduced motion) the prints sit in a loose grid, each slightly rotated. With JS on a fine pointer the table mode scatters them, adds depth parallax, drag and a throw-in entrance. */ .pola { --r: 0deg; --d: .6; --x: 0; --y: 0; --s: 1; position: relative; display: block; background: #FBFAF6; color: #2B2A27; padding: clamp(8px, .9vw, 14px) clamp(8px, .9vw, 14px) 0; border-radius: 6px; box-shadow: 0 1px 1px rgba(20,20,19,.08), 0 14px 28px -12px rgba(20,20,19,.35); transform: rotate(var(--r)); transition: box-shadow var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .pola__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #E6E3DC; border-radius: 3px; } .pola--land .pola__photo { aspect-ratio: 5 / 4; } .pola__photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .pola__cap { display: block; padding: .7em .15em 1.05em; font-family: var(--f-serif); font-style: italic; font-size: clamp(.95rem, 1.05vw, 1.15rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pola.is-hidden, .pola.is-more { display: none; } .pola-table { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: clamp(20px, 3vw, 44px) clamp(14px, 2.4vw, 36px); padding-block: 12px 24px; } .pola-table .pola:nth-child(odd) { margin-top: 18px; } .pola-tools [hidden] { display: none !important; } .pola-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); } .pola-hint { color: var(--ink-3); } /* Polaroid z-indexes stay inside the table, and the bar/heading above always paints over it: a print dragged or rotated upwards never covers the hint, the filters or the section title. */ .pola-table.is-table { isolation: isolate; } .pola-tools, .section-head:has(+ .pola-table) { position: relative; z-index: 1; } /* Table mode (set by JS). */ .pola-table.is-table { display: block; position: relative; padding: 0; } .pola-table.is-table .pola { position: absolute; left: 0; top: 0; width: var(--w, 260px); margin: 0; cursor: grab; touch-action: none; will-change: transform; transform: translate3d(calc(var(--x) * 1px + var(--mx, 0) * var(--d) * 34px), calc(var(--y) * 1px + var(--my, 0) * var(--d) * 26px), 0) rotate(var(--r)) scale(var(--s)); transition: transform 900ms var(--ease-editorial), box-shadow var(--d-base) var(--ease-out), opacity 600ms var(--ease-out); } .pola-table.is-table.is-pointer .pola { transition: transform 260ms var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .pola-table.is-table .pola:hover { --s: 1.045; z-index: 9000 !important; box-shadow: 0 2px 3px rgba(20,20,19,.1), 0 30px 50px -18px rgba(20,20,19,.45); } .pola-table.is-table .pola.is-dragging { --s: 1.08; cursor: grabbing; transition: box-shadow var(--d-base) var(--ease-out); box-shadow: 0 4px 6px rgba(20,20,19,.12), 0 40px 70px -20px rgba(20,20,19,.5); } .pola-table.is-table .pola.is-dropped { animation: pola-drop 520ms var(--ease-out); } @keyframes pola-drop { 0% { --s: 1.08; } 55% { --s: .985; } 100% { --s: 1; } } .pola-table.is-table .pola.is-waiting { opacity: 0; transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) rotate(calc(var(--r) * 4)) scale(1.15); transition: none; } .pola-table.is-table .pola.is-thrown { transition: transform 1100ms var(--ease-editorial) var(--delay, 0ms), opacity 500ms var(--ease-out) var(--delay, 0ms); } @property --s { syntax: ''; inherits: true; initial-value: 1; } /* Home teaser. */ .pola-table--home.is-table { height: clamp(620px, 76vw, 1040px); } .frames-teaser .collage__caption { margin-top: clamp(24px, 3vw, 48px); } @media (max-width: 899px) { /* Touch: a swipeable deck of slightly overlapping prints. */ .pola-table--home { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 24px var(--gutter) 40px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; } .pola-table--home::-webkit-scrollbar { display: none; } .pola-table--home .pola { flex: 0 0 62%; scroll-snap-align: center; margin: 0 -6% 0 0 !important; } .pola-table--home .pola:nth-child(even) { margin-top: 26px !important; } .pola-tools { flex-direction: column; align-items: flex-start; } } :root[data-theme="dark"] .pola { box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 18px 34px -12px rgba(0,0,0,.75); } /* ---------- STACKED PROJECTS (each card slides over the previous one) ---------- */ #projects .projects-stack { display: none; } #projects[data-view="stack"] .projects-stack { display: block; } #projects[data-view="stack"] .projects-grid, #projects[data-view="stack"] .projects-index { display: none; } .projects-stack { --top: calc(var(--header-h) + 16px); padding-bottom: 4vh; } .stack-card { --p: 0; position: sticky; top: var(--top); display: block; height: calc(100svh - var(--header-h) - 40px); min-height: 460px; margin-bottom: 7vh; border-radius: var(--r-card); overflow: hidden; color: #F6F5F1; background: #141413; isolation: isolate; transform: translateY(calc(var(--p) * -18px)) scale(calc(1 - var(--p) * .07)); transform-origin: 50% 0; box-shadow: 0 -20px 50px -30px rgba(0,0,0,.45); } .stack-card:last-child { margin-bottom: 0; } .stack-card__media { position: absolute; inset: 0; z-index: -1; } .stack-card__media img, .stack-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-editorial); } .stack-card__media video { opacity: 0; transition: opacity 800ms var(--ease-out); } .stack-card__media video.is-playing { opacity: 1; } .stack-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.78) 0%, rgba(10,10,9,.2) 45%, rgba(10,10,9,.05) 70%), rgba(10,10,9, calc(var(--p) * .55)); } .stack-card:hover .stack-card__media img, .stack-card:hover .stack-card__media video { transform: scale(1.03); } .stack-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; padding: clamp(24px, 4vw, 64px); max-width: 1100px; } .stack-card__meta { display: flex; gap: 18px; color: rgba(246,245,241,.75); } .stack-card__title { font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: .95; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; } .stack-card__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; } .stack-card__excerpt { max-width: 52ch; font-size: var(--fs-intro); line-height: 1.35; color: rgba(246,245,241,.86); } .stack-card__cta { justify-self: start; display: inline-flex; gap: 10px; align-items: center; margin-top: 8px; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; } .stack-card:hover .stack-card__cta .arrow { transform: translateX(4px); } .stack-card.is-hidden { display: none; } .home-stack .section-head { margin-bottom: clamp(24px, 3vw, 48px); } @media (max-width: 639px) { .stack-card { height: 78svh; min-height: 420px; margin-bottom: 4vh; } .stack-card__excerpt { display: none; } } @media (prefers-reduced-motion: reduce) { .stack-card { transform: none; } } /* ---------- WHAT MATTERS: a polaroid pair per line, following the cursor ---------- */ .matters__item { position: relative; } .matters__pics { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; width: clamp(150px, 15vw, 230px); transform: translate3d(calc(var(--cx, 60vw) - 50%), calc(var(--cy, 0px) - 62%), 0); } .matters__pola { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translate3d(calc(var(--k) * 46%), calc(var(--k) * 24% + 40px), 0) rotate(calc(var(--r) * 3)) scale(.7); transition: opacity 260ms var(--ease-out) calc(var(--k) * 70ms), transform 700ms var(--ease-editorial) calc(var(--k) * 70ms); } .matters__pola .pola__cap { font-size: clamp(1rem, 1.2vw, 1.3rem); } .pola__cap:empty { min-height: 2.6em; } .matters__item.is-active .matters__pola { opacity: 1; transform: translate3d(calc(var(--k) * 46%), calc(var(--k) * 24%), 0) rotate(var(--r)) scale(1); } .matters__item.is-active > span:not(.matters__pics) { color: var(--ink); } .matters__list.has-active .matters__item:not(.is-active) > span:not(.matters__pics) { color: var(--ink-3); transition: color var(--d-base); } @media (hover: none), (max-width: 899px) { .matters__pics { left: auto; right: 0; top: 50%; width: 34vw; max-width: 170px; transform: translateY(-50%); } .matters__pola { transform: translate3d(calc(var(--k) * -38%), calc(var(--k) * 18% + 30px), 0) rotate(calc(var(--r) * 3)) scale(.7); } .matters__item.is-active .matters__pola { transform: translate3d(calc(var(--k) * -38%), calc(var(--k) * 18%), 0) rotate(var(--r)) scale(1); } } @media (prefers-reduced-motion: reduce) { .matters__pola { transition: opacity 200ms; } } .frames-end { border-top: 1px solid var(--line); } .frames-end__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; } .frames-end__quote { grid-column: 1 / span 8; max-width: 18ch; } .frames-end__side { grid-column: 9 / span 4; display: grid; gap: 28px; justify-items: start; } .frames-end__facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; color: var(--ink-3); } .frames-end__facts strong { display: block; font-family: var(--f-sans); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1; margin-bottom: 6px; } .frames-end__links { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 899px) { .frames-end__quote, .frames-end__side { grid-column: 1 / -1; } } /* ---------- LAB: latest three as cards, then the full list ---------- */ .lab-cards { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: clamp(16px, 2vw, 28px); margin-bottom: var(--section); perspective: 1600px; } .lab-card { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; background: #141413; color: #F6F5F1; isolation: isolate; min-height: 300px; } .lab-card--lead { grid-row: span 2; min-height: clamp(520px, 62vh, 760px); } .lab-card__media { position: absolute; inset: 0; z-index: -1; } .lab-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-editorial); } .lab-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.25) 55%, rgba(10,10,9,0) 80%); } .lab-card:hover .lab-card__media img { transform: scale(1.05); } .lab-card__body { position: absolute; inset: auto 0 0 0; display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 40px); } .lab-card__meta { display: flex; gap: 14px; color: rgba(246,245,241,.75); } .lab-card__title { font-size: clamp(1.5rem, 2.3vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; } .lab-card--lead .lab-card__title { font-size: clamp(2rem, 3.8vw, 4rem); } .lab-card__excerpt { max-width: 52ch; color: rgba(246,245,241,.85); } .lab-card__cta { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .lab-card:hover .lab-card__cta .arrow { transform: translateX(4px); } .lab-all__title { margin-bottom: 24px; color: var(--ink-3); } /* Cards deal in from the right, slightly turned, one after the other. */ .js .lab-card { opacity: 0; transform: translate3d(80px, 40px, 0) rotateY(-14deg) rotate(2deg); transition: opacity 700ms var(--ease-out) calc(var(--i) * 140ms), transform 1100ms var(--ease-editorial) calc(var(--i) * 140ms); } .js .lab-cards.is-in .lab-card { opacity: 1; transform: none; } @media (max-width: 899px) { .lab-cards { grid-template-columns: 1fr; } .lab-card--lead { grid-row: auto; min-height: 460px; } } @media (prefers-reduced-motion: reduce) { .js .lab-card { opacity: 1; transform: none; transition: none; } } /* ---------- ABOUT: facts, career teaser, short polaroid table ---------- */ .about-facts { border-block: 1px solid var(--line); } .about-facts__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .about-facts__row strong { display: block; font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; } .about-facts__row span { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .about-career-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); } .about-xp { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-card); background: var(--bg-2); } .about-xp__name { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; font-weight: 500; } .about-xp__role { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h3); color: var(--ink-2); } .pola-table--short.is-table { height: clamp(520px, 52vw, 720px); } @media (max-width: 899px) { .about-facts__row { grid-template-columns: 1fr 1fr; row-gap: 36px; } .about-career-teaser__grid { grid-template-columns: 1fr; } } /* Draggable logo strip (JS drives the movement instead of the CSS marquee). */ .clients--logos.is-js { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .clients--logos.is-js.is-dragging { cursor: grabbing; } .clients--logos.is-js .clients__track { animation: none; will-change: transform; } .clients--logos.is-js .clients__set[aria-hidden] { display: flex; } .clients--logos.is-js .logo-cell img, .clients--logos.is-js .logo-mark { pointer-events: none; } /* Editorial view: equal cards, year headings, cards slide in from their side. */ .projects-grid__year { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: clamp(16px, 3vw, 48px); font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .projects-grid__year:first-child { margin-top: 0; } .projects-grid__year::after { content: ""; flex: 1; height: 1px; background: var(--line); } .projects-grid__year.is-empty { display: none; } .projects-grid > .card .card__media { border-radius: var(--r-media); } .js .projects-grid > .card [data-reveal] { opacity: 1; transform: none; clip-path: none; } .js .projects-grid > .card { opacity: 0; transform: translate3d(calc(var(--from, 0) * 90px), calc((1 - var(--from-abs, 0)) * 50px), 0) rotate(calc(var(--from, 0) * 2deg)); transition: opacity 700ms var(--ease-out) var(--delay, 0ms), transform 1000ms var(--ease-editorial) var(--delay, 0ms); } .js .projects-grid > .card.is-in { opacity: 1; transform: none; } @media (max-width: 899px) { .projects-grid > .card, .projects-grid > .card:nth-child(n) { grid-column: span 6; } } @media (max-width: 539px) { .projects-grid { grid-template-columns: 1fr; } .projects-grid > .card, .projects-grid > .card:nth-child(n) { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { .js .projects-grid > .card { opacity: 1; transform: none; transition: none; } } /* ---------- PROJECT PAGE: chapters player ---------- */ .film { margin-block: clamp(48px, 7vw, 112px); } .film--multi { display: grid; gap: clamp(20px, 2.4vw, 32px); } .film__stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #0D0D0C; } .film__stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0D0D0C; } .film__cover { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: linear-gradient(0deg, rgba(10,10,9,.55), rgba(10,10,9,0) 50%); color: #F6F5F1; cursor: pointer; transition: opacity var(--d-base) var(--ease-out); } .film.is-playing .film__cover { opacity: 0; pointer-events: none; } .film__play { width: clamp(72px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); position: relative; transition: transform var(--d-base) var(--ease-out); } .film__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--on-accent); } .film__cover:hover .film__play { transform: scale(1.08); } .film__now { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 24px); color: rgba(246,245,241,.9); } /* The other videos sit under the stage as a row of cards: clearly "pick one". */ .film__pick { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 4px; border-top: 1px solid var(--line); } .film__pick strong { font-weight: 500; font-size: var(--fs-h3); letter-spacing: -.02em; } .film__pick span { color: var(--ink-3); } .film__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(12px, 1.4vw, 20px); } .film__chapter { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "thumb thumb thumb" "num title dur"; gap: 10px 10px; align-items: baseline; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; } .film__thumb { grid-area: thumb; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: var(--media-bg); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--d-fast), transform var(--d-base) var(--ease-out); } .film__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-editorial), filter var(--d-base); } .film__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(246,245,241,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23141413'/%3E%3C/svg%3E") center / 22px no-repeat; transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast); } .film__num { grid-area: num; color: var(--ink-3); } .film__title { grid-area: title; font-size: 1.02rem; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); } .film__dur { grid-area: dur; color: var(--ink-3); } .film__badge { display: none; position: absolute; left: 10px; top: 10px; z-index: 1; padding: 6px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; } .film__chapter.is-active .film__thumb { outline-color: var(--accent); } .film__chapter.is-active .film__thumb::after { opacity: 0; } .film__chapter.is-active .film__badge { display: block; } .film__chapter.is-active .film__num { color: var(--accent); } .film__chapter:active .film__thumb { transform: scale(.98); } @media (hover: hover) and (pointer: fine) { .film__chapter:hover .film__thumb img { transform: scale(1.05); } .film__chapter:hover .film__thumb::after { transform: scale(1.12); } } @media (max-width: 899px) { .film__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .film__chapter { scroll-snap-align: start; } } /* A chapter inside a project (e.g. a related event): its own heading and player. */ .film-block { padding-top: clamp(48px, 7vw, 112px); margin-top: clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); } .film-block__head { display: grid; gap: 16px; } .film-block__head .t-micro { color: var(--accent); } .film-block__head h2, .film-block__head h3 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; max-width: 18ch; } .film-block__head p:not(.t-micro) { max-width: 60ch; font-size: var(--fs-intro); line-height: 1.4; color: var(--ink-2); } /* ---------- PROJECT PAGE: photo mosaic (rest opens in the viewer) ---------- */ .mosaic { margin-block: clamp(48px, 7vw, 112px); } .mosaic__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 13vw, 210px); gap: clamp(8px, 1vw, 16px); } .mosaic__item { position: relative; display: block; overflow: hidden; border-radius: var(--r-media); background: var(--media-bg); grid-column: span 4; } .mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-editorial), filter var(--d-base); -webkit-user-drag: none; } .mosaic__item:hover img { transform: scale(1.04); } .mosaic__item.is-extra { display: none; } /* Layout by number of tiles. */ .mosaic__grid[data-count="7"] .mosaic__item:nth-child(1) { grid-column: span 7; grid-row: span 3; } .mosaic__grid[data-count="7"] .mosaic__item:nth-child(2) { grid-column: span 5; grid-row: span 2; } .mosaic__grid[data-count="7"] .mosaic__item:nth-child(3) { grid-column: span 5; } .mosaic__grid[data-count="7"] .mosaic__item:nth-child(n+4) { grid-column: span 3; grid-row: span 2; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(1), .mosaic__grid[data-count="5"] .mosaic__item:nth-child(1) { grid-column: span 8; grid-row: span 3; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(2), .mosaic__grid[data-count="6"] .mosaic__item:nth-child(3), .mosaic__grid[data-count="5"] .mosaic__item:nth-child(2) { grid-column: span 4; grid-row: span 3; } .mosaic__grid[data-count="5"] .mosaic__item:nth-child(n+3) { grid-column: span 4; grid-row: span 2; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(2), .mosaic__grid[data-count="6"] .mosaic__item:nth-child(3) { grid-row: span 3; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(3) { grid-column: 9 / span 4; grid-row: 4 / span 2; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(2) { grid-column: 9 / span 4; grid-row: 1 / span 3; } .mosaic__grid[data-count="6"] .mosaic__item:nth-child(n+4) { grid-column: span 4; grid-row: span 2; } .mosaic__grid[data-count="4"] .mosaic__item, .mosaic__grid[data-count="3"] .mosaic__item { grid-row: span 2; } .mosaic__grid[data-count="4"] .mosaic__item { grid-column: span 3; } .mosaic__grid[data-count="2"] .mosaic__item { grid-column: span 6; grid-row: span 3; } .mosaic__grid[data-count="1"] .mosaic__item { grid-column: 1 / -1; grid-row: span 4; } .mosaic--strip .mosaic__grid { grid-auto-rows: clamp(110px, 11vw, 170px); } .mosaic__more { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(13,13,12,.55); color: #F6F5F1; backdrop-filter: blur(2px); transition: background var(--d-base); } .mosaic__more strong { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; } .mosaic__item:hover .mosaic__more { background: rgba(13,13,12,.4); } @media (max-width: 899px) { .mosaic__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; } .mosaic__grid .mosaic__item:nth-child(n) { grid-column: span 1; grid-row: span 1; } .mosaic__grid .mosaic__item:nth-child(1) { grid-column: 1 / -1; grid-row: span 1; } } /* ---------- Media protection (deterrent only: screenshots can't be blocked by a website) ---------- */ img, video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } .mosaic, .pola-table, .film, .lightbox__stage, .card__media, .stack-card__media, .p-hero__media { -webkit-user-select: none; user-select: none; } /* ---------- RESERVED AREA: "Camera oscura" ---------- */ .darkroom { --safe: #E5341B; position: relative; min-height: 100svh; margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 8vh) 0 10vh; display: grid; align-items: center; overflow: hidden; isolation: isolate; background: #0B0605; color: #F3E7E2; --ink: #F3E7E2; --ink-2: #CDB8B1; --ink-3: #8F7871; --line: rgba(243,231,226,.16); } .darkroom__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 50% 0%, rgba(229,52,27,.38), rgba(229,52,27,0) 70%), radial-gradient(40% 40% at 85% 90%, rgba(229,52,27,.16), transparent 70%); animation: safelight 6s ease-in-out infinite alternate; } @keyframes safelight { from { opacity: .75; } to { opacity: 1; } } .darkroom__negs { position: absolute; inset: -10%; z-index: -2; perspective: 1200px; /* Negatives fade out in the middle, so they never sit behind the title, text or code field. */ -webkit-mask: radial-gradient(ellipse 40% 50% at 50% 50%, transparent 70%, #000 100%); mask: radial-gradient(ellipse 40% 50% at 50% 50%, transparent 70%, #000 100%); } @media (max-width: 899px) { .darkroom__negs { -webkit-mask: radial-gradient(ellipse 60% 40% at 50% 50%, transparent 75%, #000 100%); mask: radial-gradient(ellipse 60% 40% at 50% 50%, transparent 75%, #000 100%); } } .darkroom__neg { position: absolute; width: clamp(120px, 14vw, 230px); aspect-ratio: 4 / 5; padding: 6px 6px 22px; background: #1A0F0C; border-radius: 4px; opacity: .55; left: calc(mod(var(--i) * 37, 92) * 1%); top: calc(mod(var(--i) * 53, 86) * 1%); transform: rotate(calc((mod(var(--i) * 13, 30) - 15) * 1deg)); animation: neg-float calc(18s + var(--i) * 1.3s) ease-in-out infinite alternate; filter: blur(calc(mod(var(--i), 3) * 1px)); } .darkroom__neg img { width: 100%; height: 100%; object-fit: cover; filter: invert(1) grayscale(1) sepia(1) saturate(4) hue-rotate(-38deg) contrast(1.1); opacity: .8; transition: filter 1.6s var(--ease-out); } @keyframes neg-float { to { translate: calc((mod(var(--i), 2) * 2 - 1) * 3vw) -4vh; rotate: calc((mod(var(--i), 2) * 2 - 1) * 4deg); } } .darkroom__inner { position: relative; display: grid; gap: clamp(20px, 2.4vw, 32px); justify-items: center; text-align: center; } .darkroom__kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); } .darkroom__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 12px var(--safe); animation: rec 1.4s steps(2) infinite; } @keyframes rec { 50% { opacity: .2; } } .darkroom__title { max-width: 16ch; font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: .96; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; } .darkroom__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #FF8A73; } .darkroom__text { max-width: 44ch; font-size: var(--fs-intro); line-height: 1.35; color: var(--ink-2); } .darkroom__strip { position: relative; width: min(640px, 100%); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; align-items: center; column-gap: 14px; padding: 6px 18px; margin-top: 12px; background: #120A08; border-radius: 6px; box-shadow: 0 0 0 1px rgba(243,231,226,.08), 0 30px 80px -30px rgba(229,52,27,.55); } .darkroom__holes { grid-column: 1 / -1; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2A1814 10px 22px); -webkit-mask: linear-gradient(#000 0 0) center / 100% 8px no-repeat; mask: linear-gradient(#000 0 0) center / 100% 8px no-repeat; } .darkroom__label { display: grid; gap: 4px; text-align: left; padding: 10px 0; } .darkroom__label .t-micro { color: #FF8A73; letter-spacing: .14em; } .darkroom__label input { width: 100%; border: 0; background: none; color: #F3E7E2; font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--f-mono); letter-spacing: .2em; padding: 4px 0; } .darkroom__label input::placeholder { color: rgba(243,231,226,.25); } .darkroom__label input:focus { outline: none; } .darkroom__strip:focus-within { box-shadow: 0 0 0 1px rgba(229,52,27,.7), 0 30px 90px -20px rgba(229,52,27,.75); } .darkroom__go { border: 0; border-radius: 999px; padding: 14px 22px; background: var(--safe); color: #120A08; font: 500 var(--fs-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform var(--d-fast), box-shadow var(--d-base); } .darkroom__go:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(229,52,27,.7); } .darkroom__error { min-height: 1.2em; color: #FF8A73; font-size: var(--fs-small); } .darkroom.is-wrong .darkroom__strip { animation: shake 420ms var(--ease-out); } @keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .darkroom__help { color: var(--ink-3); } .darkroom__help a { color: var(--ink); } body:has(.darkroom) .site-header { background: transparent; color: #F3E7E2; border-color: transparent; } body:has(.darkroom) .site-header a, body:has(.darkroom) .site-header button { color: #F3E7E2; } body:has(.darkroom) .site-footer { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .darkroom__neg, .darkroom__light, .darkroom__dot { animation: none; } } /* After the right code: film leader countdown, then the page "develops". */ .leader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #0B0605; color: #F3E7E2; animation: leader-out 400ms ease 2.5s forwards; pointer-events: none; } .leader__ring { position: absolute; width: min(60vmin, 520px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(243,231,226,.3); background: conic-gradient(rgba(229,52,27,.55) var(--sweep, 0deg), transparent 0); animation: sweep .8s linear 3; } @property --sweep { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes sweep { to { --sweep: 360deg; } } .leader__n::before { content: "3"; font: 500 clamp(6rem, 20vmin, 14rem)/1 var(--f-sans); letter-spacing: -.06em; animation: count 2.4s steps(1) forwards; } @keyframes count { 0% { content: "3"; } 33% { content: "2"; } 66% { content: "1"; } } @keyframes leader-out { to { opacity: 0; visibility: hidden; } } .page-hero.is-developing ~ section .stack-card__media img { animation: develop 2.4s var(--ease-out) 2.5s both; } @keyframes develop { from { filter: invert(1) sepia(1) saturate(3) hue-rotate(-40deg); } to { filter: none; } } @media (prefers-reduced-motion: reduce) { .leader { display: none; } } /* ---------- PROGETTI MIEI (Humera, Arcox, Cifra) ---------- Same structure as the "Un progetto ideato da HUMERA" banner: label, logo, text, motto, link. Humera spans the row in ink; the two products sit below. */ .mine { scroll-margin-top: 64px; } .mine__intro { max-width: 46ch; color: var(--ink-2); } .mine__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .mine-box { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(20px, 2.4vw, 32px); padding: clamp(28px, 3.6vw, 56px); border-radius: var(--r-card); background: var(--bg-2); color: var(--ink); isolation: isolate; overflow: hidden; } .mine-box::after { content: ""; position: absolute; left: clamp(28px, 3.6vw, 56px); right: clamp(28px, 3.6vw, 56px); bottom: clamp(20px, 2.6vw, 40px); height: 1px; background: currentColor; opacity: .18; transform: scaleX(.12); transform-origin: left; transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out); } .mine-box:hover::after, .mine-box:focus-visible::after { transform: scaleX(1); opacity: .4; } .mine-box__label { color: var(--accent); } .mine-box__logo { display: block; height: clamp(30px, 3.4vw, 44px); color: var(--ink); transition: transform var(--d-base) var(--ease-out); transform-origin: left center; } .mine-box__logo svg { height: 100%; width: auto; display: block; } .mine-box:hover .mine-box__logo { transform: scale(1.04); } .mine-box__dot { fill: var(--accent); } .mine-box__word { display: inline-block; font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: .8; letter-spacing: -.05em; } .mine-box__body { display: grid; align-content: start; gap: 12px; } .mine-box__kind { font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; } .mine-box__text { color: var(--ink-2); max-width: 52ch; } .mine-box__motto { font-weight: 500; letter-spacing: -.01em; } .mine-box__motto em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--accent); } .mine-box__cta { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 14px; transition: color var(--d-fast) var(--ease-out); } .mine-box__cta .arrow { display: inline-block; transition: transform var(--d-fast) var(--ease-out); } .mine-box:hover .mine-box__cta { color: var(--ink); } .mine-box:hover .mine-box__cta .arrow { transform: translate(3px, -3px); } .mine-box--humera { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(32px, 6vw, 120px); min-height: clamp(280px, 28vw, 400px); background: #141413; color: #F6F5F1; --ink: #F6F5F1; --ink-2: rgba(246,245,241,.78); --ink-3: rgba(246,245,241,.6); } .mine-box--humera .mine-box__label { grid-column: 1; } .mine-box--humera .mine-box__logo { grid-column: 1; grid-row: 2; align-self: end; height: clamp(40px, 5vw, 72px); } .mine-box--humera .mine-box__body { grid-column: 2; grid-row: 1 / 3; align-content: end; } .mine-box--humera .mine-box__cta { grid-column: 1 / -1; } @media (max-width: 899px) { .mine__grid { grid-template-columns: 1fr; } .mine-box--humera { grid-template-columns: 1fr; grid-template-rows: auto; } .mine-box--humera .mine-box__label, .mine-box--humera .mine-box__logo, .mine-box--humera .mine-box__body { grid-column: 1; grid-row: auto; } } /* Home strip: one row per project, logo + one line + arrow. */ .mine-strip__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); } .mine-strip__head .t-h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.08em; } .mine-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); } .mine-strip__list li + li { border-left: 1px solid var(--line); } .mine-strip__item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 14px 16px; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 32px); color: var(--ink); } .mine-strip__list li:first-child .mine-strip__item { padding-left: 0; } .mine-strip__logo { display: block; height: clamp(22px, 2.2vw, 30px); transition: transform var(--d-base) var(--ease-out); transform-origin: left center; } .mine-strip__logo svg { height: 100%; width: auto; display: block; } .mine-strip__logo .mine-box__word { font-size: clamp(1.45rem, 2.3vw, 2rem); } .mine-strip__kind { grid-column: 1; font-size: var(--fs-small); color: var(--ink-2); } .mine-strip__item .arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--ink-3); transition: transform var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); } .mine-strip__item:hover .mine-strip__logo { transform: scale(1.04); } .mine-strip__item:hover .arrow { color: var(--accent); transform: translate(3px, -3px); } @media (max-width: 899px) { .mine-strip__list { grid-template-columns: 1fr; } .mine-strip__list li + li { border-left: 0; border-top: 1px solid var(--line); } .mine-strip__item { padding-inline: 0; } } /* ---------- BIG WORDS: one phrase, huge, pushed sideways by the scroll ---------- */ .bigword { overflow: clip; padding-block: clamp(8px, 2vw, 32px) clamp(40px, 6vw, 96px); pointer-events: none; user-select: none; } .bigword__track { display: flex; align-items: center; width: max-content; white-space: nowrap; translate: -6% 0; font-size: clamp(4.5rem, 16vw, 17rem); line-height: .86; letter-spacing: -.06em; font-weight: 500; color: var(--ink); } .bigword__item em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; font-size: 1.08em; } .bigword__dot { flex: none; width: .14em; height: .14em; margin-inline: .32em; border-radius: 50%; background: var(--accent); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .bigword { view-timeline: --bigword block; } .bigword__track { animation: bigword-left linear both; animation-timeline: --bigword; animation-range: cover 0% cover 100%; } .bigword--right .bigword__track { animation-name: bigword-right; } } @keyframes bigword-left { from { translate: 2% 0; } to { translate: -30% 0; } } @keyframes bigword-right { from { translate: -34% 0; } to { translate: -2% 0; } } } /* ---------- WEIGHT: photos follow the pointer a little late, like paper (JS sets the vars) ---------- */ .has-weight { translate: var(--wx, 0px) var(--wy, 0px); rotate: var(--wr, 0deg); } .stack-card__media.has-weight { scale: 1.06; } /* ---------- SCROLL-LINKED MOTION (compositor only, no JS) ---------- Media drift inside its frame, the project hero sinks as you leave it, a reading line on long pages, words that light up one by one. Individual `translate`/`scale` properties so hover/reveal transforms keep working. */ .read-progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; display: none; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .js :is(.card__media, .stack-card__media, .mosaic__item, .next__media) { view-timeline: --media block; } .js :is(.card__media, .stack-card__media, .mosaic__item, .next__media) > :is(img, video) { scale: 1.12; animation: media-drift linear both; animation-timeline: --media; animation-range: cover 0% cover 100%; } .js .p-hero__media > :is(img, video) { transform-origin: 50% 0; animation: hero-sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; } .read-progress { display: block; animation: read-line linear both; animation-timeline: scroll(root); } .js [data-scrub] { view-timeline: --scrub block; } .js [data-scrub] .sw { animation: scrub-word linear both; animation-timeline: --scrub; animation-range: cover calc(14% + var(--p) * 28%) cover calc(22% + var(--p) * 28%); } } @keyframes media-drift { from { translate: 0 -5%; } to { translate: 0 5%; } } @keyframes hero-sink { to { translate: 0 16%; scale: 1.08; } } @keyframes read-line { to { transform: scaleX(1); } } @keyframes scrub-word { from { opacity: .14; } to { opacity: 1; } } } /* Contact: sent confirmation (rare moment, allowed a small flourish). */ .tick { flex: none; width: 34px; height: 34px; color: var(--accent); } .tick circle, .tick path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: no-preference) { .form-notice--ok { animation: notice-in 520ms var(--ease-out) 250ms both; } .tick { animation: tick-pop 560ms cubic-bezier(.34, 1.4, .64, 1) 350ms both; } .tick circle { stroke-dasharray: 64; stroke-dashoffset: 64; animation: tick-draw 600ms var(--ease-out) 400ms forwards; } .tick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: tick-draw 380ms var(--ease-out) 820ms forwards; } } @keyframes notice-in { from { opacity: 0; transform: translateY(10px); } } @keyframes tick-pop { from { transform: scale(.6); } } @keyframes tick-draw { to { stroke-dashoffset: 0; } } #form { scroll-margin-top: calc(var(--header-h) + 24px); } /* ---------- RESERVED ARCHIVE ("sito segreto" after the darkroom) ---------- */ .vault { --safe: #E5341B; --neg: invert(1) grayscale(1) sepia(1) saturate(4) hue-rotate(-38deg) contrast(1.1); --dev: .3s; position: relative; isolation: isolate; overflow: clip; margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h); background: #0B0605; color: #F3E7E2; --ink: #F3E7E2; --ink-2: #CDB8B1; --ink-3: #8F7871; --line: rgba(243,231,226,.14); --bg: #0B0605; --bg-2: #160C0A; } .vault.is-developing { --dev: 2.7s; } .vault__light { position: absolute; inset: 0 0 auto; height: 120svh; z-index: -1; pointer-events: none; background: radial-gradient(55% 40% at 50% 0%, rgba(229,52,27,.34), transparent 70%), radial-gradient(35% 30% at 90% 60%, rgba(229,52,27,.12), transparent 70%); animation: safelight 6s ease-in-out infinite alternate; } .vault__grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: screen; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 900ms steps(6) infinite; } @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } .vault__bar { position: sticky; top: var(--header-h); z-index: 5; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px var(--gutter); border-block: 1px solid var(--line); background: rgba(11,6,5,.82); backdrop-filter: blur(8px); color: var(--ink-2); letter-spacing: .12em; } .vault__rec { display: inline-flex; align-items: center; gap: 10px; color: #FF8A73; } .vault__ok { color: #8FD18B; } .vault__ok::before { content: "● "; } .vault__hero { position: relative; z-index: 2; display: grid; gap: clamp(20px, 2.4vw, 32px); padding-block: clamp(80px, 14vh, 160px) clamp(60px, 10vh, 120px); } .vault__kicker { color: #FF8A73; letter-spacing: .14em; } .vault__title { max-width: 14ch; font-size: clamp(3rem, 8vw, 8.4rem); line-height: .92; letter-spacing: -.05em; font-weight: 500; } .vault__title em, .vault__note em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #FF8A73; } .vault__text { max-width: 52ch; font-size: var(--fs-intro); line-height: 1.4; color: var(--ink-2); } .vault__stats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 72px); } .vault__stats li { display: grid; gap: 6px; } .vault__stats strong { font: 500 clamp(2.4rem, 4.6vw, 4.4rem)/1 var(--f-mono); letter-spacing: -.04em; } .vault__stats span { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .vault__rolls { position: relative; z-index: 2; display: grid; gap: clamp(96px, 16vh, 200px); padding-bottom: clamp(96px, 16vh, 200px); } .roll { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; } .roll:nth-child(even) .roll__frame { order: 2; } .roll__strip { order: 3; } .roll__frame { position: relative; display: grid; gap: 6px; padding: 10px 14px; background: #150B09; border-radius: 6px; box-shadow: 0 50px 120px -40px rgba(229,52,27,.45); transform: rotate(-.6deg); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .roll:nth-child(even) .roll__frame { transform: rotate(.6deg); } .roll__frame:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 60px 140px -40px rgba(229,52,27,.7); } .roll__holes { height: 12px; background: repeating-linear-gradient(90deg, transparent 0 9px, #2E1A16 9px 21px); -webkit-mask: linear-gradient(#000 0 0) center / 100% 7px no-repeat; mask: linear-gradient(#000 0 0) center / 100% 7px no-repeat; } .roll__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #0B0605; } .roll__img img { width: 100%; height: 100%; object-fit: cover; filter: var(--neg); transition: filter 2.2s var(--ease-out) var(--dev), transform 1400ms var(--ease-editorial); } .roll.is-in .roll__img img { filter: none; } .roll__frame:hover .roll__img img { transform: scale(1.03); } .roll__edge { display: flex; justify-content: space-between; color: #E8A33B; opacity: .75; letter-spacing: .18em; font-size: .62rem; } .roll__stamp { position: absolute; right: clamp(16px, 4%, 40px); top: clamp(24px, 10%, 56px); padding: 8px 14px 7px; border: 2px solid #FF5A3D; border-radius: 4px; color: #FF5A3D; font: 600 clamp(.8rem, 1.2vw, 1rem)/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; transform: rotate(-9deg); opacity: 0; mix-blend-mode: screen; } .roll.is-in .roll__stamp { animation: stamp 420ms cubic-bezier(.34, 1.5, .64, 1) calc(var(--dev) + 1.4s) both; } @keyframes stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.8); } to { opacity: .9; transform: rotate(-9deg) scale(1); } } .roll__file { display: grid; gap: 18px; align-content: center; } .roll__num { color: #FF8A73; letter-spacing: .14em; } .roll__title { font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; font-weight: 500; } .roll__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #FF8A73; } .roll__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 28px; margin: 0; padding-block: 14px; border-block: 1px solid var(--line); } .roll__meta dt { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .roll__meta dd { margin: 6px 0 0; color: var(--ink); } .roll__excerpt { color: var(--ink-2); line-height: 1.5; max-width: 46ch; } .roll__cta { justify-self: start; display: inline-flex; gap: 10px; align-items: center; font: 500 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #FF8A73; padding-bottom: 6px; border-bottom: 1px solid currentColor; } .roll__cta .arrow { transition: transform var(--d-fast) var(--ease-out); } .roll__cta:hover .arrow { transform: translateX(4px); } .roll__strip { grid-column: 1 / -1; list-style: none; margin: 0; padding: 12px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; background: #150B09; border-radius: 6px; position: relative; } .roll__strip::before, .roll__strip::after { content: ""; position: absolute; left: 14px; right: 14px; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 9px, #2E1A16 9px 21px); } .roll__strip::before { top: 3px; } .roll__strip::after { bottom: 3px; } .roll__strip li { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: #0B0605; } .roll__strip img { width: 100%; height: 100%; object-fit: cover; filter: var(--neg); transition: filter 1.6s var(--ease-out) calc(var(--dev) + 1.2s + var(--k) * 160ms), transform var(--d-base) var(--ease-out); } .roll.is-in .roll__strip img { filter: none; } .roll__strip li span { position: absolute; left: 6px; bottom: 4px; font: 500 .6rem/1 var(--f-mono); color: #E8A33B; letter-spacing: .14em; } @media (hover: hover) and (pointer: fine) { .roll__strip li:hover img { transform: scale(1.06); } } .vault__end { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 24px; padding-block: clamp(60px, 10vh, 120px) clamp(96px, 16vh, 180px); border-top: 1px solid var(--line); } .vault__note { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 5rem); line-height: 1; letter-spacing: -.045em; font-weight: 500; } .vault__actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; margin-top: 8px; } .vault__exit { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transition: color var(--d-fast); } .vault__exit:hover { color: var(--ink); } body:has(.vault) { background: #0B0605; } body:has(.vault) .site-header { background: transparent; color: #F3E7E2; border-color: transparent; } body:has(.vault) .site-header::before, body:has(.darkroom) .site-header::before { background: #0B0605; border-color: rgba(243,231,226,.12); } body:has(.vault) .site-header .logo em, body:has(.vault) .site-header .logo { color: #F3E7E2; } body:has(.vault) .site-header a, body:has(.vault) .site-header button { color: #F3E7E2; } body:has(.vault) .site-footer { margin-top: 0; background: #0B0605; color: #CDB8B1; --ink: #F3E7E2; --ink-2: #CDB8B1; --ink-3: #8F7871; --line: rgba(243,231,226,.14); } @media (max-width: 899px) { .roll { grid-template-columns: 1fr; } .roll:nth-child(even) .roll__frame { order: 0; } .roll__meta { grid-template-columns: repeat(2, auto); } .vault__bar > :nth-child(2) { display: none; } } @media (prefers-reduced-motion: reduce) { .vault__grain, .vault__light { animation: none; } .roll__img img, .roll__strip img { filter: none; transition: none; } .roll__stamp { opacity: .9; animation: none !important; } } /* Private project page: a small reminder that this is a classified file. */ .vault-ribbon { position: fixed; left: 50%; bottom: 18px; z-index: 60; translate: -50% 0; display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-radius: 999px; background: rgba(11,6,5,.9); color: #F3E7E2; backdrop-filter: blur(8px); letter-spacing: .1em; box-shadow: 0 20px 50px -20px rgba(229,52,27,.6); } .vault-ribbon > span { display: inline-flex; align-items: center; gap: 10px; } .vault-ribbon a { color: #FF8A73; } /* Footer: the way into the darkroom, almost invisible. */ .footer-secret { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: middle; color: var(--ink-3); } .footer-secret__dot { width: 6px; height: 6px; border-radius: 50%; background: #E5341B; opacity: .45; transition: opacity var(--d-fast), box-shadow var(--d-base); } .footer-secret__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width var(--d-base) var(--ease-out), opacity var(--d-fast); } .footer-secret:hover .footer-secret__dot, .footer-secret:focus-visible .footer-secret__dot { opacity: 1; box-shadow: 0 0 10px #E5341B; } .footer-secret:hover .footer-secret__label, .footer-secret:focus-visible .footer-secret__label { max-width: 14ch; opacity: 1; } /* Italic words overhang their box: give the reveal mask a little room so the last letter is not clipped. */ .js [data-split] em .w { padding-right: .1em; margin-right: -.1em; } .film-block__head em { font-family: var(--f-serif); font-style: italic; font-weight: 400; } /* ---------- ABOUT: COMPASS (dark, sticky dial, three questions lit one at a time) ---------- */ .compass-x { --ink: #F3EFE8; --ink-2: #BDB6AA; --ink-3: #8A847A; --line: rgba(243,239,232,.14); position: relative; background: #141413; color: var(--ink); padding-block: clamp(80px, 12vh, 140px); overflow: clip; isolation: isolate; } .compass-x::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; aspect-ratio: 1; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); opacity: .55; } .compass-x__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); } .compass-x__aside { position: sticky; top: calc(var(--header-h) + 6vh); align-self: start; display: grid; gap: 28px; } .compass-x__title { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; max-width: 14ch; } .compass-x__title em, .compass-x__q em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--accent) 70%, #fff); } .compass-x__dial { width: min(100%, 300px); aspect-ratio: 1; } .compass-x__dial svg { width: 100%; height: 100%; overflow: visible; } .compass-x__ring { fill: none; stroke: var(--line); stroke-width: 1; } .compass-x__ticks line { stroke: var(--ink-3); stroke-width: .8; } .compass-x__dial text { fill: var(--ink-3); font: 500 11px/1 var(--f-mono); text-anchor: middle; letter-spacing: .1em; transition: fill var(--d-base); } .compass-x[data-active="0"] text[data-c="0"], .compass-x[data-active="1"] text[data-c="1"], .compass-x[data-active="2"] text[data-c="2"], .compass-x[data-active="3"] text[data-c="3"] { fill: var(--accent); } .compass-x__needle { transform-origin: 100px 100px; transform: rotate(-24deg); transition: transform 900ms cubic-bezier(.34, 1.3, .64, 1); } .compass-x__needle path { fill: var(--accent); } .compass-x__needle .compass-x__tail { fill: var(--ink-2); } .compass-x__needle circle { fill: #141413; stroke: var(--ink); stroke-width: 2; } .compass-x[data-active="0"] .compass-x__needle { transform: rotate(0deg); } .compass-x[data-active="1"] .compass-x__needle { transform: rotate(90deg); } .compass-x[data-active="2"] .compass-x__needle { transform: rotate(180deg); } .compass-x[data-active="3"] .compass-x__needle { transform: rotate(270deg); } .compass-x__count { color: var(--ink-3); } .compass-x__count span { color: var(--ink); } .compass-x__list { list-style: none; margin: 0; padding: 0; } .compass-x__q { min-height: 62vh; display: grid; align-content: center; gap: 20px; border-top: 1px solid var(--line); } .compass-x__q:last-child { border-bottom: 1px solid var(--line); } .compass-x__q .t-micro { color: var(--accent); } .compass-x__q p { font-size: clamp(2.4rem, 5.6vw, 6rem); line-height: .98; letter-spacing: -.045em; font-weight: 500; text-wrap: balance; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .compass-x__q { animation: q-focus linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } @keyframes q-focus { 0% { opacity: .12; translate: 0 6vh; } 40%, 60% { opacity: 1; translate: 0 0; } 100% { opacity: .12; translate: 0 -6vh; } } } @media (max-width: 899px) { .compass-x__grid { grid-template-columns: 1fr; } .compass-x__aside { position: relative; top: 0; grid-template-columns: 1fr auto; align-items: end; } .compass-x__aside > :first-child, .compass-x__title { grid-column: 1 / -1; } .compass-x__dial { width: 120px; } .compass-x__q { min-height: 44vh; } } /* ---------- ABOUT: DISCIPLINES (big rows, ink fill + polaroid on hover) ---------- */ .disc-x__head { display: grid; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); } .disc-x__head em { font-family: var(--f-serif); font-style: italic; font-weight: 400; } .disc-x__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .disc-x__row { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; padding: clamp(22px, 3.4vw, 44px) 16px; border-bottom: 1px solid var(--line); color: var(--ink); overflow: visible; } .disc-x__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #141413; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 520ms var(--ease-editorial); border-radius: var(--r-media); } .disc-x__n { color: var(--ink-3); } .disc-x__title { font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: -.045em; font-weight: 500; transition: transform 520ms var(--ease-editorial), color 300ms; } .disc-x__title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--accent); } .disc-x__desc { color: var(--ink-2); max-width: 34ch; transition: color 300ms; } .disc-x__go { color: var(--ink-3); white-space: nowrap; transition: color 300ms; } .disc-x__go .arrow { display: inline-block; transition: transform var(--d-base) var(--ease-out); } /* The polaroid has its own grid column between title and description, so it never covers text. The wrapper is 0px tall and centred on the row; the print hangs from that line. */ .disc-x__media { position: relative; grid-column: 3; grid-row: 1; align-self: center; height: 0; pointer-events: none; z-index: 2; opacity: 0; transform: rotate(-8deg) scale(.7); transition: opacity 260ms var(--ease-out), transform 520ms cubic-bezier(.34, 1.4, .64, 1); } .disc-x__media .pola { position: absolute; inset: auto; left: 0; top: 0; width: 100%; translate: 0 -50%; transform: none; animation: none; } @media (min-width: 900px) { .disc-x__row { grid-template-columns: 64px minmax(0, 1fr) clamp(120px, 10vw, 160px) minmax(0, 28ch) auto; } .disc-x__title { font-size: clamp(2rem, 4.3vw, 4.3rem); } .disc-x__desc { grid-column: 4; } .disc-x__go { grid-column: 5; } } @media (hover: hover) and (pointer: fine) { .disc-x__row:hover::before, .disc-x__row:focus-visible::before { transform: scaleY(1); } .disc-x__row:hover .disc-x__title, .disc-x__row:focus-visible .disc-x__title { color: #F3EFE8; transform: translateX(12px); } .disc-x__row:hover .disc-x__desc, .disc-x__row:hover .disc-x__go { color: #BDB6AA; } .disc-x__row:hover .disc-x__go .arrow { transform: translateX(6px); } .disc-x__row:hover .disc-x__media { opacity: 1; transform: rotate(-5deg) scale(1); } } @media (max-width: 899px) { .disc-x__row { grid-template-columns: 40px 1fr; } .disc-x__desc, .disc-x__go { grid-column: 2; } .disc-x__media { display: none; } } @media (prefers-reduced-motion: reduce) { .compass-x__needle, .disc-x__row::before, .disc-x__media { transition: none; } } .frames-more { display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 48px); } .frames-more .t-micro { color: var(--ink-3); margin-left: 6px; }