/* Writing — builds on theme.css (section, headings, links). Everything snaps to the 8px unit;
   the pixel is 4px, matching the theme's border and shadow. */

/* Bitmap type for short strings only. Yellow clears 4.5:1 on --bg and on --surface. */
#writing .writing-label {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  color: #FFCD75;
  margin: 0 0 16px;
}

#writing .writing-title {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 40px;
  margin: 0 0 16px;
}

#writing .writing-intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 32px;
}

#writing .writing-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 16px;
}
#writing .writing-list li { max-width: none; }

/* Each row is one link: a panel with the theme's 4px border and hard shadow. */
#writing .writing-post {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 48px;
  padding: 16px;
  background: #333C57;
  border: 4px solid #F4F4F4;
  color: #F4F4F4;
  text-decoration: none;
  box-shadow: 4px 4px 0 #29366F;
}

#writing .writing-num {
  flex: none;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 24px;
  background: #FFCD75;
  color: #1A1C2C;
}

/* Post titles run long, so they are sans, never bitmap. */
#writing .writing-name {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Press into the shadow: one pixel down and right, stepped by the theme's transition. */
#writing .writing-post:hover,
#writing .writing-post:active { transform: translate(4px, 4px); }
#writing .writing-post:hover .writing-name { text-decoration: underline; text-underline-offset: 4px; }
#writing .writing-post:focus-visible { outline: 4px solid #FFCD75; outline-offset: 4px; }

/* The date sits at the row's right edge; it drops under the title when the row is narrow. */
#writing .writing-post { flex-wrap: wrap; }
#writing .writing-name { flex: 1 1 240px; }
#writing .writing-date { font-family: var(--font-mono); font-size: 14px; line-height: 24px; color: #FFCD75; }

@media (max-width: 720px) {
  #writing .writing-post { gap: 8px; padding: 8px; }
}