:root {
    --great-ink: #394f69;
    --great-brown: #c28455;
    --great-paper: #f9f3ee;
}




.tag-btn {
    max-width: 170px;
    text-decoration: none !important;
}

.tag-btn:hover,
.tag-btn:focus,
.tag-btn:focus-visible {
    text-decoration: none !important;
}

.wonder-hero {
    position: relative;
    margin-top: -30px;
    padding: 70px 0 54px;
    background: color-mix(in srgb, var(--great-brown) 10%, transparent);
}

.wonder-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 34px;
}

.wonder-switch .switch-label {
    flex: 0 0 auto;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.2px;
}

.wonder-switch ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wonder-tag {
    --bw: 1.5px;
    /* border thickness, yahan se adjust karo */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    color: var(--wonder);
    font-family: "hobeaux", sans-serif;
    font-size: 18px;
    isolation: isolate;
    line-height: 1;
    text-decoration: none !important;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.wonder-tag::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--wonder);
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153.22 29.98' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke' stroke-linejoin='round' d='M140,1c2.35,0,4.49,0,6.55.12a11,11,0,0,1,3.66.54c1,.42,1.19,1,1.29,2.12.48,5,.72,10.13.72,15.17,0,2.21-.05,4.46-.14,6.66,0,1-.16,1.45-.78,1.87a9.68,9.68,0,0,1-3.56.95,60,60,0,0,1-7.78.46c-3.29,0-6.66-.2-9.91-.4-3-.18-6-.36-9.11-.39l-2,0c-5,0-10.07.21-15,.41-3.29.13-6.7.27-10,.34-2.69.06-5.45.09-8.46.09-7.51,0-15.17-.19-22.58-.37-3.29-.08-6.57-.16-9.85-.22-4.53-.09-9.21-.18-13.82-.18-2.39,0-4.56,0-6.66.07-3.19.07-6.43.21-9.56.35-4.58.2-9.32.41-14,.41H8.22c-2,0-4.26-.12-5.48-.84-.82-.48-.94-1.12-1-2.05a156.79,156.79,0,0,1-.55-22c0-.93.17-1.37.82-1.74a8.32,8.32,0,0,1,2.75-.7,65.18,65.18,0,0,1,9-.52c2.42,0,4.9.08,7.3.15l2,.06c3.68.11,7.61.17,12,.17,5.61,0,11.3-.09,16.82-.17,5.16-.08,10.49-.16,15.74-.17h.84c6.6,0,13.33.14,19.84.27s13.29.28,19.94.28H110c4.84,0,9.81-.19,14.61-.36C129.64,1.19,134.89,1,140,1Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--shape) 0 0/100% 100% no-repeat;
    mask: var(--shape) 0 0/100% 100% no-repeat;
    transition: transform .15s;
}

.wonder-tag svg,
.wonder-tag img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
}

.wonder-tag svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wonder-tag.is-active img,
.wonder-tag:hover img,
.wonder-tag:focus-visible img {
    filter: brightness(0) invert(1);
}


.wonder-tag::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--wonder);
    opacity: 0;
    --fill-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153.22 29.98' preserveAspectRatio='none'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke' stroke-linejoin='round' d='M140,1c2.35,0,4.49,0,6.55.12a11,11,0,0,1,3.66.54c1,.42,1.19,1,1.29,2.12.48,5,.72,10.13.72,15.17,0,2.21-.05,4.46-.14,6.66,0,1-.16,1.45-.78,1.87a9.68,9.68,0,0,1-3.56.95,60,60,0,0,1-7.78.46c-3.29,0-6.66-.2-9.91-.4-3-.18-6-.36-9.11-.39l-2,0c-5,0-10.07.21-15,.41-3.29.13-6.7.27-10,.34-2.69.06-5.45.09-8.46.09-7.51,0-15.17-.19-22.58-.37-3.29-.08-6.57-.16-9.85-.22-4.53-.09-9.21-.18-13.82-.18-2.39,0-4.56,0-6.66.07-3.19.07-6.43.21-9.56.35-4.58.2-9.32.41-14,.41H8.22c-2,0-4.26-.12-5.48-.84-.82-.48-.94-1.12-1-2.05a156.79,156.79,0,0,1-.55-22c0-.93.17-1.37.82-1.74a8.32,8.32,0,0,1,2.75-.7,65.18,65.18,0,0,1,9-.52c2.42,0,4.9.08,7.3.15l2,.06c3.68.11,7.61.17,12,.17,5.61,0,11.3-.09,16.82-.17,5.16-.08,10.49-.16,15.74-.17h.84c6.6,0,13.33.14,19.84.27s13.29.28,19.94.28H110c4.84,0,9.81-.19,14.61-.36C129.64,1.19,134.89,1,140,1Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--fill-shape) 0 0/100% 100% no-repeat;
    mask: var(--fill-shape) 0 0/100% 100% no-repeat;
    transition: opacity .18s ease;
}

