/* Generated by _writing/build.mjs — edit lib/theme.mjs instead. */

/* Body copy sits between --fg and --fg-dim: long-form reading wants more
   contrast than a one-line description does. */
:root{--prose:#d5c4a1;}

/* Post pages mark the current tab with aria-current, since they are links to
   other documents rather than tabs in a tablist. */
.tab[aria-current="page"]{color:var(--bg); background:var(--yellow); font-weight:500;}
.tab[aria-current="page"] .tab__key{color:var(--bg);}
.tab{display:flex; align-items:center; text-decoration:none;}

/* A long slug in the prompt pushes the input off a phone screen entirely, so
   the path collapses to the directory below the desktop breakpoint. */
.term__prompt .loc--short{display:none;}

.main{position:relative;}

/* Reading progress. A 2px rule under the nav rather than a floating bar, so it
   reads as part of the chrome instead of an ornament. */
.progress{
  position:sticky; top:0; left:0; height:2px; width:100%; z-index:5;
  background:var(--yellow); transform-origin:0 50%; transform:scaleX(0);
}

.post{padding:2.2rem 1.2rem 4rem; max-width:70ch; margin:0 auto;}

.crumb{
  display:inline-block; color:var(--fg-faint); font-size:.75rem;
  text-decoration:none; margin-bottom:1.8rem; border-bottom:0;
}
.crumb:hover,.crumb:focus-visible{color:var(--aqua); outline:none; border-bottom:0;}

.post__title{
  font-size:1.55rem; line-height:1.25; font-weight:700; color:var(--fg);
  margin:0 0 .5rem; letter-spacing:-.01em;
}
.post__meta{
  color:var(--fg-faint); font-size:.75rem; margin:0 0 .3rem;
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:baseline;
}
.post__meta .sep{color:var(--bg3);}
.post__tags{display:flex; gap:.45rem; flex-wrap:wrap;}
.post__tag{color:var(--purple); font-size:.7rem;}
.post__rule{border:0; border-top:1px solid var(--bg3); margin:1.5rem 0 2rem;}
.post__draftbanner{color:var(--orange);}

/* ---------- prose ---------- */
.prose{color:var(--prose,#d5c4a1); line-height:1.78;}
.prose > :first-child{margin-top:0;}
.prose p{margin:0 0 1.15rem; color:inherit;}
.prose strong{color:var(--fg); font-weight:700;}
.prose em{
  color:var(--fg); font-style:normal; text-decoration:underline;
  text-decoration-color:var(--bg3); text-underline-offset:.22em;
}
.prose del{color:var(--fg-faint);}

/* Headings keep their markdown sigil. It signals depth at a glance without
   shouting, and it belongs in a page built to look like an editor. */
.prose h2,.prose h3,.prose h4{font-weight:700; line-height:1.3; scroll-margin-top:1rem;}
.prose h2{
  color:var(--yellow); font-size:1.08rem; margin:2.6rem 0 .8rem;
  text-transform:none; letter-spacing:normal;
}
.prose h3{color:var(--fg); font-size:.98rem; margin:2rem 0 .6rem;}
.prose h4{color:var(--fg-dim); font-size:.92rem; margin:1.6rem 0 .5rem;}
.prose h2::before,.prose h3::before,.prose h4::before{color:var(--fg-faint); font-weight:400;}
.prose h2::before{content:"## ";}
.prose h3::before{content:"### ";}
.prose h4::before{content:"#### ";}

.prose a{color:var(--blue); text-decoration:none; border-bottom:1px solid var(--bg3);}
.prose a:hover,.prose a:focus-visible{border-bottom-color:var(--blue); outline:none;}

.prose ul,.prose ol{margin:0 0 1.15rem; padding-left:1.4rem;}
.prose li{color:inherit; margin-bottom:.45rem;}
.prose li::marker{color:var(--fg-faint);}
.prose li > ul,.prose li > ol{margin:.45rem 0 0;}

.prose blockquote{
  margin:1.4rem 0; padding:.1rem 0 .1rem 1.1rem;
  border-left:2px solid var(--purple); color:var(--fg-dim);
}
.prose blockquote p:last-child{margin-bottom:0;}

.prose code{
  background:var(--bg2); color:var(--aqua); font-size:.85em;
  padding:.1em .4em; border-radius:2px;
}
.code{position:relative; margin:1.4rem 0; background:var(--bg1); border:1px solid var(--bg3);}
.code__lang{
  position:absolute; top:0; right:0; padding:.15rem .55rem;
  font-size:.65rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-faint); background:var(--bg2);
  border-left:1px solid var(--bg3); border-bottom:1px solid var(--bg3);
}
.code pre{margin:0; padding:.9rem 1rem; overflow-x:auto;}
.code code{background:none; color:var(--fg); padding:0; font-size:.82rem; line-height:1.65;}

.prose figure{margin:1.6rem 0;}
.prose figure img,.prose figure video{max-width:100%; height:auto; display:block; border:1px solid var(--bg3);}
.prose figcaption{color:var(--fg-faint); font-size:.72rem; margin-top:.5rem;}
.prose img{max-width:100%; height:auto;}
.prose hr{border:0; border-top:1px dashed var(--bg3); margin:2.2rem 0;}

.tablewrap{overflow-x:auto; margin:1.4rem 0; border:1px solid var(--bg3);}
.prose table{border-collapse:collapse; width:100%; font-size:.85rem;}
.prose th,.prose td{padding:.45rem .8rem; border-bottom:1px solid var(--bg3);}
.prose th{background:var(--bg2); color:var(--yellow); font-weight:500; text-align:left;}
.prose tbody tr:last-child td{border-bottom:0;}

/* ---------- footer nav ---------- */
.postnav{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin-top:3.5rem; background:var(--bg3); border:1px solid var(--bg3);
}
.postnav__link{
  background:var(--bg); padding:.85rem 1rem; text-decoration:none; min-width:0;
  display:flex; flex-direction:column; gap:.25rem; border-bottom:0;
}
.postnav__link:hover,.postnav__link:focus-visible{background:var(--bg1); outline:none; border-bottom:0;}
.postnav__dir{color:var(--fg-faint); font-size:.7rem;}
.postnav__title{color:var(--green); font-size:.85rem; overflow-wrap:anywhere;}
.postnav__link--next{text-align:right;}
.postnav__empty{background:var(--bg); padding:.85rem 1rem;}

@media (max-width:640px){
  .post{padding:1.5rem .95rem 3rem;}
  .post__title{font-size:1.3rem;}
  .term__prompt .loc--full{display:none;}
  .term__prompt .loc--short{display:inline;}
  .tab:nth-child(3n+1){border-right:0;}
  .postnav{grid-template-columns:1fr;}
  .postnav__link--next{text-align:left;}
}