/* =========================================================
   GLOBAL RESET
========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: url("/assets/cronebg4.jpg") repeat #f7efe3;
  color: #111;
  position: relative;
  z-index: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-wrap,
.subpage-grid,
.sidebar-ads,
.ad-box,
.ad-box-inner {
  position: relative;
  z-index: 2;
}

/* =========================================================
   SITE HEADER
========================================================= */

.site-header {
  padding: 14px 20px 0 0;
}

.site-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.site-logo {
  flex-shrink: 0;
  line-height: 0;
  position: relative;
  transform: rotate(-1deg);
}

.site-logo img {
  width: clamp(170px, 17vw, 300px);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.22));
}

.site-logo[data-page]::after {
  content: attr(data-page);
  position: absolute;
  right: -8px;
  bottom: 10px;
  padding: 5px 9px;
  background: #ffd83b;
  border: 2px solid #111;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  transform: rotate(6deg);
}

.header-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-nav {
  width: 100%;
  line-height: 0;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  line-height: 0;
}

.nav-list li {
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: block;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.nav-list a:hover {
  transform: translateY(-3px) rotate(-1deg);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.28));
}

.nav-list img {
  width: auto;
  max-height: 64px;
}

/* =========================================================
   SUBPAGE TITLE STRIP
========================================================= */

.subpage-title-strip {
  margin-top: 0;
  max-width: 1080px;
  line-height: 0;
}

.subpage-title-strip img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  object-position: left top;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.20));
}

/* =========================================================
   MAIN PAGE / GRID
========================================================= */

.page-wrap {
  max-width: 1500px;
  margin: 28px auto 60px;
  padding: 0 24px;
}

.subpage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px 320px;
  gap: 28px;
  align-items: start;
}

.content-panel {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* =========================================================
   SIDE IMAGE COLUMN
========================================================= */

.side-image-column {
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.side-image-column img {
  width: 250px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   ADS
========================================================= */

.sidebar-ads {
  width: 320px;
  min-width: 320px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.ad-box {
  width: 100%;
  min-width: 0;
  min-height: 300px;
  border: 1px solid #111;
  background:
    repeating-linear-gradient(
      45deg,
      #f4ead7,
      #f4ead7 12px,
      #efe1c8 12px,
      #efe1c8 24px
    );
  background-color: #f4ead7;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  padding: 48px 10px 16px;
  overflow: visible;
}

.ad-box.tall {
  min-height: 600px;
}

.ad-box::before {
  content: "ADVERTISEMENT";
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.78rem;
  letter-spacing: 1px;
  font-weight: bold;
  color: rgba(0,0,0,0.55);
  z-index: 1;
}

.ad-box-inner {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 220px;
  border: 1px dashed rgba(0,0,0,0.35);
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(0,0,0,0.65);
  background: rgba(255,255,255,0.20);
  position: relative;
}

.ad-box.tall .ad-box-inner {
  min-height: 520px;
}

.ad-box-inner > ins.adsbygoogle,
.adsbygoogle {
  display: block !important;
  width: 100% !important;
  min-width: 250px;
  margin: 0;
  padding: 0;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  margin-top: 40px;
  padding: 0;
  line-height: 0;
}

.footer-image-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  line-height: 0;
}

.footer-image-row img {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.footer-left {
  width: 33%;
  height: auto;
}

.footer-center {
  width: 34%;
  height: auto;
}

.footer-right-wrapper {
  position: relative;
  width: 33%;
  line-height: 0;
  align-self: flex-end;
}

.footer-right {
  display: block;
  width: 100%;
  height: auto;
}

.footer-overlay-link {
  position: absolute;
  display: block;
  z-index: 10;
}

.footer-privacy {
  left: 5%;
  top: 25%;
  width: 22%;
  height: 15%;
}

.footer-terms {
  left: 36%;
  top: 25%;
  width: 15%;
  height: 15%;
}

.footer-sitemap {
  left: 67%;
  top: 25%;
  width: 30%;
  height: 15%;
}

.footer-overlay-link:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* =========================================================
   BLOG POST PAPER
========================================================= */

.post-paper {
  --post-ink: #211515;
  --post-blood: #6e1118;
  --post-blood-dark: #3d090d;
  --post-paper: #f3dfbd;
  --post-paper-light: #fff1d2;
  --post-aged: #c49a67;
  --post-shadow: rgba(20, 6, 8, .35);

  position: relative;
  isolation: isolate;
  min-width: 0;
  color: var(--post-ink);
  padding: clamp(1.35rem, 3.5vw, 2.7rem);

  background:
    linear-gradient(
      90deg,
      rgba(110,17,24,.12),
      transparent 9%,
      transparent 91%,
      rgba(110,17,24,.12)
    ),
    radial-gradient(
      circle at 10% 10%,
      rgba(255,255,255,.38),
      transparent 16rem
    ),
    linear-gradient(
      180deg,
      var(--post-paper-light),
      var(--post-paper)
    );

  border: 4px solid var(--post-blood-dark);

  box-shadow:
    0 16px 30px var(--post-shadow),
    inset 0 0 0 2px rgba(255,255,255,.2);

  clip-path:
    polygon(
      0 1.2%,
      3% 0,
      8% 1.1%,
      15% .3%,
      22% 1.4%,
      31% .4%,
      39% 1.2%,
      50% .2%,
      61% 1.1%,
      70% .4%,
      81% 1.3%,
      91% .2%,
      100% 1.1%,
      99.2% 8%,
      100% 17%,
      99.1% 29%,
      100% 38%,
      99.3% 49%,
      100% 62%,
      99.1% 73%,
      100% 84%,
      99.2% 96%,
      96% 100%,
      88% 98.8%,
      78% 100%,
      67% 98.9%,
      55% 100%,
      44% 98.8%,
      34% 100%,
      24% 98.7%,
      14% 100%,
      6% 98.8%,
      0 100%,
      .8% 90%,
      0 78%,
      .8% 66%,
      0 54%,
      .9% 43%,
      0 31%,
      .8% 18%
    );
}

.post-paper::before {
  content: "";
  position: absolute;
  inset: .8rem;
  border: 2px dashed rgba(61,9,13,.45);
  pointer-events: none;
  z-index: -1;
}

.post-paper .post-kicker,
.post-paper .filed-under {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--post-blood);
  font-weight: 900;
}

.post-paper .post-kicker {
  margin: 0 0 .3rem;
  font-size: .95rem;
  line-height: 1.2;
}

.post-paper h1 {
  font-family: 'Protest Revolution', cursive;
  margin: 0 0 .4rem;
  color: var(--post-blood-dark);
  font-size: clamp(2rem, 4.8vw, 4.1rem);
  line-height: .95;
  letter-spacing: .01em;
  text-shadow: 2px 2px 0 rgba(196,154,103,.55);
}

.post-paper .filed-under {
  margin: 0 0 1.35rem;
  font-size: .82rem;
  line-height: 1.45;
}

.post-paper p {
  max-width: 920px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.78;
  margin: 0 0 1.1rem;
}

.post-paper p::first-letter {
  color: var(--post-blood);
  font-weight: 900;
}

.post-paper .signoff {
  margin-top: 1.6rem !important;
  font-family: 'Protest Revolution', cursive;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height: 1.1;
  font-weight: 900;
  color: var(--post-blood-dark);
  text-transform: uppercase;
  transform: rotate(-1deg);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
  .subpage-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  .sidebar-ads {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 24px;
  }

  .ad-box,
  .ad-box.tall {
    width: 100%;
    min-width: 250px;
    min-height: 300px;
  }

  .ad-box.tall .ad-box-inner {
    min-height: 220px;
  }
}

@media (max-width: 1050px) {
  .site-header-inner {
    flex-direction: column;
    padding-left: 18px;
  }

  .header-right {
    width: 100%;
  }

  .subpage-title-strip img {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .subpage-grid {
    grid-template-columns: 1fr;
  }

  .side-image-column {
    width: 100%;
  }

  .side-image-column img {
    width: min(250px, 100%);
  }

  .sidebar-ads {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .ad-box,
  .ad-box.tall {
    width: min(320px, 100%);
    min-width: 250px;
    min-height: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  .ad-box-inner,
  .ad-box.tall .ad-box-inner {
    width: 100%;
    min-width: 250px;
    min-height: 220px;
  }
}

@media (max-width: 700px) {
  .site-header {
    padding: 12px;
  }

  .site-logo img {
    width: 190px;
  }

  .nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .nav-list img {
    width: 100%;
    max-height: 70px;
    object-fit: contain;
  }

  .page-wrap {
    padding: 0 14px;
    margin-top: 20px;
  }

  .footer-image-row {
    flex-direction: column;
  }

  .footer-left,
  .footer-center,
  .footer-right-wrapper {
    width: 100%;
  }

  .post-paper {
    padding: 24px;
    clip-path: none;
    border-radius: 14px;
  }

  .post-paper::before {
    inset: .55rem;
  }
}

@media (max-width: 430px) {
  .nav-list {
    grid-template-columns: 1fr;
  }
}