/* ==========================================================================
   BPS PROFESSIONAL WEBSITE STYLESHEET
   Department of Buddhist and Pali Studies — Bhiksu University of Sri Lanka
   Theme: Maroon / Gold / White

   Architecture
   01  Design Tokens              18  Academic Programmes
   02  Reset & Accessibility      19  Content Grids / Tables
   03  Header                     20  Staff Directory
   04  Buttons                    21  Staff Profile
   05  Navigation                 22  Search
   06  Homepage Hero              23  Research / Publications
   07  Quick Access               24  Digital Resources
   08  Section System             25  Student Support
   09  Academic Disciplines       26  Downloads
   10  HOD Feature                27  Contact / Forms
   11  Research Feature           28  CTA Band
   12  Portal Cards               29  Footer
   13  News & Events              30  Floating Utilities
   14  Inner Page Hero            31–34 Responsive Breakpoints
   15  Facts / Panels
   16  General Profiles
   17  Vision / Mission
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS & GLOBAL VARIABLES
   ========================================================================== */
:root {
    --maroon: #6d0019;
    --maroon-2: #8a102b;
    --maroon-dark: #3d000e;
    --gold: #d6a928;
    --yellow: #f4c846;
    --ivory: #fbf8f1;
    --paper: #fffdf8;
    --ink: #211b1d;
    --muted: #6f6668;
    --line: #e7ded5;
    --white: #fff;
    --shadow: 0 18px 55px rgba(55,20,27,.09);
    --radius: 20px
}

/* ==========================================================================
   02. RESET, BASE & ACCESSIBILITY
   ========================================================================== */
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth
}
body {
    font-family: Poppins,system-ui,sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.7
}
a {
    text-decoration: none;
    color: inherit
}
img {
    max-width: 100%
}
.skip-link {
    position: fixed;
    left: 1rem;
    top: -100px;
    background: #fff;
    color: #000;
    padding: .75rem 1rem;
    z-index: 9999
}
.skip-link:focus {
    top: 1rem
}
.container-xxl {
    max-width: 1440px
}

/* ==========================================================================
   03. HEADER: UTILITY & IDENTITY
   ========================================================================== */
.utility-bar {
    background: var(--maroon-dark);
    color: #ead9dd;
    font-size: .79rem
}
.utility-bar a {
    color: #ead9dd
}
.utility-bar a:hover {
    color: var(--yellow)
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: .25s
}
.identity-bar {
    background: #fff;
    border-bottom: 1px solid #eee6e0
}
.is-scrolled .identity-bar {
    box-shadow: 0 8px 25px rgba(40,8,15,.08)
}
.brand-mark {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle,#fff 43%,var(--gold) 44% 47%,var(--maroon) 48%);
    box-shadow: 0 6px 20px rgba(109,0,25,.15);
    flex: 0 0 auto
}
.dhamma-wheel {
    font-size: 2.15rem;
    color: var(--maroon);
    line-height: 1
}
.dhamma-wheel.small {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--gold);
    display: grid;
    place-items: center;
    font-size: 1.7rem
}
.faculty-kicker {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .69rem;
    color: var(--maroon);
    font-weight: 700
}
.department-name {
    display: block;
    font-size: clamp(1rem,1.7vw,1.42rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink)
}
.department-name:hover {
    color: var(--maroon)
}
.university-name {
    font-size: .82rem;
    color: var(--muted)
}

/* ==========================================================================
   04. BUTTONS & ACTIONS
   ========================================================================== */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .72rem 1.2rem
}
.btn-lg {
    padding: .9rem 1.4rem;
    font-size: .95rem
}
.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #2b2105
}
.btn-gold:hover {
    background: #e2b839;
    border-color: #e2b839
}
.btn-maroon {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff
}
.btn-maroon:hover {
    background: var(--maroon-2);
    border-color: var(--maroon-2);
    color: #fff
}
.btn-soft {
    background: #f8f3ed;
    border-color: #eee2da;
    color: var(--maroon)
}
.btn-outline-maroon {
    border: 1px solid var(--maroon);
    color: var(--maroon)
}
.btn-outline-maroon:hover {
    background: var(--maroon);
    color: #fff
}

/* ==========================================================================
   05. PRIMARY NAVIGATION & DROPDOWNS
   ========================================================================== */
.main-nav {
    background: var(--maroon);
    padding: 0
}
.main-nav .navbar-toggler {
    margin: .55rem 0;
    filter: invert(1)
}
.main-nav .nav-link {
    color: #f9eef1!important;
    font-size: .86rem;
    font-weight: 500;
    padding: 1rem .85rem!important;
    position: relative
}
.main-nav .nav-link:hover,.main-nav .nav-link.active {
    color: #fff!important;
    background: rgba(255,255,255,.08)
}
.main-nav .nav-link.active:after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .42rem;
    height: 2px;
    background: var(--yellow)
}
.dropdown-menu {
    border: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 40px rgba(52,0,12,.16);
    padding: .6rem;
    min-width: 250px
}
.dropdown-item {
    border-radius: 8px;
    padding: .66rem .8rem;
    font-size: .84rem
}
.dropdown-item:hover {
    background: #fff4d5;
    color: var(--maroon)
}
.nav-search-link {
    color: #fff;
    padding: 1rem
}

