/* Built from the Figma frame "Portfolio" (1728 wide): one 866px column, ABC Diatype, square-cornered cards. */
@font-face { font-family: "ABC Diatype"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets-local/ABCDiatype-Regular.otf") format("opentype"); }
@font-face { font-family: "ABC Diatype VF"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("assets-local/ABCDiatypeVariable.ttf") format("truetype"); }
@font-face { font-family: "ABC Diatype"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets-local/ABCDiatype-Medium.otf") format("opentype"); }
:root {
  --bg: #fcfcfc; --ink: #0b0b0b; --text: #020202; --dim: #7b7b7b; --chip: #f6f6f6; --card: #f6f6f6; --ul: #b1b1b1;
  --claude-bg: rgba(215, 116, 84, .1); --claude-fg: #ba441d;
  --col: 866px; --pad: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: "ABC Diatype", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.col { width: min(var(--col), calc(100% - var(--pad) * 2)); margin: 0 auto; }

/* Header: the same profile picture as the live site, 40px, with About and Book a call on the right. */
.head { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; }
.avatar { position: relative; display: block; width: 36px; height: 36px; border-radius: 63.333px; overflow: clip; flex: none; }
.avatar .base { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; }
.avatar .photo { position: absolute; left: 50%; top: -3.6px; width: 66.857px; height: 51.171px; transform: translateX(-50%); }
.avatar .photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border-radius: 62.5px; font-size: 14px; line-height: normal; white-space: nowrap; transition: background-color .2s ease, transform .15s ease, color .2s ease; }
.nav .plain { color: var(--ink); }
.nav .plain:hover { background: var(--chip); }
.nav .book { background: var(--ink); color: var(--bg); }
.nav .book:hover { background: #2a2a2a; }
.nav a:active { transform: scale(.97); }

/* Introduction. */
.intro { margin-top: 56px; display: flex; flex-direction: column; gap: 20px; }
h1 { max-width: 461px; font-family: "ABC Diatype VF", "ABC Diatype", system-ui, sans-serif; font-weight: 400; font-size: 36px; line-height: 1.13; letter-spacing: -.72px; color: var(--ink); }
.copy { display: flex; flex-direction: column; gap: 24px; color: var(--text); font-size: 14px; line-height: 1.6; }
.p1 { max-width: 571px; } .p2 { max-width: 461px; } .p3 { max-width: 533px; }
.copy a { text-decoration: underline; text-decoration-color: var(--ul); text-underline-offset: 2px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.copy a:hover { text-decoration-color: var(--ink); }

/* Tabs. */
.work { margin-top: 61px; display: flex; flex-direction: column; gap: 21px; }
.tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .tabs { margin-inline: 0; padding-inline: 0; overflow: visible; } }
.tab { flex: none; height: 32px; padding: 0 16px; border-radius: 50px; background: var(--chip); color: var(--dim); font-size: 14px; line-height: normal; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.tab:hover { background: #ececec; color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tab[aria-selected="true"]:hover { background: #2a2a2a; color: var(--bg); }
.tab.claude { background: var(--claude-bg); color: var(--claude-fg); }
.tab.claude:hover { background: rgba(215, 116, 84, .18); color: var(--claude-fg); }
.tab.claude[aria-selected="true"] { background: var(--claude-fg); color: #fff; }
.tab:active { transform: scale(.97); }

/* Cards: 866 x 618, corners 8px like michaelfilipiuk.com; the cover fills it. */
.list { display: flex; flex-direction: column; gap: 34px; }
.item { display: flex; flex-direction: column; gap: 15px; }
.item.in { animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { position: relative; display: block; width: 100%; aspect-ratio: 866 / 618; background: var(--card); overflow: clip; isolation: isolate; border-radius: 8px; }
.card .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card .cover.fit { object-fit: contain; }
.card.lab2 { background: #fafbfc; }
.card.lab2 .pp-host { position: absolute; inset: 0; }
.cap { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; line-height: 1.148; color: #1f1f1f; }
.cap p:last-child { opacity: .5; }
.empty { padding: 40px 0; color: var(--dim); font-size: 14px; }

/* The same pointer as the live site; the "View project" pill follows it over a card. */
html, html * { cursor: url("assets/cursor.svg") 5 4, auto !important; }
html a.card, html a.card * { cursor: none !important; }
@media (hover: none) { html a.card, html a.card * { cursor: auto !important; } }

@media (max-width: 640px) {
  :root { --pad: 20px; }
  .intro { margin-top: 56px; }
  h1 { font-size: 28px; letter-spacing: -.56px; max-width: none; }
  .p1, .p2, .p3 { max-width: none; }
  .work { margin-top: 44px; }
  .list { gap: 28px; }
  .card { aspect-ratio: 4 / 3.4; }
}
@media (prefers-reduced-motion: reduce) { .item.in { animation: none; } }

/* Logo animations sit inside the grey frame, like on the live site (video inset on all sides, softly rounded). */
.card:has(> video.cover) { background: #f6f6f6; container-type: inline-size; }
.card > video.cover { inset: auto; left: 6.161%; top: 11.65%; width: 87.678%; height: 76.7%; object-fit: cover; border-radius: 1.302cqw; }
.card > video.cover[src*="primal"], .card > video.cover[src*="dingdone"] { outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; }

/* Work: back to one column, the Figma way (866 wide, same width as the text above). */
.wide { width: min(var(--col), calc(100% - var(--pad) * 2)); margin: 0 auto; padding: 96px 0 180px; }
.wide .work { margin-top: 0; }
.list { display: flex; flex-direction: column; gap: 34px; }
.card { aspect-ratio: 866 / 618; height: auto; }
.card .cover { object-fit: cover; }
.card > video.cover { inset: auto; left: 6.161%; top: 11.65%; width: 87.678%; height: 76.7%; aspect-ratio: auto; transform: none; object-fit: cover; border-radius: 1.302cqw; }
.tabs { margin-inline: calc(var(--pad) * -1) !important; padding-inline: var(--pad) !important; }
@media (min-width: 1000px) { .tabs { margin-inline: 0 !important; padding-inline: 0 !important; } }
@media (max-width: 640px) {
  .wide { padding-top: 64px; }
  .list { gap: 28px; }
  .card { aspect-ratio: 4 / 3.4; }
}

/* Endless page: groups follow each other; the tab bar sticks to the top with room above and below. */
.wide { padding: 40px 0 180px; }
.work { gap: 0; }
.tabs { position: sticky; top: 0; z-index: 30; background: var(--bg); padding: 16px 0 !important; margin-inline: calc(var(--pad) * -1) !important; padding-inline: var(--pad) !important; }
@media (min-width: 1000px) { .tabs { margin-inline: 0 !important; padding-inline: 0 !important; } }
.groups { display: flex; flex-direction: column; gap: 34px; }
.grp { scroll-margin-top: 64px; }
.grp .empty { padding: 28px 0; }
@media (max-width: 640px) { .wide { padding-top: 40px; } .groups { gap: 28px; } }

/* The glossy pills of the live site: a light top edge, a faint highlight and a hairline. One recipe for tabs and buttons. */
:root { --gloss: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); --gloss-edge: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(0,0,0,.02); --gloss-on: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 50%); --gloss-on-edge: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.1); --ease2: cubic-bezier(.2, 0, 0, 1); }
.tab { background-image: var(--gloss); box-shadow: var(--gloss-edge); transition: background-color .32s var(--ease2), color .32s var(--ease2), transform .32s var(--ease2), box-shadow .32s var(--ease2); }
.tab:hover { box-shadow: var(--gloss-edge); }
.tab[aria-selected="true"] { background-image: var(--gloss-on); box-shadow: var(--gloss-on-edge); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab.claude { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(186,68,29,.05); }
.tab.claude:hover { background: rgba(215, 116, 84, .2); color: #a63b17; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(186,68,29,.08); }
.tab.claude[aria-selected="true"], .tab.claude[aria-selected="true"]:hover { background: #d97757; color: #fff; background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 52%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(186,68,29,.22); }
.tab.claude[aria-selected="true"]:hover { background-color: #cf6d4d; }
.tab.claude:focus-visible { outline-color: #d97757; }
.nav .book { background-image: var(--gloss-on); box-shadow: var(--gloss-on-edge); transition: background-color .32s var(--ease2), transform .32s var(--ease2), filter .32s var(--ease2); }
.nav .book:hover { background: var(--ink); filter: brightness(1.18); }

/* Phones: the same as the live site. No "View project" pill, the covers keep their own proportions (nothing is cropped or zoomed), a tighter hero. */
@media (max-width: 900px), (hover: none) { .view { display: none !important; } html a.card, html a.card * { cursor: auto !important; } }
@media (max-width: 640px) {
  .intro { margin-top: 40px; gap: 14px; }
  h1 { font-size: 24px; line-height: 1.15; letter-spacing: -.4px; }
  .copy { font-size: 13px; line-height: 1.5; gap: 14px; }
  .wide { padding-top: 24px; }
  .tab { height: 32px; font-size: 13px; }
  .card { aspect-ratio: 3376 / 2472; height: auto; }
  .card .cover { object-fit: cover; }
  .card > video.cover { left: 6.161%; top: 13.052%; width: 87.678%; height: 73.896%; aspect-ratio: auto; transform: none; border-radius: 1.302cqw; }
  .cap { font-size: 13px; }
  .groups, .list { gap: 28px; }
  .head { padding-top: 24px; }
}

/* "who builds and ships." always starts the second line. */
h1 .ln { display: block; }
@media (max-width: 640px) { .copy { max-width: calc(100% - 32px); } }