When you move CSS to an external file, switch to a nonce or hash and drop this.
     - script-src 'unsafe-inline' : same — see below about moving scripts out
     - frame-src : only Google Maps embed
     - form-action 'none' : we have no forms; block any injected ones
     - base-uri 'self' : block <base> tag injection
     - object-src 'none' : no Flash / applets / legacy plugin content -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'none';
               img-src 'self' https://commons.wikimedia.org https://upload.wikimedia.org data:;
               style-src 'self' 'unsafe-inline';
               script-src 'self' 'unsafe-inline';
               frame-src https://maps.google.com https://www.google.com;
               connect-src 'none';
               form-action 'none';
               base-uri 'self';
               object-src 'none';
               frame-ancestors 'none';">

<!-- Don't leak the full URL to any third party we link out to or embed. -->
<meta name="referrer" content="no-referrer">

<!-- Prevent MIME sniffing (mostly server-side, but this is belt-and-suspenders). -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">

<title>Bluffy's Hollar ~ Big Lake Cryptid Archive &amp; Gift Shoppe ~ Council Bluffs, Iowa</title>
<style>
  /* =====================================================
     BLUFFY'S HOLLAR
     Big Lake Cryptid Archive & Gift Shoppe
     Maintained by the Haverstock Family since 1998
     Council Bluffs, Iowa ~ Pottawattamie County
     ===================================================== */

  body {
    background-color: #2a3a26;
    background-image:
      radial-gradient(ellipse at 10% 20%, rgba(20,40,20,0.6) 0%, transparent 40%),
      radial-gradient(ellipse at 80% 70%, rgba(10,30,10,0.5) 0%, transparent 50%),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g stroke='%23384a32' stroke-width='1' fill='none' opacity='0.45'><path d='M10 60 L10 30 M10 30 Q8 26 10 22 Q12 26 10 30'/><path d='M30 60 L30 20 M30 20 Q27 15 30 10 Q33 15 30 20'/><path d='M48 60 L48 34 M48 34 Q46 30 48 26 Q50 30 48 34'/></g></svg>");
    background-size: auto, auto, auto, 60px 60px;
    font-family: "Georgia", "Times New Roman", serif;
    color: #1a1a1a;
    margin: 0;
    padding: 10px;
    text-align: center;
  }

  .page-frame {
    max-width: 820px;
    margin: 0 auto;
    background-color: #f2ead3;
    background-image:
      radial-gradient(ellipse at 20% 30%, rgba(139,115,85,0.12) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 70%, rgba(139,115,85,0.14) 0%, transparent 60%);
    border: 8px ridge #3d2a14;
    padding: 16px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.55);
  }

  /* ---------- TITLE ---------- */
  .title-block { padding: 10px 0 12px 0; border-bottom: 3px double #3d2a14; }
  .eyebrow {
    font-family: "Courier New", monospace;
    font-size: 13px; color: #5a3a1e; letter-spacing: 2px;
  }
  .swamp-title {
    font-family: "Impact", "Arial Black", sans-serif;
    font-size: 62px; font-weight: bold; letter-spacing: 3px;
    background: linear-gradient(180deg,
      #1a3d2e 0%, #2e5a3e 30%, #6b8a3a 55%, #8b5a2b 80%, #3d2a14 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25), 0 4px 0 rgba(60,30,10,0.15);
    margin: 0; line-height: 1; text-transform: uppercase;
  }
  .title-sub {
    font-family: "Georgia", serif; font-style: italic;
    font-size: 20px; color: #3d2a14; margin: 8px 0 2px 0;
  }
  .title-meta {
    font-family: "Courier New", monospace;
    font-size: 12px; color: #5a3a1e; margin: 4px 0 0 0;
  }

  /* ---------- MARQUEE ---------- */
  .old-marquee {
    background-color: #1a2a18; color: #c8d68a;
    font-family: "Courier New", monospace; font-weight: bold;
    font-size: 15px; padding: 7px 0;
    border-top: 2px solid #6b8a3a; border-bottom: 2px solid #6b8a3a;
    margin: 10px 0; letter-spacing: 1px;
  }

  .blink { animation: blink-step 1.1s steps(2, start) infinite; color: #8b0000; font-weight: bold; }
  @keyframes blink-step { to { visibility: hidden; } }

  .swamp-hr {
    height: 5px; border: 0;
    background: linear-gradient(90deg, #3d2a14, #6b5a2b, #8ba33a, #2e5a3e, #1a3d2e, #3d2a14);
    margin: 14px 0;
  }

  /* ---------- NAV ---------- */
  .navbar { font-family: "Georgia", serif; font-size: 15px; margin: 10px 0 14px 0; color: #3d2a14; }
  .navbar a { color: #2c4a6e; text-decoration: underline; margin: 0 3px; }
  .navbar a:visited { color: #5a2a5e; }
  .navbar a:hover { background-color: #c8d68a; color: #8b0000; }

  /* ---------- SECTIONS ---------- */
  .section {
    background-color: #f7efd7; border: 2px solid #5a3a1e;
    box-shadow: inset 0 0 30px rgba(139,115,85,0.12);
    padding: 16px 20px; margin: 16px 0; text-align: left;
  }
  .section h2 {
    font-family: "Impact", sans-serif; color: #3d2a14;
    font-size: 30px; margin: 0 0 10px 0;
    border-bottom: 2px dashed #8b5a2b; padding-bottom: 4px;
    text-align: center; letter-spacing: 2px; text-transform: uppercase;
  }
  .section h3 {
    font-family: "Georgia", serif; color: #5a3a1e;
    font-size: 19px; margin: 14px 0 4px 0;
    border-bottom: 1px dotted #8b5a2b;
  }
  .section p {
    font-family: "Georgia", serif; font-size: 15.5px;
    line-height: 1.65; color: #1a1a1a;
  }
  .dropcap::first-letter {
    font-family: "Georgia", serif; font-size: 54px;
    float: left; line-height: 0.85; padding: 6px 6px 0 0;
    color: #3d2a14; font-weight: bold;
  }

  /* ---------- TESTIMONY ---------- */
  .testimony {
    border-left: 4px solid #6b8a3a;
    background: rgba(200,214,138,0.18);
    padding: 8px 14px; margin: 10px 0;
    font-family: "Georgia", serif; font-style: italic; color: #2a3a14;
  }
  .testimony .attrib {
    display: block; font-style: normal;
    font-family: "Courier New", monospace; font-size: 12px;
    color: #5a3a1e; margin-top: 6px;
  }

  /* ---------- TIMELINE ---------- */
  .timeline { border-left: 3px dashed #5a3a1e; margin: 10px 0 10px 14px; padding-left: 18px; }
  .timeline-entry { margin: 14px 0; }
  .timeline-date {
    font-family: "Courier New", monospace; font-weight: bold;
    color: #8b0000; background: #f7efd7;
    padding: 2px 6px; border: 1px solid #5a3a1e;
    display: inline-block; margin-left: -36px; margin-right: 8px;
  }
  .timeline-title { font-family: "Georgia", serif; font-weight: bold; color: #3d2a14; font-size: 17px; }

  /* ---------- POLAROID ---------- */
  .polaroid-wrap {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 18px; flex-wrap: wrap; padding: 8px 0 4px 0;
  }
  .polaroid {
    width: 260px; background: #fdfcf4;
    padding: 10px 10px 36px 10px;
    border: 1px solid #c8c0a0;
    box-shadow: 4px 6px 0 rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
    transform: rotate(-2.5deg); position: relative;
    font-family: "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  }
  .polaroid-img { width: 100%; height: 200px; display: block; background: #000; }
  .polaroid-caption {
    position: absolute; bottom: 6px; left: 0; right: 0;
    text-align: center; font-size: 14px; color: #2a2a2a; letter-spacing: 0.5px;
  }
  .polaroid-note {
    max-width: 300px; font-size: 13.5px; font-family: "Georgia", serif;
    color: #3d2a14; line-height: 1.55; padding-top: 6px;
  }

  /* ---------- MAP ---------- */
  .map-wrap { text-align: center; background: #e8d8a8; border: 2px solid #5a3a1e; padding: 10px; }
  .map-caption { font-family: "Courier New", monospace; font-size: 12px; color: #3d2a14; margin-top: 6px; }

  /* ---------- HERO PHOTO BANNER ---------- */
  .hero-photo {
    margin: 10px 0;
    border: 4px ridge #3d2a14;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
  }
  .hero-photo img {
    width: 100%;
    display: block;
    height: 220px;
    object-fit: cover;
    filter: sepia(0.35) saturate(0.75) brightness(0.78) contrast(1.12) hue-rotate(-8deg);
  }
  .hero-photo .hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,30,15,0.78) 100%);
    color: #e8d8a8;
    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
    padding: 10px 0 6px 0;
    text-transform: uppercase;
  }

  /* ---------- POLAROID IMG (replaces SVG) ---------- */
  .polaroid img.polaroid-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    filter: sepia(0.45) saturate(0.6) brightness(0.78) contrast(1.18) blur(0.4px);
  }

  /* ---------- INLINE BODY PHOTO ---------- */
  .inline-photo {
    float: right;
    width: 220px;
    margin: 4px 0 10px 18px;
    background: #fdfcf4;
    padding: 8px 8px 26px 8px;
    border: 1px solid #c8c0a0;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.22);
    transform: rotate(1.4deg);
    position: relative;
    font-family: "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  }
  .inline-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    filter: sepia(0.3) saturate(0.75) brightness(0.85) contrast(1.1);
  }
  .inline-photo .photo-cap {
    position: absolute;
    bottom: 4px; left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    color: #2a2a2a;
  }
  @media (max-width: 560px) {
    .inline-photo { float: none; margin: 10px auto; transform: none; }
  }

  /* ---------- MAP IFRAME ---------- */
  .map-iframe-wrap {
    position: relative;
    background: #1a2a18;
    border: 4px ridge #3d2a14;
    padding: 0;
    overflow: hidden;
  }
  .map-iframe-wrap iframe {
    width: 100%;
    height: 460px;
    display: block;
    border: 0;
    filter: sepia(0.18) saturate(0.85) contrast(1.05);
  }
  .map-callouts {
    background: #f7efd7;
    border: 1px solid #5a3a1e;
    padding: 12px 14px;
    margin-top: 12px;
    font-family: "Georgia", serif;
    font-size: 14px;
    text-align: left;
    line-height: 1.55;
  }
  .map-callouts strong { color: #8b0000; font-family: "Courier New", monospace; }

  /* ---------- FOOTER GATOR DECORATION ---------- */
  .footer-gator {
    text-align: center;
    margin: 18px 0 0 0;
  }
  .footer-gator img {
    max-width: 380px;
    width: 70%;
    height: auto;
    filter: sepia(0.5) saturate(0.4) brightness(0.7) contrast(1.2) grayscale(0.5);
    opacity: 0.85;
  }

  /* ---------- IMAGE CREDITS ---------- */
  .img-credits {
    background: #ece2c8;
    border: 1px dashed #5a3a1e;
    padding: 8px 12px;
    margin-top: 10px;
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    color: #3d2a14;
    text-align: left;
    line-height: 1.5;
  }
  .img-credits a { color: #2c4a6e; }

  /* ---------- ARCHIVE ---------- */
  .archive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
  @media (max-width: 560px) { .archive-grid { grid-template-columns: 1fr; } }
  .scan {
    position: relative; padding: 14px;
    font-size: 13.5px; line-height: 1.45; color: #1a1a1a;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.22);
  }
  .scan-memo {
    background: #f4efd8; font-family: "Courier New", monospace;
    transform: rotate(-0.8deg); border: 1px solid #c8c0a0;
  }
  .scan-memo .letterhead {
    font-weight: bold; border-bottom: 2px solid #5a3a1e;
    padding-bottom: 4px; margin-bottom: 6px;
    font-size: 12px; letter-spacing: 1px;
  }
  .scan-news {
    background: #efe7c8; font-family: "Georgia", serif;
    transform: rotate(1.1deg); border: 1px solid #a89878;
  }
  .scan-news .headline {
    font-family: "Times New Roman", serif; font-weight: bold;
    font-size: 20px; line-height: 1.1; margin-bottom: 6px;
    border-bottom: 1px solid #5a3a1e; padding-bottom: 4px;
  }
  .scan-news .dateline { font-family: "Courier New", monospace; font-size: 11px; color: #5a3a1e; margin-bottom: 6px; }
  .scan-news p { font-size: 13px; line-height: 1.45; margin: 6px 0; }
  .scan-letter {
    background: #f8f1da;
    font-family: "Bradley Hand", "Marker Felt", cursive;
    transform: rotate(-1.6deg); border: 1px solid #c8c0a0;
    font-size: 15px; line-height: 1.5;
  }
  .scan-report {
    background: #eee5c0; font-family: "Courier New", monospace;
    font-size: 12.5px; transform: rotate(0.9deg); border: 1px solid #a89878;
  }
  .scan-report .stamp {
    position: absolute; top: 14px; right: 10px;
    font-family: "Impact", sans-serif; color: rgba(139,0,0,0.55);
    border: 3px solid rgba(139,0,0,0.55);
    padding: 2px 8px; transform: rotate(-14deg);
    font-size: 14px; letter-spacing: 2px;
  }

  /* ---------- THEORIES ---------- */
  .theories { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 560px) { .theories { grid-template-columns: 1fr; } }
  .theory {
    background: #fffaea; border: 2px groove #8b5a2b;
    padding: 10px 12px;
    font-family: "Georgia", serif; font-size: 14px; line-height: 1.5;
  }
  .theory h4 {
    margin: 0 0 4px 0; font-family: "Impact", sans-serif;
    color: #3d2a14; font-size: 17px; letter-spacing: 1px;
  }
  .plausibility {
    font-family: "Courier New", monospace; font-size: 11px; color: #5a3a1e;
    display: block; margin-top: 6px;
    border-top: 1px dotted #8b5a2b; padding-top: 4px;
  }

  /* ---------- WARES ---------- */
  .wares {
    width: 100%; border: 3px outset #8b5a2b; border-collapse: collapse;
    background-color: #f7efd7; font-family: "Georgia", serif; font-size: 14.5px;
  }
  .wares th {
    background-color: #3d2a14; color: #e8d8a8;
    padding: 6px; border: 2px solid #1a1a1a;
    font-family: "Impact", sans-serif; letter-spacing: 1px;
  }
  .wares td { border: 1px solid #8b5a2b; padding: 7px 10px; background-color: #fffaea; }
  .wares tr:nth-child(even) td { background-color: #f2ead3; }
  .price { color: #1a3d2e; font-weight: bold; font-family: "Courier New", monospace; white-space: nowrap; }
  .new-badge {
    display: inline-block; background: #8b0000; color: #ffeb9c;
    font-family: "Impact", sans-serif; font-size: 10px;
    padding: 1px 5px; margin-left: 6px;
    transform: rotate(-8deg); border: 1px solid #000;
  }

  /* ---------- GUESTBOOK ---------- */
  .guestbook { background-color: #f0ead0; border: 2px groove #5a6a3a; padding: 12px; }
  .sighting-entry {
    background-color: #fffaea; border-left: 4px solid #6b8a3a;
    padding: 7px 11px; margin: 7px 0;
    font-family: "Georgia", serif; font-size: 14px;
  }
  .sighting-entry .name { color: #3d2a14; font-weight: bold; }
  .sighting-entry .date { color: #5a3a1e; font-size: 12px; font-family: "Courier New", monospace; }

  /* ---------- TOUR ---------- */
  .tour-box {
    background: linear-gradient(180deg, #dfe8c6 0%, #c8d68a 100%);
    border: 3px ridge #5a6a3a; padding: 12px 16px;
    font-family: "Georgia", serif;
  }
  .tour-box h3 { margin-top: 0; color: #2a3a14; border-bottom: 2px solid #5a6a3a; }

  /* ---------- WEBRING ---------- */
  .webring {
    background-color: #ece2c8; border: 3px ridge #5a3a1e;
    padding: 10px; font-family: "Times New Roman", serif; font-size: 14px;
  }
  .ring-title {
    font-family: "Impact", sans-serif; color: #3d2a14;
    font-size: 18px; letter-spacing: 2px; text-align: center;
  }

  /* ---------- CONSTRUCTION / COUNTER / BADGES ---------- */
  .under-construction {
    display: inline-block;
    background: repeating-linear-gradient(45deg, #ffd700 0 12px, #1a1a1a 12px 24px);
    padding: 6px; border: 2px solid #000;
  }
  .under-construction-inner {
    background-color: #ffd700; color: #000;
    padding: 4px 14px; font-family: "Impact", sans-serif;
    font-size: 13px; letter-spacing: 2px;
  }
  .counter {
    display: inline-block; background-color: #000; color: #6b8a3a;
    font-family: "Courier New", monospace; font-size: 22px;
    letter-spacing: 4px; padding: 4px 10px; border: 3px inset #808080;
  }
  .badge-row { margin: 12px 0; }
  .badge {
    display: inline-block; padding: 6px 10px; margin: 4px;
    font-family: "MS Sans Serif", "Tahoma", sans-serif;
    font-size: 11px; font-weight: bold;
    border: 2px outset #a89878; background-color: #c0b890;
    color: #3d2a14; text-decoration: none;
  }
  .badge.netscape { background: #1a2a48; color: #ffd700; border-color: #2a3a68; }
  .badge.cryptid  { background: #3d2a14; color: #c8d68a; }
  .badge.notepad  { background: #f7efa0; color: #3d2a14; }
  .badge.dialup   { background: #5a2a5e; color: #ffd9f2; }

  /* ---------- FOOTER ---------- */
  .footer { font-family: "Georgia", serif; font-size: 13px; color: #3d2a14; margin-top: 14px; }
  .footer a { color: #2c4a6e; }
  .email-img {
    display: inline-block; background-color: #c8d68a; border: 2px solid #3d2a14;
    padding: 3px 8px; font-family: "Courier New", monospace; font-size: 14px; color: #1a1a1a;
  }
  .disclaimer {
    background: #efe7c8; border: 1px dotted #5a3a1e;
    padding: 8px 12px; font-family: "Times New Roman", serif;
    font-size: 12px; font-style: italic; color: #3d2a14;
    margin-top: 14px; text-align: left;
  }

  /* ---------- PHOTO PLACEHOLDER STRIP ---------- */
  .photo-strip {
    margin: 18px 0 4px 0;
    padding: 14px 10px 10px 10px;
    background: rgba(139,115,85,0.07);
    border-top: 1px dashed #8b5a2b;
    border-bottom: 1px dashed #8b5a2b;
  }
  .photo-strip-label {
    text-align: center;
    font-family: "Georgia", serif;
    font-style: italic;
    color: #5a3a1e;
    font-size: 13.5px;
    margin-bottom: 10px;
  }
  .photo-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .photo-slot {
    background: #fdfcf4;
    border: 1px solid #c8c0a0;
    padding: 6px 6px 24px 6px;
    box-shadow: 2px 3px 0 rgba(0,0,0,0.18);
    transform: rotate(-1.4deg);
    width: 176px;
    position: relative;
    font-family: "Bradley Hand", "Marker Felt", cursive;
  }
  .photo-slot-inner {
    width: 164px;
    height: 120px;
    background:
      repeating-linear-gradient(45deg,
        #eae2c8 0 8px, #e0d7ba 8px 16px);
    border: 1px dashed #8b5a2b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a3a1e;
    font-family: "Courier New", monospace;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
  }
  .photo-slot-hint {
    opacity: 0.75;
  }
  .photo-slot img {
    width: 164px;
    height: 120px;
    object-fit: cover;
    display: block;
    filter: sepia(0.3) saturate(0.75) brightness(0.88) contrast(1.08);
  }
  .photo-slot-caption {
    position: absolute;
    bottom: 4px;
    left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    color: #3a2a14;
  }
  .photo-strip-note {
    text-align: center;
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #5a3a1e;
    margin-top: 12px;
  }
  .photo-strip-note code {
    background: #efe7c8;
    padding: 1px 4px;
    border: 1px solid #c8bca0;
  }

  /* ---------- TSHIRT MINI PREVIEW ---------- */
  .tshirt-thumb {
    width: 70px;
    height: auto;
    vertical-align: middle;
    margin-right: 6px;
    filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.2));
  }

  /* ---------- MASCOT ---------- */
  .bluffy-mascot {
    filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.15));
  }
</style>
  // in the future (once the <style> block is also externalized).
  // =============================================================
  (function () {
    'use strict';

    // --- Visitor counter (ambient flavor; does NOT actually count visits) ---
    var counterEl = document.getElementById('counter');
    if (counterEl) {
      var n = parseInt(counterEl.textContent, 10);
      if (!isNaN(n)) {
        setInterval(function () {
          n += 1;
          counterEl.textContent = String(n).padStart(8, '0');
        }, 5400);
      }
    }

    // --- Mailto assembly (email is NOT in the static HTML source) ---
    // Spam harvesters scrape static mailto: hrefs. We assemble the address
    // from data-attributes at click time, which defeats the simplest
    // scrapers. Determined scrapers that run JS will still find it —
    // this is friction, not a wall. For a real wall, use a contact form
    // behind a CAPTCHA, or a server-side relay.
    document.querySelectorAll('a.mail-link').forEach(function (link) {
      link.addEventListener('click', function (ev) {
        ev.preventDefault();
        var u = link.getAttribute('data-u') || '';
        var d = link.getAttribute('data-d') || '';
        var s = link.getAttribute('data-s') || '';
        var b = link.getAttribute('data-b') || '';
        if (!u || !d) return;
        var href = 'mailto:' + u + '@' + d;
        var qs = [];
        if (s) qs.push('subject=' + encodeURIComponent(s));
        if (b) qs.push('body=' + b); // already pre-encoded in attribute
        if (qs.length) href += '?' + qs.join('&');
        window.location.href = href;
      });
    });

    // --- Webring placeholder alert (ring has been offline since 2014) ---
    var ringMessage =
      "Sorry --\n\n" +
      "The Heartland Cryptid Webring went offline in late 2014 when " +
      "'PlainsPhenomena' (the ring administrator, out of Topeka) " +
      "stopped paying for hosting. We keep these links up out of " +
      "sentiment.\n\n" +
      "If you are a cryptid researcher and would like to re-home the " +
      "ring, please write to us.";

    document.querySelectorAll('a.ring-link').forEach(function (link) {
      link.addEventListener('click', function (ev) {
        ev.preventDefault();
        window.alert(ringMessage);
      });
    });
  })();
</script>

</body>

  /* =====================================================
     UTILITY CLASSES — replacing inline style= attributes
     so the CSP can use style-src 'self' without 'unsafe-inline'
     ===================================================== */
  .u-center       { text-align: center; }
  .u-center-block { text-align: center; margin: 8px auto 4px auto; }
  .u-center-pad   { text-align: center; margin: 18px 0; }
  .u-center-flush { text-align: center; margin-top: 0; }
  .u-center-ital  { text-align: center; font-style: italic; }
  .u-right-courier { text-align: right; font-family: 'Courier New', monospace; font-size: 11px; color: #5a3a1e; }
  .u-nodecor      { text-decoration: none; }
  .u-mt4          { margin-top: 4px; }
  .u-mt12         { margin-top: 12px; }
  .u-mt6-ital     { margin-top: 6px; font-style: italic; color: #2a3a14; }
  .u-small-bark   { font-size: 12px; color: #3d2a14; }
  .u-small-bark-mt{ font-size: 12px; color: #3d2a14; margin-top: 10px; }
  .u-small-brown  { font-size: 12px; color: #5a3a1e; }
  .u-small-brown-mt{ font-size: 12px; color: #5a3a1e; margin-top: 4px; }
  .u-xs           { font-size: 10px; }
  .u-xs12         { font-size: 12px; }
  .u-no-sell      { font-size: 12.5px; color: #5a3a1e; text-align: center; margin-top: 10px; }
  .u-counter-label{ font-family: 'Georgia', serif; font-size: 16px; }
  .u-links-list   { font-family: 'Georgia', serif; font-size: 14.5px; line-height: 1.8; }
  .theory--dashed { border-style: dashed; }
  .u-rot-pos      { transform: rotate(1.6deg); }
  .u-rot-neg      { transform: rotate(-1deg); }

  /* Header engraving image styling */
  .header-engraving {
    max-width: 360px; width: 80%; height: auto; display: inline-block;
    filter: sepia(0.25) saturate(0.85) contrast(1.05);
    border: 1px solid #5a3a1e; padding: 4px; background: #f8f1da;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.22);
  }
  .header-engraving-caption {
    font-family: 'Courier New', monospace; font-size: 10px;
    color: #5a3a1e; margin-top: 4px; letter-spacing: 1px;
  }