/* =========================================================================
   MOHD HAMZAH — PORTFOLIO
   Design concept: an engineering blueprint / drawing set. Hamzah builds
   systems for a living, so the site is laid out like the technical
   drawings that describe one: a title block instead of a navbar, sections
   as numbered "sheets", a schematic architecture diagram as the hero, and
   an "APPROVED" stamp motif for live, operational deployments.
   ========================================================================= */

:root{
  --paper: #eef1f7;
  --paper-dim: #e4e9f3;
  --grid-line: rgba(20,33,61,0.06);
  --grid-line-major: rgba(20,33,61,0.13);
  --ink: #14213d;
  --ink-soft: #4a5670;
  --ink-faint: #8a93a8;
  --accent: #e5502c;
  --accent-ink: #a53a1f;
  --accent-soft: rgba(229,80,44,0.10);
  --ok: #0f6e5c;
  --ok-soft: rgba(15,110,92,0.10);
  --card: #fbfcfe;
  --border: #c7d0e0;
  --border-strong: #9fadc7;
  --paper-rgb: 238,241,247;
  --cyanotype: grayscale(1) sepia(1) hue-rotate(179deg) saturate(2.6) brightness(0.92) contrast(1.05);
  --maxw: 1120px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-soft); color:var(--accent-ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--font-mono); }
h1,h2,h3{ font-family:var(--font-display); letter-spacing:-0.01em; color:var(--ink); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; }

/* blueprint grid backdrop -------------------------------------------------- */
.grid-bg{
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-major) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
}

/* crop marks — corner registration marks used on every "sheet" ------------ */
.sheet{ position:relative; }
.sheet::before, .sheet::after,
.sheet .crop-tl, .sheet .crop-br{ content:""; }
.crop{
  position:absolute; width:16px; height:16px; pointer-events:none;
  border:1.5px solid var(--border-strong); opacity:0.9;
}
.crop.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.crop.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.crop.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.crop.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* title block (site header, styled like a drawing title block) ----------- */
.titleblock{
  border-bottom:1.5px solid var(--ink);
  background:rgba(var(--paper-rgb),0.88);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:50;
}
.titleblock-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
}
.tb-left{ display:flex; align-items:center; gap:12px; }
.tb-mark{
  width:34px; height:34px; border:1.5px solid var(--ink); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:13px; flex-shrink:0;
  overflow:hidden; padding:0;
}
.tb-mark img{ width:100%; height:100%; object-fit:cover; filter:var(--cyanotype); }
.tb-id{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); line-height:1.35; }
.tb-id b{ color:var(--ink); font-weight:600; }
.tb-nav{ display:flex; gap:20px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); }
.tb-nav a:hover{ color:var(--accent); }
@media (max-width:760px){ .tb-nav{ display:none; } }

/* HERO --------------------------------------------------------------------*/
.hero{ padding:64px 0 40px; border-bottom:1px solid var(--grid-line-major); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

.stamp-line{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--ok);
  border:1px solid var(--ok); background:var(--ok-soft);
  padding:4px 10px 4px 8px; border-radius:3px; margin-bottom:22px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.stamp-dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); }

.hero h1{ font-size:clamp(38px,5.4vw,58px); font-weight:600; line-height:1.05; }
.hero .role{
  font-family:var(--font-mono); font-size:clamp(13.5px,1.6vw,15.5px);
  color:var(--accent-ink); margin-top:14px; text-transform:uppercase; letter-spacing:0.03em;
}
.hero p.desc{ max-width:560px; margin-top:20px; color:var(--ink-soft); font-size:16px; }

.spec-list{ margin-top:26px; display:flex; flex-direction:column; gap:6px; }
.spec-row{
  display:grid; grid-template-columns:110px 1fr; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
  border-bottom:1px dashed var(--border); padding:4px 0;
}
.spec-row span:first-child{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; }
.spec-row span:last-child{ color:var(--ink); }

.cta-row{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  padding:11px 20px; border-radius:3px; font-size:14px; font-weight:600;
  border:1.5px solid var(--ink); transition:all .15s ease; font-family:var(--font-body);
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn-ghost{ color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-ink); }

/* hero photo plate ("FIG. 0 — SUBJECT") ------------------------------------*/
.hero-figures{ display:flex; flex-direction:column; gap:22px; }
.photo-plate{ border:1.4px solid var(--border-strong); border-radius:4px; padding:10px; background:var(--card); position:relative; }
.photo-plate .fig-label{ font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); letter-spacing:0.08em; margin-bottom:8px; display:block; text-transform:uppercase; }
.photo-frame{ border:1px solid var(--border); border-radius:2px; overflow:hidden; aspect-ratio:4/5; max-width:220px; margin:0 auto; background:var(--paper-dim); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; filter:var(--cyanotype); }
.photo-caption{
  margin-top:10px; text-align:center; font-family:var(--font-mono); font-size:10px;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em;
}

/* architecture diagram (signature element) --------------------------------*/
.diagram{ width:100%; height:auto; }
.diagram .node-box{
  fill:var(--card); stroke:var(--ink); stroke-width:1.4;
}
.diagram .node-label{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; fill:var(--ink); }
.diagram .node-sub{ font-family:var(--font-mono); font-size:7.6px; fill:var(--ink-faint); }
.diagram .flow-line{
  stroke:var(--ink-faint); stroke-width:1.2; fill:none; stroke-dasharray:4 3;
}
.diagram .flow-line.solid{ stroke-dasharray:none; stroke:var(--ink-soft); }
.diagram .dim-label{ font-family:var(--font-mono); font-size:8px; fill:var(--accent-ink); }
.diagram .arrow{ fill:var(--ink-faint); }
.diagram .diagram-title{ font-family:var(--font-mono); font-size:9px; fill:var(--ink-faint); letter-spacing:0.08em; }

