/* river.css — shared by both rivers. Tokens match the static site identity. */
:root{
  --paper:#f7f4ef; --ink:#2b2622; --ink-soft:#4a443e;
  --accent:#7d4060; --taupe:#b8a99a; --hair:rgba(125,64,96,.28);
  --col:600px; --gutter:56px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.62;
  -webkit-font-smoothing:antialiased;}
.meta,.who,figcaption,.row,.bar,.liveedge,.plus,.mode,.state{font-family:"DM Sans",sans-serif;}

/* masthead */
header{max-width:var(--col);margin:0 auto;padding:13vh 24px 8vh calc(24px + var(--gutter));}
header h1{font-family:"DM Sans",sans-serif;font-weight:500;font-size:15px;
  letter-spacing:.34em;text-transform:uppercase;margin:0 0 18px;color:var(--accent);}
header p{margin:0;font-size:23px;font-style:italic;color:var(--ink-soft);max-width:38ch;}

/* the stream + current line */
main{max-width:var(--col);margin:0 auto;padding:0 24px 30vh calc(24px + var(--gutter));position:relative;}
main[data-river="personal"]::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(24px + var(--gutter)/2);width:1px;background:var(--hair);}
.node{position:relative;}
main[data-river="personal"] .node::before{content:"";position:absolute;
  left:calc(-1 * var(--gutter)/2);top:.95em;width:7px;height:7px;margin-left:-3px;
  border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--accent);}
main[data-river="personal"] .node.work::before{top:14px;background:var(--accent);
  box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--hair);}

/* work + comment */
.work{margin:26px 0;}
.work .frame{display:block;width:100%;height:auto;background:#fff;
  box-shadow:0 1px 0 rgba(43,38,34,.06),0 18px 40px -28px rgba(43,38,34,.55);}
figure{margin:0;}
figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:11px;line-height:1.5;}
figcaption .t{color:var(--ink);font-weight:500;} figcaption .d{color:var(--taupe);}
.comment{margin:18px 0;max-width:46ch;}
.comment .body{font-size:19px;color:var(--ink-soft);line-height:1.6;}
.comment .who{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);margin-top:6px;}

/* the + inserter */
.gap{position:relative;height:30px;display:flex;align-items:center;}
.gap .plus{position:absolute;left:calc(-1 * var(--gutter)/2);transform:translateX(-50%);
  width:22px;height:22px;border:none;background:var(--paper);color:var(--taupe);
  font-size:17px;line-height:1;cursor:pointer;border-radius:50%;opacity:0;
  transition:opacity .18s,color .18s,transform .18s;}
.gap:hover .plus,.gap:focus-within .plus{opacity:1;}
.gap .plus:hover{color:var(--accent);transform:translateX(-50%) scale(1.18);}

/* composer */
.composer{margin:14px 0;max-width:46ch;}
.composer textarea{width:100%;border:none;background:transparent;resize:none;overflow:hidden;
  font-family:inherit;font-size:19px;line-height:1.6;color:var(--ink);padding:0;outline:none;}
.composer textarea::placeholder{color:var(--taupe);font-style:italic;}
.composer .row{display:flex;align-items:center;gap:14px;margin-top:8px;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;}
.composer .mode{color:var(--taupe);cursor:pointer;background:none;border:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;}
.composer .mode[aria-pressed="true"]{color:var(--accent);}
.composer .sep{color:var(--hair);}
.composer .state{color:var(--taupe);margin-left:auto;opacity:0;transition:opacity .3s;}
.composer .state.on{opacity:1;}
.picker{display:none;gap:10px;flex-wrap:wrap;margin-top:14px;}
.picker.open{display:flex;}
.picker .pick{border:1px solid var(--hair);background:#fff;padding:0;cursor:pointer;
  width:84px;line-height:0;border-radius:2px;overflow:hidden;transition:box-shadow .15s,transform .15s;}
.picker .pick:hover{box-shadow:0 6px 16px -10px rgba(43,38,34,.5);transform:translateY(-1px);}
.picker .pick img{width:100%;height:auto;display:block;}
.picker-empty{color:var(--taupe);font-style:italic;}

/* ---- shared river chrome -------------------------------------------- */
body.shared main{padding-top:120px;}
.bar{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(247,244,239,.86);
  backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--hair);}
.bar .inner{max-width:var(--col);margin:0 auto;padding:11px 24px 12px;display:flex;align-items:center;gap:16px;}
.bar .name{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.bar .presence{font-size:11.5px;color:var(--taupe);letter-spacing:.04em;}
.bar .presence b{color:var(--ink-soft);font-weight:500;}
.liveedge{display:flex;align-items:center;gap:12px;margin:38px 0 8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.liveedge::before,.liveedge::after{content:"";height:1px;background:var(--hair);flex:1;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(125,64,96,.4);}50%{box-shadow:0 0 0 7px rgba(125,64,96,0);}}
.node.arrive{animation:arrive 1.1s ease both;}
@keyframes arrive{from{opacity:0;transform:translateY(10px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}

@media (max-width:560px){:root{--gutter:34px;}body{font-size:18px;}header p{font-size:21px;}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:opacity .2s linear !important;}}

/* ---- auth + moderation + shared composer (added with write-gating) ---- */

/* honeypot: present in the DOM and fillable by bots, invisible to humans */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;}

/* sign-in / sign-out footer */
.river-foot{max-width:var(--measure,46rem);margin:3rem auto 4rem;padding:0 var(--gutter,40px);text-align:center;}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent,#7d4060);cursor:pointer;opacity:.6;text-decoration:underline;}
.linkish:hover{opacity:1;}

/* admin hide control on a node */
.node{position:relative;}
.hide{position:absolute;top:.2rem;right:.2rem;border:0;background:transparent;color:var(--accent,#7d4060);
  font-size:1.1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;padding:.1rem .35rem;border-radius:4px;}
.node:hover .hide{opacity:.55;}
.hide:hover{opacity:1;background:rgba(125,64,96,.1);}

/* shared-river composer at the live edge */
#shared-composer{max-width:var(--measure,46rem);margin:1.2rem auto 4rem;padding:0 var(--gutter,40px);}
#shared-composer textarea{width:100%;resize:none;border:0;border-top:1px solid rgba(125,64,96,.25);
  background:transparent;font:inherit;padding:.8rem 0;color:inherit;}
#shared-composer textarea:focus{outline:none;border-top-color:var(--accent,#7d4060);}

/* login page */
body.login{display:grid;place-items:center;min-height:100vh;margin:0;}
.login-card{text-align:center;padding:2rem;}
.login-card input{font:inherit;padding:.6rem .8rem;border:1px solid rgba(125,64,96,.4);border-radius:6px;}
.login-card button{font:inherit;padding:.6rem 1.1rem;margin-left:.4rem;border:0;border-radius:6px;
  background:var(--accent,#7d4060);color:#fff;cursor:pointer;}
.login-err{color:#a23;}