/* =========================================================================
   LIDDELL WAR DIARY — the canonical complete archive
   -------------------------------------------------------------------------
   Loaded only on page-liddell-diary.php.

   Two design rules here are editorial rather than aesthetic, and should not be
   "tidied" by a later hand:

   1. THE GAPS ARE SHOWN AS GAPS. Where pages of the original are missing, the
      run of entries visibly breaks. A reader should be able to see the shape of
      what is absent. Closing the gaps up would make the archive look complete
      in exactly the places where it is not.

   2. THE UNRESOLVED-READING MARKER IS A BRACKETED NUMBER, NEVER A QUESTION
      MARK. Liddell's entry for 19 September 1914 reads "Two ? bodies burned in
      yard" — that question mark is HIS, recording that he could not tell how
      many there were. A question-mark marker of ours would make his testimony
      read as our uncertainty.

   Tokens only. No hardcoded colour.
   ========================================================================= */

.diary { max-width: var(--maxw-read); }

.diary-intro { margin-bottom: var(--space-lg); }

/* ---- Standfirst: what this page is, before a word of the diary ---------- */
.diary-standfirst {
  border-left: 3px solid var(--accent);
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-xl);
  color: var(--text);
}
.diary-standfirst p { margin: 0; font-size: var(--fs-lead); line-height: 1.6; }

/* ---- Page markers — which sheet of the typescript we are reading -------- */
.diary-page-marker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-xl) 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.diary-page-marker__label {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
  font-weight: var(--fw-semibold);
}
.diary-page-marker__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--muted);
}

.diary-year {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  margin: var(--space-xl) 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--accent);
}

/* ---- An entry ----------------------------------------------------------- */
.diary-entry { margin: 0 0 var(--space-lg); scroll-margin-top: 100px; }

.diary-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-sm);
  font-size: 1rem;
}
/* His own heading, as he wrote it — this is the primary label. */
.diary-entry__his {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--primary);
}
.diary-entry__his--none { font-style: italic; font-weight: var(--fw-body); color: var(--muted); }

/* The resolved calendar date, kept quiet and secondary. */
.diary-entry__date {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Per-entry permalink — this is what the campaign captions point at. */
.diary-entry__link {
  color: var(--accent-ink);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.diary-entry:hover .diary-entry__link,
.diary-entry__link:focus { opacity: 1; }

.diary-entry__text { margin: 0; line-height: var(--line-body); }

.diary-entry__fragment-note,
.diary-entry__note {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--line);
}
.diary-entry__fragment-note { margin: 0 0 var(--space-sm); }

/* ---- Unresolved readings ------------------------------------------------ */
.diary-flag { white-space: normal; }
.diary-flag__text {
  border-bottom: 1px dotted var(--accent-ink);
}
.diary-flag__ref {
  font-family: ui-monospace, monospace;
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  color: var(--accent-ink);
  text-decoration: none;
}
.diary-flag__ref:hover, .diary-flag__ref:focus { text-decoration: underline; }

/* ---- A gap in the record ------------------------------------------------ */
/* Deliberately reads as an interruption, not as another entry. */
.diary-gap {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--surface);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  /* the hatching is the visual "something is missing here" */
  background-image: repeating-linear-gradient(
    135deg,
    transparent, transparent 9px,
    var(--line) 9px, var(--line) 10px
  );
  scroll-margin-top: 100px;
}
.diary-gap__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-sm);
  color: var(--primary);
}
.diary-gap p {
  margin: 0;
  max-width: 58ch;
  background: var(--surface);
  padding: var(--space-sm) var(--space-md);
}

/* ---- An editorial note in the run (e.g. the diary turning to summary) ---- */
.diary-note {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}
.diary-note p { margin: 0; }

/* ---- Apparatus at the foot ---------------------------------------------- */
.diary-apparatus {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--accent);
}
.diary-apparatus h2 { font-family: var(--font-heading); font-size: var(--fs-h2); margin: 0 0 var(--space-md); }
.diary-apparatus h2 + p { color: var(--muted); }

.diary-readings { margin: var(--space-lg) 0 0; }
.diary-readings__item {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.diary-readings__item dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  font-weight: var(--fw-semibold);
}
.diary-readings__num { font-family: ui-monospace, monospace; color: var(--accent-ink); }
.diary-readings__date {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.diary-readings__item dd { margin: var(--space-xs) 0 0; color: var(--muted); }

.diary-general-notes { margin: var(--space-md) 0 0; padding-left: var(--space-lg); color: var(--muted); }
.diary-general-notes li { margin-bottom: var(--space-sm); }

/* ---- Narrow screens ----------------------------------------------------- */
@media (max-width: 900px) {
  .diary-entry__link { opacity: 1; }
  .diary-gap { padding: var(--space-md); }
}