/* ==========================================================================
   Fonts (self-hosted, so no visitor data goes to Google)
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens (from the Figma "colours" swatches and text styles)
   ========================================================================== */

:root {
  --color-bg: #f1f4ec;
  --color-text: #192427;
  --color-accent: #299c87;
  --color-black: #000;
  --color-on-image: #fff;
  --shadow-on-image: 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 0, 0, 0.45);

  --font-sans: "Montserrat", system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;

  /* The site's two motion curves: nothing bounces or overshoots */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* things appearing or settling */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);  /* things travelling from A to B */

  --header-height: 50px;
  --footer-height: 48px;

  /* Two rows of projects fill the screen between header and footer */
  --tile-row-height: max(240px, calc((100dvh - var(--header-height) - var(--footer-height)) / 2));
}

/* About page: inverted palette (header and footer included) */
.page-about {
  --color-bg: #192427;
  --color-text: #f1f4ec;
  --color-black: #f1f4ec;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { background: var(--color-bg); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

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

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-main { flex: 1; }

/* Outlined button (Figma "Close project"): 1px border, 12px uppercase */
.button-outline {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.button-outline:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding: 0 26px;
  white-space: nowrap;

  /* Stays at the top while scrolling */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(25, 36, 39, 0.08); }

/* The design's left margin is 38px vs 26px on the right; keeping the outer
   padding equal (and nudging the left nav) keeps the name truly centred. */
.site-header__start { padding-left: 12px; }

.site-header__name {
  position: relative;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.site-header__start,
.site-header__end {
  display: flex;
  gap: 42px;
}

.site-header__end { justify-content: flex-end; }

.site-header__link {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.2s var(--ease-out);
}

.site-header__link:hover,
.site-header__link[aria-current="page"] { color: var(--color-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--footer-height);
  color: var(--color-black);
  font-size: 12px;
}

.site-footer p { margin: 0; }

/* ==========================================================================
   Home: project grid
   ========================================================================== */

.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--tile-row-height);
}

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

.project-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-tile:hover .project-tile__image { transform: scale(1.03); }

.project-tile__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 22px;
  background: var(--color-bg);
  color: var(--color-black);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   Project page
   ========================================================================== */

/* The top image runs up behind a see-through header, as in the design.
   Once the page scrolls, the header gets its normal background. */
.has-hero .site-header {
  position: fixed;
  left: 0;
  right: 0;
}

.has-hero .site-header:not(.is-scrolled) { background: transparent; }

/* While over the image, header text on the left half turns white with a
   soft shadow so it stays readable (unless the project is set to dark text). */
.hero-text-light .site-header:not(.is-scrolled) .site-header__start .site-header__link {
  color: var(--color-on-image);
  text-shadow: var(--shadow-on-image);
}

.hero-text-light .site-header:not(.is-scrolled) .site-header__start .site-header__link:hover { color: var(--color-accent); }

/* The name is centred on the image edge: a white copy is laid over its
   left half only. */
.hero-text-light .site-header:not(.is-scrolled) .site-header__name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--color-on-image);
  text-shadow: var(--shadow-on-image);
  clip-path: inset(-12px 50% -12px -12px);
  pointer-events: none;
}

.project-hero__main { margin: 0; }

.project-caption {
  margin-top: 14px;
  color: var(--color-black);
  font-size: 12px;
  text-align: center;
}

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

.project-hero__image {
  width: 100%;
  aspect-ratio: 720 / 860;
  object-fit: cover;
}

.project-hero__side {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same height as the hero image (not image + caption), so the smaller
     image is centred against it. js/project-transition.js relies on this. */
  align-self: start;
  aspect-ratio: 720 / 860;
}

