:root{
  --bg:#fffff8;
  --fg:#1a1712;
  --muted:#55514c;
  --strong:#000;
  --rule:#cbc6ba;
  --link:#9c4a1e;
  --link-hover:#8f4a2a;
  --link-underline:rgba(156,74,30,.45);
  --code-fg:#1a7a55;
  --code-bg:#edf4f0;
  --code-bd:#9ac4b1;
  --serif: "EB Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Gill Sans", "Gill Sans MT", Calibri, "Helvetica Neue", system-ui, sans-serif;
  --measure:55%;
  --margin-width:50%;
  --margin-pull:-60%;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#11110e; --fg:#ddd6ca; --muted:#a49b8d; --strong:#fffdf7; --rule:#413c33;
         --link:#d38b55; --link-hover:#e3a06a; --link-underline:rgba(211,139,85,.5);
         --code-fg:#5fc79b; --code-bg:#16201a; --code-bd:#2f4a3b; }
}

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }
html{ font-size:16.5px; -webkit-text-size-adjust:100%; }
body{
  margin:0; padding:0 0 6rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--serif);
  font-size:1.35rem; line-height:1.58;
  counter-reset:sidenote-counter;
  -webkit-font-smoothing:antialiased;
  font-kerning:normal; font-variant-numeric:oldstyle-nums;
  hyphens:auto;
}
.page{ width:87.5%; max-width:1400px; margin-left:auto; margin-right:auto; padding-top:2rem; }

/* Header */
.site-header{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.5rem;
  width:var(--measure); padding-bottom:1rem; margin-bottom:2.5rem;
  border-bottom:1px solid var(--rule);
}
.site-title{ font-size:1.2rem; letter-spacing:.06em; text-transform:lowercase; font-style:italic; }
.site-header nav{ margin-left:auto; display:flex; gap:1.25rem; font-family:var(--sans); font-size:.95rem; }
.site-header nav a{ color:var(--muted); }
.lang-switch{ font-variant:small-caps; letter-spacing:.04em; }

/* Body */
h1{ font-weight:400; font-style:italic; font-size:3.2rem; line-height:1.1; margin:1rem 0 .4rem; width:var(--measure); }
h2{ font-weight:400; font-style:italic; font-size:2.2rem; line-height:1.2; margin:3rem 0 .6rem; width:var(--measure); }
h3{ font-weight:400; font-style:italic; font-size:1.7rem; line-height:1.3; margin:2.2rem 0 .5rem; width:var(--measure); }
.subtitle{ font-style:italic; font-size:1.6rem; color:var(--muted); margin:0 0 2.5rem; width:var(--measure); }
.home-title{ margin-top:0; }

p, ol, ul, dl, table, pre{ width:var(--measure); margin-top:1.2rem; margin-bottom:1.2rem; }
li{ padding:.2rem 0; }
p{ text-align:left; }

a{ color:var(--link); text-decoration:none;
   background-image:linear-gradient(var(--link-underline),var(--link-underline));
   background-size:100% 1px; background-repeat:no-repeat; background-position:0 92%; }
a:hover{ color:var(--link-hover); background-image:linear-gradient(currentColor,currentColor); }
a{ color:var(--link); }

em,i{ color:inherit; }
strong,b{ color:var(--strong); }

:not(pre) > code{
  color:var(--code-fg); background:var(--code-bg); border:1px solid var(--code-bd);
  border-radius:.2em; padding:0 .28em;
  font-size:.78em; line-height:1;
}

.sidenote::before, .sidenote-number::after,
.post-list time, .site-header nav a, .site-footer{ color:var(--code-fg); }

.newthought{ font-variant:small-caps; font-size:1.1em; letter-spacing:.03em; }

/* Quotes */
blockquote{ width:var(--measure); margin:2rem 0; padding-left:1.4rem;
  border-left:2px solid var(--rule); font-style:italic; color:var(--muted); }
blockquote p{ width:100%; }
blockquote footer{ font-style:normal; font-size:1.1rem; font-family:var(--sans); color:var(--muted); }
blockquote footer::before{ content:"— "; }
.epigraph{ margin:3rem 0; }
.epigraph blockquote{ border:0; padding:0; font-size:1.5rem; }

