/* ---------------------------------------------------------------------------
   Shared styles for yuvalino.com. Light/dark tokens, the sticky site header
   with its theme switch, the landing page index, article pages and the
   article table of contents.
   --------------------------------------------------------------------------- */

:root{
  color-scheme:light;
  --fg-primary:#141413;
  --fg-secondary:#30302e;
  --fg-muted:#87867f;
  --bg-primary:#faf9f5;
  --bg-secondary:#f0eee6;
  --border-subtle:#d1cfc5;
  --link-hover:#5e5d59;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --fg-primary:#f0eee6;
  --fg-secondary:#d1cfc5;
  --fg-muted:#8f8e86;
  --bg-primary:#1f1e1d;
  --bg-secondary:#2b2a28;
  --border-subtle:#3d3d3a;
  --link-hover:#b0aea5;
}

*{box-sizing:border-box}

/* Reserve the scrollbar gutter on every page. Without it a short page (the
   landing page) has no scrollbar while a long one (an article) does, so the
   centred column — and the header name with it — sits a few px further right
   on the landing page than on the articles. */
html{scrollbar-gutter:stable;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg-primary);
  color:var(--fg-primary);
  font-family:var(--serif);
  font-size:17px;
  line-height:30px;
  -webkit-text-size-adjust:100%;
  transition:background-color .2s linear,color .2s linear;
}

::selection{background:rgba(0,100,255,.26);color:inherit}

/* The text column. Same measure everywhere: 640px box, 592px of text. */
.shell{width:100%;max-width:640px;margin:0 auto;padding:0 24px}
.shell.cc-wide{max-width:940px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

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

/* The 15px above the name is padding, not margin: a margin scrolls out from
   under a stuck sticky header, which made the header look like it shrank by
   15px the moment it clamped to the top. */
.site-header{
  position:sticky;top:0;z-index:5;
  background:var(--bg-primary);
  margin:0;
  padding:30px 0 10px;
  transition:background-color .2s linear;
}
.site-header .shell{display:flex;align-items:center;gap:12px}

.site-name{
  margin:0 auto 0 0;
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:0;
  color:inherit;
  text-decoration:none;
  transition:color .2s linear;
}
a.site-name:hover,a.site-name:active{color:var(--link-hover)}
/* Never break mid-phrase; below the width where the widest header (an article,
   which also carries the contents button) stops fitting on one line, break at
   the same place on every page. */
.site-name > span{white-space:nowrap}

/* --- theme switch -------------------------------------------------------- */

.theme-toggle{position:relative;flex:none;width:40px;height:20px}
.theme-toggle input{position:absolute;width:0;height:0;opacity:0}
.theme-toggle label{
  position:absolute;inset:0;
  width:40px;height:20px;
  border:1px solid var(--fg-primary);
  border-radius:2rem;
  background:var(--bg-secondary);
  cursor:pointer;
  transition:background-color .2s linear,border-color .2s linear;
}
.theme-toggle label::before{
  content:"";
  position:absolute;left:2px;bottom:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--fg-primary);
  transition:none;
}
/* Added once the initial state is painted, so the knob does not slide in
   from the left on every page load. */
html.toggle-ready .theme-toggle label::before{transition:transform .2s,background-color .2s linear}
.theme-toggle input:checked + label::before{transform:translateX(20px)}
.theme-toggle input:focus-visible + label{outline:2px solid var(--fg-primary);outline-offset:2px}

/* --- landing page -------------------------------------------------------- */

.home{padding-top:25px;padding-bottom:96px}
.home-intro{margin:0}
.home-section{margin-top:1.3em}
.home-section h2{
  margin:0 0 .7em;
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  line-height:1.2;
}
.list{display:flex;flex-direction:column;gap:.8em;margin:0;padding:0;list-style:none}
.list li{padding-left:1em}
.list li::before{content:"\2022";display:inline-block;margin-left:-.7em;margin-right:.3em}
.list a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s linear}
.list a:hover,.list a:active{color:var(--link-hover)}
.list .year{white-space:nowrap}

/* --- article pages ------------------------------------------------------- */

