:root {
                --bg: #f2f5f0;
                --ink: #15241b;
                --mute: #55655b;
                --card: #fff;
                --line: #d6ddd3;
                --deep: #173a29;
                --deepink: #eef4ec;
                --berry: #b3263d;
                --berryink: #fff;
                box-sizing: border-box;
                padding-top: env(safe-area-inset-top,0px);
                padding-bottom: env(safe-area-inset-bottom,0px)
            }

            @media (prefers-color-scheme: dark) {
                :root:not([data-theme="light"]) {
                    --bg:#0f1712;
                    --ink: #e8efe6;
                    --mute: #9bab9f;
                    --card: #17231c;
                    --line: #27372d;
                    --deep: #0a1f15;
                    --berry: #d8475d
                }
            }

            :root[data-theme="dark"] {
                --bg: #0f1712;
                --ink: #e8efe6;
                --mute: #9bab9f;
                --card: #17231c;
                --line: #27372d;
                --deep: #0a1f15;
                --berry: #d8475d
            }

            *,*::before,*::after {
                box-sizing: inherit
            }

            html {
                scroll-behavior: smooth;
                scroll-padding-top: calc(72px + env(safe-area-inset-top,0px))
            }

            body {
                margin: 0;
                background: var(--bg);
                color: var(--ink);
                font: 400 1rem/1.6 Figtree,system-ui,sans-serif
            }

            h1,h2,h3 {
                font-family: "Bricolage Grotesque",Figtree,system-ui,sans-serif;
                line-height: 1.05;
                margin: 0
            }

            a {
                color: inherit
            }

            :focus-visible {
                outline: 3px solid var(--berry);
                outline-offset: 3px
            }

            .wrap {
                max-width: 1120px;
                margin: 0 auto;
                padding: 0 20px
            }

            header {
                position: sticky;
                top: env(safe-area-inset-top,0px);
                z-index: 5;
                background: var(--deep);
                color: var(--deepink)
            }

            header .wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 64px;
                gap: 16px
            }

            .logo {
                font: 800 1.15rem "Bricolage Grotesque",sans-serif;
                text-decoration: none;
                display: flex;
                gap: 10px;
                align-items: center
            }

            .logo i {
                width: 26px;
                height: 26px;
                border-radius: 50% 50% 50% 4px;
                background: var(--berry);
                display: block
            }

            nav {
                display: flex;
                gap: 4px;
                overflow-x: auto
            }

            nav a {
                padding: 8px 12px;
                text-decoration: none;
                font-weight: 500;
                font-size: .95rem;
                white-space: nowrap;
                border-radius: 6px
            }

            nav a:hover {
                background: rgba(255,255,255,.12)
            }

            .hero {
                background: radial-gradient(900px 500px at 85% 20%,rgba(179,38,61,.55),transparent 60%),linear-gradient(160deg,#173a29,#0c1f15);
                color: var(--deepink);
                padding: 96px 0 64px
            }

            .hero h1 {
                font-size: clamp(2.6rem,8vw,6rem);
                font-weight: 800;
                max-width: 11ch;
                letter-spacing: -.02em
            }

            .hero p {
                max-width: 52ch;
                font-size: 1.15rem;
                margin: 22px 0 30px;
                color: #cfdccf
            }

            .btn {
                display: inline-block;
                padding: 13px 24px;
                border-radius: 999px;
                font-weight: 600;
                text-decoration: none;
                border: 2px solid var(--berry);
                background: var(--berry);
                color: #fff;
                cursor: pointer;
                font-family: inherit;
                font-size: 1rem
            }

            .btn.ghost {
                background: transparent;
                border-color: currentColor;
                color: inherit
            }

            .stats {
                display: flex;
                gap: 40px;
                flex-wrap: wrap;
                margin-top: 56px;
                border-top: 1px solid rgba(255,255,255,.2);
                padding-top: 28px
            }

            .stats b {
                font: 800 2.6rem "Bricolage Grotesque",sans-serif;
                display: block;
                line-height: 1
            }

            .stats span {
                font-size: .9rem;
                color: #b9cab9
            }

            section {
                padding: 72px 0
            }

            h2 {
                font-size: clamp(1.9rem,4.5vw,3rem);
                font-weight: 800;
                margin-bottom: 28px;
                letter-spacing: -.01em
            }

            .grid2 {
                display: grid;
                grid-template-columns: 1.2fr 1fr;
                gap: 28px
            }

            .card {
                background: var(--card);
                border: 1px solid var(--line);
                border-radius: 14px;
                padding: 22px
            }

            .ev {
                display: flex;
                gap: 16px;
                padding: 14px 0;
                border-bottom: 1px solid var(--line)
            }

            .ev:last-child {
                border: 0
            }

            .ev time {
                min-width: 64px;
                text-align: center;
                font: 800 1.7rem/1 "Bricolage Grotesque",sans-serif
            }

            .ev time small {
                display: block;
                font: 500 .8rem Figtree;
                color: var(--mute)
            }

            .ev p {
                margin: 0;
                color: var(--mute);
                font-size: .92rem
            }

            .tbl {
                overflow-x: auto
            }

            table {
                width: 100%;
                border-collapse: collapse;
                font-size: .95rem
            }

            th,td {
                text-align: left;
                padding: 11px 8px;
                border-bottom: 1px solid var(--line);
                white-space: nowrap
            }

            th {
                color: var(--mute);
                font-weight: 500
            }

            .scroller {
                display: flex;
                gap: 16px;
                overflow-x: auto;
                padding-bottom: 14px;
                scroll-snap-type: x mandatory
            }

            .tile {
                flex: 0 0 280px;
                height: 340px;
                border-radius: 14px;
                scroll-snap-align: start;
                color: #fff;
                padding: 20px;
                display: flex;
                align-items: flex-end;
                font: 700 1.2rem "Bricolage Grotesque",sans-serif
            }

            .tile:nth-child(1) {
                background: linear-gradient(200deg,#3d7a54,#173a29)
            }

            .tile:nth-child(2) {
                background: linear-gradient(200deg,#c4485c,#6d1626)
            }

            .tile:nth-child(3) {
                background: linear-gradient(200deg,#6b8f5e,#27452f)
            }

            .tile:nth-child(4) {
                background: linear-gradient(200deg,#8a5a44,#3c2418)
            }

            .tabs {
                display: flex;
                gap: 8px;
                margin-bottom: 22px
            }

            .tabs button {
                padding: 9px 18px;
                border-radius: 999px;
                border: 1px solid var(--line);
                background: transparent;
                color: var(--ink);
                font: 500 .95rem Figtree;
                cursor: pointer
            }

            .tabs button[aria-selected="true"] {
                background: var(--ink);
                color: var(--bg);
                border-color: var(--ink)
            }

            .people {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
                gap: 16px
            }

            .av {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: var(--deep);
                color: var(--deepink);
                display: grid;
                place-items: center;
                font: 800 1.3rem "Bricolage Grotesque";
                margin-bottom: 12px
            }

            .people h3 {
                font-size: 1.1rem
            }

            .people p {
                margin: 2px 0 0;
                color: var(--mute);
                font-size: .9rem
            }

            .give {
                background: var(--deep);
                color: var(--deepink);
                border-radius: 20px;
                padding: 40px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px
            }

            .give h2 {
                margin-bottom: 12px
            }

            .chips {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 12px 0 20px
            }

            .chips label {
                cursor: pointer
            }

            .chips input {
                position: absolute;
                opacity: 0
            }

            .chips span {
                display: block;
                padding: 9px 16px;
                border: 1px solid rgba(255,255,255,.4);
                border-radius: 8px;
                font-weight: 500
            }

            .chips input:checked+span {
                background: #fff;
                color: #173a29
            }

            .chips input:focus-visible+span {
                outline: 3px solid var(--berry);
                outline-offset: 2px
            }

            input[type=email],input[type=text] {
                width: 100%;
                padding: 12px 14px;
                border-radius: 8px;
                border: 1px solid var(--line);
                font: inherit;
                margin-bottom: 12px;
                background: #fff;
                color: #15241b
            }

            .note {
                font-size: .85rem;
                opacity: .8;
                margin: 10px 0 0
            }

            .count {
                text-align: center
            }

            .count .n {
                display: flex;
                justify-content: center;
                gap: clamp(14px,4vw,40px);
                margin: 20px 0
            }

            .count b {
                font: 800 clamp(2.4rem,9vw,5rem) "Bricolage Grotesque";
                display: block;
                line-height: 1
            }

            .count small {
                color: var(--mute)
            }

            .news {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
                gap: 18px
            }

            .news .card h3 {
                font-size: 1.25rem;
                margin: 8px 0
            }

            .news small {
                color: var(--mute)
            }

            .partners {
                display: flex;
                flex-wrap: wrap;
                gap: 14px
            }

            .partners div {
                flex: 1 1 140px;
                border: 1px dashed var(--line);
                border-radius: 10px;
                padding: 22px;
                text-align: center;
                color: var(--mute);
                font-weight: 500
            }

            footer {
                background: var(--deep);
                color: var(--deepink);
                padding: 56px 0 28px
            }

            .fgrid {
                display: grid;
                grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
                gap: 28px
            }

            footer h3 {
                font-size: 1rem;
                margin-bottom: 10px
            }

            footer a {
                display: block;
                text-decoration: none;
                color: #c6d6c6;
                padding: 3px 0
            }

            footer a:hover {
                text-decoration: underline
            }

            .copy {
                border-top: 1px solid rgba(255,255,255,.18);
                margin-top: 32px;
                padding-top: 18px;
                font-size: .85rem;
                color: #a9bca9
            }

            .ph {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 10px;
                margin-bottom: 12px;
                display: block
            }

            .avbig {
                object-fit: cover
            }

            .about {
                display: grid;
                grid-template-columns: 200px 1fr;
                gap: 40px;
                align-items: start
            }

            .avbig {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: var(--deep);
                color: var(--deepink);
                display: grid;
                place-items: center;
                font: 800 4rem "Bricolage Grotesque",sans-serif
            }

            .about h3 {
                font-size: 1.5rem;
                margin-bottom: 12px
            }

            .about p {
                max-width: 62ch
            }

            .facts {
                display: flex;
                gap: 32px;
                flex-wrap: wrap
            }

            .facts b {
                font: 800 2rem "Bricolage Grotesque",sans-serif;
                display: block
            }

            @media(max-width: 820px) {
                .about {
                    grid-template-columns:1fr
                }

                .avbig {
                    width: 120px;
                    height: 120px;
                    font-size: 2.4rem
                }

                .grid2,.give,.fgrid {
                    grid-template-columns: 1fr
                }

                .give {
                    padding: 26px
                }

                .hero {
                    padding-top: 64px
                }
            }

            @media(prefers-reduced-motion:reduce) {
                html {
                    scroll-behavior: auto
                }
            }

            .logo img {
                height: 48px;
                width: auto;
                border-radius: 8px;
                display: block
            }

            .logo {
                gap: 0
            }

            .hero,.dark {
                position: relative;
                overflow: hidden
            }

            .pj {
                position: absolute;
                inset: 0;
                z-index: 0
            }

            .pj canvas {
                display: block;
                width: 100%;
                height: 100%
            }

            .hero .wrap,.dark .wrap {
                position: relative;
                z-index: 1
            }

            .dark {
                background: linear-gradient(170deg,#173a29,#0c1f15);
                color: var(--deepink)
            }

            .lead {
                max-width: 62ch;
                font-size: 1.12rem;
                color: var(--mute);
                margin: 0 0 32px
            }

            .dark .lead {
                color: #cfdccf
            }

            .mv {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
                gap: 20px;
                margin-bottom: 28px
            }

            .mv h3,.routes h3 {
                margin-bottom: 8px;
                font-size: 1.25rem
            }

            .mv p,.routes p {
                margin: 0;
                color: var(--mute)
            }

            .vals {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin: 0;
                padding: 0;
                list-style: none
            }

            .vals li {
                padding: 9px 16px;
                border-radius: 999px;
                border: 1px solid var(--line);
                font-weight: 500
            }

            .routes {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
                gap: 16px
            }

            .routes a {
                display: block;
                padding: 22px;
                border: 1px solid rgba(255,255,255,.22);
                border-radius: 14px;
                text-decoration: none;
                background: rgba(255,255,255,.05)
            }

            .routes a:hover,.routes a:focus-visible {
                background: rgba(255,255,255,.12);
                border-color: #d9b96e
            }

            .routes p {
                color: #b9cab9
            }

            .ph {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 10px;
                margin-bottom: 12px;
                display: block
            }

            .partners {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
                gap: 16px;
                margin-top: 8px
            }

            .partners figure {
                margin: 0;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 14px;
                padding: 18px;
                text-align: center
            }

            .partners img {
                height: 110px;
                max-width: 100%;
                object-fit: contain;
                display: block;
                margin: 0 auto 10px
            }

            .partners figcaption {
                color: #15241b;
                font-size: .92rem;
                font-weight: 500
            }

            .contact {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                align-items: center
            }

            .contact img {
                max-width: 360px;
                width: 100%;
                border-radius: 14px;
                display: block
            }

            .contact a.mail {
                font: 800 clamp(1.3rem,3.4vw,2rem) "Bricolage Grotesque",sans-serif;
                word-break: break-all
            }

            @media(max-width: 760px) {
                .contact {
                    grid-template-columns:1fr
                }
            }

            @media(prefers-reduced-motion:reduce) {
                html {
                    scroll-behavior: auto
                }
            }

            #pj {
                position: fixed;
                inset: 0;
                z-index: 6;
                pointer-events: none
            }

            #pj canvas {
                display: block;
                width: 100%;
                height: 100%
            }

            section[id] {
                scroll-margin-top: -56px
            }

            header {
                background: var(--bg);
                color: var(--ink);
                border-bottom: 1px solid var(--line)
            }

            nav a:hover {
                background: rgba(23,58,41,.1)
            }

            .logo img {
                height: 52px;
                border-radius: 0
            }

            .logo img.chip,.chip {
                background: #f6f3ea;
                padding: 6px 12px;
                border-radius: 10px;
                height: 64px
            }

            @media (prefers-color-scheme: dark) {
                :root:not([data-theme="light"]) .logo img,:root:not([data-theme="light"]) .contact img {
                    background:#f6f3ea;
                    padding: 6px 12px;
                    border-radius: 10px
                }
            }

            .contact img {
                max-width: 300px;
                border-radius: 0
            }

            .scroller .tile {
                position: relative;
                padding: 0;
                overflow: hidden;
                background: var(--deep);
                margin: 0;
                display: block
            }

            .scroller .tile:nth-child(n) {
                background: var(--deep)
            }

            .tile img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover
            }

            .tile figcaption {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 40px 16px 14px;
                background: linear-gradient(transparent,rgba(8,20,13,.85));
                font: 700 1.1rem "Bricolage Grotesque",sans-serif
            }

            .tile small {
                display: block;
                font: 400 .85rem Figtree,sans-serif;
                opacity: .85
            }

            header .wrap {
                height: 80px
            }

            .logo img {
                height: 68px
            }

            html {
                scroll-padding-top: calc(88px + env(safe-area-inset-top,0px))
            }

            .logo img {
                height: 68px;
                width: auto
            }

            .flogo {
                height: 84px;
                width: auto;
                display: block;
                background: none;
                padding: 0
            }

            @media (prefers-color-scheme: dark) {
                :root:not([data-theme="light"]) .logo img,:root:not([data-theme="light"]) .contact img {
                    background:none;
                    padding: 0
                }
            }

            .contact img {
                max-width: 320px
            }

            .about {
                grid-template-columns: minmax(260px,380px) 1fr;
                gap: 56px
            }

            .fphoto {
                width: 100%;
                height: auto;
                aspect-ratio: 4/5;
                object-fit: cover;
                object-position: 50% 20%;
                border-radius: 16px;
                display: block;
                position: sticky;
                top: 104px;
                background: var(--line)
            }

            .bio p {
                max-width: 66ch
            }

            .bio .role {
                color: var(--mute);
                margin: 6px 0 22px;
                font-weight: 500
            }

            .bio .pull {
                font: 700 clamp(1.25rem,2.6vw,1.65rem)/1.3 "Bricolage Grotesque",Figtree,sans-serif;
                border-left: 4px solid #c99a35;
                padding-left: 18px;
                margin: 0 0 26px;
                max-width: 40ch;
                color: var(--ink)
            }

            .bio .sign {
                margin-top: 26px;
                line-height: 1.5
            }

            .skh {
                margin: 34px 0 14px;
                font-size: 1.3rem
            }

            .skills {
                list-style: none;
                margin: 0 0 26px;
                padding: 0;
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
                gap: 14px
            }

            .skills li {
                border: 1px solid var(--line);
                border-radius: 12px;
                padding: 14px 16px;
                color: var(--mute);
                font-size: .94rem
            }

            .skills b {
                display: block;
                color: var(--ink);
                font-size: 1rem;
                margin-bottom: 3px
            }

            @media(max-width: 820px) {
                .about {
                    grid-template-columns:1fr;
                    gap: 28px
                }

                .fphoto {
                    position: static;
                    max-width: 420px
                }
            }

            header.ck {
                position: fixed;
                top: calc(12px + env(safe-area-inset-top,0px));
                left: 0;
                right: 0;
                z-index: 7;
                background: none;
                border: 0;
                padding: 0 12px;
                color: #fff
            }

            .ck .bar {
                position: relative;
                max-width: 1120px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 8px 10px 8px 16px;
                border-radius: 999px;
                background: rgba(3,0,20,.74);
                border: 1px solid rgba(255,255,255,.14);
                -webkit-backdrop-filter: blur(16px) saturate(1.4);
                backdrop-filter: blur(16px) saturate(1.4);
                box-shadow: 0 10px 40px rgba(0,0,0,.25)
            }

            .ckb {
                display: flex;
                flex: none
            }

            .nlogo {
                height: 52px;
                width: auto;
                display: block
            }

            .ckp {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                min-width: 0
            }

            .ck .ckl {
                display: flex;
                gap: 2px;
                overflow: visible;
                margin: 0 auto;
                padding: 4px;
                border-radius: 999px;
                background: rgba(255,255,255,.06)
            }

            .ck .ckl a {
                color: rgba(255,255,255,.78);
                padding: 8px 13px;
                border-radius: 999px;
                font-size: .92rem;
                font-weight: 500;
                text-decoration: none;
                white-space: nowrap;
                transition: background .2s,color .2s
            }

            .ck .ckl a:hover {
                background: rgba(255,255,255,.1);
                color: #fff
            }

            .ck .ckl a[aria-current="true"] {
                background: rgba(255,255,255,.18);
                color: #fff
            }

            .ckr {
                display: flex;
                align-items: center;
                gap: 10px;
                flex: none
            }

            .tz {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 12px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,.16);
                font-size: .85rem;
                color: #fff
            }

            .tz::before {
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: #4ade80;
                box-shadow: 0 0 8px #4ade80
            }

            .tz select {
                background: transparent;
                color: #fff;
                border: 0;
                font: inherit;
                font-weight: 600;
                cursor: pointer;
                max-width: 96px
            }

            .tz select option {
                color: #15241b;
                background: #fff
            }

            .tz time {
                color: rgba(255,255,255,.75);
                font-variant-numeric: tabular-nums;
                white-space: nowrap
            }

            .ckd {
                padding: 10px 20px;
                border-radius: 999px;
                background: var(--berry);
                color: #fff;
                font-weight: 600;
                font-size: .92rem;
                text-decoration: none;
                white-space: nowrap
            }

            .ckd:hover {
                filter: brightness(1.1)
            }

            .ck :focus-visible {
                outline: 2px solid #fff;
                outline-offset: 2px
            }

            .sr {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0)
            }

            .burger {
                display: none;
                flex: none;
                margin-left: auto;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid rgba(255,255,255,.18);
                background: rgba(255,255,255,.06);
                cursor: pointer;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 5px
            }

            .burger span {
                display: block;
                width: 18px;
                height: 2px;
                background: #fff;
                border-radius: 2px;
                transition: transform .25s,opacity .25s
            }

            .ck.open .burger span:nth-child(1) {
                transform: translateY(7px) rotate(45deg)
            }

            .ck.open .burger span:nth-child(2) {
                opacity: 0
            }

            .ck.open .burger span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg)
            }

            @media(max-width: 1060px) {
                .burger {
                    display:flex
                }

                .ckp {
                    display: none;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: calc(100% + 8px);
                    flex-direction: column;
                    align-items: stretch;
                    gap: 12px;
                    padding: 14px;
                    border-radius: 24px;
                    background: #050119;
                    border: 1px solid rgba(255,255,255,.14)
                }

                .ck.open .ckp {
                    display: flex
                }

                .ck .ckl {
                    flex-direction: column;
                    border-radius: 16px;
                    margin: 0
                }

                .ck .ckl a {
                    padding: 12px 14px;
                    border-radius: 12px
                }

                .ckr {
                    flex-direction: column;
                    align-items: stretch
                }

                .tz {
                    justify-content: space-between
                }

                .tz select {
                    max-width: none;
                    flex: 1
                }

                .ckd {
                    text-align: center
                }
            }

            html {
                scrollbar-gutter: stable;
                overflow-x: clip
            }

            html.fw body {
                opacity: 0
            }

            html.fw.ready body {
                opacity: 1;
                transition: opacity .3s ease
            }

            .count b,.stats b {
                font-variant-numeric: tabular-nums
            }

            .ck .bar {
                min-height: 68px
            }

            .ckr {
                min-width: 0
            }

            @media(prefers-reduced-motion:reduce) {
                html.fw.ready body {
                    transition: none
                }
            }

            .social {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 10px
            }

            .social a {
                display: block;
                padding: 9px 18px;
                border: 1px solid var(--line);
                border-radius: 999px;
                text-decoration: none;
                font-weight: 600;
                font-size: .93rem
            }

            .social a:hover,.social a:focus-visible {
                background: var(--deep);
                color: var(--deepink);
                border-color: var(--deep)
            }

            .contact {
                grid-template-columns: 1fr
            }

            #pj {
                display: none
            }

            .routes {
                overflow: visible;
                gap: 14px
            }

            .routes a {
                white-space: normal;
                padding: 18px
            }

            .routes h3 {
                font-size: 1.1rem;
                margin-bottom: 6px
            }

            .routes p {
                font-size: .84rem;
                line-height: 1.45;
                white-space: normal
            }

            .ck .bar {
                min-height: 54px;
                padding: 5px 8px 5px 14px;
                gap: 10px
            }

            .nlogo {
                height: 40px
            }

            .ck .ckl {
                padding: 3px
            }

            .ck .ckl a {
                padding: 6px 11px;
                font-size: .86rem
            }

            .ckd {
                padding: 8px 16px;
                font-size: .86rem
            }

            .burger {
                width: 38px;
                height: 38px
            }

            .ck.open .burger span:nth-child(1) {
                transform: translateY(7px) rotate(45deg)
            }

            header.ck {
                top: calc(10px + env(safe-area-inset-top,0px))
            }

            .hero {
                padding-top: 128px
            }

            @media(max-width: 1060px) {
                .ckp {
                    top:calc(100% + 6px)
                }
            }

            @media(max-width: 700px) {
                .hero {
                    padding-top:118px
                }

                .hero h1 {
                    font-size: clamp(2.3rem,11vw,3.2rem)
                }
            }

            .routes h3 {
                line-height: 1.2
            }

            .nlogo {
                height: 44px
            }

            :root[data-theme="dark"] {
                color-scheme: dark
            }

            :root[data-theme="light"] {
                color-scheme: light
            }

            .ctl {
                display: flex;
                align-items: center;
                gap: 8px
            }

            .tbtn,.lbtn {
                height: 38px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,.18);
                background: rgba(255,255,255,.06);
                color: #fff;
                cursor: pointer;
                font-family: inherit;
                transition: background .2s
            }

            .tbtn:hover,.lbtn:hover {
                background: rgba(255,255,255,.14)
            }

            .tbtn {
                width: 38px;
                display: grid;
                place-items: center;
                padding: 0
            }

            .tbtn svg {
                width: 18px;
                height: 18px;
                fill: none;
                stroke: currentColor;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round
            }

            :root[data-theme="dark"] .tbtn .i-moon {
                display: none
            }

            :root:not([data-theme="dark"]) .tbtn .i-sun {
                display: none
            }

            .lbtn {
                display: flex;
                align-items: center;
                gap: 2px;
                padding: 3px;
                font-weight: 600
            }

            .lbtn span {
                display: block;
                min-width: 36px;
                text-align: center;
                padding: 5px 10px;
                border-radius: 999px;
                font-size: .82rem;
                line-height: 1.2;
                color: rgba(255,255,255,.75)
            }

            html:not([lang="ne"]) .lbtn span:first-child,html[lang="ne"] .lbtn span:last-child {
                background: #fff;
                color: #0c1f15
            }

            @media(max-width: 1060px) {
                .ctl {
                    margin-left:auto
                }

                .burger {
                    margin-left: 0
                }
            }

            @media(max-width: 400px) {
                .ck .bar {
                    gap:6px;
                    padding-left: 10px
                }

                .ctl {
                    gap: 6px
                }

                .lbtn span {
                    min-width: 30px;
                    padding: 5px 7px
                }
            }

            html[lang="ne"] body,html[lang="ne"] body * {
                font-family: "Noto Sans Devanagari",Figtree,system-ui,sans-serif
            }

            html[lang="ne"] body {
                line-height: 1.7
            }

            html[lang="ne"] h1,html[lang="ne"] h2,html[lang="ne"] h3 {
                line-height: 1.3;
                letter-spacing: 0
            }

            html[lang="ne"] .hero h1 {
                max-width: 16ch;
                font-size: clamp(2rem,7vw,4.2rem);
                line-height: 1.25;
                letter-spacing: 0
            }

            html[lang="ne"] .ck .ckl a,html[lang="ne"] .ckd {
                font-size: .88rem
            }