/* ============================================================
   PAVANIPRIYA SAJJA — PORTFOLIO
   style.css  |  Shared styles across all pages
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0f0f0f;
  --ink-soft:#555;
  --ink-faint:#999;
  --paper:#fafaf8;
  --surface:#f3f2ef;
  --card:#ffffff;
  --accent:#2d5be3;
  --accent-soft:#dde5fb;
  --accent-mid:#b3c4f7;
  --tag-bg:#f0f0ec;
  --tag-txt:#333;
  --border:#e5e4e0;
  --border-hover:#c8c7c2;
  --nav-h:64px;
  --max:1080px;
  --r:10px;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
}

a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,5vw,3rem);
  background:rgba(250,250,248,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-brand{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.nav-links{display:flex;gap:clamp(.75rem,2vw,2rem);align-items:center}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--ink-soft);
  padding:.35rem .6rem;border-radius:6px;transition:color .18s,background .18s;
  text-decoration:none;
}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-mobile-btn{display:none;flex-direction:column;gap:4px;padding:.4rem}
.nav-mobile-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* ── BUTTONS ── */
.btn-primary{
  padding:.75rem 1.75rem;border-radius:var(--r);font-weight:500;font-size:.9375rem;
  background:var(--ink);color:#fff;transition:background .18s,transform .12s;
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
}
.btn-primary:hover{background:#333}
.btn-secondary{
  padding:.75rem 1.75rem;border-radius:var(--r);font-weight:500;font-size:.9375rem;
  background:var(--accent-soft);color:var(--accent);border:1.5px solid var(--accent-mid);
  transition:background .18s,transform .12s;
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
}
.btn-secondary:hover{background:var(--accent-mid)}
.btn-primary:active,.btn-secondary:active{transform:scale(.97)}

/* ── PAGE WRAPPER ── */
.page-inner{max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,3rem)}
.page-header{margin-bottom:2.5rem}
.page-header h2{font-weight:600;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.025em;margin-bottom:.5rem}
.page-header p{color:var(--ink-soft);font-size:1rem}

/* ── TAGS ── */
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-size:.75rem;font-weight:500;padding:.25rem .65rem;border-radius:999px;background:var(--tag-bg);color:var(--tag-txt)}

/* ── DETAIL PAGE ── */
.detail-back{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:.875rem;color:var(--ink-soft);font-weight:500;
  padding:.5rem 0;margin-bottom:1.5rem;cursor:pointer;
  transition:color .15s;text-decoration:none;
}
.detail-back:hover{color:var(--ink)}
.detail-hero{
  height:clamp(220px,35vw,380px);background:var(--surface);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:4rem;
  margin-bottom:2rem;border:1px solid var(--border);position:relative;overflow:hidden;
}
.detail-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.detail-section h2{font-size:1.25rem;font-weight:600;margin-bottom:.875rem;letter-spacing:-.015em}
.detail-section p{font-size:.9375rem;line-height:1.75;color:var(--ink-soft);margin-bottom:.75rem}
.detail-section ul{padding-left:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.detail-section ul li{font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}
.detail-section .card-bg{background:#f5f7ff;border:1px solid #e0e5f5;border-radius:12px;padding:1.5rem}
.detail-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.design-process-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1rem}
.design-process-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.design-process-placeholder{
  background:var(--accent-soft);border-radius:12px;height:220px;
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  border:1px solid var(--accent-mid);
}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  .design-process-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--border);
    padding:.75rem 1.25rem 1rem;gap:.25rem;
  }
  .nav-links.open a{width:100%;padding:.6rem .75rem}
  .nav-mobile-btn{display:flex}
}