@font-face {
  font-family: Maverli Lora;
  src: url("./fonts/lora-variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Maverli Manrope;
  src: url("./fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
.collection-page, .collection-hub {
  --maverli-plum: #441c54;
  --maverli-lavender: #be90de;
  --maverli-lilac: #e9def7;
  --maverli-mist: #f8f1fc;
  --maverli-white: #fcfafe;
  --maverli-muted: #6b4a8d;
  --maverli-ink: #1c0c22;
  --maverli-serif: "Maverli Lora", Georgia, serif;
}
.collection-page {
  margin: 0;
  color: var(--maverli-ink);
  background: var(--maverli-white);
  font: 600 1rem/1.5 "Maverli Manrope", Arial, sans-serif;
}
.collection-page *, .collection-page *::before, .collection-page *::after { box-sizing: border-box; }
.collection-page a { color: inherit; text-decoration: none; }
.collection-page :focus-visible, .collection-hub :focus-visible {
  outline: 3px solid var(--maverli-muted);
  outline-offset: 4px;
}
.collection-header {
  position: relative;
  z-index: 5;
  background: linear-gradient(110deg,#f6effa,#f2ebfa 45%,#f8f3fd);
  border-bottom: 1px solid #fff9;
}
.collection-header-inner {
  width: min(87.5%, 1500px);
  min-height: clamp(62px, 4.35vw, 76px);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.collection-wordmark { display: block; width: 100%; aspect-ratio: 4.8; overflow: hidden; }
.collection-wordmark img {
  display: block;
  width: 127%;
  max-width: none;
  height: auto;
  transform: translate(-10.1%, -23.6%);
}
.collection-header-inner > a { display: block; width: clamp(124px, 11.5vw, 194px); }
.collection-header nav { display: flex; align-items: center; gap: clamp(1rem, 3.75vw, 4rem); font-size: clamp(.92rem, 1.25vw, 1.3rem); }
.collection-menu { position: relative; }
.collection-menu summary { display: flex; align-items: center; gap: .4em; cursor: pointer; list-style: none; }
.collection-menu summary::-webkit-details-marker { display: none; }
.collection-menu[open] summary svg { transform: rotate(180deg); }
.collection-menu div {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .45rem;
  width: max-content;
  border: 1px solid var(--maverli-lilac);
  border-radius: 1rem;
  background: var(--maverli-white);
  box-shadow: 0 12px 30px #441c5422;
}
.collection-menu a { display: block; padding: .45rem .7rem; border-radius: .5rem; }
.collection-menu a:hover { background: var(--maverli-lilac); }
.collection-header .collection-sign-in { position: relative; border-radius: 100px; color: white; background: #210629; padding: .42em 1.35em; white-space: nowrap; }
.collection-sign-in::before { content: ""; position: absolute; top: 10%; bottom: 10%; left: max(-2.5vw,-44px); width: 1px; background: #beaad4; }
.collection-sign-in:hover { background: var(--maverli-plum); }
.collection-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 3%, #fbf4fd 4%, transparent 59%),
    radial-gradient(ellipse at 5% 10%, #f7ebfc 5%, transparent 51%),
    linear-gradient(135deg,#eee1fb,#e1cdf7 80%,#f0e4fc);
}
.collection-waves { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.collection-waves::before, .collection-waves i {
  content: "";
  position: absolute;
  background: linear-gradient(164deg,#c39be955,#e7d6f84d 51%,#fff6);
  border: 2px solid #fffb;
  box-shadow: 0 -7px 20px #fff6;
}
.collection-waves::before { width: 110%; height: 72%; top: -22%; left: -9%; border-radius: 0 0 56% 54% / 0 0 76% 72%; background: linear-gradient(165deg,transparent 45%,#fcf5ff5e); transform: rotate(8deg); }
.collection-waves i:first-child { width: 79%; height: 52%; right: -36%; top: 24%; border-radius: 53%; transform: rotate(-24deg); }
.collection-waves i:last-child { width: 83%; height: 56%; left: -8%; top: 80%; border-radius: 52%; transform: rotate(-6deg); }
.collection-hero-copy { position: relative; text-align: center; padding: clamp(1.35rem,1.65vw,1.9rem) 1rem 0; }
.collection-hero-copy > p {
  display: inline-block;
  margin: 0;
  padding: .48em 1.55em;
  border: 1px solid #a13ddd;
  border-radius: 100px;
  color: #730ba5;
  background: #fcfafe44;
  font-size: clamp(.68rem,1.02vw,1.1rem);
  font-weight: 800;
  letter-spacing: .28em;
}
.collection-hero h1 {
  margin: .25em 0 .48em;
  font: 700 clamp(2.35rem,4.05vw,4.55rem)/1.16 var(--maverli-serif);
  letter-spacing: -.047em;
}
.collection-hero .collection-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .47em;
  border-radius: 100px;
  padding: .54em 1.85em;
  color: white;
  background: linear-gradient(170deg,#ad4bd7,#7916b1 46%,#621099);
  box-shadow: inset 0 2px 2px #fff4, inset 0 -3px 3px #48136e88, 0 5px 10px #5e27882b;
  font-size: clamp(1.1rem,1.51vw,1.7rem);
  font-weight: 800;
}
.collection-cta:hover { filter: brightness(1.08); }
.collection-cta:active { transform: translateY(1px); }
.collection-stage {
  position: relative;
  width: min(82%,1390px);
  left: min(1%,17px);
  aspect-ratio: 1495 / 525;
  margin: clamp(1.55rem,2.65vw,2.95rem) auto 0;
  container-type: inline-size;
}
.collection-window {
  position: absolute;
  overflow: hidden;
  border: 3px solid #fff9;
  border-radius: 1.95cqw;
  background: linear-gradient(125deg,#fcf7ff,#f1e7fa 69%,#f9f3fd);
  box-shadow: inset 0 0 .6cqw white, 0 1.2cqw 2.25cqw #6b4a8d63;
  font-size: .94cqw;
  letter-spacing: -.035em;
}
.window-interview { width: 36.5%; height: 52.5%; left: 0; top: 0; }
.window-resume { width: 35.7%; height: 51%; right: 1.8%; top: 0; }
.window-certly { width: 42%; height: 70.5%; left: 22%; top: 24%; z-index: 2; }
.window-edition { width: 34.8%; height: 44.5%; right: 0; top: 42.5%; z-index: 3; }
.window-bar { height: 2.7cqw; display: flex; align-items: center; gap: .9cqw; padding: 0 1.55cqw; }
.window-bar .collection-wordmark { width: 5.2cqw; margin-right: auto; }
.window-certly .window-bar { height: 3.45cqw; }
.window-certly .window-bar .collection-wordmark { width: 6.1cqw; }
.window-bar > svg { width: 1.25cqw; }
.window-body { display: grid; grid-template-columns: 24% 76%; height: calc(100% - 2.7cqw); }
.window-tabs { margin: 0; padding: 1.65cqw .68cqw .4cqw; list-style: none; background: linear-gradient(140deg,#ead8f88c,#f9f5fc8c); }
.window-tabs li { display: flex; align-items: center; gap: .65cqw; padding: .39cqw .65cqw; white-space: nowrap; font-size: .69cqw; font-weight: 800; }
.window-tabs li:first-child { background: #e3c9f7; border-radius: .53cqw; }
.window-tabs svg { flex: none; width: 1cqw; height: 1cqw; }
.window-workspace { min-width: 0; }
.window-intro {
  min-height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.25cqw .98cqw;
  border-radius: .9cqw 0 0;
  background: linear-gradient(125deg,#f9f0fc,#efe0f5 65%,#e6d3ef);
}
.window-title { display: flex; align-items: center; gap: .66cqw; position: relative; }
.window-title h2 { margin: 0; max-width: 15cqw; font: 700 1.76cqw/.98 var(--maverli-serif); letter-spacing: -.055em; }
.window-title small, .window-lesson-card small { display: block; margin-top: .29cqw; color: var(--maverli-ink); font-size: .6cqw; letter-spacing: .24em; font-weight: 800; }
.window-interview h2 { max-width: 15cqw; }
.window-resume h2 { max-width: 8cqw; }
.window-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.6cqw;
  height: 3.7cqw;
  border-radius: .8cqw;
  color: #58088f;
  background: linear-gradient(135deg,#eacdfb,#dec0f4);
}
.window-glyph svg { width: 65%; height: 65%; }
.window-intro > p { position: relative; max-width: 12.3cqw; margin: 1.15cqw 0 0; line-height: 1.33; }
.window-certly .window-intro { min-height: 0; height: 11.3cqw; padding: 1.75cqw 1.45cqw; }
.window-certly .window-title h2 { font-size: 3cqw; }
.window-certly .window-glyph { width: 4.2cqw; height: 4.3cqw; }
.window-certly .window-intro > p { max-width: none; font-size: 1.15cqw; }
.window-lesson { padding: .5cqw 1.2cqw; }
.window-lesson-card { display: grid; grid-template-columns: 31% 1fr auto; align-items: center; gap: 1cqw; border-radius: .85cqw; padding: .56cqw; margin-top: .45cqw; background: #fff9; box-shadow: 0 .34cqw .7cqw #46226613; }
.window-lesson-card small { color: #740bb4; margin: 0; letter-spacing: .1em; }
.window-lesson-card b, .window-lesson-card div > span { display: block; font-size: .82cqw; line-height: 1.3; }
.window-lesson-card div > span { font-size: .7cqw; margin-top: .16cqw; }
.window-lesson-action { padding: .55em .9em; border-radius: .7em; color: #58088f; background: #e7cdf8; font-weight: 800; }
.window-thumbnail { display: grid; place-items: center; height: 4.8cqw; color: #fff; border-radius: .5cqw; background: radial-gradient(circle,#36134b 0 16%,transparent 17%), radial-gradient(ellipse at bottom left,#ae69e3 0 48%,transparent 49%), linear-gradient(152deg,#c995ef,#f4e0f6 63%,#b485d8 64%); }
.window-resume .window-art, .window-interview .window-art { height: 8cqw; bottom: 1.4cqw; }
.window-interview .window-art { height: 11cqw; }
.window-art { position: absolute; z-index: -1; right: -1cqw; bottom: 0; width: 49%; height: 85%; }
.window-art::before { content: ""; position: absolute; inset: 62% -18% 0 -28%; background: linear-gradient(156deg,transparent,#fffb 38%,#d5c0df); transform: skewY(-12deg); }
.window-art i, .window-art b, .window-art span { position: absolute; display: block; }
.window-interview .window-art i, .window-resume .window-art i {
  width: 75%; height: 77%; right: 4%; bottom: 14%; border-radius: .45cqw;
  background: linear-gradient(140deg,#51435e,#8f789b 56%,#403849);
  border: .20cqw solid #e0d1e4; transform: skewX(-13deg) rotate(-5deg);
}
.window-interview .window-art b, .window-resume .window-art b {
  width: 99%; height: 18%; right: 8%; bottom: 6%; border-radius: 12%;
  background: linear-gradient(#ded6df,#ab99b0 55%,#f1e4f0 61%,#8b778f);
  transform: rotate(8deg) skewX(-29deg); box-shadow: 0 .4cqw .6cqw #4937524b;
}
.window-certly .window-art i, .window-certly .window-art b {
  width: 82%; height: 14%; right: 7%; bottom: 14%; border-radius: .25cqw;
  background: linear-gradient(#b793cb,#705184 32%,#9874b1 38%,#e9d9be 42% 88%,#9a75b3 91%);
  transform: rotate(-5deg) skewX(-15deg); box-shadow: 0 .25cqw .36cqw #6248764d;
}
.window-certly .window-art b { bottom: 25%; right: 3%; transform: rotate(5deg) skewX(-14deg); }
.window-certly .window-art span { width: 60%; height: 4%; right: 33%; bottom: 7%; border-radius: 100%; background: linear-gradient(#a78bbf,#5d3d72); transform: rotate(8deg); }
.window-edition .window-art {
  width: 40%;
  height: 72%;
  bottom: -5%;
  right: -5%;
  transform: rotate(-22deg);
}
.window-edition .window-art::before { display: none; }
.window-edition .window-art i, .window-edition .window-art b {
  inset: 3% 49% 4% 1%;
  border-radius: 25% 2% 2% 8%;
  background: linear-gradient(90deg,#fff9ff,#eed9f6 86%,#aa83b6);
  box-shadow: -.28em .36em #aa7bc0, -.53em .55em #e8d5f0, -.8em .74em #9670ab;
}
.window-edition .window-art b { inset: 1% 1% 4% 49%; border-radius: 2% 22% 8% 2%; transform: skewY(-4deg); background: linear-gradient(90deg,#c0a3ca,#fffbff 15%); }
.window-edition .window-art span {
  inset: 24% 57% 16% 10%;
  border-radius: 12% 10% 4% 3%;
  background: linear-gradient(172deg,#dbc2ee,#f9edff 55%,#9b70bc);
}
.window-edition .window-art span::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(145deg,#d3acdf,#6d498a);
  clip-path: polygon(0 87%,33% 14%,48% 42%,72% 0,100% 71%,100% 100%,0 100%);
}
.collection-directory, .collection-studio { width: min(87.5%, 1250px); margin: auto; padding: clamp(2.5rem,6vw,6rem) 0; }
.collection-directory h2, .collection-studio h2, .hub-intro h1 { margin: 0; color: var(--maverli-ink); font: 700 clamp(1.9rem,3.2vw,3.5rem)/1.14 var(--maverli-serif); letter-spacing: -.035em; }
.collection-directory > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 1.5rem; }
.collection-directory article, .hub-product { border: 1px solid #e3d4ee; border-radius: 1rem; background: linear-gradient(125deg,#fff,#f7f0fb); padding: 1.25rem; }
.collection-directory h3, .hub-product h3 { font-family: var(--maverli-serif); color: var(--maverli-ink); line-height: 1.2; }
.collection-directory article p { font-size: .9rem; }
.collection-directory article a, .hub-product a, .hub-links a { display: inline-flex; gap: .4rem; align-items: center; color: var(--maverli-plum); font-weight: 800; }
.collection-directory article a:hover, .hub-product a:hover, .hub-links a:hover { text-decoration: underline; }
.collection-directory .window-glyph, .hub-product .window-glyph { width: 2.7rem; height: 2.7rem; border-radius: .6rem; }
.collection-studio { border-top: 1px solid var(--maverli-lilac); }
.collection-studio p { max-width: 65ch; }
.collection-hub .reference-main, .collection-hub.member-page .reference-main { background: radial-gradient(ellipse at top right,#eee0f9,transparent 45%),var(--maverli-white) !important; }
.collection-hub .reference-wordmark .collection-wordmark { width: 115px; }
.collection-hub .reference-wordmark .collection-wordmark img { width: 127%; max-width: none; height: auto; }
.collection-hub .hub-intro { padding: 0 0 2rem; }
.hub-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.hub-product { display: flex; align-items: center; gap: .9rem; }
.hub-product h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.hub-product p { margin: 0; font-size: .85rem; }
.hub-product > a, .hub-product > small { margin-left: auto; flex: none; }
.hub-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.35rem 0; }
.hub-work { margin-top: 2.2rem; }
.collection-hub .hub-work .reference-card { min-height: 0; padding: 1rem; background: linear-gradient(125deg,#fff,#f7f0fb); }
.collection-hub .hub-work .tile-icon { width: 2.6rem; height: 2.6rem; }
.collection-hub .hub-work .tile-icon svg { width: 1.3rem; height: 1.3rem; }
.collection-hub .collection-studio { width: 100%; margin-top: 2.1rem; padding: 2rem 0 1rem; }
@media (max-width: 850px) {
  .collection-directory > div { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hub-products { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .collection-header-inner { min-height: 62px; width: 92%; gap: .5rem; }
  .collection-header-inner > a { width: clamp(89px,25vw,135px); flex-shrink: 0; }
  .collection-header nav { gap: .72rem; font-size: .82rem; }
  .collection-menu summary svg { width: 13px; }
  .collection-sign-in::before { display: none; }
  .collection-hero h1 { margin: .46em auto .64em; max-width: 11em; }
  .collection-hero-copy { padding-top: 1.8rem; }
  .collection-stage { display: grid; width: min(88%,425px); left: auto; aspect-ratio: auto; gap: 1rem; margin-bottom: 2rem; }
  .collection-window { position: relative; inset: auto; width: 100%; height: auto; min-height: 44cqw; border-radius: 5cqw; border-width: 2px; font-size: 2.65cqw; }
  .window-certly { order: -1; }
  .window-bar, .window-certly .window-bar { height: 9cqw; padding: 0 4cqw; gap: 2cqw; }
  .window-bar .collection-wordmark, .window-certly .window-bar .collection-wordmark { width: 17cqw; }
  .window-bar > svg { width: 3.5cqw; }
  .window-body { height: calc(100% - 9cqw); grid-template-columns: 27% 73%; }
  .window-tabs { padding: 3cqw 1.1cqw; }
  .window-tabs li { font-size: 1.94cqw; padding: 1cqw; gap: 1cqw; }
  .window-tabs svg { width: 2.6cqw; height: 2.6cqw; }
  .window-intro, .window-certly .window-intro { padding: 3.5cqw 3cqw; }
  .window-title { gap: 2cqw; }
  .window-title h2, .window-certly .window-title h2 { max-width: 40cqw; font-size: 5.4cqw; }
  .window-title small, .window-lesson-card small { font-size: 1.7cqw; }
  .window-glyph, .window-certly .window-glyph { width: 9cqw; height: 9cqw; border-radius: 2cqw; }
  .window-intro > p, .window-certly .window-intro > p { max-width: 37cqw; margin: 2cqw 0 0; font-size: 2.62cqw; }
  .window-certly .window-intro { height: 26cqw; }
  .window-lesson { padding: 1cqw 3cqw 2cqw; }
  .window-lesson-card { gap: 2cqw; padding: 1.4cqw; }
  .window-lesson-card b, .window-lesson-card div > span { font-size: 1.9cqw; }
  .window-thumbnail { height: 10cqw; }
  .window-interview .window-art, .window-resume .window-art { height: 21cqw; bottom: 3cqw; }
  .collection-directory, .collection-studio { width: 88%; }
}
@media (max-width: 420px) {
  .collection-directory > div { grid-template-columns: 1fr; }
  .hub-product { flex-wrap: wrap; }
  .collection-hub .rail { flex-wrap: wrap; }
  .collection-hub .rail nav { flex-wrap: wrap; }
}