/* ==========================================================================
   06. HOMEPAGE HERO
   ========================================================================== */
.hero-home {
    background: radial-gradient(circle at 90% 10%,rgba(244,200,70,.16),transparent 30%),linear-gradient(125deg,var(--maroon-dark),var(--maroon) 60%,#851b30);
    color: #fff;
    position: relative;
    overflow: hidden
}
.min-vh-hero {
    min-height: 630px
}
.hero-home h1 {
    font-size: clamp(2.7rem,5.6vw,5.6rem);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
    max-width: 980px
}
.hero-home h1 span {
    color: var(--yellow)
}
.hero-lead {
    font-size: 1.08rem;
    max-width: 730px;
    color: #f0dfe3;
    margin-top: 1.7rem
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--maroon);
    font-size: .72rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: .9rem
}
.eyebrow.light {
    color: var(--yellow)
}
.hero-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap
}
.hero-meta div {
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    border-right: 1px solid rgba(255,255,255,.2)
}
.hero-meta strong {
    font-size: 1.25rem;
    color: var(--yellow)
}
.hero-meta span {
    font-size: .73rem;
    color: #e7d7dc
}
.hero-symbol-card {
    width: 430px;
    height: 430px;
    border-radius: 50%;
    margin: auto;
    border: 1px solid rgba(255,255,255,.16);
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle,rgba(244,200,70,.14),rgba(255,255,255,.02) 55%,transparent 56%)
}
.hero-wheel {
    font-size: 9rem;
    color: var(--gold);
    text-shadow: 0 12px 45px rgba(0,0,0,.18)
}
.pali-ring {
    position: absolute;
    inset: 31px;
    border: 1px dashed rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 13px;
    font-size: .64rem;
    letter-spacing: .18em;
    color: #ead5db
}
.symbol-caption {
    position: absolute;
    bottom: 55px;
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    padding: .7rem 1.1rem;
    box-shadow: var(--shadow)
}
.symbol-caption span,.symbol-caption strong {
    display: block
}
.symbol-caption span {
    font-size: .66rem;
    color: var(--muted)
}
.symbol-caption strong {
    font-size: .86rem
}
.hero-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%
}
.orbit-one {
    width: 700px;
    height: 700px;
    right: -240px;
    top: -300px
}
.orbit-two {
    width: 500px;
    height: 500px;
    right: -180px;
    bottom: -320px
}

/* ==========================================================================
   07. QUICK ACCESS STRIP
   ========================================================================== */
.quick-strip {
    background: #fff;
    box-shadow: 0 8px 30px rgba(47,14,20,.08);
    position: relative;
    z-index: 2
}
.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.35rem;
    border-right: 1px solid var(--line);
    min-height: 105px;
    transition: .2s
}
.quick-link:hover {
    background: #fff8e4;
    color: var(--maroon)
}
.quick-link>i:first-child {
    font-size: 1.45rem;
    color: var(--maroon)
}
.quick-link>i:last-child {
    margin-left: auto;
    font-size: .8rem
}
.quick-link strong,.quick-link span {
    display: block
}
.quick-link strong {
    font-size: .88rem
}
.quick-link span {
    font-size: .7rem;
    color: var(--muted)
}

/* ==========================================================================
   08. GLOBAL SECTION SYSTEM & TYPOGRAPHY
   ========================================================================== */
.section-pad {
    padding: clamp(4.5rem,7vw,7rem) 0
}
.bg-ivory {
    background: var(--ivory)
}
.section-title {
    font-size: clamp(2rem,4vw,3.7rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.08
}
/* Reusable visual section separators */
.section-divider {
    width: 72px;
    height: 3px;
    margin: 1.1rem 0 1.6rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--maroon),var(--gold));
    opacity: 1;
}

.section-divider.center {
    margin-left: auto;
    margin-right: auto;
}

.section-heading-wrap {
    max-width: 820px;
    margin-bottom: 2.2rem;
}

.section-heading-wrap.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-shell {
    position: relative;
}

.section-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1320px,calc(100% - 3rem));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,transparent,var(--line),transparent);
}

.text-link {
    font-weight: 700;
    color: var(--maroon);
    font-size: .88rem
}
.text-link:hover {
    color: var(--maroon-2)
}

/* ==========================================================================
   09. ACADEMIC DISCIPLINES
   ========================================================================== */
