:root {
  --paper: #f9dfa1;
  --green: #1d9717;
  --red-brown: #661204;
  --text: #1b1208;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 30% 12%, #ffefba 0, var(--paper) 54%, #efce87 100%); color: var(--text); font-family: Georgia, serif; }
.site-header { padding-top: 8px; }
.site-header h1 { margin: 0 0 42px; text-align: center; font-size: 34px; }
.navigation-wrap, .page-content { width: min(calc(100% - 32px), 1000px); margin: auto; }
.navigation-wrap { position: relative; min-height: 45px; display: flex; align-items: center; justify-content: center; background: linear-gradient(100deg, #e7b43c, #f6d77a 48%, #dfac35); clip-path: polygon(2% 0, 99% 0, 100% 95%, 0 100%); }
.site-nav { display: flex; }
.site-nav a { padding: 4px 9px; color: var(--red-brown); text-decoration: none; font: bold 14px Arial, sans-serif; border-right: 2px solid #7b1f09; }
.site-nav a:last-child { border: 0; }
.site-nav a:hover { color: var(--green); }
.mobile-brand, .menu-toggle { display: none; }
.hero { position: relative; height: 365px; margin-top: 12px; overflow: hidden; border: 7px solid transparent; background: url('kshar-sutra-reference.png') -175px -139px / 1312px auto; box-shadow: 0 3px 7px #71380d85; }
.hero::after { content: ""; position: absolute; inset: 0; border: 4px solid #75350d96; pointer-events: none; }
.hero p { position: absolute; z-index: 1; top: 37px; left: 15px; margin: 0; padding: 7px 17px; color: #fff9eb; background: #69433b9c; font-size: 29px; }
.eyebrow { margin: 75px 0 32px; color: var(--green); font-size: 30px; font-style: italic; }
.article-content { padding-bottom: 38px; font-size: 16px; line-height: 1.22; }
.article-content h2 { margin: 0 0 23px; font-size: 34px; line-height: 1.15; }
.article-content h3 { margin: 25px 0 16px; font-size: 26px; }
.article-content h4 { margin: 24px 0 16px; font-size: 17px; }
.article-content p { margin: 0 0 19px; }
.article-content ul { margin: 0 0 60px; padding-left: 42px; }
.lead-grid { display: grid; grid-template-columns: 1.55fr .85fr; align-items: start; gap: 30px; }
.fistula-image { height: 258px; margin-top: 0; border: 4px solid #fff; background: url('kshar-sutra-reference.png') -773px -609px / 1312px auto; box-shadow: 0 0 0 1px #c7a96c; }
footer { padding: 37px 20px; color: #700e02; background: #cfb36acc; text-align: center; font: bold 14px/21px Arial, sans-serif; }

@media (max-width: 760px) {
  .site-header { padding-top: 20px; }
  .site-header h1 { margin-bottom: 25px; font-size: 27px; }
  .navigation-wrap, .page-content { width: calc(100% - 28px); }
  .navigation-wrap { min-height: 54px; padding: 0 16px; justify-content: space-between; clip-path: none; border-radius: 4px; }
  .mobile-brand { display: block; color: var(--red-brown); font: bold 18px Georgia, serif; text-decoration: none; }
  .menu-toggle { width: 43px; height: 38px; display: grid; align-content: center; gap: 5px; padding: 0 10px; border: 0; border-radius: 4px; background: #732407; }
  .menu-toggle span { height: 3px; background: #fff; border-radius: 2px; }
  .site-nav { display: none; position: absolute; z-index: 5; top: 54px; left: 0; width: 100%; padding: 8px; background: #f3cc65; box-shadow: 0 5px 10px #5c310766; }
  .site-nav.open { display: flex; flex-direction: column; }
  .site-nav a { padding: 10px; border-right: 0; border-bottom: 1px solid #bd8421; }
  .hero { height: 36.5vw; min-height: 125px; max-height: 270px; border-width: 4px; background-size: calc((100vw - 28px) * 1.312) auto; background-position: calc((100vw - 28px) * -.175) calc((100vw - 28px) * -.139); }
  .hero p { top: 17%; left: 3px; padding: 4px 8px; font-size: clamp(13px, 3.8vw, 23px); }
  .eyebrow { margin: 35px 0 24px; font-size: 27px; }
  .article-content { font-size: 17px; line-height: 1.35; }
  .article-content h2 { font-size: 30px; }
  .article-content h3 { margin-top: 29px; font-size: 25px; }
  .lead-grid { grid-template-columns: 1fr; gap: 14px; }
  .fistula-image { order: -1; height: min(65vw, 300px); background-size: 150vw auto; background-position: 90% 34%; }
  .article-content ul { margin-bottom: 36px; padding-left: 26px; }
  footer { padding: 28px 14px; font-size: 12px; line-height: 17px; }
}