/* =========================================================
   THE BLACKWATER FLYER — Consolidated Stylesheet
   (1920s bulletin / park-ranger vibe)
   ========================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@600;700;800&family=Special+Elite&display=swap');

/* ---- Theme Tokens ---- */
:root{
  --ink:#1C1C1A;           /* type / borders */
  --paper:#F5F1E6;         /* page backdrop */
  --pine:#2F5130;          /* ranger green */
  --cedar:#4D3B2F;         /* signpost brown */
  --accent:#9B3E2A;        /* barn red (sparingly) */
  --radius:12px;           /* small radius */
  --radius-lg:22px;        /* large radius */
  --container:1040px;      /* content width */
}

/* =========================================================
   Base / Layout
   ========================================================= */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--paper); color:var(--ink);
  font-family:'Libre Baskerville', Georgia, 'Times New Roman', serif;
  line-height:1.65;
}
a{color:var(--ink)} a:hover{text-decoration:underline}
.smallcaps{font-variant:small-caps; letter-spacing:.12em}

.container{max-width:var(--container); margin:0 auto; padding:0 14px 40px}
.grid{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:900px){ .grid{grid-template-columns:1.2fr .8fr} }

main,.content,.page-body{margin-top:8px}

/* =========================================================
   Masthead — use ONLY the inner SVG plaque
   ========================================================= */
.masthead{
  margin:28px auto 14px;
  padding:0 16px;
  display:flex; justify-content:center;
  border:none !important; background:none !important; box-shadow:none !important;
}
.plaque{
  width:min(1200px,98vw);
  padding:0 !important;
  border:none !important; background:none !important; box-shadow:none !important;
}
.plaque-logo{display:block; width:100%; height:auto; margin:0 auto}
.plaque-tag{display:none !important} /* SVG already carries strapline */

/* =========================================================
   Nav — dotted “pill” chips under the plaque
   ========================================================= */
.flyer-nav{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  padding:4px 16px 22px;
}
.pill{
  display:inline-block;
  padding:8px 14px;
  border:2px dashed var(--ink);
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
  background:rgba(0,0,0,0); /* transparent */
  box-shadow:0 1px 0 var(--ink);
}
.pill:hover{transform:translateY(-1px); box-shadow:0 2px 0 var(--ink)}
/* Active (current page) */
.pill[aria-current="page"], .pill.is-active{
  border-style:solid; background:var(--pine); color:#fff;
}

/* =========================================================
   Cards / Bulletin Panels
   ========================================================= */
.card{
  border:3px solid var(--ink);
  border-radius:var(--radius);
  background:#fffef8;
  box-shadow:0 2px 0 var(--ink);
}
.card + .card{margin-top:18px}
.card-header{
  padding:14px;
  border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(90deg,#fffef8,#fffef8 5px,#fff 6px,#fff 7px);
}
.card-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:28px; margin:0; letter-spacing:1px;
}
.card-meta{
  font-family:'Special Elite', monospace;
  color:var(--cedar); margin-top:6px; font-size:13px;
}
.card-body{padding:18px; font-size:18px; line-height:1.75}
.dropcap:first-letter{
  float:left;
  font-family:'Playfair Display', serif;
  font-size:64px; line-height:.9;
  padding-right:10px; color:var(--pine); text-transform:uppercase;
}

/* =========================================================
   Sidebar Notes
   ========================================================= */
.note{
  border:2px solid var(--cedar);
  border-radius:var(--radius);
  background:#fff9f0;
  padding:14px;
  font-family:'Special Elite', monospace;
  font-size:15px;
}
.note h4{margin:0 0 6px 0; font-size:16px; letter-spacing:1px}
.note ul{margin:0; padding-left:18px}
.note li{margin:6px 0}

/* =========================================================
   Dispatch Card (standalone posts)
   ========================================================= */
.dispatch-card{
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 rgba(0,0,0,.15);
  padding:1.25rem 1.25rem 1.5rem;
  max-width:860px; margin:1.25rem auto;
}
.dispatch-title{
  font-family:'Playfair Display', serif;
  font-weight:800; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  margin:0 0 .25rem 0;
}
.dispatch-sub{
  font-family:'Special Elite', monospace;
  color:#3f3b33; font-size:.9rem; margin:.1rem 0 1rem 0;
}
.dispatch-body{font-family:'Libre Baskerville', serif; line-height:1.7; font-size:1rem}
.dispatch-body p{margin:.8rem 0}
.dispatch-body em{font-style:italic}
.dispatch-body strong{font-weight:700}
.dispatch-meta{
  font-family:'Libre Baskerville', serif;
  font-size:.85rem; color:#5a5346;
  border-top:1px solid rgba(0,0,0,.18);
  padding-top:.6rem; margin-top:.4rem;
}
.dispatch-link{
  display:inline-block; margin-top:1rem;
  font-family:'Libre Baskerville', serif;
  text-decoration:none; color:var(--pine);
  border-bottom:1px solid currentColor;
}
.dispatch-link:hover{color:var(--cedar)}

/* =========================================================
   Bigfoot Sidebar Card (clean)
   ========================================================= */
