@font-face {
  font-family: "Nib";
  src: url("assets/fonts/nib-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nib";
  src: url("assets/fonts/nib-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-text: #202123;
  --color-text-secondary: #696969;
  --color-bg: #f5f5f5;
  --color-bg-secondary: #efefef;
  --color-line: rgba(0, 0, 0, 0.1);
  --color-nav-select-line: rgba(0, 0, 0, 0.23);
  --color-nav-select-bg: #ededed;
  --color-divider-segmented: #ccc8c8;
  --color-orb: rgba(251, 177, 34, 0.14);
  --max-width: 1432px;

  --font-display: "Nib", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

#previous-clients {
  scroll-margin-top: 88px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--wide {
  padding: 0 96px;
}

@media (max-width: 720px) {
  .wrap--wide {
    padding: 0 24px;
  }
}

/* Top nav */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 245, 245, 0.16);
  backdrop-filter: blur(4px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
}

.top-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.25px;
  background: var(--color-line);
  z-index: 1;
}

.top-nav.is-scrolled {
  background: rgba(245, 245, 245, 0.92);
  backdrop-filter: blur(10px);
}

.top-nav__inner {
  position: relative;
  z-index: 2;
  max-width: 1728px;
  margin: 0 auto;
  height: 44px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  padding: 0 64px;
}

.top-nav__brand {
  font-family: var(--font-display);
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.top-nav__brand-short {
  display: none;
}

@media (max-width: 720px) {
  .top-nav__brand-full {
    display: none;
  }
  .top-nav__brand-short {
    display: inline;
  }
}

.top-nav__links {
  display: flex;
  gap: 4px;
}

.top-nav__links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-bottom: 1px solid transparent;
  color: var(--color-text);
}

.top-nav__links a[aria-current="page"] {
  background: var(--color-nav-select-bg);
  border-bottom: 1px solid var(--color-nav-select-line);
  font-weight: 600;
}

.top-nav__social {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}

.top-nav__social a {
  display: flex;
  align-items: center;
  line-height: 0;
}

.top-nav__social img {
  width: 20px;
  height: 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.top-nav__social a:hover img {
  opacity: 0.7;
}

@media (max-width: 720px) {
  .top-nav__inner {
    height: 56px;
    padding: 0 24px;
    gap: 12px;
  }
  .top-nav__links {
    gap: 0;
  }
  .top-nav__links a {
    height: 56px;
    padding: 8px 12px;
    font-size: 13px;
  }
  /* Keep the icons from being squeezed when the nav row runs out of room */
  .top-nav__social {
    gap: 4px;
    margin-right: -8px;
    flex-shrink: 0;
  }
  .top-nav__social a {
    padding: 8px;
    flex-shrink: 0;
  }
  .top-nav__social img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}

/* Hero */
.hero {
  position: relative;
  min-height: calc(100vh - 44px);
  padding: 24px 0 64px;
  text-align: center;
  overflow: hidden;
}

/* Rising sun orb */
.hero__sun {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 177, 34, 0.28) 0%, rgba(251, 177, 34, 0.09) 40%, transparent 68%);
  filter: blur(56px);
  left: 50%;
  top: var(--sun-top, 50%);
  transform: translate(-50%, calc(-50% + 90vh));
  animation: sun-rise 3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  pointer-events: none;
  z-index: 0;
}

@keyframes sun-rise {
  to {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 720px) {
  .hero__sun {
    width: 480px;
    height: 480px;
  }
}

/* Bird particle canvas */
.bird-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* Bird selector widget */
.bird-widget {
  position: absolute;
  left: 40px;
  top: var(--widget-top, 50%);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(245, 245, 245, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 28px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.bird-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.16);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bird-btn--selected {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}

.bird-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.bird-btn__icon svg {
  width: 100%;
  height: 100%;
}

.bird-badge {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.bird-btn:hover .bird-badge {
  opacity: 1;
}

@media (max-width: 880px) {
  .bird-widget {
    flex-direction: row;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    border-radius: 26px;
    padding: 8px;
    gap: 6px;
  }
  .bird-btn {
    width: 40px;
    height: 40px;
  }
  .bird-btn__icon {
    width: 23px;
    height: 23px;
  }
  /* No hover on touch — anchor the name badge below each button instead of
     beside it so it can't run off-screen if it ever shows. */
  .bird-badge {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
  }
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px - 24px - 64px);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.hero__spacer {
  flex: 1;
}

.hero__text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.5vw + 10px, 40px);
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: min(760px, 84%);
  overflow-x: hidden;
}

.hero__text .hero__sub {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.6;
  margin: 0;
}

.hero__explore {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
}

.hero__sub a {
  text-decoration: underline;
}

.hero__spinner-link {
  display: inline-flex;
  cursor: pointer;
}

.hero__spinner {
  width: 48px;
  height: 48px;
}

@media (max-width: 880px) {
  .hero__spinner {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 720px) {
  .hero__spinner {
    width: 38px;
    height: 38px;
  }
  /* Lift the spinner so the iOS Safari bottom toolbar doesn't clip it */
  .hero__spinner-link {
    margin-bottom: 56px;
  }
}

.hero__spinner-spin {
  transform-origin: 32px 32px;
  animation: spin 8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .hero__text h1 {
    font-size: clamp(19px, 4vw + 6px, 27px);
  }
  .hero__text .hero__sub {
    font-size: 18px;
  }
}

/* Section heading (italic serif eyebrow) */
.section-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 8px;
}

.section-note {
  margin: 0 0 40px;
}

.section-note__bold,
.section-note__regular {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text);
}

