.work-page {
  --work-warm: #e6c89e;
  --work-rose: #b98ea4;
  --work-blue: #9bb2cc;
}

.work-hero,
.work-proof,
.work-archive,
.work-practice,
.work-contact {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.work-hero {
  display: grid;
  min-height: min(900px, 94svh);
  align-content: end;
  padding: 118px 6vw 62px;
  overflow: hidden;
}

.work-hero::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 11, 0.97) 0%, rgba(5, 6, 11, 0.86) 43%, rgba(5, 6, 11, 0.28) 76%, rgba(5, 6, 11, 0.17) 100%),
    linear-gradient(to top, rgba(5, 6, 11, 0.88) 0%, rgba(5, 6, 11, 0.16) 58%, rgba(5, 6, 11, 0.22) 100%);
  content: "";
  pointer-events: none;
}

.work-hero-art {
  position: absolute;
  z-index: 1;
  inset: -2%;
  margin: 0;
  opacity: 0.83;
}

.work-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.74) contrast(1.05) brightness(0.82);
}

.work-hero-copy {
  position: relative;
  z-index: 4;
  width: min(990px, 76%);
}

.work-hero h1,
.work-section-heading h2,
.proof-copy h3,
.work-contact h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

.work-hero h1 {
  max-width: 970px;
  font-size: clamp(4.7rem, 7.5vw, 8.4rem);
  line-height: 0.83;
  letter-spacing: -0.035em;
}

.work-hero-role {
  margin: 32px 0 0;
  color: var(--work-warm);
  font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--serif);
}

.work-hero-lede {
  max-width: 650px;
  margin: 18px 0 0;
  color: rgba(235, 234, 232, 0.76);
  font-size: 0.96rem;
  line-height: 1.72;
}

.work-hero-note {
  position: absolute;
  z-index: 4;
  right: 6vw;
  bottom: 64px;
  margin: 0;
  color: rgba(244, 240, 231, 0.62);
  font: 400 1.28rem/1.35 var(--serif);
  text-align: right;
}

.work-proof,
.work-practice {
  padding: 96px 6vw 112px;
  background: rgba(5, 6, 11, 0.82);
}

.work-section-heading {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(280px, 0.46fr);
  gap: 7vw;
  align-items: end;
  margin-bottom: 76px;
}

.work-section-heading .river-kicker {
  grid-column: 1 / -1;
  margin-bottom: -28px;
}

.work-section-heading h2 {
  max-width: 800px;
  font-size: clamp(4rem, 6.4vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
}

.work-section-heading > p:last-child {
  margin: 0;
  color: rgba(225, 226, 231, 0.66);
  font-size: 0.91rem;
  line-height: 1.68;
}

.proof-story {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 6vw;
  align-items: center;
  padding: 78px 0;
  border-top: 1px solid var(--line);
}

.proof-story:last-child { border-bottom: 1px solid var(--line); }

.work-archive {
  --archive-x: 50%;
  --archive-y: 44%;
  min-height: 100svh;
  overflow: hidden;
  background: #030407;
}

.work-archive-portal {
  display: block;
  min-height: 100svh;
  color: inherit;
}

.work-archive-frame {
  position: relative;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.work-archive-frame > img {
  position: absolute;
  z-index: -3;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(0.86) contrast(1.05) brightness(0.7);
  transform: scale(1.015);
  transition: filter 900ms ease, transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-archive-frame::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle 27vmax at var(--archive-x) var(--archive-y), rgba(255, 231, 196, 0.17), rgba(255, 219, 174, 0.03) 42%, transparent 68%),
    linear-gradient(90deg, rgba(3, 4, 7, 0.88) 0%, rgba(3, 4, 7, 0.22) 39%, rgba(3, 4, 7, 0.04) 70%),
    linear-gradient(to top, rgba(3, 4, 7, 0.94) 0%, rgba(3, 4, 7, 0.18) 46%, rgba(3, 4, 7, 0.28) 100%);
  content: "";
  pointer-events: none;
}

.work-archive-frame::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(240, 226, 197, 0.09);
  box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.42);
  content: "";
  pointer-events: none;
}

.work-archive-portal:hover .work-archive-frame > img,
.work-archive-portal:focus-visible .work-archive-frame > img {
  filter: saturate(0.96) contrast(1.06) brightness(0.79);
  transform: scale(1.035);
}

