/* sieglinger.net — gwern.net-inspired reading stylesheet (vanilla CSS) */

:root{
  --font-serif: "Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure: 38rem;     /* reading column */
  --page: 62rem;        /* page width incl. sidenote gutter */

  /* light (default) palette */
  --bg: #fbfaf6;
  --bg-alt: #f2eee3;
  --text: #1c1b18;
  --text-muted: #6e6a62;
  --border: #ddd7c9;
  --rule: #c9c2b2;
  --link: #5a5346;
  --link-hover: #14110c;
  --link-visited: #6f6757;
  --accent: #8a5a2b;
  --code-bg: #f1ede2;
  --quote-text: #4a463d;
  --bad: #a83228;
}

html[data-theme="dark"]{
  --bg:#211f1b; --bg-alt:#2b2924; --text:#e7e3da; --text-muted:#a39d91;
  --border:#3c3933; --rule:#47433c; --link:#b7b1a4; --link-hover:#f4f0e7; --link-visited:#9a9388;
  --accent:#c89b6a; --code-bg:#2a2823; --quote-text:#cfc9bb; --bad:#e08378;
}

@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg:#211f1b; --bg-alt:#2b2924; --text:#e7e3da; --text-muted:#a39d91;
    --border:#3c3933; --rule:#47433c; --link:#b7b1a4; --link-hover:#f4f0e7; --link-visited:#9a9388;
    --accent:#c89b6a; --code-bg:#2a2823; --quote-text:#cfc9bb; --bad:#e08378;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-serif);
  font-size:1.05rem;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }

.page{ max-width:var(--page); margin:0 auto; padding:0 1.5rem; }

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:1.4rem 0 0.9rem; border-bottom:1px solid var(--border);
}
.site-title{
  margin:0; font-size:1.18rem; font-weight:600; color:var(--text);
  text-decoration:none; font-variant:small-caps; letter-spacing:0.12em;
}
.site-title .tld{ color:var(--text-muted); }
.site-nav{ margin-left:auto; display:flex; gap:1.1rem; }
.site-nav a{
  font-variant:small-caps; letter-spacing:0.06em; font-size:0.95rem;
  color:var(--text-muted); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.site-nav a:hover{ color:var(--text); border-bottom-color:var(--text-muted); }
#theme-toggle{
  background:none; border:1px solid var(--border); color:var(--text-muted);
  font:1rem/1 var(--font-serif); padding:2px 7px; cursor:pointer;
}
#theme-toggle:hover{ color:var(--text); border-color:var(--text-muted); }

/* ---------- footer ---------- */
.site-footer{
  margin-top:3rem; padding-top:1rem; border-top:1px solid var(--border);
  color:var(--text-muted); font-size:0.85rem;
}

/* ---------- content + reading measure ---------- */
.content{ position:relative; padding:1.5rem 0 1rem; }
article.markdown-body{ max-width:var(--measure); }

.article-header{ margin-bottom:1.5rem; }
.article-header h1{
  font-size:1.9rem; line-height:1.2; margin:0 0 0.4rem; font-weight:600;
  letter-spacing:-0.01em;
}
.article-meta{
  color:var(--text-muted); font-size:0.9rem;
  font-variant:small-caps; letter-spacing:0.04em;
}

/* ---------- markdown typography ---------- */
.markdown-body h2,.markdown-body h3,.markdown-body h4{
  line-height:1.3; font-weight:600; margin:1.8em 0 0.6em; scroll-margin-top:1.5rem;
}
.markdown-body h2{
  font-size:1.4rem; font-variant:small-caps; letter-spacing:0.04em;
  border-bottom:1px solid var(--border); padding-bottom:0.2rem;
}
.markdown-body h3{ font-size:1.15rem; }
.markdown-body h4{ font-size:1rem; font-variant:small-caps; color:var(--text-muted); }

.markdown-body p{
  margin:0 0 1em; text-align:justify; -webkit-hyphens:auto; hyphens:auto; orphans:2; widows:2;
}
.markdown-body ul,.markdown-body ol{ margin:0 0 1em; padding-left:1.4em; }
.markdown-body li{ margin:0.25em 0; }
.markdown-body li>p{ margin:0 0 0.4em; }