.wonder-tag.is-active,
.wonder-tag:hover,
.wonder-tag:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.wonder-tag.is-active::after,
.wonder-tag:hover::after,
.wonder-tag:focus-visible::after {
    opacity: 1;
}

.wonder-intro {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: center;
    gap: 54px;
    margin-top: 40px;
}

.wonder-art {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wonder-art img {
    display: block;
    width: 390px;
    height: auto;
}

.wonder-copy {
    text-align: center;
}

.wonder-copy h1,
.play-matters h2,
.activities-band h2,
.resource-card h2 {
    margin: 0;
    color: var(--great-brown);
    font-family: "hobeaux", sans-serif;
    font-weight: 500;
}

.wonder-copy h1 {
    margin-bottom: 9px;
    font-size: 45px;
    line-height: 1.08;
}

.wonder-copy>p {
    max-width: 760px;
    margin: 0 auto 15px;
    font-size: 18px;
    line-height: 1.35;
}

.wonder-action {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 790px;
    margin: 27px auto 0;
    justify-content: space-between;
}

.wonder-action .tag-btn {
    flex-shrink: 0;
}

.toran-note {
    max-width: 450px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 98px;
    padding: 10px 22px;
    background: url("../images/foram-shape.png") center / 100% 100% no-repeat;
    text-align: left;
}

.toran-note img {
    flex: 0 0 56px;
    width: 56px;
    height: 57px;
    object-fit: contain;
}

.toran-note p {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.25;
}

.note-arrow {
    width: 120px;
    color: var(--great-ink);
}

.toran-button {
    display: inline-flex;
    min-height: 70px;
    align-items: center;
    justify-content: center;
    padding: 8px 25px 8px 18px;
    clip-path: polygon(0 5%, 77% 0, 100% 50%, 77% 100%, 0 95%);
    background: var(--great-brown);
    color: #fff;
    font-family: "hobeaux", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    text-decoration: none !important;
    transform: rotate(-8deg);
    transition: transform .2s ease, background-color .2s ease;
}

.toran-button:hover,
.toran-button:focus,
.toran-button:focus-visible {
    background: #ad6d43;
    color: #fff;
    transform: rotate(-4deg);
    text-decoration: none !important;
}

.wonder-gallery {
    position: relative;
    padding: 82px 0 76px;
    overflow: hidden;
    background: #fff;
    text-align: center;
}

.gallery-track {
    margin: 0 auto;
}

.gallery-track .gallery-slide {
    padding: 0 15px;
}

.gallery-track img {
    display: block;
    width: 190px;
    height: 260px;
    object-fit: contain;
}

.gallery-slide--wide img {
    width: 370px;
}

.gallery-slide--narrow img {
    width: 200px;
}

.text-link {
    display: inline-block;
    color: #394F69;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: color .18s ease, opacity .18s ease;
}

.text-link:hover,
.text-link:focus-visible {
    text-decoration: underline;
    opacity: 0.8;
}

.wonder-gallery>.text-link {
    margin-top: 54px;
}

.gallery-children {
    position: absolute;
    right: max(calc((100vw - 1200px) / 2 + -50px), 20px);
    width: 100px;
    height: auto;
    top: -102px;
}

.wonder-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 30' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 9 C75 9 120 17 200 11 S315 8 390 13 S500 10 580 11 S720 16 820 15 S930 15 1020 15 S1160 19 1270 12 S1430 5 1540 8 S1690 18 1790 12 S1870 9 1920 11 V30 H0Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
    content: "";
    pointer-events: none;
    z-index: 3;
}

