/* page.css — page-specific layout for the Writing page.
   Depends on styles.css (the shared design system). */

/* ---- Header --------------------------------------------------------------- */
.writing-head { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem); }
.writing-head .display { margin-bottom: 1.4rem; }
.writing-head .lede { max-width: 38ch; }

/* ---- Featured essays — editorial almanac list ----------------------------- */
.essay-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }

.essay { border-bottom: 1px solid var(--line); }

.essay-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 4vw, 2.4rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3.5vw, 2.1rem) 0;
  transition: padding-left .3s var(--ease);
}
.essay-link:hover { padding-left: .5rem; }

.essay-num {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-3);
  letter-spacing: -.02em;
  transition: color .25s var(--ease);
}
.essay-link:hover .essay-num { color: var(--accent); }

.essay-body { display: flex; flex-direction: column; gap: .85rem; }

.essay-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 440;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  transition: color .25s var(--ease);
}
.essay-link:hover .essay-title { color: var(--accent); }

.essay-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
}
.essay-date {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.essay-read {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  transition: color .25s var(--ease);
}
.essay-read .tip { color: var(--accent); transition: transform .25s var(--ease); }
.essay-link:hover .essay-read { color: var(--ink); }
.essay-link:hover .essay-read .tip { transform: translateX(.3em); }

/* ---- Feed note + buttons -------------------------------------------------- */
.essay-feed-note {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin: var(--sp-4) 0 var(--sp-4);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 560px) {
  .essay-link { grid-template-columns: 1fr; gap: .6rem; }
  .essay-num { font-size: 1.1rem; }
}