:root {
  --gt-border-radius: 0.5rem;
  --title-width: 48rem;
  --gt-text-width: 36rem;
  --width-title: 48rem;
  --width-text: 36rem;
  --gt-buzz: 235,182,40;         /* #ebb728 -- Buzz Yellow without the red tint */
}

p+h2, p+h3 {
  margin-top: 3rem;
}

code {
  display: block;
  background-color: rgb(var(--gt-pimile-lt));
  color: rgb(var(--gt-info));
  margin: 0.5rem;
  padding: 0.5rem 1rem 0.35rem;
}

.ienotice { display: none; }

.aspect {
  display: flex;
  justify-content: center;
}
.aspect::before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  padding-bottom: 56.25%; /* default to 16:9 */
}

.aspect.ratio-3-1::before   { padding-top: 33.33333%; }
.aspect.ratio-80-27::before { padding-top: 33.75%; }
.aspect.ratio-2-1::before   { padding-top: 50%; }
.aspect.ratio-5-2::before   { padding-top: 40.00%; }
.aspect.ratio-21-9::before  { padding-top: 42.85714%; }
.aspect.ratio-12-5::before  { padding-top: 41.66667%; }
.aspect.ratio-16-9::before  { padding-top: 56.25%; }
.aspect.ratio-5-3::before   { padding-top: 60.00%; }
.aspect.ratio-3-2::before   { padding-top: 66.66666%; }
.aspect.ratio-4-3::before   { padding-top: 75%; }
.aspect.ratio-1-1::before, .aspect.ratio-square::before  { padding-top: 100%; }
.aspect.ratio-3-4::before   { padding-top: 133.33333%; }
.aspect.ratio-passport::before { padding-top: 128%; }
.aspect.ratio-5-7::before   { padding-top: 140%; }
.aspect.ratio-2-3::before   { padding-top: 150%; }
.aspect.ratio-9-16::before  { padding-top: 177.77777%; }
.aspect.ratio-1-2::before   { padding-top: 200%; }
.aspect.ratio-1-3::before   { padding-top: 300%; }