/* drop cap on the article's opening paragraph */
article.markdown-body > p:first-of-type::first-letter{
  float:left; font-family:var(--font-serif); font-weight:600;
  font-size:3.4em; line-height:0.82; padding:0.04em 0.1em 0 0; color:var(--text);
}

/* footnote refs (kept subtle; sidenotes take over on wide viewports) */
.markdown-body sup a[data-footnote-ref]{
  font-size:0.72em; text-decoration:none; color:var(--accent);
}
.markdown-body sup a[data-footnote-ref]:hover{ text-decoration:underline; }

/* links: muted underline, stronger on hover */
a{
  color:var(--link); text-decoration:underline;
  text-decoration-color:var(--rule); text-underline-offset:2px; text-decoration-thickness:1px;
}
a:visited{ color:var(--link-visited); }
a:hover{ color:var(--link-hover); text-decoration-color:var(--text-muted); }

/* short centered rule */
hr{ border:0; border-top:1px solid var(--border); width:6rem; margin:2.5rem auto; }

/* blockquote */
blockquote{
  margin:1.4em 0; padding:0.2em 1em; color:var(--quote-text);
  border-left:3px solid var(--accent); font-style:italic;
}
blockquote p{ text-align:left; }

/* code / pre */
code{ font-family:var(--font-mono); font-size:0.88em; background:var(--code-bg); padding:0.1em 0.32em; }
pre{
  background:var(--code-bg); border:1px solid var(--border);
  padding:0.85em 1em; overflow-x:auto; margin:1.2em 0;
}
pre code{ background:none; padding:0; font-size:0.85rem; line-height:1.45; }

/* tables */
table{ border-collapse:collapse; width:auto; max-width:100%; margin:1.2em 0; font-size:0.95rem; }
th,td{ border:1px solid var(--border); padding:0.4em 0.7em; text-align:left; vertical-align:top; }
th{ background:var(--bg-alt); font-variant:small-caps; letter-spacing:0.03em; }

/* figure */
figure{ margin:1.6em 0; }
figcaption{ color:var(--text-muted); font-size:0.85rem; text-align:center; margin-top:0.4em; }

/* ---------- table of contents ---------- */
.toc{
  float:left; width:13rem; margin:0 1.5rem 1rem 0;
  padding:0.8em 1em; background:var(--bg-alt); border:1px solid var(--border);
  font-size:0.85rem; clear:left;
}
.toc-title{
  font-variant:small-caps; letter-spacing:0.06em; color:var(--text-muted);
  margin-bottom:0.4em; font-size:0.78rem;
}
.toc ul{ list-style:none; margin:0; padding:0; }
.toc li{ margin:0.15em 0; }
.toc a{ text-decoration:none; color:var(--text); }
.toc a:hover{ text-decoration:underline; }
.toc-l3{ padding-left:1em; }
.toc-l4{ padding-left:2em; }

/* ---------- blog listing ---------- */
.post-list{ list-style:none; margin:1rem 0; padding:0; max-width:var(--measure); }
.post-item{ padding:0.5em 0; border-bottom:1px solid var(--border); }
.post-item time{ color:var(--text-muted); font-variant-numeric:tabular-nums; font-size:0.85rem; margin-right:0.6em; }
.post-item a{ font-weight:500; }
.post-desc{ display:block; color:var(--text-muted); font-size:0.88rem; margin-top:0.15em; }
.year-heading{ font-variant:small-caps; letter-spacing:0.06em; margin:1.6em 0 0.4em; }

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem; margin:1.5rem 0;
}
.gallery-item{ margin:0; }
.gallery-item a{ display:block; }
.gallery-item img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block; border:1px solid var(--border);
}
.gallery-item figcaption{ text-align:left; font-size:0.78rem; color:var(--text-muted); padding:0.3em 0.1em 0; }
.gallery-grid:empty{ display:none; } /* friendly empty state handled in markup */

