/* the poster itself. everything here is scoped to .canvas so the editor UI can't leak in.
   sizes are in real pixels: a post is 1080x1350, a story 1080x1920. */
@font-face { font-family:'IBM Plex Mono'; font-weight:400; src:url(fonts/IBMPlexMono-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; src:url(fonts/IBMPlexMono-500.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:700; src:url(fonts/IBMPlexMono-700.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:800; src:url(fonts/JetBrainsMono-800.woff2) format('woff2'); }

.canvas { --ink:#0a0a0a; --paper:#fbfbf8; --dim:#8c8c88;
  width:1080px; height:1350px; position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:28px; line-height:1.45; }
.canvas.story { height:1920px; font-size:31px; }
.canvas * { box-sizing:border-box; margin:0; padding:0; }

/* window chrome */
.canvas .chrome { flex:none; display:flex; align-items:center; height:72px; padding:0 40px;
  border-bottom:3px solid var(--ink); font-size:22px; letter-spacing:.04em; line-height:1; }
.canvas .dots { display:flex; gap:12px; width:84px; }
.canvas .dots i { width:20px; height:20px; border:3px solid var(--ink); border-radius:50%; }
.canvas .dots i:first-child { background:var(--ink); }
.canvas .title { flex:1; text-align:center; margin-right:84px; white-space:nowrap; overflow:hidden; }

/* body: layout-specific top, spacer, then kicker / headline / meta */
.canvas .body { flex:1; min-height:0; display:flex; flex-direction:column; padding:56px 64px; overflow:hidden; }
.canvas.story .body { padding:170px 64px 210px; }   /* clear IG's story header and reply bar */
.canvas .top { flex:none; }
.canvas .spacer { flex:1; min-height:40px; }
.canvas .foot { flex:none; }
.canvas .kicker { color:var(--dim); font-size:26px; margin-bottom:10px; }
.canvas.story .kicker { font-size:28px; }
.canvas .headline { font-family:'JetBrains Mono',monospace; font-weight:800; line-height:1.02;
  letter-spacing:-.035em; white-space:nowrap; }
.canvas .headline > span { display:inline-block; }
.canvas .headline .inv { display:inline-block; line-height:1; padding:0 .1em .1em; margin-left:-.1em; }
.canvas .meta { margin-top:22px; font-size:30px; }
.canvas.story .meta { font-size:34px; }

/* tmux status bar */
.canvas .status { flex:none; height:64px; display:flex; align-items:stretch; background:var(--ink); color:var(--paper);
  font-size:22px; letter-spacing:.03em; line-height:1; white-space:nowrap; }
.canvas .status span { padding:0 24px; display:flex; align-items:center; }
.canvas .status .seg { background:var(--paper); color:var(--ink); font-weight:700; }
.canvas .status .fill { flex:1; }

/* inline marks */
.canvas .inv { background:var(--ink); color:var(--paper); padding:0 .18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.canvas .hl { background:var(--ink); color:var(--paper); }
.canvas .dim { color:var(--dim); }
.canvas b { font-weight:700; }
.canvas .cursor { display:inline-block; width:.6em; height:1.05em; background:var(--ink); vertical-align:-.15em; margin-left:.08em; }
.canvas .headline .cursor { width:.48em; height:.74em; vertical-align:-.02em; margin-left:.12em; }
.canvas .prompt::before { content:'$ '; color:var(--dim); }

/* layout: shield */
.canvas pre.art { font-family:'IBM Plex Mono',monospace; font-weight:500; white-space:pre; line-height:1;
  font-size:13px; width:max-content; margin:40px auto 0; }
.canvas.story pre.art { font-size:16.5px; margin-top:10px; }

/* layout: man page */
.canvas .man-head { display:flex; justify-content:space-between; font-weight:700; margin-bottom:1.2em; }
.canvas .man-h { font-weight:700; margin-top:.9em; }
.canvas .man-p { padding-left:2.2em; }

/* layout: nmap */
.canvas table.cols { border-collapse:collapse; margin:1em 0; }
.canvas table.cols td { padding:0 36px 0 0; vertical-align:top; white-space:nowrap; }
.canvas table.cols tr:first-child td { font-weight:700; }

/* layout: xxd */
.canvas .xxd div { white-space:nowrap; }

/* layout: boot */
.canvas .ok b::before { content:'[  '; font-weight:400; }
.canvas .ok b::after { content:'  ]'; font-weight:400; }
.canvas .login { border:3px solid var(--ink); padding:28px 32px; text-align:center; margin-top:56px; }

/* layout: diff */
.canvas .add { background:var(--ink); color:var(--paper); padding:0 12px; margin:3px 0; }
.canvas .del { color:var(--dim); text-decoration:line-through; padding:0 12px; }