.play-matters {
    --play-matters-color: var(--great-brown, #c28455);
    --play-matters-opacity: .1;
    --edge: 20px;
    position: relative;
    isolation: isolate;
    padding: 70px 0 68px;
}

.play-matters::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--play-matters-color);
    opacity: var(--play-matters-opacity);

    --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 20' preserveAspectRatio='none'%3E%3Cpath d='M0,3.8C8.3,3.9 32.5,4.0 50.0,4.3C67.5,4.6 86.7,5.1 105.0,5.8C123.4,6.4 125.9,6.4 160.0,8.1C194.2,9.8 277.5,14.3 310.0,15.8C342.5,17.3 340.0,16.9 355.0,17.3C370.0,17.6 385.0,17.8 400.0,17.8C415.0,17.8 429.2,17.7 445.0,17.2C460.8,16.8 478.3,16.1 495.0,15.1C511.7,14.1 526.7,13.0 545.0,11.4C563.3,9.7 591.7,6.4 605.0,5.1C618.3,3.8 615.8,4.0 625.0,3.4C634.2,2.8 647.5,2.0 660.0,1.5C672.5,1.0 678.3,0.5 700.0,0.4C721.7,0.3 740.0,-0.2 790.0,0.8C840.0,1.8 956.7,5.4 1000.0,6.5C1043.3,7.6 1034.2,7.2 1050.0,7.4C1065.8,7.6 1069.2,7.9 1095.0,7.8C1120.8,7.7 1168.3,7.0 1205.0,7.0C1241.7,7.0 1289.2,7.7 1315.0,7.8C1340.8,7.9 1344.2,7.9 1360.0,7.7C1375.8,7.4 1391.7,7.1 1410.0,6.3C1428.3,5.5 1456.7,3.3 1470.0,2.7C1483.3,2.1 1484.2,2.5 1490.0,2.5C1495.8,2.6 1499.2,2.7 1505.0,3.0C1510.8,3.3 1508.3,2.9 1525.0,4.2C1541.7,5.6 1589.2,9.9 1605.0,11.2C1620.8,12.5 1615.0,11.8 1620.0,12.0C1625.0,12.2 1630.0,12.4 1635.0,12.4C1640.0,12.4 1645.0,12.4 1650.0,12.3C1655.0,12.1 1660.0,11.9 1665.0,11.5C1670.0,11.2 1674.2,10.8 1680.0,10.0C1685.8,9.3 1695.0,7.9 1700.0,7.2C1705.0,6.6 1705.0,6.5 1710.0,6.1C1715.0,5.7 1723.3,5.1 1730.0,4.7C1736.7,4.4 1740.8,4.2 1750.0,4.1C1759.2,4.0 1763.3,3.7 1785.0,4.3C1806.6,4.8 1857.5,6.7 1880.0,7.3C1902.5,7.9 1913.3,7.6 1920.0,7.7V20H0Z'/%3E%3C/svg%3E");

    --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1920V15.9C1911.7,15.8 1887.5,15.7 1870.0,15.4C1852.5,15.1 1833.3,14.5 1815.0,13.9C1796.6,13.3 1794.1,13.2 1760.0,11.6C1725.8,9.9 1642.5,5.4 1610.0,3.9C1577.5,2.4 1580.0,2.8 1565.0,2.4C1550.0,2.1 1535.0,1.8 1520.0,1.8C1505.0,1.8 1490.8,2.0 1475.0,2.4C1459.2,2.9 1441.7,3.6 1425.0,4.6C1408.3,5.6 1393.3,6.6 1375.0,8.3C1356.7,9.9 1328.3,13.2 1315.0,14.5C1301.7,15.9 1304.2,15.6 1295.0,16.2C1285.8,16.8 1272.5,17.7 1260.0,18.2C1247.5,18.7 1241.7,19.1 1220.0,19.3C1198.3,19.4 1180.0,19.9 1130.0,18.9C1080.0,17.9 963.3,14.3 920.0,13.2C876.7,12.1 885.8,12.5 870.0,12.3C854.2,12.0 850.8,11.8 825.0,11.9C799.2,11.9 751.7,12.7 715.0,12.6C678.3,12.6 630.8,12.0 605.0,11.8C579.2,11.7 575.0,11.8 560.0,12.0C545.0,12.2 526.7,12.7 515.0,13.1C503.3,13.5 500.0,13.8 490.0,14.4C480.0,15.0 465.0,16.3 455.0,16.8C445.0,17.2 436.7,17.1 430.0,17.1C423.3,17.1 420.8,16.9 415.0,16.7C409.2,16.4 411.7,16.8 395.0,15.4C378.3,14.1 330.8,9.8 315.0,8.5C299.2,7.2 305.0,7.9 300.0,7.7C295.0,7.5 290.0,7.3 285.0,7.3C280.0,7.2 275.0,7.2 270.0,7.4C265.0,7.5 260.0,7.8 255.0,8.1C250.0,8.5 245.8,8.9 240.0,9.6C234.2,10.3 225.0,11.8 220.0,12.5C215.0,13.1 215.0,13.1 210.0,13.5C205.0,14.0 196.7,14.6 190.0,14.9C183.3,15.3 179.2,15.5 170.0,15.5C160.8,15.6 156.7,15.9 135.0,15.4C113.4,14.9 62.5,12.9 40.0,12.4C17.5,11.8 6.7,12.0 0.0,12.0Z'/%3E%3C/svg%3E");

    -webkit-mask:
        var(--wave-top) top / 100% var(--edge) no-repeat,
        var(--wave-bottom) bottom / 100% var(--edge) no-repeat,
        linear-gradient(#000 0 0) center / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat;
    mask:
        var(--wave-top) top / 100% var(--edge) no-repeat,
        var(--wave-bottom) bottom / 100% var(--edge) no-repeat,
        linear-gradient(#000 0 0) center / 100% calc(100% - var(--edge) * 2 + 2px) no-repeat;
}

.matter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    max-width: 1200px;
}


