/* Josh Chen: black & white, big type, one accent colour (--hot) */

:root {
  --bg: #000;
  --fg: #fff;
  --ink-2: #c8c8c8;
  --mute: #8a8a8a;
  --dim: #4d4d4d;
  --line: #1c1c1c;
  --line-2: #2a2a2a;
  --panel: #0a0a0a;
  --hot: #ffffff;
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

.caret { display: inline-block; width: .09em; height: .78em; margin-left: .08em; background: currentColor; vertical-align: -.06em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.r { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.r.in { opacity: 1; transform: none; }

/* ───────── Hero ───────── */
.hero { position: relative; height: 100svh; min-height: 560px; display: flex; flex-direction: column; padding: 26px var(--pad) 24px; overflow: hidden; }
.grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero > :not(canvas) { position: relative; }
.hero-top, .hero-bottom { display: flex; justify-content: space-between; gap: 16px; color: var(--mute); animation: fade 1s .4s var(--ease) both; }
.hero-top span:first-child, .hero-top span:last-child { color: var(--fg); }
.hero-main { margin-top: auto; margin-bottom: 28px; }
.building { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.03em; animation: fade 1s .55s var(--ease) both; }
.building .mono { color: var(--mute); font-size: 12px; line-height: 1; }
.building .typed-wrap { line-height: 1; position: relative; top: calc(.266em - 4.35px); } /* x-height centre level with the label's cap centre */
.building .typed-wrap::before { content: "\200b"; } /* keeps the baseline when the word is fully deleted */
.typed-wrap { white-space: nowrap; }
.name { display: flex; flex-wrap: nowrap; column-gap: .2em; font-size: clamp(64px, min(20vw, 52vh), 400px); font-weight: 800; letter-spacing: -.075em; line-height: .8; margin-left: -.055em; white-space: nowrap; }
.name .ln { display: block; overflow: hidden; padding: .04em 0 .06em; margin: -.04em 0 -.06em; }
.name .ln > span { display: inline-block; transform: translateY(105%); animation: up 1.15s var(--ease) forwards; }
.name .ln:nth-child(2) > span { animation-delay: .1s; }
@keyframes up { to { transform: none; } }
.hero-bottom { padding-top: 16px; border-top: 1px solid var(--line-2); }
.scroll { color: var(--fg); }
.scroll i { display: inline-block; font-style: normal; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ───────── Section basics ───────── */
.sec { padding: clamp(110px, 14vw, 190px) var(--pad) 0; }
.headline { font-size: clamp(44px, 7.4vw, 124px); font-weight: 700; letter-spacing: -.058em; line-height: .95; margin-left: -.04em; max-width: 14ch; }
.headline.split { color: #7a7a7a; }
.headline.split .hl { color: #7a7a7a; transition: color 1.2s ease .35s; }
.headline.split.in .hl { color: var(--fg); }

/* ───────── Timeline: a spine that draws itself ───────── */
.tl { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); }
.spine i { position: absolute; top: 0; left: 0; width: 1px; height: var(--fill, 0px); background: var(--fg); }
.spine i::after {
  content: ""; position: absolute; bottom: -5px; left: -5px; width: 11px; height: 11px; background: var(--hot);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 24px 4px rgba(255, 255, 255, .25);
}

.yr { position: relative; padding: clamp(36px, 5vw, 72px) 0; }
.yr-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 128px); align-items: start; }
.yr-in::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 9px; height: 9px; margin-left: -4px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--dim); transition: background .4s, box-shadow .4s;
}
/* range blocks: the years stack and light up one by one as they scroll past;
   the entry rides alongside them */
.yr-num.stack { display: flex; flex-direction: column; gap: .1em; }
.stack span { display: block; color: #1f1f1f; transition: color .45s ease; }
.stack span.past { color: #3a3a3a; }
.stack span.cur { color: var(--fg); }
.yr.range .yr-body { position: sticky; top: var(--stick, 26vh); }
.yr:not(.range) .yr-num { position: sticky; top: 18vh; }
.yr.lit .yr-in::before { background: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

.yr-num {
  justify-self: end; text-align: right;
  font-size: clamp(120px, 17vw, 280px); font-weight: 800; letter-spacing: -.075em; line-height: .78;
  color: #1f1f1f; font-variant-numeric: tabular-nums;
  transition: color .8s var(--ease), transform 1s var(--ease);
  transform: translateX(-24px);
}
.yr-body { padding-top: 6px; max-width: 560px; opacity: .25; transform: translateX(24px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.yr:nth-of-type(even) .yr-num { order: 2; justify-self: start; text-align: left; transform: translateX(24px); }
.yr:nth-of-type(even) .yr-body { order: 1; justify-self: end; transform: translateX(-24px); }
.yr.lit .yr-num { color: var(--fg); transform: none; }
.yr.lit .yr-body { opacity: 1; transform: none; }

.yr-label { display: block; color: var(--mute); margin-bottom: 18px; }
.ev + .ev { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.ev > .mono { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); margin-bottom: 10px; }
.ev > .mono::before { content: ""; width: 7px; height: 7px; background: var(--hot); }
.ev h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.ev p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; padding: 5px 10px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); }

/* media inside timeline entries */
.ev-media { margin-top: 20px; }
.ev-media .ph, .ev-media .app, .ev-media .gen-frames { box-shadow: inset 0 0 0 1px var(--line-2); border-bottom: 0; }
.ev-media .ph.wide { aspect-ratio: 16 / 10; }
.ev-media .ph.tall { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
.ev-media .ph:hover img, .ev-media .ph:hover .lockup { transform: scale(1.04); }
.ev-media .gen-frames { aspect-ratio: 4 / 3; }
.ev-media .gen-frames .ph { box-shadow: none; }
.ev-media .gen-tabs { box-shadow: inset 0 0 0 1px var(--line-2); border-bottom: 0; margin-top: -1px; }
.ev-media .gen-tabs button { padding: 11px 14px; }
.ev p a { color: var(--fg); border-bottom: 1px solid var(--dim); }
.ev p a:hover { border-color: var(--fg); }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.gap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 8px 0; }
.gap span { position: relative; font-family: var(--mono); font-size: 12px; color: var(--dim); background: var(--bg); padding: 3px 0; }
.gap span::before, .gap span::after { content: ""; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--dim); }
.gap span::before { right: calc(100% + 8px); }
.gap span::after { left: calc(100% + 8px); }

/* ───────── Work ───────── */
.thesis { padding-bottom: clamp(40px, 6vw, 80px); }
.thesis .headline { max-width: 17ch; }
.other-tag { color: var(--mute); margin-bottom: 14px; }
.other-head { font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; max-width: 22ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-sub { margin: 24px 0 clamp(48px, 6vw, 80px); max-width: 560px; font-size: clamp(18px, 1.6vw, 22px); color: var(--mute); letter-spacing: -.015em; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { display: flex; flex-direction: column; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s; }
.card:hover { box-shadow: inset 0 0 0 1px var(--dim); }
.card.span-2 { grid-column: span 2; }
.card.span-3 { grid-column: span 3; }
.cards .card:nth-child(3n+2) { transition-delay: .06s; }
.cards .card:nth-child(3n) { transition-delay: .12s; }
.card-body { padding: 20px 22px 24px; margin-top: auto; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--mute); margin-bottom: 10px; }
.meta span:first-child { color: var(--fg); }
.meta a { color: var(--fg); border-bottom: 1px solid var(--dim); }
.meta a:hover { border-color: var(--fg); }
.card h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.card-body p { margin-top: 12px; color: var(--mute); font-size: 16px; max-width: 520px; }
.card.wide { flex-direction: row; }
.card.wide .app { flex: 1.3; border-bottom: 0; border-right: 1px solid var(--line-2); }
.card.wide .card-body { flex: 1; margin-top: 0; align-self: flex-end; padding: 28px; }
.card.wide h3 { font-size: clamp(30px, 3vw, 44px); }

/* image frames: placeholder until the image exists */
.ph { position: relative; aspect-ratio: 4 / 3; background: #050505; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.ph.tall { flex: 1; aspect-ratio: auto; min-height: 300px; }
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
}
.ph::after { content: attr(data-label); position: absolute; left: 14px; top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); background: #050505; padding: 2px 6px 2px 0; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .9s var(--ease); }
.card:hover .ph img { transform: scale(1.04); }

/* hands switcher */
.gen-frames { position: relative; aspect-ratio: 16 / 9; }
.gen-frames .ph { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transition: opacity .5s var(--ease); }
.gen-frames .ph.on { opacity: 1; }
.dof { position: absolute; right: 20px; bottom: 14px; z-index: 2; display: flex; align-items: baseline; gap: 8px; }
.dof b { font-size: clamp(56px, 7vw, 112px); font-weight: 800; letter-spacing: -.065em; line-height: 1; font-variant-numeric: tabular-nums; }
.dof b.word { font-size: clamp(34px, 4vw, 60px); letter-spacing: -.05em; }
.dof span { color: var(--hot); }
.gen-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line-2); }
.gen-tabs button { padding: 13px 22px; text-align: left; color: var(--dim); transition: color .3s, background .3s; }
.gen-tabs button + button { border-left: 1px solid var(--line-2); }
.gen-tabs button:hover { color: var(--fg); }
.gen-tabs button[aria-selected="true"] { color: var(--bg); background: var(--fg); }

/* InviteAll mini app */
.app { font-size: 14px; border-bottom: 1px solid var(--line-2); }
.app-top { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; color: var(--mute); border-bottom: 1px solid var(--line-2); }
.app-top span:first-child { color: var(--fg); }
.app-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 12px; align-items: center; padding: 11px 22px; border-bottom: 1px solid var(--line); }
.app-row:last-child { border-bottom: 0; }
.app-row .who { color: var(--mute); }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; transition: all .35s; }
.pill.bidding { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.pill.maybe, .pill.viewed { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.pill.no { color: var(--dim); text-decoration: line-through; }
.pill.pop { animation: pop .5s var(--ease); }
@keyframes pop { from { transform: scale(1.18); } }

/* games strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip .ph + .ph { border-left: 1px solid var(--line-2); }

/* ───────── Contact ───────── */
.contact { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(140px, 18vw, 240px) var(--pad) clamp(100px, 12vw, 160px); }
.contact-line { font-size: clamp(56px, 11vw, 190px); font-weight: 800; letter-spacing: -.07em; line-height: .9; }
.email {
  display: inline-flex; align-items: center; gap: 18px; margin-top: clamp(40px, 5vw, 64px);
  padding: 22px 34px; background: var(--fg); color: var(--bg);
  font-size: clamp(20px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em;
  box-shadow: inset 0 0 0 1px var(--fg); transition: background .3s, color .3s;
}
.email:hover { background: var(--bg); color: var(--fg); }
.email-arrow { transition: transform .4s var(--ease); }
.email:hover .email-arrow { transform: translate(3px, -3px); }
.foot { padding: 24px var(--pad); border-top: 1px solid var(--line); color: var(--mute); text-align: center; }

/* ───────── Responsive ───────── */
@media (max-width: 1000px) {
  .hide-sm { display: none; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card.span-3 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .name { flex-direction: column; font-size: 34vw; }
  .spine { left: 4px; }
  .yr { padding: 32px 0 32px 32px; }
  .yr-in { grid-template-columns: 1fr; }
  .yr-in::before { left: -28px; top: 12px; }
  .yr.range .yr-body, .yr:not(.range) .yr-num { position: static; }
  .yr-num.stack { flex-direction: row; gap: .18em; font-size: 17vw; }
  .yr-num, .yr:nth-of-type(even) .yr-num { order: 0; justify-self: start; text-align: left; font-size: 30vw; margin-bottom: 20px; transform: none; }
  .yr-body, .yr:nth-of-type(even) .yr-body { order: 1; justify-self: start; transform: none; }
  .gap { align-items: flex-start; padding-left: 0; }
  .gap span { margin-left: -5px; padding: 3px 0; }
  .gap span::before { display: none; }
  .strip { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .card.span-2, .card.span-3 { grid-column: span 1; }
  .card.wide { flex-direction: column; }
  .card.wide .app { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .gen-frames { aspect-ratio: 4 / 3; }
  .gen-tabs button { padding: 12px 10px; text-align: center; }
  .app-row { grid-template-columns: 1fr auto; }
  .app-row .who { display: none; }
  .email { padding: 18px 22px; gap: 12px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .r { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .tl .yr .yr-num.stack { font-size: 15vw; gap: .14em; }
  .yr-body { min-width: 0; }
}
.ph img { color: transparent; font-size: 0; }

/* ───────── UI mockups (Kale, Napoleon, site blocker) ─────────
   A real screenshot at the same path covers the mock automatically. */
.ph.ui { background: #070707; }
.ph.ui::before, .ph.ui::after { display: none; }
.phone, .browser { position: absolute; z-index: 0; background: #0f0f0f; box-shadow: inset 0 0 0 1px #2e2e2e; color: #e6e6e6; font-size: 11px; line-height: 1.35; letter-spacing: -.005em; transition: transform .8s var(--ease); }
.card:hover .phone, .card:hover .browser { transform: translateY(-6px); }
.phone { left: 50%; top: 26px; width: 56%; max-width: 220px; height: calc(100% + 30px); margin-left: calc(min(56%, 220px) / -2); border-radius: 26px; padding: 12px 12px 0; overflow: hidden; }
.ph-status { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; color: var(--mute); margin-bottom: 10px; padding: 0 4px; }

/* Kale */
.k-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.k-head b { font-size: 17px; font-weight: 800; letter-spacing: -.05em; }
.k-head span { font-size: 9px; padding: 2px 7px; border-radius: 99px; box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--ink-2); }
.k-post { padding: 9px 0; border-top: 1px solid #222; }
.k-who { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.k-who i { width: 18px; height: 18px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; }
.k-who b { font-size: 11px; font-weight: 600; }
.k-who span { margin-left: auto; font-size: 9px; color: var(--mute); }
.k-post p { color: #cfcfcf; }
.k-img { margin-top: 7px; height: 58px; border-radius: 8px; background: repeating-linear-gradient(135deg, #1a1a1a 0 6px, #161616 6px 12px); }
.k-end { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 10px 0; border-top: 1px solid #222; color: var(--mute); font-size: 10px; }
.k-end span { width: 14px; height: 14px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 8px; font-weight: 700; }

/* Napoleon */
.n-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.n-head b { font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.n-head span { font-family: var(--mono); font-size: 8px; color: var(--mute); }
.n-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; border-radius: 14px; background: #151515; box-shadow: inset 0 0 0 1px #262626; }
.n-face { width: 48px; height: 48px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -.03em; margin-bottom: 8px; }
.n-q { font-size: 9px; color: var(--mute); }
.n-name { font-size: 16px; font-weight: 700; letter-spacing: -.035em; margin: 2px 0 3px; }
.n-hook { font-size: 9px; color: var(--ink-2); }
.n-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0; }
.n-btns span { text-align: center; padding: 6px 0; border-radius: 8px; box-shadow: inset 0 0 0 1px #333; font-size: 10px; }
.n-btns .on { background: var(--fg); color: var(--bg); box-shadow: none; font-weight: 600; }
.n-prog { height: 3px; border-radius: 3px; background: #262626; overflow: hidden; }
.n-prog i { display: block; width: 6%; height: 100%; background: var(--fg); }
.n-count { display: flex; gap: 4px; margin-top: 5px; font-family: var(--mono); font-size: 8px; color: var(--mute); }
.n-count span:first-child { color: var(--fg); }

/* Site blocker */
.browser { inset: 26px 22px -12px; border-radius: 10px; overflow: hidden; }
.b-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #262626; background: #131313; }
.b-bar i { width: 7px; height: 7px; border-radius: 50%; background: #333; }
.b-bar span { margin-left: 10px; flex: 1; max-width: 60%; padding: 3px 9px; border-radius: 6px; background: #1c1c1c; font-family: var(--mono); font-size: 9px; color: var(--mute); }
.b-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; gap: 4px; }
.b-lock { position: relative; width: 22px; height: 16px; margin: 10px 0 8px; border-radius: 3px; background: var(--fg); }
.b-lock::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 100%; height: 10px; border: 2.5px solid var(--fg); border-bottom: 0; border-radius: 9px 9px 0 0; }
.b-body b { font-size: 15px; font-weight: 700; letter-spacing: -.035em; }
.b-body > span { font-size: 10px; color: var(--mute); }
.b-input { width: 70%; margin-top: 8px; padding: 6px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px #3a3a3a; text-align: left; letter-spacing: .15em; font-size: 10px; }
.b-btn { width: 70%; padding: 6px 0; border-radius: 7px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 10px; margin-top: 2px; }
.b-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 10px; }
.b-list span { font-family: var(--mono); font-size: 8px; padding: 2px 6px; border-radius: 4px; background: #1c1c1c; color: var(--mute); text-decoration: line-through; }

/* Connect 4 */
.c4 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; }
.c4-top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.c4-arrow { color: var(--fg); animation: bob 1.4s var(--ease) infinite; display: inline-block; }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(78%, 240px); padding: 8px; border-radius: 10px; background: #111; box-shadow: inset 0 0 0 1px #2e2e2e; }
.c4-board i, .c4-foot i { aspect-ratio: 1; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 1px #262626; }
.c4 .c1 { background: var(--fg); box-shadow: none; }
.c4 .c2 { background: #555; box-shadow: none; }
.c4-foot { display: flex; gap: 14px; font-size: 10px; color: var(--mute); }
.c4-foot span { display: flex; align-items: center; gap: 5px; }
.c4-foot i { width: 9px; }

/* four-up grid for the other projects */
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.four .ph { aspect-ratio: 4 / 5; }
@media (max-width: 1100px) { .cards.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .cards.four { grid-template-columns: 1fr; } .cards.four .ph { aspect-ratio: 4 / 3; } }
.cards.four .ph { aspect-ratio: 1; }
.n-recent { margin-top: 12px; }
.n-recent .mono { font-size: 8px; color: var(--mute); }
.n-recent div { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: center; padding: 6px 0; border-bottom: 1px solid #222; }
.n-recent i { width: 20px; height: 20px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; font-style: normal; font-size: 7px; font-weight: 700; }
.n-recent b { font-size: 10px; font-weight: 600; }
.n-recent em { font-style: normal; font-size: 8px; color: var(--mute); }
.browser .b-body { padding-top: 22px; }

/* Kale: Instagram-style layout */
.phone.ig { display: flex; flex-direction: column; }
.phone svg { width: 13px; height: 13px; fill: none; stroke: var(--fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.k-icons { display: flex; gap: 9px; }
.k-head { margin-bottom: 8px; }
.k-stories { display: flex; gap: 8px; margin: 0 0 8px; padding: 4px 3px 8px; border-bottom: 1px solid #222; overflow: hidden; }
.k-stories span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.k-stories i { width: 24px; height: 24px; border-radius: 50%; background: #2a2a2a; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; box-shadow: 0 0 0 1.5px #0f0f0f, 0 0 0 2.5px #444; }
.k-stories .new i { box-shadow: 0 0 0 1.5px #0f0f0f, 0 0 0 2.5px var(--fg); }
.k-stories em { font-style: normal; font-size: 7px; color: var(--mute); }
.ig .k-who { margin-bottom: 6px; }
.ig .k-who span { font-size: 8px; }
.k-photo { flex: none; aspect-ratio: 1; margin: 0 -12px; background: repeating-linear-gradient(135deg, #1b1b1b 0 7px, #161616 7px 14px); }
.k-actions { display: flex; align-items: center; gap: 9px; padding: 7px 0 4px; }
.k-actions span { flex: 1; }
.k-cap { font-size: 10px; color: #cfcfcf; }
.k-cap b { color: var(--fg); font-weight: 600; margin-right: 3px; }
.k-nav { display: flex; justify-content: space-between; align-items: center; margin: auto -12px 0; padding: 8px 16px 10px; border-top: 1px solid #222; }
.k-me { width: 13px; height: 13px; border-radius: 50%; background: #3a3a3a; box-shadow: 0 0 0 1.5px var(--fg); }
.b-input em { font-style: normal; color: var(--mute); letter-spacing: 0; margin-right: 6px; font-size: 9px; }
.k-head .k-icons { padding: 0; box-shadow: none; border-radius: 0; }

/* company logos in timeline tags */
.logo-panel { display: grid; place-items: center; background: #050505; }
.logo-panel::before { display: none; }
.ph img.lp { position: relative; inset: auto; z-index: 0; width: auto; height: 58%; object-fit: contain; border-radius: 18px; }
.ph img.lp.wm { width: 78%; height: auto; border-radius: 0; }

/* Kale (no stories, likes, comments or shares) */
.k-next { margin-top: 12px; padding-top: 10px; border-top: 1px solid #222; }
.phone.ig .k-end { margin-top: 10px; }
.phone.ig .k-nav { margin-top: 10px; }

/* InviteAll: mockup of inviteall.io */
.site { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); background: #151515; }
.site-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; }
.site-bar i { width: 8px; height: 8px; border-radius: 50%; background: #333; }
.site-bar span { margin-left: 12px; padding: 3px 12px; border-radius: 6px; background: #222; font-family: var(--mono); font-size: 10px; color: var(--mute); }
.site-page { --ia-ink: #111; --ia-g: #3dd68c; --ia-y: #f5c451; --ia-r: #f26d6d; --ia-p: #d9d9d9; background: #fff; color: var(--ia-ink); font-family: Montserrat, var(--sans); letter-spacing: -.01em; padding: 0 18px 18px; font-size: 11px; }
.ia-nav { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ia-logo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; }
.ia-logo img { width: 18px; height: 18px; }
.ia-links { display: flex; gap: 12px; margin-left: auto; color: #6b6b6b; font-weight: 500; font-size: 10px; }
.ia-links em { font-style: normal; }
.ia-cta { padding: 5px 11px; border-radius: 99px; background: var(--ia-ink); color: #fff; font-weight: 600; font-size: 10px; }
.ia-hero { padding: 14px 0 16px; }
.ia-eyebrow { display: inline-block; padding: 3px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px #dadada; font-size: 9px; font-weight: 600; color: #6b6b6b; }
.ia-h { display: block; margin: 10px 0 8px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; max-width: 14ch; }
.ia-hero p { color: #6b6b6b; font-size: 11px; line-height: 1.5; max-width: 34ch; }
.ia-btn { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 99px; background: var(--ia-ink); color: #fff; font-weight: 700; font-size: 10px; }
.ia-card { border-radius: 18px; background: #f7f7f7; box-shadow: 0 0 0 1px #efefef; padding: 14px; }
.ia-top { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.ia-top span { color: #6b6b6b; }
.ia-rate { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.ia-rate b { font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.ia-rate span { color: #6b6b6b; font-size: 10px; }
.ia-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #efefef; gap: 2px; }
.ia-bar i { width: 0; transition: width 1.2s var(--ease) .3s; }
.yr.lit .ia-bar i { width: var(--w); }
.ia-bar .g, .ia-legend .g { background: var(--ia-g); }
.ia-bar .y, .ia-legend .y { background: var(--ia-y); }
.ia-bar .rd, .ia-legend .rd { background: var(--ia-r); }
.ia-bar .p, .ia-legend .p { background: var(--ia-p); }
.ia-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 9px; color: #4a4a4a; }
.ia-legend span { display: flex; align-items: center; gap: 4px; }
.ia-legend i { width: 7px; height: 7px; border-radius: 50%; }
.ia-stream { margin-top: 12px; border-top: 1px solid #e6e6e6; }
.ia-stream div { display: grid; grid-template-columns: 22px auto 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #ececec; }
.ia-stream i { width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; }
.ia-stream b { font-weight: 700; font-size: 10px; }
.ia-stream em { font-style: normal; color: #6b6b6b; font-size: 9px; }
.ia-pill { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.ia-pill.g { background: #e6f8ee; color: #17894f; }
.ia-pill.y { background: #fef5df; color: #a87408; }
.ia-pill.p { background: #efefef; color: #4a4a4a; }
@media (max-width: 720px) { .ia-links { display: none; } .ia-top span { display: none; } }
.phone.ig > * { flex-shrink: 0; }
.phone.ig .k-photo + .k-cap { margin-top: 8px; }
.phone.ig .k-cap { line-height: 1.4; }
.phone.ig .k-photo { aspect-ratio: 4 / 3; }

/* logo lockups: official icon + name */
.lockup { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); transition: transform .9s var(--ease); }
.ph .lockup img { position: static; width: auto; height: clamp(52px, 6vw, 80px); aspect-ratio: 1; border-radius: 16px; transition: none; }
.lockup b { font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -.045em; color: var(--fg); white-space: nowrap; }
.ph .lockup + img { z-index: 2; }
.ph.contain { background: #fff; }
.ph.contain img { object-fit: contain; padding: 6%; }
.ph:has(img:not(.lp))::before { display: none; }

/* Fake Diamonds: full-width stacked photos */
.stack-media { display: grid; gap: 8px; }
.ph.square { aspect-ratio: 1; }
.ph.contain.wide { aspect-ratio: 16 / 10; }
.ph.contain.wide img { padding: 0 6%; }

/* hackathon medals on game tiles */
.medal { position: absolute; top: 6px; right: 8px; z-index: 3; width: 38px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.medal svg { display: block; width: 100%; height: auto; }
.medal .coin { fill: var(--c1); }
.medal .ring { fill: none; stroke: var(--c2); stroke-width: 1.2; }
.medal .rb1 { fill: #e9e9e9; }
.medal .rb2 { fill: #bdbdbd; }
.medal b { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: -.04em; line-height: 1; color: var(--c3); }
.medal sup { font-size: 8px; font-weight: 700; letter-spacing: 0; vertical-align: 5px; margin-left: .5px; }
.medal.gold { --c1: #f2c14e; --c2: #b8871d; --c3: #5a3d00; }
.medal.bronze { --c1: #d58c52; --c2: #93551f; --c3: #3d1d04; }
.tile-link { display: block; }
.tile-link .ph { cursor: pointer; }

/* videos behave like photos */
.ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #050505; transition: transform .9s var(--ease); }
.ph:has(video)::before { display: none; }
.ev-media .ph:hover video, .card:hover .ph video { transform: scale(1.04); }
.ph.portrait { aspect-ratio: 4 / 5; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.trio .ph { aspect-ratio: 1; }
.logo-panel.light { background: #fff; }
.logo-panel.light img.lp.wm { width: 52%; }
/* one label chip style for every frame: bottom-left, translucent grey */
.ph::after { z-index: 2; top: auto; bottom: 8px; left: 8px; padding: 3px 7px; border-radius: 3px; color: var(--fg); background: rgba(40,40,40,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ph:not([data-label])::after, .ph[data-label=""]::after { display: none; }
.logo-panel.navy { background: #0a1e33; }

/* hand switcher: the tabs + big readout already name the generation */
.gen-frames .ph::after { display: none; }

@media (max-width: 720px) {
  /* ranges read as "11–14" instead of a run of numbers */
  .tl .yr .yr-num.stack { font-size: 24vw; gap: 0; }
  .yr-num.stack span:not(:first-child):not(:last-child) { display: none; }
  .yr-num.stack span:last-child::before { content: "–"; }
  .yr.lit .yr-num.stack span { color: var(--fg); }
  /* smaller chips so they don't cover small tiles */
  .ph::after { font-size: 9px; left: 6px; bottom: 6px; padding: 2px 5px; line-height: 1.35; max-width: calc(100% - 12px); }
  .trio .ph::after, .quad .ph::after { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
  /* side-by-side wide media is too small on a phone: stack it */
  .pair:has(> .ph.wide) { grid-template-columns: 1fr; }
  .dof { right: 12px; bottom: 10px; }
  .dof b.word { font-size: 30px; }
}
.ph.contain.bleed img { padding: 0; object-fit: cover; }