/*** FONTS ***/
@font-face {
  font-family: "hoff";
  src: url("../fonts/Hofmann.woff2") format("woff2");
}

@font-face {
  font-family: "sono";
  src: url("../fonts/GT-Cinetype-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "mini";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

/*** GENERAL ***/
:root {
  --px: 16px;
  --base: var(--px);
  --lineheight: calc(var(--base) * 1.2);
  --padd: calc(var(--base) * .45);
  --gap1: var(--padd);
  --gap2: calc(var(--lineheight) * 2);
  --buttonPadd: var(--padd);
  --hfSize: 2em;
  --boxBlurPaddSide: .7rem;

  --trans-opacity: opacity 0.35s;
  --trans-time-function: cubic-bezier(.25, 1, .5, 1);

  --serif: 'mini', times, serif;
  --mono: 'sono', courier, monospace;
  --display: 'hoff', arial, sans-serif;
  --color: #000;
  --bgCol: rgb(222, 230, 237);
  --dispSize: clamp(4.375rem, 0.25rem + 11vw, 11.25rem);
  --dispSize2: clamp(3.125rem, 0.5rem + 7vw, 7.5rem);
  --monoSize: 10.5px !important;
  --monoLtSpc: .025em;
  --ftEh: calc(var(--lineheight) * 2);
  --bTopStyle: 4px solid;
  --rgbRed: 255, 0, 0;
  --rgbGreen: 0, 255, 0;
  --rgbBlue: 0, 0, 255;
  --rgbCyan: 0, 255, 255;
  --rgbMagenta: 255, 0, 255;
  --rgbYellow: 255, 255, 0;

  --hueGreen: 120;
  --huePink: 300;
  --hueRed: 0;
  --hueBlue: 240;
  --hueCyan: 180;
  --hueYellow: 60;
  --hueGrey: 220;

  --hue-m-1: 100%, 50%;
  --hue-d-1: 100%, 40%;
  --hue-d-2: 100%, 30%;
  --hue-l-1: 100%, 62%;
  --hue-l-2: 100%, 74%;
  --hue-l-3: 100%, 92%;

  --m0-red: hsl(var(--hueRed), var(--hue-m-1));
  --l1-red: hsl(var(--hueRed), var(--hue-l-1));
  --l2-red: hsl(var(--hueRed), var(--hue-l-2));
  --l3-red: hsl(var(--hueRed), var(--hue-l-3));
  --d1-red: hsl(var(--hueRed), var(--hue-d-1));
  --d2-red: hsl(var(--hueRed), var(--hue-d-2));

  --m0-green: hsl(var(--hueGreen), var(--hue-m-1));
  --l1-green: hsl(var(--hueGreen), var(--hue-l-1));
  --l2-green: hsl(var(--hueGreen), var(--hue-l-2));
  --l3-green: hsl(var(--hueGreen), var(--hue-l-3));
  --d1-green: hsl(var(--hueGreen), var(--hue-d-1));
  --d2-green: hsl(var(--hueGreen), var(--hue-d-2));

  --m0-blue: hsl(var(--hueBlue), var(--hue-m-1));
  --l1-blue: hsl(var(--hueBlue), var(--hue-l-1));
  --l2-blue: hsl(var(--hueBlue), var(--hue-l-2));
  --l3-blue: hsl(var(--hueBlue), var(--hue-l-3));
  --d1-blue: hsl(var(--hueBlue), var(--hue-d-1));
  --d2-blue: hsl(var(--hueBlue), var(--hue-d-2));

  --m0-pink: hsl(var(--huePink), var(--hue-m-1));
  --l1-pink: hsl(var(--huePink), var(--hue-l-1));
  --l2-pink: hsl(var(--huePink), var(--hue-l-2));
  --l3-pink: hsl(var(--huePink), var(--hue-l-3));
  --d1-pink: hsl(var(--huePink), var(--hue-d-1));
  --d2-pink: hsl(var(--huePink), var(--hue-d-2));

  --m0-cyan: hsl(var(--hueCyan), var(--hue-m-1));
  --l1-cyan: hsl(var(--hueCyan), var(--hue-l-1));
  --l2-cyan: hsl(var(--hueCyan), var(--hue-l-2));
  --l3-cyan: hsl(var(--hueCyan), var(--hue-l-3));
  --d1-cyan: hsl(var(--hueCyan), var(--hue-d-1));
  --d2-cyan: hsl(var(--hueCyan), var(--hue-d-2));

  --m0-yellow: hsl(var(--hueYellow), var(--hue-m-1));
  --l1-yellow: hsl(var(--hueYellow), var(--hue-l-1));
  --l2-yellow: hsl(var(--hueYellow), var(--hue-l-2));
  --l3-yellow: hsl(var(--hueYellow), var(--hue-l-3));
  --d1-yellow: hsl(var(--hueYellow), var(--hue-d-1));
  --d2-yellow: hsl(var(--hueYellow), var(--hue-d-2));

  --m0-grey: hsl(var(--hueGrey), 4%, 50%);
  --l1-grey: hsl(var(--hueGrey), 4%, 63%);
  --l2-grey: hsl(var(--hueGrey), 4%, 77%);
  --l3-grey: hsl(var(--hueGrey), 4%, 90%);
  --d1-grey: hsl(var(--hueGrey), 4%, 37%);
  --d2-grey: hsl(var(--hueGrey), 4%, 22%);

  --grid-col: 12;
  --grid-col-gap: 0;
  --grid-row-gap: 0;

  --flx-col: 12;
}

@media (min-width: 500px) {
  :root {
    --padd: calc(var(--base) * .65);
    --buttonPadd: .7em;
    --boxBlurPaddSide: 1rem;
  }
}

@media (min-width: 800px) {
  :root {
    --px: 17px;
    --buttonPadd: 1em;
    --hfSize: 4em;
  }
}

@media (min-width: 1000px) {
  :root {
    --px: 18px;
    --monoSize: 11.5px !important;
  }
}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {
  :root {
    --px: 20px;
  }
}

@media (min-width: 1600px) {}

::-moz-selection {
  /* Code for Firefox */
  color: rgba(255, 0, 0);
  background: transparent;
}

::selection {
  color: rgba(0, 0, 0);
  background: transparent;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: var(--base);
  scroll-behavior: smooth;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  font-size: var(--base);
  line-height: var(--lineheight);
  color: var(--color);
  color: rgba(0, 0, 0, .4);
  font-family: var(--mono);
  background: var(--bgCol);
  overflow-x: hidden;
  overflow-y: hidden;
  min-width: 1vw;
  height: 100%;
  -webkit-text-size-adjust: none;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .45s;
  transition-timing-function: var(--trans-time-function);
}

body * {
  scrollbar-width: none;
  -ms-overflow-style: none
}

body *::-webkit-scrollbar {
  display: none;
}

@media (min-width:800px) {
  body {
    overflow-y: auto;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
  cursor: crosshair;
}

a:hover {}

small,
.sml {
  font-size: .875em;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

em,
b,
strong,
i {
  font-weight: normal;
  font-style: normal;
}

svg {
  overflow: visible;
}

.dt_buttons {
  position: fixed;
  top: var(--buttonPadd);
  right: var(--buttonPadd);
  display: flex;
  line-height: 1;
  z-index: 1000;
  flex-flow: row wrap;
  justify-content: flex-end;
  row-gap: .2rem;
}

.button_pathyear {
  display: flex;
  position: fixed;
  bottom: var(--buttonPadd);
  left: var(--buttonPadd);
  z-index: 900;
}

.button_year,
.button_pathway {
  margin-left: .25rem;
}

.button_course {
  transition:
    color .3s var(--trans-time-function),
    background-color .3s var(--trans-time-function);
  cursor: ne-resize;
  line-height: 1;
}

.button_course:hover {
  background-color: rgba(var(--rgbRed), .7);
  color: hsl(var(--hueRed), var(--hue-l-3));
}

.button_pathway {
  transition:
    color .3s var(--trans-time-function),
    background-color .3s var(--trans-time-function);
  cursor: help;
}

.button_pathway:hover {
  background-color: rgba(var(--rgbGreen), .7);
  color: hsl(var(--hueGreen), var(--hue-d-2));
}

.button_year {
  border-radius: 5rem !important;
  position: relative;
}

.button_year:hover,
.yearList a:hover {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
  cursor: crosshair;
  transition:
    color .3s var(--trans-time-function),
    background-color .3s var(--trans-time-function);
}

.yearList {
  opacity: 0;
  pointer-events: none;
  display: block;
  width: 100%;
  text-align: right;
  line-height: 1;
  position: absolute;
  color: rgba(0, 0, 0, .4);
  bottom: calc(2em);
  left: 0;
  transform: translate(0, -.5em);
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function);
}

.yearList a {
  border-radius: 5rem;
  line-height: 1;
  display: block;
  margin: .2rem 0;
}

.yearList.showYearList {
  opacity: 1;
  pointer-events: all;
  transform: translate(0, 0);
}

#buttonYear.buttonYearActive {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
}

@media (min-width: 800px) {
  .yearList {
    top: calc(2em);
    transform: translate(0, .5em);
  }
}


.button_dux_hp,
.button_wux_hp {
  cursor: pointer;
}

.button_dux_hp:hover {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
}

.button_pathway.button_wux.buttonPathActive {
  background-color: rgba(var(--rgbGreen), .7);
  color: hsl(var(--hueGreen), var(--hue-d-2));
}

.nav-ellipsis {
  margin-left: .25em;
  display: inline-block;
  border-radius: 8em;
  padding: .4em 1em .5em 1em;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(1em);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .1);
  transition: background-color .3s var(--trans-time-function);
  position: fixed;
  bottom: var(--buttonPadd);
  right: var(--buttonPadd);
  z-index: 1000;
}

.nav-ellipsis svg {
  height: .875em;
  fill: rgba(0, 0, 0, .4);
  transform: translateY(.1em);
  transition: fill .3s var(--trans-time-function);
}

.nav-ellipsis:hover {
  background-color: rgba(var(--rgbCyan), .7);
}

.nav-ellipsis:hover svg {
  fill: hsl(var(--hueCyan), var(--hue-d-2));
}

.nav-ellipsis.navActive {
  background-color: rgba(var(--rgbCyan), .7);
}

.nav-ellipsis.navActive svg {
  fill: hsl(var(--hueCyan), var(--hue-d-2));
}


@media (min-width: 500px) {
  .nav-ellipsis {
    position: relative;
    bottom: unset;
    right: unset;
  }
}

@media (min-width: 800px) {
  .button_pathyear {
    position: relative;
    bottom: unset;
    left: unset;
  }
}

/* LANDING */
.splash {
  position: relative;
  min-height: 100svh;
  z-index: 1;
  display: block;
  overflow: hidden;
}

.shape-container {
  position: absolute;
  z-index: 800;
  font-size: 26rem;
  overflow: visible;
  transition: color 2.5s ease-in-out;
  user-select: none;
  font-family: var(--display);
  mix-blend-mode: screen;
  line-height: .8;
  transform: translateY(-50%);
  opacity: .9;
  transition: color 3s var(--trans-time-function);
  cursor: pointer;
}

.shape-1 {
  left: -5vw;
  top: 20%;
  color: #cccccc;
}

.shape-6 {
  left: 12vw;
  top: 50%;
  color: #c0c0c0;
}

.shape-3 {
  left: 25vw;
  top: 30%;
  color: #c4c4c4;
}

.shape-2 {
  right: 30vw;
  top: 60%;
  color: #a8a9ad;
}

.shape-5 {
  right: 15vw;
  top: 10%;
  color: #bebebe;
}

.shape-4 {
  right: -5vw;
  top: 70%;
  color: #b6bbc0;
}

.shape-7,
.shape-8 {
  display: none;
}

.shape-7 {
  left: 9vw;
  top: 80%;
  color:#dcdcdc;
}

.shape-8 {
  right: -5vw;
  top: 15%;
  color: #d8d8d8;
}

.splashTitle {
  position: fixed;
  top: var(--buttonPadd);
  left: var(--buttonPadd);
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
  z-index: 900;
  /*font-size: 2em;
  max-width: 15ch;
  line-height: 1.2;*/
}

@media (min-width:500px) {
  .shape-container {
    font-size: 32rem;
  }
}
@media (min-width:1000px) {
  .shape-container {
    font-size: 40rem;
  }
  .shape-7,
  .shape-8 {
    display: block;
  }
}

/*** SCROLL SNAP ***/
.dScroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  align-items: start;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.dSecY {
  width: 100%;
  height: 100svh;
  scroll-snap-align: center;
  position: relative;
}

.dSecY:nth-child(odd) {
  background-color: hsl(0, 0%, 94%);
}

.dSecY:nth-child(even) {
  background-color: hsl(0, 0%, 90%);
}

.d_InnerScroll {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
  flex-direction: row;
  width: 100%;
  /* important */
  -webkit-overflow-scrolling: touch;
  height: 100svh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  row-gap: 2rem;
  position: relative;
  z-index: 893;
}

.d_InnerScroll::-webkit-scrollbar {
  display: none;
}

.dSecX {
  flex: none;
  scroll-snap-align: center;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  align-content: center;
  scroll-snap-align: center;
  cursor: grab;
  width: 100vw;
}

.dSecX img {
  display: block;
  max-width: 100vw;
  max-height: 100svh;
  object-fit: contain;
  padding: 4svh 0;
}

.clickmore {
  position: absolute;
  right: 2vw;
  top: calc(var(--secVheight)/2.125);
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 3.6em;
  animation: pulse 2.5s infinite ease-in-out;
  line-height: .875;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: .4;
  }

  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}

