/* Courses page (courses.lizstudio.io) */

.intro { padding: 72px 0 40px; text-align: center; position: relative; }
.intro .wrap { position: relative; }
.intro h1 { font-size: 56px; line-height: 0.95; letter-spacing: -0.05em; }
.intro-sub { font: italic 400 24px/1.3 var(--note); margin: 20px 0 0; color: var(--strong); }
.intro-q { font: 500 13px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin: 22px auto 0; max-width: 420px; color: var(--strong); }
@media (min-width: 700px) {
  .intro { padding: 128px 0 72px; }
  .intro h1 { font-size: 112px; }
  .intro-sub { font-size: 32px; }
  .intro-q { max-width: none; font-size: 14px; }
      }
@media (min-width: 1000px) { .intro h1 { font-size: 140px; } }

.shelf { padding-top: 24px; }

/* The course as a big black poster */
.poster {
  display: grid; text-decoration: none; overflow: hidden; position: relative;
  border-radius: 28px; border: 1.5px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.poster:hover { transform: translateY(2px); box-shadow: 0 6px 0 var(--ink); }
.poster-text { padding: 36px 22px 8px; }
.poster h2 { font-size: 64px; line-height: 0.9; letter-spacing: -0.05em; }
.poster p { font: italic 400 24px/1.3 var(--note); margin: 18px 0 0; color: var(--strong); max-width: 420px; }
.poster .btn { margin-top: 28px; }
.poster-art { padding: 0 12px 12px; }
@media (min-width: 860px) {
  .poster { grid-template-columns: 1fr 1.1fr; align-items: center; }
  .poster-text { padding: 72px 0 72px 64px; }
  .poster h2 { font-size: 104px; }
  .poster-art { padding: 48px 48px 48px 0; }
  }

/* More courses, blurred while they're being written */
.cooking { position: relative; margin-top: 28px; }
.cooking-row { display: grid; gap: 16px; filter: blur(7px); opacity: 0.85; pointer-events: none; user-select: none; }
.ghost-card { border-radius: 24px; border: 1.5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 28px 22px; min-height: 200px; display: flex; flex-direction: column; }
.ghost-card h3 { font-size: 34px; line-height: 1; }
.ghost-card p { font: italic 400 20px/1.3 var(--note); margin: 12px 0 0; color: var(--strong); }
.ghost-card.lime { background: var(--lime); }
.ghost-card.paper { background: var(--paper); }
.ghost-btn { margin-top: auto; width: 140px; height: 40px; border-radius: 999px; background: var(--lime); border: 1.5px solid var(--ink); }
.ghost-card.lime .ghost-btn { background: var(--ink); }
.cooking-label {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  font: 500 44px/1 var(--display); letter-spacing: -0.04em; color: var(--ink);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
@media (min-width: 760px) {
  .cooking-row { grid-template-columns: repeat(3, 1fr); }
  .ghost-card { min-height: 260px; padding: 32px 28px; }
  .cooking-label { font-size: 72px; }
}
.intro-link { display: inline-block; margin-top: 14px; font: italic 400 22px/1.2 var(--note); color: var(--strong); text-decoration: underline; text-decoration-color: var(--lime-deep); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.intro-link:hover { text-decoration-color: var(--ink); }