.work-archive-portal:focus-visible {
  outline: 2px solid var(--work-warm);
  outline-offset: -5px;
}

.work-archive-copy {
  position: absolute;
  z-index: 2;
  left: 6vw;
  bottom: 7vh;
  width: min(670px, 70vw);
  margin: 0;
}

.work-archive-copy h2 {
  margin: 9px 0 0;
  font: 400 clamp(4.4rem, 7vw, 8rem)/0.84 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.work-archive-copy > p:not(.river-kicker) {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(235, 232, 225, 0.73);
  font-size: 0.91rem;
  line-height: 1.7;
}

.work-archive-copy > span {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--work-warm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.work-archive-copy b {
  font-weight: inherit;
  transition: transform 220ms ease;
}

.work-archive-portal:hover .work-archive-copy b,
.work-archive-portal:focus-visible .work-archive-copy b { transform: translateX(6px); }

.proof-visual,
.magnus-proof-frame {
  position: relative;
  margin: 0;
}

.proof-visual::before,
.magnus-proof-frame::before {
  position: absolute;
  z-index: -1;
  inset: 16% 8%;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  filter: blur(72px);
  content: "";
}

.proof-visual img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.04) brightness(0.9);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
}

.proof-visual figcaption,
.proof-caption {
  margin: 14px 0 0;
  color: rgba(188, 192, 202, 0.52);
  font: 500 0.62rem/1.5 var(--mono);
  text-transform: uppercase;
}

.proof-number {
  margin: 0 0 22px;
  color: var(--work-warm);
  font: 500 0.67rem/1.5 var(--mono);
  text-transform: uppercase;
}

.proof-copy h3 {
  max-width: 650px;
  font-size: clamp(3rem, 4.5vw, 5.1rem);
  line-height: 0.94;
}

.proof-copy > p:not(.proof-number):not(.proof-caption) {
  max-width: 590px;
  margin: 24px 0 0;
  color: rgba(225, 226, 231, 0.7);
  font-size: 0.92rem;
  line-height: 1.72;
}

.proof-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.proof-disciplines li {
  color: rgba(231, 229, 224, 0.68);
  font: 500 0.62rem var(--mono);
  text-transform: uppercase;
}

.proof-link,
.work-email {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--work-warm);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  transition: color 180ms ease, gap 260ms ease, border-color 180ms ease;
}

.proof-link:hover,
.proof-link:focus-visible,
.work-email:hover,
.work-email:focus-visible {
  gap: 20px;
  color: var(--work-warm);
}

.proof-worlds {
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
}

.work-brand-field {
  position: relative;
  display: grid;
  min-height: 460px;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 18px 26px;
  align-content: center;
  align-items: center;
  padding: 46px;
  border: 1px solid rgba(224, 229, 239, 0.12);
  background:
    radial-gradient(circle at 22% 20%, rgba(155, 178, 204, 0.08), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(185, 142, 164, 0.08), transparent 35%),
    rgba(8, 10, 18, 0.54);
}

.work-brand-field::before {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(224, 229, 239, 0.06);
  content: "";
  pointer-events: none;
}

.work-brand-field img {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.22);
}

.work-brand-field img:nth-child(2),
.work-brand-field img:nth-child(6) { grid-column: span 2; }

.magnus-proof-frame > img {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
  border: 1px solid rgba(224, 229, 239, 0.1);
  filter: contrast(1.04) brightness(0.9);
}

.magnus-proof-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 76%;
  margin: -28px 0 0 auto;
}

.magnus-proof-pair img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(224, 229, 239, 0.13);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
}

.work-practice { background: rgba(8, 10, 18, 0.72); }

.practice-ledger { border-top: 1px solid var(--line); }

.practice-ledger article {
  display: grid;
  grid-template-columns: 50px minmax(190px, 0.48fr) minmax(300px, 1fr);
  gap: 22px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.practice-ledger span {
  color: var(--work-warm);
  font: 500 0.63rem var(--mono);
}

.practice-ledger h3 {
  margin: 0;
  font: 400 2.05rem var(--serif);
}

.practice-ledger p {
  max-width: 700px;
  margin: 0;
  color: rgba(225, 226, 231, 0.67);
  font-size: 0.87rem;
  line-height: 1.64;
}

.work-contact {
  display: grid;
  min-height: 64svh;
  place-items: center;
  padding: 100px 6vw;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.11), transparent 42%),
    rgba(5, 6, 11, 0.78);
}

