/* =========================================================
   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;
}


/* =========================================================
   RELATED POSTS / MORE CRONE CHAOS
   ========================================================= */

.related-posts {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;

    background: rgba(255, 241, 210, 0.72);

    border: 3px solid var(--post-blood-dark);
    border-radius: 10px;

    box-shadow:
        4px 5px 0 rgba(61, 9, 13, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.related-posts > h2 {
    margin: 0 0 1.25rem;

    font-family: 'Protest Revolution', cursive;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1;

    color: var(--post-blood-dark);

    border-bottom: 2px solid rgba(61, 9, 13, 0.35);
    padding-bottom: 0.65rem;
}


/* Three related articles across */

.related-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}


/* Individual related article */

.related-post {
    min-width: 0;
}

.related-post h3 {
    margin: 0 0 0.5rem;

    font-family: 'Protest Revolution', cursive;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.1;

    color: var(--post-blood-dark);
}

.related-post h3 a:hover,
.related-post h3 a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.related-post p {
    margin: 0 0 0.75rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}


/* Read the rant link */

.related-post-link {
    display: inline-block;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-weight: 900;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--post-blood);

    border-bottom: 2px solid var(--post-blood);
    padding-bottom: 2px;
}

.related-post-link:hover,
.related-post-link:focus-visible {
    color: var(--post-blood-dark);
    border-color: var(--post-blood-dark);
}


/* =========================================================
   UNUSUAL SUSPECTS / MEDICAL ARTICLE COMPONENTS
   ========================================================= */

/* Small intro above suspect name */
.article-kicker {
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suspect-heading {
    margin-top: 0;
}


/* =========================================================
   UNUSUAL SUSPECTS SERIES INTRO
   ========================================================= */

.series-intro {
    margin: 0 0 2.25rem;
    padding: 1.35rem 1.5rem;

    background: #171717;
    color: #f3e4c2;

    border: 3px solid #a92529;
    border-left-width: 9px;

    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.14);
}

.series-intro > strong {
    display: block;
    margin-bottom: 0.6rem;

    color: #d53b3e;
    font-size: 1.35rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.series-intro p {
    margin: 0;
    color: inherit;
    font-size: 1.05rem;
    line-height: 1.6;
}


/* =========================================================
   MEDICAL DISCLAIMER
   ========================================================= */

.crone-disclaimer {
    display: flex;
    gap: 1rem;
    margin: 2.5rem 0;
    padding: 1.25rem 1.4rem;

    background: #f4e4bd;
    border: 2px solid #222;
    border-left: 8px solid #b3262d;
    border-radius: 3px;

    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.crone-disclaimer-icon {
    flex: 0 0 auto;
    font-size: 2rem;
    line-height: 1;
}

.crone-disclaimer-content {
    flex: 1;
}

.crone-disclaimer h2 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.2;
}

.crone-disclaimer p {
    margin: 0 0 0.65rem;
}

.crone-disclaimer p:last-child {
    margin-bottom: 0;
}


@media (max-width: 600px) {
    .series-intro {
        padding: 1rem;
    }
}

/* =========================================================
   SYMPTOM SUMMARY
   ========================================================= */

.symptom-summary {
    margin: 2.25rem 0;
    padding: 1.5rem;

    background: #f2e5c7;
    border: 1px solid #9c8967;
}

.symptom-summary > h2 {
    margin-top: 0;
}

.symptom-group {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.symptom-group:last-child {
    border-bottom: 0;
}

.symptom-group h3 {
    margin: 0 0 0.35rem;
}

.symptom-group p {
    margin: 0;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.crone-checklist {
    margin: 2rem 0;
    padding: 1.5rem;

    background: #faf5e8;
    border: 2px dashed #333;
}

.crone-checklist h3:first-child {
    margin-top: 0;
}

.crone-checklist ol {
    margin-bottom: 1rem;
}

.checklist-warning {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid #b3262d;
    font-weight: 700;
}


/* =========================================================
   NUMBERED LISTS
   ========================================================= */

.crone-numbered-list li {
    margin-bottom: 1rem;
}


/* =========================================================
   CRONE VERDICT
   ========================================================= */

.crone-verdict {
    margin: 3rem auto;
    padding: 1.5rem;
    max-width: 650px;

    text-align: center;
    border: 5px solid #a92529;
    background: #171717;

    transform: rotate(-1deg);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.18);
}

.crone-verdict .verdict-label {
    display: block;
    margin-bottom: 0.5rem;

    color: #eee;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
}

.crone-verdict strong {
    display: block;

    color: #d53b3e;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.1;
    text-transform: uppercase;
}


/* =========================================================
   RESEARCH / FURTHER READING
   ========================================================= */

.further-reading {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 3px solid #222;
}

.reading-warning {
    font-style: italic;
}

.research-links {
    padding-left: 1.25rem;
}

.research-links li {
    margin-bottom: 0.65rem;
}

.research-links a {
    overflow-wrap: anywhere;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .crone-disclaimer {
        display: block;
        padding: 1rem;
    }

    .crone-disclaimer-icon {
        margin-bottom: 0.65rem;
    }

    .symptom-summary,
    .crone-checklist {
        padding: 1rem;
    }

    .crone-verdict {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}


/* =========================================================
   RELATED POSTS - MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .related-posts {
        margin-top: 2rem;
        padding: 1.25rem;
    }

    .related-post-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .related-post + .related-post {
        border-top: 1px solid rgba(61, 9, 13, 0.25);
        padding-top: 1.25rem;
    }

}


/* =========================================================
   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%;
  }

  /*
   * Keep the torn-paper treatment on mobile.
   *
   * The old mobile rule used:
   *     clip-path: none;
   *     border-radius: 14px;
   *
   * That removed the jagged Crone paper edge below 700px.
   */
  .post-paper {
    padding: 24px 20px 30px;
    border-radius: 0;

    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 12px 24px var(--post-shadow),
      inset 0 0 0 2px rgba(255,255,255,.2);

    clip-path:
      polygon(
        0 0.7%,
        5% 0,
        12% 0.8%,
        20% 0.2%,
        29% 0.9%,
        39% 0.2%,
        50% 0.8%,
        61% 0.1%,
        72% 0.9%,
        82% 0.2%,
        92% 0.8%,
        100% 0.2%,

        99.2% 8%,
        100% 18%,
        99.3% 30%,
        100% 42%,
        99.2% 54%,
        100% 66%,
        99.2% 78%,
        100% 90%,

        99% 99.4%,
        92% 100%,
        82% 99.2%,
        71% 100%,
        60% 99.1%,
        50% 100%,
        39% 99.2%,
        28% 100%,
        17% 99.1%,
        7% 100%,
        0 99.3%,

        .8% 90%,
        0 78%,
        .8% 66%,
        0 54%,
        .8% 42%,
        0 30%,
        .8% 18%
      );
  }

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

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