@media (min-width:800px) {
  .dSecX img {
    padding: 4svh 1.5rem;
  }
}

@media (min-width:1400px) {
  .dSecX img {
    padding: 4svh 10vw;
  }
}


.dSec_Name {
  position: absolute;
  top: var(--buttonPadd);
  left: var(--buttonPadd);
  line-height: 1;
  z-index: 899;
  font-family: 'sono';
  color: rgba(0, 0, 0, .4);
  transition:
    height .15s var(--trans-time-function),
    width .15s var(--trans-time-function),
    background-color .3s var(--trans-time-function);
  overflow: visible;
  will-change: height;
}

.dsn_show_bio {
  margin-top: .2em;
  overflow-y: scroll;

  height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.3em);
  width: calc(100vw - calc(var(--buttonPadd)*2));
  padding: 0 !important;
  max-width: 56ch;
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function),
    height 0s var(--trans-time-function) .3s;
}

.dsn_hoff_name {
  font-family: 'hoff', 'sono', sans-serif;
  font-size: var(--hfSize);
  line-height: .825;
  margin-bottom: .2em;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
}

.dsn_bio {
  font-size: .875rem;
  line-height: 1.3;
  padding: .45rem 2rem .7rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.dsn_link {
  width: 100%;
  display: block;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: .875rem;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color .3s var(--trans-time-function);
}

.dsn_link:hover {
  background-color: rgba(0, 0, 0, .05);
}

.boxblur {
  background-color: rgba(255, 255, 255, .4);
  backdrop-filter: blur(1em);
  border-radius: .2em;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .1);
}

