/* ================================================================
   UX/UI PAGE — ux-ui.css
   ================================================================ */

/* ── DARK THEME OVERRIDE FOR UX/UI PAGE ─────────────────────── */
body.page-uxui .bg-noise {
  display: none;
}

/* Menu dots: flip to dark when fluid passes over (same dramatic effect as home) */
body.page-uxui .menu-dots.fluid-over span {
  background: #1a0a0a;
}

body.page-uxui {
  /* Yellowish-white, on request — was the brand red (#ef4444). The
     foreground flips dark to match: #1c1917 is the same warm near-black
     the journey section (further down this page) already uses for its
     own light panel, so the whole page now shares one light palette
     instead of the hero being the odd one out. */
  --bg:        #f8f1dc;
  --fg:        #1c1917;
  --fg-dim:    rgba(28, 25, 23, 0.55);
  --fg-dimmer: rgba(28, 25, 23, 0.08);
  --border:    rgba(28, 25, 23, 0.15);
  --accent:      #1c1917;
  --accent-dark: rgba(28, 25, 23, 0.75);
  --accent-glow: rgba(28, 25, 23, 0.20);
  --line:        rgba(28, 25, 23, 0.18);
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  position: fixed;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  z-index: 10;
  text-align: right;
  pointer-events: none;
  user-select: none;
}
.page-header-nr {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}
.page-header-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 3.5rem);
  text-transform: uppercase;
  line-height: 0.88;
  color: rgba(28, 25, 23, 0.08);
  letter-spacing: 0.02em;
}

/* ── PROJECTS HERO TITLE — fluid mask ───────────────────────── */
.projects-hero-title {
  font-family: var(--font-slab);
  font-weight: 500;
  font-size: clamp(3.4rem, 8vw, 9rem);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  margin: 0 0 40px 0;
  /* fluid mask applied by JS on non-touch/non-Safari — this is the
     fallback for everyone else, so it has to match --fg, not the old
     white-on-red default */
  color: rgba(28, 25, 23, 0.85);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(rgba(28,25,23,0.85), rgba(28,25,23,0.85));
}

/* ── PAGE INTRO ──────────────────────────────────────────────── */
.page-intro {
  width: 100%;
  padding: 0;
  margin-bottom: 48px;
}

.page-intro-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(28, 25, 23, 0.85);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  width: 100%;
}

@media (max-width: 768px) {
  .page-intro {
    padding: 0;
    margin-bottom: 28px;
  }
}

/* ── HOVER BACKGROUND VIDEO ───────────────────────────────────── */
.pj-bgvideo {
  position: fixed;
  inset: 0;
  z-index: 0;              /* above .bg-layer (0, earlier in DOM), below content */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.pj-bgvideo.is-active { opacity: 1; }
.pj-bgvideo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* full-bleed, covers the whole viewport */
  display: block;
}
/* Dark scrim so the white text/elements stay legible over any footage */
.pj-bgvideo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(20, 10, 8, 0.55), rgba(20, 10, 8, 0.55)),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* ── PROJECTS WRAP ───────────────────────────────────────────── */
.projects-wrap {
  position: fixed;
  inset: 0;
  z-index: 2;              /* keep all text/elements above the hover video */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Bottom padding clears the fixed .pj-viewtoggle capsule (bottom:
     clamp(18px,3.2vh,34px), ~46px tall) — without it the scrollable
     content, including the CTA footer appended at the end, can scroll
     right up under the capsule and get visually cut by its opaque
     background. */
  padding: 120px 64px 130px 48px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
}
.projects-wrap::-webkit-scrollbar { display: none; }

/* ── PROJECT LIST ────────────────────────────────────────────── */
.projects-list {
  width: 100%;
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
}

/* ── PROJECT ROW ─────────────────────────────────────────────── */
.project-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-row {
  border-top: 1px solid var(--line);
  cursor: none;
  transition: border-color 0.3s;
}
.project-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* ── ROW HEAD (always visible) ───────────────────────────────── */
.project-row-head {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 22px 0;
  transition: padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-row-nr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(28, 25, 23, 0.65);
  width: 72px;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.35s;
}

