/* ====== KEYSTONE · principal · complete-resume standard · v3 ====== */
:root{
  --surface:#F7F5EE; --surface-2:#FFFFFF; --ink:#1F2A24; --muted:#5C685F;
  --green:#1F4D3A; --green-deep:#143528; --gold:#A8802F; --burgundy:#7A2E3A; --slate:#3F5A73;
  --line:#DBD7C8; --dark:#152019; --dark-ink:#E9EDE6; --dark-muted:#9FAF9F; --wa:#1FAB55;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --t-display:clamp(2.2rem,8vw,4.2rem); --t-h2:clamp(1.5rem,4.5vw,2.25rem);
  --t-h3:1.125rem; --t-body:1rem; --t-small:.875rem; --t-caption:.75rem; --t-micro:.6875rem;
  --r-s:6px;--r-m:14px;--r-full:999px;
  --shadow-1:0 1px 2px rgba(31,42,36,.06),0 10px 28px -14px rgba(31,42,36,.22);
  --shadow-2:0 26px 52px -24px rgba(31,42,36,.38);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.55s;
  --d:'Playfair Display',Georgia,serif; --m:'JetBrains Mono',ui-monospace,monospace;
  --b:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--b);background:var(--surface);color:var(--ink);line-height:1.65;font-size:var(--t-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:600;line-height:1.1;overflow-wrap:break-word}
