.writing-wrap { padding-top: 22px; padding-bottom: 52px; }
.reading-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,24%); gap: 16px; align-items: start; }
.reading-layout aside { position: sticky; top: 24px; }
.article, .intro, .post-card, .progress-box { background: #1c1c1f; border-radius: 28px; }
.article-head>a, .article-links a, .intro small { color: #ff956b; }
.header nav [aria-current="page"] { color: #ff956b; }
.archive { min-width: 0; }.intro,.article { padding: clamp(24px,4vw,55px); }.intro { margin-bottom: 16px; }.intro p,.author { color: #c4c4cb; }
h1,h2,strong { line-height: 1.12; } h1 { font-size: clamp(38px,4.6vw,65px); letter-spacing: -.055em; margin: 14px 0; text-wrap: balance; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.post-card { display: block; overflow: hidden; text-decoration: none; }.post-card:hover { background: #303034; }.post-card img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }.post-card div { padding: 20px; }.post-card strong { display: block; font-size: 22px; margin-top: 10px; letter-spacing: -.025em; }
small,.meta { font-size: 13px; font-weight: bold; color: #cccbd1; }.meta { margin-top: 36px; }
.article { min-width: 0; }.article-head { border-bottom: 1px solid #404047; margin-bottom: 28px; padding-bottom: 14px; }
.prose { font: 19px/1.75 Georgia,serif; color: #e4e4e8; overflow-wrap: anywhere; }.prose h2 { font: bold 28px/1.2 Arial,sans-serif; margin: 32px 0 12px; }
.prose img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 12px; margin: auto; }
figure { margin: 28px 0; } figcaption { font: 14px/1.55 Arial,sans-serif; margin: 8px 0; color: #cfced4; }.prose a { text-decoration: underline; text-underline-offset: 3px; color: #ffae90; } blockquote { margin: 16px 0; padding-left: 16px; border-left: 3px solid #ff956b; }
.progress-box { padding: 22px; }.progress-box b { display: block; font-size: 40px; }progress { width: 100%; height: 7px; accent-color: #ff956b; } aside h2 { font-size: 20px; } .article-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #404047; padding-top: 24px; }

@media(max-width:1000px) {
  .reading-layout { display: block; }
  .reading-layout aside { position: static; margin-top: 16px; }
  aside .post-card { max-width: 350px; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .writing-wrap { padding-top: 10px; }
}
@media(max-width:650px) {
  .cards { grid-template-columns: 1fr; }
  .article,.intro { padding: 22px; }
  .progress-box { display: none; }
  .prose { font-size: 18px; }
}

/* Theme: Graphite Signal. */
.article, .intro, .post-card, .progress-box { background: #151515; box-shadow: inset 0 0 0 1px #262626; }
.post-card:hover { background: #1c1c1c; }
.article-head > a, .article-links a, .intro small, .header nav [aria-current="page"] { color: #ff4d00; }
.intro p, .author, small, .meta { color: #c7c7c7; }
.article-head, .article-links { border-color: #2a2a2a; }
.prose a { color: #ff6a26; }
blockquote { border-left-color: #ff4d00; }
progress { accent-color: #ff4d00; }