.work-contact > div { width: min(960px, 100%); }

.work-contact h2 {
  font-size: clamp(4.2rem, 7vw, 7.8rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.work-contact p:not(.river-kicker) {
  max-width: 670px;
  margin: 28px auto 0;
  color: rgba(225, 226, 231, 0.72);
  font-size: 0.96rem;
  line-height: 1.7;
}

.work-email {
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: none;
}

@media (max-width: 1020px) {
  .work-hero-copy { width: min(870px, 82%); }
  .work-hero h1 { font-size: clamp(4.7rem, 8.6vw, 7.1rem); }
  .work-hero-note { display: none; }
  .work-section-heading { grid-template-columns: 1fr; gap: 22px; }
  .work-section-heading .river-kicker { margin-bottom: 0; }
  .proof-story,
  .proof-worlds { grid-template-columns: 1fr; gap: 48px; }
  .proof-worlds .proof-copy { grid-row: 1; }
  .work-brand-field { grid-row: 2; }
}

@media (max-width: 720px) {
  .work-hero {
    min-height: 760px;
    padding: 98px 20px 58px;
  }
  .work-hero::after {
    background:
      linear-gradient(to top, rgba(5, 6, 11, 0.97) 0%, rgba(5, 6, 11, 0.72) 54%, rgba(5, 6, 11, 0.18) 100%),
      linear-gradient(90deg, rgba(5, 6, 11, 0.6), rgba(5, 6, 11, 0.08));
  }
  .work-hero-art img { object-position: 61% center; }
  .work-hero-copy { width: 100%; }
  .work-hero h1 { font-size: clamp(3.8rem, 16.2vw, 5rem); line-height: 0.86; }
  .work-hero-role { margin-top: 24px; font-size: 1.25rem; }
  .work-hero-lede { font-size: 0.91rem; line-height: 1.66; }
  .work-proof,
  .work-practice { padding: 68px 20px 78px; }
  .work-section-heading { margin-bottom: 52px; }
  .work-section-heading h2 { font-size: 3.6rem; line-height: 0.9; }
  .proof-story { gap: 34px; padding: 58px 0; }
  .proof-copy h3 { font-size: 3.05rem; }
  .proof-visual img { aspect-ratio: 4 / 5; object-position: 62% center; }
  .work-brand-field {
    min-height: 400px;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 24px;
    padding: 38px 28px;
  }
  .work-brand-field img:nth-child(2),
  .work-brand-field img:nth-child(6) { grid-column: auto; }
  .magnus-proof-pair { width: 90%; margin-top: -14px; }
  .work-archive,
  .work-archive-portal,
  .work-archive-frame { min-height: 90svh; }
  .work-archive-frame > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 49% 50%;
    filter: saturate(0.91) contrast(1.04) brightness(0.77);
    transform: none;
  }
  .work-archive-frame::before {
    background:
      linear-gradient(to top, rgba(3, 4, 7, 0.96) 0%, rgba(3, 4, 7, 0.32) 49%, rgba(3, 4, 7, 0.16) 75%),
      linear-gradient(90deg, rgba(3, 4, 7, 0.35), rgba(3, 4, 7, 0.04));
  }
  .work-archive-copy {
    left: 20px;
    bottom: 48px;
    width: calc(100% - 40px);
  }
  .work-archive-copy h2 { font-size: clamp(3.65rem, 15.5vw, 5rem); }
  .work-archive-copy > p:not(.river-kicker) { max-width: 92%; font-size: 0.87rem; }
  .practice-ledger article { grid-template-columns: 34px 1fr; gap: 9px 14px; padding: 22px 0; }
  .practice-ledger p { grid-column: 2; }
  .work-contact { min-height: 0; padding: 82px 20px 110px; }
  .work-contact h2 { font-size: 4rem; }
  .work-email { font-size: 0.7rem; }
}

@media (max-width: 390px) {
  .work-hero h1 { font-size: 3.55rem; }
  .work-hero-lede { font-size: 0.86rem; }
  .work-section-heading h2 { font-size: 3.25rem; }
  .proof-copy h3 { font-size: 2.8rem; }
  .work-contact h2 { font-size: 3.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work-hero-art img,
  .proof-visual img,
  .magnus-proof-frame img,
  .work-archive-frame > img { transform: none !important; transition: none !important; }
}