/* ============================================================
   SHANU RANA — Professional profile
   shanurana.com
   Self-contained: this page shares no files with the photography
   site. Everything it needs is in this stylesheet.
   ============================================================ */

:root {
  --bg: #0b0e11;
  --bg-soft: #11151a;
  --surface: #161b21;
  --line: rgba(232, 228, 218, 0.12);
  --text: #e8e4da;
  --muted: #a39d8f;
  --accent: #c89b5a;
  --accent-soft: rgba(200, 155, 90, 0.16);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

.wrap { width: min(1200px, 92vw); margin: 0 auto; }

/* ---------- Typography ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; }

h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0.9rem 0 1rem; }

h3 { font-size: 1.25rem; }

.lead { color: var(--muted); max-width: 60ch; }

.kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.scrolled {
  background: rgba(11, 14, 17, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.2rem;
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--accent);
  color: var(--text);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn:hover { background: var(--accent); color: #14110b; }

.btn.solid { background: var(--accent); color: #14110b; }

.btn.solid:hover { background: #dab06c; }

.btn.ghost { border-color: var(--line); }

.btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ---------- Sections ---------- */

.section { padding: 6.5rem 0; }

.section.alt { background: var(--bg-soft); border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-head .more {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}

.section-head .more:hover { color: #dab06c; }

@media (max-width: 700px) {
  .section { padding: 4.5rem 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------- Hero ---------- */

.profile-hero {
  padding: 12rem 0 5.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(200, 155, 90, 0.07) 0%, transparent 60%),
    var(--bg);
}

.profile-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  font-weight: 450;
  margin-top: 1rem;
}

.profile-hero h1 em { font-style: italic; color: var(--accent); font-weight: 400; }


.profile-hero .hero-actions { margin-top: 2.4rem; }

/* ---------- Metrics band ---------- */

/* Sits between the Professional Summary and Toolbox, both plain sections —
   so it needs a rule on BOTH edges to read as its own band. */
.metrics-band {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); }

.metrics div {
  padding: 2.4rem 1.2rem;
  text-align: center;
  border-right: 1px solid var(--line);
}

.metrics div:last-child { border-right: 0; }

.metrics b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}

.metrics span {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics div:nth-child(2n) { border-right: 0; }
  .metrics div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 460px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics div { border-right: 0; border-bottom: 1px solid var(--line); }
  .metrics div:last-child { border-bottom: 0; }
}

/* ---------- Profile ---------- */

.about-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; gap: 2.5rem; } }

.about-copy .kicker { margin-bottom: 0.4rem; }

.about-copy h2 { margin-top: 0.6rem; }

.about-copy p { color: var(--muted); margin-bottom: 1.1rem; }

.about-copy p strong { color: var(--text); font-weight: 600; }

/* ---------- Portrait ----------
   The headshot PNG has a pure-black background. `mix-blend-mode: screen`
   maps black onto whatever sits behind it, so the backdrop resolves to the
   page colour exactly and the subject is unaffected. The container must stay
   transparent (no background, no isolation) or the blend has nothing to blend
   with. A light-background image would break this — re-matte it to black. */

.portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 92%);
  pointer-events: none;
  z-index: 1;
}

.portrait img { width: 100%; max-width: 430px; mix-blend-mode: screen; }

/* ---------- Toolbox ---------- */

.toolbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.4rem;
}

.tool-group {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.6rem 1.5rem 1.8rem;
}

.tool-group h3 {
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.tool-group ul { list-style: none; display: grid; gap: 0.6rem; }

.tool-group li { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

.tool-group em { font-style: normal; color: var(--accent); opacity: 0.85; }

/* ---------- Credentials ---------- */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.cert {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.6rem 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.cert:hover { border-color: var(--accent); transform: translateY(-3px); }

.cert b {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
}

.cert span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--text);
}

.cert em {
  display: block;
  margin-top: 0.55rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Education ---------- */

.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.edu {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.7rem 1.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.edu:hover { border-color: var(--accent); transform: translateY(-3px); }

/* Same gold badge as .cert b, but the labels here are whole words rather than
   acronyms — slightly tighter tracking so "Post Graduate Diploma" stays on one
   line inside the card. */
.edu b {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
}

.edu h3 { margin: 0; font-size: 1.15rem; }


/* ---------- Contact ---------- */

.contact-band {
  text-align: center;
  padding: 6rem 0;
  border-top: 1px solid var(--line);
}

.contact-band .hero-actions { justify-content: center; margin-top: 2.4rem; }

/* ---------- Photography band ----------
   Sits between the contact band (plain) and the footer (--bg-soft). It must stay
   plain and lean on its top rule for separation — a soft background here would
   merge straight into the footer. */

.personal-band {
  text-align: center;
  padding: 4.2rem 0;
  border-top: 1px solid var(--line);
}

.personal-band p {
  color: var(--muted);
  max-width: 46ch;
  margin: 0.9rem auto 0;
}

.personal-band .hero-actions { justify-content: center; margin-top: 1.9rem; }


/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 2.6rem 0;
}

.footer-note {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}


/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}