, and the h1-h6 rule above already clears their tracking.
They are kept because a Claude Design re-import would rewrite them back to
/, and they would hold the styling until linkify runs. */
.count-val, /* metric figures: overview + impact */
p[style*="font-size: 28px"][style*="Caladea"], /* "How might we ..." */
.pcoming span, /* "Coming Soon" overlay */
div[style*="font-size: 22px"][style*="Caladea"], /* card titles: video, research, insight */
span[style*="font-size: 22px"][style*="Caladea"],
div[style*="font-size: 24px"][style*="line-height: 1.1"],
span[style*="font-size: 24px"][style*="line-height: 1.1"],
.pcard div[style*="font-size: 24px"][style*="line-height: 1.05"], /* project card titles */
div[style*="font-size: 80px"][style*="gap: 20px"] > span { /* hero position titles */
letter-spacing: normal !important;
}
/* Hero ornaments. y2k-1 twinkles, y2k-2 spins — both slow enough to read as
ambient rather than as something demanding attention, and both stilled for
anyone who asked the OS for less motion. */
@keyframes y2kBlink { 0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .25; transform: scale(.82); } }
@keyframes y2kSpin { to { transform: rotate(360deg); } }
img[src$="y2k-1.svg"] { animation: y2kBlink 1.8s ease-in-out infinite; }
img[src$="y2k-2.svg"] { animation: y2kSpin 9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
img[src$="y2k-1.svg"], img[src$="y2k-2.svg"] { animation: none !important; }
}
/* Nav tabs take the site blue on hover and on the current page. Scoped to the
clip-path'd trapezoids so the logo link in the same bar is untouched, and to
aria-current, which is added to the tab the design already brings to the
front with z-index 13. */
div[style*="height: 89px"] a[style*="clip-path"]:hover,
div[style*="height: 89px"] a[style*="clip-path"][aria-current="page"] {
color: #5680BA !important;
}
/* Friction against casual image copying, paired with protect.js. Media only —
`user-select` is deliberately never applied to text, because the footer holds
the email address and phone number and they must stay copyable.
`[role="img"]` covers the CSS-background elements: they cannot be saved by
right-click at all, but they can still raise the iOS long-press sheet. */
img, canvas, video, [role="img"] {
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
img, canvas, video {
-webkit-user-select: none;
user-select: none;
}
/* Footer: copyright sits under the links, not beside them. */
div[style*="padding: 64px 56px 40px"][style*="space-between"],
div[style*="padding: 56px 56px 40px"][style*="space-between"],
div[style*="padding: 40px 56px"][style*="space-between"][style*="align-items: center"],
div[style*="padding: 20px 56px 40px"][style*="space-between"] {
flex-direction: column-reverse !important;
align-items: flex-start !important;
gap: 16px !important;
}
/* Reflection takeaways: no negative tracking.
`max-width: 660px` is VML's reflection list; the other case studies use the
`gap: 14px` row. Both are anchored on the list, not on the row's own flex
properties, which are far too common to match safely — see below. */
div[style*="align-items: flex-start; gap: 14px"] > span,
div[style*="max-width: 660px"] > div > span {
letter-spacing: normal !important;
}
/* VML reflection rows: match the other case studies — number in a fixed
right-aligned column with a wider gap to the text.
Scoped to the reflection list itself. These used to match on
`display: flex; align-items: center; gap: 8px`, which is also the overview
tag pill ("Campaign Microsite • Shipped") on every case study — the 52px
width crushed its first span and the two labels drew on top of each other. */
div[style*="max-width: 660px"] > div {
align-items: center !important;
gap: 16px !important;
}
div[style*="max-width: 660px"] > div > span:first-child {
width: 52px !important;
text-align: right !important;
flex-shrink: 0 !important;
}
/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
/* ── 1. Page shell ─────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
/* `clip` rather than `hidden`: hidden turns body into a scroll container,
which silently breaks position:sticky for the nav and section strip. */
html, body { overflow-x: clip !important; }
div[style*="width: 1280px"], div[style*="width:1280px"] {
width: 100% !important;
max-width: 100% !important;
}
[style*="px 56px"], [style*="px 58px"] {
padding-left: 32px !important;
padding-right: 32px !important;
}
}
@media (max-width: 767px) {
[style*="px 56px"], [style*="px 58px"] {
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* ── 2. Nav bar: absolute tabs → flex row pinned right ─────────────────── */
@media (max-width: 1279px) {
div[style*="height: 89px"], div[style*="height:89px"] {
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
padding: 0 10px 0 0 !important;
}
a[style*="left: 890px"], a[style*="left: 1000px"], a[style*="left: 1103px"],
a[style*="left:890px"], a[style*="left:1000px"], a[style*="left:1103px"] {
position: static !important;
left: auto !important;
top: auto !important;
width: 104px !important;
height: 50px !important;
font-size: 26px !important;
margin-left: -8px !important;
}
}
@media (max-width: 767px) {
div[style*="height: 89px"], div[style*="height:89px"] { height: 68px !important; }
a[style*="left: 890px"], a[style*="left: 1000px"], a[style*="left: 1103px"],
a[style*="left:890px"], a[style*="left:1000px"], a[style*="left:1103px"] {
width: 78px !important;
height: 38px !important;
font-size: 19px !important;
padding-top: 5px !important;
margin-left: -6px !important;
}
a[style*="left: 24px"][style*="top: 18px"] { top: 12px !important; left: 14px !important; }
a[style*="left: 24px"][style*="top: 18px"] img { width: 42px !important; height: 40px !important; }
}
/* ── 3. Display type ──────────────────────────────────────────────────── */
@media (max-width: 1279px) {
h1[style*="font-size: 158px"] {
font-size: clamp(38px, 11.4vw, 158px) !important;
white-space: normal !important;
}
div[style*="font-size: 80px"] {
font-size: clamp(26px, 5.9vw, 80px) !important;
gap: 12px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
div[style*="font-size: 80px"] img { width: clamp(18px, 3vw, 46px) !important; height: auto !important; }
h1[style*="font-size: 80px"] { font-size: clamp(36px, 7.4vw, 80px) !important; }
h2[style*="font-size: 64px"], span[style*="font-size: 64px"] { font-size: clamp(34px, 5.6vw, 64px) !important; }
h1[style*="font-size: 48px"], h2[style*="font-size: 48px"], span[style*="font-size: 48px"] {
font-size: clamp(30px, 4.6vw, 48px) !important;
}
h2[style*="font-size: 32px"] { font-size: clamp(28px, 3.2vw, 32px) !important; }
p[style*="font-size: 20px"] { font-size: clamp(15px, 1.8vw, 20px) !important; }
}
@media (max-width: 767px) {
/* headings sit at roughly the Problem-section size (32px) rather than
shrinking away; hero roles larger; standfirst at body size */
h1[style*="font-size: 158px"] { font-size: clamp(40px, 12.5vw, 158px) !important; }
/* Two lines total, one role pair per line. Each row was wrapping into two,
making four. The binding row is "brand strategist ✱ taste explorer"; the
clamp is sized so that row still fits at 320px, and nowrap keeps the pair
together. The ornament is sized in em so it shrinks with the text instead
of eating a fixed 18px out of a line that is already tight. */
div[style*="font-size: 80px"] {
font-size: clamp(17px, 6.2vw, 80px) !important;
gap: 0.3em !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
div[style*="font-size: 80px"] img { width: 0.62em !important; height: auto !important; }
h1[style*="font-size: 80px"] { font-size: 34px !important; }
h2[style*="font-size: 64px"], span[style*="font-size: 64px"] { font-size: 34px !important; }
h1[style*="font-size: 48px"], h2[style*="font-size: 48px"] { font-size: 32px !important; }
h2[style*="font-size: 32px"] { font-size: 30px !important; }
/* "How might we…" pull-quote */
p[style*="font-size: 28px"] { font-size: 22px !important; }
p[style*="font-size: 20px"] { font-size: 16px !important; }
}
/* ── 4. Project card grids (Work, All Works) ──────────────────────────── */
@media (max-width: 1279px) {
a[style*="width: 472px"] { width: 100% !important; max-width: 472px !important; }
}
@media (max-width: 1023px) {
div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 32px 0 !important;
}
div[style*="height: 340px"] { height: auto !important; aspect-ratio: 472 / 340 !important; }
}
@media (max-width: 767px) {
/* All Works header: "Back to home" drops under the heading + description */
div[style*="justify-content: space-between"][style*="align-items: flex-end"] {
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
}
}
/* ── 5. Case study shell: side nav → sticky strip, Back pinned ─────────── */
@media (max-width: 1023px) {
div[style*="padding: 100px 58px 0px 108px"] {
flex-direction: column !important;
padding-top: 24px !important;
gap: 16px !important;
}
div[style*="position: sticky"][style*="width: 106px"] {
position: sticky !important;
top: 89px !important;
z-index: 20 !important;
width: 100% !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
overflow: visible !important; /* Back must not scroll away */
background: #F9F6F1 !important;
padding: 10px 0 !important;
}
/* only the section links scroll; Back stays pinned at the left */
div[style*="position: sticky"][style*="width: 106px"] > a { flex-shrink: 0 !important; }
#projNav {
flex-direction: row !important;
gap: 16px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
#projNav::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
#projNav a { white-space: nowrap !important; }
div[style*="max-width: 952px"] { max-width: 100% !important; }
}
@media (max-width: 767px) {
div[style*="position: sticky"][style*="width: 106px"] { top: 68px !important; }
}
/* ── 6. Case study inner blocks — keep desktop image ratios ───────────── */
@media (max-width: 1023px) {
div[style*="width: 416px"] { width: 100% !important; }
/* "Campaign Microsite • Shipped" pill: one line, never wrapped */
div[style*="padding: 8px 12px"][style*="border-radius: 50px"] {
white-space: nowrap !important;
flex-wrap: nowrap !important;
width: max-content !important;
max-width: 100% !important;
}
div[style*="padding: 8px 12px"][style*="border-radius: 50px"] span { white-space: nowrap !important; }
div[style*="gap: 54px"] { flex-direction: column !important; gap: 24px !important; }
div[style*="width: 880px"] { width: 100% !important; flex-direction: column !important; }
div[style*="padding: 32px 48px"] { padding: 24px 18px !important; }
div[style*="height: 415px"] { height: auto !important; aspect-ratio: 952 / 415 !important; }
div[style*="height: 220px"] { height: auto !important; aspect-ratio: 301 / 220 !important; }
div[style*="height: 540px"] { height: auto !important; aspect-ratio: 266 / 540 !important; }
div[style*="height: 420px"] { height: auto !important; aspect-ratio: 400 / 420 !important; }
/* Problem section: quote mark smaller and left-aligned */
div[style*="max-width: 712px"] { align-items: flex-start !important; gap: 14px !important; }
div[style*="max-width: 712px"] svg { width: 42px !important; height: auto !important; flex-shrink: 0 !important; }
}
@media (max-width: 767px) {
div[style*="display: flex; gap: 20px; margin-top: 40px"],
div[style*="display: flex; gap: 20px; margin-top: 32px"],
div[style*="display: flex; gap: 20px; margin-top: 20px"] { flex-direction: column !important; }
/* metric cards: full content width, same 171px height as the VML cards.
flex:none matters — these are flex:1, so once the row stacks into a
column, flex-basis:0 drives the height and collapses them to ~64px. */
div[style*="height: 171px"] {
height: 171px !important;
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
}
div[style*="width: 280px"][style*="height: 171px"] { width: 100% !important; max-width: none !important; }
div[style*="width: 266px"] { width: 100% !important; max-width: 266px !important; margin: 0 auto !important; }
div[style*="max-width: 712px"] { flex-direction: column !important; }
/* 3-up research / testing rows stack only on phones */
div[style*="display: flex; gap: 24px; align-items: stretch"],
div[style*="display: flex; gap: 20px; align-items: stretch"] { flex-direction: column !important; }
}
/* ── 7. Work: film strip + play carousel ──────────────────────────────── */
/* tablet: strip and carousel at 80% of desktop, ratios preserved. The band is
tall enough that neither the 35mm canister nor the strip is cropped. */
@media (min-width: 768px) and (max-width: 1023px) {
div[style*="height: 360px"] { height: 384px !important; }
/* transform does not shrink the layout box, so the rail would keep scrolling
2100px and end on 420px of blank. Pull the advance back by the 20% lost. */
div[style*="width: 2100px"] {
transform: scale(0.8) !important;
transform-origin: left center !important;
margin-right: -420px !important;
}
div[style*="height: 360px"] img[src*="kodak-film"] { height: 375px !important; left: -32px !important; }
div[style*="width: 650px"] { width: 520px !important; height: 316px !important; }
}
@media (max-width: 767px) {
/* strip + its photos at 80%; the canister is larger again, now 21% over the
strip's own scale. Band is tall enough for both the scaled strip (254px)
and the canister (305px). */
div[style*="height: 360px"] { height: 320px !important; }
div[style*="height: 360px"] img[src*="kodak-film"] { height: 305px !important; left: -29px !important; }
div[style*="width: 2100px"] {
margin-left: 70px !important;
transform: scale(0.8) !important;
transform-origin: left center !important;
margin-right: -420px !important;
}
div[style*="width: 650px"] { width: 84vw !important; height: 51vw !important; }
/* About / Play teaser rows: link sits right, like the All Works link */
div[style*="justify-content: space-between"][style*="align-items: flex-start"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
}
div[style*="justify-content: space-between"][style*="align-items: flex-start"] > a {
align-self: flex-end !important;
}
}
/* ── 8. Play: masonry columns + card proportions ──────────────────────── */
@media (max-width: 1023px) {
#grid { gap: 26px !important; }
#grid .gcol:nth-child(3) { display: none !important; }
/* framed cards (Love Calendar, Waymo, Word Clock, Zenith) keep the desktop
362-wide / 322×220 image / 80-20-60 padding proportions */
div[style*="padding: 80px 20px 60px"] { height: auto !important; padding: 22% 5.5% 16.6% !important; }
div[style*="padding: 80px 20px 60px"] > div { height: auto !important; aspect-ratio: 322 / 220 !important; }
/* full-bleed 360px cards (Cabin in the Woods, Student Media Edition) take
the same card proportion as the framed ones instead of a fixed height */
.pcard > div[style*="height: 360px"] { height: auto !important; aspect-ratio: 362 / 360 !important; }
}
@media (max-width: 767px) {
#grid { gap: 22px !important; }
#grid .gcol:nth-child(2) { display: none !important; }
#filters { flex-wrap: wrap !important; gap: 10px !important; }
}
/* ── 9. Play lightbox ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
#lightbox { padding: 16px !important; }
#lbImg, #lbVideo { max-width: 90vw !important; max-height: 58vh !important; }
#lbPrev, #lbNext { width: 42px !important; height: 42px !important; font-size: 22px !important; }
#lbClose { top: 14px !important; right: 14px !important; width: 40px !important; height: 40px !important; }
#lbThumbs { max-width: 92vw !important; }
}
/* ── 10. About: bio paper, lanyard, scattered collage ─────────────────── */
/* The 3D badge mounts into an absolutely-positioned div, so the custom element
must be a containing block. lanyard-card.js sets this inline, but React
re-renders the element from the template and strips imperative styles. */
lanyard-card { position: relative !important; display: block !important; }
@media (max-width: 1279px) {
div[style*="width: 1015px"] { width: 100% !important; }
div[style*="padding: 72px 80px 64px"] { padding: 44px 28px 40px !important; }
}
@media (max-width: 1023px) {
div[style*="rotate(-2.5deg)"] { transform: rotate(-1deg) !important; inset: -24px 0px -110px !important; }
div[style*="rotate(1.5deg)"] { transform: rotate(0.7deg) !important; inset: -16px 0px -60px !important; }
/* ID badge. The r3f camera fov is vertical, so the card's on-screen size is
driven by canvas HEIGHT while canvas WIDTH only sets how much horizontal
room it has. 13:20 is about as wide as the card can render before it is
clipped at the edges — i.e. the largest it can be at this viewport. */
div[style*="right: -304px"][style*="width: 960px"] {
/* `relative` with auto offsets sits in normal flow exactly like `static`,
but keeps this box a containing block. That matters: r3f mounts into a
`position:absolute; inset:0` div, so with `static` here the canvas sized
itself against the bio paper instead — 819x1533 inside a 400x600 badge
at tablet, which is the card rendering far too large. lanyard-card.js
does set `position:relative` on itself, but React re-renders the element
from the template and strips it. */
position: relative !important;
right: auto !important;
top: auto !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 2 / 3 !important;
margin: -68px 0 -40px !important;
}
div[style*="min-height: 660px"] { min-height: 0 !important; }
/* Tablet has far more width than mobile, so `width: 100%` at 2:3 reserved a
~1070px-tall block of mostly empty canvas. Cap it: the card is sized off
canvas HEIGHT, so a narrower box is also a smaller badge. Mobile keeps the
full width, where the extra size is what makes the card text readable. */
@media (min-width: 768px) {
div[style*="right: -304px"][style*="width: 960px"] {
max-width: 400px !important;
margin: -30px auto -20px !important;
}
}
div[style*="width: 210px"][style*="height: 210px"] { width: 100% !important; max-width: 210px !important; }
/* "A designer's life": a loose grid rather than a scaled-down 1280 canvas,
so items stay a usable size. Each item keeps its inline rotation and the
rows are staggered, so it still reads as a scattered collage. */
div[style*="width: 1280px"][style*="height: 1000px"] {
height: auto !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px 20px !important;
align-items: center !important;
justify-items: center !important;
padding: 0 18px 40px !important;
margin-top: 64px !important;
/* width:100% is content-box by default, so the 18px side padding would
add 36px and push the whole collage past the viewport */
box-sizing: border-box !important;
}
div[style*="width: 1280px"][style*="height: 1000px"] > * {
position: relative !important;
left: auto !important; top: auto !important; right: auto !important;
/* under 100%: each item is rotated, and a rotated box is ~15% wider than
the element, so leave room or the outer columns clip at the edges */
width: 86% !important;
max-width: 212px !important;
}
div[style*="width: 1280px"][style*="height: 1000px"] > h2 {
grid-column: 1 / -1 !important;
max-width: none !important;
transform: none !important;
text-align: center !important;
margin: 4px 0 10px !important;
}
div[style*="width: 1280px"][style*="height: 1000px"] > img { max-width: 150px !important; }
/* photos keep their 212×250 proportion. border-box matters: the 8px white
frame is a border, which on content-box would add 16px to the width. */
div[style*="width: 1280px"][style*="height: 1000px"] div[style*="height: 250px"] {
height: auto !important;
aspect-ratio: 212 / 250 !important;
box-sizing: border-box !important;
}
/* stagger the rows so the grid does not read as a table */
div[style*="width: 1280px"][style*="height: 1000px"] > *:nth-child(3n+3) { margin-top: 34px !important; }
div[style*="width: 1280px"][style*="height: 1000px"] > *:nth-child(3n+4) { margin-top: -12px !important; }
}
@media (max-width: 767px) {
div[style*="rotate(-2.5deg)"] { transform: rotate(-0.55deg) !important; inset: -18px 0px -72px !important; }
div[style*="rotate(1.5deg)"] { transform: rotate(0.35deg) !important; inset: -12px 0px -40px !important; }
div[style*="right: -304px"][style*="width: 960px"] { margin: -52px 0 -30px !important; }
div[style*="width: 1280px"][style*="height: 1000px"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 26px 16px !important;
}
div[style*="width: 1280px"][style*="height: 1000px"] > *:nth-child(3n+3),
div[style*="width: 1280px"][style*="height: 1000px"] > *:nth-child(3n+4) { margin-top: 0 !important; }
div[style*="width: 1280px"][style*="height: 1000px"] > *:nth-child(2n+3) { margin-top: 28px !important; }
/* The brands folder holds six logos and reads badly squeezed into half a
row, so it takes a centred row of its own. museum-hunt then falls to the
next row and everything after it stays two-up, which is what the stagger
below is counting on. `left: 600px` is this element's own inline offset
and appears exactly once on the page. */
div[style*="width: 1280px"][style*="height: 1000px"] > div[style*="left: 600px"] {
grid-column: 1 / -1 !important;
justify-self: center !important;
width: 62% !important;
max-width: 230px !important;
/* The logo cluster only appears on hover, but it is a fixed 360x150 box
sitting 122px above the folder — in the 1280 canvas that space is free,
here it lands on the photo in the row above. Reserve the height the
scaled cluster needs, plus its 8px hover lift. */
margin-top: 112px !important;
}
/* ...and at 360px wide the cluster also overhangs the left edge of a phone.
Scale it about its bottom edge, so it shrinks upward and the folder it is
anchored to does not move. */
div[style*="width: 1280px"][style*="height: 1000px"] .brandLogos {
/* Centred with a margin rather than translateX(-50%): composing that
translate with a scale moves the composite's fixed point, which pulled
the cluster ~10px off centre. Scale is now the only transform, taken
about the box's own bottom centre, so it shrinks straight upward. */
margin-left: -180px !important; /* half the cluster's 360px width */
transform: scale(0.78) !important;
transform-origin: 50% 100% !important;
}
/* The page's own