.discipline-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.65rem;
    transition: .25s;
    box-shadow: 0 8px 24px rgba(61,26,31,.04)
}
.discipline-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: #ddc278
}
.discipline-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: #fff3ce;
    color: var(--maroon);
    display: grid;
    place-items: center;
    font-size: 1.35rem
}
.programme-badge {
    display: inline-block;
    background: #f5ece8;
    color: var(--maroon);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    padding: .38rem .62rem;
    margin: 1.2rem 0 .7rem
}
.discipline-card h3 {
    font-size: 1.22rem;
    font-weight: 700
}
.discipline-card p {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.65
}
.card-arrow {
    display: block;
    margin-top: 1rem;
    font-weight: 700;
    font-size: .78rem;
    color: var(--maroon)
}

/* ==========================================================================
   10. HEAD OF DEPARTMENT / FEATURE PROFILE
   ========================================================================== */
.head-photo-wrap {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #eee;
    max-width: 480px;
    margin: auto;
    box-shadow: var(--shadow)
}
.head-photo-wrap img {
    width: 100%;
    height: 610px;
    object-fit: cover;
    object-position: center 20%
}
.photo-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    padding: 1rem 1.2rem;
    border-radius: 16px
}
.photo-caption small,.photo-caption strong {
    display: block
}
.photo-caption small {
    color: var(--maroon);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .1em
}
.photo-caption strong {
    font-size: .88rem
}
.lead-copy {
    font-size: 1.08rem;
    color: #4f4648
}
.head-quote {
    font-size: 1.25rem;
    font-weight: 600;
    border-left: 4px solid var(--gold);
    padding: 1rem 0 1rem 1.4rem;
    margin: 2rem 0;
    color: var(--maroon)
}

/* ==========================================================================
   11. RESEARCH FEATURE & MANUSCRIPT VISUALS
   ========================================================================== */
.research-feature {
    background: linear-gradient(130deg,var(--maroon-dark),var(--maroon));
    color: #fff
}
.research-feature h2 {
    font-size: clamp(2.1rem,4vw,3.8rem);
    font-weight: 750;
    letter-spacing: -.04em
}
.research-feature p {
    color: #ead9de
}
.resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.4rem
}
.resource-tags span {
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    padding: .5rem .72rem;
    font-size: .7rem
}
.manuscript-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    transform: rotate(2deg)
}
.manuscript-panel {
    min-height: 165px;
    background: #d4b981;
    color: #473512;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: Georgia,serif;
    font-size: 2.3rem;
    box-shadow: inset 0 0 45px rgba(75,47,10,.22),0 15px 35px rgba(0,0,0,.15);
    background-image: repeating-linear-gradient(0deg,rgba(78,50,15,.15) 0 1px,transparent 1px 18px)
}
.panel-b {
    transform: translateY(22px)
}
.panel-c {
    transform: translateY(-10px)
}

/* ==========================================================================
   12. PORTAL / SERVICE CARDS
   ========================================================================== */
.portal-card {
    height: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.25rem;
    border-radius: 16px;
    transition: .2s
}
.portal-card:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 35px rgba(63,20,29,.08);
    transform: translateY(-3px)
}
.portal-card>i:first-child {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #fff3ce;
    color: var(--maroon);
    display: grid;
    place-items: center;
    font-size: 1.1rem
}
.portal-card>i:last-child {
    margin-left: auto;
    color: var(--maroon)
}
.portal-card h3 {
    font-size: .92rem;
    margin: 0 0 .25rem;
    font-weight: 700
}
.portal-card p {
    font-size: .71rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5
}
.portal-card-large {
    padding: 1.6rem;
    min-height: 180px
}

/* ==========================================================================
   13. NEWS & EVENTS
   ========================================================================== */
.news-card {
    height: 100%;
    border-top: 3px solid var(--gold);
    padding: 1.4rem 0
}
.news-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 1rem
}
.news-meta span {
    color: var(--maroon);
    font-weight: 700
}
.news-card h3,.news-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4
}
.news-card p {
    font-size: .82rem;
    color: var(--muted)
}
.news-card-full {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 18px;
    padding: 1.3rem;
    overflow: hidden
}
.news-visual {
    height: 170px;
    margin: -1.3rem -1.3rem 1.3rem;
    background: linear-gradient(135deg,#4b0011,var(--maroon));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem
}
.news-visual i {
    font-size: 3rem;
    color: var(--gold);
    opacity: .8
}
.news-visual span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em
}

/* ==========================================================================
   14. INNER PAGE HERO & BREADCRUMBS
   ========================================================================== */