.wrap{max-width:940px;margin:0 auto;padding-inline:var(--s4)}
section{padding-block:var(--s8)}
@media(min-width:768px){section{padding-block:var(--s9)}}
.skip{position:absolute;left:-999px;top:var(--s2)}
.skip:focus{left:var(--s2);z-index:200;background:var(--ink);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r-s)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-s)}
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-weight:650;font-size:var(--t-small);height:52px;padding-inline:var(--s5);border-radius:var(--r-s);border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap;font-family:var(--b)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-green{background:var(--green);color:#EFF5F0;box-shadow:var(--shadow-1)}
.btn-gold{background:var(--gold);color:#2C2105}
.btn-outline{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.btn-wa{background:var(--wa);color:#fff}
.k{font-family:var(--m);font-size:var(--t-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy);display:block;margin-bottom:var(--s3)}
h2{font-size:var(--t-h2)}
h2 em{font-style:italic;color:var(--green)}
.lead{color:var(--muted);max-width:56ch;margin-top:var(--s3)}

/* NAV */
.nav{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);border-bottom:2px solid var(--green)}
.nav-in{max-width:940px;margin:0 auto;display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--d);font-weight:800;font-size:1rem;flex-shrink:0}
.crest{width:30px;height:34px;flex-shrink:0}
.menu{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;flex:1}
.menu::-webkit-scrollbar{display:none}
.menu a{font-size:var(--t-caption);font-weight:650;color:var(--muted);padding:var(--s2) var(--s3);border-radius:var(--r-s);white-space:nowrap;transition:.2s}
.menu a:hover,.menu a.active{background:var(--green);color:#EFF5F0}
.nav-cta{display:none;flex-shrink:0}
@media(min-width:768px){.nav-cta{display:inline-flex;height:40px;padding-inline:var(--s4);font-size:var(--t-caption)}}

/* HERO */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#EFEDE1,var(--surface));border-bottom:3px double var(--green)}
.pillars{position:absolute;inset:0;opacity:.25;pointer-events:none;display:flex;justify-content:space-around}
.pillars i{width:2px;background:linear-gradient(transparent,var(--gold),transparent)}
.hero-grid{position:relative;z-index:2;display:grid;gap:var(--s6);padding-block:var(--s7) var(--s8);align-items:center}
.stamp{font-family:var(--m);font-size:var(--t-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:var(--s4)}
.hero h1{font-size:var(--t-display);max-width:15ch}
.hero h1 em{font-style:italic;color:var(--green)}
.hero .sub{color:var(--muted);max-width:54ch;margin-block:var(--s4) var(--s6)}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap}
.photo{justify-self:center;width:min(280px,70vw);aspect-ratio:4/5;border-radius:var(--r-s);background:linear-gradient(160deg,#B9CEC0,var(--green-deep));border:2px solid var(--ink);position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.photo .ph{position:absolute;inset:0;display:grid;place-items:center;color:#EFF5F0;text-align:center;font-size:var(--t-caption);padding:var(--s4)}
.photo .ph svg{width:56px;height:56px;opacity:.85;margin-bottom:var(--s3)}
.photo::after{content:"";position:absolute;inset:9px;border:1px solid rgba(239,245,240,.45)}
@media(min-width:768px){.hero-grid{grid-template-columns:1.25fr .75fr}}

/* contact strip */
.cstrip{background:var(--dark);color:var(--dark-ink)}
.cstrip-in{max-width:940px;margin:0 auto;padding:var(--s4);display:grid;gap:var(--s3);font-size:var(--t-small)}
.cstrip a,.cstrip span{display:inline-flex;align-items:center;gap:var(--s2);color:var(--dark-ink)}
.cstrip svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
.cstrip a:hover{color:var(--gold)}
@media(min-width:768px){.cstrip-in{grid-template-columns:repeat(4,auto);justify-content:space-between}}

/* about — from the principal's desk */
.letter{background:var(--surface-2);border:1.5px solid var(--line);border-top:5px solid var(--green);border-radius:var(--r-s);padding:clamp(var(--s5),5vw,var(--s7));margin-top:var(--s6);box-shadow:var(--shadow-1)}
.letter::before{content:"FROM THE PRINCIPAL'S DESK";font-family:var(--m);font-size:var(--t-micro);letter-spacing:.22em;color:var(--gold)}
.letter p{margin-top:var(--s4);max-width:64ch;color:var(--muted)}
.letter p:first-of-type::first-letter{font-family:var(--d);font-size:2.8em;float:left;line-height:.82;padding-right:var(--s2);color:var(--green)}
.letter .sig{font-family:var(--d);font-style:italic;font-size:1.3rem;color:var(--ink);margin-top:var(--s5);display:block}

/* skills — pillars of leadership */
.skills{display:grid;gap:var(--s3);margin-top:var(--s6);grid-template-columns:1fr}
.skill{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s4);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;transition:transform .25s var(--ease),border-color .25s var(--ease)}
.skill:hover{transform:translateY(-3px);border-color:var(--green)}
.skill b{font-family:var(--d);font-size:var(--t-body)}
.skill small{color:var(--muted);display:block;font-size:var(--t-caption)}
.meter{width:110px;height:8px;background:var(--line);border-radius:var(--r-full);overflow:hidden;flex-shrink:0}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:var(--r-full)}
@media(min-width:768px){.skills{grid-template-columns:1fr 1fr}}

/* education */
.edu{margin-top:var(--s6);display:grid;gap:var(--s3)}
.deg{background:var(--surface-2);border:1.5px solid var(--ink);border-radius:var(--r-s);padding:var(--s5);display:grid;gap:var(--s2);position:relative;overflow:hidden}
.deg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.deg .yrs{font-family:var(--m);font-size:var(--t-caption);color:var(--burgundy);font-weight:700}
.deg h3{font-size:var(--t-h3)}
.deg .inst{color:var(--slate);font-weight:650;font-size:var(--t-small)}
.deg .perf{display:inline-flex;gap:var(--s2);font-family:var(--m);font-size:var(--t-caption);color:var(--green-deep);background:#E8F0E9;border-radius:var(--r-full);padding:var(--s1) var(--s3);width:fit-content;font-weight:700}
@media(min-width:768px){.edu{grid-template-columns:1fr 1fr}}

/* certificates */
.certs{display:grid;gap:var(--s3);margin-top:var(--s6)}
.cert{background:var(--surface-2);border:1.5px dashed var(--gold);border-radius:var(--r-s);padding:var(--s4)}
.cert b{font-family:var(--d);display:block;font-size:var(--t-body)}
.cert span{font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.certs{grid-template-columns:repeat(3,1fr)}}

/* experience — the annual reports */
.tenures{margin-top:var(--s7);position:relative;padding-left:var(--s6)}
.tenures::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2.5px;background:linear-gradient(var(--gold),var(--green))}
.tenure{position:relative;padding-bottom:var(--s6)}
.tenure::before{content:"";position:absolute;left:calc(-1*var(--s6) + 2px);top:4px;width:18px;height:18px;background:var(--surface);border:3px solid var(--gold);transform:rotate(45deg)}
.tenure .yr{font-family:var(--m);font-size:var(--t-caption);color:var(--burgundy);font-weight:700}
.tenure h3{font-size:var(--t-h3);margin-block:var(--s1)}
.tenure .org{font-size:var(--t-small);color:var(--slate);font-weight:650;margin-bottom:var(--s2)}
.tenure p{color:var(--muted);font-size:var(--t-small);max-width:58ch}
.tenure .kpi{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.tenure .kpi span{font-family:var(--m);font-size:var(--t-micro);color:var(--green-deep);background:#E8F0E9;border-radius:var(--r-full);padding:var(--s1) var(--s3);font-weight:700}

/* awards */
.aw{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s1);border-bottom:1px dashed var(--line);flex-wrap:wrap;align-items:baseline}
.aw .t{font-family:var(--d);font-size:var(--t-h3)}
.aw .t::before{content:"❖ ";color:var(--gold)}
.aw .n{color:var(--muted);font-size:var(--t-small);flex-basis:100%;padding-left:var(--s5)}
.aw .y{font-family:var(--m);color:var(--green);font-weight:700;font-size:var(--t-caption)}

/* gallery */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.shot{aspect-ratio:4/3;border-radius:var(--r-s);border:2px solid var(--ink);position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.shot:hover{transform:translateY(-4px)}
.shot .cap{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(transparent,rgba(21,32,25,.88));color:#E9EDE6;font-size:var(--t-caption);padding:var(--s4) var(--s3) var(--s3)}
.kg1{background:linear-gradient(150deg,#BFD3C6,#1F4D3A)}.kg2{background:linear-gradient(150deg,#E7D6AE,#A8802F)}
.kg3{background:linear-gradient(150deg,#D6BEC3,#7A2E3A)}.kg4{background:linear-gradient(150deg,#C2D0DD,#3F5A73)}
.kg5{background:linear-gradient(150deg,#D3DECC,#143528)}.kg6{background:linear-gradient(150deg,#DEDACB,#5C685F)}
@media(min-width:768px){.gal{grid-template-columns:repeat(3,1fr)}}

/* blog */
.blog{display:grid;gap:var(--s3);margin-top:var(--s6)}
.post{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s5);transition:transform .25s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.post .dt{font-family:var(--m);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy)}
.post h3{font-size:var(--t-h3);margin-block:var(--s2)}
.post p{font-size:var(--t-small);color:var(--muted)}
.post .more{display:inline-block;margin-top:var(--s3);font-size:var(--t-caption);font-weight:700;color:var(--green)}
@media(min-width:768px){.blog{grid-template-columns:repeat(3,1fr)}}

/* testimonials — board minutes */
.tst{display:grid;gap:var(--s3);margin-top:var(--s6)}
.tq{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s5);position:relative}
.tq::before{content:"MINUTED";position:absolute;top:-9px;left:var(--s4);background:var(--surface);font-family:var(--m);font-size:.56rem;letter-spacing:.22em;color:var(--green);padding-inline:var(--s2)}
.tq p{font-family:var(--d);font-style:italic;margin-bottom:var(--s3)}
.tq b{font-size:var(--t-small)}
.tq span{display:block;font-size:var(--t-caption);color:var(--muted)}
@media(min-width:768px){.tst{grid-template-columns:repeat(3,1fr)}}

/* prefs + refs */
.prefs{background:var(--dark);color:var(--dark-ink);border-radius:var(--r-m);margin-top:var(--s6);padding:clamp(var(--s6),5vw,var(--s7));box-shadow:var(--shadow-2)}
.prefs h3{font-family:var(--d);font-style:italic;color:var(--gold);font-size:1.3rem;text-align:center;margin-bottom:var(--s1)}
.prefs .sub2{text-align:center;font-family:var(--m);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:var(--s5)}
.prow{display:flex;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-bottom:1px dashed rgba(233,237,230,.22);font-size:var(--t-small);flex-wrap:wrap}
.prow span{color:var(--dark-muted);font-family:var(--m);font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.06em}
.prow b{text-align:right;overflow-wrap:anywhere}
.prow .yes{color:#93D8A6}
.refs{display:grid;gap:var(--s3);margin-top:var(--s5)}
.ref{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-s);padding:var(--s4);font-size:var(--t-small)}
.ref b{font-family:var(--d)}
.ref span{display:block;color:var(--muted);font-size:var(--t-caption)}
@media(min-width:768px){.refs{grid-template-columns:1fr 1fr}}

/* contact + QR */
.contact-grid{display:grid;gap:var(--s5);margin-top:var(--s6);align-items:center}
.cbox{background:var(--surface-2);border:2px solid var(--green);border-radius:var(--r-s);padding:var(--s5);box-shadow:var(--shadow-1)}
.crow2{display:flex;align-items:flex-start;gap:var(--s3);padding-block:var(--s3);border-bottom:1px dashed var(--line);font-size:var(--t-small)}
.crow2:last-child{border:none}
.crow2 svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}
.crow2 b{display:block;font-size:var(--t-caption);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.qr{justify-self:center;text-align:center}
.qr svg{width:150px;height:150px;border:2px solid var(--ink);border-radius:var(--r-s);background:#fff;padding:10px}
.qr p{font-size:var(--t-caption);color:var(--muted);margin-top:var(--s3);max-width:22ch;margin-inline:auto}
@media(min-width:768px){.contact-grid{grid-template-columns:1.2fr .8fr}}
.fin-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6);justify-content:center}
footer{border-top:3px double var(--green);padding:var(--s5);text-align:center;font-size:var(--t-caption);color:var(--muted)}
footer a{color:var(--green);font-weight:650}
.stick{position:fixed;inset-inline:0;bottom:0;z-index:70;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);border-top:2px solid var(--green);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));display:flex;gap:var(--s3);transform:translateY(110%);transition:transform .4s var(--ease)}
.stick.show{transform:none}
.stick .btn{flex:1}
@media(min-width:768px){.stick{display:none}}