/* juliapoet.me — shared styles for archive + detail (reading) pages */
:root{
  --paper:        #faf3ef;
  --paper-soft:   #f3e6e0;
  --mauve-pale:   #e8c8d0;
  --mauve:        #b27d8d;
  --mauve-deep:   #7a4a5a;
  --sage:         #9aaa8c;
  --rose:         #a83246;
  --rose-bright:  #c43d54;
  --text:         #2a1d1a;
  --text-soft:    rgba(42,29,26,.7);
  --hair:         rgba(122,74,90,.16);
  --margin:       clamp(1.25rem, 5vw, 6rem);
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--paper);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.65;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,200,208,.5), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 110%, rgba(154,170,140,.16), transparent 60%);
}
a{color:inherit}

/* ===== Top bar ===== */
.bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--margin);
  background:rgba(250,243,239,.8);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--hair);
}
.bar .mark{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:1.25rem;
  text-decoration:none;letter-spacing:.005em;color:var(--text);
}
.bar .mark .dot{color:var(--rose)}
.bar nav{display:flex;gap:1.4rem;font-family:'Inter',sans-serif;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase}
.bar nav a{color:var(--text-soft);text-decoration:none;transition:color .3s ease}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--rose)}

/* ===== Shared wrap ===== */
.wrap{position:relative;z-index:1;max-width:54rem;margin:0 auto;padding:4.5rem var(--margin) 7rem}
.eyebrow{
  font-family:'Inter',sans-serif;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mauve-deep);display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--mauve)}

/* ===== Archive ===== */
.archive-title{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(3rem,9vw,5.5rem);line-height:.95;letter-spacing:-.02em;margin-bottom:.6rem;
}
.archive-sub{color:var(--text-soft);font-size:1.05rem;max-width:48ch;margin-bottom:3rem}
.archive-list{list-style:none;display:flex;flex-direction:column}
.arch-row{
  display:block;text-decoration:none;color:inherit;
  padding:1.8rem 0;border-top:1px solid var(--hair);
  transition:padding-left .4s cubic-bezier(.7,0,.2,1);
}
.arch-row:last-child{border-bottom:1px solid var(--hair)}
.arch-row:hover{padding-left:.6rem}
.arch-row .meta{
  font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:.5rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
}
.arch-row .meta .ext{color:var(--rose)}
.arch-row h2{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:2rem;line-height:1.1;letter-spacing:-.01em;margin-bottom:.5rem;
}
.arch-row p{color:var(--text-soft);max-width:60ch}
.arch-row .go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);
}
.arch-row .go .arrow{transition:transform .4s cubic-bezier(.7,0,.2,1)}
.arch-row:hover .go .arrow{transform:translateX(5px)}

.empty,.loading-note{color:var(--text-soft);font-style:italic;padding:3rem 0;text-align:center}

/* ===== Detail ===== */
.detail-meta{
  font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem;
}
.detail-title{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(2.6rem,7vw,4.5rem);line-height:1;letter-spacing:-.02em;margin-bottom:2rem;
}
.detail-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0 0}
.detail-tags span{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mauve-deep);
  border:1px solid var(--hair);border-radius:999px;padding:.4rem .8rem;
}
.detail-ext{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:2.5rem;
  background:var(--text);color:#fff;text-decoration:none;border-radius:999px;
  padding:.85rem 1.5rem;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  transition:background .3s ease;
}
.detail-ext:hover{background:var(--rose)}
.back-home{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:3.5rem;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft);
  text-decoration:none;transition:color .3s ease;
}
.back-home:hover{color:var(--rose)}

/* ===== Prose (mirrors the TipTap editor output) ===== */
.prose{font-family:'Fraunces',serif;font-size:1.2rem;line-height:1.75;color:var(--text)}
.prose p{margin:0 0 1.3rem}
.prose h2{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:2.2rem;line-height:1.1;margin:2.2rem 0 1rem;letter-spacing:-.01em}
.prose h3{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:1.6rem;line-height:1.2;margin:1.8rem 0 .8rem}
.prose blockquote{border-left:2px solid var(--rose);padding-left:1.2rem;margin:1.6rem 0;
  color:var(--text-soft);font-style:italic}
.prose ul,.prose ol{padding-left:1.5rem;margin:0 0 1.3rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--rose);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.5rem 0}
.prose img{display:block;max-width:100%;height:auto;margin:2rem auto;border-radius:10px}
.prose strong{font-weight:600}
.prose em{font-style:italic}
/* Poems: preserve line breaks for plain-text bodies */
.prose.poem{white-space:normal}
.prose.poem p{margin-bottom:1.6rem}

@media (max-width:640px){
  .bar nav{gap:1rem}
  .wrap{padding:3rem var(--margin) 5rem}
  .prose{font-size:1.1rem}
}