@font-face {
  font-family: "Abril Fatface";
  src: url("./assets/fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("./assets/fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Glacial Indifference";
  src: url("./assets/fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Joey Display";
  src: url("./assets/display-script.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Joey Hand";
  src: url("./assets/hand-note.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Joey Body";
  src: url("./assets/body-font.woff") format("woff");
  font-display: swap;
}

:root {
  --ink: #171211;
  --cream: #fff4dc;
  --paper: #f8eed6;
  --blog-cream: #fffdf6;
  --pink: #e6536b;
  --light-pink: #ffd4df;
  --dark: #1a1112;
  --heading-font: "Abril Fatface", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--dark);
  font-family: "Joey Body", Arial, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 20;
  width: min(94vw, 760px);
  transform: translateX(-50%);
  pointer-events: none;
}

.topbar nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 212 223 / 0.68)),
    var(--light-pink);
  border: 2px solid rgb(27 19 19 / 0.68);
  border-radius: 999px;
  box-shadow:
    0 10px 0 rgb(230 83 107 / 0.56),
    0 14px 28px rgb(26 17 18 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.78);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 40px;
  padding: 10px 18px 9px;
  color: #1b1313;
  background: rgb(255 244 220 / 0.56);
  border: 1px solid rgb(27 19 19 / 0.44);
  border-radius: 999px;
  text-decoration: none;
  font-family: "Joey Hand", "Comic Sans MS", cursive;
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.topbar a:hover,
.topbar a:focus-visible {
  color: #1b1313;
  background: #fff1d8;
  box-shadow: 4px 4px 0 rgb(230 83 107 / 0.82);
  transform: translateY(-1px) rotate(-1deg);
}

.topbar a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

main {
  min-height: 100vh;
}

.hero,
.about-page,
.work-page {
  position: relative;
  height: 100vh;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--dark);
}

.hero {
  background: var(--paper);
}

.svg-page__image {
  display: block;
  width: min(100vw, calc(100vh * 1024.5 / 576));
  height: auto;
  aspect-ratio: 1024.5 / 576;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  user-select: none;
}

.home-art {
  background-color: var(--paper);
  background-image: url("./assets/source-svg/Home-page.svg");
}

.about-art {
  background-color: var(--dark);
  background-image: url("./assets/source-svg/whoami.svg");
}

.work-art {
  background-color: var(--dark);
  background-image: url("./assets/source-svg/Work-page.svg");
}

.work-page {
  display: grid;
  place-items: center;
  background: var(--dark);
}

.work-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1024.5 / 576));
  height: auto;
  aspect-ratio: 1024.5 / 576;
  margin: 0 auto;
  overflow: visible;
  background: var(--dark);
}

.work-title {
  position: absolute;
  top: 4.5%;
  left: 7.7%;
  z-index: 2;
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(46px, 5.5vw, 74px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0;
}

.work-title span {
  display: block;
  color: #fff4dc;
}

.work-title span + span {
  color: #f16a78;
}

.work-photo {
  position: absolute;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: #211818;
}

.work-photo img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
}

.work-photo--jina {
  left: 8.02%;
  top: 21.7%;
  width: 22.68%;
  height: 32.79%;
}

.work-photo--jina img {
  left: -19.47%;
  top: 0;
  width: 144.5%;
  height: 100%;
}

.work-photo--harness {
  left: 61.69%;
  top: 5.73%;
  width: 24.56%;
  height: 32.73%;
}

.work-photo--harness img {
  left: -0.09%;
  top: -0.2%;
  width: 100.09%;
  height: 100.2%;
}

.work-photo--appwrite {
  left: 40.61%;
  top: 47.29%;
  width: 17.86%;
  height: 33.97%;
}

.work-photo--appwrite img {
  left: -0.16%;
  top: 0;
  width: 100.36%;
  height: 124.9%;
}

.work-copy {
  position: absolute;
  z-index: 2;
  width: 28%;
  margin: 0;
  color: #f7ecd4;
  font-family: "Angradir", "Joey Body", Arial, sans-serif;
  letter-spacing: 0;
}