.dsn_click_name {
  display: inline-block;
  transition:
    opacity .15s var(--trans-time-function),
    background-color .3s var(--trans-time-function),
    color .3s var(--trans-time-function);
  cursor: crosshair;
}

.dSecY:nth-of-type(3n+1) .dsn_click_name:hover {
  background-color: rgba(255, 0, 255, 0.7);
  color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecY:nth-of-type(3n+1) :is(.dsn_bio, .dsn_link) {
  border-top: 1px solid hsl(var(--huePink), var(--hue-l-2));
}

.dSecY:nth-of-type(3n+3) .dsn_click_name:hover {
  background-color: rgba(0, 255, 255, 0.7);
}

.dSecY:nth-of-type(3n+2) .dsn_click_name:hover {
  background-color: rgba(255, 255, 0, 0.7);
}


.dSecY:nth-of-type(3n+1) :is(.dsn_show_bio, .dsn_click_name.boxActive) {
  background-color: rgba(255, 0, 255, 0.7);
  color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecY:nth-of-type(3n+3) :is(.dsn_show_bio, .dsn_click_name.boxActive) {
  background-color: rgba(0, 255, 255, 0.7);
}

.dSecY:nth-of-type(3n+2) :is(.dsn_show_bio, .dsn_click_name.boxActive) {
  background-color: rgba(255, 255, 0, 0.7);
}

.dsn_show_bio.toggleBio {
  height: 100%;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}


@media (min-width: 800px) {
  .dScroll {
    height: 100%;
    overflow: visible;
  }
}


/*** AUTO VERTICAL SCROLL ***/
.nameScroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  align-items: start;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.dSecV {
  --secVheight: 97svh;
  width: 100%;
  height: var(--secVheight);
  min-height: var(--secVheight);
  scroll-snap-align: center;
  position: relative;
  overflow: visible;
}

.dSecV:nth-of-type(6n+1) {
  background-color: hsl(var(--hueRed), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+2) {
  background-color: hsl(var(--hueGreen), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+3) {
  background-color: hsl(var(--hueBlue), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+4) {
  background-color: hsl(var(--hueYellow), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+5) {
  background-color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+6) {
  background-color: hsl(var(--hueCyan), var(--hue-l-3));
}

/*
.dSecV:nth-child(odd) {background-color: hsl(0, 0%, 94%);}
.dSecV:nth-child(even) {background-color: hsl(0, 0%, 90%);}
*/
.name_box {
  position: absolute;
  top: var(--buttonPadd);
  left: var(--buttonPadd);
  padding: 0;
  z-index: 900;
  line-height: 1;
}

.name_box div {
  margin-bottom: .2rem;
}

.nb_nameline {
  display: inline-block;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
}

.nb_readmore {
  display: inline-block;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
  transition:
    color .3s var(--trans-time-function),
    background-color .3s var(--trans-time-function);
  border-radius: 5rem;
  cursor: crosshair;
}

.dSecV:nth-of-type(6n+1) .nb_readmore:hover {
  background-color: rgba(var(--rgbRed), .7);
  color: hsl(var(--hueRed), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+1) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbRed), .7);
  color: hsl(var(--hueRed), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+1) .v_bioBox {
  background-color: rgba(var(--rgbRed), .7);
  color: hsl(var(--hueRed), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+1) .v_bb_inner .dsn_link {
  border-color: hsl(var(--hueRed), var(--hue-l-2));
}

.dSecV:nth-of-type(6n+2) .nb_readmore:hover {
  background-color: rgba(var(--rgbGreen), .7);
  color: hsl(var(--hueGreen), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+2) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbGreen), .7);
  color: hsl(var(--hueGreen), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+2) .v_bioBox {
  background-color: rgba(var(--rgbGreen), .7);
  color: hsl(var(--hueGreen), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+2) .v_bb_inner .dsn_link {
  border-color: hsl(var(--hueGreen), var(--hue-d-1));
}

.dSecV:nth-of-type(6n+3) .nb_readmore:hover {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+3) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+3) .v_bioBox {
  background-color: rgba(var(--rgbBlue), .7);
  color: hsl(var(--hueBlue), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+3) .v_bb_inner .dsn_link {
  border-color: hsl(var(--hueBlue), var(--hue-l-2));
}

.dSecV:nth-of-type(6n+4) .nb_readmore:hover {
  background-color: rgba(var(--rgbYellow), .7);
  color: hsl(var(--hueYellow), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+4) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbYellow), .7);
  color: hsl(var(--hueYellow), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+4) .v_bioBox {
  background-color: rgba(var(--rgbYellow), .7);
  color: hsl(var(--hueYellow), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+4) .v_bb_inner .dsn_link {
  border-color: hsl(var(--hueYellow), var(--hue-d-1));
}

.dSecV:nth-of-type(6n+5) .nb_readmore:hover {
  background-color: rgba(var(--rgbMagenta), .7);
  color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+5) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbMagenta), .7);
  color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+5) .v_bioBox {
  background-color: rgba(var(--rgbMagenta), .7);
  color: hsl(var(--huePink), var(--hue-l-3));
}

.dSecV:nth-of-type(6n+5) .v_bb_inner .dsn_link {
  border-color: hsl(var(--huePink), var(--hue-l-2));
}

.dSecV:nth-of-type(6n+6) .nb_readmore:hover {
  background-color: rgba(var(--rgbCyan), .7);
  color: hsl(var(--hueCyan), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+6) .nb_readmore.nb_rm_open {
  background-color: rgba(var(--rgbCyan), .7);
  color: hsl(var(--hueCyan), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+6) .v_bioBox {
  background-color: rgba(var(--rgbCyan), .7);
  color: hsl(var(--hueCyan), var(--hue-d-2));
}

.dSecV:nth-of-type(6n+6) .v_bb_inner .dsn_link {
  border-color: hsl(var(--hueCyan), var(--hue-d-1));
}

.v_bioBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  padding: 0;
  aspect-ratio: 4 / 5;
  width: 380px;
  max-width: calc(92vw - (var(--padd)*2));
  z-index: 910;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function),
    height 0s var(--trans-time-function) .3s;
}

.v_bioBox.v_showBio {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%);
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function),
    height 0s var(--trans-time-function);
}

.v_bb_inner {
  padding-bottom: 3rem;
  line-height: 1.3;
  overflow-y: scroll;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 0rem, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 0rem, #000 90%, transparent);
  height: 100%;
}

.v_bb_bio {
  padding: .65rem 2.1rem 1rem var(--boxBlurPaddSide);
  font-size: .875em;
}

.v_bb_bio h3 {
  font-size: 2em;
  font-family: var(--display);
  margin-bottom: .67em;
  line-height: .875;
}

.v_bb_bio p {
  margin-bottom: calc(1em * .875);
}

.v_bb_bio p:last-of-type {
  margin-bottom: 0;
}

.v_bb_inner .dsn_link {
  border-top: 1px solid;
}

.dSecCount {
  font-size: .675em;
  border-radius: 5rem;
}

.studentThumb {
  display: flex;
  aspect-ratio: 2 / 3;
  background: rgba(255, 255, 255, .4);
  backdrop-filter: blur(1em);
  width: 45vw;
  max-width: 240px;
  position: absolute;
  z-index: 888;
  top: 5%;
  right: 5%;
  box-shadow: 0 0 1em rgba(0, 0, 0, .05);
  border-radius: .3rem;
  justify-content: center;
  align-content: center;
  overflow: hidden;
}

.studentThumb img {
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.studentThumb.studentGif {
    box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  backdrop-filter: unset;
}

.studentThumb.studentGif img {
  display: block;
  object-fit: contain;
  width: 100%;
}

.scroll_hoff_wrap {
  font-family: var(--display);
  font-size: 4.75rem;
  line-height: .8;
  display: flex;
  justify-content: center;
  text-align: center;
  align-content: center;
  align-items: center;
  height: 100%;
  padding: 0 2.5vw;
  overflow: hidden;
  position: relative;
  z-index: 880;
  opacity: .5;
}

.scroll_hoff_name {
  transform:
    rotate(-90deg) translateY(-.1em);
}

.scroll_hoff_name span {
  transition: color .3s var(--trans-time-function);
}

.dSecV .d_InnerScroll {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--secVheight);
}

.dSecV .d_InnerScroll .dSecX img {
  height: var(--secVheight);
  padding-left: var(--buttonPadd);
  padding-right: var(--buttonPadd);
}

.v_bioClose {
  position: absolute;
  top: .15em;
  right: var(--padd);
  font-size: 1.275em;
  line-height: .875;
  font-family: var(--display);
  cursor: pointer;
}

@media (min-width: 800px) {
  .dSecV {
    --secVheight: 92svh;
  }

  .scroll_hoff_wrap {
    font-size: clamp(3.125rem, -1.9231rem + 16.1538vw, 16.25rem);
  }

  .scroll_hoff_name {
    padding: 0 8vw;
    transform: rotate(0) translateY(-.175em);
  }

  .v_bioBox {
    font-size: 1em;
    width: 460px;
    aspect-ratio: unset;
    height: calc(var(--secVheight) - (var(--buttonPadd)*10));
  }

  .dSecV .d_InnerScroll .dSecX img {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .studentThumb {
    top: 50%;
    right: unset;
    left: var(--buttonPadd);
    transform: translate(0,-50%);
  }
}

@media (min-width: 1400px) {
  .dSecV .d_InnerScroll .dSecX img {
    padding-left: 15vw;
    padding-right: 15vw;
  }
}

/*** PATHWAY OVERLAY ***/
#pathwayOverlay {
  position: fixed;
  bottom: 50%;
  left: var(--buttonPadd);
  width: 40ch;
  max-width: calc(90vw - (var(--buttonPadd)*2));
  z-index: 910;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: none;
  transform: translate(-3%, 50%);
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function);
}