.project-row-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 3.8rem);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: rgba(28, 25, 23, 0.70);
  flex: 1;
  transition: color 0.35s, letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-row-cat,
.project-row-client {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(28, 25, 23, 0.55);
  flex-shrink: 0;
  padding: 0 20px;
  transition: color 0.35s;
}

.project-row-year {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(28, 25, 23, 0.75);
  flex-shrink: 0;
  padding-top: 4px;
  transition: color 0.35s;
}

/* hover / active states — text turns black */
.project-row:hover .project-row-title,
.project-row.is-active .project-row-title {
  color: #0d0d0d;
  letter-spacing: 0.03em;
}
/* rows with a full-screen hover video (AI Advertisements, AI VFX) — yellow instead of black while the video plays */
.project-row.has-bgvideo:hover .project-row-title,
.project-row.has-bgvideo.is-active .project-row-title {
  color: #ffd633;
}
.project-row:hover .project-row-nr,
.project-row.is-active .project-row-nr {
  color: #0d0d0d;
}
.project-row:hover .project-row-cat,
.project-row.is-active .project-row-cat,
.project-row:hover .project-row-client,
.project-row.is-active .project-row-client {
  color: #0d0d0d;
}
.project-row:hover .project-row-year,
.project-row.is-active .project-row-year {
  color: rgba(0, 0, 0, 0.45);
}
.project-row:hover .project-tag,
.project-row.is-active .project-tag {
  color: #0d0d0d;
  border-color: rgba(0, 0, 0, 0.25);
}

/* ── ROW BODY (accordion, hidden by default) ─────────────────── */
.project-row-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.project-row.is-active .project-row-body {
  grid-template-rows: 1fr;
}
.project-row-body-inner {
  overflow: hidden;
  min-height: 0;
}
.project-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 20px 72px;
}
.project-tag {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.80);
  border: 1px solid rgba(28, 25, 23, 0.35);
  padding: 3px 10px;
  border-radius: 2px;
}

/* ── MAGNETIC FLOATING IMAGE ─────────────────────────────────── */
.magnetic-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.magnetic-img.is-visible {
  opacity: 1;
}
.magnetic-img-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: rgba(28, 25, 23, 0.04);
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 8px;
}
.magnetic-img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s;
}
.magnetic-img-el.is-changing {
  opacity: 0;
}

.magnetic-img-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
}
.magnetic-img.is-visible .magnetic-img-glare {
  opacity: 1;
}

/* ── ROW TRANSITION ANIMATIONS ──────────────────────────────── */
.project-row.is-tx-entering {
  animation: txRowEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.project-row.is-tx-exiting {
  animation: txRowExit 0.38s cubic-bezier(0.77, 0, 0.18, 1) both;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Detay sayfası için yumuşak geçişli resimler */
.gallery-img {
  width: 100%;
  margin: 60px 0;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-img:hover {
  transform: translateY(-10px) scale(1.02);
}

/* ================================================================
   CLIENTS SECTION
   ================================================================ */
.clients-section {
  padding: 0 0 0;
}

.clients-header {
  padding: 0 0 32px 0;
}

.clients-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.85);
}

/* ── MARQUEE ────────────────────────────────────────────────── */
.clients-marquee {
  overflow: hidden;
  width: 100%;
}

.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: clientsScroll 30s linear infinite;
}
.clients-track:hover {
  animation-play-state: paused;
}

@keyframes clientsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.client-logo {
  height: 84px;
  width: auto;
  opacity: 0.75;
  transition: opacity 0.3s;
  flex-shrink: 0;
  display: block;
  margin-right: 80px;
  /* The logo assets are solid white on transparent (built for the red
     page) — invert so they render dark against the yellowish-white bg
     instead of vanishing. */
  filter: invert(1);
}
.client-logo:hover {
  opacity: 0.92;
}

