:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #7a7a7a;
  --line: #e6e6e6;
  --card: #f6f6f4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video { max-width: 100%; display: block; }

/* Top nav: right aligned, no brand (matches original) */
header.site {
  /* No bar and no gradient: just a small frosted pill holding the two links, so they stay readable
     over whatever scrolls underneath. */
  display: flex; gap: 6px; align-items: center;
  position: fixed; top: 22px; right: 5%; z-index: 5;
  padding: 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
header.site a {
  text-decoration: none; color: var(--muted);
  font-size: 17px; font-weight: 500; padding: 6px 14px; border-radius: 999px;
}
header.site a[aria-current="page"] { color: var(--fg); font-weight: 700; }
header.site a:hover { color: var(--fg); }

/* Home: two columns */
.home {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  padding: 120px 5% 96px 5%;
}
@media (min-width: 900px) {
  .home { grid-template-columns: 0.95fr 1.05fr; gap: 6%; align-items: start; padding: 0 9% 0 5%; }
  /* Left column stays pinned and is vertically centered in the viewport */
  .intro { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
}
.intro { align-items: flex-start; text-align: left; }
/* Floating head (animated, cut from the original video) + speech bubble that types/fades in */
.hello { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; position: relative; z-index: 1; }
.head { width: 120px; height: auto; flex: none; display: block; }
.bubble {
  position: relative; max-width: 220px; min-width: 62px; min-height: 42px;
  padding: 14px 20px; border-radius: 22px;
  background: #111; color: #fff;
  font-family: "Caveat", "Segoe Script", cursive; font-weight: 500;
  font-size: 24px; line-height: 1.22; text-align: left;
  display: flex; align-items: center;
  transform: rotate(-3deg); transform-origin: 0% 100%;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.bubble::before { /* tail pointing at the head */
  content: ""; position: absolute; left: -7px; bottom: 9px;
  width: 16px; height: 16px; background: #111;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-left-radius: 5px;
}
.bubble.pop { animation: pop .28s ease-out; }
@keyframes pop { from { transform: rotate(-3deg) scale(.86); } to { transform: rotate(-3deg) scale(1); } }
.typed { display: block; opacity: 0; transition: opacity .35s ease; }
.typed.show { opacity: 1; }
.dots { display: none; gap: 5px; padding: 6px 0; }
.bubble.is-dots .dots { display: inline-flex; }
.bubble.is-dots .typed { display: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .35; animation: dot 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 70%, 100% { opacity: .3; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } .bubble.pop { animation: none; } .typed { transition: none; } }
.intro h1 {
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 1000; line-height: 1; letter-spacing: -0.07em;
  margin: 0.05em 0 30px; /* pulls the headline up so it tucks into the bottom of the video */
  position: relative; z-index: 2;
}
.intro p { font-size: 16px; max-width: 32em; margin: 0 0 18px; line-height: 1.65; }
.intro p a { color: var(--muted); text-decoration: none; }
.intro p a:hover { color: var(--fg); }
.btn {
  display: inline-block; align-self: flex-start;
  border: 2px solid var(--fg); border-radius: 12px;
  padding: 15px 26px; margin: 10px 0 36px;
  text-decoration: none; text-transform: uppercase;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  background: transparent; color: var(--fg);
}
.btn:hover { background: var(--fg); color: var(--bg); }
.social { display: flex; gap: 30px; align-items: center; }
.social a { display: block; line-height: 0; }
.social svg { width: 34px; height: 34px; fill: var(--fg); }

/* Project cards: tall colored tiles */
.cards { display: flex; flex-direction: column; gap: 32px; padding: 0 0 96px; }
.card {
  --top: #0b7a33; --bottom: #108a3c; --label: rgba(255,255,255,.65);
  --s: 1; --r: 0deg;
  display: block; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: #fff;
  transform: perspective(1400px) rotateX(var(--r)) scale(var(--s));
  transform-origin: 50% 60%;
  will-change: transform;
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.22); }

/* Desktop: one card per screen, resting just below the nav. Cards scroll normally; the script
   in index.html tilts back and shrinks a card while it enters from below, and it zooms up to
   full size as it settles. Gentle scroll snapping keeps each card parked under the nav. */
@media (min-width: 900px) {
  html { scroll-snap-type: y proximity; }
  .cards { gap: 0; padding: 0; }
  .slot {
    height: 100vh; padding: 92px 0 28px;
    display: flex; align-items: center; justify-content: center;
    scroll-snap-align: start;
  }
  .card { width: min(100%, calc((100vh - 120px) * 0.885)); }
}
.card .media {
  background: var(--top); aspect-ratio: 856 / 730;
  display: flex; align-items: center; justify-content: center;
}
.card .media { overflow: hidden; }
.card .media img { width: 100%; height: 100%; object-fit: cover; }
.card .text { background: var(--bottom); padding: 56px 60px 52px; }
.card .role { font-size: 18px; color: var(--label); margin-bottom: 4px; }
.card .title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }

/* About page */
main.page { max-width: 1040px; margin: 0 auto; padding: 96px 20px 0; }
.about-top { padding: 40px 0 24px; display: grid; gap: 32px; }
@media (min-width: 800px) { .about-top { grid-template-columns: 1fr 1fr; align-items: start; } }
.about-top h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.05em; margin: 0 0 24px; }
.about-top img { border-radius: 14px; width: 100%; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.block h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; margin: 56px 0 12px; }
.block p { max-width: 42em; }
blockquote { margin: 28px 0; padding: 22px 24px; background: var(--card); border-radius: 14px; max-width: 46em; }
blockquote p { margin: 0 0 10px; }
blockquote cite { font-style: normal; font-weight: 600; font-size: 14px; }
ul.featured { list-style: none; padding: 0; margin: 0; max-width: 46em; }
ul.featured li { padding: 12px 0; border-bottom: 1px solid var(--line); }
ul.featured a { text-decoration: none; }
ul.featured a:hover { text-decoration: underline; }
ul.featured span { color: var(--muted); }
.cta { margin: 56px 0 72px; }
.cta h3 { font-size: 24px; margin: 0 0 8px; }
.cta .btn { margin: 12px 0 28px; }

