/* A quiet professional portfolio: forest ink, document surfaces and restrained brass. */
:root {
  --forest:#123b38; --forest-2:#215e53; --ink:#203b36;
  --paper:#fffefa; --sand:#f5f6f1; --sage:#e2ebe4; --sage-2:#edf2ed;
  --gold:#aa8244; --muted:#52685f; --line:#cedbd2;
  --font:'IBM Plex Sans Arabic',Tahoma,sans-serif;
  --space:clamp(24px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}img{max-width:100%}p{margin:0 0 16px}h1,h2,h3{line-height:1.5;text-wrap:balance}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;inset-block-start:12px;inset-inline-start:24px;transform:translateY(-160%);background:var(--paper);color:var(--forest);padding:12px 20px;z-index:100}
.skip:focus{transform:none}
.topline{height:4px;background:var(--forest-2)}
.header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{position:relative;min-height:88px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;line-height:1.6}
.brandmark{width:42px;height:46px;display:grid;place-items:center;background:var(--forest);border-radius:3px;color:var(--paper);font-size:17px;direction:ltr}
.brand small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.ministry-logo{width:96px;height:58px;object-fit:contain;margin-inline-start:auto;margin-inline-end:72px}
.menu{position:absolute;left:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--forest)}
.menu:hover,.menu[aria-expanded=true]{background:var(--sage-2);border-color:var(--forest-2)}
.navlinks{display:none;position:absolute;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto;padding:12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 16px 40px #123b3820;border-radius:6px}
.navlinks.open{display:grid}
.navlinks a{display:flex;align-items:center;min-height:44px;padding:8px 16px;font-size:15px;border-inline-start:3px solid transparent;border-radius:2px}
.navlinks a:hover{background:var(--sage-2)}
.navlinks a[aria-current=page]{background:var(--sage-2);border-inline-start-color:var(--forest-2);font-weight:600}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 22px;border:1px solid var(--forest);border-radius:4px;background:var(--forest);color:white;font-size:15px;font-weight:500}
.button:hover{background:var(--forest-2)}
.button.light{background:var(--paper);border-color:var(--paper);color:var(--forest)}
.button.light:hover{background:var(--sage)}
.button.outline{background:transparent;border-color:#9eb8ac;color:var(--paper)}
.button.outline:hover{background:#ffffff12}
.hero{padding:0;background:var(--forest);color:var(--paper);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(32px,6vw,88px);padding-block:64px;min-height:580px}
.hero-copy{max-width:650px}
.eyebrow{display:block;font-size:15px;font-weight:500;color:#e4c690}
h1{font-size:clamp(36px,4.5vw,62px);font-weight:600;line-height:1.5;margin:14px 0 12px;letter-spacing:0}
.hero-role{font-size:20px;color:#e0eae3;margin-bottom:22px}
.hero-text{max-width:50ch;font-size:17px;color:#d7e3db;line-height:2}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-seal{position:relative;width:100%;max-width:365px;margin-inline:auto;padding-bottom:22px}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px 4px 64px 4px}
.hero-photo-caption{position:relative;margin:-48px 20px 0 -20px;padding:14px 18px;background:var(--paper);color:var(--forest);border-inline-start:3px solid var(--gold)}
.hero-photo-caption strong{display:block;font-size:15px;font-weight:600}
.hero-photo-caption small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.hero-photo-monogram{display:none}
.facts-wrap{background:var(--paper);border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:1.35fr 1fr 1fr;padding-block:26px;gap:28px}
.fact{border-inline-start:1px solid var(--line);padding-inline-start:28px}
.fact:first-child{border:0;padding:0}.fact small{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}.fact strong{font-size:16px;font-weight:500}
section{padding-block:64px;min-height:0}
main{min-height:calc(100dvh - 180px)}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.section-kicker{display:block;font-size:14px;font-weight:500;color:var(--forest-2);letter-spacing:0}
.section-head h2{font-size:clamp(28px,3vw,40px);font-weight:600;margin:8px 0 0}
.section-head p{max-width:42ch;margin:32px 0 0;color:var(--muted);font-size:16px}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:start;gap:64px}
.quote-card{padding:28px 28px 28px 0;border-inline-start:3px solid var(--gold);background:transparent}
.quote-card small{font-size:14px;color:var(--muted)}.quote-card h3{font-size:25px;font-weight:500;margin:10px 0 16px}.quote-card p{font-size:16px;color:var(--muted);max-width:30ch;margin:0}
.about-copy{font-size:18px;max-width:62ch}.about-copy p{margin-bottom:22px}
.values{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.value{color:var(--forest-2);font-size:15px;font-weight:500}
.soft{background:var(--sand)}
.profile-grid,.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.profile-card{padding:0;background:transparent;min-width:0}
.card-label,.vision-card small{font-size:14px;color:var(--forest-2);font-weight:500}
.profile-card h3,.vision-card h3{font-size:25px;font-weight:600;margin:12px 0 16px}
.profile-card p,.vision-card p{font-size:17px;color:var(--muted);max-width:50ch}
.profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.profile-facts div{border-top:1px solid var(--line);padding-top:14px;min-width:0}
.profile-facts small{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.profile-facts strong{font-size:16px;font-weight:500}
.vision-card{padding:24px 28px;background:var(--sage-2);border-radius:4px;border-inline-start:3px solid var(--forest-2)}
.vision-card.mission{background:transparent;border-inline-start-color:var(--gold)}
.commitments{background:var(--paper);color:var(--ink)}
.commit-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.commit-intro .section-head{border:0;padding:0;margin-bottom:20px}.commit-intro p{color:var(--muted);font-size:17px}
.commit-list{display:grid;gap:0;border-top:1px solid var(--line)}
.commitment{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:17px}
.check{display:grid;place-items:center;flex:0 0 24px;height:30px;color:var(--forest-2)}
.performance-gallery{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.performance-gallery-heading{margin-bottom:24px}.performance-gallery-heading h3{font-size:27px;margin:4px 0 10px}.performance-gallery-heading p{color:var(--muted);font-size:16px}
.performance-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.performance-photo{display:block;padding:12px;background:white;border:1px solid var(--line);border-radius:4px}
.performance-photo img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain}
.performance-document{display:flex;flex-direction:column;gap:12px}.performance-document>a{min-height:44px;padding:8px 12px;color:var(--forest-2);text-decoration:underline;text-underline-offset:5px}
.performance-empty,.goal-no-photo,.goal-empty{padding:20px;background:var(--sage-2);color:var(--muted);font-size:15px;grid-column:1/-1}
.record-category{margin-top:56px;scroll-margin-top:112px}.record-category:first-of-type{margin-top:0}
.category-heading{margin-bottom:28px}.category-heading :is(h2,h3){font-size:clamp(28px,3vw,38px);font-weight:600;margin:6px 0 10px}.category-heading p{font-size:16px;color:var(--muted);margin:0;max-width:65ch}
.record-category>.category-heading>.section-kicker{display:none}
.course-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.course-search{position:relative;display:block;width:min(100%,440px)}
.course-search input{display:block;width:100%;min-height:50px;padding:10px 44px 10px 14px;border:1px solid #9bb0a3;background:white;color:var(--ink);border-radius:4px;font-size:16px}
.course-search input::placeholder{color:var(--muted);opacity:1}
.search-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.course-count{font-size:14px;color:var(--muted);margin:0}
.records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.record{display:flex;flex-direction:column;min-width:0;background:transparent;overflow-wrap:anywhere}
.record-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.5/1;overflow:hidden;margin:0 0 14px;border:1px solid var(--line);border-radius:4px;background:#e5ece6}
.record-preview.preview-trigger{appearance:none;padding:12px;color:inherit;font:inherit;cursor:zoom-in;text-align:initial;transition:border-color .15s}
.record-preview:hover{border-color:var(--forest-2)}
.record-preview:focus-visible{outline-offset:3px}
.record-preview img{display:block;width:100%;height:100%;object-fit:contain;min-height:0}
.record-filetype{position:absolute;bottom:8px;left:8px;padding:2px 7px;background:var(--paper);color:var(--forest);border:1px solid var(--line);border-radius:2px;font-size:12px;line-height:1.6}
.record-body{display:flex;flex-direction:column;flex:1;align-items:flex-start;padding-inline:2px}
.record-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.record-kind,.record-year{font-size:13px;color:var(--muted)}
.record h3{font-size:18px;font-weight:500;margin:5px 0 8px;line-height:1.7;text-wrap:initial}
.record p{font-size:14px;color:var(--muted)}
.record-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;min-height:44px;color:var(--forest-2);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:#92aa9c;text-underline-offset:5px}
.record-link:hover{text-decoration-color:var(--forest)}
.file-fallback{display:grid;place-items:center;height:100%;color:var(--muted);font-size:15px}
.pdf-page-preview{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:210/297;padding:8px;overflow:hidden;background:white;color:var(--muted);font-size:14px;text-align:center}
.pdf-page-preview canvas{display:block;max-width:100%;height:auto;background:white}
.compact-preview .pdf-page-preview{height:100%;aspect-ratio:auto;padding:0}
.compact-preview .pdf-page-preview canvas{max-height:100%}
.goal-list{display:grid;gap:40px}.goal-card{padding-top:28px;border-top:1px solid var(--line)}
.goal-card-head{display:grid;grid-template-columns:100px 1fr;gap:24px;margin-bottom:24px;align-items:start}
.goal-index{font-size:15px;color:var(--forest-2);font-weight:600;padding-top:3px}.goal-text{font-size:20px;font-weight:500;margin:0;max-width:70ch}
.goal-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.goal-file-body{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.goal-file-label{font-size:14px;color:var(--muted)}.goal-file-card .record-preview{margin-bottom:8px}.goal-file-card .record-link{margin:0}
.goal-extra{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}.goal-extra .category-heading :is(h2,h3){font-size:24px}.goal-extra .section-kicker{display:none}
.empty-state{grid-column:1/-1;display:flex;gap:16px;align-items:flex-start;padding:28px;background:var(--sage-2);border-radius:4px;color:var(--muted)}
.empty-mark{flex:0 0 32px;color:var(--forest-2)}.empty-state strong{font-size:17px;color:var(--ink)}.empty-state p{font-size:15px;margin:4px 0 0}
.closing{background:var(--sage-2);padding-block:44px}.closing-box{display:flex;justify-content:space-between;align-items:center;gap:48px}.closing h2{font-size:28px;margin:6px 0 12px}.closing p{max-width:65ch;font-size:16px;color:var(--muted);margin:0}.closing-mark{font-size:26px;font-weight:500;white-space:nowrap;color:var(--forest-2)}
.footer{padding:24px 0;background:var(--forest);color:#e1ebe3}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px}.footer strong{font-weight:500}.footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.backtop{position:fixed;bottom:18px;left:18px;z-index:5;width:44px;height:44px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:4px;color:var(--forest)}
.icon{display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:0 0 auto}.menu .icon{width:24px;height:24px}
.preview-modal{width:min(960px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);border:0;padding:0;background:transparent;color:var(--ink);overflow:visible}
.preview-modal::backdrop{background:#092c29dc}
.preview-modal-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;max-height:calc(100dvh - 32px);padding:24px;background:var(--paper);border-radius:6px;box-shadow:0 24px 80px #061e1c55}
.preview-modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.preview-modal-head h2{font-size:20px;margin:0;overflow-wrap:anywhere}
.preview-modal-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--forest)}
.preview-modal-close:hover{background:var(--sage-2)}
.preview-modal-body{display:grid;place-items:center;min-height:0;overflow:hidden;max-height:66dvh;background:#e5ece6;border:1px solid var(--line)}
.preview-modal-body>img{display:block;max-width:100%;max-height:66dvh;width:auto;height:auto;object-fit:contain}
.preview-modal-body .pdf-page-preview{width:100%;height:66dvh;aspect-ratio:auto;padding:8px}.preview-modal-body canvas{max-height:100%;max-width:100%}
.preview-original{justify-self:start}
/* Existing section navigation remains the source of truth. */
body[data-view=home] main>section:not(#home):not(.closing){display:none}
body[data-view]:not([data-view=home]) .facts-wrap{display:none}
body[data-view=about] main>section:not(#about),body[data-view=profile] main>section:not(#profile),body[data-view=vision] main>section:not(#vision),body[data-view=records] main>section:not(#records),body[data-view=performance] main>section:not(#performance){display:none}
body[data-view=records][data-record-category] .records-overview{display:none}
body[data-record-category=courses] .record-category:not(#courses),body[data-record-category=volunteer] .record-category:not(#volunteer),body[data-record-category=volunteer-hours] .record-category:not(#volunteer-hours),body[data-record-category=evidence] .record-category:not(#evidence),body[data-record-category=photos] .record-category:not(#photos){display:none}
body[data-record-category] .record-category{margin-top:0}
@media(min-width:900px){.volunteer-hours-records{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:32px;padding-block:48px;min-height:unset}
  .hero-photo-caption{margin-inline:12px -8px}.hero-photo-caption strong{font-size:13px}
  .section-head{gap:32px}.section-head p{max-width:35ch}
  .about-grid,.profile-grid,.vision-grid,.commit-grid{gap:32px}
  .records{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goal-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .footer-inner{flex-wrap:wrap}
}
@media(max-width:650px){
  html{scroll-padding-top:94px}.wrap{width:calc(100% - 36px)}
  .nav{min-height:76px;gap:12px}.brand{font-size:15px;gap:8px}.brandmark{width:32px;height:38px;font-size:14px}.brand small{font-size:11px}
  .ministry-logo{width:67px;height:44px;margin-inline-end:54px}.menu{width:44px;height:44px}
  .navlinks{max-height:calc(100dvh - 104px)}
  .hero-grid{grid-template-columns:1fr;gap:28px;padding-block:32px 40px}
  .hero-copy{order:0}.hero-seal{order:1;max-width:280px;padding-bottom:0;margin-top:8px}
  .hero-photo{aspect-ratio:5/4;border-end-end-radius:40px}.hero-photo-caption{margin:-24px 14px 0 -12px;padding:12px 14px}
  .hero-photo-caption small{font-size:12px}.hero-photo-caption strong{font-size:14px}
  h1{font-size:36px;line-height:1.55;margin-block:12px}.eyebrow{font-size:14px}.hero-role{font-size:17px;margin-bottom:16px}.hero-text{font-size:16px;line-height:1.95}
  .hero-actions{gap:10px;margin-top:24px}.button{padding-inline:16px;font-size:14px;min-height:46px}
  .facts{grid-template-columns:1fr 1fr;gap:18px;padding-block:24px}.fact:first-child{grid-column:1/-1}.fact:nth-child(2){padding:0;border:0}.fact{padding-inline-start:16px}.fact strong{font-size:14px}
  section{padding-block:36px}.section-head{display:block;margin-bottom:28px;padding-bottom:22px}.section-head h2{font-size:29px}.section-head p{margin-top:14px;max-width:100%;font-size:16px}
  .about-grid,.profile-grid,.vision-grid,.commit-grid{grid-template-columns:1fr;gap:32px}.quote-card{padding:12px 20px 12px 0}.quote-card h3{font-size:23px}.quote-card p{max-width:100%}.about-copy{font-size:17px}
  .profile-grid{gap:36px}.profile-card+.profile-card{padding-top:28px;border-top:1px solid var(--line)}.profile-card h3,.vision-card h3{font-size:23px}.profile-facts{gap:16px}.profile-facts strong{font-size:15px}
  .vision-card{padding:22px}.commitment{font-size:16px;padding-block:16px}.commit-grid{gap:24px}
  .performance-gallery{margin-top:32px;padding-top:24px}.performance-photo-grid{grid-template-columns:1fr}.performance-gallery-heading h3{font-size:25px}
  .record-category{scroll-margin-top:100px}.category-heading{margin-bottom:24px}.category-heading :is(h2,h3){font-size:29px}.category-heading p{font-size:15px}
  .course-tools{align-items:stretch;flex-direction:column;gap:10px;margin-bottom:24px}.course-search{width:100%}.course-count{font-size:14px}
  .records,.goal-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .record-preview{aspect-ratio:1.25/1;margin-bottom:10px}.record-preview.preview-trigger{padding:6px}
  .record h3{font-size:16px}.record-top{align-items:flex-start;flex-direction:column;gap:2px}.record-kind,.record-year{font-size:12px}.record-link{font-size:13px;gap:5px}.record-link .icon{width:15px;height:15px}
  .record-filetype{font-size:11px;bottom:4px;left:4px}.record p{font-size:13px}
  .goal-list{gap:28px}.goal-card{padding-top:22px}.goal-card-head{grid-template-columns:1fr;gap:8px;margin-bottom:20px}.goal-text{font-size:18px}.goal-index{font-size:14px}.goal-file-label{font-size:13px}
  .empty-state{padding:22px 18px;gap:10px}.empty-state p{font-size:14px}
  .closing{padding-block:32px}.closing-box{display:block}.closing-mark{display:none}.closing h2{font-size:26px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:8px;font-size:13px}.footer{padding-bottom:66px}
  .backtop{left:12px;bottom:12px}
  .preview-modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.preview-modal-card{padding:12px;gap:12px;max-height:calc(100dvh - 16px)}.preview-modal-head{gap:12px}.preview-modal-head h2{font-size:16px}
}
@media(max-width:360px){.brandmark{display:none}.ministry-logo{width:60px}.hero-actions .button{width:100%}.profile-facts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.button,.record-preview,.menu,.navlinks{border:1px solid ButtonText}.navlinks a[aria-current=page]{outline:2px solid Highlight}}