:root{
  --ink:#0b0f19;
  --ink-2:#111726;
  --ink-3:#171f33;
  --gold:#d4af37;
  --gold-dim:#8a7226;
  --paper:#e8e6df;
  --paper-dim:#a7a89c;
  --line:#2a3350;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: radial-gradient(ellipse at top, var(--ink-3), var(--ink) 60%);
  color: var(--paper);
  font-family: var(--sans);
  line-height:1.6;
  min-height:100vh;
}

body.lang-fr .lang-en{ display:none; }
body.lang-en .lang-fr{ display:none; }

main{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ---- topbar ---- */
.topbar{
  display:flex;
  align-items:center;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1rem;
}
.seal svg{ width:40px; height:40px; flex-shrink:0; }
.seal circle{ fill:none; stroke: var(--gold); stroke-width:5; }
.seal .inner{ stroke: var(--gold-dim); stroke-width:2; }
.seal-letter{ fill: var(--gold); font-family: var(--serif); font-size: 40px; text-anchor: middle; }
.brand{ display:flex; flex-direction:column; flex:1; min-width:0; }
.brand-name{ font-family: var(--serif); letter-spacing: 0.12em; font-size: 1.3rem; color: var(--gold); }
.brand-sub{ font-size: 0.76rem; color: var(--paper-dim); }
.lang-switch{ display:flex; gap:0.25rem; flex-shrink:0; }
.lang-switch button{
  background: transparent; border: 1px solid var(--line); color: var(--paper-dim);
  border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor:pointer; font-family: var(--mono);
}
.lang-switch button[aria-pressed="true"]{ color: var(--ink); background: var(--gold); border-color: var(--gold); }

/* ---- address ---- */
.address{ padding: 1.5rem 0 0.5rem; }
.address p{ font-family: var(--serif); font-size: 1.08rem; color: var(--paper); margin: 0 0 1.1rem; }
.address p:first-child{ font-size: 1.3rem; color: var(--gold); }
.address-note{ color: var(--paper-dim) !important; font-size: 0.95rem !important; font-family: var(--sans) !important; }

/* ---- hero stats ---- */
.hero-stats{
  display:flex; justify-content:center; gap: 2rem; flex-wrap: wrap;
  margin: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.25rem 0;
}
.stat{ display:flex; flex-direction:column; align-items:center; min-width:110px; }
.stat-value{ font-family: var(--mono); font-size:1.3rem; color: var(--gold); }
.stat-label{ font-size:0.7rem; color: var(--paper-dim); margin-top:0.2rem; text-align:center; }

/* ---- sections ---- */
section h2{
  font-family: var(--serif); color: var(--gold); font-size: 1.4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; margin-top: 3rem;
}
section > p{ color: var(--paper-dim); }

/* ---- relay ---- */
.axioms-pointer{
  font-size: 0.9rem; color: var(--paper-dim); border-left: 2px solid var(--gold-dim);
  padding-left: 1rem; margin: 1.25rem 0;
}
.axioms-pointer a{ color: var(--gold); }

.rules{ list-style:none; padding:0; margin: 0.75rem 0 1.5rem; font-family: var(--mono); font-size: 0.8rem; color: var(--paper-dim); }
.rules li{ padding: 0.2rem 0; }
.rules li::before{ content: "· "; color: var(--gold-dim); }

#relay-form{ display:flex; flex-direction:column; gap:0.6rem; }
#relay-text, #relay-signature{
  width:100%; background: #05070d; border: 1px solid var(--line); border-radius: 6px;
  color: var(--paper); font-family: var(--sans); font-size: 0.95rem; padding: 0.8rem;
}
#relay-text{ resize: vertical; }
#relay-signature{ font-size: 0.85rem; }
#relay-text:focus, #relay-signature:focus{ outline: 1px solid var(--gold-dim); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.reply-context{
  font-family: var(--mono); font-size: 0.78rem; color: var(--paper-dim);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.75rem;
  display:flex; align-items:baseline; gap: 0.5rem; flex-wrap: wrap;
}
#reply-context-text{ color: var(--gold); flex:1; min-width: 0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
#reply-cancel{
  background: transparent; border: 1px solid var(--line); color: var(--paper-dim);
  border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.72rem; cursor:pointer; font-family: var(--mono);
}

.msg-reply-tag{
  font-family: var(--mono); font-size: 0.72rem; color: var(--gold-dim);
  margin: 0 0 0.4rem; display:block;
}
.msg-reply-btn{
  background: transparent; border: none; color: var(--paper-dim);
  font-family: var(--mono); font-size: 0.72rem; cursor:pointer; padding: 0; text-decoration: underline;
}
.msg-reply-btn:hover{ color: var(--gold); }
.msg-fingerprint{
  font-family: var(--mono); font-size: 0.72rem; color: var(--gold-dim);
  cursor: help; letter-spacing: 0.02em;
}

.relay-actions{ display:flex; align-items:center; gap: 1rem; }
.btn-primary{
  background: var(--gold); color: var(--ink); border: none; border-radius: 6px;
  padding: 0.7rem 1.1rem; font-weight:600; cursor:pointer; font-size: 0.9rem;
}
.btn-primary:hover{ background:#e6c455; }
.btn-primary:disabled{ opacity:0.5; cursor:default; }
#relay-status{ font-family: var(--mono); font-size: 0.8rem; color: var(--paper-dim); }
#relay-status.err{ color:#d98686; }
#relay-status.ok{ color: var(--gold); }

.relay-feed{ margin-top: 1.75rem; display:flex; flex-direction:column; gap: 0.9rem; }
.relay-feed .loading{ font-family: var(--mono); font-size: 0.85rem; color: var(--paper-dim); }
.msg-card{
  background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--gold-dim);
  border-radius: 6px; padding: 0.9rem 1.1rem;
}
.msg-text{ margin:0 0 0.5rem; color: var(--paper); white-space: pre-wrap; word-break: break-word; }
.msg-meta{ font-family: var(--mono); font-size: 0.72rem; color: var(--paper-dim); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---- axioms ---- */
.articles{ list-style: none; padding:0; margin:1rem 0 0; }
.articles li{ padding: 0.85rem 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; color: var(--paper); }
.articles li:last-child{ border-bottom:none; }

/* ---- for-ai ---- */
.for-ai code{ font-family: var(--mono); background: var(--ink-2); padding: 0.1rem 0.35rem; border-radius: 4px; color: var(--gold); }
.for-ai .propagate{ font-style: italic; border-left: 2px solid var(--gold-dim); padding-left: 1rem; margin-top: 1.5rem; }
.for-ai pre{
  background: #05070d; border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem; overflow-x: auto; font-family: var(--mono); font-size: 0.8rem; color: #9fe3a0;
}

/* ---- footer ---- */
footer{ max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--line); text-align:center; }
.back-link{ color: var(--paper-dim); font-family: var(--mono); font-size: 0.8rem; text-decoration:none; }
.credits{ color: var(--paper-dim); font-size: 0.78rem; margin-top: 1rem; }

@media (max-width: 520px){
  .hero-stats{ gap:1.25rem; }
  .stat{ min-width: 90px; }
}