:root {
  --paper: #e9e5da;
  --paper-deep: #ded8c9;
  --paper-light: #f2efe7;
  --ink: #151513;
  --ink-soft: #33332f;
  --muted: #767269;
  --night: #181816;
  --night-soft: #23231f;
  --orange: #d7522a;
  --display: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --page-x: clamp(1.25rem, 3.6vw, 4.5rem);
  --header-h: 6.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--paper);
}

body {
  min-width: 20rem;
  overflow-x: hidden;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

::selection {
  background: var(--orange);
  color: #fff8ee;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  color: var(--paper-light);
}

.intro__panel {
  position: absolute;
  right: 0;
  left: 0;
  height: 50.5%;
  background: var(--night);
  transition: transform 1.15s var(--ease-out);
}

.intro__panel--top {
  top: 0;
  transform-origin: top;
}

.intro__panel--bottom {
  bottom: 0;
  transform-origin: bottom;
}

.intro__mark {
  position: absolute;
  inset: 50% var(--page-x) auto;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.is-loaded .intro__panel--top {
  transform: translateY(-101%);
}

.is-loaded .intro__panel--bottom {
  transform: translateY(101%);
}

.is-loaded .intro__mark {
  opacity: 0;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--page-x);
  mix-blend-mode: difference;
  color: #fff;
  transition: transform 0.5s var(--ease-out);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.wordmark {
  display: flex;
  width: min-content;
  flex-direction: column;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
}

.site-nav a::after,
.text-link::after,
.project__body a::after,
.contact__details a::after,
.footer a::after {
  position: absolute;
  right: 0;
  bottom: -0.3rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.site-nav a:hover::after,
.text-link:hover::after,
.project__body a:hover::after,
.contact__details a:hover::after,
.footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: calc(var(--header-h) + 1rem) var(--page-x) 2rem;
  background: var(--paper);
}

.hero__location {
  grid-column: 9 / -1;
  display: flex;
  justify-content: space-between;
  align-self: start;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  margin: 4vh 0;
  font-family: var(--display);
  font-size: clamp(5.2rem, 12.8vw, 13.5rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.72;
}

.line-mask {
  display: block;
  overflow: hidden;
  margin-block: -0.16em -0.14em;
  padding: 0.16em 0 0.14em;
}

.line-mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease-out);
}

.is-loaded .hero .line-mask > span,
.contact.is-visible .line-mask > span {
  transform: translateY(0);
}

.hero .line-mask:nth-child(2) > span {
  transition-delay: 0.1s;
}

.hero .line-mask:nth-child(3) > span {
  transition-delay: 0.2s;
}

.hero__title-indent {
  padding-left: 13vw;
  font-style: italic;
}

.hero__foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 1rem;
}

.hero__foot p {
  grid-column: 1 / 5;
  max-width: 30rem;
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  line-height: 1.55;
}

.text-link {
  position: relative;
  grid-column: 9 / -1;
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.text-link span {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.text-link:hover span {
  transform: translateY(0.25rem);
}

.hero__stamp {
  position: absolute;
  right: 6vw;
  top: 32%;
  width: clamp(5rem, 8vw, 8rem);
  aspect-ratio: 1;
  color: var(--orange);
}

.hero__stamp svg {
  width: 100%;
  animation: stamp-spin 22s linear infinite;
  fill: currentColor;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.6px;
}

.hero__stamp > span {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 1.25rem;
  font-style: italic;
}

@keyframes stamp-spin {
  to { transform: rotate(360deg); }
}

.portrait-story {
  position: relative;
  padding: 0 var(--page-x) clamp(6rem, 12vw, 12rem);
  background: var(--paper);
}

.portrait-story__stage {
  position: relative;
  height: min(94svh, 61rem);
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}

.portrait-story__plane {
  position: absolute;
  z-index: 0;
  top: 10%;
  right: 4%;
  width: 58%;
  height: 78%;
  background: #292823;
  clip-path: polygon(7% 0, 100% 0, 91% 100%, 0 100%);
  transform: translateY(7rem);
  transition: transform 1.35s var(--ease-out);
}

.portrait-story__primary {
  position: absolute;
  z-index: 3;
  top: 7%;
  right: 8%;
  width: min(58vw, 51rem);
  height: 84%;
  overflow: hidden;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
  opacity: 0;
  transform: translateY(6rem) scale(0.96);
  transition: opacity 0.7s ease, transform 1.45s var(--ease-out);
}

.portrait-story__primary img,
.portrait-story__echo img,
.portrait-story__slice img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.08);
}

