/* ============ Dr. Govindasamy Chinnu — professional site ============ */
:root{
  --ink:#112038; --ink-soft:#263f60; --muted:#46607f;
  --accent:#0e5c3e; --accent-2:#207a52; --gold:#6f5504;
  --yellow:#f4c521; --sky:#2f7fc4;
  --bg:#e7f1fa; --bg-2:#ffffff; --line:#d7e4f0; --shadow:0 2px 14px rgba(20,60,70,.07);
  --serif:"Book Antiqua","Palatino Linotype",Palatino,"URW Palladio L","TeX Gyre Pagella",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html{ background:#fdfeff; }
body{
  font-family:var(--serif); color:var(--ink); line-height:1.72; font-size:19.5px;
  -webkit-font-smoothing:antialiased; background:#fdfeff;
}
/* technology symbols — only in the empty gutters, never behind the text column.
   The content column is 1140px + 28px padding, so we clear 50% +/- 600px and
   fade the symbols in across the 60px beyond that. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url("watermark.svg") repeat center top; background-size:600px 600px;
  --clear:600px; --fade:660px;
  -webkit-mask-image:linear-gradient(to right,
     #000 0, #000 calc(50% - var(--fade)), transparent calc(50% - var(--clear)),
     transparent calc(50% + var(--clear)), #000 calc(50% + var(--fade)), #000 100%);
  mask-image:linear-gradient(to right,
     #000 0, #000 calc(50% - var(--fade)), transparent calc(50% - var(--clear)),
     transparent calc(50% + var(--clear)), #000 calc(50% + var(--fade)), #000 100%);
}
/* no gutters to fill on narrow screens — hide it rather than run it under the text */
@media(max-width:1320px){ body::before{display:none} }
body>*{position:relative; z-index:1}
/* ---- upper blue band: nav + hero ---- */
.band{
  background:
    radial-gradient(circle at 12% 20%, rgba(47,127,196,.20), transparent 46%),
    radial-gradient(circle at 86% 16%, rgba(42,148,99,.15), transparent 44%),
    radial-gradient(circle at 74% 88%, rgba(244,197,33,.18), transparent 48%),
    linear-gradient(180deg,#dcebfa 0%, #e6f2fb 55%, #f4f9fd 100%);
  border-bottom:1px solid var(--line);
}
.band header.hero{border-bottom:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.25;font-weight:700;color:var(--ink)}
/* ---- nav ---- */
nav{position:sticky;top:0;z-index:60;background:rgba(222,236,250,.92);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink);font-size:18px;white-space:nowrap}
.brand .mono{width:40px;height:40px;border-radius:50%;flex:0 0 40px;object-fit:cover;
  display:block;border:2px solid #fff;box-shadow:0 1px 6px rgba(23,52,86,.22);background:#dde9f5}
.nav-links{display:flex;gap:17px;flex-wrap:nowrap}
.nav-links a{color:var(--ink-soft);font-size:16px;white-space:nowrap;letter-spacing:.2px;position:relative;padding:4px 0}
.nav-links a:hover,.nav-links a.on{color:var(--accent);text-decoration:none}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--yellow)}
.burger{display:none;font-size:27.6px;background:none;border:0;cursor:pointer;color:var(--ink)}
/* ---- hero ---- */
header.hero{padding:74px 0 66px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 268px;gap:54px;align-items:center}
.eyebrow{letter-spacing:3.2px;text-transform:uppercase;font-size:14.4px;color:var(--gold);font-weight:700;margin-bottom:16px}
h1{font-size:50.6px;letter-spacing:-.4px;margin-bottom:8px}
.role{font-size:23px;color:var(--accent);margin-bottom:20px;font-style:italic}
.lede{font-size:20.1px;color:var(--ink-soft);max-width:640px;margin-bottom:28px}
.stats{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:30px}
.stat b{display:block;font-size:35.6px;color:var(--accent);line-height:1.1}
.stat span{font-size:14.9px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 26px;border-radius:3px;font-size:17.8px;border:1px solid var(--accent);
  transition:.18s}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:#0d5739;text-decoration:none}
.btn.ghost{color:var(--accent);background:transparent}
.btn.ghost:hover{background:rgba(18,112,76,.08);text-decoration:none}
.pcard{background:var(--bg-2);border:1px solid var(--line);border-radius:5px;
  padding:26px 22px 24px;text-align:center;box-shadow:var(--shadow)}
.pcard img{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:center 18%;
  border:4px solid #fff;outline:1px solid var(--line);outline-offset:4px;
  box-shadow:0 6px 20px rgba(23,52,86,.16);display:block;margin:0 auto 18px;background:#dde9f5}
.pcard h3{font-size:21.8px;line-height:1.35;margin-bottom:5px}
.pcard h3 span{font-size:16.1px;color:var(--muted);font-weight:400}
.pcard-role{font-size:16.1px;color:var(--accent);font-style:italic;margin-bottom:9px;line-height:1.5}
.pcard-loc{font-size:14.9px;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}

/* ---- sections ---- */
section{padding:66px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:38px;max-width:760px}
.sec-head h2{font-size:35.6px;margin-bottom:10px}
.sec-head h2::after{content:"";display:block;width:62px;height:4px;background:var(--yellow);margin-top:14px}
.sec-head p{color:var(--muted);font-size:19px}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:26px 28px;box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* about */
.about{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.contact-card{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:24px;box-shadow:var(--shadow)}
.contact-card h4{font-size:16.1px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.cx{display:flex;gap:12px;margin-bottom:16px;font-size:17.2px;align-items:flex-start}
.cx .ic{color:var(--accent);flex:0 0 20px;margin-top:2px}
.cx span{color:var(--ink-soft);word-break:break-word}
.about p{margin-bottom:16px;color:var(--ink-soft)}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.pillar{border-left:3px solid var(--yellow);padding:4px 0 4px 16px}
.pillar h4{font-size:19px;margin-bottom:4px}
.pillar p{font-size:16.7px;color:var(--muted);margin:0}
/* timeline */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;margin-bottom:34px}
.tl-item::before{content:"";position:absolute;left:-32px;top:8px;width:14px;height:14px;border-radius:50%;
  background:var(--bg-2);border:3px solid var(--accent)}
.tl-item.now::before{background:var(--accent)}
.tl-date{font-size:14.9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:700}
.tl-item h3{font-size:23px;margin:5px 0 3px}
.tl-org{color:var(--accent);font-style:italic;margin-bottom:4px}
.tl-sub{font-size:16.1px;color:var(--muted);margin-bottom:10px}
.tl-item ul{margin:10px 0 0 19px;color:var(--ink-soft);font-size:17.8px}
.tl-item li{margin-bottom:5px}
/* skills */
.skill h4{font-size:19.5px;margin-bottom:14px;color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{background:rgba(18,112,76,.06);border:1px solid rgba(18,112,76,.22);color:var(--ink-soft);
  padding:4px 11px;border-radius:2px;font-size:15.5px}
/* lists */
.mini{border-left:3px solid var(--yellow);padding-left:16px;margin-bottom:20px}
.mini h4{font-size:19px;margin-bottom:3px}
.mini p{font-size:16.7px;color:var(--muted)}
.mini .yr{font-size:14.4px;letter-spacing:1.2px;color:var(--gold);text-transform:uppercase;font-weight:700}
/* quote */
blockquote{border-left:3px solid var(--accent);background:var(--bg-2);padding:18px 22px;margin-bottom:18px;
  font-style:italic;color:var(--ink-soft);font-size:17.8px;box-shadow:var(--shadow)}
blockquote cite{display:block;margin-top:9px;font-style:normal;font-size:15.5px;color:var(--muted)}
/* credo — signature statement */
.credo{border-left:5px solid var(--yellow);background:linear-gradient(90deg,rgba(244,197,33,.14),rgba(244,197,33,0));
  padding:20px 24px;margin:20px 0 22px;font-size:19.5px;line-height:1.72;color:var(--ink);font-style:italic;
  box-shadow:none;border-radius:0 3px 3px 0}
.credo cite{display:block;margin-top:11px;font-style:normal;font-size:14.9px;color:var(--gold);
  letter-spacing:.9px;text-transform:uppercase;font-weight:700}

/* recommendations */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rec{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:24px 26px 20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.rec::before{content:"\201C";position:absolute;top:2px;left:14px;font-size:69px;line-height:1;
  color:var(--yellow);opacity:.55}
.rec blockquote{border:0;background:none;box-shadow:none;padding:0;margin:0 0 16px;
  font-style:italic;color:var(--ink-soft);font-size:17.8px;line-height:1.7;flex:1}
.rec figcaption{border-top:1px solid var(--line);padding-top:13px}
.rec figcaption b{display:block;font-size:17.8px;color:var(--ink)}
.rec .rec-title{display:block;font-size:15.5px;color:var(--accent);margin-top:2px}
.rec .rec-meta{display:block;font-size:14.4px;color:var(--muted);margin-top:4px;letter-spacing:.3px}

/* inline icons */
.ic{width:1em;height:1em;flex:0 0 auto;vertical-align:-.12em;stroke:currentColor;fill:none}
.sec-head h2{display:flex;align-items:center;gap:14px}
.ic-h{width:.94em;height:.94em;color:var(--accent);opacity:.9}
.skill h4{display:flex;align-items:center;gap:10px}
.ic-t{width:1.24em;height:1.24em;color:var(--accent);
  padding:6px;border:1px solid rgba(14,92,62,.22);border-radius:50%;
  background:rgba(14,92,62,.05);box-sizing:content-box}

/* footer */
footer{padding:38px 0;text-align:center;color:var(--muted);font-size:16.7px}
.notice{max-width:820px;margin:22px auto 0;font-size:14.9px;color:var(--muted);font-style:italic;line-height:1.6}
/* gallery — framed documents */
.filters{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:36px}
.filt{padding:10px 22px;border:1px solid var(--line);background:var(--bg-2);border-radius:2px;cursor:pointer;
  font-family:var(--serif);font-size:17px;color:var(--ink-soft);transition:.16s;letter-spacing:.2px}
.filt:hover{border-color:var(--accent);color:var(--accent)}
.filt.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.filt .n{opacity:.62;font-size:14.5px}

/* masonry columns — each frame keeps its certificate's own proportions */
.gal{column-count:3; column-gap:30px}

.gitem{cursor:pointer; break-inside:avoid; -webkit-column-break-inside:avoid;
  page-break-inside:avoid; display:inline-block; width:100%; margin:0 0 36px;
  transition:transform .22s ease}
.gitem:hover{transform:translateY(-6px)}

/* the frame: outer moulding -> brass hairline -> mat -> document */
.frame{
  position:relative; padding:13px; border-radius:3px;
  background:linear-gradient(150deg,#20395c 0%, #16273f 46%, #24405f 100%);
  box-shadow:0 10px 26px rgba(17,32,56,.20), 0 2px 5px rgba(17,32,56,.14);
  transition:box-shadow .22s ease;
}
.gitem:hover .frame{box-shadow:0 20px 42px rgba(17,32,56,.30), 0 3px 8px rgba(17,32,56,.18)}
.frame::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,84,.55);
  border-radius:1px; pointer-events:none; z-index:2;
}
/* aspect-ratio is set per item, inline, from the document's real dimensions */
.mat{
  background:linear-gradient(160deg,#fdfdfa 0%, #f4f1e8 100%);
  padding:18px; border-radius:1px;
  box-shadow:inset 0 1px 3px rgba(17,32,56,.16);
}
.mat img{width:100%; height:100%; object-fit:contain; display:block;
  box-shadow:0 1px 4px rgba(17,32,56,.20); background:#fff}

.plate{padding:15px 4px 0; text-align:center}
.plate .cat{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);font-weight:700}
.plate h4{font-size:17px;margin-top:6px;line-height:1.42;font-weight:400;color:var(--ink)}
.plate .yr{display:inline-block;margin-top:7px;font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:6px;min-width:56px}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(20,25,34,.94);z-index:200;display:none;
  align-items:center;justify-content:center;padding:34px}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:80vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#eee;font-size:17.8px;padding:0 30px}
.lb-x,.lb-nav{position:absolute;background:rgba(255,255,255,.11);border:0;color:#fff;cursor:pointer;
  font-family:var(--serif);border-radius:3px}
.lb-x{top:22px;right:26px;font-size:29.9px;width:46px;height:46px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:34.5px;width:52px;height:74px}
.lb-nav.prev{left:20px}.lb-nav.next{right:20px}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.23)}
@media(max-width:1000px){
  .gal{column-count:2} .grid-4{grid-template-columns:repeat(2,1fr)}
  .rec-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr} .about{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:34px} .pcard{max-width:300px;margin:0 auto}
}
@media(max-width:700px){
  body{font-size:18.4px} h1{font-size:36.8px}
  .nav-links{display:none;position:absolute;top:78px;left:0;right:0;background:var(--bg-2);
    flex-direction:column;gap:0;padding:10px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex} .nav-links a{padding:11px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .gal{column-count:1} .grid-2,.grid-3,.grid-4,.pillars{grid-template-columns:1fr}
  section{padding:46px 0}
}
@media print{ nav,.btns,.filters,.lb{display:none} body::before{display:none} .band{background:none} }