/* =========================================================
   nazrulhisham.com — shared styles
   Edit colors, fonts, and the hero image URL in :root below.
   ========================================================= */
:root{
  --text:#333;
  --heading:#111;
  --accent:#222;
  --link:#0a6b3b;          /* green accent used on hover/links */
  --rule:#eaeaea;
  --bar:#fff;
  /* ---- HERO / BANNER IMAGE — replace this URL ---- */
  --hero:url("https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?q=80&w=2400&auto=format&fit=crop");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  color:var(--text);
  line-height:1.66;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover,a:focus{color:var(--link);text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
figure{margin:0;}

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.6em 1em;z-index:100000;}
.skip-link:focus{left:6px;top:6px;}

/* ---------- Header / hero ---------- */
.site-header{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.site-header--inner{min-height:42vh;}      /* shorter banner on inner pages */
.custom-header-media{
  position:absolute;inset:0;
  background:var(--hero) center/cover no-repeat;
  z-index:0;
}
.custom-header-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.42));
}

/* Top navigation */
.navigation-top{
  position:relative;z-index:3;
  background:var(--bar);
  border-bottom:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.navigation-top.is-fixed{position:fixed;top:0;left:0;right:0;animation:dropIn .3s ease;}
@keyframes dropIn{from{transform:translateY(-100%);}to{transform:translateY(0);}}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 2em;display:flex;align-items:center;}
.main-menu{flex:1;justify-content:space-between;}
.menu-toggle{
  display:none;background:none;border:0;
  font-family:inherit;font-size:.85rem;font-weight:600;letter-spacing:.5px;
  padding:1.1em 0;color:var(--accent);cursor:pointer;
}
.main-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
.main-menu a{
  display:block;padding:1.35em 1.1em;
  font-size:1.02rem;font-weight:600;letter-spacing:.3px;color:var(--accent);
}
.main-menu a:hover{color:var(--link);text-decoration:none;}
.main-menu li:first-child a{padding-left:0;}
.main-menu .current a{color:var(--link);box-shadow:inset 0 -3px 0 var(--link);}

