/* Open transmission sheet: a typographic index and staggered voices. */
#record{--line:#414141;border:0;box-shadow:none;background:rgb(0 0 0 / 60%);overflow:clip}
.feed-heading{padding:25px 30px 19px;border:0;display:block}
.feed-heading h2{font-family:var(--mono);font-size:18px;font-weight:bold;letter-spacing:.06em;line-height:1.4}
.feed-heading::after{content:"";display:block;width:56px;height:5px;background:var(--accent);margin-top:22px}
.controls{position:relative;top:auto;box-shadow:none;background:transparent}
.groups{padding:4px 30px 26px;display:flex;flex-wrap:wrap;gap:0 13px;align-items:baseline;border:0}
.groups button{
  display:inline;
  max-width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  padding:6px 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(17px,1.7vw,21px);
  line-height:1.17;
  font-weight:400;
  letter-spacing:-.055em;
  text-transform:none;
  text-align:left;
  text-decoration:none;
}
.groups button::after{content:" //" / "";color:#656565;padding-left:12px;font-weight:400}

.groups button:hover{color:var(--accent-text);filter:none}
.groups button[aria-pressed=true],.groups button:first-child[aria-pressed=true]{background:transparent;border:0;color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.character-row{padding:15px 30px 20px;border-top:1px dashed #555;gap:22px;min-height:0;align-items:baseline}
.character-row>.label{font-size:12px;color:var(--accent-text);letter-spacing:.08em}
.characters{gap:6px 17px}
.characters button{font-family:var(--mono);font-size:14px;line-height:1.5;padding:3px 0}
.characters button[aria-pressed=true]{text-decoration:underline;text-decoration-color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:5px}
.character-hint{font-family:var(--mono);font-size:12px;line-height:1.6;color:#b5b5b5}
.feed-toolbar{margin:0 30px;padding:16px 0 28px;border-top:1px solid #555;align-items:baseline;gap:20px}
.feed-toolbar .label{font-size:12px;font-weight:400;letter-spacing:0}
.order{font-size:12px}
.feed-toolbar button{font-family:var(--mono);font-size:12px;text-underline-offset:4px}
/* Entries share a narrow sequence gutter, not a repeated card enclosure. */
.message{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  column-gap:21px;
  margin:0 30px;
  padding:33px 0 48px;
  border:0;
  border-top:1px solid #555;
  position:relative;
}
.message:nth-child(3n+2){padding-top:45px}
.message:nth-child(3n){padding-bottom:65px}
.message-meta,.message-meta-left{display:contents}
.message-meta-left>div{grid-column:2;grid-row:1;min-width:0;padding-bottom:19px}
.avatar{display:none}
.entry-rail{grid-column:1;grid-row:1 / span 5;display:flex;flex-direction:column;gap:13px;align-items:flex-start;padding-top:4px}
.entry-index{font-family:var(--mono);font-size:19px;letter-spacing:-.09em;color:var(--accent-text);line-height:1}
.time{font-family:var(--mono);font-size:11px;color:#b5b5b5;letter-spacing:0;white-space:normal}
.author{font-family:Arial,Helvetica,sans-serif;font-size:clamp(30px,3.7vw,46px);font-weight:700;line-height:1.03;letter-spacing:-.065em;text-align:left;overflow-wrap:anywhere;padding:0}
.author:hover{color:var(--accent-text);text-decoration:none;filter:none}
.group-name{font-family:var(--mono);font-size:12px;color:#b5b5b5;margin-top:10px;line-height:1.45}
.recipient-line{grid-column:2;font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:0;margin:0 0 15px;color:#b5b5b5}
.recipient{text-decoration-color:var(--accent-text);text-underline-offset:4px}
.message-body{grid-column:2;font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.45;letter-spacing:-.035em;max-width:49ch;margin:0}
.message-actions{grid-column:2;margin-top:25px}
.message-actions button{font-family:var(--mono);font-size:12px;color:#b5b5b5;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px}
.message-actions button:hover{color:white}
/* Narrator entries interrupt the rhythm as a separate voice. */
.message.narrator{margin:14px 30px 29px;padding:25px 0 32px;background:transparent;border:0;border-top:3px solid var(--accent);border-bottom:1px solid var(--accent)}
.narrator .message-meta-left>div{padding-bottom:29px}
.narrator .author{font-family:var(--mono);font-size:12px;font-weight:bold;letter-spacing:.08em;color:var(--accent-text)}
.narrator .group-name{margin-top:3px;font-size:12px}
.narrator h3{grid-column:2;font-family:"Morris Roman",Georgia,serif;font-size:clamp(34px,4vw,48px);font-weight:400;line-height:1.04;letter-spacing:0;margin:0 0 21px;max-width:18ch}
.narrator .message-body{font-size:19px;line-height:1.5}
.arrival-wrap{top:20px;z-index:6}
#arrivals{font-family:var(--mono);font-size:13px;background:var(--accent);color:white;border:1px solid white;box-shadow:4px 4px 0 #080808;padding:12px 16px;transform:none}
.history-end{margin:0 30px;padding:25px 0;border-top:1px dashed #555;text-align:left}
#load-more{font-family:var(--mono);font-size:14px;padding:7px 0;border:0;border-bottom:2px solid var(--accent)}
#history-status{font-size:12px}
.feed-footer{border-top:1px solid #555;padding:20px 30px;font-size:12px;background:transparent}
#record button:focus-visible{outline-color:white;outline-offset:4px}
@media(max-width:1100px) and (min-width:761px){
  .message{grid-template-columns:43px minmax(0,1fr);column-gap:14px;margin-left:22px;margin-right:22px}
  .message.narrator{margin-left:22px;margin-right:22px}
  .author{font-size:32px}
  .message-body,.narrator .message-body{font-size:18px}
  .entry-index{font-size:16px}
}
@media(max-width:760px){
  .feed-heading{padding:24px 20px 18px}
  .feed-heading h2{font-size:18px}
  .groups{padding:0 20px 24px;gap:0 10px}
  .groups button{font-size:18px;line-height:1.22;padding:6px 0}
  .groups button::after{padding-left:9px}
  .character-row{padding:14px 20px 18px;gap:15px}
  .feed-toolbar{margin:0 20px;padding:17px 0 25px;flex-wrap:wrap}
  .message{margin:0 20px;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:28px 0 37px}
  .message:nth-child(3n+2){padding-top:36px}
  .message:nth-child(3n){padding-bottom:48px}
  .author{font-size:clamp(28px,6vw,39px)}
  .entry-index{font-size:15px}
  .time{font-size:11px}
  .group-name{font-size:12px}
  .message-body,.narrator .message-body{font-size:18px;line-height:1.5}
  .message.narrator{margin:8px 20px 23px;padding:23px 0 30px}
  .narrator h3{font-size:36px}
  .history-end{margin:0 20px}
  .feed-footer{padding:20px;font-size:12px}
}

/* Character names use the same Morris Roman face as scene titles. */
.message:not(.narrator) .author{font-family:"Morris Roman",Georgia,serif;font-size:clamp(30px,3.5vw,42px);font-weight:400;line-height:1.1;letter-spacing:0}

.narrator .author{font-family:"Morris Roman",Georgia,serif;font-size:clamp(30px,3.5vw,42px);font-weight:400;line-height:1.1;letter-spacing:0;color:var(--accent-text)}

/* Scroll compensation is handled explicitly when messages arrive. */
#messages{overflow-anchor:none}

/* Live content follows the original message text column and typography. */
.content-section{grid-column:2;min-width:0;border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.content-section h3{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.6;letter-spacing:0;text-transform:uppercase;color:#b5b5b5;margin:0 0 15px}
.content-section p{font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.45;letter-spacing:-.035em;max-width:49ch;margin:0;white-space:pre-wrap}
.message-body:empty{display:none}
#load-archive{font-family:var(--mono);font-size:14px;padding:7px 0;background:transparent;border-bottom:2px solid var(--accent);margin-top:12px}
@media(max-width:1100px) and (min-width:761px){.content-section p{font-size:18px}}
@media(max-width:760px){.content-section p{font-size:18px;line-height:1.5}}

