:root {
  --bg: #EAF4FC;
  --surface: #FFFFFF;
  --text: #1E2A38;
  --muted: #566779;
  --line: #CFE0EE;
  --accent: #B4472F;      /* Newari brick */
  --accent-ink: #FFFFFF;
  --gold: #C8922E;

  /* skyline */
  --sky-top: #BFDDF4;
  --sky-bottom: #EAF4FC;
  --sun: #F2B66B;
  --mtn-far: #C8DAEA;
  --mtn-near: #AFC7DD;
  --snow: #FFFFFF;
  --cloud: rgba(255, 255, 255, .85);
  --bird: #4A4552;
  --bird-far: #6E6878;
  --b-dark: #5E241A;
  --b-mid: #7C3324;
  --b-wall: #A8442E;
  --b-roof: #4A1C14;
  --b-door: #3A1610;
  --b-house: #C26A4B;
  --b-stone: #C9A27A;
  --b-gold: #D9A441;

  --flag-blue: #3B6FB6;
  --flag-white: #F4F1EA;
  --flag-red: #C8402F;
  --flag-green: #3D8A5A;
  --flag-yellow: #E5B530;

  --radius: 14px;
  --maxw: 1080px;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1A2A;
    --surface: #152538;
    --text: #E6EEF6;
    --muted: #9DB0C3;
    --line: #22374F;
    --accent: #E0734F;
    --accent-ink: #1A0F0A;
    --gold: #E2B25A;

    --sky-top: #14294A;
    --sky-bottom: #0E1A2A;
    --sun: #EDE3C8;
    --mtn-far: #1C3252;
    --mtn-near: #243E62;
    --snow: #D9DCEB;
    --cloud: rgba(200, 205, 235, .14);
    --bird: #A9A4C4;
    --bird-far: #7D7899;
    --b-dark: #2A1712;
    --b-mid: #3B1E17;
    --b-wall: #6E2E22;
    --b-roof: #1E0E0A;
    --b-door: #F2B66B;   /* lit windows at night */
    --b-house: #4F261C;
    --b-stone: #6A5444;
    --b-gold: #D9A441;
    --flag-white: #CFCBC2;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; line-height: 1.15; margin: 0 0 .5em; }

/* NAV */
/* Floats over the page and takes on the colour behind it; slides away while scrolling down */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px max(16px, calc((100% - var(--maxw)) / 2));
  background: transparent;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), padding .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
.nav.is-scrolled {
  padding-top: 12px; padding-bottom: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-spacer { height: 72px; }
.nav nav a { position: relative; }
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav nav a:hover::after, .nav nav a.active::after { transform: scaleX(1); }
.nav nav a.active { box-shadow: none !important; }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
  background: linear-gradient(90deg, var(--flag-blue), var(--flag-red), var(--flag-green), var(--flag-yellow));
  transform: scaleX(var(--progress, 0)); transform-origin: left;
}
.brand { font-family: "Young Serif", serif; font-weight: 400; font-size: 1.15rem; text-decoration: none; }
.nav nav { display: flex; gap: 22px; align-items: center; font-size: .95rem; }
.nav nav a { text-decoration: none; color: var(--muted); }
.nav nav a:hover { color: var(--text); }
.nav .nav-cta { color: var(--accent); font-weight: 600; }

/* HERO */
.hero {
  position: relative;
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 85%);
  padding-top: 124px;
  overflow: hidden;
}
.hero-text {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: 0 16px;
  text-align: center;
}
.namaste { font-family: "Kalam", serif; color: var(--accent); font-size: 1.3rem; margin: 0 0 4px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.tagline { color: var(--muted); font-size: 1.15rem; max-width: 560px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.skyline { display: block; width: 100%; height: clamp(220px, 32vw, 360px); margin-top: 24px; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  border: 1.5px solid var(--accent);
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--accent); }

/* skyline paint */
.sun { fill: var(--sun); opacity: .85; }
.mtn-far { fill: var(--mtn-far); }
.mtn-near { fill: var(--mtn-near); }
.snow { fill: var(--snow); }
.b-dark { fill: var(--b-dark); }
.b-mid { fill: var(--b-mid); }
.b-wall { fill: var(--b-wall); }
.b-roof { fill: var(--b-roof); }
.b-door { fill: var(--b-door); }
.b-house { fill: var(--b-house); }
.b-stone { fill: var(--b-stone); }
.b-gold { fill: var(--b-gold); }
.dome { fill: var(--snow); stroke: var(--line); }
.eyes { fill: none; stroke: var(--b-roof); stroke-width: 1.6; stroke-linecap: round; }
.rings, .pillars { fill: none; stroke: var(--b-roof); stroke-width: 1.2; opacity: .55; }
.flag-string { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .6; }
.f-blue { fill: var(--flag-blue); } .f-white { fill: var(--flag-white); }
.f-red { fill: var(--flag-red); } .f-green { fill: var(--flag-green); } .f-yellow { fill: var(--flag-yellow); }
/* ===== MOTION ===== */

/* prayer flags: the whole line sways, each flag flutters on its own beat */
.flag-line { animation: sway 7s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, 5px); }
}
.flags rect {
  transform-box: fill-box; transform-origin: top center;
  animation: flutter 2.6s ease-in-out infinite;
}
.flags rect:nth-child(3n+1) { animation-duration: 2.2s; animation-delay: -.4s; }
.flags rect:nth-child(3n+2) { animation-duration: 3s;   animation-delay: -1.3s; }
.flags rect:nth-child(4n)   { animation-delay: -2s; }
@keyframes flutter {
  0%, 100% { transform: skewX(0) scaleY(1); }
  25%      { transform: skewX(-14deg) scaleY(.9) translateX(2px); }
  50%      { transform: skewX(6deg) scaleY(.97); }
  75%      { transform: skewX(-9deg) scaleY(.93) translateX(1px); }
}

