/* Aryamann Reet. Charcoal ground, saffron-yellow highlight, Garamond text.
   A light theme (toggled by #themeToggle, see js/app.js) swaps these for a white ground and
   a Volkerrechtsblog-style blue, in the same places -- see the :root[data-theme="light"]
   override block below. Nothing else in this file should hardcode a colour; it all goes
   through these custom properties so both themes stay in sync automatically. */
:root{
  --bg:#2b2b2c; --bg2:#343436; --rule:#4b4b4d;
  --ink:#e1dfd8; --ink2:#aaa9a3; --ink3:#80807b;
  --accent:#f2c230; --on-accent:#1e1e1f;
  --serif:"EB Garamond","Times New Roman",Times,serif;
  --type:"Courier Prime","Courier New",monospace;
  --col:46rem;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1 L1 13 L4 10.3 L6.3 15 L8.2 14 L5.9 9.3 L10 9.3 Z' fill='%23e1dfd8' stroke='%231c1c1c' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1,auto;
  --bad:#f0a08a;
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg2:#f2f4f7; --rule:#d7dbe2;
  --ink:#1c1e21; --ink2:#52565d; --ink3:#82868d;
  --accent:#1d4e8f; --on-accent:#ffffff;
  --bad:#b3261e;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1 L1 13 L4 10.3 L6.3 15 L8.2 14 L5.9 9.3 L10 9.3 Z' fill='%231c1e21' stroke='%23ffffff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1,auto;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;font-kerning:normal;font-variant-numeric:oldstyle-nums;
  cursor:var(--cursor)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:absolute;left:-99rem}.skip:focus{left:1rem;top:1rem;background:var(--accent);color:var(--on-accent);padding:.3rem .6rem;z-index:99}
/* Keep the system pointer-hand on clickable elements so affordance isn't lost under the custom arrow. */
a,button,select,input[type="submit"],[role="button"]{cursor:pointer}

/* links: a yellow underline that becomes a highlight, like the selection colour */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em;transition:background-color .15s ease,color .15s ease}
a:hover{background:var(--accent);color:var(--on-accent);text-decoration-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* layout column */
.top,main,.foot{width:min(var(--col),calc(100% - 2.5rem));margin-inline:auto}
main{flex:1;padding-bottom:5rem;outline:none;position:relative}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.5rem 0 1.1rem;border-bottom:1px solid var(--rule)}
.wordmark{font-size:1.2rem;font-weight:500;text-decoration:none;letter-spacing:.01em}
.top-right{display:flex;align-items:baseline;gap:1.5rem}
.top nav{display:flex;gap:1.5rem}
.top nav a{text-decoration:none}
.top nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.28em}
.top nav a:hover{text-decoration:none}
.theme-toggle{align-self:center;font:inherit;font-size:1.05rem;line-height:1;background:none;color:var(--ink3);border:1px solid var(--rule);border-radius:50%;width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.theme-toggle:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}