/* ================================================================
   JOURNEY SECTION
   ================================================================ */
.journey-section {
  margin-top: 80px;
  padding: 0 0 64px;
}

/* ── Hero header ── */
.journey-hero {
  padding: 0 0 24px 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.journey-hero-title {
  font-family: var(--font-slab);
  font-weight: 500;
  font-size: clamp(3.4rem, 8vw, 9rem);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: #ef4444;
  margin: 0 0 48px 0;
  overflow: hidden;
}
.journey-hero-title .jc-inner {
  /* animation disabled */
}
.journey-hero.is-visible .journey-hero-title .jc-inner {
  /* animation disabled */
}
.journey-hero-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.75);
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease 0.50s, transform 0.55s cubic-bezier(0.22,1,0.36,1) 0.50s;
}
.journey-hero.is-visible .journey-hero-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ── Entry ── */
.journey-entry {
  border-top: 1px solid rgba(28, 25, 23, 0.10);
  padding: 28px 0;
  position: relative;
}
.journey-entry:last-child {
  border-bottom: 1px solid rgba(28, 25, 23, 0.10);
}

.journey-entry-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.journey-nr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1c1917;
  opacity: 0.85;
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
}

.journey-company {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.9rem);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: #1c1917;
  margin: 0;
}

.journey-period {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1c1917;
  opacity: 0.75;
  flex-shrink: 0;
  margin-left: auto;
}

.journey-entry-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 44px;
}

.journey-entry-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.journey-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #1c1917;
  opacity: 0.85;
}

.journey-cat {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #f4f2ee;
  background: #1c1917;
  padding: 5px 12px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 0;
}

.journey-desc {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.7;
  color: #1c1917;
  opacity: 0.68;
  margin: 0;
  max-width: 820px;
}

/* ── Char animation on company name — slide-up disabled, scramble on hover still works ── */
.journey-company .jc {
  display: inline-block;
  vertical-align: top;
  line-height: inherit;
}
.journey-company .jc-inner {
  display: inline-block;
}
.journey-entry.is-visible .journey-company .jc-inner {
  /* no-op — kept for JS observer compatibility */
}

/* Entry fade-up on scroll */
.journey-entry-body {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.25s;
}
.journey-entry.is-visible .journey-entry-body {
  opacity: 1;
  transform: translateY(0);
}