.work-copy h3 {
  margin: 0 0 3px;
  color: #f16a78;
  font-family: "Canva Sans", "Joey Body", Arial, sans-serif;
  font-size: 23.2px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

.work-copy p {
  margin: 0 0 8px;
  color: #ffd7df;
  font-family: "Angradir", "Joey Body", Arial, sans-serif;
  font-size: 13.1px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0;
}

.work-copy ul {
  margin: 0;
  padding-left: 15px;
  color: #f7ecd4;
  font-family: "Angradir", "Joey Body", Arial, sans-serif;
  font-size: 12.6px;
  line-height: 1.28;
  letter-spacing: 0;
}

.work-copy li {
  margin: 0 0 4px;
}

.work-copy p,
.work-copy ul {
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

.work-copy--jina {
  left: 8.02%;
  top: 58%;
  width: 25%;
}

.work-copy--harness {
  left: 61.69%;
  top: 40.6%;
  width: 30%;
}

.work-copy--appwrite {
  left: 40.61%;
  top: 83.6%;
  width: 28%;
}

.work-deco {
  position: absolute;
  right: -3.2%;
  bottom: -5.6%;
  z-index: 0;
  width: 23%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.about-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1024.5 / 576));
  height: auto;
  aspect-ratio: 1024.5 / 576;
  margin: 0 auto;
  overflow: visible;
  background: var(--dark);
}