.portrait-story__primary img {
  object-position: 52% center;
  transform: translateY(var(--portrait-shift, -5%)) scale(1.035);
}

.portrait-story__echo {
  position: absolute;
  z-index: 1;
  top: 19%;
  left: 7%;
  width: 24%;
  height: 60%;
  overflow: hidden;
  clip-path: polygon(0 10%, 74% 0, 100% 90%, 20% 100%);
  opacity: 0;
  transform: translate(-5rem, 3rem);
  transition: opacity 0.9s 0.16s ease, transform 1.5s 0.16s var(--ease-out);
}

.portrait-story__echo img {
  object-position: 21% center;
  filter: grayscale(1) contrast(1.25) brightness(0.62);
  transform: translateY(var(--portrait-counter-shift, 4%)) scale(1.42);
}

.portrait-story__slice {
  position: absolute;
  z-index: 4;
  right: 3.5%;
  bottom: 8%;
  width: 11%;
  height: 47%;
  overflow: hidden;
  background: var(--paper-deep);
  clip-path: polygon(18% 0, 100% 8%, 82% 100%, 0 92%);
  opacity: 0;
  transform: translateY(7rem);
  transition: opacity 0.7s 0.42s ease, transform 1.3s 0.42s var(--ease-out);
}

.portrait-story__slice img {
  width: auto;
  height: 112%;
  max-width: none;
  object-position: 82% center;
  filter: saturate(0.5) contrast(1.15) brightness(1.08);
  transform: translate(-72%, var(--portrait-slice-shift, -5%)) scale(1.02);
}

.portrait-story__name {
  position: absolute;
  z-index: 6;
  bottom: 4%;
  left: 3.5%;
  color: var(--paper-light);
  font-family: var(--display);
  font-size: clamp(5.5rem, 12vw, 13rem);
  font-style: italic;
  letter-spacing: -0.075em;
  line-height: 0.7;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.8s 0.28s ease, transform 1.3s 0.28s var(--ease-out);
}

.portrait-story__stage::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 15, 13, 0.3), transparent 42%, rgba(15, 15, 13, 0.08));
  content: "";
  pointer-events: none;
}

.portrait-story__stage.is-visible .portrait-story__plane,
.portrait-story__stage.is-visible .portrait-story__primary,
.portrait-story__stage.is-visible .portrait-story__echo,
.portrait-story__stage.is-visible .portrait-story__slice,
.portrait-story__stage.is-visible .portrait-story__name {
  opacity: 1;
  transform: translate(0) scale(1);
}