.matter-card {
    --matter-border-color: var(--great-brown, #c28455);
    position: relative;
    isolation: isolate;
    min-height: 320px;
    padding: 42px;
    text-align: center;
    border: 0;
}

.matter-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--matter-border-color, var(--great-brown, #c28455));
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 575.64 321.46' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M526,2.27a227.25,227.25,0,0,1,24.5,1.24c5.12.55,10,1.42,13.59,5.89,5.36,6.68,6.2,19.1,6.57,30.22,1.8,54.24,2.72,109.28,2.71,163.6,0,23.85-.17,48-.52,71.87-.16,10.41-.6,20.35-4.35,27.41-3.36,6.35-8.83,9.06-13.74,10.87a82.35,82.35,0,0,1-28.91,4.84c-12.31,0-24.9-2.15-37.08-4.22-11.19-1.91-22.77-3.88-34.36-4.26-2.49-.09-5.07-.13-7.67-.13-18.85,0-37.89,2.2-56.31,4.32-12.36,1.42-25.14,2.89-37.69,3.68-10.08.63-20.46.94-31.72.94-28.18,0-56.95-2-84.77-3.93-12.15-.84-24.71-1.71-37-2.4-17-1-34.63-1.94-52-1.94-9,0-17.17.25-25.06.78-12,.8-24.2,2.32-36,3.79-17.19,2.14-35,4.35-52.42,4.35l-2.88,0c-7.85-.11-15.77-1.31-20.54-9.31C6,302.61,5.33,292,5,280.76,2.32,202.07,1.63,122.23,2.89,43.46c.15-9.79.64-19.88,4.62-26.32,2.7-4.38,6.67-6.37,10.57-7.88,9.71-3.75,20.34-5.5,33.43-5.5,9.06,0,18.35.84,27.33,1.65l7.61.66C100.31,7.23,115.08,7.8,131.6,7.8c21.09,0,42.51-.93,63.23-1.83,19.38-.84,39.41-1.7,59.1-1.81h3.16c24.78,0,50,1.52,74.47,3s50,3,75,3c2.22,0,4.43,0,6.58,0,18.23-.2,36.9-2.09,55-3.92,19.05-1.93,38.75-3.93,57.9-3.93M526,0c-37.44,0-75.53,7.43-112.88,7.85q-3.27,0-6.56,0c-49.88,0-99.73-6-149.46-6h-3.18c-40.77.22-81.55,3.64-122.31,3.64-15,0-30-.47-45-1.72C75,2.84,63.2,1.49,51.51,1.49s-23,1.32-34.25,5.65C13,8.79,8.59,11.05,5.57,15.94,1.2,23,.77,33.7.62,43.42Q-1.28,162.13,2.69,280.84c.35,10.68,1,22.27,5.7,30.18,5.43,9.1,14.4,10.31,22.46,10.42,1,0,1.95,0,2.92,0,29.56,0,59-6.17,88.54-8.14,8.3-.56,16.61-.78,24.91-.78,17.29,0,34.59,1,51.87,1.94,40.45,2.27,81.31,6.33,121.92,6.33,10.64,0,21.27-.28,31.87-.94,31.29-2,62.5-8,93.85-8q3.79,0,7.59.13c24.11.79,47.73,8.48,71.52,8.48a84.54,84.54,0,0,0,29.69-5c5.58-2.06,11.37-5.13,15-11.94,4.1-7.74,4.46-18.49,4.61-28.44q.52-35.94.53-71.9,0-81.87-2.72-163.67c-.38-11.46-1.24-24.31-7.06-31.57-4.14-5.16-9.8-6.16-15.13-6.73A229.24,229.24,0,0,0,526,0Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--shape) 0 0/100% 100% no-repeat;
    mask: var(--shape) 0 0/100% 100% no-repeat;
}



.matter-card h2 {
    margin: 0 0 12px;
    color: var(--great-brown);
    font-size: 29px;
    line-height: 1.2;
}

.matter-card p,
.activity-list li {
    font-size: 18px;
    line-height: 1.35;
}

.matter-card p+p {
    margin-top: 16px;
}

.matter-card a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

.matter-card a:hover,
.matter-card a:focus-visible {
    text-decoration: underline;
    opacity: 0.85;
}

.why-it-matters-content a,
.why-it-matters-content a strong {
    font-weight: 400 !important;
}

.why-it-matters-content a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.why-it-matters-content a:hover,
.why-it-matters-content a:focus-visible {
    text-decoration: underline !important;
}

.activity-list ul,
ul.activities-items {
    margin: 0;
    padding: 0 0 0 22px;
    list-style: disc !important;
}

.activity-list li,
.activities-items li {
    font-size: 18px;
    line-height: 1.4;
    list-style-type: disc !important;
    display: list-item !important;
}

.activity-list li::marker,
.activities-items li::marker {
    color: var(--great-brown, currentColor);
    font-size: 1.1em;
}

.activity-list li+li {
    margin-top: 8px;
}

.resource-section {
    position: relative;
    background: #fff;
}

.resource-featured {
    padding: 80px 0 76px;
}

.resource-intro {
    max-width: 1020px;
    margin: 0 auto 44px;
    font-size: 18px;
    line-height: 1.45;
    text-align: center;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 48px;
}

.resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.resource-card h2 {
    min-height: 42px;
    margin: 0 0 18px;
    font-size: 29px;
    line-height: 1.25;
}

.resource-image {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 190px;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    background: var(--great-ink);
    color: #fff;
    text-decoration: none;
    -webkit-mask: url("../images/playshape.png") center / 100% 100% no-repeat;
    mask: url("../images/playshape.png") center / 100% 100% no-repeat;
}

.resource-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.resource-image:hover img {
    transform: scale(1.05);
}

.resource-image>span:not(.play-button) {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 8px;
}

.resource-card a {
    color: #394F69;
    text-decoration: none;
}

.resource-card h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.resource-card h3 a {
    color: #394F69;
    text-decoration: none;
    transition: color .25s ease, opacity .25s ease;
}

.resource-card h3 a:hover,
.resource-card h3 a:focus-visible {
    text-decoration: underline;
    opacity: 0.92;
}

.resource-card>p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.4;
    color: #394F69;
}

