@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800;900&family=Aref+Ruqaa:wght@700&display=swap");
.nk-card, .nk-project {
  --nk-red: #602010;
  --nk-olive: #808040;
  --nk-cream: #f0f0e0;
  --nk-gold: #d09020;
  color: var(--nk-red);
  font-family: Barlow, "Segoe UI", sans-serif;
}
.nk-project { margin: 0; background: var(--nk-cream); }
.nk-project *, .nk-card * { box-sizing: border-box; }
.nk-project img, .nk-card img { display: block; max-width: 100%; height: auto; }
.nk-nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px clamp(15px,6vw,90px); background: var(--nk-red); color: var(--nk-cream); }
.nk-nav a { color: inherit; text-decoration: none; font-weight: 800; }
.nk-hero, .nk-section, .nk-visit { padding: clamp(28px,6vw,85px) max(5vw,16px); }
.nk-hero, .nk-identity, .nk-apps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: clamp(18px,5vw,60px); }
.nk-hero { background: #e5e4c7; border-bottom: 6px solid var(--nk-gold); }
.nk-hero > img { width: min(100%,520px); justify-self: center; border: 4px double var(--nk-red); }
.nk-project h1, .nk-project h2, .mc-collection .nk-card h3 {
  margin: 7px 0 12px; color: inherit; font: 900 clamp(40px,8.5vw,116px)/.88 Barlow,"Segoe UI",sans-serif; letter-spacing: -.06em; text-transform: none;
}
.nk-project h2 { font-size: clamp(32px,5vw,70px); }
.nk-project h1 em, .nk-card h3 em { color: #767633; font-style: normal; }
.nk-kicker { margin: 0; font: 800 clamp(10px,1.2vw,13px)/1.3 Barlow,sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.nk-ar { width: fit-content; margin: 11px 0; font: 700 clamp(19px,2.7vw,32px)/1.4 "Aref Ruqaa",Tahoma,serif; }
.nk-hero p:not([class]) { max-width: 44ch; font-size: clamp(15px,1.8vw,20px); }
.nk-project .nk-button, .mc-collection .nk-card .nk-button {
  display: inline-flex; align-items: center; gap: 13px; min-height: 42px; padding: 8px 13px;
  background: var(--nk-red); color: var(--nk-cream); border: 1px solid var(--nk-red); border-radius: 3px;
  text-decoration: none; font: 800 14px/1.25 Barlow,"Segoe UI",sans-serif;
}
.nk-project .nk-button:hover, .mc-collection .nk-card .nk-button:hover { background: var(--nk-cream); color: var(--nk-red); }
.nk-project figure { margin: 0; min-width: 0; }
.nk-project figcaption { margin-top: 7px; font-weight: 800; }
.nk-section + .nk-section { border-top: 1px solid #60201044; }
.nk-identity, .nk-apps, .nk-videos { margin-top: 25px; }
.nk-identity img { border: 1px solid var(--nk-red); }
.nk-apps { align-items: start; }
.nk-apps img { width: 100%; aspect-ratio: 1.45; object-fit: contain; background: #e5e4c7; }
.nk-swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 10px 0 0; padding: 0; list-style: none; }
.nk-swatches li { padding: 8px 3px; text-align: center; background: var(--nk-red); color: #fff; font-weight: 700; font-size: clamp(10px,1.5vw,14px); }
.nk-swatches li:nth-child(2) { background: var(--nk-olive); color: #201e0c; }
.nk-swatches li:nth-child(3) { background: var(--nk-cream); color: var(--nk-red); border: 1px solid #60201044; }
.nk-swatches li:nth-child(4) { background: var(--nk-gold); color: #361408; }
.nk-motion { background: #e5e4c7; }
.nk-videos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(7px,2vw,22px); max-width: 780px; }
.nk-videos video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 5px; background: #28140d; }
.nk-visit { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mc-collection .nk-card {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); align-items: center;
  overflow: hidden; margin: 18px 0; border: 1px solid var(--nk-gold); border-radius: 8px;
  background: var(--nk-cream); scroll-margin-top: 100px;
}
.nk-card[hidden] { display: none !important; }
.nk-card-copy { padding: clamp(12px,4vw,55px); }
.mc-collection .nk-card h3 { font-size: clamp(29px,6.7vw,92px); }
.mc-collection .nk-card-art { width: 100%; height: 100%; max-height: 380px; object-fit: cover; }
@media(max-width: 600px) {
  .nk-hero, .nk-identity, .nk-apps { grid-template-columns: 1fr; }
  .nk-visit { flex-wrap: wrap; }
  .mc-collection .nk-card .nk-button { gap: 4px; padding-inline: 6px; font-size: 12px; }
}

.nk-project > main { padding-top: 104px; }
.nk-motion figure { position: relative; transition: transform .24s ease; }
.nk-motion figure:hover, .nk-motion figure:focus-within { transform: translateY(-5px); }
.nk-motion video { box-shadow: 0 7px 20px #60201038; }
.nk-motion figure.nk-reveal { animation: nk-reel-enter .55s cubic-bezier(.2,.7,.3,1) both; }
.nk-motion figure.nk-reveal:nth-child(2) { animation-delay: 95ms; }
.nk-motion figure.nk-reveal:nth-child(3) { animation-delay: 190ms; }
@keyframes nk-reel-enter {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 700px) { .nk-project > main { padding-top: 78px; } }
@media (prefers-reduced-motion: reduce) {
  .nk-motion figure { transition: none; }
  .nk-motion figure:hover, .nk-motion figure:focus-within { transform: none; }
  .nk-motion figure.nk-reveal { animation: none; }
}