/* Paul Franken — values from Figma file pIEufC9kC8u64A3BRJq1aZ */
:root {
  --bg: #1f1f1f;
  --fg: #fff;
  --muted: #dedede;
  --line: #fafafa;
  --pill: #4427ff;
  --dot: #d9d9d9;
  --font: "peridot-pe-variable", system-ui, sans-serif;
  --gutter: 21px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--gutter);
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
ul { list-style: none; }
.underline, .hero a, .contact a, .insta-circle span, .site-footer a, .text-body a {
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--fg); color: var(--bg); padding: 8px 12px; z-index: 10; }

/* Header */
.site-header { display: flex; flex-direction: column; align-items: center; }
/* Sticky: nav sits outside the header so it stays pinned for the whole page */
.nav-pill {
  position: sticky; top: 26px; z-index: 5;
  width: fit-content; margin: 26px auto 0;
  display: flex; gap: 20px; padding: 10px 40px; border-radius: 18px;
  background: var(--pill); font-size: 14px; line-height: .9; white-space: nowrap;
}
.nav-pill a { text-decoration: none; }
.nav-pill a:hover { text-decoration: underline; }
.logo { margin-top: 43px; }

/* Home */
.hero {
  max-width: 538px; margin: 111px auto 0; text-align: center;
  font-size: 32px; font-weight: 800; line-height: 1.2;
}
.work { display: flex; flex-direction: column; align-items: center; margin-top: 70px; }
.work-title { font-size: 16px; font-weight: 500; line-height: .9; }
.chevron { margin-top: 14px; padding: 4px; }
.work-list { display: flex; flex-direction: column; gap: 58px; margin-top: 53px; width: 100%; align-items: center; }
.work-item { width: 520px; max-width: 100%; }
.work-item a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; text-align: center; }
.work-circle {
  width: 520px; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 4px rgb(0 0 0 / .25); transition: transform .3s ease;
}
.work-item a:hover .work-circle { transform: scale(1.015); }
.work-line { width: .5px; height: 19.5px; background: var(--line); }
.tags { font-size: 10px; font-weight: 400; line-height: normal; color: var(--muted); }
.work-name { width: 280px; font-size: 32px; font-weight: 800; line-height: .9; text-transform: uppercase; }
.work-item a:hover .work-name { text-decoration: underline; }

.show-more {
  position: relative; display: grid; place-items: center; width: 212px; height: 212px; margin-top: 58px;
  background: none; border: 0; color: var(--fg); font: 400 16px/normal var(--font); cursor: pointer;
}
.show-more[hidden] { display: none; }
.show-more img { position: absolute; inset: 0; width: 212px; height: 212px; }
.show-more span { position: relative; }
.show-more:hover span { text-decoration: underline; }

.pitch {
  width: 322px; max-width: 100%; margin: 196px auto 0; text-align: center;
  font-size: 16px; line-height: 1.2;
}

/* Contact block (every page) */
.contact { display: flex; flex-direction: column; align-items: center; margin-top: 90px; }
.contact-title { width: 342px; max-width: 100%; text-align: center; font-size: 32px; font-weight: 800; line-height: 1.2; }
.contact-links {
  display: flex; justify-content: space-between; width: 342px; max-width: 100%; margin-top: 19px;
  font-size: 32px; font-weight: 800; line-height: 1.2; text-align: center;
}
.contact-links a { width: 148px; }
.insta-circle {
  position: relative; display: grid; place-items: center; width: 342px; height: 342px; margin-top: 90px;
  text-decoration: none; transition: transform .3s ease;
}
.insta-circle:hover { transform: scale(1.03); }
.insta-circle img { position: absolute; inset: -1.17%; width: 350px; height: 350px; max-width: none; }
.insta-circle span { position: relative; width: 174px; text-align: center; font-size: 32px; font-weight: 800; line-height: 1.2; }