.about-title {
  position: absolute;
  top: 4.5%;
  left: 2.4%;
  z-index: 4;
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(68px, 7.3vw, 98px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0;
}

.about-title span {
  display: block;
  color: #fff4dc;
}

.about-title span + span {
  color: #f16a78;
}

.about-camera {
  position: absolute;
  left: 12.1%;
  top: 27%;
  z-index: 3;
  width: 23.1%;
  height: 67.4%;
  margin: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff78b8, #f85f9d 72%, #f46a9c);
  box-shadow:
    inset 0 0 0 2px rgb(27 19 19 / 0.28),
    0 0 18px rgb(241 106 120 / 0.26);
}

.about-camera__photo {
  position: absolute;
  left: 8.5%;
  top: 4.5%;
  width: 78%;
  height: 68%;
  overflow: hidden;
  border: 4px solid #fff4b8;
  background: #120e0e;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}

.about-camera__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-camera__stamp {
  position: absolute;
  color: #ffffff;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.32);
  writing-mode: vertical-rl;
}

.about-camera__stamp--date {
  left: 7%;
  top: 7%;
}

.about-camera__stamp--auto {
  right: 7%;
  top: 7%;
}

.about-camera__stamp--time {
  left: 7%;
  bottom: 7%;
}

.about-camera__stamp--rec {
  right: 7%;
  bottom: 7%;
}

.about-camera__label {
  position: absolute;
  left: 3.2%;
  top: 34%;
  color: rgb(144 77 126 / 0.58);
  font-family: "Joey Body", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
}

.about-camera__button {
  position: absolute;
  right: 2.2%;
  top: 37.5%;
  width: 9.5%;
  aspect-ratio: 1 / 1.55;
  border-radius: 4px;
  background: #ffabc8;
}

.about-camera__button::after {
  position: absolute;
  inset: 23% 10%;
  content: "";
  border-radius: 999px;
  background: #343434;
}

.about-camera__pill {
  position: absolute;
  left: 12%;
  width: 4.8%;
  height: 10.8%;
  border-radius: 999px;
  background: #dfffbd;
  box-shadow: inset 0 0 6px rgb(113 166 85 / 0.55);
}

.about-camera__pill--one {
  top: 74%;
}

.about-camera__pill--two {
  top: 87%;
}

.about-camera__dial {
  position: absolute;
  left: 23%;
  bottom: 4.8%;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, #e8f4b7 0 22%, #c9e9c5 23% 46%, #bbdfa9 47% 100%);
  box-shadow: inset 0 0 8px rgb(113 166 85 / 0.42);
}

.about-camera__small-dot {
  position: absolute;
  left: 48%;
  bottom: 18.2%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #dfffbd;
  box-shadow: inset 0 0 6px rgb(113 166 85 / 0.45);
}

.about-camera__speaker {
  position: absolute;
  left: 63%;
  bottom: 7%;
  width: 14%;
  height: 23%;
  background-image: radial-gradient(circle, rgb(157 74 134 / 0.6) 0 18%, transparent 20%);
  background-size: 14px 14px;
}

.about-camera__meter {
  position: absolute;
  right: 3.8%;
  bottom: 4.8%;
  width: 6.3%;
  height: 26%;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, #89929b 0 2px, transparent 2px 11px),
    #dfffbd;
  box-shadow: inset 0 0 5px rgb(113 166 85 / 0.42);
}

.about-copy {
  position: absolute;
  left: 43%;
  top: 16.8%;
  z-index: 3;
  width: 39%;
  color: #f7ecd4;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 1.18vw, 19px);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0;
}

.about-copy p {
  margin: 0 0 0.9em;
}

.about-copy .about-tldr {
  display: inline-block;
  margin: 0 0 0.28em;
  color: #f16a78;
  font-family: "Canva Sans", "Joey Body", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.about-copy .about-tldr-line {
  margin: 0 0 0.95em;
  color: #ffd7df;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
}

.about-copy span {
  color: #f16a78;
}

.about-socials {
  position: absolute;
  right: 5%;
  bottom: 3.8%;
  z-index: 5;
  display: flex;
  gap: 18px;
}

.about-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #1b1313;
  background: #ffd7df;
  border: 2px solid #f7ecd4;
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgb(241 106 120 / 0.75);
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.about-social-link svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.about-social-link:hover,
.about-social-link:focus-visible {
  background: #fff4dc;
  box-shadow: 2px 2px 0 rgb(241 106 120 / 0.9);
  transform: translateY(-2px) rotate(-2deg);
}

.about-social-link:focus-visible {
  outline: 3px solid #fff4dc;
  outline-offset: 4px;
}

.about-star {
  position: absolute;
  right: -9.6%;
  bottom: -12.5%;
  z-index: 1;
  width: 31%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.roles-page {
  min-height: 100vh;
  padding: clamp(92px, 11vh, 132px) clamp(22px, 5vw, 82px);
  color: #f7ecd4;
  background: var(--dark);
}

.roles-inner {
  width: min(1060px, 100%);
  margin: 0 auto;
}

.roles-title {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(42px, 5vh, 64px);
  font-family: var(--heading-font);
  font-size: clamp(72px, 8vw, 118px);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: 0;
}

.roles-title span {
  display: block;
  color: #fff4dc;
}

.roles-title span + span {
  color: #f16a78;
}

.roles-subtitle {
  display: inline-block;
  margin: 0 0 clamp(42px, 5vh, 64px) 18px;
  color: #f16a78;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  vertical-align: 0.2em;
}

.roles-timeline {
  position: relative;
  display: grid;
  gap: 34px;
  padding-left: clamp(38px, 5vw, 72px);
}

.roles-timeline::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: clamp(13px, 1.65vw, 24px);
  width: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd7df, #f16a78 48%, #f7ecd4);
  box-shadow: 0 0 18px rgb(241 106 120 / 0.28);
}

.role-item {
  position: relative;
  max-width: 860px;
  padding: 0 0 0 clamp(10px, 1vw, 16px);
}

.role-item::before {
  position: absolute;
  top: 4px;
  left: calc(-1 * clamp(38px, 5vw, 72px) + clamp(3px, 0.55vw, 9px));
  content: "✦";
  color: #f16a78;
  font-family: "Joey Hand", "Comic Sans MS", cursive;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1;
  text-shadow:
    0 0 10px rgb(241 106 120 / 0.68),
    1px 1px 0 #ffd7df;
}

.role-date {
  margin: 0 0 7px;
  color: #ffd7df;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.1;
}

.role-item h3 {
  margin: 0 0 5px;
  color: #f16a78;
  font-family: "Canva Sans", "Joey Body", Arial, sans-serif;
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

.role-company {
  margin: 0 0 10px;
  color: #ffd7df;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.2;
}

.role-item ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #f7ecd4;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.42;
  letter-spacing: 0;
}

.role-item li::marker {
  color: #f16a78;
}

.scroll-button {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 5.8vh, 64px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 168px;
  min-height: 42px;
  padding: 10px 18px 9px;
  color: #1b1313;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 236 214 / 0.33) 45%, rgb(230 83 107 / 0.2)),
    #fff1d8;
  border: 2px solid #1b1313;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgb(255 246 222 / 0.75),
    7px 7px 0 rgb(230 83 107 / 0.74),
    inset 0 1px 0 rgb(255 255 255 / 0.92);
  font-family: "Joey Hand", "Comic Sans MS", cursive;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
  transform: translateX(-50%) rotate(-1deg);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
  animation: scroll-button-float 2.6s ease-in-out infinite;
}

.scroll-button span {
  color: var(--pink);
  font-size: 0.9em;
  line-height: 1;
}

.scroll-button:hover,
.scroll-button:focus-visible {
  background-color: #fff6e6;
  box-shadow:
    0 0 0 3px rgb(255 246 222 / 0.9),
    4px 4px 0 rgb(230 83 107 / 0.82),
    0 0 18px rgb(230 83 107 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.96);
  transform: translateX(-50%) translateY(-3px) rotate(1deg);
}

.scroll-button:focus-visible {
  outline: 3px solid #fff7e4;
  outline-offset: 5px;
}

.blog-body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    linear-gradient(rgb(255 253 246 / 0.88), rgb(255 253 246 / 0.88)),
    url("./assets/paper-texture.png?v=20260627pdf"),
    var(--blog-cream);
  background-size: 100% 100%, 300px 300px, 100% 100%;
}

.blog-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 138px 0 78px;
}

.blog-hero {
  display: grid;
  gap: 10px;
  margin-bottom: 34px;
}

.blog-hero p,
.blog-date,
.blog-back {
  margin: 0;
  color: #9a2840;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
}

.blog-hero h1 {
  margin: 0;
  color: #1b1313;
  font-family: "Joey Hand", "Comic Sans MS", cursive;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 rgb(230 83 107 / 0.36);
  transform: rotate(-1deg);
}

.blog-hero h1 span {
  color: var(--pink);
}

.blog-post h1 {
  margin: 0;
  color: var(--pink);
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgb(27 19 19 / 0.72);
}

.blog-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 420px));
  justify-content: start;
  gap: clamp(18px, 2.2vw, 30px);
}

