@layer reset, base, layout, components, prose;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, blockquote { margin: 0; }
  img { max-width: 100%; height: auto; }
}

@layer base {
  :root {
    color-scheme: light;
    --paper: #f8f7f3;
    --ink: #282d28;
    --muted: #646a61;
    --line: #dcded4;
    --accent: #476548;
    --wash: #e9ede3;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    --font-heading: Georgia, "Noto Serif TC", "Times New Roman", serif;
  }
  html { font-size: 18px; scroll-padding-top: 2rem; }
  body { background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
  a:hover { color: var(--accent); }
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.2; }
  h1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(2.35rem, 6.75vw, 4.5rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
  ::selection { background: #dae4ce; }
}

@layer layout {
  .site-shell { max-width: 1060px; padding: 0 44px; margin: 0 auto; }
  .site-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
  .site-header nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: .85rem; }
  .site-header nav a { text-decoration: none; color: var(--muted); }
  .site-header nav a[aria-current] { color: var(--ink); text-decoration: underline; }
  main { min-height: 60vh; }
  .site-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 96px; padding: 25px 0 35px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
  .site-footer a { text-decoration: none; }
  .intro { padding: 88px 0 78px; max-width: 800px; }
  .intro h1 { margin: 20px 0; }
  .intro-description { max-width: 580px; font-size: 1.12rem; color: var(--muted); line-height: 1.85; }
  .page-header { padding: 65px 0 42px; }
  .page-header h1 { margin: 15px 0 20px; }
  .page-header p:not(.eyebrow) { color: var(--muted); }
  .article { max-width: 720px; margin: 0 auto; }
  .article-header { padding: 54px 0 38px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
  .article-header h1 { font-size: clamp(1.8rem, 4.5vw, 2rem); margin: 20px 0 24px; }
  .article-header--untitled { padding-bottom: 18px; margin-bottom: 0; border-bottom: 0; }
  .article-header--untitled .article-meta { margin-top: 26px; }
  .article-header--untitled .tags { margin-top: 12px; }
  .article-meta { display: flex; gap: 18px; align-items: center; margin-top: 40px; font-size: .8rem; color: var(--muted); }
  @media (max-width: 640px) {
    .site-shell { padding: 0 22px; }
    .site-header { align-items: flex-start; flex-direction: column; gap: 16px; padding: 23px 0; }
    .intro { padding: 54px 0; }
    .page-header { padding: 42px 0 30px; }
    .site-footer { margin-top: 60px; }
  }
}

@layer components {
  .skip-link { position: absolute; top: -100px; left: 16px; background: var(--ink); color: white; padding: 8px 16px; z-index: 1; }
  .skip-link:focus { top: 12px; }
  .site-name { font-size: calc(1rem + 2px); display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 600; letter-spacing: -.02em; }
  .site-mark { width: 12px; height: 16px; border-radius: 1px 7px 1px 7px; background: var(--accent); }
  .eyebrow { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; color: var(--accent); }
  .section-heading { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
  .section-heading h2 { font-size: .8rem; font-weight: 500; }
  .section-heading span { color: var(--muted); font-size: .75rem; }
  .entry-list { list-style: none; padding: 0; }
  .entry { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: 25px; padding: 29px 0; border-bottom: 1px solid var(--line); }
  .entry-date { color: var(--muted); font-size: .78rem; padding-top: 4px; font-variant-numeric: tabular-nums; }
  .entry h2 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 400; margin: 5px 0 12px; overflow-wrap: anywhere; }
  .entry h2 a { text-decoration: none; }
  .entry-excerpt { margin: 8px 0 12px; font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
  .entry-excerpt a { text-decoration: none; }
  .entry-arrow { color: var(--muted); padding-top: 21px; font-size: 1.2rem; }
  .tags { display: flex; gap: 8px 14px; flex-wrap: wrap; list-style: none; padding: 0; color: var(--muted); font-size: .72rem; }
  .tags a { text-decoration: none; }
  .tags a::before { content: "#"; margin-right: 2px; opacity: .6; }
  .tag-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
  .tag-navigation a { background: var(--wash); padding: 5px 12px; border-radius: 3px; text-decoration: none; font-size: .78rem; }
  .tag-navigation span { margin-left: 8px; color: var(--muted); }
  .back-link { font-size: .78rem; color: var(--muted); text-decoration: none; }
  .empty-state { padding: 45px 0; color: var(--muted); }
  .related { border-top: 1px solid var(--line); padding-top: 25px; margin-top: 45px; }
  .related h2 { font-size: .85rem; margin-bottom: 16px; }
  .related ul { padding-left: 20px; font-size: .95rem; }
  .references { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
  .references-heading { margin-bottom: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
  .reference-list { list-style: none; padding: 0; display: grid; gap: 12px; }
  .reference-card { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #f1f2eb; text-decoration: none; }
  .reference-card:hover { border-color: var(--accent); color: var(--ink); }
  .reference-card--text-only { grid-template-columns: minmax(0, 1fr); }
  .reference-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
  .reference-details { min-width: 0; }
  .reference-source { display: block; color: var(--muted); font-size: .7rem; letter-spacing: .04em; overflow-wrap: anywhere; }
  .reference-title { margin: 6px 0 12px; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
  .reference-action { color: var(--accent); font-size: .75rem; }
  @media (max-width: 520px) {
    .reference-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
    .reference-image { aspect-ratio: 16 / 9; max-height: 180px; }
    .reference-title { font-size: 1.1rem; }
  }
  @media (max-width: 640px) {
    .entry { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px; padding: 24px 0; }
    .entry-date { grid-column: 1 / -1; font-size: .72rem; }
    .entry h2 { font-size: 1.45rem; }
  }
}

@layer prose {
  .prose { font-size: 1.05rem; line-height: 1.9; overflow-wrap: anywhere; }
  .prose > * + * { margin-top: 1.3em; }
  .prose h2 { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 400; margin-top: 1.8em; }
  .prose h3 { font-size: 1.2rem; margin-top: 1.8em; }
  .prose ul, .prose ol { padding-left: 1.5em; }
  .prose li + li { margin-top: .4em; }
  .prose blockquote { padding: 8px 0 8px 24px; border-left: 3px solid var(--accent); color: var(--muted); }
  .prose blockquote > * + * { margin-top: 1em; }
  .prose pre { padding: 20px 24px; background: #eeeee8; border: 1px solid var(--line); overflow: auto; font-size: .85rem; line-height: 1.7; }
  .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
  .prose :not(pre) > code { background: #eaece3; border-radius: 3px; padding: .15em .3em; }
  .prose img { display: block; margin: 2em auto; border-radius: 4px; }
  .prose table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: .9rem; }
  .prose th, .prose td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 16px 10px 0; }
  .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
}

@layer layout {
  .home-feed { padding-top: 52px; }
  .feed-entry + .feed-entry { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
  .feed-entry .article-header { padding: 0 0 24px; margin-bottom: 0; border-bottom: 0; }
  .feed-entry .article-meta { margin-top: 0; }
  .feed-entry .tags { margin-top: 12px; }
  .article-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4.5vw, 2rem); font-weight: 400; margin: 20px 0; overflow-wrap: anywhere; }
  .article-title a, .permalink { text-decoration: none; }
  .permalink:hover { text-decoration: underline; }
  .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: 720px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: .85rem; }
  .pagination a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
  .pagination-newer { grid-column: 1; grid-row: 1; justify-self: start; }
  .pagination-position { grid-column: 2; grid-row: 1; color: var(--muted); font-size: .75rem; }
  .pagination-older { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
  main > .tag-navigation { margin-top: 42px; }
  @media (max-width: 640px) {
    .home-feed { padding-top: 34px; }
    .feed-entry + .feed-entry { margin-top: 40px; padding-top: 36px; }
    .pagination { gap: 10px; font-size: .78rem; }
  }
}

@layer components {
  .article-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
  .article-permalink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: .85rem; }
}

@layer components {
  .search-page { max-width: 720px; margin: 0 auto; }
  .search-page .page-header { padding-bottom: 24px; }
  .search-page label { display: block; margin-bottom: 10px; }
  .search-controls { display: flex; gap: 12px; }
  .search-controls input { min-width: 0; width: 100%; flex: 1; }
  .search-controls input, .search-controls button { font: inherit; border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; min-height: 44px; }
  .search-controls input { background: white; color: var(--ink); }
  .search-controls button { background: var(--accent); color: white; cursor: pointer; }
  .search-controls :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  #search-help, .search-status { color: var(--muted); font-size: .85rem; margin-top: 14px; }
  .search-status { margin-top: 30px; min-height: 1.7em; }
  .search-results { list-style: none; padding: 0; }
  .search-result { padding: 28px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .search-date { font-size: .8rem; color: var(--muted); }
  .search-result h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.4rem; line-height: 1.5; margin: 8px 0 12px; }
  .search-result h2 a { text-decoration: none; }
  .search-snippet { line-height: 1.85; }
}