/* =========================================================
   Farida Rzayeva — portfolio
   Editorial light palette, hairline rules, pixel data-art
   ========================================================= */

:root{
  --paper:    #F6F3EC;
  --surface:  #FCFAF5;
  --card:     #FFFFFF;
  --ink:      #1C1B18;
  --ink-soft: #56514A;
  --ink-faint:#8B8478;
  --line:     #E1DACC;
  --line-soft:#EDE7DB;

  --c1: #6E7F63;   /* sage  */
  --c2: #4F6D7A;   /* slate */
  --c3: #A55B41;   /* clay  */
  --c4: #8496A0;   /* steel */
  --c5: #B08D57;   /* ochre */

  --display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(20px, 6vw, 96px);
  --maxw: 1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.7;
  letter-spacing:-0.005em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
canvas{image-rendering:pixelated; image-rendering:crisp-edges; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-0.01em}
p{margin:0 0 1.1em}
section{position:relative; scroll-margin-top:76px}
figure{margin:0}

/* ---------- typographic system ---------- */
.label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 26px;
}
.section-head{
  font-family:var(--display); font-size:clamp(27px,3.2vw,40px); line-height:1.14;
  letter-spacing:-0.03em; font-weight:500;
  max-width:20ch; margin:0 0 40px;
}
.section-head em, h1 em, .contact em{font-style:normal; color:var(--c3)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:32px;
  padding:18px var(--pad);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__logo{
  font-family:var(--display); font-size:17px; font-weight:500; letter-spacing:-0.02em;
  text-decoration:none; margin-right:auto;
  letter-spacing:0;
}
.nav__links{display:flex; gap:28px}
.nav__links a{
  text-decoration:none; font-size:14px; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent; transition:.2s;
}
.nav__links a:hover{color:var(--ink); border-color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-size:14.5px; font-weight:500;
  padding:12px 22px; border:1px solid var(--ink); transition:.2s; cursor:pointer;
  font-family:var(--sans); background:transparent; color:var(--ink);
}
.btn--primary{background:var(--ink); color:var(--paper)}
.btn--primary:hover{background:transparent; color:var(--ink)}
.btn--ghost{border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,80px); align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:clamp(34px,5.2vw,68px) var(--pad) clamp(30px,4.4vw,56px);
}
.hero h1{
  font-family:var(--display); font-size:clamp(30px,3.8vw,48px); line-height:1.12;
  margin-bottom:20px; letter-spacing:-0.035em; font-weight:500;
}
.hero__blurb{max-width:54ch; color:var(--ink-soft); margin-bottom:26px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.hero__meta{
  list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:6px 26px;
  font-family:var(--mono); font-size:12.5px;
}
.hero__meta a{color:var(--ink-faint); text-decoration:none; border-bottom:1px solid var(--line)}
.hero__meta a:hover{color:var(--ink); border-color:var(--ink)}
.hero__art canvas{
  display:block; width:100%; height:auto; background:var(--surface);
  border:1px solid var(--line);
}
figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint);
  margin-top:12px;
}

/* ---------- experience ---------- */
.exp{
  max-width:var(--maxw); margin:0 auto; padding:clamp(50px,7vw,100px) var(--pad);
  border-top:1px solid var(--line);
}
.exp__grid{
  display:grid; grid-template-columns:minmax(190px,250px) 1fr;
  gap:clamp(26px,5vw,72px); align-items:start; margin-top:26px;
}
.exp__pie{margin:0}
.exp__pie canvas{display:block; width:100%; height:auto; touch-action:manipulation}

/* pie legend, doubles as the control for touch and keyboard */
.legend{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:2px}
.legend button{
  appearance:none; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-left:2px solid var(--line);
  padding:4px 0 4px 10px; color:var(--ink-faint);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  transition:color .18s, border-color .18s;
}
.legend button:hover,.legend button.is-on{border-left-color:var(--slice); color:var(--ink)}
.legend button:focus-visible{outline:1px solid var(--slice); outline-offset:2px}