.foot{border-top:1px solid var(--rule);padding:1.6rem 0 2.6rem;color:var(--ink3);font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot p{margin:0}

/* headings */
h1,h2,h3{font-weight:500;line-height:1.15;margin:0}
.page-title{font-size:clamp(2.2rem,6vw,3.1rem);letter-spacing:-.016em;margin:3.4rem 0 .5rem}
.page-sub{font-style:italic;color:var(--ink2);margin:0 0 2rem;font-size:1.15rem}
h2.sec{font-size:1.6rem;margin:4.2rem 0 1.1rem}

/* hero */
.name{font-size:clamp(3rem,10vw,5rem);line-height:.98;font-weight:500;letter-spacing:-.03em;margin:3.6rem 0 .8rem}
.tagline{font-style:italic;font-size:1.4rem;color:var(--ink2);margin:0 0 .4rem}
.where{margin:0 0 1.8rem;color:var(--ink3);font-size:1rem}
.lede{max-width:38rem;font-size:1.1rem}

/* prose (markdown output) */
.prose{max-width:40rem}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.1em;hyphens:auto;text-align:justify}
.prose h2{font-size:1.75rem;margin:2.2em 0 .5em}
.prose h3{font-size:1.3rem;margin:1.8em 0 .4em;font-style:italic}
.prose[data-md]>p:first-of-type .lede-caps{font-variant-caps:all-small-caps;letter-spacing:.02em}
.prose[data-md]>p:first-of-type::first-letter{float:left;font-family:"Cinzel",var(--serif);font-weight:700;font-size:4.2em;line-height:.82;letter-spacing:normal;color:var(--accent);margin:.06em .12em 0 0}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.1em}
.prose li{margin:.2em 0}
.prose blockquote{position:relative;margin:1.7em 0 1.7em 1.9rem;padding:0 0 0 1.4rem;border-left:1px solid var(--accent);color:var(--ink2);font-size:1.04em;line-height:1.65}
.prose blockquote p{text-align:left}
.prose blockquote::before{content:"\201C";position:absolute;left:-2rem;top:-.22em;font-size:2.7rem;font-family:var(--serif);color:var(--accent);line-height:1}
.prose blockquote footer,.prose blockquote>p:last-child em:only-child{color:var(--ink3);font-size:.9em;font-style:normal;margin-top:.4em}
.prose hr{border:0;margin:2.6em 0;text-align:center;color:var(--ink3);font-size:1.1rem;letter-spacing:.6em}
.prose hr::after{content:"\2042"}
.prose code{font-family:var(--type);font-size:.82em;background:var(--bg2);padding:.1em .35em}
.prose pre{background:var(--bg2);padding:1rem;overflow:auto;line-height:1.45}
.prose pre code{background:none;padding:0}
.prose table{border-collapse:collapse;margin:1.4em 0;font-size:.95em;display:block;overflow:auto}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:.4em .9em .4em 0;text-align:left}
.prose figure{margin:1.8rem 0}
.prose figcaption{font-size:.9rem;font-style:italic;color:var(--ink3);margin-top:.5rem}
.prose sup.fnref{font-size:.7em;line-height:0}
.prose sup.fnref a{text-decoration:none;color:var(--accent);padding:0 .1em}
.prose sup.fnref a:hover{color:var(--on-accent)}
.footnotes{border-top:1px solid var(--rule);margin-top:3rem;padding-top:1rem;font-size:.92rem;color:var(--ink2)}
.footnotes ol{padding-left:1.3em;margin:0}.footnotes li{margin:.5em 0}
.fnback{text-decoration:none}

/* linked images: no yellow box behind them */
a:has(> img),a:has(> figure){text-decoration:none}
a:has(> img):hover,a:has(> figure):hover{background:none}
/* images: grey until you point at them */
img{max-width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.05) brightness(.94);transition:filter .6s ease}
img:hover,a:hover img,figure:hover img,.entry:hover img{filter:none}
@media (hover:none){img{filter:none}}

/* project entries */
.entry{display:grid;grid-template-columns:1fr 12rem;gap:1.6rem;padding:1.7rem 0;border-top:1px solid var(--rule)}
.entry.no-cover{grid-template-columns:1fr}
.entry h3{font-size:1.7rem;margin-bottom:.2rem}
.entry h3 a{text-decoration-thickness:1px}
.status{margin:0 0 .7rem;color:var(--ink3);font-style:italic;font-size:.98rem}
.entry p{margin:0 0 .6rem;max-width:34rem}
.cover{display:block;align-self:start;background:none}
.cover:hover{background:none}
.cover img{width:100%;aspect-ratio:4/3;object-fit:cover}
.empty{color:var(--ink3);font-style:italic}

/* timeline */
.timeline{margin:0;padding:0;list-style:none}
.yr{display:grid;grid-template-columns:5.6rem 1fr;gap:0 1rem;border-top:1px solid var(--rule);padding:1.3rem 0 .5rem}
.yr-n{font-size:2.5rem;line-height:1;font-weight:500;color:var(--accent);margin:0;position:sticky;top:1rem;align-self:start}
.yr-count{display:block;font-size:.85rem;font-weight:400;font-style:italic;color:var(--ink3);margin-top:.3rem}
.yr-items{list-style:none;margin:0;padding:0}
.yr-items li{display:grid;grid-template-columns:4.4rem 1fr;gap:.8rem;padding:.35rem 0 1rem}
.yr-items time{color:var(--ink3);font-size:.95rem;padding-top:.18rem}
.yr-items .t{font-size:1.18rem;line-height:1.3}
.yr-items .kind{font-style:italic;color:var(--ink3);font-size:.9rem;margin-left:.5em}
.yr-items p{margin:.15rem 0 0;color:var(--ink2);font-size:.98rem;line-height:1.5;max-width:30rem}

/* books */
.book-list{list-style:none;margin:0;padding:0}
.book-list li{padding:1rem 0;border-top:1px solid var(--rule)}
.book-list .t{font-size:1.15rem}
.book-list .by{font-style:italic;color:var(--ink3);margin-left:.5em;font-size:.95rem}
.book-list .stars{color:var(--accent);margin-left:.6em;letter-spacing:.05em}
.book-list .kind{font-style:italic;color:var(--ink3);font-size:.9rem;margin-left:.5em}
.book-list .review{margin-top:.6rem;max-width:34rem;font-size:.98rem}