.resource-card .text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    color: #394F69;
    text-decoration: none;
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

.resource-card .text-link:hover,
.resource-card .text-link:focus-visible {
    text-decoration: underline;
    transform: translateX(4px);
    opacity: 0.9;
}

.resource-card.is-featured {
    padding-top: 0;
}

.resource-card.is-featured .resource-image {
    height: 240px;
    margin-bottom: 28px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    transition: transform 0.25s ease, background 0.25s ease;
}

.resource-image:hover .play-button,
.resource-card:hover .play-button {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, 0.4);
}

.play-button svg {
    width: 42px;
    height: 42px;
    fill: #fff;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.activities-band {
    position: relative;
    padding: 58px 0 85px;
    background: color-mix(in srgb, var(--great-brown) 10%, transparent) !important;
    text-align: center;
    z-index: 1;
}

.activities-band::before,
.activities-band::after {
    position: absolute;
    right: 0;
    left: 0;
    height: 48px;
    background: url("../images/matters-shape-top.png") center / 100% 148px no-repeat;
    content: "";
    z-index: -1;
}

.activities-band::before {
    top: 0px;
    background-position: bottom;
}

.wonder-page .activities-band::after {
    content: "";
    bottom: -42px;
    background-position: bottom;
    background: url("../images/matters-shape-top.png") center / 100% 148px no-repeat;
    transform: scale(-1);
    width: 100%;
    height: 80px;
}