#pathwayOverlay.showPathway {
  opacity: 1;
  transform: translate(0, 50%);
  pointer-events: all;
}

.wuxPathwayOv {
  background-color: rgba(240, 240, 240, .7);
  backdrop-filter: blur(1rem);
  padding: 0 !important;
}

.overlayInner {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.ovHf {
  font-family: var(--display);
  font-size: var(--hfSize);
  line-height: .825;
  margin-bottom: .1875em;
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
  overflow-wrap: break-word;
}

.overlayInner h3 {
  padding: .45rem var(--boxBlurPaddSide) .5rem var(--boxBlurPaddSide);
}

.ovCourseInfo {
  font-size: .75rem;
  line-height: 1.3;
  padding: .45rem 2rem .5rem var(--boxBlurPaddSide);
  border-top: 1px solid rgba(0, 0, 0, .1);
}

:is(.ovCourseInfo, .dsn_bio) p {
  margin-bottom: 1em;
}

:is(.ovCourseInfo, .dsn_bio) p:last-of-type {
  margin-bottom: 0;
}

.wuxPathwayOv .ovCourseInfo {
  border-color: rgba(0, 0, 0, .1);
}

@media (min-width: 500px) {
  .ovCourseInfo {
    font-size: .875rem;
  }
}

@media (min-width: 800px) {
  #pathwayOverlay {
    left: 5vw;
  }

  /*#pathwayOverlay {
    bottom: 3rem;
    left: 3rem;
      transform: translate(0,-1em);
  }
  #pathwayOverlay.showPathway {
    transform: translate(0,0);
  }*/
}

