/* ==========================================================================
   style.css
   Sections: 1) Tokens & reset  2) Layout (header/main/footer)
             3) Project grid component
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Jost:wght@400;500&family=Outfit:wght@500;600&display=swap');

:root {
  --paper: #f6f6f3;
  --paper-dim: #efefea;
  --ink: #131313;
  --ink-soft: #6b6b64;
  --line: #dbd9d1;
  --accent: #1f3a93;

  --font-display:
    'Fraunces',
    Georgia,
    serif;

  --font-mono:
    'IBM Plex Mono',
    'Courier New',
    monospace;

  --font-sans:
    'Inter',
    -apple-system,
    'Segoe UI',
    Helvetica,
    Arial,
    sans-serif;

  --gutter-landscape: 18vw;
  --gutter-portrait: 10vw;
  --gutter: var(--gutter-landscape);

  --nav-height: 5.5rem;
  --nav-link-gap: 0.5rem;

  --content-gap:
    calc(
      var(--nav-link-gap) * 4.2
    );

  --content-gap-lg:
    calc(
      var(--content-gap) * 0.8
    );

  --image-gap:
    clamp(
      1rem,
      3vw,
      1.5rem
    );

  --title-image-max-height:
    min(
      48svh,
      32rem
    );

  --step-0:
    clamp(
      0.9rem,
      0.86rem + 0.2vw,
      1rem
    );

  --step-1:
    clamp(
      1.1rem,
      1rem + 0.5vw,
      1.4rem
    );

  --step-2:
    clamp(
      1.6rem,
      1.3rem + 1.2vw,
      2.4rem
    );

  --step-3:
    clamp(
      2.2rem,
      1.7rem + 2.2vw,
      3.6rem
    );
}

@media (orientation: portrait) {
  :root {
    --gutter:
      var(--gutter-portrait);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing:
    antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

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

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

button {
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:
      0.001ms !important;

    transition-duration:
      0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;

  min-height: 4.75rem;
  padding:
    1rem
    var(--gutter)
    var(--nav-link-gap);

  box-sizing: border-box;
  background: var(--paper);
  text-align: center;

  opacity: 0;
  transform:
    translateY(-14px);

  pointer-events: none;

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-nav.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.site-nav.page-leaving {
  opacity: 0;

  transform:
    translateY(-14px);

  pointer-events: none;
}

.site-nav::after {
  content: '';

  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);

  height: 1px;
  background: var(--line);
}

.site-nav__name {
  display: block;
  margin-bottom: 0.2rem;

  color: var(--ink);

  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;

  transition:
    color 0.25s ease;
}

.site-nav__name:hover,
.site-nav__name:focus-visible {
  color: var(--ink-soft);
}

.site-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 2rem;
}

.site-nav__primary {
  display: flex;
  align-items: center;
  gap: 1.25rem;

  max-width: 20rem;
  overflow: hidden;
  opacity: 1;

  transition:
    max-width 0.35s ease,
    opacity 0.25s ease,
    margin 0.35s ease;
}

.site-nav__links.is-searching
.site-nav__primary {
  max-width: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.site-nav__link {
  color: var(--ink-soft);

  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  white-space: nowrap;
}

/* Delete this rule to show
   the About link again. */

.site-nav__link--about {
  display: none;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--ink);
}

.site-nav
a:not(.site-nav__name) {
  text-decoration: none;

  background-image:
    linear-gradient(
      currentColor,
      currentColor
    );

  background-repeat: no-repeat;
  background-position:
    center bottom;

  background-size:
    0 1px;

  transition:
    color 0.2s ease,
    background-size 0.28s ease;
}

.site-nav
a:not(.site-nav__name):hover,
.site-nav
a:not(.site-nav__name):focus-visible {
  background-size:
    100% 1px;
}

/* --------------------------------------------------------------------------
   Navigation search
   -------------------------------------------------------------------------- */

.site-nav__search-group {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding-right: 0;

  transition:
    padding-right 0.4s ease;
}

.site-nav__links.is-searching
.site-nav__search-group {
  padding-right: 2.4rem;
}

.site-nav__search {
  position: relative;

  display: flex;
  align-items: center;

  width: 4rem;
  height: 2rem;
  overflow: hidden;

  border: 1px solid transparent;
  border-radius: 999px;

  transition:
    width 0.4s ease,
    border-color 0.25s ease;
}

.site-nav__links.is-searching
.site-nav__search {
  width:
    min(
      320px,
      55vw
    );

  border-color:
    var(--ink-soft);
}