/* Footer */
.site-footer {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: 110px; padding-bottom: 69px; font-size: 16px; line-height: 1.2;
}
.site-footer p { margin-top: 23px; }
.wordmark + p { margin-top: 36px; }
.site-footer .legal { display: flex; gap: 22px; margin-top: 160px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Project */
.project { max-width: 1146px; margin: 0 auto; }
.project-head {
  display: grid; grid-template-columns: 623px 395px; column-gap: 65px;
  grid-template-areas: "title ." "circle intro"; margin-top: 82px;
}
.project-title {
  grid-area: title; max-width: 541px; padding-left: 15px;
  font-size: 48px; font-weight: 800; line-height: .9; text-transform: uppercase;
}
.project-head picture { grid-area: circle; margin-top: 50px; max-width: 100%; }
.project-circle {
  width: 623px; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 4px rgb(0 0 0 / .25);
}
.project-intro { grid-area: intro; margin-top: 76px; display: flex; flex-direction: column; gap: 20px; }
.intro-headline { font-size: 32px; font-weight: 800; line-height: 1.2; }
.intro-text { font-size: 16px; line-height: 1.4; }

.challenges { margin-top: 37px; padding-left: 17px; max-width: 623px; }
.challenges h2 { font-size: 32px; font-weight: 800; line-height: .9; text-transform: uppercase; }
.challenges ul {
  display: flex; flex-wrap: wrap; margin-top: 22px; padding-bottom: 30px; border-bottom: .5px solid var(--line);
  font-size: 12px; line-height: 1.4; width: 606px; max-width: 100%;
}
.challenges li:not(:last-child)::after { content: "|"; margin: 0 .6em; }

.project-layout {
  display: grid; grid-template-columns: 603px 345px; justify-content: space-between;
  margin-top: 37px; padding-left: 15px;
}
.prose { display: flex; flex-direction: column; gap: 51px; font-size: 14px; line-height: 1.4; }
.prose > * { max-width: 470px; }
.prose > p:has(> picture), .prose > picture { max-width: 603px; }
.prose img { width: 603px; border-radius: 8px; }
.prose > * { min-width: 0; }
.prose h2, .prose h3 { font-size: 24px; font-weight: 800; line-height: 1.1; margin-bottom: -35px; }
.prose .caption { margin-top: -39px; font-size: 12px; color: var(--muted); }
.prose a { text-underline-position: from-font; }
.video-link { font-size: 16px; font-weight: 800; }

.more-cases { align-self: end; }
.more-cases h2 { font-size: 12px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; }
.more-cases li + li { border-top: .5px solid var(--line); }
.more-cases a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 11px 10px 0;
  font-size: 16px; line-height: .9; text-decoration: none; opacity: .5; transition: opacity .2s;
}
.more-cases a::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--dot); }
.more-cases a:hover, .more-cases a:focus-visible { opacity: 1; }

.page-project .pitch { margin-top: 170px; }

/* Text pages (About, legal, 404) */
.text-page { width: 550px; max-width: 100%; margin: 79px auto 0; text-align: center; }
.text-title { font-size: 32px; font-weight: 800; line-height: 1.2; }
.text-page hr { margin: 38px 0; border: 0; border-top: .5px solid var(--line); }
.text-body { width: 397px; max-width: 100%; margin: 0 auto; font-size: 14px; line-height: 1.4; }
.text-body p + p { margin-top: 1.4em; }
.page-text .contact { margin-top: 82px; }

.page-legal .text-page { text-align: left; }
.page-legal .text-body { width: auto; }
.page-legal .text-body h3 { margin: 2em 0 .6em; font-size: 16px; font-weight: 800; }
.page-legal .text-body ul { list-style: disc; padding-left: 1.2em; margin-top: .6em; }
.page-legal .text-body p { margin-top: .8em; }

/* Mobile (Figma: iPhone 16, 393px) */
@media (max-width: 1180px) {
  .project-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "circle" "intro"; justify-items: center; }
  .project-title { padding: 0; text-align: center; max-width: 541px; }
  .project-intro { justify-self: stretch; max-width: 623px; margin: 42px auto 0; width: 100%; }
  .challenges { margin: 60px auto 0; padding: 0; }
  .project-layout { grid-template-columns: minmax(0, 1fr); row-gap: 60px; max-width: 623px; margin: 50px auto 0; padding: 0; }
  .more-cases { align-self: start; }
}
@media (max-width: 600px) {
  .hero { margin-top: 111px; }
  .work-list { margin-top: 53px; }
  .work-circle { width: 342px; }
  .project-title { margin-top: -20px; font-size: 29px; }
  .project-head picture { margin-top: 44px; }
  .project-circle { width: 351px; }
  .prose .caption { margin-top: -39px; }
  .pitch, .page-project .pitch { margin-top: 120px; }
  .contact-links { width: 334px; }
}