@font-face {
  font-family: "Portfolio Script";
  src: url("assets/title.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Portfolio Sans";
  src: url("assets/portfolio.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: #fff; color: #000; }
body { margin: 0; }
.cover { min-height: 50vh; display: grid; align-content: center; }
.composition {
  position: relative;
  width: 100%;
  aspect-ratio: 1366 / 768;
  container-type: inline-size;
  overflow: hidden;
}
h1 {
  position: absolute;
  top: 6.1274cqw;
  left: 2.498cqw;
  width: 44.077cqw;
  margin: 0;
  font-family: "Portfolio Script", cursive;
  font-size: 5.798cqw;
  font-weight: 400;
  line-height: 5.4905cqw;
  font-kerning: none;
}
.rule {
  position: absolute;
  left: 2.498cqw;
  top: 25.5263cqw;
  width: 47.502cqw;
  height: 1px;
  background: #000;
}
.subtitle {
  position: absolute;
  left: 2.498cqw;
  top: 28.9296cqw;
  margin: 0;
  font-family: "Portfolio Sans", Arial, sans-serif;
  font-size: 2.0956cqw;
  font-weight: 500;
  line-height: 2.9283cqw;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-kerning: none;
}
.heart {
  position: absolute;
  top: 38.0904cqw;
  left: 5.2829cqw;
  width: 12.8982cqw;
  height: 14.096cqw;
  object-fit: contain;
}
.brushes {
  position: absolute;
  top: .0732cqw;
  left: 58.0193cqw;
  width: 41.7714cqw;
  height: 56.2225cqw;
  object-fit: cover;
}
.education {
  width: 100%;
  margin: 0;
  padding: 8px 2.498vw 0;
  font: 500 16px/1.7 "Portfolio Sans", Arial, sans-serif;
}
.education p { margin: 0 0 20px; }
.education > p:first-child { margin-bottom: 10px; }
.education p:last-child { margin-bottom: 0; }
.curriculum-intro { text-align: left; }
.star-bullet { display: flex; align-items: baseline; gap: 10px; }
.education .workshop-heading { margin-bottom: 6px; }
.education .curriculum-intro { margin-bottom: 6px; }
.workshop-list { margin: 0 0 24px; padding: 0; list-style: none; }
.workshop-list li { padding-left: 20px; text-indent: -20px; }
.curriculum-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  text-align: justify;
  text-align-last: left;
  line-height: 1.8;
  letter-spacing: -.01em;
  word-spacing: -.04em;
}
.curriculum-list li { display: inline; }
.workshop-list li::before,
.curriculum-list li::before {
  content: "\2022\00a0";
  font-size: 1.6em;
  line-height: 0;
}
.curriculum-list li:not(:last-child)::after { content: " "; white-space: pre-wrap; }
.curriculum-list:last-child { margin-bottom: 0; }
.info-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px 64px;
}
.instagram-link { display: grid; place-items: center; width: .5in; height: .5in; }
.instagram-link img { display: block; width: .5in; height: .5in; object-fit: contain; }
.instagram-link:focus-visible { outline: 2px solid #ff00a8; outline-offset: 5px; border-radius: 8px; }
.info-button {
  display: grid;
  place-items: center;
  min-width: 236px;
  min-height: 58px;
  padding: 16px 30px;
  border: 1px solid #c5c5c5;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0f0f0, #dedede);
  color: #777;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #0000000a;
  font: 500 16px/1.4 "Portfolio Sans", Arial, sans-serif;
  letter-spacing: .06em;
  cursor: not-allowed;
}
.info-button:focus-visible { outline: 2px solid #888; outline-offset: 5px; }
.info-button span { grid-area: 1 / 1; }
.info-hover { visibility: hidden; }
.info-button:hover .info-label,
.info-button:focus-visible .info-label { visibility: hidden; }
.info-button:hover .info-hover,
.info-button:focus-visible .info-hover { visibility: visible; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .education { padding-left: 4vw; padding-right: 4vw; }
  .cover { min-height: 0; }
  .composition { aspect-ratio: 375 / 882.719; }
  h1 {
    top: 5.613cqw;
    left: 4cqw;
    width: 85.366cqw;
    font-size: 11.229cqw;
    line-height: 10.6333cqw;
  }
  .rule { top: 43.129cqw; left: 4cqw; width: 92cqw; }
  .subtitle {
    top: 46.867cqw;
    left: 4cqw;
    font-size: 6.0374cqw;
    line-height: 8.436cqw;
  }
  .heart { top: 67.1083cqw; left: 8.4133cqw; width: 37.1653cqw; height: 40.6176cqw; }
  .brushes { top: 111.7259cqw; left: 4cqw; width: 92cqw; height: 123.8283cqw; }
}