.hero{
  max-width:940px;margin:96px auto;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.post-title{
  margin:0;
  font-family:var(--sans);
  font-size:52px;
  font-weight:700;
  line-height:110%;
  letter-spacing:0;
  text-align:center;
  text-wrap:balance;
}
.subtitle{
  max-width:632px;
  font-family:var(--sans);
  font-size:22px;
  line-height:30px;
  color:var(--fg-secondary);
  text-align:center;
  text-wrap:balance;
  transition:color .2s linear;
}
.date{font-family:var(--sans);font-size:15px;line-height:140%;letter-spacing:-.24px}

article .column{max-width:640px;margin:0 auto;padding:0 24px 96px}
article p{margin:0;padding:.5em 0;font-size:17px;line-height:30px}
article h2{
  margin:0;padding:1.5em 0 .75em;
  font-family:var(--sans);
  font-size:28px;
  font-weight:600;
  line-height:44px;
  scroll-margin-top:calc(var(--header-h, 60px) + 12px);
}
article a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .2s linear}
article a:hover,article a:active{color:var(--link-hover)}

pre{
  margin:.75em 0;padding:18px 20px;
  background:var(--bg-secondary);
  border:1px solid var(--border-subtle);
  border-radius:8px;
  overflow-x:auto;
  transition:background-color .2s linear,border-color .2s linear;
}
pre code{
  padding:0;background:none;border-radius:0;
  font-family:var(--mono);font-size:13.5px;line-height:1.65;
  color:var(--fg-secondary);
}
code{
  padding:.1em .35em;
  background:var(--bg-secondary);
  border-radius:4px;
  font-family:var(--mono);font-size:.85em;
  font-variant-ligatures:none;
  font-feature-settings:"liga" 0,"calt" 0;
  transition:background-color .2s linear;
}

/* --- table of contents --------------------------------------------------- */

/* Both the sidebar and its button stay out of the document until toc.js has
   found enough headings to build a useful list. */
html:not(.has-toc) .toc,
html:not(.has-toc) .toc-toggle{display:none !important}

.toc-toggle{
  display:none;align-items:center;justify-content:center;
  flex:none;
  width:36px;height:36px;margin-right:-6px;padding:0;
  background:none;border:0;color:inherit;cursor:pointer;
}
.toc-toggle svg{width:22px;height:22px}
.toc-toggle:focus-visible{outline:2px solid var(--fg-primary);outline-offset:2px}
html.has-toc .toc-toggle{display:flex}
.toc-toggle .cc-close{display:none}
.toc-toggle[aria-expanded="true"] .cc-close{display:block}
.toc-toggle[aria-expanded="true"] .cc-hamburger{display:none}

.toc{display:none;z-index:4;background:var(--bg-primary);transition:background-color .2s linear}
.toc[data-open]{display:block;position:fixed;inset:0;padding:calc(var(--header-h, 60px) + 16px) 0 40px;overflow-y:auto}
body.toc-open{overflow:hidden}

.toc-title{
  margin:0 0 1em;
  font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;
}
.toc-list{display:flex;flex-direction:column;gap:.5em;margin:0;padding:0;list-style:none}
.toc-list a{
  display:inline-block;
  color:inherit;text-decoration:none;
  font-size:17px;line-height:1.35;
  transition:opacity .3s cubic-bezier(.165,.84,.44,1),color .2s linear;
}
.toc-list a:hover{color:var(--link-hover)}

/* Wide screens get a fixed sidebar alongside the centred column. */
@media (min-width:1240px){
  html.has-toc .toc,
  html.has-toc .toc[data-open]{
    display:block;position:fixed;inset:0 auto 0 0;
    width:20%;max-width:17rem;
    padding:calc(var(--header-h, 60px) + 28px) 24px 40px;
    overflow-y:auto;
  }
  html.has-toc .toc .shell{max-width:none;padding:0}
  html.has-toc .toc-toggle{display:none !important}
  .toc-list a{opacity:.5}
  .toc-list a:hover,.toc-list a.is-active{opacity:1}
  body.toc-open{overflow:visible}
}

/* --- small screens ------------------------------------------------------- */

@media (max-width:768px){
  .post-title{font-size:34px}
  .subtitle{font-size:19px;line-height:27px}
  .hero{margin:48px auto}
  article h2{font-size:22px;line-height:36px;padding:1.25em 0 .625em}
}

@media (max-width:579px){
  .site-name > span{display:block}
}

@media (max-width:479px){
  .site-name{font-size:20px}
}