:root {
  --primary: #7437d1;
  --primary-2: #a96cff;
  --primary-3: #52209f;
  --bg: #f7f4fc;
  --surface: #fff;
  --surface-2: #f0eafd;
  --text: #1d1529;
  --muted: #746a80;
  --line: rgba(92, 49, 148, .14);
  --header: #211333;
  --header-text: #fff;
  --shadow: 0 18px 50px rgba(61, 29, 105, .11);
  --radius: 24px;
  --footer: #10091b
}

[data-theme="dark"] {
  --bg: #0c0713;
  --surface: #151020;
  --surface-2: #21152f;
  --text: #f8f3ff;
  --muted: #b9aec5;
  --line: rgba(180, 125, 255, .16);
  --header: #160c25;
  --header-text: #fff;
  --shadow: 0 18px 55px rgba(0, 0, 0, .3);
  --footer: #09050e
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg)
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  border: 3px solid var(--bg);
  border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c18cff, var(--primary))
}

::-webkit-scrollbar-corner {
  background: var(--bg)
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Alexandria", sans-serif;
  transition: background .25s, color .25s;
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

.text-primary {
  color: var(--primary) !important
}

.text-muted {
  color: var(--muted) !important
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: linear-gradient(110deg, var(--header), #34204d 58%, #1c102b);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 28px rgba(25, 10, 43, .18)
}

.navbar {
  min-height: 76px
}

.nav-link {
  color: rgba(255, 255, 255, .76) !important;
  font-weight: 600;
  padding: .65rem .85rem !important
}

.nav-link:hover,
.nav-link.active {
  color: #fff !important
}

.nav-link.active {
  position: relative
}

.nav-link.active:after {
  content: "";
  position: absolute;
  right: .85rem;
  left: .85rem;
  bottom: .25rem;
  height: 2px;
  background: var(--primary-2);
  border-radius: 3px
}

.header-social {
  display: flex;
  align-items: center;
  gap: 5px;
  direction: ltr
}

.header-social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #d8bfff;
  border-radius: 10px;
  transition: .2s
}

.header-social a:hover {
  background: rgba(169, 108, 255, .14);
  color: #fff
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: grid;
  place-items: center
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, .25)
}

.navbar-toggler-icon {
  filter: invert(1)
}

.hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #f7f2ff 0%, #fff 42%, #efe5ff 100%);
  min-height: 650px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line)
}

[data-theme="dark"] .hero-shell {
  background: linear-gradient(135deg, #0e0718 0%, #160c25 45%, #23113c 100%)
}

.hero-shell:before {
  content: "NOOR MOHAMED";
  position: absolute;
  inset: auto auto 4% 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: clamp(5rem, 15vw, 13rem);
  white-space: nowrap;
  color: rgba(111, 53, 181, .045);
  z-index: -1;
  letter-spacing: -.06em
}

.hero-shell:after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -180px;
  top: -220px;
  background: radial-gradient(circle, rgba(148, 82, 232, .24), transparent 67%);
  z-index: -1
}

.hero-photo {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 7px solid rgba(255, 255, 255, .82);
  box-shadow: 0 20px 60px rgba(75, 33, 130, .25)
}

[data-theme="dark"] .hero-photo {
  border-color: rgba(255, 255, 255, .08)
}

.hero-name {
  font-size: clamp(2.2rem, 7vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -.05em;
  margin: 18px 0 8px
}

.hero-role {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 15px
}

.hero-line {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--muted);
  line-height: 2;
  max-width: 760px;
  margin-inline: auto
}

.btn {
  border-radius: 13px;
  font-weight: 700;
  padding: .8rem 1.1rem
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-3);
  --bs-btn-hover-border-color: var(--primary-3)
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary)
}

.section-space {
  padding: 88px 0;
  position: relative
}

.section-soft {
  background: linear-gradient(135deg, rgba(118, 55, 209, .055), rgba(169, 108, 255, .025))
}

.section-kicker {
  font-weight: 800;
  color: var(--primary);
  font-size: .82rem;
  letter-spacing: .08em
}

.section-title {
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.5;
  margin: 8px 0 14px
}

.section-copy {
  color: var(--muted);
  line-height: 2;
  max-width: 700px
}

.preview-visual {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center
}

.preview-photo {
  width: min(330px, 82vw);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: var(--shadow)
}