.blog-home-deco {
  position: fixed;
  right: clamp(12px, 2.6vw, 42px);
  bottom: clamp(0px, 1vw, 18px);
  z-index: 0;
  width: min(34vw, 430px);
  max-width: calc(100vw - 32px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.blog-card {
  display: block;
  min-height: 360px;
  padding: 0;
  color: #1b1313;
  text-decoration: none;
  border: 3px solid var(--pink);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 253 246 / 0.98)),
    var(--blog-cream);
  box-shadow:
    9px 9px 0 rgb(230 83 107 / 0.72),
    inset 0 0 0 2px rgb(27 19 19 / 0.07);
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    background-color 170ms ease;
}

.blog-card article {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: 18px 18px 24px;
}

.blog-card__media {
  width: 100%;
  min-height: 190px;
  margin-bottom: 18px;
  border: 2px solid var(--pink);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgb(230 83 107 / 0.18), rgb(255 244 220 / 0.7)),
    radial-gradient(circle at 26% 28%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 74% 68%, rgb(230 83 107 / 0.24) 0 12%, transparent 13%),
    #fff8e7;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgb(27 19 19 / 0.08);
}

.blog-card:hover,
.blog-card:focus-visible {
  background-color: #fff8e7;
  box-shadow:
    5px 5px 0 rgb(230 83 107 / 0.82),
    0 0 22px rgb(230 83 107 / 0.22),
    inset 0 0 0 2px rgb(27 19 19 / 0.07);
  transform: translateY(-4px) rotate(-0.6deg);
}

.blog-card:focus-visible {
  outline: 3px solid #1b1313;
  outline-offset: 5px;
}

.blog-card--empty {
  min-height: 250px;
  padding: 26px;
  color: #1b1313;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 244 220 / 0.72)),
    var(--light-pink);
  border: 2px solid #1b1313;
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgb(230 83 107 / 0.78);
}

.blog-card p {
  margin: 0 0 14px;
  color: #9a2840;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.blog-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px 4px;
  color: #1b1313;
  background: var(--light-pink);
  border: 1px solid var(--pink);
  border-radius: 999px;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
}

.blog-card h2 {
  margin: 0 0 14px;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0;
}

.blog-card span {
  display: block;
  margin-top: auto;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.48;
}

.blog-post {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 34px;
  color: #1b1313;
  background:
    linear-gradient(rgb(255 253 246 / 0.78), rgb(255 253 246 / 0.78)),
    url("./assets/paper-texture.png?v=20260627pdf"),
    var(--blog-cream);
  background-size: 100% 100%, 300px 300px, 100% 100%;
  border: 2px solid #1b1313;
  border-radius: 8px;
  box-shadow: 11px 11px 0 rgb(230 83 107 / 0.78);
}