.section-note__bold {
  font-weight: 700;
}

.section-note__regular {
  font-weight: 400;
}

@media (max-width: 720px) {
  .section-eyebrow {
    font-size: 22px;
  }
  .section-note {
    margin: 0 0 28px;
  }
  .section-note__bold,
  .section-note__regular {
    font-size: 16px;
  }
}

/* Previous Clients cards */
.client-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 80px;
}

.client-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 32px;
  padding: 32px 40px;
  min-height: 168px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.client-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.client-card__logo {
  display: flex;
  align-items: center;
}

.client-card__logo img {
  max-height: 40px;
  width: auto;
}

@media (max-width: 880px) {
  .client-card__logo img {
    max-height: 34px;
  }
}

.client-card h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 8px;
}

.client-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 720px) {
  .client-card {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 16px;
    padding: 24px;
    min-height: 0;
  }
  .client-card h3 {
    font-size: 16px;
  }
  .client-card p {
    font-size: 14px;
  }
  .client-card__logo img {
    max-height: 28px;
  }
}

/* Footer */
.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-line);
  padding: 32px 0;
}

.site-footer .wrap {
  max-width: 1728px;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

@media (max-width: 720px) {
  .site-footer .wrap {
    padding: 0 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
  }
}

/* Generic page top photo */
.page-photo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 48px 0 0;
}

.page-photo__title {
  grid-column: 1 / span 2;
  align-self: end;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  margin: 0;
}

.page-photo__img {
  grid-column: span 3;
  overflow: hidden;
}

.page-photo img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.page-photo__img:hover img {
  transform: scale(1.06);
}

@media (max-width: 720px) {
  .page-photo__title {
    font-size: 28px;
  }
}

@media (max-width: 880px) {
  .page-photo {
    grid-template-columns: 1fr;
  }
  .page-photo__title {
    grid-column: 1;
    align-self: start;
  }
  .page-photo__img {
    grid-column: span 1;
  }
}

/* Table-row grid system used on About / Personal */
.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 24px 0;
}

.row--no-divider {
  grid-template-rows: 0 auto;
  row-gap: 0;
  column-gap: 16px;
}

/* Page intro header (e.g. "Personal Work"): bottom padding matches the
   total gap used BETWEEN sections on About (each side's padding stacks
   with its row's own unchanged 24px padding, then with the next section's
   matching pair: 48 + 24 + 48 + 24 = 144px). The following .hobby-section
   already contributes 24px of its own top padding, so 120px here completes
   that same 144px total. */
.row--intro {
  padding: 112px 0 120px;
}

.row--no-divider .row__title,
.row--no-divider .row__body {
  grid-row: 2;
}

.row__tick {
  grid-row: 1;
  align-self: start;
  height: 1.5px;
  border-radius: 0.75px;
  background: var(--color-divider-segmented);
}

.row__title,
.row__body {
  grid-row: 2;
  margin: 0;
}

.row__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  grid-column: 1 / span 2;
  white-space: nowrap;
}

.row__title--italic {
  font-style: italic;
  font-size: 28px;
  white-space: normal;
}

