/* Shared project navigation and artwork layout for Creative Explorations. */
.creative-project { background: #fff; }
.creative-project.creative-dark {
  --ink: #fff;
  --muted: #fff;
  --line: #ffffff38;
  background: #000;
  color: var(--ink);
}
.creative-project .lab-nav { position: relative; background: #fff; }
.creative-project.creative-dark .lab-nav,
.creative-dark .creative-switch { background: #000; color: #fff; }
.creative-dark .lab-nav .lab-brand { color: #fff; background: none; }
.creative-dark .lab-nav { --nav-cv-ink: #fff; --nav-pill: #252525; --nav-pill-hover: #414141; }

.creative-switch.project-switch {
  padding: 0;
}
.creative-switch-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: min(100%, 1440px);
  padding: 12px clamp(24px, 8.333vw, 120px);
}
.creative-return, .creative-tabs { display: flex; gap: clamp(16px, 2.5vw, 42px); }
.creative-dark .creative-switch a[aria-current] { color: #fff; }
.creative-dark .creative-switch a[aria-current]::after { background: #fff; }
.creative-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.creative-project .creative-board { width: 1440px; height: auto; }
.creative-board .creative-board-content {
  position: relative;
  top: auto;
  padding: 56px 0 0;
}
.creative-project .creative-poster {
  position: relative;
  inset: auto;
  width: min(1440px, 100%);
  height: auto;
  margin-inline: auto;
}
.creative-project .creative-poster img { position: static; width: 100%; height: auto; }
.creative-project .creative-section {
  /* Override the original homepage's fixed-width section rule. */
  width: 100% !important;
  max-width: none;
}
.creative-project:not(.creative-dark) .creative-section {
  background: radial-gradient(ellipse at 20% 70%, #fbf5f7, transparent 65%),
              radial-gradient(ellipse at 85% 80%, #f3f8f8, transparent 55%);
}
.creative-dark .creative-section .creative-guide span,
.creative-dark .exploration-number,
.creative-dark .email-link:hover { color: var(--ink); }
.creative-dark .gallery-progress { background: var(--line); }
.creative-dark .gallery-progress span { background: #fff; }
.exploration:focus-visible { outline: 2px solid #78aed0; outline-offset: 5px; }
@media (max-width: 760px) {
  .creative-switch-inner { padding: 9px 16px; gap: 14px; }
  .creative-return, .creative-tabs { gap: 14px; }
  .creative-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .creative-return { flex: none; }
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/creative/fonts/playfair.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/creative/fonts/playfair-italic.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Cedarville Cursive';
  src: url('assets/creative/fonts/cedarville.ttf') format('truetype');
  font-display: swap;
}
.creative-poster { aspect-ratio: var(--poster-ratio); overflow: hidden; }
.creative-project .creative-poster img { height: 100%; object-fit: cover; }
.creative-board-content [data-node-id="94:4867"],
.creative-board-content [data-node-id="94:4907"],
.creative-board-content [data-node-id="95:5072"] {
  -webkit-text-stroke: .6px #6b5959;
}
@media (max-width: 760px) {
  .creative-tabs { gap: 8px; }
  .creative-tabs a:focus-visible { outline-offset: -2px; }
}

/* Keep the Figma title treatment consistent across the editorial projects. */
.creative-board-content :is(
  [data-node-id="94:4867"], [data-node-id="94:4935"], [data-node-id="94:4936"],
  [data-node-id="94:4914"], [data-node-id="94:4915"], [data-node-id="95:5104"],
  [data-node-id="95:5104"] + p
) { -webkit-text-stroke: .6px #6b5959; }
[data-creative-project="illustration"] :is(
  [data-node-id="94:4859"], [data-node-id="94:4858"],
  [data-node-id="94:4935"], [data-node-id="94:4936"]
) { text-align: left; }
[data-creative-project="illustration"] [data-node-id="94:4867"] { width: 100%; }
[data-creative-project="illustration"] .creative-board
  :is(img, [data-name]) { border-radius: 0; }
.creative-board :is([data-node-id="94:4880"],[data-node-id="95:4958"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 72px;
  height: auto;
}
.creative-board [data-node-id="94:4880"] > div {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 507;
}
.creative-board [data-node-id="95:4974"] { gap: 72px; }
.creative-board [data-node-id="94:4868"] { height: auto; }

.creative-poster-gallery { width: 1200px; max-width: 100%; }
.creative-poster-gallery .gallery-viewport { width: 100%; }
.creative-poster-gallery .gallery-track { gap: 24px; padding: 0 0 12px; }
.creative-poster-gallery .gallery-progress { margin-top: 8px; }

/* Keep the artwork centered while each opening backdrop spans the screen. */
.creative-project .creative-backdrop {
  width: 100%;
  height: clamp(480px, 62.5vw, 900px);
  overflow: clip;
  pointer-events: none;
  mask-image: linear-gradient(#000 65%, transparent);
}
.creative-project .creative-board { background: transparent; }
.creative-board :is([data-node-id="95:5059"], [data-node-id="94:4915"], [data-node-id="95:5103"]) {
  text-align: right;
}
.creative-board :is([data-node-id="95:5087"], [data-node-id="95:5145"]) {
  line-height: 1.25;
  padding-block: .1em;
  opacity: .5;
}

.creative-video-link {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.creative-video-link:hover,
.creative-video-link:focus-visible {
  outline: 2px solid #78aed0;
  outline-offset: 3px;
}