/* ============================================================
   Assol Abasova — portfolio
   "Portfolio as a game file": warm paper, hot-pink display,
   game language in clean editorial type.
   Location:  static/styles/main.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono&display=swap');

:root{
  --paper:#F4F1EA; --paper-2:#EFEBE0; --ink:#211f1b; --muted:#6b6659;
  --line:#e0dccf; --pink:#D4537E; --pink-deep:#993556; --pink-soft:#FBEAF0;
  --white:#ffffff; --radius:14px;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"Space 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-display); line-height:1.65; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:960px; margin:0 auto; padding:1.75rem 1.5rem 5rem;}

/* nav */
.nav{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); padding-bottom:1.25rem; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:.75rem;}
.nav .brand{font-weight:700; color:var(--ink); letter-spacing:.02em; display:flex; align-items:center; gap:10px;}
.nav .brand img{height:26px; width:auto;}
.nav .links{display:flex; gap:20px; flex-wrap:wrap;}
.nav .links a{padding:4px 0; position:relative;}
.nav .links a:hover{color:var(--pink);}
.nav .links a.active{color:var(--pink);}
.nav .links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--pink);}

/* section scaffolding */
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-bottom:.4rem;}
.eyebrow .lvl{color:var(--pink);}
.section{margin-top:4rem;}
.section-title{font-size:clamp(26px,4vw,34px); font-weight:700; letter-spacing:-.01em; line-height:1.05; margin-bottom:1.5rem;}

/* hero */
.hero{padding-top:2.75rem;}
.hero .xpbar{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:2rem; flex-wrap:wrap; gap:.5rem;}
.hero .xpbar .track{display:inline-block; width:80px; height:8px; background:var(--paper-2); border-radius:5px; overflow:hidden; vertical-align:middle; margin-left:8px;}
.hero .xpbar .fill{display:block; height:100%; width:72%; background:var(--pink);}
.hero-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:2.5rem; align-items:center;}
@media (max-width:720px){ .hero-grid{grid-template-columns:1fr; gap:1.75rem;} }
.hero .tourguide{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-bottom:1rem; line-height:1.9;}
.hero h1{font-size:clamp(46px,9vw,84px); font-weight:700; letter-spacing:-.025em; line-height:.9; color:var(--pink);}
.hero h1 .sub{display:block; color:var(--ink);}
.hero .rolebar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:1.4rem 0 1.6rem;}
.pill{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; padding:5px 13px; border-radius:20px; background:var(--pink-soft); color:var(--pink-deep);}
.hero .rolebar .plain{font-family:var(--font-mono); font-size:11px; color:var(--muted);}
.portrait{position:relative; border-radius:18px; overflow:hidden; background:var(--pink-soft); border:1px solid var(--line); aspect-ratio:4/5;}
.portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode:luminosity;}
.portrait::after{content:""; position:absolute; inset:0; background:var(--pink); opacity:.14; mix-blend-mode:multiply;}
.portrait .tag{position:absolute; left:10px; bottom:10px; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; background:var(--ink); color:var(--paper); padding:4px 9px; border-radius:20px;}
.socials{display:flex; gap:10px; flex-wrap:wrap;}
.socials a{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--white); background:var(--ink); transition:transform .14s ease, background .14s ease;}
.socials a:hover{transform:translatey(-3px);}
.socials a.li{background:var(--pink-deep);} .socials a.li:hover{background:var(--pink);}
.socials a.sb{background:var(--pink);} .socials a.sb:hover{background:var(--pink-deep);}
.socials a.em{background:var(--pink-deep);} .socials a.em:hover{background:var(--pink);}

/* about */
.about-body{font-size:17px; max-width:60ch; color:var(--ink);}

/* quest log */
.quest{display:grid; grid-template-columns:auto 1fr auto; gap:1rem 1.25rem; padding:1.4rem 0; border-bottom:1px solid var(--line); align-items:baseline;}
.quest:first-of-type{border-top:1px solid var(--line);}
.quest .idx{font-family:var(--font-mono); font-size:12px; color:var(--pink); padding-top:3px;}
.quest .title{font-size:18px; font-weight:500;}
.quest .company{color:var(--pink-deep); font-weight:500;}
.quest .desc{font-size:14.5px; color:var(--muted); margin-top:.35rem; max-width:62ch;}
.quest .dates{font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap; text-align:right;}
@media (max-width:600px){ .quest{grid-template-columns:auto 1fr;} .quest .dates{grid-column:2; text-align:left; margin-top:.2rem;} }

/* stats panel */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem;}
.stat-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem;}
.stat-card h4{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pink-deep); margin-bottom:.9rem;}
.stat-row{margin-bottom:.85rem;} .stat-row:last-child{margin-bottom:0;}
.stat-row .lab{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px;}
.stat-row .lab span:last-child{font-family:var(--font-mono); font-size:11px; color:var(--muted);}
.stat-row .bar{height:7px; background:var(--paper-2); border-radius:5px; overflow:hidden;}
.stat-row .bar i{display:block; height:100%; background:var(--pink); border-radius:5px;}

/* education */
.edu{display:grid; grid-template-columns:1fr auto; gap:.4rem 1.25rem; padding:1.3rem 0; border-bottom:1px solid var(--line);}
.edu:first-of-type{border-top:1px solid var(--line);}
.edu .school{font-size:17px; font-weight:500;}
.edu .degree{color:var(--pink-deep); font-size:14.5px;}
.edu .desc{font-size:14px; color:var(--muted); grid-column:1/-1; max-width:62ch;}
.edu .dates{font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap;}

/* card grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.5rem;}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(153,53,86,.10);}
.card .thumb{aspect-ratio:16/10; background:var(--pink-soft); overflow:hidden;}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .thumb.empty{display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--pink-deep); font-size:12px; letter-spacing:.1em;}
.card-body{padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1;}
.card-body .badge{align-self:flex-start; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:var(--pink-soft); color:var(--pink-deep); margin-bottom:.6rem;}
.card-body h3{font-size:17px; font-weight:500; line-height:1.25; margin-bottom:.5rem;}
.card-body p{font-size:13.5px; color:var(--muted); flex:1;}
.card-body .meta{display:flex; justify-content:space-between; align-items:center; margin-top:.9rem; font-family:var(--font-mono); font-size:11px; color:var(--muted);}
.card-body .meta .read{color:var(--pink);}

/* map */
#map{height:520px; border-radius:var(--radius); border:1px solid var(--line); z-index:0;}
.map-legend{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem;}
.map-legend .chip{font-family:var(--font-mono); font-size:11px; padding:5px 11px; border-radius:20px; background:var(--white); border:1px solid var(--line); color:var(--muted);}
.map-legend .chip b{color:var(--pink-deep); font-weight:500;}

/* footer */
.foot{margin-top:5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;}

/* empty state */
.empty-state{margin-top:2rem; padding:2.5rem; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); color:var(--muted);}
.empty-state code{font-family:var(--font-mono); color:var(--pink-deep); background:var(--pink-soft); padding:2px 6px; border-radius:5px;}

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