/* ---------------------------------------------------------------------------
   Tomas Salgado — shared styles
   Used by: /            (index.html)
            /writing     (writing/index.html)
            /writing/*   (post pages)
--------------------------------------------------------------------------- */

/* --- tokens --------------------------------------------------------------- */
:root{
  --bg:#FFFFFF; --fg:#17181A; --dim:#54575E; --faint:#9A9EA6;
  --line:#EBECEE; --link:#2E5EA6; --link-hover:#21467C; --ph:#F1F2F4; --card:#FBFBFC;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* --- base ----------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;color-scheme:light;}
body{background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .3s,color .3s;}
strong{font-weight:600;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;}}

.wrap{max-width:62rem;margin:0 auto;padding:clamp(2.2rem,5vw,3.4rem) clamp(1.5rem,5vw,2.4rem) 5rem;}

/* --- sidebar + two-column shell ------------------------------------------- */
.layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:start;}

.side{position:sticky;top:2.6rem;}
.avatar{width:112px;height:112px;border-radius:50%;flex:none;background:var(--ph);
  border:1px solid var(--line);object-fit:cover;display:block;}

.side h1{font-size:1.6rem;font-weight:700;line-height:1.15;margin-top:1.15rem;}
.side h1 a{text-decoration:none;}
.byline{color:var(--dim);font-size:.98rem;line-height:1.55;margin-top:.5rem;font-style:italic;
  text-wrap:balance;}

.quicknav{display:flex;flex-direction:column;gap:.55rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.quicknav a{font-size:.88rem;color:var(--dim);text-decoration:none;font-weight:500;transition:color .15s;}
.quicknav a:hover{color:var(--fg);}
.quicknav a[aria-current="page"]{color:var(--fg);font-weight:600;}

.socials{display:flex;gap:.9rem;align-items:center;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);}
.socials a{color:var(--faint);display:flex;transition:color .18s;}
.socials a:hover{color:var(--fg);}
.socials svg{width:19px;height:19px;}

.content{min-width:0;}

.section-label{margin-bottom:1.25rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);}
.section-label .txt{font-size:1.15rem;font-weight:600;color:var(--fg);}
.section-label .rule{display:none;}

.section{margin-top:3rem;}

/* --- homepage: about ------------------------------------------------------ */
.about p{font-size:1.05rem;line-height:1.72;color:var(--fg);}
.about p + p{margin-top:1.05rem;}
.about a{color:var(--link);text-decoration:none;transition:color .15s;}
.about a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px;}

/* --- homepage: research entries ------------------------------------------- */
.entry{margin-top:.1rem;}

.media{margin:1.1rem 0 .55rem;}
.media video{width:100%;height:clamp(180px,26vw,240px);object-fit:cover;display:block;
  background:#05060a;border:1px solid var(--line);border-radius:3px;}
.cap{margin-top:.5rem;font-size:.86rem;font-style:italic;color:var(--faint);line-height:1.5;}

.item-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.item-title{font-size:1.3rem;font-weight:700;line-height:1.2;}
.item-sub{color:var(--dim);font-size:1.02rem;line-height:1.5;margin-top:.3rem;}
.item-meta{color:var(--faint);font-size:.86rem;flex:none;font-variant-numeric:tabular-nums;}
.item-meta .sep{margin:0 .45rem;opacity:.6;}
.item-desc{color:var(--dim);font-size:.98rem;line-height:1.64;margin-top:.7rem;}
.item-link{display:inline-block;margin-top:1rem;color:var(--link);text-decoration:none;font-size:.93rem;
  font-weight:500;transition:color .15s;}
.item-link:hover{color:var(--link-hover);}
.item-link .arw{display:inline-block;transition:transform .2s;}
.item-link:hover .arw{transform:translateX(3px);}

.cite{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  color:var(--faint);font-size:.85rem;line-height:1.62;}
.cite em{font-style:italic;color:var(--dim);}
.links-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;}
.links-row .item-link{margin-top:.9rem;}

.authors-list{color:var(--faint);font-size:.85rem;line-height:1.7;margin-top:.55rem;}
.authors-list strong{color:var(--dim);font-weight:600;}

/* --- homepage: background facts ------------------------------------------- */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:.9rem 1.6rem;}
.facts dt{color:var(--faint);font-size:.92rem;font-weight:600;padding-top:.12rem;}
.facts dd{color:var(--fg);font-size:.99rem;line-height:1.5;}
.facts dd .sub{color:var(--dim);}
.facts dd a{color:var(--link);text-decoration:none;transition:color .15s;}
.facts dd a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px;}
@media(max-width:520px){.facts{grid-template-columns:1fr;gap:.3rem 0;}.facts dt{padding-top:1rem;}
  .facts dt:first-child{padding-top:0;}}