.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,var(--maroon-dark),var(--maroon));
    color: #fff
}
.page-hero-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 10%,rgba(244,200,70,.18),transparent 28%),repeating-linear-gradient(135deg,transparent 0 28px,rgba(255,255,255,.025) 28px 29px)
}
.page-hero h1 {
    font-size: clamp(2.3rem,5vw,4.8rem);
    font-weight: 780;
    letter-spacing: -.05em;
    line-height: 1.05;
    max-width: 1050px
}
.page-hero p {
    max-width: 800px;
    color: #ead9de;
    margin: 1rem 0 0
}
.breadcrumb {
    font-size: .72rem
}
.breadcrumb a {
    color: #efcbd3
}
.breadcrumb-item.active {
    color: #fff
}
.breadcrumb-item+.breadcrumb-item::before {
    color: #c29ba5
}

/* ==========================================================================
   15. FACTS, PRIORITIES & CONTENT PANELS
   ========================================================================== */
.fact-panel {
    background: var(--maroon);
    color: #fff;
    border-radius: 24px;
    padding: 2rem
}
.fact-panel .eyebrow {
    color: var(--yellow)
}
.fact-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 1.2rem 0
}
.fact-row strong {
    width: 105px;
    color: var(--yellow);
    font-size: 1.15rem
}
.fact-row span {
    font-size: .82rem
}
.priority-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.6rem
}
.priority-card i {
    font-size: 1.5rem;
    color: var(--maroon)
}
.priority-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 1rem
}
.priority-card p {
    font-size: .8rem;
    color: var(--muted)
}

/* ==========================================================================
   16. GENERAL PROFILE / PROSE CONTENT
   ========================================================================== */
.profile-sticky {
    position: sticky;
    top: 190px
}
.profile-main-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center top;
    border-radius: 22px;
    box-shadow: var(--shadow)
}
.profile-main-copy {
    padding: 1.2rem .2rem
}
.profile-main-copy span {
    font-size: .66rem;
    color: var(--maroon);
    font-weight: 700;
    text-transform: uppercase
}
.profile-main-copy h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: .35rem 0
}
.profile-main-copy p {
    font-size: .8rem;
    color: var(--muted)
}
.prose {
    font-family: Poppins,sans-serif
}
.prose p {
    margin-bottom: 1.4rem;
    color: #4e4648
}
.prose .lead {
    font-size: 1.14rem;
    color: var(--ink)
}
.signature-block {
    margin-top: 3rem;
    padding: 1.5rem;
    border-left: 3px solid var(--gold);
    background: var(--ivory)
}
.signature-block span,.signature-block strong,.signature-block small {
    display: block
}
.signature-block strong {
    color: var(--maroon);
    margin: .5rem 0
}

/* ==========================================================================
   17. VISION, MISSION & VALUES
   ========================================================================== */
.vm-card {
    height: 100%;
    min-height: 440px;
    border-radius: 26px;
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden
}
.vm-card i {
    position: absolute;
    right: 2rem;
    top: 2rem;
    font-size: 4rem;
    opacity: .15
}
.vm-card span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700
}
.vm-card h2 {
    font-size: clamp(1.6rem,3vw,2.5rem);
    font-weight: 700;
    line-height: 1.25
}
.vm-card p {
    font-size: .84rem
}
.vm-card.vision {
    background: #fff5d9;
    color: #4b3300
}
.vm-card.mission {
    background: var(--maroon);
    color: #fff
}
.value-pill {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    font-size: .76rem;
    font-weight: 600;
    background: #fff;
    height: 100%
}

/* ==========================================================================
   18. ACADEMIC PROGRAMMES
   ========================================================================== */
.programme-card-large {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 10px 35px rgba(60,25,31,.04)
}
.programme-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}
.programme-code {
    display: block;
    color: var(--maroon);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .15em;
    margin-top: 1.3rem
}
.programme-card-large h2 {
    font-size: 1.65rem;
    font-weight: 750
}
.programme-card-large p {
    color: var(--muted);
    font-size: .83rem
}
.programme-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.2rem 0
}
.programme-facts span {
    font-size: .72rem;
    color: #4a4244
}
.programme-facts i {
    color: var(--maroon);
    margin-right: .4rem
}
.focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}
.focus-list span {
    font-size: .64rem;
    border: 1px solid var(--line);
    padding: .38rem .55rem;
    border-radius: 999px
}
.academic-note {
    display: flex;
    gap: 1rem;
    background: #fff9e7;
    border: 1px solid #efd996;
    border-radius: 15px;
    padding: 1.2rem
}
.academic-note>i {
    font-size: 1.25rem;
    color: #8a6000
}
.academic-note strong {
    display: block
}
.academic-note p {
    font-size: .78rem;
    color: var(--muted);
    margin: .2rem 0 0
}
.programme-sidebar {
    background: var(--maroon);
    color: #fff;
    border-radius: 20px;
    padding: 1.8rem;
    position: sticky;
    top: 190px
}
.programme-sidebar>span {
    color: var(--yellow);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em
}
.programme-sidebar h3 {
    font-size: 1.3rem;
    margin: .4rem 0 1.4rem
}
.programme-sidebar>div {
    border-top: 1px solid rgba(255,255,255,.16);
    padding: 1rem 0
}
.programme-sidebar small,.programme-sidebar strong {
    display: block
}
.programme-sidebar small {
    color: #d7bfc5;
    font-size: .62rem
}
.programme-sidebar strong {
    font-size: .8rem;
    margin-top: .2rem
}
.programme-sidebar .btn {
    background: #fff;
    color: var(--maroon);
    border-color: #fff;
    margin-top: 1rem
}