/* sun glow */
.sun-halo { fill: #FFE9B8; opacity: .6; transform-box: fill-box; transform-origin: center; animation: glow 5s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.15); opacity: .1; } }

/* clouds drifting across */
.cloud { fill: var(--cloud); }
.cloud-1 { animation: drift-a 70s linear infinite; animation-delay: -20s; }
.cloud-2 { animation: drift-b 95s linear infinite; animation-delay: -60s; }
.cloud-3 { animation: drift-c 120s linear infinite; animation-delay: -5s; }
@keyframes drift-a { from { transform: translate(-120px, var(--cy)); } to { transform: translate(1320px, var(--cy)); } }
@keyframes drift-b { from { transform: translate(-120px, var(--cy)); } to { transform: translate(1320px, var(--cy)); } }
@keyframes drift-c { from { transform: translate(-140px, var(--cy)); } to { transform: translate(1340px, var(--cy)); } }

/* birds: pigeons with flap-flap-glide wingbeats and a slight bob */
.bird-body { fill: var(--bird); }
.wing { fill: var(--bird); transform-box: fill-box; transform-origin: 60% 100%; animation: wingbeat 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wing-far { fill: var(--bird-far); animation-name: wingbeat-far; }
@keyframes wingbeat {
  0%, 24%, 48%     { transform: scaleY(1) skewX(0); }
  12%, 36%         { transform: scaleY(-.75) skewX(12deg); }
  60%, 92%         { transform: scaleY(.25) skewX(-6deg); }   /* glide */
  100%             { transform: scaleY(1); }
}
@keyframes wingbeat-far {
  0%, 24%, 48%     { transform: scaleY(.85); }
  12%, 36%         { transform: scaleY(-.55); }
  60%, 92%         { transform: scaleY(.2); }
  100%             { transform: scaleY(.85); }
}
.pigeon { animation: bob 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 12%, 36% { transform: translateY(-1.5px); } 70% { transform: translateY(1.5px); } }
.birds { animation: fly 32s linear infinite; animation-delay: -8s; }
@keyframes fly {
  0%   { transform: translate(-80px, calc(var(--by, 0px) + 170px)); }
  50%  { transform: translate(600px, calc(var(--by, 0px) + 120px)); }
  100% { transform: translate(1300px, calc(var(--by, 0px) + 150px)); }
}

/* hero text arrives */
.hero-text > *, .page-hero-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-text > :nth-child(2), .page-hero-text > :nth-child(2) { animation-delay: .1s; }
.hero-text > :nth-child(3), .page-hero-text > :nth-child(3) { animation-delay: .2s; }
.hero-text > :nth-child(4) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* windows glow like butter lamps at night */
@media (prefers-color-scheme: dark) {
  .b-door { animation: lamp 3s ease-in-out infinite; }
  @keyframes lamp { 50% { opacity: .7; } }
}

/* sections fade up on scroll (class added by site.js) */
.will-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.will-reveal.is-in { opacity: 1; transform: none; }
.cards > :nth-child(2) { transition-delay: .08s; }
.cards > :nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cloud-1 { transform: translate(200px, var(--cy)); }
  .cloud-2 { transform: translate(760px, var(--cy)); }
  .cloud-3 { transform: translate(1100px, var(--cy)); }
  .birds { transform: translate(420px, 130px); }
}

/* slim prayer-flag stripe used as a divider */
.dhaka-band {
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--flag-blue) 0 40px, var(--flag-white) 40px 80px, var(--flag-red) 80px 120px,
    var(--flag-green) 120px 160px, var(--flag-yellow) 160px 200px);
  background-size: 200px 100%;
  animation: stripe 30s linear infinite;
}
@keyframes stripe { to { background-position: 200px 0; } }

/* SECTIONS */
.section { max-width: var(--maxw); margin: 0 auto; padding: 88px 16px; }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.section + .section { border-top: 1px solid var(--line); }

.about { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.portrait {
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold), var(--accent));
  display: grid; place-items: center;
  font-family: "Young Serif", serif; font-size: 3.5rem; color: var(--accent-ink);
  box-shadow: 0 0 0 8px var(--bg), 0 0 0 9px var(--line);
}
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; }
.facts span { display: inline-block; min-width: 100px; color: var(--muted); font-size: .9rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -18px rgba(90, 36, 26, .5); }
.card h3 { font-size: 1.3rem; }
.card p { color: var(--muted); margin: 0 0 16px; flex: 1; }
.card .card-tag { flex: 0; }
.card-link { color: var(--accent); font-weight: 600; text-decoration: none; font-size: .95rem; }

.posts { list-style: none; padding: 0; margin: 28px 0 0; }
.posts li { border-top: 1px solid var(--line); }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts a {
  display: grid; grid-template-columns: 120px 1fr; column-gap: 24px;
  padding: 22px 0; text-decoration: none;
}
.posts time { grid-row: span 2; color: var(--muted); font-size: .9rem; padding-top: 4px; }
.post-title { font-family: "Young Serif", serif; font-size: 1.25rem; }
.post-excerpt { color: var(--muted); }
.posts a:hover .post-title { color: var(--accent); }

.connect { text-align: center; }
.connect p { color: var(--muted); margin-bottom: 28px; }

.footer { text-align: center; color: var(--muted); font-size: .9rem; }
.footer p { padding: 24px 16px; margin: 0; }

/* ARTICLE PAGE */
.article { max-width: 680px; margin: 0 auto; padding: 72px 16px 96px; }
.article h1 { font-size: clamp(2rem, 5vw, 3rem); }
.article .meta { color: var(--muted); font-size: .95rem; margin-bottom: 40px; }
.article p { margin: 0 0 1.3em; }
.back { display: inline-block; margin-bottom: 32px; color: var(--accent); text-decoration: none; font-weight: 600; }

/* ===== SUB-PAGES ===== */

.nav nav a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.see-all { color: var(--accent); font-weight: 600; text-decoration: none; margin-bottom: .9em; }
.see-all:hover { text-decoration: underline; }

