/* The build book.
 *
 * A keepsake, not an export. The document this styles is meant to be printed
 * to PDF, sent to a binder, and put on a shelf next to the boat.
 *
 * Everything here is native CSS Paged Media. No pagination library: Chrome
 * shipped @page margin boxes in 131 and has had named pages since 85, which
 * covers page numbers and running heads between them. The one thing missing
 * is string-set, and it is not needed -- Blade knows every chapter title at
 * render time, so it emits one @page rule per chapter instead of asking the
 * browser to capture the heading. See the head of book.blade.php.
 *
 * Margin boxes are Chrome and Edge only. Elsewhere the book prints exactly
 * the same minus the page numbers and running heads, which is a degradation
 * nobody would call broken.
 *
 * Colours are hardcoded rather than taken from the site's custom properties,
 * for the same reason public/css/print.css did it: those properties get
 * redefined under prefers-color-scheme, and a dark palette leaking onto paper
 * prints a black page. The values below ARE the site's light palette.
 */

:root {
  --bk-ink:        #14171a;
  --bk-soft:       #3d4247;
  --bk-muted:      #6e6b66;
  --bk-rule:       #cec9bf;
  --bk-rule-faint: #e5e1d9;
  --bk-chalk:      #a6402f;
  --bk-blueprint:  #3e5c76;

  --bk-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --bk-sans: "Helvetica Neue", "Arial Nova", Inter, system-ui, sans-serif;
  --bk-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* -- page geometry --------------------------------------------------------
 *
 * Asymmetric, and mirrored across the spine. A4 is far too wide for a single
 * column of readable text, and the classical fix -- a narrow inner margin
 * against the gutter, a generous outer one -- solves three problems at once
 * here: it brings the measure back to about 70 characters, it gives each
 * entry's date and hours somewhere to live that is not a header row, and it
 * keeps photographs inside a 115mm column where the site's 1600px files still
 * print at around 355dpi. Set the same photo across the full page and it
 * drops to 193.
 */

@page {
  size: A4;
  margin: 20mm 48mm 22mm 22mm;

  @bottom-center {
    content: counter(page);
    font-family: Georgia, serif;
    font-size: 9pt;
    color: #6e6b66;
    padding-top: 6mm;
  }
}

/* Mirrored, so the wide margin is always on the outside edge and the gutter
   never eats the text of a bound copy. Chrome counts page 1 as a right-hand
   page, which is the convention a book already follows. */
@page :left  { margin: 20mm 22mm 22mm 48mm; }
@page :right { margin: 20mm 48mm 22mm 22mm; }

/* Front matter carries no furniture. A page number on a cover is a mistake
   you only make once. */
@page plate {
  margin: 0;
  @bottom-center { content: ""; }
  @top-left { content: ""; }
  @top-right { content: ""; }
}

@page frontmatter {
  margin: 26mm 30mm;
  @bottom-center { content: ""; }
}

/* -- the document --------------------------------------------------------- */

html {
  /* Every length below is in points or millimetres, so the root size only has
     to be predictable. */
  font-size: 16px;
}

body.book {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--bk-ink);
  font-family: var(--bk-serif);
  font-size: 10.5pt;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.bk-page { page-break-after: always; break-after: page; }
.bk-plate { page: plate; }
.bk-front { page: frontmatter; }

/* On screen the document is one long scroll; these give it the shape of pages
   so the builder can see what they are about to print. */
@media screen {
  body.book { background: #e8e5df; padding: 2rem 1rem 4rem; }

  .bk-sheet {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto 1.5rem;
    padding: 20mm 48mm 22mm 22mm;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  }

  .bk-sheet.bk-plate { padding: 0; }
  .bk-sheet.bk-front { padding: 26mm 30mm; }

  /* Entries are not inside a .bk-sheet, because in the book they flow across
     page boundaries rather than each occupying one -- in print the @page
     margins inset them and there is nothing to do. On screen there is no page
     box, so without this they would run the full width of the window and the
     preview would misrepresent what is about to print. Same width and same
     margins, no min-height, so consecutive entries read as one continuous
     column of paper. */
  .bk-entry {
    width: 210mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 48mm 0 22mm;
    background: #fff;
  }
  .bk-entry:last-of-type { padding-bottom: 22mm; }
}

@media print {
  .bk-sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .no-print { display: none !important; }
}

/* -- typography ----------------------------------------------------------- */

.bk-label {
  font-family: var(--bk-sans);
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-muted);
  margin: 0;
}

.bk-num {
  font-family: var(--bk-mono);
  font-variant-numeric: tabular-nums;
}

.bk-book h1, .bk-book h2, .bk-book h3 { font-family: var(--bk-sans); }

.bk-prose p { margin: 0 0 0.75em; orphans: 2; widows: 2; }
.bk-prose p:first-of-type { margin-top: 0; }
.bk-prose ul, .bk-prose ol { margin: 0 0 0.75em 1.1em; padding: 0; }
.bk-prose li { margin-bottom: 0.2em; }
.bk-prose a { color: var(--bk-ink); text-decoration: none; }
.bk-prose code {
  font-family: var(--bk-mono);
  font-size: 0.92em;
  background: #f2f0eb;
  padding: 0 2px;
}
.bk-prose blockquote {
  margin: 0 0 0.75em;
  padding-left: 0.9em;
  border-left: 2px solid var(--bk-rule);
  color: var(--bk-soft);
}

/* -- cover ---------------------------------------------------------------- */

.bk-cover { position: relative; height: 297mm; overflow: hidden; color: #fff; }
.bk-cover-photo { position: absolute; inset: 0; }
.bk-cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A wash rather than a flat scrim: the type has to hold at the foot without
   flattening the photograph it sits on. */
.bk-cover-wash {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(12, 14, 16, 0.42) 0%,
    rgba(12, 14, 16, 0.06) 32%,
    rgba(12, 14, 16, 0.30) 62%,
    rgba(12, 14, 16, 0.86) 100%);
}

.bk-cover-inner {
  position: absolute; inset: auto 0 0 0;
  padding: 0 22mm 26mm;
}

.bk-cover .bk-label { color: rgba(255, 255, 255, 0.82); }

.bk-cover h1 {
  font-size: 34pt;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 3mm 0 0;
  text-wrap: balance;
}

.bk-cover-boat {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: 13pt;
  margin: 3mm 0 0;
  color: rgba(255, 255, 255, 0.9);
}

.bk-cover-by {
  font-family: var(--bk-sans);
  font-size: 9.5pt;
  letter-spacing: 0.06em;
  margin: 8mm 0 0;
  color: rgba(255, 255, 255, 0.88);
}

/* No cover photo: the type carries the page on its own rather than sitting on
   a grey rectangle apologising for the missing picture. */
.bk-cover.bk-cover-plain { background: #14171a; }

/* -- title and front matter ----------------------------------------------- */

.bk-title-page { padding-top: 42mm; text-align: center; }
.bk-title-page h1 { font-size: 26pt; line-height: 1.1; margin: 4mm 0 0; letter-spacing: -0.02em; }
.bk-title-boat { font-family: var(--bk-serif); font-style: italic; font-size: 13pt; color: var(--bk-soft); margin: 4mm 0 0; }
.bk-title-by { font-family: var(--bk-sans); font-size: 10pt; letter-spacing: 0.06em; margin: 14mm 0 0; }
.bk-title-dates { font-family: var(--bk-mono); font-size: 9.5pt; color: var(--bk-muted); margin: 3mm 0 0; }
.bk-title-rule { width: 26mm; height: 2px; background: var(--bk-chalk); border: 0; margin: 10mm auto; }

/* -- the specification: a drawing-sheet title block ------------------------ */

.bk-spec { border-top: 2px solid var(--bk-ink); padding-top: 4mm; }
.bk-spec h2 { font-size: 15pt; margin: 0 0 6mm; letter-spacing: -0.01em; }

.bk-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--bk-rule); }
.bk-spec-grid > div {
  border-bottom: 1px solid var(--bk-rule-faint);
  border-right: 1px solid var(--bk-rule-faint);
  padding: 3mm 4mm 3mm 0;
}
.bk-spec-grid > div:nth-child(2n) { padding-left: 4mm; border-right: 0; }
.bk-spec-grid dt { font-family: var(--bk-sans); font-size: 7.5pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-muted); margin: 0 0 1mm; }
.bk-spec-grid dd { margin: 0; font-size: 11pt; }
.bk-spec-note { font-size: 9.5pt; color: var(--bk-soft); margin-top: 8mm; }

/* -- the numbers ---------------------------------------------------------- */

.bk-numbers { border-top: 2px solid var(--bk-ink); padding-top: 4mm; }
.bk-numbers h2 { font-size: 15pt; margin: 0 0 8mm; }

.bk-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm 6mm; }
.bk-figure { border-top: 1px solid var(--bk-rule); padding-top: 2.5mm; }
.bk-figure-value {
  font-family: var(--bk-mono);
  font-variant-numeric: tabular-nums;
  font-size: 21pt;
  line-height: 1;
  color: var(--bk-ink);
}
.bk-figure-unit { font-size: 11pt; color: var(--bk-muted); }
.bk-figure-label {
  font-family: var(--bk-sans);
  font-size: 7.5pt; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bk-muted);
  margin-top: 1.5mm;
}

/* The one thing on this page that says something the builder did not already
   know, so it gets the accent and the width. */
.bk-comparison {
  margin-top: 12mm;
  border-top: 2px solid var(--bk-chalk);
  padding-top: 4mm;
}
.bk-comparison h3 { font-size: 11pt; margin: 0 0 3mm; }
.bk-comparison p { font-size: 10.5pt; color: var(--bk-soft); margin: 0; }
.bk-comparison .bk-num { color: var(--bk-chalk); font-size: 12pt; }

.bk-costs-mini { margin-top: 10mm; border-top: 1px solid var(--bk-rule); padding-top: 3mm; }

/* -- contents ------------------------------------------------------------- */

.bk-contents { border-top: 2px solid var(--bk-ink); padding-top: 4mm; }
.bk-contents h2 { font-size: 15pt; margin: 0 0 8mm; }
.bk-toc { list-style: none; margin: 0; padding: 0; }
.bk-toc li {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: 2.5mm 0;
  border-bottom: 1px solid var(--bk-rule-faint);
}
.bk-toc-n { font-family: var(--bk-mono); font-size: 9pt; color: var(--bk-chalk); width: 8mm; flex: none; }
.bk-toc-label { font-family: var(--bk-sans); font-size: 10.5pt; font-weight: 600; }
.bk-toc-meta { margin-left: auto; font-family: var(--bk-mono); font-size: 8.5pt; color: var(--bk-muted); white-space: nowrap; }

/* -- chapter openers ------------------------------------------------------ */

.bk-chapter { break-before: page; page-break-before: always; }

.bk-chapter-head { padding-top: 22mm; }
.bk-chapter-n {
  font-family: var(--bk-mono);
  font-size: 9pt;
  letter-spacing: 0.16em;
  color: var(--bk-chalk);
}
.bk-chapter-head h2 {
  font-size: 22pt;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 3mm 0 0;
  text-wrap: balance;
}
.bk-chapter-epigraph {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: 11.5pt;
  color: var(--bk-soft);
  margin: 5mm 0 0;
  max-width: 90%;
}
.bk-chapter-facts {
  display: flex;
  gap: 8mm;
  margin: 8mm 0 0;
  padding-top: 3mm;
  border-top: 1px solid var(--bk-rule);
  font-family: var(--bk-mono);
  font-size: 8.5pt;
  color: var(--bk-muted);
}
.bk-chapter-photo { margin-top: 10mm; }
.bk-chapter-photo img { width: 100%; height: auto; display: block; }

/* -- entries -------------------------------------------------------------- */

.bk-entry { margin-top: 9mm; }
.bk-entry:first-of-type { margin-top: 0; }

/* Entries flow rather than each starting a page. One entry per sheet suits a
   reference document and ruins a book: a log of short days becomes a stack of
   quarter-full pages and the story stops dead at every break. What has to be
   protected is the join -- a heading must never be left stranded at the foot
   of a page with its text overleaf. */
.bk-entry-head { break-after: avoid; page-break-after: avoid; break-inside: avoid; }
.bk-entry h3 { break-after: avoid; page-break-after: avoid; }
.bk-entry-rule { border: 0; border-top: 1px solid var(--bk-rule-faint); margin: 0 0 3mm; }

.bk-entry h3 { font-size: 13pt; line-height: 1.25; margin: 0 0 2.5mm; letter-spacing: -0.01em; }

/* The marginalia. Pulled out into the wide outer margin, where a date and an
   hours count read as a note in the margin of a workshop notebook rather than
   as a table header interrupting the prose. */
.bk-entry-meta {
  float: right;
  clear: right;
  width: 38mm;
  margin-right: -44mm;
  margin-bottom: 4mm;
  text-align: left;
  font-family: var(--bk-mono);
  font-size: 8pt;
  line-height: 1.5;
  color: var(--bk-muted);
  break-inside: avoid;
}
.bk-entry-date { color: var(--bk-ink); display: block; }
.bk-entry-phase { color: var(--bk-blueprint); display: block; margin-top: 1mm; }
.bk-entry-hours { display: block; margin-top: 1mm; }

/* On a left-hand page the wide margin is on the left, so the note moves with
   it. Without this the marginalia would sit in the gutter of every verso. */
@media print {
  .bk-verso .bk-entry-meta { float: left; clear: left; margin-left: -44mm; margin-right: 0; }
}

/* -- photographs ---------------------------------------------------------- */

/* Natural aspect ratios. The old print stylesheet locked every photo to 4/3
   with object-fit: contain over a grey field, which letterboxed every single
   portrait shot inside a visible grey box -- the ugliest thing about the old
   output, and on a boat build a great many photos are portrait. */
.bk-photos { margin: 4mm 0 0; display: grid; gap: 3mm; }
.bk-photos.single { grid-template-columns: 1fr; }
.bk-photos.pair { grid-template-columns: 1fr 1fr; }
.bk-photos.grid-3 { grid-template-columns: repeat(3, 1fr); }
.bk-photos.grid-4 { grid-template-columns: repeat(4, 1fr); }

.bk-photos figure { margin: 0; break-inside: avoid; page-break-inside: avoid; }

/* width:auto with two maximums, not width:100% with a height cap.
   The cap is needed -- a portrait photo given the full column runs past the
   foot of the page on its own -- but applying it to a full-width box makes
   the box a different shape from the photograph, and object-fit then pads the
   difference. That is the letterboxing this was meant to end, arrived at from
   the other direction. Letting the width shrink instead keeps every photo its
   own shape, which is the whole point. */
.bk-photos img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 150mm;
  margin: 0 auto;
}
.bk-photos.single img { max-height: 165mm; }
.bk-photos figcaption {
  font-family: var(--bk-serif);
  font-style: italic;
  font-size: 8.5pt;
  color: var(--bk-muted);
  margin-top: 1.5mm;
  line-height: 1.35;
}

.bk-embed { font-family: var(--bk-mono); font-size: 8.5pt; color: var(--bk-muted); margin-top: 3mm; }

/* -- comments ------------------------------------------------------------- */

.bk-comments { margin-top: 4mm; padding-left: 4mm; border-left: 2px solid var(--bk-rule-faint); break-inside: avoid; }
.bk-comment { margin-bottom: 3mm; font-size: 9.5pt; color: var(--bk-soft); }
.bk-comment-who { font-family: var(--bk-sans); font-size: 8pt; font-weight: 700; letter-spacing: 0.06em; color: var(--bk-muted); }

/* -- spending ------------------------------------------------------------- */

.bk-spend h2 { font-size: 15pt; margin: 0 0 6mm; }
.bk-order { margin-bottom: 6mm; break-inside: avoid; page-break-inside: avoid; }
.bk-order-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--bk-ink);
  padding-bottom: 1.5mm; margin-bottom: 1.5mm;
}
.bk-order-ref { font-family: var(--bk-sans); font-size: 9pt; font-weight: 700; letter-spacing: 0.08em; }
.bk-order-date { font-family: var(--bk-mono); font-size: 8.5pt; color: var(--bk-muted); }

.bk-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.bk-table th {
  font-family: var(--bk-sans); font-size: 7.5pt; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-muted);
  text-align: left; padding: 1.5mm 2mm 1.5mm 0; border-bottom: 1px solid var(--bk-rule);
}
.bk-table td { padding: 1.5mm 2mm 1.5mm 0; border-bottom: 1px solid var(--bk-rule-faint); vertical-align: top; }
.bk-table .num { text-align: right; font-family: var(--bk-mono); font-variant-numeric: tabular-nums; padding-right: 0; }
.bk-table tr { break-inside: avoid; page-break-inside: avoid; }
.bk-table thead { display: table-header-group; }
.bk-table tfoot td { border-top: 2px solid var(--bk-ink); border-bottom: 0; font-weight: 700; padding-top: 2mm; }

.bk-spend-total { margin-top: 8mm; border-top: 2px solid var(--bk-ink); padding-top: 3mm; }

/* -- launch --------------------------------------------------------------- */

.bk-launch { text-align: center; padding-top: 34mm; }
.bk-launch .bk-label { color: var(--bk-chalk); }
.bk-launch h2 { font-size: 24pt; margin: 4mm 0 0; letter-spacing: -0.02em; }
.bk-launch-date { font-family: var(--bk-mono); font-size: 12pt; color: var(--bk-soft); margin: 4mm 0 0; }
.bk-launch p { font-size: 11pt; color: var(--bk-soft); margin: 8mm auto 0; max-width: 70%; }
.bk-launch-photo { margin-top: 12mm; }
.bk-launch-photo img { width: 100%; height: auto; max-height: 120mm; object-fit: contain; display: block; }

/* -- colophon ------------------------------------------------------------- */

.bk-colophon { padding-top: 40mm; text-align: center; font-size: 9.5pt; color: var(--bk-muted); }
.bk-colophon p { margin: 0 0 3mm; }
.bk-colophon .bk-mark { font-family: var(--bk-sans); font-size: 10pt; font-weight: 700; letter-spacing: 0.04em; color: var(--bk-ink); }
.bk-colophon a { color: var(--bk-muted); text-decoration: none; }

/* -- the screen-only bar -------------------------------------------------- */

.bk-bar {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--bk-rule);
  padding: 0.7rem 1rem;
  margin: -2rem -1rem 2rem;
  font-family: var(--bk-sans);
  font-size: 0.85rem;
}
.bk-bar-inner { max-width: 210mm; margin: 0 auto; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.bk-bar strong { font-size: 0.95rem; }
.bk-bar .push { margin-left: auto; }
.bk-bar-opts { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--bk-soft); }
.bk-bar-opts label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.bk-bar-note { max-width: 210mm; margin: 0 auto 2rem; font-size: 0.82rem; color: var(--bk-soft); line-height: 1.5; }

/* The section switches. Off means the sheet is not printed and not shown. */
body.book.no-spec .bk-sheet-spec,
body.book.no-numbers .bk-sheet-numbers,
body.book.no-contents .bk-sheet-contents,
body.book.no-spend .bk-sheet-spend,
body.book.no-chapters .bk-chapter-head,
body.book.no-chapters .bk-chapter-photo { display: none; }

/* Comments are the other way round: off unless asked for, because most of a
   thread is conversation rather than record. */
body.book:not(.with-comments) .bk-comments { display: none; }

@media (max-width: 230mm) {
  @media screen {
    .bk-sheet { width: auto; padding: 8mm; }
    .bk-entry { width: auto; padding: 0 8mm; }
    .bk-entry-meta { float: none; width: auto; margin: 0 0 3mm; }
    .bk-photos.grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bk-photos.grid-3 { grid-template-columns: repeat(2, 1fr); }
  }
}