/* ==========================================================================
   19. CONTENT GRIDS & ACADEMIC TABLES
   ========================================================================== */
.content-heading {
    font-size: 1.35rem;
    font-weight: 700
}
.focus-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
    margin-top: 1rem
}
.focus-grid div {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .9rem;
    font-size: .78rem
}
.focus-grid i {
    color: var(--maroon);
    margin-right: .55rem
}
.academic-table-wrap {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff
}
.academic-table {
    margin: 0
}
.academic-table th {
    background: var(--maroon);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 1rem;
    white-space: nowrap
}
.academic-table td {
    font-size: .73rem;
    padding: .9rem 1rem;
    vertical-align: middle
}
.academic-table tbody tr:hover td {
    background: #fff9e7
}
.staff-filter,.level-buttons {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap
}
.staff-filter button,.level-buttons button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: .55rem .8rem;
    font-size: .68rem;
    font-weight: 600
}
.staff-filter button.active,.level-buttons button.active {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #fff
}
.staff-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: .2s
}
.staff-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px)
}
.staff-image {
    height: 300px;
    background: #efe9e4;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden
}
.staff-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top
}
.staff-image>span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(255,255,255,.92);
    color: var(--maroon);
    font-size: .62rem;
    font-weight: 700;
    padding: .4rem .6rem;
    border-radius: 999px
}
.staff-initials {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--maroon);
    color: var(--yellow);
    font-weight: 800;
    font-size: 2rem
}
.staff-body {
    padding: 1.35rem
}
.staff-body small {
    color: var(--maroon);
    text-transform: uppercase;
    font-weight: 700;
    font-size: .6rem
}
.staff-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
    margin: .35rem 0
}
.staff-body p {
    color: var(--muted);
    font-size: .72rem
}
.staff-socials {
    display: flex;
    gap: .5rem;
    margin: 1rem 0
}
.staff-socials a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .75rem;
    color: var(--maroon);
    font-weight: 700
}
.staff-socials a:hover {
    background: var(--maroon);
    color: #fff
}
.staff-view {
    font-size: .72rem;
    font-weight: 700;
    color: var(--maroon)
}

/* ==========================================================================
   21. STAFF PROFILE DETAILS
   ========================================================================== */
.profile-avatar-large {
    height: 420px;
    border-radius: 22px;
    background: var(--maroon);
    color: var(--yellow);
    display: grid;
    place-items: center;
    font-size: 4rem;
    font-weight: 800
}
.profile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}
.profile-detail-grid>div {
    border: 1px solid var(--line);
    padding: 1rem;
    border-radius: 12px
}
.profile-detail-grid small,.profile-detail-grid strong {
    display: block
}
.profile-detail-grid small {
    font-size: .62rem;
    color: var(--muted)
}
.profile-detail-grid strong {
    font-size: .8rem
}
.profile-section {
    margin-top: 2rem
}
.profile-section h3 {
    font-size: 1.2rem;
    font-weight: 700
}
.profile-section p {
    color: var(--muted);
    font-size: .84rem
}
.official-profile-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    margin-top: 1.15rem;
    padding: .78rem 1rem;
    border-radius: 12px;
    background: var(--maroon);
    color: #fff!important;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 8px 22px rgba(92,0,21,.18);
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease
}
.official-profile-btn>i:first-child {
    font-size: 1.05rem;
    color: var(--yellow)
}
.official-profile-btn .official-profile-external {
    margin-left: auto;
    font-size: .75rem;
    opacity: .8
}
.official-profile-btn:hover {
    background: var(--maroon-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(92,0,21,.24);
    color: #fff!important
}
.official-profile-btn:focus-visible {
    outline: 3px solid rgba(214,169,40,.4);
    outline-offset: 3px
}
.profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}
.profile-links a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem .8rem;
    font-size: .7rem;
    color: var(--maroon)
}
.search-field,.resource-search-wrap {
    position: relative
}
.search-field i,.resource-search-wrap>i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--maroon)
}
.search-field input,.resource-search-wrap input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .8rem 1rem .8rem 2.7rem;
    outline: 0;
    background: #fff
}
.search-field input:focus,.resource-search-wrap input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(214,169,40,.12)
}
.resource-search-wrap input {
    padding: 1rem 7rem 1rem 3rem
}
.resource-search-wrap span {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .68rem;
    color: var(--muted)
}