/* Margin notes */
.sidenote, .marginnote{
  float:right; clear:right; width:var(--margin-width); margin-right:var(--margin-pull);
  margin-top:.3rem; margin-bottom:1rem;
  font-size:1.1rem; line-height:1.45; color:var(--muted);
  position:relative; vertical-align:baseline;
}
.sidenote-number{ counter-increment:sidenote-counter; }
.sidenote-number::after{
  content:counter(sidenote-counter);
  font-family:var(--sans); font-size:.75rem; top:-.5rem; left:.1rem; position:relative;
  vertical-align:baseline; color:var(--fg);
}
.sidenote::before{
  content:counter(sidenote-counter) " ";
  font-family:var(--sans); font-size:.8rem; top:-.5rem; position:relative; vertical-align:baseline;
}
.sidenote img, .marginnote img{ max-width:100%; height:auto; display:block; margin-bottom:.4rem; }
label.margin-toggle:not(.sidenote-number){ display:none; }
input.margin-toggle{ display:none; }
.marginnote-wrap{ display:inline; }
.marginnote-block{ width:var(--measure); max-width:var(--measure); margin:0; }

/* Figures */
figure{ margin:2.5rem 0; max-width:var(--measure); }
figure img{ max-width:100%; height:auto; display:block; }
figcaption{
  float:right; clear:right;
  width:var(--margin-width); margin-right:var(--margin-pull); margin-top:0;
  font-family:var(--sans); font-size:1rem; line-height:1.45; color:var(--muted);
  position:relative; vertical-align:baseline;
}
figure.fullwidth{ max-width:90%; }
figure.fullwidth{ display:flex; flex-direction:column; }
figure.fullwidth figcaption{ float:none; clear:none; width:55%; margin-right:0; margin-top:.6rem; order:2; }
figure.fullwidth img{ order:1; }
figure.marginfigure{ width:var(--measure); max-width:var(--measure); margin:0; }
figure.marginfigure .marginnote{ margin-top:.3rem; }
figure.marginfigure .marginnote img{ margin-bottom:.4rem; }
.fullwidth{ max-width:90%; }

/* Media */
figure.video{ max-width:var(--measure); }
.yt-lite{ position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; cursor:pointer; }
.yt-lite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-play{ position:absolute; inset:0; margin:auto; width:4.5rem; height:3.2rem; border:0; border-radius:.7rem;
  background:rgba(20,20,20,.75); color:#fff; font-size:1.4rem; cursor:pointer; }
.yt-lite:hover .yt-play{ background:#c00; }
figure.audio audio{ width:100%; }

/* Post lists */
.post-list{ list-style:none; padding:0; }
.post-list li{ display:flex; justify-content:space-between; gap:2rem; align-items:baseline;
  padding:.6rem 0; border-bottom:1px solid var(--rule); }
.post-list time{ font-family:var(--sans); font-size:1rem; color:var(--muted); white-space:nowrap; }

/* Footnotes */
.footnotes{ width:var(--measure); font-size:1.15rem; color:var(--muted); border-top:1px solid var(--rule); margin-top:3rem; }

code, pre{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.05rem; }
pre{ overflow-x:auto; padding:1rem; background:var(--code-bg); border-left:2px solid var(--code-bd); }
hr{ border:0; border-top:1px solid var(--rule); margin:3rem 0; width:var(--measure); }

.site-footer{ width:var(--measure); margin-top:5rem; padding-top:1rem;
  border-top:1px solid var(--rule); font-family:var(--sans); font-size:1rem; color:var(--muted); }

/* Language picker */
.picker{ display:flex; flex-direction:column; justify-content:center; min-height:70vh; }
.picker h1{ width:auto; }
.picker .subtitle{ width:auto; }
.picker-links{ width:auto; display:flex; gap:2rem; font-size:1.8rem; font-style:italic; }

/* Narrow screens */
@media (max-width:860px){
  html{ font-size:14px; }
  .page{ width:92%; }
  :root{ --measure:100%; }
  h1,h2,h3,.subtitle,p,ol,ul,dl,table,pre,blockquote,hr,.site-header,.site-footer,.footnotes,figure.fullwidth figcaption{ width:100%; }
  figure, figure.video{ max-width:100%; }
  figure.fullwidth, .fullwidth{ max-width:100%; }
  label.margin-toggle:not(.sidenote-number){ display:inline; cursor:pointer; color:var(--muted); }
  .sidenote, .marginnote{ display:none; }
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote{
    display:block; float:none; width:100%; margin:1rem 0;
    padding:.8rem 1rem; background:rgba(128,128,128,.08); border-left:2px solid var(--rule);
  }
  figure.marginfigure{ float:none; width:100%; margin:2rem 0; }
  .marginnote-block{ width:100%; max-width:100%; }
  figcaption{ float:none; clear:none; width:100%; margin-right:0; margin-top:.6rem; }
  figure.fullwidth figcaption{ width:100%; }
  figure.marginfigure .marginnote{ display:block; }
}