:root {
    --tu-gold: #FFBB00;
    --tu-graphite: #3C3C3C;
    --card-bg: #FFFFFF;
    --card-border: #E1E1E1;
    --connector: #919191;
    --muted: #6B6B6B;
    --label-bg: #EAE7E1; 
    --photo-size: 3rem;
    --card-pad-y: 0.5rem;
    --card-border-w: 1px;
    --card-center-y: calc(var(--card-border-w) + var(--card-pad-y) + var(--photo-size) / 2);
    --row-pad: 0.65rem;
    --tick-y: calc(var(--row-pad) + var(--card-center-y));
    --indent: 1.25rem;
    --indent-margin: 1.5rem;
    --line-w: 2px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 2.5rem 1.5rem;
    background: #FAFAF8;
    color: var(--tu-graphite);
    font-family: "proxima-nova", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  /* --- page header: logo + department name --- */
  header.page-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .page-header.logo {
    width: 200px;
    height: auto;
    flex: 0 0 auto;
  }
  .page-header.divider {
    align-self: stretch;
    width: var(--line-w);
    background: #676767;
    flex: 0 0 auto;
  }
  .page-header.title {
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--tu-graphite);
  }
  /* --- the chart --- */
  .org-chart,
  .org-chart ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .org-chart {
    max-width: 34rem;
  }
  .org-chart ul {
    margin-left: var(--indent-margin);
    padding-left: var(--indent);
  }
  .org-chart li {
    position: relative;
    padding-top: var(--row-pad); 
  }
  .org-chart > li {
    padding-top: 0; 
  }

  /* --- connector lines --- */
  .org-chart ul li::before,
  .org-chart ul li::after {
    content: "";
    position: absolute;
    left: calc(var(--indent) * -1);
    background: var(--connector);
  }
  .org-chart ul li::before {
    top: 0;
    width: var(--line-w);
    height: 100%;
  }
  .org-chart ul li:last-child::before {
    height: var(--tick-y); 
  }
  .org-chart ul li::after {
    top: var(--tick-y);
    width: var(--indent);
    height: var(--line-w);
  }

  .org-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 17rem;
    padding: var(--card-pad-y) 0.75rem;
    background: var(--card-bg);
    border: var(--card-border-w) solid var(--card-border);
  }
  .org-card__photo {
    flex: 0 0 auto;
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: 50%;
    background: var(--tu-gold); 
    object-fit: cover;
  }
  .org-card__info {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .text-only .org-card__photo {
    display: none;
  }

  .org-chart.text-only-subteams > li > ul > li > ul .org-card__photo {
    display: none;
  }
  .org-card__name {
    margin: 0;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .org-card__title {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.25;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .org-chart-wrap {
    --branch-gap-x: 2rem;   
    --branch-gap-y: 1.5rem; 
    --branch-card-w: 20rem; 
    --stack-tick: 1.25rem;
    --label-gap: 0.75rem;
  }

  .org-chart.text-only {
    --branch-card-w: 16rem;
  }

  @media (min-width: 700px) {

    .org-chart {
      max-width: none;
      width: fit-content;
      margin: 0 auto;
    }

    .org-chart > li > .org-card {
      margin: 0 auto;
    }

    .org-chart > li > ul {
      position: relative;
      display: grid;
      align-items: start;
      grid-auto-flow: column;
      grid-auto-columns: calc(var(--branch-card-w) + var(--branch-gap-x));
      grid-template-rows: repeat(12, auto);
      column-gap: 0;
      row-gap: 0;
      justify-content: safe center;
      margin-left: 0;
      padding-left: 0;
      padding-top: var(--branch-gap-y);
    }

    .org-chart > li > ul::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: var(--line-w);
      height: var(--branch-gap-y);
      background: var(--connector);
    }

    .org-chart > li > ul > li {
      grid-row: span 12;
      padding: var(--branch-gap-y) calc(var(--branch-gap-x) / 2) 0;
    }
    .org-chart > li > ul > li > .org-card {
      width: var(--branch-card-w);
      max-width: none;
    }

    .org-chart > li > ul > li > ul {
      position: relative;
      left: 0;
      right: calc(var(--branch-gap-x) / 2);
    }

    .org-chart > li > ul > li > ul > li > .org-card {
      max-width: calc(var(--branch-card-w) - var(--indent-margin) - var(--indent));
    }

    .org-chart > li > ul > li::before,
    .org-chart > li > ul > li::after {
      content: "";
      position: absolute;
      top: 0;
      left: auto;
      right: auto;
      width: 50%;
      height: var(--branch-gap-y);
      background: none;
      border-top: var(--line-w) solid var(--connector);
    }
    .org-chart > li > ul > li::before {
      right: 50%;
    }
    .org-chart > li > ul > li::after {
      left: 50%;
      border-left: var(--line-w) solid var(--connector); 
    }
    .org-chart > li > ul > li:first-child::before {
      border-top: none; 
    }

    .org-chart > li > ul > li:last-child::after {
      border-top: none; 
    }

    .org-chart > li > ul > li:last-child::before {
      height: var(--branch-gap-y);
    }

    /* ============================================================
       GROUPED COLUMN
       ============================================================ */

    .org-chart > li > ul > li.branch-stack {
      grid-row: span 1;
    }

    .org-chart > li > ul > li.branch-stack::before {
      content: none;
    }

    .org-chart > li > ul > li.branch-stack + li.branch-stack {
      padding-top: var(--row-pad);
    }

    .org-chart > li > ul > li.branch-stack::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0; 
      width: var(--line-w);
      height: 100%;
      background: var(--connector);
      border: none; 
    }
    .org-chart > li > ul > li.branch-stack:not(:has(+ .branch-stack))::after {
      height: calc(var(--tick-y) + var(--line-w));
    }

    .org-chart > li > ul > li.branch-stack:not(.branch-stack + li.branch-stack):not(:has(+ .branch-stack))::after {
      height: calc(var(--branch-gap-y) + var(--card-center-y) + var(--line-w));
    }

    .org-chart > li > ul > li.branch-stack > .org-card {
      position: relative; 
      width: calc(var(--branch-card-w) - var(--stack-tick));
      margin-left: var(--stack-tick);
      max-width: none; 
    }

    .org-chart > li > ul > li.branch-stack > ul {
      left: auto;
      right: auto;
      margin-left: calc(var(--indent-margin) + var(--stack-tick));
    }
    .org-chart > li > ul > li.branch-stack > .org-card::before {
      content: "";
      position: absolute;
      top: var(--card-center-y);
      --tick-reach: calc(var(--stack-tick) + var(--branch-gap-x) / 2 + var(--card-border-w));
      left: calc(-1 * var(--tick-reach));
      width: var(--tick-reach);
      height: var(--line-w);
      background: var(--connector);
    }
    /* ============================================================
       END grouped column
       ============================================================ */

    /* ============================================================
       VISIBLE DEPARTMENT LABELS
       ============================================================ */

    .org-chart.show-dept-labels > li > ul > li > .org-dept-label {
      position: static;
      width: var(--branch-card-w);
      max-width: none;
      height: auto;
      padding: var(--card-pad-y) 0.75rem;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      border: var(--card-border-w) solid var(--card-border);
      background: var(--label-bg);
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--tu-graphite);
    }

    .org-chart.show-dept-labels > li > ul > li.branch-stack > .org-dept-label {
      width: calc(var(--branch-card-w) - var(--stack-tick));
      margin-left: var(--stack-tick);
    }

    .org-chart.show-dept-labels > li > ul > li:not(.branch-stack) > .org-dept-label {
      position: relative;
    }
    .org-chart.show-dept-labels > li > ul > li:not(.branch-stack) > .org-dept-label::after {
      content: "";
      position: absolute;
      top: 100%;
      left: calc(50% - var(--line-w) / 2);
      width: var(--line-w);
      height: var(--label-gap);
      background: var(--connector);
    }

    .org-chart.show-dept-labels > li > ul > li:not(.branch-stack) > .org-dept-label + .org-card {
      margin-top: var(--label-gap);
    }
    .org-chart.show-dept-labels > li > ul > li.branch-stack > .org-dept-label + .org-card {
      margin-top: 0.5rem;
    }
    /* ============================================================
       END visible department labels
       ============================================================ */

    /* ============================================================
       GENERALIZED BUS COLUMNS
       ============================================================ */

    .org-chart li.branch-columns > ul {
      position: absolute;
      top: 100%;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      display: grid;
      align-items: start;
      grid-auto-flow: column;
      grid-auto-columns: calc(var(--branch-card-w) + var(--branch-gap-x));
      grid-template-rows: repeat(12, auto);
      column-gap: 0;
      row-gap: 0;
      margin-left: 0;
      padding-left: 0;
      padding-top: var(--branch-gap-y);
    }

    .org-chart li.branch-columns > ul::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: var(--line-w);
      height: var(--branch-gap-y);
      background: var(--connector);
    }

    .org-chart li.branch-columns > ul > li {
      grid-row: span 12;
      padding: var(--branch-gap-y) calc(var(--branch-gap-x) / 2) 0;
    }
    .org-chart li.branch-columns > ul > li > .org-card {
      width: var(--branch-card-w);
      max-width: none;
    }

    .org-chart li.branch-columns > ul > li > ul {
      position: relative;
      left: 0;
      right: calc(var(--branch-gap-x) / 2);
    }

    .org-chart li.branch-columns > ul > li::before,
    .org-chart li.branch-columns > ul > li::after {
      content: "";
      position: absolute;
      top: 0;
      left: auto;
      right: auto;
      width: 50%;
      height: var(--branch-gap-y);
      background: none;
      border-top: var(--line-w) solid var(--connector);
    }
    .org-chart li.branch-columns > ul > li::before {
      right: 50%;
    }
    .org-chart li.branch-columns > ul > li::after {
      left: 50%;
      border-left: var(--line-w) solid var(--connector);
    }
    .org-chart li.branch-columns > ul > li:first-child::before {
      border-top: none;
    }
    .org-chart li.branch-columns > ul > li:last-child::after {
      border-top: none;
    }
    .org-chart li.branch-columns > ul > li:last-child::before {
      height: var(--branch-gap-y);
    }

    .org-chart li.branch-columns > ul > li.branch-stack {
      grid-row: span 1;
    }
    .org-chart li.branch-columns > ul > li.branch-stack::before {
      content: none;
    }
    .org-chart li.branch-columns > ul > li.branch-stack + li.branch-stack {
      padding-top: var(--row-pad);
    }
    .org-chart li.branch-columns > ul > li.branch-stack::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: var(--line-w);
      height: 100%;
      background: var(--connector);
      border: none;
    }
    .org-chart li.branch-columns > ul > li.branch-stack:not(:has(+ .branch-stack))::after {
      height: calc(var(--tick-y) + var(--line-w));
    }
    .org-chart li.branch-columns > ul > li.branch-stack:not(.branch-stack + li.branch-stack):not(:has(+ .branch-stack))::after {
      height: calc(var(--branch-gap-y) + var(--card-center-y) + var(--line-w));
    }
    .org-chart li.branch-columns > ul > li.branch-stack > .org-card {
      position: relative;
      width: calc(var(--branch-card-w) - var(--stack-tick));
      margin-left: var(--stack-tick);
      max-width: none;
    }

    .org-chart li.branch-columns > ul > li.branch-stack > ul {
      left: auto;
      right: auto;
      margin-left: calc(var(--indent-margin) + var(--stack-tick));
    }
    .org-chart li.branch-columns > ul > li.branch-stack > .org-card::before {
      content: "";
      position: absolute;
      top: var(--card-center-y);
      --tick-reach: calc(var(--stack-tick) + var(--branch-gap-x) / 2 + var(--card-border-w));
      left: calc(-1 * var(--tick-reach));
      width: var(--tick-reach);
      height: var(--line-w);
      background: var(--connector);
    }

    .org-chart.show-dept-labels li.branch-columns > ul > li > .org-dept-label {
      position: static;
      width: var(--branch-card-w);
      max-width: none;
      height: auto;
      padding: var(--card-pad-y) 0.75rem;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      border: var(--card-border-w) solid var(--card-border);
      background: var(--label-bg);
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--tu-graphite);
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li.branch-stack > .org-dept-label {
      width: calc(var(--branch-card-w) - var(--stack-tick));
      margin-left: var(--stack-tick);
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li:not(.branch-stack) > .org-dept-label {
      position: relative;
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li:not(.branch-stack) > .org-dept-label::after {
      content: "";
      position: absolute;
      top: 100%;
      left: calc(50% - var(--line-w) / 2);
      width: var(--line-w);
      height: var(--label-gap);
      background: var(--connector);
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li:not(.branch-stack) > .org-dept-label + .org-card {
      margin-top: var(--label-gap);
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li.branch-stack > .org-dept-label + .org-card {
      margin-top: 0.5rem;
    }
    /* ============================================================
       END generalized bus columns
       ============================================================ */

  }

  @media (max-width: 699.98px) {
    .org-chart {
      --indent: 1rem;
      --indent-margin: 1rem;
    }
    .org-card {
      max-width: 100%;
      overflow-x: auto;
    }

    .org-chart.show-dept-labels > li > ul > li > .org-dept-label {
      position: static;
      width: 100%;
      max-width: none;
      height: auto;
      padding: var(--card-pad-y) 0.75rem;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      border: var(--card-border-w) solid var(--card-border);
      background: var(--label-bg);
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--tu-graphite);
    }
    .org-chart.show-dept-labels li.branch-columns > ul > li > .org-dept-label {
      position: static;
      width: 100%;
      max-width: none;
      height: auto;
      padding: var(--card-pad-y) 0.75rem;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      border: var(--card-border-w) solid var(--card-border);
      background: var(--label-bg);
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      color: var(--tu-graphite);
    }
    body {
      padding: 1.5rem 1rem;
    }
    header.page-header {
      gap: 1rem;
    }
    .page-header.logo {
      width: 120px;
    }
    .page-header.title {
      font-size: 0.9375rem;
    }
  }

  @media (max-width: 360px) {
    .page-header.logo {
      width: 44px;
      max-width: 44px;
    }
  }

  @media print {
    body {
      background: #fff;
    }
  }

  div:has(a#ou_de) {
    font-size: .8rem;
    margin-top: 30px;
    float: right;
  }

  a#ou_de,
  a#ou_de:hover,
  a#ou_de:visited {
    color: #676767;
    background-color: transparent;
  }