/* ============================================================
   Annmaria Antony — modern edition
   Type stacks match Cognition's inspect:
   - heading/nav: nbInternational (NB International Pro)
   - body: stkBureauSerif (STK Bureau Serif)
   Drop licensed .woff2 files into assets/fonts/ to activate.
   ============================================================ */

/* ---------- STK Bureau Serif (body) ---------- */
@font-face {
  font-family: "stkBureauSerif";
  src:
    local("STK Bureau Serif"),
    local("stkBureauSerif"),
    url("assets/fonts/STKBureauSerif-Book.woff2") format("woff2"),
    url("assets/fonts/STKBureauSerif_Book.woff2") format("woff2"),
    url("assets/fonts/STKBureauSerif-Regular.woff2") format("woff2"),
    url("assets/fonts/STKBureauSerif-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "stkBureauSerif";
  src:
    local("STK Bureau Serif Italic"),
    local("stkBureauSerif Italic"),
    url("assets/fonts/STKBureauSerif-BookItalic.woff2") format("woff2"),
    url("assets/fonts/STKBureauSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "stkBureauSerif";
  src:
    local("STK Bureau Serif Medium"),
    url("assets/fonts/STKBureauSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- NB International Pro (nav / UI) ---------- */
@font-face {
  font-family: "nbInternational";
  src:
    local("NB International Pro"),
    local("NB International"),
    local("nbInternational"),
    url("assets/fonts/NBInternationalPro-Regular.woff2") format("woff2"),
    url("assets/fonts/NBInternational-Regular.woff2") format("woff2"),
    url("assets/fonts/nbInternational-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "nbInternational";
  src:
    local("NB International Pro Medium"),
    local("NB International Medium"),
    url("assets/fonts/NBInternationalPro-Medium.woff2") format("woff2"),
    url("assets/fonts/NBInternational-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "nbInternational";
  src:
    local("NB International Pro Bold"),
    local("NB International Bold"),
    url("assets/fonts/NBInternationalPro-Bold.woff2") format("woff2"),
    url("assets/fonts/NBInternational-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "nbInternational";
  src:
    local("NB International Pro Bold"),
    url("assets/fonts/NBInternationalPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbfbf9;
  --ink: #2a2118;
  --body: #3d3429;
  --gray: #8a8074;
  --line: #e4e2db;
  --accent: #2b46ff;

  /* Exact stacks from Cognition inspect */
  --font-heading: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "stkBureauSerif", "STK Bureau Serif", "Source Serif 4", Georgia, serif;
  --font-geist-mono: "GeistMono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

  --sans: var(--font-heading);
  --display: var(--font-heading);
  --serif: var(--font-body);
  --mono: var(--font-geist-mono);

  --copy: clamp(0.82rem, 1.7vh, 0.95rem);
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- app frame ---------- */
.app {
  height: 100dvh;
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  animation: settle 0.8s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app { animation: none; }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.side {
  border-right: 1px solid var(--line);
  padding: clamp(2.75rem, 8vh, 5rem) clamp(1.2rem, 2vw, 1.75rem) clamp(1.2rem, 3vh, 2rem) clamp(1.25rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  min-height: 0;
}

.side-top { display: flex; flex-direction: column; gap: 0.9rem; }

.side-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
}

.side-name:hover { color: var(--accent); }

/* nav */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.nav a {
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--gray);
  transition: color 0.25s ease;
}

.nav a:hover { color: var(--ink); }

.nav a.active { color: var(--ink); }

/* contact */
.side-contact {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.social {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.social a {
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--gray);
  transition: color 0.25s ease;
  align-self: flex-start;
}

.social a:hover { color: var(--ink); }

.email-text {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* sidebar footer */
.side-foot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.side-foot a { color: var(--gray); text-underline-offset: 0.2em; }
.side-foot a:hover { color: var(--accent); }

/* ============================================================
   MAIN
   ============================================================ */
.main {
  padding: clamp(2.75rem, 8vh, 5rem) clamp(1.25rem, 3vw, 3rem) clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.accent { color: var(--accent); }

/* labels */
.label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: clamp(0.9rem, 2vh, 1.4rem);
}

.label span { color: var(--accent); margin-right: 0.9em; }

/* body copy — dense, natural spacing */
.main,
.main p,
.about-text,
.content,
.flow,
.narrow {
  font-family: var(--serif);
}

.main p {
  font-family: var(--serif);
  font-size: var(--copy);
  font-weight: 400;
  line-height: 1.42;
  color: var(--body);
  text-align: left;
}

.main p + p { margin-top: 0.65em; }

.main a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

.main a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- about page ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 40rem) clamp(13rem, 22vw, 17rem);
  justify-content: start;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.portrait { margin: 0; }

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.6s ease;
}

.portrait img:hover { filter: grayscale(0); }

/* ---------- interests / volunteering pages ---------- */
.content { min-height: 0; }

.flow { max-width: 40rem; }

.flow p { margin: 0 0 0.9em; }

.narrow { max-width: 40rem; }

.nowrap { white-space: nowrap; }

/* ============================================================
   RESPONSIVE — small screens scroll gracefully
   ============================================================ */
@media (max-width: 1080px) {
  :root { --copy: 0.9375rem; }

  html, body { height: auto; }

  .app { height: auto; display: block; }

  .side {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .side-contact { margin-top: 0; }

  .main { padding: 1.5rem 1.25rem 2.5rem; overflow: visible; }

  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 18rem; order: -1; }
  .portrait img { filter: grayscale(0); }

}