/* project updates and sources */
.upd{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.1rem 0 .4rem;border-top:1px solid var(--rule)}
.upd time{color:var(--ink3);font-size:.95rem;padding-top:.3rem}
.upd h3{font-size:1.35rem;margin:0 0 .3rem}
.upd .prose{max-width:36rem}
.sources{padding-left:1.5rem;margin:0;max-width:40rem;color:var(--ink2);font-size:1rem}
.sources li{margin:.55rem 0}
.sources a{color:var(--ink)}
.upd-sources{margin-top:.9rem}
.upd-sources .label{margin:0 0 .3rem;font-style:italic;color:var(--ink3);font-size:.85rem}
.upd-sources .sources{font-size:.92rem;padding-left:1.3rem}
.inline-note{margin-top:.9rem}
.inline-note .label{margin:0 0 .3rem;font-style:italic;color:var(--ink3);font-size:.85rem}
.inline-note p:last-child{margin:0;color:var(--ink2);font-style:italic;font-size:.92rem}

/* margin notes: disclaimer + collapsed-by-default bibliography. In-flow block by default;
   becomes a true right-margin aside once the viewport is wide enough to fit one without
   crowding the text column (see the @media rule further down). */
.margin-notes{margin:1.8rem 0 2.2rem}
.mn-box{margin-bottom:1rem;padding:.8rem .9rem;background:var(--bg2);border:1px dashed var(--rule)}
.mn-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.mn-head .stripes{flex:0 0 1.6rem;height:.5rem;min-width:0}
.mn-label{font-family:var(--type);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.mn-box p{margin:0;color:var(--ink2);font-style:italic;font-size:.9rem;line-height:1.5}
.mn-box.biblio{padding:.8rem .9rem .9rem}
.mn-box.biblio summary{cursor:pointer;list-style:none}
.mn-box.biblio summary::-webkit-details-marker{display:none}
.mn-box.biblio summary .mn-head{margin-bottom:0}
.mn-box.biblio summary .mn-label::after{content:" +";color:var(--ink3)}
.mn-box.biblio[open] summary .mn-label::after{content:" \2212"}
.mn-box.biblio[open] summary .mn-head{margin-bottom:.5rem}
.mn-box.biblio .sources{font-size:.85rem;max-width:none}
@media (min-width:1400px){
  /* Width is computed from actual available space (viewport minus the fixed 874px main
     column, halved, minus the gap) rather than a flat rem guess -- a fixed width overflowed
     past the right edge of the screen at common laptop widths like 1440px. Verified at the
     1400px threshold and at 1440px that this no longer causes horizontal overflow. */
  .margin-notes{position:absolute;left:100%;top:7rem;margin-left:1.5rem;width:calc((100vw - 874px)/2 - 1.5rem - 1.2rem);max-width:15rem}
}

/* writing list */
.filters{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:0 0 1.6rem}
.filters a[aria-current]{text-decoration-thickness:3px;text-underline-offset:.28em}
.post{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.1rem 0 1.2rem;border-top:1px solid var(--rule)}
.post time{color:var(--ink3);font-size:.95rem;padding-top:.3rem}
.post h3{font-size:1.4rem;line-height:1.25}
.post .from{font-style:italic;color:var(--ink3);font-size:.95rem;margin:.1rem 0 .3rem}
.post p{margin:.2rem 0 0;color:var(--ink2);max-width:33rem;font-size:1rem;line-height:1.5}
.excerpt.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.read-more{display:block;background:none;border:none;padding:0;margin:.5rem 0 0;font:inherit;font-style:italic;
  font-size:.92rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.read-more:hover{background:var(--accent);color:var(--on-accent);text-decoration-color:transparent}
.tags{font-size:.85rem;color:var(--ink3);font-style:italic;margin:.4rem 0 0}
.post .tags{margin-top:.3rem}

/* article / project header */
.meta{color:var(--ink3);font-style:italic;margin:0 0 2rem}
.hero-img{margin:0 0 2.4rem}
.hero-img img{width:100%;max-height:26rem;object-fit:cover}
.related{margin-top:4rem}
/* "Similar writing" -- same spirit as gwern's Similar Links: a big small-caps title and a
   star-bulleted list, rather than card/thumbnail "recommended posts" grids. */
.similar-title{font-variant-caps:all-small-caps;letter-spacing:.07em;font-weight:600;font-size:2rem;
  margin:4.4rem 0 1.3rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.1rem 2.2rem}
.related-list li{padding:.4rem 0;display:flex;align-items:baseline;gap:.5em}
.related-list li::before{content:"\2726";color:var(--accent);font-size:.8em;flex:none}
.related-list .via{font-style:italic;color:var(--ink3);font-size:.85rem;white-space:nowrap}
.about-grid{display:grid;grid-template-columns:1fr 11rem;gap:2.4rem}
.about-grid .portrait img{width:100%;aspect-ratio:3/4;object-fit:cover}
.links{list-style:none;padding:0;margin:2rem 0 0}.links li{margin:.25rem 0}

/* contact */
form.contact{display:grid;gap:1.1rem;max-width:34rem;margin-top:1.5rem}
form.contact label{display:grid;gap:.3rem;font-style:italic;color:var(--ink2);font-size:1rem}
form.contact input,form.contact textarea{font:inherit;font-style:normal;color:var(--ink);background:transparent;border:1px solid var(--rule);padding:.6rem .75rem;border-radius:0;width:100%}
form.contact textarea{min-height:9rem;resize:vertical}
form.contact input:focus,form.contact textarea:focus{border-color:var(--accent)}
.hp{position:absolute;left:-99rem}
.btn{font:inherit;color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);padding:.45rem 1.2rem;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.55);justify-self:start}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.btn[disabled]{opacity:.6;cursor:default}
.note{margin-top:1rem}.note.bad{color:var(--bad)}

