/* ──────────────────────────────────────────────────────────────────
Site styles — "Dust & Terminal" + flowers + hand-drawn frames.
────────────────────────────────────────────────────────────────── */
/* Art Nuvo — used for big display moments ("projects.", "— talking is free.") */
@font-face {
font-family: "Art Nuvo";
src: url("assets/fonts/Art-nuvo.otf") format("opentype");
font-display: swap;
font-weight: 400;
font-style: normal;
}
:root {
--dust: rgb(238, 213, 207);
--dust-soft: rgb(244, 226, 222);
--dust-deep: rgb(220, 193, 187);
--paper: rgb(252, 245, 242);
--ivory: rgb(251, 249, 248);
--sky: rgb(173, 207, 220);
--sky-soft: rgb(202, 224, 232);
--sky-deep: rgb(110, 158, 178);
--earth: rgb(186, 142, 130);
--ink: rgb(34, 28, 30);
--ink-warm: rgb(45, 36, 36);
--mauve: rgb(125, 86, 92);
--mauve-deep: rgb(82, 56, 60);
--mauve-ash: rgb(150, 122, 124);
--mauve-line: rgba(125, 86, 92, 0.22);
--rose-line: rgba(125, 86, 92, 0.36);
--serif: "Fraunces", "Source Serif 4", Georgia, serif;
--serif-text: "Fraunces", "Source Serif 4", Georgia, serif;
--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
--hand: "Caveat", "Permanent Marker", cursive;
--gut: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--dust);
color: var(--ink);
font-family: var(--mono);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
@media (max-width: 720px) { :root { --gut: 22px; } }
::selection { background: var(--mauve); color: var(--paper); }
.it { font-style: italic; color: var(--mauve-deep); }
.eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mauve-ash);
display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--mauve-ash); }
.h1 {
font-family: var(--serif); font-weight: 400;
font-size: clamp(40px, 5.4vw, 64px);
line-height: 1.05; letter-spacing: -0.018em; margin: 0;
}
.h1 .it { font-style: italic; color: var(--mauve-deep); }
/* Hand-drawn display moment — only contact "-- talking is free." stays Caveat.
The work-page title now uses a mixed-font filename treatment (.work-h1) below. */
.contact h2 {
font-family: "Caveat", "Permanent Marker", cursive;
font-weight: 700;
letter-spacing: 0;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.05;
}
.contact h2 .it {
font-style: normal;
color: var(--mauve-deep);
}
.h2 {
font-family: var(--serif); font-weight: 400;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.18; letter-spacing: -0.01em; margin: 0;
}
/* ── HEADER ───────────────────────────────────────── */
header.site {
position: sticky; top: 0; z-index: 20;
background: transparent;
backdrop-filter: none;
/* Force own compositing layer so the backdrop-filter pass doesn't
resample mid-scroll (was causing brief washed-text frames + visible
scanline banding bleed-through from the hero's 2px CRT overlay). */
will-change: background-color, backdrop-filter;
transform: translateZ(0);
transition:
background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
border-bottom: 1px solid transparent;
}
/* Once the page scrolls past the fold, the header gains a near-opaque
dust backdrop + light blur. The bg is at 0.94 (was 0.78) so the heavy
high-frequency content behind it (CRT scanlines, pollen sprites) can't
bleed through and band the blur pass. Blur reduced to 6px and saturate
removed for the same reason. */
header.site.is-stuck {
background: rgba(238, 213, 207, 0.94); /* var(--dust) at 0.94 */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 0 rgba(125, 86, 92, 0.10);
border-bottom-color: var(--mauve-line);
}
/* In stuck state, brand-name + nav-cta switch from white-on-sky to ink-on-dust
so they stay legible over the warm backdrop. */
header.site.is-stuck .brand-name { color: var(--ink); text-shadow: none; }
header.site.is-stuck .nav-cta {
color: var(--ink);
border-color: rgba(34, 28, 30, 0.45);
background: rgba(255,255,255,0.18);
}
header.site.is-stuck .nav-cta:hover {
background: rgba(34, 28, 30, 0.85);
color: #fff;
border-color: rgba(34, 28, 30, 0.85);
}
.nav {
height: 60px;
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 24px;
font-family: var(--mono); font-size: 12px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none;
/* header sits over the sky video — text reads white with a subtle shadow */
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
font-family: 'Special Elite', 'Courier Prime', var(--mono);
font-family: var(--mono); font-size: 12.5px;
}
/* sync the color flip with the header bg fade — prevents a stale-color
flash when scrolling past the 80px threshold (was: white text strobing
on dust pink for ~200ms while bg was still visible). */
.brand-name {
font-family: 'Special Elite', 'Courier Prime', var(--mono);
letter-spacing: 0.02em;
color: #fff;
transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
text-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brand .mark-ascii {
display: inline-grid; place-items: center;
width: 36px; height: 36px;
flex: none;
/* override .mark's circle outline — the ASCII rose stands on its own over the sky */
border: none !important;
background: transparent !important;
transition: transform 0.3s ease;
}
.brand:hover .mark-ascii { transform: rotate(-6deg) scale(1.05); }
.brand .mark-ascii svg { width: 100%; height: 100%; overflow: visible; }
.brand .mark-ascii svg text { font-family: 'JetBrains Mono', monospace; }
.brand .mark {
display: inline-grid; place-items: center;
width: 22px; height: 22px;
border: 1px solid var(--mauve);
color: var(--mauve);
font-size: 9.5px; border-radius: 999px;
transition: all 200ms ease;
}
.brand .mark:hover {
background: var(--mauve);
color: var(--paper);
transform: rotate(8deg);
}
nav.links { display: flex; gap: 14px; justify-content: center; font-size: 12px; align-items: baseline; }
nav.links a {
color: var(--mauve-ash); text-decoration: none;
padding: 6px 2px; transition: color 200ms ease;
}
nav.links a:hover, nav.links a.active { color: var(--ink); }
/* dot separator between links (matches footer's "home · work" pattern) */
nav.links a + a::before { content: "· "; opacity: 0.55; margin-right: 6px; color: var(--mauve-ash); }
.nav-meta {
font-size: 11px; color: var(--mauve-ash);
display: inline-flex; align-items: center; gap: 8px;
}
/* ─── Nav promo slot ──────────────────────────────────────────────────
When .nav-meta carries a promo link beneath it, stack the rows.
Top row = available + [contact]; bottom row = the rotating promo.
This spot is meant to feature whatever quirky thing Bryan shipped
most recently — swap the .nav-promo's text + href when you update. */
.nav-meta.has-promo {
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.nav-meta.has-promo .nav-meta-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.nav-promo {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: 'Special Elite', 'Courier Prime', var(--mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--mauve-ash);
text-decoration: none;
transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-promo .nav-promo-eyebrow {
font-family: var(--mono);
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
/* Same green as the hero stem + cursor block — signals "fresh / growing". */
color: oklch(0.62 0.14 138);
}
.nav-promo:hover { color: var(--ink); transform: translateX(-2px); }
header.site.is-stuck .nav-promo { color: var(--mauve-deep); }
header.site.is-stuck .nav-promo:hover { color: var(--ink); }
/* contact CTA — small bracketed mono button to the right of the available pip,
matches the brand-name color (#fff) so it reads as a primary action over the
sky. Hover deepens the bg + lifts the underline. */
.nav-cta {
font-family: 'Special Elite', 'Courier Prime', var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: #fff;
text-decoration: none;
padding: 5px 12px;
margin-left: 14px;
border: 1px solid rgba(255,255,255,0.55);
border-radius: 2px;
background: rgba(255,255,255,0.06);
/* match the header bg fade timing/easing so the pill's color, border,
and bg all flip together with the dust backdrop (no stale-state flash). */
transition:
color 200ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-cta::before { content: "["; margin-right: 2px; opacity: 0.55; }
.nav-cta::after { content: "]"; margin-left: 2px; opacity: 0.55; }
.nav-cta:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.85);
}
/* Contact page + case pages sit on paper/cream bg, so the white-on-white
nav-cta becomes invisible. Flip to ink-on-light when the body wraps a
.cx-page (contact) OR a .case-head (any case-study page). */
body:has(.cx-page) .nav-cta,
body:has(.case-head) .nav-cta {
color: var(--ink);
border-color: rgba(34, 28, 30, 0.45);
background: rgba(255, 255, 255, 0.18);
}
body:has(.cx-page) .nav-cta:hover,
body:has(.case-head) .nav-cta:hover {
background: rgba(34, 28, 30, 0.85);
color: #fff;
border-color: rgba(34, 28, 30, 0.85);
}
.nav-meta .dot {
width: 9px; height: 9px; border-radius: 50%;
background: rgb(216, 178, 86);
box-shadow: 0 0 6px rgba(216,178,86,0.55);
position: relative;
box-shadow: 0 0 0 4px rgba(96,142,110, 0.18);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(96,142,110, 0.18); }
50% { box-shadow: 0 0 0 7px rgba(96,142,110, 0.06); }
}
@media (max-width: 720px) {
.nav { grid-template-columns: auto auto; }
nav.links { display: none; }
}
/* ── HAND-DRAWN primitives ────────────────────────── */
.hand-btn {
font-family: var(--mono); font-size: 11px;
background: transparent; border: none;
color: var(--mauve);
padding: 7px 14px; cursor: pointer;
position: relative;
}
.hand-btn::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
.hand-btn:hover { color: var(--ink); }
/* ── HERO ─────────────────────────────────────────── */
.hero-wrap { padding: 0; position: relative; }
.hero-wrap > .container { padding-top: 40px; padding-bottom: 24px; }
.hero-prelude {
display: flex; flex-wrap: wrap; gap: 16px 28px;
align-items: center;
font-size: 12px; letter-spacing: 0.04em;
color: var(--mauve-ash); margin-bottom: 24px;
}
.hero-prelude .label { color: var(--mauve); }
.hero-prelude .it { color: var(--mauve-deep); }
/* The terminal command IS the headline of the animation. The blinking
cursor is the SEED — the bouquet grows UPWARD out of it, so the cursor
sits at the TOP of this element (the bouquet's bottom-center anchor). */
.hero-prelude--anchor {
position: relative;
margin: 0;
width: 100%;
padding: 0;
/* Three-part flex: [left half | cursor | right half]. The cursor block
is the centerpiece (= the bouquet's stem-anchor pixel). The two
halves flex to equal width on either side of it; their contents
gravitate toward the cursor (left half right-aligned, right half
left-aligned), so the line balances around center. */
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: clamp(15px, 1.4vw, 20px);
letter-spacing: 0;
line-height: 1.1;
color: var(--ink);
z-index: 5;
}
.hero-prelude--anchor .hp-half {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 0.6em;
white-space: nowrap;
overflow: visible;
}
.hero-prelude--anchor .hp-half-left {
justify-content: flex-end; /* command text ENDS at the cursor */
padding-right: 6px;
}
.hero-prelude--anchor .hp-half-right {
/* Elegant manifesto register — serif display italic, white like the
brand-name in the top-left nav so the punchline reads bright against
the sky video. Soft glow on emph state. */
justify-content: flex-start;
padding-left: 14px;
font-family: "Fraunces", "Source Serif 4", Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 1.04em;
letter-spacing: 0.012em;
line-height: 1;
color: #ffffff;
opacity: 0;
transform: translateY(2px);
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
color 800ms ease,
text-shadow 800ms ease,
letter-spacing 800ms ease;
}
.hero-prelude--anchor .hp-half-right .hp-tail {
/* Empty before the first char arrives — fade-in only triggers when
content exists. Drives off the .hp-half-right opacity transition. */
white-space: pre;
}
.hero-prelude--anchor .hp-half-right:has(.hp-tail:not(:empty)) {
opacity: 0.92;
transform: translateY(0);
}
.hero-prelude--anchor .hp-half-right.is-emph {
opacity: 1;
color: #ffffff;
letter-spacing: 0.02em;
text-shadow:
0 0 10px rgba(255, 255, 255, 0.55),
0 0 22px rgba(252, 232, 220, 0.32),
0 1px 0 rgba(125, 86, 92, 0.35);
}
.hero-prelude--anchor .hp-tail-flag {
font-family: var(--mono);
font-style: normal;
font-weight: 500;
font-size: 0.74em;
color: var(--mauve-ash);
letter-spacing: 0;
margin-right: 0.18em;
position: relative;
top: -0.12em;
}
.hero-prelude--anchor .hp-tail {
font-weight: 400;
}
.hero-prelude--anchor .label {
color: var(--mauve-ash);
font-size: 0.78em;
letter-spacing: 0.04em;
font-weight: 400;
margin-right: 0.6em;
}
.hero-prelude--anchor .it {
font-size: 0.85em;
font-weight: 400;
}
.hp-cmd {
display: inline-flex;
align-items: baseline;
position: relative;
white-space: pre;
}
.hp-prompt {
color: var(--mauve);
margin-right: 4px;
font-weight: 600;
}
.hp-cursor {
display: inline-block;
width: 0.55em;
height: 1.05em;
background: var(--mauve);
margin-left: 4px;
transform: translateY(0.16em);
animation: hpBlink 1.05s steps(2) infinite;
position: relative;
z-index: 5;
box-shadow:
0 0 0 1px rgba(217, 119, 137, 0.4),
0 0 12px rgba(217, 119, 137, 0.55),
0 0 28px rgba(217, 119, 137, 0.25);
}
.hp-cursor.is-parked {
animation: hpBlinkSlow 1.6s ease-in-out infinite;
background: oklch(0.62 0.14 138); /* shifts to the stem-green so it
feels like the seed of growth */
box-shadow:
0 0 0 1px rgba(110, 160, 110, 0.45),
0 0 14px rgba(110, 160, 110, 0.55),
0 0 32px rgba(110, 160, 110, 0.30);
}
@keyframes hpBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes hpBlinkSlow {
0%, 100% { opacity: 1; transform: translateY(0.16em) scale(1); }
50% { opacity: 0.7; transform: translateY(0.16em) scale(0.94); }
}
.hp-tail {
display: inline-block;
margin-left: 6px;
white-space: nowrap;
/* Inherit color from .hero-prelude--anchor .hp-half-right (#fff). The
legacy mauve-deep color was overriding that more-specific rule due
to direct class targeting on the span itself. */
color: inherit;
font-style: italic;
transition: color 600ms ease, text-shadow 600ms ease, letter-spacing 600ms ease;
}
.hp-tail--emph {
color: var(--mauve);
font-weight: 600;
letter-spacing: 0.005em;
text-shadow: 0 0 12px rgba(217, 119, 137, 0.45);
}
/* ── BOUQUET BREEZE — sway group rotates around the cursor anchor;
each bloom adds its own micro-bob with staggered timings so they
don't move in lockstep. Reads as breath in a light breeze. ── */
.bouquet-sway {
/* transform-box: view-box pivots transform-origin (0 0) at the SVG
viewBox origin = the cursor anchor in growth coords. With the
default fill-box, rotation pivoted around the bouquet's bbox
top-left and shoved everything downward — that's what made the
bouquet look "stuck at the bottom". view-box pivots at the cursor
pixel where it should. */
transform-origin: 0 0;
transform-box: view-box;
animation: bouquet-sway 6.4s ease-in-out infinite;
will-change: transform;
}
.bouquet-bloom {
/* Per-bloom micro-bob using the rotate longhand so it composes with
the slot's translate longhand below, instead of the legacy `transform`
overwriting positioning during the animation. */
animation: bouquet-bloom-sway 5.8s ease-in-out infinite;
transform-origin: 50% 80%; /* pivot near the bottom of the bloom (where the stem meets it) */
will-change: rotate;
}
.bouquet-bloom--L { animation-delay: -1.1s; animation-duration: 6.6s; }
.bouquet-bloom--M { animation-delay: -2.7s; animation-duration: 6.0s; }
.bouquet-bloom--R { animation-delay: -0.4s; animation-duration: 7.2s; }
@keyframes bouquet-sway {
0%, 100% { transform: rotate(-0.7deg); }
25% { transform: rotate( 0.5deg); }
50% { transform: rotate(-0.3deg); }
75% { transform: rotate( 0.9deg); }
}
@keyframes bouquet-bloom-sway {
/* Independent rotate longhand so it composes with the slot's
translate without overwriting positioning. */
0%, 100% { rotate: -1.2deg; }
50% { rotate: 1.4deg; }
}
@media (prefers-reduced-motion: reduce) {
.bouquet-sway, .bouquet-bloom { animation: none !important; }
}
/* ── BLOOM OVERLAY — the 3 ASCII flowers, absolutely positioned
ABOVE the stem SVG. Each .bloom-slot sits at a fixed top + horizontal
offset relative to the column. Tunable independently of the SVG
viewBox math (the unlock that fixed "stuck at the bottom").
Positioning uses the `translate:` longhand instead of the legacy
`transform: translateX(...)` so the per-bloom rotate animation on
.bouquet-bloom doesn't clobber it (transforms can't compose; the
independent props can). ── */
.bloom-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3; /* above stems, below terminal cursor block */
}
.bloom-slot {
position: absolute;
left: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* Tight bouquet cluster — sea rose left + peony right pulled in close
to the hydrangea centerpiece, with enough overlap to read as one
tied bunch instead of three drifting flowers. */
/* Symmetric mirror layout — every L bloom has an R twin at matching y.
Layer stack: hydrangeas behind (z:1-2), sea roses in front (z:3-4)
so the petal flowers always sit on top of the cluster blooms. */
.bloom-slot--M { top: 4%; translate: calc(-50% + 0vw) 0; z-index: 1; } /* hydrangea centerpiece — back */
.bloom-slot--L { top: 22%; translate: calc(-50% - 8vw) 0; z-index: 4; } /* sea rose — front */
.bloom-slot--R { top: 22%; translate: calc(-50% + 8vw) 0; z-index: 4; } /* sea rose — front */
/* Black-eyed susan fillers — scattered at varied heights and sides so
the yellow accents weave through the bouquet, not in a single row.
z-index 4 so they layer in front of the main blooms at their levels.
Each gets a small rotation so they don't read as perfect circles. */
/* Two-color bouquet — diagonal balance:
• Hydrangeas: M (top-center, big) + HF (lower-right, smaller)
• Sea roses : L (upper-left, big) + R (upper-right, big) + SL2 (low-left, small)
The lower-right small hydrangea balances the lower-left small sea rose,
and the upper sea-rose pair frames the centerpiece hydrangea. */
/* Upper-shoulder sea-rose mirror pair — front-most layer (z:5) so
they sit on top of the hydrangea centerpiece. */
.bloom-slot--SM1 {
top: 14%; translate: calc(-50% - 5vw) 0;
z-index: 5;
rotate: -10deg;
}
.bloom-slot--SM2 {
top: 14%; translate: calc(-50% + 5vw) 0;
z-index: 5;
rotate: 10deg;
}
/* Lower hydrangea mirror pair — z:2 so they sit above the centerpiece
hydrangea (M, z:1) but BEHIND any sea rose layer (z:3+). */
.bloom-slot--HL {
top: 38%; translate: calc(-50% - 4vw) 0;
z-index: 2;
rotate: -10deg;
}
.bloom-slot--HR {
top: 38%; translate: calc(-50% + 4vw) 0;
z-index: 2;
rotate: 10deg;
}
.bloom-svg { display: block; }
/* Right-slot bloom tilts outward (top leans right, away from the
hydrangea) so the right side of the bouquet reads as a flower
angled toward the viewer rather than a square panel. Rotation
lives on the INNER svg so it composes with the slot's translate
AND the bouquet-bloom bob on the outer .bloom-slot wrapper.
Pivot at the calyx (bottom). */
.bloom-slot--R .bloom-svg {
rotate: 38deg;
transform-origin: 50% 92%;
}
/* — garden — three flowers in shared earth — */
.hero-garden-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
/* pull the stage up under the sticky 60px header so the sky video
paints behind it instead of letting body --dust show through */
margin: -60px auto 0;
}
.garden-stage {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 600px;
max-height: 900px;
padding: 0;
overflow: hidden;
}
.garden-sky-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: 0;
/* Soft fade to the page color — feathered top + long tapered bottom so
the sky dissolves into the dust-pink page bg instead of cutting off
in a hard line. Mirrored on the top for a clean blend under the
translucent sticky header too. */
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.55) 6%,
rgba(0,0,0,1) 16%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,0.78) 65%,
rgba(0,0,0,0.40) 82%,
rgba(0,0,0,0.10) 94%,
rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.55) 6%,
rgba(0,0,0,1) 16%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,0.78) 65%,
rgba(0,0,0,0.40) 82%,
rgba(0,0,0,0.10) 94%,
rgba(0,0,0,0) 100%);
}
/* (Note: the canonical .garden-sky-video-el rule lives further down — opacity 0.55,
serene-blue filter. The legacy rule that was here is removed as dead code.) */
.garden-bouquet-col {
/* Stems + terminal stack at the BOTTOM of the column. Blooms are a
separate overlay (.bloom-layer) absolutely positioned over the
whole column. flex-end + padding-bottom is the handoff value —
center alignment (the v2 default) shrunk the stem SVG visibly. */
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0;
width: 100%;
height: 100%;
max-width: 1500px;
padding-bottom: 4vh;
}
.garden-bouquet-col .garden {
/* relative — anchors the absolute .bloom-layer inside */
position: relative;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 auto;
min-height: 0;
}
/* Stem SVG only — blooms overlay separately via .bloom-layer */
.garden-bouquet-col .garden svg.bouquet {
width: 100%;
height: 100%;
max-height: 88vh;
}
.garden-bouquet-col .hero-prelude--anchor {
/* Pull the cursor line UP into the SVG's bottom padding so the green
CLI cursor block sits flush with the bottom of the pixel stem —
the stem visibly grows out of the cursor (it IS the seed point). */
margin-top: -56px;
flex: 0 0 auto;
/* and above the stems for the seam-overlap to read clean */
position: relative;
z-index: 6;
}
.garden {
position: relative;
margin: 0 auto;
max-width: 100%;
}
.garden svg {
max-width: 100%;
height: auto;
}
.garden-sky {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 30%,
rgba(252, 245, 242, 0.65) 0%,
rgba(252, 245, 242, 0) 65%);
pointer-events: none;
z-index: 0;
}
/* sky video styles defined earlier (full-bleed cover); element + grain layers below */
.garden-sky-video-el {
width: 100%;
height: 100%;
object-fit: cover;
/* original dust-tinted look — barely visible behind the page, with a
grayscale + multiply blend that ties into the rose/cream palette. */
opacity: 0.18;
filter: grayscale(0.65) contrast(1.05) brightness(1.10) saturate(0.75);
mix-blend-mode: multiply;
}
/* VHS grain — subtle static + scanlines that match the rose/cream page
palette. Lighter than the heavy multiply pass; just enough to read as
"old TV" without fighting the bouquet. */
.garden-sky-vhs {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.65;
/* multiply so the dark scanline stripes darken anything underneath
(page bg, faded sky, bouquet) — visible on every background. */
mix-blend-mode: multiply;
/* match the sky-video mask so the static fades to the page bg too */
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.55) 6%,
rgba(0,0,0,1) 16%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,0.78) 65%,
rgba(0,0,0,0.40) 82%,
rgba(0,0,0,0.10) 94%,
rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.55) 6%,
rgba(0,0,0,1) 16%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,0.78) 65%,
rgba(0,0,0,0.40) 82%,
rgba(0,0,0,0.10) 94%,
rgba(0,0,0,0) 100%);
background-image:
/* horizontal CRT scanlines — 2px pitch, dark stripes that bake in
via multiply blend on any underlying color (page-pink, sky video,
bouquet edges). Light stripe is near-white = passthrough, so only
the dark band renders as a visible line. */
repeating-linear-gradient(
0deg,
rgba(40, 20, 28, 0.55) 0px,
rgba(40, 20, 28, 0.55) 1px,
rgba(255, 255, 255, 1.0) 1px,
rgba(255, 255, 255, 1.0) 2px
),
/* tiny vertical pixel grid — gives a hint of phosphor without the heavy RGB triads */
repeating-linear-gradient(
90deg,
rgba(0,0,0,0.05) 0px,
rgba(0,0,0,0.05) 1px,
transparent 1px,
transparent 3px
),
/* SVG fractal noise — small grain animated via background-position */
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 180px 180px;
/* Removed vhsJitter (was 0.14s steps(3) — read as glitching, not CRT).
vhsGrainShift kept but smoothed (linear, 12s) so the grain drifts
instead of stepping. Static scanlines + slow drift = CRT, not buggy. */
animation: vhsGrainShift 12s linear infinite;
}
/* horizontal scanline band that drifts down — soft cream highlight
blending into rose at the bottom, like a CRT roll-bar */
.garden-sky-scan {
position: absolute;
left: 0; right: 0;
height: 14%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(255, 245, 230, 0) 0%,
rgba(255, 245, 230, 0.18) 45%,
rgba(255, 215, 210, 0.08) 60%,
rgba(0, 0, 0, 0.06) 100%
);
mix-blend-mode: screen;
opacity: 0.6;
animation: vhsScan 6.5s linear infinite;
}
/* vhsJitter retired 2026-05-11 — Bryan's note: "reads too much as glitching out
or buggy." Kept only the slow grain-drift to preserve the CRT feel. */
@keyframes vhsGrainShift {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 0 0, 0 0, -90px 140px; }
}
@keyframes vhsScan {
0% { transform: translateY(-25%); opacity: 0; }
10% { opacity: 0.60; }
90% { opacity: 0.60; }
100% { transform: translateY(125%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.garden-sky-vhs, .garden-sky-scan { animation: none; }
}
.garden-flower {
position: absolute;
/* All three flowers share a single anchor at the TOP-center of the stage,
directly under the terminal cursor. Stems grow DOWN from that anchor;
blooms render at the BOTTOM end of each rotated stem. */
top: 0;
left: 50%;
transform-origin: 50% 0%;
}
.garden-flower--left { transform: translateX(-50%) rotate(-22deg); z-index: 1; }
.garden-flower--center { transform: translateX(-50%) rotate(0deg); z-index: 3; }
.garden-flower--right { transform: translateX(-50%) rotate(22deg); z-index: 2; }
.garden-ephemera {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 4;
mix-blend-mode: multiply;
}
/* gentle sway after bloom — origin is the top convergence point now */
.garden-flower svg {
animation: gardenSway 9s ease-in-out infinite;
transform-origin: 50% 0%;
}
.garden-flower--center svg { animation-duration: 11s; animation-delay: -2s; }
.garden-flower--right svg { animation-duration: 13s; animation-delay: -4s; }
@keyframes gardenSway {
0%, 100% { transform: rotate(-0.6deg); }
50% { transform: rotate(0.8deg); }
}
.garden-earth {
position: absolute;
left: -6%; right: -6%; bottom: -8px;
width: 112%;
height: 36px;
z-index: 1;
}
@keyframes poppyHatchSpin {
to { transform: rotate(360deg); }
}
.garden-replay {
margin-top: 6px;
align-self: center;
opacity: 0.6;
transition: opacity 200ms ease;
}
.garden-replay:hover { opacity: 1; }
/* — tagline below hero — */
.hero-tagline {
margin: 40px auto 0;
max-width: 920px;
}
.hero-tagline h1 { margin-bottom: 28px; max-width: 22ch; }
.hero-long {
font-family: var(--serif-text);
font-size: 18px; line-height: 1.65;
color: var(--ink-warm);
max-width: 64ch;
margin: 0 0 18px;
/* prevent widow lines (single-word last lines) on supporting browsers */
text-wrap: pretty;
}
.hero-long .it { color: var(--mauve-deep); }
.hero-lede {
font-family: var(--mono);
font-size: 13px; line-height: 1.55;
color: var(--mauve-ash);
max-width: 64ch;
margin: 0;
}
.hero-status {
display: flex; flex-wrap: wrap; gap: 12px 26px;
margin-top: 26px;
font-size: 12px; color: var(--mauve-ash);
}
.hero-status span { color: var(--ink); }
.hero-status .accent { color: var(--mauve); font-style: italic; font-family: var(--serif-text); font-size: 14px; }
/* pollen — fine drifting dust grains around the availability pip */
.pollen-dot {
position: relative;
display: inline-block;
width: 6px; height: 6px;
border-radius: 999px;
background: rgb(216,178,86);
box-shadow:
0 0 0 2px rgba(216,178,86,0.18),
0 0 8px rgba(216,178,86,0.45);
}
.pollen-dot::after {
content: "";
position: absolute; inset: -3px;
border-radius: 999px;
background: radial-gradient(circle, rgba(216,178,86,0.32) 0%, transparent 65%);
opacity: 0.7;
animation: pollenHalo 4.2s ease-in-out infinite;
}
@keyframes pollenHalo {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.35); opacity: 0.9; }
}
/* legacy CSS-children pollen no longer used (JS field below) */
.pollen-dot .pollen { display: none; }
/* full-viewport drifting pollen field */
.pollen-field {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9;
overflow: hidden;
}
.pollen-field .grain {
position: absolute;
width: 2px; height: 2px;
border-radius: 50%;
background: rgb(216,178,86);
box-shadow:
0 0 4px rgba(232, 200, 120, 0.55),
0 0 1px rgba(255, 240, 200, 0.9);
filter: blur(0.4px);
opacity: 0;
will-change: transform, opacity;
mix-blend-mode: normal;
}
.pollen-field .grain.spark {
background: rgb(255, 240, 200);
box-shadow:
0 0 6px rgba(255, 220, 140, 0.9),
0 0 14px rgba(232, 200, 120, 0.55);
filter: blur(0.2px);
}
/* contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 18px 0 26px; }
.contact-form--inline { max-width: 920px; }
.cf-line {
display: flex; align-items: flex-end; gap: 14px;
border-bottom: 1px solid var(--mauve-line);
padding-bottom: 10px;
}
.cf-cell {
display: flex; flex-direction: column; gap: 4px;
font-family: var(--mono); font-size: 10.5px; color: var(--mauve-ash);
letter-spacing: 0.08em; text-transform: uppercase;
flex: 1 1 0; min-width: 0;
}
.cf-cell--grow { flex: 2 1 0; }
.cf-cell input {
font-family: var(--mono); font-size: 14px; color: var(--ink);
background: transparent; border: none; padding: 4px 0;
width: 100%;
}
.cf-cell input::placeholder { color: rgba(125,86,92,0.45); text-transform: none; letter-spacing: 0; }
.cf-cell input:focus { outline: none; }
.cf-arr {
font-family: var(--mono); font-size: 14px; color: var(--mauve-ash);
padding-bottom: 6px;
flex: none;
}
@media (max-width: 720px) {
.cf-line { flex-direction: column; align-items: stretch; gap: 14px; }
.cf-arr { display: none; }
}
.cf-row { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--mauve-ash); letter-spacing: 0.06em; text-transform: uppercase; }
.cf-row input, .cf-row textarea {
font-family: var(--mono); font-size: 14px; color: var(--ink);
background: rgba(255,255,255,0.7);
border: 1px solid var(--mauve-line);
padding: 12px 14px; border-radius: 2px;
resize: vertical;
}
.cf-row input:focus, .cf-row textarea:focus { outline: none; border-color: var(--mauve); }
.cf-actions { display: flex; align-items: center; gap: 18px; }
.cf-send {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
text-transform: uppercase; cursor: pointer;
background: var(--mauve); color: var(--paper);
border: none; padding: 10px 18px; border-radius: 2px;
}
.cf-send:hover { background: var(--ink); }
.cf-status { font-family: var(--serif-text); font-style: italic; font-size: 13px; color: var(--mauve-deep); }
/* ── CATEGORY ACCORDION ───────────────────────────── */
.cat-section { padding: 64px 0 32px; }
.cat-acc-head {
display: flex; justify-content: space-between; align-items: baseline;
border-top: 1px solid var(--rose-line);
border-bottom: 1px solid var(--rose-line);
padding: 14px 0;
font-size: 12px; color: var(--mauve-ash);
letter-spacing: 0.06em; text-transform: uppercase;
}
.cat-acc-head .label { color: var(--mauve); display: inline-flex; align-items: center; gap: 10px; }
.cat-chips {
display: flex; flex-direction: column; gap: 0;
margin: 0;
}
.cat-acc-chip {
display: grid;
/* flower | label | count | arr — chip-no removed per design notes */
grid-template-columns: 68px 1fr auto auto;
gap: 20px;
align-items: center;
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--mauve-line);
padding: 20px 4px;
cursor: pointer;
font-family: var(--mono);
text-align: left;
color: var(--ink);
transition: background 200ms ease, padding 200ms ease;
}
.cat-acc-chip:hover {
background: var(--dust-soft);
padding-left: 10px;
}
.cat-acc-chip-flower {
display: inline-flex;
align-items: center; justify-content: center;
width: 60px; height: 60px;
flex: none;
}
.cat-acc-chip-flower .fl-tiny--ascii svg text { font-family: 'JetBrains Mono', monospace; }
.cat-acc-chip-label {
font-family: var(--serif); font-weight: 400;
font-size: 22px; line-height: 1.1;
color: var(--ink);
}
.cat-acc-chip.is-open .cat-acc-chip-label { color: var(--mauve); font-style: italic; }
.cat-acc-chip-count {
font-size: 11px; color: var(--mauve-ash);
font-family: var(--mono);
}
.cat-acc-chip-count::before { content: "("; }
.cat-acc-chip-count::after { content: " projects)"; }
.cat-acc-chip-arr {
font-family: var(--mono);
font-size: 18px;
color: var(--mauve);
width: 24px; text-align: center;
display: inline-block;
transition: transform 200ms ease, color 200ms ease;
}
/* When the chip is open, rotate the ↗ 180° so it points ↙ —
visual cue that the panel is expanded, without breaking visual
language by swapping a different glyph. */
.cat-acc-chip.is-open .cat-acc-chip-arr {
color: var(--ink);
transform: rotate(180deg);
}
@media (max-width: 720px) {
.cat-acc-chip { grid-template-columns: 48px 1fr auto; padding: 18px 4px; gap: 14px; }
.cat-acc-chip-count { display: none; }
.cat-acc-chip-label { font-size: 20px; }
}
/* — accordion panel — sits inline directly below its chip in DOM order
so the next chip is pushed down by the panel's height. Background
uses the same sky still as the hero, with a CRT scanline overlay
baked in via repeating gradient so the panel feels like a portal
to the same scene. */
.cat-acc-panel {
position: relative;
padding: 14px 8px 22px 88px;
background:
/* CRT scanlines on top */
repeating-linear-gradient(
0deg,
rgba(0,0,0,0.10) 0px,
rgba(0,0,0,0.10) 1px,
rgba(255,255,255,0.04) 1px,
rgba(255,255,255,0.04) 2px
),
/* paper tint to soften the sky into the page palette */
linear-gradient(180deg, rgba(252, 245, 242, 0.78), rgba(238, 213, 207, 0.65)),
/* sky still image */
url("img/sky-still.jpg") center / cover no-repeat,
var(--paper);
border-bottom: 1px solid var(--mauve-line);
animation: accDown 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes accDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.cat-acc-list { list-style: none; margin: 0; padding: 0; }
.cat-acc-row {
display: grid;
/* title | desc | meta — row-no removed per design notes */
grid-template-columns: 160px 1fr auto;
gap: 18px;
padding: 8px 0;
border-top: 1px dashed var(--mauve-line);
align-items: baseline;
text-decoration: none; color: inherit;
transition: padding 200ms ease, color 200ms ease;
}
.cat-acc-row:hover { padding-left: 8px; color: var(--mauve); }
.cat-acc-row-title {
font-family: var(--serif); font-size: 15px; color: var(--ink);
}
.cat-acc-row:hover .cat-acc-row-title { color: var(--mauve); }
.cat-acc-row-desc {
font-family: var(--serif-text); font-size: 13px;
color: var(--mauve-deep); line-height: 1.5;
}
.cat-acc-row-meta {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono); font-size: 11px; color: var(--mauve-ash);
}
.cat-acc-row-yr { color: var(--ink); }
.cat-acc-row-arr { color: var(--mauve); font-family: var(--hand); font-size: 18px; }
.cat-acc-all {
display: inline-block;
margin-top: 14px;
font-family: var(--mono); font-size: 12px;
color: var(--mauve);
text-decoration: none;
border-bottom: 1px solid var(--mauve-line);
padding-bottom: 2px;
}
.cat-acc-all:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 720px) {
.cat-acc-panel { padding: 20px 4px; }
.cat-acc-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
.cat-acc-row-no { display: none; }
.cat-acc-row-desc { grid-column: 1 / -1; }
}
/* hand-drawn tag (re-used in accordion + work page) */
.proj-tag {
position: relative;
display: inline-block;
padding: 3px 10px;
font-family: var(--mono);
font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mauve);
}
.proj-tag::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
pointer-events: none;
}
.proj-tag.fun { color: var(--sky-deep); }
.proj-tag.fun::before {
background-image:
url("data:image/svg+xml;utf8,");
}
/* ── WORK page ────────────────────────────────────── */
.work-hero { padding: 28px 0 12px; }
/* Page eyebrow — small mono filename with full-width underline.
A few characters/segments inside get a quirky pop via .eb-it / .eb-bold. */
.work-eyebrow {
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: none;
color: var(--mauve-deep);
display: block;
margin: 8px 0 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--mauve-line);
word-break: break-all;
line-height: 1.6;
}
.work-eyebrow::before {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: var(--mauve-ash);
vertical-align: middle;
margin-right: 10px;
}
/* Quirky emphasis — pulls select chars/segments out of a mono filename
line and into a different font + style for a hand-edited feel.
Default sizing is tuned for small mono eyebrows (work + contact). */
.eb-it {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 1.45em;
color: var(--ink);
letter-spacing: 0;
vertical-align: -2px;
margin: 0 0.05em;
}
.eb-bold {
font-family: var(--mono);
font-weight: 600;
color: var(--ink);
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mauve-line);
padding: 1px 5px;
margin: 0 0.05em;
}
/* h1 context — base is serif at hero scale, so emphasis flips:
eb-it stays italic but lighter weight + mauve tone; eb-bold becomes
a small mono inline tag against the big serif so it pops as a label. */
.h1 .eb-it {
font-family: var(--serif-text);
font-style: italic;
font-weight: 400;
font-size: 1em;
color: var(--mauve-deep);
letter-spacing: -0.005em;
vertical-align: baseline;
margin: 0;
background: none;
padding: 0;
display: inline;
text-transform: none;
}
.h1 .eb-bold {
font-family: var(--mono);
font-weight: 500;
font-size: 0.55em;
color: var(--ink);
letter-spacing: 0.04em;
text-transform: none;
background: var(--mauve-line);
padding: 0.18em 0.4em;
margin: 0 0.18em;
vertical-align: 0.32em;
display: inline-block;
border-radius: 1px;
}
.work-lede {
font-family: var(--serif-text); font-size: 18px;
color: var(--mauve-deep); max-width: 60ch; margin: 0;
}
.work-grid-section { padding: 16px 0 64px; }
.work-filters {
display: flex; flex-wrap: wrap; gap: 10px;
align-items: center;
margin-bottom: 36px;
padding: 14px 0;
border-top: 1px solid var(--rose-line);
border-bottom: 1px solid var(--rose-line);
font-family: var(--mono);
}
.work-filters .label {
font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--mauve-ash);
margin-right: 8px;
}
.work-filter {
background: transparent;
border: none;
font-family: var(--mono);
font-size: 11.5px;
color: var(--mauve-ash);
padding: 6px 12px;
cursor: pointer;
letter-spacing: 0.04em;
border-radius: 0;
position: relative;
transition: color 200ms ease;
}
.work-filter .num {
font-size: 9.5px;
color: var(--mauve);
margin-left: 4px;
vertical-align: super;
}
.work-filter:hover { color: var(--ink); }
.work-filter.is-on {
color: var(--ink);
}
.work-filter.is-on::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
pointer-events: none;
}
/* — denser polaroid grid — */
.polaroid-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 28px 22px;
align-items: start;
}
.polaroid {
--rot: 0deg;
position: relative;
display: flex; flex-direction: column;
background: var(--paper);
padding: 12px 12px 14px;
text-decoration: none; color: inherit;
box-shadow:
0 14px 28px -18px rgba(82, 56, 60, 0.35),
0 4px 10px -8px rgba(82, 56, 60, 0.2);
transform: rotate(var(--rot));
transition: transform 320ms cubic-bezier(.2,.7,.2,1),
box-shadow 320ms ease;
}
.polaroid::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
pointer-events: none;
opacity: 0.5;
}
.polaroid:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow:
0 22px 40px -18px rgba(82, 56, 60, 0.5),
0 6px 14px -8px rgba(82, 56, 60, 0.3);
z-index: 5;
}
.polaroid.is-hidden { display: none; }
/* ── WORK ROW LIST ─────────────────────────────────── */
.work-rows {
list-style: none; margin: 32px 0 0; padding: 0;
border-top: 1px solid var(--mauve-line);
}
.work-rows > li { border-bottom: 1px solid var(--mauve-line); }
.work-rows > li.is-hidden { display: none; }
.work-row {
display: grid;
/* thumb | title | desc | tag (optional) | arr — first col fits widest 16:9 polaroid (176px outer) */
grid-template-columns: 180px minmax(180px, 1.2fr) minmax(220px, 2.2fr) auto auto;
align-items: center;
gap: 28px;
padding: 22px 4px;
text-decoration: none; color: var(--ink);
transition: background 200ms ease;
}
.work-row:hover { background: rgba(255,255,255,0.35); }
.work-row:hover .wr-arr { transform: translateX(7px); color: var(--ink); }
/* line-art polaroid thumbnail — paper frame, ink outline, slight tilt */
.wr-thumb {
display: block;
/* size set by ratio modifier; default falls back to 4:3 */
width: 122px; height: 92px;
background: var(--paper);
/* polaroid: equal top/sides, bigger bottom for the caption strip */
padding: 6px 6px 18px;
border: 1px solid var(--mauve-line);
box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
transform: rotate(var(--rot, 0deg));
transition: transform 250ms ease, box-shadow 250ms ease;
flex-shrink: 0;
}
/* aspect-ratio modifiers — image content area, padding adds 12w / 24h */
.wr-thumb--16x9 { width: 164px; height: 92px; }
.wr-thumb--3x2 { width: 138px; height: 92px; }
.wr-thumb--4x3 { width: 122px; height: 92px; }
.wr-thumb--1x1 { width: 100px; height: 100px; }
.wr-thumb--3x4 { width: 92px; height: 122px; }
.wr-thumb--2x3 { width: 92px; height: 138px; }
.wr-thumb--9x16 { width: 92px; height: 164px; }
.work-row:hover .wr-thumb {
transform: rotate(0deg) translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
}
.wr-thumb img,
.wr-thumb video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.02);
}
.wr-thumb--lineart {
/* sketchier ink outline — slightly darker than mauve-line */
border-color: rgba(125, 86, 92, 0.35);
}
.wr-title {
font-family: var(--serif); font-size: 22px; font-weight: 400;
letter-spacing: -0.01em;
}
.wr-desc {
font-family: var(--serif-text), var(--serif); font-size: 14px;
color: var(--mauve-deep); line-height: 1.45;
}
.wr-tag {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border: 1px solid var(--mauve-line);
color: var(--mauve);
white-space: nowrap;
}
/* premium tag uses the same hand-drawn wavy frame as .hand-btn — line-art feel */
.wr-tag.premium {
position: relative;
border: none;
background: transparent;
color: var(--mauve);
padding: 7px 14px;
}
.wr-tag.premium::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
.wr-tag.fun { color: var(--sky-deep); border-color: rgba(110,158,178,0.4); }
/* spec tag — same wavy hand-drawn frame as premium, but in sky-blue tone
so it reads as adjacent-but-distinct. Used on concept/spec work that
isn't fully launched (Andover, Deke Sports). */
.wr-tag.spec {
position: relative;
border: none;
background: transparent;
color: var(--sky-deep);
padding: 7px 14px;
}
.wr-tag.spec::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* research tag — wavy hand-drawn frame in deep mauve. Combines former WIP + Editorial:
magazine/whitepaper/article work + work-in-progress research artifacts. */
.wr-tag.research {
position: relative;
border: none;
background: transparent;
color: var(--mauve-deep);
padding: 7px 14px;
letter-spacing: 0.12em;
}
.wr-tag.research::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* brand tag — wavy hand-drawn frame in warm tan. Shipped commercial / GTM work. */
.wr-tag.brand {
position: relative;
border: none;
background: transparent;
color: rgb(167, 92, 60);
padding: 7px 14px;
}
.wr-tag.brand::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* ── filter chips at top of /work ── */
.work-filters {
display: flex; flex-wrap: wrap; gap: 14px;
margin: 0 0 18px;
padding: 0;
list-style: none;
align-items: center;
}
.work-filters .filter-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mauve-ash);
margin-right: 2px;
}
.work-filter-chip {
position: relative;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 16px;
border: none;
background: transparent;
color: var(--mauve);
cursor: pointer;
white-space: nowrap;
font-weight: 400;
transition: color 150ms ease;
}
.work-filter-chip::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
transition: opacity 150ms ease;
}
.work-filter-chip:hover { color: var(--mauve-deep); }
.work-filter-chip:hover::before {
background-image:
url("data:image/svg+xml;utf8,");
}
.work-filter-chip.is-active {
color: var(--mauve-deep);
font-weight: 500;
}
/* active state: doubled stroke (one underneath, one on top, slightly offset)
for a "circled twice in pen" feel — keeps hand-drawn aesthetic, no opaque fill */
.work-filter-chip.is-active::before {
background-image:
url("data:image/svg+xml;utf8,");
}
/* fix stacking — chip text paints above the ::before stroke */
.work-filter-chip { isolation: isolate; }
.work-filter-chip::before { z-index: -1; }
.work-filter-chip .chip-count {
font-size: 9px;
opacity: 0.6;
margin-left: 6px;
}
/* filter behavior — when a tag class is active on .work-rows, hide non-matching */
.work-rows.filter-premium > li:not([data-tag="premium"]) { display: none; }
.work-rows.filter-spec > li:not([data-tag="spec"]) { display: none; }
.work-rows.filter-research > li:not([data-tag="research"]) { display: none; }
.work-rows.filter-brand > li:not([data-tag="brand"]) { display: none; }
.wr-arr {
font-family: var(--mono); font-size: 16px; color: var(--mauve-ash);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms ease;
justify-self: end;
}
@media (max-width: 720px) {
.work-row {
grid-template-columns: 88px 1fr auto;
grid-template-areas:
"thumb title arr"
"thumb desc desc"
"thumb tag tag";
gap: 4px 14px;
padding: 16px 4px;
}
.wr-thumb { grid-area: thumb; width: 84px; height: 64px; padding: 4px 4px 12px; }
.wr-title { grid-area: title; font-size: 18px; }
.wr-desc { grid-area: desc; font-size: 13px; }
.wr-tag { grid-area: tag; justify-self: start; margin-top: 4px; }
.wr-arr { grid-area: arr; justify-self: end; align-self: start; }
}
.polaroid-img {
position: relative;
width: 100%;
aspect-ratio: 5 / 4;
background: var(--dust);
overflow: hidden;
}
.polaroid-img img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.85) contrast(1.02) sepia(0.06);
transition: filter 300ms ease, transform 600ms ease;
}
.polaroid:hover .polaroid-img img {
filter: saturate(1) contrast(1.05);
transform: scale(1.04);
}
.polaroid-img::after {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 25% 30%, rgba(125, 86, 92, 0.08) 0, transparent 40%),
radial-gradient(circle at 75% 70%, rgba(173, 207, 220, 0.1) 0, transparent 40%);
mix-blend-mode: multiply;
pointer-events: none;
}
.polaroid-meta {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: baseline;
margin-top: 12px;
padding: 0 4px;
}
.polaroid-no {
font-family: var(--mono);
font-size: 10px;
color: var(--mauve-ash);
letter-spacing: 0.08em;
}
.polaroid-cap {
font-family: var(--hand);
font-size: 22px;
color: var(--ink);
line-height: 1;
letter-spacing: 0.01em;
}
.polaroid-year {
font-family: var(--mono);
font-size: 10px;
color: var(--mauve);
}
.polaroid-desc {
font-family: var(--serif-text);
font-size: 13px;
line-height: 1.45;
color: var(--mauve-deep);
margin: 8px 4px 4px;
}
.polaroid-tag {
position: absolute;
top: -8px; right: -6px;
transform: rotate(6deg);
background: var(--paper);
padding: 3px 9px;
font-family: var(--mono);
font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mauve);
border: 1px solid var(--mauve-line);
}
.polaroid-tag.fun { color: var(--sky-deep); border-color: rgba(110, 158, 178, 0.4); }
.polaroid-tag.premium { color: var(--mauve); }
/* ── CONTACT ──────────────────────────────────────── */
.contact {
padding: 96px 0 80px;
position: relative; overflow: hidden;
}
.contact .container { max-width: 820px; }
/* contact heading uses the same hand-drawn wavy frame as .hand-btn — line-art feel */
.contact h2 {
display: inline-block;
position: relative;
padding: 10px 20px;
margin: 0 0 24px;
max-width: none;
}
.contact h2::before {
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
.contact p {
font-family: var(--serif-text); font-size: 18px;
color: var(--mauve-deep); margin: 0 0 32px;
max-width: 50ch; line-height: 1.55;
}
.contact-links { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.contact-links a {
color: var(--ink); text-decoration: none;
display: inline-flex; gap: 14px; align-items: baseline;
width: fit-content;
}
.contact-links a .arr { color: var(--mauve); }
.contact-links a:hover { color: var(--mauve); }
.contact-links a.email { font-size: 22px; font-family: var(--serif); color: var(--mauve); }
/* drift-in flower at contact */
.contact-flower {
position: absolute;
right: 6%; top: 60px;
width: 160px; height: 160px;
color: var(--sky-deep);
opacity: 0;
transform: translateY(40px) rotate(-12deg);
pointer-events: none;
}
.contact.flower-in .contact-flower {
opacity: 0.7;
transform: translateY(0) rotate(-4deg);
transition: opacity 1200ms ease 200ms, transform 1400ms cubic-bezier(.2,.7,.2,1) 200ms;
}
@media (max-width: 720px) { .contact-flower { display: none; } }
/* ── FOOTER ───────────────────────────────────────── */
footer.site {
padding: 6px 0 14px;
border-top: 1px solid var(--mauve-line);
background: var(--dust-soft);
}
.foot-row {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 11px; color: var(--mauve-ash);
}
.foot-row .it { font-style: italic; color: var(--mauve-deep); font-family: var(--serif-text); font-size: 13px; }
.foot-nav { display: inline-flex; gap: 6px; align-items: baseline; }
.foot-nav a { color: var(--mauve-ash); text-decoration: none; transition: color 180ms ease; }
.foot-nav a:hover { color: var(--ink); }
/* ── 1-800 Text Mom sign — CRT-treated mini banner that hangs above the
footer's top border so it stands out, then sits compactly inside the
footer next to the small mono row. Top ~40% peeks above the rule. */
.foot-mom-sign {
display: block;
position: relative;
width: clamp(150px, 18%, 210px);
margin: -44px auto -22px;
z-index: 2;
border-radius: 3px;
overflow: hidden;
isolation: isolate;
filter: drop-shadow(0 4px 10px rgba(80, 36, 60, 0.14));
transition: transform 240ms cubic-bezier(.2,.7,.2,1), filter 240ms ease;
cursor: pointer;
}
.foot-mom-sign:hover { transform: translateY(-3px) rotate(-0.6deg); filter: drop-shadow(0 8px 16px rgba(80, 36, 60, 0.22)); }
.foot-mom-sign:focus-visible { outline: 2px solid var(--mauve-deep); outline-offset: 4px; }
.foot-mom-sign img {
display: block;
width: 100%;
height: auto;
filter: contrast(1.04) saturate(1.08);
}
/* scanlines — matches garden-sky-vhs pattern, slightly lighter */
.foot-mom-vhs {
position: absolute; inset: 0;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.55;
background-image:
repeating-linear-gradient(
0deg,
rgba(40, 20, 28, 0.42) 0px,
rgba(40, 20, 28, 0.42) 1px,
rgba(255, 255, 255, 1.0) 1px,
rgba(255, 255, 255, 1.0) 3px
),
repeating-linear-gradient(
90deg,
rgba(0,0,0,0.04) 0px,
rgba(0,0,0,0.04) 1px,
transparent 1px,
transparent 3px
);
/* No jitter — Bryan said the hero version "reads too much as glitching out
or buggy." Static scanlines + the slow roll-bar (.foot-mom-scan) carry
the CRT feel on their own. */
}
/* soft roll-bar that drifts down — CRT shimmer */
.foot-mom-scan {
position: absolute; left: 0; right: 0;
height: 22%;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(255, 245, 230, 0) 0%,
rgba(255, 245, 230, 0.30) 50%,
rgba(0, 0, 0, 0.10) 100%
);
mix-blend-mode: screen;
opacity: 0.55;
animation: footMomScan 6s linear infinite;
}
@keyframes footMomScan {
0% { top: -25%; }
100% { top: 110%; }
}
@media (prefers-reduced-motion: reduce) {
.foot-mom-vhs, .foot-mom-scan { animation: none; }
}
@media (max-width: 720px) {
.foot-mom-sign { width: 180px; margin: -28px auto 8px; }
}
/* ── tiny flower inline helper ────────────────────── */
.fl-tiny { display: inline-flex; align-items: center; vertical-align: middle; }
.fl-tiny svg { width: 100%; height: 100%; display: block; }
/* ── Tweaks panel ─────────────────────────────────── */
.tw-panel { font-family: var(--mono) !important; }
/* ── still-growing overlay v2: staged dump-truck dirt pour + pixel sprout
────────────────────────────────────────────────────────────────────────
Triggered by clicks on [data-yy-block]. Sequence (driven by JS adding
classes to .sg-wrap):
.sg-fading → row content fades to 0
.sg-pouring → soil layer grows from top, particles cascade
.sg-settled → "still growing" + sprout container fade in
.sg-grown → pixel stem grows tile-by-tile from the soil
*/
li[data-tag], .cat-acc-projitem, .work-row { position: relative; }
/* row content fades when active */
.sg-active > a > *,
.sg-active.cat-acc-projitem > a > *,
.sg-active > .work-row > * {
transition: opacity 280ms ease, filter 280ms ease;
}
.sg-active.sg-state-fading > a > *,
.sg-active .sg-fading ~ * { /* placeholder, real fading driven by .sg-active itself */ }
.sg-active > a {
pointer-events: none;
}
.sg-active > a > *,
.sg-active > .work-row > * {
opacity: 0;
filter: blur(0.5px);
}
.sg-active > a > .wr-arr { opacity: 0; }
/* overlay wrapper — sits above row content */
.sg-wrap {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 6;
border-radius: inherit;
}
/* === soil layer === bg video (Artlist soil footage) under ASCII grid */
.sg-soil {
position: absolute;
inset: 0;
background: var(--dust); /* rose/cream paper underneath everything */
overflow: hidden;
}
/* Bg soil video — same treatment as the homepage sky hero video:
subtle dust-tinted look via grayscale + multiply + low opacity. The video
sits behind the ASCII grid, providing motion + earthy texture without
competing with the foreground. */
.sg-soil-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0; /* fades in as soil pours */
transition: opacity 700ms ease;
filter: grayscale(0.45) contrast(1.10) brightness(1.05) saturate(0.85) sepia(0.20);
mix-blend-mode: multiply;
pointer-events: none;
}
/* end opacity matches sky video's dust-tinted level (0.18 was sky;
bump slightly higher here so the soil reads as the primary "filling"
surface — but still subtle. */
.sg-pouring .sg-soil-video { opacity: 0.18; }
/* ASCII grid overlay — colored glyphs sit on top of the video.
Text uses a subtle dark text-shadow so glyphs read against any video frame. */
.sg-soil-ascii {
position: absolute;
inset: 0;
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 6px;
line-height: 6px;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
margin: 0; padding: 0;
/* strong glyph contrast: dark stroke + faint highlight so chars pop above video */
text-shadow:
0 0 1px rgba(0,0,0,0.85),
0 1px 0 rgba(0,0,0,0.55),
0 0 6px rgba(0,0,0,0.35);
font-weight: 600;
}
.sg-soil-row {
display: block;
white-space: pre;
height: 6px;
line-height: 6px;
width: 100%;
transform: scale(1.6, 1.15);
transform-origin: top left;
opacity: 0;
will-change: opacity, transform;
}
/* during the pouring animation we keep the scaleX scale at the same value */
.sg-pouring .sg-soil-row {
animation: sg-row-spill 80ms cubic-bezier(.42, 0, .58, 1.0) forwards;
animation-delay: calc(var(--r, 0) * 16ms);
}
@keyframes sg-row-spill {
0% { opacity: 0; transform: scale(1.6, 1.15) translateY(-6px); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1.6, 1.15) translateY(0); }
}
60% { opacity: 1; }
100% { opacity: 1; transform: scaleX(1.6) translateY(0); }
}
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}
/* === particle field === */
.sg-particles {
position: absolute;
inset: 0;
pointer-events: none;
}
.sg-grain {
position: absolute;
border-radius: 50%;
opacity: 0;
z-index: 7;
will-change: transform, opacity;
}
/* === bloom layer === message + pixel sprout, fades in after pour */
.sg-bloom {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 12px 16px 14px;
opacity: 0;
transition: opacity 360ms ease;
z-index: 8;
}
.sg-settled .sg-bloom { opacity: 1; }
.sg-msg {
font-family: 'Caveat', 'Permanent Marker', cursive;
font-size: 26px;
font-weight: 600;
color: rgb(255, 245, 232);
text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 8px rgba(255, 230, 200, 0.18);
letter-spacing: 0.015em;
line-height: 1;
white-space: nowrap;
}
.sg-dots {
display: inline-block;
animation: sg-dots 1.4s ease-in-out infinite;
margin-left: 2px;
}
/* === pixel sprout === callback to the hero pixel stem */
.sg-sprout {
position: relative;
width: 18px;
height: 28px;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.sg-px {
display: block;
width: 4px; height: 4px;
background: oklch(0.62 0.14 138); /* same green as hero stem */
box-shadow: 0 0 2px rgba(120, 200, 80, 0.45);
opacity: 0;
transform: translateY(6px) scale(0.5);
image-rendering: pixelated;
}
.sg-px.sg-stem {
margin-bottom: 0;
/* stack the pixels into a tight column */
}
.sg-px.sg-stem + .sg-px.sg-stem { margin-top: -1px; } /* pixels touch */
/* leaves: small offshoots near the top of the stem */
.sg-px.sg-leaf {
position: absolute;
width: 3px; height: 3px;
}
.sg-px.sg-leaf-l { left: 1px; bottom: 16px; transform: translateY(6px) scale(0.5) rotate(-12deg); }
.sg-px.sg-leaf-r { right: 1px; bottom: 18px; transform: translateY(6px) scale(0.5) rotate(12deg); }
/* grow stagger — driven by --i, each pixel pops in a beat after the previous */
.sg-grown .sg-px {
animation: sg-pop 240ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.sg-grown .sg-px.sg-stem { animation-delay: calc(var(--i, 0) * 90ms); }
.sg-grown .sg-px.sg-leaf-l { animation-delay: 700ms; }
.sg-grown .sg-px.sg-leaf-r { animation-delay: 800ms; }
@keyframes sg-pop {
to { opacity: 1; transform: translateY(0) scale(1); }
}
10% { opacity: 0.95; }
85% { opacity: 0.9; }
100% { transform: translate(var(--sg-dx, 0), var(--sg-dy, 100px)) rotate(180deg); opacity: 0; }
}
@keyframes sg-dots {
0%, 60% { opacity: 0.45; }
30% { opacity: 1; }
}
/* fade out when toggled off */
.sg-wrap.sg-leaving {
animation: sg-fade-leave 380ms ease forwards;
}
@keyframes sg-fade-leave {
to { opacity: 0; }
}