@charset "UTF-8";

/* =====================
   About – Section Titles
===================== */
#policy h2,
#instructor h2,
#studio h2,
#access h2 {
  background: none !important;
}

/* Per-section English labels */
#policy h2::before  { content: 'POLICY'; }
#studio h2::before  { content: 'STUDIO'; }
#access h2::before  { content: 'ACCESS'; }

/* Instructor title on dark bg */
#instructor h2::before { content: 'INSTRUCTOR'; }
#instructor h2 {
  color: #fff;
}
#instructor h2::after {
  background: var(--clr-yellow);
}

/* Shared: h2 not using .sectionTitle class */
#policy h2:not(.sectionTitle),
#studio h2:not(.sectionTitle),
#access h2:not(.sectionTitle),
#instructor h2:not(.sectionTitle) {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  position: relative;
  padding-bottom: 2em;
  margin-bottom: 5em;
}
#policy h2:not(.sectionTitle)::before,
#studio h2:not(.sectionTitle)::before,
#access h2:not(.sectionTitle)::before,
#instructor h2:not(.sectionTitle)::before {
  display: block;
  font-family: 'Spartan', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--clr-yellow);
  margin-bottom: 0.7em;
  text-transform: uppercase;
}
#policy h2:not(.sectionTitle)::after,
#studio h2:not(.sectionTitle)::after,
#access h2:not(.sectionTitle)::after,
#instructor h2:not(.sectionTitle)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: var(--clr-yellow);
  border-radius: 2px;
}

/* =====================
   Policy
===================== */
#policy h2 + p {
  font-size: 1.45rem;
  line-height: 2.3;
}

/* =====================
   Instructor
===================== */
#instructor picture {
  width: 435px;
  max-width: 100%;
}
#instructor picture img {
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

#prof {
  width: 50%;
  margin-left: auto;
  color: #fff;
}

#ceo {
  margin: 48px 0;
  font-size: 1.6rem;
  line-height: 1.7;
}
#ceo span {
  display: block;
  font-size: 1.15rem;
  color: #AAAAAA;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
#ceo h3 {
  font-size: 2.8rem;
  letter-spacing: 8px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 16px;
}

.history {
  font-weight: 200;
}
ul.history {
  margin-bottom: 20px;
}
ul.history li {
  line-height: 1.85;
}
ul.history li::before {
  content: '―';
  margin-right: 6px;
  opacity: 0.5;
}

dl.history {
  margin-bottom: 6px;
}
dl.history dt {
  width: 95px;
  background: rgba(0,0,0,0.4);
  color: #AAAAAA;
  font-size: 1.15rem;
  font-weight: 500;
  justify-content: center;
  margin-right: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}
dl.history dt,
dl.history dd {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
dl.history dd li {
  list-style: disc;
  margin-left: 20px;
  line-height: 1.75;
}

/* =====================
   Guest Teachers
===================== */
#guest_teachers {
  padding-top: 0;
  text-align: center;
  color: #fff;
}
#guest_teachers h3 {
  font-size: 2.6rem;
  line-height: normal;
  padding: 0.5em 1.5em;
  border: 1px solid rgba(255,255,255,0.4);
  margin-bottom: 2.5em;
  display: inline-block;
  letter-spacing: 0.08em;
  font-weight: 300;
  transition: background 0.25s ease, border-color 0.25s ease;
}
#guest_teachers h3:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.7);
}

.teachersBlock {
  justify-content: space-between;
}
.teachersBlock figure {
  margin-bottom: 2em;
}
.teachersBlock figure img {
  border-radius: var(--radius);
  transition: opacity 0.25s ease, transform 0.35s ease;
}
.teachersBlock figure:hover img {
  opacity: 0.82;
  transform: scale(1.02);
}
.teachersBlock figcaption {
  font-size: 1.6rem;
  padding: 0.5em 0 1em;
  color: #fff;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 767px) {
  .teachersBlock.flex-nowrap { flex-wrap: wrap; }
  .teachersBlock div {
    width: 48%;
    margin-bottom: 20px;
  }
}

/* =====================
   Studio
===================== */
#studio dl,
#studio picture {
  width: 50%;
}
#studio picture img {
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-sm);
}
#studio dl dt {
  width: 22%;
  font-weight: 700;
  line-height: 1.85;
}
#studio dl dd {
  width: 78%;
  line-height: 1.85;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  #studio h2 + div.flex-nowrap {
    flex-flow: column;
    flex-direction: column-reverse;
  }
  #studio dl,
  #studio picture {
    width: 100%;
  }
  #studio picture {
    margin-bottom: 18px;
  }
}

/* =====================
   Access
===================== */
#access iframe,
#access object,
#access embed {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  border-radius: var(--radius);
  transition: filter 0.3s ease;
}
#access iframe:hover {
  filter: grayscale(0%);
}
#access p:first-child {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 8px;
}
#access p:last-child {
  margin-bottom: 12px;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  #instructor h2 + div.flex-nowrap {
    flex-flow: column;
  }
  #instructor picture {
    text-align: center;
  }
  #instructor picture img {
    width: 80%;
  }
  #prof { width: 100%; }
  dl.history.flex-nowrap { flex-flow: column; }
  div.flex-nowrap { flex-flow: column; }

  iframe {
    width: 100%;
    height: 500px;
  }
}