/* ============================================
   LAYOUT — Editorial Portfolio
   ============================================ */

/* --- Header --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height); /* real, exact height so calc(header-height + X) elsewhere lines up */
  z-index: var(--z-header);
  background: transparent;
  /* logo + nav invert against whatever scrolls under them, so they stay visible */
  mix-blend-mode: difference;
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between; /* logo, Works, Sketchbook, Contact — evenly spread edge to edge */
  padding-top: var(--space-3); /* 12px from the browser top to the nav text */
  padding-bottom: var(--space-3); /* 12px from the nav text to whatever follows the header */
}

.header__inner > .nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Primary nav (Works, Sketchbook) — flattened into the header's flex row
   so each link gets its own even gap, instead of sitting as one clustered
   pair in the middle. */
.nav__center {
  display: contents;
}

.nav__center .nav__link {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* Home page, top of scroll: Works sits in the logo's slot, sliding right to
   its normal place (and the logo fading in) as the user scrolls. Both track
   --scroll-progress (0 at the top, 1 past MORPH_DISTANCE) directly via
   calc() rather than a CSS transition, so the motion is locked to the
   scroll gesture itself instead of playing out on its own timer — see
   initHeaderScroll() in main.js for how the values are measured/driven. */
.nav__center a[data-home],
.nav__center a[data-project="handdraw"] {
  display: inline-block;
}

html.is-home .nav__center a[data-home] {
  transform: translateX(calc(var(--works-shift-x, 0px) * (1 - var(--scroll-progress, 0))));
}

/* Sketchbook sits at the true center of the 3-item row (Works, Sketchbook,
   Contact) at the top of the page, then eases over to its normal 4-item
   slot as the logo fades in — see initHeaderScroll() for --sketchbook-shift-x. */
html.is-home .nav__center a[data-project="handdraw"] {
  transform: translateX(calc(var(--sketchbook-shift-x, 0px) * (1 - var(--scroll-progress, 0))));
}

.header__logo {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  position: relative;
  opacity: 1;
}

html.is-home .header__logo {
  opacity: var(--scroll-progress, 0);
}

.header__logo:hover {
  text-decoration: underline;
}

.header__logo-photo {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: opacity 500ms var(--ease-out),
              transform 600ms var(--ease-out);
  z-index: var(--z-overlay);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.header__logo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header__logo:hover .header__logo-photo {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.header__logo sup {
  font-size: 0.45em;
  vertical-align: super;
  font-weight: var(--weight-regular);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.nav__list {
  display: flex;
  gap: var(--space-8);
}

.nav__link {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link--active {
  color: var(--color-text);
  text-decoration: underline;
}

.nav__link:hover {
  text-decoration: underline;
}

.nav__cta {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
}

.nav__cta:hover {
  text-decoration: underline;
}

/* White header text so mix-blend-mode: difference keeps it legible over any content */
.header__logo,
.header .nav__cta {
  color: var(--color-white);
}

/* Same white as the logo/Contact — no gray "inactive" state; which page is
   current is signaled by the underline on .nav__link--active instead. */
.header .nav__link {
  color: var(--color-white);
}

.header .nav__toggle span {
  background-color: var(--color-white);
}

.nav__toggle {
  display: none;
  width: 24px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
}

.nav__toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background-color: var(--color-text);
}

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  padding-top: var(--header-height); /* flush against the header, no extra gap */
  padding-bottom: var(--space-4); /* 16px below the title → gap to the cases */
  padding-inline: var(--page-margin);
}

.hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto 1fr; /* name row, subtitle row, photo row, then filler that pushes the socials down */
  column-gap: var(--space-4); /* matches header/showcase grid so columns line up */
  row-gap: 0;
}

.hero__name {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 8px; /* 8px gap to the subtitle below */
  overflow: hidden;
  transform-origin: top left;
}

/* Shrink + fade the giant name toward the header logo's position (measured
   into --hero-shrink-* by initHeaderScroll) as the user scrolls, while the
   real logo fades in at that same spot — a coordinated two-element
   illusion, not a literal morph (the logo text isn't even the same case).
   Driven by --scroll-progress via calc(), not a transition, so it tracks
   the scroll gesture instead of playing on its own timer. The extra
   classes/element selector out-specificity the .reveal.is-visible rule in
   animations.css so this doesn't get clobbered by it. */
html.is-home .hero__name.reveal.is-visible {
  transform:
    translate(
      calc(var(--hero-shrink-x, 0px) * var(--scroll-progress, 0)),
      calc(var(--hero-shrink-y, 0px) * var(--scroll-progress, 0))
    )
    scale(calc(1 + (var(--hero-shrink-scale, 1) - 1) * var(--scroll-progress, 0)));
  opacity: calc(1 - var(--scroll-progress, 0));
}

.hero__name-text {
  display: inline-block;
  white-space: nowrap;
  transform-origin: left top;
  font-family: var(--font-heading);
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-transform: uppercase;
}

.hero__image {
  grid-column: 1 / -1; /* full width, across the top */
  grid-row: 3;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.hero__socials {
  grid-column: 1 / span 4; /* left edge aligns with the logo (column 1) */
  grid-row: 4;
  align-self: start;
  justify-self: start;
  margin-top: 120px; /* fixed gap below the photo */
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.hero__years {
  grid-column: 9 / -1; /* right edge aligns with the page edge (column 12) */
  grid-row: 4; /* same row as "Things I've made", opposite side */
  align-self: start;
  justify-self: end;
  margin-top: 120px; /* matches .hero__socials so both sit on the same line */
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: right;
}

.hero__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.14 / 1; /* matches the photo's native proportions */
  max-height: 70vh;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}

.hero__title {
  grid-column: 1 / -1; /* left edge aligns with the name (column 1) */
  grid-row: 2;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl); /* 22px — a subtitle under the name, not a standalone headline */
  line-height: var(--leading-tight);
  letter-spacing: normal;
  color: var(--color-text);
  text-align: left;
  margin: 0 0 16px; /* 16px gap to the photo below */
}

/* --- Statement (main page, right after the cases) --- */
.ed-statement {
  padding-bottom: 140px;
}

.ed-statement__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-4);
}

