/* archive — hand-written. no build step.
   the entries run top to bottom in normal flow — no boxes, no placement.
   the log is a fixed nav on the right, slid in and out.
   two colours only — #fafafa and #0a0a0a. no horizontal rules.
   Helvetica at one size (28px), tight — except the dates: 14px serif italic. */

:root {
  --ink:    #0a0a0a;
  --ground: #fafafa;
  --serif:  Georgia, "Times New Roman", serif;   /* dates only */
  --log-pad: 1rem;   /* left inset of the log's content — on each block, not the box */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;                     /* one scroll: the page itself */
  background: var(--ground);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.014em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration: none; }

/* ── layout — one open page, the log slides over it ──────────────── */
#stage { position: relative; }

/* the log — a fixed nav panel on the right, not a column */
#log {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 50vw;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1rem 1rem 0;  /* no left pad — each block carries --log-pad instead */
  border-left: 1px solid var(--ink);
  background: var(--ground);
}
#log::-webkit-scrollbar { width: 7px; }
#log::-webkit-scrollbar-thumb { background: var(--ink); }

#stage.log-closed #log { transform: translateX(100%); }

/* the toggle words — plain underlined text, like the links */
.log-toggle, .log-reopen {
  font: inherit; padding: 0; border: 0;
  background: none; color: var(--ink); cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
.log-toggle:hover, .log-reopen:hover { text-decoration: none; }
/* both pinned to the top-right corner, out of flow — they never push or clash with the log's content */
.log-toggle { position: fixed; top: 1.6rem; right: 1rem; z-index: 50; }
.log-reopen { position: fixed; top: 1.6rem; right: 1rem; z-index: 50; }

/* ── the entries — normal flow, top to bottom ────────────────────── */
#canvas {
  min-height: 100vh;
  padding: 2rem;
  padding-right: calc(50vw + 2rem);        /* clear the fixed log */
}
#stage.log-closed #canvas { padding-right: 2rem; }

.placeholder { color: var(--ink); }

.piece { max-width: 40rem; margin: 0 0 1.6rem; }

.piece > * { margin: 0; }
.piece > * + * { margin-top: 0.3rem; }         /* tight gap between the parts */
.piece-caption + * { margin-top: 0.6rem; }     /* small break: title → the text/content */

.piece-date {
  font: 14px/1.3 var(--serif);
  letter-spacing: 0;
}

.piece-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.piece-body.editing { cursor: text; outline: 1px solid var(--ink); outline-offset: 0.35rem; }

.piece img, .piece video { display: block; max-width: 25vw; height: auto; }

.piece-url {
  display: inline-block;
  font: italic 14px/1.3 var(--serif);
  word-break: break-all;
}

.piece-caption { font-style: italic; }

/* ── the log — masthead + composer ───────────────────────────────── */
#log > header { display: contents; }   /* only holds the pinned toggle — no box, no reserved space */
h1 { margin: 0 0 0.6rem; font-size: 1em; font-weight: 700; letter-spacing: -0.02em; }
.standfirst { margin: 0; }

/* composer — nothing boxed; the only rule is the words themselves */
#compose { margin: 0 0 1.6rem var(--log-pad); }
#compose > * + * { margin-top: 0.3rem; }        /* tight, like the entries */
#compose > .standfirst { margin-bottom: 0.9rem; }  /* the intro line stands off the fields */
#compose-caption + * { margin-top: 0.6rem; }    /* small break: title → the rest */
#compose textarea {
  width: 100%; border: 0; padding: 0; resize: none; overflow: hidden;
  background: none; color: var(--ink); font: inherit; line-height: 1.32;
}
#compose textarea:focus { outline: none; }
#compose-caption, #compose-link {
  width: 100%; border: 0; background: none;
  color: var(--ink); font: inherit;
}
#compose-caption:focus, #compose-link:focus { outline: none; }
#compose-caption { font-style: italic; }      /* the title, like it renders */

/* the actions sit together on the last line, to the right */
.compose-row { display: flex; gap: 0.9rem; justify-content: flex-end; align-items: baseline; }
#compose > .compose-row { margin-top: 0.7rem; }
.file-btn, #compose button {
  font: inherit; padding: 0; border: 0;
  background: none; color: var(--ink); cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}
.file-btn:hover, #compose button:hover { text-decoration: none; }
#compose button:disabled { opacity: 0.4; cursor: default; }
.file-btn { display: inline-flex; }
.compose-file-name { margin: 0; }

/* footer — sits in the bottom margin of the panel, pushed down by the flex column */
footer { margin: auto 0 0 var(--log-pad); padding-top: 3rem; }
footer p { margin: 0 0 0.35em; }

/* demo banner */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; margin: 0;
  padding: 0.35rem 1rem; text-align: center;
  font-size: 0.7rem;
  background: var(--ink); color: var(--ground); z-index: 200;
}
.demo-banner code { color: var(--ground); }

/* ── mobile — one column, log first ──────────────────────────────── */
@media (max-width: 900px) {
  body { font-size: 24px; }
  #stage { display: flex; flex-direction: column-reverse; max-width: 100vw; }
  #log {
    position: static; width: 100%; min-width: 0; height: auto;
    overflow: hidden visible;
    border-left: 0; padding: 2rem 1.35rem 3rem;
    transform: none !important;
    display: block;             /* no bottom-pinned footer on a phone */
    --log-pad: 0;               /* the box pads itself again on mobile */
  }
  #canvas {
    min-height: 0; min-width: 0;
    padding: 2.5rem 1.35rem 4rem;
  }
  .standfirst { overflow-wrap: anywhere; }
  .piece { max-width: none; margin: 0 0 2rem; padding: 0; }
  .piece img, .piece video { max-width: 100%; }   /* 25vw is too small on a phone */
  /* no collapsing on phones — the composer is the only way to post */
  .log-toggle, .log-reopen { display: none; }
}