/*
================================================================================
  style.css — Cardboard Castle theme stylesheet
================================================================================
  COLOUR PALETTE (CSS custom properties — change once, updates everywhere)
  ─────────────────────────────────────────────────────────────────────────
  --ink           Main text colour (near-black)
  --parchment     Page background (warm off-white)
  --parchment-deep Slightly darker parchment for post cards
  --pine          Mid-green, used for the about section background
  --pine-deep     Dark green, used for header, footer, and hero background
  --dice-red      Accent red, used for category labels, tag buttons, CTAs
  --dice-red-deep Darker red for button hover states
  --gold          Gold accent, used for borders, highlights, and nav hover
  --gold-soft     Lighter gold for eyebrow labels and secondary text on dark backgrounds
  --line          Subtle rule colour for borders and dividers

  TABLE OF CONTENTS
  ─────────────────
  1.  Base / reset
  2.  Typography
  3.  Texture helper (.paper-tex)
  4.  Header & nav
  5.  Hero (homepage)
  6.  Hero — latest post elements
  7.  Section common
  8.  Post grid & cards
  9.  Single post page
  10. Newsletter section
  11. Footer
  12. Page hero banner (About, Contact, Archive)
  13. Prose page (About)
  14. Stat block
  15. Contact page
  16. Archive search & tag filters
  17. Responsive overrides
================================================================================
*/

/* ============ 1. BASE / RESET ============ */
:root{
  --ink: #1c1812;
  --parchment: #efe4cb;
  --parchment-deep: #e3d4ad;
  --pine: #233c30;
  --pine-deep: #16271f;
  --dice-red: #8c2f2f;
  --dice-red-deep: #6e2222;
  --gold: #c9a227;
  --gold-soft: #e3c45f;
  --line: rgba(28,24,18,0.16);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; min-height: 100%}
