:root{
  --bg:#120D0A; --surface:#1C140F; --surface-2:#241A13;
  --ember:#C9932E; --ember-bright:#E8B85C; --flame:#8A3324;
  --text:#F2E8D8; --text-muted:#B3A390; --line:rgba(242,232,216,0.12);
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:640px; margin:0 auto; padding:0 28px;}
img{display:block; max-width:100%;}

nav{position:sticky; top:0; z-index:50; background:rgba(18,13,10,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:36px; width:auto;}
.brand span{font-family:'Fraunces',serif; font-size:18px; letter-spacing:0.03em;}
.navlinks{display:flex; gap:30px; align-items:center;}
.navlinks a{font-size:14px; color:var(--text-muted); transition:color .2s;}
.navlinks a:hover{color:var(--ember-bright);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:all .2s; font-family:inherit;}
.btn-primary{background:linear-gradient(135deg,var(--ember-bright),var(--ember)); color:#1A1108;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{border-color:var(--line); color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--ember); color:var(--ember-bright);}
.btn-danger{border-color:rgba(138,51,36,0.6); color:#E8A97C; background:transparent;}
.btn-danger:hover{background:rgba(138,51,36,0.15);}
.btn-sm{padding:6px 14px; font-size:12.5px;}

main{padding:48px 0 80px;}
.page-head{max-width:640px; margin-bottom:36px;}
.page-head .tag{color:var(--ember-bright); font-size:12px; margin-bottom:10px; display:block;}
.page-head h1{font-size:clamp(26px,3.6vw,38px);}
.page-head p{color:var(--text-muted); margin-top:12px;}

.flash{padding:14px 18px; border-radius:10px; font-size:14px; margin-bottom:24px;}
.flash-error{background:rgba(138,51,36,0.18); border:1px solid rgba(138,51,36,0.5); color:#E8A97C;}
.flash-success{background:rgba(201,147,46,0.14); border:1px solid rgba(201,147,46,0.4); color:var(--ember-bright);}

.hearths-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
.hearth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:border-color .2s, transform .2s; display:block;}
.hearth-card:hover{border-color:rgba(201,147,46,0.5); transform:translateY(-3px);}
.hearth-card .icon{width:38px; height:38px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:18px;}
.hearth-card h3{font-size:17px; font-weight:500; margin-bottom:6px;}
.hearth-card p{font-size:13.5px; color:var(--text-muted); margin-bottom:14px;}
.hearth-card .meta{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted);}
.hearth-card .meta span:last-child{color:var(--ember-bright);}
.hearth-card.tender{border-color:rgba(138,51,36,0.4);}
.hearth-card.tender .icon{background:rgba(138,51,36,0.18);}
.hearth-card.tender .meta span:last-child{color:#E8A97C;}

.feed{display:flex; flex-direction:column; gap:16px; max-width:680px;}
.post{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.post-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:14px; color:#1A1108; font-weight:600; flex-shrink:0;}
.post-who .name{font-size:14px; font-weight:500;}
.post-who .meta{font-size:11.5px; color:var(--text-muted);}
.room-pill{font-size:10.5px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ember-bright); border:1px solid var(--line); margin-left:8px;}
.post-body{font-size:14.5px; color:var(--text); margin-bottom:16px; white-space:pre-wrap;}
.post-body.creative{font-family:'Fraunces',serif; font-style:italic; font-size:16px; line-height:1.8; color:#EAD9BC;}
.post-actions{display:flex; align-items:center; gap:20px; font-size:13px; color:var(--text-muted); border-top:1px solid var(--line); padding-top:14px; flex-wrap:wrap;}
.post-actions form{display:inline;}
.post-actions button, .post-actions .action{background:none; border:none; color:var(--text-muted); font-size:13px; display:flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit; transition:color .2s;}
.post-actions button:hover, .post-actions .action:hover{color:var(--ember-bright);}
.post-actions .active{color:var(--ember-bright);}
.held-banner{background:rgba(138,51,36,0.15); border:1px solid rgba(138,51,36,0.4); color:#E8A97C; font-size:12.5px; padding:10px 14px; border-radius:8px; margin-bottom:14px;}

form.stack{display:flex; flex-direction:column; gap:16px;}
.field label{display:block; font-size:13px; color:var(--text-muted); margin-bottom:7px;}
.field input, .field textarea, .field select{width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:14.5px;}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--ember);}
.field-hint{font-size:12px; color:var(--text-muted); margin-top:6px;}

.auth-card{max-width:420px; margin:20px auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.auth-card h1{font-size:24px; margin-bottom:8px;}
.auth-card .sub{color:var(--text-muted); font-size:14px; margin-bottom:26px;}
.auth-switch{font-size:13.5px; color:var(--text-muted); margin-top:20px; text-align:center;}
.auth-switch a{color:var(--ember-bright);}

.comments{margin-top:26px; display:flex; flex-direction:column; gap:14px;}
.comment{background:var(--surface-2); border-radius:10px; padding:14px 16px;}
.comment .name{font-size:13px; font-weight:500;}
.comment .meta{font-size:11px; color:var(--text-muted); margin-left:6px;}
.comment .body{font-size:14px; margin-top:6px;}

.mod-table{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:40px;}
.mod-table th{text-align:left; color:var(--text-muted); font-weight:500; font-size:12px; padding:10px; border-bottom:1px solid var(--line);}
.mod-table td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
.mod-table tr:hover{background:var(--surface);}
.tabs{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
.tab{padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:13px; color:var(--text-muted);}
.tab.active{background:var(--surface-2); color:var(--ember-bright); border-color:var(--ember);}

footer{border-top:1px solid var(--line); padding:40px 0; margin-top:20px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flinks{display:flex; gap:24px; font-size:13px; color:var(--text-muted);}
footer .copy{font-size:12px; color:var(--text-muted); width:100%; margin-top:18px;}

@media(max-width:760px){ .navlinks{display:none;} }
:focus-visible{outline:2px solid var(--ember-bright); outline-offset:2px;}