/* MoaLLM Board case study. Shared language from convocation.css; this file holds only what this page alone needs. */

.moa .case-head-plate { aspect-ratio: 1600 / 1000; }
.moa .case-head-plate img { height: 100%; object-fit: cover; }
.moa-name-note { margin: 18px 0 0; color: var(--stone); font-size: .9rem; }
.moa-name-note span[lang="ar"] { color: var(--gold); font-size: 1.15rem; }

/* The desk: windows arrive stacked and spread into a canvas as you scroll. */
.desk-section { position: relative; padding: clamp(72px, 10vw, 120px) var(--gutter) clamp(64px, 8vw, 110px); }
.desk-intro { max-width: 1280px; margin: 0 auto clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.desk-intro h2 { margin: 0; font: 400 clamp(2.6rem, 5.4vw, 5rem)/1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.desk-intro p { margin: 0; color: var(--stone); line-height: 1.7; max-width: 34em; }
.desk-stage { max-width: 1280px; margin: 0 auto; }
.desk { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background:
  radial-gradient(circle, rgba(242,236,224,.09) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--gown); box-shadow: inset 0 0 0 1px var(--rule-night); }
.desk-win { position: absolute; margin: 0; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 1); }
.desk-win img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); background: var(--parchment-bright); }
.desk-win figcaption { position: absolute; left: 0; top: calc(100% + 8px); color: var(--stone); font-size: .78rem; white-space: nowrap; }
.desk-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
/* Wires are laid out by moallm.js in CSS pixels from the windows' own boxes, so they meet the window edges and the
   labels stay 13px. They sit above the windows so no window can hide them. */
.desk-wires { z-index: 9; }
.desk-wires path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; }
.desk-wires text { fill: var(--gold); font: 500 13px var(--font-body); text-anchor: middle; paint-order: stroke; stroke: var(--gown); stroke-width: 5px; stroke-linejoin: round; }
.desk-kinds { max-width: 1280px; margin: clamp(48px, 6vw, 72px) auto 0; display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0; list-style: none; color: var(--stone); font-size: .92rem; }
.desk-kinds li { display: inline-flex; align-items: center; gap: 10px; }
.desk-kinds li::before { content: ""; width: 14px; height: 1px; background: var(--gold); }

/* Chapter navigation. */
.moa-chapters { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--gutter); background: color-mix(in srgb, var(--parchment) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.moa-chapters::-webkit-scrollbar { display: none; }
.moa-chapters a { flex: 0 0 auto; padding: 8px 12px; color: var(--ink-soft); text-decoration: none; font-size: .85rem; border-radius: 999px; transition: color .3s, background-color .3s; }
.moa-chapters a:hover { color: var(--ink); background: rgba(25,29,29,.06); }
.moa-chapters a.is-current { color: var(--ink); background: rgba(244,129,42,.18); }

/* Chapters on parchment. */
.moa-body { padding: 0 var(--gutter); }
.chapter { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) 0 0; scroll-margin-top: 60px; }
.chapter-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 64px; align-items: start; }
.chapter h2 { margin: 0 0 22px; font: 400 clamp(2.5rem, 4.8vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.chapter-head h2 { margin: 0; font: 400 clamp(2.5rem, 4.8vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.chapter-head h2 em { font-style: italic; }
.prose { max-width: 62ch; }
.prose p, .prose li { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.75; }
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { font: .92em ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", monospace; color: var(--ink); background: rgba(25,29,29,.06); padding: .1em .35em; border-radius: 3px; }
.chapter-media { margin: clamp(36px, 5vw, 64px) 0 0; }
.plate { margin: 0; }
.plate img, .plate video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--parchment-bright); box-shadow: 0 30px 70px -36px rgba(25,29,29,.55), 0 0 0 1px var(--rule); }
.plate figcaption { margin-top: 12px; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; max-width: 60ch; }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.flip > :first-child { order: 2; }
.split .prose { padding-top: 6px; }

/* Two agent paths side by side. */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.paths > div { padding: 26px 28px 8px 0; }
.paths > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.paths h3 { margin: 0 0 6px; font: 400 1.9rem/1.1 var(--font-display); }
.paths p { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.6; }
.paths ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.paths li { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: .85rem; color: var(--ink); }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.tag-row li { padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; font-size: .85rem; color: var(--ink); }

/* Delivery states: a real lifecycle, drawn as one line. */
.lifecycle { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); counter-reset: state; }
.lifecycle li { position: relative; padding: 22px 16px 0 0; }
.lifecycle li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--parchment); border: 1.5px solid var(--gold-deep); }
.lifecycle li:nth-child(2)::before { background: var(--gold-deep); }
.lifecycle b { display: block; font-weight: 600; color: var(--ink); }
.lifecycle span { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }

/* Retrieval fusion. */
.fusion { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0 18px; margin: clamp(32px, 4vw, 48px) 0 0; }
.fusion > div { padding: 22px 0 0; border-top: 1px solid var(--ink); }
.fusion b { display: block; font: 400 1.9rem/1 var(--font-display); }
.fusion span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.fusion i { align-self: center; font-style: normal; color: var(--gold-deep); font: 400 1.8rem/1 var(--font-display); }