.project-hero__cover {
  width: 75%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.project-intro {
  width: min(768px, 100% - 32px);
  margin: 112px auto 0;
  color: var(--color-black);
}

.project-intro__title {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 45px;
  text-transform: uppercase;
}

.project-intro__body {
  margin-top: 80px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 20px;
}

.project-intro__body p { margin: 0 0 20px; }
.project-intro__body p:last-child { margin-bottom: 0; }

.project-figure {
  width: min(1280px, 100% - 160px);
  margin: 80px auto 0;
}

.project-figure__image { width: 100%; }

.project-figure__model {
  display: block;
  width: 100%;
  height: auto; /* let the shape setting (aspect-ratio) decide, not the viewer's default 150px */
  background: transparent;
  --poster-color: transparent;
  cursor: grab;
}

.project-figure__model:active { cursor: grabbing; }

.project-figure__video {
  display: block;
  width: 100%;
  object-fit: cover; /* shape set per video in the project's settings */
  background: var(--color-text);
}

/* "Close project" at the end of every project page */
.project-close {
  display: flex;
  justify-content: center;
  margin: 80px 0 75px;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 39px;
  min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  padding: 48px 16px;
  color: var(--color-black);
}

.about__photo {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
}

/* Text column starts level with the top of the photo, as in Figma;
   the pair as a whole is centred on the screen. */
.about__text { position: relative; width: 467px; }

/* Illustration to the right of the heading, centred on it. It floats so
   "Hello" keeps its alignment with the photo; black line art is flipped to
   light lines on the dark page. */
.about__heading-row {
  position: relative;
  display: inline-block;
}

.about__illustration {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 96px;
  height: 96px;
  /* 1px visible gap: offsets the empty space at the left of goose-hi.png
     (64 of 262px, so 23.5px at this size) and after the "o" (2px) */
  margin-left: -24.5px;
  transform: translateY(-50%);
  filter: invert(1);
}

.about__heading {
  margin: 7px 0 0 -4px; /* optical alignment of the "H", as in Figma */
  font-size: 64px;
  font-weight: 700;
  line-height: 64px;
}

.about__bio {
  margin-top: 17px;
  font-size: 16px;
  line-height: 20px;
}

.about__bio p { margin: 0 0 20px; }
.about__bio p:last-child { margin-bottom: 0; }

.about__subheading {
  margin: 27px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.about__software {
  display: grid;
  grid-template-columns: 179px auto;
  row-gap: 23px;
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}

.about__software-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
}

.about__software-icon {
  display: flex;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.about__software-icon img { width: auto; height: 32px; }

/* Entrance: once the page has dropped in, its contents reveal in reading
   order. Ease-out only, nothing overshoots. Reduced motion: none (see the
   prefers-reduced-motion rule at the end). */
.about__photo,
.about__heading,
.about__illustration,
.about__bio,
.about__subheading,
.about__software-item,
.about__buttons {
  animation: about-rise 0.9s var(--ease-out) both;
}

.about__photo        { animation-name: about-photo; animation-duration: 1.1s; animation-delay: 0.3s; }
.about__heading      { animation-delay: 0.45s; }
.about__illustration { animation-name: about-goose; animation-delay: 0.75s; }
.about__bio          { animation-delay: 0.55s; }
.about__subheading   { animation-delay: 0.65s; }
.about__software-item:nth-child(1) { animation-delay: 0.72s; }
.about__software-item:nth-child(2) { animation-delay: 0.78s; }
.about__software-item:nth-child(3) { animation-delay: 0.84s; }
.about__software-item:nth-child(4) { animation-delay: 0.90s; }
.about__software-item:nth-child(n+5) { animation-delay: 0.96s; }
.about__buttons      { animation-delay: 1.0s; }

@keyframes about-rise  { from { opacity: 0; transform: translateY(16px); } }
@keyframes about-photo { from { opacity: 0; transform: scale(0.96); } }
/* The goose is centred with translateY(-50%), so keep that in its frames */
@keyframes about-goose {
  from { opacity: 0; transform: translateY(-50%) translateX(-6px) rotate(-10deg); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.about__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact {
  display: flex;
  align-items: stretch; /* equal-height columns, so the buttons line up */
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 120px;
  min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  padding: 48px 16px;
  color: var(--color-black);
}

.contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 400px;
}

.contact__illustration {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 0 16px -8px; /* the drawing has a little white space on its left */
}

/* Same type as the About page */
.contact__heading {
  margin: 0 0 0 -4px; /* optical alignment, as on About */
  font-size: 64px;
  font-weight: 700;
  line-height: 64px;
}

.contact__text {
  margin-top: 17px;
  font-size: 16px;
  line-height: 20px;
}

.contact__text p { margin: 0; }

.contact__email-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 27px 0 0;
}

.contact__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.contact__email {
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}

.contact__email:hover { color: var(--color-accent); }

/* Both columns end with their button at the bottom, on the same line */
.contact__email-block { margin-bottom: 40px; }
.contact__back { margin-top: auto; }
.contact__back--below-form { display: none; }

/* Form */
.contact__form,
.contact__form .form-wrapper,
.contact__form form {
  display: flex;
  flex-direction: column;
}

.contact__form { width: 467px; }
.contact__form .form-wrapper,
.contact__form form { flex: 1; }

.contact form { margin: 0; }

.contact .form-field { margin-bottom: 28px; }

.contact .form-label label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.contact .form-label .required { color: var(--color-accent); }

.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(25, 36, 39, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  transition: border-color 0.3s var(--ease-out);
}

.contact textarea { resize: vertical; min-height: 120px; }

.contact input:focus,
.contact textarea:focus { outline: none; }

.contact .buttons { margin-top: auto; padding-top: 8px; }

.contact .button {
  /* Same size as .button-outline (35px tall), filled */
  padding: 9px 18px;
  border: 1px solid var(--color-text);
  line-height: 15px;
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-bg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.contact .button:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* Entrance: contents reveal in reading order, the form alongside.
   Ease-out only; off for reduced motion (rule at the end). */
.contact__illustration,
.contact__heading,
.contact__text,
.contact__email-block,
.contact__back,
.contact .form-field,
.contact .buttons {
  animation: contact-rise 0.9s var(--ease-out) both;
}

.contact__illustration { animation-name: contact-geese; animation-duration: 1.1s; animation-delay: 0.1s; }
.contact__heading      { animation-delay: 0.2s; }
.contact__text         { animation-delay: 0.3s; }
.contact__email-block  { animation-delay: 0.4s; }
.contact__back         { animation-delay: 0.5s; }
.contact .form-field:nth-of-type(1) { animation-delay: 0.3s; }
.contact .form-field:nth-of-type(2) { animation-delay: 0.38s; }
.contact .form-field:nth-of-type(3) { animation-delay: 0.46s; }
.contact .form-field:nth-of-type(n+4) { animation-delay: 0.5s; }
.contact .buttons      { animation-delay: 0.56s; }

@keyframes contact-rise  { from { opacity: 0; transform: translateY(16px); } }
@keyframes contact-geese { from { opacity: 0; transform: translate(-24px, 14px) rotate(-8deg); } }

/* Focus: an accent line draws in from the left under the field */
.contact .form-input-wrapper,
.contact .form-textarea-wrapper { position: relative; }

.contact .form-input-wrapper::after,
.contact .form-textarea-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}

.contact .form-input-wrapper:focus-within::after,
.contact .form-textarea-wrapper:focus-within::after { transform: scaleX(1); }

/* Error notice (e.g. a missing field), shown above the form */
.contact .notices {
  margin-bottom: 28px;
  padding: 10px 14px;
  border-left: 2px solid var(--color-accent);
  font-size: 14px;
  line-height: 20px;
}

.contact .notices.error { border-left-color: #b3261e; }
.contact .notices p { margin: 0; }

/* Confirmation shown in place of the form after sending */
.contact__sent {
  font-size: 16px;
  line-height: 20px;
  animation: contact-sent 0.8s var(--ease-out) both;
}

.contact__sent p { margin: 0; }
.contact__sent p + p { margin-top: 6px; }

@keyframes contact-sent { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Notice page (holding page, e.g. the blog for now)
   ========================================================================== */

.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-height) - var(--footer-height));
  padding: 48px 16px;
  color: var(--color-black);
  text-align: center;
  animation: notice-in 0.8s var(--ease-out) both;
}

@keyframes notice-in { from { opacity: 0; transform: translateY(8px); } }

.notice__illustration {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
}

.notice__label {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.notice__heading {
  max-width: 820px;
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-wrap: balance;
}

.notice__text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 20px;
}

.notice__text p { margin: 0; }

.notice__link { margin-top: 32px; }

/* ==========================================================================
   Home intro animation (see js/intro.js)
   ========================================================================== */

.intro-layer { display: none; }

/* Full-screen layer in the site colour with the name in the middle */
.intro-pending .intro-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--color-bg);
  pointer-events: none;
}