.cta-text{font-size:1.05rem;line-height:1.62;color:var(--fg);max-width:34rem;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem;}
.btn{display:inline-flex;align-items:center;font-size:.95rem;font-weight:500;text-decoration:none;
  padding:.5rem 1rem;border-radius:5px;border:1px solid var(--line);color:var(--fg);
  transition:border-color .18s,color .18s;line-height:1;}
.btn:hover{border-color:var(--faint);color:var(--fg);}
.btn.email{color:var(--link);border-color:color-mix(in srgb, var(--link) 35%, var(--line));}
.btn.email:hover{color:var(--link-hover);border-color:var(--link);}

@media(max-width:820px){
  .layout{display:block;}
  .side{position:static;margin-bottom:2.4rem;}
  .side h1{font-size:1.65rem;}
  .quicknav{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.2rem;}
  .socials{margin-top:1.3rem;padding-top:1.1rem;}
}

/* ===========================================================================
   WRITING INDEX
   =========================================================================== */
.post-list{display:flex;flex-direction:column;}
.post-list-item{padding:1.5rem 0;border-bottom:1px solid var(--line);}
.post-list-item:first-child{padding-top:.15rem;}
.post-list-item:last-child{border-bottom:none;padding-bottom:0;}
.post-list-item a{text-decoration:none;display:block;}
.post-list-item .item-title{transition:color .15s;}
.post-list-item a:hover .item-title{color:var(--link);}
.post-list-item a:hover .arw{transform:translateX(3px);}
.post-list-empty{color:var(--dim);font-size:1.02rem;line-height:1.7;}
.post-list-empty a{color:var(--link);text-decoration:none;}
.post-list-empty a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px;}

/* ===========================================================================
   POST PAGE
   =========================================================================== */
.post-wrap{max-width:58rem;margin:0 auto;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.5rem,5vw,2.4rem) 6rem;}

.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.topbar a{text-decoration:none;color:var(--dim);font-size:.9rem;font-weight:500;transition:color .15s;}
.topbar a:hover{color:var(--fg);}
.topbar .home{font-weight:600;color:var(--fg);}
.topbar .arw-back{display:inline-block;transition:transform .2s;}
.topbar a:hover .arw-back{transform:translateX(-3px);}

/* The contents column and the article are centred together as a pair, echoing
   the sidebar-plus-content shell on the homepage. */
.post-layout{display:grid;grid-template-columns:10rem minmax(0,41rem);
  gap:0 clamp(3.5rem,6vw,6rem);justify-content:center;align-items:start;}
.post{grid-column:2;min-width:0;}

/* table of contents (generated by the page script) */
/* Deliberately recessive: no rule, no heading, no box — loose marginalia that
   the eye can skip. Only the active entry darkens. */
.toc{grid-column:1;position:sticky;top:2.6rem;margin-top:.75rem;
  max-height:calc(100vh - 5rem);overflow-y:auto;overscroll-behavior:contain;}
.toc[hidden]{display:none;}
.toc-label{display:none;}
.toc ol{list-style:none;}
.toc li + li{margin-top:.5rem;}
.toc a{display:block;font-size:.74rem;line-height:1.5;color:var(--faint);text-decoration:none;
  transition:color .15s;}
.toc a:hover{color:var(--fg);}
.toc a.active{color:var(--fg);}
.toc .lvl-3 a{padding-left:.7rem;font-size:.72rem;}
/* the title opens the list and doubles as a back-to-top link */
.toc .toc-top{margin-bottom:1.1rem;}
.toc .toc-top a{color:var(--dim);font-weight:600;}
.toc .toc-top a.active{color:var(--fg);}

/* draft flag — remove with the robots noindex tag to publish */
.draft-flag{margin-bottom:.85rem;color:var(--faint);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}

/* header */
.post-header{margin-bottom:2.5rem;}
.post-header h1{font-size:clamp(1.9rem,3.6vw,2.15rem);font-weight:700;line-height:1.16;letter-spacing:-.011em;
  text-wrap:balance;}
.post-lede{margin-top:.9rem;font-size:1.1rem;line-height:1.6;color:var(--dim);font-style:italic;}
.post-meta{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line);
  color:var(--faint);font-size:.86rem;font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;}
.post-meta .sep{opacity:.6;}

/* --- prose ---------------------------------------------------------------- */
.prose{font-size:1.06rem;line-height:1.75;}
.prose > * + *{margin-top:1.2rem;}

.prose h2,.prose h3,.prose h4{scroll-margin-top:2.2rem;}
.prose h2{font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:-.005em;
  margin-top:3rem;padding-bottom:.45rem;border-bottom:1px solid var(--line);}
.prose h3{font-size:1.08rem;font-weight:600;line-height:1.35;margin-top:2.2rem;}
.prose h4{font-size:1rem;font-weight:600;color:var(--dim);margin-top:1.8rem;}

.prose a{color:var(--link);text-decoration:none;transition:color .15s;}
.prose a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px;}