.blog-post h1 {
  margin: 16px 0 28px;
  color: var(--pink);
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 800;
  line-height: 1.03;
  text-shadow: 1px 1px 0 rgb(27 19 19 / 0.72);
}

.blog-back {
  display: inline-flex;
  margin-bottom: 18px;
  color: #1b1313;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.blog-date {
  color: var(--pink);
}

.blog-content {
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.68;
}

.blog-content h1,
.blog-content h2,
.blog-content h3 {
  margin: 34px 0 12px;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.blog-content h1 {
  font-size: 32px;
}

.blog-content h2 {
  font-size: 26px;
}

.blog-content h3 {
  font-size: 22px;
}

.blog-content p,
.blog-content ul {
  margin: 0 0 18px;
}

.blog-content a {
  color: #b51d40;
  font-weight: 700;
}

.blog-content code {
  padding: 2px 6px;
  background: rgb(230 83 107 / 0.14);
  border-radius: 5px;
}

.talks-body {
  min-height: 100vh;
  color: #1b1313;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--cream);
}

.talks-page {
  min-height: 100vh;
  padding: clamp(86px, 10vh, 116px) clamp(24px, 5vw, 76px) 84px;
  overflow-x: hidden;
  background: var(--cream);
}

.talks-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  align-items: end;
  gap: clamp(30px, 7vw, 92px);
  max-width: 1180px;
  margin: 0 auto;
}

.talks-title {
  margin: 0;
  color: #1b1313;
  font-family: var(--heading-font);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
}

.talks-title span {
  display: block;
}

.talks-title span + span {
  color: #f16a78;
}

.talks-intro {
  max-width: 560px;
  margin: 22px 0 0;
  color: #4a3737;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.45;
}

.talks-portrait {
  display: block;
  width: min(100%, 360px);
  height: auto;
  justify-self: end;
  user-select: none;
}

.talks-feature {
  width: min(1180px, 100%);
  margin: clamp(48px, 7vw, 82px) auto 0;
}

.talks-feature__copy {
  max-width: 820px;
  padding: clamp(24px, 3vw, 34px);
  border: 2px solid #f16a78;
  border-radius: 8px;
  background: rgb(255 248 235 / 0.72);
  box-shadow: 8px 8px 0 rgb(241 106 120 / 0.2);
}

.talks-kicker,
.talk-card__meta {
  margin: 0;
  color: #f16a78;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.talks-feature h2 {
  margin: 10px 0 16px;
  color: #1b1313;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
}

.talks-feature__copy p:not(.talks-kicker) {
  margin: 0;
  color: #3b2b2b;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
}

.talks-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.talks-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgb(241 106 120 / 0.7);
  border-radius: 999px;
  color: #1b1313;
  background: #ffd7df;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.talks-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 34px;
}

.talk-card {
  overflow: hidden;
  border: 2px solid #f16a78;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 10px 10px 0 rgb(241 106 120 / 0.28);
}

.talk-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.talk-card__body {
  padding: clamp(18px, 2.4vw, 26px);
}

.talk-card h3 {
  margin: 8px 0 10px;
  color: #1b1313;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.08;
  letter-spacing: 0;
}

