@import url("_assets/fonts/fonts.css");  /* self-hosted: Fraunces, Inter Tight, Noto Sans/Serif Sinhala — no external dependency */

/* ============================================================================
   THE REAL BUDDHIST CULTURE — modern dark "emerald" design system
   Matches the drchanaka.com aesthetic: charcoal-green canvas, emerald accents,
   Fraunces display serif + Inter Tight body, glassy dark cards.
   ============================================================================ */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root {
  --bg:         #f7f1e2;     /* warm parchment */
  --bg-2:       #efe6d2;
  --surface:    #ffffff;     /* pure white reading canvas */
  --surface-2:  #f8f1df;
  --surface-3:  #fbf6ea;
  --ink:        #3c2e1c;     /* warm dark body text */
  --ink-bright: #5a2417;     /* deep maroon headings */
  --muted:      #7c6a4d;
  --emerald:    #c8932a;     /* gold: fills / borders / button bg */
  --emerald-b:  #a85f1c;     /* deep amber-gold: text / links / icons (readable on light) */
  --teal:       #b8801a;     /* gold variant */
  --emerald-dim:#7a4a10;
  --glow:       rgba(200,147,42,.16);
  --border:     rgba(90,45,20,.13);
  --border-2:   rgba(90,45,20,.22);
  --border-em:  rgba(176,122,22,.45);

  --serif: "Fraunces", "Noto Serif Sinhala", "Noto Sans Sinhala", "Iskoola Pota", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", "Inter", "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", system-ui, "Segoe UI", Arial, sans-serif;
  --sinhala: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1: 0 1px 3px rgba(74,30,12,.07), 0 6px 18px rgba(74,30,12,.08);
  --shadow-2: 0 12px 30px rgba(74,30,12,.12);
  --shadow-3: 0 28px 64px rgba(74,30,12,.18);
  --ring: 0 0 0 3px rgba(176,122,22,.40);
  --maxw: 1160px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---- 2. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg) !important; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0 !important;
  background:
    radial-gradient(900px 520px at 78% -120px, var(--glow), transparent 60%),
    radial-gradient(700px 480px at 12% 4%, rgba(217,183,64,.07), transparent 55%),
    var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#top-bg,#main-bg,#banner-top,#banner-bot,#bannr-mid,#pen,#tl,#tr,#bl,#br { display:none !important; }
#main-top,#main-bot,#header-top,#frame-wrapper,#main,#banner,.wsite-header,
.tall-header-page #frame-wrapper,.short-header-page #frame-wrapper,.landing-page #frame-wrapper { background:none !important; border:0 !important; }
img { max-width: 100%; height: auto; }

/* ---- 3. LAYOUT ---------------------------------------------------------- */
#container { max-width: var(--maxw) !important; width: min(var(--maxw), calc(100% - 36px)) !important; margin: 0 auto !important; padding: 0 !important; }
#main,#main-top,#main-bot,#main-bg,#banner-bot { padding: 0 !important; }
#main-bot { padding-bottom: var(--s-7) !important; }
#content {
  position: relative; min-height: 360px !important;
  margin: var(--s-5) 0 var(--s-6) !important; padding: clamp(24px,4vw,52px) !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--shadow-2) !important; overflow-x: clip;
  overflow-wrap: anywhere !important;
}
#content::before { content:""; position:absolute; left:24px; right:24px; top:0; height:2px; background: linear-gradient(90deg, transparent, var(--emerald), transparent); opacity:.7; }

/* ---- 4. HEADER ---------------------------------------------------------- */
#header-top {
  position: sticky; top: 0; z-index: 60; margin: 0 !important; padding: 0 !important;
  background: rgba(252,247,237,.86) !important; backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border) !important; box-shadow: 0 1px 0 rgba(200,147,42,.28), 0 8px 26px rgba(74,30,12,.10) !important;
}
#header, #header-top table#header {
  width:100% !important; height:auto !important; min-height:0 !important; border:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:var(--s-4) !important; padding:15px 6px !important;
}
#header tr, #header tbody { display:contents !important; }
#header-right { text-align:right !important; }
.phone-number,.social,.search { display:none !important; }
#logo { padding:0 !important; }
#logo .wsite-logo a img { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; border:0 !important; }
#logo .wsite-logo a { display:inline-flex !important; align-items:center !important; gap:10px !important; text-decoration:none !important; line-height:1 !important; }
#logo .wsite-logo a::before { content:"\2638"; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(160deg, rgba(201,162,39,.22), rgba(201,162,39,.05)); border:1px solid var(--border-em); color:var(--emerald-b); font-size:18px; }
#logo .wsite-logo a::after { content:"The Real Buddhist Culture"; font-family:var(--serif); font-weight:600; font-size:clamp(18px,2.6vw,25px); letter-spacing:.01em; color:var(--ink-bright); white-space:nowrap; }
#wsite-title { display:none !important; }