/* ── Skills ── */
.journey-skills-wrap {
  padding: 40px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.journey-skills-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.75);
}
.journey-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.skill-tag {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1c1917;
  border: 1px solid rgba(28, 25, 23, 0.22);
  padding: 6px 16px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-skills-wrap.is-visible .skill-tag { opacity: 1; transform: translateY(0); }
.journey-skills-wrap.is-visible .skill-tag:nth-child(1) { transition-delay: 0.00s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(2) { transition-delay: 0.05s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(3) { transition-delay: 0.10s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(4) { transition-delay: 0.15s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(5) { transition-delay: 0.20s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(6) { transition-delay: 0.25s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(7) { transition-delay: 0.30s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(8) { transition-delay: 0.35s; }
.journey-skills-wrap.is-visible .skill-tag:nth-child(9) { transition-delay: 0.40s; }

/* ── Download ── */
.journey-footer {
  padding: 28px 0 0 44px;
}
.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4f2ee;
  text-decoration: none;
  background: #1c1917;
  border: 1px solid #1c1917;
  padding: 14px 28px;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cv-btn:hover {
  background: #3a3330;
  border-color: #3a3330;
}
.cv-btn-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cv-btn:hover .cv-btn-arrow {
  transform: translateY(3px);
}

/* ── Contact ── */
.journey-contact {
  margin-top: 56px;
  padding: 48px 0 0;
  border-top: 1px solid rgba(28, 25, 23, 0.10);
}
.journey-contact-label {
  display: block;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ef4444;
  opacity: 1;
  margin-bottom: 18px;
}
.journey-contact-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  text-transform: uppercase;
  line-height: 0.90;
  color: #1c1917;
  margin: 0 0 32px;
  letter-spacing: 0.01em;
}
.journey-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1c1917;
  text-decoration: none;
  border: 1px solid rgba(28, 25, 23, 0.30);
  padding: 13px 24px;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s;
}
.journey-contact-btn:hover {
  background: #1c1917;
  color: #f4f2ee;
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {

  /* Wrap — bottom padding clears the fixed .pj-viewtoggle capsule
     (bottom:14px, ~38px tall on mobile), same reasoning as desktop. */
  .projects-wrap { padding: 80px 24px 96px 24px; }

  /* Projects hero title */
  .projects-hero-title { font-size: clamp(3.4rem, 8vw, 9rem); margin-bottom: 28px; }

  /* Intro */
  .page-intro { margin-bottom: 40px; }

  /* Projects list */
  .page-header { display: none; }
  .magnetic-img { display: none; }
  .projects-list { margin-bottom: 48px; }
  .project-row-cat,
  .project-row-client { display: none; }
  .project-tags { padding: 0 0 14px 0; }
  .project-tag { color: rgba(28, 25, 23, 0.45); border-color: rgba(28, 25, 23, 0.18); }

  /* Clients */
  .clients-header { padding: 0 0 24px 0; }
  .clients-track  { display: flex; gap: 48px; }
  .client-logo    { height: 64px; margin-right: 0; flex-shrink: 0; }

  /* Journey hero */
  .journey-hero { padding: 0 0 16px 0; }
  .journey-hero-title { font-size: clamp(3.4rem, 8vw, 9rem); margin-bottom: 32px; }

  /* Journey entries */
  .journey-entry { padding: 20px 0; }
  .journey-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .journey-nr { font-size: 0.85rem; width: 20px; flex-shrink: 0; line-height: 1; }
  .journey-entry-head { gap: 6px; }
  .journey-company { font-size: clamp(1.6rem, 2.8vw, 2.9rem); flex: 1; min-width: 0; }
  .journey-cat { flex-shrink: 0; }
  .journey-period { width: 100%; padding-left: 26px; margin-left: 0; margin-top: 2px; }
  .journey-entry-body { padding-left: 26px; gap: 6px; overflow-x: hidden; }
  .journey-desc { font-size: 0.78rem; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }

  /* Download */
  .journey-footer { padding-left: 26px; }

  /* Skills */
  .journey-skills-wrap { padding: 48px 0 0; }

  /* Contact */
  .journey-contact { margin-top: 56px; padding: 48px 0 0; }
  .journey-contact-heading { font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
}

/* ── TOUCH: prevent native image drag/float on iOS/iPadOS ─── */
@media (pointer: coarse) {
  .project-row,
  .project-row img,
  .projects-list,
  .clients-track img {
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
}

/* ================================================================
   PROJECTS — WORKS ARCHIVE (2026-08-15)

   Structure and interaction follow the forms.world works archive:
   full-width bands, each a title row over a four-up filmstrip, with the
   rest of the page receding while one band is live, a DISCOVER cue on
   the live strip, filter pills above and a fixed grid/list capsule
   below.

   The dress is this site's own, taken from the pages either side of
   this one rather than from what used to be here: Rockwell slab at
   display weight (as .artworks-hero-title), Type Machine mono for every
   small label (as .atb-item), the outlined capsule recipe from
   .artworks-title-block, and the blueprint grid the artworks page lays
   over its colour field. The CRT overlay in the markup is untouched and
   still ties the page to the rest of the site.
   ================================================================ */
body.page-uxui {
  --pj-display: 'Rockwell', 'Roboto Slab', Georgia, serif;
  --pj-body:    'Geist', 'Space Grotesk', system-ui, sans-serif;
  --pj-ui:      'Type Machine', 'Space Grotesk', sans-serif;
  --pj-red:     #e5261c;
  --pj-ink:     #14110d;
  /* One ink, stepped — every rule, label and border on the page is a
     tint of it, which is what keeps the field reading as printed paper
     rather than as a stack of separate greys. */
  --pj-ink-60:  rgba(20, 17, 13, 0.60);
  --pj-ink-45:  rgba(20, 17, 13, 0.45);
  --pj-ink-25:  rgba(20, 17, 13, 0.25);
  --pj-ink-08:  rgba(20, 17, 13, 0.08);
  --pj-paper:    #f8f1dc;
  --pj-paper-90: rgba(248, 241, 220, 0.90);
  --pj-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  /* Near the full width inside the bezel. The side padding on the wrap
     below is what actually holds it off the frame, so this only caps it
     on very wide monitors. */
  --pj-max:     1500px;

  /* Blueprint grid, as on the artworks page — a faint drawing surface
     under the colour field. */
  background-image:
    linear-gradient(rgba(20,17,13,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,17,13,0.030) 1px, transparent 1px),
    linear-gradient(rgba(20,17,13,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,17,13,0.014) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-attachment: fixed;
}

/* Scroll container. The top padding clears the nav (which ends ~104px
   down) plus the bezel's soft inner falloff. Bottom padding also has to
   clear the fixed view-toggle capsule, or the last band sits under it. */
body.page-uxui .projects-wrap {
  padding: clamp(120px, 15.5vh, 168px) clamp(22px, 4.6vw, 76px) clamp(96px, 12vh, 140px);
  align-items: center;
}

/* ── HERO ───────────────────────────────────────────────────── */
/* Left-aligned, not centred: the bands below run the full width of the
   frame, and a centred masthead over full-bleed content reads as a
   different page than the one under it. */
.pj-hero {
  width: 100%;
  max-width: var(--pj-max);
  margin: 0 auto clamp(20px, 3vw, 38px);
  text-align: left;
}

/* !important on the two paint properties: projects.js writes an inline
   background-image on this element for its fluid text mask, and inline
   styles would otherwise beat the stylesheet and keep the title
   transparent instead of red. */
.pj-hero .projects-hero-title {
  font-family: var(--pj-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 9.5vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  color: var(--pj-red) !important;
  -webkit-text-fill-color: var(--pj-red) !important;
}

.pj-hero .page-intro { max-width: 62ch; margin: 0; }
.pj-hero .page-intro-text {
  font-family: var(--pj-ui);
  font-size: clamp(0.68rem, 0.95vw, 0.8rem);
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pj-ink-60);
}

/* ── BANDS ──────────────────────────────────────────────────────
   Full-bleed: the wrap that holds them is padded to clear the bezel,
   and the strip breaks back out of that padding so the stills run edge
   to edge the way the reference's do. */
.pj-bands {
  width: 100%;
  max-width: var(--pj-max);
  margin: 0 auto;
}

.pj-band {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1.5px solid var(--pj-ink-25);
  padding-top: clamp(14px, 1.8vw, 22px);
  cursor: pointer;
  transition: opacity .45s ease, filter .45s ease;
}
.pj-band:last-child { border-bottom: 1.5px solid var(--pj-ink-25); }

/* ── BAND HEAD ── */
.pj-band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(14px, 3vw, 48px);
  padding-bottom: clamp(12px, 1.6vw, 20px);
}

.pj-band-title {
  margin: 0;
  min-width: 0;
  font-family: var(--pj-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pj-ink);
}
.pj-band-cat,
.pj-band-meta {
  font-family: var(--pj-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pj-ink-60);
}
.pj-band-meta { color: var(--pj-ink-45); }

/* ── FILMSTRIP ── */
.pj-band-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  /* Break out of the wrap's side padding to reach the bezel. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.pj-band-cell {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pj-ink-08);
}
.pj-band-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1.1s var(--pj-ease);
}
.pj-band.is-live .pj-band-cell img { transform: scale(1); }

/* DISCOVER cue — centred over the live band's strip only. */
.pj-band-cue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pj-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition: opacity .4s ease, transform .5s var(--pj-ease);
}
.pj-band.is-live .pj-band-cue { opacity: 1; transform: scale(1); }

/* ── SCROLL REVEAL ──────────────────────────────────────────────
   Same contract as the detail pages (.reveal → .is-visible). The cells
   carry their own staggered delay off --i so each strip wipes in
   left-to-right rather than the whole band arriving at once. */
.pj-band.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
}
.pj-band.reveal.is-visible { opacity: 1; transform: translateY(0); }

.pj-band.reveal .pj-band-cell {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--pj-ease), transform .7s var(--pj-ease);
  transition-delay: calc(var(--i, 0) * .07s + .1s);
}
.pj-band.reveal.is-visible .pj-band-cell { opacity: 1; transform: translateY(0); }

/* ── HOVER DIMMING ──────────────────────────────────────────────
   Everything recedes while one band is live — the light-field reading
   of the reference's darkening. Set on the container so travelling
   between bands never flashes the page back to full contrast.

   These come after the reveal rules and match one class deeper on
   purpose: `.pj-band.reveal.is-visible` also sets opacity, at equal
   specificity, so a shorter selector here would simply lose to it once
   a band had been revealed and nothing would ever dim. */
.pj-bands.is-dimmed .pj-band.is-visible         { opacity: .22; }
.pj-bands.is-dimmed .pj-band.is-live.is-visible { opacity: 1; }
.pj-bands:not(.is-list).is-dimmed .pj-band.is-visible { opacity: 1; }

/* ── LIST VIEW ──────────────────────────────────────────────────
   Strips fold away and the bands become a dense text table; hovering a
   row plays its lead film full-bleed behind the list (.pj-bandbg). */
.pj-bands.is-list .pj-band-strip { display: none; }
.pj-bands.is-list .pj-band {
  padding-top: 0;
}
.pj-bands.is-list .pj-band-head {
  padding: clamp(13px, 1.5vw, 19px) 0;
  align-items: center;
}
.pj-bands.is-list .pj-band-title { font-size: clamp(1.25rem, 2.4vw, 2rem); }

/* Over the takeover the list has to read as light-on-dark. */
body.pj-takeover .pj-bands.is-list .pj-band-title,
body.pj-takeover .pj-bands.is-list .pj-band-cat,
body.pj-takeover .pj-bands.is-list .pj-band-meta { color: rgba(255,255,255,.34); }
body.pj-takeover .pj-bands.is-list .pj-band      { border-color: rgba(255,255,255,.16); }
body.pj-takeover .pj-bands.is-list .pj-band.is-live .pj-band-title { color: #fff; }
body.pj-takeover .pj-bands.is-list .pj-band.is-live .pj-band-cat,
body.pj-takeover .pj-bands.is-list .pj-band.is-live .pj-band-meta  { color: rgba(255,255,255,.75); }

/* ── LIST-VIEW TAKEOVER LAYER ── */
.pj-bandbg {
  position: fixed;
  inset: 0;
  z-index: 1;              /* above the page field, below the bands */
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0b0a0a;
  transition: opacity .55s var(--pj-ease);
}
.pj-bandbg.is-active { opacity: 1; }
.pj-bandbg video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(.42) saturate(1.12) contrast(1.05);
}
.pj-bandbg-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,.20) 45%, rgba(12,11,10,.75) 100%);
}
.pj-bandbg-scan {
  position: absolute; inset: 0; opacity: .30;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px, transparent 1px, transparent 3px);
}
.pj-bandbg-vig {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(0,0,0,.72) 100%);
}
/* Lift the page's own content above the takeover. */
body.page-uxui .projects-wrap { position: relative; z-index: 2; }

/* ── VIEW TOGGLE ────────────────────────────────────────────────
   Fixed capsule at bottom centre, as in the reference. */
.pj-viewtoggle {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3.2vh, 34px);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1.5px solid var(--pj-ink-25);
  border-radius: 18px;
  background: var(--pj-paper-90);
  backdrop-filter: blur(6px);
}
.pj-view {
  font-family: var(--pj-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pj-ink-60);
  background: transparent;
  border: 0;
  border-radius: 14px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}
