@font-face {
  font-family: 'Areal';
  src: url('assets/fonts/ABCArealVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #e1ede8;
  --accent: #fffbcf;
  --background: #000;
  --vertical-padding: clamp(24px, 4vw, 72px);
  --shell-max-width: 1600px;
  --shell-min-gutter: 24px;
  --copy-size: clamp(0.875rem, 1.05vw, 1.125rem);
  color: var(--ink);
  background: var(--background);
  font-family: 'Areal', Arial, Helvetica, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-synthesis: none;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--background);
}

body[data-splash-active="true"] { overflow: hidden; }
body[data-splash-active="true"] .portfolio-shell { visibility: hidden; }

.splash {
  min-height: 100svh;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--background);
  transition: opacity 500ms ease-in, transform 500ms ease-in;
}

.splash.is-exiting {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
}

.splash-content {
  width: min(100%, 680px);
  display: grid;
  justify-items: center;
  opacity: 0;
  text-align: center;
}

body.is-splash-ready .splash-content { animation: splash-fade-up 700ms ease-in forwards; }

.splash-identity {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  line-height: 1;
}

.splash-identity span:last-child { color: var(--accent); }

.splash-message-space {
  min-height: 3.2em;
  margin-top: clamp(44px, 5vw, 72px);
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  line-height: 1.25;
}

.splash-message {
  font-style: italic;
  font-synthesis: style;
  white-space: pre-line;
  text-wrap: balance;
}

.splash-enter {
  margin-top: clamp(34px, 4vw, 56px);
  padding: 10px 18px;
  visibility: hidden;
  color: var(--ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
}

.splash-enter.is-ready {
  visibility: visible;
  animation: splash-button-in 450ms ease-in forwards;
}

.splash-enter:hover { color: var(--accent); border-color: var(--accent); }
.splash-enter:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

button,
a { font: inherit; }

.portfolio-shell {
  width: min(calc(100% - var(--shell-min-gutter) * 2), var(--shell-max-width));
  min-height: 100vh;
  display: grid;
  grid-template-columns: 10% 90%;
  margin: 0 auto;
  padding: var(--vertical-padding) 0;
}

.directory {
  position: sticky;
  top: var(--vertical-padding);
  align-self: start;
  min-width: 0;
}

.identity {
  display: grid;
  gap: 12px;
  font-size: var(--copy-size);
  line-height: 1;
}

.identity p,
h1,
h2,
h3,
p { margin: 0; }

h1 {
  color: var(--accent);
  font: inherit;
}

.directory-nav {
  position: relative;
  min-height: 142px;
  margin-top: 18px;
  font-size: var(--copy-size);
}

.directory-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 130px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
}

.directory-lines path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.directory-entry {
  position: absolute;
  left: 20px;
  z-index: 1;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  text-align: left;
  transform: translateY(-50%);
}

.directory-entry::before,
.directory-entry::after {
  height: 1px;
  position: absolute;
  top: 50%;
  content: '';
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}

.directory-entry::before {
  left: 0;
  width: 28px;
  background: var(--ink);
}

.directory-entry::after {
  left: 28px;
  width: calc(14px + var(--directory-offset, 0px));
  background: var(--ink);
}

.directory-entry[aria-selected="true"]::after { background: var(--accent); }

.directory-label {
  display: block;
  margin-left: 50px;
}

.directory-label-text {
  display: block;
  transform: translateX(var(--directory-offset, 0px));
}

.directory-entry[data-section="inhouse"] { top: 48px; }
.directory-entry[data-section="freelance"] { top: 101px; }

.directory-entry[aria-selected="true"] { color: var(--accent); }
.directory-entry:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.content-pages {
  min-width: 0;
  overflow-anchor: none;
}

.content-page {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 5fr);
  align-items: start;
  column-gap: clamp(14px, 1.5vw, 28px);
  row-gap: clamp(96px, 11vw, 180px);
}

.content-page[hidden] { display: none; }

.case-block { display: contents; }

.case-study,
.alcor-case,
.inhouse-heading {
  grid-column: 1;
  width: min(100%, 720px);
  justify-self: center;
}