.intro-wordmark {
  /* 56-128px, but never wider than a phone screen */
  font-size: min(clamp(56px, 8vw, 128px), calc((100vw - 32px) / 7.2));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);
  transform-origin: center;
}


/* Clip the off-screen cards at the content area, never at the window:
   switching the window's own scrolling off and on again can leave some
   browsers (e.g. Firefox) unable to scroll until the next click. */
.intro-pending .site-main { overflow: clip; }
.intro-pending .site-header { background: transparent; }
.intro-pending .site-header__name,
.intro-pending .site-header__link,
.intro-pending .site-footer,
.intro-pending .project-tile,
.intro-pending .project-tile__label { opacity: 0; }

/* While running, the script controls these through animations */
.intro-running .site-header__name,
.intro-running .site-header__link,
.intro-running .site-footer,
.intro-running .project-tile,
.intro-running .project-tile__label { opacity: 1; }
.intro-running .site-header__name { visibility: hidden; }

/* The large name has landed: the real header name takes over */
.intro-name-landed .site-header__name { visibility: visible; }
.intro-name-landed .intro-layer { visibility: hidden; }
.intro-running .project-tile { position: relative; z-index: 1; will-change: transform; }

/* Reduced motion: a short fade to the finished page instead */
.intro-fade body { animation: intro-fade 0.4s var(--ease-out) both; }
@keyframes intro-fade { from { opacity: 0; } }