/* ---------- sidenotes (right gutter, wide viewports only) ---------- */
.sidenote{
  position:absolute; width:15rem; font-size:0.82rem; line-height:1.45;
  color:var(--text-muted); border-left:2px solid var(--accent);
  padding:0.1em 0 0.1em 0.8em;
}
.sidenote-num{ font-variant:small-caps; font-weight:600; color:var(--accent); margin-right:0.3em; }
.sidenote p{ margin:0 0 0.4em; text-align:left; -webkit-hyphens:auto; hyphens:auto; }
.sidenote a{ color:var(--text-muted); }

/* inline footnotes (fallback when sidenotes inactive) */
section.footnotes{
  max-width:var(--measure); font-size:0.85rem; color:var(--text-muted);
  border-top:1px solid var(--border); margin-top:2rem; padding-top:1rem;
}
section.footnotes ol{ padding-left:1.3em; }
section.footnotes li{ margin:0.3em 0; }
section.footnotes a[data-footnote-backref]{ text-decoration:none; }

/* ---------- upload form ---------- */
#upload-form{ max-width:42rem; margin:1.5rem 0; padding:1.4rem 1.6rem; background:var(--bg-alt); border:1px solid var(--border); }
#upload-form label{
  display:block; font-variant:small-caps; letter-spacing:0.04em;
  color:var(--text-muted); font-size:0.85rem; margin:1rem 0 0.3rem;
}
#passcode,#uploader{
  width:100%; font:1rem var(--font-serif); padding:0.5em 0.6em;
  background:var(--bg); color:var(--text); border:1px solid var(--border);
}
#passcode:focus,#uploader:focus{ outline:none; border-color:var(--accent); }

#drop-zone{
  margin:1rem 0; padding:2.2rem 1rem; text-align:center; cursor:pointer;
  border:2px dashed var(--border); color:var(--text-muted);
  font-variant:small-caps; letter-spacing:0.04em;
}
#drop-zone:hover,#drop-zone:focus,#drop-zone.drag{
  border-color:var(--accent); color:var(--text); background:var(--bg-alt);
}
#drop-zone:focus{ outline:none; }

#upload-list{ list-style:none; margin:0.5rem 0; padding:0; }
.upload-row{
  display:flex; gap:0.8em; align-items:baseline; padding:0.4em 0;
  border-bottom:1px solid var(--border); font-size:0.9rem;
}
.upload-row .file-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-row .file-size{ flex:0 0 auto; color:var(--text-muted); font-variant-numeric:tabular-nums; font-size:0.8rem; }
.upload-row .file-status{ flex:0 0 auto; font-size:0.8rem; color:var(--text-muted); }
.upload-row .file-status.saved{ color:var(--accent); }
.upload-row .file-status.rejected,.upload-row .file-status.error{ color:var(--bad); }

#upload-btn{
  font:1rem var(--font-serif); padding:0.5em 1.4em; cursor:pointer;
  background:var(--text); color:var(--bg); border:1px solid var(--text);
}
#upload-btn:hover{ opacity:0.88; }
#upload-btn:disabled{ opacity:0.5; cursor:default; }

#upload-status{ font-size:0.9rem; min-height:1.2em; }
#upload-status.error{ color:var(--bad); }
#upload-status.ok{ color:var(--accent); }
#upload-status a{ display:inline-block; margin-left:0.4em; }

/* ---------- album gate + album upload ---------- */
.album-gate{
  max-width:24rem; margin:1.5rem 0; padding:1.2rem 1.4rem;
  background:var(--bg-alt); border:1px solid var(--border);
}
.album-gate label{
  display:block; font-variant:small-caps; letter-spacing:0.04em;
  color:var(--text-muted); font-size:0.85rem; margin:0 0 0.3rem;
}
.album-gate input[type="password"]{
  width:100%; font:1rem var(--font-serif); padding:0.5em 0.6em;
  background:var(--bg); color:var(--text); border:1px solid var(--border);
}
.album-gate input[type="password"]:focus{ outline:none; border-color:var(--accent); }
.album-gate .gate-error{ color:var(--bad); font-size:0.85rem; margin:0.7rem 0 0; text-align:left; }
.album-gate button{
  margin-top:1rem; font:1rem var(--font-serif); padding:0.5em 1.4em; cursor:pointer;
  background:var(--text); color:var(--bg); border:1px solid var(--text);
}
.album-gate button:hover{ opacity:0.88; }

