/**
 * CLAWOLF Art V4 — column align (cache-bust filename 2026-08-06)
 *
 * Root cause of Market Shift / chapter drift:
 *   cinematic used min(100% - 2rem, 1440px)  → left ~16px @1440
 *   .d1r2-shell used min(100% - 2*gutter, 76rem) → left ~112px @1440
 *
 * Fix: one rail formula for intro, cinematic, shells, figures.
 * Route pages widen --d1r2-max to 1440 so copy joins the master image.
 * Homepage keeps 76rem rail; kills hero translateX and pulls paw inward.
 *
 * NOTE: previous art-v4-placement.css is immutable-cached for 1y on CDN —
 * this new filename must be linked from HTML (do not rely on the old URL).
 */

.art-v4-active {
  --art-v4-radius: 0.75rem;
  --art-v4-ink: #08122a;
  --art-v4-muted: #475569;
  --art-v4-edge: rgba(8, 18, 42, 0.1);
  --art-v4-cobalt: #2f4ac4;
  /* Identical math to .d1r2-shell */
  --art-v4-rail: min(100% - (var(--d1r2-gutter, 2rem) * 2), var(--d1r2-max, 76rem));
}

/* Route pages: expand editorial max so chapters meet the wide master */
.art-v4-active:not(.art-v4-home) {
  --d1r2-max: min(92rem, 1440px);
}

.art-v4-active .art-v3-route-stage {
  display: block;
  width: var(--art-v4-rail);
  margin-inline: auto;
  grid-template-columns: none;
}

.art-v4-intro {
  width: var(--art-v4-rail);
  max-width: var(--art-v4-rail);
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.art-v4-intro .d1r2-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.art-v4-intro .d1r2-display {
  max-width: none;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
}

.art-v4-intro .d1r2-lede,
.art-v4-intro .d1r2-hero__doctrine {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.art-v4-intro .art-v4-intro__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.art-v4-cinematic {
  display: block;
  width: var(--art-v4-rail);
  max-width: var(--art-v4-rail);
  margin: clamp(1rem, 2.5vw, 1.75rem) auto clamp(1.75rem, 4vw, 3rem);
  padding: 0;
  border: 1px solid var(--art-v4-edge);
  border-radius: var(--art-v4-radius);
  overflow: hidden;
  background: #eef2f8;
  box-sizing: border-box;
}

.art-v4-cinematic .d1r2-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.art-v4-cinematic__picture {
  display: block;
  width: 100%;
}

.art-v4-cinematic__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.art-v4-cinematic__img--news {
  object-position: 56% center;
}

.art-v4-cinematic__img--insights {
  object-position: 68% center;
}

.art-v4-cinematic__note {
  margin: 0;
  padding: 0.65rem 0 0.85rem;
  font-size: 0.8125rem;
  color: var(--art-v4-muted);
  border-top: 1px solid var(--art-v4-edge);
  background: #fff;
}

/* Force shells / figures onto the same rail (viewport-relative) */
.art-v4-active .d1r2-shell,
.art-v4-active .d1r2-editorial-figure {
  width: var(--art-v4-rail) !important;
  max-width: var(--art-v4-rail) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

.art-v4-active .d1r2-editorial-figure {
  padding-inline: 0;
}

.art-v4-active .d1r2-editorial-figure picture {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.art-v4-active .d1r2-editorial-figure__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Nested inside .d1r2-shell — fill parent, do NOT re-apply viewport rail */
.art-v4-active .asos-arch {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0;
  box-sizing: border-box;
  display: grid;
}

/* Nested shells already inside a rail shell must fill, not shrink again */
.art-v4-active .d1r2-shell .d1r2-shell,
.art-v4-active .art-v4-intro .d1r2-shell,
.art-v4-active .art-v4-cinematic .d1r2-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0;
}

/* Homepage: keep 76rem rail; kill left-drift hero + overflowing paw */
.art-v4-home .d1r2-hero .d1r2-hero__content.d1r2-shell {
  transform: none !important;
  padding-inline: 0;
  background: transparent;
  border-left: none;
}

.art-v4-home .d1r2-hero__paw-field {
  right: 4% !important;
  bottom: -2%;
  width: min(40vw, 22rem);
  opacity: 0.2;
  left: auto !important;
}

@media (max-width: 900px) {
  .art-v4-home .d1r2-hero__paw-field {
    right: 0 !important;
    bottom: 0;
    width: min(55vw, 18rem);
    opacity: 0.12;
  }
}

@media (max-width: 429px) {
  .art-v4-active {
    --art-v4-rail: min(100% - 1rem, var(--d1r2-max, 76rem));
  }
}

/*
 * Footer: menu headings must share one top edge.
 * Root cause: d1r2-home used align-items:flex-end (shorter cols drop).
 */
.art-v4-active .d1r2-footer__grid {
  align-items: start !important;
  align-content: start;
}

.art-v4-active .d1r2-footer__col {
  align-self: start;
}

.art-v4-active .d1r2-footer__col h2 {
  margin-top: 0;
}

.art-v4-active .d1r2-footer__brand small {
  display: none !important;
}

.art-v4-active .d1r2-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.art-v4-active .d1r2-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 0.55rem;
  color: #24324f;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(8, 18, 42, 0.12);
  text-decoration: none;
}

.art-v4-active .d1r2-footer__social-link:hover,
.art-v4-active .d1r2-footer__social-link:focus-visible {
  color: var(--art-v4-cobalt, #2f4ac4);
  border-color: rgba(47, 74, 196, 0.4);
  text-decoration: none;
}

.art-v4-active .d1r2-footer__social-link svg {
  display: block;
}

/* Hamburger replaces Menu label */
.art-v4-active .d1r2-menu-btn {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
  background: #ffffff !important;
}

.art-v4-active .d1r2-menu-btn__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  width: 1.1rem;
}

.art-v4-active .d1r2-menu-btn__bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.art-v4-active .d1r2-menu-btn.is-open .d1r2-menu-btn__bars span:nth-child(1) {
  transform: translateY(0.34rem) rotate(45deg);
}

.art-v4-active .d1r2-menu-btn.is-open .d1r2-menu-btn__bars span:nth-child(2) {
  opacity: 0;
}

.art-v4-active .d1r2-menu-btn.is-open .d1r2-menu-btn__bars span:nth-child(3) {
  transform: translateY(-0.34rem) rotate(-45deg);
}

.art-v4-active .d1r2-investor-briefing-grid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.art-v4-active .d1r2-investor-briefing-grid::before {
  display: none !important;
}

.art-v4-active .d1r2-onboarding-mode-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin: 1rem 0 1.5rem;
}

.art-v4-active .d1r2-onboarding-mode-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(8, 18, 42, 0.08);
  color: #08122a;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  .art-v4-active .d1r2-onboarding-mode-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .art-v4-active .art-v3-license-fields,
  .art-v4-active .d1r2-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .art-v4-active .d1r2-comparison {
    min-width: 36rem;
  }
}