*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050505;
  --surface:#0d0d0d;
  --surface-2:#141414;
  --border:#2a2a2a;
  --fire-orange:#ff6a00;
  --fire-yellow:#ffa726;
  --fire-red:#d32f2f;
  --ember:#ff4400;
  --text:#e8e0d8;
  --text-dim:#8a7e72;
  --gold:#c8a050;
}
html{font-size:16px;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.7;
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;
}

/* Embers */
#embers{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ember{position:absolute;bottom:-10px;background:radial-gradient(circle,var(--ember),transparent 70%);border-radius:50%;animation:ember-rise linear infinite;opacity:0.8}
.ember-bright{background:radial-gradient(circle,var(--fire-yellow),transparent 70%)}
.ember-dim{background:radial-gradient(circle,var(--fire-red),transparent 70%);opacity:0.5}
@keyframes ember-rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:0.8}
  90%{opacity:0.8}
  100%{transform:translateY(-110vh) translateX(var(--drift,10px));opacity:0}
}

.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--fire-orange);color:#fff;padding:8px 16px;border-radius:4px;z-index:9999;font-size:0.85rem;text-decoration:none}
.skip-link:focus{top:8px}

/* Layout */
main{position:relative;z-index:1;padding:40px 20px 80px;max-width:960px;margin:0 auto}
@media (max-width:600px){main{padding:24px 14px 60px}}

.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-dim);text-decoration:none;font-size:0.85rem;
  letter-spacing:1px;text-transform:uppercase;
  padding:8px 4px;margin-bottom:20px;
  transition:color 0.3s;
}
.back-link:hover,.back-link:focus-visible{color:var(--fire-orange)}

.page-header{
  margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--border);
  text-align:center;
}
.page-header h1{
  font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(2rem,6vw,3.2rem);letter-spacing:2px;
  background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange),var(--fire-red));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:10px;line-height:1.1;
}
.page-header p{color:var(--text-dim);font-size:0.95rem;max-width:640px;margin:0 auto}

/* Listing */
.posts-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:780px){.posts-grid{grid-template-columns:repeat(2,1fr)}}

.post-card{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
}
.post-card:hover,.post-card:focus-visible{
  transform:translateY(-4px);border-color:var(--fire-orange);
  box-shadow:0 8px 30px rgba(255,106,0,0.12);outline:none;
}
.post-card-cover{
  aspect-ratio:16/9;background:#000;overflow:hidden;position:relative;
}
/* contain (not cover) so non-16:9 uploads — square logos, portrait shots —
   letterbox instead of losing their top and bottom to a centre-crop */
.post-card-cover img,.post-card-cover video{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 0.6s;
}
.post-card:hover .post-card-cover img,.post-card:hover .post-card-cover video{transform:scale(1.05)}
.post-card-cover.placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:var(--fire-red);opacity:0.3;
}
.post-card-body{padding:20px 22px 24px}
.post-card-date{
  font-size:0.7rem;color:var(--text-dim);letter-spacing:2px;
  text-transform:uppercase;margin-bottom:10px;
}
.post-card-title{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:1.25rem;line-height:1.3;margin-bottom:10px;
  color:var(--text);
}
.post-card-excerpt{
  color:var(--text-dim);font-size:0.9rem;line-height:1.55;
}
.post-card-draft{
  display:inline-block;font-size:0.65rem;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--fire-red);color:#fff;padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:middle;
}

.posts-empty{
  text-align:center;padding:60px 20px;color:var(--text-dim);font-size:0.95rem;
  border:1px dashed var(--border);border-radius:10px;
}

/* Post-card label on listing */
.post-card-label{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:0.65rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--fire-orange);margin-bottom:6px;
}

/* ============================================================
   FACEBOOK-STYLE POST CARD
   Single-column feed card layout; fire-themed dark, not FB blue.
   ============================================================ */
.feed-main{max-width:680px}
@media (max-width:600px){.feed-main{padding:14px 10px 40px}}

.fb-post{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:0;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  display:flex;flex-direction:column;
}
@media (max-width:600px){
  .fb-post{border-radius:0;border-left:none;border-right:none;margin:0 -10px}
}

/* Header: avatar + author + timestamp */
.fb-post-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 10px;
}
.fb-avatar{
  width:44px;height:44px;flex-shrink:0;
  background:linear-gradient(135deg,var(--fire-red),var(--fire-orange),var(--fire-yellow));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;
  box-shadow:0 0 16px rgba(255,106,0,0.4);
}
.fb-post-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fb-author{
  font-family:'Cinzel',serif;font-weight:700;
  color:var(--text);font-size:0.95rem;text-decoration:none;letter-spacing:0.5px;
}
.fb-author:hover,.fb-author:focus-visible{color:var(--fire-yellow);outline:none}
.fb-timestamp{font-size:0.75rem;color:var(--text-dim);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.fb-timestamp time{color:var(--text-dim)}
.fb-draft-tag{background:var(--fire-red);color:#fff;padding:1px 7px;border-radius:3px;font-size:0.6rem;letter-spacing:1px;margin-left:6px}
.fb-spotlight-tag{
  display:inline-block;background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange));
  color:#000;padding:1px 8px;border-radius:10px;
  font-family:inherit;font-size:0.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  margin-left:8px;vertical-align:middle;
}

