/* fausto.ge — faithful static replica of the WordPress "Pub" theme
   Design tokens extracted from the live site:
   fonts  Figtree (body/headings), Literata (site title), IBM Plex Mono (tagline)
   colors primary #0d0f12  secondary #005ae1  foreground #474747
          background #ffffff  tertiary #f7f9fd
   layout 620px content column, line-height 1.6                          */

:root {
  --primary:    #0d0f12;
  --secondary:  #005ae1;
  --foreground: #474747;
  --background: #ffffff;
  --tertiary:   #f7f9fd;
  --panel:      #ffffff;
  --muted:      #6b7280;
  --rule:       #e6e8ee;
  --content:    780px;
  --sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* murmuration canvas: part of the sky, behind the cards */
#murmuration {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
:root.dark #murmuration { display: none; }

/* ---------- Dark mode: night sky with white stars ---------- */
:root.dark {
  --primary:    #f0f1f4;
  --secondary:  #7fb3e6;
  --foreground: #b9bdc6;
  --background: #0a0b0e;
  --tertiary:   #15171c;
  --panel:      #101216;
  --muted:      #8a8f99;
  --rule:       #23262e;
}
:root.dark body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='155' cy='72' r='0.79' opacity='0.4'/%3E%3Ccircle cx='257' cy='176' r='0.35' opacity='0.28'/%3E%3Ccircle cx='18' cy='208' r='0.36' opacity='0.2'/%3E%3Ccircle cx='204' cy='397' r='0.37' opacity='0.23'/%3E%3Ccircle cx='301' cy='455' r='0.7' opacity='0.43'/%3E%3Ccircle cx='469' cy='22' r='1.12' opacity='0.6'/%3E%3Ccircle cx='69' cy='57' r='0.45' opacity='0.39'/%3E%3Ccircle cx='87' cy='279' r='0.78' opacity='0.46'/%3E%3Ccircle cx='263' cy='30' r='0.35' opacity='0.22'/%3E%3Ccircle cx='327' cy='205' r='0.45' opacity='0.34'/%3E%3Ccircle cx='218' cy='144' r='1.01' opacity='0.63'/%3E%3Ccircle cx='117' cy='276' r='0.64' opacity='0.49'/%3E%3Ccircle cx='350' cy='138' r='1.36' opacity='0.68'/%3E%3Ccircle cx='201' cy='363' r='0.37' opacity='0.29'/%3E%3Ccircle cx='19' cy='321' r='0.96' opacity='0.59'/%3E%3Ccircle cx='420' cy='151' r='0.86' opacity='0.54'/%3E%3Ccircle cx='278' cy='219' r='1.09' opacity='0.72'/%3E%3Ccircle cx='228' cy='319' r='0.35' opacity='0.32'/%3E%3Ccircle cx='311' cy='477' r='1.06' opacity='0.58'/%3E%3Ccircle cx='185' cy='321' r='0.35' opacity='0.27'/%3E%3Ccircle cx='81' cy='56' r='0.35' opacity='0.33'/%3E%3Ccircle cx='62' cy='119' r='0.51' opacity='0.43'/%3E%3Ccircle cx='39' cy='216' r='0.67' opacity='0.51'/%3E%3Ccircle cx='393' cy='415' r='0.43' opacity='0.3'/%3E%3Ccircle cx='172' cy='424' r='1.31' opacity='0.67'/%3E%3Ccircle cx='85' cy='111' r='0.41' opacity='0.31'/%3E%3Ccircle cx='283' cy='126' r='0.35' opacity='0.26'/%3E%3Ccircle cx='177' cy='272' r='1.3' opacity='0.77'/%3E%3Ccircle cx='247' cy='296' r='0.83' opacity='0.42'/%3E%3Ccircle cx='432' cy='374' r='1.15' opacity='0.72'/%3E%3Ccircle cx='188' cy='192' r='0.36' opacity='0.31'/%3E%3Ccircle cx='30' cy='32' r='0.4' opacity='0.24'/%3E%3Ccircle cx='163' cy='25' r='0.35' opacity='0.21'/%3E%3Ccircle cx='49' cy='175' r='0.35' opacity='0.35'/%3E%3Ccircle cx='295' cy='71' r='0.42' opacity='0.28'/%3E%3Ccircle cx='175' cy='59' r='1.11' opacity='0.74'/%3E%3Ccircle cx='224' cy='232' r='0.36' opacity='0.21'/%3E%3Ccircle cx='164' cy='127' r='1.07' opacity='0.56'/%3E%3Ccircle cx='11' cy='456' r='0.64' opacity='0.35'/%3E%3Ccircle cx='261' cy='13' r='0.64' opacity='0.51'/%3E%3Ccircle cx='414' cy='334' r='0.42' opacity='0.29'/%3E%3Ccircle cx='80' cy='371' r='0.65' opacity='0.48'/%3E%3Ccircle cx='158' cy='107' r='1.04' opacity='0.71'/%3E%3Ccircle cx='409' cy='387' r='1.05' opacity='0.66'/%3E%3Ccircle cx='109' cy='248' r='0.48' opacity='0.25'/%3E%3Ccircle cx='13' cy='134' r='0.42' opacity='0.35'/%3E%3Ccircle cx='459' cy='215' r='1.27' opacity='0.82'/%3E%3Ccircle cx='458' cy='175' r='0.4' opacity='0.25'/%3E%3Ccircle cx='94' cy='98' r='0.76' opacity='0.56'/%3E%3Ccircle cx='403' cy='230' r='0.8' opacity='0.55'/%3E%3Ccircle cx='41' cy='317' r='1.22' opacity='0.75'/%3E%3Ccircle cx='360' cy='229' r='0.38' opacity='0.35'/%3E%3Ccircle cx='160' cy='384' r='1.34' opacity='0.73'/%3E%3Ccircle cx='193' cy='454' r='0.9' opacity='0.48'/%3E%3Ccircle cx='61' cy='73' r='1.21' opacity='0.75'/%3E%3Ccircle cx='70' cy='397' r='1.36' opacity='0.79'/%3E%3Ccircle cx='168' cy='263' r='0.37' opacity='0.19'/%3E%3Ccircle cx='466' cy='312' r='0.64' opacity='0.5'/%3E%3Ccircle cx='208' cy='418' r='1.07' opacity='0.57'/%3E%3Ccircle cx='121' cy='141' r='0.41' opacity='0.33'/%3E%3Ccircle cx='124' cy='201' r='0.37' opacity='0.37'/%3E%3Ccircle cx='170' cy='220' r='0.71' opacity='0.53'/%3E%3Ccircle cx='202' cy='441' r='0.61' opacity='0.41'/%3E%3Ccircle cx='251' cy='9' r='0.55' opacity='0.31'/%3E%3Ccircle cx='2' cy='384' r='0.38' opacity='0.29'/%3E%3Ccircle cx='348' cy='267' r='0.46' opacity='0.34'/%3E%3Ccircle cx='267' cy='376' r='0.36' opacity='0.3'/%3E%3Ccircle cx='119' cy='133' r='0.98' opacity='0.58'/%3E%3Ccircle cx='270' cy='365' r='1.22' opacity='0.68'/%3E%3Ccircle cx='294' cy='243' r='0.63' opacity='0.45'/%3E%3Ccircle cx='217' cy='256' r='0.59' opacity='0.48'/%3E%3Ccircle cx='336' cy='421' r='1.28' opacity='0.67'/%3E%3Ccircle cx='269' cy='453' r='1.09' opacity='0.56'/%3E%3Ccircle cx='58' cy='212' r='0.36' opacity='0.23'/%3E%3Ccircle cx='35' cy='321' r='1.0' opacity='0.67'/%3E%3Ccircle cx='74' cy='344' r='0.81' opacity='0.43'/%3E%3Ccircle cx='424' cy='464' r='0.4' opacity='0.39'/%3E%3Ccircle cx='191' cy='234' r='1.38' opacity='0.84'/%3E%3Ccircle cx='78' cy='207' r='0.63' opacity='0.38'/%3E%3Ccircle cx='94' cy='153' r='0.9' opacity='0.45'/%3E%3Ccircle cx='266' cy='211' r='0.35' opacity='0.25'/%3E%3Ccircle cx='299' cy='246' r='0.35' opacity='0.38'/%3E%3Ccircle cx='378' cy='466' r='0.36' opacity='0.24'/%3E%3Ccircle cx='19' cy='374' r='0.43' opacity='0.24'/%3E%3Ccircle cx='203' cy='437' r='1.05' opacity='0.57'/%3E%3Ccircle cx='72' cy='441' r='0.69' opacity='0.48'/%3E%3Ccircle cx='43' cy='28' r='0.85' opacity='0.5'/%3E%3Ccircle cx='35' cy='450' r='0.77' opacity='0.54'/%3E%3Ccircle cx='40' cy='411' r='0.35' opacity='0.35'/%3E%3Ccircle cx='218' cy='163' r='0.67' opacity='0.52'/%3E%3Ccircle cx='129' cy='62' r='0.64' opacity='0.37'/%3E%3Ccircle cx='53' cy='77' r='0.35' opacity='0.22'/%3E%3Ccircle cx='150' cy='146' r='0.96' opacity='0.53'/%3E%3Ccircle cx='240' cy='85' r='0.48' opacity='0.25'/%3E%3Ccircle cx='120' cy='7' r='0.91' opacity='0.56'/%3E%3Ccircle cx='91' cy='228' r='1.27' opacity='0.64'/%3E%3Ccircle cx='393' cy='207' r='0.61' opacity='0.47'/%3E%3Ccircle cx='189' cy='243' r='0.85' opacity='0.61'/%3E%3Ccircle cx='164' cy='399' r='0.87' opacity='0.55'/%3E%3Ccircle cx='194' cy='167' r='0.35' opacity='0.21'/%3E%3Ccircle cx='34' cy='356' r='0.42' opacity='0.25'/%3E%3Ccircle cx='41' cy='404' r='1.15' opacity='0.7'/%3E%3Ccircle cx='135' cy='116' r='0.44' opacity='0.31'/%3E%3Ccircle cx='76' cy='214' r='0.42' opacity='0.41'/%3E%3Ccircle cx='467' cy='263' r='0.41' opacity='0.4'/%3E%3Ccircle cx='149' cy='171' r='0.35' opacity='0.26'/%3E%3Ccircle cx='228' cy='241' r='0.39' opacity='0.3'/%3E%3Ccircle cx='2' cy='127' r='0.36' opacity='0.26'/%3E%3Ccircle cx='20' cy='11' r='0.45' opacity='0.27'/%3E%3Ccircle cx='281' cy='254' r='0.94' opacity='0.59'/%3E%3Ccircle cx='344' cy='422' r='0.51' opacity='0.32'/%3E%3Ccircle cx='473' cy='72' r='0.9' opacity='0.57'/%3E%3Ccircle cx='21' cy='401' r='1.19' opacity='0.71'/%3E%3Ccircle cx='352' cy='390' r='0.37' opacity='0.29'/%3E%3Ccircle cx='242' cy='401' r='1.03' opacity='0.67'/%3E%3Ccircle cx='280' cy='429' r='0.84' opacity='0.55'/%3E%3Ccircle cx='110' cy='15' r='0.37' opacity='0.26'/%3E%3Ccircle cx='50' cy='401' r='0.68' opacity='0.46'/%3E%3Ccircle cx='301' cy='327' r='0.6' opacity='0.3'/%3E%3Ccircle cx='383' cy='359' r='0.62' opacity='0.42'/%3E%3Ccircle cx='316' cy='32' r='0.92' opacity='0.5'/%3E%3Ccircle cx='36' cy='127' r='0.91' opacity='0.49'/%3E%3Ccircle cx='355' cy='468' r='0.61' opacity='0.38'/%3E%3Ccircle cx='230' cy='328' r='0.97' opacity='0.6'/%3E%3Ccircle cx='309' cy='37' r='0.37' opacity='0.24'/%3E%3Ccircle cx='357' cy='146' r='0.69' opacity='0.34'/%3E%3Ccircle cx='29' cy='129' r='0.82' opacity='0.54'/%3E%3Ccircle cx='324' cy='140' r='0.63' opacity='0.41'/%3E%3Ccircle cx='224' cy='57' r='1.19' opacity='0.62'/%3E%3Ccircle cx='470' cy='449' r='0.35' opacity='0.27'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
}
:root.dark .post-thumb { border-color: rgba(255, 255, 255, 0.25); }

