/* ==========================================================================
   Ismam Zaman Shuptoo — Personal Profile Passport
   styles.css — structure, color, type, layout, responsiveness
   (motion/animation/transition rules live in animations.css)
   ========================================================================== */

:root{
  --cover:#3B1220;
  --cover-deep:#230A11;
  --gold:#C9A227;
  --gold-bright:#E7C568;
  --paper:#F3ECDD;
  --paper-alt:#EAE0CB;
  --ink:#241C14;
  --ink-soft:#5c5142;
  --teal:#2F6E67;
  --brick:#8C3B2E;
  --line: rgba(36,28,20,0.16);
  --gold-line: rgba(201,162,39,0.45);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  width:100%;
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;}
.mono{font-family:'Space Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
@media (min-width:640px){ .wrap{padding:0 32px;} }

/* ---------- page dots nav ---------- */
.pagenav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column; gap:16px;
}
.pagenav button{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--gold);
  background:transparent; cursor:pointer; padding:0;
}
.pagenav button.active{background:var(--gold);}
.pagenav .pn-label{
  position:absolute; right:22px; top:-4px;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em;
  color:var(--gold-bright); white-space:nowrap;
  pointer-events:none;
}
@media (max-width:860px){ .pagenav{display:none;} }

/* ---------- COVER / HERO ---------- */
.cover{
  min-height:100svh;
  background:
    radial-gradient(ellipse 900px 560px at 50% -10%, rgba(201,162,39,0.10), transparent 60%),
    linear-gradient(160deg, var(--cover) 0%, var(--cover-deep) 100%);
  color:var(--paper);
  position:relative;
  display:flex; flex-direction:column; align-items:stretch;
  padding:56px 20px 0;
  isolation:isolate;
  overflow:hidden;
}
.cover::before{ /* foil texture */
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.cover-border{
  position:absolute; inset:14px;
  border:1px solid var(--gold-line);
  pointer-events:none;
}
.cover-border::before,.cover-border::after{
  content:'';position:absolute; width:22px; height:22px;
  border:1px solid var(--gold);
}
.cover-border::before{ top:-1px; left:-1px; border-right:none; border-bottom:none;}
.cover-border::after{ bottom:-1px; right:-1px; border-left:none; border-top:none;}

/* content wrapper fills space above the MRZ strip and centers itself —
   this is what keeps the CTA/scroll-cue from ever overlapping the MRZ band */
.cover-content{
  flex:1 1 auto;
  width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 4px 48px;
  text-align:center;
}

.eyebrow{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.22em;
  color:var(--gold-bright); text-transform:uppercase; margin-bottom:24px;
  padding:0 8px;
}

.seal{
  position:relative; width:150px; height:150px; margin-bottom:26px; flex-shrink:0;
}
.seal-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed var(--gold);
}
.seal-ring2{
  position:absolute; inset:10px; border-radius:50%;
  border:1px solid var(--gold-line);
}
.seal-photo{
  position:absolute; inset:16px; border-radius:50%;
  overflow:hidden; border:2px solid var(--gold-bright);
  box-shadow:0 0 0 6px rgba(201,162,39,0.08), 0 18px 40px rgba(0,0,0,0.45);
}
.seal-photo img{width:100%;height:100%;object-fit:cover; object-position:center 18%;}

