/* Fonts */
@font-face { font-family: "Inter"; src: url(/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/satoshi-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/satoshi-900.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --bg: #fffbf5;
  --ink: #1a1a1a;
  --accent: #ffbd04;
  --yellow: #ffbd03;
  --card: #f1f1f1;
  /* spring, bounce .25 / .45s */
  --spring-a: linear(0, 0.0605, 0.1982, 0.3643, 0.5279, 0.6721, 0.7894, 0.8787, 0.9423, 0.9845, 1.0099, 1.0231, 1.028, 1.0277, 1.0244, 1.0199, 1.0152, 1.0108, 1.0072, 1.0043, 1.0023, 1.0008, 1, 0.9995, 1);
  /* spring, bounce .2 / .4s */
  --spring-b: linear(0, 0.0532, 0.1752, 0.324, 0.4734, 0.6086, 0.7228, 0.8139, 0.8833, 0.9337, 0.9685, 0.9911, 1.0047, 1.0119, 1.0148, 1.015, 1.0136, 1.0116, 1.0093, 1.0071, 1.0051, 1.0036, 1.0023, 1.0014, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: "Inter", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
img, video, canvas, iframe { display: block; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page frame */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  overflow: hidden;
}
.page-home .page { gap: 12px; }

/* Header */
.hdr { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hdr-top { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 10px 20px; }
.hdr-logo { display: block; width: 200px; height: 200px; }
.hdr-logo img { width: 100%; height: 100%; object-fit: contain; }
.hdr-burger { display: none; }
.hdr-menu { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 35px; padding: 15px; }
.hdr-menu a {
  font: 400 18px/1.2 "Inter", sans-serif;
  color: var(--ink);
  text-decoration: none;
  white-space: pre;
  transition: color .3s cubic-bezier(.64, .04, .56, 1);
}
.hdr-menu a:hover, .hdr-menu a[aria-current="page"] { color: var(--accent); }

@media (max-width: 809.98px) {
  .hdr-top { gap: 20px; }
  .hdr-logo { width: 150px; height: 150px; }
  .hdr-burger { display: block; position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .hdr-burger i {
    position: absolute; left: 2px; width: 28px; height: 3px;
    border-radius: 2px; background: #1c1c1c;
    transition: left .4s var(--spring-b), top .4s var(--spring-b), width .4s var(--spring-b);
  }
  .hdr-burger i:nth-child(1) { top: 7px; }
  .hdr-burger i:nth-child(2) { top: 15px; }
  .hdr-burger i:nth-child(3) { top: 23px; }
  .hdr.is-open .hdr-burger i { width: 3px; top: 14px; }
  .hdr.is-open .hdr-burger i:nth-child(1) { left: 9px; }
  .hdr.is-open .hdr-burger i:nth-child(2) { left: 15px; }
  .hdr.is-open .hdr-burger i:nth-child(3) { left: 21px; }
  .hdr-menu { display: none; flex-direction: column; gap: 29px; }
  .hdr.is-open .hdr-menu { display: flex; }
}

/* Compact header on inner pages: small logo on the left, menu on the right, edges aligned with the text column */
.hdr-compact .hdr { flex-direction: row; justify-content: space-between; max-width: 1110px; gap: 20px; }
.hdr-compact .hdr-top { width: auto; padding: 10px 0; }
.hdr-compact .hdr-logo { width: 64px; height: 64px; }
.hdr-compact .hdr-menu { padding: 15px 0; }
@media (max-width: 1199.98px) {
  .hdr-compact .hdr { max-width: 710px; }
}
@media (max-width: 809.98px) {
  .hdr-compact .hdr { flex-direction: column; gap: 0; }
  .hdr-compact .hdr-top { width: 100%; flex-direction: row; justify-content: space-between; gap: 0; padding: 0 4px; }
  .hdr-compact .hdr-logo { width: 56px; height: 56px; }
}

/* Footer */
.ftr { width: 100%; height: 70px; position: relative; background: var(--bg); }
.ftr-icons { position: absolute; top: calc(50% - 16px); left: calc(50% - 57px); width: 114px; height: 32px; }
.ftr-icon {
  position: absolute; top: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow); border-radius: 20px;
}
/* Like the project cards: the hovered icon lifts, the others fade */
.ftr-icon { transition: opacity .35s ease, transform .45s var(--spring-a); }
.ftr-icon:hover { transform: translateY(-2px); }
.ftr-icons:has(.ftr-icon:hover) .ftr-icon:not(:hover) { opacity: .45; }
.ftr-icon:nth-child(1) { left: 0; }
.ftr-icon:nth-child(2) { left: calc(49.1228% - 16px); }
.ftr-icon:nth-child(3) { right: 0; }
.ftr-icon svg { width: 18px; height: 18px; fill: #fff; }

/* Rich text links */
.rt a { color: var(--accent); text-decoration: none; }
.rt a:hover { text-decoration: underline; }

/* Media helpers */
.fill { width: 100%; height: 100%; object-fit: cover; }
.rive { position: relative; }
.rive canvas { width: 100%; height: 100%; vertical-align: top; }

/* Vimeo embed (poster until clicked) */
/* white behind the poster and the (transparent) player, like the videos themselves */
.vm { position: relative; width: 100%; height: 100%; background: #fff center / contain no-repeat; cursor: pointer; }
.vm iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; transition: transform .45s var(--spring-a); }
.vm-play svg { width: 100%; height: 100%; }
.vm-bg { fill: rgba(26, 26, 26, .6); transition: fill .2s ease; }
.vm:hover .vm-play { transform: translate(-50%, -50%) scale(1.08); }
.vm:hover .vm-bg { fill: rgba(26, 26, 26, .85); }

/* Copy-to-clipboard chip (site.js handles [data-copy]) */
.copy-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 16px;
  border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .12);
  font: 500 15px/1 "Inter", sans-serif; color: var(--ink); cursor: pointer;
}
.copy-chip i {
  padding: 8px 10px; border-radius: 8px; background: rgba(187, 187, 187, .2);
  font: 500 12px/1 "Inter", sans-serif; font-style: normal; color: rgba(26, 26, 26, .7);
  transition: background .2s ease, color .2s ease;
}
.copy-chip:hover i, .copy-chip.is-copied i { background: var(--yellow); color: var(--ink); }

/* YouTube embed (thumbnail until clicked) */
.yt { position: relative; overflow: hidden; cursor: pointer; background: #000 center / cover no-repeat; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.yt-play svg { width: 100%; height: 100%; }
.yt-play .yt-bg { fill: #212121; fill-opacity: .8; transition: fill .1s cubic-bezier(.4, 0, 1, 1), fill-opacity .1s cubic-bezier(.4, 0, 1, 1); }
.yt:hover .yt-play .yt-bg { fill: #f00; fill-opacity: 1; }