.preview-visual:before {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  border: 2px solid rgba(116, 55, 209, .18);
  border-radius: 34px;
  transform: translate(28px, 28px);
  z-index: -1
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px
}

.feature-pill {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  color: var(--muted)
}

.site-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  height: 100%
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 1.15rem;
  margin-bottom: 16px
}

.status-box {
  text-align: center;
  padding: 45px 20px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  color: var(--muted)
}

.loader {
  width: 30px;
  height: 30px;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 12px
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.site-footer {
  background: radial-gradient(circle at 50% 0, rgba(118, 55, 209, .18), transparent 38%), var(--footer);
  color: #fff;
  padding: 55px 0 24px;
  text-align: center;
  border-top: 1px solid rgba(169, 108, 255, .16)
}

.footer-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff
}

.footer-role {
  color: var(--primary-2);
  margin: 8px 0
}

.footer-copy {
  color: #aaa0b4;
  max-width: 700px;
  margin: 0 auto 22px;
  line-height: 1.8
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px
}

.footer-social a {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(169, 108, 255, .10);
  color: var(--primary-2);
  font-size: 1.2rem;
  border: 1px solid rgba(169, 108, 255, .08)
}

.footer-social a:hover {
  background: var(--primary);
  color: #fff
}

.footer-copyline {
  color: #7f7589;
  font-size: .82rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 20px
}

@media(max-width:991.98px) {
  .navbar-collapse {
    padding: 12px 0 18px
  }

  .header-social {
    margin-top: 12px;
    justify-content: center
  }

  .nav-link {
    text-align: center
  }

  .nav-link.active:after {
    display: none
  }

  .hero-shell {
    min-height: auto;
    padding: 70px 0
  }

  .hero-photo {
    width: 210px;
    height: 210px
  }

  .section-space {
    padding: 66px 0
  }

  .preview-visual {
    min-height: 300px
  }

  .mobile-tools {
    display: flex !important;
    gap: 8px
  }

  .desktop-tools {
    display: none !important
  }
}

@media(min-width:992px) {
  .mobile-tools {
    display: none !important
  }
}

@media(max-width:575.98px) {
  .navbar {
    min-height: 68px
  }

  .hero-shell {
    padding: 52px 0
  }

  .hero-photo {
    width: 175px;
    height: 175px
  }

  .hero-name {
    font-size: 2.45rem
  }

  .hero-shell:before {
    font-size: 5rem;
    bottom: 12%
  }

  .section-space {
    padding: 52px 0
  }

  .preview-visual {
    min-height: 250px
  }

  .preview-photo {
    width: 230px;
    border-radius: 25px
  }

  .section-copy {
    font-size: .93rem
  }

  .site-card {
    padding: 18px
  }
}

/* Semantic site blocks + desktop header alignment */
.site-header .container-fluid {
  padding-inline: clamp(18px, 4vw, 72px)
}

.header-layout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.header-nav-block {
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.header-tools-block {
  display: flex;
  align-items: center;
  gap: 12px;
  direction: ltr
}

.header-social-block {
  display: flex;
  align-items: center
}

.theme-block {
  display: flex;
  align-items: center
}

.breadcrumb-shell {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 12px 0
}

.breadcrumb {
  margin: 0;
  font-size: .84rem;
  --bs-breadcrumb-divider: "/"
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--muted)
}

.breadcrumb-item.active {
  color: var(--primary);
  font-weight: 700
}

.hero-dynamic {
  min-height: 2em
}

.hero-dynamic-text {
  display: inline-block;
  transition: opacity .28s ease, transform .28s ease
}

.hero-dynamic-text.is-changing {
  opacity: 0;
  transform: translateY(8px)
}

.hero-shell {
  background-size: 160% 160%;
  animation: heroGradient 12s ease-in-out infinite alternate
}

.hero-shell:after {
  animation: heroGlow 10s ease-in-out infinite alternate
}

@keyframes heroGradient {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 100% 50%
  }
}

@keyframes heroGlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1)
  }

  100% {
    transform: translate3d(-100px, 90px, 0) scale(1.16)
  }
}

@media(max-width:991.98px) {
  .header-layout {
    display: block
  }

  .header-nav-block {
    width: 100%;
    justify-content: space-between
  }

  .header-tools-block {
    display: none
  }

  .navbar-collapse .header-social {
    margin-top: 14px
  }

  .breadcrumb-shell {
    padding: 10px 0
  }
}

