/* ==========================================================================
   linconsouza.github.io — Catppuccin Mocha (dark only)
   Palette: https://github.com/catppuccin/catppuccin
   ========================================================================== */

:root {
  --base:     #1e1e2e;
  --mantle:   #181825;
  --crust:    #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text:     #cdd6f4;
  --blue:     #89b4fa;
  --lavender: #b4befe;
  --mauve:    #cba6f7;
  --green:    #a6e3a1;
  --red:      #f38ba8;
  --maroon:   #eba0ac;
  --peach:    #fab387;
  --pink:     #f5c2e7;
  --teal:     #94e2d5;

  --accent:   var(--blue);   /* links + interactive elements */
  --accent-2: var(--red);    /* name + section headings (identity) */
}

* { box-sizing: border-box; }

html {
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  background: linear-gradient(160deg, var(--mantle), var(--base) 38%) fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Noto Sans", sans-serif;
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

/* --------------------------- sticky navbar ----------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(24, 24, 37, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--surface0);
}

.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  color: var(--text);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--accent-2); }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.topnav a {
  color: var(--subtext1);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.topnav a.active { color: var(--accent-2); }
@media (hover: hover) {
  .topnav a:hover { color: var(--accent-2); }
}

/* --------------------- subtle geometric hero motif --------------------- */

.hero-flow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* fade at the bottom AND fade out the centre (waves stay off the text) */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 78%, transparent),
    linear-gradient(to right, #000 12%, transparent 33%, transparent 67%, #000 88%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 78%, transparent),
    linear-gradient(to right, #000 12%, transparent 33%, transparent 67%, #000 88%);
  mask-composite: intersect;
}
.hero-flow svg { width: 100%; height: auto; fill: none; }

.hero-art {
  position: absolute;
  top: 0;
  height: 470px;
  width: calc((100% - 840px) / 2);
  max-width: 460px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-art-left  { left: 24px;
  background: radial-gradient(60% 44% at 40% 42%,
    color-mix(in srgb, var(--mauve) 12%, transparent), transparent 72%);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 80%, transparent),
    linear-gradient(to left, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 80%, transparent),
    linear-gradient(to left, #000 62%, transparent);
  mask-composite: intersect; }
.hero-art-right { right: 24px;
  background: radial-gradient(60% 44% at 60% 42%,
    color-mix(in srgb, var(--mauve) 12%, transparent), transparent 72%);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 80%, transparent),
    linear-gradient(to right, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 80%, transparent),
    linear-gradient(to right, #000 62%, transparent);
  mask-composite: intersect; }

.hero-art svg {
  position: absolute;
  top: 56px;
  width: 100%;
  height: auto;
  fill: none;
}
.hero-art-left svg  { left: 0; }
.hero-art-right svg { right: 0; }

/* Monochrome (mauve), graded intensity — theme-aware, no hard-coded colours. */
.art .mf          { stroke: var(--mauve); stroke-opacity: .16; stroke-width: .8; }
.art .nn          { stroke: var(--mauve); stroke-opacity: .30; stroke-width: .7; }
.art .nn-node     { fill: var(--mauve); fill-opacity: .55; stroke: none; }
.art .geo         { stroke: var(--mauve); stroke-opacity: .38; stroke-width: 1.3; }
.art .geo-lav     { stroke: var(--mauve); stroke-opacity: .26; stroke-width: 1.1; }
.art .plane       { stroke: var(--mauve); stroke-opacity: .38; stroke-width: 1; }
.art .plane-grid  { stroke: var(--mauve); stroke-opacity: .24; stroke-width: .7; }
.art .plane-fill  { fill: var(--mauve); fill-opacity: .05; stroke: none; }
.art .plane2      { stroke: var(--mauve); stroke-opacity: .34; stroke-width: 1; }
.art .plane2-grid { stroke: var(--mauve); stroke-opacity: .18; stroke-width: .7; }
.art .plane2-fill { fill: var(--mauve); fill-opacity: .04; stroke: none; }
.art .tanplane      { stroke: var(--mauve); stroke-opacity: .40; stroke-width: .9; }
.art .tanplane-fill { fill: var(--mauve); fill-opacity: .05; stroke: none; }
.art .proj        { stroke: var(--mauve); stroke-opacity: .35; stroke-width: .9; }
.art .dot         { fill: var(--mauve); fill-opacity: .50; stroke: none; }
.art .tan         { stroke: var(--mauve); stroke-opacity: .38; stroke-width: 1.1; }
.art .flow        { stroke: var(--mauve); stroke-opacity: .18; stroke-width: 1.2; }
.art .connector   { stroke: var(--mauve); stroke-opacity: .09; stroke-width: 1; }
.art .eq          { fill: var(--mauve); fill-opacity: .44; stroke: none;
                    font-family: "Georgia", "Times New Roman", serif;
                    font-style: italic; }
.art .lead        { stroke: var(--mauve); stroke-opacity: .34; stroke-width: .7;
                    stroke-dasharray: 2 3; }

/* subtle "living network" pulse on the nodes (desynced between sides) */
@keyframes artPulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.hero-art-left  .nn-node, .hero-art-left  .dot { animation: artPulse 7s ease-in-out infinite; }
.hero-art-right .nn-node, .hero-art-right .dot { animation: artPulse 8.5s ease-in-out infinite; animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) {
  .art .nn-node, .art .dot { animation: none; }
}

/* ------------------------------ header --------------------------------- */

.name {
  margin: 0 0 0.4rem;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}

.roles { margin-bottom: 1rem; }

.role {
  color: var(--text);
  font-size: 0.98rem;
}

.interests {
  color: var(--subtext0);
  margin: 0 0 1.2rem;
}

.interests-label {
  font-weight: 700;
  color: var(--text);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
}
.link:hover { text-decoration: underline; }


/* --------------------------- publications ------------------------------ */

.pubs { margin-top: 2.5rem; scroll-margin-top: 4.5rem; }

.section-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-2);
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--surface0);
}

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pub;
}

.pub {
  counter-increment: pub;
  position: relative;
  margin-bottom: 1.25rem;
  padding-left: 2.4rem;
}

.pub::before {
  content: counter(pub) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--overlay1);
  font-variant-numeric: tabular-nums;
}

.pub-main { color: var(--text); }

.pub-authors { color: var(--subtext1); }
.pub-authors strong { color: var(--text); font-weight: 700; }

.pub-title { font-weight: 500; }

.pub-venue { color: var(--subtext0); font-style: italic; }

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.btn {
  display: inline-block;
  background: var(--surface0);
  color: var(--subtext1);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 0.08rem 0.55rem;
  font-size: 0.78rem;
  font-family: inherit;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

.cite-btn.copied { color: var(--green); border-color: var(--green); }

.bibtex {
  margin: 0.55rem 0 0;
  padding: 0.8rem 0.9rem;
  background: var(--crust);
  color: var(--subtext1);
  border: 1px solid var(--surface0);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

[hidden] { display: none !important; }

/* ------------------------------ footer --------------------------------- */

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--surface0);
  color: var(--overlay1);
  font-size: 0.82rem;
}

/* ----------------------------- responsive ------------------------------ */

@media (max-width: 1200px) {
  .art { display: none; }
}

@media (max-width: 560px) {
  html { font-size: 17px; }
  .wrap { padding: 2.5rem 1.1rem 4rem; }
  .name { font-size: 1.85rem; }
  .topbar-inner { padding: 0.55rem 1.1rem; }
  .brand { font-size: 0.9rem; }
  .topnav { gap: 1rem; }
  .topnav a { font-size: 0.72rem; }
}