/* Mestrium: ink, paper and kraft, with colour only on the course boxes and the tape buttons. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #141414;
  --paper: #FFFFFF;
  --soft: #F2F1EE;
  --muted: #555555;
  --night: #161513;
  --tape: #F2C230;
  --amber: #B7791F;
  --line: 2px solid var(--ink);
  --gutter: clamp(16px, 4.5vw, 64px);
  --font: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  --font-logo: 'Nunito', 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Tutor LMS buttons and links in the Mestrium ink. */
  --tutor-color-primary: #141414;
  --tutor-color-primary-rgb: 20, 20, 20;
  --tutor-color-primary-hover: #3A3A3A;
  --tutor-color-primary-hover-rgb: 58, 58, 58;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--paper); border: var(--line); font-weight: 700; }
.skip:focus { left: 12px; }

/* ---------- Pieces ---------- */

.logo {
  font-family: var(--font-logo);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.h2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #3A3A3A; border-color: #3A3A3A; }
.btn--square { width: 44px; padding: 0; }

/* The yellow tape: the main call to action. */
.tape {
  display: inline-block;
  padding: 17px 38px;
  background: var(--tape);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 16%, 97.5% 33%, 100% 50%, 97.5% 67%, 100% 84%, 97.5% 100%, 2.5% 100%, 0 84%, 2.5% 67%, 0 50%, 2.5% 33%, 0 16%);
}
.tape:hover { background: #F6D263; }

.link { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

.kraft {
  background-color: #C9A374;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.38' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.29  0 0 0 0 0.14  0 0 0 -1.9 1.15'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Drawings. */
.art { display: block; width: 100%; height: auto; }
.art-i { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.art-w { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.art-g { fill: #E6E6E6; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.art-l { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-k { fill: var(--ink); }
.art-thick { stroke-width: 3.2; }
.art-dash { stroke-dasharray: 5 5; }
.art-shadow { fill: rgba(20, 20, 20, 0.12); }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 30; background: var(--paper); border-bottom: var(--line); }
.site-header__row { display: flex; align-items: center; gap: 26px; min-height: 80px; padding-block: 14px; }

.explore { position: relative; }
.explore__link { display: inline-flex; align-items: center; gap: 6px; padding-block: 10px; font-weight: 700; text-decoration: none; }
.explore__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 240px;
  padding: 8px 0;
  background: var(--paper);
  border: var(--line);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}
.explore:hover .explore__menu,
.explore:focus-within .explore__menu { display: block; }
.explore__menu a { display: block; padding: 10px 18px; text-decoration: none; }
.explore__menu a:hover { background: var(--soft); }
.explore__all { margin-top: 6px; border-top: 1px solid #DDDDDD; font-weight: 700; }

.site-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; background: var(--soft); }
.site-search:focus-within { outline: 3px solid var(--tape); }
.site-search svg { flex-shrink: 0; }
.site-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; }
.site-search input::placeholder { color: #6B6B6B; opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: 22px; }
.site-header__actions > a:not(.btn) { text-decoration: none; }
.icon-link { display: inline-flex; }

.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.lang a { text-decoration: none; opacity: 0.7; }

/* ---------- Hero ---------- */

.hero { background: var(--night); color: var(--paper); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: center; padding-block: 56px 60px; }
.hero h1 { margin: 0; font-size: clamp(44px, 5.6vw, 80px); line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.hero__claim { margin: 24px 0 0; max-width: 540px; color: #D6D6D6; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }

/* The featured course: its video (or image) held up with tape, and its card. */
.hero--feature .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
.feature { position: relative; padding-bottom: 64px; }
.feature__screen { position: relative; display: block; aspect-ratio: 16 / 9; border: 3px solid var(--paper); background: var(--night); }
.feature__screen::before,
.feature__screen::after {
  content: "";
  position: absolute;
  top: -12px;
  z-index: 2;
  width: 86px;
  height: 24px;
  background: var(--tape);
  clip-path: polygon(4% 0, 96% 0, 100% 25%, 96% 50%, 100% 75%, 96% 100%, 4% 100%, 0 75%, 4% 50%, 0 25%);
}
.feature__screen::before { left: 18px; transform: rotate(-4deg); }
.feature__screen::after { right: 18px; transform: rotate(3deg); }
.feature__poster,
.feature__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__screen .art { position: absolute; inset: 0; height: 100%; padding: 8% 12% 0; background: var(--soft); }
.feature__card {
  position: absolute;
  left: -28px;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: 4px;
  width: 74%;
  padding: 16px 20px;
  border: var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.feature__card:hover { transform: translateY(-2px); }
.feature__kicker { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.feature__title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.feature__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 4px; }
.feature__meta { color: var(--muted); font-size: 14px; }
.feature__price { font-weight: 700; }

/* ---------- Sections ---------- */

.section { padding-top: 72px; }
.section--end { padding-bottom: 96px; }
.section__title { margin-bottom: 26px; }
.section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; }
.section__tools { display: flex; align-items: center; gap: 10px; }
.section__tools .link { margin-right: 14px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tile { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: var(--line); background: var(--paper); color: var(--ink); text-decoration: none; transition: transform 0.15s ease; }
.tile:hover { transform: translateY(-2px); }
.tile__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: var(--line); }
.tile b { display: block; font-size: 21px; line-height: 1.15; }
.tile small { font-size: 15px; color: var(--muted); }
.kind-ai { background: #E1523D; }
.kind-music { background: #3553C9; }
.kind-edit { background: #1F8F63; }
.kind-skills { background: #E3AE2F; }
.kind-3d { background: #6E57C7; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cards--scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.cards--scroll::-webkit-scrollbar { display: none; }
.cards--scroll > .card { scroll-snap-align: start; }

.card { display: flex; flex-direction: column; border: var(--line); background: var(--paper); color: var(--ink); text-decoration: none; transition: transform 0.15s ease; }
.card:hover { transform: translateY(-3px); }
.card__shelf { position: relative; padding: 14px 10px 2px; background: var(--soft); border-bottom: var(--line); }
.card__shelf .art { height: 170px; }
/* The course image fills the shelf, as tall as the box drawing so a row lines up. */
.card__shelf--image { height: 188px; padding: 0; overflow: hidden; }
.card__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border: var(--line); background: var(--paper); font-size: 13px; font-weight: 700; line-height: 1.2; }
.badge--dark { background: var(--ink); color: var(--paper); }
.card__body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 16px 18px 18px; }
.card__title { margin: 0; font-size: 20px; line-height: 1.18; letter-spacing: -0.01em; }
.card__teacher { display: inline-flex; align-items: center; gap: 7px; color: #333333; font-size: 15px; }
.card__teacher svg { flex-shrink: 0; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.rating__stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.rating__stars::before { content: "\2605\2605\2605\2605\2605"; color: #DADADA; }
.rating__stars::after { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; width: calc(var(--r, 0) / 5 * 100%); overflow: hidden; color: var(--amber); }
.rating__count { color: #6B6B6B; }
.card__price { margin-top: auto; padding-top: 8px; font-size: 23px; font-weight: 700; }
.card__price del { margin-left: 6px; color: #6B6B6B; font-size: 16px; font-weight: 400; }

.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--ink); border: var(--line); }
.why__item { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 30px; background-color: var(--paper); }
.why__item.kraft { background-color: #C9A374; }
.why__item b { font-size: 21px; line-height: 1.15; }
.why__item span { color: #333333; font-size: 17px; line-height: 1.45; }
.why__item.kraft span { color: var(--ink); }

.voices { padding-block: 80px 88px; background: var(--soft); border-top: var(--line); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.quote { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 26px 28px 24px; border: var(--line); background: var(--paper); }
.quote__mark { height: 28px; font-family: var(--font-logo); font-size: 60px; font-weight: 900; line-height: 1; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 20px; line-height: 1.45; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: var(--line); }
.quote figcaption span { color: #444444; font-size: 15px; }

.band { border-top: var(--line); }
.band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: 68px; }
.band h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }

.empty { display: flex; flex-direction: column; gap: 6px; padding: 32px; border: var(--line); background: var(--soft); }
.empty .link { display: inline-block; margin-top: 8px; }

/* Waitlist on the sign up page while sign up is closed. */
.waitlist { max-width: 680px; }
.waitlist__lead { margin: 0 0 28px; font-size: 21px; line-height: 1.45; }
.waitlist__notice { margin: 0 0 24px; padding: 14px 18px; border: var(--line); background: #E4F3EC; font-weight: 700; }
.waitlist__notice--error { background: #FBE6E2; }
.waitlist__form { display: flex; flex-direction: column; gap: 16px; }
.waitlist__row { display: flex; gap: 12px; }
.waitlist__row input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; }
.waitlist__row .btn { min-height: 52px; padding: 0 26px; }
.waitlist__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: #333333; }
.waitlist__consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.waitlist__consent a { color: var(--ink); text-decoration: underline; }
.waitlist__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) {
  .waitlist__row { flex-direction: column; }
}
.empty b { font-size: 21px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--paper); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 44px; }
.site-footer .logo { color: var(--paper); font-size: 34px; }
.site-footer__claim { max-width: 300px; margin: 14px 0 0; color: #D0D0D0; font-size: 16px; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; }
.site-footer__col a { color: #D0D0D0; text-decoration: none; }
.site-footer__col a:hover { color: var(--paper); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 22px 36px; border-top: 1px solid #3A3A3A; color: #BDBDBD; font-size: 15px; }
.site-footer .lang svg .art-l { stroke: var(--paper); }
.site-footer .lang a { color: var(--paper); }

/* ---------- Pages, search, Tutor LMS ---------- */

.page-main { padding-block: 56px 96px; }
.page__title { margin: 0 0 28px; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.entry { max-width: 760px; }
.entry--wide { max-width: none; }
.entry a:not([class*="tutor-btn"]) { text-decoration: underline; text-underline-offset: 3px; }
.list { display: grid; gap: 16px; }
.list__item { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: var(--line); text-decoration: none; }
.pager { margin-top: 32px; }

/* Tutor LMS in the Mestrium look: square corners, ink buttons, 2 px frames. */
.mestrium .tutor-btn { border-radius: 0; }
.mestrium .tutor-btn-primary { background-color: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; }
.mestrium .tutor-btn-primary:hover { background-color: #3A3A3A !important; border-color: #3A3A3A !important; }
.mestrium .tutor-form-control { border: 2px solid #D6D6D6; border-radius: 0; background-color: var(--paper); }
.mestrium .tutor-form-control:focus { border-color: var(--ink); box-shadow: none; }
.mestrium .tutor-card, .mestrium .tutor-course-card { border-radius: 0; }
.mestrium .tutor-login-wrap,
.mestrium .tutor-registration-wrap,
.mestrium #tutor-registration-wrap { border: var(--line); border-radius: 0; box-shadow: none; }
.mestrium .tutor-btn-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mestrium .tutor-consent-link { display: inline !important; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mestrium .tutor-form-check .tutor-label { display: block; line-height: 1.5; }
.mestrium .tutor-course-details-page { padding-top: 48px; padding-bottom: 88px; }
.mestrium .tutor-course-details-title { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.mestrium .tutor-course-details-page .tutor-card,
.mestrium .tutor-single-course-sidebar-more { border: var(--line); border-radius: 0; box-shadow: none; }
.mestrium .tutor-course-card { border: var(--line); }
.mestrium .tutor-course-name a { text-decoration: none; }
.mestrium .tutor-course-name a:hover { text-decoration: underline; }
/* Tutor pages line up with the Mestrium header and footer. */
.mestrium .tutor-container { max-width: 1440px; padding-inline: var(--gutter); }
.archive-head { padding-top: 56px; }
.archive-head .page__title { margin-bottom: 8px; }
.mestrium .course-archive-page { padding-block: 24px 96px; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1100px) {
  .tiles, .cards, .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--scroll { grid-template-columns: none; grid-auto-columns: calc((100% - 24px) / 2); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .site-header__row { flex-wrap: wrap; gap: 12px 20px; }
  .site-search { order: 5; flex-basis: 100%; }
  .site-header__actions { margin-left: auto; }
  .hero__grid,
  .hero--feature .hero__grid { grid-template-columns: 1fr; gap: 32px; padding-block: 40px 44px; }
  .hero__art { max-width: 460px; }
  .hero__art.feature { max-width: 600px; padding-bottom: 0; }
  .feature__card { position: relative; left: 0; width: auto; margin: -24px 16px 0; }
  .quotes { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .logo { font-size: 28px; }
  .explore { display: none; }
  .site-header__actions { gap: 12px; }
  .site-header__actions .btn { padding: 0 14px; }
  .site-header .lang { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .tile__icon { width: 52px; height: 52px; }
  .tile b { font-size: 19px; }
  .cards, .why, .site-footer__grid { grid-template-columns: 1fr; }
  .cards--scroll { grid-auto-columns: 86%; }
  .section { padding-top: 56px; }
  .section--end { padding-bottom: 72px; }
  .tape { padding: 15px 30px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .card, .feature__card { transition: none; }
  /* The still image stays under the video. */
  .feature__video { display: none; }
}