/* retro preview windows */
.win{position:fixed;z-index:60;width:min(26rem,calc(100vw - 1.5rem));background:var(--bg2);border:1px solid var(--accent);
  box-shadow:5px 5px 0 rgba(0,0,0,.55);font-size:.98rem;line-height:1.5;opacity:0;transform:translateY(5px);
  transition:opacity .16s ease,transform .16s ease}
.win.on{opacity:1;transform:none}
.win-bar{display:flex;align-items:center;gap:.55rem;padding:.3rem .5rem;border-bottom:1px solid var(--accent);cursor:grab;touch-action:none;user-select:none}
.win-bar:active{cursor:grabbing}
.win-close{width:.85rem;height:.85rem;border:1px solid var(--accent);background:var(--bg);padding:0;cursor:pointer;flex:none}
.win-close:hover{background:var(--accent)}
.stripes{flex:1;height:.62rem;background:repeating-linear-gradient(var(--accent) 0 1px,transparent 1px 3px);min-width:.6rem}
.win-title{color:var(--accent);font-variant-caps:all-small-caps;letter-spacing:.07em;font-size:1.02rem;max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{padding:.9rem 1rem .3rem;max-height:min(50vh,22rem);overflow:auto}
.win-body img{width:100%;height:7.5rem;object-fit:cover;margin:0 0 .8rem}
.win-body h4{margin:0 0 .15rem;font-size:1.25rem;font-weight:500;line-height:1.2}
.win-body .m{margin:0 0 .6rem;font-style:italic;color:var(--ink3);font-size:.93rem}
.win-body p{margin:0 0 .7rem;color:var(--ink2)}
.win-body .url{font-family:var(--type);font-size:.82rem;word-break:break-all;color:var(--ink)}
.win-foot{padding:.1rem 1rem .8rem;display:flex;justify-content:flex-end}
.win-go{background:var(--accent);color:var(--on-accent);text-decoration:none;padding:.15rem .8rem;font-size:.95rem}
.win-foot{gap:.6rem}
.win-go.alt{font:inherit;font-size:.95rem;background:transparent;color:var(--accent);border:1px solid var(--accent);cursor:pointer}
.win-go.alt:hover{background:var(--accent);color:var(--on-accent)}
.win-body .shot{height:11rem;object-position:top}
.win.wide{width:min(46rem,calc(100vw - 1.5rem))}
.win.wide .win-body{max-height:none}
.win-body iframe.live{width:100%;height:min(58vh,26rem);border:0;background:#fff;display:block}
.win-go:hover{background:var(--ink);color:var(--on-accent)}
@media (max-width:640px){
  .top nav{flex-wrap:wrap;gap:.5rem 1.1rem}
  .win{left:.75rem!important;right:.75rem;top:auto!important;bottom:.75rem;width:auto}
  .entry{grid-template-columns:1fr}
  .cover img{aspect-ratio:16/9}
  .yr{grid-template-columns:1fr}
  .yr-n{position:static;margin-bottom:.6rem}
  .post,.upd{grid-template-columns:1fr;gap:.1rem}
  .about-grid{grid-template-columns:1fr}
  .about-grid .portrait{order:-1;max-width:10rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}