@media(max-width:575.98px), (prefers-reduced-motion:reduce) {

  .hero-shell,
  .hero-shell:after {
    animation: none
  }

  .hero-dynamic-text {
    transition: none
  }
}

/* V4 mobile/responsive repair */
html {
  direction: ltr;
  overflow-y: auto;
  overflow-x: hidden
}

body {
  direction: rtl;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible
}

.site-header {
  width: 100%
}

.mobile-header-bar {
  display: none
}

.mobile-offcanvas {
  background: linear-gradient(160deg, #160c25, #2b1643);
  color: #fff;
  width: min(20rem, 86vw) !important;
  border-left: 1px solid rgba(169, 108, 255, .18) !important
}

.mobile-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 1rem 1.1rem
}

.mobile-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.4rem
}

.mobile-offcanvas .mobile-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.mobile-offcanvas .mobile-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: right;
  padding: .85rem 1rem !important;
  border-radius: .8rem;
  color: rgba(255, 255, 255, .82) !important
}

.mobile-offcanvas .mobile-nav .nav-link.active,
.mobile-offcanvas .mobile-nav .nav-link:hover {
  background: rgba(169, 108, 255, .12);
  color: #fff !important
}

.mobile-offcanvas .mobile-nav .nav-link.active:after {
  display: none
}

.mobile-offcanvas .mobile-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  direction: ltr
}

.mobile-offcanvas .mobile-social a {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  background: rgba(169, 108, 255, .09);
  color: #d8bfff
}

.mobile-offcanvas .btn-close {
  filter: invert(1);
  opacity: .85
}

@media(max-width:991.98px) {
  .site-header .navbar {
    min-height: 4.25rem;
    padding: .55rem 0
  }

  .site-header .container-fluid {
    padding-inline: 1rem
  }

  .header-layout {
    display: none !important
  }

  .mobile-header-bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    direction: rtl
  }

  .mobile-menu-btn {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.15rem
  }

  .mobile-theme-btn {
    width: 2.75rem;
    height: 2.75rem
  }

  .hero-shell {
    padding: 3.25rem 0 3.75rem;
    min-height: auto
  }

  .hero-shell .container {
    padding-inline: 1rem
  }

  .hero-photo {
    width: 11.5rem;
    height: 11.5rem;
    border-width: .35rem
  }

  .hero-name {
    font-size: clamp(2rem, 10vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -.035em;
    overflow-wrap: anywhere
  }

  .hero-role {
    font-size: 1rem
  }

  .hero-line {
    font-size: .94rem;
    line-height: 1.85;
    max-width: 34rem
  }

  .hero-shell:before {
    font-size: clamp(4rem, 20vw, 7rem);
    max-width: 100%;
    overflow: hidden
  }

  .section-space {
    padding: 3.5rem 0
  }

  .section-space .row {
    --bs-gutter-y: 2rem
  }

  .section-title {
    font-size: clamp(1.65rem, 7vw, 2.35rem)
  }

  .section-copy {
    font-size: .92rem;
    line-height: 1.9
  }

  .preview-visual {
    min-height: auto;
    padding: 1rem 0
  }

  .preview-photo {
    width: min(15.5rem, 76vw)
  }

  .site-footer {
    padding: 2.8rem 0 1.4rem
  }

  .footer-copy {
    font-size: .88rem;
    padding-inline: .5rem
  }

  .breadcrumb-shell .container {
    padding-inline: 1rem
  }
}

@media(max-width:575.98px) {
  .hero-shell {
    padding: 2.6rem 0 3rem
  }

  .hero-photo {
    width: 9.5rem;
    height: 9.5rem
  }

  .hero-name {
    font-size: clamp(1.9rem, 11vw, 2.65rem);
    margin-top: 1rem
  }

  .hero-shell .d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: .65rem !important
  }

  .hero-shell .btn {
    width: 100%;
    padding: .72rem .65rem;
    font-size: .88rem
  }

  .section-space {
    padding: 3rem 0
  }

  .section-space .row>div {
    text-align: center
  }

  .section-copy {
    margin-inline: auto
  }

  .project-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .65rem !important
  }

  .project-actions .btn {
    width: 100%
  }
}

/* Header cleanup + named social links */
.header-social {
  gap: .35rem
}

.header-social a {
  width: auto;
  height: 2.35rem;
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border-radius: .7rem;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap
}

.header-social a span {
  display: inline-block
}

