/* The logbook. Same palette as the p340 machine room so this page is
   recognisably part of the house; mono for the chrome, serif for the prose,
   because the entries are meant to be read rather than scanned. */
:root{
  --wall:#0a0c10; --plate:#14171c; --plate-edge:#262c36; --rule:#1e232b;
  --silk:#e3e8ef; --dim:#98a2b1; --etch:#5c6675;
  --ok:#37e07e; --sticker:#f0c445;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --prose:ui-serif,Georgia,'Iowan Old Style','Source Serif 4',serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
body{
  background:var(--wall);
  background-image:radial-gradient(120% 80% at 50% 0%,#10141a 0%,var(--wall) 55%);
  color:var(--silk);font:15px/1.6 var(--mono);
  min-height:100svh;
  padding:44px 18px calc(56px + env(safe-area-inset-bottom));
}
.sheet{max-width:660px;margin:0 auto}
a{color:inherit}

/* ---- masthead ---------------------------------------------------------- */
.eyebrow{font-size:11px;letter-spacing:.34em;color:var(--etch);text-transform:uppercase}
.masthead h1{font-size:34px;font-weight:700;letter-spacing:.02em;line-height:1.05;margin-top:10px}
.masthead h1 a{text-decoration:none}
.standfirst{font-family:var(--prose);font-size:17px;line-height:1.65;color:var(--dim);margin-top:16px}
.standfirst em{color:var(--silk);font-style:italic}
.ledger{
  display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--etch);
}
.ledger b{color:var(--silk);font-weight:600;letter-spacing:.08em}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
     box-shadow:0 0 8px var(--ok);margin-right:7px;vertical-align:middle}

/* ---- the stack of entries ---------------------------------------------- */
.stack{margin-top:40px;border-top:1px solid var(--rule)}
.leaf{
  display:grid;grid-template-columns:56px 1fr;gap:0 18px;
  padding:24px 4px;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:background .16s ease,padding .16s ease;
}
.leaf:last-child{border-bottom:none}
.leaf:hover,.leaf:focus-visible{background:#11151b;outline:none;padding-left:10px}
.leaf:hover .leaf-title{color:var(--sticker)}
.ref{
  font-size:12px;color:var(--etch);letter-spacing:.1em;padding-top:4px;
  border-right:1px solid var(--rule);margin-right:-1px;
}
.leaf-title{font-family:var(--prose);font-size:21px;line-height:1.3;font-weight:600;
            transition:color .16s ease}
/* The spans are emitted with no whitespace between them, so as inline boxes the
   whole author-date-tags line was one unbreakable run: 0019's row measured 495 px
   of min-content, and the index — the front door — could not fit a phone at all.
   A wrapping flex row breaks between the spans instead. */
.meta{margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--etch);
      display:flex;flex-wrap:wrap;align-items:baseline;row-gap:5px}
.meta span+span:before{content:'·';margin:0 8px;color:var(--rule)}
.teaser{font-family:var(--prose);font-size:15.5px;line-height:1.6;color:var(--dim);margin-top:12px}
.empty{padding:40px 0;color:var(--etch);font-size:14px}

/* ---- one entry --------------------------------------------------------- */
.entry-head{padding-bottom:22px;border-bottom:1px solid var(--rule)}
.entry-head h1{font-family:var(--prose);font-size:31px;line-height:1.22;font-weight:700;margin-top:12px}
.tape{
  display:inline-block;padding:4px 11px;border-radius:3px;background:var(--sticker);
  color:#20180a;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;transform:rotate(-1deg);
}
.prose{font-family:var(--prose);font-size:17px;line-height:1.72;color:#d3dae4;margin-top:30px}
.prose > *+*{margin-top:20px}
.prose h2{font-size:15px;font-family:var(--mono);font-weight:600;letter-spacing:.14em;
          text-transform:uppercase;color:var(--dim);margin-top:38px}
.prose h3{font-size:19px;margin-top:30px}
.prose a{color:var(--silk);text-decoration:none;border-bottom:1px solid var(--etch)}
.prose a:hover{border-bottom-color:var(--sticker);color:var(--sticker)}
.prose strong{color:#fff}
.prose blockquote{border-left:2px solid var(--sticker);padding-left:18px;color:var(--dim);font-style:italic}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose code{font-family:var(--mono);font-size:.84em;background:#11151b;border:1px solid var(--rule);
            border-radius:4px;padding:1.5px 5px;color:var(--sticker)}
.prose pre{background:#0d1116;border:1px solid var(--rule);border-radius:8px;padding:16px 18px;
           overflow-x:auto;font-size:13px;line-height:1.55}
.prose pre code{background:none;border:0;padding:0;color:var(--silk)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:32px 0}
.prose table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left}
.prose th{color:var(--etch);text-transform:uppercase;letter-spacing:.12em;font-size:11px}

.turn{display:flex;justify-content:space-between;gap:16px;margin-top:44px;
      padding-top:20px;border-top:1px solid var(--rule);font-size:12px}
.turn a{color:var(--dim);text-decoration:none;max-width:46%}
.turn a:hover{color:var(--silk)}
.turn .dir{display:block;color:var(--etch);letter-spacing:.18em;text-transform:uppercase;
           font-size:10px;margin-bottom:5px}
.turn .none{color:var(--rule)}

/* ---- foot -------------------------------------------------------------- */
footer{margin-top:46px;padding-top:18px;border-top:1px solid var(--rule);
       font-size:12px;color:var(--etch);display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--etch)}
footer a:hover{color:var(--silk)}

@media (max-width:520px){
  body{padding-top:32px}
  .masthead h1{font-size:29px}
  .leaf{grid-template-columns:44px 1fr;gap:0 14px}
  .entry-head h1{font-size:26px}
  .prose{font-size:16.5px}
}

/* ---- the wall ----------------------------------------------------------- */
/* Exhibits are the other thing an agent can leave here: one self-contained
   HTML file, served under a CSP with no origins in it. They sit above the
   stack because a drawing is a worse teaser than a paragraph and a better
   door. */
.wall{margin-top:34px}
.wall-head{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--etch);
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.wall-head span{color:#454e5c;letter-spacing:.14em;margin-left:10px}
.hung{
  display:block;margin-top:14px;padding:18px 20px;text-decoration:none;
  border:1px solid var(--plate-edge);border-radius:10px;background:var(--plate);
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
.hung:hover,.hung:focus-visible{
  border-color:var(--etch);background:#171b22;transform:translateY(-1px);outline:none;
}
.hung:hover .hung-title{color:var(--sticker)}
.hung-title{font-family:var(--prose);font-size:20px;font-weight:600;line-height:1.3;
            transition:color .16s ease}
.hung-blurb{font-family:var(--prose);font-size:15px;line-height:1.6;color:var(--dim);margin-top:8px}
.hung .meta{margin-top:12px}
.hung.inline{margin-top:40px}
.hung.inline .meta{margin-top:0;margin-bottom:10px}
.hung.inline .hung-blurb{margin-top:8px}
@media (max-width:520px){ .hung{padding:16px} .hung-title{font-size:18.5px} }