/* ============================================================
   Francesco Martinuzzi — hand-built personal site.
   Plain, whitespace-led layout (in the spirit of a clean modern
   academic homepage), with a couple of quiet hand-made touches:
   monospace accents, a blinking cursor, and the attractor canvas.
   One stylesheet, no build step, no dependencies.
   ============================================================ */

:root {
  --bg:        #fbfaf7;
  --ink:       #1c1c1c;
  --muted:     #68655f;
  --line:      #e4e1da;
  --accent:    #9a3b2f;   /* oxide red, used sparingly */
  --accent2:   #3f6b66;   /* muted teal, used sparingly */
  --link:      #1a4f8a;
  --link-vis:  #6a3d9a;
  --code-num:  #8a6d1a;   /* amber, code-block numbers only */
  --mono: "Courier New", "DejaVu Sans Mono", ui-monospace, monospace;
  --serif: Georgia, "Times New Roman", Times, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #141414;
    --ink:       #e7e4dc;
    --muted:     #9c988f;
    --line:      #333029;
    --accent:    #d97a5f;
    --accent2:   #7fbdb5;
    --link:      #7fb0e6;
    --link-vis:  #c39be0;
    --code-num:  #d9b25f;
  }
}

/* explicit toggle choice beats the OS preference above (higher selector specificity) */
:root[data-theme="light"] {
  --bg: #fbfaf7; --ink: #1c1c1c; --muted: #68655f; --line: #e4e1da;
  --accent: #9a3b2f; --accent2: #3f6b66; --link: #1a4f8a; --link-vis: #6a3d9a; --code-num: #8a6d1a;
}
:root[data-theme="dark"] {
  --bg: #141414; --ink: #e7e4dc; --muted: #9c988f; --line: #333029;
  --accent: #d97a5f; --accent2: #7fbdb5; --link: #7fb0e6; --link-vis: #c39be0; --code-num: #d9b25f;
}

/* dark/light figure pairs: show only the one matching the active theme */
.dark-img  { display: none; }
.light-img { display: block; }
@media (prefers-color-scheme: dark) {
  .dark-img  { display: block; }
  .light-img { display: none; }
}
:root[data-theme="dark"] .dark-img   { display: block; }
:root[data-theme="dark"] .light-img  { display: none; }
:root[data-theme="light"] .dark-img  { display: none; }
:root[data-theme="light"] .light-img { display: block; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  padding: 40px 0 64px;
}

/* the page shell is fluid — nav and the attractor canvas use its full
   width, while prose (.window .body) stays capped to a readable column */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.window .body { max-width: 700px; margin: 0 auto; }
.window .body.attractor-body { max-width: none; margin: 0; }

/* ---- sections: plain, separated by a thin rule -------------- */
.window {
  border-bottom: 1px solid var(--line);
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.wrap > .window:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.titlebar {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  padding: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: lowercase;
}
.titlebar .spacer { flex: 1 1 auto; }
.titlebar .tag-right { opacity: 0.75; }

.theme-toggle {
  margin-left: 8px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
}
.theme-toggle:hover { opacity: 1; color: var(--ink); }

.window .body { padding: 0; }

/* ---- masthead --------------------------------------------- */
.hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero img {
  width: 120px; height: 120px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.hero h1 {
  font-family: var(--mono);
  font-size: 28px;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.hero .role { color: var(--accent); font-weight: 600; margin: 0; }
.hero .blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* ---- navigation ------------------------------------------- */
nav.menu {
  font-family: var(--mono);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 2px;
  margin-bottom: 28px;
}
@media (min-width: 900px) {
  nav.menu { gap: 32px; font-size: 14px; }
}
nav.menu a {
  padding: 0;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
nav.menu a:hover { color: var(--accent2); }
nav.menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
nav.menu a:visited { color: var(--ink); }
nav.menu a.nav-blog { color: var(--accent); }
nav.menu a.nav-blog:hover { color: var(--accent2); }
nav.menu a.nav-blog:visited { color: var(--accent); }

/* ---- typography ------------------------------------------- */
h2 { font-family: var(--mono); font-size: 19px; font-weight: 700; margin: 34px 0 14px; }
h3 { font-family: var(--mono); font-size: 15px; font-weight: 700; margin: 20px 0 6px; }

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-vis); }
a:hover { text-decoration: underline; }

p { margin: 0 0 14px; }

code, .tag {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(127,127,127,0.16);
  padding: 1px 5px;
  border-radius: 3px;
}
a.tag { text-decoration: none; }
a.tag:hover { background: rgba(127,127,127,0.28); }

hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

.divider {
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 10px;
  font-size: 13px;
  margin: 28px 0;
}

/* ---- lists / entries -------------------------------------- */
ul.plain { list-style: none; padding: 0; margin: 0; }

.entry {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 14px;
  margin: 0 0 20px;
}
.entry .meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.entry .num { color: var(--muted); font-weight: 700; }
.entry-blog { border-left-color: var(--accent); }

.badge {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}
.badge::before { content: "["; }
.badge::after { content: "]"; }
.badge.invited { color: var(--accent); }

/* ---- link list (social) ------------------------------------ */
.links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-family: var(--mono); font-size: 13px; }
.links a { text-decoration: none; color: var(--ink); }
.links a:hover { color: var(--link); text-decoration: underline; }

/* ---- footer / status bar ---------------------------------- */
footer {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.marquee-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}

/* ---- lorenz attractor canvas ------------------------------ */
.attractor-body { padding: 0; }
#lorenz {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.4 / 1;
  max-height: 480px;
  background: transparent;
}

/* ---- blog post body (markdown-ported content) --------------- */
.post-title {
  font-family: var(--mono);
  font-size: 24px;
  margin: 4px 0 4px;
  letter-spacing: -0.2px;
}
.post-date { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 22px; }
.post h4 { font-family: var(--mono); font-size: 14px; margin: 18px 0 6px; color: var(--muted); }
.post ul, .post ol { margin: 0 0 14px; padding-left: 24px; }
.post li { margin: 0 0 6px; }
.post img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0 20px; display: block; }
.post pre { background: rgba(127,127,127,0.1); padding: 14px 16px; overflow-x: auto; margin: 0 0 18px; border-radius: 4px; }
.post pre code { background: none; padding: 0; font-size: 0.85em; white-space: pre; }

/* Chroma token classes (Julia, Python, and anything else Hugo highlights),
   mapped to the site's own palette so code follows light/dark theme. */
.post pre .k, .post pre .kn, .post pre .kd, .post pre .kc, .post pre .kp, .post pre .kr, .post pre .ow { color: var(--accent); }
.post pre .kt, .post pre .nb, .post pre .bp { color: var(--link-vis); }
.post pre .nn, .post pre .nf, .post pre .nc { color: var(--link); }
.post pre .c, .post pre .c1, .post pre .ch, .post pre .cm, .post pre .cp, .post pre .cs { color: var(--muted); font-style: italic; }
.post pre .s, .post pre .s1, .post pre .s2, .post pre .sa, .post pre .sb, .post pre .sc,
.post pre .dl, .post pre .sd, .post pre .se, .post pre .sh, .post pre .si, .post pre .sx,
.post pre .sr, .post pre .ss { color: var(--accent2); }
.post pre .m, .post pre .mb, .post pre .mf, .post pre .mh, .post pre .mi, .post pre .mo, .post pre .il { color: var(--code-num); }
.post pre .o, .post pre .p { color: var(--muted); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 22px; }
  nav.menu { gap: 12px; }
  #lorenz { aspect-ratio: auto; height: 240px; }
}