.site-nav__search-label {
  position: absolute;
  top: 50%;
  left: 50%;

  color: var(--ink-soft);

  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  white-space: nowrap;
  text-decoration: none;

  transform:
    translate(
      -50%,
      -50%
    );

  background-image:
    linear-gradient(
      currentColor,
      currentColor
    );

  background-repeat: no-repeat;
  background-position:
    center bottom;

  background-size:
    0 1px;

  transition:
    opacity 0.25s ease,
    color 0.2s ease,
    background-size 0.28s ease;
}

.site-nav__search-label:hover,
.site-nav__search-label:focus-visible {
  color: var(--ink);

  background-size:
    100% 1px;
}

.site-nav__links.is-searching
.site-nav__search-label {
  opacity: 0;
  pointer-events: none;
}

.site-nav__search-close {
  position: absolute;
  top: 50%;
  right: 0;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;

  border: 1px solid var(--ink-soft);
  border-radius: 50%;

  background: transparent;
  color: var(--ink-soft);

  font-family: var(--font-mono);
  font-size: 0.9rem;

  opacity: 0;

  transform:
    translateY(-50%)
    scale(0.6);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.site-nav__search-close:hover,
.site-nav__search-close:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.site-nav__links.is-searching
.site-nav__search-close {
  opacity: 1;

  transform:
    translateY(-50%)
    scale(1);

  pointer-events: auto;
}

.site-nav__search-input {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  padding: 0 1.2rem;

  border: none;
  background: transparent;
  color: var(--ink);

  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.25s ease;
}

.site-nav__search-input::-webkit-search-cancel-button,
.site-nav__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.site-nav__search-input::-ms-clear {
  display: none;
}

.site-nav__search-input::placeholder {
  color: var(--ink-soft);
}

.site-nav__search-input:focus {
  outline: none;

  border-bottom-color:
    var(--accent);
}

.site-nav__links.is-searching
.site-nav__search-input {
  opacity: 1;
  pointer-events: auto;
}

.page-scroll main {
  padding-top:
    calc(
      var(--nav-height) +
      var(--content-gap)
    );
}

main {
  padding:
    clamp(
      1.5rem,
      6vw,
      4rem
    )
    var(--gutter);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-footer {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    1.25rem
    var(--gutter);

  color: var(--ink-soft);
  font-size: 0.75rem;
}

.site-footer::before {
  content: '';

  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);

  height: 1px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Scroll fade-in
   -------------------------------------------------------------------------- */

.fade-in {
  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Page transitions
   -------------------------------------------------------------------------- */

main.page-enter,
main.page-leaving {
  opacity: 0;

  transform:
    translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  main {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Splash screen
   -------------------------------------------------------------------------- */

html,
body {
  height: 100%;
}

body:has(.splash) {
  overflow: hidden;
}

.splash-unlock {
  position: fixed;
  top: -9999px;
  left: -9999px;

  opacity: 0;
  pointer-events: none;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: #000;

  transition:
    transform 0.6s ease;
}

@keyframes splash-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.splash-unlock:checked
~ .splash {
  transform:
    translateY(-100%);

  pointer-events: none;
}

.page-scroll {
  height: 100%;
  overflow-y: auto;

  scroll-padding-top:
    calc(
      var(--nav-height) +
      var(--content-gap)
    );
}

.splash__images {
  position: absolute;
  inset: 0;
  z-index: 0;

  animation:
    splash-fade-in
    1s
    ease
    both;
}

.splash__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  opacity: 0;

  transition:
    opacity 1.4s ease;
}

.splash__image.is-active {
  opacity: 1;
}

.splash__video {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.splash__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    rgba(
      0,
      0,
      0,
      0.4
    );
}

.splash:has(.splash__video)
.splash__overlay {
  background: transparent;
}

.splash__content {
  position: absolute;
  inset: 0;
  z-index: 2;

  animation:
    splash-fade-in
    1s
    ease
    both;
}

.splash__name {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  margin: 0;
  padding: 0 1rem;

  color: #fff;

  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  font-size:
    clamp(
      2rem,
      4vw + 1rem,
      4.5rem
    );

  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;

  transform:
    translate(
      -50%,
      -50%
    );
}

.splash__cta {
  position: absolute;
  top: 83.3333%;
  left: 50%;

  display: inline-block;
  padding: 0.7rem 1.6rem;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.6
    );

  border-radius: 10px;

  color: #fff;

  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;

  transform:
    translate(
      -50%,
      -50%
    );

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.splash__cta:hover,
.splash__cta:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.splash--black-text
.splash__name {
  color: #000;
}

.splash--black-text
.splash__cta {
  border-color: #000;
  background: #fff;
  color: #000;
}

.splash--black-text
.splash__cta:hover,
.splash--black-text
.splash__cta:focus-visible {
  border-color: #000;
  background: #000;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .splash__image,
  .splash__images,
  .splash__content,
  .splash {
    animation: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Project grid
   -------------------------------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 20px;

  margin: 0;
  padding: 0;

  list-style: none;

  scroll-margin-top:
    calc(
      var(--nav-height) +
      var(--content-gap)
    );
}

@media (min-width: 900px) {
  .project-grid {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }
}

.project-card {
  position: relative;

  display: block;
  overflow: hidden;

  aspect-ratio: 1 / 1;

  border-radius: 10px;
  background: var(--paper-dim);
}

.project-card__image {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

.project-card:hover
.project-card__image,
.project-card:focus-visible
.project-card__image {
  filter:
    saturate(0.6);

  transform:
    scale(1.03);
}

.project-card__title {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 1rem;

  background:
    rgba(
      0,
      0,
      0,
      0.35
    );

  color: #fff;

  font-family:
    'futura-pt',
    'Futura PT',
    Jost,
    sans-serif;

  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 1px 4px
    rgba(
      0,
      0,
      0,
      0.6
    );

  opacity: 0;

  transition:
    opacity 0.3s ease;
}

.project-card:hover
.project-card__title,
.project-card:focus-visible
.project-card__title {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-card__image,
  .project-card__title {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Project detail page
   -------------------------------------------------------------------------- */

main.project {
  padding-top:
    calc(
      var(--nav-height) +
      var(--content-gap)
    );
}

.project-image {
  margin:
    0
    0
    var(--image-gap);
}

.project-image img {
  display: block;

  width: 100%;
  max-height: 90vh;

  border-radius: 10px;

  object-fit: cover;
}

.project-image video {
  display: block;

  width: 100%;
  height: auto;
  max-height: 90vh;

  border-radius: 10px;
  background: #000;

  object-fit: contain;
}

.project-gallery
.project-image img {
  width: 100%;
  height: auto;
  max-height: none;

  object-fit: contain;
}

.project-title-images {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--image-gap);

  margin:
    0
    0
    var(--content-gap);
}

.project-title-images
.project-image {
  flex: 0 1 auto;

  width: auto;
  height: auto;
  max-height:
    var(--title-image-max-height);

  margin: 0;
  overflow: hidden;

  aspect-ratio: 3 / 4;
}

.project-title-images
.project-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

@media (orientation: portrait) {
  .project-title-images:not(
    .project-title-images--single
  )
  .project-image:nth-child(2) {
    display: none;
  }
}

.project-title-images--single {
  display: block;

  margin:
    0
    0
    var(--content-gap);
}

.project-title-images--single
.project-image {
  max-height: none;
  overflow: visible;

  aspect-ratio: auto;
}

.project-title-images--single
.project-image img {
  height: auto;
  object-fit: initial;
}

@media (orientation: landscape) {
  .project-title-images--single
  .project-image {
    width: 100%;

    height:
      min(
        75svh,
        60rem
      );

    max-height:
      min(
        75svh,
        60rem
      );

    overflow: hidden;
  }

  .project-title-images--single
  .project-image img {
    width: 100%;
    height: 100%;
    max-height: none;

    object-fit: cover;
    object-position: center;
  }
}

.project-header {
  margin:
    0
    0
    var(--content-gap-lg);

  text-align: center;
}

.project-title-line {
  margin:
    0
    0
    0.35rem;

  font-family: var(--font-sans);
  font-size: var(--step-1);
}

.project-client-line {
  margin: 0;

  color: var(--ink-soft);

  font-family: var(--font-sans);
  font-size: 0.85rem;
}

.project-title-line strong {
  font-weight: 600;
}

.project-columns {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: var(--image-gap);

  margin-bottom:
    var(--content-gap-lg);
}

.project-columns--single {
  grid-template-columns: 1fr;
}

.project-columns--empty {
  display: none;
}

@media (max-width: 700px) {
  .project-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.project-col p {
  margin:
    0
    0
    1.4rem;

  color: var(--ink);

  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
}

/* Links inserted in Markdown descriptions
   with [[visible text|target project]]. */

.project-description__link,
.project-description__link:visited {
  color: #55758f;
  text-decoration: none;

  background-image:
    linear-gradient(
      currentColor,
      currentColor
    );

  background-repeat: no-repeat;
  background-position:
    center bottom;

  background-size:
    0 1px;

  transition:
    color 0.2s ease,
    background-size 0.28s ease;
}

.project-description__link:hover,
.project-description__link:focus-visible {
  color: #315f85;

  background-size:
    100% 1px;
}

.project-facts {
  margin:
    0
    0
    1.5rem;

  padding: 0;

  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;

  list-style: none;
}

.project-facts li {
  margin: 0;
}

.project-facts strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 40;

  display: inline-block;
  padding: 0.35rem 10rem;

  border: 1px solid var(--ink);
  border-radius: 10px;

  background: var(--paper);
  color: var(--ink);

  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate(-50%, 0.5rem);

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate(-50%, 0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}