/* A quiet, warm palette for the personal page. */
.misc-page {
  --accent: #b64a32;
  --nav-bg: rgba(250, 247, 240, .94);
  --text-primary: #302e29;
  --text-secondary: #656057;
  --bg-primary: #faf7f0;
  background: #faf7f0;
  background-image: radial-gradient(#bbb29b40 .7px, transparent .7px);
  background-size: 18px 18px;
}
.misc-page .misc-main { max-width: 1080px; margin: auto; padding: 116px 36px 52px; }
.misc-page .misc-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.misc-page h1 { font-size: 3rem; font-weight: 700; letter-spacing: -.05em; line-height: 1.1; }
.misc-page .misc-intro p { margin-top: 10px; color: var(--text-secondary); font-size: .95rem; }
.misc-page .misc-jumps { display: flex; flex-wrap: wrap; gap: 10px; }
.misc-page .misc-jumps a { padding: 9px 16px; border: 1px solid #d7cdbb; border-radius: 5px; background: #fffdf8; font-size: .85rem; }
.misc-page .misc-jumps a:hover { border-color: var(--accent); color: var(--accent); }
.misc-page .misc-section { margin-top: 36px; scroll-margin-top: 90px; }
.misc-page h2 { font-size: 1.35rem; font-weight: 650; margin-bottom: 18px; letter-spacing: -.025em; }
.misc-page .photo-gallery { display: grid; grid-template-columns: 16fr 16fr 9fr; align-items: start; gap: 12px; }
.misc-page .photo-gallery a { display: block; min-width: 0; border-radius: 4px; overflow: hidden; }
.misc-page .photo-gallery img { display: block; width: 100%; height: auto; }
.misc-page .misc-notes { columns: 2; column-gap: 22px; }
.misc-page .misc-essay { margin: 0 0 22px; font-size: .9rem; line-height: 1.6; }
.misc-page .misc-essay a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.misc-page .misc-essay span { display: block; color: var(--text-secondary); font-size: .8rem; margin-top: 3px; }
.misc-page .scrap-note { display: inline-block; width: 100%; margin: 0 0 22px; padding: 24px; break-inside: avoid; background: #fffdf6; border: 1px solid #ded7c7; border-radius: 3px 3px 12px 3px; box-shadow: 3px 4px 0 #78694f0b; }
.misc-page .scrap-note:nth-child(3n+1) { background: #f9f0d4; }
.misc-page .scrap-note:nth-child(3n+2) { background: #edf0e7; }
.misc-page .scrap-note time { display: block; margin-bottom: 10px; font: .7rem var(--font-mono); color: #756957; }
.misc-page .scrap-note h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin-bottom: 12px; }
.misc-page .scrap-content { font-size: .9rem; line-height: 1.75; color: #555047; overflow-wrap: anywhere; }
.misc-page .scrap-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.misc-page :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.misc-page footer { padding: 24px; background: transparent; font-size: .75rem; color: #756957; }
.misc-page footer a { display: inline-block; margin-top: 8px; color: var(--accent); }
@media (max-width: 680px) {
  .misc-page .misc-main { padding: 110px 22px 36px; }
  .misc-page .misc-intro { align-items: flex-start; flex-direction: column; gap: 20px; }
  .misc-page h1 { font-size: 2.5rem; }
  .misc-page .misc-notes { columns: 1; }
  .misc-page .photo-gallery { grid-template-columns: 1fr; gap: 16px; }
  .misc-page .photo-gallery a:last-child { width: 75%; justify-self: center; }
}