.row__body {
  grid-column: 3 / span 3;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Groups a section header (.row--title-first) with its content rows so
   the whole section can be spaced apart from neighboring sections. */
.about-section {
  padding: 48px 0;
}

/* The About Me section has no title in its row (it lives in .page-photo
   instead), so the row's own top padding has nothing above it to justify -
   it would just add extra space between the photo and the divider tick.
   Drop it so that gap matches the title-to-divider gap in other sections. */
.page-photo + .about-section {
  padding-top: 0;
}

.page-photo + .about-section .row--title-first {
  padding-top: 0;
}

/* Variant: title sits above the divider line, body sits below it */
.row--title-first .row__title {
  grid-row: 1;
}

.row--title-first .row__tick {
  grid-row: 2;
}

.row--title-first .row__body {
  grid-row: 3;
}

.row__body p {
  margin: 0 0 16px;
}

.row__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 880px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .page-photo {
    gap: 8px;
  }
  .row--no-divider,
  .row--intro {
    column-gap: 8px;
  }
  .row__tick:nth-of-type(n + 3) {
    display: none;
  }
  .row__title {
    grid-column: 1 / -1;
  }
  .row__body {
    grid-column: 1 / -1;
  }
  .row--no-divider {
    grid-template-rows: auto auto;
    padding: 12px 0;
  }
  .row--no-divider .row__title {
    grid-row: 1;
  }
  .row--no-divider .row__body {
    grid-row: 2;
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  .row--intro {
    padding: 44px 0 64px;
  }
  .row__title {
    font-size: 28px;
  }
  .row__title--italic {
    font-size: 20px;
  }
  .row__body {
    font-size: 14px;
  }
  .about-section {
    padding: 20px 0;
  }
  .row__title-arrow {
    display: none;
  }
  /* Hide the divider line above the About Me description on mobile */
  .page-photo + .about-section .row--title-first .row__tick {
    display: none;
  }
  /* Hide the divider line above the Personal Work description on mobile */
  .row--intro .row__tick {
    display: none;
  }
}

/* Personal page hobby section: title/description always on the left,
   images always on the right (two per row, together spanning 3 of 5 columns).
   Fixed sides at every viewport width so the layout can't break responsively. */
.hobby-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 0 auto;
  column-gap: 16px;
  row-gap: 0;
  padding: 24px 0;
}

.hobby-section__tick {
  grid-row: 1;
  align-self: start;
  height: 1.5px;
  border-radius: 0.75px;
  background: var(--color-divider-segmented);
}

.hobby-section__text {
  grid-row: 2;
  grid-column: 1 / span 2;
  max-width: 220px;
  padding-top: 16px;
}

.hobby-section__text h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 12px;
}

.hobby-section__text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.hobby-section__images {
  grid-row: 2;
  grid-column: 3 / span 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}

.hobby-section__images > * {
  overflow: hidden;
}

.hobby-section__images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hobby-section__images img.is-landscape {
  aspect-ratio: 16 / 10;
}

/* Rows that pair a square image with a landscape one (e.g. Film Photography):
   each row is its own grid sized proportionally to the images' aspect ratios
   (1:1 vs 16:10) so both fill the full row width while ending up the same
   height, instead of splitting the row into two equal halves. */
.hobby-section__images--rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hobby-section__img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hobby-section__img-row:has(> :first-child img.is-landscape) {
  grid-template-columns: 1.6fr 1fr;
}

.hobby-section__img-row:has(> :last-child img.is-landscape) {
  grid-template-columns: 1fr 1.6fr;
}

.hobby-section__img-row > * {
  overflow: hidden;
}

.hobby-section__images > *:not(.hobby-section__img-row):hover img,
.hobby-section__img-row > *:hover img {
  transform: scale(1.06);
}

@media (max-width: 880px) {
  .hobby-section {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
  }
  .hobby-section__text,
  .hobby-section__images {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .hobby-section__text {
    max-width: none;
  }
  .hobby-section__images {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 24px;
    gap: 8px;
  }
  .hobby-section__img-row,
  .hobby-section__images--rows {
    gap: 8px;
  }
}

@media (max-width: 720px) {
  .hobby-section__text h3 {
    font-size: 20px;
  }
  .hobby-section__text p {
    font-size: 14px;
  }
}

/* Scroll-in text animation */
.animate-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.animate-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero-only text reveal: each line of words rises up from below the
   baseline (masked, like the baseline is the edge of a frame) and
   snaps into place, left-to-right within a line, top lines before
   bottom lines */
.hero-reveal {
  opacity: 0;
}

.hero-reveal.is-visible {
  opacity: 1;
}

.reveal-line-mask {
  display: block;
  width: fit-content;
  margin: 0 auto;
  overflow: hidden;
}

.reveal-line {
  display: block;
  white-space: nowrap;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.22, 1.12, 0.36, 1);
  will-change: transform;
}

.hero-reveal.is-visible .reveal-line {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .animate-up,
  .hero-reveal,
  .reveal-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__sun {
    animation: none;
    transform: translate(-50%, -50%);
  }
  .hero__spinner-spin {
    transition: none;
    animation: none;
  }
}