@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap");

/*
  Spacing + type system, derived from the 1920px-wide reference layout:
  - base spacing unit = 30px @ 1920 (every gap/margin on the page is this
    value or a whole multiple of it)
  - three font sizes in a fixed 78 : 38 : 21 ratio. All three are derived
    from the same clamped variable (--fs-t) so the ratio never breaks,
    even at the min/max ends of the clamp.
*/
:root {
  --bg: #ffffff;
  --footer-bg: #f2f2f2;
  --text: #0f0f0f;
  --muted: #a3a3a3;
  --muted-hover: #6b6b6b;
  --overlay: rgba(15, 15, 15, 0.62);

  --unit: clamp(14px, 1.5625vw, 30px);
  --margin: var(--unit);
  --gap: var(--unit);

  --fs-t: clamp(12px, 1.09375vw, 21px);
  --fs-3: var(--fs-t);
  --fs-2: calc(var(--fs-t) * 1.809524);

  /*
    The name is its own smooth curve rather than a pure multiple of --fs-t:
    keeping the strict 78:38:21 ratio all the way down to phone widths would
    force the small caption tier below readable sizes just to keep the name
    from overflowing. This single clamp (78px @ 1920 -> 26px @ 320, no
    breakpoint) shrinks continuously with the viewport, so there is never a
    sudden jump, and the name + mascot always fit on one line.
  */
  --fs-1: clamp(26px, calc(3.25vw + 15.6px), 78px);

  --icon-size: var(--fs-1);
  --header-h: calc(var(--unit) + var(--icon-size));
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: var(--fs-3);
  line-height: 1.5;
  cursor: url("../images/cursor.png") 2 2, auto;
}

a, button {
  cursor: url("../images/cursor.png") 2 2, auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
}

.wrap {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 var(--margin) calc(2 * var(--unit));
}

/* ---------- Header ---------- */
.site-header {
  max-width: 2000px;
  margin: 0 auto;
  padding: var(--unit) var(--margin) 0;
}

.header-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: var(--unit);
}

.site-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-1);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--unit);
  flex: 1 1 auto;
}

.site-nav a {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a:hover {
  color: var(--text);
}

/* Text bubble + mascot always travel together as one right-aligned unit,
   regardless of whether the Projects/About links are present or hidden. */
.mascot-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--unit);
  flex: none;
  min-width: 0;
}

.mascot-btn {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  flex: none;
}

.mascot-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.mascot-text {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mascot-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dropdowns (filter row + mobile nav) expand the header downward,
   no border/line ever separates the header from the page content */
.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.dropdown.is-open {
  max-height: 200px;
}

.filter-row-inner {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(var(--unit) / 3) var(--unit);
  padding: var(--unit) 0 calc(var(--unit) / 2);
}

.filter-chip {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  text-transform: uppercase;
  color: var(--muted);
}

.filter-chip:hover {
  color: var(--muted-hover);
}

.filter-chip.is-active {
  color: var(--text);
}

.filter-chip sup {
  position: relative;
  top: -0.6em;
  font-size: 0.5em;
  font-weight: 800;
  margin-left: 2px;
}

/* Full-screen menu, opened by tapping the name once the inline nav
   is hidden. White background, Projects/About centered, X to close. */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--unit));
}

.menu-overlay.is-open {
  display: flex;
}

.menu-overlay a {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-1);
  text-transform: uppercase;
  color: var(--muted);
}

.menu-overlay a[aria-current="page"] {
  color: var(--text);
}

.menu-close {
  position: absolute;
  top: var(--unit);
  right: var(--margin);
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
}

.menu-close svg {
  width: 100%;
  height: 100%;
  stroke: var(--text);
}

@media (max-width: 1000px) {
  .site-nav {
    display: none;
  }

  .site-name {
    cursor: url("../images/cursor.png") 2 2, pointer;
  }
}

/* ---------- Projects grid ---------- */
.grid {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding-top: calc(2 * var(--unit));
}

.grid-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.project {
  margin: 0;
}

.project a {
  position: relative;
  display: block;
  overflow: hidden;
}

.project img {
  display: block;
  width: 100%;
  height: auto;
  background: #e6e6e6;
}

.project .overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.22s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--unit);
  color: #fff;
}

.project a:hover .overlay {
  opacity: 1;
}

.overlay .title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  line-height: 1.15;
}

.overlay .year {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: calc(var(--unit) / 3);
}

.overlay .bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--unit);
}

.overlay .tags {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.overlay .go-arrow {
  width: var(--fs-2);
  height: var(--fs-2);
  flex: none;
}

/* ---------- Footer ---------- */
.back-to-top {
  text-align: center;
  padding: calc(2 * var(--unit)) 0 var(--unit);
}

.back-to-top a {
  font-weight: 500;
  font-size: var(--fs-3);
  color: var(--text);
}

.back-to-top a:hover {
  color: var(--muted-hover);
}

.site-footer {
  background: var(--footer-bg);
}

.site-footer-inner {
  max-width: 2000px;
  margin: 0 auto;
  padding: calc(2 * var(--unit)) var(--margin);
  text-align: center;
}

.footer-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  text-transform: uppercase;
  margin: 0 0 var(--unit);
}