.prose ul,.prose ol{padding-left:1.35rem;}
.prose li + li{margin-top:.45rem;}
.prose li > ul,.prose li > ol{margin-top:.45rem;}
.prose li::marker{color:var(--faint);}

.prose blockquote{border-left:2px solid var(--line);padding:.1rem 0 .1rem 1.15rem;
  color:var(--dim);font-style:italic;}
.prose blockquote p + p{margin-top:.8rem;}

.prose code{font-family:var(--mono);font-size:.87em;background:var(--ph);
  padding:.13em .38em;border-radius:3px;}
.prose pre{background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:.95rem 1.1rem;overflow-x:auto;line-height:1.6;}
.prose pre code{font-size:.84rem;background:none;padding:0;border-radius:0;white-space:pre;}

.prose hr{border:none;border-top:1px solid var(--line);margin:2.6rem 0;}

.prose figure{margin-top:1.9rem;margin-bottom:1.9rem;}
.prose figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:3px;}
.prose figcaption{margin-top:.55rem;font-size:.86rem;font-style:italic;color:var(--faint);
  line-height:1.5;text-align:center;}

/* inline SVG figures */
.prose figure svg{display:block;width:100%;height:auto;}
.fig-plane .wide{aspect-ratio:640/430;}
.fig-plane .narrow{display:none;aspect-ratio:360/470;max-width:400px;margin-inline:auto;}
.fig-plane .grid line,.fig-plane .axis{stroke:var(--line);stroke-width:1;}
.fig-plane .iso line{stroke:var(--faint);stroke-width:1;stroke-dasharray:4 4;opacity:.7;}
.fig-plane text{font-family:var(--serif);}
.fig-plane .iso-lab text{fill:var(--faint);font-size:11px;text-anchor:middle;
  paint-order:stroke;stroke:var(--bg);stroke-width:4;}
.fig-plane .tick text{fill:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums;}
.fig-plane .axt{fill:var(--dim);font-size:12.5px;}
.fig-plane .pt circle{fill:var(--fg);stroke:var(--bg);stroke-width:2;}
.fig-plane .brk line{stroke:var(--dim);stroke-width:1;}
.fig-plane .nm{fill:var(--fg);font-size:13px;font-weight:600;
  paint-order:stroke;stroke:var(--bg);stroke-width:4;}
.fig-plane .sub{fill:var(--dim);font-size:11.5px;
  paint-order:stroke;stroke:var(--bg);stroke-width:4;}

.table-scroll{overflow-x:auto;}
.prose table{border-collapse:collapse;width:100%;font-size:.93rem;line-height:1.5;}
.prose th,.prose td{text-align:left;padding:.58rem .85rem;border-bottom:1px solid var(--line);
  vertical-align:top;}
.prose th{color:var(--dim);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;}
.prose td{font-variant-numeric:tabular-nums;}
.prose tbody tr:last-child td{border-bottom:none;}

/* callout for a definition / aside */
.prose .note{background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:1rem 1.15rem;font-size:.99rem;color:var(--dim);}
.prose .note > * + *{margin-top:.7rem;}

/* footnotes */
.prose sup a,a.fnref{font-size:.72em;font-weight:600;text-decoration:none;
  color:var(--link);padding-left:.08em;}
.footnotes{margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.92rem;line-height:1.65;color:var(--dim);}
.footnotes ol{padding-left:1.25rem;}
.footnotes li{margin-top:.55rem;scroll-margin-top:2.2rem;}
.footnotes li::marker{color:var(--faint);}
.footnotes li:target{background:var(--ph);border-radius:3px;}
.footnotes a{color:var(--link);text-decoration:none;}
.footnotes a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:2px;}
.fnback{text-decoration:none;padding-left:.3em;}
/* a footnote can run to several paragraphs and display equations */
.footnotes li > * + *{margin-top:.7rem;}
.footnotes .katex-display{margin:.9rem 0;}

/* math (KaTeX) */
.katex{font-size:1.045em;}
.katex-display{margin:1.7rem 0;padding:.3rem .1rem;overflow-x:auto;overflow-y:hidden;}
.prose > .katex-display{margin-top:1.7rem;}

/* footer */
.post-footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;}
.post-footer a{color:var(--link);text-decoration:none;font-size:.93rem;font-weight:500;transition:color .15s;}
.post-footer a:hover{color:var(--link-hover);}
.post-footer .arw-back{display:inline-block;transition:transform .2s;}
.post-footer a:hover .arw-back{transform:translateX(-3px);}

@media(max-width:1000px){
  .post-layout{display:block;max-width:41rem;margin:0 auto;}
  .toc{display:none;}
}
@media(max-width:640px){
  .prose{font-size:1.02rem;}
  .prose pre code{font-size:.8rem;}
  /* the wide figure would scale its labels to ~6px here; use the portrait one */
  .fig-plane .wide{display:none;}
  .fig-plane .narrow{display:block;}
}