.case-context {
  grid-column: 2;
  align-self: center;
  width: 100%;
  max-width: min(62ch, 640px);
  font-size: var(--copy-size);
  line-height: 1.55;
  letter-spacing: normal;
}

.case-context p,
.inhouse-heading p {
  text-wrap: pretty;
  hyphens: none;
}

.case-context p + p { margin-top: 1.55em; }

.case-context h3 {
  margin-bottom: 1em;
  color: var(--accent);
  font-size: inherit;
  font-weight: 400;
  text-wrap: balance;
}

.case-context h3:not(:first-child) { margin-top: 5em; }

.project-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.project-frame.is-tall { aspect-ratio: 1.678 / 1; }

.project-frame.is-interactive {
  cursor: pointer;
  touch-action: manipulation;
}

.project-frame.is-interactive:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.slideshow-controls {
  width: min(75%, 390px);
  min-height: 26px;
  margin: 9px auto 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  color: var(--accent);
  pointer-events: none;
}

.slideshow-controls::before {
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: currentColor;
  content: '';
  opacity: 1;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 1ms linear 240ms, transform 280ms ease-in 240ms;
}

.slideshow-control {
  --control-scale-y: 1;
  min-width: 0;
  height: 10.5px;
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 240ms ease-in;
  will-change: transform;
}

.slideshow-control-shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--background);
  border: 1px solid currentColor;
  border-bottom: 0;
  transform: scaleY(var(--control-scale-y));
  transform-origin: center bottom;
  will-change: transform;
}

@media (min-width: 761px) {
  .case-study:has(> .slideshow),
  .alcor-case:has(> .slideshow) {
    padding-bottom: 48px;
    margin-bottom: -48px;
  }

  .case-study:is(:hover, :focus-within) > .slideshow-controls,
  .alcor-case:is(:hover, :focus-within) > .slideshow-controls,
  .slideshow-controls:focus-within {
    pointer-events: auto;
  }

  .case-study:is(:hover, :focus-within) > .slideshow-controls::before,
  .alcor-case:is(:hover, :focus-within) > .slideshow-controls::before,
  .slideshow-controls:focus-within::before {
    opacity: 0;
    transform: scaleX(1);
    transition: opacity 1ms linear 280ms, transform 280ms ease-in;
  }

  .case-study:is(:hover, :focus-within) > .slideshow-controls .slideshow-control,
  .alcor-case:is(:hover, :focus-within) > .slideshow-controls .slideshow-control,
  .slideshow-controls:focus-within .slideshow-control {
    transform: scaleY(1);
    transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 280ms;
  }
}

@media (max-width: 760px) {
  .slideshow-controls.is-revealed,
  .slideshow-controls:focus-within {
    pointer-events: auto;
  }

  .slideshow-controls.is-revealed::before,
  .slideshow-controls:focus-within::before {
    opacity: 0;
    transform: scaleX(1);
    transition: opacity 1ms linear 280ms, transform 280ms ease-in;
  }

  .slideshow-controls.is-revealed .slideshow-control,
  .slideshow-controls:focus-within .slideshow-control {
    transform: scaleY(1);
    transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 280ms;
  }
}

.slideshow-control-fill {
  position: absolute;
  inset: 0 0 1px;
  display: block;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.slideshow-control:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1200ms ease-in;
}

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