.header-nav-block .nav-link {
  display: flex;
  align-items: center
}

.mobile-offcanvas .mobile-nav .nav-link {
  padding-inline: 1rem !important
}

.mobile-offcanvas .mobile-social {
  align-items: stretch;
  flex-direction: column;
  direction: ltr
}

.mobile-offcanvas .mobile-social a {
  width: 100%;
  height: 2.8rem;
  padding: 0 .9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  border-radius: .75rem;
  background: rgba(169, 108, 255, .09);
  color: #d8bfff;
  font-weight: 600
}

.mobile-offcanvas .mobile-social a span {
  display: inline-block
}

/* One consistent space after breadcrumb on internal pages */
.skills-page,
.services-page,
.projects-page {
  padding-top: 2.5rem !important
}

.skills-page>.container,
.services-page>.container,
.projects-page>.container {
  padding-top: 0
}

@media(max-width:47.99875rem) {

  .skills-page,
  .services-page,
  .projects-page {
    padding-top: 1.75rem !important
  }
}
/* =========================================
   Skills & Services - Breadcrumb Spacing
========================================= */

body[data-page="skills"] .breadcrumb-shell + main,
body[data-page="services"] .breadcrumb-shell + main {
    padding-top: 3rem;
}

/* Tablet */
@media (max-width: 61.998rem) {
    body[data-page="skills"] .breadcrumb-shell + main,
    body[data-page="services"] .breadcrumb-shell + main {
        padding-top: 2.5rem;
    }
}

/* Mobile */
@media (max-width: 47.998rem) {
    body[data-page="skills"] .breadcrumb-shell + main,
    body[data-page="services"] .breadcrumb-shell + main {
        padding-top: 2rem;
    }
}

/* =========================================================
   HOME BLOG + DESKTOP SIDEBAR
   ========================================================= */
