/* Blog styles — same palette and type as the ring page. */
:root {
  --bg: #0b0a09;
  --ink: #ebe4d6;
  --soft: #cfc6b5;
  --muted: #8c7f6a;
  --bronze: #5f513a;
  --line: rgba(201, 168, 118, .22);
  --fire: #ff9a3c;
  --hot: #ffd98a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px;
  overflow-x: hidden;
}
body::before {   /* faint ember glow behind the header ring */
  content: ""; position: absolute; left: 50%; top: 0; width: 700px; height: 520px;
  transform: translate(-50%, -45%); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 120, 30, .08), transparent 62%);
}
body::after {    /* film grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
  opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
::selection { background: rgba(255, 154, 60, .3); }

/* ---------- chrome ---------- */
.home, .foot {
  font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.home { position: absolute; top: 18px; left: 16px; text-decoration: none; padding: 6px 0; transition: color .3s, text-shadow .3s; }
.home:hover, .home:focus-visible { color: var(--hot); text-shadow: 0 0 12px rgba(255, 140, 40, .55); outline: none; }

.sigil { display: block; position: relative; width: 132px; margin: 56px auto 8px; text-decoration: none; }
.sigil svg { display: block; width: 100%; height: auto; overflow: visible; }
.sigil svg.spin { position: absolute; inset: 0; transform-origin: 50% 50%; animation: spin 90s linear infinite; }
.sigil .hl { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sigil text { font: italic 500 9.2px var(--serif); fill: #a6875a; transition: fill .4s; }
.sigil .core { font: italic 300 22px var(--serif); fill: var(--ink); }
.sigil:hover text:not(.core) { fill: var(--fire); filter: drop-shadow(0 0 3px rgba(255, 130, 40, .8)); }
@keyframes spin { to { transform: rotate(360deg); } }

main { width: 100%; max-width: 40rem; flex: 1; position: relative; z-index: 1; }

.foot {
  width: 100%; max-width: 40rem; display: flex; justify-content: space-between;
  padding: 64px 0 22px;
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--hot); }

/* ---------- index ---------- */
.page-title {
  margin: 8px 0 44px; text-align: center;
  font: italic 300 clamp(44px, 9vw, 64px)/1 var(--serif); letter-spacing: -.01em;
}
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posts li { border-bottom: 1px solid var(--line); }
.posts a { display: grid; gap: 6px; padding: 22px 0; text-decoration: none; }
.posts time { font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.posts .t { font: italic 400 clamp(25px, 5vw, 31px)/1.15 var(--serif); transition: color .3s, text-shadow .3s; }
.posts .d { font-size: 18px; line-height: 1.45; color: var(--soft); }
.posts a:hover .t, .posts a:focus-visible .t { color: var(--hot); text-shadow: 0 0 16px rgba(255, 140, 40, .45); }
.posts a:focus-visible { outline: none; }
.empty { text-align: center; font: italic 400 22px var(--serif); color: var(--muted); }

/* ---------- post ---------- */
.post-head { text-align: center; margin: 8px 0 44px; }
.kicker { font: 400 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--fire); }
.post-head h1 { margin: 18px 0 0; font: italic 300 clamp(38px, 8vw, 58px)/1.05 var(--serif); letter-spacing: -.01em; }
.dek { margin: 18px auto 0; max-width: 30em; font-size: 21px; line-height: 1.4; color: var(--soft); }

.prose { font-size: 21px; line-height: 1.6; color: var(--ink); }
.prose > * { margin: 0 0 1.05em; }
.prose h2, .prose h3 { font-weight: 500; line-height: 1.2; margin: 1.8em 0 .6em; }
.prose h2 { font-size: 1.45em; }
.prose h3 { font-size: 1.2em; font-style: italic; }
.prose a { color: var(--hot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255, 154, 60, .5); }
.prose a:hover { text-decoration-color: var(--hot); }
.prose blockquote { margin-left: 0; padding-left: 1.1em; border-left: 1px solid var(--fire); color: var(--soft); font-style: italic; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.6em auto; }
.prose figcaption { font: 400 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--muted); text-align: center; }
.prose hr { border: 0; height: 22px; margin: 2em 0; background:
  radial-gradient(circle, transparent 5px, var(--bronze) 5.5px, var(--bronze) 6.5px, transparent 7px) center / 22px 22px no-repeat; }
.prose code { font: 400 .78em var(--mono); background: rgba(201, 168, 118, .08); padding: .1em .35em; }
.prose pre { overflow-x: auto; padding: 1em; background: rgba(201, 168, 118, .06); border: 1px solid var(--line); }
.prose pre code { background: none; padding: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }

.post-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.post-foot a { font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.post-foot a:hover { color: var(--hot); }

@media (max-width: 640px) {
  /* phones: a touch brighter, since they're often read in daylight */
  :root {
    --bg: #13110e;
    --ink: #f3ede2;
    --soft: #ddd5c6;
    --muted: #ab9d85;
    --bronze: #85714f;
    --line: rgba(214, 182, 132, .34);
  }
  .sigil text { fill: #bf9f6c; }
  .sigil { width: 112px; margin-top: 60px; }
  .prose { font-size: 19.5px; }
}
@media (prefers-reduced-motion: reduce) { .sigil .spin { animation: none; } }