/* ==========================================================================
   Generic pages (placeholder until each page gets its own design)
   ========================================================================== */

.page-content { padding: 48px 38px; }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 767px) {
  /* Two rows on phones: name on top, links below */
  .site-header {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name name" "start end";
    row-gap: 10px;
    height: auto;
    padding: 14px 16px 12px;
  }
  .site-header__name { grid-area: name; justify-self: center; }
  .site-header__start { grid-area: start; padding-left: 0; }
  .site-header__end { grid-area: end; }
  .site-header__start,
  .site-header__end { gap: 20px; }

  /* Phones: one column, tiles keep the design's proportions and scroll */
  .projects { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .project-tile { aspect-ratio: 12 / 7; }

  .page-content { padding: 32px 16px; }

  .notice__heading { font-size: 32px; line-height: 38px; }

  .contact { gap: 48px; padding: 40px 16px 48px; }
  .contact__intro .contact__back { display: none; }
  .contact__email-block { margin-bottom: 0; }
  .contact__back--below-form { display: inline-block; align-self: flex-start; margin-top: 40px; }
  .contact__intro,
  .contact__form { width: 100%; }
  .contact__heading { margin: 0; font-size: 48px; line-height: 52px; }

  .about { gap: 32px; padding: 40px 16px 48px; }
  .about__photo { width: 240px; height: 240px; }
  .about__text { width: 100%; }
  .about__illustration { width: 80px; height: 80px; margin-left: -20px; }
  .about__heading { margin: 0; font-size: 48px; line-height: 52px; }
  .about__software { grid-template-columns: 1fr 1fr; }

  /* Phones: header sits above the image, so it keeps its normal look */
  .has-hero .site-header { position: sticky; }
  .has-hero .site-header:not(.is-scrolled) { background: var(--color-bg); }
  .hero-text-light .site-header:not(.is-scrolled) .site-header__start .site-header__link { color: inherit; text-shadow: none; }
  .hero-text-light .site-header:not(.is-scrolled) .site-header__name::after { content: none; }
  .project-hero { grid-template-columns: 1fr; }
  .project-hero__side { aspect-ratio: auto; margin-top: 48px; }
  .project-hero__cover { width: calc(100% - 32px); }
  .project-intro { margin-top: 64px; }
  .project-intro__title { font-size: 24px; line-height: 32px; }
  .project-intro__body { margin-top: 32px; line-height: 24px; }
  .project-figure { width: calc(100% - 32px); margin-top: 48px; }
  .project-close { margin: 56px 0 48px; }
}

/* ==========================================================================
   Home → project transition (see js/project-transition.js)
   ========================================================================== */

/* The card's image on its way to the project page */
.tile-flight {
  position: fixed;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.tile-flight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-leaving .project-tile.is-flying { visibility: hidden; }
.tile-leaving .project-tile:not(.is-flying),
.tile-leaving .site-footer {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

/* Arriving on the project page: the smaller image is already in place,
   the hero (and its caption) fades in. Uses the ease-in-out curve so the
   fade starts as gently as it ends. */
.from-tile .project-hero__main { animation: hero-arrive 1.2s var(--ease-in-out) 0.1s both; }
@keyframes hero-arrive { from { opacity: 0; } }

/* ==========================================================================
   Page transitions (see partials/page-transitions.html.twig)
   ========================================================================== */

@view-transition { navigation: auto; }

/* Into About: the dark page drops down over the current one and lands softly */
html:active-view-transition-type(about-in)::view-transition-old(root) { animation: none; }
html:active-view-transition-type(about-in)::view-transition-new(root) {
  animation: about-drop-in 0.45s var(--ease-out) both;
}

/* Out of About: it slides back up, revealing the next page underneath */
html:active-view-transition-type(about-out)::view-transition-new(root) { animation: none; }
html:active-view-transition-type(about-out)::view-transition-old(root) {
  z-index: 1;
  animation: about-lift-out 0.4s var(--ease-in-out) both;
}

@keyframes about-drop-in { from { transform: translateY(-100%); } }
@keyframes about-lift-out { to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}