.talk-card__body p:not(.talk-card__meta) {
  margin: 0;
  color: #4a3737;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.talk-card__video {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid #f16a78;
  border-radius: 999px;
  color: #1b1313;
  background: #ffd7df;
  font-family: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.talk-card__video[aria-disabled="true"] {
  cursor: default;
}

@keyframes scroll-button-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-button {
    animation: none;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    top: 8px;
    width: calc(100vw - 12px);
  }

  .topbar nav {
    justify-content: center;
    gap: 4px;
    padding: 5px;
    overflow: visible;
  }

  .topbar a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 30px;
    padding: 7px 4px 6px;
    font-size: clamp(12px, 3.25vw, 15px);
  }

  .hero,
  .about-page,
  .work-page {
    justify-content: center;
    height: auto;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    padding-top: 58px;
  }

  .svg-page__image {
    width: 100vw;
    min-width: 0;
  }

  .about-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 34px 18px 76px;
    overflow: hidden;
  }

  .about-title,
  .about-camera,
  .about-copy,
  .about-socials {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .about-title {
    order: 1;
    margin-bottom: 28px;
    font-size: clamp(66px, 18vw, 92px);
  }

  .about-camera {
    order: 2;
    width: min(88vw, 330px);
    height: auto;
    aspect-ratio: 0.66 / 1;
    margin: 0 auto 28px;
  }

  .about-copy {
    order: 3;
    width: min(88vw, 520px);
    margin: 0 auto 26px;
    font-size: clamp(16px, 4vw, 20px);
  }

  .about-socials {
    order: 4;
    justify-content: center;
    margin: 0 auto;
  }

  .about-star {
    right: -74px;
    bottom: -52px;
    width: min(58vw, 230px);
  }

  .work-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 860px;
    aspect-ratio: auto;
    padding: 34px 18px 60px;
  }

  .work-title {
    position: static;
    order: 1;
    margin-bottom: 28px;
    font-size: clamp(54px, 17vw, 86px);
  }

  .work-photo {
    position: relative;
    left: auto;
    top: auto;
    width: min(88vw, 420px);
    height: auto;
    margin: 0 auto 28px;
    aspect-ratio: 1.23 / 1;
  }

  .work-photo--jina {
    order: 2;
  }

  .work-photo--harness {
    order: 4;
  }

  .work-photo--appwrite {
    order: 6;
    aspect-ratio: 0.94 / 1;
  }

  .work-photo img,
  .work-photo--jina img,
  .work-photo--harness img,
  .work-photo--appwrite img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .work-copy {
    position: relative;
    left: auto;
    top: auto;
    width: min(88vw, 420px);
    margin: -10px auto 30px;
  }

  .work-copy--jina {
    order: 3;
  }

  .work-copy--harness {
    order: 5;
  }

  .work-copy--appwrite {
    order: 7;
  }

  .work-deco {
    position: absolute;
    right: -18px;
    bottom: -14px;
    width: min(46vw, 190px);
  }

  .roles-page {
    padding: 82px 22px 74px;
  }

  .roles-title {
    margin-bottom: 8px;
    font-size: clamp(64px, 20vw, 92px);
  }

  .roles-subtitle {
    display: block;
    margin: 0 0 38px 4px;
    font-size: 15px;
  }

  .roles-timeline {
    gap: 32px;
    padding-left: 38px;
  }

  .roles-timeline::before {
    left: 11px;
  }

  .role-item::before {
    left: -38px;
    font-size: 27px;
  }

  .scroll-button {
    position: static;
    justify-self: center;
    margin: 10px 0 18px;
    min-width: 142px;
    min-height: 38px;
    padding: 9px 14px 8px;
    font-size: 17px;
    transform: rotate(-1deg);
    box-shadow:
      0 0 0 3px rgb(255 246 222 / 0.75),
      5px 5px 0 rgb(230 83 107 / 0.74),
      inset 0 1px 0 rgb(255 255 255 / 0.92);
  }

  .scroll-button:hover,
  .scroll-button:focus-visible {
    transform: translateY(-3px) rotate(1deg);
  }

  .blog-shell {
    width: min(100% - 28px, 680px);
    padding: 104px 0 52px;
  }

  .blog-list {
    grid-template-columns: 1fr;
  }

  .blog-home-deco {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(82vw, 320px);
    margin: 28px 0 0 auto;
  }

  .blog-card,
  .blog-post {
    padding: 22px;
    box-shadow: 6px 6px 0 rgb(230 83 107 / 0.78);
  }

  .blog-card {
    padding: 0;
  }

  .blog-card article {
    min-height: 390px;
  }

  .blog-card__media {
    min-height: 160px;
  }

  .blog-post h1 {
    font-size: clamp(32px, 11vw, 48px);
  }

  .talks-page {
    padding: 82px 18px 58px;
  }

  .talks-hero,
  .talks-feature {
    display: block;
  }

  .talks-title {
    font-size: clamp(44px, 13vw, 56.2px);
  }

  .talks-intro {
    font-size: 16px;
  }

  .talks-portrait {
    width: min(78vw, 300px);
    margin: 34px auto 0;
  }

  .talks-feature {
    margin-top: 48px;
  }

  .talks-feature__copy {
    position: relative;
    top: auto;
    padding: 22px;
  }

  .talks-card-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }

  .talk-card {
    box-shadow: 6px 6px 0 rgb(241 106 120 / 0.28);
  }

  .talk-card img {
    aspect-ratio: 4 / 3;
  }

  .talk-card__body {
    padding: 18px;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .blog-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  }

  .talks-hero,
  .talks-feature {
    max-width: 860px;
  }

  .talks-card-grid {
    grid-template-columns: 1fr;
  }
}