/* ---- 5. NAVIGATION ------------------------------------------------------ */
#navigation {
  position: sticky; top: 60px; z-index: 55; margin: 0 0 var(--s-4) !important; padding: 7px 10px !important;
  background: linear-gradient(180deg,#6e1f15,#4a120b) !important; border: 1px solid rgba(176,122,22,.4) !important;
  border-radius: 0 0 var(--r) var(--r) !important; box-shadow: var(--shadow-2) !important;
}
#navigation > ul.wsite-menu-default { display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:2px !important; margin:0 !important; padding:0 !important; list-style:none !important; }
#navigation li { float:none !important; margin:0 !important; position:relative !important; list-style:none !important; }
#navigation li > a.wsite-menu-item, #navigation li#active > a.wsite-menu-item {
  display:block !important; float:none !important; color:var(--ink) !important; background:transparent !important;
  font-family:var(--sans) !important; font-weight:500 !important; font-size:14.5px !important; line-height:1.2 !important;
  letter-spacing:.005em !important; text-decoration:none !important; text-shadow:none !important; padding:9px 13px !important; border-radius:var(--r-pill) !important;
  color:#f0e0bd !important; transition:background .18s var(--ease), color .18s var(--ease);
}
#navigation li > a.wsite-menu-item:hover, #navigation li > a.wsite-menu-item:focus-visible { background:rgba(247,215,126,.16) !important; color:#f9dd86 !important; }
#navigation li#active > a.wsite-menu-item { background:linear-gradient(180deg, var(--emerald), var(--emerald-dim)) !important; color:#2a1d04 !important; font-weight:600 !important; box-shadow:0 4px 14px rgba(201,162,39,.4) !important; }
#navigation .wsite-menu-wrap {
  display:none !important; position:absolute !important; top:calc(100% + 9px) !important; left:50% !important; transform:translateX(-50%);
  min-width:250px !important; max-width:330px !important; z-index:80 !important; background:var(--surface-2) !important;
  border:1px solid var(--border-2) !important; border-radius:var(--r) !important; box-shadow:var(--shadow-3) !important; padding:8px !important;
}
#navigation .wsite-menu-wrap::before { content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--surface-2); border-left:1px solid var(--border-2); border-top:1px solid var(--border-2); }
#navigation .wsite-menu-wrap::after { content:""; position:absolute; left:0; right:0; top:-14px; height:16px; background:transparent; }
#navigation li:hover > .wsite-menu-wrap, #navigation li:focus-within > .wsite-menu-wrap, #navigation li.is-open > .wsite-menu-wrap { display:block !important; }
#navigation .wsite-menu { display:block !important; margin:0 !important; padding:0 !important; max-height:min(70vh,520px); overflow-y:auto; }
#navigation .wsite-menu li { display:block !important; }
#navigation .wsite-menu .wsite-menu-subitem { display:block !important; color:var(--ink) !important; background:transparent !important; font-family:var(--sans) !important; font-size:14px !important; font-weight:400 !important; line-height:1.4 !important; text-decoration:none !important; padding:9px 12px !important; border-radius:var(--r-sm) !important; border:0 !important; }
#navigation .wsite-menu .wsite-menu-subitem:hover, #navigation .wsite-menu .wsite-menu-subitem:focus-visible { background:rgba(201,162,39,.12) !important; color:var(--emerald-b) !important; }
#navigation .wsite-menu .wsite-menu-title { color:inherit !important; }
/* categorized nav polish: roomier items + dropdown caret */
#navigation > ul.wsite-menu-default { gap:6px !important; }
#navigation li > a.wsite-menu-item { font-size:15.5px !important; font-weight:600 !important; padding:11px 18px !important; display:inline-flex !important; align-items:center; }
#navigation .has-cat > a.wsite-menu-item::after { content:"\25BE"; margin-left:7px; font-size:10px; opacity:.75; transition:transform .2s var(--ease); }
#navigation .has-cat:hover > a.wsite-menu-item::after, #navigation .has-cat.is-open > a.wsite-menu-item::after { transform:rotate(180deg); }
#navigation .wsite-menu-wrap { min-width:262px !important; }
/* ---- mega-menu (categories with grouped columns) ---- */
#navigation .wsite-menu-wrap.mega { min-width:min(880px,94vw) !important; max-width:94vw !important; padding:16px !important; }
.mega-grid { display:grid; grid-template-columns:repeat(3,minmax(190px,1fr)); gap:2px 20px; max-height:min(72vh,540px); overflow-y:auto; }
.mega-col { padding:2px 0 12px; }
#navigation .mega-head { display:block !important; float:none !important; width:auto !important; font-family:var(--serif) !important; color:var(--ink-bright) !important; background:transparent !important; box-shadow:none !important; text-shadow:none !important; font-weight:700 !important; font-size:14.5px !important; padding:7px 8px !important; border:0 !important; border-bottom:1px solid var(--border) !important; margin:0 0 3px !important; border-radius:0 !important; text-decoration:none !important; }
#navigation .mega-head:hover { color:var(--emerald-b) !important; background:transparent !important; }
#navigation .mega-link { display:block !important; float:none !important; width:auto !important; color:var(--ink) !important; background:transparent !important; box-shadow:none !important; text-shadow:none !important; font-family:var(--sans) !important; font-weight:400 !important; font-size:13px !important; line-height:1.35 !important; padding:6px 8px !important; margin:0 !important; border:0 !important; border-radius:6px !important; text-decoration:none !important; }
#navigation .mega-link:hover { background:var(--surface-2) !important; color:var(--emerald-b) !important; }
/* sitemap page */
.sitemap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; margin-top:var(--s-5); }
.sitemap-col h3 { text-align:left !important; font-size:18px !important; margin:0 0 8px !important; }
.sitemap-col h3::after { display:none !important; }
.sitemap-col a { display:block; color:var(--ink) !important; font-size:14px !important; padding:5px 0 !important; border-bottom:1px dotted var(--border); text-decoration:none !important; }
.sitemap-col a:hover { color:var(--emerald-b) !important; }
.nav-toggle { display:none; align-items:center; gap:9px; margin:0; padding:9px 16px; font-family:var(--sans); font-weight:600; font-size:15px; color:#2a1d04; background:linear-gradient(180deg,var(--emerald-b),var(--emerald)); border:0; border-radius:var(--r-pill); cursor:pointer; box-shadow:0 4px 14px rgba(201,162,39,.35); }
.nav-toggle .bars { position:relative; width:18px; height:13px; }
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span { content:""; position:absolute; left:0; height:2px; width:100%; background:#2a1d04; border-radius:2px; transition:transform .25s var(--ease),opacity .2s var(--ease); }
.nav-toggle .bars::before{top:0;} .nav-toggle .bars span{top:5.5px;} .nav-toggle .bars::after{top:11px;}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span{opacity:0;}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5.5px) rotate(-45deg);}