.pj-view:hover { color: var(--pj-ink); }
.pj-view.is-active { color: var(--pj-paper); background: var(--pj-ink); }

/* Over the takeover the capsule inverts so it stays legible. */
body.pj-takeover .pj-viewtoggle {
  border-color: rgba(255,255,255,.24);
  background: rgba(12,11,10,.72);
}
body.pj-takeover .pj-view { color: rgba(255,255,255,.62); }
body.pj-takeover .pj-view.is-active { color: #14110d; background: #f4efe2; }

/* ── RESPONSIVE ─────────────────────────────────────────────────
   Two-up strip on phones — four 16:10 stills across a 375px screen are
   ~90px wide and read as nothing. The head stacks at the same time so
   the title is not fighting the meta for a single line. */
@media (max-width: 768px) {
  .pj-band-strip { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .pj-band-head {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }
  .pj-band-cue { opacity: 1; transform: none; font-size: 0.62rem; }
  .pj-viewtoggle { bottom: 14px; }
  .pj-view { padding: 8px 14px; font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-band.reveal,
  .pj-band.reveal .pj-band-cell {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pj-band-cell img { transform: none; }
}

/* ── CLIENTS ────────────────────────────────────────────────── */
.pj-panel .clients-section { padding: 0; }
.pj-panel .clients-header  { padding: clamp(20px, 2.8vw, 38px) 0 clamp(14px, 2vw, 24px); }
.pj-panel .clients-label {
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.25vw, 1.15rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pj-ink);
}
.pj-panel .client-logo {
  height: clamp(58px, 6.8vw, 100px);
  /* gap scales with the logos so the marquee keeps the same rhythm
     rather than crowding as they grow */
  margin-right: clamp(52px, 6.6vw, 108px);
  opacity: 0.95;
}

/* ── JOURNEY ────────────────────────────────────────────────── */
body.page-uxui .journey-section {
  width: min(100%, var(--pj-max));
  margin: 0 auto;
  text-align: center;
}
body.page-uxui .journey-hero {
  text-align: center;
  padding: clamp(58px, 9vh, 120px) 0 clamp(26px, 3.4vw, 44px);
}
body.page-uxui .journey-hero-title {
  font-family: var(--pj-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  /* The base rule sets overflow:hidden to mask a slide-up reveal that is
     no longer used (see the "slide-up disabled" note above). Left on, it
     clipped the tops of the letters, because line-height 1 makes the line
     box shorter than the glyphs at this size. */
  overflow: visible;
  line-height: 1.14;
  padding-bottom: 0.06em;
  color: var(--pj-red);
  -webkit-text-fill-color: var(--pj-red);
  margin: 0;
}
body.page-uxui .journey-hero-sub { display: none; }

body.page-uxui .journey-list { text-align: center; }
/* Proximity: a firm's positions sit tight under its name, while the gap
   between one firm and the next is much larger — so each company reads as
   one group rather than an even run of lines. */
body.page-uxui .journey-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(34px, 5vw, 64px) 0 0;
  border: 0;
}
body.page-uxui .journey-entry:first-child { padding-top: 0; }
/* Number and company on one line, the line centred as a whole. */
body.page-uxui .journey-entry-head {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 0.34em;
  padding: 0;
  border: 0;
}
/* "01 - Poplr Cult" — the dash is decorative, so it lives in CSS rather
   than being baked into the rendered number. */
body.page-uxui .journey-nr {
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  letter-spacing: -0.07em;
  color: var(--pj-ink);
  width: auto;
}
body.page-uxui .journey-nr::after { content: ' -'; }
body.page-uxui .journey-company {
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.2;
  /* -70 tracking (design-tool units are 1/1000 em) */
  letter-spacing: -0.07em;
  text-transform: none;
  color: var(--pj-ink);
  margin: 0;
}
body.page-uxui .journey-cat { display: none; }

body.page-uxui .journey-entry-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* between one position and the next within the same firm */
  gap: clamp(9px, 1.15vw, 16px);
  padding: 0;
  max-width: 46ch;
}
/* one role + its year, stacked; a company can list several */
body.page-uxui .journey-stint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* The base rule gives .journey-period `margin-left: auto`, from when the
   year was pushed to the far end of the old single-row layout. An auto
   margin beats align-items, so it shoved the year ~79px right of centre
   here. Reset it along with the mobile rule's padding-left. */
body.page-uxui .journey-period {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  width: auto;
}
body.page-uxui .journey-role,
body.page-uxui .journey-period {
  font-family: var(--pj-body);
  font-weight: 400;
  /* In the reference the roles sit only a little below the company name,
     not at caption size — this keeps them at roughly 80% of the heading. */
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.07em;
  text-transform: none;
  color: var(--pj-ink);
}
body.page-uxui .journey-desc {
  font-family: var(--pj-body);
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.5;
  color: rgba(20, 17, 13, 0.62);
  margin: 6px 0 0;
}

/* ── SKILLS ─────────────────────────────────────────────────── */
/* Kept on request and re-cut as bordered chips so they read as the
   same family as the "Get in touch" box below. */
body.page-uxui .journey-skills-wrap {
  /* the base rule makes this a column flex container; centring the items
     is what actually aligns the label and the chip grid to each other,
     text-align alone only handles the label */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: clamp(34px, 5vw, 58px) 0 0;
  border: 0;
}
body.page-uxui .journey-skills-label {
  display: block;
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pj-ink);
  margin: 0 0 clamp(12px, 1.8vw, 18px);
}
body.page-uxui .journey-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* Width tuned for a balanced wrap. Too wide (940px) and the eight chips
     break 7 + 1, leaving an orphan on the second row; this holds them to
     roughly even rows. */
  max-width: 680px;
  margin: 0 auto;
}
body.page-uxui .skill-tag {
  font-family: var(--pj-body);
  font-weight: 400;
  font-size: clamp(0.72rem, 0.95vw, 0.85rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pj-ink);
  border: 1.5px solid var(--pj-ink);
  border-radius: 0;
  background: transparent;
  padding: 7px 13px;
}

