/* Home page refinements (v84). Loaded only by the home page, after index.DNpDegDy.css. */

/* Nav: span the page at every width, on the same margins as the content. */
.mm-nav-inner { max-width: none; }

/* First screen: the wordmark sits whole above the fold. */
@media (min-width: 992px) {
  .matt-home .intro { height: auto; }
  .matt-home .intro-content {
    height: auto;
    min-height: calc(100svh - 72px);
    padding: clamp(88px, 13svh, 128px) 0 clamp(32px, 5.3svh, 48px);
  }
  .matt-home .intro-container { row-gap: clamp(36px, 8svh, 80px); }
  .matt-home .intro-text { row-gap: clamp(28px, 5.6svh, 56px); }
}

/* One set of vertical lines through the page. The inset sections (Work, About) put their
   second and third header labels at 41.83% and 67.32%. The full-width rows (first screen,
   footer) sit in a 48px-margin box, where the same two lines fall at 41.83% + 14.64px and
   67.32% - 31.04px. */
@media (min-width: 992px) {
  .matt-home .intro-grid { grid-template-columns: calc(41.83% + 14.64px) calc(25.49% - 45.68px) minmax(0, 1fr); column-gap: 0; }
  .matt-home .intro-grid > span:nth-child(1) { grid-column: 1; }
  .matt-home .intro-grid > span:nth-child(2) { grid-column: 2; }
  .matt-home .intro-grid > span:nth-child(3) { grid-column: 3; }
  .matt-home .intro-pitch { grid-template-columns: calc(41.83% + 14.64px) minmax(0, 1fr); column-gap: 0; }
  .matt-home .intro-number { grid-column: 1; }
  .matt-home .intro-copy { grid-column: 2; }
  .matt-home .contact-meta { grid-template-columns: calc(41.83% + 14.64px) calc(25.49% - 45.68px) minmax(0, 1fr); }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* tablet: the nav, first screen and footer share the sections' 32px margin, so the same two lines are 41.83% and 67.32% everywhere */
  .mm-nav { padding-left: 32px; padding-right: 32px; }
  .matt-home .intro-container { padding-left: 32px; padding-right: 32px; }
  .matt-home .contact { padding-left: 32px !important; padding-right: 32px !important; }
  .matt-home .intro-grid { display: grid; grid-template-columns: 41.83% 25.49% minmax(0, 1fr); column-gap: 0; }
  .matt-home .intro-grid > span:nth-child(1) { grid-column: 1; }
  .matt-home .intro-grid > span:nth-child(2) { grid-column: 2; text-align: left; }
  .matt-home .intro-grid > span:nth-child(3) { grid-column: 3; text-align: left; white-space: normal; }
  .matt-home .intro-pitch { grid-template-columns: 41.83% minmax(0, 1fr); column-gap: 0; }
  .matt-home .intro-number { grid-column: 1; }
  .matt-home .intro-copy { grid-column: 2; }
  .matt-home .contact-meta { grid-template-columns: 41.83% 25.49% minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* the year sits under its label at the left edge */
  .matt-home .intro-grid > span { display: block; }
  /* phones: the expertise names start on the same line as the project names */
  .matt-home .expertise-item { grid-template-columns: 38px minmax(0, 1fr); gap: 12px 0; }
  .matt-home .expertise-item p { grid-column: 2; }
}
@media (max-width: 479px) {
  /* one 24px margin for every section, same as the nav, first screen and footer */
  .matt-home .section-kicker,
  .matt-home .project-list,
  .matt-home .profile-copy,
  .matt-home .profile-hero,
  .matt-home .expertise { width: calc(100% - 48px); }
}

/* Lines. Three families, each on its own margins: the nav, first screen and footer rules
   run 48px in from the edges; the Work and About rules run on the inset sections' width;
   the expertise list's rules run from its own column. No rule runs edge to edge, and no
   two rules sit on top of each other. A list opens on one rule and is divided between its
   items, with no closing rule (the next section's header rule does that job). */
.matt-home .work,
.matt-home .profile { border-bottom: 0; }
.matt-home .project-row:first-child { border-top: 0; }
.matt-home .project-row:last-child,
.matt-home .expertise-item:last-child { border-bottom: 0; }

/* Work: name and line side by side, so neither crowds the other. */
.matt-home .project-description { margin-top: 14px; color: #a9a9a6; }
.matt-home .project-title { line-height: 1.08; }

@media (min-width: 992px) and (max-width: 1199px) {
  .matt-home .project-label { padding-block: 30px; }
  .matt-home .project-title { font-size: 56px; }
  .matt-home .project-description { margin-top: 16px; max-width: 52ch; }
  .matt-home .project-number { margin-top: 44px; }
}

@media (min-width: 1200px) {
  .matt-home .project-row {
    min-height: 0;
    grid-template-columns: 8% minmax(0, 59.3%) minmax(0, 1fr) 28px;
    align-items: center;
    padding-block: clamp(30px, 2.4vw, 52px);
  }
  .matt-home .project-label { display: contents; }
  .matt-home .project-number { align-self: center; margin-top: 0; }
  .matt-home .project-title {
    grid-column: 2;
    padding-right: 32px;
    /* Large as the column allows: the longest name (Abercrombie & Fitch) always fits on one line. */
    font-size: clamp(44px, min(4.3vw, calc((100vw - 275.2px) * .058 - 6px)), 120px);
    line-height: 1.04;
  }
  .matt-home .project-description {
    grid-column: 3;
    margin: 0;
    padding-right: 32px;
    max-width: 40ch;
    font-size: clamp(14.4px, .74vw, 20px);
    line-height: 1.5;
  }
  .matt-home .arrow { grid-column: 4; justify-self: end; }
}

/* Work: hovering a project fills the screen with its case film. */
.matt-home .project-films {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.matt-home .project-films-frame { position: absolute; inset: 0; }
.matt-home .project-films .project-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  filter: none;
  transform: scale(1.045);
  transition: opacity .55s cubic-bezier(.165, .84, .44, 1), transform 1.8s cubic-bezier(.165, .84, .44, 1);
}
.matt-home .project-films .project-preview.active { opacity: 1; transform: scale(1); }
.matt-home .project-preview img,
.matt-home .project-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.matt-home .project-preview img:not([src]) { visibility: hidden; }
.matt-home .project-preview video { opacity: 0; transition: opacity .35s ease; }
.matt-home .project-preview video.is-playing { opacity: 1; }
/* A veil keeps the type readable over bright frames without flattening the film. */
.matt-home .project-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 50%, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .2));
}

