/* Work-only tokens. Other page sections retain their original styles. */
.projects {
  --project-ease: cubic-bezier(.22, 1, .36, 1);
  --project-enter: 650ms;
  --project-leave: 450ms;
  --project-move: 600ms;
  --project-reveal: 800ms;
  --project-background-overscan: 200px;
  --project-inset: max(var(--page-padding), calc((100% - 1200px) / 2));
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 0;
  background: #0b0b0b;
  color: #fff;
  overflow: hidden;
}
.projects-heading { padding-block: 80px 100px; }
.projects-heading h2 { color: #fff; }
.projects-heading p { color: rgb(255 255 255 / .7); }
.projects-base-bg { position: absolute; inset: calc(-1 * var(--project-background-overscan)) 0 0; transform: translate3d(0, var(--project-background-y, 0px), 0); z-index: -2; background: url('../assets/projects/reference-texture.jpg') center / cover; pointer-events: none; }
.projects.is-background-moving .projects-base-bg { will-change: transform; }
.project-hover-layer { position: absolute; inset: 0 0 auto; height: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: transform var(--project-move) var(--project-ease), height var(--project-move) var(--project-ease); }
.project-hover-layer.is-positioning { transition: none; }
.project-hover-layer::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .32); opacity: 0; transition: opacity var(--project-leave) var(--project-ease); }
.project-hover-layer:has(.project-hover-image.is-active)::after { opacity: 1; transition-duration: var(--project-enter); }
.project-hover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(var(--project-image-rest-scale, 1.04)); transition: opacity var(--project-leave) var(--project-ease), transform var(--project-enter) var(--project-ease); }
.project-hover-image.is-active { opacity: 1; transform: scale(var(--project-image-hover-scale, 1)); transition-duration: var(--project-enter), var(--project-image-zoom-duration, var(--project-enter)); }
.project-item { position: relative; min-height: 310px; padding: 48px var(--project-inset); display: flex; align-items: center; border-top: 1px solid rgb(255 255 255 / .12); color: #fff; text-decoration: none; }
.project-item:last-child { border-bottom: 1px solid rgb(255 255 255 / .12); }
.project-item:hover { opacity: 1; }
.project-item:focus-visible { outline: 2px solid #fff; outline-offset: -7px; }
.project-inner { min-width: 0; transition: transform 450ms var(--project-ease); }
.project-item.is-active .project-inner { transform: translateX(8px); }
.project-title { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(80px, 6.5vw, 124px); font-weight: 900; letter-spacing: -.04em; line-height: .92; text-transform: uppercase; overflow-wrap: anywhere; }
.project-description { margin-top: 14px; font-family: var(--font-body); font-size: clamp(18px, 1.4vw, 28px); line-height: 1.3; color: rgb(255 255 255 / .92); }
.project-content { transition: opacity var(--project-reveal) var(--project-ease), transform var(--project-reveal) var(--project-ease); transition-delay: var(--reveal-delay, 0ms); }
.project-content.is-pending { opacity: 0; transform: translateY(30px); }
.project-cursor { --cursor-size: 16px; --cursor-active-size: 24px; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.project-cursor::after { content: ''; position: absolute; width: var(--cursor-size); height: var(--cursor-size); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: width 300ms cubic-bezier(.22,1,.36,1),height 300ms cubic-bezier(.22,1,.36,1); }
.project-cursor.is-visible { opacity: 1; }
.project-cursor.is-visible::after { width: var(--cursor-active-size); height: var(--cursor-active-size); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .projects.has-custom-cursor .project-item { cursor: none; } }
.project-dialog { width: min(480px, calc(100% - 40px)); padding: 36px; border: 1px solid #ddd; border-radius: 16px; color: #222; background: #fafafa; }
.project-dialog::backdrop { background: rgb(0 0 0 / .5); }
.project-dialog h3 { margin: 0 0 20px; font: 800 28px/1.1 Arial,sans-serif; }
.project-dialog p { line-height: 1.7; }
.project-dialog-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; }
.project-dialog-done { margin-top: 24px; padding: 12px 18px; background: #222; color: #fff; border: 0; border-radius: 999px; }
.projects-fallback { padding: 80px var(--project-inset); }
@media (min-width: 1921px) { .projects { --project-inset: max(360px, calc((100% - 1200px) / 2)); } }
@media (max-width: 1199px) { .projects { --project-inset: clamp(40px, 5vw, 64px); } .project-item { min-height: 240px; padding-block: 40px; } .project-title { font-size: clamp(56px, 6.5vw, 76px); } .project-description { font-size: 18px; } }
@media (max-width: 767px) { .projects { --project-inset: 24px;  } .projects-heading { padding-block: 48px; } .project-item { min-height: 190px; padding-block: 32px; } .project-title { font-size: clamp(42px, 8vw, 56px); } .project-description { max-width: 32ch; font-size: 16px; } .project-item.is-active .project-inner { transform: none; } }
@media (hover: none), (pointer: coarse) { .project-cursor { display: none; } .project-item { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) { .project-cursor { display: none; } .project-content.is-pending { opacity: 1; transform: none; } .project-item.is-active .project-inner { transform: none; } .project-hover-image, .project-hover-image.is-active { transform: none; } }

@media (prefers-reduced-motion: reduce) { .projects-base-bg { transform: none; will-change: auto; } }

/* The reference disables stripe parallax below its 1200px desktop breakpoint. */
@media (max-width: 1199px) { .projects { --project-background-overscan: 0px; } }

/* Preserve the spelling of the upcoming project names. */
#project-02 .project-title, #project-03 .project-title { text-transform: none; }