.home-blog-section{border-top:1px solid rgba(169,108,255,.10)}
.home-article-card{display:flex;flex-direction:column;height:100%}
.home-article-body{display:flex;flex-direction:column;flex:1}
.home-article-body p{flex:1}
.article-date{font-size:.78rem;opacity:.68;margin:.25rem 0 .75rem}
.content-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:2.25rem;align-items:start}
.content-main{min-width:0}
.site-sidebar{position:sticky;top:7rem;direction:rtl}
.sidebar-widget{padding:1.2rem;margin-bottom:1rem;border:1px solid rgba(169,108,255,.15);border-radius:1rem;background:rgba(169,108,255,.045);box-shadow:0 .75rem 2rem rgba(0,0,0,.08)}
.sidebar-widget-title{font-size:1rem;font-weight:700;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(169,108,255,.16)}
.sidebar-widget-copy{font-size:.88rem;line-height:1.9;opacity:.88}
.sidebar-link-list{display:grid;gap:.2rem}
.sidebar-link-list a{display:flex;gap:.65rem;align-items:flex-start;padding:.68rem .25rem;color:inherit;text-decoration:none;border-bottom:1px solid rgba(169,108,255,.09);font-size:.86rem;line-height:1.65;transition:.2s ease}
.sidebar-link-list a:last-child{border-bottom:0}
.sidebar-link-list a i{color:#a96cff;margin-top:.25rem;min-width:1rem;text-align:center}
.sidebar-link-list a:hover{color:#b982ff;transform:translateX(-.15rem)}
.sidebar-social{display:flex;flex-wrap:wrap;gap:.55rem}
.sidebar-social a{width:2.55rem;height:2.55rem;display:grid;place-items:center;border-radius:.7rem;background:rgba(169,108,255,.10);color:#b982ff;text-decoration:none}
@media(max-width:991.98px){.content-with-sidebar{display:block}.site-sidebar{display:none!important}}

/* =========================================================
   V7 — VIEWPORT HERO / MOBILE NAV / CONTENT READING / FOOTER
   ========================================================= */

/* A consistent breathing space after breadcrumbs on every internal page. */
.breadcrumb-shell + main{padding-top:2.25rem}

/* Home hero occupies the visible screen below the sticky header on all devices. */
body[data-page="home"] .hero-shell{
  min-height:calc(100svh - 4.75rem);
  min-height:calc(100dvh - 4.75rem);
  padding-block:clamp(2.25rem,5vh,4.5rem);
}

/* Footer navigation must never glue labels together. */
.site-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.75rem 1.35rem;
  margin:0 auto 1.35rem;
}
.site-footer-links a{display:inline-flex;align-items:center;line-height:1.7;color:#d7cedf;transition:.2s ease}
.site-footer-links a:hover{color:var(--primary-2)}

/* CMS database content: comfortable reading cards. */
.cms-page{padding-bottom:4rem}
.cms-page .content-main>h1,
.cms-page .content-main>.section-head{margin-bottom:1.5rem}
.cms-content{display:grid;gap:1rem;line-height:2;color:var(--muted)}
.cms-reading-card{
  padding:clamp(1.15rem,2.2vw,1.65rem);
  border:1px solid var(--line);
  border-radius:1.15rem;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 35%,var(--surface)));
  box-shadow:0 .7rem 2rem rgba(0,0,0,.045);
  overflow:hidden;
}
.cms-reading-card h2,.cms-reading-card h3,.cms-reading-card h4{
  margin:0 0 .9rem;
  color:var(--text);
  font-weight:800;
  line-height:1.55;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
}
.cms-reading-card h2:after,.cms-reading-card h3:after,.cms-reading-card h4:after{
  content:"";display:block;width:3.25rem;height:.18rem;margin-top:.65rem;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
}
.cms-reading-card p{margin:0 0 .85rem;line-height:2;color:var(--muted)}
.cms-reading-card p:last-child{margin-bottom:0}
.cms-reading-card ul,.cms-reading-card ol{margin:.6rem 0 0;padding-inline-start:1.4rem}
.cms-reading-card li{margin:.5rem 0;line-height:1.9}
.cms-reading-card li::marker{color:var(--primary-2)}
.cms-reading-card a{color:var(--primary-2);font-weight:600}
.cms-reading-intro{border-color:rgba(169,108,255,.22);background:linear-gradient(145deg,rgba(169,108,255,.075),var(--surface))}
.article-cover{width:100%;max-height:30rem;object-fit:cover;border-radius:1.2rem;margin-bottom:1.4rem;border:1px solid var(--line)}

/* Mobile offcanvas must be above the sticky header and scroll independently. */
.mobile-offcanvas{z-index:2005!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
.offcanvas-backdrop{z-index:2000!important}
.mobile-offcanvas .offcanvas-header{flex:0 0 auto;min-height:4.6rem}
.mobile-menu-head-actions{display:flex;align-items:center;gap:.7rem}
.mobile-menu-theme{width:2.55rem;height:2.55rem;flex:0 0 auto}
.mobile-offcanvas .offcanvas-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
body.mobile-menu-open{overflow:hidden!important;touch-action:none}
body.mobile-menu-open .mobile-offcanvas{touch-action:pan-y}

@media(max-width:991.98px){
  .breadcrumb-shell + main{padding-top:1.4rem}
  body[data-page="home"] .hero-shell{
    min-height:calc(100svh - 4.25rem)!important;
    min-height:calc(100dvh - 4.25rem)!important;
    padding-block:2rem!important;
  }
  .cms-page{padding-bottom:3rem}
  .cms-reading-card{border-radius:1rem}
  .site-footer-links{gap:.85rem 1.15rem;padding-inline:1rem;margin-bottom:1.5rem}
}

@media(max-width:575.98px){
  .breadcrumb-shell + main{padding-top:1.15rem}
  body[data-page="home"] .hero-shell{
    min-height:calc(100svh - 4.25rem)!important;
    min-height:calc(100dvh - 4.25rem)!important;
    padding:1.65rem 0 1.9rem!important;
  }
  body[data-page="home"] .hero-photo{width:min(9rem,34svh);height:min(9rem,34svh)}
  body[data-page="home"] .hero-name{font-size:clamp(2rem,11vw,2.8rem);margin:.9rem 0 .45rem}
  body[data-page="home"] .hero-line{line-height:1.75;margin-bottom:.35rem}
  .cms-page .content-main>h1{font-size:clamp(1.75rem,8vw,2.25rem);margin-bottom:1.15rem}
  .cms-content{gap:.85rem}
  .cms-reading-card{padding:1rem}
  .cms-reading-card p,.cms-reading-card li{font-size:.92rem;line-height:1.9}
  .site-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .85rem}
  .site-footer-links a{justify-content:center;padding:.45rem .55rem;border:1px solid rgba(169,108,255,.10);border-radius:.7rem;background:rgba(169,108,255,.04)}
}


/* =========================================================
   PROJECTS PAGE — dedicated layout (no sidebar)
   ========================================================= */
body[data-page="projects"] .breadcrumb-shell + main{
  padding-top:2.75rem;
}

.projects-page{
  padding-bottom:5.5rem;
}

.projects-page-head{
  width:min(52rem,100%);
  margin:0 auto 2.5rem;
  text-align:center;
}

.projects-page-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
  padding:.35rem .85rem;
  margin-bottom:.65rem;
  border:1px solid rgba(169,108,255,.20);
  border-radius:999px;
  background:rgba(169,108,255,.07);
  color:var(--primary);
  font-size:.78rem;
  font-weight:800;
}

