@import url("design-system/tokens.css");

/* R48 — client-facing opening: visible falcon, native-ratio proof, then live space. */
.hero-copy, .hero-meta, .eyebrow, .scroll-cue { position: relative; z-index: 1; }
.hero-falcon {
  position: absolute;
  z-index: 0;
  top: clamp(6rem, 13vh, 10rem);
  right: clamp(var(--ds-portfolio-grid-gap), 6vw, var(--ds-portfolio-pause-space));
  display: grid;
  place-items: center;
  width: min(35vw, 33rem);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ember) 52%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ds-portfolio-ember) 16%, transparent), color-mix(in srgb, var(--ds-portfolio-navy) 58%, var(--ds-portfolio-ink)));
  box-shadow: 0 0 var(--ds-portfolio-pause-space) color-mix(in srgb, var(--ds-portfolio-ember) 16%, transparent);
  pointer-events: none;
}
.hero-falcon::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 46%, transparent 46%, color-mix(in srgb, var(--ds-portfolio-ink) 62%, transparent) 100%); }
.hero-falcon img { width: 102%; max-width: none; height: 102%; object-fit: contain; object-position: 50% 54%; filter: drop-shadow(0 0 calc(var(--ds-portfolio-grid-gap) * 1.25) color-mix(in srgb, var(--ds-portfolio-ember) 30%, transparent)); }
.artwork-preview { position: relative; display: grid; grid-template-columns: minmax(17rem, .56fr) minmax(0, 1.44fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--ds-portfolio-pause-space); overflow: hidden; }
.artwork-preview > .section-mark { grid-column: 1 / -1; }
.artwork-preview__intro { align-self: center; }
.artwork-preview__intro h2 { font-family: "Instrument Serif Local", var(--ds-portfolio-display-font); font-size: var(--ds-portfolio-proposal-type-display); font-weight: var(--ds-portfolio-proposal-weight-editorial); letter-spacing: var(--ds-portfolio-editorial-tracking); line-height: var(--ds-portfolio-editorial-leading); }
.artwork-preview__intro p { max-width: var(--ds-portfolio-body-measure); margin-top: var(--ds-portfolio-grid-gap); color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.artwork-preview__renders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-portfolio-grid-gap); align-self: center; }
.artwork-preview__renders figure { margin: 0; }
.artwork-preview__renders img { width: 100%; height: clamp(15rem, 39vh, 27rem); object-fit: cover; border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 24%, transparent); background: var(--ds-portfolio-panel); }
.artwork-preview__renders figcaption { display: grid; gap: calc(var(--ds-portfolio-grid-gap) / 2); padding-top: var(--ds-portfolio-grid-gap); }
.artwork-preview__renders span { color: var(--ds-portfolio-ember); font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font); font-size: var(--ds-portfolio-meta-size); letter-spacing: var(--ds-portfolio-meta-tracking); text-transform: uppercase; }
.artwork-preview__renders strong { font-size: var(--ds-portfolio-proposal-type-row); font-weight: var(--ds-portfolio-proposal-weight-functional); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.artwork-preview__renders small { color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-meta-size); line-height: var(--ds-portfolio-meta-leading); }
@media (min-width: 60.0625rem) { .journey > .artwork-preview { width: 132vw; } }
@media (max-width: 60rem) {
  .hero-falcon { top: clamp(7rem, 18vh, 10rem); right: calc(var(--ds-portfolio-gutter) * -.2); width: min(58vw, 28rem); opacity: .82; }
  .artwork-preview { grid-template-columns: 1fr; gap: var(--ds-portfolio-pause-space); }
  .artwork-preview__renders img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 38rem) {
  .hero-falcon { top: 8rem; right: calc(var(--ds-portfolio-gutter) * -.45); width: 76vw; opacity: .48; }
  .artwork-preview__renders { grid-template-columns: 1fr; }
}