.ed-statement__text {
  grid-column: 1 / 9;
  align-self: end; /* aligned to the bottom of the photo */
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 44px;
  line-height: 1.1em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}

.ed-statement__photo {
  grid-column: 10 / -1; /* same width as the hero video (columns 10 → edge) */
  align-self: end; /* sit at the bottom, level with the text baseline */
  margin: 0;
  overflow: hidden;
}

.ed-statement__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.6 / 1; /* same format as the hero video */
  max-height: 70vh;
  object-fit: cover;
  object-position: center 30%; /* portrait source — keep the face and the cat in frame */
  cursor: pointer;
}

@media (max-width: 900px) {
  .ed-statement__text,
  .ed-statement__photo {
    grid-column: 1 / -1;
  }
  .ed-statement__photo {
    margin-top: var(--space-8);
  }
}

/* --- Meta bar (services / stats row under hero) --- */
.meta-bar {
  padding-block: var(--space-8);
  border-top: var(--border-hairline);
}

.meta-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.meta-bar__label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.meta-bar__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* --- Project Detail (case study layout) --- */
.project-detail {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: var(--space-16);
  padding-block: var(--space-20);
}

.project-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
  align-self: start;
}

.project-detail__title {
  font-size: 48px;
  font-weight: 400;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.project-detail__description {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 480px;
}

.project-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.project-detail__gallery img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
}

/* --- About section --- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

.about__image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

.about__bio {
  font-size: var(--text-2xl);
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.about__description {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 480px;
}

.about__stats {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--border-hairline);
}

/* --- Footer --- */
.footer {
  padding-top: 120px; /* fixed gap to whatever precedes the footer */
  padding-bottom: var(--page-margin);
  border: none;
}

.footer__divider {
  height: 0.5px;
  background: var(--color-text);
  margin-bottom: var(--space-4); /* 16px above the text */
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-4); /* matches the header grid so columns line up */
  align-items: start;
}

.footer__copy {
  grid-column: 1 / 5; /* left edge aligns with the logo (column 1) */
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 32px between the title and the links */
}

.footer__col--assets {
  grid-column: 5 / 9; /* left edge aligns with "Works" (column 5) */
}

.footer__col--hello {
  grid-column: 9 / -1;
  justify-self: end;
  align-items: flex-end;
  text-align: right;
}

.footer__label {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* 4px between links */
}

.footer__col--hello .footer__list {
  align-items: flex-end;
  gap: 0;
}

.footer__link {
  color: var(--color-text); /* black, like the rest of the footer — overrides .nav__link's secondary grey */
}

/* --- Contact --- */
.contact {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--header-height);
  padding-bottom: var(--page-margin);
  padding-inline: var(--page-margin);
}

.contact__inner {
  width: 100%;
}

.contact__top {
  grid-column: 1 / 4;
  padding-top: var(--space-1);
}

.contact__body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
}

.contact__headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(26px, 4.8vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.contact__headline em {
  font-style: italic;
}

.contact__links {
  display: flex;
  flex-direction: column;
  text-align: right;
  flex-shrink: 0;
}

.contact__link {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 700;
  margin-top: -24px;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

/* --- Form (editorial) --- */
.form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: var(--border-hairline);
}

.form__field:last-of-type {
  border-bottom: var(--border-hairline);
  margin-bottom: var(--space-8);
}

.form__label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.form__input,
.form__textarea {
  border: none;
  background: transparent;
  font-size: var(--text-lg);
  padding: var(--space-2) 0;
  width: 100%;
}

.form__input:focus-visible,
.form__textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--color-black);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-gray-300);
}

