/* 
 * READABLE PRODUCTION STYLESHEET
 * Project pages and project-specific layouts
 *
 * This cache-hashed file is generated for the server upload.
 * Make lasting edits in the matching readable CSS file under app/,
 * then rebuild the static export. Do not rename this generated file.
  */

/*  SECTION: Project shell and design tokens  */

.case-page {
  --case-paper: #e9e7e1;
  --case-ink: #111315;
  --case-muted: rgba(17,19,21,.55);
  --case-media-radius: 1.1rem;
  --case-section-clear: clamp(2.75rem,4.2vw,4rem);
  min-height: 100vh;
  overflow: clip;
  background: linear-gradient(rgba(233,231,225,.82),rgba(233,231,225,.82)),var(--case-paper-background) center /cover fixed,var(--case-paper);
  color: var(--case-ink);
}

.case-page * {
  box-sizing: border-box;
}

.case-page section[id] {
  scroll-margin-top: 5rem;
}

/*  SECTION: Project grain texture  */

.case-grain {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at 17% 22%,rgba(255,255,255,.32) 0 .38px,transparent .62px),radial-gradient(circle at 78% 61%,rgba(0,0,0,.28) 0 .42px,transparent .68px);
  background-size: 6px 8px,7px 5px;
}

/*  SECTION: Project header and reading progress  */

.case-header {
  position: fixed;
  z-index: 500;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  height: 3.7rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .5rem .62rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.05rem;
  background: rgba(13,15,17,.49);
  color: #f4f5f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 16px 50px rgba(0,0,0,.16);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.case-progress {
  position: absolute;
  top: -1px;
  left: 1rem;
  right: 1rem;
  height: 1px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
}

.case-progress span {
  display: block;
  width: var(--case-progress);
  height: 100%;
  background: #fff;
}