@media only screen and (max-width: 77rem) {
  .corpus {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.caisson {
  max-width: var(--title-width, 60rem);
  color: rgb(var(--gt-text));
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2rem;
}

.-dark a:link, .-dark a:visited {
  color: rgb(var(--gt-gold-pale));
}
.-dark .caisson {
  color: rgb(var(--gt-gold-pale));
  background-color: rgb(var(--gt-black-lt));
}
.-dark .caisson h3 {
  color: rgb(var(--gt-gold-offset));
}

.back-it-up {
  margin-top: -6rem;
  border-radius: 3px;
  background-color: #f7f6f0;
  background-color: rgb(var(--gt-gold-pale));
}

section.topic h2 {
  color: rgb(var(--gt-gold-med));
  text-align: center;
}

.topic.-dark {
  background-color: rgb(var(--gt-black-lt));
}
.topic.-intro .caisson p::first-line {
  font-weight: 400;
  font-size: -webkit-calc(100% + 0.15rem);
  font-size: calc(100% + 0.15rem);
}

aside .coffer {
  color: rgb(var(--gt-text));
  background-color: rgba(var(--gt-gold),10%);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}
aside.dark .coffer {
  box-shadow: inset 0 0 1rem rgb(var(--gt-black-lt));
  color: white;
}
aside.-right {
  margin-right: 0;
}
aside .coffer h3 {
  color: rgb(var(--gt-gold-dark));
}
aside.dark .coffer h3 {
  color: rgb(var(--gt-gold-offset));
}

@media only screen and (min-width: 800px) {
  .-with-aside { /* assume left placement first*/
    display: flex;
	flex-wrap: nowrap;
  }
  .-with-aside div {
	flex: 0 1 74%;
    padding-right: 2rem
  }
  .-with-aside aside {
    flex: 0 1 26%;
	order: 2;
  }
}

.-col,
.topic.-col {
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
}
.topic.-col .content {
  background: var(--gt-gold-grad);
  padding: 1rem;
  margin-bottom: 1rem;
  flex: 0 0 20rem; /* defaults to 3 across */
}
.topic.-col-2 .content {
  flex: 0 0 36rem;
}
.topic.-col-4 .content {
  flex: 0 0 15rem;
}

.jumplink, .gt-jump {
  display: block;
  margin-left: 1rem;
  margin-right: 1rem;
  text-align: center;
  font-weight: 400;
  width: calc(100% - 2rem);
}
.gt-jump a, .jumplink a {
  display: block;
  margin: 2rem auto 1rem auto;

  text-align: center;
  background-color: transparent;

  padding: 0.6rem 1.5rem 0.4rem;
  font-weight: 500;
  border-radius: var(--gt-border-radius);
  outline: none;
}
.gt-jump.inline, .gt-jump.inline a,
.jumplink.inline, .jumplink.inline a {
  display: inline-block;
  margin: 0 0 0 0.25rem;
  width: auto;
}

.gt-jump a span:after,
.jumplink a span:after {
  margin-left: 0.25rem;
  font-size: inherit;
  display: inline-block;
  width: 0.55em;
}
.gt-jump a:link, .gt-jump a:visited,
.jumplink a:link, .jumplink a:visited {
  color: inherit;
  fill: #023;
  background-color: rgb(var(--gt-buzz));
  text-decoration: none;
  top: 0.6rem;
}
.gt-jump a span:after, .gt-jump a:visited span:after,
.jumplink a span:after, .jumplink a:visited span:after {
  color: #023;
  fill: #023;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" preserveAspectRatio="xMidYMid meet"><polygon fill="currentColor" class="fa-secondary" points="4.9,0 0,0 4.9,8.5 0,17 4.9,17 9.8,8.4"/><polygon fill="currentColor" class="fa-primary" points="10.5,0 5.7,0 10.5,8.4 5.7,17 10.5,17 15.5,8.4"/></svg>');
}
.gt-jump a:hover, .gt-jump a:focus,
.jumplink a:hover, .jumplink a:focus {
  color: #ebb728;
  fill: #ebb728;
  background-color: #023;
  text-decoration: underline;
}
.gt-jump a:hover span:after,
.jumplink a:hover span:after {
  color: #ebb728;
  fill: #ebb728;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" preserveAspectRatio="xMidYMid meet"><polygon fill="currentColor" class="fa-secondary" points="4.9,0 0,0 4.9,8.5 0,17 4.9,17 9.8,8.4"/><polygon fill="currentColor" class="fa-primary" points="10.5,0 5.7,0 10.5,8.4 5.7,17 10.5,17 15.5,8.4"/></svg>');
}
.gt-jump a:active,
.jumplink a:active {
  color: #fff;
  fill: #fff;
  background-color: #023;
  text-decoration: underline;
}
.gt-jump a:active span:after,
.jumplink a:active span:after {
  color: #fff;
  fill: #fff;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" preserveAspectRatio="xMidYMid meet"><polygon fill="currentColor" class="fa-secondary" points="4.9,0 0,0 4.9,8.5 0,17 4.9,17 9.8,8.4"/><polygon fill="currentColor" class="fa-primary" points="10.5,0 5.7,0 10.5,8.4 5.7,17 10.5,17 15.5,8.4"/></svg>');
}

.gt-jump a span.visually-hidden,
.jumplink a span.visually-hidden,
.gt-jump a span.visually-hidden:after,
.jumplink a span.visually-hidden:after {
  display: none;
}

.dl-info {
  font-size: 0.75em;
}

@media only screen and (min-width: 800px) {
.deck, .jackets {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
}
.card, .jacket {
  flex: 0 1 calc(25% - 1rem);
  padding: 0.5rem 1rem;
  background: rgba(var(--gt-diploma), 0.6);
}
.deck.-max2 .card, .jackets.-max2 .jacket {
  flex: 0 1 calc(50% - 1rem);
}
.deck.-max3 .card, .jackets.-max3 .jacket {
  flex: 0 1 calc( (100%/3) - 1rem);
}

.jacket h3, .card h3, .jacket-title {
  min-height: 2em;
  margin-bottom: 0.5em;
  text-align: left;
}

.gt-cta {
  background-color: rgb(var(--gt-navy));
  color: rgb(var(--gt-pimile-lt));
  box-shadow: inset 0 0 1rem rgb(var(--gt-black));
}
.gt-cta .caisson {
  background-color: transparent;
  color: rgb(var(--gt-pimile-lt));
  padding: 2rem 2rem;
}
.gt-cta .caisson h3 {
  color: rgb(var(--gt-pimile-lt));
}
#main .gt-cta .caisson a:link, #main .gt-cta .caisson a:visited,
.gt-cta .caisson a:link, .gt-cta .caisson a:visited {
  color: rgb(var(--gt-pimile-lt));
  text-decoration-color: rgb(var(--gt-buzz));
}
#main .gt-cta .caisson .cta-link a,
.cta-link a {
  display: inline-block;
  border-radius: var(--gt-border-radius);
  font-weight: 500;
  font-size: var(--scale1);
  letter-spacing: .02rem;
  padding: .5em .75em;
  border: 0;

  vertical-align: middle;
  user-select: none;
  padding: .375rem .75rem;
  line-height: 1.5;
}
#main .gt-cta .caisson .cta-link a:link, #main .gt-cta .caisson .cta-link a:visited,
.cta-link a:link, .cta-link a:visited {
  background: rgb(var(--gt-gold));
  color: rgb(var(--gt-black));
  text-decoration: none;
}
#main .gt-cta .caisson .cta-link a:hover,
.cta-link a:hover {
  background: rgb(var(--gt-gold-lt));
  text-decoration: rgb(var(--gt-black));
}
#main .gt-cta .caisson .cta-link a:active,
.cta-link a:active {
  background: rgb(var(--gt-black));
  text-decoration: rgb(var(--gt-pimile-lt));
}

.topic .flex,
.flex {
  margin-bottom: 3rem;
}
@media only screen and (min-width: 800px) {
.topic .flex,
.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
}
.flex.-max2 div {
  flex: 0 1 calc(50% - 1rem);
}
.grid {
  display: grid;
}
.grid.-max2 {
  grid-template-columns: 50% 50%;
}
