:root {
  --ink: #0f1b24; --sea: #0a6e82; --sea-deep: #063a45; --sand: #f4f1ea;
  --line: #d9e0e3; --muted: #5b6b72; --bg: #ffffff;
  --max: 1100px; --radius: 12px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.55; }
img { max-width: 100%; height: auto; }
a { color: var(--sea); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); max-width: var(--max); margin: 0 auto;
}
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; }
.site-header .signin { margin-left: auto; font-weight: 600; }
.brand img { display: block; }

main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem; }

.hero { padding: 2.5rem 0 1rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .25rem; color: var(--sea-deep); }
.hero p { color: var(--muted); font-size: 1.15rem; margin: 0; }

.feed .notice { color: var(--muted); font-size: .9rem; }
.catch-grid, .journal-grid { list-style: none; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.catch-card, .journal-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--sand); }
.journal-card a { color: inherit; }
.journal-card .cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sea); }
.journal-card h3 { margin: .35rem 0; font-size: 1.05rem; }
.journal-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.badge { display: inline-block; background: #ffe9b3; color: #6b5300; font-size: .7rem; padding: .1rem .4rem; border-radius: 6px; }
.handle { font-weight: 600; margin: .35rem 0 .1rem; }
.empty { color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem 1rem; max-width: var(--max);
  margin-inline: auto; color: var(--muted); font-size: .9rem; }
.site-footer .langs { display: flex; gap: .75rem; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
  :root { --ink: #e7edf0; --bg: #0c1418; --sand: #121e24; --line: #22333b; --muted: #9fb0b7; --sea: #38b6cf; --sea-deep: #8fd6e4; }
}