/*
 * Mission Log canvas reset
 *
 * Product Design reset layer. This intentionally breaks the homepage out
 * of the legacy al-folio/about content width and gives the Mission Log an
 * independent full-bleed canvas while keeping archive pages unchanged.
 */

body:has(.mission-log-home) {
  --mission-canvas-wide: min(100%, 78rem);
  --mission-canvas-mid: min(100%, 68rem);
  --mission-canvas-read: min(100%, 48rem);
  --mission-canvas-pad: clamp(1rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--hao-mission-accent) 10%, transparent), transparent 25rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--hao-mission-accent) 8%, transparent), transparent 28rem),
    var(--global-bg-color, #fff);
}

/* Escape the inherited al-folio/about reading frame on the homepage only. */
body:has(.mission-log-home) main,
body:has(.mission-log-home) article,
body:has(.mission-log-home) .post,
body:has(.mission-log-home) .clearfix,
body:has(.mission-log-home) article > .post-content,
body:has(.mission-log-home) article > .clearfix,
body:has(.mission-log-home) article > .lead {
  max-width: none !important;
  width: 100%;
}

body:has(.mission-log-home) .container:has(.mission-log-home),
body:has(.mission-log-home) main.container,
body:has(.mission-log-home) .post:has(.mission-log-home) {
  max-width: none !important;
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Remove the inherited about-page furniture so the cover becomes the page. */
body:has(.mission-log-home) .profile,
body:has(.mission-log-home) .post-header,
body:has(.mission-log-home) .post-title,
body:has(.mission-log-home) .post-description {
  display: none !important;
}

.mission-log-home {
  position: relative;
  width: 100vw;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) clamp(3rem, 8vw, 6rem) !important;
  padding: clamp(1rem, 3vw, 2rem) var(--mission-canvas-pad) clamp(3rem, 8vw, 6rem);
  box-sizing: border-box;
  overflow: hidden;
}

.mission-log-home::before {
  inset: 0 0 auto !important;
  width: 100%;
  height: clamp(34rem, 75vw, 60rem) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hao-mission-accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--hao-mission-accent) 4%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--hao-mission-accent) 18%, transparent), transparent 26rem),
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--hao-mission-accent) 12%, transparent), transparent 30rem) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  opacity: 0.72 !important;
}

