/* Writing — post + index typography. Inherits tokens from /styles.css. */

/* ---------- index ---------- */

.writing-shell {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

.writing-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 1.5rem;
}

.writing-lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 50ch;
  line-height: 1.55;
  margin: 0 0 4rem;
}

/* ---------- tag filter ---------- */

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2.5rem;
}

.tag-chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.95rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.tag-chip:hover {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
}
.tag-chip.active {
  color: var(--bg);
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
.tag-chip .count {
  font-size: 0.78em;
  opacity: 0.75;
  font-feature-settings: "tnum" 1;
}
.tag-chip:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.writing-lede .feed-link {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--accent-warm);
  text-decoration: none;
  transition: color 0.2s;
}
.writing-lede .feed-link:hover {
  color: var(--accent-warm);
}

/* post tag chip on the post page meta */
.post-meta .post-tag {
  color: var(--accent-warm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  text-transform: lowercase;
  transition: border-color 0.2s;
}
.post-meta .post-tag:hover {
  border-bottom-color: var(--accent-warm);
}

.writing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.writing-list li {
  border-top: 1px solid var(--rule);
}
.writing-list li:last-child {
  border-bottom: 1px solid var(--rule);
}

.writing-card {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  padding: 1.75rem 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s ease;
  position: relative;
}
.writing-card::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent-warm);
  transition: width 0.3s ease;
}
.writing-card:hover {
  padding-left: 1rem;
}
.writing-card:hover::before {
  width: 1rem;
}

.writing-card .post-year {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-warm);
  letter-spacing: 0.04em;
}
.writing-card .post-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.writing-card .post-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.writing-card .post-excerpt {
  grid-column: 2 / -1;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.1rem;
}

@media (max-width: 540px) {
  .writing-card {
    grid-template-columns: 3rem 1fr;
  }
  .writing-card .post-meta {
    grid-column: 2;
    margin-top: 0.1rem;
  }
  .writing-card .post-excerpt {
    grid-column: 1 / -1;
  }
}

/* ---------- post ---------- */

.post {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

.post-header {
  margin: 1.5rem 0 3rem;
}

.post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

.post-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin: 0 0 1.75rem;
}
.post-meta time {
  color: var(--ink-soft);
}
.post-meta span[aria-hidden] {
  margin: 0 0.6rem;
  color: var(--rule);
}

.post-subtitle {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* ---------- post body ---------- */

.post-body {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--ink);
}

.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote,
.post-body figure,
.post-body pre {
  margin: 0 0 1.4rem;
}

/* Paragraphs do a left → right step on every other one. Other block
   children (figures, blockquotes, headings, lists) keep their normal
   left edge so they act as anchors in the rhythm. */
.post-body p {
  text-wrap: pretty;
  max-width: 72ch;
  transition: none;
}
.post-body > p:nth-of-type(even) {
  margin-left: 16ch;
}

@media (max-width: 920px) {
  .post-body p {
    max-width: 100%;
  }
  .post-body > p:nth-of-type(even) {
    margin-left: 0;
  }
}

.post-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 3rem 0 1rem;
}
.post-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: -0.005em;
  margin: 2.25rem 0 0.8rem;
  color: var(--ink-soft);
}

.post-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--accent-warm);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.post-body a:hover {
  color: var(--accent-warm);
}

.post-body em {
  font-style: italic;
}
.post-body strong {
  font-weight: 500;
}

.post-body blockquote {
  border-left: 2px solid var(--accent-warm);
  padding: 0.25rem 0 0.25rem 1.2rem;
  font-style: italic;
  color: var(--ink-soft);
}
.post-body blockquote p:last-child {
  margin-bottom: 0;
}

.post-body ul,
.post-body ol {
  padding-left: 1.5rem;
}
.post-body li {
  margin-bottom: 0.4rem;
}
.post-body li::marker {
  color: var(--muted);
}

.post-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.08em 0.35em;
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
  border-radius: 3px;
}
.post-body pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--ink-soft) 6%, transparent);
  border-left: 2px solid var(--rule);
  overflow-x: auto;
  border-radius: 4px;
}
.post-body pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

.post-body figure {
  margin: 2rem 0;
}
.post-body figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.post-body figcaption {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

.post-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem auto;
  width: 30%;
}

.post-body p.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent-warm);
  padding-left: 1.25rem;
  margin: 2rem 0;
}

/* ---------- post nav ---------- */

.post-nav {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.post-nav a {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.post-nav a:hover {
  color: var(--accent-warm);
}

/* ---------- shine ----------
   A titanium-blue glare sweeps across a small group of contiguous
   words. The wrapper is added at runtime and uses background-clip:
   text so the gradient is painted only on the letter shapes; the
   non-band areas of the gradient match --ink so the surrounding
   text appears its normal color while the bright cobalt band
   translates across. */

.word {
  /* Plain marker for tokenized words — no visible style. */
}

.shine-group {
  display: inline-block;
  /* Animation moves background-position from 100% to 0%, keeping the
     gradient image fully over the wrapper at every frame. The ink stops
     on both edges of the gradient mean the text reads as plain ink
     before and after the band passes — no transparent gap. */
  background-image: linear-gradient(
    105deg,
    var(--ink) 0%,
    var(--ink) 42%,
    rgba(111, 140, 240, 1) 48%,
    rgba(220, 230, 255, 1) 50%,
    rgba(111, 140, 240, 1) 52%,
    var(--ink) 58%,
    var(--ink) 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 7px rgba(111, 140, 240, 0.55));
  animation: shine-sweep 1.6s cubic-bezier(0.4, 0, 0.5, 1) forwards;
}

@keyframes shine-sweep {
  to {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shine-group {
    animation: none;
    background: none;
    color: inherit;
    -webkit-text-fill-color: inherit;
    filter: none;
  }
}