/* stat strip ---------------------------------------------------------------*/
.stats{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr);
  border:1.5px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--card);
}
.stat{ padding:18px 16px; border-right:1px solid var(--border); }
.stat:last-child{ border-right:none; }
.stat .num{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--accent-ink); }
.stat .lbl{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.03em; }
@media (max-width:700px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(odd){ border-right:1px solid var(--border); }
}

/* SECTION framing: each section is a numbered "sheet" ----------------------*/
section.sheet{ padding:56px 0; border-top:1px solid var(--grid-line-major); }
.sheet-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.sheet-no{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.08em;
}
.sheet-no b{ color:var(--accent-ink); }
.sec-title{ font-size:clamp(24px,3.2vw,30px); font-weight:600; }

/* deployments (approval stamps) --------------------------------------------*/
.deploy-board{ border:1.5px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--card); }
.deploy-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); gap:16px; flex-wrap:wrap;
}
.deploy-row:last-child{ border-bottom:none; }
.deploy-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.approved-stamp{
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--ok);
  border:1.5px solid var(--ok); border-radius:3px; padding:2px 7px;
  text-transform:uppercase; letter-spacing:0.06em; transform:rotate(-3deg); flex-shrink:0;
}
.deploy-name{ font-weight:600; font-size:15px; }
.deploy-desc{ font-size:13px; color:var(--ink-faint); margin-top:2px; }
.deploy-url{
  font-family:var(--font-mono); font-size:12.5px; color:var(--accent-ink);
  background:var(--accent-soft); padding:5px 10px; border-radius:3px; white-space:nowrap;
  border:1px solid transparent;
}
.deploy-url:hover{ border-color:var(--accent); }

/* SKILLS ---------------------------------------------------------------- */
.skill-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:700px){ .skill-grid{ grid-template-columns:1fr; } }
.skill-card{ border:1px solid var(--border); border-radius:4px; padding:18px 20px; background:var(--card); }
.skill-card h3{
  font-size:11.5px; color:var(--ink-faint); font-family:var(--font-mono); font-weight:600;
  margin-bottom:12px; text-transform:uppercase; letter-spacing:0.06em;
}
.tag-row{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  font-size:12px; font-family:var(--font-mono); padding:4px 9px; border-radius:3px;
  background:var(--paper-dim); border:1px solid var(--border); color:var(--ink-soft);
}

/* EXPERIENCE (revision log) ------------------------------------------------*/
.exp-item{ display:grid; grid-template-columns:170px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--border); }
.exp-item:last-child{ border-bottom:none; }
@media (max-width:700px){ .exp-item{ grid-template-columns:1fr; gap:8px; } }
.exp-date{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.exp-role{ font-size:17px; font-weight:600; }
.exp-company{ color:var(--accent-ink); font-size:14px; margin-top:2px; font-weight:500; }
.exp-loc{ font-size:12px; color:var(--ink-faint); margin-top:2px; font-family:var(--font-mono); }
.exp-list{ margin-top:12px; padding-left:18px; color:var(--ink-soft); font-size:14.5px; }
.exp-list li{ margin-bottom:6px; }

/* PROJECTS (drawing sheets) -------------------------------------------------*/
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:800px){ .proj-grid{ grid-template-columns:1fr; } }
.proj-card{
  position:relative; border:1px solid var(--border); border-radius:4px; padding:22px;
  background:var(--card); transition:transform .15s ease, border-color .15s ease;
}
.proj-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.proj-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.proj-code{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.proj-title{ font-size:17px; font-weight:600; font-family:var(--font-display); }
.proj-date{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.proj-subtitle{ color:var(--accent-ink); font-size:12.5px; margin-top:4px; font-weight:500; }
.proj-list{ margin-top:12px; padding-left:18px; color:var(--ink-soft); font-size:13.6px; }
.proj-list li{ margin-bottom:5px; }
.proj-stack{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.proj-stack span{ font-size:10.8px; font-family:var(--font-mono); color:var(--ink-faint); background:var(--paper-dim); border:1px solid var(--border); padding:3px 7px; border-radius:3px; }
.proj-link{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--accent-ink); border-bottom:1px solid var(--accent); }

/* EDUCATION / CERTS ----------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:700px){ .two-col{ grid-template-columns:1fr; } }
.col-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
.edu-item{ margin-bottom:16px; }
.edu-degree{ font-weight:600; font-size:15px; }
.edu-school{ color:var(--ink-soft); font-size:13.5px; margin-top:2px; }
.edu-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.cert-item{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:14px; color:var(--ink-soft); }
.cert-item .chk{ color:var(--ok); font-family:var(--font-mono); margin-top:2px; }

/* FOOTER (bottom title block) -------------------------------------------- */
footer{ padding:56px 0 40px; border-top:1.5px solid var(--ink); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.footer-cta h2{ font-size:clamp(24px,4vw,32px); }
.footer-cta p{ color:var(--ink-soft); margin-top:10px; max-width:420px; font-size:14.5px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; font-family:var(--font-mono); }
@media (max-width:640px){ .footer-links{ align-items:flex-start; } .footer-inner{ flex-direction:column; align-items:flex-start; } }
.footer-links a{ font-size:13.5px; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--accent-ink); }
.foot-bottom{ margin-top:44px; padding-top:20px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--font-mono); }

/* 404 ---------------------------------------------------------------------*/
.err-page{ min-height:70vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.err-code{ font-family:var(--font-mono); font-size:14px; color:var(--accent-ink); }
.err-page h1{ font-size:clamp(32px,6vw,52px); margin-top:10px; }
.err-page p{ color:var(--ink-soft); margin-top:12px; max-width:420px; }

/* reveal-on-scroll ----------------------------------------------------------*/
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}