/* Atlas & Ivy case study. Prototyped in css/atlas-ivy-lab.css. */

.case-study.atlas {
  --case-accent: #7fa338;   /* matcha foam, sampled from the pour shots */
  --case-paper: #eceadb;    /* oat */
  --case-ink: #22280f;
  --ai-deep: #2b360c;       /* deep matcha, from the backlit pour */
}

/* theme-carnival re-declares --case-paper on every [class*="case-"] element
   itself, so setting it on the ancestor above never reaches the stages.
   This has to outrank `.theme-carnival [class*="case-"]` (0,2,0). */
.theme-carnival .atlas [class*="case-"] {
  --case-paper: #eceadb;
  --case-ink: #22280f;
}

/* Deep green stage, warmer than the stock near-black */
.atlas .case-stage.deep {
  background: var(--ai-deep);
  color: #eceadb;
}

/* Logo lockups sit as images rather than type */
.atlas .case-lockup {
  display: grid;
  place-items: center;
  width: 100%;
}
.atlas .case-lockup img {
  width: min(660px, 78%);
  height: auto;
  object-fit: contain;
}
.atlas .case-lockup.mark img { width: clamp(150px, 22vw, 300px); }

/* The supplied logos are black PNGs, so flip them on dark grounds */
.atlas .case-stage.deep .case-lockup img,
.atlas .case-stage.dark .case-lockup img {
  filter: invert(1);
}

.atlas .case-lockup small {
  display: block;
  margin-top: 26px;
  font-family: "Space Mono", monospace;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.72;
}

/* Palette board, matching the sampled colours */
.atlas .brand-board { background: var(--case-paper); color: var(--case-ink); }
.atlas .brand-board i { border: 1px solid rgba(34, 40, 15, 0.12); }

/* Portrait source files crop better with a taller frame in the collage */
.atlas .case-collage .case-media { min-height: clamp(340px, 44vw, 660px); }

/* The bag design is a composed 16:9 layout rather than a photo to crop, so it
   overrides .case-media's min-height and keeps its own ratio exactly. */
.atlas .case-media.artwork {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* The identity's type is a geometric sans, so the board should not show the
   site's default serif against the real lockup. */
.atlas .brand-board strong {
  font-family: var(--sans-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.atlas .brand-board .bb-lockup {
  width: min(460px, 70%);
  height: auto;
  object-fit: contain;
}

/* Hero carries the stacked lockup instead of set type. The supplied PNG is
   black, so brightness(0) forces it flat before invert takes it to pure white
   (safer than invert alone if the asset is ever re-exported off-black). */
.hero-lockup .work-hero-mark { align-content: center; }
.hero-lockup .hero-mark-img {
  /* `.work-hero img` pins every image in the hero to position:absolute;inset:0
     for the background photo, which would drag the lockup into the corner. */
  position: static;
  width: clamp(250px, 35vw, 580px);
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 26px rgba(0, 0, 0, 0.3));
}
.hero-lockup .work-hero-mark small { margin-top: 28px; }

/* Primary lockup sits over a looping clip at full strength. .case-stage has no
   position of its own, so it needs one before the video can be pinned behind. */
.atlas .case-stage.stage-loop {
  position: relative;
  color: #eceadb;
}
.atlas .stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atlas .case-stage.stage-loop .case-lockup {
  position: relative;
  z-index: 1;
}
/* Reversed out over the footage, the same way the hero handles the black PNG. */
.atlas .case-stage.stage-loop .case-lockup img {
  filter: brightness(0) invert(1) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.5));
}
/* The default 0.72 caption disappears against the lit patches of the wood. */
.atlas .case-stage.stage-loop .case-lockup small {
  opacity: 0.92;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}