@charset "UTF-8";
/* ==========================================================================
   .es — Work Detail Page

   01. Base
   02. Hero
   03. Story Sections
   04. Gallery
   05. Scope
   06. Related Works
   07. Responsive
========================================================================== */
/* ==========================================================================
   01. Base
========================================================================== */
.work-detail-page {
  background: var(--white);
  color: var(--ink);
}

.work-detail-main {
  padding-top: 0;
}

.work-detail-container {
  width: min(112rem, 100% - 8rem);
  margin: 0 auto;
}

.project-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--mid);
}

.project-eyebrow span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   02. Hero
========================================================================== */
.project-hero {
  padding: var(--space-hero-top) 0 8rem;
  background: radial-gradient(circle at 92% 12%, rgba(255, 61, 31, 0.08), transparent 32rem), var(--white);
}

.project-hero__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3.2rem;
  align-items: end;
  margin-top: 2.4rem;
}

.project-hero__title {
  font-family: var(--font-body);
  font-size: var(--type-section-title);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--black);
}

.project-hero__lead {
  width: min(100%, 64rem);
  margin-top: 3.2rem;
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--mid);
}

.project-hero__visit {
  align-self: center;
}

.project-hero__visit-text {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.03em;
}

.project-hero__visit-text small {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--mid);
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 5.6rem;
}

.project-meta__item {
  display: grid;
  gap: 1.6rem;
  min-height: 13.6rem;
  padding: 2.4rem;
  border: 1px solid var(--border);
  border-radius: 2.4rem;
  background: rgba(237, 232, 224, 0.72);
}

.project-meta dt {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--accent);
}

.project-meta dd {
  font-size: var(--type-body-sm);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.project-main-visual {
  margin-top: 6.4rem;
}

.project-main-visual__image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 2.4rem;
  box-shadow: 0 2rem 4rem rgba(10, 10, 10, 0.08);
}

.project-visual {
  position: relative;
  min-height: 52rem;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 2.4rem;
  background: radial-gradient(circle at 78% 24%, rgba(255, 61, 31, 0.16), transparent 24rem), linear-gradient(145deg, #101414 0%, #050505 100%);
  color: var(--white);
  box-shadow: 0 2rem 4rem rgba(10, 10, 10, 0.08);
}

.project-visual::before,
.project-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.project-visual::before {
  width: 34rem;
  height: 34rem;
  right: -7rem;
  bottom: -7rem;
}

.project-visual::after {
  width: 18rem;
  height: 18rem;
  right: 7rem;
  bottom: 6rem;
}

.project-visual__label {
  position: absolute;
  top: 3.2rem;
  left: 3.2rem;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.project-visual strong {
  position: absolute;
  left: 3.2rem;
  bottom: 4rem;
  max-width: 9ch;
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 7vw, 8rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.project-visual__dot {
  position: absolute;
  top: 3.2rem;
  right: 3.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   03. Story Sections
========================================================================== */
.project-section {
  padding: var(--space-section-y) 0;
  background: var(--white);
}

.project-section--cream {
  background: var(--cream);
}

.project-story {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: var(--space-layout-gap);
  align-items: start;
}

.project-section__body {
  display: grid;
  gap: 2.4rem;
  padding-top: calc(var(--type-label) + 1.6rem);
}

.project-section__body p,
.project-scope__list dd {
  font-size: var(--type-body-sm);
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--mid);
}

/* ==========================================================================
   04. Gallery
========================================================================== */
.project-screen-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 4.8rem;
}

.project-screen--wide {
  grid-column: 1/-1;
}

.project-screen {
  display: grid;
  gap: 1.6rem;
}

.project-screen__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 2.4rem;
}

.project-screen__mock {
  position: relative;
  min-height: 36rem;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 2.4rem;
  background: radial-gradient(circle at 86% 22%, rgba(255, 61, 31, 0.14), transparent 24%), linear-gradient(145deg, #101414 0%, #050505 100%);
}

.project-screen__mock--desktop {
  min-height: 48rem;
}

.project-screen__mock--mobile {
  background: linear-gradient(90deg, transparent 0 34%, rgba(255, 255, 255, 0.04) 34% 36%, transparent 36% 100%), linear-gradient(145deg, #101414 0%, #050505 100%);
}

.project-screen__mock--panel {
  background: repeating-linear-gradient(180deg, rgba(10, 10, 10, 0.06) 0, rgba(10, 10, 10, 0.06) 1px, transparent 1px, transparent 4.8rem), linear-gradient(145deg, #ffffff 0%, #f7f3ee 100%);
}

.project-screen__mock span {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  display: flex;
  gap: 0.8rem;
}

.project-screen__mock span::before,
.project-screen__mock span::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 1.8rem 0 0 rgba(255, 255, 255, 0.28);
}

.project-screen__mock strong {
  position: absolute;
  left: 3.2rem;
  bottom: 3.2rem;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 5.6vw, 7.2rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.project-screen__mock--panel strong {
  color: rgba(10, 10, 10, 0.82);
}

/* ==========================================================================
   05. Scope
========================================================================== */
.project-scope {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
  gap: 5.6rem;
  align-items: start;
}

.project-scope__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.project-scope__list div {
  min-height: 13.6rem;
  padding: 2.8rem 3.2rem;
  border: 1px solid var(--border);
  border-radius: 2.4rem;
  background: var(--white);
}

.project-scope__list dt {
  margin-bottom: 2.4rem;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--accent);
}

/* ==========================================================================
   06. Related Works
========================================================================== */
.work-detail-related {
  padding: 8.8rem 0;
}

.work-detail-related__header {
  margin-bottom: 3.2rem;
}

.work-detail-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 12rem;
  gap: 2rem;
  column-gap: 4rem;
  align-items: center;
}

.work-detail-related-card {
  display: grid;
  gap: 1.6rem;
  min-height: 100%;
}

.work-detail-related-card__thumb {
  min-height: 13.6rem;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 2rem;
  background: #f7f3ee;
}

.work-detail-related-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 13.6rem;
  object-fit: cover;
}

.work-detail-related-card__thumb--lab {
  background: radial-gradient(circle at bottom right, rgba(255, 61, 31, 0.16), transparent 32%), linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
}

.work-detail-related-card__thumb--sports {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.24) 0%, rgba(18, 18, 18, 0.24) 100%), linear-gradient(135deg, #20324b 0%, #2c415d 100%);
}

