/* The Creature Corner, P08-01 Opus remake: print layout for print.html (US Letter, 0.5 in margins).
   Also readable on screen as a long single page, so the integrator can check it before making the PDF. */

@font-face { font-family: "DynaPuff"; src: url("../fonts/dynapuff-latin.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Sacramento"; src: url("../fonts/sacramento-latin.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  --orange: #FF7828;
  --tint: #FFF0E5;
  --accent: #A33D00;
  --ink: #292522;
  --muted: #5A5550;
  --paper: #FFFFFF;
  --soft: #F0EEEA;
  --line: #D7D3CE;
  --check-bg: #EEF3EC;
  --check-line: #5F7D59;
  --check-ink: #2C4428;
  --caution-bg: #FFF6EF;
  --font-display: "DynaPuff", "Trebuchet MS", sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
}

@page {
  size: Letter;
  margin: 0.5in 0.5in 0.62in;
  @bottom-left {
    content: "P08-01 | Large semi-arboreal enclosure \00B7  The Creature Corner";
    font: 7.5pt/1 Inter, "Helvetica Neue", Arial, sans-serif;
    color: #6B655F;
    vertical-align: top;
    padding-top: 0.16in;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font: 7.5pt/1 Inter, "Helvetica Neue", Arial, sans-serif;
    color: #6B655F;
    vertical-align: top;
    padding-top: 0.16in;
  }
}
@page cover {
  margin: 0.5in;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.print-doc { margin: 0; background: var(--paper); color: var(--ink); font: 400 9.3pt/1.42 var(--font-body); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -.18em; margin-right: .3em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0 0 .45em; break-after: avoid-page; }
h2 { font-size: 17pt; }
h3 { font-size: 11.5pt; }
p { margin: 0 0 .6em; orphans: 3; widows: 3; }
ul, ol { margin: 0; padding-left: 1.2em; }
li { margin: 0 0 .25em; }
.fr { white-space: nowrap; }
.fr sup, .fr sub { font-size: .7em; line-height: 0; position: relative; vertical-align: baseline; }
.fr sup { top: -.4em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.title-code { color: var(--accent); }
.title-sep { color: #C9C3BC; font-weight: 400; }

/* screen preview: show the sheet edges so the page rhythm is visible */
@media screen {
  body.print-doc { background: #E9E6E1; padding: 24px 0; }
  .pcover, .psection, .pstep { width: 8.5in; margin: 0 auto 18px; background: #fff; padding: 0.5in; box-shadow: 0 2px 14px rgba(41, 37, 34, .12); }
  .pcover { min-height: 11in; }
}

.pbreak { break-before: page; }

/* ---------- cover */
.pcover { page: cover; display: flex; flex-direction: column; }
@media print { .pcover { min-height: 9.9in; } }
.pcover-brand { display: flex; align-items: center; gap: 10px; font: 600 13pt/1 var(--font-display); }
.pcover-brand em { font-style: normal; color: var(--accent); }
.pcover-brand img { width: 0.6in; height: 0.6in; border-radius: 50%; }
.pcover-k { margin: 0.35in 0 6px; text-transform: uppercase; letter-spacing: .16em; font-size: 8pt; font-weight: 700; color: var(--accent); }
.pcover h1 { font-size: 27pt; margin: 0 0 4px; }
.pcover-dims { font: 500 13pt/1.3 var(--font-display); margin: 0 0 4px; }
.pcover-sub { color: var(--muted); font-size: 10pt; margin: 0 0 12px; }
.pcover-img { margin: 6px 0 12px; }
.pcover-img img { width: 100%; max-height: 4.6in; object-fit: contain; border-radius: 10px; background: #F6F4F1; }
.pcover-img figcaption { display: none; }
.pcover-lede { font-size: 10.4pt; line-height: 1.5; color: #3A3531; margin-bottom: 12px; }
.pglance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pg-item { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; break-inside: avoid; }
.pg-l { font-size: 6.6pt; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.pg-v { font-weight: 700; font-size: 8.6pt; line-height: 1.25; }
.pcover-rev { margin-top: auto; padding-top: 10px; font-size: 7.8pt; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- contents and scope */
.ptoc { list-style: none; padding: 0; columns: 2; column-gap: 0.35in; font-size: 9.2pt; }
.ptoc-phase { break-inside: avoid; margin-bottom: 8px; font-weight: 700; }
.ptoc-phase > a { display: block; font-family: var(--font-display); font-weight: 500; font-size: 10pt; margin-bottom: 3px; }
.ptoc-phase ol { list-style: none; padding: 0; font-weight: 400; }
.ptoc-phase ol li { margin: 0 0 2px; }
.ptoc-n { display: inline-block; width: 2em; color: var(--accent); font-weight: 700; }
.pscope { margin-top: 0.25in; border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 8px; padding: 12px 16px; break-inside: avoid; }
.pscope ul { padding-left: 1.1em; }
.pscope li { margin-bottom: 4px; }
.pplans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pplan { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; break-inside: avoid; }
.pplan h3 { font-size: 10.5pt; }
.pplan p { margin: 0; }

/* ---------- before you start */
.pgroup-h { font-size: 12.5pt; margin-top: 14px; }
.ptools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ptools { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; break-inside: avoid; font-size: 8.8pt; }
.ptools h3 { font-size: 9.6pt; }
.pppe { background: var(--caution-bg); border-color: #F4C7A4; }
.pshop-grid { columns: 2; column-gap: 12px; }
.pshop { break-inside: avoid; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.pshop h3 { font-size: 9.6pt; }
.pcheck { list-style: none; padding: 0; }
.pcheck li { display: grid; grid-template-columns: 14px 1fr; gap: 7px; margin-bottom: 5px; break-inside: avoid; }
.pcheck small { color: var(--muted); font-size: 7.8pt; }
.pbox { width: 11px; height: 11px; border: 1.3px solid #7C756E; border-radius: 2px; margin-top: 2px; }

/* ---------- tables */
.ptable { width: 100%; border-collapse: collapse; font-size: 8.4pt; margin: 4px 0 10px; }
.ptable th, .ptable td { text-align: left; padding: 4px 6px; border-bottom: 0.6pt solid #DDD8D2; vertical-align: top; }
.ptable thead { display: table-header-group; }
.ptable thead th { background: #F4F2EE; font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 0.8pt solid #BDB6AE; }
.ptable tr { break-inside: avoid; }
.pfk td:first-child { font-weight: 700; white-space: nowrap; }
.pcut { break-inside: avoid-page; }
.pcut h3 { font-size: 10pt; margin-top: 8px; margin-bottom: 2px; }
.pcut p { font-size: 8.4pt; color: var(--muted); margin-bottom: 2px; }
.pcut .ptable td:first-child { font-weight: 700; }
.pmt { margin-top: 16px; }

/* ---------- figures */
.pfig { margin: 0; break-inside: avoid; }
.pfig img { width: 100%; object-fit: contain; }
.pfig figcaption { font-size: 7.8pt; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.pfig-diagram { margin-bottom: 14px; }
.pfig-diagram img { width: auto; max-width: 100%; max-height: 8.4in; margin: 0 auto; border: 0.6pt solid var(--line); border-radius: 6px; padding: 4px; }
.pfig-diagram figcaption { text-align: center; }
.pdiagrams { display: block; }
.pdiagrams .pfig-diagram + .pfig-diagram { break-before: page; }
.pexploded { margin-bottom: 8px; }
.pexploded-stage { position: relative; }
.pexploded-stage img { max-height: 6.6in; margin: 0 auto; }
.ppin { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 6.8pt; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #fff; }
.plegend { columns: 3; column-gap: 14px; font-size: 8.4pt; padding-left: 1.4em; }
.plegend li { break-inside: avoid; }
.ph { display: grid; place-items: center; min-height: 1.4in; border: 1px dashed #BDB6AE; border-radius: 8px; background: #F6F4F1; color: var(--muted); text-align: center; }
.ph-ico { width: 22px; height: 22px; }
.ph-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8pt; }
.ph-title { font-weight: 700; }
.ph-name { font-family: ui-monospace, Consolas, monospace; font-size: 7.4pt; }
.is-missing .ph { aspect-ratio: auto !important; }

/* ---------- steps: a step's picture, parts and actions are kept together where they fit on one page,
   so a step (or a phase heading with its first step) starts on the current page only when all of it fits */
.pstep { break-before: auto; }
#p-step-1 { break-before: page; }
@media print {
  .pstep + .pstep { margin-top: 0.22in; padding-top: 0.2in; border-top: 1.2pt solid var(--ink); }
  .pstep + .pstep.has-phase { margin-top: 0.3in; padding-top: 0; border-top: 0; }
}
.pstep-main { break-inside: avoid-page; }
.pphase { border-bottom: 1.6pt solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; }
.pphase-l { display: inline-block; font-size: 7.4pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 99px; margin-bottom: 6px; }
.pphase h2 { font-size: 18pt; margin-bottom: 3px; }
.pphase p { color: #3A3531; margin: 0; font-size: 9.2pt; }
.pstep-head { display: grid; grid-template-columns: 0.62in 1fr; gap: 12px; align-items: start; margin-bottom: 10px; break-after: avoid-page; }
.pstep-n { display: grid; place-items: center; width: 0.62in; height: 0.62in; border-radius: 50%; background: var(--tint); color: var(--accent); font: 600 20pt/1 var(--font-display); }
.pstep-k { margin: 2px 0 2px; font-size: 7.2pt; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.pstep-head h3 { font-size: 15pt; margin-bottom: 3px; }
.pstep-sum { font-size: 9.8pt; color: #3A3531; margin-bottom: 4px; }
.pchips { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pchip { display: inline-block; font-size: 7.8pt; font-weight: 600; background: var(--soft); padding: 2px 8px; border-radius: 99px; }
.pchip-ref { background: #fff; border: 0.8pt solid var(--line); color: var(--muted); font-weight: 500; }
.pchip-ref .ico { color: var(--accent); width: 1em; height: 1em; margin-right: .25em; }
.pstep-visual { margin-bottom: 10px; }
.pfig-main img { max-height: 3.7in; border-radius: 8px; background: #F6F4F1; }
.pfig-main .ph { min-height: 2.2in; }
.pextras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; align-items: start; }
.pextras-1 { grid-template-columns: minmax(0, 0.75fr); }
.pextras-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pfig-extra img { max-height: 2.6in; border: 0.6pt solid var(--line); border-radius: 6px; padding: 3px; background: #fff; }
.pextras-3 .pfig-extra img { max-height: 2.1in; }
.pneeds-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 7px; margin-bottom: 7px; }
.pneeds-row:empty { display: none; }
.pneeds-row .pneeds { margin: 0; }
.pneeds-row .pneeds:only-child { grid-column: 1 / -1; }
.pfig-extra .ph { min-height: 1.2in; }
.pstep-body { display: block; }
/* renders: picture column on the left, the work on the right */
/* the picture column floats, so a long step's text continues at full width once the pictures end */
.pstep-split .pstep-grid { display: block; }
.pstep-split .pstep-grid::after { content: ""; display: block; clear: both; }
.pstep-split .pstep-visual { float: left; width: 2.9in; margin: 0 0.2in 0.08in 0; }
.pstep-split .pstep-body > *, .pstep-split .pactions > li { display: flow-root; }
.pstep-split .pstep-body > .pneeds-row { display: grid; }
.pextras-after { clear: both; padding-top: 8px; break-inside: avoid; }
.pstep-split .pextras.pextras-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pstep-split .pextras.pextras-after.pextras-1 { grid-template-columns: minmax(0, 0.5fr); }
.pstep-split .pextras.pextras-after .pfig-extra img { max-height: 2.5in; }
.pstep-split .pfig-main img { max-height: 2.6in; }
.pstep-split .pextras, .pstep-split .pextras-1, .pstep-split .pextras-3 { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.pstep-split .pfig-extra img, .pstep-split .pextras-3 .pfig-extra img { max-height: 2.35in; margin: 0 auto; }
.pstep-split .pneeds-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pstep-split .pactions { margin-top: 4px; }
.pneeds { background: #F7F6F3; border-radius: 7px; padding: 6px 10px; margin: 0 0 7px; font-size: 8.8pt; break-inside: avoid; }
.pneeds b { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.pneeds ul { list-style: none; padding: 0; }
.pneeds li b { display: inline; font-size: 9pt; letter-spacing: 0; text-transform: none; color: var(--accent); }
.pactions { padding-left: 0; list-style: none; counter-reset: pa; margin: 8px 0; }
.pactions > li { counter-increment: pa; position: relative; padding-left: 25px; margin-bottom: 4px; break-inside: avoid; line-height: 1.38; }
.pactions > li::before { content: counter(pa); position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border-radius: 50%; border: 1.3pt solid var(--ink); display: grid; place-items: center; font: 600 7.6pt/1 var(--font-display); }
.pcall { border-radius: 7px; padding: 5px 10px; margin: 0 0 6px; font-size: 9pt; break-inside: avoid; }
.pcall b { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1px; }
.pcall-check { background: var(--check-bg); border-left: 3pt solid var(--check-line); color: var(--check-ink); }
.pcall-caution { background: var(--caution-bg); border: 1.4pt solid var(--orange); color: #3B2A1F; }
.pcall-caution b { color: var(--accent); }
.pcall-tip { background: var(--soft); }
.popus { font-size: 8.2pt; color: var(--muted); border-top: 0.6pt dashed var(--line); padding-top: 5px; margin-top: 8px; }
.popus b { color: var(--accent); }
.pref { margin-top: 10px; border: 0.8pt solid var(--line); border-radius: 7px; padding: 8px 10px; background: #FCFBF9; }
.pref-title { font-weight: 700; font-size: 9pt; margin-bottom: 4px; break-after: avoid; }
.pref-title .ico { color: var(--accent); }
.pref p { font-size: 8.4pt; color: var(--muted); }
.pnote { font-size: 8.2pt; color: var(--muted); margin-bottom: 3px; }
.pref-pointer { display: flex; gap: 6px; align-items: baseline; font-size: 8.4pt; color: var(--muted); margin: 8px 0 0; padding: 5px 9px; border: 0.8pt dashed var(--line); border-radius: 7px; break-inside: avoid; }
.pref-pointer .ico { flex: none; color: var(--accent); }
.pref-pointer b { color: var(--ink); }
.pref-pointer a { text-decoration: underline; text-decoration-color: #D9B9A0; }
.pintro { color: var(--muted); font-size: 9pt; max-width: 6.2in; }
#p-step-refs .pref, .prefblock { margin-top: 12px; break-inside: avoid-page; }
.pref-title + p, .prefblock h3 + p { break-after: avoid; }
#p-step-refs .pref-title { font: 500 11pt/1.2 var(--font-display); margin-bottom: 4px; }
.pref-n { display: inline-block; font: 700 7.4pt/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 99px; margin-right: 6px; vertical-align: 2px; }

/* ---------- after the build, reference, sources */
.pafter { margin-bottom: 14px; }
.pafter h3 { font-size: 12pt; }
.pafter .pcheck { columns: 2; column-gap: 16px; }
.pfig-half { width: 60%; margin: 6px 0 10px; }
.pfig-half img { max-height: 3.2in; }
.prefblock { margin-bottom: 14px; }
.prefblock h3 { font-size: 11pt; }
.psources { font-size: 8.4pt; padding-left: 0; list-style: none; columns: 2; column-gap: 16px; }
.psources li { break-inside: avoid; margin-bottom: 6px; }
.purl { color: var(--muted); font-size: 7.4pt; overflow-wrap: anywhere; }

/* dimensioned drawings print full width so their labels stay legible (about 6 pt on Letter) */
.pstep-split .pextras.pextras-after.pdiag-full { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pstep-split .pextras.pextras-after.pdiag-full .pfig-extra img,
.pstep:not(.pstep-split) .pfig-extra img { width: 100%; max-height: 7.2in; padding: 4px; }
.pdiag-full .pfig-extra { break-inside: avoid; }
.pstep:not(.pstep-split) .pextras { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pstep:not(.pstep-split) .pfig-main img { max-height: 7.2in; width: 100%; }