/* About, Privacy, Submit a Game, Join the Vault, and the site footer, matching vaultlearninggames.org (Squarespace).
   Measurements are from the live pages at 1440px wide; horizontal positions are percentages of that width so the
   layout scales, and everything stacks below 800px like the live site. */
:root {
    --vp-mint: #67ffcf;
    --vp-lightmint: #eaf6f2;
    --vp-black: #000;
    /* base-9-sans is an Adobe Fonts typeface (params.fonts.adobe_kit); Share Tech is the closest free stand-in
       (same flat-topped A and narrow, rounded letters). */
    --vp-display: "base-9-sans", "Share Tech", sans-serif;
    --vp-body: "Montserrat", sans-serif;
    --vp-button: "Archivo", sans-serif;
}

.vp, .vp-footer { font-family: var(--vp-body); }
.vp *, .vp-footer * { box-sizing: border-box; }
.vp-section { position: relative; overflow: hidden; }
.vp-black { background: var(--vp-black); color: var(--vp-mint); }
.vp-white { background: #fff; color: #000; }
.vp-mint { background: var(--vp-mint); color: #000; }
.vp-lightmint { background: var(--vp-lightmint); color: #000; }
.vp-center { text-align: center; }

/* ---------- type ---------- */
/* Without Base 9 Sans (no Adobe Fonts kit yet): size Share Tech to Base 9's letter height (cap height 0.667 of the
   font size) and open up its spacing, so headings take the same width and wrap in the same places as the live site. */
.vp-no-base9 .vp .vp-h1, .vp-no-base9 .vp .vp-h2, .vp-no-base9 .vp-footer .vp-h1, .vp-no-base9 .vp-footer .vp-h2, .vp-no-base9 .vp-footer .vp-h4,
.vp-no-base9 .vp-featured__title, .vp-no-base9 .vp-wave text { font-size-adjust: cap-height 0.667; letter-spacing: 0.1em; -webkit-text-stroke: 0.028em currentColor; }
.vp .vp-h1, .vp-footer .vp-h1 {
    font-family: var(--vp-display); font-weight: 400; text-transform: uppercase; margin: 0;
    font-size: clamp(40px, 4.611vw, 66.4px); line-height: 1.056; letter-spacing: -0.02em;
}
.vp .vp-h2, .vp-footer .vp-h2 {
    font-family: var(--vp-display); font-weight: 400; text-transform: uppercase; margin: 0 0 14px;
    font-size: clamp(30px, 3.211vw, 46.24px); line-height: 1.1136; letter-spacing: -0.02em;
}
.vp .vp-h2--tight { font-size: clamp(30px, 3.069vw, 44.2px); line-height: 1; }
.vp-footer .vp-h2--footer { font-size: clamp(28px, 2.511vw, 36.16px); line-height: 1.2; margin: 0; }
.vp-footer .vp-h4 {
    font-family: var(--vp-display); font-weight: 400; text-transform: uppercase; margin: 0; color: var(--vp-mint);
    font-size: clamp(20px, 1.811vw, 26.08px); line-height: 1.171; letter-spacing: -0.02em; text-align: center;
}
.vp .vp-lg, .vp .vp-lg p { font-size: clamp(18px, 1.578vw, 22.72px); line-height: 1.5; font-weight: 300; }
.vp .vp-md, .vp .vp-md p, .vp-footer .vp-p { font-size: clamp(16px, 1.228vw, 17.68px); line-height: 1.5; font-weight: 300; }
.vp-footer .vp-small, .vp .vp-small { font-size: 14.272px; line-height: 1.5; font-weight: 300; }
.vp p, .vp-footer p { margin: 0 0 16px; font-family: var(--vp-body); color: inherit; }
.vp .vp-lg p:last-child, .vp .vp-md p:last-child { margin-bottom: 0; }
.vp strong { font-weight: 600; }
.vp a:not(.vp-btn), .vp-footer a:not(.vp-btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- buttons: square top-left corner, rounded elsewhere ---------- */
.vp-btn {
    display: inline-flex; align-items: center; justify-content: center; height: 68px; padding: 0 20.8px;
    border-radius: 0 45px 45px 45px; font-family: var(--vp-button); font-weight: 500; font-size: 16px;
    text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; max-width: 100%;
    transition: opacity .15s;
}
.vp-btn:hover { opacity: .85; }
.vp-btn--mint { background: var(--vp-mint); color: #000 !important; }
.vp-btn--black { background: #000; color: #fff !important; }
.vp-btn--sm { height: auto; padding: 22.4px 32px; line-height: 1.2; }

/* ---------- shared blocks ---------- */
.vp-col-wide { width: 68.82%; margin: 0 auto; }                      /* x 225, width 991 */
.vp-gamebar { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; }
.vp-gamebar img { width: 100%; height: 74px; object-fit: cover; display: block; }
.vp-cta { margin-top: 56px; }
.vp-about-hero .vp-cta .vp-btn { position: relative; left: -28px; }   /* the live button sits on Squarespace's grid, just left of centre */

/* ---------- About ---------- */
.vp-about-hero { padding: 75px 0 119px; }
.vp-about-hero .vp-h1 { padding: 0 4.03%; }
.vp-about-hero__kids { display: block; width: 98.2%; height: auto; margin: 49px auto 50px; }
.vp-why { display: flex; padding: 79px 0 39px; min-height: 936px; }
.vp-why__text { width: 34.03%; margin-left: 7.85%; padding-top: 0; }          /* x 113, width 490 */
.vp-why__icon { display: block; width: 267px; height: 265px; object-fit: contain; max-width: 100%; margin: 0 0 51px 112px; }
.vp-why .vp-h2 { max-width: 490px; }
.vp-why .vp-lg { margin: 0 0 96px; }
.vp-why__photos { position: relative; flex: none; width: 45.63%; margin-left: 4.65%; min-height: 660px; }   /* x 670, width 657 */
.vp-why__photo { position: absolute; width: 57.69%; height: auto; object-fit: cover; }
.vp-why__photo--1 { left: 0; top: 39px; aspect-ratio: 379 / 423; border-radius: 42px 12px 0 0; }
.vp-why__photo--2 { left: 42.3%; top: 197px; aspect-ratio: 379 / 502; border-radius: 12px 22px 64px 12px; }
.vp-who { padding: 79px 0 60px; min-height: 425px; }
.vp-who .vp-h1 { text-align: center; }
.vp-who__text { width: 45.63%; margin: 51px auto 0; }                          /* x 392, width 657 */
.vp-who__text p { font-size: clamp(16px, 1.228vw, 17.68px); line-height: 1.5; font-weight: 300; }

/* ---------- Privacy ---------- */
.vp-privacy { padding: 75px 0 159px; }
.vp-privacy .vp-col-wide { margin-top: 49px; }
.vp-privacy .vp-md p { margin-bottom: 16px; }

/* ---------- Submit a Game ---------- */
.vp-submit { padding: 79px 0 553px; }                  /* the live page leaves this much space below the form */
.vp-marquee { overflow: hidden; white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vp-marquee__track { display: inline-flex; gap: .45em; animation: vp-marquee 40s linear infinite; }
.vp-marquee .vp-h1 { line-height: 1.4; }
@keyframes vp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vp-submit__cols { display: flex; margin: 99px 4.03% 0; }
.vp-submit__main { width: 53.85%; }                                             /* x 58, width 713 */
.vp-submit__intro { max-width: 657px; margin-bottom: 38px !important; }
.vp-submit__side { flex: none; width: 41.24%; margin-left: auto; }            /* x 837, width 546 */
.vp-submit__side img { display: block; width: 100%; height: auto; border-radius: 80px 0 0 0; }
.vp-form { padding: 0 0 0 44px; max-width: 668px; }                            /* x 102, width 624 */
.vp-form__item { margin: 0 0 20px; }
.vp-form__label { display: block; font: 300 17.68px/26.52px var(--vp-body); color: #000; margin-bottom: 4.5px; }
.vp-form__req { font-size: 14.272px; color: rgba(0, 0, 0, .55); }
.vp-form__desc { font: 300 14.272px/21.408px var(--vp-body) !important; color: #000; padding: 7.136px 0 !important; margin: 0 0 4px !important; }
.vp-form__item--checkbox .vp-form__desc { margin-bottom: 10px !important; }
.vp-form__item--radio .vp-form__label { margin-bottom: 6px; }
.vp-form input[type=text], .vp-form input[type=email], .vp-form textarea {
    display: block; width: 100%; border: 0; border-radius: 999px; background: var(--vp-lightmint);
    height: 49px; padding: 10px 20px; font: 300 16px/1.4 var(--vp-body); color: #000; outline: none;
}
.vp-form textarea { height: 100px; border-radius: 27.5px; resize: vertical; }
.vp-form input:focus, .vp-form textarea:focus { box-shadow: 0 0 0 2px #000; }
.vp-choice { display: flex; align-items: center; gap: 14px; margin: 0 0 27px; cursor: pointer; min-height: 25px;
    font-family: var(--vp-button); font-weight: 500; font-size: 14.272px; text-transform: uppercase; color: #000; }
.vp-choice:last-child { margin-bottom: 0; }
.vp-form__item--checkbox .vp-choice { margin-bottom: 22px; }
.vp-form__item--checkbox .vp-choice:last-child { margin-bottom: 0; }
.vp-choice input { appearance: none; -webkit-appearance: none; width: 25px; height: 25px; margin: 0; flex: none;
    border: 2.5px solid #555; border-radius: 50%; background: #fff; cursor: pointer; }
.vp-choice input:checked { background: radial-gradient(circle, #000 0 5px, #fff 6px); }
.vp-choice--single { margin: -15px 0 20px; }
.vp-form__section { font: 300 17.68px/26.52px var(--vp-body); color: #000; padding-bottom: 5px; border-bottom: 1.5px solid #000; margin: 32px 0 32px; }
.vp-form .vp-btn { height: 53px; padding: 16px 20.8px; font-size: 16px; margin-top: 0; }
.vp-form-status { font-size: 14px !important; margin-top: 12px !important; }
.vp-form-status:empty { display: none; }
.vp-form-status.is-error { color: #c62828; font-weight: 600; }
.vp-form [type=submit]:disabled, .vp-newsletter__form [type=submit]:disabled, .newsletter-form [type=submit]:disabled { opacity: .6; cursor: progress; }
/* the portal's spam trap (partials/form-honeypot.html): off-screen, never shown */
.vp-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Join the Vault ---------- */
.vp-join-hero { display: flex; align-items: center; min-height: 505px; padding: 0 4.03% 16px; }
.vp-join-hero__glow { position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(38% 22% at 58% 20%, rgba(22, 120, 86, .55), transparent 70%),
      radial-gradient(26% 20% at 18% 78%, rgba(22, 120, 86, .45), transparent 70%),
      radial-gradient(30% 24% at 88% 30%, rgba(22, 120, 86, .35), transparent 70%),
      radial-gradient(34% 26% at 86% 86%, rgba(22, 120, 86, .4), transparent 70%);
    filter: blur(18px); animation: vp-drift 18s ease-in-out infinite alternate; }
@keyframes vp-drift { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .vp-join-hero__glow, .vp-marquee__track { animation: none; } }
.vp-join-hero__text { position: relative; width: 41.24%; }                      /* x 58, width 546 */
.vp-join-hero__text .vp-lg { color: #fff; margin-top: 10px; }
.vp-join-hero__img { position: relative; width: 49.5%; height: auto; margin-left: auto; }   /* x 670, width 713 */
.vp-highlight { background: none; color: #fff; padding-bottom: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 4 Q10 0 20 3 T40 3' fill='none' stroke='%2367ffcf' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: 0 100%; background-size: 40px 6px; }
.vp-split { display: flex; align-items: center; }
.vp-split__text { position: relative; }
.vp-split--keys { padding: 95px 4.03%; min-height: 815px; gap: 9.21%; }
.vp-split--keys .vp-split__img { width: 45.39%; aspect-ratio: 1; object-fit: cover; }   /* x 58, width 601 */
.vp-split--keys .vp-split__text { width: 45.39%; }                                   /* x 781, width 601 */
.vp-split--keys .vp-lg { margin-bottom: 50px; }
.vp-split--bleed-right, .vp-split--bleed-left { align-items: stretch; min-height: 581px; }
.vp-split__bleed { width: 49.65%; object-fit: cover; flex: none; }              /* width 715, full height */
.vp-split--bleed-right .vp-split__bleed { margin-left: auto; min-height: 747px; }
.vp-split--bleed-right .vp-split__text { width: 41.74%; margin-left: 4.03%; padding-top: 119px; }
.vp-split--bleed-left .vp-split__text { width: 37.9%; margin-left: 8.47%; padding-top: 118px; }
.vp-split--inset .vp-split__text { margin-left: 7.85%; padding-top: 158px; width: 30.14%; }
.vp-split--inset .vp-split__bleed { min-height: 739px; }
.vp-narrow { max-width: 434px; }
.vp-split .vp-md { margin: 11px 0 11px; }

/* Squarespace's grid gives each text block a fixed height; paragraphs and buttons sit below the block, not the text. */
@media (min-width: 801px) {
    .vp-split--bleed-right:not(.vp-split--inset) .vp-h2 { min-height: 147px; margin-bottom: 0; }
    .vp-split--bleed-left .vp-h2 { min-height: 68px; margin-bottom: 11px; }
    .vp-split--bleed-left .vp-md { min-height: 147px; margin: 0 0 11px; }
    .vp-split--inset .vp-h2 { min-height: 107px; margin-bottom: 11px; }
    .vp-split--inset .vp-md { min-height: 107px; margin: 0 0 11px; }
}

/* ---------- footer ---------- */
.vp-footer { background: #000; }
.vp-newsletter { text-align: center; padding: 40px 4.03% 38px; min-height: 423px; }
.vp-newsletter .vp-p { color: var(--vp-mint); margin: 14px 0 34px; }
.vp-newsletter__fields { display: flex; gap: 13px; justify-content: center; max-width: 868px; margin: 0 auto 32px; }
.vp-newsletter__fields input { flex: 1; min-width: 0; height: 66px; border: 0; border-radius: 0; background: #fff;
    padding: 0 22px; font: 300 16px var(--vp-body); color: #000; }
.vp-newsletter__fields input::placeholder { color: #aaa; }
.vp-newsletter .vp-form-status { color: var(--vp-mint); margin: 8px 0 0 !important; min-height: 0; }
.vp-newsletter .vp-form-status:empty { display: none; }
.vp-newsletter .vp-form-status.is-error, .newsletter .vp-form-status.is-error { color: #ff8a80; }
.vp-newsletter .vp-small { color: var(--vp-mint); margin-top: 40px; }
.vp-partners { padding: 39px 4.03% 40px; min-height: 265px; }
.vp-partners__logos { display: flex; justify-content: center; align-items: center; gap: 122px; margin-top: 50px; }
.vp-partners__logos img { width: 156px; height: auto; display: block; }

/* ---------- phones ---------- */
@media (max-width: 800px) {
    .vp-col-wide, .vp-who__text { width: auto; margin-left: 6vw; margin-right: 6vw; }
    .vp-why, .vp-submit__cols, .vp-split, .vp-join-hero { flex-direction: column; min-height: 0; }
    .vp-why__text, .vp-submit__main, .vp-join-hero__text, .vp-split__text,
    .vp-split--keys .vp-split__img, .vp-split--keys .vp-split__text, .vp-split--inset .vp-split__text { width: auto; margin: 0 6vw; padding-top: 40px; }
    .vp-why__icon { margin-left: 0; width: 160px; }
    .vp-why__photos { width: 88vw; margin: 40px 6vw 0; min-height: 110vw; }
    .vp-split__bleed, .vp-join-hero__img, .vp-submit__side { width: 100%; margin: 40px 0 0; min-height: 0 !important; }
    .vp-split--bleed-left .vp-split__bleed { order: 2; }
    .vp-split--keys { padding: 40px 0; }
    .vp-submit__cols { margin: 40px 0 0; }
    .vp-form { padding: 0; }
    .vp-newsletter__fields { flex-direction: column; }
    .vp-partners__logos { gap: 40px; }
    .vp-about-hero, .vp-privacy { padding-bottom: 100px; }
    .vp-submit { padding-bottom: 80px; }
}

/* ---------- Games page: same black header and heading type as About/Privacy ---------- */
.vp-games-hero { padding: 75px 16px 64px; }
.vp .vp-games-hero__text { margin: 24px auto 0; max-width: 900px; }
.games-page .filters h3, .games-page .game-card .game-title, .games-page .filter-header span:first-child {
    font-family: var(--vp-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; color: #000;
}
.vp-no-base9 .games-page .filters h3, .vp-no-base9 .games-page .game-card .game-title, .vp-no-base9 .games-page .filter-header span:first-child { font-size-adjust: cap-height 0.667; letter-spacing: 0.1em; -webkit-text-stroke: 0.028em currentColor; }
@media (max-width: 800px) { .vp-games-hero { padding: 48px 16px 40px; } }

/* ---------- Home: Featured Games (partials/vault-page/featured-games.html) ---------- */
.vp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vp-featured { padding: clamp(32px, 5.9vw, 85px) 0 clamp(56px, 6.67vw, 96px); }
/* The wave: white heading type drifting left, faded at both edges; the cards' images sit over its lower edge. */
.vp-wave { position: relative; z-index: 0; color: #fff; font-family: var(--vp-display); text-transform: uppercase;
    font-size: clamp(26px, 3.328vw, 47.92px); letter-spacing: -0.02em; line-height: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%); }
.vp-wave__svg { display: block; width: 100%; overflow: visible; }
.vp-wave text { fill: currentColor; font: inherit; letter-spacing: inherit; }
.vp-featured__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 0.764%;
    width: 91.94%; margin: clamp(-11px, -0.76vw, -6px) auto 0; }              /* cards at x 58/503/948, 434 wide */
.vp-featured__card { display: flex; flex-direction: column; min-width: 0; }
.vp-featured__img { display: block; aspect-ratio: 434 / 265; overflow: hidden; background: #111; }
.vp-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp .vp-featured__title { font-family: var(--vp-display); font-weight: 400; text-transform: uppercase; color: var(--vp-mint);
    font-size: clamp(20px, 1.811vw, 26.08px); line-height: 1.171; letter-spacing: -0.02em; margin: 11px 0 0; }
.vp .vp-featured__blurb, .vp .vp-featured__blurb p { color: #fff; font-weight: 300; font-size: clamp(16px, 1.228vw, 17.68px); line-height: 1.5; margin: 0; }
.vp-featured__blurb { margin-top: 32px !important; }
.vp-featured__play { margin-top: auto; padding-top: 28px; text-align: center; }
@media (max-width: 800px) {
    .vp-featured__grid { grid-template-columns: 1fr; width: auto; margin-left: 16px; margin-right: 16px; gap: 48px; }
    .vp-featured__blurb { margin-top: 16px !important; }
}