/* ================================================
Victor Tran Design — Shared Styles
================================================ */
/* Google Fonts loaded via in each page's for non-blocking parallel fetch */
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Design tokens — light ── */
:root {
--blue: #55a2f7;
--pink: #ea3b99;
--purple: #7928d2;
--orange: #b06020;
--bg: #ffffff;
--bg-2: #f6f6f4;
--text: #1a1a1a;
--text-2: #6e6e6e;
--border: #e5e5e3;
--max-w: 1200px;
--nav-h: 68px;
/* Spacing scale — 4px base */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
/* Semantic layout aliases — rebind below for responsive */
--page-x: var(--space-12); /* 48px — page side padding */
--section-y: var(--space-20); /* 80px — vertical rhythm between sections */
--gallery-x: var(--space-6); /* 24px — viewport gutter for full-bleed galleries */
}
/* --page-x rebinds at breakpoints so consumers don't need media queries */
@media (max-width: 900px) { :root { --page-x: var(--space-6); --gallery-x: var(--space-4); } } /* 24 / 16 */
@media (max-width: 600px) { :root { --page-x: var(--space-5); --gallery-x: var(--space-3); } } /* 20 / 12 */
/* ── Design tokens — dark ── */
[data-theme="dark"] {
--bg: #0e0e0e;
--bg-2: #181818;
--text: #f0f0ee;
--text-2: #888888;
--border: #2c2c2c;
--blue: #7ab8ff;
--pink: #f06ab5;
}
/* ── Theme-aware images ── */
.theme-img-light,
.theme-img-dark { width: 100%; height: auto; }
.theme-img-dark { display: none; }
[data-theme="dark"] .theme-img-light { display: none; }
[data-theme="dark"] .theme-img-dark { display: block; }
html {
font-size: 16px;
scroll-behavior: smooth;
cursor: none;
}
body {
font-family: 'Barlow', sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
transition: background 0.35s, color 0.35s;
}
a { color: inherit; text-decoration: none; cursor: none; }
button { cursor: none; }
img { display: block; max-width: 100%; }
/* ── Keyboard focus rings ──
The site uses cursor: none everywhere, so keyboard users have zero
visual feedback without :focus-visible. Mouse clicks won't trigger this. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.featured-item:focus-visible,
.theme-toggle:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 4px;
border-radius: 2px;
}
/* ══════════════════════════════════════════════
CUSTOM CURSOR
══════════════════════════════════════════════ */
.cursor-dot,
.cursor-ring {
position: fixed;
top: 0; left: 0;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
will-change: transform;
transform: translate(-100px, -100px);
}
.cursor-dot {
width: 6px; height: 6px;
margin: -3px 0 0 -3px;
background: var(--text);
transition: opacity 0.2s;
}
.cursor-ring {
width: 36px; height: 36px;
margin: -18px 0 0 -18px;
border: 1.5px solid var(--text);
opacity: 0.45;
transition: width 0.25s ease, height 0.25s ease,
margin 0.25s ease, opacity 0.25s ease,
border-color 0.25s ease;
}
.cursor-ring--hover {
width: 64px; height: 64px;
margin: -32px 0 0 -32px;
opacity: 0.22;
border-color: var(--blue);
}
/* ── Touch: restore normal cursor ── */
@media (hover: none) {
html, a, button { cursor: auto; }
.cursor-dot, .cursor-ring { display: none; }
}
/* ══════════════════════════════════════════════
SCROLL REVEAL
══════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.revealed {
opacity: 1;
transform: none;
will-change: auto;
}
/* ══════════════════════════════════════════════
NAVIGATION
══════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--nav-h);
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.3s, border-color 0.3s, height 0.3s;
}
.nav--scrolled {
background: rgba(255,255,255,0.88) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--border) !important;
height: 58px;
}
[data-theme="dark"] .nav--scrolled {
background: rgba(14,14,14,0.88) !important;
}
.nav-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
}
.nav-logo img {
width: 34px; height: 34px;
border-radius: 8px;
object-fit: cover;
}
.nav-logo-name {
font-family: 'Barlow', sans-serif;
font-weight: 700;
font-size: 0.9375rem;
color: var(--text);
letter-spacing: 0.01em;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.nav-links a {
font-size: 0.875rem;
color: var(--text-2);
transition: color 0.2s;
letter-spacing: 0.01em;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-contact {
font-weight: 600 !important;
color: var(--text) !important;
}
/* ── Galleries dropdown ── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
font-size: 0.875rem;
letter-spacing: 0.01em;
color: var(--text-2);
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: color 0.2s;
}
.nav-dropdown-toggle::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: 0.7;
transition: transform 0.2s;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.is-active .nav-dropdown-toggle,
.nav-dropdown-toggle[aria-expanded="true"] { color: var(--text); }
.nav-dropdown-toggle[aria-expanded="true"]::after {
transform: translateY(1px) rotate(-135deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translate(-50%, -4px);
min-width: 220px;
margin: 0;
padding: 8px;
list-style: none;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 14px 40px rgba(0,0,0,0.10);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 110;
}
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
display: block;
padding: 9px 14px;
border-radius: 8px;
font-size: 0.875rem;
color: var(--text-2);
transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
background: var(--bg-2);
color: var(--text);
}
/* ── Theme Toggle ── */
.theme-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 100px;
padding: 5px 13px;
font-size: 0.75rem;
font-family: 'Barlow', sans-serif;
color: var(--text-2);
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 6px;
transition: border-color 0.2s, color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--text);
border-color: var(--text-2);
}
.theme-toggle-icon::before { content: '◐'; }
[data-theme="dark"] .theme-toggle-icon::before { content: '○'; }
/* ══════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════ */
.footer {
padding: var(--section-y) 0 var(--space-12);
background: var(--bg);
border-top: 1px solid var(--border);
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x);
}
.footer-tagline {
font-family: 'DM Serif Display', serif;
font-size: clamp(2rem, 4vw, 3.25rem);
color: var(--text);
margin-bottom: 6px;
line-height: 1.1;
}
.footer-subtitle {
font-size: 1rem;
color: var(--text-2);
margin-bottom: 36px;
}
.footer-cta {
font-size: 0.9375rem;
font-weight: 500;
color: var(--blue);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
display: inline-block;
margin-bottom: 24px;
transition: opacity 0.2s;
}
.footer-cta:hover { color: var(--text); border-bottom-color: var(--text); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid var(--border);
margin-top: 40px;
}
.footer-copyright { font-size: 0.8rem; color: var(--text-2); }
.footer-social a {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-2);
transition: color 0.2s;
}
.footer-social a:hover { color: var(--text); }
/* ══════════════════════════════════════════════
PAGE OFFSET
══════════════════════════════════════════════ */
.page-content { padding-top: var(--nav-h); }
/* ══════════════════════════════════════════════
HERO (Adrianus-style billboard — giant role title
stacked top + bottom, portrait cutout sandwiched
between, lens-fill overlay as a brand signature.
Tap/click anywhere on the hero to cycle portraits.)
══════════════════════════════════════════════ */
.hero {
position: relative;
width: 100%;
height: calc(100vh - var(--nav-h));
min-height: 620px;
overflow: hidden;
/* --bg-tint, --lens-color, and --accent-2 are session-locked at page load
by JS. The bg is a soft, desaturated wash of the session color. */
--bg-tint: transparent;
--lens-color: var(--text);
--accent-2: var(--text);
background: color-mix(in oklab, var(--bg-tint) 16%, var(--bg));
color: var(--text);
cursor: none; /* stage itself is the click target */
}
[data-theme="dark"] .hero {
background: color-mix(in oklab, var(--bg-tint) 26%, var(--bg));
}
/* The "stage" holds the giant type + portraits, centered and clipped */
.hero-stage {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
/* Giant headline — two words stacked tight, left-aligned, the whole block
centered in the hero. Figure sits in front; the type wings peek out
left/right of the silhouette. */
.hero-typeblock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: 1;
pointer-events: none;
user-select: none;
}
.hero-bigtype {
display: block;
font-family: 'DM Serif Display', serif;
font-weight: 400;
font-size: clamp(7rem, 24vw, 26rem);
line-height: 0.86;
letter-spacing: -0.025em;
/* Track the active portrait's accent token so the words sit in the same
hue as the lens fill — full saturation up top, knocked-back italic below. */
color: var(--lens-color, var(--text));
white-space: nowrap;
transition: color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-bigtype + .hero-bigtype {
font-style: italic;
/* Second word picks a different palette token (set on the hero by JS) so
the headline plays a small two-color game. Italic + ~half opacity keeps
it knocked back behind "Visual". */
color: var(--accent-2, var(--lens-color));
opacity: 0.55;
}
/* Portraits stack — one is .is-active at a time. They share a frame so the
lens overlay aligns with its cutout pixel-perfectly (both use the same
intrinsic dimensions and `contain` sizing). */
.hero-portraits {
/* Container spans the full hero so each portrait's --anchor (center / left
bottom / right bottom) actually has room to shift the figure within. */
position: absolute;
inset: 0;
z-index: 2;
}
.hero-portrait {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
transform: scale(1.015);
transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-portrait.is-active {
opacity: 1;
transform: scale(1);
}
.hero-portrait-cutout {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* --anchor is set per-portrait inline (e.g. "left bottom", "right bottom").
Both the photo and the lens mask use it so they stay aligned. */
object-position: var(--anchor, center bottom);
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.18));
}
/* Lens overlay — uses the white-on-transparent lens PNG as a CSS mask so the
fill color is decoupled from the PNG and driven by the hero's --lens-color.
Mixed with a neutral gray to desaturate — the lens hue stays readable but
doesn't shout over the figure. */
.hero-portrait-lens {
position: absolute;
inset: 0;
pointer-events: none;
background: color-mix(in oklab, var(--lens-color, var(--pink)), var(--text-2) 32%);
-webkit-mask-image: var(--lens-mask);
mask-image: var(--lens-mask);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: var(--anchor, center bottom);
mask-position: var(--anchor, center bottom);
}
/* Top-left meta block — eyebrow, supporting tagline, CTA */
.hero-meta {
position: absolute;
top: calc(var(--nav-h) + var(--space-12));
left: var(--page-x);
z-index: 3;
max-width: 320px;
pointer-events: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.hero-eyebrow {
font-family: 'Source Code Pro', monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
}
.hero-title {
font-family: 'Barlow', sans-serif;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.45;
color: var(--text-2);
letter-spacing: 0.005em;
margin: 0;
}
.hero-cta {
font-family: 'Source Code Pro', monospace;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
border-bottom: 1px solid var(--text);
padding-bottom: 4px;
align-self: flex-start;
transition: color 0.25s, border-color 0.25s;
}
.hero-cta:hover { color: var(--pink); border-bottom-color: var(--pink); }
.hero-cta span { display: inline-block; transition: transform 0.25s; }
.hero-cta:hover span { transform: translateX(4px); }
/* Bottom service row — four labels evenly spaced edge-to-edge */
.hero-services {
position: absolute;
left: var(--page-x);
right: var(--page-x);
bottom: var(--space-8);
z-index: 3;
display: flex;
justify-content: space-between;
gap: var(--space-6);
list-style: none;
font-family: 'Source Code Pro', monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
}
/* Cycle hint — bottom-right, also acts as accessible button */
.hero-cycle {
position: absolute;
top: calc(var(--nav-h) + var(--space-12));
right: var(--page-x);
z-index: 3;
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--text-2);
cursor: none;
}
.hero-cycle-dots {
display: inline-flex;
gap: 6px;
}
.hero-cycle-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--text-2);
opacity: 0.4;
transition: opacity 0.25s, background 0.25s, transform 0.25s;
}
.hero-cycle-dot.is-active {
opacity: 1;
background: var(--text);
transform: scale(1.25);
}
.hero-cycle-label {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Reduced motion — kill the scale-in tween, keep the crossfade */
@media (prefers-reduced-motion: reduce) {
.hero-portrait { transform: none !important; transition: opacity 250ms linear; }
}
/* Tablet: tighter scale on side meta blocks, shrink the giant type */
@media (max-width: 900px) {
.hero-meta { max-width: 240px; top: calc(var(--nav-h) + var(--space-8)); }
.hero-cycle { top: calc(var(--nav-h) + var(--space-8)); }
.hero-services { font-size: 0.65rem; gap: var(--space-3); }
.hero-bigtype { font-size: clamp(6rem, 22vw, 16rem); }
}
/* Phone: stack meta above the type block; shrink portrait; 2x2 services. */
@media (max-width: 600px) {
.hero { min-height: 600px; }
.hero-bigtype { font-size: clamp(4.5rem, 24vw, 8rem); line-height: 0.88; }
.hero-portraits {
height: min(60vh, 520px);
}
.hero-meta {
top: calc(var(--nav-h) + var(--space-3));
max-width: 60vw;
gap: var(--space-2);
}
.hero-title { font-size: 0.82rem; line-height: 1.35; }
.hero-cta { font-size: 0.7rem; }
.hero-cycle-label { display: none; }
.hero-services {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2) var(--space-4);
font-size: 0.58rem;
bottom: var(--space-4);
}
}
/* ══════════════════════════════════════════════
MARQUEE STRIP
══════════════════════════════════════════════ */
.marquee {
overflow: hidden;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 13px 0;
background: var(--bg-2);
}
.marquee-track {
display: flex;
white-space: nowrap;
width: max-content;
animation: marquee-scroll 30s linear infinite;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 0 28px;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.marquee-item::after {
content: '·';
color: var(--blue);
font-size: 1.3em;
opacity: 0.7;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ══════════════════════════════════════════════
SECTION LABEL
══════════════════════════════════════════════ */
.section-label {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.label-design { color: var(--orange); }
.label-artwork { color: var(--pink); }
.label-default { color: var(--blue); }
/* ══════════════════════════════════════════════
FEATURED PROJECTS
══════════════════════════════════════════════ */
.featured { padding: 0 0 var(--section-y); }
.featured-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--border);
}
.featured-item {
display: flex;
flex-direction: column;
background: var(--bg);
overflow: hidden;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-item-img {
overflow: hidden;
position: relative;
aspect-ratio: 4 / 3;
background: var(--bg-2);
}
.featured-item-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover guard applied in @media (hover: hover) block below */
.featured-item-content {
padding: 36px 40px 44px;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
background: var(--bg);
}
/* Wide hero — spans both columns, image-left/text-right split */
.featured-item--wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
.featured-item--wide .featured-item-img {
aspect-ratio: auto;
height: 100%;
}
.featured-item--wide .featured-item-content {
padding: 60px 56px;
justify-content: center;
}
.featured-item--flip { direction: rtl; }
.featured-item--flip > * { direction: ltr; }
.featured-item-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
color: var(--text);
margin-bottom: 14px;
line-height: 1.1;
}
.featured-item-desc {
font-size: 0.9375rem;
color: var(--text-2);
line-height: 1.8;
margin-bottom: 28px;
}
.view-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-2);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
letter-spacing: 0.02em;
}
.view-link:hover { color: var(--text); }
.view-link::after {
content: '→';
display: inline-block;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.view-link:hover::after { transform: translateX(6px); }
/* ══════════════════════════════════════════════
PAGE HEADER (gallery / case study pages)
══════════════════════════════════════════════ */
.page-header {
padding: var(--section-y) var(--page-x) var(--space-14);
max-width: var(--max-w);
margin: 0 auto;
border-bottom: 1px solid var(--border);
}
.page-header .section-label { margin-bottom: 14px; }
.page-header-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(2.75rem, 7vw, 5.5rem);
color: var(--text);
line-height: 0.98;
margin-bottom: 20px;
}
.page-header-desc {
font-size: 1rem;
color: var(--text-2);
max-width: 540px;
line-height: 1.8;
}
.case-study-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-10);
margin-top: var(--space-8);
padding-top: var(--space-8);
border-top: 1px solid var(--border);
}
.case-study-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.case-study-meta dt {
font-family: 'Source Code Pro', monospace;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.case-study-meta dd {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text);
}
/* ══════════════════════════════════════════════
CASE STUDY
══════════════════════════════════════════════ */
.case-study {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--space-16) var(--page-x);
}
.case-study p {
font-size: 1.0625rem;
line-height: 1.9;
color: var(--text-2);
max-width: 680px;
margin-bottom: 24px;
}
.case-study h2 {
font-family: 'DM Serif Display', serif;
font-size: 2.125rem;
color: var(--text);
margin: 56px 0 16px;
line-height: 1.1;
}
.case-study h3 {
font-family: 'Barlow', sans-serif;
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
margin: 36px 0 12px;
letter-spacing: 0.01em;
}
.case-study ol,
.case-study ul {
margin: 16px 0 28px;
padding-left: 24px;
line-height: 2;
color: var(--text-2);
font-size: 1.0625rem;
}
.case-study-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin: 48px 0;
}
.case-study-images img {
width: 100%;
height: 280px;
object-fit: cover;
border-radius: 4px;
background: var(--bg-2);
border: 1px solid var(--border);
}
.case-study-images.wide img { height: 420px; }
.case-study-images.contain img {
height: auto;
aspect-ratio: 16 / 10;
object-fit: contain;
padding: 12px;
}
.case-study-images.contain.wide img { aspect-ratio: 16 / 10; height: auto; }
.case-study-images.landscape {
grid-template-columns: 1fr;
}
.case-study-images.landscape img {
width: 100%;
height: auto;
}
.case-study-brand-mark {
width: 100%;
max-width: 320px;
aspect-ratio: 1 / 1;
margin: 48px auto;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: url('../images/pikapp-pattern.jpg') center / cover no-repeat;
}
.case-study-brand-mark img {
width: 55%;
height: auto;
border-radius: 18%;
box-shadow: 0 18px 40px -16px rgba(10, 25, 60, 0.55);
}
.case-study-images.phones {
grid-template-columns: repeat(2, 1fr);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.case-study-images.phones img {
height: auto;
aspect-ratio: 9 / 16;
object-fit: contain;
background: var(--bg-2);
padding: 12px;
}
@media (max-width: 600px) {
.case-study-images.phones { grid-template-columns: 1fr; max-width: 360px; }
}
.case-study-images.sal-covers {
grid-template-columns: repeat(4, 1fr);
}
.case-study-images.sal-covers img {
height: 340px;
object-fit: cover;
object-position: top;
}
@media (max-width: 900px) {
.case-study-images.sal-covers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.case-study-images.sal-covers { grid-template-columns: repeat(2, 1fr); }
.case-study-images.sal-covers img { height: 220px; }
}
.case-study-full-img {
width: 100%;
margin: 40px 0;
border-radius: 4px;
overflow: hidden;
}
.case-study-full-img img {
width: 100%;
height: auto;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 4px;
}
/* ── Case study: lede / eyebrow / caption / placeholder ── */
.case-study-lede {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--space-14) var(--page-x) 0;
}
.case-study-lede p {
font-family: 'DM Serif Display', serif;
font-style: italic;
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1.35;
color: var(--text);
max-width: 760px;
margin: 0;
}
.case-study-lede cite {
display: block;
font-style: normal;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
margin-top: var(--space-4);
}
.case-study-eyebrow {
display: block;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-2);
margin: 64px 0 6px;
}
.case-study-eyebrow + h2 { margin-top: 4px; }
.case-study-thesis {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.25rem, 1.9vw, 1.625rem);
line-height: 1.4;
color: var(--text);
max-width: 720px;
margin: 0 0 var(--space-8) !important;
}
.case-study-caption {
font-family: 'Source Code Pro', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--text-2);
margin-top: -32px;
margin-bottom: 56px;
max-width: 680px;
}
.case-study-placeholder {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: var(--bg-2);
border: 1px dashed var(--border);
border-radius: 4px;
color: var(--text-2);
aspect-ratio: var(--ratio, 16 / 9);
margin: 40px 0;
overflow: hidden;
}
.case-study-placeholder.tall { --ratio: 4 / 3; }
.case-study-placeholder.cinematic { --ratio: 21 / 9; }
.case-study-placeholder.square { --ratio: 1 / 1; }
.case-study-placeholder-label {
font-family: 'Source Code Pro', monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
text-align: center;
padding: 0 var(--space-6);
max-width: 80%;
}
.case-study-images .case-study-placeholder { margin: 0; aspect-ratio: 4 / 3; }
.case-study-images.wide .case-study-placeholder { aspect-ratio: 16 / 10; }
.case-study-images.grid-3 { grid-template-columns: repeat(3, 1fr); }
.case-study-images.grid-4 { grid-template-columns: repeat(4, 1fr); }
.case-study-images.grid-3 img,
.case-study-images.grid-4 img { height: 240px; }
@media (max-width: 900px) {
.case-study-images.grid-3,
.case-study-images.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.case-study-images.grid-3,
.case-study-images.grid-4 { grid-template-columns: 1fr; }
}
.case-study-prototype-cta {
max-width: var(--max-w);
margin: var(--space-10) auto 0;
padding: 0 var(--page-x);
display: block;
}
.case-study-prototype-cta-inner {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-6) var(--space-8);
background: linear-gradient(135deg, #15295C 0%, #0E1A3E 100%);
border-radius: 18px;
color: #FAF7EE;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 12px 36px -16px rgba(11, 23, 58, 0.5);
}
.case-study-prototype-cta:hover .case-study-prototype-cta-inner {
transform: translateY(-2px);
box-shadow: 0 18px 48px -16px rgba(11, 23, 58, 0.6);
}
.case-study-prototype-cta-inner::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.case-study-prototype-cta-mark {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
color: #E8B33D;
filter: drop-shadow(0 4px 14px rgba(232, 179, 61, 0.4));
}
.case-study-prototype-cta-content {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.case-study-prototype-cta-eyebrow {
font-family: 'Barlow', sans-serif;
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.6875rem;
color: #F5D97A;
}
.case-study-prototype-cta-title {
font-family: 'DM Serif Display', serif;
font-size: 1.625rem;
line-height: 1.1;
color: #FAF7EE;
}
.case-study-prototype-cta-meta {
font-size: 0.8125rem;
color: rgba(250, 247, 238, 0.6);
}
.case-study-prototype-cta-arrow {
position: relative;
font-size: 1.5rem;
color: #E8B33D;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.case-study-prototype-cta:hover .case-study-prototype-cta-arrow {
transform: translateX(4px);
}
@media (max-width: 600px) {
.case-study-prototype-cta-inner {
padding: var(--space-5) var(--space-5);
gap: var(--space-4);
}
.case-study-prototype-cta-mark { width: 44px; height: 44px; }
.case-study-prototype-cta-title { font-size: 1.25rem; }
.case-study-prototype-cta-meta { font-size: 0.75rem; }
}
.case-study-outro {
max-width: var(--max-w);
margin: var(--space-14) auto 0;
padding: var(--space-14) var(--page-x) 0;
border-top: 1px solid var(--border);
}
.case-study-outro h2 {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin: 0 0 var(--space-6);
color: var(--text);
line-height: 1.1;
}
.case-study-outro p {
font-size: 1.0625rem;
line-height: 1.9;
color: var(--text-2);
max-width: 680px;
margin-bottom: 24px;
}
/* ══════════════════════════════════════════════
PROJECT NAV (prev / next)
══════════════════════════════════════════════ */
.project-nav {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x);
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--border);
}
.project-nav-item {
padding: var(--space-12) 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.project-nav-item--prev {
border-right: 1px solid var(--border);
padding-right: var(--space-8);
}
.project-nav-item--next {
align-items: flex-end;
text-align: right;
padding-left: var(--space-8);
}
.project-nav-label {
font-family: 'Source Code Pro', monospace;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.project-nav-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
color: var(--text);
line-height: 1.15;
transition: color 0.2s;
}
.project-nav-arrow {
font-size: 1rem;
color: var(--text-2);
display: inline-block;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
margin-top: var(--space-1);
}
/* ══════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════ */
.about-intro {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--section-y) var(--page-x) var(--space-16);
display: grid;
grid-template-columns: 1fr minmax(220px, 300px);
gap: var(--space-12);
align-items: start;
}
.about-bio p {
font-size: 1.0625rem;
line-height: 1.9;
color: var(--text-2);
margin-bottom: 28px;
}
.about-bio p:last-child {
margin-bottom: 0;
}
.about-bio p:first-child {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
line-height: 1.55;
color: var(--text);
}
.about-photo img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
@media (max-width: 720px) {
.about-intro {
grid-template-columns: 1fr;
}
.about-photo {
max-width: 320px;
}
}
.about-divider {
border: none;
border-top: 1px solid var(--border);
max-width: var(--max-w);
margin: 0 auto 64px;
}
.about-now {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x) var(--section-y);
}
.about-now-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--text);
margin-bottom: 48px;
line-height: 1.05;
}
.about-now-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--border);
}
.about-now-item {
padding: 28px 32px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.about-now-item:nth-child(even) { border-right: none; }
.about-now-item:nth-last-child(-n+2) { border-bottom: none; }
.about-now-label {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
color: var(--blue);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.about-now-value {
font-weight: 500;
font-size: 1rem;
color: var(--text);
}
.about-skills {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x) var(--section-y);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-12);
}
.about-skills-section h3 {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
display: inline-block;
padding: 5px 14px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.875rem;
color: var(--text);
transition: border-color 0.2s, color 0.2s;
}
.about-work {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x) var(--section-y);
}
.about-work h3 {
font-family: 'DM Serif Display', serif;
font-size: 1.75rem;
margin-bottom: 6px;
color: var(--text);
}
.about-work-subtitle {
font-size: 0.875rem;
color: var(--text-2);
margin-bottom: 32px;
}
.work-list { list-style: none; }
.work-list li {
font-size: 0.9375rem;
color: var(--text-2);
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.about-employer-name {
font-weight: 700;
margin-bottom: 8px;
}
.about-employer-role {
font-size: 0.9rem;
color: var(--text-2);
line-height: 1.6;
}
.about-employer-role + .about-employer-role { margin-top: 8px; }
/* ══════════════════════════════════════════════
GALLERY
══════════════════════════════════════════════ */
.gallery-section {
padding: 64px 0 24px;
border-top: 1px solid var(--border);
}
.gallery-section:first-of-type { border-top: none; padding-top: 32px; }
.gallery-section-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
line-height: 1.1;
color: var(--text);
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--page-x) 12px;
}
.gallery-grid {
columns: 3;
column-gap: 12px;
padding: var(--space-6) var(--gallery-x) var(--space-12);
max-width: none;
margin: 0 auto;
}
@media (min-width: 1200px) { .gallery-grid { columns: 4; } }
@media (min-width: 1700px) { .gallery-grid { columns: 5; } }
.gallery-grid img {
width: 100%;
margin-bottom: 12px;
break-inside: avoid;
border-radius: 3px;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s;
display: block;
}
/* hover guard applied in @media (hover: hover) block below */
/* ── Gallery: trio override (3 equal columns) ── */
.gallery-grid--trio { columns: 3; }
@media (min-width: 1400px) { .gallery-grid--trio { columns: 3; } }
@media (min-width: 1800px) { .gallery-grid--trio { columns: 3; } }
/* ── Gallery: pairs (2 columns, larger images) ── */
.gallery-grid--pairs { columns: 2; }
@media (min-width: 1200px) { .gallery-grid--pairs { columns: 3; } }
@media (min-width: 1700px) { .gallery-grid--pairs { columns: 4; } }
/* ── Gallery: EDC (2-col grid, boomboxes top row, eyes bottom row) ── */
.gallery-grid--edc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gallery-gap, 12px);
}
.gallery-grid--edc img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
display: block;
}
.gallery-grid--edc img:first-child {
object-position: center 78%;
}
/* ── Gallery: slides (4-column tight contact sheet) ── */
.gallery-grid--slides {
columns: 4;
column-gap: 8px;
}
@media (min-width: 1200px) { .gallery-grid--slides { columns: 5; } }
@media (min-width: 1700px) { .gallery-grid--slides { columns: 6; } }
.gallery-grid--slides img { margin-bottom: 8px; }
/* ── Gallery: spotlight (single featured piece, centered) ── */
.gallery-spotlight {
max-width: var(--max-w);
margin: 0 auto var(--space-16);
padding: 0 var(--page-x);
display: flex;
justify-content: center;
}
.gallery-spotlight-fig {
width: clamp(280px, 42vw, 660px);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.gallery-spotlight-fig img {
width: 100%;
display: block;
border-radius: 3px;
}
.gallery-spotlight-cap {
margin-top: 16px;
font-family: 'Source Code Pro', monospace;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text-2);
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
}
.gallery-spotlight-cap .section-label { margin: 0; }
/* ── Gallery: paired spotlight + slideshow ── */
.gallery-pair {
max-width: var(--max-w);
margin: var(--space-12) auto var(--space-16);
padding: 0 var(--page-x);
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.65fr);
align-items: center;
gap: clamp(24px, 5vw, 72px);
}
.gallery-pair .gallery-spotlight-fig {
width: 100%;
max-width: 720px;
justify-self: end;
}
.gallery-pair .series-slideshow {
margin: 0;
padding: 0;
justify-content: center;
}
.gallery-pair .series-slideshow-stage {
height: clamp(420px, 43vw, 620px);
}
@media (max-width: 900px) {
.gallery-pair {
grid-template-columns: 1fr;
gap: var(--space-10);
}
.gallery-pair .gallery-spotlight-fig {
max-width: 680px;
justify-self: center;
}
.gallery-pair .series-slideshow-stage {
height: 460px;
}
}
@media (max-width: 600px) {
.gallery-pair {
gap: var(--space-8);
}
.gallery-pair .series-slideshow-stage {
height: 380px;
}
}
/* ── Gallery: flat row (equal-width images side by side) ── */
.gallery-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
padding: var(--space-6) var(--gallery-x) var(--space-8);
max-width: none;
margin: 0 auto;
}
.gallery-row img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: contain;
background-color: var(--bg-2);
border-radius: 3px;
transition: opacity 0.25s;
}
/* hover guard applied in @media (hover: hover) block below */
@media (max-width: 900px) {
.gallery-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.gallery-row { grid-template-columns: 1fr; }
}
/* ── Gallery: grouped sections ── */
.gallery-group-chicago,
.gallery-group-traditional {
max-width: none;
margin: 0 auto;
padding: var(--space-12) 0 var(--space-6);
}
/* Higher specificity to beat gallery-section:first-of-type */
.gallery-section.gallery-group-chicago,
.gallery-section.gallery-group-traditional {
padding-top: 96px;
}
.gallery-group-chicago .gallery-grid,
.gallery-group-traditional .gallery-row {
padding-left: var(--gallery-x);
padding-right: var(--gallery-x);
}
/* ── Gallery: feature (full-bleed landscape piece) ── */
.gallery-feature {
max-width: none;
margin: 0 auto var(--space-12);
padding: 0 var(--gallery-x);
}
.gallery-feature img {
width: 100%;
display: block;
border-radius: 3px;
}
/* ── Series Slideshow (auto-crossfade) ── */
.series-slideshow {
max-width: none;
margin: var(--space-8) auto var(--space-16);
padding: 0 var(--gallery-x);
display: flex;
justify-content: center;
}
.series-slideshow-stage {
position: relative;
height: 540px;
aspect-ratio: 1 / 2;
}
@media (min-width: 1200px) { .series-slideshow-stage { height: 620px; } }
@media (min-width: 1700px) { .series-slideshow-stage { height: 720px; } }
@media (max-width: 900px) { .series-slideshow-stage { height: 460px; } }
@media (max-width: 600px) { .series-slideshow-stage { height: 380px; } }
.series-slideshow-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 3px;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.series-slideshow-img.is-active {
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.series-slideshow-img { transition: none; }
}
/* ══════════════════════════════════════════════
AWARD BADGE
══════════════════════════════════════════════ */
.award-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff8e6;
border: 1px solid #f5c842;
border-radius: 6px;
padding: 6px 14px;
font-size: 0.85rem;
color: #7a5c00;
margin: 4px 4px 4px 0;
}
[data-theme="dark"] .award-badge {
background: #1e1600;
border-color: #6b5000;
color: #f5c842;
}
.award-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 32px;
}
/* ══════════════════════════════════════════════
ISSUE INDEX (publication archive table)
══════════════════════════════════════════════ */
.issue-index {
display: flex;
flex-direction: column;
margin: 12px 0 32px;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
max-width: 300px;
}
.issue-index-row {
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.issue-index-row:last-child { border-bottom: none; }
.issue-index dt {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--blue);
}
.issue-index dd {
font-size: 0.875rem;
color: var(--text-2);
}
/* ══════════════════════════════════════════════
STAR & LAMP CASE STUDY
══════════════════════════════════════════════ */
/* Cover wall — full archive of issues as clickable thumbnails */
.sal-cover-wall {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px 18px;
margin: 32px 0 24px;
}
.sal-cover-wall a {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform 0.25s ease;
}
.sal-cover-wall a:hover { transform: translateY(-3px); }
.sal-cover-wall img {
width: 100%;
height: auto;
aspect-ratio: 720 / 968;
object-fit: cover;
border-radius: 3px;
border: 1px solid var(--border);
box-shadow: 0 8px 22px -14px rgba(10, 25, 60, 0.35);
transition: box-shadow 0.25s ease;
}
.sal-cover-wall a:hover img {
box-shadow: 0 14px 30px -12px rgba(10, 25, 60, 0.55);
}
.sal-cover-wall span {
margin-top: 10px;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
@media (max-width: 900px) {
.sal-cover-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
.sal-cover-wall { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}
.sal-archive-note {
font-size: 0.95rem !important;
color: var(--text-2);
margin: 8px 0 56px !important;
max-width: 620px;
}
.sal-archive-note a {
color: var(--blue);
border-bottom: 1px solid currentColor;
}
/* Featured spread — full-width image with optional caption */
.sal-spread-feature {
margin: 56px 0;
}
.sal-spread-feature img {
width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--border);
box-shadow: 0 18px 40px -22px rgba(10, 25, 60, 0.4);
display: block;
}
.sal-spread-feature figcaption {
margin: 18px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
max-width: 680px;
}
.sal-spread-feature figcaption .section-label {
margin: 0;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
}
.sal-spread-feature figcaption p {
margin: 0 !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: var(--text-2);
font-style: italic;
}
/* Two spreads side by side (optionally with per-image figcaptions) */
.sal-spread-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 32px 0 56px;
align-items: start;
}
.sal-spread-pair > img,
.sal-spread-pair figure img {
width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--border);
display: block;
}
.sal-spread-pair figure {
margin: 0;
display: flex;
flex-direction: column;
}
.sal-spread-pair figcaption {
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.sal-spread-pair figcaption .section-label {
margin: 0;
font-family: 'Source Code Pro', monospace;
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
}
.sal-spread-pair figcaption p {
margin: 0 !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
color: var(--text-2);
font-style: italic;
}
@media (max-width: 700px) {
.sal-spread-pair { grid-template-columns: 1fr; gap: 32px; }
}
/* Three spreads in a row (anthology / hero intro) */
.sal-spread-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 0 0 18px;
}
.sal-spread-trio img {
width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--border);
display: block;
}
@media (max-width: 800px) {
.sal-spread-trio { grid-template-columns: 1fr; gap: 14px; }
}
/* 2x2 grid of spreads (used for issue highlight collections) */
.sal-spread-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 24px 0 56px;
}
.sal-spread-grid-2 img {
width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--border);
display: block;
}
@media (max-width: 600px) {
.sal-spread-grid-2 { grid-template-columns: 1fr; }
}
/* Two single-page (portrait) pages side by side */
.sal-page-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 720px;
margin: 32px auto 56px;
}
.sal-page-pair img {
width: 100%;
height: auto;
border-radius: 3px;
border: 1px solid var(--border);
display: block;
}
@media (max-width: 600px) {
.sal-page-pair { grid-template-columns: 1fr; max-width: 360px; }
}
/* ══════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Horizontal page padding handled by --page-x rebinding above. */
.hero-text { padding-bottom: 60px; }
.featured-list { grid-template-columns: 1fr; }
.featured-item--wide {
grid-template-columns: 1fr;
min-height: 0;
direction: ltr;
}
.featured-item-img { aspect-ratio: 4 / 3; min-height: 0; }
.featured-item--wide .featured-item-img { aspect-ratio: 4 / 3; height: auto; }
.featured-item-content { padding: 32px var(--page-x) 40px; }
.featured-item--wide .featured-item-content { padding: 32px var(--page-x) 40px; }
.nav-dropdown-menu { left: auto; right: 0; transform: translateY(-4px); }
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu { transform: translateY(0); }
.about-skills { grid-template-columns: 1fr 1fr; }
.gallery-grid { columns: 2; padding: 16px var(--gallery-x) 32px; }
.gallery-grid--slides { columns: 2; }
.gallery-grid--pairs { columns: 2; }
.gallery-section-title { padding-bottom: 8px; }
.gallery-section { padding: 48px 0 16px; }
.case-study-images.landscape { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════
HOVER — only fire on devices that support true hover
(prevents stuck hover states on iOS/Android tap)
══════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
/* Image zoom — guards against stuck hover state on touch tap */
.featured-item:hover .featured-item-img img { transform: scale(1.04); }
/* Gallery interactions */
.gallery-grid img:hover { transform: scale(1.025); opacity: 1; }
.gallery-row img:hover { opacity: 0.72; }
.series-slideshow-img.is-active:hover { opacity: 0.85; }
/* Tags */
.tag:hover { border-color: var(--text-2); color: var(--text); }
/* Project nav */
.project-nav-item--prev:hover .project-nav-title,
.project-nav-item--next:hover .project-nav-title { color: var(--blue); }
.project-nav-item--prev:hover .project-nav-arrow { transform: translateX(-5px); color: var(--text); }
.project-nav-item--next:hover .project-nav-arrow { transform: translateX(5px); color: var(--text); }
}
/* ══════════════════════════════════════════════
REDUCED MOTION
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
.hero-title .char { opacity: 1; transform: none; }
.marquee-track { animation: none; }
.hero-arrow { animation: none; }
}
@media (max-width: 600px) {
/* Horizontal page padding handled by --page-x rebinding above. */
.about-now-grid { grid-template-columns: 1fr; }
.about-now-item { border-right: none !important; }
.about-skills { grid-template-columns: 1fr; }
.gallery-grid { columns: 1; }
.hero { min-height: 520px; }
.hero-text { padding-bottom: 48px; }
/* Project nav stacks vertically on mobile */
.project-nav { grid-template-columns: 1fr; }
.project-nav-item--prev { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; }
.project-nav-item--next { align-items: flex-start; text-align: left; padding-left: 0; }
}
/* ══════════════════════════════════════════════
LIGHTBOX
══════════════════════════════════════════════ */
.lightbox {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
flex-direction: column;
background: rgba(7, 11, 18, 0.97);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.lightbox.is-open {
opacity: 1;
pointer-events: all;
}
/* Header */
.lb-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px 24px 12px;
flex-shrink: 0;
}
.lb-title {
font-family: 'Barlow', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: rgba(240, 240, 238, 0.95);
letter-spacing: 0.02em;
}
.lb-count {
font-size: 0.75rem;
color: rgba(240, 240, 238, 0.4);
margin-top: 3px;
font-family: 'Source Code Pro', monospace;
}
.lb-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.lb-btn {
width: 38px;
height: 38px;
border: 1px solid rgba(240, 240, 238, 0.18);
border-radius: 6px;
background: rgba(240, 240, 238, 0.06);
color: rgba(240, 240, 238, 0.8);
cursor: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lb-btn:hover {
background: rgba(240, 240, 238, 0.12);
border-color: rgba(240, 240, 238, 0.38);
color: rgba(240, 240, 238, 1);
}
/* Stage */
.lb-stage {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 72px;
}
.lb-img-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.lb-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 3px;
transition: opacity 0.18s ease;
user-select: none;
}
.lb-img.is-fading { opacity: 0; }
.lb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 1px solid rgba(240, 240, 238, 0.18);
border-radius: 6px;
background: rgba(7, 11, 18, 0.55);
color: rgba(240, 240, 238, 0.8);
cursor: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.lb-arrow:hover {
background: rgba(240, 240, 238, 0.12);
border-color: rgba(240, 240, 238, 0.38);
color: rgba(240, 240, 238, 1);
}
.lb-arrow--prev { left: 16px; }
.lb-arrow--next { right: 16px; }
/* Thumbnail strip */
.lb-strip {
flex-shrink: 0;
padding: 10px 16px 16px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: 6px;
scrollbar-width: none;
scroll-behavior: smooth;
border-top: 1px solid rgba(240, 240, 238, 0.07);
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 4px;
overflow: hidden;
cursor: none;
border: 2px solid transparent;
background: none;
padding: 0;
transition: border-color 0.15s ease, opacity 0.15s ease;
opacity: 0.4;
}
.lb-thumb:hover { opacity: 0.75; }
.lb-thumb.is-active {
border-color: rgba(240, 240, 238, 0.85);
opacity: 1;
}
.lb-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Gallery images become clickable */
.gallery-spotlight img,
.gallery-grid img,
.gallery-section img,
.series-slideshow img,
.gallery-feature img {
cursor: zoom-in;
}
/* Mobile */
@media (max-width: 768px) {
.lb-stage { padding: 0 48px; }
.lb-arrow--prev { left: 6px; }
.lb-arrow--next { right: 6px; }
.lb-thumb { width: 50px; height: 50px; }
.lb-header { padding: 16px 16px 10px; }
}
/* ══════════════════════════════════════════════
Design DNA overlay (home page)
══════════════════════════════════════════════ */
/* Trigger button — matches theme-toggle shape, sits to its left */
.dna-trigger {
gap: 6px;
cursor: pointer;
}
.dna-trigger-icon {
display: inline-block;
font-size: 0.8rem;
color: var(--pink);
transition: transform 0.3s ease;
}
.dna-trigger:hover .dna-trigger-icon { transform: rotate(90deg); }
.dna-trigger-label { letter-spacing: 0.08em; }
/* Overlay container */
.dna-overlay {
position: fixed;
inset: 0;
z-index: 2000;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
}
.dna-overlay.is-open { pointer-events: auto; opacity: 1; }
.dna-overlay[aria-hidden="false"] .dna-panel { transform: translateY(0) scale(1); }
.dna-overlay-scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.dna-panel {
position: absolute;
inset: 0;
overflow-y: auto;
padding: clamp(24px, 5vw, 64px);
transform: translateY(24px) scale(0.98);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
max-width: 1400px;
margin: 0 auto;
}
.dna-panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: clamp(24px, 3vw, 40px);
max-width: var(--max-w);
margin-left: auto;
margin-right: auto;
}
.dna-eyebrow {
font-family: 'Source Code Pro', monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 8px;
}
.dna-title {
font-family: 'DM Serif Display', serif;
font-size: clamp(2.2rem, 5vw, 3.4rem);
line-height: 1;
color: var(--text);
font-weight: 400;
}
.dna-title em {
font-style: italic;
color: var(--pink);
}
.dna-close {
background: none;
border: 1px solid var(--border);
border-radius: 999px;
width: 44px;
height: 44px;
font-size: 1.4rem;
line-height: 1;
color: var(--text-2);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.2s, color 0.2s, transform 0.3s ease;
}
.dna-close:hover {
color: var(--text);
border-color: var(--text-2);
transform: rotate(90deg);
}
/* Bento grid */
.dna-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 16px;
max-width: var(--max-w);
margin: 0 auto;
}
.dna-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.25s ease;
}
.dna-overlay.is-open .dna-card {
opacity: 1;
transform: translateY(0);
}
/* Stagger cards */
.dna-overlay.is-open .dna-card:nth-child(1) { transition-delay: 0.05s; }
.dna-overlay.is-open .dna-card:nth-child(2) { transition-delay: 0.12s; }
.dna-overlay.is-open .dna-card:nth-child(3) { transition-delay: 0.19s; }
.dna-overlay.is-open .dna-card:nth-child(4) { transition-delay: 0.26s; }
.dna-overlay.is-open .dna-card:nth-child(5) { transition-delay: 0.33s; }
.dna-overlay.is-open .dna-card:nth-child(6) { transition-delay: 0.40s; }
.dna-card:hover { border-color: var(--text-2); }
.dna-card--colors { grid-column: span 2; grid-row: span 2; }
.dna-card--fonts { grid-column: span 2; }
.dna-card--playground { grid-column: span 2; }
.dna-card--scale { grid-column: span 2; }
.dna-card--radii { grid-column: span 1; }
.dna-card--ui { grid-column: span 1; }
.dna-card-head { display: flex; flex-direction: column; gap: 4px; }
.dna-card-kicker {
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
}
.dna-card-title {
font-family: 'DM Serif Display', serif;
font-size: 1.5rem;
line-height: 1.1;
color: var(--text);
font-weight: 400;
}
.dna-card-desc {
font-family: 'Barlow', sans-serif;
font-size: 0.88rem;
color: var(--text-2);
line-height: 1.4;
}
.dna-card-desc code {
font-family: 'Source Code Pro', monospace;
font-size: 0.82rem;
padding: 1px 5px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
}
/* ── Colors card ── */
.dna-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 10px;
}
.dna-swatch {
position: relative;
aspect-ratio: 1;
border-radius: 12px;
border: 1px solid var(--border);
cursor: pointer;
overflow: hidden;
transition: transform 0.25s ease;
background: var(--swatch);
padding: 0;
}
.dna-swatch:hover { transform: translateY(-2px) scale(1.03); }
.dna-swatch-meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 6px 8px;
font-family: 'Source Code Pro', monospace;
font-size: 0.62rem;
letter-spacing: 0.04em;
color: #fff;
text-align: left;
background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
display: flex;
justify-content: space-between;
gap: 4px;
}
.dna-swatch[data-light="true"] .dna-swatch-meta {
color: var(--text);
background: linear-gradient(to top, rgba(255,255,255,0.7), transparent);
}
.dna-swatch-name { text-transform: uppercase; }
.dna-swatch-hex { opacity: 0.85; }
.dna-color-preview {
position: relative;
margin-top: auto;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg);
}
.dna-color-preview-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.1);
transition: filter 0.4s ease;
}
.dna-color-preview-tint {
position: absolute;
inset: 0;
background: var(--tint, transparent);
mix-blend-mode: multiply;
opacity: 0;
transition: opacity 0.35s ease, background 0.35s ease;
}
[data-theme="dark"] .dna-color-preview-tint { mix-blend-mode: screen; }
.dna-color-preview.is-tinted .dna-color-preview-tint { opacity: 0.85; }
.dna-color-preview.is-tinted .dna-color-preview-img { filter: grayscale(0.7) contrast(1.15); }
.dna-color-preview-label {
position: absolute;
left: 12px;
bottom: 10px;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
z-index: 2;
}
/* ── Fonts card ── */
.dna-fonts {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 8px;
}
.dna-font {
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: default;
background: var(--bg);
transition: border-color 0.2s, transform 0.2s;
}
.dna-font:hover { border-color: var(--text-2); }
.dna-font-meta {
font-family: 'Source Code Pro', monospace;
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--text-2);
text-transform: uppercase;
}
.dna-font-sample {
font-size: 3.6rem;
line-height: 1;
color: var(--text);
margin: 8px 0 4px;
display: inline-block;
transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.dna-font[data-jitter="true"]:hover .dna-font-sample {
font-style: italic;
color: var(--pink);
animation: dna-jitter 0.5s ease infinite;
}
@keyframes dna-jitter {
0%, 100% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(-1px, 1px) rotate(-2deg); }
50% { transform: translate(1px, -1px) rotate(1deg); }
75% { transform: translate(-1px, -1px) rotate(-1deg); }
}
.dna-font-use {
font-family: 'Barlow', sans-serif;
font-size: 0.78rem;
color: var(--text-2);
}
/* ── Playground card ── */
.dna-playground {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.dna-playground-text {
font-size: clamp(1.4rem, 2.6vw, 2rem);
line-height: 1.15;
color: var(--text);
padding: 14px 16px;
border: 1px dashed var(--border);
border-radius: 12px;
outline: none;
min-height: 3em;
transition: border-color 0.2s;
cursor: text;
}
.dna-playground-text:focus {
border-color: var(--pink);
border-style: solid;
}
.dna-playground-text.is-italic { font-style: italic; }
.dna-playground-controls {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dna-chip {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 12px;
font-family: 'Source Code Pro', monospace;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--text-2);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.dna-chip:hover { color: var(--text); border-color: var(--text-2); }
.dna-chip.is-active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* ── Scale card ── */
.dna-scale {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.dna-scale-row {
display: grid;
grid-template-columns: 42px 1fr 40px;
align-items: center;
gap: 10px;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
color: var(--text-2);
}
.dna-scale-bar {
height: 8px;
background: var(--text);
border-radius: 4px;
opacity: 0.85;
transition: width 0.3s ease;
}
.dna-scale-row:hover .dna-scale-bar { background: var(--pink); }
.dna-scale-px { text-align: right; color: var(--text); }
/* ── Radii card ── */
.dna-radii {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
flex: 1;
}
.dna-radius {
position: relative;
aspect-ratio: 1;
border: 1.5px solid var(--text);
border-radius: var(--r);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Code Pro', monospace;
font-size: 0.7rem;
color: var(--text-2);
transition: background 0.2s, color 0.2s;
}
.dna-radius:hover {
background: var(--text);
color: var(--bg);
}
/* ── UI card ── */
.dna-ui-grid {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.dna-sample-btn {
background: none;
cursor: pointer;
font-family: 'Barlow', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
transition: all 0.2s;
}
.dna-sample-btn--pill {
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 13px;
color: var(--text-2);
}
.dna-sample-btn--pill:hover { border-color: var(--text-2); color: var(--text); }
.dna-sample-btn--ghost {
border: none;
padding: 4px 0;
color: var(--text);
font-weight: 600;
border-bottom: 1px solid var(--text);
border-radius: 0;
}
.dna-sample-btn--ghost:hover { color: var(--pink); border-bottom-color: var(--pink); }
.dna-sample-tag {
font-family: 'Source Code Pro', monospace;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
padding: 4px 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
}
.dna-sample-dot {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 20%, transparent);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.dna-bento { grid-template-columns: repeat(2, 1fr); }
.dna-card--colors { grid-column: span 2; grid-row: span 2; }
.dna-card--fonts { grid-column: span 2; }
.dna-card--playground { grid-column: span 2; }
.dna-card--scale { grid-column: span 2; }
.dna-card--radii { grid-column: span 1; }
.dna-card--ui { grid-column: span 1; }
.dna-fonts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.dna-bento { grid-template-columns: 1fr; gap: 12px; }
.dna-card, .dna-card--colors, .dna-card--fonts, .dna-card--playground,
.dna-card--scale, .dna-card--radii, .dna-card--ui { grid-column: 1 / -1; grid-row: auto; }
.dna-panel { padding: 20px; }
.dna-trigger-label { display: none; }
.dna-font-sample { font-size: 2.6rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.dna-overlay, .dna-panel, .dna-card,
.dna-color-preview-img, .dna-color-preview-tint { transition: none; }
.dna-font[data-jitter="true"]:hover .dna-font-sample { animation: none; }
}