.slide-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stroke-animation {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 43%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stroke-animation svg {
  display: block;
  width: 100%;
  height: auto;
}

.stroke-animation .dotter-path {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 0.75px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 32px 25px !important;
  stroke-dashoffset: var(--dash-offset) !important;
  vector-effect: non-scaling-stroke;
}

.case-study h2 {
  margin-top: 20px;
  color: var(--accent);
  font-size: var(--copy-size);
  font-weight: 400;
  font-style: italic;
  font-synthesis: style;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-align: center;
}

.case-study h2 a {
  color: inherit;
  text-decoration: none;
}

.case-study h2 a:hover,
.case-study h2 a:focus-visible { text-decoration: underline; }

.case-study h2 a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.project-subtitle {
  margin-top: 12px;
  color: var(--ink);
  font-size: var(--copy-size);
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.inhouse-heading {
  margin-bottom: calc(clamp(96px, 11vw, 180px) * -0.45);
}

.inhouse-heading h2 {
  color: var(--accent);
  font-size: var(--copy-size);
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;
}

.inhouse-heading p {
  margin-top: 16px;
  font-size: var(--copy-size);
  line-height: 1;
}

@media (min-width: 761px) {
  .inhouse-page.has-compact-intro {
    grid-template-rows: auto var(--alcor-intro-row-height) auto auto auto auto;
  }

  .inhouse-page.has-compact-intro .inhouse-heading { grid-row: 1; }
  .inhouse-page.has-compact-intro .alcor-intro-row > * { grid-row: 2; }
  .inhouse-page.has-compact-intro .alcor-identity-row > * { grid-row: 3; }
  .inhouse-page.has-compact-intro .alcor-patience-row > * { grid-row: 4; }
  .inhouse-page.has-compact-intro .alcor-social-row > * { grid-row: 5; }
  .inhouse-page.has-compact-intro .alcor-tour-row > * { grid-row: 6; }
  .inhouse-page.has-compact-intro .alcor-intro-row > .case-context { align-self: start; }
}

.alcor-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: #000;
}

.alcor-logo-stage {
  display: grid;
  place-items: center;
  background: transparent;
}

#portfolio-alcor-logo {
  display: block;
  width: 86%;
  height: auto;
  overflow: visible;
}