/*** SITE OVERLAY ***/
#siteOverlay {
  position: fixed;
  bottom: 50%;
  right: var(--buttonPadd);
  width: 40ch;
  max-width: calc(87vw - (var(--buttonPadd)*2));

  z-index: 910;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: none;
  transform: translate(3%, 50%);
  transition:
    opacity .15s var(--trans-time-function),
    transform .15s var(--trans-time-function);
  background-color: rgba(255, 255, 255, .4);
  padding: 0 !important;
}

#siteOverlay.showSiteOv {
  opacity: 1;
  transform: translate(0, 50%);
  pointer-events: all;
}

#siteOverlay h2 {
  font-size: var(--hfSize);
  line-height: .825;
}

#siteOverlay :is(p, ul) a {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  transition: border .3s var(--trans-time-function);
}

#siteOverlay :is(p, ul) a:hover {
  border-bottom: 1px solid rgba(0, 0, 0, .5);
}

.ovSmlText {
  font-size: .65em;
  line-height: 1.3;
}

.sOcredits {
  max-width: 60ch;
}

.sOcredits ul {
  columns: 2;
  column-gap: 3em;
}

.sOcredits ul li {
  margin-left: 1em;
  text-indent: -1em;
}

@media (min-width: 500px) {
  #siteOverlay {
    max-width: calc(94vw - (var(--buttonPadd)*2));
    height: unset;
    max-height: calc(100svh - 5.4rem);
  }
}

