/* ================================================================
   EKRAM — two families only
   Newsreader        the font for thought
   IBM Plex Mono     the font for structure
   Oxidized vermilion  #963C32 light / #C55C50 dark
   Structure is spaced, not ruled.
   ================================================================ */

:root{
  --bg:#FAF9F6; --title:#17170F; --body:#4A4840; --meta:#6B6861;
  --rule:#E3E1D9; --accent:#963C32;
  --text:Newsreader,Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D0E0C; --title:#E8E4DC; --body:#AAA69E; --meta:#7D7A73;
    --rule:#24241F; --accent:#C55C50;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0E0C; --title:#E8E4DC; --body:#AAA69E; --meta:#7D7A73;
  --rule:#24241F; --accent:#C55C50;
}
:root[data-theme="light"]{
  --bg:#FAF9F6; --title:#17170F; --body:#4A4840; --meta:#6B6861;
  --rule:#E3E1D9; --accent:#963C32;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);color:var(--body);
  font-family:var(--text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}

.page{max-width:620px;margin:0 auto;padding:clamp(38px,7vh,64px) 24px 100px}
body.post-template .page,body.page-template .page{max-width:660px;padding-top:clamp(34px,6vh,56px)}

/* ---- structure: marks, aligned to the text column ---- */
.metarow{
  max-width:620px;margin:0 auto;padding:26px 24px 0;
  display:flex;align-items:baseline;justify-content:space-between;
}
body.post-template .metarow,
body.page-template .metarow{max-width:660px}
.y3k,.mode{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--meta);transition:color .18s;
}
.mode{background:none;border:none;padding:0;cursor:pointer;line-height:inherit}
.y3k:hover,.mode:hover{color:var(--accent)}

/* ---- header ---- */
.site-head{margin-bottom:16px}
.nameline{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.site-head h1{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--title);letter-spacing:.1em;text-transform:uppercase;
}
.handle{
  font-family:var(--mono);font-size:12px;color:var(--title);letter-spacing:.04em;
  border-bottom:1.5px solid var(--accent);padding-bottom:1px;transition:color .15s;
}
.handle:hover{color:var(--accent)}
.site-head p{font-family:var(--text);color:var(--meta);font-size:17px;line-height:1.5}
.site-head .thesis{
  margin-top:14px;max-width:46ch;font-family:var(--text);
  font-size:19px;line-height:1.42;color:var(--title);
}

/* ---- structure: section labels ---- */
.year{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--meta);margin-top:64px;margin-bottom:30px;
}
.year.now{color:var(--accent)}

/* ---- entries ---- */
.item{display:block;margin-bottom:38px}
.item .t{
  display:block;font-family:var(--text);font-size:23px;font-weight:400;
  color:var(--title);letter-spacing:-.005em;line-height:1.24;
  margin-bottom:8px;transition:color .16s;
}
.item:hover .t{color:var(--accent)}
.item .ex{
  display:block;font-family:var(--text);color:var(--body);
  font-size:15.5px;line-height:1.6;max-width:60ch;margin-bottom:10px;
}
.item .m{
  font-family:var(--mono);color:var(--meta);font-size:11px;letter-spacing:.08em;
}
.grp-now .item .t{font-weight:500}
.grp-now .item .t::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:11px;vertical-align:middle;
  position:relative;top:-2px;
}
@media(max-width:600px){.item{margin-bottom:32px}.item .t{font-size:20px}}

/* ---- structure: article nav ---- */
.top{display:flex;align-items:baseline;gap:14px;margin-bottom:52px;flex-wrap:wrap}
.top a.home{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--title);letter-spacing:.1em;text-transform:uppercase;
}
.top a.home::before{content:"\2190  ";color:var(--meta)}
.top a.home:hover{color:var(--accent)}
.top .hd{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--meta);letter-spacing:.04em}
.top .hd:hover{color:var(--accent)}

/* ---- article ---- */
article h1,body.post-template h1,body.page-template h1{
  font-family:var(--text);font-size:clamp(29px,4.4vw,38px);font-weight:400;
  color:var(--title);letter-spacing:-.012em;line-height:1.14;margin-bottom:14px;
}
.meta{font-family:var(--mono);color:var(--meta);font-size:11px;letter-spacing:.08em;margin-bottom:46px}

