/* ============================================================
   writing-listing.css
   Styles specific to writing/index.html only
   Page header · Essay list · Featured card · Row items
   ============================================================ */

/* ── PAGE HEADER ── */
.page-header {
  padding: 8rem 6vw 4rem;
  border-bottom: 3px solid var(--espresso);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
}
.ph-issue {
  font-size: .52rem; font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 1.5rem;
}
.ph-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .88; letter-spacing: -.03em;
  color: var(--espresso);
}
.ph-title em { font-style: italic; color: var(--rose) }
.ph-desc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.45; color: var(--bark); margin-bottom: 2rem;
}
.ph-rule { width: 100%; height: 1px; background: var(--linen-4) }

/* ── ESSAY LIST CONTAINER ── */
.essay-list { padding: 0 6vw 6rem }

/* ── FEATURED ESSAY ── */
.essay-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--linen-4);
  cursor: none;
  text-decoration: none;
  transition: background .25s;
}
.essay-featured:hover              { background: var(--rose-faint) }
.essay-featured:hover .ef-title    { color: var(--rose) }

.ef-main {
  padding: 3.5rem 4rem 3.5rem 0;
  border-right: 1px solid var(--linen-4);
  position: relative;
}
.ef-tag {
  font-size: .52rem; 
  font-weight: 500;
  letter-spacing: .38em; 
  text-transform: uppercase;
  color: var(--rose); 
  margin-bottom: 1rem;
}
.ef-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--espresso); margin-bottom: 1rem;
  transition: color .2s;
}
.ef-title em { font-style: italic }
.ef-excerpt {
  font-size: .95rem; line-height: 1.85;
  color: var(--bark); max-width: 540px; margin-bottom: 1.5rem;
}
.ef-meta { 
  display: flex; 
  align-items: center; 
  gap: 1.5rem 
}
.ef-date {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--stone);
}
.ef-read {
  font-size: .55rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rose);
}
.ef-read::after { content: ' →' }

.ef-side {
  padding: 3.5rem 0 3.5rem 4rem;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.ef-side-label {
  font-size: .52rem; font-weight: 600;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 1.2rem;
}
.ef-kicker {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; font-weight: 300;
  color: var(--stone); line-height: 1.7;
}

/* ── REGULAR ESSAY ROW ── */
.essay-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0 2.5rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--linen-4);
  text-decoration: none; cursor: none;
  transition: background .2s;
}
.essay-row:hover            { background: var(--rose-faint) }
.essay-row:hover .er-title  { color: var(--rose) }

.er-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 900;
  color: rgba(196,144,122,.12);
  line-height: 1; text-align: right;
}
.er-tags { display: flex; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap }
.er-tag {
  font-size: .5rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); padding: .18rem .5rem;
  border: 1px solid var(--linen-4);
}
.er-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  color: var(--espresso); margin-bottom: .3rem;
  transition: color .2s; line-height: 1.3;
}
.er-excerpt {
  font-size: .82rem; font-weight: 300;
  color: var(--stone); line-height: 1.6;
}
.er-meta { text-align: right; flex-shrink: 0 }
.er-date {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone-lt);
  display: block; margin-bottom: .3rem;
}
.er-read { font-size: .52rem; color: var(--rose) }

/* ── COMING SOON ── */
.coming-soon {
  padding: 4rem 0; text-align: center;
  border-bottom: 1px solid var(--linen-4);
}
.cs-label {
  font-size: .52rem; font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--stone-lt); margin-bottom: .8rem;
}
.cs-text {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 1rem; color: var(--stone);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .page-header { grid-template-columns: 1fr; gap: 2rem }
  .essay-featured { grid-template-columns: 1fr }
  .ef-main { border-right: none; border-bottom: 1px solid var(--linen-4); padding: 2.5rem 0 }
  .ef-side { padding: 2rem 0 }
  .essay-row { grid-template-columns: 50px 1fr auto }
}
@media (max-width: 600px) {
  .essay-list { padding: 0 5vw 4rem }
  .essay-row { grid-template-columns: 1fr; gap: .5rem }
  .er-num { display: none }
  .er-meta { text-align: left }
}