/* ---- 6. PAGE TITLE ------------------------------------------------------ */
.page-title { position:relative; text-align:center; margin:2px 0 30px !important; padding:0 0 24px !important; font-family:var(--serif) !important; font-weight:600 !important; font-size:clamp(28px,4.4vw,46px) !important; line-height:1.15 !important; letter-spacing:0 !important; color:var(--ink-bright) !important; text-shadow:none !important; }
.page-title::before { content:""; position:absolute; left:50%; bottom:13px; transform:translateX(-50%); width:min(54%,320px); height:2px; background:linear-gradient(90deg, transparent, var(--emerald) 50%, transparent); }
.page-title::after { content:"\2638"; position:absolute; left:50%; bottom:2px; transform:translateX(-50%); color:var(--emerald-b); background:var(--surface); padding:0 12px; font-size:19px; line-height:1; }

/* ---- 7. CONTENT TYPOGRAPHY --------------------------------------------- */
#wsite-content,.wsite-elements,.blog-sidebar,#blogTable { color:var(--ink) !important; }
html body #wsite-content div.paragraph, html body #wsite-content p,
html body .wsite-elements.wsite-not-footer div.paragraph, html body .wsite-elements.wsite-not-footer p,
html body #wsite-content li, html body #wsite-content td, html body #wsite-content th, html body #wsite-content label, html body .blog-sidebar p {
  color:var(--ink) !important; font-family:var(--sans) !important; font-size:17px !important; line-height:1.85 !important;
}
#wsite-content font,#wsite-content span,#wsite-content strong,#wsite-content em { color:inherit !important; }
#wsite-content strong, #wsite-content b { color:var(--ink-bright) !important; }
h1,h2,h3,h4,#wsite-content h1,#wsite-content h2,#wsite-content h3,#wsite-content h4,#wsite-content .wsite-content-title,.blog-header h2 a,.wsite-content-title {
  font-family:var(--serif) !important; color:var(--ink-bright) !important; line-height:1.2 !important; letter-spacing:0 !important; text-shadow:none !important; font-weight:600 !important;
}
#wsite-content h2,#wsite-content .wsite-content-title { font-size:clamp(25px,3.6vw,36px) !important; margin:.2em 0 .55em !important; padding:0 0 .3em !important; position:relative; text-align:center !important; }
#wsite-content h2::after,#wsite-content .wsite-content-title::after { content:""; display:block; width:84px; height:3px; margin:.4em auto 0 !important; background:linear-gradient(90deg,var(--emerald),var(--teal)); border-radius:3px; }
#wsite-content h3 { font-size:clamp(20px,2.5vw,26px) !important; margin:1.3em 0 .45em !important; text-align:center !important; }
#wsite-content [style*="justify"], #wsite-content p[align="justify"] { text-align:left !important; }
a,#wsite-content a,.wsite-not-footer h2.wsite-content-title a,.wsite-not-footer .paragraph a,.wsite-not-footer blockquote a,#blogTable .blog-sidebar a,#blogTable .blog-comments a,#blogTable .blog-comments-bottom a {
  color:var(--emerald-b) !important; text-decoration:underline !important; text-underline-offset:.16em !important; text-decoration-thickness:1px !important; text-decoration-color:rgba(227,196,99,.4) !important; transition:color .15s var(--ease);
}
a:hover,#wsite-content a:hover,.wsite-not-footer .paragraph a:hover { color:var(--teal) !important; text-decoration-color:currentColor !important; }
blockquote,.wsite-not-footer blockquote { background:var(--surface-2) !important; border:1px solid var(--border) !important; border-left:4px solid var(--emerald) !important; color:var(--ink) !important; font-family:var(--serif) !important; font-size:21px !important; font-style:italic !important; line-height:1.6 !important; margin:var(--s-5) 0 !important; padding:var(--s-4) var(--s-5) !important; border-radius:var(--r) !important; }
hr { border:0 !important; height:1px !important; margin:var(--s-6) auto !important; width:70% !important; background:linear-gradient(90deg, transparent, var(--border-2), transparent) !important; }