/* Kicker above title */
.fb-kicker{
  margin:4px 18px 0;
  font-family:'Cinzel',serif;font-weight:700;
  font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--fire-orange);
}

/* Title */
.fb-post-title{
  margin:6px 18px 10px;
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(1.1rem,4vw,1.45rem);line-height:1.25;
  color:var(--text);letter-spacing:0.5px;
}

/* Body */
.fb-post-body{
  padding:0 18px;
  font-size:1rem;line-height:1.55;color:var(--text);
}
.fb-post-body p{margin-bottom:12px;word-wrap:break-word;overflow-wrap:break-word}
.fb-post-body p:last-child{margin-bottom:14px}
.fb-post-body a{color:var(--fire-yellow);text-decoration:none;word-break:break-word}
.fb-post-body a:hover{text-decoration:underline;text-underline-offset:3px}
.fb-post-body strong{color:var(--fire-yellow);font-weight:600}

/* Inline media (image or video) — fills card width, natural height */
.fb-post-media{
  margin:6px 0 0;background:#000;
  position:relative;display:block;
}
.fb-post-media img,.fb-post-media video{
  width:100%;height:auto;max-height:80vh;
  display:block;object-fit:contain;
  background:#000;
}

/* Action bar — Like | Comment | Share. Counts live on the buttons. */
.fb-post-actions{
  display:flex;padding:4px 8px;
  border-bottom:1px solid var(--border);
  border-top:1px solid var(--border);
  margin-top:4px;
}
.fb-action-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 8px;min-height:44px;
  background:none;border:none;border-radius:8px;cursor:pointer;
  color:var(--text-dim);font-size:0.9rem;font-weight:500;
  transition:background 0.2s,color 0.2s,transform 0.1s;
}
.fb-action-btn:hover,.fb-action-btn:focus-visible{
  background:var(--surface-2);color:var(--text);outline:none;
}
.fb-action-btn:active{transform:scale(0.97)}
.fb-action-btn[aria-pressed="true"]{color:var(--fire-orange);font-weight:600}
.fb-action-btn[aria-pressed="true"] .fb-action-icon{animation:likePulse 0.5s ease-out}
.fb-action-icon{font-size:1.15rem;line-height:1}
.fb-action-count{
  background:var(--fire-orange);color:#000;
  font-size:0.72rem;font-weight:700;
  padding:2px 8px;border-radius:10px;
  min-width:22px;text-align:center;line-height:1.2;
}
.fb-action-count[hidden]{display:none}
.fb-action-btn[aria-pressed="true"] .fb-action-count{animation:countBump 0.4s ease-out}
@keyframes likePulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.5)}
  100%{transform:scale(1)}
}
@keyframes countBump{
  0%{transform:scale(1)}
  50%{transform:scale(1.25)}
  100%{transform:scale(1)}
}

/* Emoji picker for comment form */
.fb-emoji-btn{
  background:none;border:none;cursor:pointer;
  font-size:1.25rem;line-height:1;padding:6px;border-radius:50%;
  transition:background 0.15s,transform 0.1s;
}
.fb-emoji-btn:hover,.fb-emoji-btn:focus-visible{
  background:var(--surface-3);outline:none;
}
.fb-emoji-btn[aria-expanded="true"]{background:var(--surface-3)}
.fb-emoji-panel{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(8,1fr);gap:4px;
  padding:8px 4px 4px;border-top:1px solid var(--border);margin-top:6px;
}
.fb-emoji-panel[hidden]{display:none}
.fb-emoji-panel button{
  background:none;border:none;cursor:pointer;
  font-size:1.4rem;line-height:1;padding:8px 4px;border-radius:8px;
  transition:background 0.15s,transform 0.1s;
}
.fb-emoji-panel button:hover,.fb-emoji-panel button:focus-visible{
  background:var(--surface-3);transform:scale(1.15);outline:none;
}

/* Share menu (desktop fallback) */
.share-menu{
  position:absolute;z-index:100;
  right:18px;bottom:calc(100% - 48px);min-width:200px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  padding:6px;
  display:flex;flex-direction:column;gap:2px;
}
.fb-post{position:relative}
.share-menu[hidden]{display:none}
.share-menu a,.share-menu button{
  display:block;width:100%;
  padding:11px 14px;min-height:40px;
  background:none;border:none;color:var(--text);
  text-align:left;text-decoration:none;cursor:pointer;
  font-size:0.88rem;border-radius:6px;
}
.share-menu a:hover,.share-menu a:focus-visible,
.share-menu button:hover,.share-menu button:focus-visible{
  background:var(--surface-2);color:var(--fire-orange);outline:none;
}

