:root{ --fg:#1a1a1a; --muted:#6b6b6b; --link:#2a6db0; --bg:#ffffff; }
*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--fg);
  font-family:ui-serif,"Iowan Old Style",Palatino,"Palatino Linotype","Times New Roman",Georgia,serif;
  font-size:19px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  max-width:42rem; margin:0 auto; padding:4rem 1.5rem 6rem;
}
a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration:none; }
img.avatar{ width:170px; height:170px; object-fit:cover; display:block; margin-bottom:2.5rem; }
nav{ margin-bottom:2.5rem; }
nav a{ color:var(--muted); margin-right:1.25rem; text-decoration:none; }
nav a:hover{ color:var(--fg); }
nav a.here{ color:var(--fg); }
p{ margin:0 0 1.25rem; }
h1{ font-size:1.25rem; font-weight:600; margin:0 0 1.5rem; }
.muted{ color:var(--muted); }
.quote{ margin:2rem 0 2.5rem; color:var(--muted); }
ul.list{ list-style:none; padding:0; margin:0; }
ul.list li{ margin-bottom:.45rem; display:flex; gap:1rem; align-items:baseline; line-height:1.35; }
ul.list li .date{ color:var(--muted); font-size:.85em; white-space:nowrap; min-width:6.5rem; }
ul.list li .entry{ display:flex; flex-direction:column; gap:.05rem; }
ul.list li .tldr{ font-size:.68em; font-style:italic; color:var(--muted); }
.cat{ color:var(--muted); font-size:.8em; letter-spacing:.08em; text-transform:uppercase; margin:2rem 0 .75rem; }
.cat:first-child{ margin-top:0; }
.photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.photos a img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }

/* --- interests wall: tinted tiles, CSS masonry, no JS --- */
.wall{ columns:15rem; column-gap:12px; }
.tile{ break-inside:avoid; margin:0 0 12px; border-radius:7px; overflow:hidden; }
.tile.quote{ background:#f4f1ea; padding:1.1rem 1.2rem; font-style:italic; font-size:.95em; line-height:1.45; }
.tile.quote .who{ display:block; margin-top:.65rem; font-style:normal; font-size:.78em; color:var(--muted); }
.tile.link{ background:#eceff3; padding:1.1rem 1.2rem; line-height:1.35; }
.tile.link a{ text-decoration:none; color:var(--fg); font-weight:600; font-size:.95em; }
.tile.link a:hover{ text-decoration:underline; }
.tile.link .note{ display:block; margin-top:.4rem; color:var(--muted); font-size:.82em; font-style:italic; font-weight:400; }
.tile.note{ background:#f0efec; padding:1.1rem 1.2rem; font-size:.9em; line-height:1.45; }
.tile.photo{ background:#1a1a1a; line-height:0; }
.tile.photo img{ width:100%; display:block; }
.tile.photo .who{ display:block; padding:.5rem .7rem; line-height:1.3; font-size:.75em; color:var(--muted); background:#f0efec; }
.credit{ font-size:.78em; font-style:italic; margin:.75rem 0 0; }

/* --- rendered blog posts (Jekyll) --- */
.post-title{ font-size:1.4rem; font-weight:600; margin:0 0 .4rem; }
.post-meta{ color:var(--muted); font-size:.85em; margin:0 0 1.75rem; }
.post-tldr{ color:var(--muted); margin:0 0 2rem; }
.post-content h2{ font-size:1.15rem; font-weight:600; margin:2.25rem 0 .75rem; }
.post-content h3{ font-size:1rem; font-weight:600; margin:1.75rem 0 .5rem; }
.post-content img{ max-width:100%; height:auto; display:block; margin:1.5rem 0; }
.post-content blockquote{ margin:1.5rem 0; padding-left:1rem; border-left:3px solid #e2e2e2; color:var(--muted); }
.post-content pre{ background:#f6f6f4; padding:1rem; overflow:auto; font-size:.85em; line-height:1.5; }
.post-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; }
.post-content pre code{ font-size:inherit; }
.post-content hr{ border:none; border-top:1px solid #e2e2e2; margin:2.5rem 0; }
.post-content ul, .post-content ol{ padding-left:1.25rem; }
.post-content li{ margin-bottom:.4rem; }
.post-content table{ border-collapse:collapse; width:100%; font-size:.9em; }
.post-content th, .post-content td{ border:1px solid #e2e2e2; padding:.4rem .6rem; text-align:left; }

.post-back{ margin-top:3rem; }
.post-back a{ color:var(--muted); text-decoration:none; }
.post-back a:hover{ color:var(--fg); }

/* --- 30-day monitor --- */
button,
input,
textarea{
  font:inherit;
}
button{
  border:1px solid #d8d8d8;
  background:#f7f7f5;
  color:var(--fg);
  padding:.35rem .65rem;
  cursor:pointer;
}
button:hover:not(:disabled){
  background:#efefec;
}
button:disabled{
  color:#b5b5b5;
  cursor:not-allowed;
}
input,
textarea{
  width:100%;
  border:1px solid #d8d8d8;
  background:#fff;
  color:var(--fg);
  padding:.45rem .55rem;
}
textarea{
  resize:vertical;
}
.challenge-panel{
  border-top:1px solid #e2e2e2;
  padding-top:1rem;
  margin-top:1.5rem;
}
.challenge-form,
.challenge-entry-form{
  display:grid;
  gap:.9rem;
}
.challenge-form label,
.challenge-entry-form label{
  display:grid;
  gap:.25rem;
  color:var(--muted);
  font-size:.85em;
}
.challenge-entry-form label.challenge-keep-media{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.challenge-form button,
.challenge-entry-form button{
  justify-self:start;
}
.challenge-message{
  margin-top:.75rem;
}
.challenge-topline,
.challenge-day-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.challenge-topline p,
.challenge-day-head p,
.challenge-day-head h2{
  margin:0;
}
.challenge-day-head h2{
  font-size:1rem;
  font-weight:600;
}
.challenge-meter{
  height:8px;
  background:#ededeb;
  margin:1rem 0 1.25rem;
}
.challenge-meter span{
  display:block;
  height:100%;
  width:0;
  background:var(--fg);
}
.challenge-days{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:4px;
  list-style:none;
  padding:0;
  margin:0 0 1.5rem;
}
.challenge-days button{
  width:100%;
  min-height:2rem;
  padding:.2rem 0;
}
.challenge-days button.here{
  background:var(--fg);
  border-color:var(--fg);
  color:#fff;
}
.challenge-pending{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.challenge-pending span{
  border:1px solid #e2e2e2;
  color:var(--muted);
  font-size:.75em;
  padding:.15rem .4rem;
}
.challenge-entries{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1.25rem;
}
.challenge-person{
  border:1px solid #e2e2e2;
  padding:1rem;
  min-width:0;
}
.challenge-person h3{
  border-bottom:1px solid #e2e2e2;
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 1rem;
  padding-bottom:.5rem;
}
.challenge-entry{
  border-top:1px solid #e2e2e2;
  padding-top:1rem;
  margin-top:1rem;
}
.challenge-entry:first-child{
  border-top:0;
  padding-top:0;
}
.challenge-entry-meta{
  color:var(--muted);
  font-size:.78em;
  margin-bottom:.45rem;
}
.challenge-media{
  margin:.75rem 0 0;
}
.challenge-media img,
.challenge-media video{
  max-width:100%;
  height:auto;
  display:block;
}
.challenge-media audio{
  width:100%;
}
.challenge-entry-actions{
  margin-top:.75rem;
}
.challenge-edit-form{
  margin-top:1rem;
}
.challenge-edit-buttons{
  display:flex;
  gap:.5rem;
}
.challenge-checkbox{
  width:auto;
  margin-right:.35rem;
}

@media (max-width:520px){
  .challenge-days{
    grid-template-columns:repeat(6,1fr);
  }
  .challenge-topline,
  .challenge-day-head{
    align-items:flex-start;
    flex-direction:column;
    gap:.45rem;
  }
  .challenge-entries{
    grid-template-columns:1fr;
  }
}