@media (min-width: 800px) {
  #siteOverlay {
    right: 5vw;
  }
}

/*** NAV ***/
.ovNav {
  --ovWid: clamp(300px, 100vw, 600px);
  position: fixed;
  top: 0;
  left: 0;
  width: var(--ovWid);
  z-index: 999;
  display: flex;
  flex-flow: row wrap;
  background: transparent;
  line-height: 1.1;
  transition:
    opacity .3s,
    transform .5s;
  transition-timing-function:
    var(--trans-time-function),
    var(--trans-time-function);
}

.ovNav .wCol {
  width: 50%;
}

.ovNav .wCol ul li a,
.nav-col-padd a,
.nav-li div {
  padding: var(--padd) var(--padd) calc(var(--padd)*1.3) var(--padd);
}

.ovNav .wCol ul li a,
.wCol a {
  display: block;
  width: 100%;
  transition: background-color .15s;
  transition-delay: 3s;
}

.nav-wux li,
.nav-dux li {
  background-color: white;
}

.nav-wux li:nth-of-type(even) {
  background-color: var(--l3-grey);
}

.nav-dux li:nth-of-type(odd) {
  background-color: var(--l3-grey);
}

.ovNav .wCol ul li a:hover,
.wCol a:hover {
  color: black;
  transition-delay: 0s;
}

