[hidden] { display: none !important; }
.load-message { color: var(--muted); font-size: 16px; }
.writing { border-bottom: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 28px; gap: 20px; align-items: start; padding: 31px 0; border-top: 1px solid var(--line); }
.post-row:last-child { border-bottom: 1px solid var(--line); }
.post-row:hover .post-row-title { color: var(--orange); }
.post-row-date { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; padding-top: 7px; }
.post-row-main { display: grid; gap: 9px; }
.post-row-title { font: 800 clamp(22px, 2.5vw, 32px)/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.post-row-excerpt { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 620px; text-align: justify; hyphens: auto; }
.post-row-arrow { font-size: 27px; }
.radar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.radar-card { min-width: 0; background: #fffefa; border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.radar-card h3 { font: 800 21px/1.25 Manrope, sans-serif; letter-spacing: -.035em; margin: 0 0 15px; }
.radar-list { display: grid; }
.radar-item { display: block; border-top: 1px solid var(--line); padding: 14px 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.radar-item:hover { color: var(--orange); }
.radar-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.reader-view { min-height: calc(100vh - 160px); padding: 72px 24px 110px; }
.reader-shell { max-width: 780px; margin: auto; }
.back-link { display: inline-flex; margin-bottom: 54px; font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 6px; }
.back-link:hover { color: var(--orange); }
.reader-header { border-bottom: 1px solid var(--line); padding-bottom: 35px; margin-bottom: 45px; }
.reader-date { display: block; color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .14em; margin-bottom: 20px; }
.reader-title { font: 800 clamp(43px, 5vw, 70px)/1.08 Manrope, sans-serif; letter-spacing: -.06em; margin: 0 0 24px; }
.reader-excerpt { font-size: 21px; line-height: 1.5; color: var(--muted); margin: 0; text-align: justify; hyphens: auto; }
.reader-body { font: 400 19px/1.8 'DM Sans', sans-serif; color: var(--ink); overflow-wrap: break-word; }
.reader-body p { margin: 0 0 1.4em; text-align: justify !important; hyphens: auto; }
.reader-body p:has(> br:only-child) { margin: 0; line-height: .7; }
.reader-body h1, .reader-body h2, .reader-body h3 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; margin: 1.8em 0 .6em; }
.reader-body h1 { font-size: 34px; } .reader-body h2 { font-size: 28px; } .reader-body h3 { font-size: 23px; }
.reader-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 30px auto; }
.reader-body a { color: #b94627; text-decoration: underline; text-underline-offset: 3px; }
.reader-body ul, .reader-body ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.reader-body li { padding-left: .2em; margin-bottom: .4em; }
.reader-body blockquote { border-left: 4px solid var(--orange); background: #eceee9; padding: 20px 24px; margin: 32px 0; border-radius: 0 6px 6px 0; }
.reader-body pre { overflow-x: auto; padding: 20px; background: var(--ink); color: white; border-radius: 8px; font-size: 15px; }
.reader-end { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 35px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reader-end > span { color: var(--orange); font-size: 32px; } .reader-end p { flex: 1; font-weight: 700; }
@media (max-width: 850px) { .radar-grid { grid-template-columns: 1fr; } .post-row { grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; } .post-row-date { grid-column: 1 / -1; } .post-row-main { grid-column: 1; } .post-row-arrow { grid-column: 2; grid-row: 2; } .reader-view { padding-top: 50px; } .reader-body { font-size: 18px; } }
@media (max-width: 500px) { .reader-excerpt { font-size: 18px; } .reader-title { font-size: 42px; } .reader-end { align-items: start; } .reader-end p { flex-basis: calc(100% - 60px); } }