:root {
  --paper: #fcfcfc;
  --panel: #f4f4f5;
  --ink: #1c1c1f;
  --body: #55555e;
  --faint: #70707a; /* lightest text tone; 4.77:1 on --paper (WCAG AA) */
  --line: #e9e9ec;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 52rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.wrapper { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 450; line-height: 1.3; letter-spacing: -0.01em; }

a {
  color: var(--body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
  transition: all 0.15s ease-in-out;
}
a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 32px 0;
}
.monogram {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
}
.monogram .mark {
  height: 24px;
  width: auto;
  display: block;
  overflow: visible;
}
.monogram .mark path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.monogram .mark circle { fill: var(--ink); }
.site-header nav { display: flex; gap: 24px; }
.site-header nav a { font-size: 14px; font-weight: 400; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }

/* intro */
.intro { padding-block: 72px 0; }
.two-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.two-col > * { min-width: 0; }
.avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
}
.intro .name { font-size: 19px; font-weight: 500; }
.socials { display: flex; gap: 14px; margin-top: 10px; }
.socials a { color: var(--faint); display: inline-flex; }
.socials a:hover { color: var(--ink); }
.socials svg { width: 18px; height: 18px; }
.intro .statement {
  font-size: 19px;
  font-weight: 350;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* hero marquee */
.marquee {
  overflow: hidden;
  margin-top: 56px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  padding-block: 24px 40px;
  animation: marquee 55s linear infinite;
}
/* gallery keeps auto-scrolling on hover; the hovered card lifts instead */
.marquee-group { display: flex; gap: 20px; padding-right: 20px; }
.marquee-group img, .marquee-group video {
  height: 190px;
  width: auto;
  border-radius: 8px;
  border: 4px solid #fff;
  background: var(--panel);
  object-fit: cover;
  display: block;
  box-shadow: 0 1px 3px rgba(28, 28, 31, 0.14), 0 10px 24px rgba(28, 28, 31, 0.10);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
/* postcards lying around */
.marquee-group img:nth-child(8n+1) { transform: rotate(-2deg); }
.marquee-group img:nth-child(8n+2) { transform: rotate(1.5deg); }
.marquee-group img:nth-child(8n+3) { transform: rotate(-1deg); }
.marquee-group img:nth-child(8n+4) { transform: rotate(2.2deg); }
.marquee-group img:nth-child(8n+5) { transform: rotate(-1.6deg); }
.marquee-group img:nth-child(8n+6) { transform: rotate(1deg); }
.marquee-group img:nth-child(8n+7) { transform: rotate(-2.4deg); }
.marquee-group img:nth-child(8n+8) { transform: rotate(1.8deg); }
/* lift + tilt the card under the cursor (overrides its resting rotation) */
.marquee-group img:hover {
  transform: translateY(-8px) scale(1.04) rotate(-2.5deg);
  box-shadow: 0 4px 10px rgba(28, 28, 31, 0.12), 0 20px 40px rgba(28, 28, 31, 0.20);
  z-index: 2;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-caption {
  font-size: 13px;
  color: var(--faint);
  text-align: center;
  margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* sections */
section.block { padding-block: 72px 0; }
section.block:last-of-type { padding-bottom: 48px; }
.section-title {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 44px;
}

/* experience entries */
.entry { margin-bottom: 72px; }
.entry:last-child { margin-bottom: 0; }
.entry .logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
}
.entry .company { font-size: 19px; font-weight: 500; }
.entry .role { font-size: 14px; color: var(--body); }
.entry time {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--faint);
  margin-top: 6px;
}
.entry p { margin-bottom: 12px; }
.placeholder { color: var(--faint); }

/* project card carousels */
.projects {
  --bleed: calc(max(0px, (100vw - var(--maxw) - 48px) / 2) + 24px);
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* snap respects the 20px left padding so the first card stays aligned
     with the content column instead of auto-scrolling under it */
  scroll-padding-left: 20px;
  scrollbar-width: none;
  /* generous inner padding so card shadows render fully inside the
     scrollport; negative margins keep the visual rhythm unchanged */
  padding: 20px 4px 56px 20px;
  margin-left: -20px;
  margin-bottom: -36px;
  /* bleed past the content column to the viewport edge, with a fade
     hinting that more cards live to the right */
  margin-right: calc(-1 * var(--bleed));
  padding-right: var(--bleed);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 80px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 80px), transparent);
}
.projects::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 236px;
  scroll-snap-align: start;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(28, 28, 31, 0.05), 0 14px 32px rgba(28, 28, 31, 0.10);
}
.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: block;
}
.card .card-title {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ink);
  margin: 10px 6px 0;
  line-height: 1.4;
}
.card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 6px 10px; }
.tag {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}

/* testimonial */
blockquote {
  font-size: 18px;
  font-weight: 350;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -0.005em;
}
blockquote p { margin-bottom: 14px; }
blockquote footer { font-size: 13.5px; font-weight: 400; color: var(--faint); }

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding-block: 28px 44px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer ul { display: flex; gap: 20px; list-style: none; }
.site-footer a { font-size: 14px; font-weight: 400; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .mark { color: var(--faint); font-size: 13px; }

/* ---------- case study pages ---------- */
.case-wrap { max-width: 44rem; margin-inline: auto; padding-inline: 24px; }
.back {
  display: inline-block;
  font-size: 14px;
  text-decoration: none;
  margin-top: 40px;
}
.back:hover { text-decoration: underline; }
.case-header { padding-block: 48px 8px; }
.case-header h1 { font-size: 19px; font-weight: 500; line-height: 1.25; margin-bottom: 12px; letter-spacing: -0.015em; }
.case-header .meta { font-size: 14px; color: var(--faint); }
.case-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 450;
  color: var(--body);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: 12px;
}

.case-body { padding-bottom: 32px; }
.case-body h3 { font-size: 19px; font-weight: 500; margin: 44px 0 14px; }
.case-body h4 { font-size: 19px; font-weight: 500; margin: 36px 0 12px; }
.case-body p { margin-bottom: 16px; }
.case-body ul, .case-body ol { margin: 0 0 16px 24px; }
.case-body li { margin-bottom: 7px; }
.case-body hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.case-body b, .case-body strong { color: var(--ink); font-weight: 500; }

.case-body figure { margin: 30px 0; }
.case-body figure img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}
.case-body figcaption {
  font-size: 13px;
  color: var(--faint);
  text-align: center;
  margin-top: 10px;
}

.figma-embed { position: relative; width: 100%; aspect-ratio: 16 / 10; margin: 30px 0 12px; }
.figma-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 1px solid var(--line); border-radius: 10px;
}
.embed-fallback {
  font-size: 13px;
  color: var(--faint);
  text-align: center;
  margin-bottom: 28px;
}

.case-nav {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-top: 28px;
  font-size: 14.5px;
}

@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; gap: 16px; }
  .intro { padding-block: 48px 0; }
  .intro .statement { font-size: 19px; } /* matches heading size */
  section.block { padding-block: 56px 0; }
  .marquee { margin-top: 40px; }
  .marquee-group img, .marquee-group video { height: 150px; }
  .card { flex-basis: 200px; }
}