.case-back {
  gap: .7rem;
  width: max-content;
  padding-left: .55rem;
  color: rgba(255,255,255,.77);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-back,.case-back i {
  display: inline-flex;
  align-items: center;
}

.case-back i {
  justify-content: center;
  height: 1em;
  font-size: 1rem;
  font-style: normal;
  line-height: 1;
  transform: translateY(-.1em);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.case-back:hover i {
  transform: translate(-.3rem,-.1em);
}

.case-mark {
  width: 2.55rem;
  height: 2.55rem;
  display: block;
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease;
}

.case-mark:hover {
  transform: scale(.96);
  opacity: .88;
}

.case-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.case-header-meta {
  justify-self: end;
  display: flex;
  gap: .65rem;
  padding-right: .6rem;
  color: rgba(255,255,255,.62);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-header-separator {
  letter-spacing: 0;
}

.case-mobile-menu {
  z-index: 700;
  color: #f4f5f5;
}

/*  SECTION: Desktop chapter navigation  */

.case-rail {
  position: fixed;
  z-index: 80;
  top: 50%;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding: .45rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .9rem;
  background: rgba(12,14,16,.45);
  color: #fff;
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
}

.case-rail--scroll-aware {
  right: -20rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: right .72s cubic-bezier(.16,1,.3,1),opacity .72s cubic-bezier(.16,1,.3,1);
  will-change: right,opacity;
}

.case-rail--scroll-aware.is-visible {
  right: 1rem;
  opacity: 1;
  pointer-events: auto;
}

.case-rail a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: .55rem;
  color: rgba(255,255,255,.58);
  font-size: .52rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .3s ease,background .3s ease;
}

.case-rail a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}

.case-rail span {
  flex: 0 0 1.6em;
  color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}

.case-draft-badge {
  position: fixed;
  z-index: 96;
  left: 24px;
  bottom: 24px;
  padding: 9px 13px 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(15,15,15,.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

/*  SECTION: Responsive behavior  */

@media (max-width:760px) {
  .case-draft-badge {
    left: 14px;
    bottom: 14px;
    padding: 8px 11px 7px;
    font-size: 9px;
  }
}

/*  SECTION: Project cover  */

.case-hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 8rem clamp(1.4rem,4.5vw,5.5rem) 7.2rem;
  background: #151311;
  color: #fff;
}

.case-hero-image,.case-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-hero-image {
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.8) contrast(1.04);
  transform: scale(1.015);
}

.case-hero-shade {
  background: linear-gradient(90deg,rgba(8,9,10,.7),rgba(8,9,10,.13) 52%,rgba(8,9,10,.12)),linear-gradient(0deg,rgba(7,8,9,.62),transparent 52%);
}

.case-hero-title {
  position: relative;
  z-index: 2;
  width: 100%;
}

.case-outro-heading p,.chapter-heading>p {
  margin: 0 0 1.2rem;
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.case-hero h1 {
  margin: 0;
  font-size: clamp(5rem,12.5vw,14rem);
  font-weight: 430;
  line-height: .68;
  letter-spacing: -.03em;
}

.case-hero h1 span {
  display: block;
}

.case-hero h1 span:last-child {
  margin-left: .62em;
  color: rgba(255,255,255,.82);
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-style: italic;
  font-weight: 400;
}

.case-hero-meta {
  position: absolute;
  z-index: 3;
  left: clamp(1.4rem,4.5vw,5.5rem);
  right: clamp(1.4rem,4.5vw,5.5rem);
  bottom: 1.55rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.61);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.case-hero-meta span:last-child {
  justify-self: end;
}

.case-scroll {
  position: absolute;
  z-index: 3;
  right: clamp(1.4rem,4.5vw,5.5rem);
  bottom: 7.2rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(15,16,17,.22);
  backdrop-filter: blur(12px);
  font-size: 1rem;
  transition: transform .45s cubic-bezier(.16,1,.3,1),background .3s ease;
}

.case-scroll:hover {
  transform: translateY(.25rem);
  background: rgba(255,255,255,.1);
}

.case-scroll-arrow {
  display: block;
  animation: case-scroll-nudge 1.65s ease-in-out 1.35s infinite;
}

@keyframes case-scroll-nudge {
  0%,to {
    transform: translateY(-.08rem);
  }

  50% {
    transform: translateY(.18rem);
  }
}

/*  SECTION: Context and metadata  */

.case-intro {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  align-content: center;
  align-items: start;
  padding-block: 8rem;
  padding-left: max(clamp(1rem,4.5vw,5.5rem),calc((100% - 73.125rem) / 2));
  padding-right: clamp(1rem,4.5vw,5.5rem);
  background: var(--case-paper-background) center /cover,var(--case-paper);
}

.chapter-heading h2 {
  margin: 0;
  font-size: clamp(3.2rem,6.5vw,8rem);
  line-height: .88;
  letter-spacing: -.02em;
  font-weight: 430;
}

.chapter-heading h2 em {
  color: rgba(17,19,21,.48);
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-weight: 400;
}

.case-lead {
  grid-column: 1/9;
  max-width: 61rem;
  margin: 0;
  color: rgba(17,19,21,.68);
  font-size: clamp(1.05rem,1.5vw,1.35rem);
  line-height: 1.55;
}

@media (min-width:1061px) {
  .case-lead {
    text-wrap: pretty;
  }
}

.case-lead p {
  margin: 0;
}

.case-lead p+p {
  margin-top: 1.1em;
}

.case-desktop-break {
  display: none;
}

@media (min-width:1800px) {
  .case-desktop-break {
    display: inline;
  }
}

.case-facts {
  grid-column: 10/13;
  margin: 0;
  border-top: 1px solid rgba(17,19,21,.18);
}

.case-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(17,19,21,.18);
}

.case-facts dd,.case-facts dt {
  margin: 0;
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.case-facts dt {
  color: var(--case-muted);
}

.case-facts dd {
  text-align: right;
}

/*  SECTION: Project chapters and media  */

.case-chapter {
  position: relative;
  padding: var(--case-section-clear) 15px;
}

.case-chapter>* {
  width: 100%;
  max-width: 73.125rem;
  margin-left: auto;
  margin-right: auto;
}

.chapter-heading {
  display: grid;
  grid-template-columns: .32fr 1.2fr .48fr;
  gap: clamp(2rem,5vw,7rem);
  align-items: end;
  margin-bottom: 5.5rem;
}

.chapter-description {
  margin-bottom: var(--case-section-clear);
}

.chapter-description h3 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: rgba(17,19,21,.68);
  font-size: clamp(1.05rem,1.55vw,1.4rem);
  font-weight: 400;
  line-height: 1.5;
}

.chapter-description h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.chapter-description-light h3 {
  color: rgba(240,242,243,.68);
}

.chapter-heading>p:first-child {
  align-self: start;
  padding-top: .6rem;
  color: var(--case-muted);
}

.chapter-heading>p:last-child {
  margin: 0;
  color: rgba(17,19,21,.62);
  font-size: .87rem;
  line-height: 1.6;
}

.chapter-heading>p:last-child a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.case-dbyd {
  background: #d9d4c9;
}

.case-full-image {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.case-full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-rounded {
  aspect-ratio: 1.74;
  border-radius: 1.5rem;
  box-shadow: 0 35px 90px rgba(50,45,38,.19);
}

.case-full-image figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: .9rem;
  background: rgba(12,13,14,.25);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
  font-size: .56rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.case-asym-grid {
  display: grid;
  grid-template-columns: minmax(18rem,.58fr) minmax(0,.42fr);
  grid-template-rows: auto 1fr;
  gap: clamp(1rem,2.2vw,2rem);
  align-items: start;
  margin-top: clamp(4rem,9vw,10rem);
}

.case-asym-grid figure {
  margin: 0;
  overflow: hidden;
}

.case-asym-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-portrait-card {
  position: relative;
  grid-row: 1/span 2;
  width: 72%;
  justify-self: center;
  border-radius: 1.35rem;
  box-shadow: 0 30px 70px rgba(50,45,38,.17);
}

.case-portrait-card figcaption {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  padding: .65rem .8rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  color: rgba(16,18,20,.7);
  backdrop-filter: blur(12px);
  font-size: .54rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-asym-copy {
  align-self: end;
  padding: 2rem 0 3rem;
  border-top: 1px solid rgba(17,19,21,.2);
}

.case-asym-copy span,.case-sustain-note span {
  display: block;
  margin-bottom: 1rem;
  color: var(--case-muted);
  font-size: .59rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.case-asym-copy p,.case-sustain-note p {
  max-width: 31rem;
  margin: 0;
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-size: clamp(1.6rem,2.8vw,3.2rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.case-landscape-card {
  aspect-ratio: 1.8;
  border-radius: 1.2rem;
}

.case-wide-strip {
  aspect-ratio: 2.65;
  margin-top: clamp(4rem,8vw,8rem);
  border-radius: 1.4rem;
}

.case-kids {
  background: #090b0c;
  color: #f0f2f3;
}

.chapter-heading-light>p:first-child,.chapter-heading-light>p:last-child {
  color: rgba(240,242,243,.51);
}

.chapter-heading-light h2 em {
  color: rgba(240,242,243,.48);
}

/*  SECTION: Video controls  */

.case-video-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--case-media-radius);
  background: #141516;
}

.case-video-wide {
  aspect-ratio: 24/11;
}

.case-video-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
}

.case-video-shell.is-controlled:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 67%,rgba(0,0,0,.36));
}

.case-video-shell button {
  position: absolute;
  z-index: 3;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .42rem .45rem .42rem 1rem;
  border: 1px solid rgba(255,255,255,.29);
  border-radius: 999px;
  background: rgba(8,9,10,.3);
  color: #fff;
  backdrop-filter: blur(17px);
  cursor: pointer;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-video-shell button i {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.93);
  color: #111;
  font-size: .64rem;
  font-style: normal;
}

.case-video-label {
  position: absolute;
  z-index: 3;
  left: 1.2rem;
  bottom: 1.5rem;
  display: flex;
  gap: 1.6rem;
  color: rgba(255,255,255,.69);
  font-size: .56rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.case-media-block {
  margin-top: 15px;
}

.case-media-frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--case-media-radius);
  background: rgba(12,14,16,.08);
}

.case-media-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.case-original-media {
  border-radius: var(--case-media-radius);
}

.case-original-media img {
  display: block;
  width: 100%;
  height: auto;
}

.case-original-grid {
  display: grid;
  gap: 15px;
  width: 100%;
  overflow: hidden;
}

.case-original-grid-dbyd {
  height: 53.125rem;
  grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
}

.case-original-grid-pair {
  height: 31.25rem;
  grid-template-columns: minmax(0,.6fr) minmax(0,1fr);
}

.case-original-grid-unofficial {
  height: 46.25rem;
  grid-template-columns: minmax(0,.6fr) minmax(0,1fr);
}

.case-original-stack {
  display: grid;
  grid-template-rows: minmax(0,1fr) minmax(0,1fr);
  gap: 15px;
  min-height: 0;
}

