/* =========================================================
   Minimal resume layout, "Quirky" palette:
   deep navy paper, warm cream ink, sand-coloured accent dots.
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #16173a;
  --bg-raised: #1c1d45;
  --text: #f3ead9;
  --muted: #a3a3c4;
  --accent: #e5d4b6;
  --line: #3a3b66;
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --topbar-h: 46px;
  --split: 330px;      /* width of the left timeline column */
  --rail: 96px;        /* gap holding the vertical line */
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.75 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; line-height: 1.1; }
p { margin: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--topbar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.scrolled .topbar { border-bottom-color: var(--line); }
.topbar-name { display: flex; align-items: baseline; gap: .6rem; min-width: 0; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.topbar-name strong { font-weight: 600; }
.topbar-name .bullet { color: var(--muted); font-size: .8rem; }
.topbar-title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.topbar-avatar {
  width: 32px; height: 32px; overflow: hidden; background: var(--accent);
  border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%;
  opacity: 0; transform: translateY(-6px) scale(.85); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scrolled .topbar-avatar { opacity: 1; transform: none; pointer-events: auto; }
.topbar-icons { justify-self: end; display: flex; gap: 1.6rem; }
.topbar-icons a { display: grid; place-items: center; color: var(--text); opacity: .9; transition: opacity .2s, transform .2s; }
.topbar-icons a:hover { opacity: 1; transform: translateY(-1px); }
.icon { display: block; }

/* ---------- Hero ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--topbar-h) + 3.5rem) 16px 0;
  position: relative; text-align: center;
}
.hero-name {
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1;
}
.hero-region {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .6rem;
  margin-top: 1.4rem; color: var(--muted); font-size: 1rem; letter-spacing: .02em;
}
.hero-region .icon { width: 17px; height: 17px; color: var(--accent); margin-right: .1rem; }
.hero-region .sep { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-rule { display: block; width: min(280px, 50vw); height: 3px; background: var(--accent); margin: 2rem 0 2.75rem; border-radius: 2px; }
.hero-avatar {
  width: min(310px, 70vw); aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--accent);
  border-radius: 60% 40% 52% 48% / 46% 58% 42% 54%;
  animation: blob 14s ease-in-out infinite;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 52% 48% / 46% 58% 42% 54%; }
  50% { border-radius: 44% 56% 46% 54% / 56% 44% 58% 42%; }
}

/* ---------- Sections ---------- */
.section { max-width: 1040px; margin: 0 auto; padding: 4.5rem 16px 2rem; }
.section-head { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-bottom: 4rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; }
.dots { display: flex; gap: 7px; }
.dots i { width: 9px; height: 8px; background: var(--accent); border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%; }
.dots i:nth-child(even) { transform: rotate(18deg); }

#about { padding-top: 3.5rem; }

.prose p + p { margin-top: 1rem; }
.prose a { text-decoration-color: var(--accent); text-underline-offset: 3px; }

.about { max-width: 740px; margin: 0 auto; text-align: center; font-size: 1.05rem; }

/* ---------- Split timeline ---------- */
.timeline {
  list-style: none; margin: 0 auto; padding: 0;
  position: relative; display: grid; gap: 4.5rem;
  max-width: 920px;
}
.timeline::before {
  content: ""; position: absolute; top: .6rem; bottom: 0;
  left: calc(var(--split) + var(--rail) / 2);
  width: 1px; background: var(--line);
}
.tl-item { display: grid; grid-template-columns: var(--split) var(--rail) 1fr; align-items: start; }
.tl-left { text-align: right; }
.tl-period { font-size: .92rem; color: var(--text); opacity: .9; }
.tl-left h3 { font-size: 1.3rem; font-weight: 600; margin: .35rem 0 .45rem; letter-spacing: -0.01em; }
.tl-org { color: var(--text); opacity: .85; }
.via { color: var(--muted); white-space: nowrap; }
.tl-dot {
  justify-self: center; position: relative; z-index: 1;
  width: 13px; height: 12px; margin-top: .45rem;
  background: var(--accent);
  border-radius: 58% 42% 50% 50% / 55% 60% 40% 45%;
}
.tl-item:nth-child(even) .tl-dot { transform: rotate(35deg); }
.tl-right { font-size: 1rem; }
.tech { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; }
.tech li {
  font-size: .78rem; line-height: 1; letter-spacing: .01em; color: var(--accent);
  padding: .4rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---------- Skills, hobbies, contact ---------- */
.inline-list { max-width: 740px; margin: 0 auto; text-align: center; font-size: 1.05rem; line-height: 1.9; }
.inline-list span:not(.sep) { white-space: nowrap; }
.inline-list .sep { color: var(--muted); }
.contact-intro { text-align: center; max-width: 620px; margin: 0 auto 1.75rem; font-size: 1.05rem; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; }
.contact-links a {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  padding: .55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .2s, background .2s;
}
.contact-links a:hover { border-color: var(--accent); background: var(--bg-raised); }

/* ---------- Footer ---------- */
.site-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 5rem 16px 2.5rem; }

/* ---------- 404 ---------- */
.not-found .contact-intro { margin-top: 0; }

/* ---------- Reveal on scroll (only when JS is available) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --split: 260px; --rail: 64px; }
}
@media (max-width: 680px) {
  :root { --rail: 32px; }
  .topbar-title, .topbar-name .bullet { display: none; }
  .topbar-icons { gap: 1.1rem; }
  .hero-region { font-size: .88rem; gap: .3rem .4rem; letter-spacing: 0; }
  .hero-region .icon { width: 15px; height: 15px; }
  .section { padding-top: 3.5rem; }
  .section-head { margin-bottom: 2.75rem; }
  .timeline { gap: 2.75rem; }
  .timeline::before { left: calc(var(--rail) / 2); }
  .tl-item { grid-template-columns: var(--rail) 1fr; }
  .tl-left { text-align: left; grid-column: 2; }
  .tl-dot { grid-column: 1; grid-row: 1; }
  .tl-right { grid-column: 2; margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}