/* Share toast (position over card) */
.share-toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--fire-orange);
  color:var(--fire-yellow);padding:12px 22px;border-radius:30px;
  font-size:0.85rem;letter-spacing:1px;
  box-shadow:0 4px 20px rgba(255,106,0,0.3);
  z-index:200;pointer-events:none;opacity:0;transition:opacity 0.3s;
}
.share-toast[hidden]{display:none}
.share-toast.visible{opacity:1}

/* ============================================================
   COMMENTS
   ============================================================ */
.fb-comments{padding:10px 18px 18px}
.fb-comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.fb-comments-list:empty{margin-bottom:0}

.fb-comment{
  display:flex;gap:10px;align-items:flex-start;
}
.fb-comment-avatar{
  width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;font-weight:600;color:var(--fire-yellow);
  text-transform:uppercase;
}
.fb-comment-bubble{
  background:var(--surface-2);border-radius:16px;
  padding:8px 14px;max-width:100%;min-width:0;
  word-wrap:break-word;overflow-wrap:break-word;
}
.fb-comment-author{font-weight:600;font-size:0.85rem;color:var(--text);margin-bottom:2px}
.fb-comment-body{font-size:0.92rem;line-height:1.4;color:var(--text);white-space:pre-wrap;word-break:break-word}
.fb-comment-time{font-size:0.72rem;color:var(--text-dim);margin-top:4px;padding-left:14px}

/* Comment form */
.fb-comment-form{
  display:flex;gap:10px;align-items:flex-start;
  padding-top:12px;border-top:1px solid var(--border);
}
.fb-avatar-sm{
  width:34px;height:34px;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--text-dim);
}
.fb-comment-form-fields{
  flex:1;display:flex;flex-direction:column;min-width:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
  padding:6px 14px;
  transition:border-radius 0.2s,border-color 0.2s;
}
.fb-comment-form.expanded .fb-comment-form-fields{border-radius:16px;border-color:var(--fire-orange)}
.fb-comment-form-fields textarea{
  width:100%;background:none;border:none;color:var(--text);
  font-family:inherit;font-size:0.92rem;outline:none;
  padding:8px 0;min-height:26px;line-height:1.45;resize:none;
  overflow:hidden;
}
.fb-comment-form-fields textarea::placeholder{color:var(--text-dim)}
.fb-comment-form.expanded .fb-comment-form-fields textarea{min-height:60px}

/* Everything below the textarea — hidden until focused / has content */
.fb-comment-form-extra{
  display:grid;grid-template-rows:0fr;
  opacity:0;transition:grid-template-rows 0.2s,opacity 0.2s;
  min-width:0;
}
.fb-comment-form.expanded .fb-comment-form-extra{grid-template-rows:1fr;opacity:1}
.fb-comment-form-extra > *{min-height:0;overflow:hidden}
.fb-comment-form-extra input[type=text]{
  width:100%;background:none;border:none;color:var(--text);
  font-family:inherit;font-size:0.88rem;outline:none;
  padding:8px 0;min-height:36px;
  border-top:1px solid var(--border);margin-top:4px;
}
.fb-comment-form-extra input[type=text]::placeholder{color:var(--text-dim)}

.fb-honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.fb-comment-form-row{
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding-top:8px;padding-bottom:4px;
}
.fb-comment-submit{
  padding:8px 18px;background:var(--fire-orange);color:#000;
  border:none;border-radius:14px;cursor:pointer;
  font-weight:600;font-size:0.85rem;letter-spacing:0.5px;
  transition:background 0.2s,transform 0.1s;
}
.fb-comment-submit:hover,.fb-comment-submit:focus-visible{background:var(--fire-yellow);outline:none}
.fb-comment-submit:active{transform:scale(0.97)}
.fb-comment-submit:disabled{opacity:0.55;cursor:not-allowed;transform:none}
.fb-comment-status{font-size:0.78rem;padding:4px 10px;border-radius:8px}
.fb-comment-status.success{background:rgba(76,175,80,0.15);color:#a5d6a7}
.fb-comment-status.error{background:rgba(211,47,47,0.15);color:#ef9a9a}

/* Footer */
footer.footer{margin-top:50px;padding-top:24px;border-top:1px solid var(--border);text-align:center;font-size:0.75rem;color:var(--text-dim)}
footer.footer a{color:var(--gold);text-decoration:none;display:inline-block;padding:5px 4px;min-height:24px}
footer.footer a:hover{color:var(--fire-orange)}