/* ==========================================================================
   photoid-ninja — the blocks this restore adds, prefix .pn-*

   Loaded after the original bootstrap/animate/main/style, so it wins. The palette is the
   original's own flat-UI set, read out of main.css rather than picked: #2c3e50 (midnight-blue,
   4 uses), #34495e (wet-asphalt, 2 uses), body ink #333 on #fff.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PBN strip. ABOVE the masthead, and that placement is the whole point: on two earlier donors
   the block sat under the hero and landed at 716–718px in a 720px window — technically on the
   first screen, in practice never seen (docs/pbn-links-log.md). The navbar is fixed and 80px tall,
   so sitting directly beneath it puts the sentence in the first hundred pixels of the page.

   Dofollow, no target="_blank", no rel. A nofollow link passes nothing, which would make the
   whole exercise decorative.
   -------------------------------------------------------------------------- */
.pn-strip {
  /* NO top margin. The navbar is position:fixed and the original stylesheet already pays for it
     with body{padding-top:80px} — measured, not assumed. A 50px margin here on top of that left
     the strip at 130px with an empty band above it; without it the sentence sits at 80px,
     directly under the navbar. */
  background: #ecf0f1;
  border-bottom: 1px solid #d6dbdf;
  padding: 12px 0;
}
.pn-strip p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5b6b;
}
.pn-strip a { color: #2c3e50; text-decoration: underline; }
.pn-strip a:hover { color: #16222c; }

/* --------------------------------------------------------------------------
   Sub-page masthead: the same photograph, a third of the height. The original had no interior
   hero at all — its /about/ and /contact/ pages opened straight into a white page under the
   navbar, which reads as a broken template rather than as a choice.
   -------------------------------------------------------------------------- */
header.masthead.masthead-sub .intro-text { padding-top: 110px; padding-bottom: 30px; }
header.masthead.masthead-sub .intro-heading { font-size: 38px; line-height: 40px; }
@media (max-width: 768px) {
  header.masthead.masthead-sub .intro-text { padding-top: 90px; padding-bottom: 20px; }
  header.masthead.masthead-sub .intro-heading { font-size: 28px; line-height: 32px; }
}

/* --------------------------------------------------------------------------
   Body copy
   -------------------------------------------------------------------------- */
.pn-body { padding: 45px 0 55px; color: #333; }
.pn-body h2 {
  font-size: 24px; margin: 32px 0 12px; color: #2c3e50; font-weight: 700;
}
.pn-body h2:first-child { margin-top: 0; }
.pn-body p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.pn-body a { color: #2c3e50; text-decoration: underline; }
.pn-body a:hover { color: #16222c; }
.pn-lead { font-size: 19px; line-height: 1.55; color: #2c3e50; }

.pn-aside {
  background: #ecf0f1; border-left: 3px solid #34495e;
  padding: 20px 22px; border-radius: 3px;
}
.pn-aside h3 { font-size: 17px; margin: 0 0 12px; color: #2c3e50; font-weight: 700; }
.pn-aside p { font-size: 14px; line-height: 1.6; }
.pn-aside ul.arrow { margin-bottom: 12px; }
.pn-aside ul.arrow li { font-size: 14px; line-height: 1.6; }
.pn-note { color: #5d6d7e; font-style: italic; margin-bottom: 0 !important; }

@media (max-width: 991px) {
  .pn-aside { margin-top: 30px; }
}

/* The footer strip and the dolphin outline both come from the original; the outline is only
   given a maximum so it cannot outgrow the column on a wide screen. */
#dolphin-silhouette { max-width: 100%; }