/* ========== BASE / THEME ========== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#0b0b0b;color:#f5f5f5;overflow-x:hidden;}
body::before{content:"";position:fixed;width:600px;height:600px;background:radial-gradient(circle,rgba(212,175,55,0.25),transparent);top:-200px;left:-200px;animation:float 8s infinite alternate ease-in-out;z-index:-1;}
body::after{content:"";position:fixed;width:500px;height:500px;background:radial-gradient(circle,rgba(250,204,21,0.2),transparent);bottom:-200px;right:-200px;animation:float 10s infinite alternate-reverse ease-in-out;z-index:-1;}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(40px)}}

a{color:#d4af37;text-decoration:none}
a:hover{color:#facc15}

/* ========== NAVBAR ========== */
.navbar{position:sticky;top:20px;margin:20px 60px;padding:15px 40px;display:flex;justify-content:space-between;align-items:center;border-radius:20px;backdrop-filter:blur(15px);background:rgba(212,175,55,0.05);border:1px solid rgba(212,175,55,0.2);animation:fadeDown 1s ease;}
.logo{font-weight:700;font-size:20px;color:#d4af37;}
.nav-links{display:flex;gap:18px;align-items:center;}
.nav-links a{text-decoration:none;color:#d1d5db;transition:.3s}
.nav-links a:hover{color:#d4af37;transform:translateY(-2px)}

/* ========== HERO (HOME) ========== */
.hero{text-align:center;padding:140px 20px 80px;animation:fadeUp 1.2s ease;}
.hero h1{font-size:52px;font-weight:800;background:linear-gradient(90deg,#d4af37,#facc15);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;}
.hero p{font-size:18px;opacity:.8;margin-bottom:40px;}
.cta-btn{padding:14px 45px;border-radius:30px;border:none;background:linear-gradient(90deg,#d4af37,#facc15);color:black;font-weight:600;font-size:16px;cursor:pointer;transition:.4s}
.cta-btn:hover{transform:scale(1.1);box-shadow:0 20px 40px rgba(212,175,55,0.5)}

/* ========== FEATURE CARDS ========== */
.cards{display:flex;justify-content:center;gap:40px;padding:80px 40px;flex-wrap:wrap;}
.card{width:260px;padding:30px;border-radius:25px;background:rgba(212,175,55,0.05);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,0.2);transition:.4s;text-align:left;position:relative;overflow:hidden;animation:fadeUp 1.5s ease;}
.card::before{content:"";position:absolute;width:120%;height:120%;background:linear-gradient(45deg,#d4af37,#facc15);top:-100%;left:-100%;transform:rotate(45deg);transition:.6s;opacity:.08}
.card:hover::before{top:-20%;left:-20%}
.card:hover{transform:translateY(-15px);box-shadow:0 30px 60px rgba(212,175,55,0.3)}
.card h3{margin-bottom:15px;font-size:20px;color:#facc15;}
.card p{font-size:14px;opacity:.75;margin-bottom:20px;}
.card button{padding:8px 18px;border-radius:20px;border:none;background:linear-gradient(90deg,#d4af37,#facc15);color:black;font-weight:600;cursor:pointer;transition:.3s}
.card button:hover{transform:scale(1.08)}

/* ========== LIST PAGES GRID ========== */
.poems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:50px auto;padding:0 20px;}
.poem-card{background:rgba(212,175,55,0.05);border:1px solid rgba(212,175,55,0.2);border-radius:20px;padding:30px;transition:transform .4s,box-shadow .4s;cursor:pointer;position:relative;overflow:hidden;}
.poem-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 20px 40px rgba(212,175,55,0.4)}
.poem-card h2{font-size:1.4rem;color:#facc15;margin-bottom:10px}
.poem-card p{font-size:1rem;line-height:1.6;opacity:.85;white-space:pre-line;max-height:4.5em;overflow:hidden}

/* ========== FORMS & COMMONS ========== */
.container{max-width:900px;margin:30px auto;padding:0 20px;}
.input, textarea, select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(212,175,55,0.2);background:rgba(212,175,55,0.05);color:#f5f5f5;outline:none}
label{display:block;margin:10px 0 6px;opacity:.9}
.btn{padding:10px 20px;border-radius:12px;border:none;background:linear-gradient(90deg,#d4af37,#facc15);color:#111;font-weight:700;cursor:pointer}
.btn-danger{background:#ef4444;color:#fff}
.meta{opacity:.7;font-size:.9rem;margin:8px 0}
.comment{border-top:1px solid rgba(212,175,55,0.2);padding:12px 4px}

/* ========== FOOTER ========== */
footer{text-align:center;padding:50px 20px;opacity:.6;font-size:14px;animation:fadeUp 2s ease;}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}

/* =========================================================
   POEM VIEW — CLASSIC, CENTERED, MOBILE-FRIENDLY
   ========================================================= */
:root{
  --gold-1:#facc15;   /* bright gold */
  --gold-2:#d4af37;   /* warm gold for title */
  --ink:#f5f5f5;      /* body text */
  --ink-dim:#cfcfcf;  /* meta text */
}

/* Section container for the poem page */
.poem-hero{
  max-width:1000px;
  margin:120px auto 80px;
  padding:0 24px;
  text-align:center;           /* center heading + meta */
}

/* Big serif title (like your reference image) */
.poem-hero__title{
  font-family:'Playfair Display',serif;
  font-weight:800;
  font-size:clamp(40px,6vw,64px);
  line-height:1.1;
  margin:0 0 10px 0;
  color:var(--gold-2);
  letter-spacing:.5px;
  text-rendering:optimizeLegibility;
}

/* Meta under title */
.poem-hero__meta{
  font-size:15px;
  color:var(--ink-dim);
  margin-bottom:34px;
}

/* The poem content block — centered, narrower, golden lines */
.poem-hero__content{
  max-width:720px;
  margin:0 auto 26px;          /* center the column */
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.9;
  color:#ffe58a;               /* soft gold lines like your sample */
  white-space:pre-wrap;        /* preserve DB line breaks */
  text-align:center;           /* center each line */
}

/* Subtle stanza rhythm (extra space for blank lines) */
.poem-hero__content br{
  content:"";
  display:block;
  margin-bottom:10px;
}

/* Actions row under poem — centered inline */
.poem-hero__actions{
  max-width:720px;
  margin:16px auto 0;
  display:inline-flex;         /* so it centers inside the section */
  align-items:center;
  gap:14px;
}

/* Divider keeps same width as poem column */
.poem-hero__divider{
  max-width:720px;
  margin:22px auto;
  border:0;
  border-top:1px solid rgba(212,175,55,0.22);
}

/* Comments container — centered column, left-aligned text for readability */
.poem-hero__comments-title,
.poem-hero__comment-form,
.poem-hero__comments{
  max-width:720px;
  margin:0 auto;
  text-align:left;
}

/* Center the “Please login …” notes and any status notes */
.poem-center-note{
  max-width:720px;
  margin:8px auto 12px;
  color:var(--ink-dim);
  text-align:center;
  font-size:14px;
}

/* Comment textarea themed */
.poem-hero__comment-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,0.2);
  background:rgba(212,175,55,0.05);
  color:#f5f5f5;
  outline:none;
}

.comment{border-top:1px solid rgba(212,175,55,0.22);padding:12px 2px;margin-top:6px;}
.comment-delete{margin-top:6px;}
.inline{display:inline;}
.mt-8{margin-top:8px;}
.likes{opacity:.9;}

/* ========== MOBILE TWEAKS ========== */
@media (max-width:560px){
  .navbar{top:16px;margin:16px;padding:12px 16px;border-radius:16px;}
  .nav-links{gap:12px;flex-wrap:wrap;}
  .poems-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:40px auto;padding:0 16px;}
  .poem-card{border-radius:16px;padding:20px;}
  .poem-card h2{font-size:clamp(18px,2.4vw,22px);}
  .poem-card p{font-size:clamp(14px,2vw,16px);}
  .poem-hero{margin-top:100px;margin-bottom:60px;}
  .poem-hero__title{font-size:clamp(28px,7vw,42px);}   /* slightly smaller on phones */
  .poem-hero__content{font-size:18px;line-height:1.85;}
}