:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --glass-surface: radial-gradient(ellipse at 8% 0%, #ffffff26, transparent 62%),
    linear-gradient(146deg, #a8a8a833, #62626226 59%, #9b9b9b32);
  --glass-edge: #f4f4f44d;
  --glass-shadow: inset 0 1px #ffffff30, inset 0 -1px #ffffff0d, 0 18px 45px #0005;
  --glass-radius: clamp(24px, 3vw, 36px);
  --glass-ease: cubic-bezier(.2,.75,.25,1);
}
html, html:has(.course-black) { background: #070707; }
.black-home, .black-bio, .course-black {
  --ink: #f8f7f4;
  --muted: #d2d2d2;
  --rule: var(--glass-edge);
  color: var(--ink);
  background:
    radial-gradient(ellipse 46rem 28rem at 12% 16rem, #383838, transparent 75%),
    radial-gradient(ellipse 52rem 42rem at 94% 46rem, #262626, transparent 80%),
    #080808;
}
.black-home::before, .black-bio::before, .course-black::before { opacity: .14; }
.black-home .topbar-inner, .black-bio .topbar-inner {
  width: min(100% - 2rem, 76rem);
  min-height: clamp(3.75rem, 8vw, 5.25rem);
}
.glass, .black-bio .frost,
.black-bio .bio-stories details, .course-black .instructor-hero,
.course-black .instructor-panel, .course-black .course-portfolio,
.course-black [aria-labelledby="payment"] {
  border: 1px solid var(--glass-edge);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(34px) saturate(128%);
  backdrop-filter: blur(34px) saturate(128%);
}
.black-bio .frost, .course-black .instructor-hero, .course-black .instructor-panel,
.course-black .course-portfolio, .course-black [aria-labelledby="payment"] {
  border-radius: var(--glass-radius);
}
.menu summary, .black-button.glass, .course-toolbar a,
.course-black .instructor-intro .instructor-button, .course-black .instructor-contact,
.course-black .instructor-footer .glass {
  color: var(--ink);
  background: linear-gradient(132deg, #ffffff26, #ffffff0d);
  border: 1px solid var(--glass-edge);
  border-radius: 99px;
  box-shadow: inset 0 1px #ffffff21;
  font: 550 .92rem/1.3 var(--sans);
  transition: transform 320ms var(--glass-ease), background-color 320ms;
}
.menu summary:active, .black-button:active, .course-toolbar a:active,
.instructor-button:active, .instructor-contact:active { transform: scale(.96); }
.menu-panel.glass { background: #353535ea; }
.black-title { padding: .7rem 1rem 0; }
.black-title h1 {
  font-size: clamp(2.45rem, 9vw, 5.15rem);
  line-height: 1;
  text-transform: none;
  letter-spacing: -.065em;
}
.black-title em { display: inline; margin: 0 .09em; font-size: 1.17em; }
.black-title p {
  margin-top: .65rem;
  font: 500 .75rem/1.45 var(--sans);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.roulette { width: min(100%, 79rem); margin-top: clamp(1.15rem, 4vw, 2.1rem); }
.roulette-caption {
  margin-bottom: .35rem;
  font: 500 .84rem/1.4 var(--sans);
  color: var(--muted);
}
.roulette[data-ready] .roulette-stage {
  --card: clamp(12.5rem, 67vw, 17rem);
  gap: clamp(.55rem, 2vw, .95rem);
  padding-block: .85rem 1.5rem;
}
.roulette[data-ready] .course-card,
.roulette .course-card {
  position: relative;
  aspect-ratio: 10 / 17;
  border-radius: var(--glass-radius);
  border-color: #ffffff74;
  isolation: auto;
  opacity: .9;
  background: #424242;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 360ms var(--glass-ease);
}
.roulette[data-ready] .course-card.is-centered { opacity: 1; }
.course-card img { z-index: 0; }
.course-card-photo::after {
  z-index: 1;
  background: linear-gradient(180deg, #0000 41%, #0002 65%, #171717b5);
  box-shadow: inset 0 1px #ffffff6b, inset 0 0 0 1px #ffffff17;
}
.roulette .course-card > span {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  min-height: 5.65rem;
  margin: 0 .55rem .55rem;
  padding: .7rem .8rem;
  border: 1px solid #ffffff50;
  border-radius: 24px;
  background: radial-gradient(ellipse at 4% 0%, #ffffff39, transparent 82%),
    linear-gradient(150deg, #36363666, #25252596 72%, #64646485);
  box-shadow: inset 0 1px #ffffff30, 0 7px 22px #0004;
  -webkit-backdrop-filter: blur(35px) saturate(135%);
  backdrop-filter: blur(35px) saturate(135%);
  text-align: left;
  font-size: clamp(1rem, 4.6vw, 1.6rem);
  text-shadow: 0 1px 3px #0009;
}
.course-card > span::after {
  content: "";
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid #ffffff57;
  background: #ffffff17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12l8-8M5 4h7v7' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.roulette-dots { margin: -.55rem 0 .5rem; }
.roulette-dots button { width: 44px; }
.roulette-dots button[aria-pressed="true"]::after { width: 15px; border-radius: 8px; transform: none; }
.academics { width: min(100% - 2rem, 76rem); margin-bottom: 3.5rem; }
.academics h2 { text-align: left; font-size: clamp(1.7rem, 5vw, 3.15rem); letter-spacing: -.035em; text-transform: none; }
.academics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 4px;
  column-gap: clamp(.55rem, 2vw, 1rem);
  align-items: start;
}
.academics .academics-tile {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: .3rem;
  margin: 0 0 .75rem;
  border-radius: clamp(14px, 3vw, 24px);
}
.academics-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(10px, 2.5vw, 19px);
}
@media (min-width: 640px) {
  .academics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 920px) {
  .academics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.academics-view::backdrop { background: #080808b5; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.academics-view:modal { animation: glass-open 420ms var(--glass-ease) both; }
.academics-frame { border-radius: var(--glass-radius); }
@keyframes glass-open {
  from { opacity: 0; translate: 0 12px; scale: .98; }
  to { opacity: 1; translate: 0; scale: 1; }
}
.course-toolbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  width: min(100% - 2rem, 56rem);
  margin: 0 auto;
  padding-block: .85rem .25rem;
}
.course-toolbar a { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .85rem; text-decoration: none; }
.course-toolbar a:last-child {
  background: #f5f3ef;
  color: #171717;
  scroll-margin-top: 1rem;
}
.course-black .instructor-page { padding-top: .65rem; animation: glass-open 480ms var(--glass-ease) both; }
.course-black .instructor-hero {
  border: 1px solid var(--glass-edge);
  overflow: hidden;
  gap: clamp(.85rem, 2.5vw, 1.5rem);
}
.course-black .instructor-hero .instructor-photo {
  border-radius: 25px;
}
.course-black .instructor-intro {
  display: block;
  align-self: center;
  min-width: 0;
  padding: clamp(1rem, 4vw, 2rem);
  border-radius: 25px;
  border: 1px solid #ffffff33;
  background: linear-gradient(146deg, #70707082, #333333a1);
  -webkit-backdrop-filter: blur(35px) saturate(128%);
  backdrop-filter: blur(35px) saturate(128%);
  box-shadow: var(--glass-shadow);
}
.course-black .instructor-intro h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); }
.course-black .instructor-intro .duration-stamp { border-radius: 99px; }
.course-black .instructor-intro .instructor-button { display: inline-flex; align-items: center; min-height: 44px; }
.course-black .instructor-panel h2, .course-black .course-portfolio h2 { text-align: left; }
.course-black .course-editorial, .course-black .payment-method { border-radius: 20px; }
.course-black .instructor-contact { background: #f5f3ef; color: #151515; }
.course-details { margin-top: .65rem; }
.course-details summary {
  cursor: pointer;
  min-height: 44px;
  padding: .7rem .9rem;
  border-radius: 18px;
  border: 1px solid #ffffff40;
  background: #ffffff14;
}
.course-black #payment { scroll-margin-top: 1rem; }

.black-bio .bio-hero-photo img {
  height: auto;
  max-height: 38rem;
  object-fit: contain;
  border-radius: calc(var(--glass-radius) - 4px);
}
.black-bio .bio-highlight {
  width: fit-content;
  padding: .75rem 1.4rem;
  margin-top: -2.3rem;
  background: linear-gradient(140deg, #85858591, #4545458c);
}
.black-bio .bio-link img, .black-bio .bio-close > img { border-radius: 22px; }
@media (min-width: 720px) {
  .roulette[data-ready] .roulette-stage { --card: calc((100% - 4 * .95rem) / 5); }
  .roulette[data-ready] .course-card > span { font-size: clamp(.9rem, 1.95vw, 1.49rem); }
  .black-bio .bio-intro { display: grid; grid-template-columns: 1.04fr .96fr; gap: 0 1.25rem; text-align: left; }
  .black-bio .bio-hero-photo { grid-column: 1; grid-row: 1 / 3; width: 100%; }
  .black-bio .bio-heading { grid-column: 2; grid-row: 1; align-self: end; }
  .black-bio .bio-highlight { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin: 1.2rem 0 0 -2.6rem; text-align: center; }
  .black-bio .bio-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .course-black .instructor-hero { padding: .35rem; gap: 0; }
  .course-black .instructor-hero .instructor-photo { max-height: 29rem; }
  .course-black .instructor-intro { position: relative; margin: -2.4rem .35rem .35rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .course-black .instructor-page, .academics-view:modal { animation: none; }
  .roulette[data-ready] .course-card { transform: none; transition: none; }
  .menu summary, .black-button.glass, .course-toolbar a,
  .course-black .instructor-intro .instructor-button, .course-black .instructor-contact { transition: none; }
}

/* The campaign wordmark keeps its type. Interface text follows the system UI. */
body:is(.black-home, .black-bio, .course-black) {
  --serif: var(--sans);
  --script: var(--sans);
  --ink: #f8f8f8;
  --muted: #dedede;
  --glass-surface: radial-gradient(ellipse at 8% 0%, #ffffff31, transparent 64%),
    linear-gradient(140deg, #66666665, #30303068 72%, #75757563);
  background:
    radial-gradient(ellipse 40rem 31rem at 50% 22rem, #363636, transparent 85%),
    radial-gradient(ellipse 43rem 28rem at 0% 66rem, #252525, transparent 76%),
    #060606;
}
.black-title h1 { font-family: "Playfair Display", Georgia, serif; }
.black-title h1 em { font-family: "Symphony", "Pinyon Script", cursive; }
.black-title p { letter-spacing: .08em; text-transform: none; font-size: .86rem; }
.roulette-caption { font-weight: 600; }
.roulette { width: min(100%, 68rem); }
.roulette[data-ready] .roulette-stage {
  --card: min(77vw, 20.5rem);
  gap: clamp(.6rem, 2vw, 1.4rem);
  padding-block: 1rem 1.5rem;
}
.roulette .course-card,
.roulette[data-ready] .course-card {
  aspect-ratio: 10 / 18;
  border: 1px solid #ffffffa1;
  border-radius: clamp(28px, 4vw, 36px);
  box-shadow: 0 22px 44px #0007;
}
.roulette .course-card > img {
  object-position: center 32%;
}
.roulette .course-card-photo::after {
  background: linear-gradient(180deg, #0002, transparent 28%, transparent 63%, #14141466);
  box-shadow: inset 0 0 0 1px #ffffff2b;
}
.roulette .course-card > .course-card-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: .45rem;
  min-height: clamp(9rem, 45vw, 11rem);
  margin: 0;
  padding: clamp(1rem, 4.3vw, 1.5rem);
  border: 0;
  border-top: 1px solid #ffffff70;
  border-radius: 0;
  background: linear-gradient(145deg, #4d4d4d7d, #8b8b8b61 59%, #303030ad);
  box-shadow: inset 0 1px #ffffff25;
  -webkit-backdrop-filter: blur(38px) saturate(115%);
  backdrop-filter: blur(38px) saturate(115%);
  text-shadow: 0 1px 3px #0006;
}
.course-card > .course-card-sheet::after { display: none; }
.course-card-sheet strong {
  font: 750 clamp(1.48rem, 6.1vw, 2.06rem)/1.02 var(--sans);
  letter-spacing: -.044em;
  text-wrap: balance;
}
.course-card-subtitle { color: #f4f4f4; font: 500 .87rem/1.35 var(--sans); }
.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  padding-top: .55rem;
  margin-top: .1rem;
  border-top: 1px solid #ffffff49;
  font: 650 .82rem/1.25 var(--sans);
}
.course-card-footer small { font: inherit; color: #ebebeb; }
.course-card-footer b { margin-left: .2rem; }
.roulette .course-card:focus-visible { outline-offset: -5px; }
.academics h2, .black-bio .bio-main h2, .course-black .instructor-panel h2,
.course-black .course-portfolio h2 { font-weight: 730; letter-spacing: -.035em; }
.academics h2 { text-transform: none; }
.course-black .instructor-hero {
  position: relative;
  display: grid;
  align-content: end;
  grid-template-columns: 1fr;
  min-height: 33rem;
  padding: 0;
}
.course-black .instructor-hero .instructor-photo {
  grid-area: 1 / 1;
  align-self: stretch;
  width: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.course-black .instructor-hero .instructor-photo img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transform: none;
}
.course-black .instructor-hero .certificate-display img {
  object-fit: contain;
  padding: .75rem;
}
.course-black .instructor-intro {
  position: relative;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  width: min(100% - 2rem, 27rem);
  margin: 12rem 1rem 1rem;
  padding: clamp(1rem, 4vw, 1.8rem);
  text-align: left;
  background: linear-gradient(150deg, #484848a6, #60606087 70%, #242424a8);
  border-color: #ffffff57;
  box-shadow: inset 0 1px #ffffff25;
}
.course-black .instructor-intro h1, .black-bio .bio-heading h1 {
  font: 760 clamp(2.1rem, 6vw, 3.65rem)/1.02 var(--sans);
  letter-spacing: -.055em;
}
.course-black .instructor-intro h1 em {
  font: 600 .43em/1.3 var(--sans);
  letter-spacing: 0;
  margin-top: .5rem;
}
.course-black .instructor-intro p:not(.duration-stamp) { margin-inline: 0; color: #fff; }
.course-black .instructor-intro .duration-stamp { justify-content: flex-start; }
.course-black .instructor-panel .instructor-topics li,
.course-black .included-list li {
  border-radius: 12px;
  background: #ffffff0b;
  padding-block: .58rem;
}
.black-bio .bio-heading h1 em, .black-bio .bio-belief h2 em {
  font: inherit;
}
.black-bio .bio-highlight strong { font-weight: 750; }
.black-bio .bio-intro { position: relative; }
.black-bio .bio-heading {
  align-self: end;
  padding: 1.2rem;
  border-radius: 24px;
  border: 1px solid #ffffff50;
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(36px);
  backdrop-filter: blur(36px);
}
@media (min-width: 720px) {
  .roulette[data-ready] .roulette-stage { --card: clamp(13.5rem, 28vw, 19.5rem); }
  .roulette[data-ready] .course-card:not(.is-centered) { opacity: .86; }
  .black-bio .bio-heading { margin-left: -2.6rem; }
}
@media (max-width: 620px) {
  .course-black .instructor-hero { min-height: 0; }
  .course-black .instructor-intro {
    justify-self: stretch;
    width: auto;
    margin: clamp(13.5rem, 70vw, 22rem) 0 0;
    border-radius: 0;
    border-width: 1px 0 0;
  }
  .course-black .instructor-hero .instructor-photo img { object-position: center top; }
  .black-bio .bio-heading { width: calc(100% - 2rem); }
}
@media (max-width: 390px) {
  .course-card-footer { font-size: .75rem; }
}


/* Reserve a separate image area so the glass cannot obscure the subject. */
.roulette .course-card,
.roulette[data-ready] .course-card {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  background: radial-gradient(ellipse at 50% 30%, #4a4a4a, #191919 78%);
}
.roulette .course-card > img {
  position: relative;
  inset: auto;
  display: block;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}
.roulette .course-card > .course-card-sheet {
  min-height: 9.5rem;
  background: linear-gradient(145deg, #7c7c7c75, #383838ad);
}
.course-black .instructor-hero {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  align-content: center;
  min-height: 0;
  gap: clamp(.45rem, 2vw, 1rem);
  padding: clamp(.4rem, 1.4vw, .8rem);
}
.course-black .instructor-hero .instructor-photo {
  grid-area: auto;
  display: grid;
  align-self: center;
  max-height: none;
  margin: 0;
  border-radius: 22px;
  background: radial-gradient(ellipse at center, #353535, #181818);
}
.course-black .instructor-hero .instructor-photo img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 33rem;
  padding: 0;
  object-fit: contain;
  object-position: center;
}
.course-black .instructor-intro {
  grid-area: auto;
  align-self: center;
  width: 100%;
  margin: 0;
}
.black-bio .bio-link img,
.black-bio .bio-close > img {
  height: auto;
  object-fit: contain;
}
@media (max-width: 620px) {
  .course-black .instructor-hero { grid-template-columns: minmax(0, 1fr); }
  .course-black .instructor-intro { border-width: 1px; border-radius: 22px; }
}

.academics-story {
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  padding: clamp(1.4rem, 5vw, 3.4rem);
  border-radius: var(--glass-radius);
  background: radial-gradient(ellipse at 0% 0%, #a3a3a34e, transparent 72%), var(--glass-surface);
}
.academics-story-location {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border: 1px solid #ffffff42;
  border-radius: 99px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
}
.academics-story h3 {
  max-width: 23ch;
  margin: .75rem 0 .5rem;
  font: 740 clamp(1.5rem, 4.8vw, 3rem)/1.08 var(--sans);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.academics-story p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.88rem, 2.6vw, 1rem);
}