/* ==========================================================================
   23. RESEARCH THEMES & PUBLICATIONS
   ========================================================================== */
.research-theme {
    height: 100%;
    border-left: 3px solid var(--gold);
    padding: 1.2rem 1.4rem;
    background: var(--ivory)
}
.research-theme span {
    font-size: .6rem;
    color: var(--maroon);
    font-weight: 700;
    text-transform: uppercase
}
.research-theme h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: .5rem 0
}
.research-theme p {
    font-size: .78rem;
    color: var(--muted);
    margin: 0
}
.research-callout {
    display: flex;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem;
    margin-top: 2rem
}
.research-callout>i {
    font-size: 1.4rem;
    color: var(--maroon)
}
.research-callout strong {
    font-size: .85rem
}
.research-callout p {
    font-size: .76rem;
    color: var(--muted);
    margin: .35rem 0
}
.research-callout a {
    font-size: .7rem;
    color: var(--maroon);
    font-weight: 700
}
.publication-panel {
    background: var(--maroon);
    color: #fff;
    border-radius: 22px;
    padding: 2rem
}
.publication-panel h3 {
    font-size: 1.8rem;
    font-weight: 700
}
.publication-panel p {
    color: #dfcbd0;
    font-size: .82rem
}

/* ==========================================================================
   24. EXTERNAL / DIGITAL RESOURCES
   ========================================================================== */
.resource-group {
    margin-bottom: 4rem
}
.resource-group h2 {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0
}
.resource-group-count {
    font-size: .68rem;
    color: var(--muted)
}
.resource-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 1.1rem;
    transition: .2s
}
.resource-card:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(62,22,30,.06);
    transform: translateY(-2px)
}
.resource-letter {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: var(--maroon);
    color: var(--yellow);
    display: grid;
    place-items: center;
    font-weight: 800
}
.resource-card h3 {
    font-size: .87rem;
    font-weight: 700;
    margin: 0
}
.resource-card p {
    font-size: .68rem;
    color: var(--muted);
    margin: .15rem 0 0
}
.resource-card>i {
    margin-left: auto;
    color: var(--maroon)
}

/* ==========================================================================
   25. STUDENT SUPPORT & HELP
   ========================================================================== */
.support-steps>div {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line)
}
.support-steps span {
    grid-row: 1/3;
    color: var(--gold);
    font-size: 1.4rem;
    font-weight: 800
}
.support-steps h3 {
    font-size: 1rem;
    margin: 0
}
.support-steps p {
    font-size: .78rem;
    color: var(--muted);
    margin: .25rem 0
}
.help-card {
    background: #fff8df;
    border: 1px solid #efd793;
    border-radius: 20px;
    padding: 1.6rem
}
.help-card>i {
    font-size: 2rem;
    color: var(--maroon)
}
.help-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: .8rem
}
.help-card p {
    font-size: .78rem;
    color: var(--muted)
}

/* ==========================================================================
   26. DOWNLOADS & DOCUMENT LISTS
   ========================================================================== */
.download-list {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff
}
.download-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--line)
}
.download-row:last-child {
    border-bottom: 0
}
.download-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #fff2d0;
    color: var(--maroon);
    display: grid;
    place-items: center;
    font-size: 1.15rem
}
.download-row span:not(.status-pill) {
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--maroon);
    font-weight: 700
}
.download-row h3 {
    font-size: .9rem;
    font-weight: 700;
    margin: .1rem 0
}
.download-row p {
    font-size: .68rem;
    color: var(--muted);
    margin: 0
}
.status-pill {
    font-size: .62rem;
    background: #f3efec;
    color: var(--muted);
    padding: .45rem .65rem;
    border-radius: 999px;
    white-space: nowrap
}

/* ==========================================================================
   27. CONTACT & FORMS
   ========================================================================== */
.contact-stack {
    display: grid;
    gap: .8rem;
    margin: 2rem 0
}
.contact-stack>div {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding: 1rem 0
}
.contact-stack>div>i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff2d0;
    color: var(--maroon);
    display: grid;
    place-items: center
}
.contact-stack small,.contact-stack strong {
    display: block
}
.contact-stack small {
    font-size: .6rem;
    color: var(--muted);
    text-transform: uppercase
}
.contact-stack strong {
    font-size: .78rem;
    font-weight: 600
}
.map-link {
    font-size: .78rem;
    color: var(--maroon);
    font-weight: 700
}
.contact-form-card {
    background: var(--ivory);
    border: 1px solid var(--line);
    padding: 2rem;
    border-radius: 22px
}
.contact-form-card h2 {
    font-size: 1.8rem;
    font-weight: 700
}
.contact-form-card label {
    font-size: .68rem;
    font-weight: 600;
    margin-bottom: .35rem
}
.form-control {
    border: 1px solid #ded5ce;
    border-radius: 11px;
    padding: .8rem .9rem;
    font-size: .8rem
}
.form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(214,169,40,.12)
}

