/* Shared layout for the MODX interior templates. */
.okv3 {
  --ok-reading-width: 48rem;
  --ok-reading-gap: clamp(2rem, 5vw, 5rem);
  --ok-section-gap: clamp(3rem, 6vw, 6rem);
  --ok-reading-leading: 1.85;
  --ok-control-size: 2.75rem;
  --ok-cover-ratio: 1.5;
  --ok-text-measure: 62ch;
}
.okv3 .okp-photo-box, .okv3 .okp-photo figcaption, .okv3 .okp-princ-item,
.okv3 .okp-post, .okv3 .okp-pcard, .okv3 .okp-pcard-meta,
.okv3 .okp-chan li, .okv3 .okp-line path, .okv3 .okp-count-big,
.okv3 .okx-step, .okv3 .okx-brand, .okv3 .okp-n {
  opacity: 1; clip-path: none; transform: none; filter: none;
}
.okv3 .okp-photo img { max-inline-size: 100%; }
.okv3 .ok-interior-cover { margin-block: 0; margin-inline: 0; }
.okv3 .ok-interior-cover .okp-photo-box { aspect-ratio: var(--ok-cover-ratio); }
.okv3 .ok-interior-cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.okv3 .okp-shero-grid:not(:has(.okp-photo)) { grid-template-columns: 1fr; }
.okv3 .ok-interior-reading { padding-block: var(--ok-section-gap); gap: var(--ok-reading-gap); align-items: start; }
.okv3 .ok-interior-copy { max-inline-size: var(--ok-reading-width); line-height: var(--ok-reading-leading); min-inline-size: 0; overflow-wrap: anywhere; }
.okv3 .ok-interior-copy :is(h2,h3,h4) { margin-block: var(--space-8) var(--space-4); font-weight: 500; line-height: 1.35; scroll-margin-block-start: 6rem; }
.okv3 .ok-interior-copy h2 { font-size: clamp(1.5rem, 2.5vw, 2.4rem); }
.okv3 .ok-interior-copy h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.okv3 .ok-interior-copy :is(p,ul,ol,figure,blockquote) { margin-block: 0 var(--space-6); }
.okv3 .ok-interior-copy :is(ul,ol) { padding-inline-start: var(--space-6); }
.okv3 .ok-interior-copy img { max-inline-size: 100%; block-size: auto; }
.okv3 .ok-interior-copy a { color: var(--green); text-decoration: underline; }
.okv3 .ok-interior-copy table { display: block; overflow-x: auto; max-inline-size: 100%; }
.okv3 .okp-aside { min-inline-size: 0; }
.okv3 .okp-toc { margin-block-end: var(--space-8); }
.okv3 .okp-pcard .okp-photo-box:empty,
.okv3 .okp-post .okp-photo-box:empty { background: var(--lime-100); background-image: url('../brand/key-pattern.svg'); background-size: cover; }
.okv3 .okp-pcard img, .okv3 .okp-post img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.okv3 .okp-row-body { grid-template-columns: 1fr; }
.okv3 .okx-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.okv3 .okx-filters button { min-block-size: var(--ok-control-size); padding-inline: var(--space-4); font: inherit; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white); color: var(--black); cursor: pointer; }
.okv3 .okx-filters button.is-on { background: var(--lime); border-color: var(--lime); }
.okv3 .okv3-scene-poster { position: absolute; inset: 0; background: var(--white) url('../media/renders/lit.webp') center / contain no-repeat; }
.okv3 [data-onekey-scene][data-renderer="webgl"] .okv3-scene-poster { display: none; }
.okv3 [data-onekey-scene] .okb-gl { visibility: visible; }
.okv3 .okp-hero3d-card { opacity: 1; transform: none; }
.okv3 .okp-hero3d-card h1 { overflow-wrap: anywhere; }
.okv3 .okp-chan-v { overflow-wrap: anywhere; }
.okv3 .okv3-extra-fields { margin-block: var(--space-4); }
.okv3 .okv3-extra-fields summary { cursor: pointer; min-block-size: var(--ok-control-size); display: list-item; padding-block: var(--space-2); }
.okv3 .okv3-field :is(textarea,select) { min-block-size: var(--ok-control-size); inline-size: 100%; padding: var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-0); background: transparent; color: inherit; font: inherit; }
.okv3 .okv3-field textarea { resize: vertical; }
.okv3 .okv3-field select option { background: var(--white); color: var(--black); }
.okv3 .okv3-sitemap { columns: 2; padding-inline-start: var(--space-6); }
.okv3 .okv3-sitemap li { margin-block-end: var(--space-3); break-inside: avoid; }
.okv3 .okv3-sitemap a { color: var(--green); }
@media (min-width: 761px) and (max-width: 1100px) {
  .okv3 .okp-chan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .okv3 .okv3-sitemap { columns: 1; }
  .okv3 .ok-interior-reading { grid-template-columns: 1fr; }
  .okv3 .okp-aside { position: static; }
  .okv3 .okp-hero3d-card { max-inline-size: 100%; }
}