/* Site architecture as an org chart (includes/visuals/sitemap.php)
   ≥ 960px: home on top, sections in a row, sub-pages under each; below: an indented tree. */
.sm {
  border-radius: var(--radius); padding: 32px; padding: clamp(18px, 3vw, 44px);
  background-color: var(--paper);
  background-image: radial-gradient(circle, #cfcac2 1.1px, transparent 1.5px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.section--paper .sm { background-color: var(--white); background-image: radial-gradient(circle, #e2ded8 1.1px, transparent 1.5px); }
.sm-tree, .sm-l1, .sm-l2, .sm-aside-list { list-style: none; margin: 0; padding: 0; }

/* nodes */
.sm-node {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px 12px;
  box-shadow: inset 4px 0 0 var(--sm-c, var(--line)), 0 1px 3px rgba(12, 43, 21, .06);
}
.section--paper .sm-node { border-color: #e2ded8; }
.sm-name { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--forest); }
.sm-path { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.sm-tag { display: inline-block; max-width: 100%; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--forest); background: var(--mint); }
.sm-tag--hub { background: var(--green); }
.sm-tag--pillar { background: var(--forest); color: var(--green); }
.sm-tag--convert { background: var(--green); }
.sm-tag--trust { background: var(--mint); box-shadow: inset 0 0 0 1px #c5efb6; }
.sm-tag--content { background: var(--sage); }
.sm-tag--legal { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px #7d8a80; }
.sm-tag--tech { background: var(--paper); color: var(--ink-2); }
.section--paper .sm-tag--tech { background: var(--paper); }
.sm-node--pillar { --sm-c: var(--forest); }
.sm-node--convert { --sm-c: var(--green-2); }
.sm-node--trust { --sm-c: var(--sage); }
.sm-node--content { --sm-c: #7d8a80; }

.sm-node--l0 { background: var(--forest); border-color: var(--forest); box-shadow: 0 8px 24px rgba(12, 43, 21, .18); padding: 14px 22px 15px; }
.sm-node--l0 .sm-name { color: var(--white); font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.sm-node--l0 .sm-path { color: var(--sage); }
.sm-node--l1 .sm-name { font-size: 16px; }
.sm-node--l2 { padding: 9px 12px 10px; }
.sm-node--l2 .sm-name { font-size: 14.5px; }
.sm-node--l2 .sm-tag { margin-top: 4px; }

/* sub-pages: a small file-tree under their section (all widths) */
.sm-l2 { position: relative; display: grid; gap: 10px; margin-top: 10px; padding-left: 26px; }
.sm-l2 > li { position: relative; }
.sm-l2 > li::before { content: ""; position: absolute; left: -14px; top: 21px; width: 14px; border-top: 1.5px solid #7d8a80; }
.sm-l2 > li::after { content: ""; position: absolute; left: -14px; top: -10px; height: 32px; border-left: 1.5px solid #7d8a80; }
.sm-l2 > li:not(:last-child)::after { height: auto; bottom: 0; }

/* pages outside the main navigation */
.sm-aside { margin-top: 34px; padding-top: 18px; border-top: 1.5px dashed #7d8a80; }
.sm-aside .vz-label { margin: 0 0 12px; }
.sm-aside-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sm-aside-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 11px 14px; border: 1.5px dashed #b9b3aa; border-radius: 10px; background: rgba(255, 255, 255, .6); }
.sm-aside-item .sm-tag { margin: 0 0 0 auto; }
.sm-detail { font-size: 14px; color: var(--ink-2); }
@media (min-width: 700px) { .sm-aside-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* org chart */
@media (min-width: 960px) {
  .sm-root > .sm-node { width: max-content; min-width: 240px; margin: 0 auto; align-items: center; text-align: center; }
  .sm-l1 { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; }
  .sm-l1::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; height: 28px; border-left: 2px solid var(--forest); }
  .sm-col { position: relative; padding-top: 56px; }
  .sm-col::before { content: ""; position: absolute; left: calc(50% - 1px); top: 28px; height: 28px; border-left: 2px solid var(--forest); }
  .sm-col::after { content: ""; position: absolute; top: 27px; left: -9px; right: -9px; border-top: 2px solid var(--forest); }
  .sm-col:first-child::after { left: calc(50% - 1px); }
  .sm-col:last-child::after { right: calc(50% - 1px); }
  .sm-node--l1 { min-height: 102px; }
}
@media (min-width: 1200px) { .sm-l1 { gap: 0 22px; } .sm-col::after { left: -12px; right: -12px; } }
/* narrow org chart: tighter columns, sub-page addresses shortened to "…/page" */
@media (min-width: 960px) and (max-width: 1199px) {
  .sm { padding: 24px 20px; }
  .sm-l1 { gap: 0 10px; }
  .sm-col::after { left: -6px; right: -6px; }
  .sm-l2 { padding-left: 18px; }
  .sm-l2 > li::before { left: -10px; width: 10px; }
  .sm-l2 > li::after { left: -10px; }
  .sm-node { padding-left: 11px; padding-right: 9px; }
  .sm-node--l2 .sm-pp { display: none; }
  .sm-node--l2 .sm-path::before { content: "…"; }
  .sm-tag { padding: 3px 8px; }
}

/* phones and tablets: indented tree */
@media (max-width: 959px) {
  .sm-root > .sm-node { width: max-content; max-width: 100%; }
  .sm-l1 { display: grid; gap: 14px; margin-top: 14px; padding-left: 26px; }
  .sm-col { position: relative; }
  .sm-col::before { content: ""; position: absolute; left: -14px; top: 24px; width: 14px; border-top: 2px solid var(--forest); }
  .sm-col::after { content: ""; position: absolute; left: -15px; top: -14px; height: 39px; border-left: 2px solid var(--forest); }
  .sm-col:not(:last-child)::after { height: auto; bottom: -1px; }
  .sm-l2 { padding-left: 24px; }
}
/* animation: home, then the connectors, the sections, the sub-pages */
.sm-col:nth-child(2) { --sm-i: 1; }
.sm-col:nth-child(3) { --sm-i: 2; }
.sm-col:nth-child(4) { --sm-i: 3; }
.sm-col:nth-child(5) { --sm-i: 4; }
.sm-col:nth-child(6) { --sm-i: 5; }
.sm-l2 > li:nth-child(2) { --sm-j: 1; }
.sm-l2 > li:nth-child(3) { --sm-j: 2; }
.sm-l2 > li:nth-child(4) { --sm-j: 3; }
.js .vz-figure .sm-node, .js .vz-figure .sm-aside { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .sm-node--l1 { transition-delay: calc(.55s + var(--sm-i, 0) * .09s); }
.js .vz-figure .sm-node--l2 { transition-delay: calc(1s + var(--sm-i, 0) * .09s + var(--sm-j, 0) * .14s); }
.js .vz-figure .sm-aside { transition-delay: 1.9s; }
.js .vz-figure .sm-l1::before, .js .vz-figure .sm-col::before, .js .vz-figure .sm-col::after { transform: scale(0); transform-origin: top center; transition: transform .35s ease .25s; }
.js .vz-figure .sm-col::before { transition-delay: .45s; }
.js .vz-figure .sm-l2 > li::before, .js .vz-figure .sm-l2 > li::after { opacity: 0; transition: opacity .4s ease; transition-delay: calc(.95s + var(--sm-i, 0) * .09s + var(--sm-j, 0) * .14s); }
@media (min-width: 960px) {
  .js .vz-figure .sm-col::after { transform-origin: right center; transition-delay: .3s; }
  .js .vz-figure .sm-col:nth-child(3)::after { transform-origin: center; }
  .js .vz-figure .sm-col:nth-child(n+4)::after { transform-origin: left center; }
}
.js .vz-figure.is-visible .sm-node, .js .vz-figure.is-visible .sm-aside { opacity: 1; transform: none; }
.js .vz-figure.is-visible .sm-l1::before, .js .vz-figure.is-visible .sm-col::before, .js .vz-figure.is-visible .sm-col::after { transform: none; }
.js .vz-figure.is-visible .sm-l2 > li::before, .js .vz-figure.is-visible .sm-l2 > li::after { opacity: 1; }