/* ===== Rabi Rad — Portfolio =====
   Font: Hanken Grotesk (free match for Readymag's "Nekst")
   Palette: white bg / navy text / coral accent
   To switch to a lavender background, change --bg to #dcdcf7. */

:root{
  --bg:      #ffffff;
  --ink:     #2a3044;   /* navy text */
  --accent:  #e86c3c;   /* coral orange */
  --line:    #2a3044;   /* divider */
  --muted:   #4a4f63;
  --radius:  20px;
  --wrap:    1360px;
  --pad:     clamp(20px, 5vw, 80px);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Display type (headings) */
.display{
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:0.92;
  margin:0;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:22px; right:clamp(16px,4vw,48px);
  z-index:50;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:16px;
  border:2px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-pill{
  padding:12px 30px;
  font-size:20px;
  background:var(--bg);
}
.nav-pill:hover{ background:var(--ink); color:var(--bg); }

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(90px,14vh,160px); }

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.hero-copy{ padding-top:10px; }
.display.h1, .hero .display{
  font-size:clamp(64px, 12vw, 190px);
}
.hero-name{
  font-weight:900;
  font-size:clamp(40px, 6vw, 92px);
  line-height:1;
  letter-spacing:-0.02em;
  margin:.28em 0 0;
  text-align:right;
}
.hero-role{
  font-weight:500;
  font-size:clamp(18px, 2.2vw, 30px);
  margin:.35em 0 0;
  text-align:right;
  color:var(--muted);
}

/* Hero floating cards */
.hero-cards{
  position:relative;
  min-height:520px;
}
.hero-cards .card{
  position:absolute;
  border-radius:22px;
  box-shadow:0 24px 60px rgba(30,30,60,.22);
  object-fit:cover;
}
.card-viola{
  width:56%; top:20px; left:0;
  transform:rotate(-9deg);
  z-index:1;
}
.card-termeh{
  width:46%; top:70px; right:2%;
  transform:rotate(6deg);
  z-index:3;
}
.card-mtw{
  width:38%; top:-20px; right:8%;
  transform:rotate(3deg);
  border-radius:26px;
  z-index:2;
}

/* Hero lower band */
.hero-lower{
  margin-top:clamp(30px,6vw,70px);
  padding-bottom:clamp(60px,10vw,120px);
}
.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:20px;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:14px 34px 14px 14px;
  font-weight:800;
  font-size:clamp(17px,1.5vw,21px);
  max-width:640px;
}
.arrow-circle{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:grid; place-items:center;
}
.lead{
  font-weight:500;
  font-size:clamp(26px, 4.2vw, 56px);
  line-height:1.12;
  letter-spacing:-0.01em;
  max-width:15ch;
  margin:clamp(36px,6vw,70px) 0 0;
}
/* Actually let the lead breathe wider */
.lead{ max-width:none; }

.big-pill{
  margin-top:clamp(36px,6vw,64px);
  padding:12px 12px 12px 44px;
  font-size:clamp(24px,3vw,38px);
  font-weight:900;
  gap:26px;
}
.big-pill .arrow-circle.solid{ width:60px; height:60px; }

/* ---------- Projects ---------- */
.project{ padding-top:clamp(40px,7vw,90px); }
.project-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(30px,5vw,80px);
  align-items:center;
}
.project-title{
  font-size:clamp(46px, 6vw, 96px);
}
.project-sub{
  font-weight:700;
  font-size:clamp(20px,2.2vw,30px);
  margin:.5em 0 1.1em;
}
.project-desc{
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.55;
  max-width:44ch;
  color:var(--ink);
}
.link-underline{
  display:inline-block;
  margin-top:1.6em;
  color:var(--ink);
  font-weight:600;
  font-size:19px;
  text-decoration:none;
  border-bottom:2px solid var(--ink);
  padding-bottom:2px;
  transition:opacity .2s ease;
}
.link-underline:hover{ opacity:.6; }

/* project media cluster */
.project-media{
  position:relative;
  min-height:520px;
}
.project-media .media{
  position:absolute;
  border-radius:var(--radius);
  box-shadow:0 22px 55px rgba(30,30,60,.20);
  object-fit:cover;
}
.media-a{ width:62%; top:0;   left:2%;  z-index:1; }
.media-b{ width:52%; bottom:0; right:0;  z-index:2; }
.rot-r{ transform:rotate(4deg); }
.rot-l{ transform:rotate(-6deg); }

.rule{
  border:none;
  border-top:1.5px solid var(--line);
  margin:clamp(50px,8vw,110px) 0 0;
}

/* ---------- About ---------- */
.about{ padding-top:clamp(70px,11vw,150px); }
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px);
  align-items:start;
}
.about-head{
  font-weight:500;
  font-size:clamp(32px,5vw,68px);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0;
  max-width:16ch;
}
.about-btn{ margin-top:clamp(40px,6vw,90px); }

.about-media{ padding-top:clamp(20px,6vw,120px); }
.about-portrait{
  width:80%;
  margin-left:auto;
  border-radius:var(--radius);
  box-shadow:0 22px 55px rgba(30,30,60,.20);
}
.about-bio{
  font-size:clamp(17px,1.4vw,22px);
  line-height:1.5;
  max-width:34ch;
  margin:clamp(36px,5vw,60px) 0 0;
}

/* ---------- Footer ---------- */
.footer{
  padding-top:clamp(80px,12vw,160px);
  padding-bottom:clamp(50px,8vw,90px);
  border-top:1.5px solid var(--line);
  margin-top:clamp(60px,10vw,120px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr .7fr;
  gap:40px;
  align-items:start;
}
.footer-name{
  font-size:clamp(56px,8vw,140px);
  line-height:.9;
}
.footer-col p{ margin:0 0 2px; font-size:17px; }
.footer-tag{ margin-bottom:1.6em !important; font-weight:500; }
.footer-h{ font-weight:800; margin-bottom:.4em !important; }
.footer-link{ color:var(--ink); text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-name, .hero-role{ text-align:left; }
  .hero-cards{ min-height:64vw; margin-top:20px; }
  .project-grid{ grid-template-columns:1fr; }
  .project-media{ min-height:88vw; margin-top:10px; }
  .project-desc{ max-width:none; }
  .about-grid{ grid-template-columns:1fr; }
  .about-head{ max-width:none; }
  .about-portrait{ width:100%; }
  .about-bio{ max-width:none; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .tag-pill{ max-width:none; }
}

@media (max-width:480px){
  body{ font-size:16px; }
  .arrow-circle{ width:44px; height:44px; }
  .big-pill .arrow-circle.solid{ width:50px; height:50px; }
}