/*** INDEX ***/
.ind-modal {
  --ovWid: calc(100vw - (var(--padd)*2));
  position: absolute;
  z-index: 2;
  display: flex;
  flex-flow: row wrap;
  transition:
    opacity .3s,
    transform .3s;
  transition-timing-function:
    var(--trans-time-function),
    var(--trans-time-function);
  box-shadow: 0 12px 50px -12px rgb(0 0 0 / .25);
  overflow: scroll;
  pointer-events: none;
  opacity: 0;
  border-radius: .25em;
  font-family: var(--serif);
  padding: calc(var(--padd)/1.115) var(--padd);
}

.mod-1 {
  top: calc(50% - (80px + (var(--padd)/2)));
  left: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 1em));
  width: var(--ovWid);
  max-width: 420px;
  height: 160px;
  background: var(--l3-grey);
}

.mod-2 {
  top: calc(50% + (80px + (var(--padd)/2)));
  left: 50%;
  transform: translateX(-50%) translateY(calc(-50% + 1em));
  width: var(--ovWid);
  max-width: 420px;
  height: 160px;
  transition-delay: .1s;
  background: var(--d2-grey);
}

@media (min-width:800px) {}

.ind-modal.mod-on {
  transform: translateY(-50%) translateX(-50%);
  opacity: 1;
  pointer-events: all;
}

