/* ============================================================
   AISHANI SAMADDER — SHARED STYLES
   All pages import this. Edit colours/fonts here to update
   the look of the entire site at once.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* ── COLOUR TOKENS ── */
:root {
  --ink:        #1a1714;
  --paper:      #f5f0e8;
  --warm-mid:   #c8bfa8;
  --accent:     #c0392b;
  --accent-soft:#e8d5d0;
  --muted:      #7a7060;
  --border:     #ddd5c0;
  --dark-bg:    #121008;
  --serif:      'Libre Baskerville', Georgia, serif;
  --display:    'Instrument Serif', Georgia, serif;
  --mono:       'DM Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
}

/* ── NOISE OVERLAY ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:0.4;
}

/* ── NAVIGATION ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 3rem;
  background:rgba(245,240,232,0.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:var(--mono); font-size:0.8rem;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color 0.2s;
}
.nav-logo:hover { color:var(--ink); }
.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color 0.2s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--accent);
  transform:scaleX(0); transition:transform 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--ink); }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }

/* Hamburger (mobile) */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span {
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:all 0.3s;
}
.nav-mobile {
  display:none; position:fixed; top:57px; left:0; right:0;
  background:rgba(245,240,232,0.98); border-bottom:1px solid var(--border);
  padding:1.5rem 2rem; z-index:99; flex-direction:column; gap:1.2rem;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  font-family:var(--mono); font-size:0.82rem;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.nav-mobile a:hover { color:var(--ink); }

/* ── PAGE WRAPPER ── */
.page-wrap { max-width:1100px; margin:0 auto; padding:0 3rem; }

/* ── SECTION SHARED ── */
section { padding:5.5rem 0; }
.section-header {
  display:flex; align-items:baseline; gap:1.5rem;
  margin-bottom:3.5rem; padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.section-num { font-family:var(--mono); font-size:0.7rem; color:var(--accent); letter-spacing:0.1em; }
.section-title { font-family:var(--display); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; padding:0.75rem 1.75rem;
  background:var(--ink); color:var(--paper);
  text-decoration:none; font-family:var(--mono);
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  transition:background 0.2s, transform 0.2s; border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--accent); transform:translateY(-1px); }
.btn-secondary {
  display:inline-block; padding:0.75rem 1.75rem;
  border:1px solid var(--border); color:var(--muted);
  text-decoration:none; font-family:var(--mono);
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  transition:border-color 0.2s, color 0.2s; background:none; cursor:pointer;
}
.btn-secondary:hover { border-color:var(--ink); color:var(--ink); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── FOOTER ── */
footer {
  background:var(--dark-bg); color:#555;
  padding:2.5rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em;
}
.footer-links { display:flex; gap:2rem; }
.footer-links a { color:#555; text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .page-wrap { padding:0 1.5rem; }
  section { padding:4rem 0; }
  footer { flex-direction:column; gap:1rem; text-align:center; padding:2rem 1.5rem; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
}