.form__textarea {
  resize: none;
  min-height: 100px;
}

/* --- Image lightbox (full-screen viewer) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-margin);
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility 0ms linear var(--duration-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility 0ms linear 0ms;
}

.lightbox__close {
  position: absolute;
  top: var(--page-margin);
  right: var(--page-margin);
  background: none;
  border: none;
  padding: 0;
  color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.lightbox__close:hover {
  text-decoration: underline;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lightbox__img,
.lightbox__video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* --- Contact overlay --- */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: var(--page-margin);
  padding-top: calc(var(--header-height) + var(--space-16)); /* same gap below the header as .hero__title */
  overflow-y: auto;
  visibility: hidden;
}

.contact-overlay.is-open {
  visibility: visible;
}

.contact-overlay__header {
  position: absolute;
  top: 0;
  left: var(--page-margin);
  right: var(--page-margin);
  height: var(--header-height); /* matches .header's height */
  display: flex;
  align-items: start;
  padding-top: var(--space-3); /* matches .header__inner's top padding */
  padding-bottom: var(--space-3); /* matches .header__inner's bottom padding */
  justify-content: space-between;
}

.contact-overlay__logo {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
}

.contact-overlay__logo:hover {
  text-decoration: underline;
}

.contact-overlay__illustration {
  display: block;
  align-self: flex-start; /* opt out of flex stretch, which would otherwise force width to fill the row and distort the aspect ratio against max-height */
  width: auto;
  max-width: min(100%, 1800px); /* the source PNG's native width, so it never upscales past its own resolution */
  max-height: 60vh; /* guarantees it fits one screen — never forces the popup to scroll */
  height: auto;
  margin: auto 0 0 0; /* pinned to the bottom-left of the overlay */
}

.contact-overlay__close {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.contact-overlay__close:hover {
  text-decoration: underline;
}

.contact-overlay__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-4);
}

.contact-overlay__intro {
  grid-column: 1 / 5;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 44px;
  line-height: 1.1em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  text-align: left;
}

.contact-overlay__contacts {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* right edge aligns with "Close" */
  gap: 0; /* same rhythm as the wrapped lines in .ed-statement__text */
}

.contact-overlay__contact {
  /* hover (italic) and its transition come from the shared .nav__link class,
     kept in sync with the header nav and footer links */
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 44px; /* same style as .contact-overlay__intro */
  line-height: 1.1em;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  text-align: right;
}

@media (max-width: 900px) {
  .contact-overlay__intro {
    font-size: 32px;
  }

  .contact-overlay__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .contact-overlay__contact {
    font-size: 32px;
  }
}

/* --- Marquee / ticker --- */
.marquee {
  overflow: hidden;
  padding-block: 80px;
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
}

.marquee__inner {
  display: flex;
  gap: var(--space-16);
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.marquee__item {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  color: var(--color-gray-200);
  flex-shrink: 0;
}

.marquee__item span {
  color: var(--color-text);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Responsive --- */
@media (max-width: 900px) {

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .contact__inner {
    grid-template-columns: 1fr;
  }
  .contact__top,
  .contact__body {
    grid-column: 1 / -1;
  }
  .contact__top {
    margin-bottom: var(--space-4);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
  }
  .footer__copy,
  .footer__col--assets,
  .footer__col--hello {
    grid-column: 1 / -1;
  }
  .footer__col--hello {
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }
  .footer__col--hello .footer__list {
    align-items: flex-start;
  }

  .project-detail {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .project-detail__sidebar {
    position: static;
  }


}

@media (max-width: 600px) {
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height-mobile);
  }

  .nav__center {
    display: none;
  }

  .nav__list {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    z-index: var(--z-overlay);
  }

  .nav__list.open {
    display: flex;
  }

  .nav__list.open .nav__link {
    font-size: var(--text-2xl);
  }

  .nav__cta {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height-mobile) + var(--space-3));
    padding-bottom: var(--space-12);
  }

  .hero__title {
    grid-column: 1 / -1;
    max-width: none;
  }

  .hero__image {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .hero__name {
    margin-bottom: 40px;
  }

  .hero__socials {
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: auto;
  }

  .about__stats {
    flex-direction: column;
    gap: var(--space-6);
  }

  .marquee__item {
    font-size: var(--text-3xl);
  }
}

/* --- Global focus-visible styles --- */
:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.nav__link:focus-visible,
.nav__cta:focus-visible {
  outline-offset: 4px;
}

button:focus-visible {
  outline-offset: 3px;
}

/* --- Reduced motion — respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}