.observer-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px;padding:58px 0 40px;align-items:start}
.observer-intro h1{font-size:58px;margin:0 0 18px}
.observer-dash{color:var(--muted);margin:14px 0;user-select:none}
.observer-lede{margin:0;font-size:17px;line-height:1.85;color:var(--text);white-space:pre-line}
.observer-signoff{margin:0;color:var(--muted);font-size:15px}
.observer-elsewhere{margin:32px 0;border-top:1px solid var(--line);padding-top:24px}
.observer-elsewhere h2{font-size:13px;font-weight:400;letter-spacing:1px;color:var(--muted);margin:0 0 14px}
.observer-elsewhere ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.observer-elsewhere a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:14px;padding:10px 0;color:var(--text);border-bottom:1px solid transparent}
.observer-elsewhere a:hover{color:var(--accent)}
.observer-elsewhere i{font-size:19px;color:var(--muted)}
.observer-elsewhere a:hover i{color:var(--accent)}
.observer-arrow{color:var(--muted)}
.observer-note{margin:28px 0 0;color:var(--muted);font-size:15px;line-height:1.85;white-space:pre-line}

.observer-form-col{padding-top:6px}
.observer-form-title{font-size:22px;font-weight:400;margin:0 0 26px}
.observer-form{display:grid;gap:26px}
.observer-field{display:grid;gap:8px}
.observer-field label{font-size:15px;color:var(--muted)}
.observer-field input,.observer-field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font-family:inherit;font-size:16px;padding:8px 0;resize:vertical}
.observer-field input:focus,.observer-field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.observer-send{justify-self:start;margin-top:6px;background:transparent;border:0;color:var(--accent);font-family:inherit;font-size:17px;letter-spacing:.02em;cursor:pointer;border-bottom:1px solid var(--accent);padding:2px 0}
.observer-send[disabled]{color:var(--muted);border-bottom-color:var(--line);cursor:default}
.observer-status{margin:0;font-size:13px;color:var(--muted);min-height:1em}

/* Honeypot: kept in the DOM and focusable by bots, invisible and skipped by
   people (off-screen, not display:none, so naive bots still fill it). */
.observer-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:860px){
  .observer-page{grid-template-columns:1fr;gap:40px;padding:42px 0 32px}
  .observer-intro h1{font-size:42px}
}

/* ── Toast (shared) ── */
.toast-stack{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:grid;gap:8px;z-index:100;pointer-events:none}
.toast{min-width:220px;max-width:min(90vw,420px);padding:12px 16px;border-radius:8px;border:1px solid var(--line);background:rgba(14,13,18,.98);color:var(--text);font-size:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.toast.is-visible{opacity:1;transform:translateY(0)}
.toast-ok{border-color:var(--accent)}
.toast-error{border-color:#e2725b;color:#f0cabf}