/* Map / Live. */
.maplive { position: relative; }
.maplive-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.maplive-bar p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(25,29,29,.07); }
.seg button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--ink-soft); background: transparent; font: 500 .9rem var(--font-body); cursor: pointer; transition: color .3s, background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--parchment-bright); box-shadow: 0 1px 2px rgba(25,29,29,.18); }
.maplive-frame { position: relative; aspect-ratio: 1180 / 760; border-radius: var(--radius); overflow: hidden; background: var(--parchment-bright); box-shadow: 0 30px 70px -36px rgba(25,29,29,.55), 0 0 0 1px var(--rule); }
.maplive-frame > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease-out), filter .6s var(--ease-out); }
.maplive-frame picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.maplive-frame [data-view] { opacity: 0; }
.maplive-frame [data-view].is-shown { opacity: 1; }

/* Themes. */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.themes figure { margin: 0; }
.themes img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--rule); }
.themes figcaption { margin-top: 8px; font-size: .84rem; color: var(--ink-soft); }

.three-up { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.three-up h3 { margin: 18px 0 6px; font: 400 1.7rem/1.1 var(--font-display); }
.three-up p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; }

/* Numbers that come from the repository, set as a sentence, not a dashboard. */
.tested { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--rule); }
.tested div { padding: 22px 16px 0 0; }
.tested b { display: block; font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tested span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }

.moa-close { margin: clamp(90px, 12vw, 160px) auto 0; max-width: 1280px; padding: 0 0 clamp(80px, 10vw, 130px); }
.moa-close h2 { margin: 0; max-width: 16em; font: 400 clamp(2.4rem, 5vw, 4.6rem)/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.moa-close .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.parked { margin-top: 26px; max-width: 60ch; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }

@media (max-width: 1080px) {
  .chapter-head, .split, .split.flip, .desk-intro { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tested { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 760px) {
  /* The desk becomes a two-column contact sheet; no pinning on phones. */
  .desk { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 14px; padding: 16px 14px 40px; }
  .desk-win { position: static; width: auto; }
  .desk-win figcaption { position: static; margin-top: 8px; }
  .desk-wires { display: none; }
  .paths { grid-template-columns: 1fr; }
  .paths > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .fusion { grid-template-columns: 1fr; gap: 14px; }
  .fusion i { justify-self: start; }
  .three-up { grid-template-columns: 1fr; gap: 40px; }
  .lifecycle { grid-template-columns: 1fr 1fr; }
  .maplive-bar { flex-direction: column; align-items: flex-start; }
}

/* The product film. */
.moa-film { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(72px, 9vw, 120px); }
.moa-film-inner { max-width: 1280px; margin: 0 auto; }
.moa-film h2 { margin: 0 0 clamp(24px, 3vw, 40px); font: 400 clamp(2.2rem, 4vw, 3.6rem)/1 var(--font-display); letter-spacing: -.02em; }
.moa-film-frame { margin: 0; }
.moa-film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--gown); box-shadow: 0 40px 90px -36px rgba(0,0,0,.85), 0 0 0 1px var(--rule-night); }
.moa-film-frame figcaption { margin-top: 14px; max-width: 62ch; color: var(--stone); font-size: .9rem; line-height: 1.6; }
.moa-wordmark { display: block; width: 220px; max-width: 100%; height: auto; margin: 22px 0 0; border-radius: 14px; background: var(--parchment); }
.moa-wordmark-close { width: min(340px, 80%); margin: 0 0 32px; }

/* 0.9 additions: three ways in, small jobs, Path and Time, the Qatra numbers, two plates side by side. */
.paths.three { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; }
.chapter-media.split:has(.paths.three) { grid-template-columns: 1fr; }
.small-jobs-title { margin: clamp(48px, 6vw, 72px) 0 0; font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--font-display); }
.small-jobs-title + .lifecycle { margin-top: 20px; }
.maplive-frame picture.fit img { object-fit: contain; background: #fff; }
.qatra-stats b { white-space: nowrap; }
.two-plates { margin-top: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 1080px) {
  .paths.three { grid-template-columns: 1fr; }
  .paths.three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}
.small-jobs-title + .lifecycle li:nth-child(2)::before { background: var(--parchment); }
.plate-note { margin: 18px 0 0; max-width: 70ch; color: var(--ink-soft); font-size: .86rem; line-height: 1.55; }
/* Tall window captures in a split stay a readable size instead of filling the column's height. */
.split > .plate img { width: auto; max-width: 100%; max-height: min(72vh, 680px); margin-inline: auto; }
.split > .plate figcaption { margin-inline: auto; text-align: center; }
.meaning-3d-row { margin-top: clamp(28px, 4vw, 48px); align-items: center; }
.meaning-3d-row > .plate img { max-height: none; width: 100%; }