.section-index {
  display: grid;
  grid-template-columns: 3rem auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-index--light {
  color: #98978e;
}

.practice {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  min-height: 100svh;
  padding: clamp(6rem, 11vw, 11rem) var(--page-x);
  background: var(--paper-deep);
}

.practice > .section-index {
  grid-column: 1 / 4;
}

.practice__statement {
  grid-column: 3 / -1;
}

.eyebrow {
  margin-bottom: 3rem;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practice h2,
.about h2 {
  max-width: 66rem;
  font-family: var(--display);
  font-size: clamp(3.1rem, 6.8vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.split-reveal {
  clip-path: inset(0 0 100% 0);
  transform: translateY(2.5rem);
  transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.split-reveal.is-visible {
  clip-path: inset(0);
  transform: translateY(0);
}

.practice__notes {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-self: end;
  gap: clamp(2rem, 6vw, 8rem);
  margin-top: clamp(6rem, 14vw, 13rem);
}

.practice__notes p {
  max-width: 29rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}

.work {
  background: var(--night);
  color: var(--paper-light);
}

.work__heading {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  min-height: 76vh;
  align-content: space-between;
  padding: clamp(6rem, 10vw, 10rem) var(--page-x) 4rem;
}

.work__heading .section-index {
  grid-column: 1 / 4;
}

.work__heading h2 {
  grid-column: 2 / -1;
  align-self: center;
  font-family: var(--display);
  font-size: clamp(4rem, 8.5vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.82;
}

.work__heading h2::first-line {
  font-style: italic;
}

.work__prompt {
  grid-column: 2 / -1;
  color: #88877f;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-stage {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 100svh;
  background: var(--night-soft);
}

.project-visual {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  background: var(--project-tone, var(--orange));
  transition: background-color 0.6s var(--ease-out);
}

.project-visual__number {
  position: absolute;
  top: 1.7rem;
  left: 1.8rem;
  font-family: var(--display);
  font-size: clamp(7rem, 15vw, 16rem);
  font-style: italic;
  letter-spacing: -0.08em;
  line-height: 1;
  opacity: 0.16;
  transition: transform 0.45s var(--ease-out), opacity 0.45s ease;
}

.project-visual__number.is-changing {
  opacity: 0;
  transform: translateY(-2rem);
}

.project-visual__emblems {
  position: relative;
  width: min(28vw, 24rem);
  aspect-ratio: 1;
}

.project-emblem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--paper-light);
  opacity: 0;
  transform: scale(0.76) rotate(-7deg);
  transition: opacity 0.45s ease, transform 0.85s var(--ease-out);
}

.project-emblem * {
  animation-play-state: paused !important;
}

.project-visual[data-index="01"] .project-emblem--morph,
.project-visual[data-index="02"] .project-emblem--morph,
.project-visual[data-index="03"] .project-emblem--morph,
.project-visual[data-index="04"] .project-emblem--morph,
.project-visual[data-index="05"] .project-emblem--morph,
.project-visual[data-index="06"] .project-emblem--morph {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.project-visual.is-in-view[data-index="01"] .project-emblem--morph *,
.project-visual.is-in-view[data-index="02"] .project-emblem--morph *,
.project-visual.is-in-view[data-index="03"] .project-emblem--morph *,
.project-visual.is-in-view[data-index="04"] .project-emblem--morph *,
.project-visual.is-in-view[data-index="05"] .project-emblem--morph *,
.project-visual.is-in-view[data-index="06"] .project-emblem--morph * {
  animation-play-state: running !important;
}

/* Pixel Play: the original arcade token rebuilt as a moving pixel system. */
.morph-ring,
.morph-cells,
.morph-thleng-label,
.morph-barista-label,
.morph-cells rect {
  transform-box: fill-box;
  transform-origin: center;
}

.pixel-face-idle {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.pixel-eye-base {
  fill: currentColor;
}

.pixel-eye-cover {
  fill: var(--project-tone, var(--orange));
  transform-box: fill-box;
  transform-origin: center;
}

.pixel-orbit {
  transform-origin: center;
  animation: pixel-orbit 15s linear infinite;
}

.pixel-orbit circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
}

.pixel-ring-inner {
  stroke-dasharray: 3 5;
  stroke-width: 4 !important;
}

.pixel-labels {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-anchor: middle;
}

@keyframes pixel-orbit {
  to { transform: rotate(360deg); }
}

.thleng-label {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.08em;
}

.morph-thleng-label {
  transform: translateY(8px) scaleX(0);
}

.morph-exact * {
  animation: none !important;
}

.morph-exact {
  display: none;
}

.morph-exact--saints {
  transform-box: fill-box;
  transform-origin: center;
}

.morph-exact--tech,
.morph-exact--barista,
.morph-exact--invoice {
  transform-box: fill-box;
  transform-origin: center;
}

/* Invoice+: the three invoice lines resolve into its blue, rounded plus mark. */
.invoice-rules,
.invoice-plus {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invoice-rules {
  stroke: currentColor;
  stroke-width: 18;
}

.invoice-plus {
  stroke: #2872ff;
  stroke-width: 20;
}

.invoice-rule,
.invoice-plus-arm {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.morph-exact--barista text {
  fill: currentColor;
  stroke: none;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: -0.08em;
}

/* Saints Flow: its folded S becomes one continuously drawn ribbon. */
.saints-ribbon,
.saints-ribbon--shadow,
.saints-ribbon-highlight,
.saints-fold {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: round;
}

.saints-ribbon {
  stroke: currentColor;
  stroke-width: 40;
  stroke-dasharray: 620;
  animation: saints-draw 2.6s var(--ease-out) infinite alternate;
}

.saints-ribbon--shadow {
  stroke: rgba(20, 24, 22, 0.28);
  stroke-width: 54;
  transform: translate(6px, 9px);
}

.saints-fold {
  stroke: rgba(38, 66, 57, 0.52);
  stroke-width: 4;
  stroke-dasharray: 160;
  animation: saints-fold 2.6s var(--ease-out) infinite alternate;
}

.saints-ribbon-highlight {
  stroke: #eecb75;
  stroke-width: 7;
  stroke-dasharray: 0.075 0.925;
  stroke-dashoffset: 0;
  opacity: 0;
}

@keyframes saints-draw {
  from { stroke-dashoffset: 620; }
  40%, to { stroke-dashoffset: 0; }
}

@keyframes saints-fold {
  from, 30% { stroke-dashoffset: 160; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* Enfuego Tech: the EF monogram redraws itself like a live circuit. */
.tech-circuit {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-width: 18;
}

.tech-circuit path {
  stroke-dasharray: 520;
  animation: tech-draw 2.4s var(--ease-out) infinite alternate;
}

.tech-circuit path:nth-child(3),
.tech-circuit path:nth-child(4) {
  animation-delay: 0.18s;
}

.tech-circuit circle {
  fill: var(--orange);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: tech-terminal 1.2s steps(2, end) infinite;
}

.tech-current {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: square;
  stroke-linejoin: bevel;
  stroke-width: 6;
  pointer-events: none;
}

.tech-current path {
  stroke-dasharray: 0.06 0.94;
  stroke-dashoffset: 0;
  opacity: 0;
}

@keyframes tech-draw {
  from { stroke-dashoffset: 520; }
  45%, to { stroke-dashoffset: 0; }
}

@keyframes tech-terminal {
  0%, 45% { transform: scale(0); }
  50%, 100% { transform: scale(1); }
}

/* Italian Barista: an espresso workflow measured against the official 7'30 record. */
.barista-dial {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
}

.barista-progress {
  stroke: #e6b86a;
  stroke-width: 12;
  stroke-dasharray: 520;
  animation: barista-progress 3.8s linear infinite;
}

.barista-hand {
  stroke: #e6b86a;
  stroke-width: 9;
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: barista-timer 3.8s var(--ease-out) infinite;
}

.barista-dial circle:last-child {
  fill: #e6b86a;
  stroke: none;
}

.barista-cup {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 8;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.barista-steam {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-dasharray: 50;
  animation: barista-steam 2s ease-in-out infinite;
}

.project-emblem--barista text {
  fill: currentColor;
  stroke: none;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: -0.08em;
}

@keyframes barista-progress {
  from { stroke-dashoffset: 520; }
  to { stroke-dashoffset: 0; }
}

@keyframes barista-timer {
  0% { transform: rotate(-42deg); }
  85%, 100% { transform: rotate(72deg); }
}

@keyframes barista-steam {
  0% { stroke-dashoffset: 50; opacity: 0; transform: translateY(5px); }
  45%, 75% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-7px); }
}

/* Each completed mark keeps its own motion after the scroll morph settles. */
.project-visual:not(.is-in-view)[data-index="01"] .project-emblem--morph {
  clip-path: circle(0 at 50% 50%);
  transform: scale(0.78) rotate(-8deg);
}

.project-visual.is-in-view[data-index="01"] .project-emblem--morph {
  animation: pixel-logo-arrive 1.4s var(--ease-out) both;
}

.project-visual.is-in-view.is-logo-settled[data-index="01"] .morph-cells {
  animation: pixel-float 3.8s ease-in-out infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="01"] .pixel-face-idle {
  opacity: 1;
  animation: pixel-float 3.8s ease-in-out infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="01"] .pixel-eye-cover {
  animation: pixel-blink 4.6s steps(1, end) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="01"] .morph-cells rect:nth-child(10) {
  transform-origin: 100% 50%;
  animation: pixel-wave-left 4.2s var(--ease-out) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="01"] .morph-cells rect:nth-child(12) {
  transform-origin: 0% 50%;
  animation: pixel-wave-right 4.2s var(--ease-out) 0.16s infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="02"] .morph-cells {
  animation: thleng-bob 2.8s steps(1, end) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="02"] .morph-cells rect:nth-child(16),
.project-visual.is-in-view.is-logo-settled[data-index="02"] .morph-cells rect:nth-child(17) {
  animation: thleng-blink 3.6s steps(1, end) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="02"] .morph-cells rect:nth-child(10) {
  transform-origin: 15% 90%;
  animation: thleng-wave 3.8s steps(1, end) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="02"] .morph-thleng-label {
  animation: thleng-label-live 3.8s steps(1, end) infinite;
}

.project-visual.is-in-view.is-logo-settled[data-index="03"] .morph-exact--saints {
  animation: saints-float 4.2s ease-in-out infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="03"] .morph-exact--saints .saints-ribbon:not(.saints-ribbon--shadow) {
  animation: saints-live 3.6s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="03"] .morph-exact--saints .saints-ribbon--shadow {
  animation: saints-shadow-live 4.2s ease-in-out infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="03"] .morph-exact--saints .saints-ribbon-highlight {
  animation: saints-flow-highlight 3.4s linear infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="03"] .morph-exact--saints .saints-fold {
  animation: saints-fold-live 3.6s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="04"] .morph-exact--tech .tech-circuit path {
  animation: tech-live 3.2s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="04"] .morph-exact--tech .tech-current path {
  animation: tech-current-flow 2.8s linear infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="04"] .morph-exact--tech .tech-current path:nth-child(2) {
  animation-delay: -0.9s !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="04"] .morph-exact--tech .tech-current path:nth-child(3) {
  animation-delay: -1.8s !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="04"] .morph-exact--tech circle {
  animation: tech-terminal 1.4s steps(2, end) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista .barista-progress {
  animation: barista-progress 3.8s linear infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista .barista-hand {
  animation: barista-timer 3.8s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista .barista-steam {
  animation: barista-steam 2s ease-in-out infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista .barista-cup {
  animation: barista-cup-idle 3.8s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista .barista-dial {
  animation: barista-dial-complete 3.8s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="05"] .morph-exact--barista text {
  animation: barista-time-flash 3.8s steps(1, end) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .morph-exact--invoice {
  animation: invoice-logo-float 4.4s ease-in-out infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .invoice-rule {
  animation: invoice-print 3.8s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .invoice-rule--two {
  animation-delay: 0.12s !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .invoice-rule--three {
  animation-delay: 0.24s !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .invoice-plus-arm--top {
  animation: invoice-plus-top 3.8s var(--ease-out) infinite !important;
}

.project-visual.is-in-view.is-logo-settled[data-index="06"] .invoice-plus-arm--bottom {
  animation: invoice-plus-bottom 3.8s var(--ease-out) infinite !important;
}

@keyframes invoice-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes invoice-print {
  0%, 10% { stroke-dashoffset: 1; opacity: 0.35; }
  30%, 86% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0.72; }
}

@keyframes invoice-plus-top {
  0%, 12% { stroke-dashoffset: 1; transform: translate(7px, -7px); }
  34%, 82% { stroke-dashoffset: 0; transform: translate(0, 0); }
  88% { transform: translate(-2px, 2px); }
  94%, 100% { stroke-dashoffset: 0; transform: translate(0, 0); }
}

@keyframes invoice-plus-bottom {
  0%, 16% { stroke-dashoffset: 1; transform: translate(-7px, 7px); }
  38%, 82% { stroke-dashoffset: 0; transform: translate(0, 0); }
  88% { transform: translate(2px, -2px); }
  94%, 100% { stroke-dashoffset: 0; transform: translate(0, 0); }
}

@keyframes pixel-logo-arrive {
  0% {
    clip-path: circle(0 at 50% 50%);
    transform: scale(0.78) rotate(-8deg);
  }
  68% {
    clip-path: circle(74% at 50% 50%);
    transform: scale(1.035) rotate(1.5deg);
  }
  100% { clip-path: circle(74% at 50% 50%); transform: scale(1) rotate(0); }
}

@keyframes pixel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes pixel-blink {
  0%, 38%, 42%, 46%, 100% { transform: scaleY(1); }
  40%, 44% { transform: scaleY(0.12); }
}

@keyframes pixel-wave-left {
  0%, 58%, 86%, 100% { transform: rotate(0); }
  66% { transform: rotate(13deg); }
  74% { transform: rotate(-7deg); }
  81% { transform: rotate(5deg); }
}

@keyframes pixel-wave-right {
  0%, 58%, 86%, 100% { transform: rotate(0); }
  66% { transform: rotate(-13deg); }
  74% { transform: rotate(7deg); }
  81% { transform: rotate(-5deg); }
}

@keyframes thleng-bob {
  0%, 45%, 100% { transform: translateY(0); }
  48%, 52% { transform: translateY(-4px); }
  55% { transform: translateY(1px); }
}

@keyframes thleng-blink {
  0%, 44%, 50%, 100% { opacity: 1; }
  46%, 48% { opacity: 0; }
}

@keyframes thleng-wave {
  0%, 54%, 82%, 100% { transform: rotate(0) translateY(0); }
  60% { transform: rotate(-13deg) translateY(-2px); }
  67% { transform: rotate(8deg) translateY(0); }
  74% { transform: rotate(-7deg) translateY(-1px); }
}

@keyframes thleng-label-live {
  0%, 54%, 82%, 100% { opacity: 0.78; }
  60%, 74% { opacity: 1; }
  67% { opacity: 0.58; }
}

@keyframes saints-live {
  0%, 100% {
    stroke-dashoffset: 0;
    transform: translate(0, 0);
  }
  48% {
    stroke-dashoffset: 0;
    transform: translate(2px, -1px);
  }
}

@keyframes saints-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(-0.8deg); }
}

@keyframes saints-shadow-live {
  0%, 100% {
    opacity: 0.9;
    transform: translate(6px, 9px);
  }
  50% {
    opacity: 0.62;
    transform: translate(9px, 12px);
  }
}

@keyframes saints-flow-highlight {
  0% { stroke-dashoffset: 0; opacity: 0; }
  12%, 82% { opacity: 0.95; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes saints-fold-live {
  0%, 100% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
  48% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes tech-live {
  0%, 100% {
    stroke-dashoffset: 0;
    opacity: 0.72;
  }
  48% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes tech-current-flow {
  0% { stroke-dashoffset: 0; opacity: 0; }
  10%, 84% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes barista-cup-idle {
  0%, 72%, 100% { transform: translateY(0) scale(1); }
  82% { transform: translateY(-4px) scale(1.018); }
  91% { transform: translateY(1px) scale(0.995); }
}

@keyframes barista-dial-complete {
  0%, 80%, 100% { transform: scale(1); }
  88% { transform: scale(1.028); }
  94% { transform: scale(0.992); }
}

@keyframes barista-time-flash {
  0%, 80%, 100% { opacity: 0.68; }
  84%, 92% { opacity: 1; }
  88% { opacity: 0.42; }
}

.project-visual > p {
  position: absolute;
  right: 1.75rem;
  bottom: 1.7rem;
  left: 1.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-visual__mobile-info {
  display: none;
}

.project-list {
  background: var(--night-soft);
}

.project {
  display: grid;
  min-height: 100svh;
  align-content: space-between;
  padding: 2rem clamp(1.5rem, 5vw, 5rem) 4rem;
  background: var(--night-soft);
  color: #77776f;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.project:nth-child(even) {
  background: #20201d;
}

.project.is-active {
  color: var(--paper-light);
}

.project__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project__body h3 {
  margin-bottom: 2.6rem;
  font-family: var(--display);
  font-size: clamp(4rem, 7.5vw, 8.3rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.78;
}

.project__body p {
  max-width: 32rem;
  margin-left: 18%;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}

.project__body a {
  position: relative;
  display: table;
  margin: 2rem 0 0 18%;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 110svh;
  background: var(--paper-light);
}

.about__media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: var(--ink-soft);
}

.about__media video {
  width: 100%;
  height: 110%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05);
  transform: translateY(var(--about-shift, -4%)) scale(1.03);
}

.about__media::after {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 16, 0.15);
  content: "";
}

.about__media > span {
  position: absolute;
  z-index: 1;
  bottom: 1.5rem;
  left: 1.5rem;
  color: var(--paper-light);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(5rem, 9vw, 9rem) var(--page-x) 3rem clamp(2rem, 6vw, 6rem);
}

.about__copy h2 {
  margin: 10vh 0;
}

.about__text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  color: var(--ink-soft);
}

.about__text p {
  max-width: 26rem;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.65;
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 6rem;
  padding: 1.7rem;
  background: var(--paper-deep);
}

.about__facts div {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.about__facts dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about__facts dd {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
}

.contact {
  display: grid;
  min-height: 100svh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(5rem, 9vw, 9rem) var(--page-x) 3rem;
  overflow: hidden;
  background: var(--orange);
  color: #fbf3e6;
}

.contact .section-index {
  grid-column: 1 / 4;
  color: rgba(255, 247, 235, 0.62);
}

.contact__body {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
}

.contact__intro {
  margin: 0 0 2rem 53%;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact h2 {
  font-family: var(--display);
  font-size: clamp(7rem, 17vw, 18rem);
  font-weight: 400;
  letter-spacing: -0.08em;
  line-height: 0.66;
}

.contact h2 .line-mask:nth-child(2) {
  padding-left: 20%;
  font-style: italic;
}

.contact h2 a:hover .line-mask:first-child span {
  transform: translateX(2.5%);
}

.contact h2 a:hover .line-mask:last-child span {
  transform: translateX(-2.5%);
}

.contact h2 .line-mask span {
  transition: transform 1.1s var(--ease-out);
}

.contact__details {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.contact__details a,
.footer a {
  position: relative;
  width: max-content;
}

.contact__details a:nth-child(2) {
  justify-self: center;
}

.contact__details span {
  justify-self: end;
}

.footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.6rem var(--page-x);
  background: var(--night);
  color: #aaa89e;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer span:nth-child(2) {
  justify-self: center;
}

.footer a {
  justify-self: end;
}

.reveal-up {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.85s ease, transform 0.85s var(--ease-out);
}

.reveal-up.is-visible,
.is-loaded .hero .reveal-up {
  opacity: 1;
  transform: translateY(0);
}

.hero .hero__location {
  transition-delay: 0.45s;
}

.hero .hero__foot {
  transition-delay: 0.65s;
}

@media (max-width: 900px) {
  :root {
    --header-h: 5.3rem;
  }

  .site-header {
    mix-blend-mode: normal;
    color: var(--paper-light);
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    background: transparent;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu-toggle__line {
    position: relative;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.35s ease;
  }

  .menu-open .menu-toggle__line {
    transform: rotate(45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    padding: 8rem var(--page-x) 3rem;
    background: var(--night);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
  }

  .site-nav a {
    font-family: var(--display);
    font-size: clamp(3.4rem, 13vw, 7rem);
    letter-spacing: -0.05em;
    line-height: 0.92;
    text-transform: none;
  }

  .menu-open .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .hero__location {
    grid-column: 7 / -1;
  }

  .hero__title {
    font-size: clamp(4.2rem, 14vw, 8rem);
    line-height: 0.78;
  }

  .hero__foot p {
    grid-column: 1 / 7;
  }

  .text-link {
    grid-column: 8 / -1;
  }

  .practice > .section-index,
  .contact .section-index {
    grid-column: 1 / 5;
  }

  .practice__statement,
  .practice__notes {
    grid-column: 4 / -1;
  }

  .work__heading .section-index {
    grid-column: 1 / 5;
  }

  .work__heading h2,
  .work__prompt {
    grid-column: 4 / -1;
  }

  .project-stage {
    grid-template-columns: 38% 62%;
  }

  .about {
    grid-template-columns: 40% 60%;
  }

  .about__text {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about__facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-bottom: 1.5rem;
  }

  .hero__location {
    grid-column: 1 / -1;
  }

  .hero__location span:last-child {
    display: none;
  }

  .hero__title {
    margin-top: 12vh;
    font-size: clamp(4.2rem, 21vw, 7rem);
    line-height: 0.76;
  }

  .hero__title-indent {
    padding-left: 8vw;
  }

  .hero__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .hero__foot p {
    max-width: 21rem;
  }

  .text-link {
    justify-self: start;
  }

  .hero__stamp {
    top: 25%;
    right: 2vw;
  }

  .portrait-story {
    padding: 0 0 5rem;
  }

  .portrait-story__stage {
    height: 86svh;
  }

  .portrait-story__plane {
    top: 7%;
    right: -10%;
    width: 88%;
    height: 80%;
  }

  .portrait-story__primary {
    top: 8%;
    right: -7%;
    width: 88%;
    height: 76%;
  }

  .portrait-story__echo {
    top: 18%;
    left: -7%;
    width: 32%;
    height: 50%;
  }

  .portrait-story__slice {
    right: 3%;
    bottom: 7%;
    width: 17%;
    height: 38%;
  }

  .portrait-story__name {
    bottom: 4%;
    left: 1rem;
    font-size: clamp(5rem, 23vw, 8rem);
  }

  .practice {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 5rem;
  }

  .practice__notes {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
  }

  .practice h2,
  .about h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .work__heading {
    display: flex;
    min-height: 80svh;
    flex-direction: column;
    justify-content: space-between;
  }

  .work__heading h2 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .project-stage {
    display: block;
    position: relative;
    isolation: isolate;
  }

  .project-visual {
    position: sticky;
    z-index: 20;
    top: 0;
    width: 100%;
    height: 100svh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--project-tone, var(--orange));
    box-shadow: none;
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }

  .project-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(16, 16, 14, 0.03) 0%, rgba(16, 16, 14, 0.04) 42%, rgba(16, 16, 14, 0.72) 100%);
    pointer-events: none;
  }

  .project-visual__number {
    z-index: 1;
    top: 4.5rem;
    left: 1rem;
    font-size: clamp(7rem, 34vw, 10rem);
    opacity: 0.12;
  }

  .project-visual__emblems {
    position: absolute;
    z-index: 1;
    top: clamp(6.5rem, 14svh, 8rem);
    left: 50%;
    width: min(54vw, 13.5rem);
    transform: translateX(-50%);
  }

  .project-visual > p {
    display: none;
  }

  .project-visual__mobile-info {
    position: absolute;
    z-index: 3;
    right: var(--page-x);
    bottom: clamp(1.5rem, 5svh, 3rem);
    left: var(--page-x);
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s ease, transform 0.42s var(--ease-out);
  }

  .project-visual__mobile-info.is-changing {
    opacity: 0;
    transform: translateY(1rem);
  }

  .project-visual__mobile-info .project__meta {
    margin-bottom: clamp(1rem, 2.5svh, 1.5rem);
    color: rgba(242, 239, 231, 0.78);
  }

  .project-visual__mobile-info .project__body h3 {
    margin-bottom: 1.1rem;
    color: var(--paper-light);
    font-size: clamp(3.1rem, 13vw, 4.5rem);
  }

  .project-visual__mobile-info .project__body p {
    max-width: 31rem;
    margin-left: 0;
    color: rgba(242, 239, 231, 0.9);
    font-size: clamp(0.9rem, 4vw, 1rem);
    line-height: 1.48;
  }

  .project-visual__mobile-info .project__body a {
    margin: 1.1rem 0 0;
    color: var(--paper-light);
  }

  .project-list {
    position: relative;
    z-index: 1;
    margin-top: -100svh;
    background: transparent;
    pointer-events: none;
  }

  .project-tail {
    height: 100svh;
    background: transparent;
  }

  .project {
    position: relative;
    min-height: 100svh;
    padding: 0;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
  }

  .project:nth-child(even) {
    background: transparent;
  }

  .about {
    display: flex;
    min-height: auto;
    flex-direction: column;
  }

  .about__media {
    height: 72svh;
  }

  .about__copy {
    padding-left: var(--page-x);
  }

  .about__copy h2 {
    margin: 6rem 0;
  }

  .contact {
    display: flex;
    min-height: 90svh;
    flex-direction: column;
    justify-content: space-between;
  }

  .contact__intro {
    margin-left: 0;
  }

  .contact h2 {
    font-size: clamp(6rem, 27vw, 9rem);
    line-height: 0.7;
  }

  .contact h2 .line-mask:nth-child(2) {
    padding-left: 8%;
  }

  .contact__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .contact__details a:nth-child(2),
  .contact__details span {
    justify-self: auto;
  }

  .footer {
    grid-template-columns: 1fr auto;
  }

  .footer span:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .intro {
    display: none;
  }

  .line-mask > span,
  .reveal-up,
  .split-reveal {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .portrait-story__primary,
  .portrait-story__echo,
  .portrait-story__slice {
    opacity: 1;
    transform: none;
  }
}