/* one industry at a time, driven by the pie */
.exp__panel{position:relative; min-height:210px}
.dom{
  padding:18px 0 20px 18px;
  border-left:2px solid var(--slice);
  display:none;
}
.dom.is-on{display:block; animation:domIn .28s ease both}
@keyframes domIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.dom__head{display:flex; align-items:center; gap:11px; margin-bottom:7px}
.dom__icon{width:22px; height:22px; flex:none; opacity:.85}
.dom__head h3{font-family:var(--display); font-size:21px; line-height:1; letter-spacing:-0.02em;
  font-weight:500; margin:0}
.dom__when{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint)}
.dom__co{font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin:0 0 8px}
.dom > p:last-child{margin:0; font-size:15px; color:var(--ink-soft); max-width:64ch}

/* ---------- projects ---------- */
.projects{max-width:var(--maxw); margin:0 auto; padding:clamp(50px,7vw,100px) var(--pad)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.card{
  background:var(--paper); padding:26px 24px 30px; position:relative;
  transition:background .3s;
}
.card:hover{background:var(--surface)}
.card__stage{margin-bottom:22px; background:var(--surface); border:1px solid var(--line-soft)}
.card__stage canvas{display:block; width:100%; height:auto}
.card__idx{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.1em}
.card h3{font-family:var(--display); font-size:20px; line-height:1.25; letter-spacing:-0.02em;
  font-weight:500; margin:10px 0 10px}
.card p{margin:0; font-size:14.8px; color:var(--ink-soft)}
.card__metric{
  display:block; font-family:var(--mono); font-size:12.5px; color:var(--c3);
  margin-top:16px; letter-spacing:.02em;
}
.card__stack{
  margin-top:8px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  letter-spacing:.02em;
}

/* ---------- toolkit ---------- */
.skills{max-width:var(--maxw); margin:0 auto; padding:clamp(50px,7vw,100px) var(--pad)}
.kit{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); margin-top:26px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kit__group{background:var(--paper); padding:20px 26px 22px}
.kit__head{display:flex; align-items:center; gap:11px; margin-bottom:11px}
.kit__head canvas{width:22px; height:22px; flex:none; opacity:.8}
.kit__head h4{margin:0; font-size:15.5px; font-weight:500; letter-spacing:-0.01em}
.kit__n{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-faint)}
.kit__tags{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  font-family:var(--mono); font-size:12.5px; line-height:1.85; color:var(--ink-soft);
}
.kit__tags li:not(:last-child):after{content:"/"; color:var(--line); padding:0 7px}

/* ---------- contact ---------- */
.contact{
  max-width:var(--maxw); margin:0 auto; text-align:center;
  padding:clamp(50px,7vw,100px) var(--pad) clamp(70px,9vw,130px);
  border-top:1px solid var(--line);
}
#contactScene{display:block; width:100%; max-width:760px; height:auto; margin:0 auto 40px}
.contact h2{font-family:var(--display); font-size:clamp(29px,4.2vw,50px); line-height:1.12;
  letter-spacing:-0.03em; font-weight:500; margin-bottom:18px}
.contact p{color:var(--ink-soft); margin:0 auto 34px}
.contact__links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--line); padding:24px var(--pad);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em;
}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .kit{grid-template-columns:1fr}
  .hero__art{order:2}
  .nav__links{gap:18px}
  .nav__links a{font-size:13px}
  .exp__grid{grid-template-columns:1fr}
  .exp__pie{display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center}
  .exp__pie figcaption{grid-column:1; margin-top:8px}
  .exp__pie canvas{grid-column:1; grid-row:1}
  .legend{grid-column:2; grid-row:1 / span 2; margin:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .cards{grid-template-columns:1fr}
  .nav__links a:nth-child(1),.nav__links a:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}