:root {
  color-scheme: light;
  --ink: #18241f;
  --muted: #69716a;
  --paper: #f5f3ed;
  --white: #fffefa;
  --line: #dcded5;
  --green: #b7e36e;
  --green-dark: #293e27;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { width: min(1280px, calc(100% - 96px)); margin: 0 auto; }

.site-header {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark, .footer-brand { font: 800 25px/1 var(--display); letter-spacing: -2px; }
.brand-mark span, .footer-brand span { color: #83b945; }
.brand-copy, .header-contact, .eyebrow, .tab-number, .tab-count, .strip-label,
.portrait-index, .portrait-caption, .portrait-coordinate, .education-level,
.experience-date, .current-pill, .tag-row, .certificate-topline, .certificate-type,
.certificate-footnote, .expertise-index, .aside-label, .site-footer > span, .site-footer > div {
  font-family: var(--mono);
  letter-spacing: .05em;
}
.brand-copy { font-size: 10px; color: var(--muted); }
.header-status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.status-dot, .meta-dot { display: inline-block; background: #82b845; border-radius: 50%; }
.status-dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px #e3edda; }
.header-contact { font-size: 10px; font-weight: 500; }
.header-contact span { color: #75a83f; font-size: 14px; margin-left: 5px; }

.tab-nav { display: flex; gap: 32px; border-bottom: 1px solid var(--line); }
.tab-link {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  transition: color .2s ease;
}
.tab-link::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ink); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.tab-link:hover, .tab-link.is-active { color: var(--ink); }
.tab-link.is-active::after { transform: scaleX(1); }
.tab-number { color: #9aa096; font-size: 9px; }
.tab-link.is-active .tab-number { color: #719d41; }
.tab-count { padding: 3px 6px; border-radius: 10px; background: #e7ebdf; color: #637355; font-size: 9px; }

.page { padding: 55px 0 74px; animation: enter .35s ease both; }
.page[hidden] { display: none; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: #75806e; font-size: 9px; font-weight: 500; }
.eyebrow-line { width: 22px; height: 1px; background: #88b64f; }
.hero { min-height: 430px; display: grid; grid-template-columns: 1.13fr .87fr; align-items: center; gap: 46px; }
.hero-copy { padding: 10px 0 23px; }
h1, h2, h3, p { margin-top: 0; }
.hero h1, .page-heading h1 {
  margin: 22px 0 20px;
  font: 600 clamp(48px, 6.1vw, 76px)/.99 var(--display);
  letter-spacing: -.075em;
}
.hero h1 span, .page-heading h1 span { color: #7b8c70; }
.hero-intro { max-width: 455px; margin-bottom: 24px; color: #5b645c; font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { display: inline-flex; align-items: center; gap: 16px; padding: 13px 16px; font-size: 11px; font-weight: 600; }
.button-primary { background: var(--ink); color: white; transition: background .2s ease, transform .2s ease; }
.button-primary:hover { background: #35493a; transform: translateY(-2px); }
.button-primary span { color: var(--green); font-size: 15px; }
.text-link, .card-link { font-size: 11px; font-weight: 600; }
.text-link span, .card-link span { margin-left: 5px; color: #709b3d; }
.hero-meta { display: flex; gap: 23px; margin-top: 38px; color: #747c72; font: 10px var(--mono); }
.hero-meta > span { display: flex; align-items: center; gap: 8px; }
.meta-dot { width: 6px; height: 6px; }

.portrait-panel { position: relative; justify-self: end; width: min(100%, 390px); padding: 17px 22px 27px 0; }
.portrait-frame { position: relative; overflow: hidden; width: 100%; height: 365px; background: #e1e4d9; }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.79); }
.portrait-frame::after { position: absolute; inset: 0; border: 1px solid rgba(24, 36, 31, .08); content: ""; pointer-events: none; }
.portrait-index { position: absolute; top: 13px; left: 14px; color: white; font-size: 9px; text-shadow: 0 1px 5px #263129; }
.portrait-sticker { position: absolute; right: 0; bottom: 66px; width: 106px; height: 106px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: var(--green); color: #304128; font: 9px/1.5 var(--mono); text-align: center; transform: rotate(9deg); }
.sticker-orbit { margin-bottom: 2px; font: 23px/1 var(--sans); }
.portrait-caption { margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.portrait-coordinate { position: absolute; right: 21px; bottom: 31px; color: #869083; font-size: 8px; }

.intro-strip { display: grid; grid-template-columns: 1fr 2.5fr 40px; align-items: center; gap: 25px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-label { color: #77806f; font-size: 9px; }
.intro-strip p { max-width: 625px; margin: 0; color: #424b43; font-size: 13px; line-height: 1.7; }
.circle-link { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cdd1c6; border-radius: 50%; transition: background .2s ease; }
.circle-link:hover { background: var(--green); border-color: var(--green); }
.profile-grid { display: grid; grid-template-columns: 1fr 1.12fr .77fr; gap: 15px; margin-top: 23px; }
.feature-card, .education-card, .contact-card { min-height: 240px; padding: 22px; }
.feature-card, .education-card { background: var(--white); }
.feature-card h2, .contact-card h2 { margin: 28px 0 12px; font: 600 27px/1.12 var(--display); letter-spacing: -.05em; }
.feature-card > p:not(.eyebrow) { max-width: 310px; margin-bottom: 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.feature-card .card-link { display: inline-block; }
.education-card .eyebrow { margin-bottom: 25px; }
.education-item { display: grid; grid-template-columns: 42px 1fr; gap: 11px; margin-bottom: 17px; }
.education-level { padding-top: 2px; color: #8a9383; font-size: 9px; }
.education-item h3 { margin: 0 0 4px; font-size: 11px; font-weight: 600; }
.education-item p { margin: 0; color: var(--muted); font-size: 10px; }
.education-card .card-link { display: inline-block; margin: 1px 0 0 53px; }
.contact-card { position: relative; overflow: hidden; background: var(--green); }
.contact-card::after { position: absolute; right: -45px; bottom: -75px; width: 180px; height: 180px; border: 1px solid rgba(35, 62, 29, .18); border-radius: 50%; content: ""; }
.contact-card .eyebrow { color: #526c3d; }
.contact-card h2 { margin-top: 30px; }
.contact-card > a { position: relative; z-index: 1; display: inline-block; margin-top: 5px; border-bottom: 1px solid rgba(24, 36, 31, .45); padding-bottom: 4px; font-size: 10px; font-weight: 600; }
.contact-symbol { position: absolute; top: 18px; right: 19px; color: #54783a; font-size: 17px; }

.profile-experience, .profile-projects { margin-top: 72px; }
.section-heading-row, .projects-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 23px; }
.section-heading-row h2, .projects-heading h2 { margin: 15px 0 0; font: 600 clamp(28px, 3.5vw, 39px)/1.12 var(--display); letter-spacing: -.06em; }
.section-heading-row h2 span { color: #7b8c70; }
.overall-experience-copy { max-width: 780px; margin: 0; padding: 22px 25px; border-left: 2px solid #a6cf74; background: var(--white); color: #586157; font-size: 14px; line-height: 1.85; }
.designation-list { display: grid; grid-template-columns: 125px 1fr; gap: 18px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.designation-label { padding-top: 7px; color: #77806f; font: 8px var(--mono); letter-spacing: .05em; }
.designation-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.designation-tags span { padding: 7px 10px; border: 1px solid #dfe2d8; background: rgba(255, 254, 250, .65); color: #586157; font-size: 10px; }
.project-card-top { font: 8px var(--mono); letter-spacing: .05em; color: #818b78; }
.projects-heading { align-items: center; }
.projects-heading > p { max-width: 295px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.hobby-projects { margin-top: 0; }
.project-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.project-card { min-height: 184px; padding: 19px; background: var(--white); }
.project-in-progress { background: #e9eee2; }
.project-placeholder { border: 1px dashed #cdd3c5; background: transparent; }
.project-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; font-size: 7px; }
.project-status { display: flex; align-items: center; gap: 6px; color: #658344; }
.project-status i { width: 6px; height: 6px; border-radius: 50%; background: #86b94e; box-shadow: 0 0 0 3px #d8e5ca; }
.project-card h3 { margin: 31px 0 8px; font: 600 18px/1.3 var(--display); letter-spacing: -.04em; }
.project-card p { max-width: 320px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }

.social-snaps-page .page-heading { align-items: end; }
.social-snaps-page .page-heading h1 { font-size: clamp(54px, 7vw, 82px); }
.social-gallery { display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-template-rows: 190px 190px; gap: 13px; }
.social-snap { display: flex; min-width: 0; flex-direction: column; padding: 9px; border: 1px solid #e0e2d9; background: var(--white); }
.social-snap-featured { grid-row: span 2; }
.social-snap-wide { grid-column: span 2; }
.snap-placeholder { position: relative; display: grid; flex: 1; min-height: 0; place-items: center; overflow: hidden; background: #e8eadf; color: #859279; }
.snap-placeholder::before, .snap-placeholder::after { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(91, 112, 76, .16); border-radius: 50%; content: ""; }
.snap-placeholder::before { transform: translate(-42px, 34px); }
.snap-placeholder::after { transform: translate(54px, -35px); }
.snap-placeholder > span { z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 19px var(--sans); }
.snap-placeholder-green { background: #dce8d0; color: #718663; }
.snap-placeholder-plain { background: #eeeae1; color: #9b927d; }
.snap-placeholder-dark { background: #34443a; color: #c2d3b2; }
.snap-placeholder-dark::before, .snap-placeholder-dark::after { border-color: rgba(234, 242, 226, .14); }
.snap-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 2px 1px; color: #75806e; font: 7px var(--mono); letter-spacing: .045em; }
.snap-caption span:last-child { color: #9a9f93; }
.social-note { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: #7c8578; font: 9px var(--mono); }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 5px 0 35px; }
.page-heading h1 { margin: 19px 0 0; font-size: clamp(43px, 5vw, 62px); }
.heading-note { max-width: 285px; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.75; }

.certificate-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 17px; align-items: start; padding: 13px 5px 28px; }
.certificate-card { grid-column: span 2; display: flex; flex-direction: column; width: 100%; padding: 14px; border: 1px solid #dedfd6; background: var(--white); color: var(--ink); cursor: zoom-in; text-align: left; box-shadow: 0 8px 20px rgba(37, 45, 35, .04); transition: transform .25s ease, box-shadow .25s ease; }
.certificate-card:hover, .certificate-card:focus-visible { z-index: 1; box-shadow: 0 17px 34px rgba(37, 45, 35, .13); }
.certificate-card:focus-visible { outline: 2px solid #7da847; outline-offset: 3px; }
.cert-one { transform: rotate(-1.6deg); }
.cert-two { transform: rotate(1.4deg) translateY(15px); }
.cert-three { transform: rotate(-1deg) translateY(-2px); }
.cert-four { grid-column: 2 / span 2; transform: rotate(1.4deg) translateY(2px); }
.cert-five { transform: rotate(-1.2deg) translateY(18px); }
.cert-one:hover, .cert-one:focus-visible, .cert-two:hover, .cert-two:focus-visible, .cert-three:hover, .cert-three:focus-visible, .cert-four:hover, .cert-four:focus-visible, .cert-five:hover, .cert-five:focus-visible { transform: rotate(0) translateY(-6px) scale(1.015); }
.certificate-topline, .certificate-type { display: flex; justify-content: space-between; gap: 8px; color: #899084; font-size: 7px; }
.certificate-art { display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 1.18; margin: 13px 0; background: #f0f1ec; }
.certificate-art img { width: 100%; height: 100%; object-fit: contain; }
.certificate-name { min-height: 36px; font: 600 13px/1.4 var(--display); }
.certificate-type { margin-top: 10px; color: #82906f; font-size: 7px; }
.certificate-type span { font: 12px var(--sans); }
.certificate-footnote { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; color: #7c8578; font-size: 9px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 8px; }
.tag-row span { padding: 5px 8px; border: 1px solid #e2e4dc; color: #66705f; }

.expertise-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.expertise-card { grid-column: span 3; min-height: 226px; padding: 20px; background: var(--white); }
.expertise-featured { background: var(--ink); color: var(--white); }
.expertise-index { color: #87917f; font-size: 8px; }
.expertise-featured .expertise-index { color: #b0c49e; }
.expertise-icon { margin: 14px 0 9px; color: #88ad5e; font: 26px/1 var(--display); }
.expertise-card h2 { margin: 0 0 8px; font: 600 20px/1.2 var(--display); letter-spacing: -.05em; }
.expertise-card > p { max-width: 450px; margin-bottom: 15px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.expertise-featured > p { color: #c4cbc0; }
.expertise-featured .tag-row span { border-color: #435046; color: #dce4d6; }
.expertise-note-card { position: relative; overflow: hidden; background: #e6eddc; }
.expertise-note-card::after { position: absolute; top: -82px; right: -35px; width: 170px; height: 170px; border: 1px solid #d1ddc4; border-radius: 50%; content: ""; }
.expertise-note-card h2 { margin-top: 23px; font-size: 23px; }
.expertise-note-card > p { max-width: 350px; color: #65705e; }
.expertise-note-card .card-link { display: inline-block; margin-top: 5px; }

.site-footer { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.footer-brand { font-size: 20px; }
.site-footer > span { color: #899084; font-size: 8px; }
.site-footer > div { display: flex; gap: 20px; color: #66705f; font-size: 8px; }
.site-footer > div a:hover { color: #47703c; }

.certificate-dialog { width: min(820px, calc(100% - 32px)); max-width: none; max-height: 92vh; padding: 22px; border: 0; background: var(--paper); box-shadow: 0 25px 80px rgba(0, 0, 0, .25); }
.certificate-dialog::backdrop { background: rgba(17, 25, 20, .78); backdrop-filter: blur(4px); }
.certificate-dialog form { position: absolute; top: 7px; right: 8px; z-index: 1; }
.dialog-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ink); color: white; cursor: pointer; font-size: 23px; line-height: 1; }
.certificate-dialog img { display: block; max-width: 100%; max-height: calc(92vh - 88px); margin: 0 auto; object-fit: contain; }
.dialog-caption { margin: 15px 0 0; color: #606b5b; font: 10px var(--mono); text-align: center; }

@media (max-width: 860px) {
  .site-shell { width: min(100% - 48px, 690px); }
  .header-status { display: none; }
  .hero { grid-template-columns: 1.1fr .9fr; gap: 22px; }
  .hero h1 { font-size: clamp(45px, 7vw, 62px); }
  .portrait-frame { height: 320px; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .contact-card { grid-column: span 2; min-height: 180px; }
  .contact-card h2 { margin-top: 21px; }
  .certificate-grid { gap: 12px; }
  .certificate-card { grid-column: span 3; }
  .cert-four { grid-column: 1 / span 3; }
  .cert-five { grid-column: 4 / span 3; }
  .project-card-grid { grid-template-columns: 1fr; }
  .social-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 190px 150px 150px; gap: 9px; }
  .social-snap-featured { grid-row: span 2; }
  .social-snap-wide { grid-column: 1 / -1; }
  .snap-caption { font-size: 6px; }
}

@media (max-width: 560px) {
  .site-shell { width: calc(100% - 36px); }
  .site-header { height: 72px; }
  .brand-copy { font-size: 8px; }
  .header-contact { font-size: 8px; }
  .tab-nav { flex-wrap: wrap; gap: 0 18px; justify-content: flex-start; }
  .tab-link { min-height: 54px; gap: 5px; font-size: 10px; }
  .tab-number { font-size: 8px; }
  .tab-count { padding: 2px 4px; font-size: 7px; }
  .page { padding: 37px 0 50px; }
  .hero { grid-template-columns: 1fr; gap: 13px; padding-bottom: 25px; }
  .hero-copy { padding: 0; }
  .hero h1 { margin: 19px 0 14px; font-size: clamp(49px, 13vw, 68px); }
  .hero-intro { font-size: 13px; }
  .hero-meta { margin-top: 25px; }
  .portrait-panel { width: 83%; max-width: 340px; justify-self: center; padding-top: 9px; }
  .portrait-frame { height: 310px; }
  .portrait-sticker { width: 90px; height: 90px; }
  .intro-strip { grid-template-columns: 1fr 35px; gap: 10px; }
  .strip-label { grid-column: 1; }
  .intro-strip p { grid-column: 1; font-size: 12px; }
  .circle-link { grid-column: 2; grid-row: 1 / span 2; }
  .profile-grid { grid-template-columns: 1fr; }
  .feature-card, .education-card { min-height: unset; padding: 20px; }
  .contact-card { grid-column: auto; min-height: 190px; }
  .profile-experience, .profile-projects { margin-top: 52px; }
  .hobby-projects { margin-top: 0; }
  .section-heading-row, .projects-heading { display: block; }
  .designation-list { grid-template-columns: 1fr; gap: 10px; }
  .projects-heading > p { margin-top: 13px; }
  .page-heading { display: block; margin-bottom: 26px; }
  .page-heading h1 { font-size: clamp(40px, 11vw, 55px); }
  .social-snaps-page .page-heading h1 { font-size: clamp(52px, 14vw, 68px); }
  .social-snaps-page .heading-note { margin-top: 15px; }
  .social-gallery { grid-template-rows: 170px 142px 142px; gap: 8px; }
  .social-snap { padding: 6px; }
  .social-snap-featured { grid-row: span 2; }
  .snap-caption { display: grid; grid-template-columns: 1fr; gap: 4px; padding-top: 8px; }
  .social-note { align-items: flex-start; line-height: 1.6; }
  .heading-note { margin-top: 18px; font-size: 11px; }
  .certificate-grid { grid-template-columns: 1fr 1fr; gap: 15px 9px; padding: 5px 2px 20px; }
  .certificate-card, .cert-four, .cert-five { grid-column: auto; padding: 9px; }
  .cert-one, .cert-two, .cert-three, .cert-four, .cert-five { transform: none; }
  .certificate-topline { font-size: 6px; }
  .certificate-art { margin: 9px 0; aspect-ratio: 1.02; }
  .certificate-name { min-height: 48px; font-size: 11px; }
  .certificate-type { font-size: 6px; }
  .experience-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .experience-date { font-size: 8px; }
  .experience-content h2 { font-size: 17px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-card { grid-column: auto; min-height: unset; padding: 18px; }
  .site-footer { flex-wrap: wrap; padding: 16px 0; }
  .site-footer > span { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}