.activities-child {
    position: absolute;
    z-index: 1;
    top: -120px;
    left: max(calc((100vw - 1200px) / 2 - 85px), 12px);
    width: 75px;
}

.activities-band>.great-container>h2 {
    margin: 0 0 26px;
    font-size: 29px;
    line-height: 1.2;
}

.activity-cards {
    display: flex;
    gap: 30px;
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
}

.activity-cards.slick-slider {
    display: block;
    width: 100%;
    margin: 0 0 40px;
    transform: none;
}

.activity-card {
    padding: 0 15px;
}

.activity-card a,
.activity-card a:visited {
    color: #394F69;
    text-decoration: none;
    display: block;
}

.activity-card a:hover p,
.activity-card a:focus-visible p {
    text-decoration: underline;
}

.activity-art {
    display: grid;
    height: 190px;
    place-items: center;
    margin-bottom: 22px;
    background: var(--great-brown);
    -webkit-mask: url("../images/playshape.png") center / 100% 100% no-repeat;
    mask: url("../images/playshape.png") center / 100% 100% no-repeat;
    overflow: hidden;
}

.activity-art img {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.activity-art svg,
.activity-art .activities-list-butterfly {
    width: 82px;
    height: 82px;
    fill: none;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.activity-card p {
    min-height: 48px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #394F69;
}

.activities-band>.great-container>.text-link {
    margin-top: 27px;
}

.resource-lower {
    padding: 80px 0 140px;
}



@media (max-width: 1199px) {
    .wonder-switch {
        flex-wrap: wrap;
    }

    .wonder-intro {
        grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
        gap: 30px;
    }

    .wonder-action {
        grid-template-columns: minmax(250px, 1fr) 90px 180px;
        gap: 12px;
    }

    .note-arrow {
        width: 90px;
    }

    .resource-grid {
        gap: 28px;
    }

    .resource-card h3 {
        font-size: 18px;
    }

    .resource-card h3 br {
        display: none;
    }
.activities-child {
    top: -70px;
}

}

@media (max-width: 991px) {
    .activities-child {
    top: -70px;
    width: 75px;
}
    .wonder-hero {
        padding: 32px 0 48px;
    }

    .wonder-intro {
        grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
        gap: 26px;
    }

    .wonder-art img {
        width: 100%;
    }

    .wonder-copy h1 {
        font-size: 40px;
    }

    .wonder-copy>p {
        font-size: 16px;
    }

    .wonder-action {
        grid-template-columns: 1fr 145px;
    }

    .note-arrow {
        display: none;
    }

    .toran-button {
        font-size: 17px;
    }

    .matter-grid {
        gap: 24px;
    }

    .matter-card {
        min-height: 0;
    }



    .matter-card p,
    .activity-list li {
        font-size: 15px;
    }

    .resource-grid {
        gap: 20px;
    }

    .resource-image {
        height: 150px;
    }

    .resource-card.is-featured .resource-image {
        height: 190px;
    }
}

@media (max-width: 767px) {
    .great-container {
        width: min(100% - 36px, 560px);
    }

    .wonder-hero {
        padding: 42px 0 42px;
    }

    .wonder-switch {
        align-items: flex-start;
        gap: 10px;
    }

    .wonder-switch .switch-label {
        width: 100%;
        font-size: 14px;
        text-align: center;
    }

    .wonder-switch ul {
        flex-wrap: wrap;
        gap: 6px;
    }

    .wonder-tag {
        font-size: 14px;
    }

    .wonder-intro {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 25px;
    }

    .wonder-art img {
        width: min(100%, 360px);
    }

    .wonder-copy h1 {
        font-size: 36px;
    }

    .wonder-copy>p {
        font-size: 15px;
        line-height: 1.5;
    }

    .wonder-action {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        margin-top: 20px;
    }

    .toran-note {
        width: 100%;
        max-width: 430px;
    }

    .wonder-gallery {
        padding: 44px 0 64px;
    }

    .gallery-track {
        margin: 0 auto;
    }

    .gallery-track img {
        width: 145px;
        height: 190px;
        border-radius: 14px;
    }

    .gallery-track .gallery-slide {
        padding: 0 7px;
    }

    .gallery-slide--wide img {
        width: 240px;
    }

    .gallery-slide--narrow img {
        width: 145px;
    }

    .wonder-gallery>.text-link {
        margin-top: 30px;
    }

    .text-link {
        font-size: 15px;
    }

.gallery-children {
    right: 12px;
    width: 60px;
    top: -40px;
}

    .play-matters {
        padding: 50px 0;
    }

    .matter-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .matter-card {
        padding: 22px 18px;
    }

    .matter-card h2,
    .activities-band>h2 {
        font-size: 25px;
    }

    .resource-featured,
    .resource-lower {
        padding: 45px 0 58px;
    }

    .resource-intro {
        margin-bottom: 32px;
        font-size: 15px;
    }

    .resource-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .resource-card {
        width: min(100%, 380px);
        margin: 0 auto;
    }

    .resource-card h2 {
        min-height: 0;
        margin-bottom: 14px;
        font-size: 25px;
    }

    .resource-image {
        height: 185px;
    }

    .resource-card.is-featured .resource-image {
        height: 210px;
    }

    .activities-band {
        padding: 48px 0 45px;
    }

.activities-child {
    top: -40px;
    width: 50px;
    z-index: 1;
    left: 30px;
}

    .activity-cards {
        gap: 14px;
    }

    .activity-card {
        padding: 0 10px;
    }

    .activity-art {
        height: 145px;
        margin-bottom: 14px;
    }

    .activity-art svg {
        width: 64px;
        height: 64px;
    }

    .activity-card p {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}