.matt-home .project-row .project-number,
.matt-home .project-row .project-title { transition: transform 1s cubic-bezier(.165, .84, .44, 1), opacity .45s ease; }
.matt-home .project-row .project-description { transition: opacity .45s ease, color .45s ease; }
.matt-home .project-row .arrow { transition: transform .5s cubic-bezier(.165, .84, .44, 1), opacity .45s ease; }
.matt-home .project-list.has-active .project-row { transition: border-color .4s ease; }
.matt-home .project-list.has-active .project-row:not(.is-active) .project-number,
.matt-home .project-list.has-active .project-row:not(.is-active) .project-title,
.matt-home .project-list.has-active .project-row:not(.is-active) .project-description,
.matt-home .project-list.has-active .project-row:not(.is-active) .arrow { opacity: .07; }
.matt-home .project-list.has-active .project-row.is-active .project-description { color: #f1f1ee; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.matt-home .project-list.has-active .project-row.is-active .project-title { text-shadow: 0 2px 32px rgba(0, 0, 0, .5); }

@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .matt-home .project-films { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .matt-home .project-films .project-preview { transform: none; transition: opacity .2s linear; }
  .matt-home .project-films .project-preview.active { transform: none; }
}

/* About: one grid, on the same lines as the section header and the Work list.
   0%: section number. 8%: title, labels, headings (where the project names start).
   41.83%: "About" in the header, the body copy, the expertise list.
   67.32%: the year in the header, the expertise descriptions (where the case lines start). */
@media (min-width: 768px) {
  .matt-home .profile-hero,
  .matt-home .profile-copy,
  .matt-home .expertise {
    display: grid;
    grid-template-columns: 8% 33.83% minmax(0, 1fr);
    column-gap: 0;
    gap: 0;
  }
  .matt-home .profile-hero { margin-bottom: 96px; align-items: start; }
  .matt-home .profile-hero .role { grid-column: 2 / 4; }
  .matt-home .profile-copy { margin-bottom: 112px; align-items: baseline; }
  .matt-home .profile-copy > .mono { grid-column: 2; }
  .matt-home .profile-body { grid-column: 3; max-width: 62ch; }
  .matt-home .expertise > h2 { grid-column: 2; }
  .matt-home .expertise-list { grid-column: 3; }
}
@media (min-width: 1100px) {
  /* number, name, then the description on the 67.32% line */
  .matt-home .expertise-item { grid-template-columns: 48px calc(43.82% - 80px) minmax(0, 1fr); column-gap: 16px; gap: 0 16px; }
  .matt-home .expertise-item p { max-width: 46ch; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* narrower list (tablets, small laptops): the description sits under the name, so names like
     "UX Strategy & Architecture" keep the whole column instead of breaking a lone "&" onto its own line */
  .matt-home .expertise-item { grid-template-columns: 34px minmax(0, 1fr); }
  .matt-home .expertise-item p { grid-column: 2; }
}
@media (max-width: 767px) {
  .matt-home .profile-hero { grid-template-columns: 1fr; }
  .matt-home .profile-hero .role { font-size: clamp(40px, 13vw, 72px); }
}

/* Education: a second list on the expertise columns */
.matt-home .education { margin-top: 96px; }
/* Footer row, on the same lines as the meta row above it and the first screen:
   the links stack under "04", the supporting line and the call to action start under the name. */
.matt-home .contact-row { align-items: start; }
.matt-home .footer-nav { gap: 10px 28px; }
.matt-home .footer-nav a { border-bottom: 0; padding-bottom: 0; transition: opacity .18s ease; }
.matt-home .footer-nav a:hover,
.matt-home .footer-nav a:focus-visible { opacity: .6; }
@media (min-width: 992px) {
  .matt-home .contact-row { grid-template-columns: calc(41.83% + 14.64px) minmax(0, 1fr); gap: 0; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .matt-home .contact-row { grid-template-columns: 41.83% minmax(0, 1fr); gap: 0; }
}
@media (min-width: 768px) {
  .matt-home .footer-nav { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .matt-home .contact-lead { grid-column: 2; grid-row: 1; }
}
/* Contact: the supporting line sits above the call to action, in the first screen's copy style */
.matt-home .contact-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.matt-home .contact-copy {
  margin: 0;
  max-width: 46ch;
  color: var(--white);
  font-family: Source Code Pro, SFMono-Regular, Consolas, monospace;
  font-size: 14.4px;
  line-height: 1.36;
  font-weight: 400;
}

/* Reach out: the call-to-action line confirms the copied address */
.matt-home .contact-cta .cta-email { margin-left: .5em; user-select: all; }
.matt-home .copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contact: visible on desktop (its opacity variable was never set). */
.matt-home [data-scroll-footer] { opacity: 1; transform: none; }

/* Nav mark: the MM symbol, 2:1, white, centred on the nav line. */
.mm-nav-mark { display: block; flex: none; width: 36px; height: 18px; color: #fff; }
@media (max-width: 767px) { .mm-nav-mark { width: 32px; height: 16px; } }

/* Work on touch screens: there's nothing to hover, so each project is its own section. Its case film runs
   full width at 16:9, edge to edge, with nothing laid over it; the number, name, line and arrow sit below,
   as in the list. About two sections to a phone screen. One pause, at the end of the WORK line, holds
   all the films. */
.matt-home .project-media,
.matt-home .work-pause { display: none; }
@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .matt-home .project-list { --bleed: 24px; }
  .matt-home .work .section-kicker { position: relative; margin-bottom: 48px; }
  .matt-home .project-row { overflow: visible; min-height: 0; padding-top: 0; border: 0; -webkit-tap-highlight-color: transparent; }
  /* the row's keyboard-focus line grows from the left instead of sliding in from off the row, which
     would show at the screen's edge now that the row lets its film run past it */
  .matt-home .project-row::after { transform: scaleX(0); transform-origin: 0 50%; }
  .matt-home .project-row:focus-visible::after { transform: none; }
  .matt-home .project-row + .project-row { margin-top: 44px; }
  .matt-home .project-media {
    display: block;
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: calc(var(--bleed) * -1);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0a0a;
  }
  .matt-home .project-media img,
  .matt-home .project-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .matt-home .project-media img:not([src]) { visibility: hidden; }
  .matt-home .project-media video { opacity: 0; transition: opacity .35s ease; }
  .matt-home .project-media video.is-playing { opacity: 1; }
  .matt-home .project-row > .project-number,
  .matt-home .project-row > .project-label,
  .matt-home .project-row > .arrow,
  .matt-home .project-row .project-title,
  .matt-home .project-row .project-description { grid-row: 2; }
  /* Pause: the two-bar symbol at the end of the WORK line (a play triangle when held), centred on the
     labels, its right edge on the line's end; a 44px target. Out of the grid, so the labels keep their places. */
  .matt-home .work-pause {
    position: absolute;
    top: -6px;
    right: -18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .matt-home .work-pause[hidden] { display: none; }
  .matt-home .work-pause:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
  .matt-home .work-pause-icon {
    display: block;
    width: 8px;
    height: 10px;
    background: linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 5.5px, currentColor 5.5px 8px);
  }
  .matt-home .work-pause.is-held .work-pause-icon { width: 9px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
}
@media (min-width: 768px) and (max-width: 991px), (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
  .matt-home .project-list { --bleed: 32px; }
  .matt-home .work .section-kicker { margin-bottom: 56px; }
  .matt-home .project-row + .project-row { margin-top: 56px; }
}
@media (min-width: 992px) and (hover: none), (min-width: 992px) and (pointer: coarse) {
  .matt-home .project-list { --bleed: 137.6px; }
}
@media (min-width: 1200px) and (hover: none), (min-width: 1200px) and (pointer: coarse) {
  .matt-home .project-row { row-gap: 32px; }
}
/* the arrow sits on the name's first line, not halfway down a long description */
@media (max-width: 767px) {
  .matt-home .project-row > .arrow { align-self: start; margin-top: 27px; }
}
@media (min-width: 768px) and (max-width: 991px), (min-width: 768px) and (max-width: 1199px) and (hover: none), (min-width: 768px) and (max-width: 1199px) and (pointer: coarse) {
  .matt-home .project-row > .arrow { align-self: start; margin-top: 49px; }
}
/* Flair on the locked v117 sections, touch screens only (no size, crop or spacing changes):
   1. Each section opens as it comes on screen: a hairline draws across where the film will be, the film
      opens out of it and settles from a slight zoom, then the number, name, line and arrow rise in.
   2. The line under each section is its film's clock: it draws itself while the film plays (--p, set by
      the script) and starts again when the film loops.
   3. A press you can see: under a thumb the film sinks back (.955) and dims (.7) at once and the arrow pushes
      on 8px; on a tap the case opens 200ms later so the press reads first. No grey iOS tap box. */
@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .matt-home .project-row::after { transform: scaleX(var(--p, 0)); transition: none; }
}
@media (max-width: 991px) and (prefers-reduced-motion: no-preference), (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .matt-home .project-media { transition: transform .45s cubic-bezier(.165, .84, .44, 1), opacity .45s ease; }
  .matt-home .project-row > .arrow { transition: transform .45s cubic-bezier(.165, .84, .44, 1); }
  .matt-home .project-list.is-staged .project-media {
    clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0);
    transition: clip-path .9s cubic-bezier(.7, 0, .2, 1) .2s, transform .45s cubic-bezier(.165, .84, .44, 1), opacity .45s ease;
  }
  .matt-home .project-list.is-staged .project-media img,
  .matt-home .project-list.is-staged .project-media video {
    transform: scale(1.12);
    transition: transform 1.4s cubic-bezier(.165, .84, .44, 1) .2s, opacity .35s ease;
  }
  .matt-home .project-list.is-staged .project-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -.5px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .4s cubic-bezier(.165, .84, .44, 1), opacity .3s ease .55s;
  }
  .matt-home .project-list.is-staged .project-row > .project-number,
  .matt-home .project-list.is-staged .project-row .project-title,
  .matt-home .project-list.is-staged .project-row .project-description,
  .matt-home .project-list.is-staged .project-row > .arrow {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .7s ease .4s, translate .9s cubic-bezier(.165, .84, .44, 1) .4s, transform .45s cubic-bezier(.165, .84, .44, 1);
  }
  .matt-home .project-list.is-staged .project-row .project-description { transition-delay: .5s, .5s, 0s; }
  .matt-home .project-list.is-staged .project-row.is-shown .project-media { clip-path: inset(0); }
  .matt-home .project-list.is-staged .project-row.is-shown .project-media img,
  .matt-home .project-list.is-staged .project-row.is-shown .project-media video { transform: none; }
  .matt-home .project-list.is-staged .project-row.is-shown .project-media::before { transform: none; opacity: 0; }
  .matt-home .project-list.is-staged .project-row.is-shown > .project-number,
  .matt-home .project-list.is-staged .project-row.is-shown .project-title,
  .matt-home .project-list.is-staged .project-row.is-shown .project-description,
  .matt-home .project-list.is-staged .project-row.is-shown > .arrow { opacity: 1; translate: none; }
  /* the press goes in fast (.16s) and comes back slower (.45s) */
  .matt-home .project-row.is-pressed .project-media,
  .matt-home .project-list.is-staged .project-row.is-pressed .project-media {
    transform: scale(.955);
    opacity: .7;
    transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), transform .16s cubic-bezier(.2, .7, .3, 1), opacity .16s ease;
  }
  .matt-home .project-row.is-pressed > .arrow,
  .matt-home .project-list.is-staged .project-row.is-pressed > .arrow {
    transform: translateX(8px);
    transition: opacity .7s ease .4s, translate .9s cubic-bezier(.165, .84, .44, 1) .4s, transform .16s cubic-bezier(.2, .7, .3, 1);
  }
}
/* the back-to-top button steps aside through the Work list on touch screens (set by the script) */
.to-top.is-shown.is-over-film {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition-delay: 0s, 0s, .35s, 0s, 0s, 0s;
}