/* ── CONTACT ────────────────────────────────────────────────── */
body.page-uxui .journey-contact {
  text-align: center;
  align-items: center;
  padding: clamp(40px, 6vw, 76px) 0 0;
  border: 0;
}
body.page-uxui .journey-contact-label { display: none; }
body.page-uxui .journey-contact-heading {
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--pj-ink);
  margin: 0 0 clamp(14px, 2vw, 22px);
}
body.page-uxui .journey-contact-btn {
  display: inline-block;
  font-family: var(--pj-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--pj-ink);
  background: transparent;
  border: 1.5px solid var(--pj-ink);
  border-radius: 0;
  padding: clamp(6px, 1vw, 10px) clamp(14px, 2vw, 22px);
}
body.page-uxui .journey-contact-btn:hover {
  background: var(--pj-ink);
  color: #f8f1dc;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.page-uxui .projects-wrap { padding: 88px 14px 70px; }
  .pj-panel { padding: 22px 14px 26px; border-width: 1.5px; }
  .pj-panel .project-row-title { font-size: clamp(1.05rem, 5.4vw, 1.5rem); }
  body.page-uxui .journey-nr,
  body.page-uxui .journey-company { font-size: clamp(1.05rem, 5vw, 1.4rem); }
}

/* The site-wide footer CTA (nav.js's .sv-cta, replacing the old dark
   .sv-footer this rule used to hide) now uses var(--fg)/var(--bg), so
   it takes this page's own cream palette instead of clashing the way
   the old black band did — nothing to hide here any more. */