.mod-2.mod-on {
  transition-delay: .1s;
}

.ind-modal:hover {
  transform: translateY(-50%) translateX(calc(-50% + 1em));
}

.ind-modal h4 {
  font-size: 150%;
  display: block;
  width: 100%;
}

.iMsvg {
  max-height: 38px;
  fill: var(--m0-grey);
}

.iMflx {
  width: 100%;
}

.iMleft,
.iMright {
  width: 50%;
}

.iMright {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
}

/* strand overlay */
.ovCenter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
  z-index: 999;
}

#ovWux {
  background: var(--l3-grey);
}

#ovDux {
  background: var(--d2-grey);
  color: var(--l1-grey);
}

.ovStrand {
  --ovWid: calc(100vw - (var(--padd)*2));
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(calc(-50% + 1em)) translateX(-50%);
  width: var(--ovWid);
  max-width: 420px;
  display: flex;
  opacity: 0;
  transition:
    opacity .3s,
    transform .5s;
  transition-timing-function:
    var(--trans-time-function),
    var(--trans-time-function);
  border-radius: .25em;
  padding: calc(var(--padd)/1.115) var(--padd);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  pointer-events: none;
}

.ovStrand.strand-on {
  pointer-events: all;
  opacity: 1;
  transform: translateY(-50%) translateX(-50%);
}

.ovStTop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--l1-grey);
  padding-bottom: 5px;
  margin-bottom: var(--padd);
}

.ovStFooter {
  width: 100%;
  display: flex;
  margin-top: calc(var(--padd)*2);
}

.ovStFtLink {
  width: 100%;
  border-top: 1px solid var(--l1-grey);
  border-bottom: 0 !important;
  padding: 5px 0;
}

.serif {
  font-family: var(--serif);
}

/*** INFO ***/
.overlay,
.oVnav,
.bgSec {
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.overlay.ovHue {
  transform: translateY(var(--base));
}

.overlay.ovNav {
  transform: translateY(-1em);
}

.bgSec {
  transform: translateY(0);
}

.ovHue {
  --ovWid: calc(100vw - (var(--padd)*2));
  position: fixed;
  bottom: var(--padd);
  right: var(--padd);
  width: var(--ovWid);
  max-width: 420px;
  min-height: calc(var(--lineheight) * 4);
  z-index: 999;
  display: flex;
  transition:
    opacity .3s,
    transform .5s;
  transition-timing-function:
    var(--trans-time-function),
    var(--trans-time-function);
  border-radius: .25em;
  padding: calc(var(--padd)/1.115) var(--padd);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}

.ovHue p {
  text-indent: 4ch;
}

.ovBox a {
  border-bottom: 1px solid;
}

.ovBox a:hover {
  color: black;
}

.overlay.info-open,
.overlay.nav-open,
.bgSec.bg-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
  overflow: scroll;
}

.ovCon {
  display: flex;
  height: 100%;
  min-width: 100%;
}

.ovBox {
  width: 100%;
  position: relative;
  font-family: var(--mono);
  letter-spacing: var(--monoLtSpc);
  line-height: 1.25;
}

.ovTtl {
  font-family: var(--serif);
  font-size: 175%;
  display: block;
  margin-bottom: .5em;
}

.ovCls {
  width: 100%;
  color: rgba(var(--midGrey), 1);
  margin-bottom: calc(var(--padd) * 2);
}

.ovCls a:hover {
  color: var(--color);
}

/*=== MEDIA QUERIES ===*/

@media (min-width: 500px) {}

@media (min-width: 800px) {}

@media (min-width: 1000px) {}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {}