/*
 * Notebook — chronological full-text log.
 *
 * Loaded only by notebook.html.twig and notebook-item.html.twig, after
 * custom.css, so it can lean on the theme tokens without !important.
 */

/* Space Mono — the sibling face to Space Grotesk, used for entry metadata
 * (dates, tags) and nothing else. Single 400 weight on purpose: the logbook
 * emphasis comes from uppercase and tracking, not bold, so there is nothing
 * here for the browser to synthesize badly. */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono/space-mono-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono/space-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.notebook-listing {
  --notebook-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  --notebook-rule: var(--q2-divider);
}

/* ---------- The log ---------- */

/* Entries carry their own top rule so the run reads as one continuous ledger;
 * the log closes itself off at the bottom. */
.notebook-log {
  border-bottom: 1px solid var(--notebook-rule);
}

.notebook-entry {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-top: 1px solid var(--notebook-rule);
}

/* ---------- Entry metadata ---------- */

.notebook-entry-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin-bottom: 0.85rem;
  font-family: var(--notebook-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--q2-text-muted);
}

.notebook-entry-date {
  color: var(--q2-text-strong);
}

.notebook-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.notebook-tag {
  color: var(--q2-text-muted);
  text-decoration: none;
}

.notebook-tag:hover,
.notebook-tag:focus-visible {
  color: var(--q2-text-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Entry title and body ---------- */

.notebook-entry-title {
  margin: 0 0 1rem;
  font-family: var(--pico-font-family-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
}

.notebook-entry-title a {
  color: inherit;
  text-decoration: none;
}

.notebook-entry-title a:hover,
.notebook-entry-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notebook-entry-subtitle {
  margin: -0.5rem 0 1rem;
  color: var(--q2-text-muted);
}

/* The log runs full width (no sidebar by default), so hold the prose to a
 * readable measure rather than letting it span the whole container. */
.notebook-entry-body {
  max-width: 72ch;
}

.notebook-entry-body > :first-child {
  margin-top: 0;
}

.notebook-entry-body > :last-child {
  margin-bottom: 0;
}

.notebook-entry-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--q2-radius);
}

/* ---------- Single entry (permalink page) ---------- */

/* No ledger to sit in, so drop the rule and let the title carry the page. */
.notebook-entry-single {
  padding-top: 0;
  border-top: 0;
}

.notebook-entry-single .notebook-entry-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

/* ---------- Listing header ---------- */

.notebook-page-header {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.notebook-page-header h1 {
  margin-bottom: 0.5rem;
}

.notebook-page-header .lead {
  color: var(--q2-text-muted);
}

/* ---------- Author toolbar ---------- */

/* Only rendered for admin-capable users, so it can sit right on the log
 * without a visitor ever seeing it. Right-aligned so it reads as a control
 * rather than as part of the content. */
.notebook-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.notebook-new-entry {
  font-family: var(--notebook-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ---------- Paper background ---------- */

/* Both notebook templates render `#body-wrapper.notebook-listing`, so this one
 * rule covers the log and every entry page.
 *
 * The sheet is fixed rather than tiled: the source has a red margin rule down
 * its left edge and aged corners, so repeating it would put a hard seam every
 * tile. `cover` + `fixed` keeps it behaving like one sheet of paper that the
 * content scrolls over.
 *
 * Served from a 165 KB WebP derivative of the upload -- the original PNG is
 * 8.4 MB, far too heavy to sit behind every notebook page load. */
#body-wrapper.notebook-listing {
  background-color: #efe7d4; /* paper cream, shown while the image loads */
  background-image: url('../images/graphpaper.webp');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;

  /* Ink on paper. The site defaults to dark mode, whose near-white body text
   * would be unreadable on cream, so the notebook re-points the text tokens
   * locally. Custom properties resolve at point of use, so every theme and
   * Pico rule underneath -- including `--pico-primary`, which is defined as
   * `var(--q2-text)` -- picks these up and the whole section flips to dark
   * ink in both light and dark mode. */
  --q2-text: #26251d;
  --q2-text-strong: #12110c;
  --q2-text-muted: #5f5c4c;
  --q2-divider: rgba(18, 17, 12, 0.25);
  --notebook-rule: rgba(18, 17, 12, 0.28);
  color: var(--q2-text);
}

/* ---------- Main notebook page ---------- */

/* The log swaps the tiled sheet for the open-notebook spread. Only
 * notebook.html.twig carries `.notebook-main`, so entry pages keep the graph
 * paper. Everything else -- cover, fixed, no-repeat, the ink tokens -- comes
 * from the .notebook-listing rule above; this only overrides the image.
 *
 * Referenced straight out of user/media rather than copied into the theme:
 * at 55 KB it needs no derivative the way graphpaper.png did, and this way
 * re-uploading the file replaces the background with no code change. */
#body-wrapper.notebook-main {
  background-image: url('/user/media/notebookmain.jpg');
  background-position: center;

  /* `fixed` sizes the background against the viewport, so `cover` already
   * fills the screen -- but the painted area is still only this section. The
   * min-height keeps the spread covering the full screen when the log holds
   * just a couple of entries. */
  min-height: calc(100vh - var(--q2-header-height));
  min-height: calc(100dvh - var(--q2-header-height));
}

/* ---------- Handwritten entry titles ---------- */

/* Architects Daughter -- the architectural drafting hand. Chosen to match the
 * lettering already printed in notebookmain.jpg, so titles read as part of the
 * page rather than as type sitting on top of it. */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/architects-daughter/architects-daughter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/architects-daughter/architects-daughter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.notebook-entry-title {
  font-family: 'Architects Daughter', var(--pico-font-family-display), cursive;

  /* The face ships a single 400. Naming it stops the browser synthesizing a
   * bold, which on a hand font smears the strokes into mush. */
  font-weight: 400;

  /* Small cap height for its em, so at the old size it read a step smaller
   * than the Space Grotesk it replaced. Bumped to sit level again. */
  font-size: clamp(1.75rem, 3.4vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: 0.01em;

  /* Graphite, not ink -- pencil on paper, matching the sketches behind it. */
  color: #4a4a45;
}

.notebook-entry-single .notebook-entry-title {
  font-size: clamp(2.25rem, 5.5vw, 3.1rem);
}

/* ---------- Entry pages ---------- */

/* Entries tile the ruled sheet rather than showing the log's single spread.
 * Only notebook-item.html.twig carries `.notebook-entry-page`, so this and
 * .notebook-main stay independent; everything else (fixed attachment, the ink
 * tokens) still comes from the .notebook-listing rule above.
 *
 * NOTE: notebooktile.jpg is not a seamless tile -- it carries a pink margin
 * rule near its left edge, a blank strip along the top, and a grid cut mid-cell
 * at the right, so the repeat is visible. Swapping in a seamless crop of the
 * interior is a one-line change to the url below. */
#body-wrapper.notebook-entry-page {
  background-image: url('/user/media/notebooktile.jpg');
  background-repeat: repeat;
  background-size: auto; /* natural size -- `cover` would defeat the tiling */
  background-position: left top;

  /* Keeps the sheet filling the screen on a short entry. */
  min-height: calc(100vh - var(--q2-header-height));
  min-height: calc(100dvh - var(--q2-header-height));
}