footer.site { padding: 28px 5%; color: var(--muted); font-size: 14px; }

/* Card -> page transition (see the script at the bottom of index.html) */
@view-transition { navigation: auto; }
::view-transition-group(hero-card) { animation-duration: .75s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); border-radius: 10px; overflow: clip; }
::view-transition-old(hero-card), ::view-transition-new(hero-card) { height: 100%; width: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Projects page: cards only, centered */
.home.solo { grid-template-columns: 1fr; padding-left: 5%; padding-right: 5%; }
@media (min-width: 900px) { .home.solo { grid-template-columns: 1fr; padding: 0 5%; justify-items: center; } .home.solo .cards { width: 100%; } }

/* Landing <-> Projects: a push. The whole page slides out to the left while the projects slide in from the
   right, so both are on screen at once (and the reverse when you go Home). */
@keyframes push-out-left { to { transform: translateX(-100%); } }
@keyframes push-in-right { from { transform: translateX(100%); } }
@keyframes push-out-right { to { transform: translateX(100%); } }
@keyframes push-in-left { from { transform: translateX(-100%); } }
html:active-view-transition-type(to-projects)::view-transition-old(root) { animation: push-out-left .7s cubic-bezier(.7, 0, .2, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(to-projects)::view-transition-new(root) { animation: push-in-right .7s cubic-bezier(.7, 0, .2, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(to-landing)::view-transition-old(root) { animation: push-out-right .7s cubic-bezier(.7, 0, .2, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(to-landing)::view-transition-new(root) { animation: push-in-left .7s cubic-bezier(.7, 0, .2, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(to-projects), html:active-view-transition-type(to-landing) { overflow-x: hidden; }

/* Arriving from the landing page: the first card swings in from the right, tilted and a little small, then settles */
@keyframes card-arrive { from { transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) scale(.88); } }
/* (replaced: the first card no longer swings in on its own; the company panels rise in together, see the end of this file) */
@media (prefers-reduced-motion: reduce) { html.arrive .co:first-child .slot:first-of-type .card { animation: none; } }

html.framed header.site { display: none; }

/* Projects inside the landing page's side panel: the panel is narrower than 900px, so the media query above never
   matches. Apply the same one-card-per-screen layout (and the parallax) whenever the device itself is a wide screen. */
@media (min-device-width: 900px) {
  html.framed { scroll-snap-type: y proximity; }
  html.framed .cards { gap: 0; padding: 0; }
  html.framed .slot { height: 100vh; padding: 20px 0 24px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }
  html.framed .card { width: min(100%, calc((100vh - 120px) * 0.885)); }
  html.framed .home.solo { padding: 0 4%; }
}


/* Cards: brand logo first on the role line, impact number on the right of the text band */
.card .text { padding: 40px 52px 38px; }
.card .role { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.card .role .brand { order: -1; height: 24px; width: auto; max-width: 110px; object-fit: contain; flex: none; }
.card .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.card .row .title { flex: 1; min-width: 0; }
.card .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .22); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.card .lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .card .text { padding: 28px 24px 26px; } .card .row { flex-direction: column; align-items: flex-start; gap: 16px; } }
/* Status tags sit in the top-right corner of the image */
.card .media { position: relative; }
.card.soon .media::after { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.card.soon .media::after { content: "Page coming soon"; }

.card .role span:not(.lock) { white-space: nowrap; }
.card .role .brand.peacock { height: 22px; max-width: 120px; }
.card .role .brand.lyft { height: 28px; max-width: 60px; }
@media (max-width: 600px) { .card .row { flex-direction: row; } }

/* Company groups: a dark panel per company, its projects as tiles inside */
.cards { gap: 22px; padding: 0 0 72px; }
.co { background: #111; color: #fff; border-radius: 28px; padding: 22px; }
.co .cohead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 6px 20px; }
.co .cohead img { height: 28px; width: auto; max-width: 140px; object-fit: contain; }
.co .cohead img.peacock { height: 26px; } .co .cohead img.lyft { height: 32px; max-width: 64px; }
.co .count { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); padding: 8px 14px; border-radius: 12px; white-space: nowrap; }
.co .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
html .co .slot { height: auto; padding: 0; display: block; width: auto; max-width: none; scroll-snap-align: none; }
html .co .card { width: 100%; border-radius: 18px; }
.co .card .text { padding: 20px 22px 22px; }
.co .card .role { gap: 12px; margin-bottom: 10px; font-size: 14px; flex-wrap: wrap; }
.co .card .role .brand { height: 20px; } .co .card .role .brand.peacock { height: 18px; } .co .card .role .brand.lyft { height: 24px; }
.co .card .row { flex-direction: column; align-items: flex-start; gap: 10px; }
.co .card .title { font-size: 20px; line-height: 1.25; }
.co .card .lock { margin-left: 0; padding: 5px 10px; font-size: 11px; }
@media (min-width: 900px) { html { scroll-snap-type: none; } main.home { padding-top: 96px; } .co { padding: 26px; } }
@media (min-device-width: 900px) { html.framed { scroll-snap-type: none; } html.framed .co { padding: 22px; } html.framed .home.solo { padding: 18px 4% 0; } html.framed main.home { padding-top: 18px; } }

/* Each company has its own color: tinted panel, colored logo, and tiles in one shade */
.co { background: var(--panel); color: var(--ink2); }
.co[data-co="Pinterest"] { --panel: #fdeaed; --brand: #e60023; --tile: #e60023; --ink2: #111; }
.co[data-co="Spotify"] { --panel: #e6f6ec; --brand: #1a9e47; --tile: #1a9e47; --ink2: #111; }
.co[data-co="Peacock"] { --panel: #e8edfd; --brand: #2447d6; --tile: #2447d6; --ink2: #111; }
.co[data-co="Lyft"] { --panel: #ffe6f6; --brand: #e5089a; --tile: #e5089a; --ink2: #111; }
.co .card { --top: var(--tile) !important; --bottom: var(--tile) !important; }
.co .cohead .logo { display: inline-block; background: var(--brand); -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; }
.co .cohead .logo img { height: 28px; width: auto; max-width: 140px; visibility: hidden; display: block; }
.co .cohead .logo.peacock img { height: 26px; } .co .cohead .logo.lyft img { height: 32px; max-width: 64px; }
.co .count { color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }

/* Header: logo + dates on the left, website link on the right; more space between companies */
.cards { gap: 56px; }
.co .cohead { align-items: flex-start; padding: 6px 6px 22px; }
.co .who { display: flex; flex-direction: column; gap: 10px; }
.co .dates { font-size: 14px; font-weight: 500; color: rgba(17,17,17,.6); letter-spacing: .01em; }
.co .site { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; background: color-mix(in srgb, var(--brand) 14%, transparent); padding: 9px 14px; border-radius: 12px; white-space: nowrap; transition: background .15s ease; }
.co .site:hover { background: color-mix(in srgb, var(--brand) 24%, transparent); }
.co .site svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Lighter tiles with a slowly drifting mesh behind each project */
.co[data-co="Pinterest"] { --m1: #ff9aa8; --m2: #ffc4cb; --m3: #ff6a7f; --m4: #ffdde1; }
.co[data-co="Spotify"] { --m1: #7fe3a3; --m2: #b4f2cb; --m3: #4fcb7e; --m4: #d9f8e5; }
.co[data-co="Peacock"] { --m1: #9fb3ff; --m2: #c4d0ff; --m3: #6f8bf7; --m4: #e0e6ff; }
.co[data-co="Lyft"] { --m1: #ff9cdc; --m2: #ffc0eb; --m3: #f56cc4; --m4: #ffdaf2; }
.co .card { position: relative; isolation: isolate; background: var(--m1); color: #111; --label: rgba(17,17,17,.62); }
.co .card::before { content: ""; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 28%, var(--m2) 0, transparent 70%),
    radial-gradient(34% 34% at 78% 22%, var(--m3) 0, transparent 72%),
    radial-gradient(40% 40% at 70% 78%, var(--m4) 0, transparent 70%),
    radial-gradient(36% 36% at 18% 80%, var(--m3) 0, transparent 72%);
  animation: mesh 16s ease-in-out infinite alternate; }
.co .slot:nth-child(2n) .card::before { animation-duration: 21s; animation-direction: alternate-reverse; }
.co .slot:nth-child(3n) .card::before { animation-duration: 25s; }
@keyframes mesh { 0% { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(5%, 6%, 0) rotate(40deg) scale(1.15); } 100% { transform: translate3d(-3%, 5%, 0) rotate(90deg) scale(1); } }
.co .card .media, .co .card .text { background: transparent !important; }
.co .card .lock { background: rgba(17,17,17,.1); color: #111; }
.co .card.soon .media::after { background: rgba(255,255,255,.55); color: #111; }
@media (prefers-reduced-motion: reduce) { .co .card::before { animation: none; } }

/* Calmer mesh: two soft blobs, low contrast, very slow drift */
.co .card::before {
  inset: -20%;
  background:
    radial-gradient(55% 55% at 25% 30%, var(--m2) 0, transparent 75%),
    radial-gradient(55% 55% at 78% 75%, var(--m4) 0, transparent 75%);
  animation: mesh-calm 40s ease-in-out infinite alternate; }
.co .slot:nth-child(2n) .card::before, .co .slot:nth-child(3n) .card::before { animation-duration: 40s; animation-direction: alternate; }
@keyframes mesh-calm { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }

/* Logos are pre-colored files (CSS masks don't load from file://) */
.co .cohead .logo { background: none; -webkit-mask: none; mask: none; }
.co .cohead .logo img { visibility: visible; }
/* Tiles in a row share one height */
html .co .slot { display: flex; }
html .co .slot .card { flex: 1; display: flex; flex-direction: column; }
.co .card .text { margin-top: auto; }

/* Static color tiles, outline on hover, roomier layout, company one-liner */
.co .card::before { display: none; animation: none; }
.co .card { background: var(--m1); box-shadow: none; transition: outline-color .15s ease; outline: 3px solid transparent; outline-offset: 4px; }
.co .card:hover { box-shadow: none; outline-color: var(--brand); }
.cards { gap: 110px; }
.co { transform-origin: 50% 0; will-change: transform; }
.co .dates { margin-top: -2px; }
.co .tag { font-size: 14px; line-height: 1.4; color: rgba(17,17,17,.6); max-width: 30em; }
.co .who { gap: 8px; }

/* Mixed tile sizes: a wide tile spans the full row */
.co .grid { grid-auto-flow: dense; }
html .co .slot.wide { grid-column: 1 / -1; }
.co .slot.wide .card .media { aspect-ratio: 2469 / 1500; }
.co .slot.wide .card .media img { object-fit: contain; }

/* Muted, rich tile colors */
.co[data-co="Pinterest"] { --panel: #f6e7e9; --brand: #a8424f; --m1: #a8424f; }
.co[data-co="Spotify"] { --panel: #e7efe9; --brand: #3f7d5c; --m1: #3f7d5c; }
.co[data-co="Peacock"] { --panel: #e8ebf5; --brand: #4a5fa8; --m1: #4a5fa8; }
.co[data-co="Lyft"] { --panel: #f4e6ef; --brand: #a8467f; --m1: #a8467f; }
.co .card { background: var(--m1); color: #fff; --label: rgba(255,255,255,.72); }
.co .card .lock { background: rgba(0,0,0,.22); color: #fff; }
.co .card.soon .media::after { background: rgba(0,0,0,.3); color: #fff; }
.co .slot.wide .card .media { aspect-ratio: 2098 / 1460; }

/* Brighter tile colors, lighter company panels, breathing room */
.co[data-co="Pinterest"] { --panel: #fdf3f4; --brand: #d9344f; --m1: #d9344f; }
.co[data-co="Spotify"] { --panel: #f1f9f5; --brand: #279a63; --m1: #279a63; }
.co[data-co="Peacock"] { --panel: #f1f4fe; --brand: #4f6ef0; --m1: #4f6ef0; }
.co[data-co="Lyft"] { --panel: #fcf1f7; --brand: #d4439b; --m1: #d4439b; }
html .co { margin-bottom: 96px; }
html .co:last-child { margin-bottom: 0; }
html.framed main.home, html.framed .home.solo { padding-top: 64px; }
@media (min-width: 900px) { main.home { padding-top: 120px; } }

/* Dark company panels, lighter project tiles, stat in the header */
.co[data-co="Pinterest"] { --panel: #4a1521; }
.co[data-co="Spotify"] { --panel: #11392a; }
.co[data-co="Peacock"] { --panel: #19244f; }
.co[data-co="Lyft"] { --panel: #48173a; }
.co { color: #fff; }
.co .dates { color: rgba(255,255,255,.7); }
.co .tag { color: rgba(255,255,255,.6); white-space: nowrap; }
.co .right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.co .site { color: #fff; background: rgba(255,255,255,.14); }
.co .site:hover { background: rgba(255,255,255,.24); }
.co .stat { text-align: right; line-height: 1; }
.co .stat b { display: block; font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.05em; }
.co .stat span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.6); }
.co .card:hover { outline-color: #fff; }
html .co { margin-bottom: 44px; }
html .co:last-child { margin-bottom: 0; }

/* Company panel in its own color (slight tint), project tiles in translucent white */
.co[data-co="Pinterest"] { --panel: linear-gradient(160deg, #e0425c 0%, #c92d47 100%); }
.co[data-co="Spotify"] { --panel: linear-gradient(160deg, #31a874 0%, #238a5a 100%); }
.co[data-co="Peacock"] { --panel: linear-gradient(160deg, #6580f5 0%, #435fdb 100%); }
.co[data-co="Lyft"] { --panel: linear-gradient(160deg, #de55a8 0%, #c33a8d 100%); }
.co { background: var(--panel); }
.co .card { background: rgba(255,255,255,.16); }
.co .card:hover { outline-color: rgba(255,255,255,.9); }
.co .tag { white-space: normal; font-size: 15px; color: rgba(255,255,255,.78); max-width: 34em; }
.co .tag b { color: #fff; font-weight: 800; }
.co .dates { font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.co .right, .co .stat { display: none; }
.co .cohead { align-items: center; }
.co .who { gap: 6px; }

/* Vivid panels, dates beside the logo, shorter wide tile */
.co[data-co="Pinterest"] { --panel: linear-gradient(160deg, #f23a56 0%, #d91a35 100%); }
.co[data-co="Spotify"] { --panel: linear-gradient(160deg, #1fc27a 0%, #0f9f5c 100%); }
.co[data-co="Peacock"] { --panel: linear-gradient(160deg, #5a78ff 0%, #3350f0 100%); }
.co[data-co="Lyft"] { --panel: linear-gradient(160deg, #f649b6 0%, #d92a98 100%); }
.co .who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.co .who .tag { flex-basis: 100%; }
.co .dates { margin: 0; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.3); font-size: 14px; opacity: .55; color: #fff; letter-spacing: .02em; }
.co .slot.wide .card .media { aspect-ratio: 2000 / 1090; }

/* Softer, tinted panels: a light glow top-left over a gentle gradient */
.co[data-co="Pinterest"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg, #e5485f 0%, #c9314a 100%); }
.co[data-co="Spotify"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg, #35a67e 0%, #1f8467 100%); }
.co[data-co="Peacock"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg, #6379ea 0%, #4a5fcc 100%); }
.co[data-co="Lyft"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg, #e0579f 0%, #c13b8a 100%); }
.co .slot.wide .card .media { aspect-ratio: 2000 / 900; }

/* Dark-tinted vivid panels */
.co[data-co="Pinterest"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(160deg, #d62b47 0%, #7f1024 100%); }
.co[data-co="Spotify"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(160deg, #14a060 0%, #07502f 100%); }
.co[data-co="Peacock"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(160deg, #4562f2 0%, #1d2d86 100%); }
.co[data-co="Lyft"] { --panel: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(160deg, #e2379f 0%, #86175f 100%); }
/* No sideways scrolling */
html, body { overflow-x: clip; max-width: 100%; }
.co, .co .grid, .co .cohead, .co .who { min-width: 0; }
.co .grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.co .cohead { flex-wrap: nowrap; align-items: flex-start; }
.co .who { flex: 1 1 auto; }
.co .site { flex: none; }

/* Wide tiles: same size for every one; the video-podcast visuals are separate layered images with their own shadows */
.co .slot.wide .card .media { aspect-ratio: 2000 / 940; position: relative; }
.co .slot.wide .card .media > img:not(.vp) { object-fit: contain; padding: 14px 0; }
.media.stack .vp { position: absolute; height: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.4)); }
.media.stack .vp.a { left: 24.3%; top: 7.1%; width: 32.7%; }
.media.stack .vp.b { left: 52.6%; top: 44.7%; width: 34.4%; }
.media.stack .vp.c { left: 13%; top: 70.2%; width: 29.1%; }

/* Tile art stays inside the tile so shadows are never clipped */
.media.stack .vp { filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.media.stack:not(.cm) .vp.a { top: 6%; }
.media.stack:not(.cm) .vp.b { top: 40.5%; }
.media.stack:not(.cm) .vp.c { top: 63%; }
.media.stack.cm .vp.a { left: 36%; top: 6%; width: 25.6%; }
.media.stack.cm .vp.b { left: 53.5%; top: 14%; width: 30.7%; }
.media.stack.cm .vp.c { left: 20%; top: 36%; width: 21.4%; }

/* Comments collage: player in the middle, reply sheet overlapping on the right */
.media.stack.cm .vp.a { left: 33%; top: 5.5%; width: 21%; }
.media.stack.cm .vp.b { left: 47%; top: 33%; width: 24%; }
.media.stack.cm .vp.a { left: 33%; top: 7%; width: 18%; }
.media.stack.cm .vp.b { left: 46%; top: 33%; width: 24%; }

/* Comments collage (4 layers) */
.co .slot.wide .card .media.cm { aspect-ratio: 2000 / 1100; }
.media.stack.cm .vp.l { left: 38.7%; top: 6.8%; width: 22.2%; }
.media.stack.cm .vp.k { left: 21%; top: 36.4%; width: 22.2%; }
.media.stack.cm .vp.e { left: 54.6%; top: 16%; width: 22.2%; }
.media.stack.cm .vp.p { left: 56.8%; top: 29%; width: 22.2%; }
/* Spotify order: wide, pair, wide (comments), pair */
.co[data-co="Spotify"] .slot:nth-child(2) { order: 0; }
.co[data-co="Spotify"] .slot:nth-child(1) { order: 1; }
.co[data-co="Spotify"] .slot:nth-child(3) { order: 2; }
.co[data-co="Spotify"] .slot:nth-child(4) { order: 3; }
.co[data-co="Spotify"] .slot:nth-child(5) { order: 4; }
.co[data-co="Spotify"] .slot:nth-child(6) { order: 5; }

/* Spotify order: pair, wide, pair, wide */
.co[data-co="Spotify"] .slot:nth-child(1) { order: 0; }
.co[data-co="Spotify"] .slot:nth-child(3) { order: 1; }
.co[data-co="Spotify"] .slot:nth-child(2) { order: 2; }
.co[data-co="Spotify"] .slot:nth-child(5) { order: 3; }
.co[data-co="Spotify"] .slot:nth-child(6) { order: 4; }
.co[data-co="Spotify"] .slot:nth-child(4) { order: 5; }
/* Role now lives in the company description */
.co .tag .role-tag { font-style: normal; font-weight: 700; color: #fff; padding-right: 10px; margin-right: 10px; border-right: 1px solid rgba(255,255,255,.35); }
.co .card .role:empty { display: none; }
/* Shorter comments tile */
.co .slot.wide .card .media.cm { aspect-ratio: 2000 / 920; }
.media.stack.cm .vp.l { left: 40.3%; top: 4.6%; width: 19.2%; }
.media.stack.cm .vp.k { left: 25%; top: 35.7%; width: 19.2%; }
.media.stack.cm .vp.e { left: 54%; top: 12%; width: 19.2%; }
.media.stack.cm .vp.p { left: 55.9%; top: 22%; width: 19.2%; }

/* Status badges: same height, top right of the tile */
.card .media { position: relative; }
.badge { position: absolute; top: 14px; right: 14px; z-index: 3; height: 36px; min-width: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card.soon .media::after { display: none !important; content: none !important; }
/* Spotify order: pair, wide, pair, wide */
.co[data-co="Spotify"] .slot:nth-child(1) { order: 0; }
.co[data-co="Spotify"] .slot:nth-child(3) { order: 1; }
.co[data-co="Spotify"] .slot:nth-child(2) { order: 2; }
.co[data-co="Spotify"] .slot:nth-child(4) { order: 3; }
.co[data-co="Spotify"] .slot:nth-child(5) { order: 4; }
.co[data-co="Spotify"] .slot:nth-child(6) { order: 5; }

.co[data-co="Spotify"] .slot:nth-child(6) { order: 5; }
.co[data-co="Spotify"] .slot:nth-child(7) { order: 6; }

/* Company description: smaller, stays on one line */
.co .tag { font-size: 13px; max-width: none; line-height: 1.45; }

/* Phones: things enter from the bottom, never from the right */
@keyframes push-in-up { from { transform: translateY(100%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(48px); } }
@media (max-width: 900px) {
  html:active-view-transition-type(to-projects)::view-transition-old(root) { animation: none !important; }
  html:active-view-transition-type(to-projects)::view-transition-new(root) { animation: push-in-up .6s cubic-bezier(.2, .8, .2, 1) both !important; }
  html.arrive .co:first-child .slot:first-of-type .card { animation: none !important; }
  .co { animation: rise-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  .co:nth-of-type(2) { animation-delay: .08s; } .co:nth-of-type(3) { animation-delay: .16s; } .co:nth-of-type(4) { animation-delay: .24s; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .co { animation: none; } }

/* Phones: pull the project cards up closer to the intro */
@media (max-width: 900px) {
  html.framed main.home, html.framed .home.solo { padding-top: 4px; }
  html.framed .cards { padding-bottom: 40px; }
}

/* Phones: a little breathing room above the cards again */
@media (max-width: 900px) { html.framed main.home, html.framed .home.solo { padding-top: 22px; } }

/* Phones: smaller website button, and the description gets the full width */
@media (max-width: 900px) {
  .co .cohead { display: block; position: relative; padding: 4px 4px 16px; }
  .co .who { width: 100%; padding-right: 0; }
  .co .who .tag { flex-basis: 100%; width: 100%; font-size: 13px; line-height: 1.45; }
  .co .site { position: absolute; top: 2px; right: 2px; font-size: 11.5px; padding: 6px 10px; border-radius: 10px; gap: 5px; }
  .co .site svg { width: 11px; height: 11px; }
}

/* Phones: the little nav pill only shows while you scroll up */
@media (max-width: 900px) {
  header.site { top: 12px; right: 12px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
  header.site a { font-size: 15px; padding: 5px 11px; }
  header.site.away { transform: translateY(-80px); opacity: 0; pointer-events: none; }
}

/* Page transitions: simple and quick (the card morph into a project page is kept) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Never more than two tiles per row, so the art stays big on wide screens (one per row on small ones) */
.co .grid { grid-template-columns: repeat(auto-fill, minmax(max(min(280px, 100%), calc((100% - 14px) / 2)), 1fr)); }

/* Going back (page banner shrinks into its card): a bit quicker than opening */
::view-transition-group(hero-card), ::view-transition-old(hero-card), ::view-transition-new(hero-card) { animation-duration: .5s; }

/* Lyft tile: three phones side by side, so on phones show the whole image instead of cropping the sides */
@media (max-width: 900px) { html .co[data-co="Lyft"] .slot.wide .card .media > img:not(.vp) { object-fit: contain; } }

/* Opening the projects (or refreshing with them open): each company panel rises in, one after another */
/* Uses translate (not transform) so it never fights the scroll parallax tilt, which sets transform */
@keyframes co-arrive { from { opacity: 0; translate: 0 56px; } }
html.arrive .co { animation: co-arrive .7s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
html.arrive .co:nth-of-type(2) { animation-delay: .28s; }
html.arrive .co:nth-of-type(3) { animation-delay: .36s; }
html.arrive .co:nth-of-type(4) { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) { html.arrive .co { animation: none; } }

/* Inside the landing page's panel the "Built with love" line lives on the landing side instead */
html.framed footer.site { display: none; }