.alcor-logo-path { fill: #fff; }

.alcor-seam-bridge {
  fill: none;
  stroke: #fff;
  stroke-width: 1.25;
  stroke-linecap: round;
}

#portfolio-alcor-logo.animate-draw .alcor-logo-path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

#portfolio-alcor-logo.animate-draw [data-logo-order="1"] { animation: alcor-draw 2s ease-in 1.35s forwards, alcor-fill 0.7s ease-in 3.7s forwards; }
#portfolio-alcor-logo.animate-draw [data-logo-order="2"] { animation: alcor-draw 2s ease-in 1.47s forwards, alcor-fill 0.7s ease-in 3.78s forwards; }
#portfolio-alcor-logo.animate-draw [data-logo-order="3"] { animation: alcor-draw 2s ease-in 1.59s forwards, alcor-fill 0.7s ease-in 3.86s forwards; }
#portfolio-alcor-logo.animate-draw [data-logo-order="4"] { animation: alcor-draw 2s ease-in 1.71s forwards, alcor-fill 0.7s ease-in 3.94s forwards; }
#portfolio-alcor-logo.animate-draw .alcor-seam-bridge { opacity: 0; animation: alcor-seam-show 1ms linear 4.64s forwards; }

.photo-stack {
  display: block;
  padding: 0;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.stack-photo {
  width: auto;
  height: 82%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: contain;
  box-shadow: 0 8px 28px rgb(0 0 0 / 35%);
  transition: transform 420ms ease-in, opacity 240ms ease-in;
  transform: translate(-50%, -50%);
}

.stack-photo:nth-child(1) { z-index: 5; transform: translate(-50%, -50%) rotate(-1deg); }
.stack-photo:nth-child(2) { z-index: 4; transform: translate(calc(-50% + 5px), calc(-50% + 2px)) rotate(1.5deg); }
.stack-photo:nth-child(3) { z-index: 3; transform: translate(calc(-50% - 4px), calc(-50% + 5px)) rotate(-2deg); }
.stack-photo:nth-child(4) { z-index: 2; transform: translate(calc(-50% + 2px), calc(-50% + 7px)) rotate(2.5deg); }
.stack-photo:nth-child(5) { z-index: 1; transform: translate(calc(-50% - 2px), calc(-50% + 9px)) rotate(-3deg); }

.photo-stack:is(:hover, :focus-visible) .stack-photo:nth-child(1) { transform: translate(calc(-50% - 52px), calc(-50% - 2px)) rotate(-6deg); }
.photo-stack:is(:hover, :focus-visible) .stack-photo:nth-child(2) { transform: translate(calc(-50% - 26px), calc(-50% + 1px)) rotate(-3deg); }
.photo-stack:is(:hover, :focus-visible) .stack-photo:nth-child(3) { transform: translate(-50%, calc(-50% + 2px)) rotate(0); }
.photo-stack:is(:hover, :focus-visible) .stack-photo:nth-child(4) { transform: translate(calc(-50% + 26px), calc(-50% + 4px)) rotate(3deg); }
.photo-stack:is(:hover, :focus-visible) .stack-photo:nth-child(5) { transform: translate(calc(-50% + 52px), calc(-50% + 6px)) rotate(6deg); }

.photo-stack.is-shuffling .stack-photo:nth-child(1) {
  opacity: 0;
  transform: translate(calc(-50% + 120px), calc(-50% - 4px)) rotate(12deg);
}

.photo-stack:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.inhouse-page { position: relative; }

.social-caption-connector {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.social-caption-connector path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.alcor-social-row > .alcor-case,
.social-caption {
  position: relative;
  z-index: 1;
}

.social-caption {
  font-family: 'Areal', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  font-style: italic;
  font-synthesis: style;
  line-height: 1.35;
}

.social-caption-copy {
  min-height: 1.35em;
  white-space: pre-line;
  text-wrap: pretty;
}

.typewriter-glyph { visibility: hidden; }
.typewriter-glyph.is-visible { visibility: visible; }

.visually-hidden {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes alcor-draw { to { stroke-dashoffset: 0; } }
@keyframes alcor-fill { to { fill: #fff; stroke: #fff; } }
@keyframes alcor-seam-show { to { opacity: 1; } }

.load-identity,
.directory-label,
.content-page.is-active .load-item {
  opacity: 0;
}

body.is-loaded .load-identity { animation: fade-up 700ms ease-in forwards; }
body.is-loaded .directory-entry[data-section="inhouse"] .directory-label { animation: label-left 500ms ease-in 950ms both; }
body.is-loaded .directory-entry[data-section="freelance"] .directory-label { animation: label-left 500ms ease-in 1100ms both; }

body.is-loaded #directory-trunk { animation: draw-line 700ms ease-in 450ms forwards; }
body.is-loaded .directory-entry[data-section="inhouse"]::before { animation: draw-branch 360ms ease-in 900ms forwards; }
body.is-loaded .directory-entry[data-section="freelance"]::before { animation: draw-branch 360ms ease-in 1050ms forwards; }
body.is-loaded .directory-entry::after { animation: draw-branch 360ms ease-in 1250ms forwards; }

body.is-loaded .content-page.is-active .load-item { animation: fade-up 600ms ease-in forwards; }
body.is-loaded .content-page.is-active .case-block:nth-of-type(1) .load-item { animation-delay: 1350ms; }
body.is-loaded .content-page.is-active .case-block:nth-of-type(2) .load-item { animation-delay: 1500ms; }
body.is-loaded .content-page.is-active .case-block:nth-of-type(3) .load-item { animation-delay: 1650ms; }
body.is-loaded .content-page.is-active .case-block:nth-of-type(4) .load-item { animation-delay: 1800ms; }
body.is-loaded .content-page.is-active .inhouse-heading { animation-delay: 1350ms; }
body.is-loaded .inhouse-page.is-active .alcor-intro-row .load-item { animation-delay: 1500ms; }
body.is-loaded .inhouse-page.is-active .alcor-identity-row .load-item { animation-delay: 1650ms; }
body.is-loaded .inhouse-page.is-active .alcor-patience-row .load-item { animation-delay: 1800ms; }
body.is-loaded .inhouse-page.is-active .alcor-social-row .load-item { animation-delay: 1950ms; }
body.is-loaded .inhouse-page.is-active .alcor-tour-row .load-item { animation-delay: 2100ms; }

@keyframes slideshow-progress {
  from { transform: scaleX(var(--slideshow-progress-start, 0)); }
  to { transform: scaleX(1); }
}

@keyframes splash-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes splash-button-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes label-left {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes draw-line { to { stroke-dashoffset: 0; } }

@keyframes draw-branch {
  from { transform: translateY(-50%) scaleX(0); }
  to { transform: translateY(-50%) scaleX(1); }
}

@media (max-width: 760px) {
  .portfolio-shell {
    grid-template-columns: 1fr;
    gap: 56px;
    width: calc(100% - 48px);
    padding: 24px 0;
  }

  .directory { position: static; }

  .identity { text-align: center; }

  .directory-nav {
    width: min(300px, 100%);
    margin: 36px auto 0;
  }

  .directory-lines { left: calc(50% - 20px); }

  .directory-entry[data-section="inhouse"] { left: 50%; }

  .directory-entry[data-section="freelance"] {
    right: 50%;
    left: auto;
    text-align: right;
  }

  .directory-entry[data-section="freelance"]::before,
  .directory-entry[data-section="freelance"]::after {
    right: 0;
    left: auto;
    transform-origin: right center;
  }

  .directory-entry[data-section="freelance"]::after { right: 28px; }

  .directory-entry[data-section="freelance"] .directory-label {
    margin-right: 50px;
    margin-left: 0;
  }

  .directory-entry[data-section="freelance"] .directory-label-text {
    transform: translateX(calc(0px - var(--directory-offset, 0px)));
  }

  .content-page {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .case-study,
  .alcor-case,
  .inhouse-heading,
  .case-context {
    grid-column: 1;
    width: 100%;
  }

  .case-context {
    padding-left: 0;
    text-align: center;
  }

  .case-context h3:not(:first-child) { margin-top: 3em; }

  .social-caption {
    padding-top: 32px;
    text-align: left;
  }

  .inhouse-heading { margin-bottom: 0; text-align: center; }

  /* Normalize visible subjects to the Patience tee's ≈93%-of-media mobile width. */
  .project-frame.c75525-gallery { aspect-ratio: 16 / 9; }
  .c75525-gallery > .slide:nth-child(1) { transform: translate(0, -7.2px) scale(1.150515); }
  .c75525-gallery > .slide:nth-child(2) { transform: translate(0.2px, -4.7px) scale(1.125852); }
  .c75525-gallery > .slide:nth-child(3) { transform: translate(-1px, 1.5px) scale(1.182517); }

  .samuelplatten-gallery > .slide { transform: scale(1.238); }

  .project-frame.saia-gallery { aspect-ratio: 1 / 1; }
  .saia-gallery > .slide:nth-child(1) { transform: scale(4.398); }
  .saia-gallery > .slide:nth-child(2) { transform: scale(1.971); }
  .saia-gallery > .slide:nth-child(3) { transform: scale(1.924); }

  #portfolio-alcor-logo { width: 93%; }

  .alcor-identity-row .alcor-media { aspect-ratio: 4 / 3; }
  .alcor-identity-row .slide:nth-child(1) { transform: scale(1.402); }
  .alcor-identity-row .slide:nth-child(2),
  .alcor-identity-row .slide:nth-child(3) { transform: scale(3.211); }

  .alcor-patience-row .alcor-media { aspect-ratio: 4 / 3; }
  .alcor-patience-row .slide { transform: scale(1.3); }

  .alcor-social-row .photo-stack { aspect-ratio: 1.23 / 1; }
  .alcor-social-row .stack-photo { height: 95%; }

  .alcor-tour-row .alcor-media { aspect-ratio: 1.565 / 1; }
  .alcor-tour-row .slide { transform: scale(1.468); }

  .phone-subject-slide { transform: none !important; }
  .phone-subject-slide .slide-media {
    width: auto;
    height: 93%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash-content,
  .splash-enter { opacity: 1; transform: none; animation: none !important; }
  .slide { transition: none; }
  .slideshow-controls::before,
  .slideshow-control { transition: none; }
  .slideshow-control-fill { animation: none !important; }
  .slideshow-control.is-active .slideshow-control-fill { transform: scaleX(1); }
  .load-identity,
  .directory-label,
  .content-page.is-active .load-item { opacity: 1; animation: none !important; }
  .directory-lines path { stroke-dashoffset: 0; animation: none !important; }
  #portfolio-alcor-logo .alcor-logo-path { fill: #fff; stroke: transparent; animation: none !important; }
  .stack-photo { transition: none; }
  .directory-entry::before,
  .directory-entry::after { transform: translateY(-50%) scaleX(1); animation: none !important; }
}