.mission-log-home > .mission-cover,
.mission-log-home > .mission-index,
.mission-log-home > .mission-section {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.mission-log-home > .mission-cover,
.mission-log-home > .mission-section--deployments {
  max-width: var(--mission-canvas-wide);
}

.mission-log-home > .mission-index,
.mission-log-home > .mission-section {
  max-width: var(--mission-canvas-mid);
}

/* The cover should feel like a designed first screen, not a card in a column. */
.mission-cover {
  min-height: min(84vh, 48rem) !important;
  border-radius: clamp(1.25rem, 3vw, 2.5rem) !important;
  padding: clamp(1.5rem, 5vw, 4.8rem) !important;
  box-shadow:
    0 30px 100px color-mix(in srgb, var(--hao-mission-accent) 14%, transparent),
    0 1px 0 color-mix(in srgb, var(--hao-mission-accent) 18%, transparent) inset !important;
}

.mission-cover__layout {
  grid-template-columns: minmax(0, 1.04fr) minmax(21rem, 0.96fr) !important;
  gap: clamp(2rem, 6vw, 5rem) !important;
}

.mission-cover__copy {
  max-width: 52rem !important;
}

.mission-cover h1 {
  max-width: 12.6ch !important;
  font-size: clamp(3.8rem, 9.2vw, 8.4rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.085em !important;
}

.mission-cover__subtitle {
  max-width: 42rem !important;
  font-size: clamp(1.18rem, 2.25vw, 1.75rem) !important;
  line-height: 1.32 !important;
}

.mission-cover__note {
  max-width: 36rem !important;
}

.mission-cover__visual {
  min-height: clamp(24rem, 44vw, 33rem) !important;
  border-radius: clamp(1rem, 2.4vw, 2rem) !important;
  background:
    radial-gradient(circle at 54% 44%, color-mix(in srgb, var(--hao-mission-accent) 20%, transparent), transparent 33%),
    linear-gradient(90deg, color-mix(in srgb, var(--hao-mission-accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--hao-mission-accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--hao-surface-base) 88%, var(--hao-mission-soft)), var(--hao-surface-soft)) !important;
  background-size: auto, 28px 28px, 28px 28px, auto !important;
}

/* Mission Index becomes a navigation instrument rather than another content card. */
.mission-index {
  margin-top: clamp(1.3rem, 3vw, 2.25rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(0.75rem, 2vw, 1.1rem) 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mission-index::before,
.mission-index::after {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hao-mission-line), transparent);
}

.mission-index__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
}

.mission-index__item {
  border-radius: 999px !important;
  padding: 0.7rem 0.95rem !important;
  background: color-mix(in srgb, var(--hao-surface-base) 76%, transparent) !important;
  backdrop-filter: blur(14px);
}

.mission-index__item::before {
  width: 0 !important;
}

.mission-index__item strong {
  font-size: 0.92rem !important;
}

/* Long-form page rhythm: sections read like chapters, not equal cards. */
.mission-section {
  display: grid;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: clamp(2.4rem, 6vw, 5rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mission-section::before {
  top: 0 !important;
  right: auto !important;
  left: 0 !important;
  width: 100% !important;
  background: linear-gradient(90deg, var(--hao-mission-line), transparent) !important;
}

.mission-section > .mission-section-kicker,
.mission-section > h2,
.mission-section > .mission-section__intro {
  grid-column: 1;
}

.mission-section > h2 {
  max-width: 11ch !important;
  margin-top: 0.65rem !important;
  font-size: clamp(1.7rem, 3.5vw, 3rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

.mission-section > .mission-section__intro {
  max-width: 16rem !important;
  margin-bottom: 0 !important;
  font-size: 0.92rem !important;
}

.mission-section > :not(.mission-section-kicker):not(h2):not(.mission-section__intro) {
  grid-column: 2;
}

/* Give the main deployment section real landing-page weight. */
.mission-section--deployments {
  grid-template-columns: minmax(13rem, 0.24fr) minmax(0, 1fr);
}

.deployments-group:first-child .deployments-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  grid-auto-flow: dense;
}

.deployments-group:first-child .deployment-card:first-child {
  min-height: clamp(19rem, 36vw, 30rem);
  padding: clamp(1.4rem, 3vw, 2.25rem) !important;
  border-radius: clamp(1rem, 2.3vw, 1.7rem) !important;
}

.deployments-group:first-child .deployment-card:first-child h4 {
  max-width: 11ch;
  font-size: clamp(2rem, 5vw, 4.2rem) !important;
  line-height: 0.92;
}

.deployment-card,
.field-observation,
.research-record,
.career-phase {
  border-radius: clamp(0.85rem, 1.8vw, 1.25rem) !important;
}

/* Research and observations get calmer editorial shapes. */
.research-record {
  grid-template-columns: minmax(8rem, 0.18fr) minmax(0, 1fr) !important;
}

.field-observations {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.field-observation:first-child {
  min-height: 100%;
}

/* Career and back cover should feel like the closing chapter of the dossier. */
.career-trajectory {
  margin-top: 0 !important;
}

.mission-back-cover {
  max-width: var(--mission-canvas-wide) !important;
  display: block !important;
  border: 1px solid color-mix(in srgb, var(--hao-mission-accent) 24%, var(--hao-border-subtle)) !important;
  border-radius: clamp(1.25rem, 3vw, 2.35rem) !important;
  padding: clamp(1.8rem, 5vw, 4rem) !important;
}

.mission-back-cover h2 {
  max-width: 12ch !important;
  font-size: clamp(2.8rem, 7vw, 6.5rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.075em !important;
}

.mission-back-cover p {
  max-width: 40rem !important;
  font-size: clamp(1rem, 1.7vw, 1.25rem) !important;
}

.back-cover-links {
  max-width: 54rem;
}

.back-cover-links a {
  padding: 0.55rem 0.95rem !important;
}

@media (max-width: 991px) {
  .mission-log-home {
    padding-inline: clamp(0.9rem, 4vw, 1.5rem);
  }

  .mission-cover__layout,
  .mission-section,
  .mission-section--deployments,
  .mission-index {
    grid-template-columns: 1fr !important;
  }

  .mission-section > .mission-section-kicker,
  .mission-section > h2,
  .mission-section > .mission-section__intro,
  .mission-section > :not(.mission-section-kicker):not(h2):not(.mission-section__intro) {
    grid-column: auto !important;
  }

  .mission-section > h2,
  .mission-section > .mission-section__intro {
    max-width: var(--mission-canvas-read) !important;
  }

  .mission-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .mission-log-home {
    padding-top: 0.75rem;
  }

  .mission-cover {
    min-height: auto !important;
    border-radius: 1.2rem !important;
  }

  .mission-cover h1 {
    font-size: clamp(3rem, 18vw, 4.6rem) !important;
  }

  .mission-cover__visual {
    min-height: 18rem !important;
  }

  .mission-index__grid,
  .deployments-group:first-child .deployments-grid,
  .field-observations,
  .research-record {
    grid-template-columns: 1fr !important;
  }

  .mission-index__item {
    border-radius: var(--hao-radius-md) !important;
  }
}