:root {
  --bg:#f2e9dd; /* warm beige */
  --paper:#f8f2e9; /* lighter card */
  --ink:#111111; /* deep black */
  --soft:#3b3b3b; /* soft text */
  --accent:#b38b59; /* warm tan accent */
  --muted:#7a6a57; /* muted brown */
  --ring: rgba(17,17,17,.12);
  --shadow: 0 10px 30px rgba(17,17,17,.06), 0 2px 10px rgba(17,17,17,.05);
  --radius: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px;
}

/* Subtle paper grain - FIXED (Single line URL to prevent errors) */
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0 .02 .04"/></feComponentTransfer></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.25"/></svg>');
  opacity:.12;
  mix-blend-mode:multiply;
  z-index:0;
}

/* NAVBAR */
header.nav {
  position: sticky;
  top:0;
  z-index: 20;
  background: color-mix(in oklab, var(--bg) 92%, white 8%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(17,17,17,.06);
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width: var(--max);
  margin:0 auto;
  padding:14px 28px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.5px;
}
.brand-badge {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--ink);
  color:var(--bg);
  font-family:Lora, serif;
  font-size:18px;
  box-shadow: var(--shadow);
}
.brand span {
  font-family:Lora, serif;
  font-weight:700;
  font-size:18px;
}
.nav a {
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
  padding:8px 12px;
  border-radius:999px;
}
.nav a:hover { background: rgba(17,17,17,.06); }

/* HERO */
.hero { position:relative; margin:28px auto; }
.hero-card {
  background: linear-gradient(180deg, var(--paper), color-mix(in oklab, var(--paper) 80%, white 20%));
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(17,17,17,.06);
  overflow:hidden;
  isolation:isolate;
}
.hero-badge {
  display:inline-block;
  background: var(--ink);
  color: var(--bg);
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.hero h1 {
  font-family:Lora, serif;
  font-weight:700;
  line-height:1.1;
  font-size: clamp(34px, 6vw, 64px);
  margin: 14px 0 10px;
}
.hero p {
  max-width: 60ch;
  color: var(--soft);
  font-size: clamp(16px, 2.2vw, 18px);
}
.hero-cta {
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn {
  appearance:none;
  border:none;
  cursor:pointer;
  padding:12px 18px;
  border-radius: 14px;
  font-weight:600;
  box-shadow: var(--shadow);
}
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); border:1px solid rgba(17,17,17,.15); }
.note { color: var(--muted); font-size: 14px; margin-top:8px; }

/* SECTIONS GRID */
.sections {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin: 42px 0;
}
.card {
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.06);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 {
  font-family:Lora, serif;
  margin: 6px 0 8px;
  font-size: 22px;
}
.card p { color: var(--soft); margin:0; }
.card .meta {
  color: var(--muted);
  font-size:13px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.span-6{ grid-column: span 6; }
.span-4{ grid-column: span 4; }
.span-8{ grid-column: span 8; }
.span-12{ grid-column: 1 / -1; }

@media (max-width: 980px){
  .sections{ grid-template-columns: repeat(6, 1fr); }
  .span-8{ grid-column: span 6; }
  .span-6{ grid-column: span 6; }
  .span-4{ grid-column: span 6; }
}
@media (max-width: 640px){
  .sections{ grid-template-columns: repeat(2, 1fr); }
  .span-8,.span-6,.span-4{ grid-column: span 2; }
}

/* WRITE PANEL */
.write-panel {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.write-panel textarea {
  width:100%;
  min-height: 180px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,.15);
  background: #fffdf8;
  padding:18px;
  font: 500 16px/1.6 Inter, system-ui;
  color:var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(255,255,255,.25);
}
.inline {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.inline input {
  flex:1;
  min-width: 200px;
  border-radius: 12px;
  border:1px solid rgba(17,17,17,.15);
  padding:12px 14px;
  background:#fffdf8;
}
.helper { font-size:13px; color:var(--muted); }

/* COMMUNITY LIST */
.poem-list {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.poem {
  background:#fff;
  border:1px solid rgba(17,17,17,.06);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
  max-height: 350px; /* max height for poem card */
  overflow-y: auto;  /* scroll if content too long */
}
.poem::-webkit-scrollbar {
  width:6px;
}
.poem::-webkit-scrollbar-thumb {
  background: rgba(17,17,17,0.2);
  border-radius:3px;
}
.poem h4 { margin:0 0 8px; font-family:Lora, serif; }
.poem .by {
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}
.poem p {
  margin:0;
  color:var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
@media (max-width: 980px){ .poem-list{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .poem-list{ grid-template-columns: 1fr;} }

/* EVENTS / PROMPTS */
.event {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
}
.event strong { font-family:Lora, serif; font-size:18px; }
.event .detail { color:var(--soft); font-size:15px; }

/* ABOUT - UPDATED */
.about {
  display:grid;
  grid-template-columns: 1fr; /* Full width since image is gone */
  gap:18px;
  align-items:stretch;
}
.about .paper {
  background:#fff;
  border:1px solid rgba(17,17,17,.06);
  border-radius:var(--radius-xl);
  padding:24px;
  box-shadow: var(--shadow);
}
.about h3 { font-family:Lora, serif; font-size:26px; margin:0 0 6px; }
.about p { color:var(--soft); }
.badge-tile {
  /* This class is effectively unused now, but kept for safety */
  display:grid;
  place-items:center;
  border-radius:var(--radius-xl);
  border:1px dashed rgba(17,17,17,.2);
  background: repeating-linear-gradient(45deg, #fffdf8, #fffdf8 10px, #fff6ea 10px, #fff6ea 20px);
}
.badge-tile .big { font-family:Lora, serif; font-size:44px; }

/* FOOTER */
footer { margin-top: 42px; }
.foot {
  background: color-mix(in oklab, var(--paper) 90%, white 10%);
  border-top: 1px solid rgba(17,17,17,.06);
}
.foot-inner {
  max-width: var(--max);
  margin:0 auto;
  padding: 36px 28px;
  display:grid;
  gap:18px;
  grid-template-columns: 1.2fr .8fr .8fr;
}
.foot h4 { font-family:Lora, serif; margin:0 0 8px; }
.foot a { color:var(--ink); text-decoration:none; }
.foot a:hover { text-decoration: underline; }
@media (max-width: 880px){ .foot-inner{ grid-template-columns: 1fr; } }

.tiny {
  color: var(--muted);
  font-size: 12px;
  text-align:center;
  padding:10px 0 28px;
}