body{
  margin:0;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Crimson Pro', serif;
  font-size: 18px;
  line-height: 1.6;
  /* Sticky footer: body fills the full viewport height */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* main grows to fill available space, pushing footer down */
main{ flex: 1; display: flex; flex-direction: column; }
/* prose-page (About, Contact) fills whatever height main has left */
.prose-page{ flex: 1; padding: 70px 28px 90px; }

/* ============ 2. TYPOGRAPHY ============ */
h1,h2,h3,.display{
  font-family: 'Cinzel', serif;
  letter-spacing: 0.02em;
  margin: 0;
}

.mono{
  font-family: 'Space Mono', monospace;
}

a{ color: inherit; }

/* ============ 3. TEXTURE HELPER ============ */
/* Add class="paper-tex" to any section for the subtle dot-grid background */
.paper-tex{
  background-image:
    radial-gradient(rgba(28,24,18,0.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ============ 4. HEADER & NAV ============ */
/* To make the header non-sticky, remove `position: sticky; top:0;` below */
header{
  position: sticky; top:0; z-index: 50;
  background: var(--pine-deep);
  border-bottom: 3px solid var(--gold);
}
.nav-wrap{
  max-width: 1180px; margin: 0 auto;
  display:flex; align-items:center; justify-content: space-between;
  padding: 16px 28px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color: var(--parchment);
  text-decoration:none;
}
.brand-mark{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ font-size: 20px; font-weight:700; }
.brand-text small{ display:block; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.18em; color: var(--gold-soft); font-weight:400; margin-top:2px;}

nav ul{ list-style:none; display:flex; gap: 30px; margin:0; padding:0; }
nav a{
  text-decoration:none; color: var(--parchment); opacity:0.85;
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: all .15s ease;
}
nav a:hover{ opacity:1; border-bottom-color: var(--gold); }

/* ============ 5. HERO (homepage) ============ */
/* Background colour: --pine-deep. Change padding to adjust height. */
.hero{
  position: relative;
  background: var(--pine-deep);
  color: var(--parchment);
  overflow: hidden;
  padding: 90px 28px 70px;
}
.hex-bg{
  position:absolute; inset:0; opacity: 0.08; pointer-events:none;
}
.hero-inner{
  position: relative; max-width: 760px; margin: 0 auto;
}
.eyebrow{
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.22em;
  color: var(--gold-soft); text-transform: uppercase; margin-bottom: 18px; display:block;
}
.hero h1{
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.04;
  font-weight: 900;
  color: var(--parchment);
}
.hero h1 em{ font-style: normal; color: var(--gold); }
.hero p.lead{
  margin-top: 22px; max-width: 46ch;
  font-size: 19px; color: rgba(239,228,203,0.82);
}
.hero-ctas{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
.btn{
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding: 14px 26px; text-decoration:none; display:inline-block; border:2px solid transparent;
  cursor:pointer; transition: transform .12s ease, background .15s ease;
}
.btn-primary{ background: var(--dice-red); color: var(--parchment); border-color: var(--dice-red); }
.btn-primary:hover{ background: var(--dice-red-deep); transform: translateY(-2px); }
.btn-ghost{ border-color: var(--gold); color: var(--gold-soft); background:transparent; }
.btn-ghost:hover{ background: rgba(201,162,39,0.1); transform: translateY(-2px); }

/* ============ 7. SECTION COMMON ============ */
/* Shared padding and inner-width for all <section> blocks */
section{ padding: 76px 28px; }
.section-inner{ max-width: 1180px; margin: 0 auto; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom: 44px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(28px,3.4vw,38px); }
.section-head .tag{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--dice-red); border-bottom:1px solid var(--dice-red); padding-bottom:3px; }

/* ============ 8. POST GRID & CARDS ============ */
/* Grid is 3 columns on desktop, 1 column on mobile (see section 17) */
.post-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.post-card{
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  position:relative;
  padding: 26px 24px 24px;
  display:flex; flex-direction:column; gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
  color: var(--ink);
}
.post-card::before{
  content:""; position:absolute; top:14px; right:14px; width:12px; height:12px; border-radius:50%;
  background: var(--parchment); box-shadow: inset 0 0 0 1.5px var(--line);
}
.post-card:hover{ transform: translateY(-5px); box-shadow: 0 14px 28px rgba(28,24,18,0.16); }
.post-meta{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--dice-red); }
.post-card h3{ font-family:'Cinzel'; font-size: 21px; line-height:1.28; }
.post-card p{ color: rgba(28,24,18,0.72); font-size: 15.5px; margin:0; flex-grow:1; }
.post-foot{ display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:11.5px; color: rgba(28,24,18,0.55); border-top: 1px dashed var(--line); padding-top: 12px; }

/* ============ 9. SINGLE POST PAGE ============ */
/* max-width controls the readable line length. 740px ≈ 70 chars. */
.post-single{ max-width: 740px; margin: 0 auto; padding: 70px 28px 90px; }
.post-single .post-meta{ margin-bottom: 14px; display:block; }
.post-single h1{ font-size: clamp(30px,4vw,46px); line-height:1.12; margin-bottom: 18px; }
.post-single .post-sub{ font-family:'Space Mono',monospace; font-size:13px; color: rgba(28,24,18,0.55); margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px dashed var(--line); }
.post-body{ font-size: 18.5px; }
.post-body p{ margin: 0 0 1.3em; }
.post-body h2{ font-size: 26px; margin: 1.6em 0 0.6em; }
.post-body h3{ font-size: 21px; margin: 1.4em 0 0.5em; }
.post-body a{ color: var(--dice-red); text-decoration: underline; }
.post-body blockquote{ border-left: 3px solid var(--gold); margin: 1.6em 0; padding: 4px 0 4px 22px; color: rgba(28,24,18,0.7); font-style: italic; }
.post-body img{ max-width:100%; height:auto; }
.post-body code{ font-family:'Space Mono',monospace; background: var(--parchment-deep); padding: 2px 6px; font-size:0.9em; }
.post-back{ display:inline-block; margin-bottom: 30px; font-family:'Space Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color: var(--dice-red); text-decoration:none; }

/* ============ 10. NEWSLETTER SECTION ============ */
/* Background: --dice-red. To re-enable this section, see newsletter.html */
.newsletter{
  background: var(--dice-red);
  color: var(--parchment);
  text-align:center;
}
.newsletter .section-inner{ max-width: 640px; }
.newsletter h2{ color: var(--parchment); font-size: clamp(26px,3vw,34px); }
.newsletter p{ color: rgba(239,228,203,0.88); margin-top: 14px; }
.nl-form{ display:flex; gap: 12px; margin-top: 28px; flex-wrap:wrap; justify-content:center; }
.nl-form input{
  flex:1; min-width: 220px; padding: 14px 16px; border: 2px solid var(--parchment);
  background: transparent; color: var(--parchment); font-family:'Space Mono',monospace; font-size:14px;
}
.nl-form input::placeholder{ color: rgba(239,228,203,0.6); }
.nl-form button{
  background: var(--pine-deep); color: var(--gold-soft); border: 2px solid var(--pine-deep);
  font-family:'Space Mono',monospace; text-transform:uppercase; letter-spacing:0.06em; font-size:13px;
  padding: 14px 24px; cursor:pointer; transition: background .15s ease;
}
.nl-form button:hover{ background: #0c1712; }
.nl-note{ margin-top:14px; font-size:12px; font-family:'Space Mono',monospace; color: rgba(239,228,203,0.7); }

/* ============ 11. FOOTER ============ */
footer{ background: var(--pine-deep); color: rgba(239,228,203,0.7); padding: 50px 28px 30px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.footer-inner .brand-text{ color: var(--parchment); }
.footer-links{ display:flex; gap:24px; list-style:none; padding:0; margin:0; font-family:'Space Mono',monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em;}
.footer-links a{ text-decoration:none; color: rgba(239,228,203,0.7); }
.footer-links a:hover{ color: var(--gold-soft); }
.footer-bottom{ max-width:1180px; margin: 30px auto 0; border-top:1px solid rgba(239,228,203,0.15); padding-top:18px; font-family:'Space Mono',monospace; font-size:11.5px; color: rgba(239,228,203,0.45); }

/* ============ 17. RESPONSIVE OVERRIDES ============ */
/* Breakpoint: ≤880px — collapses multi-column layouts and hides desktop nav */
@media (max-width: 880px){
  .post-grid{ grid-template-columns: 1fr; }
  nav ul{ display:none; }
}

/* ============ 12. PAGE HERO BANNER (About, Contact, Archive) ============ */
/* Shared banner used at the top of non-homepage content pages */
.page-hero{
  position: relative;
  background: var(--pine-deep);
  color: var(--parchment);
  overflow: hidden;
  padding: 64px 28px 52px;
}
.page-hero-inner{
  position: relative; max-width: 760px; margin: 0 auto;
}
.page-hero h1{
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.1;
  color: var(--parchment);
  margin-top: 10px;
}

/* ============ 6. HERO — LATEST POST ELEMENTS ============ */
.hero-latest-label{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.hero-cat{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  background: var(--dice-red); color: var(--parchment); padding: 3px 10px;
}
.hero-post-link{
  text-decoration:none; color: var(--parchment);
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.hero-post-link:hover{ border-bottom-color: var(--gold); }
.hero-meta{ color: rgba(239,228,203,0.6); font-size:13px; margin-top:14px; letter-spacing:0.04em; }

/* ============ 13. PROSE PAGE (About) ============ */
/* Single-column layout — used by the About page */
.prose-single{ max-width: 740px; margin: 0 auto; font-size: 18.5px; }
.prose-single p{ margin: 0 0 1.3em; }
.prose-single h2{ font-size: 24px; margin: 1.8em 0 0.6em; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.prose-single h3{ font-size: 20px; margin: 1.4em 0 0.4em; }
/* Two-column layout — kept if you want to restore the statblock later */
.prose-wrap{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start;
}
.prose-body{ font-size: 18.5px; }
.prose-body p{ margin: 0 0 1.3em; }
.prose-body h2{ font-size: 24px; margin: 1.8em 0 0.6em; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.prose-body h3{ font-size: 20px; margin: 1.4em 0 0.4em; }

/* ============ 14. STAT BLOCK ============ */
/* The RPG-style info panel on the About page */
.statblock{
  background: var(--parchment-deep);
  border: 1px solid var(--line);
  padding: 26px 28px;
  position: sticky; top: 90px;
}
.statblock h4{
  font-family:'Cinzel'; color: var(--dice-red); font-size: 14px; letter-spacing:0.1em;
  border-bottom: 2px solid var(--dice-red); padding-bottom: 10px; margin-bottom: 14px;
  text-transform:uppercase; margin-top:0;
}
.stat-row{ display:flex; justify-content:space-between; gap:12px; font-family:'Space Mono',monospace; font-size:12.5px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.stat-row span:first-child{ color: rgba(28,24,18,0.55); flex-shrink:0; }
.stat-row span:last-child{ color: var(--ink); text-align:right; }

/* ============ 15. CONTACT PAGE ============ */
.contact-wrap{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}
.contact-lead{ font-size: 19px; margin: 0 0 36px; max-width: 44ch; }
.contact-channels{ display:flex; flex-direction:column; gap:24px; }
.contact-channel{ display:flex; flex-direction:column; gap:4px; }
.channel-label{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--dice-red); }
.channel-value{ font-family:'Cinzel'; font-size:16px; text-decoration:none; color: var(--ink); border-bottom:1px solid var(--line); padding-bottom:3px; transition: border-color .15s ease; }
.channel-value:hover{ border-bottom-color: var(--dice-red); }
.channel-note{ font-family:'Space Mono',monospace; font-size:12px; color: rgba(28,24,18,0.55); }

.contact-form-title{ font-size:22px; margin: 0 0 24px; }
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.field-group{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: rgba(28,24,18,0.65); }
.contact-form input,
.contact-form select,
.contact-form textarea{
  background: var(--parchment-deep); border: 1px solid var(--line);
  padding: 12px 14px; font-family:'Crimson Pro',serif; font-size:17px; color: var(--ink);
  transition: border-color .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline:none; border-color: var(--gold); }
.contact-form textarea{ resize:vertical; min-height:120px; }

/* ============ 16. ARCHIVE SEARCH & TAG FILTERS ============ */
/* Search and filter UI on the /posts/ archive page */
.archive-section{ padding-top: 52px; }
.archive-search-row{
  display:flex; align-items:center; gap:18px; margin-bottom:28px; flex-wrap:wrap;
}
.search-box{
  display:flex; align-items:center; gap:10px;
  background: var(--parchment-deep); border: 1px solid var(--line);
  padding: 10px 16px; flex:1; max-width:480px;
}
.search-icon{ font-size:20px; color: rgba(28,24,18,0.45); line-height:1; }
.search-box input{
  border:none; background:transparent; font-family:'Crimson Pro',serif; font-size:17px;
  color: var(--ink); width:100%;
}
.search-box input:focus{ outline:none; }
.archive-count{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(28,24,18,0.5); }

.tag-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.tag-btn{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.07em; text-transform:uppercase;
  padding: 7px 16px; background:transparent; border: 1px solid var(--line);
  color: rgba(28,24,18,0.7); cursor:pointer; transition: all .12s ease;
}
.tag-btn:hover{ border-color: var(--dice-red); color: var(--dice-red); }
.tag-btn.active{ background: var(--dice-red); border-color: var(--dice-red); color: var(--parchment); }

.post-tags{ display:flex; flex-wrap:wrap; gap:6px; padding-top: 4px; }
.post-tag{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  background: var(--parchment); border: 1px solid var(--line); padding: 2px 8px; color: rgba(28,24,18,0.6);
}

.archive-empty{
  font-family:'Space Mono',monospace; font-size:14px; color: rgba(28,24,18,0.5);
  padding: 50px 0; text-align:center; letter-spacing:0.04em;
}

@media (max-width: 880px){
  .prose-wrap{ grid-template-columns: 1fr; }
  .contact-wrap{ grid-template-columns: 1fr; }
  .statblock{ position:static; }
}