/* no terminal cursor in dark mode */
:root.dark .site-tagline::after { content: none; }

/* one shooting comet across the sky, 10s after the page opens (dark only) */
:root.dark body::after {
  content: "";
  position: fixed;
  z-index: -1;               /* behind the cards, part of the sky */
  top: 12%;
  left: -12%;
  width: 150px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
  pointer-events: none;
  opacity: 0;
  animation: comet 1.8s linear 10s 1 both;
}
@keyframes comet {
  0%   { transform: translate(0, 0) rotate(9deg); opacity: 0; }
  8%   { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { transform: translate(124vw, 20vw) rotate(9deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root.dark body::after { animation: none; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: var(--content);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Header ---------- */
.site-header { margin-bottom: 3rem; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.site-nav a { color: var(--primary); }
.site-nav a:hover { color: var(--secondary); text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

.theme-toggle {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0 0.1rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: var(--primary);
}
.theme-toggle:hover { color: var(--secondary); }

.title-row {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0 0 0.35rem;
}
.site-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}
.site-title a { color: var(--primary); }
.site-title a:hover { color: var(--foreground); text-decoration: none; }

.site-tagline {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--foreground);
  margin: 0 0 1rem;
}
/* the quirk: a terminal cursor that blinks a few times, then signs off */
.site-tagline::after {
  content: "\258B";           /* ▋ */
  margin-left: 0.15em;
  color: var(--secondary);
  opacity: 0;
  animation: blinkout 4.4s steps(1) forwards;
}
@keyframes blinkout {
  0%, 25%, 50%, 75%       { opacity: 1; }
  12.5%, 37.5%, 62.5%, 87.5%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-tagline::after { animation: none; opacity: 0; }
}

.social { display: flex; gap: 0.85rem; align-items: center; margin-left: auto; }
.social a { color: var(--primary); display: inline-flex; }
.social a:hover { color: var(--secondary); }
.social svg { width: 22px; height: 22px; display: block; fill: currentColor; }

/* ---------- Headings ---------- */
h1.page-title {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--primary);
  font-size: clamp(1.9rem, 1.6rem + 1.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}
h2.section-title {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--primary);
  font-size: clamp(1.5rem, 1.35rem + 0.8vw, 1.95rem);
  line-height: 1.2;
  margin: 3rem 0 1.5rem;
}

/* ---------- Post list (home) — thick black framed postcards ---------- */
.posts { display: flex; flex-direction: column; gap: 2.25rem; }

.post {
  background: var(--panel);
  border: 2px solid var(--primary);   /* squared black frame */
  border-radius: 0;
  padding: 26px 26px 22px;            /* wide white mat around the picture */
}
.post:hover { border-color: var(--secondary); }

.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  border: 1px solid rgba(13, 15, 18, 0.28);  /* subtle dark grey line around the pic */
  background: var(--tertiary);
}

.post-body { padding: 0.95rem 0 0; }

.post-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 0.55rem;
}
.post-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}
.post-title a { color: var(--primary); }
.post-title a:hover { color: var(--secondary); text-decoration: none; }

/* Automated preview: paste the full opening text — CSS clips it to 3 lines
   and adds the ellipsis. No manual truncation needed. */
.post-excerpt {
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.byline { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ---------- Prose (about) ---------- */
.prose p { margin: 0 0 1.25rem; }
.prose { font-size: 1.06rem; }

.about-photo {
  display: block;
  width: 100%;
  margin: 0 auto 2rem;
  border: 2px solid var(--primary);   /* same frame as the research gif */
  padding: 18px;                      /* white mat */
  background: var(--panel);
}

/* ---------- Research ---------- */
.research-hero {
  border: 2px solid var(--primary);
  background: var(--panel);
  padding: 18px;
  margin: 0 0 2.5rem;
}
.research-hero img { display: block; width: 100%; height: auto; }

.paper { margin: 0 0 2.25rem; }
.paper .cite { color: var(--primary); font-weight: 500; margin: 0 0 0.55rem; }
.paper .cite em { font-style: italic; }
.paper .award {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 0.55rem;
}

/* click-to-expand abstract + view-paper link on one line (no JS:
   native <details>; display:contents lifts summary + abstract into the
   flex row, and order pushes the open abstract below the whole line) */
.paper-actions {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.paper-actions .pipe { color: #b9bec9; }
.paper-actions details { display: contents; }
.paper-actions summary {
  cursor: pointer;
  color: var(--secondary);
  user-select: none;
  list-style: none;              /* hide the default marker… */
}
.paper-actions summary::-webkit-details-marker { display: none; }
.paper-actions summary:hover { color: var(--primary); }
.paper-actions summary::before {
  content: "\25B6";              /* …and draw our own ▶ */
  display: inline-block;
  font-size: 0.7em;
  margin-right: 0.45em;
  transition: transform 0.15s ease;
}
.paper-actions details[open] summary::before { transform: rotate(90deg); }
.paper .abstract {
  flex-basis: 100%;              /* full-width row of its own… */
  order: 10;                     /* …after the actions line */
  margin: 0.85rem 0 0;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}
.site-footer p { margin: 0 0 0.4rem; }

@media (max-width: 500px) {
  .container { padding: 2rem 1.2rem 3rem; }
}