body{font-family:Georgia, 'Times New Roman', serif;background:#f3f6fb;color:#111;margin:0;padding:0;line-height:1.65}
.container{max-width:1180px;margin:32px auto;padding:28px;background:#fff;border-radius:20px;box-shadow:0 15px 40px rgba(15,23,42,0.08)}
.hero-banner{display:grid;grid-template-columns:1.12fr 0.88fr;gap:28px;align-items:center;background:linear-gradient(135deg,#0f172a 0%,#112a5c 48%,#1d4ed8 100%);color:#fff;padding:34px 36px;border-radius:20px;margin-bottom:26px;overflow:hidden;position:relative}
.hero-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 40%);pointer-events:none}
.hero-content{position:relative;z-index:1;max-width:620px}
.hero-eyebrow{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:700}
.hero-banner h1{margin:0 0 10px;font-size:2.35rem;line-height:1.1;font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:700}
.hero-copy{margin:0;max-width:620px;line-height:1.8;color:rgba(255,255,255,.94);font-size:1rem;font-family:Inter,Segoe UI,Arial,sans-serif}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero-btn{display:inline-block;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:600;transition:transform .2s ease, box-shadow .2s ease;font-family:Inter,Segoe UI,Arial,sans-serif}
.hero-btn:hover{transform:translateY(-1px)}
.hero-btn-primary{background:#fff;color:#1d4ed8;box-shadow:0 10px 24px rgba(15,23,42,.16)}
.hero-btn-secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.24)}
.hero-media{display:flex;justify-content:center}
.hero-media img{width:100%;max-height:460px;object-fit:cover;border-radius:18px;border:2px solid rgba(255,255,255,.28);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.intro-grid{display:grid;grid-template-columns:1.35fr 0.9fr;gap:18px;margin-bottom:22px}
.intro-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:20px}
.intro-card h2,.intro-card h3{margin:0 0 8px;font-family:Inter,Segoe UI,Arial,sans-serif}
.intro-card p,.intro-card li{font-family:Inter,Segoe UI,Arial,sans-serif;color:#475569;line-height:1.7}
.accent-card{background:linear-gradient(135deg,#eff6ff,#f8fafc)}
.accent-card ul{margin:8px 0 0 16px;padding:0}
.section-heading{margin:22px 0 18px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}
.section-heading h2{margin:0 0 6px;font-size:1.4rem;font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:700}
.section-heading p{margin:0;color:#64748b;font-family:Inter,Segoe UI,Arial,sans-serif}
.submission-panel{display:grid;grid-template-columns:0.9fr 1.1fr;gap:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:20px;margin-bottom:24px}
.submission-copy h2{margin:0 0 8px;font-family:Inter,Segoe UI,Arial,sans-serif}
.submission-copy p{margin:0;color:#475569;line-height:1.7;font-family:Inter,Segoe UI,Arial,sans-serif}
.message-form{display:grid;gap:10px}
h1{margin-top:0}
.form-row{margin-bottom:8px}
textarea{width:100%;min-height:120px;padding:10px;border:1px solid #e2e8f0;border-radius:8px;box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}
input[type=text],input[type=file]{width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;box-sizing:border-box;font-family:Inter,Segoe UI,Arial,sans-serif}
button.primary{background:#2563eb;color:#fff;padding:10px 16px;border:0;border-radius:8px;cursor:pointer;font-family:Inter,Segoe UI,Arial,sans-serif}
.story-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px;align-items:start}
.post{border:1px solid #e7ecf3;padding:18px;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04);height:100%}
.post .content{font-size:1rem;line-height:2.0;color:#0f172a;white-space:pre-wrap;font-family:Georgia, 'Times New Roman', serif;margin:0}
.message-preview{white-space:pre-wrap;line-height:2.0}
.message-full{margin-top:6px;white-space:pre-wrap;line-height:2.0}
.message-full.hidden{display:none}
.text-toggle{background:transparent;border:0;padding:0;color:#2563eb;cursor:pointer;font-size:1rem;margin-top:8px}
.text-toggle:hover{color:#1d4ed8}
.post .meta{color:#6b7280;font-size:13px;margin-bottom:8px}
.posted-time{color:#64748b;font-size:13px;margin-top:12px;border-top:1px solid #f1f5f9;padding-top:10px;font-family:Inter,Segoe UI,Arial,sans-serif}
.comment-section{margin-top:20px;background:#f8fafc;padding:16px;border-radius:10px;border:1px solid #e2e8f0}
.comment-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.comment-header h3{margin:0;font-size:1rem;font-family:Inter,Segoe UI,Arial,sans-serif}
.comment-count{color:#475569;font-weight:600}
.comment{padding:12px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px}
.comment-meta{color:#6b7280;font-size:12px;margin-bottom:6px;font-family:Inter,Segoe UI,Arial,sans-serif}
.comment-content{font-size:15px;line-height:1.45;font-family:Georgia, 'Times New Roman', serif}
.comments-list{display:block;margin-top:10px}
.comments-list.hidden{display:none}
.comment-form.hidden{display:none}
.toggle-comments-button,.toggle-comment-button{background:#f3f4f6;color:#111;padding:8px 14px;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;margin-top:12px;font-family:Inter,Segoe UI,Arial,sans-serif}
.toggle-comments-button:hover,.toggle-comment-button:hover{background:#e5e7eb}
.small{color:#475569;font-size:14px;font-family:Inter,Segoe UI,Arial,sans-serif}
.file-thumb{width:100%;max-width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:8px;margin-right:8px;display:block;background:#f8fafc}
.files-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.files-row img,.files-row video{width:100%;height:auto;max-height:220px;object-fit:contain;border-radius:8px;background:#f8fafc}
.file-preview{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.preview-item{border:1px solid #e2e8f0;border-radius:10px;padding:8px;background:#f8fafc}
.preview-media{width:100%;max-height:220px;object-fit:contain;border-radius:8px;display:block;background:#fff}
.preview-file{padding:10px 12px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;font-family:Inter,Segoe UI,Arial,sans-serif;color:#334155}
.notice{background:#fffbeb;border:1px solid #fef3c7;padding:10px;border-radius:8px;margin-bottom:16px}
.alert{padding:14px 16px;border-radius:10px;margin-bottom:16px;animation:fade-in-out 6s ease-in-out forwards;font-family:Inter,Segoe UI,Arial,sans-serif}
.alert-success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}
.alert-error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
@keyframes fade-in-out{0%{opacity:1}90%{opacity:1}100%{opacity:0}}
@media (max-width: 1024px){.story-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width: 900px){.hero-banner,.intro-grid,.submission-panel{grid-template-columns:1fr}.hero-media img{max-height:220px}}
@media (max-width: 700px){.container{padding:18px}.hero-banner{padding:20px}.hero-actions{flex-direction:column;align-items:flex-start}.story-grid{grid-template-columns:1fr}}