.case-original-grid .case-media-frame,.case-original-grid .case-video-shell,.case-original-grid>*,.case-original-stack>* {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.case-original-grid img,.case-original-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-original-grid .case-video-shell {
  aspect-ratio: auto;
}

.case-kids-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(1rem,2.2vw,2rem);
  align-items: start;
  margin-top: clamp(4rem,8vw,8rem);
}

.case-kids-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1.2rem;
}

.case-kids-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-kids-main {
  grid-row: 1/span 2;
  height: 100%;
}

.case-kids-grid>figure:not(.case-kids-main) {
  aspect-ratio: 1.35;
}

.case-sustainability {
  min-height: 100vh;
  background: radial-gradient(circle at 74% 13%,rgba(145,175,197,.24),transparent 31rem),#dfe5e7;
}

.case-section-number {
  display: none;
  position: absolute;
  right: -1vw;
  top: 2rem;
  color: rgba(17,19,21,.035);
  font-size: clamp(15rem,30vw,36rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.1em;
}

.case-sustain-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(1.5rem,3vw,3.5rem);
  align-items: start;
}

.case-sustain-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1.4rem;
  box-shadow: 0 30px 80px rgba(65,76,82,.17);
}

.case-sustain-grid img {
  width: 100%;
}

.case-sustain-grid figure:first-child {
  grid-row: 1/span 2;
}

.case-sustain-note {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid rgba(17,19,21,.2);
}

.case-sustain-grid figure:last-child {
  align-self: end;
}

.case-unofficial {
  background: #edbda7;
}

.case-unofficial-grid {
  display: grid;
  grid-template-columns: .42fr .58fr;
  gap: clamp(1rem,2.2vw,2rem);
  align-items: start;
  margin-top: clamp(4rem,8vw,8rem);
}

.case-unofficial-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
}

.case-unofficial-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-unofficial-portrait {
  grid-row: 1/span 2;
  width: 72%;
  justify-self: center;
  border-radius: 1.25rem!important;
  box-shadow: 0 30px 80px rgba(98,61,47,.18);
}

.case-unofficial-bts {
  aspect-ratio: 1.27;
}

.case-unofficial-final {
  aspect-ratio: 1.5;
}

.archive-original .structured-page .structured-block {
  display: flex;
  flex-direction: column;
}

.archive-original .structured-page .structured-block--full {
  width: 100%;
}

.archive-original .structured-page .structured-block--three-quarter {
  width: 75%;
}

.archive-original .structured-page .structured-block--half {
  width: 50%;
}

.archive-original .structured-page .structured-block--align-left {
  margin-right: auto;
}

.archive-original .structured-page .structured-block--align-center {
  margin-right: auto;
  margin-left: auto;
}

.archive-original .structured-page .structured-block--align-right {
  margin-left: auto;
}

.archive-original .structured-page .structured-figure {
  width: 100%;
  margin: 0;
}

.archive-original .structured-page .structured-caption {
  margin-top: .55rem;
  color: color-mix(in srgb,currentColor 56%,transparent);
  font-size: .62rem;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.archive-original .structured-page .structured-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #08090a;
}

.archive-original .structured-page .structured-embed--16-9 {
  aspect-ratio: 16/9;
}

.archive-original .structured-page .structured-embed--4-3 {
  aspect-ratio: 4/3;
}

.archive-original .structured-page .structured-embed--9-16 {
  aspect-ratio: 9/16;
}

