/* ============================================================
   Ersad Ahmad Ishlahuddin — personal site
   Aesthetic: editorial "engineering broadsheet" on warm paper
   ============================================================ */

:root{
  --paper:#f3efe6;
  --paper-2:#ece6d9;
  --ink:#1a1613;
  --ink-soft:#5d564c;
  --ink-faint:#8b8273;
  --line:#d8d0c0;
  --accent:#d9482a;        /* vermillion */
  --accent-deep:#b43a1f;
  --dark:#16130f;          /* near-black warm for inverted band */
  --dark-soft:#a59b88;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --mx:clamp(20px, 6vw, 120px);   /* page side margin */
  --maxw:1400px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--paper);}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--mx);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.topbar.scrolled{border-bottom-color:var(--line);}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto;}
.brand-badge{height:30px; width:auto; display:block; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.brand:hover .brand-badge{transform:translateY(-1px) rotate(-1.5deg);}
.b-dot{transform-box:fill-box; transform-origin:center; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.brand:hover .b-dot{transform:scale(1.5);}
.brand-sep{width:1px; height:16px; background:var(--line);}
.brand-name{font-family:var(--mono); font-size:12px; letter-spacing:.2px; color:var(--ink-soft);}
.topnav{display:flex; align-items:center; gap:26px;}
.topnav a{
  font-family:var(--mono); font-size:12.5px; text-decoration:none; color:var(--ink-soft);
  letter-spacing:.3px; transition:color .2s; position:relative;
}
.topnav a:hover{color:var(--accent);}
.topnav-cta{color:var(--ink)!important; border-bottom:1.5px solid var(--accent); padding-bottom:1px;}
.status{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.3px;
}
.status-dot{width:7px; height:7px; border-radius:50%; background:#2f9e57; box-shadow:0 0 0 0 rgba(47,158,87,.5); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,158,87,.45);}70%{box-shadow:0 0 0 7px rgba(47,158,87,0);}100%{box-shadow:0 0 0 0 rgba(47,158,87,0);}}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(120px,16vh,200px) var(--mx) 0;
}
.hero-meta{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.4px;
  color:var(--accent); text-transform:uppercase; margin-bottom:34px;
}
.hero-meta .dot{color:var(--ink-faint);}
.hero-meta span:not(.dot):last-child{color:var(--ink-soft);}
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(44px,8.4vw,128px); line-height:.97; letter-spacing:-.025em;
  margin:0; font-optical-sizing:auto;
}
.hero-title .line{display:block;}
.hero-title em{font-style:italic; font-weight:500;}
.hero-title .accent{color:var(--accent); font-style:italic; font-weight:500;}
.hero-foot{
  display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:end;
  margin-top:clamp(40px,6vw,76px);
}
.hero-lede{font-size:clamp(16px,1.25vw,19px); color:var(--ink-soft); max-width:54ch; margin:0;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; justify-self:end;}
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.3px; text-decoration:none;
  padding:13px 22px; border-radius:100px; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s; white-space:nowrap;
}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--accent); transform:translateY(-2px);}
.btn-solid .arr{display:inline-block; transition:transform .25s;}
.btn-solid:hover .arr{transform:translateX(4px);}
.btn-ghost{border:1.5px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}
.hero-rule{height:1px; background:var(--line); margin-top:clamp(54px,8vw,96px);}

/* ---------- ticker ---------- */
.ticker{overflow:hidden; border-bottom:1px solid var(--line); padding:18px 0; background:var(--paper);}
.ticker-track{
  display:inline-flex; align-items:center; gap:30px; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,34px); color:var(--ink);
  animation:scroll 38s linear infinite; will-change:transform;
}
.ticker-track .tk-dot{color:var(--accent); font-style:normal; font-size:.5em;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- generic section ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(80px,11vw,160px) var(--mx);}
.section-head{margin-bottom:clamp(48px,7vw,90px);}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:18px;
}
.section-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.6vw,62px);
  line-height:1.02; letter-spacing:-.02em; margin:0;
}

/* ---------- case studies ---------- */
.case{padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--line);}
.case:first-of-type{border-top:none;}
.case-grid{display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(30px,5vw,70px); align-items:start;}
.case-alt .case-grid{grid-template-columns:1.08fr 0.92fr;}
.case-alt .case-info{order:2;}
.case-alt .case-media{order:1;}
.case-no{
  font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:1px; margin-bottom:18px;
}
.case-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,40px);
  line-height:1.05; letter-spacing:-.015em; margin:0 0 8px;
}
.case-kicker{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin:0 0 22px; letter-spacing:.2px;}
.case-body{color:var(--ink-soft); max-width:48ch; margin:0 0 26px;}
.metrics{display:flex; gap:clamp(20px,3vw,40px); flex-wrap:wrap; margin-bottom:26px; padding-top:6px; border-top:1px dashed var(--line);}
.metric{display:flex; flex-direction:column; gap:2px; padding-top:14px;}
.metric-num{font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1; color:var(--ink);}
.metric-lab{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint);}
.stack{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0;}
.stack li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:5px 12px; background:color-mix(in srgb, var(--paper-2) 60%, transparent);
  transition:border-color .2s, color .2s;
}
.case:hover .stack li{border-color:var(--ink-faint);}

