:root{
  --bg:#000000;
  --fg:#ffffff;
  --fg-dim: rgba(255,255,255,.58);
  --fg-faint: rgba(255,255,255,.34);
  --line: rgba(255,255,255,.18);
  --line-strong: rgba(255,255,255,.42);
}

*{ box-sizing:border-box; }

html,body{
  background:var(--bg);
  color:var(--fg);
  margin:0;
}

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  padding: 72px 24px 140px;
}

.page{ max-width:640px; margin:0 auto; }

.masthead{
  text-align:center;
  margin-bottom:30px;
}

.logo{
  display:block;
  max-height:72px;
  width:auto;
  margin:0 auto 22px;
}

.title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:560;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0;
}

.rule{ height:1px; background:var(--line); margin:0 0 28px; }

.intro{
  font-size:1.06rem;
  line-height:1.65;
  color:var(--fg-dim);
  margin:0 0 60px;
  max-width:58ch;
}


.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-bottom:30px;
}

.entries{ display:flex; flex-direction:column; gap:38px; margin-bottom:56px; }

.entry{ border-left:1px solid var(--line); padding-left:20px; }

.entry-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:10px;
}
.entry-tag{ color:var(--fg-dim); }

.entry-body p{
  white-space:pre-wrap;
  line-height:1.7;
  margin:0;
  font-size:1rem;
}

.entry-body img{
  max-width:100%;
  display:block;
  filter:grayscale(1) contrast(1.05); 
  border:1px solid var(--line);
}

.file-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  padding:14px 16px;
  text-decoration:none;
  color:var(--fg);
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  transition:background .15s, color .15s;
}
.file-link:hover, .file-link:focus-visible{ background:var(--fg); color:var(--bg); }
.file-link .file-name{ overflow-wrap:anywhere; }
.file-link .file-meta{ white-space:nowrap; opacity:.7; }


*:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}


@media (max-width:480px){
  body{ padding:48px 18px 110px; }
  .file-link{ flex-direction:column; align-items:flex-start; gap:6px; }
}