.hero-name{
  font-size:clamp(1.9rem, 8vw, 4.1rem);
  line-height:1.06; text-align:center; color:var(--paper);
  position:relative; max-width:16ch;
}
.hero-name .shine{
  background:linear-gradient(100deg, var(--paper) 20%, var(--gold-bright) 40%, var(--paper) 60%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}

.role-strip{
  margin-top:18px; overflow:hidden; position:relative;
  width:100%; max-width:420px; padding:0 12px;
}
.role-track{ display:flex; flex-direction:column; align-items:center; }
.role-track div{
  padding:5px 4px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.13em;
  color:var(--gold-bright); text-transform:uppercase;
  white-space:normal; text-align:center; line-height:1.5;
}

.tagline{
  max-width:38ch; text-align:center; margin:24px auto 0;
  font-size:clamp(0.9rem, 2.6vw, 1.02rem); line-height:1.65; color:rgba(243,236,221,0.82);
  font-style:italic; font-family:'Fraunces',serif; font-weight:500;
  padding:0 6px;
}

.cta-row{
  display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; justify-content:center;
  width:100%;
}
.btn{
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:13px 22px; border-radius:3px; border:1px solid var(--gold);
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  white-space:nowrap;
}
.btn-solid{ background:var(--gold); color:var(--cover-deep); }
.btn-ghost{ color:var(--gold-bright); }

.scrollcue{
  margin-top:38px;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.2em;
  color:var(--gold-bright); opacity:.7; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scrollcue .stem{width:1px; height:26px; background:linear-gradient(var(--gold), transparent);}

.mrz{
  position:relative; flex-shrink:0;
  padding:14px 0 max(14px, env(safe-area-inset-bottom)); background:rgba(0,0,0,0.22);
  border-top:1px solid var(--gold-line);
  overflow:hidden; width:100%;
}
.mrz-line{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:rgba(231,197,104,0.55); white-space:nowrap;
}
.mrz-line + .mrz-line{ margin-top:6px; color:rgba(231,197,104,0.35);}
.mrz-cap{
  text-align:center; font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.08em;
  color:rgba(231,197,104,0.4); margin-top:8px; padding:0 14px;
}

/* ---------- PAGE SECTIONS (paper) ---------- */
.page{
  position:relative; padding:80px 0;
  border-bottom:1px solid var(--line);
}
.page.alt{ background:var(--paper-alt); }
.page-head{
  display:flex; align-items:baseline; gap:18px; margin-bottom:44px; flex-wrap:wrap;
}
.page-num{ font-family:'Space Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:.1em; }
.page-num::before{content:'PG. ';}
.page-head h2{ font-size:clamp(1.5rem,5vw,2.5rem); }
.page-head .rule{ flex:1; height:1px; background:var(--line); min-width:40px; }

/* ---------- BIO DATA PAGE ---------- */
.bio-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
@media (max-width:820px){ .bio-grid{grid-template-columns:1fr; gap:36px; max-width:420px; margin:0 auto;} }
.bio-photo-frame{
  position:relative; aspect-ratio:3/4; border:1px solid var(--ink); background:var(--paper);
  padding:14px;
}
.bio-photo-frame .inner{ position:relative; width:100%; height:100%; overflow:hidden; }
.bio-photo-frame img{ width:100%; height:100%; object-fit:cover; filter:sepia(.12) contrast(1.03); }
.bio-photo-frame .corner{ position:absolute; width:16px; height:16px; border:1.5px solid var(--gold); }
.bio-photo-frame .corner.tl{top:6px;left:6px;border-right:none;border-bottom:none;}
.bio-photo-frame .corner.tr{top:6px;right:6px;border-left:none;border-bottom:none;}
.bio-photo-frame .corner.bl{bottom:6px;left:6px;border-right:none;border-top:none;}
.bio-photo-frame .corner.br{bottom:6px;right:6px;border-left:none;border-top:none;}
.bio-photo-cap{ margin-top:14px; text-align:center; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.15em; color:var(--ink-soft); text-transform:uppercase;}

.fields dl{ display:grid; grid-template-columns:auto 1fr; row-gap:22px; column-gap:20px; }
.fields dt{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap; padding-top:4px;
}
.fields dd{
  font-family:'Fraunces',serif; font-weight:500; font-size:1.08rem; border-bottom:1px dotted var(--line); padding-bottom:10px;
}
.fields dd small{ display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:.8rem; color:var(--ink-soft); margin-top:3px;}
.status-open{ display:inline-flex; align-items:center; gap:8px; }
.status-open .dot{ width:8px;height:8px;border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(47,110,103,0.15); }

@media (max-width:480px){
  .fields dl{ grid-template-columns:1fr; row-gap:16px; }
  .fields dt{ padding-top:0; }
  .fields dd{ font-size:1rem; }
}

/* ---------- VISA / VENTURES ---------- */
.stamp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:760px){ .stamp-grid{grid-template-columns:1fr;} }
.stamp-card{
  position:relative; background:var(--paper); border:1px solid var(--ink);
  padding:30px 24px 26px; transform:rotate(var(--r,-1.2deg));
}
.stamp-card:nth-child(2){ --r:1deg; }
.stamp-ink{
  position:absolute; top:20px; right:20px; width:64px; height:64px; border-radius:50%;
  border:2.5px solid var(--teal); color:var(--teal);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.05em; line-height:1.3;
  transform:rotate(-12deg); opacity:.85; text-transform:uppercase;
}
.stamp-card:nth-child(2) .stamp-ink{ border-color:var(--brick); color:var(--brick); transform:rotate(9deg); }
.stamp-role{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px; display:block;
}
.stamp-card h3{ font-size:1.4rem; margin-bottom:14px; max-width:75%; }
.stamp-card p{ font-size:.92rem; line-height:1.65; color:var(--ink-soft); margin-bottom:22px; }
.stamp-link{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--ink); padding-bottom:3px;
}

/* ---------- EDUCATION TIMELINE ---------- */
.edu-list{ display:flex; flex-direction:column; gap:0; }
.edu-item{
  display:grid; grid-template-columns:130px 1fr auto; gap:20px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line);
}
.edu-list .edu-item:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:700px){
  .edu-item{ grid-template-columns:1fr; gap:8px; }
  .edu-stamp{ justify-self:start; margin-top:4px; }
}
.edu-years{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink-soft); letter-spacing:.06em; }
.edu-body h3{ font-size:1.2rem; margin-bottom:6px; }
.edu-body p{ font-size:.9rem; color:var(--ink-soft); }
.edu-stamp{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  padding:8px 14px; border:1.5px solid var(--teal); color:var(--teal); border-radius:2px; white-space:nowrap;
  transform:rotate(-4deg); width:fit-content;
}
.edu-item.current .edu-stamp{ border-color:var(--brick); color:var(--brick); }