/* Branding over image */
.site-branding{
  position:relative;z-index:2;margin-top:auto;
  padding:0 2em 5.5em;max-width:1000px;margin-left:auto;margin-right:auto;width:100%;color:#fff;
}
.site-header--inner .site-branding{padding-bottom:2.5em;}
.site-title{font-size:3.4rem;line-height:1.05;font-weight:800;margin:0 0 .25em;letter-spacing:-.5px;}
.site-header--inner .site-title{font-size:2.2rem;}
.site-title a{color:#fff;}
.site-title a:hover{color:#fff;text-decoration:none;opacity:.85;}
.site-description{font-size:1.05rem;font-weight:400;margin:0;opacity:.92;}

/* Scroll-down arrow (home only) */
.menu-scroll-down{
  position:absolute;z-index:4;left:50%;bottom:1.6em;transform:translateX(-50%);
  color:#fff;font-size:1.4rem;line-height:1;animation:bob 2s ease-in-out infinite;
}
.menu-scroll-down:hover{color:#fff;text-decoration:none;opacity:.8;}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* ---------- Content ---------- */
.site-content{max-width:740px;margin:0 auto;padding:4.5em 2em 3.5em;}
.entry-title{font-size:2.2rem;font-weight:800;color:var(--heading);letter-spacing:-.4px;margin:0 0 1em;}
.site-content h2{font-size:1.5rem;font-weight:800;color:var(--heading);margin:1.8em 0 .6em;letter-spacing:-.2px;}
.site-content h3{font-size:1.12rem;font-weight:700;color:var(--heading);margin:1.6em 0 .5em;}
.site-content p{font-size:1.06rem;margin:0 0 1.3em;}
.site-content strong{font-weight:600;color:var(--heading);}
.lead{font-size:1.15rem;}
.section-rule{border:0;border-top:1px solid var(--rule);margin:2.6em 0;}

/* Figures */
.fig{margin:1.8em 0;}
.fig img{border-radius:2px;}
.fig figcaption{font-size:.86rem;color:#666;margin-top:.6em;line-height:1.5;}
.placeholder-note{
  font-size:.72rem;letter-spacing:.4px;text-transform:uppercase;color:#b06a00;
  background:#fff8ec;border:1px dashed #e6c88a;border-radius:3px;
  display:inline-block;padding:.25em .6em;margin-top:.5em;
}

/* People */
.person{display:flex;gap:1.6em;align-items:flex-start;margin:0 0 2.6em;}
.person__photo{flex:0 0 170px;}
.person__photo img{width:170px;height:170px;object-fit:cover;border-radius:3px;background:#f0f0f0;}
.person__body{flex:1;}
.person__name{font-size:1.15rem;font-weight:700;color:var(--heading);margin:0 0 .1em;}
.person__role{font-style:italic;color:#666;}
.person__body p{margin:.6em 0 0;font-size:1rem;}
.alumni-list{list-style:none;padding:0;margin:0;}
.alumni-list li{padding:.55em 0;border-bottom:1px solid var(--rule);font-size:1rem;}

/* Publications */
.pub-list{list-style:none;padding:0;margin:0;}
.pub-list li{padding-left:1.6em;text-indent:-1.6em;margin:0 0 1.15em;font-size:1rem;line-height:1.6;}
.pub-cover{float:right;width:120px;margin:.2em 0 1em 1.4em;}
.tag{font-style:italic;color:var(--link);}

/* Protocols / downloads */
.download-list{list-style:none;padding:0;margin:1.4em 0;}
.download-list li{margin:0 0 .7em;}
.download-list a{
  display:inline-flex;align-items:center;gap:.6em;
  border:1px solid var(--rule);border-radius:4px;padding:.7em 1em;
  font-size:.95rem;font-weight:600;color:var(--accent);text-decoration:none;
}
.download-list a:hover{border-color:var(--link);color:var(--link);}

/* Contact */
.contact-block{font-size:1.08rem;line-height:1.8;}
.contact-block strong{display:block;font-size:1.15rem;}
.map-embed{margin-top:2em;border-radius:4px;overflow:hidden;border:1px solid var(--rule);}
.map-embed iframe{display:block;width:100%;height:340px;border:0;}

/* ---------- Homepage intro (photo + who I am) ---------- */
.intro{display:flex;gap:1.9em;align-items:flex-start;margin:0 0 .5em;}
.intro__photo{flex:0 0 180px;}
.intro__photo img{width:180px;height:180px;object-fit:cover;border-radius:3px;background:#f0f0f0;}
.intro__body{flex:1;min-width:0;}
.intro__body .entry-title{font-size:1.9rem;margin:.15em 0 .7em;line-height:1.25;}
.eyebrow{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--link);margin:0;font-weight:600;}
.intro__links{margin-top:1.6em;display:flex;gap:.7em;flex-wrap:wrap;}

/* Buttons */
.btn{display:inline-block;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.85rem;font-weight:600;
  padding:.65em 1.3em;border-radius:8px;background:var(--link);color:#fff;border:1px solid var(--link);
  transition:background .15s,transform .15s,box-shadow .15s;}
.btn:hover,.btn:focus{background:#08592f;border-color:#08592f;color:#fff;text-decoration:none;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,107,59,.22);}
.btn--ghost{background:transparent;color:var(--link);}
.btn--ghost:hover,.btn--ghost:focus{background:var(--link);color:#fff;}

/* Card grid (research teasers on the homepage) */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1em;margin:1.4em 0 .4em;}
.card{display:block;padding:1.4em 1.3em;border:1px solid var(--rule);border-radius:10px;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s;}
.card:hover,.card:focus{border-color:var(--link);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.07);}
.card__num{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.72rem;letter-spacing:.12em;
  color:var(--link);font-weight:600;}
.card h3{margin:.35em 0 .4em !important;font-size:1.02rem;}
.card p{font-size:.93rem !important;margin:0 !important;color:#555;line-height:1.55;}

/* Tool list on the homepage */
.toollist{list-style:none;padding:0;margin:1.2em 0 1.6em;}
.toollist li{padding:.7em 0;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.6;}
.toollist li:first-child{border-top:1px solid var(--rule);}

/* Inline identifier links (ORCID / Scholar / LinkedIn) */
.idlist{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.85rem;color:#777;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--rule);padding:2.6em 2em;text-align:center;}
.social-links{list-style:none;display:flex;justify-content:center;gap:1.4em;margin:0 0 1.2em;padding:0;}
.social-links a{font-size:.82rem;font-weight:600;letter-spacing:.4px;color:var(--accent);}
.copyright{font-size:.8rem;color:#767676;margin:0;}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .site-title{font-size:2.3rem;}
  .site-header--inner .site-title{font-size:1.7rem;}
  .site-branding{padding-bottom:6.5em;}
  .site-header--inner .site-branding{padding-bottom:2em;}
  .menu-toggle{display:block;}
  .main-menu{display:none;flex-direction:column;width:100%;padding-bottom:.6em;}
  .main-menu.is-open{display:flex;}
  .main-menu a{padding:.7em 0;}
  .main-menu .current a{box-shadow:none;}
  .nav-inner{flex-direction:column;align-items:stretch;}
  .person{flex-direction:column;gap:1em;}
  .person__photo{flex-basis:auto;}
  .person__photo img{width:140px;height:140px;}
  .pub-cover{float:none;width:120px;margin:.2em 0 1em;}
  .intro{flex-direction:column;gap:1.2em;}
  .intro__photo{flex-basis:auto;}
  .intro__photo img{width:150px;height:150px;}
  .intro__body .entry-title{font-size:1.55rem;}
  .cardgrid{grid-template-columns:1fr;}
}
@media (min-width:769px) and (max-width:980px){
  .cardgrid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .menu-scroll-down,.navigation-top.is-fixed{animation:none;}
}

/* =========================================================
   Research page: Sequence Lab + CRISPR illustration
   ========================================================= */
:root{
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --baseA:#1FA179; --baseT:#E0533B; --baseG:#E0A02C; --baseC:#3E7CC0;
  --cut:#1C6B4A; --gfp:#C6F24E;
  --paper:#f7f6f1; --line2:#e3e0d6;
}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin:0 0 .4em}

/* research focus blocks */
.rblock{display:grid;grid-template-columns:auto 1fr;gap:1.6em;padding:1.8em 0;border-top:1px solid var(--rule);}
.rblock .rnum{font-family:var(--mono);font-size:.8rem;color:var(--link);padding-top:.3em}
.rblock h3{margin:0 0 .4em}
.rblock p{margin:0 0 .7em;font-size:1rem}
.chiprow{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.3em}
.chip-static{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;padding:.3em .7em;border-radius:20px;border:1px solid var(--line2);color:var(--heading);background:var(--paper)}

/* generic tool card shell */
.tool{background:var(--paper);border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin:1.4em 0 0}
.tool-top{display:flex;align-items:center;justify-content:space-between;gap:.9em;padding:1em 1.2em;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.tool-title{font-weight:800;color:var(--heading)}
.tool-title small{display:block;font-family:var(--mono);font-weight:400;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:#7a7a70;margin-top:2px}
.tool-body{padding:1.2em}
.btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;padding:.7em 1.1em;border-radius:8px;display:inline-flex;align-items:center;gap:.5em;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--link);color:#fff}
.btn-primary:hover{background:#08592f;color:#fff}
.btn-ghost{border-color:var(--line2);color:var(--heading);background:#fff}
.btn-ghost:hover{border-color:var(--heading)}

/* Sequence Lab */
.tabs{display:flex;gap:.3em;flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:.75rem;padding:.5em .9em;border-radius:7px;border:1px solid var(--line2);background:#fff;color:var(--heading);cursor:pointer}
.tab[aria-selected="true"]{background:var(--heading);color:#fff;border-color:var(--heading)}
.lab textarea,.lab input[type=text]{width:100%;font-family:var(--mono);font-size:.9rem;background:#fff;border:1px solid var(--line2);border-radius:9px;padding:.8em .9em;color:var(--heading);resize:vertical;line-height:1.6}
.lab label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#7a7a70;display:block;margin:0 0 .5em}
.lab .row2{display:grid;grid-template-columns:1fr 1fr;gap:.9em}
.lab-actions{display:flex;gap:.6em;flex-wrap:wrap;margin-top:.9em}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em;margin-top:1.1em}
.stat{background:#fff;border:1px solid var(--line2);border-radius:10px;padding:.8em .9em}
.stat .k{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:#7a7a70}
.stat .v{font-weight:800;font-size:1.3rem;color:var(--heading);margin-top:2px}
.out{margin-top:1em}
.out h4{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#7a7a70;margin:0 0 .4em;font-weight:500}
.seqout{font-family:var(--mono);font-size:.86rem;background:#fff;border:1px solid var(--line2);border-radius:9px;padding:.8em .9em;white-space:pre-wrap;word-break:break-all;line-height:1.7;color:var(--heading)}
.seqout .A{color:var(--baseA)}.seqout .T,.seqout .U{color:var(--baseT)}.seqout .G{color:var(--baseG)}.seqout .C{color:var(--baseC)}
.hit{font-family:var(--mono);font-size:.82rem;padding:.6em .8em;border:1px solid var(--line2);border-radius:8px;background:#fff;margin-bottom:.5em;display:flex;justify-content:space-between;gap:.8em;flex-wrap:wrap}
.hit .g{color:var(--link);font-weight:600}.hit .pam{color:var(--baseT)}
.muted{color:#7a7a70;font-size:.92rem}
.aln{font-family:var(--mono);font-size:.9rem;background:#fff;border:1px solid var(--line2);border-radius:9px;padding:.9em;line-height:1.5;overflow-x:auto;white-space:pre}

/* CRISPR illustration */
.crispr-controls{display:flex;gap:1.2em;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.1em}
.cc-group{display:flex;flex-direction:column;gap:.5em}
.cc-label{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#7a7a70}
.cc-chips{display:flex;gap:.4em;flex-wrap:wrap}
.cc-chip{font-family:var(--mono);font-size:.76rem;padding:.5em .8em;border-radius:8px;border:1px solid var(--line2);background:#fff;color:var(--heading);cursor:pointer;transition:.15s}
.cc-chip small{opacity:.7;font-style:italic}
.cc-chip:hover{border-color:var(--link)}
.cc-chip.sel{background:var(--link);color:#fff;border-color:var(--link)}
.cc-run{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:.85rem;padding:.75em 1.4em;border-radius:9px;border:0;background:var(--heading);color:#fff;cursor:pointer;transition:.15s}
.cc-run:hover{transform:translateY(-1px)}
.cc-run:disabled{opacity:.5;cursor:wait;transform:none}

.crispr-stage{position:relative;background:#F4F6F1;border:1px solid var(--line2);border-radius:12px;padding:1.3em 1.3em 1.4em;overflow:hidden}

.cr-track{margin-bottom:.9em}
.cr-tl{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#7a7a70;display:flex;justify-content:space-between;margin-bottom:.3em}
.cr-seq{font-family:var(--mono);font-size:clamp(13px,2.4vw,17px);letter-spacing:.5px;white-space:nowrap;overflow-x:auto;padding-bottom:.2em}
.cr-seq .b{display:inline-block;transition:color .3s,background .3s,transform .3s}
.b.A{color:var(--baseA)}.b.T{color:var(--baseT)}.b.G{color:var(--baseG)}.b.C{color:var(--baseC)}.b.U{color:var(--baseT)}
.b.dim{color:#AEB9AF}
.b.spacer{background:rgba(198,242,78,.35);border-radius:3px}
.b.pam{background:rgba(224,83,59,.16);border-radius:3px;color:#B23A22}
.b.gap{color:var(--baseT);font-weight:600}
.b.edited{background:var(--gfp);color:var(--ink,#0C1512);border-radius:3px;font-weight:700;transform:translateY(-2px)}
/* the cut site: a blinking break marker between two bases */
.b.cutsite{position:relative}
.b.cutsite::before{content:"";position:absolute;left:-2px;top:-3px;bottom:-3px;width:2px;
  background:var(--cut);border-radius:2px;opacity:0;transition:opacity .3s}
.stage-cut .b.cutsite::before,.stage-repair .b.cutsite::before{opacity:1;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

.cr-guide{opacity:0;transition:opacity .4s}
.stage-bind .cr-guide,.stage-cut .cr-guide,.stage-repair .cr-guide{opacity:1}
.cr-cut{font-family:var(--mono);font-size:.72rem;color:var(--cut);margin-top:.25em;min-height:1.1em;opacity:0;transition:opacity .3s}
.stage-cut .cr-cut,.stage-repair .cr-cut{opacity:1}
.cut-mark{color:var(--cut);font-weight:700}
.cr-edited{display:none}
.stage-repair .cr-edited{display:block;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cr-readout{margin-top:1em;border-top:1px solid var(--line2);padding-top:.9em;font-family:var(--mono);font-size:.85rem;color:#555;line-height:1.6}
.cr-readout .stat{color:var(--cut);font-weight:600}
.cr-steps{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.9em}
.cr-step{font-family:var(--mono);font-size:.68rem;padding:.35em .7em;border-radius:20px;border:1px solid var(--line2);color:#7a7a70}
.cr-step.on{background:var(--cut);color:#fff;border-color:var(--cut)}

/* footer social icons */
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--rule);border-radius:9px;color:#555;transition:.15s}
.social-links a:hover{border-color:var(--link);color:var(--link);transform:translateY(-2px)}
.social-links a svg{width:19px;height:19px;display:block}

@media(max-width:768px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .lab .row2{grid-template-columns:1fr}
  .rblock{grid-template-columns:1fr;gap:.6em}
  .cc-run{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .cr-guide,.cr-cut{transition:none}
  .b.cutsite::before{animation:none}
}

/* embedded tool iframes (Tools page) */
.tool-embed{width:100%;border:0;display:block;margin:.4em 0 0;min-height:420px;overflow:hidden}

/* Wide layout for the Tools page (desktop only) — tools fill the space,
   text stays at a readable measure. Mobile is unchanged. */
.site-content.wide{max-width:1120px;}
.site-content.wide > h1,
.site-content.wide > p{max-width:72ch;}
.site-content.wide .tool-embed{width:100%;}