.work-detail-related-card__thumb--logo {
  display: grid;
  place-items: center;
  background: #111111;
}

.work-detail-related-card__thumb--logo img {
  width: 6.4rem;
}

.work-detail-related-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.4rem;
  align-items: center;
  min-height: 10.4rem;
}

.work-detail-related-card__meta {
  display: grid;
  gap: 0.4rem;
}

.work-detail-related-card__meta strong {
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.work-detail-related-card__meta span {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--mid);
}

.work-detail-related-card__more {
  justify-self: end;
  align-self: center;
}

.work-detail-related-card:hover .work-detail-related-card__more .circle-button {
  transform: translateY(-0.2rem);
}

.work-detail-related__view-all {
  justify-self: end;
  align-self: center;
}

/* ==========================================================================
   07. Responsive
========================================================================== */
@media (max-width: 1024px) {
  .project-story,
  .project-scope {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
  .project-meta,
  .project-scope__list,
  .work-detail-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-section__body {
    padding-top: 0;
  }
  .work-detail-related__view-all {
    justify-self: start;
  }
}
@media (max-width: 640px) {
  .work-detail-main {
    padding-top: 11.2rem;
  }
  .work-detail-container {
    width: min(100% - 4.8rem, 112rem);
  }
  .project-hero {
    padding: 4.8rem 0 6.4rem;
  }
  .project-hero__heading {
    grid-template-columns: 1fr;
  }
  .project-meta,
  .project-screen-gallery,
  .project-scope__list,
  .work-detail-related__grid {
    grid-template-columns: 1fr;
  }
  .project-visual {
    min-height: 42rem;
  }
  .work-detail-related-card__body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .work-detail-main {
    padding-top: 10.4rem;
  }
  .work-detail-container {
    width: min(100% - 3.2rem, 112rem);
  }
  .project-hero {
    padding: 2.4rem 0 5.6rem;
  }
  .project-hero__lead,
  .project-section__body p,
  .project-scope__list dd {
    font-size: var(--type-body-sm);
  }
  .project-visual,
  .project-screen__mock {
    min-height: 34rem;
    border-radius: 2.4rem;
  }
  .project-visual__label,
  .project-visual strong {
    left: 2.4rem;
  }
  .project-visual__dot {
    top: 2.4rem;
    right: 2.4rem;
  }
  .project-section,
  .work-detail-related {
    padding: var(--space-section-y-mobile) 0;
  }
  .project-scope__list div {
    min-height: auto;
    padding: 2.4rem;
  }
}