/* ORIXON architecture v5: the illustration stays whole; detail is optional. */
.ar-overview {
  --ar-ink: var(--brand-text);
  --ar-muted: var(--brand-muted);
  --ar-line: var(--brand-line);
  --ar-bg: var(--brand-bg);
  --ar-panel: var(--brand-surface);
  --ar-accent: var(--brand-accent);
  --ar-mono: var(--mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--ar-ink);
  background: var(--ar-bg);
  border-block: 1px solid var(--brand-line);
  padding: clamp(56px, 6.5vw, 94px) 0;
  scroll-margin-top: 88px;
  color-scheme: dark;
}
.ar-overview *, .ar-overview *::before, .ar-overview *::after { box-sizing: border-box; }
.ar-overview :where(h2, h3, p, figure, figcaption, dl, dt, dd) { margin: 0; }
.ar-overview .ar-overview-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin-bottom: 36px; }
.ar-overview .ox-eyebrow { font: 12px/1.6 var(--ar-mono); color: var(--ar-accent); letter-spacing: .11em; }
.ar-overview .ar-overview-heading h2 { margin-top: 19px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.3; letter-spacing: -.045em; color: var(--ar-ink); }
.ar-overview .ar-overview-heading > p { max-width: 30em; color: var(--ar-muted); font-size: 15px; line-height: 1.85; word-break: keep-all; }
.ar-overview .ar-system-figure { width: 100%; max-width: 1240px; margin: 0 auto; }
.ar-overview .ar-system-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--ar-line); }
.ar-overview .ar-system-toolbar > span { color: var(--ar-ink); font-size: 15px; font-weight: 600; line-height: 1.6; }
.ar-overview .ar-system-expand { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0 10px 14px; color: var(--ar-accent); font-size: 14px; font-weight: 550; line-height: 1.6; text-decoration: none; }
.ar-overview .ar-system-expand > span[aria-hidden="true"] { font-size: 19px; line-height: 1; }
.ar-overview .ar-system-expand:hover { color: var(--brand-text); }
.ar-overview .ar-system-expand:focus-visible, .ar-overview .ar-detail > summary:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 4px; }
.ar-overview .ar-system-image { display: block; width: 100%; max-width: 100%; height: auto;  object-fit: contain; margin: 0; background: var(--ar-bg); }
.ar-overview .ar-system-figure > figcaption { padding-top: 13px; color: var(--ar-muted); font-size: 13px; line-height: 1.8; }
.ar-overview .ar-detail-collection { margin-top: 42px; border-bottom: 1px solid var(--ar-line); }
.ar-overview .ar-detail-collection > h3 { margin-bottom: 17px; color: var(--ar-muted); font-size: 14px; font-weight: 500; line-height: 1.7; }
.ar-overview .ar-detail { border-top: 1px solid var(--ar-line); }
.ar-overview .ar-detail > summary { position: relative; display: flex; align-items: baseline; gap: 18px; min-height: 66px; padding: 20px 44px 20px 0; color: var(--ar-ink); font-size: 16px; font-weight: 550; line-height: 1.6; cursor: pointer; list-style: none; }
.ar-overview .ar-detail > summary::-webkit-details-marker { display: none; }
.ar-overview .ar-detail > summary::marker { content: ""; }
.ar-overview .ar-detail > summary::after { content: "+"; position: absolute; top: 20px; right: 3px; color: var(--ar-accent); font: 23px/1.1 var(--ar-mono); }
.ar-overview .ar-detail[open] > summary::after { content: "−"; }
.ar-overview .ar-detail > summary:hover { color: var(--brand-text); }
.ar-overview .ar-detail-index { flex: 0 0 24px; color: var(--brand-subtle); font: 12px/1.6 var(--ar-mono); }
.ar-overview .ar-detail-body { max-width: 76em; padding: 0 44px 28px 0; color: var(--brand-muted); font-size: 15px; line-height: 1.85; word-break: keep-all; overflow-wrap: break-word; }
.ar-overview .ar-detail-body p + p { margin-top: 14px; }
.ar-overview .ar-detail-body p + dl { margin-top: 22px; }
.ar-overview .ar-detail-body dl > div + div { margin-top: 19px; }
.ar-overview .ar-detail-body dt { margin-bottom: 5px; color: var(--brand-text); font-size: 15px; font-weight: 600; line-height: 1.6; }
.ar-overview .ar-detail-body dd { font-size: 15px; line-height: 1.85; }
.ar-overview .ar-overview-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .ar-overview .ar-overview-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .ar-overview .ar-overview-heading > p { max-width: 38em; }
}
@media (max-width: 600px) {
  .ar-overview { padding: 54px 0; }
  .ar-overview .ar-overview-heading { margin-bottom: 27px; gap: 19px; }
  .ar-overview .ar-overview-heading h2 { font-size: clamp(29px, 7.3vw, 36px); margin-top: 16px; }
  .ar-overview .ar-overview-heading > p { font-size: 14px; line-height: 1.8; }
  .ar-overview .ar-overview-heading > p br { display: none; }
  .ar-overview .ar-system-toolbar { min-height: 64px; gap: 12px; }
  .ar-overview .ar-system-toolbar > span { font-size: 14px; }
  .ar-overview .ar-system-expand { min-height: 44px; padding: 10px 11px; gap: 11px; border: 1px solid var(--brand-line); background: var(--ar-panel); font-size: 14px; white-space: nowrap; }
  .ar-overview .ar-system-figure > figcaption { padding-top: 11px; font-size: 13px; }
  .ar-overview .ar-detail-collection { margin-top: 31px; }
  .ar-overview .ar-detail-collection > h3 { margin-bottom: 14px; }
  .ar-overview .ar-detail > summary { min-height: 64px; padding: 18px 29px 18px 0; gap: 12px; font-size: 15px; }
  .ar-overview .ar-detail > summary::after { right: 1px; top: 20px; font-size: 21px; }
  .ar-overview .ar-detail-index { flex-basis: 22px; }
  .ar-overview .ar-detail-body { padding: 0 0 24px; font-size: 14px; line-height: 1.9; }
  .ar-overview .ar-detail-body dt, .ar-overview .ar-detail-body dd { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ar-overview .ar-system-expand, .ar-overview .ar-detail > summary { transition: color .15s ease; }
}