.footer-contacts {
  display: flex;
  justify-content: center;
  gap: var(--unit);
  flex-wrap: wrap;
  font-weight: 500;
  font-size: var(--fs-3);
  margin-bottom: var(--unit);
}

.footer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--unit) / 3);
}

.footer-contacts a:hover {
  color: var(--muted-hover);
}

.footer-contacts img {
  width: 1em;
  height: 1em;
}

.footer-copy {
  font-weight: 500;
  font-size: var(--fs-3);
  color: var(--muted);
}

.no-back-to-top .site-footer {
  margin-top: calc(2 * var(--unit));
}

/* ---------- About page ---------- */
.about {
  display: flex;
  gap: calc(2 * var(--unit));
  /* Extra breathing room on top of the page's standard side margin (--wrap
     already gives 1 unit): this page reads cramped at just that much, since
     the portrait runs nearly the full viewport height. Total side margin
     ends up at 6 units (180px @1920) = wrap's 1 unit + this 5. */
  padding: calc(2 * var(--unit)) calc(5 * var(--unit)) 0;
  align-items: center;
  flex-wrap: wrap;
}

.about-text {
  flex: 1 1 380px;
  max-width: 800px;
}

.about-text p {
  margin: 0 0 var(--unit);
  font-size: var(--fs-2);
  line-height: 1.35;
}

.about-text .collab {
  margin-bottom: var(--unit);
}

.about-text .collab strong {
  font-weight: 800;
}

.about-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) / 3);
  font-size: var(--fs-2);
}

.about-contacts a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--unit) / 3);
}

.about-contacts a:hover {
  color: var(--muted-hover);
}

.about-contacts img {
  width: 1em;
  height: 1em;
}

.about-portrait {
  margin-left: auto;
  min-width: 0;
}

.about-portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Text + image together should fit the very first screen: cap the
     image to whatever height remains under the header, leaving a bit of
     breathing room at the bottom too (not just flush to the edge). */
  max-height: calc(100vh - var(--header-h) - 4 * var(--unit));
}

@media (max-width: 1000px) {
  .about {
    flex-direction: column;
    align-items: center;
  }

  .about-text {
    flex: 0 0 auto;
    text-align: center;
    max-width: 560px;
  }

  .about-contacts {
    align-items: center;
  }

  .about-portrait {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .about-portrait img {
    max-width: 100%;
    max-height: calc(100vh - var(--header-h) - 2 * var(--unit));
  }
}

/* ---------- Project detail page ---------- */
.project-detail {
  display: flex;
  gap: var(--gap);
  padding-top: calc(2 * var(--unit));
  align-items: flex-start;
}

.project-detail-text {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  /* Sits exactly where it starts in normal flow (header + the section's
     own top padding), so it re-anchors there with no jump on scroll,
     and its bottom edge always lands one unit above the viewport edge. */
  top: calc(var(--header-h) + 2 * var(--unit));
  height: calc(100vh - var(--header-h) - 3 * var(--unit));
}

.project-detail-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
  line-height: 1.1;
  margin: 0 0 var(--unit);
}

.project-detail-meta {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.project-detail-meta div {
  margin-bottom: calc(var(--unit) / 6);
}

.project-detail-tags {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--fs-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}

.project-detail-images {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap);
  min-width: 0;
}

.project-detail-images img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  background: #e6e6e6;
  cursor: url("../images/cursor.png") 2 2, zoom-in;
}

/* Full-screen "spotlight" image viewer, opened by clicking any tavola on
   a project page. Dark backdrop so the single image reads as the focus,
   unlike the light/white overlay used for the mobile nav menu. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(2 * var(--unit));
}

.lightbox.is-open {
  display: flex;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: url("../images/cursor.png") 2 2, auto;
}

.lightbox-close {
  position: absolute;
  top: var(--unit);
  right: var(--margin);
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  z-index: 1;
}

.lightbox-close svg {
  width: 100%;
  height: 100%;
  stroke: #fff;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.lightbox-nav:hover {
  opacity: 1;
}

.lightbox-nav svg {
  width: 60%;
  height: 60%;
  stroke: #fff;
}

.lightbox-prev {
  left: var(--margin);
}

.lightbox-next {
  right: var(--margin);
}

.lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .lightbox-nav {
    width: calc(var(--icon-size) * 0.8);
    height: calc(var(--icon-size) * 0.8);
  }
}

@media (max-width: 1000px) {
  .project-detail {
    flex-direction: column;
  }

  .project-detail-text {
    position: static;
    width: 100%;
    height: auto;
    text-align: center;
    align-items: center;
    gap: var(--unit);
    margin-bottom: calc(var(--unit) / 2);
  }

  /* Images center under the (also centered) text as soon as the layout
     stacks, same breakpoint as the text switching to vertical-center. */
  .project-detail-images {
    align-items: center;
  }
}