/* ==========================================================================
   28. CALL-TO-ACTION BAND
   ========================================================================== */
.cta-band {
    background: var(--gold);
    color: #2d2307
}
.cta-band h2 {
    font-size: clamp(1.6rem,3vw,2.6rem);
    font-weight: 750;
    letter-spacing: -.035em
}
.cta-band .eyebrow {
    color: var(--maroon)
}
.cta-band p {
    font-size: .8rem
}

/* ==========================================================================
   29. FOOTER
   ========================================================================== */
.site-footer {
    background: #210008;
    color: #dec8ce
}
.site-footer h3 {
    font-size: 1rem;
    color: #fff;
    font-weight: 700
}
.site-footer h4 {
    font-size: .72rem;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem
}
.site-footer p {
    font-size: .72rem
}
.site-footer a {
    display: block;
    color: #d7c0c6;
    font-size: .72rem;
    margin: .5rem 0
}
.site-footer a:hover {
    color: #fff
}
.footer-copy {
    max-width: 390px
}
.footer-contact {
    display: grid;
    gap: .55rem;
    margin-top: 1rem
}
.footer-contact div {
    font-size: .7rem;
    display: flex;
    gap: .6rem
}
.footer-contact i {
    color: var(--gold)
}
.footer-network a {
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: .5rem 0;
    display: flex;
    justify-content: space-between
}
.footer-rule {
    border-color: rgba(255,255,255,.15);
    margin-top: 3rem
}
.footer-bottom {
    color: #a98f96
}

/* ==========================================================================
   30. FLOATING UTILITIES
   ========================================================================== */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--maroon);
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s;
    z-index: 1000
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none
}

/* ==========================================================================
   31. RESPONSIVE: LARGE / DESKTOP
   ========================================================================== */
@media(max-width:1199.98px) {
    .site-header {
        position: sticky
    }
    .main-nav {
        padding: .25rem 0
    }
    .main-nav .nav-link {
        padding: .75rem .2rem!important
    }
    .main-nav .nav-link.active:after {
        display: none
    }
    .nav-search-link {
        display: none
    }
    .dropdown-menu {
        box-shadow: none;
        border-radius: 10px;
        margin-bottom: .5rem
    }
    .profile-sticky,.programme-sidebar {
        position: static
    }
    .identity-bar .container-xxl {
        padding-top: .7rem!important;
        padding-bottom: .7rem!important
    }
    .brand-mark {
        width: 55px;
        height: 55px
    }
    .brand-mark .dhamma-wheel {
        font-size: 1.75rem
    }
}

/* ==========================================================================
   32. RESPONSIVE: TABLET
   ========================================================================== */
@media(max-width:991.98px) {
    .min-vh-hero {
        min-height: auto;
        padding: 4rem 0
    }
    .quick-link {
        border-bottom: 1px solid var(--line)
    }
    .hero-meta div {
        border-right: 0;
        padding-right: 0
    }
    .head-photo-wrap img {
        height: 520px
    }
    .focus-grid,.profile-detail-grid {
        grid-template-columns: 1fr
    }
    .page-hero .container-xxl {
        padding-top: 3.5rem!important;
        padding-bottom: 3.5rem!important
    }
}

/* ==========================================================================
   33. RESPONSIVE: MOBILE
   ========================================================================== */
@media(max-width:767.98px) {
    .brand-copy .faculty-kicker {
        font-size: .54rem
    }
    .department-name {
        font-size: .9rem
    }
    .university-name {
        font-size: .66rem
    }
    .brand-mark {
        width: 48px;
        height: 48px
    }
    .brand-mark .dhamma-wheel {
        font-size: 1.5rem
    }
    .hero-home h1 {
        font-size: 2.8rem
    }
    .hero-lead {
        font-size: .92rem
    }
    .hero-meta {
        gap: 1rem
    }
    .hero-meta div {
        width: calc(50% - .5rem)
    }
    .quick-link {
        padding: 1rem;
        min-height: 120px;
        align-items: flex-start
    }
    .quick-link>i:last-child {
        display: none
    }
    .quick-link span {
        display: none
    }
    .section-pad {
        padding: 4rem 0
    }
    .head-photo-wrap img {
        height: 440px
    }
    .manuscript-panel {
        min-height: 120px;
        font-size: 1.7rem
    }
    .download-row {
        align-items: flex-start;
        flex-wrap: wrap
    }
    .status-pill {
        margin-left: 62px
    }
    .profile-main-img {
        height: 440px
    }
    .resource-search-wrap span {
        display: none
    }
    .resource-search-wrap input {
        padding-right: 1rem
    }
    .vm-card {
        min-height: 360px;
        padding: 1.6rem
    }
}

/* ==========================================================================
   34. RESPONSIVE: SMALL MOBILE
   ========================================================================== */