/* ---------- ACHIEVEMENTS GALLERY ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px 40px; padding-top:10px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:60px 32px; } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; gap:64px; } }

.gallery-item{
  all:unset; cursor:pointer; display:block; box-sizing:border-box; width:100%;
  position:relative; background:var(--paper); border:1px solid var(--ink);
  padding:14px 14px 20px; transform:rotate(var(--gr,-2deg));
  box-shadow:0 16px 34px rgba(36,28,20,0.16);
}
.gallery-item:nth-child(2){ --gr:1.5deg; }
.gallery-item:nth-child(3){ --gr:-1.2deg; }

/* washi-tape accent, pinning each "photo" to the page */
.gallery-tape{
  position:absolute; top:-13px; left:50%; width:64px; height:24px;
  background:linear-gradient(180deg, rgba(201,162,39,0.75), rgba(201,162,39,0.5));
  border:1px solid rgba(201,162,39,0.6);
  transform:translateX(-50%) rotate(-4deg);
  box-shadow:0 3px 6px rgba(36,28,20,0.2);
}
.gallery-item:nth-child(2) .gallery-tape{ transform:translateX(-50%) rotate(3deg); background:linear-gradient(180deg, rgba(47,110,103,0.7), rgba(47,110,103,0.45)); border-color:rgba(47,110,103,0.55); }
.gallery-item:nth-child(3) .gallery-tape{ transform:translateX(-50%) rotate(-3deg); background:linear-gradient(180deg, rgba(140,59,46,0.7), rgba(140,59,46,0.45)); border-color:rgba(140,59,46,0.55); }

/* white "matte" behind each certificate so nothing gets cropped, whatever its aspect ratio */
.gallery-photo{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  aspect-ratio:4/3; background:#fdfdfb; border:1px solid var(--line);
}
.gallery-item img{ width:100%; height:100%; object-fit:contain; }

.gallery-cap{
  display:block; text-align:center; margin-top:16px; font-family:'Fraunces',serif; font-weight:500;
  font-size:1.05rem; color:var(--ink);
}
.gallery-fig{
  display:block; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:7px;
}
.gallery-cap small{
  display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:.78rem;
  letter-spacing:.02em; text-transform:none; color:var(--ink-soft); margin-top:4px;
}

/* ---------- lightbox (opens gallery images full-size) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(20,14,10,0.92);
  display:none; align-items:center; justify-content:center; padding:40px 20px;
}
.lightbox.open{ display:flex; }
.lightbox figure{ max-width:min(90vw,780px); margin:0; text-align:center; }
.lightbox img{ width:100%; max-height:74vh; object-fit:contain; border:1px solid var(--gold-line); background:#fff; }
.lightbox figcaption{
  margin-top:16px; color:var(--paper); font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.04em; line-height:1.6;
}
#lightboxDesc{
  margin-top:12px; color:rgba(243,236,221,0.85); font-family:'Inter',sans-serif; font-size:14px;
  line-height:1.6; max-width:640px; margin-left:auto; margin-right:auto;
}
.lightbox-close{
  position:absolute; top:22px; right:26px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--gold-line); background:transparent; color:var(--gold-bright);
  font-size:22px; line-height:1; cursor:pointer;
}

/* ---------- CONTACT / BACK COVER ---------- */
.backcover{
  background:linear-gradient(200deg, var(--cover) 0%, var(--cover-deep) 100%);
  color:var(--paper); padding:90px 0 50px; position:relative; overflow:hidden;
}
.backcover .wrap{ position:relative; z-index:2; }
.backcover h2{ color:var(--paper); font-size:clamp(1.7rem,6vw,3rem); text-align:center; max-width:640px; margin:0 auto 16px; }
.backcover .sub{ text-align:center; color:rgba(243,236,221,0.7); max-width:480px; margin:0 auto 42px; line-height:1.6; padding:0 8px; }
.contact-row{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:64px; }
.contact-card{
  border:1px solid var(--gold-line); padding:24px 26px; width:100%; max-width:280px; text-align:left;
}
.contact-card .lbl{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:10px; display:block;}
.contact-card .val{ font-family:'Fraunces',serif; font-size:1.1rem; word-break:break-word; }
.contact-card .arrow{ float:right; color:var(--gold); }

footer{
  border-top:1px solid var(--gold-line); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; color:rgba(243,236,221,0.45);
}
footer .dev-credit{ order:3; width:100%; text-align:center; }
footer .dev-credit a{ color:var(--gold-bright); border-bottom:1px solid var(--gold-line); padding-bottom:1px; }
@media (min-width:640px){
  footer .dev-credit{ order:2; width:auto; text-align:center; }
}

/* ---------- small-screen global tightening ---------- */
@media (max-width:380px){
  .cover{ padding:44px 14px 0; }
  .seal{ width:128px; height:128px; }
  .eyebrow{ font-size:9.5px; letter-spacing:.16em; }
  .cta-row .btn{ padding:12px 18px; font-size:11px; }
}