.body{font-family:var(--text);font-size:18px;line-height:1.65;color:var(--body)}
.body p{margin-bottom:1.15em}
.body strong{color:var(--title);font-weight:500}
.body a{color:var(--accent);border-bottom:1px solid var(--rule);transition:border-color .15s}
.body a:hover{border-bottom-color:var(--accent)}
.body h2,.body h3,.body h4{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);margin:2.8em 0 .9em;
}
.body blockquote{
  border-left:2px solid var(--rule);padding-left:20px;margin:0 0 1.4em;
  font-style:italic;color:var(--meta);
}
.body ul,.body ol{margin:0 0 1.4em 1.3em}
.body li{margin-bottom:.5em;padding-left:.2em}
.body figure{margin:0 0 1.9em}
.body img{display:block;width:100%;height:auto}
.body figcaption{
  font-family:var(--mono);color:var(--meta);font-size:11px;
  letter-spacing:.04em;line-height:1.5;margin-top:10px;text-align:center;
}
.body hr{border:none;border-top:1px solid var(--rule);margin:2.4em 0}
.body code{font-family:var(--mono);background:var(--rule);padding:1px 5px;font-size:13.5px}
.body pre{font-family:var(--mono);background:var(--rule);padding:16px;overflow-x:auto;font-size:13px;line-height:1.6}
.body pre code{background:none;padding:0}

/* ---- structure: prev / next ---- */
.pn{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:80px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
}
.pn a{max-width:46%;color:var(--meta);transition:color .15s}
.pn a:hover{color:var(--accent)}
.pn .nx{text-align:right;margin-left:auto}
.pn small{
  display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;margin-bottom:6px;color:var(--meta);
}
@media(max-width:560px){.pn a{max-width:100%}.pn .nx{text-align:left;margin-left:0}}

/* ---- footer ---- */
.site-foot{
  margin-top:88px;color:var(--meta);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.6;
}
.site-foot p{margin-bottom:14px;font-family:var(--text);font-size:17px;letter-spacing:0;color:var(--title)}
.links{display:flex;gap:18px;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.links a{color:var(--meta)}
.links a:hover{color:var(--accent)}
body.post-template .site-foot{
  margin-top:72px;display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
}
body.post-template .site-foot a:hover{color:var(--accent)}

/* ---- y3k ---- */
.y3k-page{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  font-family:var(--text);color:var(--meta);
  font-size:clamp(24px,4.6vw,40px);line-height:1;
}

/* ---- Ghost editor cards ---- */
.body .kg-card{margin-top:1.9em;margin-bottom:1.9em}
.body .kg-image{display:block;width:100%}
.body .kg-width-wide,.body .kg-width-full{width:100%}
.body .kg-embed-card{display:block}
.body .kg-embed-card iframe,.body iframe{width:100%;aspect-ratio:16/9;height:auto;display:block}
.body .kg-bookmark-card{margin-top:1.9em;margin-bottom:1.9em}
.body .kg-bookmark-container{display:block;border:1px solid var(--rule);padding:18px 20px;transition:border-color .18s}
.body .kg-bookmark-container:hover{border-color:var(--accent)}
.body .kg-bookmark-content{display:block}
.body .kg-bookmark-title{
  display:block;font-family:var(--text);font-weight:500;font-size:17px;
  margin-bottom:6px;line-height:1.3;color:var(--title);
}
.body .kg-bookmark-description{
  display:block;font-family:var(--text);color:var(--meta);
  font-size:15px;line-height:1.5;margin-bottom:9px;
}
.body .kg-bookmark-metadata{font-family:var(--mono);color:var(--meta);font-size:11px;letter-spacing:.06em}
.body .kg-bookmark-thumbnail{display:none}
.body .kg-bookmark-icon{width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:none}

/* ---- error ---- */
.err h1{font-family:var(--text);font-size:38px;font-weight:400;color:var(--title);margin-bottom:14px}
.err p{font-family:var(--text);color:var(--meta);margin-bottom:8px}
.err a{color:var(--accent)}