.archive-original .structured-page .structured-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.archive-original .structured-page .detail-zoom {
  --detail-zoom-lens-size: clamp(11rem,20vw,17rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.archive-original .structured-page .detail-zoom>img {
  position: relative;
  z-index: 1;
}

.archive-original .structured-page .detail-zoom__toggle {
  position: absolute;
  z-index: 5;
  right: .9rem;
  bottom: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  min-height: 2.42rem;
  padding: .31rem .34rem .31rem .74rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(8,9,10,.42);
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  cursor: pointer;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color .18s ease,border-color .18s ease,opacity .18s ease;
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle,.archive-original .structured-page .detail-zoom__toggle:focus-visible,.archive-original .structured-page .detail-zoom__toggle:hover {
  border-color: rgba(255,255,255,.62);
  background: rgba(8,9,10,.68);
}

.archive-original .structured-page .detail-zoom__toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

.archive-original .structured-page .detail-zoom__toggle:disabled {
  cursor: wait;
  opacity: .72;
}

.archive-original .structured-page .detail-zoom__toggle-icon {
  position: relative;
  width: 1.78rem;
  height: 1.78rem;
  flex: 0 0 1.78rem;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #111315;
}

.archive-original .structured-page .detail-zoom__toggle-icon:after,.archive-original .structured-page .detail-zoom__toggle-icon:before {
  content: "";
  position: absolute;
  color: currentColor;
  transition: transform .18s ease,width .18s ease,height .18s ease,border .18s ease,background-color .18s ease;
}

.archive-original .structured-page .detail-zoom__toggle-icon:before {
  top: 50%;
  left: 50%;
  width: .56rem;
  height: .56rem;
  border: 1.25px solid;
  border-radius: 50%;
  background: transparent;
  transform: translate(-61%,-61%);
}

.archive-original .structured-page .detail-zoom__toggle-icon:after {
  top: 50%;
  left: 50%;
  width: .38rem;
  height: 1.25px;
  border: 0;
  background: currentColor;
  transform: translate(12%,230%) rotate(45deg);
  transform-origin: center;
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle-icon:after,.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle-icon:before {
  top: 50%;
  left: 50%;
  width: .62rem;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: currentColor;
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle-icon:before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle-icon:after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle {
  gap: 0;
  min-width: 2.42rem;
  padding: .31rem;
}

.archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle-label {
  display: none;
}

.archive-original .structured-page .detail-zoom__lens {
  position: absolute;
  z-index: 4;
  width: var(--detail-zoom-lens-size);
  height: var(--detail-zoom-lens-size);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background-color: #f1f1ef;
  background-repeat: no-repeat;
  box-shadow: 0 1.35rem 3.8rem rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.08);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.94);
  transition: opacity .13s ease,transform .17s ease;
  will-change: left,top,background-position;
}

.archive-original .structured-page .detail-zoom__lens.is-visible {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

.archive-original .structured-page .detail-zoom.is-zoom-active {
  touch-action: none;
}

@media (hover:hover) and (pointer:fine) {
  .archive-original .structured-page .detail-zoom.is-zoom-active {
    cursor: none;
  }

  .archive-original .structured-page .detail-zoom.is-zoom-active .detail-zoom__toggle {
    cursor: pointer;
  }
}

/*  SECTION: Continue Exploring and footer  */

.case-outro {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 7rem clamp(1.4rem,5vw,6rem) 2rem;
  background: #090a0b;
  color: #f0f2f3;
}

.case-outro--hidden-page {
  min-height: 10rem;
  padding-top: 5.5rem;
}

.case-outro--hidden-page .case-outro-footer {
  margin-top: 0;
}

.case-outro-heading {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  color: rgba(240,242,243,.45);
}

.case-outro-back-top {
  position: absolute;
  top: 2.45rem;
  right: clamp(1.4rem,5vw,6rem);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: rgba(240,242,243,.48);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.case-outro-back-top:hover {
  color: #f0f2f3;
}

.case-outro-back-top i {
  position: relative;
  width: 1px;
  height: .75rem;
  display: block;
  background: currentColor;
}

.case-outro-back-top i:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: .4rem;
  height: .4rem;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: translateX(-50%) rotate(45deg);
}

.case-outro-heading p,.case-outro-heading span {
  margin: 0;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case-project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.case-project-card {
  position: relative;
  height: clamp(20rem,28vw,28rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(1.4rem,2.5vw,2.5rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.35rem;
  isolation: isolate;
}

.case-project-card:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(rgba(7,8,9,.3),rgba(7,8,9,.3)),linear-gradient(0deg,rgba(7,8,9,.84),rgba(7,8,9,.1) 72%);
  opacity: 1;
  transition: opacity .7s ease;
}

.case-project-card:hover:after {
  opacity: .62;
}

.case-project-card>img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1),filter .7s ease;
}

.case-project-card:hover>img {
  transform: scale(1.035);
  filter: saturate(.95);
}

.case-project-card>div {
  width: 100%;
}

.case-project-card p {
  margin: 0 0 .85rem;
  color: rgba(255,255,255,.65);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.case-project-label {
  display: flex;
  align-items: center;
  gap: .48rem;
}

.case-project-card--next .case-project-label {
  justify-content: flex-end;
  text-align: right;
}

@media (min-width:761px) {
  .case-project-card--previous .case-project-label {
    padding-left: .8rem;
  }

  .case-project-card--next .case-project-label {
    padding-right: .8rem;
  }
}

.case-project-arrow {
  width: 1.2rem;
  height: .6rem;
  display: block;
  flex: 0 0 1.2rem;
  overflow: visible;
}

.case-project-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.case-project-card h2 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(2.6rem,5vw,5.4rem);
  font-weight: 430;
  letter-spacing: -.03em;
  line-height: .88;
}

.case-project-card h2>span {
  display: block;
}

.case-project-card-title--long {
  font-size: clamp(2.35rem,4.5vw,4.8rem)!important;
}

.case-project-card-title--extra-long {
  font-size: clamp(2.1rem,3.9vw,4.1rem)!important;
}

.case-project-card--next h2 {
  margin-left: auto;
  text-align: right;
}

.case-outro-footer {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(240,242,243,.48);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-outro-footer>a {
  grid-column: 1;
  justify-self: start;
}

.case-footer-links {
  grid-column: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.case-outro-footer a {
  transition: color .3s ease;
}

.case-outro-footer a:hover {
  color: #f0f2f3;
}

@media (max-width:1060px) {
  .case-rail {
    display: none;
  }

  .chapter-heading {
    grid-template-columns: .3fr 1.25fr;
  }

  .chapter-heading>p:last-child {
    grid-column: 2;
  }

  .case-intro {
    grid-template-columns: repeat(12,minmax(0,1fr));
  }

  .case-lead {
    grid-column: 1/8;
    margin-top: 0;
  }

  .case-facts {
    grid-column: 9/13;
  }
}

@media (min-width:992px) and (max-width:1199px) {
  .case-intro {
    padding-left: max(clamp(1rem,4.5vw,5.5rem),calc((100% - 60.625rem) / 2));
  }

  .case-chapter>* {
    max-width: 60.625rem;
  }
}

@media (max-width:991px) {
  .case-intro {
    padding-left: max(clamp(1rem,4.5vw,5.5rem),calc((100% - 46.875rem) / 2));
  }

  .case-chapter>* {
    max-width: 46.875rem;
  }

  .case-original-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 5px;
  }

  .case-original-stack {
    grid-template-rows: none;
    gap: 5px;
  }

  .case-original-grid .case-media-frame,.case-original-grid .case-video-shell,.case-original-grid>*,.case-original-stack>* {
    height: auto;
  }

  .case-original-grid img,.case-original-grid video {
    height: auto;
    object-fit: contain;
  }

  .case-original-grid .case-video-shell {
    aspect-ratio: 16/9;
  }
}

@media (max-width:760px) {
  .case-header {
    top: .65rem;
    left: .65rem;
    right: .65rem;
    height: 3.4rem;
    grid-template-columns: 1fr auto 1fr;
    border-radius: .95rem;
  }

  .case-header-meta {
    display: none;
  }

  .case-mark {
    grid-column: 2;
    justify-self: center;
    width: 2.4rem;
    height: 2.4rem;
  }

  .case-hero {
    --case-scroll-button-size: 3rem;
    --case-scroll-safe-gap: .75rem;
    min-height: 100svh;
    padding: 7rem 1rem 7.4rem;
  }

  .case-hero-title {
    width: calc(100% - var(--case-scroll-button-size) - var(--case-scroll-safe-gap));
  }

  .case-hero-image {
    object-position: 56% center;
  }

  .case-hero-shade {
    background: linear-gradient(0deg,rgba(6,7,8,.76),transparent 68%),linear-gradient(90deg,rgba(6,7,8,.34),transparent);
  }

  .case-hero h1 {
    font-size: var(--case-mobile-title-size,clamp(4.2rem,21vw,6.5rem));
    line-height: .71;
  }

  .case-hero h1 span:last-child {
    margin-left: .18em;
  }

  .case-hero-meta {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    grid-template-columns: 1fr auto;
  }

  .case-hero-meta span:nth-child(2) {
    display: none;
  }

  .case-scroll {
    right: 1rem;
    bottom: 7.4rem;
  }

  .case-intro,.chapter-heading {
    display: block;
  }

  .case-intro {
    padding: 4rem 1rem;
  }

  .chapter-heading h2 {
    margin-top: 1.5rem;
    font-size: clamp(3rem,15vw,4.9rem);
  }

  .case-lead {
    margin: 0;
    font-size: 1rem;
  }

  .case-facts {
    margin-top: 3rem;
  }

  .case-chapter {
    padding: 2.5rem 1rem;
  }

  .chapter-description {
    margin-bottom: 2.5rem;
  }

  .chapter-description h3 {
    font-size: 1rem;
  }

  .case-rounded {
    aspect-ratio: .92;
    border-radius: 1.15rem;
  }

  .case-rounded img {
    object-position: 48% center;
  }

  .case-full-image figcaption {
    left: .7rem;
    right: .7rem;
    bottom: .7rem;
  }

  .case-asym-grid,.case-sustain-grid,.case-unofficial-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .case-asym-grid {
    margin-top: 5rem;
  }

  .case-portrait-card,.case-unofficial-portrait {
    grid-row: auto;
    width: 82%;
  }

  .case-asym-copy {
    padding-bottom: 2rem;
  }

  .case-asym-copy p,.case-sustain-note p {
    font-size: 1.85rem;
  }

  .case-wide-strip {
    aspect-ratio: 1.18;
    border-radius: 1rem;
  }

  .case-wide-strip img {
    object-position: center;
  }

  .case-video-shell {
    aspect-ratio: 16/9;
    border-radius: .75rem;
  }

  .case-video-wide {
    aspect-ratio: 24/11;
  }

  .case-video-shell video {
    object-position: center;
  }

  .case-video-label span:last-child {
    display: none;
  }

  .case-kids-grid {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }

  .case-original-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 5px;
  }

  .case-original-stack {
    grid-template-rows: none;
    gap: 5px;
  }

  .case-original-grid .case-media-frame,.case-original-grid .case-video-shell,.case-original-grid>*,.case-original-stack>* {
    height: auto;
  }

  .case-original-grid img,.case-original-grid video {
    height: auto;
    object-fit: contain;
  }

  .case-original-grid .case-video-shell {
    aspect-ratio: 16/9;
  }

  .case-media-block {
    margin-top: 5px;
  }

  .case-media-frame,.case-original-media {
    border-radius: .75rem;
  }

  .case-kids-main {
    grid-row: auto;
  }

  .case-kids-grid>figure,.case-kids-grid>figure:not(.case-kids-main) {
    aspect-ratio: 1.15;
  }

  .case-section-number {
    top: 4rem;
  }

  .case-sustain-grid figure:first-child {
    grid-row: auto;
  }

  .case-sustain-note {
    margin-top: 1rem;
  }

  .case-unofficial-grid {
    margin-top: 4rem;
  }

  .case-unofficial-bts,.case-unofficial-final {
    aspect-ratio: 1.08;
  }

  .case-outro {
    padding: 4rem 1rem 1.3rem;
  }

  .case-outro-back-top {
    display: none;
  }

  .case-project-nav {
    grid-template-columns: 1fr;
  }

  .case-project-card {
    height: 17rem;
    padding: 1.3rem;
    border-radius: 1.1rem;
  }

  .case-project-card h2 {
    font-size: clamp(2.5rem,12vw,4rem);
  }

  .case-project-card-title--long {
    font-size: clamp(2.2rem,10.4vw,3.65rem)!important;
  }

  .case-project-card-title--extra-long {
    font-size: clamp(1.95rem,8.8vw,3.2rem)!important;
  }

  .case-outro-footer {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .case-footer-links,.case-outro-footer>a {
    grid-column: 1;
  }

  .case-footer-links {
    justify-content: center;
    gap: .15rem 1rem;
  }

  .case-footer-links a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: .6rem .2rem;
    touch-action: manipulation;
  }

  .case-outro-footer {
    margin-top: 2.25rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .case-page *,.case-page :after,.case-page :before {
    scroll-behavior: auto!important;
    transition-duration: .01ms!important;
    animation-duration: .01ms!important;
  }

  .case-scroll-arrow {
    animation: none;
    transform: none;
  }
}

@media (max-width:760px) {
  .archive-original .structured-page .structured-block--half,.archive-original .structured-page .structured-block--three-quarter {
    width: 100%;
  }

  .archive-original .structured-page .detail-zoom__lens,.archive-original .structured-page .detail-zoom__toggle {
    display: none!important;
  }
}

/*  SECTION: Original-project layout foundation  */

.archive-case {
  --archive-accent: #b8cfdf;
  position: relative;
  background: radial-gradient(circle at 86% 20%,color-mix(in srgb,var(--archive-accent) 11%,transparent),transparent 30rem),#090a0b;
}

.archive-project-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #ececea;
}

.archive-project-background>.archive-project-background-black-overlay,.archive-project-background>div,.archive-project-background>i,.archive-project-background>video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.archive-project-background>div {
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.archive-project-background>video {
  display: block;
  object-fit: cover;
}

.archive-project-background>i {
  background: rgba(var(--archive-background-rgb,0,0,0),var(--archive-background-opacity,0));
}

.archive-project-background>.archive-project-background-black-overlay {
  background: rgba(0,0,0,var(--archive-background-black-overlay-opacity,0));
}

.archive-case>.archive-intro,.archive-case>.archive-work,.archive-case>.case-header,.archive-case>.case-hero,.archive-case>.case-outro {
  position: relative;
  z-index: 1;
}

.archive-case>.case-header {
  position: fixed;
  z-index: 500;
  isolation: isolate;
}

.archive-audio-sting {
  display: none;
}

.archive-hero-title h1 {
  max-width: 12ch;
  font-size: clamp(3.4rem,var(--archive-title-scale),8.8rem);
  line-height: .82;
}

.archive-case .archive-intro {
  background: #08090a;
  color: #eef0f2;
}

.archive-case .archive-intro .case-facts dt {
  color: rgba(238,240,242,.5);
}

.archive-case .archive-intro .case-facts,.archive-case .archive-intro .case-facts div {
  border-color: rgba(238,240,242,.18);
}

.archive-intro .case-lead {
  max-width: 61rem;
  color: rgba(238,240,242,.72);
  font-size: clamp(1.05rem,1.45vw,1.38rem);
  line-height: 1.55;
}

.archive-intro .case-lead em,.archive-intro .case-lead i {
  color: #f0f2f3;
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
  font-weight: 400;
}

.archive-intro .case-lead a,.archive-original a:not(.cta-button) {
  border-bottom: 1px solid;
}

@media (min-width:761px) {
  html:has(.case-page) {
    scroll-snap-type: y proximity;
  }

  .archive-work {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

.case-page #chapter-1,.case-page #work {
  scroll-margin-top: 0;
}

.archive-work {
  padding: 7rem clamp(1rem,4.5vw,5.5rem);
  background: #ececea;
  color: #111315;
}

.has-archive-background .archive-work {
  background: transparent;
}

.archive-dark-project .archive-work {
  background: #0b0d0f;
  color: #f0f2f3;
}

.archive-dark-project.has-archive-background .archive-work {
  background: transparent;
}

/*  SECTION: Original selected content  */

.archive-original,.archive-original .page-section,.archive-original>.page-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

.archive-original .container {
  width: min(100%,73.125rem);
  max-width: 73.125rem;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.archive-original .project-subtitle,.archive-original .project-title,.archive-original .section-text:empty {
  display: none;
}

.archive-original .section-text {
  display: block;
}

.archive-original .container:has(.section-text)+.container {
  margin-top: 2.5rem;
}

.archive-original .sub-project-title,.archive-original h2 {
  max-width: 14ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem,4.3vw,5.2rem);
  font-weight: 430;
  letter-spacing: -.06em;
  line-height: .92;
}

.archive-original h3 {
  max-width: 48rem;
  margin: 0;
  color: color-mix(in srgb,currentColor 68%,transparent);
  font-size: clamp(1.05rem,1.55vw,1.45rem);
  font-weight: 400;
  line-height: 1.5;
}

.archive-original .section-description {
  max-width: 48rem;
}

.archive-original .section-description p {
  max-width: none;
  margin: 0;
  color: color-mix(in srgb,currentColor 68%,transparent);
  font-size: clamp(1.05rem,1.55vw,1.45rem);
  font-weight: 400;
  line-height: 1.5;
}

.archive-original .section-description p+p {
  margin-top: 1.15em;
}

.archive-original p {
  max-width: 44rem;
  color: color-mix(in srgb,currentColor 68%,transparent);
  font-size: .98rem;
  line-height: 1.65;
}

.archive-original em,.archive-original i {
  font-family: Iowan Old Style,Baskerville,Times New Roman,serif;
}

.archive-original .visual,.archive-original [class*=media-],.archive-original figure {
  position: relative;
}

.archive-original .visual,.archive-original figure:not(.case-study-mood-board__visual):not(.case-study-rationale__visual) {
  margin: 0 0 15px;
}

.archive-original img,.archive-original video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
}

.case-page.media-loading-enabled .archive-original .media-loading-container {
  position: relative;
  background-color: #f1f1ef;
  transition: background-color .36s ease;
}

.case-page.media-loading-enabled.archive-dark-project .archive-original .media-loading-container {
  background-color: #111315;
}

.case-page.media-loading-enabled .archive-original .media-loading-container.media-ready,.case-page.media-loading-enabled .archive-original .media-loading-container.media-transparent {
  background-color: transparent;
}

.case-page.media-loading-enabled .archive-original .media-loading-container.media-error {
  background-color: #f1f1ef;
}

.case-page.media-loading-enabled.archive-dark-project .archive-original .media-loading-container.media-error {
  background-color: #111315;
}

.case-page.media-loading-enabled .archive-original .media-loading-container>img:not(.media-loaded) {
  opacity: 0;
}

.case-page.media-loading-enabled .archive-original .media-loading-container>img.media-loaded {
  animation: archive-media-fade-in .38s ease both;
}

@keyframes archive-media-fade-in {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.case-page.media-loading-enabled .archive-original .media-status {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease,visibility 0s linear .22s;
}

.case-page.media-loading-enabled .archive-original .media-status__label {
  max-width: calc(100% - 2rem);
  padding: .58rem .8rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: .55rem;
  background: rgba(255,255,255,.82);
  color: #111315;
  box-shadow: 0 .25rem 1.1rem rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.35;
  text-align: center;
}

.case-page.media-loading-enabled .archive-original .media-video-container .media-status__label {
  padding: .72rem 1.2rem;
  border-color: rgba(255,255,255,.88);
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: .72rem;
  letter-spacing: .03em;
}

.case-page.media-loading-enabled .archive-original .media-loading-container.media-error .media-status,.case-page.media-loading-enabled .archive-original .media-loading-container.media-slow .media-status {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease,visibility 0s linear 0s;
}

.case-page.media-loading-enabled .archive-original .media-loading-container.media-ready .media-status {
  opacity: 0;
  visibility: hidden;
}

.case-page.media-loading-enabled .archive-original .media-loading-container.media-error>img,.case-page.media-loading-enabled .archive-original .media-loading-container.media-error>video {
  opacity: 0;
}

.archive-original .rounded-corner,.archive-original .rounded-corner img,.archive-original .rounded-corner video {
  overflow: hidden;
  border-radius: 1.4rem;
}

.archive-original iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
}

.archive-original .youtube-embed {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.archive-original .youtube-embed iframe {
  position: absolute;
  inset: 0;
  height: 100%;
}

.archive-original .row {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 15px;
  align-items: start;
}

.archive-original .row>[class*=col-] {
  grid-column: 1/-1;
}

.archive-original .case-study-brief__row>.col-md-7 {
  grid-column: span 7;
}

.archive-original .case-study-brief__row>.col-md-5 {
  grid-column: span 5;
}

@media (prefers-reduced-motion:reduce) {
  .case-page.media-loading-enabled .archive-original .media-loading-container,.case-page.media-loading-enabled .archive-original .media-status {
    transition: none;
  }

  .case-page.media-loading-enabled .archive-original .media-loading-container>img.media-loaded {
    animation: none;
  }
}

.archive-original .visual-grid {
  --vg-gap: 15px;
  --vg-height: auto;
  display: grid;
  grid-template-columns: minmax(0,var(--vg-left,1fr)) minmax(0,var(--vg-right,1fr));
  gap: var(--vg-gap);
  width: 100%;
  height: var(--vg-height);
  margin-bottom: 15px;
}

.archive-original .visual-grid__left,.archive-original .visual-grid__left_stack,.archive-original .visual-grid__right_stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--vg-gap);
  min-height: 0;
}

.archive-original .visual-grid__left_solo,.archive-original .visual-grid__left_tall,.archive-original .visual-grid__right,.archive-original .visual-grid__right_tall {
  min-height: 0;
}

.archive-original .visual-grid .visual,.archive-original .visual-grid-3 .visual {
  min-height: 0;
  margin: 0;
}

.archive-original .visual-grid[style*="--vg-height"] .visual,.archive-original .visual-grid[style*="--vg-height"] img,.archive-original .visual-grid[style*="--vg-height"] video,.archive-original .visual-grid[style*="--vg-height"]>* {
  height: 100%;
}

.archive-original .visual-grid[style*="--vg-height"] img,.archive-original .visual-grid[style*="--vg-height"] video {
  width: 100%;
  object-fit: cover;
}

.archive-original .visual-grid-3 {
  --vg-gap: 15px;
  --vg-height: auto;
  display: grid;
  grid-template-columns: minmax(0,var(--vg-1,1fr)) minmax(0,var(--vg-2,1fr)) minmax(0,var(--vg-3,1fr));
  gap: var(--vg-gap);
  width: 100%;
  height: var(--vg-height);
  margin-bottom: 15px;
}

.archive-original .visual-grid-3[style*="--vg-height"] .visual,.archive-original .visual-grid-3[style*="--vg-height"] img,.archive-original .visual-grid-3[style*="--vg-height"] video,.archive-original .visual-grid-3[style*="--vg-height"]>* {
  height: 100%;
}

.archive-original .visual-grid-3 img,.archive-original .visual-grid-3 video {
  object-fit: cover;
}

.archive-original .campaign-pill-grid,.archive-original .campaign-pill-videos,.archive-original .case-study-campaign__pills,.archive-original .image-row,.archive-original .visual-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
}

.archive-original .case-study-brief__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-original .case-study-brief__visual img {
  max-width: 22.5rem;
}

.archive-original .case-study-mood-board__visual,.archive-original .case-study-rationale__visual {
  margin: 2rem 0 0;
}

.archive-original .campaign-pill-video {
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: 0;
  background: #08090a;
}

.archive-original .campaign-video {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 0;
  background: #08090a;
}

.archive-original .campaign-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-original .campaign-pill {
  min-width: 0;
  margin: 0;
}

.archive-original .video-edge-fix {
  overflow: hidden;
  border-radius: 0;
}

.archive-original .video-edge-fix video {
  width: calc(100% + 2px);
  max-width: none;
  margin-left: -1px;
}

.archive-original .campaign-pill-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-original .campaign-pill__caption {
  margin-top: .55rem;
  color: color-mix(in srgb,currentColor 56%,transparent);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.archive-original .cta-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.7rem;
  margin-top: .6rem;
  padding: .7rem 1rem;
  border: 1px solid;
  border-radius: 999px;
  color: inherit;
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.archive-original .js-controlled-video,.archive-original .js-video-with-sound,.archive-original .video-with-sound {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: 0;
}

.archive-original .js-controlled-video video,.archive-original .js-video-with-sound video,.archive-original .video-with-sound video {
  background: #121416;
}

.archive-original .campaign-video__hint,.archive-original .js-video-with-sound-hint {
  position: absolute;
  z-index: 2;
  right: 1.1rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(8,9,10,.42);
  color: #fff;
  backdrop-filter: blur(16px);
  font-size: .61rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: opacity .35s ease;
}

.archive-original .campaign-video__hint i:before,.archive-original .js-video-with-sound-hint i:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: .28rem solid transparent;
  border-bottom: .28rem solid transparent;
  border-left: .44rem solid;
}

.archive-original .is-playing .campaign-video__hint,.archive-original .is-playing .js-video-with-sound-hint {
  opacity: 0;
}

.archive-subchapter {
  --archive-section-clear-plain: clamp(1.75rem,2.6vw,2.75rem);
  --archive-section-clear-framed: clamp(2.75rem,4.2vw,4rem);
  --archive-section-gap-plain: 0rem;
  --archive-section-gap-framed: 1.25rem;
  --archive-section-clear: var(--archive-section-clear-plain);
  --archive-section-gap: var(--archive-section-gap-plain);
  display: flow-root;
  width: 100%;
  margin: 0 auto var(--archive-section-gap);
  padding: 0 clamp(1.25rem,4.5vw,5.5rem);
  border-width: var(--archive-section-outline-width,0);
  border-style: solid;
  border-color: color-mix(in srgb,currentColor var(--archive-section-outline-opacity,9%),transparent);
  border-radius: 1.8rem;
  background: transparent;
  color: inherit;
  scroll-margin-top: 5.5rem;
}

@media (min-width:761px) {
  .archive-work:has(>.archive-original>.archive-subchapter:first-child .section-text),.archive-work:has(>.archive-original>.page-section>.archive-subchapter:first-child .section-text) {
    padding-top: var(--archive-first-section-top,2rem);
  }
}

.archive-subchapter>:first-child {
  margin-top: var(--archive-section-clear)!important;
}

.archive-subchapter>:last-child {
  margin-bottom: var(--archive-section-clear)!important;
}

.archive-subchapter .container:has(.section-text)+.container {
  margin-top: var(--archive-section-clear);
}

.archive-subchapter .intro-heading,.archive-subchapter .section-text h3,.archive-subchapter .section-text p {
  width: 100%;
  max-width: none;
}

.project-byredo .archive-subchapter .case-study-brief__title,.project-byredo .archive-subchapter .case-study-section__title {
  width: 100%;
  max-width: none;
  margin-bottom: var(--archive-section-clear);
  letter-spacing: -.02em;
}

/*  SECTION: Project-specific section colors  */

.project-byredo-section-1 {
  --archive-section-clear: var(--archive-section-clear-framed);
  --archive-section-gap: var(--archive-section-gap-framed);
  background: #f9f9f9;
  color: #111315;
}

.project-byredo-section-2 {
  background: transparent;
}

.project-byredo-section-3 {
  --archive-section-clear: clamp(3.5rem,5.2vw,5rem);
  --archive-section-gap: var(--archive-section-gap-framed);
  background: #f9f9f9;
  color: #111315;
}

.project-byredo-section-4,.project-byredo-section-5,.project-essilorluxottica-section-1,.project-essilorluxottica-section-2,.project-essilorluxottica-section-3,.project-essilorluxottica-section-4,.project-nikon-lenswear-section-1,.project-nikon-lenswear-section-2,.project-nikon-lenswear-section-3,.project-nikon-lenswear-section-4,.project-nikon-lenswear-section-5,.project-vibe-coding-section-1,.project-vibe-coding-section-2,.project-vibe-coding-section-3,.project-vibe-coding-section-4 {
  background: transparent;
}

.project-byredo .archive-subchapter .case-study-rationale__body,.project-byredo .archive-subchapter .case-study-rationale__body p {
  width: 100%;
  max-width: none;
}

.project-byredo .archive-subchapter .case-study-rationale__body p {
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.project-byredo .archive-subchapter .case-study-rationale__body p:last-child {
  margin-bottom: 0;
}

.project-byredo .archive-subchapter .case-study-mood-board__visual {
  margin-top: 0;
}

.project-byredo .archive-subchapter .case-study-rationale__visual {
  margin-top: var(--archive-section-clear);
}

.project-byredo .case-study-brief__row {
  align-items: stretch;
  column-gap: clamp(1.5rem,2.4vw,2.75rem);
}

.project-byredo .case-study-brief__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-byredo .case-study-brief__body p {
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.project-byredo .case-study-brief__body p:last-child {
  margin-bottom: 0;
}

@media (min-width:992px) {
  .project-byredo .case-study-brief__copy {
    padding-right: clamp(1rem,2vw,1rem);
  }
}

.project-byredo .case-study-brief__visual img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

.archive-copy-sections .archive-subchapter .section-text {
  margin-top: 0!important;
  margin-bottom: 0!important;
}

@media (min-width:761px) {
  .archive-copy-sections {
    --archive-first-section-top: 7rem;
  }

  .archive-copy-sections .archive-work {
    padding-bottom: 7rem;
  }

  .archive-copy-sections .archive-subchapter:first-child>:first-child {
    margin-top: 0!important;
  }

  .archive-copy-sections .archive-subchapter:not(:first-child)>:first-child {
    margin-top: 1.875rem!important;
  }

  .archive-copy-sections .archive-subchapter>:last-child {
    margin-bottom: 0!important;
  }
}

.archive-copy-sections .archive-subchapter .container:has(.section-text)+.container {
  margin-top: .9375rem;
}

.project-vibe-coding .archive-subchapter .section-text p.intro-heading {
  margin: 1.75rem 0 0;
}

.project-vibe-coding .archive-subchapter .section-text {
  margin-top: 0!important;
  margin-bottom: 0!important;
}

.project-vibe-coding .archive-subchapter .cta-button {
  margin-top: 0;
  transition: background-color .18s ease,border-color .18s ease,color .18s ease;
}

.project-vibe-coding .archive-subchapter .cta-button:focus-visible,.project-vibe-coding .archive-subchapter .cta-button:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #101214;
}

@media (max-width:991px) {
  .archive-original .visual-grid {
    grid-template-columns: 1fr;
    height: auto!important;
  }

  .archive-original .visual-grid__left,.archive-original .visual-grid__left_stack,.archive-original .visual-grid__right_stack {
    grid-template-rows: none;
  }

  .archive-original .visual-grid[style*="--vg-height"] .visual,.archive-original .visual-grid[style*="--vg-height"] img,.archive-original .visual-grid[style*="--vg-height"] video,.archive-original .visual-grid[style*="--vg-height"]>* {
    height: auto;
  }

  .archive-original .visual-grid-3 {
    --vg-height: 150px;
    --vg-gap: 6px;
    height: 150px!important;
  }
}

@media (max-width:760px) {
  .archive-hero-title h1 {
    max-width: 10ch;
    font-size: var(--case-mobile-title-size,clamp(3rem,14vw,5.8rem));
  }

  .archive-work {
    padding: 3.5rem .65rem 4rem;
  }

  .archive-original .container {
    width: calc(100% - .7rem);
  }

  .archive-original .case-study-brief__row,.archive-original .row {
    grid-template-columns: 1fr;
  }

  .archive-original .case-study-brief__row>.col-md-5,.archive-original .case-study-brief__row>.col-md-7 {
    grid-column: 1;
  }

  .archive-original {
    --archive-mobile-media-gap: 5px;
  }

  .archive-original .campaign-pill-grid,.archive-original .campaign-pill-videos,.archive-original .case-study-campaign__pills,.archive-original .image-row,.archive-original .visual-row {
    grid-template-columns: 1fr;
    gap: var(--archive-mobile-media-gap)!important;
  }

  .archive-original .image-row>*,.archive-original .visual-row>* {
    margin-bottom: 0!important;
  }

  .archive-original .image-row,.archive-original .visual-grid,.archive-original .visual-grid-3,.archive-original .visual-row {
    margin-bottom: var(--archive-mobile-media-gap)!important;
  }

  .archive-original .visual-grid {
    --vg-gap: var(--archive-mobile-media-gap)!important;
  }

  .archive-original .visual-grid,.archive-original .visual-grid-3,.archive-original .visual-grid__left,.archive-original .visual-grid__left_stack,.archive-original .visual-grid__right_stack {
    gap: var(--archive-mobile-media-gap)!important;
  }

  .archive-original .visual-grid-3 {
    --vg-gap: var(--archive-mobile-media-gap)!important;
    grid-template-columns: 1fr;
    height: auto!important;
  }

  .archive-original .structured-page>.container {
    width: 100%;
  }

  .archive-original .visual-grid-3[style*="--vg-height"] .visual,.archive-original .visual-grid-3[style*="--vg-height"] img,.archive-original .visual-grid-3[style*="--vg-height"] video,.archive-original .visual-grid-3[style*="--vg-height"]>* {
    height: auto;
  }

  .archive-original .campaign-video {
    aspect-ratio: 9/16;
    margin-bottom: 5px;
    border-radius: 0;
  }

  .archive-original .visual,.archive-original .visual-grid,.archive-original figure:not(.case-study-mood-board__visual):not(.case-study-rationale__visual) {
    margin-bottom: 5px;
  }

  .archive-original iframe,.archive-original img,.archive-original video {
    border-radius: 0;
  }

  .archive-original .rounded-corner,.archive-original .rounded-corner img,.archive-original .rounded-corner video,.archive-subchapter {
    border-radius: 1.1rem;
  }

  .archive-subchapter {
    --archive-section-clear-plain: 2rem;
    --archive-section-clear-framed: 2.5rem;
    --archive-section-gap-plain: .75rem;
    --archive-section-gap-framed: 1.25rem;
    --archive-section-clear: var(--archive-section-clear-plain);
    --archive-section-gap: var(--archive-section-gap-plain);
    padding: 0 .65rem;
  }

  .archive-multi-first-plain .archive-work {
    padding-top: var(--archive-first-section-top-mobile,2rem);
  }

  .archive-multi-first-plain .archive-subchapter:first-child>:first-child {
    margin-top: 0!important;
  }

  .archive-copy-sections .archive-subchapter:not(:last-child) {
    margin-bottom: 0;
  }

  .archive-copy-sections .archive-subchapter:not(:last-child)>:last-child {
    margin-bottom: 0!important;
  }

  .archive-multi-sections .archive-subchapter:last-child {
    margin-bottom: 0;
  }

  .archive-multi-sections .archive-subchapter:last-child>:last-child {
    margin-bottom: 0!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .archive-project-background>video {
    display: none;
  }
}