/* ---- 8. MEDIA ----------------------------------------------------------- */
#wsite-content img,.wsite-image img,.imageElement img,.galleryImageBorder { max-width:100% !important; height:auto !important; border-radius:var(--r-sm) !important; }
.wsite-image img,.imageElement img { box-shadow:var(--shadow-1); border:1px solid var(--border); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.wsite-image a img:hover,.imageElement a img:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.wsite-caption,.galleryCaptionInnerText,.wslide-caption-text { color:var(--muted) !important; font-size:13px !important; font-style:italic !important; line-height:1.5 !important; }
.yt-embed { display:block !important; width:100% !important; max-width:880px !important; aspect-ratio:16/9 !important; height:auto !important; min-height:320px !important; margin:var(--s-5) auto !important; border:1px solid var(--border) !important; border-radius:var(--r) !important; background:#000 !important; box-shadow:var(--shadow-2) !important; }
.legacy-audio,audio.site-audio { display:block !important; width:100% !important; max-width:460px !important; margin:var(--s-4) auto !important; }

/* ---- 9. BUTTONS --------------------------------------------------------- */
.wsite-button,.wsite-button-highlight,.wsite-button-large,.wsite-button-small {
  display:inline-block !important; background:linear-gradient(180deg,var(--emerald-b),var(--emerald)) !important; border:0 !important; border-radius:var(--r-pill) !important;
  box-shadow:0 6px 18px rgba(201,162,39,.30) !important; color:#2a1d04 !important; padding:0 !important; margin:6px 4px !important; text-shadow:none !important;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease); position:relative !important; overflow:hidden !important;
}
.wsite-button:hover { transform:translateY(-2px) !important; box-shadow:0 12px 28px rgba(201,162,39,.42) !important; filter:brightness(1.06); }
.wsite-button-inner,.wsite-button-highlight .wsite-button-inner,.wsite-button-large .wsite-button-inner { background:transparent !important; color:#2a1d04 !important; font-family:var(--sans) !important; font-weight:700 !important; font-size:15px !important; letter-spacing:.01em !important; text-shadow:none !important; padding:13px 30px !important; display:inline-block; }
.wsite-button::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%); transform:translateX(-130%); transition:transform .6s var(--ease); }
.wsite-button:hover::after { transform:translateX(130%); }
.doc-actions { text-align:center; margin:var(--s-5) 0; }
.doc-button { display:inline-flex; align-items:center; gap:10px; padding:13px 28px; border-radius:var(--r-pill); background:transparent; color:var(--emerald-b) !important; font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none !important; border:1px solid var(--border-em); transition:transform .15s var(--ease), background .2s, box-shadow .15s; }
.doc-button:hover { transform:translateY(-2px); background:rgba(201,162,39,.1); box-shadow:0 8px 22px rgba(201,162,39,.2); color:var(--teal) !important; }
.doc-button .doc-ico { font-size:18px; line-height:1; }

/* ---- 10. FORMS ---------------------------------------------------------- */
input,textarea,select,.wsite-form-input,.wsite-search-element-input,.form-select { color:var(--ink-bright) !important; background:var(--surface-3) !important; border:1px solid var(--border-2) !important; border-radius:var(--r-sm) !important; font-family:var(--sans) !important; font-size:16px !important; padding:11px 13px !important; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
input::placeholder,textarea::placeholder { color:var(--muted) !important; }
input:focus,textarea:focus,select:focus,.wsite-form-input:focus { outline:none !important; border-color:var(--emerald) !important; box-shadow:var(--ring) !important; }
.wsite-form-label,.wsite-form-field label { font-family:var(--sans) !important; font-weight:600 !important; color:var(--ink-bright) !important; }

/* ---- 11. TABLES --------------------------------------------------------- */
#wsite-content table,.wsite-multicol-table { max-width:100% !important; border-collapse:collapse !important; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s-4) 0; border-radius:var(--r-sm); }
#wsite-content td,#wsite-content th { vertical-align:top !important; }
#wsite-content pre { max-width:100% !important; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
#wsite-content iframe,#wsite-content embed,#wsite-content object { max-width:100% !important; }

/* ---- empty-state -------------------------------------------------------- */
.empty-state { text-align:center; max-width:560px; margin:clamp(20px,5vw,56px) auto; padding:clamp(24px,4vw,44px); }
.empty-state .es-ico { font-size:56px; line-height:1; display:block; margin-bottom:14px; }
.empty-state h2 { font-family:var(--serif) !important; color:var(--ink-bright) !important; font-size:clamp(22px,3vw,30px) !important; margin:0 0 10px !important; text-align:center !important; }
.empty-state h2::after { display:none !important; }
.empty-state p { color:var(--muted) !important; font-size:16px !important; line-height:1.7 !important; margin:0 0 24px !important; }

/* ---- 12. FOOTER --------------------------------------------------------- */
#footer,.wsite-footer { color:#e9d8b4 !important; margin:var(--s-7) 0 0 !important; padding:var(--s-6) var(--s-4) !important; text-align:center !important; font-family:var(--sans) !important; font-size:14px !important; background:linear-gradient(180deg,#5a1610,#3f0d0a) !important; border-top:2px solid rgba(176,122,22,.5) !important; border-radius:var(--r) var(--r) 0 0 !important; }
#footer a,.wsite-footer a { color:#f7d77e !important; }
#footer::before { content:"\2638"; display:block; color:#f7d77e; font-size:24px; margin-bottom:8px; }

/* ---- 13. SKIP LINK / BACK TO TOP --------------------------------------- */
.skip-link { position:fixed; top:-60px; left:12px; z-index:200; background:var(--emerald); color:#2a1d04; padding:10px 16px; border-radius:var(--r-sm); font-family:var(--sans); font-weight:700; text-decoration:none; box-shadow:var(--shadow-2); transition:top .2s var(--ease); }
.skip-link:focus { top:12px; outline:none; box-shadow:var(--ring), var(--shadow-2); }
.to-top { position:fixed; right:20px; bottom:20px; z-index:90; width:50px; height:50px; display:grid; place-items:center; background:linear-gradient(180deg,#6e1f15,#4a120b); color:#f7d77e; border:1px solid rgba(176,122,22,.5); border-radius:50%; box-shadow:var(--shadow-2); cursor:pointer; opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { filter:brightness(1.12); }
.to-top svg { width:20px; height:20px; }

/* ---- 14. ACCESSIBILITY -------------------------------------------------- */
a:focus-visible,button:focus-visible,.wsite-button:focus-visible,.wsite-menu-item:focus-visible,.wsite-menu-subitem:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--emerald) !important; outline-offset:2px !important; border-radius:4px; }
::selection { background:rgba(201,162,39,.3); color:#fff; }
:focus { outline:none; }

/* ---- 15. RESPONSIVE ----------------------------------------------------- */
@media (max-width:980px) {
  #navigation { position:static; top:auto; padding:8px !important; }
  .nav-toggle { display:inline-flex; }
  #navigation > ul.wsite-menu-default { display:none !important; flex-direction:column !important; align-items:stretch !important; gap:2px !important; margin-top:8px !important; }
  body.nav-open #navigation > ul.wsite-menu-default { display:flex !important; }
  #navigation li { width:100%; }
  #navigation li > a.wsite-menu-item { text-align:left !important; padding:13px 14px !important; font-size:16px !important; border-radius:var(--r-sm) !important; }
  #navigation .wsite-menu-wrap { position:static !important; transform:none !important; min-width:0 !important; max-width:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; background:rgba(0,0,0,.25) !important; padding:0 0 6px 10px !important; }
  #navigation .wsite-menu-wrap::before,#navigation .wsite-menu-wrap::after { display:none !important; }
  #navigation li:hover > .wsite-menu-wrap, #navigation li:focus-within > .wsite-menu-wrap { display:none !important; }
  #navigation li.is-open > .wsite-menu-wrap { display:block !important; }
  #navigation .wsite-menu .wsite-menu-subitem { color:#ecdcb6 !important; }
  #navigation .wsite-menu .wsite-menu-subitem:hover { background:rgba(247,215,126,.16) !important; color:#fff !important; }
  /* mobile mega-menu: single column, light text on maroon */
  #navigation .wsite-menu-wrap.mega { min-width:0 !important; max-width:none !important; padding:0 0 6px 8px !important; }
  .mega-grid { grid-template-columns:1fr !important; max-height:none !important; overflow:visible !important; gap:0 !important; }
  .mega-head { color:#f7d77e !important; border-bottom-color:rgba(247,215,126,.25) !important; }
  .mega-link { color:#ecdcb6 !important; }
  .mega-link:hover { background:rgba(247,215,126,.16) !important; color:#fff !important; }
}
@media (max-width:640px) {
  body { font-size:16px !important; }
  #container { width:calc(100% - 22px) !important; }
  #header { padding:11px 2px !important; }
  #content { padding:18px !important; border-radius:var(--r) !important; margin-top:var(--s-4) !important; }
  html body #wsite-content div.paragraph, html body #wsite-content p, html body #wsite-content li { font-size:16px !important; line-height:1.78 !important; }
  .page-title { font-size:clamp(24px,7vw,32px) !important; }
  .to-top { right:14px; bottom:14px; width:44px; height:44px; }
}

/* ---- 16. MOTION / PRINT ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
@media print { #navigation,#header-top,.to-top,.skip-link,.nav-toggle { display:none !important; } #content { box-shadow:none !important; border:0 !important; background:#fff !important; } body { background:#fff !important; color:#111 !important; } }

/* ============================================================================
   HOME LANDING — emerald dark hero + card grids (drchanaka.com style)
   ============================================================================ */
body.wsite-page-index #content { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 0 var(--s-6) !important; }
body.wsite-page-index #content::before { display:none !important; }
body.wsite-page-index #wsite-content { text-align:left; }

.home-hero {
  position:relative; overflow:hidden; margin:var(--s-4) 0 var(--s-6); padding:clamp(32px,5vw,68px);
  border-radius:var(--r-lg);
  background:
    radial-gradient(700px 420px at 86% -10%, var(--glow), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); box-shadow:var(--shadow-2);
}
.home-hero::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(201,162,39,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,39,.05) 1px, transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(600px 400px at 80% 0, #000, transparent 75%); -webkit-mask-image:radial-gradient(600px 400px at 80% 0, #000, transparent 75%); }
.hero-mandala { position:absolute; right:-60px; top:-70px; z-index:0; font-size:360px; line-height:1; color:rgba(201,162,39,.06); pointer-events:none; user-select:none; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(24px,4vw,56px); align-items:center; }
/* NOTE: no letter-spacing/text-transform here — they break Sinhala conjunct shaping */
.hero-kicker { display:inline-block; font-family:var(--sinhala); letter-spacing:normal; color:var(--emerald-b); font-weight:600; font-size:13px; margin:0 0 16px; padding:6px 16px; border:1px solid var(--border-em); border-radius:var(--r-pill); background:rgba(201,162,39,.07); }
.hero-title { font-family:var(--serif); font-weight:600; font-size:clamp(40px,6.2vw,72px); line-height:1.02; color:var(--ink-bright); margin:0 0 20px; letter-spacing:-.015em; }
.hero-title .accent { color:var(--emerald-b); font-style:italic; }
.hero-verse { font-family:var(--serif); font-style:italic; font-size:clamp(17px,2vw,21px); line-height:1.6; color:var(--muted); max-width:46ch; margin:0 0 28px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }
.btn-gold, .btn-ghost { display:inline-flex; align-items:center; gap:9px; padding:14px 27px; border-radius:var(--r-pill); font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none !important; transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .2s; }
.btn-gold { background:linear-gradient(180deg,var(--emerald-b),var(--emerald)); color:#2a1d04 !important; box-shadow:0 8px 22px rgba(201,162,39,.36); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(201,162,39,.5); }
.btn-ghost { background:transparent; color:var(--ink-bright) !important; border:1px solid var(--border-2); }
.btn-ghost:hover { background:rgba(255,255,255,.05); border-color:var(--border-em); transform:translateY(-2px); }
/* in-flow hero composition — no absolute overlap */
.hero-art { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:16px; }
.hero-photo { padding:8px; background:linear-gradient(160deg, rgba(200,147,42,.55), rgba(200,147,42,.12)); border-radius:var(--r-lg); box-shadow:var(--shadow-3); max-width:100%; }
.hero-photo img { display:block; width:100%; max-width:420px; border-radius:calc(var(--r-lg) - 4px); border:1px solid var(--border); }
.hero-card { width:min(420px,100%); padding:18px 22px; background:#fff; border:1px solid var(--border-2); border-left:3px solid var(--emerald); border-radius:var(--r); box-shadow:var(--shadow-1); text-align:left; }
.hc-label { display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.13em; font-size:10.5px; font-weight:700; color:var(--emerald-b); margin-bottom:8px; }
.hc-verse { font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.5; color:var(--ink); margin:0 0 12px; }
.hc-link { font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--emerald-b); text-decoration:none; }
.hc-link:hover { color:var(--teal); }
.hero-chip { display:none !important; }   /* removed: was a floating overlap; stat lives in the stats band */

/* scroll reveal + micro-interactions */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* stats band */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:var(--s-6) 0; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.stat { background:var(--surface); padding:26px 18px; text-align:center; }
.stat b { display:block; font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,38px); color:var(--emerald-b); line-height:1; margin-bottom:8px; }
.stat span { color:var(--muted); font-size:13px; letter-spacing:.04em; }

/* full-width photographic banner */
.photo-banner { position:relative; margin:var(--s-7) 0; padding:clamp(52px,9vw,120px) clamp(22px,6vw,68px); border-radius:var(--r-lg); background-color:#34110a; background-size:cover; background-position:center; box-shadow:var(--shadow-2); overflow:hidden; }
/* full-width dark scrim so the light text stays readable even if the photo is slow/absent */
.photo-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(40,12,7,.90) 0%, rgba(40,12,7,.74) 52%, rgba(40,12,7,.50) 100%); z-index:0; }
.photo-banner > * { position:relative; z-index:1; }
.photo-banner .pb-inner { position:relative; max-width:600px; }
.photo-banner .eyebrow { color:#f0cd6d; }
.photo-banner h2 { font-family:var(--serif) !important; color:#fff !important; font-weight:600 !important; font-size:clamp(28px,4.4vw,46px) !important; line-height:1.08 !important; margin:0 0 14px !important; text-align:left !important; }
.photo-banner h2::after { display:none !important; }
.photo-banner p { color:rgba(255,250,240,.88) !important; font-size:17px !important; line-height:1.6 !important; margin:0 0 26px !important; max-width:46ch; }
.photo-banner .btn-gold { box-shadow:0 8px 24px rgba(0,0,0,.35); }

.home-section { margin:var(--s-7) 0; }
.section-head { text-align:center; max-width:720px; margin:0 auto var(--s-6); }
.eyebrow { font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:700; color:var(--emerald-b); margin:0 0 12px; }
.section-title { font-family:var(--serif); font-weight:600; color:var(--ink-bright); font-size:clamp(26px,3.8vw,40px); margin:0 0 14px; letter-spacing:-.01em; }
.section-title .accent { color:var(--emerald-b); font-style:italic; }
.section-sub { color:var(--muted); font-size:17px; line-height:1.6; margin:0; }

.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.topic-card { display:flex; flex-direction:column; gap:11px; padding:30px 26px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-1); text-decoration:none !important; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; position:relative; overflow:hidden; }
.topic-card::after { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, var(--emerald), var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.topic-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.55); border-color:var(--border-em); }
.topic-card:hover::after { transform:scaleX(1); }
.tc-ico { width:58px; height:58px; display:grid; place-items:center; border-radius:15px; background:linear-gradient(160deg, rgba(212,168,44,.20), rgba(212,168,44,.04)); border:1px solid var(--border-em); margin-bottom:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.tc-ico svg, .coll-ico svg { width:27px; height:27px; fill:none; stroke:var(--emerald-b); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.topic-card h3 { font-family:var(--serif) !important; color:var(--ink-bright) !important; font-size:21px !important; margin:0 !important; text-align:left !important; }
.topic-card h3::after { display:none !important; }
.topic-card p { color:var(--muted) !important; font-size:14.5px !important; line-height:1.55 !important; margin:0 !important; }
.tc-go { margin-top:auto; color:var(--emerald-b); font-weight:600; font-size:14px; letter-spacing:.01em; }

.verse-band { position:relative; overflow:hidden; margin:var(--s-7) 0; padding:clamp(38px,6vw,72px) clamp(20px,5vw,60px); text-align:center; border-radius:var(--r-lg); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border); box-shadow:var(--shadow-1); }
.verse-band::before { content:""; position:absolute; inset:0; background:radial-gradient(500px 240px at 50% 0, var(--glow), transparent 60%); pointer-events:none; }
.vb-orn { position:relative; display:block; font-size:28px; color:var(--emerald-b); margin-bottom:16px; }
.vb-text { position:relative; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.7vw,31px); line-height:1.5; color:var(--ink-bright); max-width:30ch; margin:0 auto 18px; }
.vb-src { position:relative; font-family:var(--sans); letter-spacing:.08em; color:var(--emerald-b); font-size:13px; margin:0; }

.collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.coll-card { display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-1); text-decoration:none !important; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .2s; }
.coll-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--border-em); }
.coll-ico { flex:none; width:50px; height:50px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(160deg, rgba(212,168,44,.18), rgba(212,168,44,.04)); border:1px solid var(--border-em); }
.coll-card h3 { font-family:var(--serif) !important; color:var(--ink-bright) !important; font-size:18px !important; margin:0 0 2px !important; text-align:left !important; }
.coll-card h3::after { display:none !important; }
.coll-card p { color:var(--muted) !important; font-size:13.5px !important; margin:0 !important; line-height:1.45 !important; }

@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-verse { margin-left:auto; margin-right:auto; }
  .hero-cta { justify-content:center; }
  .hero-kicker { margin-left:auto; margin-right:auto; }
  .hero-art { order:-1; display:block; } .hero-photo img { max-width:300px; margin:0 auto; }
  .hero-photo { transform:none !important; }
  .hero-card { position:static; max-width:none; margin:16px auto 0; left:auto; bottom:auto; }
  .hero-chip { position:static; flex-direction:row; gap:8px; margin:14px auto 0; width:-moz-fit-content; width:fit-content; }
  .topic-grid { grid-template-columns:repeat(2,1fr); }
  .collection-grid { grid-template-columns:1fr; }
  .stats-band { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) { .topic-grid { grid-template-columns:1fr; } }