@layer reset, layout, components, motion;

@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; background: #000; -webkit-text-size-adjust: 100%; }
  body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: #eeeeec; font-family: "IBM Plex Mono", monospace; -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button, a { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 2px solid #f51b27; outline-offset: 7px; border-radius: 2px; }
  ::selection { color: #fff; background: #8f111a; }
}

@layer layout {
  .site { width: min(100% - 48px, 480px); margin-inline: auto; padding-top: clamp(48px, 10svh, 112px); padding-bottom: 64px; flex: 1; }
  .brand { margin-bottom: clamp(48px, 7vw, 68px); }
  .brand a { display: flex; flex-direction: column; align-items: center; width: fit-content; margin-inline: auto; gap: 24px; }
  .emblem { width: 126px; }
  .wordmark { width: 260px; }
  #view { min-width: 0; outline: none; }
  @media (max-width: 480px) {
    .site { width: calc(100% - 48px); padding-top: 52px; }
    .emblem { width: 106px; }
    .wordmark { width: 234px; }
    .brand a { gap: 21px; }
    .brand { margin-bottom: 48px; }
  }
}

@layer components {
  .post-list { list-style: none; padding: 0; margin: 0; }
  .post-list li { border-top: 1px solid #222; }
  .post-list li:last-child { border-bottom: 1px solid #222; }
  .post-link { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-block: 21px; min-height: 64px; }
  .post-title { font-family: "Chakra Petch", sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.5; overflow-wrap: anywhere; }
  .post-link time { font-family: "IBM Plex Mono", monospace; flex-shrink: 0; font-size: 11px; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #888; }
  .post-link:hover .post-title { color: #ff424d; }
  .post-link:hover time { color: #b5b5b0; }
  .article-layout { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-content: start; }
  .article-layout > .back, .article-layout > h1, .article-layout > .publish-date, .article-layout > .metadata, .article-layout > .prose { grid-column: 2; }
  .back { display: inline-flex; align-items: center; justify-content: flex-start; width: 44px; height: 44px; color: #999; margin-top: -10px; margin-bottom: 22px; }
  .back:hover { color: #f51b27; }
  .back svg { width: 20px; height: 20px; }
  article h1 { font-family: "Chakra Petch", sans-serif; margin: 0; font-size: clamp(28px, 6vw, 36px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
  .publish-date { display: block; margin-top: 12px; color: #969692; font: 11px/1.6 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
  .metadata { margin-top: 8px; color: #858580; font: 11px/1.6 "IBM Plex Mono", monospace; }
  .tags { grid-column: 1; grid-row: 2 / span 4; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; margin: 5px 0 0; list-style: none; }
  .tags li { max-width: 100%; padding: 5px 7px; border: 1px solid #292929; border-radius: 3px; background: #0c0c0c; color: #b7b7b1; font: 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: 0; overflow-wrap: anywhere; }
  .site-footer { flex-shrink: 0; padding: 22px 24px max(26px, env(safe-area-inset-bottom)); text-align: center; color: #74746e; font: 10px/1.5 "IBM Plex Mono", monospace; letter-spacing: .035em; }
  .site-footer a:hover { color: #b7b7b0; }
  @media (max-width: 600px) {
    .article-layout { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  }
  .prose { font-size: 14px; line-height: 1.8; color: #c7c7c2; overflow-wrap: anywhere; }
  .prose:not(:empty) { border-top: 1px solid #222; margin-top: 26px; padding-top: 26px; }
  .prose > :first-child { margin-top: 0; }
  .prose > :last-child { margin-bottom: 0; }
  .prose h2, .prose h3 { font-family: "Chakra Petch", sans-serif; font-weight: 600; color: #eee; line-height: 1.3; letter-spacing: -.025em; margin-top: 1.8em; }
  .prose h2 { font-size: 24px; }
  .prose h3 { font-size: 20px; }
  .prose a { color: #eee; text-decoration: underline; text-decoration-color: #6b6b66; text-underline-offset: 4px; }
  .prose a:hover { text-decoration-color: #f51b27; }
  .prose blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid #f51b27; color: #a4a49c; }
  .prose pre { padding: 18px; background: #101010; overflow: auto; font-size: 13px; border: 1px solid #222; border-radius: 4px; }
  .prose code { font-size: .85em; }
  .prose table { display: block; overflow: auto; border-collapse: collapse; }
  .prose th, .prose td { border: 1px solid #333; padding: 8px 12px; }
  .prose hr { border: 0; border-top: 1px solid #222; margin: 30px 0; }
  .empty { font-size: 14px; color: #888; text-align: center; }
}

@layer motion {
  a, .post-title, .post-link time { transition: color 150ms ease; }
  #view { transition: opacity 120ms ease; }
  #view[aria-busy="true"] { opacity: .55; }
  .view-enter { animation: appear 180ms ease-out; }
  @keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
}