.page-hero { background: linear-gradient(var(--sky-top), var(--sky-bottom)); padding-top: 120px; overflow: hidden; }
.page-hero-text { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; text-align: center; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero .tagline { margin-bottom: 36px; }
.page-art { display: block; width: 100%; height: clamp(150px, 19vw, 230px); }

/* three illustrated scenes for placeholder art: temple city, Swayambhu stupa, Phewa lake & Machhapuchhre */
:root {
  --scene-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath fill='%23fff' fill-opacity='.28' d='M0 92L60 52L110 76L170 30L230 70L290 40L350 72L400 56V120H0Z'/%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M170 30L181 39L170 36L159 39Z M290 40L299 48L290 45L281 48Z'/%3E%3Cpath fill='%232B0F2E' fill-opacity='.72' d='M0 120V102H30V120Z M40 120V100H80V120Z M30 100Q40 98 46 88H74Q80 98 90 100Z M48 88V80H72V88Z M38 80Q47 78 52 70H68Q73 78 82 80Z M58 70V60H62V70Z M100 120V96H140V120Z M96 97H144L138 90H102Z M160 120V108H240V120Z M168 108A32 26 0 0 1 232 108Z M192 82H208V76L204 58H196L192 76Z M199 58V48H201V58Z M250 120V92H290V120Z M246 93H294L288 86H252Z M310 120V100H350V120Z M316 100C316 80 326 66 330 56C334 66 344 80 344 100Z M329 56V46H331V56Z M360 120V98H400V120Z'/%3E%3C/svg%3E");
  --scene-stupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M200 14L0 78M200 14L400 78M200 14L40 104M200 14L360 104' stroke='%23fff' stroke-opacity='.6' stroke-width='1'/%3E%3Cg fill-opacity='.95'%3E%3Crect x='60' y='60' width='8' height='10' fill='%233B6FB6'/%3E%3Crect x='100' y='47' width='8' height='10' fill='%23fff'/%3E%3Crect x='140' y='34' width='8' height='10' fill='%23C8402F'/%3E%3Crect x='252' y='34' width='8' height='10' fill='%233D8A5A'/%3E%3Crect x='292' y='47' width='8' height='10' fill='%23E5B530'/%3E%3Crect x='332' y='60' width='8' height='10' fill='%233B6FB6'/%3E%3Crect x='90' y='68' width='8' height='10' fill='%23E5B530'/%3E%3Crect x='300' y='68' width='8' height='10' fill='%23C8402F'/%3E%3C/g%3E%3Cpath fill='%232B0F2E' fill-opacity='.75' d='M90 120V112H310V120Z M118 112A82 62 0 0 1 282 112Z M178 66H222V50H178Z M182 50H218L208 20H192Z M188 20H212L205 12H195Z M199 12V4H201V12Z'/%3E%3Cpath fill='%23FFE9B0' d='M184 58q6-5 12 0q-6 3-12 0Z M204 58q6-5 12 0q-6 3-12 0Z'/%3E%3Cpath d='M200 60q-3 3 0 5' stroke='%23FFE9B0' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  --scene-lake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath fill='%23fff' fill-opacity='.3' d='M0 82L80 56L140 70L196 20L206 34L216 12L236 50L290 42L400 72V86H0Z'/%3E%3Cpath fill='%23fff' fill-opacity='.9' d='M196 20L206 34L216 12L224 28L214 26L206 38L200 30L192 32Z'/%3E%3Crect y='86' width='400' height='34' fill='%23fff' fill-opacity='.18'/%3E%3Cg fill='%23fff' fill-opacity='.45'%3E%3Crect x='190' y='92' width='40' height='2'/%3E%3Crect x='200' y='98' width='26' height='2'/%3E%3Crect x='60' y='104' width='50' height='2'/%3E%3Crect x='290' y='110' width='60' height='2'/%3E%3C/g%3E%3Cpath fill='%232B0F2E' fill-opacity='.75' d='M0 86L14 58L28 86Z M18 86L34 48L50 86Z M42 86L54 64L66 86Z M360 86L374 60L388 86Z M378 86L390 66L402 86Z M140 102Q172 112 204 102L198 108Q172 116 146 108Z M170 92H174V104H170Z M162 88L182 108' /%3E%3Cpath d='M162 88L182 108' stroke='%232B0F2E' stroke-opacity='.75' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* placeholder art: festival-colour sky, sun, Himalaya and a temple skyline.
   Each card cycles through a different palette. */
.featured-art, .card-art, .cover, .gallery > div {
  --c1: #FFB347; --c2: #E8433A;
  --scene: var(--scene-city);
  position: relative; overflow: hidden;
  background:
    var(--scene) bottom / 100% auto no-repeat,
    radial-gradient(circle at 76% 30%, #FFF3C4 0 7%, rgba(255, 243, 196, .35) 7.5% 11%, transparent 11.5%),
    linear-gradient(170deg, var(--c1), var(--c2));
  display: grid; place-items: center; color: #FFF; font-family: "Kalam", cursive; font-size: 1.05rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
  transition: filter .3s ease;
}
.featured-art > span, .cover > span, .gallery > div > span { transform: translateY(-30%); }
.card-art, .featured-art { transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.card:hover .card-art, .featured:hover .featured-art { filter: saturate(1.2) brightness(1.05); }

.cards > :nth-child(6n+2) .card-art, .cover                { --c1: #2EC4B6; --c2: #3A3E98; }
.cards > :nth-child(6n+3) .card-art, .gallery > div:nth-child(1) { --c1: #FF8FA3; --c2: #8A4FD1; }
.cards > :nth-child(6n+4) .card-art, .gallery > div:nth-child(2) { --c1: #7FD3F7; --c2: #2E6FD8; }
.cards > :nth-child(6n+5) .card-art                        { --c1: #C6E86B; --c2: #229A6E; }
.cards > :nth-child(6n+6) .card-art                        { --c1: #FFC145; --c2: #D63AAF; }

.featured {
  display: grid; grid-template-columns: 1.1fr 1fr; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.featured:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -22px rgba(90, 36, 26, .55); }
.featured-art { min-height: 260px; }
.featured-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.featured-body p { color: var(--muted); }
.card-tag { font-size: .9rem; font-style: italic; color: var(--accent); margin: 0 0 8px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 8px; }
.tag { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; color: var(--muted); }
.tag.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }

a.card { text-decoration: none; }
.card-media { padding: 0; overflow: hidden; }
.card-media .card-art { aspect-ratio: 16 / 10; margin-bottom: 20px; }
.card-media > :not(.card-art) { margin-left: 24px; margin-right: 24px; }
.card-media .card-link { margin-bottom: 24px; }

.article.wide { max-width: 820px; }
.article h2 { font-size: 1.6rem; margin-top: 1.6em; }
.lead { font-size: 1.2rem; color: var(--muted); }
.cover { aspect-ratio: 16 / 8; border-radius: var(--radius); margin: 0 0 40px; }
blockquote {
  margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold);
  font-family: "Young Serif", serif; font-size: 1.35rem; line-height: 1.4;
}
.share { display: flex; gap: 14px; align-items: center; margin: 48px 0 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.share a { color: var(--accent); font-weight: 600; text-decoration: none; }
.author { display: flex; gap: 20px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.author p { margin: 4px 0 0; color: var(--muted); }
.author a { color: var(--accent); font-weight: 600; text-decoration: none; }
.portrait.small { width: 64px; flex: none; font-size: 1.4rem; box-shadow: none; }

.project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 32px 0 40px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-meta dt { font-size: .9rem; color: var(--muted); }
.project-meta dd { margin: 4px 0 0; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.gallery > div { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.next { display: block; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; margin-top: 56px; }
.next small { display: block; color: var(--muted); margin-bottom: 4px; }
.next strong { font-family: "Young Serif", serif; font-size: 1.4rem; }
.next:hover strong { color: var(--accent); }

/* socials */
.socials-big { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.social-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; text-align: left; transition: transform .2s ease, border-color .2s ease;
}
.social-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.social-card svg { width: 40px; height: 40px; flex: none; }
.social-card strong { display: block; }
.social-card small { color: var(--muted); }
.ic-fill { fill: var(--accent); }
.ic-ink { fill: var(--accent-ink); }
.ic-stroke { stroke: var(--accent-ink); stroke-width: 2; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-inner p { padding: 0; }
.socials { display: flex; gap: 10px; }
.socials a { display: block; width: 32px; height: 32px; transition: transform .15s ease; }
.socials a:hover { transform: translateY(-2px); }
.socials svg { width: 100%; height: 100%; }

.cards > :nth-child(3n+2) .card-art, .gallery > div:nth-child(1) { --scene: var(--scene-stupa); }
.cards > :nth-child(3n) .card-art, .cover { --scene: var(--scene-lake); }

/* ===== SECTION ARTWORK ===== */

:root {
  --wood: #6B3A22; --wood-dark: #4A2414; --carve: #8A5232;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wood: #5C3220; --wood-dark: #3A1C10; --carve: #7A4A2E; }
}

/* About: carved Newari window around the photo */
.about { grid-template-columns: 280px 1fr; }
  position: absolute; left: 20%; top: 36.1%; width: 60%; height: 47.8%;
  background: radial-gradient(circle at 30% 25%, var(--gold), var(--accent));
  display: grid; place-content: center; text-align: center; color: var(--accent-ink);
}
.w-wood { fill: var(--wood); }
.w-wood-dark { fill: var(--wood-dark); }
.w-carve { fill: var(--carve); }
.w-gold { fill: var(--b-gold); }
.w-edge { fill: none; stroke: var(--wood-dark); stroke-width: 3; }
.w-line { fill: none; stroke: var(--b-gold); stroke-width: 3; stroke-linecap: round; }




/* MOBILE */
@media (max-width: 720px) {
  .nav nav { gap: 14px; font-size: .88rem; }
  .nav nav a:not(.nav-cta):nth-child(1) { display: none; }
  .brand { font-size: 1rem; }
  .hero { padding-top: 96px; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  .portrait { width: 160px; }
  .posts a { grid-template-columns: 1fr; }
  .posts time { grid-row: auto; }
  .section { padding: 64px 16px; }
}

@media (max-width: 720px) {
  .featured { grid-template-columns: 1fr; }
  .featured-art { min-height: 180px; }
  .featured-body { padding: 24px; }
  .gallery { grid-template-columns: 1fr; }
  .footer-inner { justify-content: center; text-align: center; }
  .social-card { min-width: 0; width: 100%; }
}

@media (max-width: 720px) {
}

/* ===================================================================
   Headings, hobbies, paintings, business card, scenes
   =================================================================== */

/* Headings: a painted brush stroke under section titles instead of a label above */
.section h2 { position: relative; display: inline-block; isolation: isolate; }
.section h2::after {
  content: ""; position: absolute; left: -4px; right: -8px; bottom: .02em; height: .42em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C40 4 90 6 120 8 S180 10 197 6 L196 14 C150 18 90 16 40 17 S8 18 3 12Z' fill='%23F2B66B' fill-opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s;
}
.is-in h2::after, .section:not(.will-reveal) h2::after { transform: scaleX(1); }
.section-head { align-items: center; margin-bottom: 8px; }
.section-head h2 { margin: 0; }
.see-all { margin-bottom: 0; }
.sub-head { font-size: 1.5rem; margin: 40px 0 0; }
.lead { color: var(--muted); max-width: 640px; }


/* Hobbies: light-blue gradient band */
:root { --sky-a: #DCEEFB; --sky-b: #C9E3F7; --sky-c: #B5D7F2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sky-a: #142033; --sky-b: #182B44; --sky-c: #1D3654; } }
.hobbies-band { background: linear-gradient(170deg, var(--sky-a) 0%, var(--sky-b) 55%, var(--sky-c) 100%); }
.hobbies-band .section { border-top: 0; }
.hobbies-page { background: linear-gradient(180deg, var(--sky-b), var(--sky-a) 40%, var(--sky-b)); }
.hobbies-page .section + .section { border-top-color: color-mix(in srgb, var(--flag-blue) 15%, transparent); }
.page-hero--sky { background: linear-gradient(180deg, var(--sky-c), var(--sky-a)); }

/* Painting tiles */
.paintings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 36px 28px; margin-top: 24px; }
.painting {
  all: unset; cursor: zoom-in; display: block; text-align: center;
  transform: rotate(var(--tilt, -1.5deg)); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.painting:nth-child(even) { --tilt: 1.8deg; }
.painting:nth-child(3n) { --tilt: -.6deg; }
.painting:hover, .painting:focus-visible { transform: rotate(0) translateY(-6px) scale(1.03); }
.painting:focus-visible .painting-frame { outline: 3px solid var(--flag-blue); outline-offset: 4px; }
.painting-frame {
  display: block; padding: 12px; background: #FFFDF8; border-radius: 3px;
  box-shadow: 0 1px 0 #E8DDD0, 0 18px 30px -18px rgba(30, 50, 80, .45);
}
.paint-ph, .painting-frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.painting-title { display: block; margin-top: 14px; font-family: "Kalam", cursive; font-size: 1.15rem; color: var(--text); }

/* painterly placeholders: brushy gradients, each tile different */
.paint-ph {
  --p1: #F28C1B; --p2: #E84F7A; --p3: #3A3E98;
  background:
    radial-gradient(ellipse 60% 35% at 30% 75%, color-mix(in srgb, var(--p3) 85%, transparent), transparent 70%),
    radial-gradient(circle at 70% 28%, #FFF3C4 0 9%, transparent 10%),
    radial-gradient(ellipse 80% 50% at 60% 40%, color-mix(in srgb, var(--p2) 80%, transparent), transparent 70%),
    linear-gradient(160deg, var(--p1), var(--p2));
  display: grid; place-items: end center; color: #fff; font-family: "Kalam", cursive; padding-bottom: 10px; box-sizing: border-box;
}
.painting:nth-child(6n+2) .paint-ph { --p1: #7FD3F7; --p2: #2E6FD8; --p3: #0F3B5F; }
.painting:nth-child(6n+3) .paint-ph { --p1: #C6E86B; --p2: #229A6E; --p3: #2B4A1E; }
.painting:nth-child(6n+4) .paint-ph { --p1: #FFC145; --p2: #D63AAF; --p3: #4A1D5C; }
.painting:nth-child(6n+5) .paint-ph { --p1: #2EC4B6; --p2: #3A3E98; --p3: #E8433A; }
.painting:nth-child(6n+6) .paint-ph { --p1: #FF8FA3; --p2: #8A4FD1; --p3: #F6B82A; }

/* Painting viewer */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: min(1000px, 94vw); width: 100%;
  color: var(--text); overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 20, 34, .78); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lb-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes lb-in { from { opacity: 0; transform: scale(.94) translateY(12px); } }
.lightbox figure {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.lb-art { background: #F4EFE6; padding: 22px; display: grid; place-items: center; }
.lb-art .paint-ph, .lb-art img { width: 100%; max-height: 74vh; aspect-ratio: 4 / 5; object-fit: contain; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .4); }
.lightbox figcaption { padding: 36px 32px; align-self: center; }
.lb-title { font-size: 1.8rem; margin: 0 0 6px; }
.lb-meta { font-family: "Kalam", cursive; color: var(--accent); margin: 0 0 18px; font-size: 1.05rem; }
.lb-desc { color: var(--muted); margin: 0; }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14);
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .3); }
.lb-close { top: -54px; right: 0; }
.lb-prev { left: -58px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -58px; top: 50%; transform: translateY(-50%); }

/* Connect: business card */
.connect h2 { margin-bottom: .4em; }
.bcard-wrap { perspective: 1200px; max-width: 620px; margin: 36px auto 0; }
.bcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; text-align: left;
  aspect-ratio: 1.75; padding: 28px 32px 28px 40px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px;
  background: linear-gradient(135deg, #FFFDF8, #F7EEDF);
  border-radius: 14px; color: #2A211C;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -28px rgba(74, 28, 20, .45), 0 8px 18px -10px rgba(74, 28, 20, .25);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.bcard.is-tilting { transition: transform .08s linear; }
.bcard-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 45%);
}
.bcard:hover .bcard-shine { opacity: 1; }
.bcard-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(180deg, var(--flag-blue) 0 20%, #E9E4DA 20% 40%, var(--flag-red) 40% 60%, var(--flag-green) 60% 80%, var(--flag-yellow) 80%);
}
.bcard-mark { position: absolute; right: -18px; bottom: -26px; width: 150px; opacity: .1; }
.bcard-id { align-self: center; position: relative; }
.bcard-name { font-family: "Young Serif", serif; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.1; margin: 0 0 6px; }
.bcard-role { margin: 0 0 14px; color: #B4472F; font-weight: 600; }
.bcard-place { margin: 0; font-size: .85rem; color: #6E6058; }
.bcard-place span { font-family: "Kalam", cursive; font-size: 1rem; }
.bcard-links { align-self: center; position: relative; list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px dashed #D9C3AC; display: grid; gap: 12px; }
.bcard-links a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #2A211C; font-size: .9rem; transition: color .2s ease, transform .2s ease; }
.bcard-links a:hover { color: #B4472F; transform: translateX(4px); }
.bcard-links svg { width: 26px; height: 26px; flex: none; }
.bcard-links span { overflow-wrap: anywhere; }
.bcard .ic-fill { fill: #B4472F; } .bcard .ic-ink { fill: #fff; } .bcard .ic-stroke { stroke: #fff; }
.bcard-actions { margin-top: 28px; }
[data-reveal="flip"].will-reveal { opacity: 0; transform: perspective(1200px) rotateX(-28deg) translateY(40px); }
[data-reveal="flip"].will-reveal.is-in { opacity: 1; transform: none; transition-duration: 1s; }

/* Sub-page scenes */
:root {
  --hill: #A9C98F; --hill-dark: #7FA86B; --lake: #9FD0E6; --lake-line: #E8F7FF; --tree: #5E8F4E;
  --terrace-a: #B9D98A; --terrace-b: #93C46E; --terrace-c: #74AE5C; --terrace-line: rgba(60, 100, 40, .35);
  --bamboo: #C9A04A; --stone-white: #F4EFE6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hill: #2F4A3A; --hill-dark: #25392E; --lake: #22385A; --lake-line: #4E6E98; --tree: #1F3328;
    --terrace-a: #2F4A2E; --terrace-b: #2A4229; --terrace-c: #233823; --terrace-line: rgba(140, 190, 120, .2);
    --bamboo: #8E7034; --stone-white: #CFC8BA;
  }
}
.hill { fill: var(--hill); } .hill-dark { fill: var(--hill-dark); } .tree { fill: var(--tree); }
.lake { fill: var(--lake); }
.reflect { fill: var(--snow); opacity: .25; }
.shimmer rect { fill: var(--lake-line); animation: shimmer 4s ease-in-out infinite; }
.shimmer rect:nth-child(2n) { animation-delay: -1.5s; animation-duration: 5s; }
.shimmer rect:nth-child(3n) { animation-delay: -3s; }
@keyframes shimmer { 0%, 100% { opacity: .2; transform: translateX(0); } 50% { opacity: .9; transform: translateX(14px); } }

.boat { animation: row 80s linear infinite; }
.boat-2 { animation-duration: 110s; animation-direction: reverse; animation-delay: -40s; }
.boat-3 { animation-duration: 95s; animation-delay: -70s; }
@keyframes row { from { transform: translate(-60px, var(--by)); } to { transform: translate(1260px, var(--by)); } }
.boat-bob { animation: bob-boat 3s ease-in-out infinite; transform-origin: 0 0; }
@keyframes bob-boat { 50% { transform: translateY(2px) rotate(2deg); } }
.hull { fill: var(--hull); }
.rower { fill: var(--b-roof); }
.oar { stroke: var(--b-roof); stroke-width: 1.5; transform-box: fill-box; transform-origin: top left; animation: oar 2.4s ease-in-out infinite; }
@keyframes oar { 50% { transform: rotate(-25deg); } }

.glider-wing { fill: var(--gc); }
.glider-lines { stroke: var(--b-roof); stroke-width: .6; fill: none; opacity: .7; }
.glider-pilot { fill: var(--b-roof); }
.glider-swing { animation: glider-swing 4s ease-in-out infinite; transform-origin: 0 0; }
@keyframes glider-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.glider-1 { animation: glide-a 46s linear infinite; }
.glider-2 { animation: glide-b 60s linear infinite; animation-delay: -25s; }
.glider-3 { animation: glide-a 70s linear infinite; animation-delay: -50s; }
@keyframes glide-a { 0% { transform: translate(1260px, 30px); } 50% { transform: translate(620px, 80px); } 100% { transform: translate(-60px, 120px); } }
@keyframes glide-b { 0% { transform: translate(-60px, 50px); } 40% { transform: translate(400px, 30px); } 100% { transform: translate(1260px, 110px); } }

.kite { animation: kite 5s ease-in-out infinite; animation-delay: var(--kd, 0s); transform-origin: 0 0; }
@keyframes kite {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  30% { transform: translate(5px, -4px) rotate(8deg); }
  65% { transform: translate(-4px, 3px) rotate(-12deg); }
}
.kite-spine { stroke: rgba(0, 0, 0, .25); stroke-width: 1; }
.kite-tail { fill: none; stroke-width: 2; animation: tail 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes tail { to { transform: skewX(14deg); } }
.kite-string { fill: none; stroke: var(--muted); stroke-width: .7; opacity: .55; }
.b-house-v { fill: var(--hc, var(--b-house)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b-house-v { filter: brightness(.5); } }
.terrace { fill: var(--stone-white); } .terrace-2 { fill: var(--line); }
.eyes-fill { fill: var(--b-roof); }

.terrace-a { fill: var(--terrace-a); } .terrace-b { fill: var(--terrace-b); } .terrace-c { fill: var(--terrace-c); }
.terrace-lines path { fill: none; stroke: var(--terrace-line); stroke-width: 1.5; }
.trunk { fill: var(--b-roof); } .leaf { fill: var(--tree); } .rhodo { fill: #E3334F; }
.bamboo { stroke: var(--bamboo); stroke-width: 5; stroke-linecap: round; }
.bamboo-node { stroke: color-mix(in srgb, var(--bamboo) 60%, #000); stroke-width: 2; }
.swing { transform-box: view-box; transform-origin: 820px 38px; animation: swing 3.2s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
.rope { stroke: var(--b-roof); stroke-width: 1.5; }
.seat { fill: var(--b-roof); }
.kid-dress { fill: #E8433A; } .kid-skin { fill: #C98A5E; } .kid-hair { fill: #2A1712; stroke: #2A1712; stroke-width: 4; stroke-linecap: round; }
.kid-legs { stroke: #C98A5E; stroke-width: 3; stroke-linecap: round; }
.easel-leg { stroke: var(--wood); stroke-width: 4; stroke-linecap: round; }
.easel-leg-fill { fill: var(--wood); }
.canvas { fill: #FFFDF8; } .canvas-sky { fill: #BFE3F7; } .canvas-mtn { fill: #6A8FC9; } .canvas-sun { fill: #F6B82A; }
.palette { fill: #E9D7B8; }
.paint-dots circle { transform-box: fill-box; transform-origin: center; animation: dot 2.6s ease-in-out infinite; }
.paint-dots circle:nth-child(2) { animation-delay: -.6s; } .paint-dots circle:nth-child(3) { animation-delay: -1.2s; } .paint-dots circle:nth-child(4) { animation-delay: -1.8s; }
@keyframes dot { 50% { transform: translateY(-3px); } }
.brush { transform-box: view-box; transform-origin: 392px 128px; animation: brush 2.2s ease-in-out infinite; }
@keyframes brush { 50% { transform: rotate(-14deg); } }
.brush-handle { stroke: #8A5232; stroke-width: 3; stroke-linecap: round; } .brush-tip { fill: #2E6FD8; }
.bf-wing { opacity: .95; transform-box: fill-box; transform-origin: center; animation: flutter-wing .25s ease-in-out infinite alternate; }
@keyframes flutter-wing { to { transform: scaleX(.25); } }
.bf-torso { fill: #2A1712; }
.butterfly { animation: flit-a 18s ease-in-out infinite; }
.bf-2 { animation-name: flit-b; animation-duration: 22s; }
.bf-3 { animation-name: flit-c; animation-duration: 26s; animation-delay: -8s; }
@keyframes flit-a { 0%, 100% { transform: translate(140px, 160px); } 25% { transform: translate(230px, 120px); } 50% { transform: translate(290px, 175px); } 75% { transform: translate(200px, 190px); } }
@keyframes flit-b { 0%, 100% { transform: translate(1060px, 150px); } 30% { transform: translate(960px, 120px); } 60% { transform: translate(900px, 170px); } }
@keyframes flit-c { 0%, 100% { transform: translate(520px, 170px); } 33% { transform: translate(620px, 140px); } 66% { transform: translate(700px, 180px); } }

/* More dynamic scrolling */
[data-reveal="rise"].will-reveal { transform: translateY(50px) rotate(-2deg); }
.cards > .will-reveal { transform: translateY(40px) scale(.96); }
.paintings > .will-reveal { opacity: 0; transform: translateY(40px) rotate(6deg); }
.paintings > .will-reveal.is-in { opacity: 1; transform: rotate(var(--tilt, -1.5deg)); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1.2); }
.paintings > .will-reveal.is-in:hover { transform: rotate(0) translateY(-6px) scale(1.03); transition-duration: .4s; transition-delay: 0s; }
.paintings > :nth-child(2) { transition-delay: .1s; } .paintings > :nth-child(3) { transition-delay: .2s; }
.posts li.will-reveal { transform: translateX(-30px); }

@media (max-width: 860px) {
  .blogs-home { grid-template-columns: 1fr; }
  .lightbox figure { grid-template-columns: 1fr; max-height: 88vh; overflow: auto; }
  .lightbox figcaption { padding: 22px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-close { top: 8px; right: 8px; background: rgba(0, 0, 0, .35); }
}
@media (max-width: 560px) {
  .bcard { aspect-ratio: auto; grid-template-columns: 1fr; padding: 26px 22px 26px 30px; row-gap: 20px; }
  .bcard-links { padding: 18px 0 0; border-left: 0; border-top: 1px dashed #D9C3AC; }
  .nav nav { gap: 12px; }
  .nav nav a[href="/#about"] { display: none; }
}

/* revealed state must win over each starting pose */
.cards > .will-reveal.is-in, .posts li.will-reveal.is-in, [data-reveal="rise"].will-reveal.is-in { opacity: 1; transform: none; }
.cards > .will-reveal.is-in:hover { transform: translateY(-4px); }
.lb-art .paint-ph { width: auto; max-width: 100%; height: min(70vh, 620px); max-height: none; }
@media (max-width: 860px) { .lb-art .paint-ph { height: 46vh; } .lb-art img { max-height: 46vh; } }

/* Blue across the whole site: a soft gradient behind every page */
body { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, var(--sky-top)) 100%) fixed; }
.hobbies-page { background: none; }
.lb-art { background: color-mix(in srgb, var(--bg) 70%, #fff); }
.card:hover, .featured:hover { box-shadow: 0 14px 32px -18px rgba(30, 60, 100, .45); }

/* ===================================================================
   Blog cards, TEN, dancers, straight paintings
   =================================================================== */

/* Blog cards: image + category badge on the left, details on the right */
:root { --link: #1F7A99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #6CC4E0; } }
.bposts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 24px; margin-top: 24px; }
.bpost {
  display: grid; grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: var(--text);
  box-shadow: 0 10px 28px -20px rgba(30, 60, 100, .5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bpost:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(30, 60, 100, .55); }
.bpost-img { position: relative; min-height: 170px; }
.bpost-cat {
  position: absolute; right: 0; bottom: 0; padding: 8px 14px;
  background: rgba(20, 24, 32, .62); color: #fff; border-top-left-radius: 10px;
  font: 600 .95rem/1.2 "Manrope", sans-serif;
}
.bpost-body { padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bpost-body p { margin: 0; }
.bpost-date, .bpost-author { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.bpost-date { color: var(--muted); }
.bpost-author { color: var(--link); margin-top: 4px !important; }
.bpost-date svg, .bpost-author svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bpost-date svg { stroke: var(--text); }
.bpost-title { font: 700 1.2rem/1.35 "Manrope", sans-serif; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpost-excerpt { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bpost-more { align-self: flex-end; color: var(--link); font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.bpost-more span { display: inline-block; transition: transform .25s ease; }
.bpost:hover .bpost-more span { transform: translateX(5px); }
.bposts > :nth-child(6n+2) .card-art { --c1: #2EC4B6; --c2: #3A3E98; --scene: var(--scene-stupa); }
.bposts > :nth-child(6n+3) .card-art { --c1: #FF8FA3; --c2: #8A4FD1; --scene: var(--scene-lake); }
.bposts > :nth-child(6n+4) .card-art { --c1: #7FD3F7; --c2: #2E6FD8; }
.bposts > :nth-child(6n+5) .card-art { --c1: #C6E86B; --c2: #229A6E; --scene: var(--scene-stupa); }
.bposts > :nth-child(6n+6) .card-art { --c1: #FFC145; --c2: #D63AAF; --scene: var(--scene-lake); }
.bposts > .will-reveal { transform: translateY(36px); }
.bposts > .will-reveal.is-in { transform: none; }
.bposts > .will-reveal.is-in:hover { transform: translateY(-4px); }
.bposts > :nth-child(2) { transition-delay: .1s; }
@media (max-width: 600px) {
  .bpost { grid-template-columns: 1fr; }
  .bpost-img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* TEN Foundation band */
.ten-band { background: linear-gradient(135deg, #17406A, #2563B8 60%, #2E7FD0); color: #fff; }
.ten { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.section.ten { border-top: 0; }
.ten h2 { color: #fff; margin-bottom: .2em; }
.ten-ne { color: #CFE6FA; margin: 0 0 16px; font-size: .95rem; }
.ten-ne span { font-family: "Kalam", cursive; font-size: 1.05rem; }
.ten-text > p:not(.ten-ne) { color: #E6F1FB; max-width: 620px; }
.ten-pills { list-style: none; padding: 0; margin: 18px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ten-pills li { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: .9rem; }
.ten .btn { background: #fff; color: #17406A; border-color: #fff; }
.ten .btn:hover { background: #FFE9B8; border-color: #FFE9B8; }
.ten-art { width: 100%; }
.ten-disc { fill: rgba(255, 255, 255, .1); }
.ten-book-shadow { fill: rgba(0, 0, 0, .18); }
.ten-page-l { fill: #FFFDF8; } .ten-page-r { fill: #F1E8D8; }
.ten-spine { stroke: #C9B79A; stroke-width: 2; }
.ten-lines { fill: none; stroke: #9DB7D3; stroke-width: 2; stroke-linecap: round; }
.ten-stem { fill: none; stroke: #3D8A5A; stroke-width: 3.5; stroke-linecap: round; }
.ten-leaf { fill: #5DBB63; }
.ten-star { fill: #F6B82A; animation: twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ten-star:nth-of-type(2) { animation-delay: -.8s; } .ten-star:nth-of-type(3) { animation-delay: -1.6s; }
@keyframes twinkle { 50% { transform: scale(.5); opacity: .5; } }
.ten-sprout { transform-box: fill-box; transform-origin: 50% 100%; animation: sprout-sway 4s ease-in-out infinite; }
@keyframes sprout-sway { 50% { transform: rotate(5deg); } }
.ten.will-reveal .ten-sprout { transform: scaleY(0); }
.ten.is-in .ten-sprout { animation: grow 1.2s cubic-bezier(.2, .7, .2, 1.2) .3s both, sprout-sway 4s ease-in-out 1.5s infinite; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 720px) {
  .ten { grid-template-columns: 1fr; gap: 16px; padding-top: 56px; padding-bottom: 56px; }
  .ten-art { width: 170px; }
}

/* Dancing girls (Hobbies scene) */
.dancer { animation: dance 1.8s ease-in-out infinite; animation-delay: var(--dd, 0s); transform-origin: 0 0; }
@keyframes dance {
  0%, 100% { transform: rotate(-4deg); }
  25% { transform: translateY(-2px) rotate(0); }
  50% { transform: rotate(4deg); }
  75% { transform: translateY(-2px) rotate(0); }
}
.dancer-skirt { transform-box: fill-box; transform-origin: 50% 0; animation: twirl .9s ease-in-out infinite alternate; animation-delay: var(--dd, 0s); }
@keyframes twirl { from { transform: scaleX(.92) skewX(4deg); } to { transform: scaleX(1.1) skewX(-4deg); } }
.dancer-arm { fill: none; stroke: #C98A5E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: 0 0; }
.dancer-arm-l { animation: arm-l 1.8s ease-in-out infinite; animation-delay: var(--dd, 0s); }
.dancer-arm-r { animation: arm-r 1.8s ease-in-out infinite; animation-delay: var(--dd, 0s); }
@keyframes arm-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-55deg); } }
@keyframes arm-r { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(10deg); } }
.dancer-skin { fill: #C98A5E; }
.dancer-hair { fill: #1E120C; }
.dancer-braid { fill: none; stroke: #1E120C; stroke-width: 2.4; stroke-linecap: round; }
.dancer-flower { fill: #E8433A; }
.dancer-tika { fill: #C8402F; }
.dancer-blouse { fill: #3A1F4A; }
.dancer-shawl { opacity: .85; }
.dancer-pleat { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: .8; }
.dancer-feet { fill: #3A1F14; }
.dancer-shadow { fill: rgba(0, 0, 0, .14); }

/* Paintings: straight, evenly framed, symmetrical placeholder */
.painting, .painting:nth-child(even), .painting:nth-child(3n) { --tilt: 0deg; transform: none; }
.painting:hover, .painting:focus-visible { transform: translateY(-6px); }
.paintings > .will-reveal { transform: translateY(30px); }
.paintings > .will-reveal.is-in { transform: none; }
.paintings > .will-reveal.is-in:hover { transform: translateY(-6px); }
.paint-ph {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cpath fill='%23fff' fill-opacity='.3' d='M0 40L22 26L38 34L50 12L62 34L78 26L100 40V70H0Z'/%3E%3Cpath fill='%23fff' fill-opacity='.9' d='M50 12L57 25L50 21L43 25Z'/%3E%3Cpath fill='%231B1030' fill-opacity='.4' d='M0 52Q25 40 50 48Q75 40 100 52V70H0Z'/%3E%3Crect y='54' width='100' height='16' fill='%23fff' fill-opacity='.14'/%3E%3Cg fill='%23fff' fill-opacity='.55'%3E%3Crect x='38' y='57' width='24' height='1.2'/%3E%3Crect x='42' y='61' width='16' height='1.2'/%3E%3Crect x='46' y='65' width='8' height='1.2'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% auto no-repeat,
    radial-gradient(circle at 50% 30%, #FFF3C4 0 10%, rgba(255, 243, 196, .35) 10.5% 15%, transparent 15.5%),
    linear-gradient(180deg, var(--p1), var(--p2));
  place-items: start center; padding: 14px 0 0;
}

/* About: plain photo frame */
.photo-frame {
  margin: 0; padding: 12px; background: #FFFFFF; border-radius: 4px;
  box-shadow: 0 1px 0 var(--line), 0 22px 40px -24px rgba(30, 60, 100, .5);
}
.photo-ph, .photo-frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.photo-ph {
  background: linear-gradient(160deg, #DCEAF6, #B9D3EA);
  display: grid; place-content: center; text-align: center; color: #4F6E8C;
}
.photo-ph span { font-family: "Young Serif", serif; font-size: 3rem; line-height: 1; }
.photo-ph small { font-family: "Kalam", cursive; font-size: 1rem; margin-top: 6px; }
@media (max-width: 720px) { .photo-frame { width: 220px; } }

/* No brush underline under headings */
.section h2::after { content: none; display: none; }

/* TEN: photo of the work + logo beside the heading */
.ten { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.ten-photo { margin: 0; padding: 10px; background: rgba(255, 255, 255, .12); border-radius: 14px; }
.ten-photo-ph, .ten-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ten-photo-ph {
  display: grid; place-items: center; color: #DCEBFA; font-family: "Kalam", cursive; font-size: 1.1rem;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px), rgba(10, 30, 60, .35);
  border: 2px dashed rgba(255, 255, 255, .35);
}
.ten-head { display: flex; align-items: center; gap: 14px; margin-bottom: .2em; }
.ten-head h2 { margin: 0; }
.ten-logo { width: 84px; height: 84px; flex: none; object-fit: contain; }
@media (max-width: 720px) { .ten { grid-template-columns: 1fr; } .ten-logo { width: 52px; height: 52px; } }

/* TEN logo as a large translucent watermark behind the text */
.ten-text { position: relative; isolation: isolate; }
.ten-logo {
  position: absolute; z-index: -1; right: -10px; top: 50%; transform: translateY(-50%);
  width: min(380px, 80%); height: auto; opacity: .1; pointer-events: none;
}
@media (max-width: 720px) { .ten-logo { width: 70%; height: auto; right: 0; } }

/* TEN: stronger watermark; photo stretches to match the full text column height */
.ten-logo { opacity: .28; width: min(420px, 85%); }
.ten { align-items: stretch; }
.ten-photo { display: flex; }
.ten-photo-ph, .ten-photo img { aspect-ratio: auto; height: 100%; min-height: 260px; }

/* TEN: lighter blue band so the watermark reads better */
.ten-band { background: linear-gradient(135deg, #3B7BC4, #4E92DA 55%, #69A9E6); }
.ten-logo { opacity: .4; filter: drop-shadow(0 2px 6px rgba(20, 50, 90, .25)); }
.ten-text > p:not(.ten-ne) { color: #fff; text-shadow: 0 1px 2px rgba(20, 50, 90, .25); }
.ten-ne { color: #EAF4FD; }
.ten-photo-ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px), rgba(20, 60, 110, .25); }
.ten .btn { color: #1F5A9A; }