/* ============================================================
   notes.css — /notes/ index page styles
============================================================ */
.nt-main { max-width: var(--measure); width: 100%; margin: 0 auto; padding: clamp(48px, 8vh, 88px) 8px 24px; }
.nt-hero { padding-bottom: var(--sp-7); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-7); }
.nt-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: var(--sp-3); }
.nt-hero p { font-size: 16px; color: var(--fg-soft); max-width: 58ch; margin: 0; line-height: 1.55; }

.nt-list { display: flex; flex-direction: column; }
.nt-post { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 30px 0; border-top: 1px solid var(--rule); text-decoration: none; transition: opacity var(--dur-fast) ease; }
.nt-list a.nt-post:last-child { border-bottom: 1px solid var(--rule); }
.nt-post:hover { opacity: 0.75; }
.nt-post .date { font-size: 13px; color: var(--fg-mute); padding-top: 6px; }
.nt-post .date small { display: block; margin-top: 6px; text-transform: none; letter-spacing: 0; font-size: 10.5px; }
.nt-post h2 { font-size: 30px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.005em; color: var(--fg); }
.nt-post p { margin: 0 0 12px; color: var(--fg-soft); font-size: 15px; line-height: 1.6; }

@media (max-width: 640px) {
  .nt-main { padding: 32px 4px 16px; }
  .nt-hero h1 { font-size: 38px; }
  .nt-post { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .nt-post .date { padding-top: 0; }
  .nt-post h2 { font-size: 24px; }
}