.case-media{display:flex; flex-direction:column; gap:14px;}
.shot{
  margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.shot img{transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.case:hover .shot{box-shadow:0 26px 60px -28px rgba(40,28,18,.45);}
.case:hover .shot-lg img{transform:scale(1.02);}
.shot-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* phone device */
.case-media-phone{align-items:center; flex-direction:row; gap:30px; flex-wrap:wrap;}
.device{
  margin:0; width:min(260px,60%); border:9px solid var(--ink); border-radius:34px; overflow:hidden;
  background:var(--ink); box-shadow:0 30px 70px -30px rgba(40,28,18,.55); position:relative;
}
.device img{border-radius:24px;}
.device-note{font-family:var(--mono); font-size:12px; color:var(--ink-faint); max-width:24ch; line-height:1.5;}

/* leadership case (text only) */
.case-grid-text{grid-template-columns:1fr 1fr;}
.case-pull{font-size:clamp(17px,1.5vw,21px); color:var(--ink); max-width:42ch;}
.case-lead .case-title{font-size:clamp(28px,3.4vw,46px);}

/* ---------- experience (dark band) ---------- */
.section-dark{
  max-width:none; width:100%; background:var(--dark); color:var(--paper);
  padding-left:0; padding-right:0;
}
.section-dark .section-head, .section-dark .timeline{max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--mx); padding-right:var(--mx);}
.section-dark .eyebrow{color:var(--accent);}
.section-dark .section-title{color:var(--paper);}
.timeline{list-style:none; padding:0; margin:0;}
.tl-item{
  display:grid; grid-template-columns:230px 1fr; gap:clamp(24px,4vw,60px);
  padding:30px 0; border-top:1px solid rgba(255,255,255,.12); align-items:baseline;
}
.tl-item:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.tl-when{font-family:var(--mono); font-size:12.5px; color:var(--dark-soft); letter-spacing:.3px; padding-top:5px;}
.tl-what h3{font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.1vw,28px); margin:0 0 8px; letter-spacing:-.01em;}
.tl-co{color:var(--accent); font-style:italic; font-weight:400;}
.tl-what p{color:var(--dark-soft); margin:0; max-width:62ch; font-size:.98em;}

/* ---------- about / skills ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:start;}
.about-copy p{color:var(--ink-soft); margin:0 0 18px;}
.lead-para{font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1.32; color:var(--ink)!important; font-weight:400; letter-spacing:-.01em; margin-bottom:26px!important;}
.about-copy strong{color:var(--accent); font-weight:600;}
.about-skills{display:flex; flex-direction:column;}
.skillset{padding:18px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:baseline;}
.skillset:last-child{border-bottom:1px solid var(--line);}
.skill-lab{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint);}
.skillset p{margin:0; color:var(--ink); font-size:.96em;}
.skillset-now .skill-lab{color:var(--accent);}
.skillset-now p{color:var(--accent); font-weight:600;}

/* ---------- footer / contact ---------- */
.footer{background:var(--dark); color:var(--paper); padding:clamp(80px,12vw,150px) var(--mx) 40px;}
.footer-inner{max-width:var(--maxw); margin:0 auto;}
.footer .eyebrow{color:var(--accent);}
.footer-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(40px,7vw,104px); line-height:.98;
  letter-spacing:-.025em; margin:0 0 40px; color:var(--paper);
}
.footer-mail{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,40px);
  color:var(--paper); text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:4px;
  transition:color .25s, border-color .25s;
}
.footer-mail:hover{color:var(--accent);}
.footer-links{display:flex; gap:28px; flex-wrap:wrap; margin-top:46px;}
.footer-links a{font-family:var(--mono); font-size:13px; color:var(--dark-soft); text-decoration:none; letter-spacing:.3px; transition:color .2s;}
.footer-links a:hover{color:var(--paper);}
.footer-base{
  max-width:var(--maxw); margin:90px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--dark-soft); letter-spacing:.2px;
}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1; transform:none;}
.hero .reveal{transition-duration:1s;}
.hero-title .line:nth-child(1){transition-delay:.05s;}
.hero-title .line:nth-child(2){transition-delay:.16s;}
.hero-title .line:nth-child(3){transition-delay:.27s;}
.hero-foot.reveal, .hero-lede.reveal{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .ticker-track{animation:none;}
  html{scroll-behavior:auto;}
  .status-dot{animation:none;}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-foot{grid-template-columns:1fr; gap:30px;}
  .hero-actions{justify-self:start;}
  .case-grid, .case-alt .case-grid, .case-grid-text, .about-grid, .hero-foot{grid-template-columns:1fr;}
  .case-alt .case-info{order:1;} .case-alt .case-media{order:2;}
  .case-media{margin-top:6px;}
  .tl-item{grid-template-columns:1fr; gap:8px;}
  .status{display:none;}
}
@media (max-width:640px){
  .topnav{gap:16px;} .brand-name, .brand-sep{display:none;}
  .topnav a:not(.topnav-cta){display:none;}
  .shot-row{grid-template-columns:1fr;}
  .case-media-phone{flex-direction:column; align-items:flex-start;}
  .footer-base{flex-direction:column; gap:6px;}
}