.bf-wrap{max-width:var(--container); margin:24px auto; padding:0 18px}
.bf-aside{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 rgba(0,0,0,.15);
  padding:18px 18px 16px;
}
.bf-hed{
  margin:0 0 .25rem 0;
  font-family:'Playfair Display',serif; font-weight:800;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem); letter-spacing:.01em;
}
.bf-sub{
  font-family:'Special Elite',monospace; color:#3f3b33;
  font-size:.92rem; margin:.1rem 0 .8rem 0;
}
.bf-txt{font-family:'Libre Baskerville',serif; line-height:1.7; margin:.8rem 0}
.bf-cta{
  display:inline-block; margin-top:.5rem; line-height:1;
  text-decoration:none; font-weight:700; font-family:'Libre Baskerville',serif;
  border:2px dashed var(--ink); border-radius:18px; padding:8px 14px;
  background:transparent; color:var(--ink);
  box-shadow:none;
}
.bf-cta:hover{border-style:solid; background:var(--pine); color:#fff}
/* Stamp badge */
.bf-stamp{
  float:right; margin:0 0 .4rem .8rem;
  width:92px; height:92px; flex:none;
  border:2px solid var(--ink); border-radius:999px;
  background:repeating-linear-gradient(135deg,#0000 0 9px,rgba(0,0,0,.04) 9px 18px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:4px 4px 0 rgba(0,0,0,.1);
}
.bf-stamp svg{width:62px; height:62px; display:block}

/* =========================================================
   Ornament + Footer
   ========================================================= */
.orn{display:block; margin:12px auto 16px; height:14px; width:auto}
.footer{
  max-width:var(--container); margin:16px auto 36px; padding:10px 14px;
  border-top:2px dashed var(--cedar); color:var(--cedar);
  font-family:'Special Elite', monospace;
}

/* =========================================================
   Responsive Tweaks
   ========================================================= */
@media (max-width:860px){
  .plaque{width:min(1200px,98vw)}
  .bf-stamp{float:none; margin:0 auto .6rem}
}
@media (max-width:640px){
  .pill{padding:7px 12px}
}

/* Bigfoot CTA — green pill */
.bf-cta{
  display:inline-block;
  padding:10px 16px;
  border:2px solid var(--ink);
  border-radius:18px;
  background:var(--pine);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-family:'Libre Baskerville', serif;
  line-height:1;
  box-shadow:4px 4px 0 rgba(0,0,0,.14);
  transition:transform .08s ease, filter .12s ease;
}
.bf-cta:hover{ filter:brightness(1.06); transform:translateY(-1px) }

/* === Classifieds Bulletin Board === */
.board-wrap{
  background:#d8c7a3;            /* cork-ish */
  background-image:
    radial-gradient(#bdac87 1px, transparent 1px),
    radial-gradient(#c7b690 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  border: 6px solid #4d3b2f;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 30px rgba(0,0,0,.18);
  padding: clamp(18px, 3vw, 32px);
  margin: 28px auto;
  max-width: var(--container);
}

.notes{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* Sticky notes */
.note{
  position: relative;
  background: #fffad1;
  color: #1c1c1a;
  padding: 16px 18px 22px;
  border-radius: 6px;
  width: 100%;
  min-height: 150px;
  box-shadow:
    0 12px 16px rgba(0,0,0,.18),
    0 2px 0 rgba(0,0,0,.15) inset;
  transform: rotate(-1.5deg);
  transition: transform .18s ease, box-shadow .18s ease;
  font-family: "Special Elite", "Libre Baskerville", serif;
}

.note:hover{
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 16px 26px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.12) inset;
}

/* little pushpin */
.note::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  width:16px; height:16px;
  background:#9b3e2a;
  border-radius:50%;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(0,0,0,.08);
  transform: translateX(-50%);
}

/* tape variant (optional class .taped) */
.note.taped::before{
  content:"";
  top:-8px; left:12px; right:auto;
  width:40px; height:14px;
  background:linear-gradient(90deg, #e8e8e8, #f7f7f7);
  border-radius:2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
  transform:none;
}

/* color variants */
.note.sun{ background:#fff4a8; }
.note.mint{ background:#eaffe3; }
.note.sky{  background:#e7f3ff; }
.note.rose{ background:#ffe7ee; }

/* slight randomness */
.notes .note:nth-child(2){ transform: rotate(1.8deg); }
.notes .note:nth-child(3){ transform: rotate(-2.2deg); }
.notes .note:nth-child(4){ transform: rotate(.8deg);  }
.notes .note:nth-child(5){ transform: rotate(-1deg); }
.notes .note:nth-child(6){ transform: rotate(2deg); }

/* note title + meta */
.note h3{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  letter-spacing:.02em;
}
.note p{ margin:.25rem 0 .6rem 0; font-size:.95rem; }
.note .meta{
  font-size:.82rem;
  opacity:.75;
}
.note a{
  color: inherit;
  text-decoration: underline dotted;
}

/* header tweak so board hugs nav */
.page-header-tight{ margin-bottom: 8px; }