@media(max-width:480px) {
    .department-name {
        max-width: 250px
    }
    .hero-home h1 {
        font-size: 2.4rem
    }
    .quick-link strong {
        font-size: .76rem
    }
    .page-hero h1 {
        font-size: 2.25rem
    }
    .section-title {
        font-size: 2rem
    }
    .staff-image {
        height: 260px
    }
}


/* ================================================================
   35. PROFESSIONAL SECTION ARCHITECTURE
   Visual separation + reusable page modules
   ================================================================ */
.section-block{position:relative;padding:clamp(4.75rem,7vw,7.25rem) 0;overflow:hidden}
.section-block--compact{padding:clamp(2.75rem,4.5vw,4.25rem) 0}
.section-block--white{background:var(--white)}
.section-block--ivory{background:var(--ivory)}
.section-block--paper{background:var(--paper)}
.section-block--dark{background:linear-gradient(130deg,var(--maroon-dark),var(--maroon))}
.section-block+.section-block{border-top:1px solid rgba(109,0,25,.06)}
.section-edge-shadow{box-shadow:0 18px 45px rgba(47,14,20,.08)}
.section-heading-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;margin-bottom:1.5rem}
.section-heading-copy{max-width:900px}
.section-heading-action{flex:0 0 auto;margin-bottom:.45rem}
.section-intro{max-width:760px;margin:.9rem 0 0;color:var(--muted);font-size:.94rem;line-height:1.8}
.section-index{display:block;margin-bottom:.55rem;color:var(--maroon);font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.section-block--dark .section-index,.section-label-row--light .section-index{color:var(--yellow)}
.section-divider{width:100%;height:1px;margin:0 0 2.25rem;background:linear-gradient(90deg,var(--gold) 0 86px,var(--line) 86px 100%)}
.section-divider--small{margin-bottom:1.4rem}
.section-label-row{display:flex;align-items:center;gap:1rem;margin-bottom:2.25rem}
.section-label-row .section-index{margin:0;white-space:nowrap}
.section-line{height:1px;flex:1;background:linear-gradient(90deg,var(--gold),var(--line))}
.section-label-row--light .section-line{background:linear-gradient(90deg,var(--gold),rgba(255,255,255,.18))}
.section-title-sm{font-size:clamp(1.8rem,3vw,2.65rem)}
.subsection-heading{margin:2.5rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.subsection-heading span,.subsection-kicker{display:block;color:var(--maroon);font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.subsection-heading h3{margin:.35rem 0 0;font-size:1.25rem;font-weight:750}
.section-action-panel{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 2.2rem;border:1px solid var(--line);border-radius:22px;background:var(--white);box-shadow:0 14px 40px rgba(61,26,31,.05)}
.section-action-panel h2{margin:.1rem 0 .45rem;font-size:clamp(1.35rem,2.5vw,2rem);font-weight:750;letter-spacing:-.03em}
.section-action-panel p{margin:0;max-width:720px;color:var(--muted);font-size:.82rem}
.section-action-buttons{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.info-link-card{height:100%;min-height:142px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:1rem;padding:1.25rem;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.2s}
.info-link-card>i:first-child{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff2d0;color:var(--maroon);font-size:1.05rem}
.info-link-card>i:last-child{grid-row:1/3;grid-column:3;color:var(--maroon)}
.info-link-card span{align-self:end;color:var(--muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}
.info-link-card strong{align-self:start;font-size:.8rem}
.info-link-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 30px rgba(61,26,31,.07);color:var(--maroon)}
.profile-section-card{padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:16px;background:var(--ivory)}
.profile-section-card h3{margin-top:.4rem}
.resource-search-feature{margin:0}
.resource-group-panel{padding:0 0 3.25rem;margin:0 0 3.25rem;border-bottom:1px solid var(--line)}
.resource-group-panel:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.message-prose{max-width:900px}
.section-home-hero{border-bottom:0}

/* 36. SECTION RESPONSIVE RULES */
@media(max-width:991.98px){.section-heading-wrap{align-items:flex-start;flex-direction:column;gap:1rem}.section-heading-action{margin:0}.section-action-panel{align-items:flex-start;flex-direction:column}.section-action-buttons{justify-content:flex-start}.section-label-row{margin-bottom:1.75rem}}
@media(max-width:767.98px){.section-block{padding:4rem 0}.section-block--compact{padding:2.75rem 0}.section-divider{margin-bottom:1.75rem}.section-action-panel{padding:1.5rem}.section-action-buttons{width:100%}.section-action-buttons .btn{flex:1}.section-index{font-size:.58rem}.section-intro{font-size:.84rem}}

/* 37. PROFILE BUTTON INHERITANCE FIX */
.profile-main-copy .official-profile-btn span{font-size:.76rem;color:#fff;font-weight:700;text-transform:none;letter-spacing:.01em}