/* upload panel on an album page — separated from the grid above */
.album-upload{
  max-width:42rem; margin:2.5rem 0 1.5rem; padding-top:1.8rem;
  border-top:1px solid var(--border);
}
.album-upload h2{
  font-size:1.4rem; font-variant:small-caps; letter-spacing:0.04em; font-weight:600;
  border-bottom:1px solid var(--border); padding-bottom:0.2rem; margin:0 0 0.6em;
}

/* ---------- admin (single-user: TOTP login + moderation grid) ---------- */
/* The login form carries both .album-gate and .admin-login; .album-gate already
   styles the panel, small-caps labels, password field, .gate-error and the
   inverted submit button — add only the second-factor field + pair spacing. */
.admin-login input + label{ margin-top:0.9rem; }   /* gap between the two label/input pairs */
#admin-code{
  width:100%; font:1rem var(--font-serif); padding:0.5em 0.6em;
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  letter-spacing:0.15em; font-variant-numeric:tabular-nums;
}
#admin-code:focus{ outline:none; border-color:var(--accent); }

/* logout: small right-aligned muted control, NOT the inverted primary button */
.admin-logout{ margin:0 0 1.2rem; display:flex; justify-content:flex-end; }
.admin-logout button{
  font:0.85rem var(--font-serif); padding:0.3em 0.9em; cursor:pointer;
  background:transparent; color:var(--text-muted); border:1px solid var(--border);
}
.admin-logout button:hover{ color:var(--text); border-color:var(--text-muted); }

/* per-image delete: compact full-width, muted red (same family as .gate-error),
   transparent bg, hover inverts to red bg / page-bg text — works in both themes */
.admin-delete{ margin:0.3em 0 0; }
.admin-delete button{
  width:100%; font:0.8rem var(--font-serif); padding:0.3em 0.5em; cursor:pointer;
  background:transparent; color:var(--bad); border:1px solid var(--bad);
}
.admin-delete button:hover{ background:var(--bad); color:var(--bg); }

/* album tag inside a dashboard caption */
.admin-album-tag{
  font-variant:small-caps; letter-spacing:0.04em; font-size:0.72rem;
  color:var(--text-muted); border:1px solid var(--border); padding:0.1em 0.3em;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(12,11,9,0.92); z-index:1000; padding:2rem;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:92vw; max-height:92vh; display:block;
  box-shadow:0 0 40px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.08);
}
.lightbox .lb-caption{
  position:absolute; bottom:1.2rem; left:0; right:0; text-align:center;
  color:#d8d3c8; font-size:0.85rem; padding:0 2rem;
}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute; background:none; border:none; color:#e8e3d8; cursor:pointer;
  font:2.4rem/1 var(--font-serif); padding:0.5rem; top:50%; transform:translateY(-50%);
}
.lightbox .lb-close{ top:1rem; right:1.2rem; transform:none; font-size:1.8rem; }
.lightbox .lb-prev{ left:1rem; }
.lightbox .lb-next{ right:1rem; }
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{ color:#fff; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .toc{ float:none; width:auto; margin:1rem 0; }
}
@media (max-width:640px){
  .page{ padding:0 1rem; }
  body{ font-size:1rem; }
  .site-header{ flex-wrap:wrap; gap:0.6rem; padding-top:1rem; }
  .site-nav{ margin-left:0; gap:0.9rem; }
  article.markdown-body{ max-width:100%; }
  .markdown-body p{ text-align:left; }
  .article-header h1{ font-size:1.5rem; }
  .gallery-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.8rem; }
  article.markdown-body > p:first-of-type::first-letter{ font-size:2.8em; }
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-nav,#theme-toggle,.site-footer,
  #upload-form,#drop-zone,#upload-list,#upload-btn,#upload-status,.album-upload,.admin-logout,.admin-delete,.lightbox,.sidenote{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .page{ max-width:none; }
  article.markdown-body{ max-width:none; }
  a{ color:#000; text-decoration:underline; }
  section.footnotes{ display:block !important; }
}