.projects-page-head h1{
  margin:0;
  color:var(--text);
  font-size:clamp(2.15rem,5vw,3.6rem);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.035em;
}

.projects-page-head p{
  max-width:44rem;
  margin:.75rem auto 0;
  color:var(--muted);
  font-size:clamp(.95rem,1.5vw,1.08rem);
  line-height:1.9;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  width:100%;
  align-items:stretch;
}

.project-card{
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--line);
  border-radius:1.35rem;
  background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 34%,var(--surface)));
  box-shadow:0 1rem 2.8rem rgba(0,0,0,.10);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.project-card:hover{
  transform:translateY(-.35rem);
  border-color:rgba(169,108,255,.42);
  box-shadow:0 1.25rem 3.2rem rgba(0,0,0,.18);
}

.project-card-media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}

.project-card-image{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transition:transform .35s ease;
}

.project-card:hover .project-card-image{
  transform:scale(1.025);
}

.project-card-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:var(--primary);
  font-size:2.4rem;
  background:radial-gradient(circle at 50% 45%,rgba(169,108,255,.13),transparent 55%),var(--surface-2);
}

.project-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.25rem;
  text-align:center;
}

.project-date-badge{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:-2.15rem auto 1rem;
  padding:.48rem .8rem;
  position:relative;
  z-index:2;
  border:1px solid rgba(169,108,255,.28);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(.7rem);
  color:var(--primary);
  box-shadow:0 .55rem 1.4rem rgba(0,0,0,.14);
  font-size:.76rem;
  font-weight:700;
  direction:ltr;
}

.project-card-body h2{
  margin:.15rem 0 .55rem;
  color:var(--text);
  font-size:1.22rem;
  font-weight:800;
  line-height:1.55;
}

.project-card-body p{
  flex:1;
  margin:0 auto 1.25rem;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.9;
}

.project-card-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:auto;
}

.project-card-actions .btn{
  min-width:9.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.72rem 1rem;
  font-size:.86rem;
}

@media(max-width:1199.98px){
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:767.98px){
  body[data-page="projects"] .breadcrumb-shell + main{padding-top:1.75rem}
  .projects-page{padding-bottom:4rem}
  .projects-page-head{margin-bottom:1.7rem;padding-inline:.35rem}
  .projects-page-head h1{font-size:clamp(2rem,10vw,2.65rem)}
  .projects-grid{grid-template-columns:1fr;gap:1.15rem}
  .project-card-body{padding:1.05rem}
  .project-card-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.6rem}
  .project-card-actions .btn{min-width:0;width:100%;padding:.72rem .6rem;font-size:.8rem}
}

@media(max-width:390px){
  .project-card-actions{grid-template-columns:1fr}
}


/* Project category filters + metadata */
.project-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin:0 auto 2rem;max-width:70rem}
.project-filter{display:inline-flex;align-items:center;justify-content:center;padding:.62rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-weight:700;text-decoration:none;transition:.2s ease}
.project-filter:hover,.project-filter.active{color:#fff;border-color:var(--primary);background:var(--primary);transform:translateY(-.1rem)}
.project-card-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;margin:-2.15rem auto 1rem;position:relative;z-index:2}
.project-card-meta .project-date-badge{margin:0}
.project-category-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem .8rem;border:1px solid rgba(169,108,255,.28);border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(.7rem);color:var(--primary);font-size:.76rem;font-weight:700;text-decoration:none;box-shadow:0 .55rem 1.4rem rgba(0,0,0,.14)}
.project-category-badge:hover{color:var(--text);border-color:var(--primary)}
.project-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.project-meta .meta-badge{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
@media(max-width:767.98px){.project-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin}.project-filter{white-space:nowrap}.project-card-meta{margin-top:-1.8rem}}